/* Estilos Específicos para Evolución */
    .hidden {
        display: none !important;
    }

    .theory-card {
        background: rgba(25, 25, 35, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 25px;
        border-radius: 15px;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .theory-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
        border-color: var(--accent-color);
    }

    .theory-card h3 {
        color: var(--accent-color);
        margin-top: 15px;
    }

    .card-img-container {
        width: 100%;
        height: 300px;
        /* Increased from 150px */
        overflow: hidden;
        border-radius: 10px;
        margin-bottom: 15px;
    }

    .card-img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        /* Focus on faces */
        transition: transform 0.5s;
    }

    /* Detail Panel Layout */
    .detail-flex {
        display: flex;
        flex-direction: column;
        /* Default mobile */
        gap: 30px;
        align-items: center;
    }

    @media (min-width: 768px) {
        .detail-flex {
            flex-direction: row;
            /* Desktop: Image Left, Text Right */
            align-items: flex-start;
        }

        .detail-image-wrapper {
            max-width: 40%;
            flex-shrink: 0;
        }

        .detail-image {
            border-radius: 10px;
            max-width: 100%;
            max-height: 55vh;
            object-fit: contain;
        }

        .detail-text {
            flex: 1;
            text-align: left;
        }
    }

    .theory-card:hover .card-img-container img {
        transform: scale(1.1);
    }

    .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 5px;
    }

    .legend-item {
        color: #ccc;
        font-size: 0.9rem;
    }

    .badgex {
        background: rgba(214, 48, 49, 0.2);
        color: #ff7675;
        border: 1px solid #d63031;
        padding: 5px 15px;
        border-radius: 20px;
        font-family: 'Orbitron';
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .theory-card h4 {
        color: #aaa;
        font-style: italic;
        margin-bottom: 15px;
    }

    .hominid-scroll-container {
        display: flex;
        overflow-x: auto;
        gap: 20px;
        padding: 20px;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(20, 20, 30, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
        scrollbar-width: thin;
        scrollbar-color: var(--accent-color) transparent;
    }

    /* Anatomy Grid */
    .anatomy-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }

    .anatomy-card {
        background: rgba(20, 20, 30, 0.6);
        border-left: 4px solid #ff9f43;
        padding: 25px;
        border-radius: 8px;
    }

    .anatomy-icon {
        font-size: 3rem;
        margin-bottom: 15px;
    }

    .counter-text {
        font-family: 'Orbitron', monospace;
        font-size: min(2.5rem, 8vw);
        color: #fff;
        margin-top: 10px;
        word-break: break-all;
    }

    /* Cognitive Section Animations */
    .cog-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 15px 30px rgba(0,0,0,0.5);
    }
    .cog-card:nth-child(1):hover { border-color: #e67e22; box-shadow: 0 10px 30px rgba(230, 126, 34, 0.4); }
    .cog-card:nth-child(2):hover { border-color: #3498db; box-shadow: 0 10px 30px rgba(52, 152, 219, 0.4); }
    .cog-card:nth-child(3):hover { border-color: #9b59b6; box-shadow: 0 10px 30px rgba(155, 89, 182, 0.4); }
    .cog-card:hover .cog-glow { opacity: 1; }

    @keyframes flicker {
        0% { opacity: 0.8; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.1); text-shadow: 0 0 30px #e67e22; }
        100% { opacity: 0.9; transform: scale(1); }
    }
    .flame-anim { animation: flicker 1.5s infinite alternate; }

    @keyframes floaty {
        0% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
        100% { transform: translateY(0); }
    }
    .float-anim { animation: floaty 3s ease-in-out infinite; }

    @keyframes pulsy {
        0% { transform: scale(1); opacity: 0.8; }
        50% { transform: scale(1.05); opacity: 1; text-shadow: 0 0 30px rgba(155, 89, 182, 0.8); }
        100% { transform: scale(1); opacity: 0.8; }
    }
    .pulse-anim { animation: pulsy 2s ease-in-out infinite; }

    /* Piaget Section Styling */
    .piaget-stage-item:hover .stage-dot {
        transform: scale(1.5);
        box-shadow: 0 0 15px currentColor;
    }
    .stage-dot {
        transition: transform 0.3s, box-shadow 0.3s;
    }

    /* Future Grid Sequential Glow */
    @keyframes sequenceGlow {
        0%, 15% {
            box-shadow: 0 0 30px rgba(214, 48, 49, 0.9), inset 0 0 20px rgba(214, 48, 49, 0.6);
            border-color: #ff7675;
            transform: scale(1.03);
            z-index: 10;
        }
        25%, 100% {
            box-shadow: none;
            border-color: #d63031;
            transform: scale(1);
            z-index: 1;
        }
    }

    .future-card {
        animation: sequenceGlow 12s infinite;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .future-card:hover {
        animation: none;
        box-shadow: 0 0 40px rgba(255, 118, 117, 0.9);
        border-color: #ff7675;
        transform: scale(1.05);
        z-index: 20;
    }

    .future-card:nth-child(1) { animation-delay: 0s; }
    .future-card:nth-child(2) { animation-delay: 3s; }
    .future-card:nth-child(3) { animation-delay: 6s; }
    .future-card:nth-child(4) { animation-delay: 9s; }

    /* Timeline interactiva */
    .timeline-node:hover .node-dot, .timeline-node:focus .node-dot {
        transform: scale(1.6);
        background: currentColor;
    }
    
    .timeline-node:hover .node-tooltip, .timeline-node:focus .node-tooltip {
        opacity: 1 !important;
        visibility: visible !important;
        bottom: 45px !important;
    }