/* --- Estilos de Navegación (Versión Final con Posicionamiento Correcto) --- */

:root {
    --nav-altura-desktop: 70px;
    --color-verde-principal: #138040;
    --color-verde-activo: #33BF6B;
    --color-texto-desktop: #ffffff;
    --mobile-bg: #e0e5ec;
    --mobile-shadow-light: #ffffff;
    --mobile-shadow-dark: #bebebe;
    --mobile-text-color: #5f6c7a;


    --mobile-bg: #e0e5ec;
    --mobile-shadow-light: #ffffff;
    --mobile-shadow-dark: #bebebe;
    --mobile-text-color: #5f6c7a;
}

body {
    font-family: 'Poppins', sans-serif;
}

/* --- Header y Navegación de ESCRITORIO --- */
header { position: sticky; top: 0; z-index: 1000; }
.nav-desktop { height: var(--nav-altura-desktop); }
.shadow-div { width: 65%; height: 40px; margin: 0 auto; background: linear-gradient(to bottom, rgba(0, 30, 10, 0.8), transparent); border-radius: 0 0 50% 50%; -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); }
.nav-desktop ul { display: flex; align-items: center; justify-content: center; height: 100%; list-style: none; padding: 0; margin: 0; gap: 1rem; }
.nav-desktop li { height: 100%; }
.nav-desktop a { display: flex; align-items: center; height: 100%; padding: 1rem 1.5rem 0 1.5rem; font-size: 10pt; text-decoration: none; transition: all 0.3s ease; }
.nav-desktop ul li:not(:first-child) a { color: var(--color-texto-desktop); }
.nav-desktop ul li:not(:first-child) a:hover { color: var(--color-texto-desktop); background-color: var(--color-verde-principal); }
.nav-desktop ul li:first-child a { background-color: var(--color-verde-activo); color: var(--color-texto-desktop); }

/* Ocultamos el sistema de menú móvil por defecto */
.mobile-nav { display: none; }


/*
==========================================================================
    ESTILOS RESPONSIVE PARA EL MENÚ MÓVIL CON ANIMACIÓN AVANZADA
==========================================================================
*/
@media (max-width: 768px) {
    /* Ocultamos el menú de escritorio y mostramos el móvil */
    .nav-desktop, .shadow-div { display: none; }
    .mobile-nav { display: block; }
    #burger-toggle { display: none; }

    /* El botón flotante (Estado Inicial) */
    .burger-button {
        position: fixed;
        bottom: 20px;
        left: 50%;
        width: 60px;
        height: 60px;
        transform: translateX(-50%); /* Lo centramos horizontalmente */
        background-color: var(--mobile-bg);
        border-radius: 50%;
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5);
        cursor: pointer;
        z-index: 1002;
        display: flex;
        justify-content: center;
        align-items: center;
        /* La animación de su viaje */
        transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }

    /* La tarjeta del menú (Estado Inicial) */
    .nav-mobile-card {
        position: fixed;
        bottom: 20px; /* Nace en la misma posición que el botón */
        left: 50%;
        width: 260px;
        max-width: 90vw;
        height: 600px;
        transform: translateX(-50%) scale(0); /* Oculta por defecto */
        transform-origin: bottom center; /* Crecerá desde abajo hacia arriba */
        background-color: var(--mobile-bg);
        border: 10px solid var(--mobile-bg);
        border-radius: 20px;
        box-shadow: inset 5px 5px 10px var(--mobile-shadow-dark), inset -5px -5px 10px var(--mobile-shadow-light);
        z-index: 1001; /* Detrás del botón inicial */
        display: flex;
        justify-content: center;
        padding-top: 40px;
        /* La animación de su expansión */
        transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }
    
    /* El overlay (Estado Inicial) */
    .nav-mobile-overlay {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px);
        z-index: 1000; opacity: 0; pointer-events: none;
        transition: opacity 0.5s ease;
    }
    
    /* --- Contenido (botones) dentro de la tarjeta --- */
.nav-mobile-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* La opacidad sigue siendo controlada por la transición principal */
    opacity: 0;
    transition: opacity 0.4s ease 0.4s; /* Aparece después de que la tarjeta se expande */
}

