/*
  ---------------------------------------------------------------
  Las fuentes se sirven desde aquí, no desde Google
  ---------------------------------------------------------------

  El sitio las pedía a `fonts.googleapis.com`. Funcionaba, y estaba mal
  por una razón concreta: **la página que más lo hacía era /privacy.**
  Cada visita mandaba la IP de quien viene a leer "no vendemos tus datos"
  a un tercero, antes de que llegara a esa frase. Un tribunal de Múnich
  ya dijo en 2022 (LG München I, 3 O 17493/20) que incrustar Google Fonts
  sin consentimiento transmite la IP y no cumple.

  No es solo cumplimiento: es coherencia. Un sitio cuyo argumento entero
  es la privacidad no puede pedirle permiso a nadie para dibujar su
  propio logotipo.

  Son 247 KB de ocho archivos, servidos desde el mismo dominio y
  cacheados por el navegador. Menos peticiones que antes, y ninguna
  fuera.

  Los `.woff2` salen de los `.ttf` que ya trae la app en
  `node_modules/@expo-google-fonts/`. Misma fuente que el teléfono.
  Saira es SIL Open Font License 1.1: se puede alojar, se puede
  redistribuir, y lo único que pide es que no se venda por separado.
*/
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/saira-400.woff2') format('woff2'); }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonts/saira-600.woff2') format('woff2'); }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/fonts/saira-700.woff2') format('woff2'); }
@font-face { font-family: 'Saira'; font-style: italic; font-weight: 900;
  font-display: swap; src: url('/fonts/saira-900i.woff2') format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonts/sairacond-600.woff2') format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/fonts/sairacond-700.woff2') format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 800;
  font-display: swap; src: url('/fonts/sairacond-800.woff2') format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 900;
  font-display: swap; src: url('/fonts/sairacond-900.woff2') format('woff2'); }

/*
  El estilo del sitio es el de la app, con los mismos valores.

  Los colores, los radios y los pesos salen de `src/theme.ts`; si allí
  cambia el rojo, aquí también. **Las superficies son negro translúcido,
  nunca gris**: blanco a baja opacidad sobre negro da gris por definición,
  así que lo que varía es la opacidad del negro. Y el contorno de un píxel
  es un filo, no un relleno.

  La fibra de carbono va dibujada en SVG dentro de un `data:` URI por lo
  mismo que en la app: pesa nada y es nítida en cualquier densidad.
*/

:root {
  --bg: #050507;
  --surface: rgba(18, 18, 22, 0.75);
  --border: rgba(255, 255, 255, 0.055);
  --border-strong: rgba(255, 255, 255, 0.13);
  --text: #ffffff;
  --dim: #b9b9c2;
  --muted: #7a7a86;
  --red: #e10600;
  --wine: #6b0a17;
  --accent: #c1121f;
  --carbon: #0b0b0e;

  --panel: linear-gradient(
    180deg,
    rgba(42, 42, 49, 0.94) 0%,
    rgba(14, 14, 18, 0.93) 50%,
    rgba(0, 0, 0, 0.94) 100%
  );
  --panel-accent: linear-gradient(
    180deg,
    rgba(92, 20, 27, 0.72) 0%,
    rgba(16, 13, 16, 0.93) 50%,
    rgba(0, 0, 0, 0.94) 100%
  );

  --body: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Saira Condensed', 'Saira', system-ui, sans-serif;

  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' fill='%230B0B0E'/%3E%3Cg stroke='%231C1C22' stroke-width='1.6'%3E%3Cpath d='M0 12 L12 0 M-3 3 L3 -3 M9 15 L15 9'/%3E%3Cpath d='M12 24 L24 12 M9 27 L15 21 M21 15 L27 9'/%3E%3C/g%3E%3Cg stroke='%23151519' stroke-width='1.6'%3E%3Cpath d='M12 0 L24 12 M21 -3 L27 3 M9 9 L15 15'/%3E%3Cpath d='M0 12 L12 24 M-3 21 L3 27 M9 9 L15 15'/%3E%3C/g%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid rgba(225, 6, 0, 0.35);
}

