/* Cabecera sticky ~88px (§6.1): transparente que se funde con el hero y gana cuerpo al hacer scroll. */

.c-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Fondo 92% + blur + hairline en ::before, no en el propio header:
   backdrop-filter crearía containing block y rompería el overlay fixed del nav.
   Solo visible con scroll (§6.1): nav.js alterna .is-scrolled. */
.c-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--div-bg) 92%, transparent);
  border-block-end: 1px solid color-mix(in srgb, var(--div-line) 60%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.c-header.is-scrolled::before {
  opacity: 1;
}

/* Con el overlay móvil abierto el fondo del header sobra. */
html.is-nav-open .c-header::before {
  opacity: 0;
}

.c-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--space-5);
  width: 100%;
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
  min-height: 5.5rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.c-header__branding {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
}

.c-header__nav {
  grid-column: 2;
  justify-self: center;
  min-width: 0;
}

.c-header .c-nav-toggle {
  grid-column: 3;
  justify-self: end;
}