/* ==========================================================================
   MÓDULO: BARRA DE NAVEGACIÓN (NAVBAR) - EFECTO CÁPSULA FLOTANTE PREMIUM
   ========================================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Sincronizado con el offset global de la página */
    background-color: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.4s ease,
                box-shadow 0.4s ease,
                height 0.4s ease;
}

/* --- EFECTO CÁPSULA CENTRAL AL BAJAR SCROLL (ACTIVADO POR JS) ---
   Ancho "auto": la cápsula se ajusta a su contenido (compacta), en vez
   de estirarse al 90% del viewport dejando espacio muerto sin usar. */
.site-header.scrolled {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 95%;
    height: 65px;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 30px rgba(33, 79, 80, 0.08);
    border: 1px solid rgba(48, 122, 109, 0.12);
    padding: 0 30px;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%; /* Permite que el logo se ancle al tope exacto de la barra */
}

/* En el menú cápsula el logo queda angosto (solo isotipo), así que el
   space-between del menú normal deja huecos grandes: aquí se compacta
   todo hacia los extremos sin afectar el header original. Como la
   cápsula ahora usa ancho "auto", basta un gap uniforme y compacto. */
.site-header.scrolled .header-container {
    justify-content: flex-start;
    gap: 35px;
    width: auto;
}

/* Identidad Visual (Logotipo) --------------------------------------------
   El ancla se mantiene compacta (46x46) para no alterar la altura de la
   barra de navegación; el logo real va en posición absoluta y se dibuja
   sobredimensionado "rompiendo" el espacio del menú para que se lea bien.
   Al activarse el menú cápsula (scroll) se oculta el logo completo y solo
   queda visible el isotipo (icono.webp). */
.site-logo {
    position: relative;
    display: block;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    align-self: flex-start; /* Ancla el logo al tope exacto de la barra */
}

/* En el menú cápsula solo queda el isotipo: se vuelve a centrar verticalmente */
.site-header.scrolled .site-logo {
    align-self: center;
}

.logo-img {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    object-fit: contain;
    display: block;
    z-index: 2;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
    transform-origin: top left;
}

/* Logotipo completo (icono + texto): sobredimensionado a propósito, parte del tope */
.logo-img-full {
    height: 170px;
    top: -10px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}

/* Isotipo (solo el triángulo), visible únicamente en el menú cápsula */
.logo-img-icon {
    height: 46px;
    display: none;
    transform-origin: center top;
}

/* --- EFECTO HOVER DEL LOGOTIPO: ESCALA + RESPLANDOR (GLOW) VERDE CORPORATIVO --- */
.site-logo:hover .logo-img-full {
    transform: scale(1.05);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22))
            drop-shadow(0 0 10px rgba(48, 122, 109, 0.55))
            drop-shadow(0 0 22px rgba(48, 122, 109, 0.35));
}

.site-logo:hover .logo-img-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(48, 122, 109, 0.6))
            drop-shadow(0 0 16px rgba(48, 122, 109, 0.4));
}

.site-header.scrolled .logo-img-full {
    display: none;
}

.site-header.scrolled .logo-img-icon {
    display: block;
}

@media (max-width: 992px) {
    .logo-img-full {
        height: 110px;
    }
}

/* NAVEGACIÓN PRINCIPAL (ESCRITORIO) */
.main-navigation {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 1.75rem; 
}

.nav-link {
    font-family: var(--font-main);
    font-size: 0.85rem; 
    font-weight: 600;
    color: var(--color-text);
    position: relative;
    padding: 5px 0;
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    transition: color var(--transition-fast);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- CORRECCIÓN: SOPORTE ESTRICTO PARA EL ESTADO ACTIVO (SCROLLSPY VISUAL) --- */
.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* ZONA DE ACCIONES (CTA BOTÓN NAVBAR) */
.header-action {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-navbar {
    font-family: var(--font-main);
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 10px 22px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid var(--color-primary);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap; 
}

.btn-navbar:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
}

/* --- INTERRUPTOR HAMBURGUESA MECÁNICO --- */
.mobile-nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    z-index: 1010;
    padding: 5px;
}

.mobile-nav-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: var(--color-primary-dark);
    border-radius: 2px;
    transition: var(--transition-fast);
}

.mobile-nav-toggle.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-nav-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

.mobile-nav-toggle.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   ADAPTACIÓN EN TABLETS Y MÓVILES (DESPLEGABLE ENTRANTE)
   ========================================================================== */
@media (max-width: 992px) {
    .site-header.scrolled {
        width: 95%;
        top: 10px;
        padding: 0 15px;
    }

    .mobile-nav-toggle {
        display: flex;
    }

    .header-action {
        display: none; 
    }

    .main-navigation {
        position: fixed;
        top: 100px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 100px);
        background-color: var(--color-white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1005;
    }

    .site-header.scrolled .main-navigation {
        top: 65px;
        height: calc(100vh - 80px);
        border-radius: 0 0 20px 20px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    }

    .main-navigation.active {
        left: 0;
    }

    .nav-list {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .nav-link {
        font-size: 1.2rem;
    }
}