/* Cabecera del sitio. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
  max-width: var(--container); margin-inline: auto;
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--sp-s); gap: var(--sp-s);
}
.site-logo img,
.custom-logo { height: 44px; width: auto; display: block; }
.custom-logo-link { display: inline-block; line-height: 0; }

.site-nav { display: flex; align-items: center; gap: var(--sp-m); }
.site-nav .menu { display: flex; gap: var(--sp-m); list-style: none; padding: 0; margin: 0; align-items: center; }
.site-nav .menu a { font-weight: 600; color: var(--color-ink); padding: var(--sp-xs) 0; }
.site-nav .menu a:hover, .site-nav .menu .current-menu-item > a { color: var(--color-primary); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--sp-xs); }
.nav-toggle__bar { width: 26px; height: 3px; background: var(--color-ink); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); transform-origin: center; }

/* Hamburguesa → X cuando el menú está abierto (JS pone aria-expanded). */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px)  rotate(45deg);  }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  /* Z-index local: el .site-header crea su propio stacking context
     (position:sticky + z-index:100). Adentro, el nav fixed con
     position+z-index gana automáticamente contra hermanos sin position.
     Por eso ponemos brand y toggle como position:relative con z-index
     mayor que el nav → logo y X siempre visibles encima del panel. */
  .site-header__brand,
  .nav-toggle { position: relative; z-index: 2; }

  /* Menú móvil: anclado a top:0 con translateY(-100%) cuando está
     cerrado → garantiza que queda fuera de la vista sin importar su
     altura. El padding-top deja el contenido del menú debajo del
     header (que queda visible encima por el z-index de arriba). */
  .site-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1;                          /* debajo de brand/toggle */
    flex-direction: column; align-items: stretch;
    background: var(--color-surface);
    padding: calc(var(--header-h) + var(--sp-m)) var(--sp-m) var(--sp-m);
    border-bottom: 1px solid var(--color-line);
    transform: translateY(-100%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-lg);
  }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav .menu { flex-direction: column; align-items: stretch; gap: var(--sp-s); }
  .site-nav__cta { text-align: center; }
  body.nav-open { overflow: hidden; }
}