/* Header flotante más limpio sobre banners.
   Arriba: transparente y liviano.
   Al bajar: blanco con sombra para que no se pierda. */
.home-page .site-header,
.detail-overlay-page .site-header {
    background: linear-gradient(180deg, rgba(7, 23, 48, .18), rgba(7, 23, 48, .04)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.home-page .site-header .brand,
.detail-overlay-page .site-header .brand,
.home-page .site-header .main-nav,
.detail-overlay-page .site-header .main-nav,
.home-page .site-header .main-nav a,
.detail-overlay-page .site-header .main-nav a {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}

.home-page .site-header .main-nav a:hover,
.detail-overlay-page .site-header .main-nav a:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
}

.home-page .site-header.header-scrolled,
.detail-overlay-page .site-header.header-scrolled {
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 12px 34px rgba(15, 46, 85, .10) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.home-page .site-header.header-scrolled .brand,
.detail-overlay-page .site-header.header-scrolled .brand,
.home-page .site-header.header-scrolled .main-nav,
.detail-overlay-page .site-header.header-scrolled .main-nav,
.home-page .site-header.header-scrolled .main-nav a,
.detail-overlay-page .site-header.header-scrolled .main-nav a {
    color: var(--primary-dark) !important;
    text-shadow: none;
}

.home-page .site-header.header-scrolled .brand strong,
.detail-overlay-page .site-header.header-scrolled .brand strong {
    color: var(--turquoise) !important;
}

.home-page .site-header.header-scrolled .main-nav a:hover,
.detail-overlay-page .site-header.header-scrolled .main-nav a:hover {
    background: #eef6ff !important;
    color: var(--primary) !important;
}

/* En móvil, el menú desplegable debe seguir siendo legible. */
@media (max-width: 760px) {
    .home-page .site-header .main-nav.is-open,
    .detail-overlay-page .site-header .main-nav.is-open {
        background: rgba(255, 255, 255, .98) !important;
        border: 1px solid var(--border) !important;
        box-shadow: 0 18px 42px rgba(15, 46, 85, .16) !important;
    }

    .home-page .site-header .main-nav.is-open a,
    .detail-overlay-page .site-header .main-nav.is-open a {
        color: var(--primary-dark) !important;
        text-shadow: none;
    }
}