/* ============================================
   NAVBAR FIX - SISTEMA IGUAL A INDEX.HTML
   ============================================ */

/* 1. Forzar visibilidad del menú en Desktop */
@media (min-width: 768px) {
    header .hidden.md\:flex {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    header .container>div:nth-child(2) {
        display: flex !important;
        gap: 2rem !important;
    }
}

/* 2. ESTADO INICIAL (on-hero) - En la sección Hero */
#header.on-hero {
    background-color: transparent !important;
}

#header.on-hero .nav-link,
#header.on-hero .lang-switcher button {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: 600 !important;
}

#header.on-hero svg,
#header.on-hero path {
    stroke: #ffffff !important;
}

/* 3. ESTADO SCROLLED (is-scrolled) - Fuera del Hero */
#header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#header.is-scrolled .nav-link,
#header.is-scrolled .lang-switcher button {
    color: #1a1a1a !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

#header.is-scrolled .nav-link:hover {
    color: #798C5D !important;
}

#header.is-scrolled svg,
#header.is-scrolled path {
    stroke: #1a1a1a !important;
}

/* 4. DARK MODE */
html.dark-theme #header.is-scrolled {
    background-color: rgba(26, 26, 26, 0.98) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.dark-theme #header.is-scrolled .nav-link,
html.dark-theme #header.is-scrolled .lang-switcher button {
    color: #ffffff !important;
}

html.dark-theme #header.is-scrolled svg,
html.dark-theme #header.is-scrolled path {
    stroke: #ffffff !important;
}
/* ============================================
   FIX: Botón Continuar siempre blanco
   ============================================ */

#scroll-down-btn,
#scroll-down-btn span,
#scroll-down-btn i,
#scroll-down-btn svg,
#scroll-down-btn path {
    color: #ffffff !important;
    stroke: #ffffff !important;
}


/* Refuerzo adicional para la flecha */
#scroll-down-btn [data-feather='chevron-down'],
#scroll-down-btn .feather,
#scroll-down-btn .feather-chevron-down {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
}


/* ============================================
   MEJORAS DE RESPONSIVIDAD NAVBAR
   ============================================ */

/* Mejor espaciado en desktop */
@media (min-width: 768px) {
    header .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    /* Espaciado entre items del menú */
    header .hidden.md\\:flex {
        gap: 2rem !important;
    }
    
    /* Espaciado en header-right-items */
    .header-right-items {
        gap: 1.5rem !important;
    }
}

/* Asegurar que el logo tenga buen tamaño */
#header-logo {
    height: 2.5rem !important;
    width: auto !important;
}

/* Mobile: asegurar que el menú hamburguesa sea visible */
@media (max-width: 767px) {
    #mobile-menu-button {
        display: block !important;
    }
    
    /* Ocultar menú desktop en mobile */
    header .hidden.md\\:flex {
        display: none !important;
    }
}