/* ═══════════════════════════════════════════════════════════════════════
   Hero + nav de la landing sobre el sistema nuevo (Gate 4 · POC, tier 1).
   Composición «Marea» (D-007) con motion «Calma» (D-016): campo MeshFlow de
   fondo, vidrio solo donde hay campo detrás (D-021), copy a la izquierda y el
   chat de vidrio vertical y completo en la vista (D-017). Solo tokens --ds-*
   de ds.css (generado): las recetas de vidrio, botón, grano, campo y marca son
   las clases ds-*; aquí vive únicamente la composición (clases lp-*). Los
   otros bloques siguen en styles.css hasta S1.
   ═══════════════════════════════════════════════════════════════════════ */

.lp-header,
.lp-hero {
  font-family: var(--ds-font-sans);
  color: var(--ds-text);
}

/* ── Cabecera fija ───────────────────────────────────────────────────
   Dos pieles que pone app.js: `glass` mientras el hero está detrás (vidrio
   flat del sistema: la marca nunca va sobre el campo sin vidrio detrás) y
   `solid` cuando el hero sale de la vista (superficie raised de tier 2 +
   hairline, sin backdrop-filter). La píldora de navegación nunca es vidrio
   (vidrio dentro de vidrio, no): es un pozo tintado con los tokens del vidrio. */

.lp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--ds-z-fixed);
  border-radius: 0;
  transition: background-color var(--ds-dur-base) var(--ds-ease-enter),
    border-color var(--ds-dur-base) var(--ds-ease-enter);
}

.lp-header.is-solid {
  background: var(--ds-surface-raised);
  border-bottom: 1px solid var(--ds-border);
}

/* Sin guion la barra no puede cambiar de piel: se queda sobre el hero y se va con él. */
html:not(.js) .lp-header {
  position: absolute;
}

/* Marco fijo del panel móvil: sin esto el panel se medía contra la barra (piel sólida) o contra este contenedor
   (piel de vidrio, por `.ds-glass > *`) y saltaba de sitio al cambiar de piel. */
.lp-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--ds-space-4);
  width: min(1240px, 100% - 2 * var(--ds-space-8));
  height: calc(var(--ds-control-h) + 2 * var(--ds-space-4));
  margin-inline: auto;
}

/* Lockup «optiMind by DarkFunnels» (Bandas, D-034) a 24 px, texto en curvas; el color sale de brand.css por tema. */
.lp-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  border-radius: var(--ds-radius-sm);
}

.lp-brand:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: var(--ds-focus-offset);
}

.lp-brand__lockup {
  display: block;
  width: auto;
  height: 24px;
}

.lp-brand__word {
  fill: var(--ds-text);
}

.lp-brand__by {
  fill: var(--ds-text-muted);
}

/* Píldora de navegación con indicador que se desliza al activo (tier 2: --ds-dur-base, solo transform/opacity). */
.lp-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-self: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-1);
  border-radius: var(--ds-radius-full);
  background: var(--ds-glass-bg);
}

/* Solo en escritorio: con el menú compacto la navegación es el panel flotante, raised siempre (receta de Menu «Caja»). */
@media (min-width: 1221px) {
  .lp-header.is-solid .lp-nav {
    background: var(--ds-surface-sunken);
    outline: 1px solid var(--ds-border-strong);
    outline-offset: -1px;
  }
}

.lp-nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: var(--ds-control-h-sm);
  padding: 0 var(--ds-space-4);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-ui);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text);
  opacity: 0.82;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--ds-dur-fast) var(--ds-ease-enter), color var(--ds-dur-fast) var(--ds-ease-enter);
}

.lp-nav a:hover,
.lp-nav a:focus-visible,
.lp-nav a[aria-current="true"] {
  opacity: 1;
}

.lp-nav a[aria-current="true"] {
  font-weight: var(--ds-weight-semibold);
}

.lp-nav a:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: var(--ds-focus-offset);
}

.lp-header.is-solid .lp-nav a {
  color: var(--ds-text-muted);
  opacity: 1;
}

.lp-header.is-solid .lp-nav a:hover,
.lp-header.is-solid .lp-nav a[aria-current="true"] {
  color: var(--ds-text);
}

