/* Navbar: transparente sobre la portada y blanco al bajar (o en cualquier otra página) */
.site-header { transition: transform .5s var(--ease), box-shadow .45s ease, background-color .45s ease, backdrop-filter .45s ease, color .35s ease; }
.site-header::before { content: ''; position: absolute; inset: 0 0 -26px 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.22) 55%, rgba(0,0,0,0)); transition: opacity .45s ease; }

.site-header.is-clear:not(:has(.main-nav.is-open)):not(:has(.mega.is-open)) {
  background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: #fff;
}
.site-header.is-clear:not(:has(.main-nav.is-open)):not(:has(.mega.is-open))::before { opacity: 1; }
.site-header.is-clear:not(:has(.main-nav.is-open)):not(:has(.mega.is-open)) :is(.logo, .main-nav a, .icon-btn) { color: #fff; }
.site-header.is-clear:not(:has(.main-nav.is-open)):not(:has(.mega.is-open)) .logo { text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.site-header.is-clear:not(:has(.main-nav.is-open)):not(:has(.mega.is-open)) .main-nav a::after { background: #fff; }
.site-header.is-clear:not(:has(.main-nav.is-open)):not(:has(.mega.is-open)) .icon-btn:hover { background: rgba(255,255,255,.16); }
.site-header.is-clear:not(:has(.main-nav.is-open)):not(:has(.mega.is-open)) .burger span { background: #fff; }
/* la marquesina aparece recién al bajar */
.site-header.is-clear .ticker { height: 0; opacity: 0; }

/* al bajar: vuelve el blanco con una entrada suave */
.site-header:not(.is-clear) { background-color: color-mix(in srgb, var(--header-bg, #ffffff) 96%, transparent); }
.site-header .ticker { transition: height .5s var(--ease), opacity .45s ease; }
.site-header .ticker-group span { transition: color .35s ease; }
.site-header :is(.main-nav a, .icon-btn, .burger span) { transition-property: color, background-color, transform, opacity; transition-duration: .35s; }
.site-header .logo { transition: transform .4s var(--ease), font-size .4s var(--ease), color .35s ease, text-shadow .35s ease; }
.mega { color: var(--ink, #0b0b0c); }
.site-header.is-clear:is(:has(.main-nav.is-open), :has(.mega.is-open)) .ticker { height: var(--ticker-h); opacity: 1; }