.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: var(--space-lg);
  color: var(--color-text-inverse);
  transition: background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}

.site-header__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

/* El efecto "glass" vive en una capa aparte (::before) sobre el
   contenedor (no sobre .site-header) para que abrace solo el contenido
   real (logo a menú), no todo el ancho de la pantalla. Va en el
   contenedor -no en .site-header- también porque backdrop-filter en un
   elemento lo convierte en el containing block de sus descendientes
   position:fixed: si viviera en .site-header, rompería el menú móvil
   (que es hijo directo de .site-header con position:fixed; inset:0). */
.site-header__container::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  /* .site-header__container también lleva la clase .container, que ocupa
     el 100% del ancho en móvil (su max-width solo limita en pantallas
     grandes). Un inset negativo aquí sacaría la píldora fuera de la
     pantalla visible en móvil, así que en vez de eso restamos un margen
     de aire fijo al mismo padding-inline que ya usa el contenedor, para
     que la píldora abrace el contenido real (logo a menú) en cualquier
     tamaño de pantalla. */
  left: calc(var(--space-lg) - 16px);
  right: calc(var(--space-lg) - 16px);
  z-index: -1;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: opacity var(--transition-base);
}

@media (min-width: 768px) {
  .site-header__container::before {
    left: calc(var(--space-2xl) - 16px);
    right: calc(var(--space-2xl) - 16px);
  }
}

.site-header.is-scrolled .site-header__container::before {
  opacity: 0;
}

.site-header__logo img {
  height: 36px;
  width: auto;
}

.site-header__logo {
  position: relative;
  z-index: 91;
  display: inline-block;
  transition: opacity var(--transition-fast);
}

.site-header__logo:hover {
  opacity: 0.85;
}

.site-header__logo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Cuando el menú móvil está abierto, el logo (elevado por encima del
   overlay, igual que el botón de cerrar) pasa a silueta blanca y crece
   un poco para tener más presencia sobre el fondo azul oscuro. */
.site-header:has(.site-nav--mobile.is-open) .site-header__logo img {
  height: 44px;
  filter: brightness(0) invert(1);
}

.site-header.is-scrolled {
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  padding-block: var(--space-sm);
  color: var(--color-text);
}

.site-header__menu-toggle {
  position: relative;
  z-index: 91;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
}

.site-header__menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-header__menu-toggle:hover {
  opacity: 0.8;
}

.site-header__menu-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.site-header__menu-toggle:active {
  transform: scale(0.95);
}

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1024px) {
  .site-header__menu-toggle { display: none; }

  .site-header__logo img {
    height: 68px;
  }
}