a:hover {
  border-bottom-color: var(--red);
}

/* ---------------------------------------------------------------
   El logotipo
   --------------------------------------------------------------- */

/*
  El `padding-right` no es aire, es un arreglo, y es el mismo de la app: la
  fuente es cursiva y el trazo sobresale a la derecha del avance del glifo,
  así que el pico de la X se recorta. El tracking negativo se aplica
  también después de la última letra y se come otro píxel por ese lado.
*/
.mark {
  border: 0;
  color: var(--text);
  display: inline-block;
  font-family: var(--body);
  font-size: 26px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1.15;
  padding-right: 4px;
  text-transform: none;
}

.mark span {
  color: var(--red);
}

.mark.small {
  font-size: 20px;
  padding-right: 3px;
}

/* ---------------------------------------------------------------
   Cabecera y pie
   --------------------------------------------------------------- */

header.site {
  align-items: center;
  background-color: var(--carbon);
  background-image: var(--weave);
  border-bottom: 1px solid rgba(225, 6, 0, 0.28);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}

header.site nav,
footer.site nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

header.site nav a {
  border: 0;
  color: var(--dim);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

header.site nav a:hover,
header.site nav a[aria-current] {
  color: var(--red);
}

footer.site {
  background: var(--panel);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 64px;
  padding: 40px 24px 56px;
}

.foot-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin: 0 auto;
  max-width: 1080px;
}

footer.site nav {
  flex-direction: column;
  gap: 8px;
}

footer.site nav a {
  border: 0;
  color: var(--dim);
  font-size: 14px;
}

footer.site nav a:hover {
  color: var(--red);
}

.tagline {
  color: var(--red);
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 2px;
  margin: 4px 0 0;
  text-transform: uppercase;
}

.who p {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 2px;
}

.fine {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
  margin: 32px auto 0;
  max-width: 1080px;
  padding-top: 20px;
}

/* ---------------------------------------------------------------
   El cuerpo
   --------------------------------------------------------------- */

main.doc {
  margin: 0 auto;
  max-width: 720px;
  padding: 48px 24px 0;
}

main.wide {
  margin: 0 auto;
  max-width: 1080px;
  padding: 0 24px;
}

h1 {
  font-family: var(--display);
  font-size: clamp(32px, 6.2vw, 50px);
  /* La misma sombra dura del titular de la portada, más pequeña: es lo
     que hace que una política de privacidad se vea del mismo sitio que la
     portada sin dejar de ser legible. */
  text-shadow: 4px 4px 0 rgba(107, 10, 23, 0.8);
  font-weight: 800;
  letter-spacing: 2.5px;
  /* El tracking se aplica también después de la última letra: sin esto,
     un título centrado o pegado al borde pierde el último píxel. */
  line-height: 1.12;
  margin: 0 0 6px;
  padding-right: 3px;
  text-transform: uppercase;
}

h2 {
  align-items: center;
  display: flex;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 1.8px;
  margin: 44px 0 12px;
  padding-right: 2px;
  text-transform: uppercase;
}

/* La barra roja de `SectionTitle`. */
.bar {
  background: linear-gradient(180deg, var(--red), var(--wine));
  border-radius: 2px;
  display: inline-block;
  flex: none;
  height: 18px;
  width: 3px;
}

h3 {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0 0 6px;
}

p {
  color: var(--dim);
  margin: 0 0 14px;
}

strong {
  color: var(--text);
  font-weight: 600;
}

ul {
  color: var(--dim);
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
}

li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
}

li::before {
  color: var(--red);
  content: '';
  background: var(--red);
  border-radius: 50%;
  height: 5px;
  left: 4px;
  position: absolute;
  top: 12px;
  width: 5px;
}

.lead {
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
}

