/* Bryde — Header global (aislado). Lee --page-accent del host; fallback vino Bryde. */

.site-header{
  --sh-accent:var(--page-accent, #6b1f2a);
  --sh-ink:#F5EEE1;
  --sh-ink-muted:rgba(245,238,225,.6);
  --sh-bg-top:rgba(14,14,13,.72);
  --sh-bg-scrolled:rgba(14,14,13,.92);
  --sh-border-top:rgba(247,241,230,.05);
  --sh-border-scrolled:rgba(247,241,230,.09);
  --sh-height:68px;
  --sh-font:'Manrope',system-ui,sans-serif;

  position:fixed;top:0;left:0;right:0;z-index:1000;
  font-family:var(--sh-font);
  background:var(--sh-bg-top);
  border-bottom:1px solid var(--sh-border-top);
  transition:background .22s ease,border-color .22s ease,backdrop-filter .22s ease;
}
.site-header.is-scrolled{
  background:var(--sh-bg-scrolled);
  border-bottom-color:var(--sh-border-scrolled);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}

.site-header__inner{
  height:var(--sh-height);
  padding-inline:clamp(24px,3.2vw,56px);
  display:flex;align-items:center;gap:clamp(20px,3vw,48px);
}

/* ——— Marca ——— */
.site-header__brand{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.site-header__wordmark{width:clamp(118px,10vw,134px);height:auto;color:var(--sh-ink);display:block}

/* ——— Navegación desktop ——— */
.site-header__nav{margin-left:auto;display:flex;align-items:center;gap:clamp(22px,2.4vw,38px)}
.site-header__nav a{
  position:relative;font-size:.86rem;font-weight:500;letter-spacing:.005em;
  color:var(--sh-ink-muted);text-decoration:none;padding-bottom:5px;
  transition:color .2s ease;
}
.site-header__nav a:hover{color:var(--sh-ink)}
.site-header__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--sh-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.site-header__nav a[aria-current="page"]{color:var(--sh-ink);font-weight:600}
.site-header__nav a[aria-current="page"]::after{transform:scaleX(1)}

.site-header__cta{color:var(--sh-accent)!important;font-weight:600!important}
.site-header__cta::after{background:var(--sh-accent)}
.site-header__cta:hover::after,
.site-header__cta:focus-visible::after{transform:scaleX(1)}

/* ——— Botón de menú (mobile) ——— */
.site-header__toggle{
  display:none;flex:0 0 auto;margin-left:auto;
  width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:6px;
}
.site-header__toggle-line{
  display:block;width:20px;height:1px;background:var(--sh-ink);
  transition:transform .25s ease,opacity .2s ease;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:first-child{
  transform:translateY(3.5px) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:last-child{
  transform:translateY(-3.5px) rotate(-45deg);
}

/* ——— Panel móvil ——— */
.site-header__panel{
  position:fixed;top:var(--sh-height);left:0;right:0;bottom:0;
  background:rgba(14,14,13,.98);
  padding:8vh clamp(24px,7vw,56px) 5vh;
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transform:translateY(-12px);
  transition:opacity .24s ease,transform .24s ease;
  overflow-y:auto;
}
.site-header__panel[hidden]{display:none}
.site-header__panel.is-open{opacity:1;transform:translateY(0)}

.site-header__panel-nav{display:flex;flex-direction:column;gap:clamp(20px,4vh,32px)}
.site-header__panel-nav a{
  font-family:var(--sh-font);font-size:clamp(1.4rem,5.5vw,1.9rem);font-weight:600;
  color:var(--sh-ink-muted);text-decoration:none;transition:color .2s ease;
}
.site-header__panel-nav a:hover,
.site-header__panel-nav a:focus-visible{color:var(--sh-ink)}
.site-header__panel-nav a[aria-current="page"]{color:var(--sh-ink)}
.site-header__panel-nav .site-header__cta{color:var(--sh-accent)!important}

.site-header__panel-channels{
  display:flex;align-items:center;gap:12px;margin-top:6vh;
  font-size:.86rem;color:var(--sh-ink-muted);
}
.site-header__panel-channels a{color:inherit;text-decoration:none;transition:color .2s ease}
.site-header__panel-channels a:hover,
.site-header__panel-channels a:focus-visible{color:var(--sh-ink)}

/* ——— Foco accesible ——— */
.site-header a:focus-visible,
.site-header button:focus-visible{
  outline:1px solid var(--sh-accent);outline-offset:3px;border-radius:2px;
}

/* ——— Breakpoint mobile (~820px) ——— */
@media (max-width:820px){
  .site-header__nav{display:none}
  .site-header__toggle{display:flex}
}

/* ——— Bloqueo de scroll con el panel abierto ——— */
html.site-header-lock,
body.site-header-lock{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .site-header,
  .site-header.is-scrolled,
  .site-header__nav a,
  .site-header__nav a::after,
  .site-header__toggle-line,
  .site-header__panel{transition:none!important}
}