.lp-nav__ind {
  position: absolute;
  top: var(--ds-space-1);
  left: 0;
  z-index: 0;
  height: calc(100% - 2 * var(--ds-space-1));
  border-radius: var(--ds-radius-full);
  background: var(--ds-glass-highlight);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--ds-dur-base) var(--ds-ease-enter), opacity var(--ds-dur-base) var(--ds-ease-exit);
}

.lp-nav__ind.is-on {
  opacity: 1;
  transition: transform var(--ds-dur-base) var(--ds-ease-enter), opacity var(--ds-dur-base) var(--ds-ease-enter);
}

.lp-header.is-solid .lp-nav__ind {
  background: var(--ds-surface-raised);
  outline: 1px solid var(--ds-border-strong);
  outline-offset: -1px;
}

.lp-header__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--ds-space-2);
}

.lp-header__actions a,
.lp-hero__ctas a {
  text-decoration: none;
}

.lp-nav__menu {
  display: none;
}

.lp-nav__menu[aria-expanded="true"] .lp-nav__menu-open,
.lp-nav__menu[aria-expanded="false"] .lp-nav__menu-close {
  display: none;
}

/* Botón de tema: enseña el icono del tema activo. Sin guion no hace nada, así que no se enseña. */
[data-theme="dark"] .lp-theme__sun,
:root:not([data-theme="dark"]) .lp-theme__moon,
html:not(.js) .lp-theme {
  display: none;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.lp-hero {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ds-bg);
}

/* Tres columnas: copy · embudo · chat. La del medio está vacía en el DOM: ahí pinta funnel.js. Columna y calles crecen
   con el ancho para que el copy, el embudo y el chat nunca vayan pegados. El chat no baja de 380: por debajo, «Tienda ·
   Agente Valeria» se cortaba con puntos suspensivos. */
.lp-hero__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(96px, 13vw - 32px, 180px) clamp(380px, 28vw, 392px);
  column-gap: clamp(var(--ds-space-6), 6vw - 40px, var(--ds-space-12));
  align-items: center;
  box-sizing: border-box;
  width: min(1240px, 100% - 2 * var(--ds-space-8));
  margin-inline: auto;
  padding-top: calc(var(--ds-control-h) + 2 * var(--ds-space-4) + var(--ds-space-6));
  padding-bottom: var(--ds-space-10);
}

.lp-hero__copy {
  max-width: 760px;
}

/* D-041 · Texto pleno: sobre el campo (con velo o en el vidrio) el texto secundario va en --ds-text, nunca en muted:
   el muted daba 1,4–2,9:1 en el peor instante del campo vivo. Dentro de superficies sólidas (burbujas) sigue muted. */
.lp-hero__kicker {
  color: var(--ds-text);
  margin: 0 0 var(--ds-space-5);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
}

/* Un punto por debajo de --ds-text-display (6,2rem → 5,6rem) para que «Personas que» quepa en su columna con aire. */
.lp-hero__title {
  margin: 0;
  font-size: clamp(3.3rem, 6.2vw, 5.6rem);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-display);
  letter-spacing: var(--ds-tracking-display);
  text-wrap: balance;
}

.lp-hero__line {
  display: block;
}

.lp-hero__accent {
  font-style: normal;
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-accent-strong);
}

.lp-hero__lede {
  max-width: 56ch;
  margin: var(--ds-space-6) 0 0;
  font-size: var(--ds-text-lede);
  line-height: var(--ds-leading-normal);
  text-wrap: pretty;
}

.lp-hero__lede strong {
  font-weight: var(--ds-weight-bold);
}

.lp-hero__audience {
  margin: var(--ds-space-3) 0 0;
  font-size: var(--ds-text-ui);
  color: var(--ds-text);
}

.lp-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-8);
}

/* Secundario sobre el campo (aprobado en Gates 1–2): sin relleno, solo la hairline fuerte. */
.lp-hero__ctas .ds-button--secondary {
  background: transparent;
  border-color: var(--ds-border-strong);
}

.lp-hero__ctas .ds-button--secondary:hover {
  background: var(--ds-accent-tint);
}

.lp-hero__note {
  max-width: 44ch;
  margin: var(--ds-space-4) 0 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
}

/* ── Embudo vivo (funnel.js): personas que entran por arriba y billetes que salen por abajo, en la columna del medio
   (apilado: en la fila entre el copy y el chat, y el lienzo cubre solo esa fila). Encima del velo (debajo, el logo se
   apagaba a gris) y siempre debajo del contenido: nunca pasa por detrás del texto, así que no toca el contraste medido
   del copy. Abre la escena: se funde en cuanto tiene su primer fotograma y la timeline del hero espera a verlo. ── */