.updated {
  color: var(--muted);
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 1.4px;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.kicker {
  color: var(--red);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.2px;
  margin: 0 0 10px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Capas de textura: grano, líneas de escaneo y viñeta
   ---------------------------------------------------------------

   Las tres van sobre todo lo demás, fijas y sin recoger clics. Es lo que
   separa una página de una pantalla: el grano rompe los degradados
   planos, las líneas de escaneo dan el CRT, y la viñeta empuja la mirada
   al centro.

   Muy flojas a propósito. Si se ven, están mal.
   --------------------------------------------------------------- */

.fx {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 9;
}

.fx.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.16;
}

.fx.scan {
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.028) 0px,
    rgba(255, 255, 255, 0.028) 1px,
    transparent 1px,
    transparent 3px
  );
}

.fx.vignette {
  background: radial-gradient(
    ellipse at 50% 40%,
    transparent 45%,
    rgba(0, 0, 0, 0.42) 100%
  );
}

/* ---------------------------------------------------------------
   La portada
   --------------------------------------------------------------- */

.hero {
  isolation: isolate;
  margin: 0 -24px;
  min-height: min(80vh, 700px);
  overflow: hidden;
  padding: 0 24px;
  position: relative;
}

.hero-bg {
  inset: 0;
  position: absolute;
  z-index: -1;
}

.hero-bg svg {
  display: block;
  height: 100%;
  width: 100%;
}

/*
  El texto se apoya en la mitad de abajo, no centrado: el punto de fuga de
  la carretera cae ahí y un título encima del horizonte flota.
*/
/*
  Un velo que baja de izquierda a derecha, entre el dibujo y el texto.

  Sin él, el resplandor del horizonte cae **dentro** de las letras huecas
  de "TOGETHER." y las rellena de rojo turbio — y peor: cambia según el
  alto de la ventana, así que a veces se ve hueco y a veces relleno. El
  velo fija el fondo del texto y deja limpia la derecha, que es donde
  está la carretera.
*/
.hero-inner::before {
  background: linear-gradient(
    100deg,
    rgba(5, 5, 7, 0.88) 0%,
    rgba(5, 5, 7, 0.72) 34%,
    rgba(5, 5, 7, 0.18) 56%,
    rgba(5, 5, 7, 0) 74%
  );
  content: '';
  inset: -60px -40px;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 auto;
  max-width: 1080px;
  min-height: min(80vh, 700px);
  padding: 72px 0 128px;
  position: relative;
}

/* ---------------------------------------------------------------
   El título, tratado como cartel
   --------------------------------------------------------------- */

/*
  Dos líneas, y **cada una con un tratamiento distinto**: la primera
  maciza, la segunda hueca con el filo rojo. Las dos iguales serían un
  bloque de texto grande; así se lee como un rótulo.

  El peso 900 de Saira Condensed solo existe aquí. En la app no se carga
  —cada peso propio son cientos de kB en el bundle— pero en una página web
  la fuente ya viaja por su cuenta y el titular es lo único que se ve
  antes de leer nada.
*/
.poster {
  font-family: var(--display);
  font-size: clamp(58px, 13.5vw, 156px);
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 0.84;
  margin: 0 0 22px;
  /* El tracking se aplica también tras la última letra; sin esto el
     último trazo se recorta contra el borde del bloque. */
  padding-right: 4px;
  text-transform: uppercase;
}

.poster span {
  display: block;
}

.poster .solid {
  color: var(--text);
  /* Una sombra dura de vino, como una mala registración de imprenta.
     Con desenfoque parecería un error de CSS; dura, parece intención. */
  text-shadow: 6px 6px 0 rgba(107, 10, 23, 0.85);
}

.poster .hollow {
  -webkit-text-stroke: 2px var(--red);
  /*
    Casi negro, **no transparente**. Con las letras transparentes el
    resplandor del horizonte se cuela dentro y las rellena de rojo turbio,
    y además cambia con el alto de la ventana: la misma palabra se veía
    hueca a 1280 y rellena a 1200. Un relleno propio, apenas translúcido,
    se lee igual sobre cualquier cosa que haya detrás.
  */
  color: rgba(5, 5, 7, 0.82);
}

