/* ===================================
   ESTILOS NAVBAR SECUNDARIA
   Para home - Scroll spy localizado
   =================================== */

/* ===== 🎯 COLOR DEL SCROLL SPY - CAMBIALO ACÁ ===== */
/* Por defecto hereda el color de acento del sitio (style.css).
   Si querés que el scroll spy tenga SU PROPIO color, distinto
   del resto del sitio, reemplazá el valor de abajo por uno fijo,
   ej: --color-scroll-spy: #2a9d8f;                              */
:root {
    --color-scroll-spy: var(--color-acento, rgb(230, 184, 175));
}

/* ===== NAVBAR SECUNDARIA BASE ===== */
.barra-navegacion-secundaria {
    background: white;
    border-bottom: 1px solid var(--color-borde, #e0e0e0);
    position: sticky;
    top: 70px; /* Debajo de la navbar principal */
    z-index: 98;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    box-shadow: none;
}

/* 🆕 Mostrar navbar secundaria cuando es visible */
.barra-navegacion-secundaria.visible {
    opacity: 1;
    pointer-events: auto;
    max-height: 70px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ===== CONTENEDOR SECUNDARIA ===== */
.contenedor-nav-secundaria {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    height: 70px;
    align-items: center;
}

/* ===== LISTA NAVEGACIÓN SECUNDARIA ===== */
.lista-navegacion-secundaria {
    list-style: none;
    display: flex;
    gap: 40px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.item-nav-secundario {
    margin: 0;
    padding: 0;
}

/* ===== ENLACES NAVEGACIÓN SECUNDARIA ===== */
.enlace-nav-secundario {
    color: var(--color-texto, #333333);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 12px;
    border-bottom: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: block;
    font-family: 'Poppins', sans-serif;
}

.enlace-nav-secundario:hover {
    color: var(--color-scroll-spy);
    border-bottom-color: color-mix(in srgb, var(--color-scroll-spy) 30%, transparent);
}

/* 🆕 ACTIVO: Enlace resaltado por scroll spy */
.enlace-nav-secundario.activo-secundario {
    color: var(--color-scroll-spy);
    border-bottom-color: var(--color-scroll-spy);
    font-weight: 600;
    text-shadow: 0 0 1px color-mix(in srgb, var(--color-scroll-spy) 30%, transparent);
}

/* ===== TRANSICIONES SUAVES ===== */
.enlace-nav-secundario {
    transition: 
        color 0.3s ease,
        border-bottom-color 0.3s ease,
        font-weight 0.3s ease;
}

/* ===== RESPONSIVE: TABLET ===== */
@media (max-width: 1024px) {
    .lista-navegacion-secundaria {
        gap: 30px;
    }
    
    .enlace-nav-secundario {
        font-size: 0.9rem;
        padding: 8px 10px;
    }
}

/* ===== RESPONSIVE: MOBILE ===== */
@media (max-width: 768px) {
    /* Navbar secundaria se oculta en mobile */
    .barra-navegacion-secundaria {
        display: none;
    }
    
    /* Los elementos se muestran en el menú mobile */
    .lista-navegacion-secundaria {
        gap: 15px;
        flex-direction: column;
    }
    
    .enlace-nav-secundario {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
    
    .contenedor-nav-secundaria {
        padding: 0 10px;
    }
}

/* ===== ANIMACIÓN: ENTRADA NAVBAR SECUNDARIA ===== */
@keyframes slideDownSecondary {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.barra-navegacion-secundaria.visible {
    animation: slideDownSecondary 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== EFECTO: Hover con indicador ===== */
.enlace-nav-secundario::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-scroll-spy);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    opacity: 0;
}

.enlace-nav-secundario:hover::before {
    width: 80%;
    opacity: 0.3;
}

.enlace-nav-secundario.activo-secundario::before {
    width: 100%;
    opacity: 1;
    bottom: -3px;
}

/* ===== SINCRONIZACIÓN CON NAVBAR PRINCIPAL ===== */
.barra-navegacion {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.barra-navegacion.activa {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.barra-navegacion.activa + .barra-navegacion-secundaria {
    top: 70px; /* Ajuste dinámico según la altura de la navbar principal */
}

/* ===== ACCESIBILIDAD ===== */
.enlace-nav-secundario:focus {
    outline: 2px solid var(--color-scroll-spy);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .barra-navegacion-secundaria,
    .enlace-nav-secundario,
    .enlace-nav-secundario::before {
        transition: none;
    }
}

/* ===== DARK MODE (Opcional) ===== */
@media (prefers-color-scheme: dark) {
    .barra-navegacion-secundaria {
        background: #1a1a1a;
        border-bottom-color: #333333;
    }
    
    .enlace-nav-secundario {
        color: #e0e0e0;
    }
    
    .enlace-nav-secundario:hover {
        color: var(--color-scroll-spy);
    }
}

/* ===== ESTADOS ===== */
.enlace-nav-secundario:active {
    transform: scale(0.98);
}

.enlace-nav-secundario.activo-secundario:active {
    transform: scale(0.99);
}

/* ===== SEPARADOR VISUAL ===== */
.item-nav-secundario:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--color-borde, #e0e0e0);
    opacity: 0.3;
}

/* ===== SOMBRA AL SCROLL ===== */
.barra-navegacion-secundaria {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.barra-navegacion-secundaria.visible {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ===== INTEGRACIÓN CON BARRA PRINCIPAL ===== */
.barra-navegacion + .barra-navegacion-secundaria {
    border-top: 1px solid var(--color-borde, #e0e0e0);
}

/* ===== ANIMACIÓN: Indicador de sección activa ===== */
@keyframes indicatorSlide {
    from {
        left: -10%;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}

.enlace-nav-secundario.activo-secundario {
    animation: indicatorSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ESTILOS PARA MOBILE MENU ===== */
@media (max-width: 768px) {
    /* Los elementos secundarios en mobile se muestran en el menú principal */
    .menu-mobile .lista-navegacion-mobile {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    .menu-mobile .enlace-mobile {
        padding: 12px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    /* Línea divisoria entre secciones */
    .menu-mobile hr {
        margin: 10px 0;
    }
}

/* ===== Z-INDEX HIERARCHY ===== */
/* 
   Asegurar que la navbar secundaria esté debajo de la principal
   pero encima del contenido
*/
.barra-navegacion {
    z-index: 99;
}

.barra-navegacion-secundaria {
    z-index: 98;
}

.menu-mobile {
    z-index: 97;
}

main {
    z-index: 1;
}