/* =========================================================
   HEADER — logo + menú hamburguesa
   (flota transparente sobre el hero; el comportamiento al
   scrollear sobre secciones más claras se define más adelante)
   ========================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background var(--transition-base);
}

/* Al scrollear el header deja de ser transparente y toma el MISMO gris
   oscuro que el panel del menú (--color-panel), así los dos se leen como
   la misma superficie. La clase la agrega initHeaderScrollState() en
   js/main.js. El cuadrado del ícono se vuelve transparente para que las
   3 líneas claras se lean directamente sobre el gris. */
.header.is-scrolled {
  background: var(--color-panel);
}
.header.is-scrolled .menu-toggle__icon {
  background: transparent;
}
/* Si el menú está abierto, el rosa gana sobre el estado "scrolled". */
.header.is-scrolled .menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  background: var(--color-5);
}

/* Con el menú abierto el label va siempre en claro, porque el panel del
   menú es oscuro sin importar dónde estaba el scroll. El logo ya es
   --color-text-light por la máscara, no hace falta tocarlo. */
body.menu-open .menu-toggle { color: var(--color-text-light); }
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}
/* El logo usa los SVG ya exportados en crema (logo_hor_light.svg /
   logo_iso_light.svg, generados a partir de los originales cambiando el
   fill #1d1d1b por #FFF9E3).
   Antes se teñía con filter: brightness(0) invert(1), que daba blanco
   pleno (#FFFFFF). Se descartó también la variante con mask-image porque
   si la máscara falla el logo desaparece por completo; con un <img> el
   peor caso es que se vea el logo, no que no se vea nada.
   Los originales oscuros quedan en la carpeta para cuando haya que
   usarlos sobre un fondo claro. */
.logo__img {
  width: auto;
}
.logo__img--full { height: 40px; } /* desktop: tamaño original */
.logo__img--iso { height: 44px; display: none; } /* mobile: más grande */

/* Debajo de 640px el isotipo solo (logo_iso.svg) reemplaza al lockup
   horizontal completo: con el ancho tan chico, el lockup con el claim
   ("LIDERAZGO EMPÁTICO DISRUPTIVO") no entra sin pisar el botón de menú. */
@media (max-width: 640px) {
  .logo__img--full { display: none; }
  .logo__img--iso { display: block; }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: none;
  color: var(--color-text-light);
  font-weight: var(--fw-regular); /* Roman */
  letter-spacing: 0.05em;
  font-size: 20px;
}
.menu-toggle__icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  background: var(--color-text-dark);
  border-radius: 0; /* cuadrado, igual que los botones */
  transition: background var(--transition-base);
}

/* Con el menú abierto el cuadrado del botón pasa a rosa (--color-5) y
   las 3 líneas forman la X. */
.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  background: var(--color-5);
}
.menu-toggle__icon .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-bg);
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* pendiente: panel del menú desplegable (contenido a definir) */