.lp-funnel {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ds-dur-cinematic) var(--ds-ease-enter);
}

.lp-funnel.is-on {
  opacity: 1;
}

/* ── Chat de vidrio (D-017: vertical, completo en la vista, centrado en su fila) ── */

.lp-hero__demo {
  grid-column: 3;
  width: 100%;
  max-width: 416px;
  justify-self: end;
}

.lp-chat {
  display: grid;
  gap: var(--ds-space-3);
  margin: 0;
  padding: var(--ds-space-4);
}

.lp-chat__head {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
}

.lp-chat__avatar {
  flex: none;
  width: 36px;
  height: 36px;
}

.lp-chat__who {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: var(--ds-leading-snug);
}

.lp-chat__who small.ds-live--online {
  color: var(--ds-text);
}

.lp-chat__who strong {
  overflow: hidden;
  font-size: var(--ds-text-ui);
  font-weight: var(--ds-weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lp-chat .ds-live--typing .ds-live__dot {
  background: var(--ds-warning);
}

/* El chip de demostración se compacta en dos líneas para que el nombre del agente quepa entero; nunca desaparece. */
.lp-chat__chip {
  flex: none;
  max-width: 128px;
  margin-left: auto;
  padding: var(--ds-space-1) var(--ds-space-2);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
  font-size: var(--ds-text-2xs);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
  text-align: right;
}

.lp-chat__day {
  justify-self: center;
  margin: 0;
  font-size: var(--ds-text-2xs);
  letter-spacing: var(--ds-tracking-wide);
  color: var(--ds-text);
}

.lp-chat__thread {
  display: grid;
  gap: var(--ds-space-2);
  align-content: end;
  height: 300px;
  overflow: hidden;
}

/* Burbujas: aún no hay tokens de chat (S4); se derivan de los existentes como en la exploración aprobada. */
.lp-bubble {
  position: relative;
  max-width: 86%;
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-lg);
  font-size: var(--ds-text-ui);
  line-height: var(--ds-leading-normal);
}

.lp-bubble p {
  margin: 0;
}

.lp-bubble--in {
  justify-self: start;
  border-bottom-left-radius: var(--ds-radius-xs);
  background: color-mix(in oklab, var(--ds-surface-raised) 75%, transparent);
}

.lp-bubble--out {
  justify-self: end;
  border-bottom-right-radius: var(--ds-radius-xs);
  background: color-mix(in oklab, var(--ds-accent) 16%, var(--ds-surface-raised));
}

.lp-bubble__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-space-1);
  margin-top: var(--ds-space-1);
  font-size: var(--ds-text-2xs);
  color: var(--ds-text-muted);
}

.lp-bubble__ticks {
  width: 15px;
  height: 10px;
  fill: none;
  stroke: var(--ds-info);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Calma: la respuesta llega completa, en fundido (entra lento, sale rápido). */
.lp-bubble--reply {
  transition: opacity var(--ds-dur-slow) var(--ds-ease-enter);
}

.lp-bubble--reply.is-pending {
  opacity: 0;
  transition: opacity var(--ds-dur-fast) var(--ds-ease-exit);
}

/* La regla vieja de styles.css (.js [data-hero-reply].is-pending) la bajaba 10 px sin transición: saltaba al irse. */
.lp-chat [data-hero-reply].is-pending {
  transform: none;
}

/* WCAG 2.2.2: «Pausar» del chat también congela los pulsos infinitos del hero (kicker y presencia) y los reanuda. */
.lp-hero.is-paused .ds-live__dot::after,
.lp-hero.is-paused .ds-live__typing i {
  animation-play-state: paused;
}

.lp-bubble--typing {
  padding: var(--ds-space-3) var(--ds-space-4);
}

.lp-chat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
}

.lp-chat__foot p {
  margin: 0;
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
}

/* D-041: sobre el campo el texto va pleno; el ghost del sistema es muted y en light no llegaba a AA sobre el vidrio (3,8). */
.lp-chat__toggle {
  color: var(--ds-text);
}

.lp-chat__toggle svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-chat__toggle .lp-chat__play,
.lp-chat__toggle[aria-pressed="true"] .lp-chat__pause {
  display: none;
}

.lp-chat__toggle[aria-pressed="true"] .lp-chat__play {
  display: block;
  fill: currentColor;
}