@supports not (-webkit-text-stroke: 1px red) {
  /* Sin contorno, relleno rojo: el contraste se mantiene y la palabra no
     desaparece en un negro sobre negro. Degradar, no romperse. */
  .poster .hollow {
    color: var(--red);
  }
}

.hero .lead {
  max-width: 32em;
}

.hero .kicker {
  margin-bottom: 14px;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.badge {
  background: linear-gradient(135deg, var(--red), var(--wine));
  border-radius: 4px;
  color: #fff;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  padding: 9px 18px;
  text-transform: uppercase;
}

.badge.ghost {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-strong);
  color: var(--dim);
}

/* ---------------------------------------------------------------
   El HUD de la escala de velocidad
   --------------------------------------------------------------- */

.hud {
  backdrop-filter: blur(6px);
  background: rgba(7, 7, 10, 0.72);
  border-top: 1px solid rgba(225, 6, 0, 0.3);
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  justify-content: center;
  left: 0;
  padding: 12px 24px;
  position: absolute;
  right: 0;
}

.hud-label {
  color: var(--muted);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.bands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.band {
  align-items: center;
  color: var(--dim);
  display: flex;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 1.2px;
}

.band i {
  border-radius: 1px;
  display: block;
  height: 3px;
  width: 22px;
}

/* ---------------------------------------------------------------
   La cinta
   --------------------------------------------------------------- */

.ticker {
  background: var(--red);
  margin: 0 -24px 8px;
  overflow: hidden;
  padding: 9px 0;
  position: relative;
}

.ticker-track {
  animation: roll 26s linear infinite;
  display: flex;
  gap: 0;
  white-space: nowrap;
  width: max-content;
}

.ticker span {
  color: #fff;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  padding: 0 26px;
  text-transform: uppercase;
}

/* Un separador entre entradas, no una coma. */
.ticker span::after {
  color: rgba(0, 0, 0, 0.45);
  content: '///';
  letter-spacing: 1px;
  margin-left: 26px;
}

@keyframes roll {
  from {
    transform: translateX(0);
  }
  to {
    /* La cinta lleva la lista dos veces, así que media vuelta la deja
       exactamente donde empezó y el salto no se ve. */
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none;
  }
}

/* ---------------------------------------------------------------
   Secciones
   --------------------------------------------------------------- */

.band-sec {
  padding: 52px 0 8px;
}

h2.section {
  margin-top: 0;
}

.grid {
  display: grid;
  gap: 14px;
  /* 250 y no 236: con nueve tarjetas, cuatro por fila dejan 4+4+1 y un
     hueco enorme al final. A tres por fila salen tres filas llenas. El
     número de columnas se elige por cuántas tarjetas hay, no al revés. */
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  margin-top: 20px;
}

/*
  Tarjeta numerada, con la esquina cortada. El corte es lo que la saca de
  "caja con borde redondeado" y la mete en la familia de los paneles de
  un juego; el número la convierte en una lista con orden en vez de en
  ocho cosas sueltas.
*/
.mission {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top-color: rgba(255, 255, 255, 0.12);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  padding: 18px;
  position: relative;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.mission::before {
  background: linear-gradient(180deg, var(--red), var(--wine));
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 2px;
}

.mission:hover {
  border-color: rgba(225, 6, 0, 0.35);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .mission {
    transition: none;
  }
  .mission:hover {
    transform: none;
  }
}

.mission .num {
  color: rgba(225, 6, 0, 0.55);
  display: block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.4px;
  margin-bottom: 4px;
}

.mission h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.mission p {
  font-size: 14.5px;
  margin: 0;
}

/* ---------------------------------------------------------------
   Lo que la app no hace
   --------------------------------------------------------------- */

.rules {
  display: grid;
  gap: 14px;
  /* Cuatro reglas: a dos columnas salen 2+2. A tres, 3+1. */
  /* El `min(..., 100%)` no sobra: `minmax` con un mínimo fijo **no
     encoge por debajo de él**, así que a 390 px de ancho la fila medía
     420 y la página entera se iba de lado. */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  margin-top: 20px;
}

.rules article {
  background: var(--panel-accent);
  border: 1px solid rgba(225, 6, 0, 0.22);
  border-radius: 2px;
  padding: 20px 20px 20px 22px;
  position: relative;
}

.rules article::before {
  background: var(--red);
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 3px;
}

.rules h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.rules p {
  margin: 0;
}

/* ---------------------------------------------------------------
   La puerta
   --------------------------------------------------------------- */

.gate {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(240px, 320px) 1fr;
  margin-top: 20px;
}

/*
  La caja del código es **la misma pieza que la ventana de invitación de
  la app**: negro, filo rojo al costado, tracking ancho. Quien vea las dos
  reconoce que son lo mismo, que es de lo que va tener una identidad.

  Los puntos son puntos, no un código de mentira: un código escrito aquí
  invita a probarlo.
*/
.gate-code {
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(225, 6, 0, 0.45);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  overflow: hidden;
  padding: 34px 18px;
  position: relative;
}

.gate-code .slash {
  background: linear-gradient(180deg, var(--red), var(--wine));
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 5px;
}

.gate-code .code {
  color: var(--text);
  font-family: var(--display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 10px;
  line-height: 1;
  padding-left: 10px;
}

.gate-code .code-label {
  color: var(--muted);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.gate-text p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   El aviso de borrador
   --------------------------------------------------------------- */

.draft {
  background: linear-gradient(135deg, var(--red), var(--wine));
  color: #fff;
  font-size: 14px;
  padding: 12px 24px;
  text-align: center;
}

.draft code {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---------------------------------------------------------------
   Teléfono
   --------------------------------------------------------------- */

@media (max-width: 760px) {
  header.site {
    padding: 12px 16px;
  }

  main.doc,
  main.wide {
    padding-left: 16px;
    padding-right: 16px;
  }

  main.doc {
    padding-top: 32px;
  }

  .hero,
  .ticker {
    margin-left: -16px;
    margin-right: -16px;
  }

  .hero {
    min-height: min(84vh, 640px);
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-inner {
    min-height: min(84vh, 640px);
    padding: 84px 0 148px;
  }

  /*
    El titular se mide por la línea más larga, que es "TOGETHER.". A
    13,5vw esa línea llega justo al borde y el punto final queda pegado al
    filo de la pantalla. A 11vw respira.
  */
  .poster {
    font-size: clamp(42px, 11vw, 96px);
    line-height: 0.9;
  }

  /* Con la sombra a 6 px, a este tamaño de letra el título se lee doble.
     Baja con él. */
  .poster .solid {
    text-shadow: 3px 3px 0 rgba(107, 10, 23, 0.85);
  }

  .poster .hollow {
    -webkit-text-stroke-width: 1.5px;
  }

  /* El HUD pasa a una columna: en fila, las cinco bandas y la etiqueta se
     parten en cuatro renglones desiguales. */
  .hud {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .gate {
    grid-template-columns: 1fr;
  }

  .gate-code {
    padding: 26px 18px;
  }

  .gate-code .code {
    font-size: 32px;
    letter-spacing: 8px;
  }
}

/*
  Las cinco bandas de velocidad de la leyenda.

  Los colores están aquí y no en un `style=` en línea para que la
  política de seguridad de contenidos pueda ser `style-src 'self'` sin
  `'unsafe-inline'`. Son los mismos cinco de `SPEED_BANDS` en
  `src/theme.ts`, que es lo que pinta la ruta en el mapa de la app: si
  cambian allí, cambian aquí.
*/
.band .b1 { background: #22D3EE; }
.band .b2 { background: #4ADE80; }
.band .b3 { background: #FBBF24; }
.band .b4 { background: #FB923C; }
.band .b5 { background: #E10600; }