/* ============================
   HEADER Y MENÚ
   ============================ */

/* Transiciones suaves del header */
header.site-header {
    transition:
            background-color 0.2s ease-out,
            box-shadow 0.2s ease-out,
            border-color 0.2s ease-out,
            color 0.2s ease-out;
}

/* Estado SCROLLED (o páginas sin hero full-screen) */
header.site-header.scrolled {
    background-color: var(--brand-fondo);
    border-bottom-color: rgba(15,23,42,0.08);
    box-shadow: 0 10px 30px rgba(15,23,42,0.10);
}

/* Estado sobre hero full-screen, arriba del todo */
header.site-header--over-hero:not(.scrolled) {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* ============================
   ENLACES DEL MENÚ
   ============================ */

/* Estado base de todos los enlaces del menú */
header.site-header .menu-link {
    border-radius: 999px;
    color: var(--text-primary);
    transition:
            background-color 0.18s ease-out,
            color 0.18s ease-out,
            box-shadow 0.18s ease-out;
}

/* TEXTO:
   - En páginas normales y estado scrolled → color normal.
*/
header.site-header.scrolled .menu-link,
header.site-header:not(.site-header--over-hero) .menu-link {
    color: var(--text-primary);
}

/* TEXTO:
   - Solo cuando el header está sobre el hero y sin scroll → texto blanco.
*/
header.site-header--over-hero:not(.scrolled) .menu-link {
    color: #f9fafb;
}

/* HOVER EN PÁGINAS NORMALES Y ESTADO SCROLLED
   → fondo oscuro de marca + texto claro
*/
header.site-header.scrolled .menu-link:hover,
header.site-header:not(.site-header--over-hero) .menu-link:hover {
    background-color: var(--brand-primario);
    color: var(--text-on-primary);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

/* HOVER SOBRE HERO (arriba del todo)
   → pill blanco con texto oscuro (contraste sobre hero oscuro)
*/
header.site-header--over-hero:not(.scrolled) .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--brand-primario);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

/* Título de marca, si no hay logo */
header.site-header--over-hero:not(.scrolled) .brand-title {
    color: #f9fafb;
}
header.site-header.scrolled .brand-title,
header.site-header:not(.site-header--over-hero) .brand-title {
    color: var(--text-primary);
}

/* Accesibilidad: foco visible */
header.site-header .menu-link:focus-visible {
    outline: 2px solid var(--brand-secundario);
    outline-offset: 2px;
}


/* Hover: fondo oscuro de marca y texto claro (onPrimary) */
header nav .menu-link:hover {
    background-color: var(--brand-primario);
    color: var(--text-on-primary);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

/* Accesibilidad: foco visible */
header nav .menu-link:focus-visible {
    outline: 2px solid var(--brand-secundario);
    outline-offset: 2px;
}