html:not(.js) .lp-chat__toggle {
  display: none;
}

/* ── Timeline de carga (Calma): el <head> marca `lp-js` y todo espera oculto a que app.js lo funda en su sitio.
   Con reduced-motion no hay timeline: todo en su sitio desde el primer paint. ── */

.lp-js .lp-header,
.lp-js .lp-hero__line,
.lp-js [data-lp-reveal],
.lp-js .lp-chat {
  opacity: 0;
}

.lp-js .is-in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lp-funnel {
    transition: none;
  }

  .lp-js .lp-header,
  .lp-js .lp-hero__line,
  .lp-js [data-lp-reveal],
  .lp-js .lp-chat {
    opacity: 1;
  }
}

/* ── Responsive. Menú compacto ≤ 1220: de 981 a ~1180 la píldora y las acciones no cabían y se pisaban (hasta 98 px a
   981), y hasta 1220 quedaban a menos de 16 px. 980 (hero apilado) y 720 (dock móvil) siguen siendo los cortes. ── */

@media (max-width: 1220px) {
  /* marca · acciones · menú, a 8 px como dentro de las acciones (el menú va antes del <nav> en el DOM, WCAG 2.4.3) */
  .lp-header__inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: var(--ds-space-2);
  }

  .lp-nav__menu {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
  }

  /* Panel flotante con la receta de Menu «Caja»: raised + hairline fuerte, radio md, sombra float; nace desde su esquina,
     alineado con el botón de menú (su marco es .lp-header__inner). */
  .lp-nav {
    position: absolute;
    top: calc(100% + var(--ds-space-2));
    right: 0;
    left: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: min(320px, 100%);
    padding: var(--ds-space-1);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-raised);
    box-shadow: var(--ds-shadow-float);
    transform: scale(var(--ds-scale-enter));
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, transform, visibility;
    transition-duration: var(--ds-dur-fast), var(--ds-dur-fast), 0s;
    transition-delay: 0s, 0s, var(--ds-dur-fast);
    transition-timing-function: var(--ds-ease-exit);
  }

  .lp-nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition-duration: var(--ds-dur-base), var(--ds-dur-base), 0s;
    transition-delay: 0s;
    transition-timing-function: var(--ds-ease-enter);
  }

  html:not(.js) .lp-nav {
    position: static;
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
  }

  html:not(.js) .lp-header__inner {
    height: auto;
    padding-block: var(--ds-space-3);
  }

  html:not(.js) .lp-nav__menu {
    display: none;
  }

  .lp-nav a,
  .lp-header.is-solid .lp-nav a {
    height: var(--ds-control-h);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text);
    opacity: 1;
  }

  .lp-nav a:hover,
  .lp-nav a[aria-current="true"] {
    background: var(--ds-surface-sunken);
  }

  .lp-nav__ind {
    display: none;
  }
}

@media (max-width: 980px) {
  .lp-header__inner {
    width: min(1240px, 100% - 2 * var(--ds-space-6));
  }

  /* Apilado, el embudo va entre el copy y el chat: la fila de en medio es su escenario. */
  .lp-hero__shell {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(15rem, 30svh, 18rem);
    width: min(1240px, 100% - 2 * var(--ds-space-6));
    padding-top: calc(var(--ds-control-h) + 2 * var(--ds-space-4) + var(--ds-space-8));
  }

  .lp-hero__demo {
    grid-column: 1;
    justify-self: center;
  }

  /* D-042 · Bruma: apilado, el copy ocupa todo el ancho y el radial de escritorio no lo cubría (peor instante 1,6:1).
     Columna del velo hasta el 58 % del hero, que se disuelve al 69 % sobre el chat. El copy termina entre el 48 %
     (768) y el 56,7 % (320–345, una línea más): si el copy crece, se vuelve a medir.
     En claro, 65 %: con 62 % «venden» (--ds-accent-strong) medía 2,87 píxel a píxel con el grano cuando pasaba detrás el
     stop más oscuro del campo, que es el mismo color del texto. 65 % es el mínimo que lo deja ≥ 3 (3,02); 64 % daba 2,99. */
  .lp-hero.ds-mesh--veil::after {
    background: linear-gradient(to bottom, var(--ds-field-veil) 58%, transparent 69%);
    opacity: 0.65;
  }

  /* En oscuro, 72 %: con 62 % «venden» (--ds-accent-strong) medía 2,46 cuando el stop más claro del campo pasaba detrás.
     72 % es el mínimo que lo deja ≥ 3 en el peor instante también con el grano (3,03 píxel a píxel; 71 % daba 2,97);
     el resto del copy sube de 5,66 a 7,21. */
  [data-theme="dark"] .lp-hero.ds-mesh--veil::after {
    opacity: 0.72;
  }
}