.nav-mobile-btn {
    text-decoration: none;
    color: var(--mobile-text-color);
    background-color: var(--mobile-bg);
    padding: 18px;
    border-radius: 15px;
    box-shadow: 5px 5px 10px var(--mobile-shadow-dark), -5px -5px 10px var(--mobile-shadow-light);
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    /* Estado inicial: pequeño y oculto */
    transform: scale(0.5);
    opacity: 0;
    /* La transición clave con la curva de rebote */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.4s ease;
}

/* --- ESTADOS INTERACTIVOS PARA BOTONES NEUMORFISTAS (Móvil) --- */

/* 
   :hover (cuando el cursor está encima)
   El botón parece "elevarse" del fondo.
   Logramos esto aumentando el desenfoque y la distancia de las sombras,
   y con una pequeña transformación de escala y traslación.
*/
.nav-mobile-btn:hover {
    transform: translateY(-3px) scale(1.02); /* Se eleva y crece un poco */
    box-shadow: 8px 8px 18px var(--mobile-shadow-dark), 
                -8px -8px 18px var(--mobile-shadow-light);
    color: var(--color-verde-principal); /* Cambiamos el color del texto a un verde más intenso */
}

/* 
   :active (mientras el botón está siendo presionado)
   El botón parece "hundirse" en la superficie.
   Invertimos las sombras usando 'inset' y eliminamos las sombras exteriores.
   La transformación simula el efecto de ser presionado.
*/
.nav-mobile-btn:active {
    transform: translateY(1px) scale(0.98); /* Se hunde y se encoge ligeramente */
    box-shadow: inset 4px 4px 8px var(--mobile-shadow-dark), 
                inset -4px -4px 8px var(--mobile-shadow-light);
    color: var(--color-verde-activo); /* El texto puede tener un color más brillante al presionar */
}






/* --- ESTADOS ACTIVOS (CUANDO EL MENÚ SE ABRE) --- */
#burger-toggle:checked ~ .nav-mobile-card .nav-mobile-content {
    opacity: 1; /* Hacemos visible el contenedor de los botones */
}

/* Animación escalonada para cada botón */
#burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn {
    transform: scale(1); /* Vuelven a su tamaño final */
    opacity: 1;
}

/* Delays para la entrada escalonada */
#burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn:nth-child(1) { transition-delay: 0.25s; }
#burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn:nth-child(2) { transition-delay: 0.30s; }
#burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn:nth-child(3) { transition-delay: 0.35s; }
#burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn:nth-child(4) { transition-delay: 0.40s; }
#burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn:nth-child(5) { transition-delay: 0.45s; }
#burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn:nth-child(6) { transition-delay: 0.50s; }

    /* --- ESTADOS ACTIVOS (CUANDO SE PRESIONA EL BOTÓN) --- */
    #burger-toggle:checked ~ .burger-button {
        /* Viaja a su nueva posición en la parte inferior de la tarjeta */
        bottom: calc(50% - 205px); /* 50% del vh - la mitad de la altura de la tarjeta */
        box-shadow: inset 5px 5px 10px var(--mobile-shadow-dark), inset -5px -5px 10px var(--mobile-shadow-light);
    }
    #burger-toggle:checked ~ .nav-mobile-card {
        /* Se expande a su tamaño completo y se centra */
        transform: translateX(-50%) scale(1);
        bottom: calc(50% - 230px);
    }
    #burger-toggle:checked ~ .nav-mobile-overlay {
        opacity: 1; pointer-events: auto;
    }
    #burger-toggle:checked ~ .nav-mobile-card .nav-mobile-content {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.4s; /* ¡Aparece después de que todo se asienta! */
    }

    /* --- Estilos del icono hamburguesa/cierre --- */
    .burger-button span {
        display: block; position: absolute; height: 4px; width: 50%;
        background: var(--mobile-text-color); border-radius: 9px;
        left: calc(50% - 50%)+50%;
        transition: all .25s ease-in-out;
    }
    .burger-button span:nth-of-type(1) { top: 33%; }
    .burger-button span:nth-of-type(2) { top: 50%; transform: translateY(-50%); }
    .burger-button span:nth-of-type(3) { bottom: 33%; }
    
    #burger-toggle:checked ~ .burger-button span:nth-of-type(1) { transform: rotate(45deg); top: 48%; }
    #burger-toggle:checked ~ .burger-button span:nth-of-type(2) { width: 0%; opacity: 0; }
    #burger-toggle:checked ~ .burger-button span:nth-of-type(3) { transform: rotate(-45deg); top: 48%; }
}