/* Escritorio estrecho en oscuro (981–1439): el copy llega más a la derecha del centro del radial de ds.css (D-041) que a
   1440, donde el velo ya se disuelve. «venden» medía 2,57–2,88 píxel a píxel con el grano y el lede bajaba a 4,13. El mismo
   radial, pleno hasta el 7 % del radio en vez de disolverse desde el centro, y con el mismo final al 70 %: «venden» ≥ 3,06 y
   texto normal ≥ 4,73. 6 % daba 2,98. */
@media (min-width: 981px) and (max-width: 1439px) {
  [data-theme="dark"] .lp-hero.ds-mesh--veil::after {
    background: radial-gradient(100% 120% at 22% 55%, var(--ds-field-veil) 7%, transparent 70%);
  }
}

/* Desde 1440 en oscuro también falla, pero sin patrón de ancho o alto: pantallas bajas cerca de 1440 (1440×760–880,
   1470×800, 1480×760) y anchas (2560×950/1080, 3440×1300) daban 2,81–2,98 en «venden» píxel a píxel con el grano;
   1512–1920 y 2560×1300 pasaban. El mismo radial pleno hasta el 3 %: todas ≥ 3,03 (manda 3440×1300; 2 % daba 2,97). */
@media (min-width: 1440px) {
  [data-theme="dark"] .lp-hero.ds-mesh--veil::after {
    background: radial-gradient(100% 120% at 22% 55%, var(--ds-field-veil) 3%, transparent 70%);
  }
}

@media (max-width: 720px) {
  .lp-header__inner,
  .lp-hero__shell {
    width: min(1240px, 100% - 2 * var(--ds-space-4));
  }

  .lp-header__inner {
    height: calc(var(--ds-control-h) + 2 * var(--ds-space-3));
  }

  .lp-hero__shell {
    padding-top: calc(var(--ds-control-h) + 2 * var(--ds-space-3) + var(--ds-space-8));
  }

  /* El dock móvil (.mobile-action) toma el relevo del CTA de la barra, como hoy. */
  .lp-header__cta {
    display: none;
  }

  .lp-hero__ctas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
}

@media (max-width: 480px) {
  .lp-brand__lockup {
    height: 20px;
  }

  /* En teléfono el nombre del agente parte en dos líneas antes que cortarse con puntos suspensivos. */
  .lp-chat__who strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .lp-bubble {
    max-width: 94%;
  }
}

/* Por debajo de ~372 px el lockup completo (168 px a 20 de alto) pisaba «Entrar»: queda «optiMind», sin «by DarkFunnels»,
   como hacía .brand-by. El SVG no cambia de viewBox, así que además el enlace lo recorta donde acaba el wordmark
   (x = 495,5 de 842 → 99 px a 20 px de alto); el nombre accesible sigue siendo el completo (aria-label). */
@media (max-width: 400px) {
  /* «Personas que» mide 5,96 em: por debajo de ~355 px el mínimo del titular (3,3rem) lo partía en dos líneas. */
  .lp-hero__title {
    font-size: min(3.3rem, 14.9vw);
  }

  .lp-brand {
    width: 100px;
    overflow: hidden;
  }

  /* sin esto el SVG, hijo flex, encoge a 100 px y escala el lockup entero en vez de recortarse */
  .lp-brand__lockup {
    flex: none;
  }

  .lp-brand__by {
    display: none;
  }
}

/* ── Reduced-motion diseñado (MOTION.md §5): styles.css ya no apaga las transiciones en la cabecera ni en el hero; aquí
   todo cambia por crossfade o por color, sin desplazar ni escalar. ── */
@media (prefers-reduced-motion: reduce) {
  .lp-nav__ind {
    transition: opacity var(--ds-dur-base) var(--ds-ease-exit);
  }

  .lp-nav__ind.is-on {
    transition: opacity var(--ds-dur-base) var(--ds-ease-enter);
  }

  .lp-nav,
  .lp-nav.is-open {
    transform: none;
  }
}