/* BADKRAFT — badkraft.com
   Un cartel fotocopiado: tóner negro y tinta de papel, sin grises en la interfaz.
   El color solo vive dentro del arte de los juegos. */

@font-face {
  font-family: 'League Gothic';
  src: url(fonts/league-gothic-latin-400-normal.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url(fonts/courier-prime-latin-400-normal.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url(fonts/courier-prime-latin-700-normal.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url(fonts/archivo-latin-400-normal.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url(fonts/archivo-latin-700-normal.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Los dos únicos valores de la interfaz. */
  --toner: #0d0d0c;
  --papel: #eeede8;

  --f-cartel: 'League Gothic', 'Arial Narrow', sans-serif;
  --f-maquina: 'Courier Prime', 'Courier New', monospace;
  --f-texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --margen: clamp(16px, 3.4vw, 44px);
  --hueco: clamp(16px, 2vw, 28px);
  --ancho: 1360px;

  /* Ritmo vertical: un solo paso que crece con la pantalla. */
  --paso: clamp(8px, 1vw, 12px);

  --salida: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
  scrollbar-color: var(--papel) var(--toner);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background-color: var(--toner);
  background-image: url(img/toner.webp);
  background-size: 384px 384px;
  color: var(--papel);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p,
h1,
h2,
h3,
dl,
dd,
figure,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

::selection {
  background: var(--papel);
  color: var(--toner);
}

:focus-visible {
  outline: 3px solid var(--papel);
  outline-offset: 4px;
}

.oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: var(--margen);
  top: 8px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--papel);
  color: var(--toner);
  font-family: var(--f-maquina);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--salida);
}
.saltar:focus {
  transform: none;
  outline-color: var(--papel);
}

.marco {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
}

/* Rejilla de 12 columnas bajo todo el collage. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hueco);
}

/* Letra mecanografiada: lo que en el cartel va tecleado (datos, direcciones, letra pequeña). */
.tecleado {
  font-family: var(--f-maquina);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.icono {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: square;
}

/* La letra de cartel sale de la fotocopiadora con poros: el tóner no agarra en todas partes. */
.lema,
.titulo-seccion,
.cartel__nombre,
.antes__titulo,
.pie h2 {
  -webkit-mask: url(img/tinta-desgaste.webp) 0 0 / 192px 192px;
  mask: url(img/tinta-desgaste.webp) 0 0 / 192px 192px;
}

/* ───────────── Tira de arriba ───────────── */

.tira {
  border-bottom: 2px solid var(--papel);
  font-family: var(--f-maquina);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tira__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 28px;
  row-gap: 0;
  min-height: 52px;
}
.tira__marca {
  margin-right: auto;
  padding-block: 12px;
}
.tira__marca b {
  font-weight: 700;
}
.tira__nav ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4px;
}
.tira a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 8px;
  text-decoration: none;
}
.tira a:hover {
  background: var(--papel);
  color: var(--toner);
}
.tira__correo {
  text-transform: none;
  letter-spacing: 0.02em;
}
.idioma {
  display: flex;
  align-items: center;
  gap: 2px;
}
.idioma [aria-current] {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 8px;
  background: var(--papel);
  color: var(--toner);
  font-weight: 700;
}

/* ───────────── Portada ───────────── */

.portada {
  padding-top: calc(var(--paso) * 5);
  padding-bottom: calc(var(--paso) * 2);
}
.portada .rejilla {
  row-gap: calc(var(--paso) * 4);
  align-items: end;
}

.portada__logo {
  grid-column: 1 / span 7;
  position: relative;
  overflow: clip;
  aspect-ratio: 1600 / 776;
  font-size: 0;
}
.portada__logo img {
  width: 100%;
}
/* El logotipo es blanco puro sobre negro: con «screen», lo negro deja ver el tóner del fondo.
   La mezcla va en las capas (no en la imagen) porque el recorte animado las aísla. */
.logo-fantasma,
.logo-tinta {
  mix-blend-mode: screen;
}
.logo-fantasma {
  position: absolute;
  inset: 0;
  opacity: 0.2;
}
.logo-tinta {
  position: relative;
  display: block;
}

/* La pasada del escáner de la fotocopiadora: una barra de luz baja y deja el logotipo impreso. */
.escaner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.escaner::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -72px;
  height: 72px;
  background: linear-gradient(to bottom, rgb(238 237 232 / 0), rgb(238 237 232 / 0.16) 80%, rgb(238 237 232 / 0.9) 97%, var(--papel));
  -webkit-mask: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .logo-tinta {
    animation: imprimir 1.5s cubic-bezier(0.45, 0.05, 0.25, 1) 0.25s both;
  }
  .escaner {
    animation: escanear 1.5s cubic-bezier(0.45, 0.05, 0.25, 1) 0.25s both;
  }
}
@keyframes imprimir {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes escanear {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}
.portada__texto {
  grid-column: 8 / span 5;
  padding-bottom: 0.4em;
}
.lema {
  font-family: var(--f-cartel);
  font-weight: 400;
  font-size: clamp(2.75rem, 4.6vw, 4.5rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.intro {
  margin-top: calc(var(--paso) * 2.5);
  max-width: 34ch;
  font-size: 1.125rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* El cartel: los dos juegos como el reparto de un concierto. */
.cartel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block: 3px solid var(--papel);
}
.cartel__acto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(14px, 1.8vw, 28px);
  padding: calc(var(--paso) * 2.5) clamp(12px, 1.6vw, 24px) calc(var(--paso) * 2);
  text-decoration: none;
  transition: background-color 0.18s var(--salida), color 0.18s var(--salida);
}
/* El nombre arriba y la línea de datos SIEMPRE debajo, en su propia línea, mida lo que mida. */
.cartel__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 6px;
}
/* El recorte pequeño: una copia a color con su margen y una tira de cinta. */
.cartel__mini {
  position: relative;
  display: block;
  width: clamp(92px, 9.5vw, 140px);
  padding: 4px;
  background: var(--papel);
  box-shadow: 0 12px 22px -12px rgb(0 0 0 / 0.9), 0 2px 4px rgb(0 0 0 / 0.5);
  transform: rotate(-3deg);
}
.cartel__acto + .cartel__acto .cartel__mini {
  transform: rotate(2.5deg);
}
.cartel__mini::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 54%;
  height: 16px;
  background: url(img/cinta-1.webp) center / 100% 100% no-repeat;
  transform: translateX(-50%) rotate(-4deg);
}
.cartel__mini img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.cartel__acto + .cartel__acto {
  border-left: 1px solid var(--papel);
}
.cartel__acto:hover {
  background: var(--papel);
  color: var(--toner);
}
.cartel__datos .icono {
  display: inline-block;
  margin-left: 6px;
  vertical-align: -0.15em;
}
.cartel__nombre {
  font-family: var(--f-cartel);
  font-size: clamp(2.75rem, 4.8vw, 4.75rem);
  line-height: 0.9;
  text-transform: uppercase;
}
.cartel__datos {
  display: inline;
  font-family: var(--f-maquina);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ───────────── Los juegos ───────────── */

.juegos {
  padding-top: calc(var(--paso) * 8);
}

.juego + .juego {
  margin-top: calc(var(--paso) * 12);
}
/* La página no se ensancha mientras los recortes caen (giro y escala de la animación de pegado). */
.juegos {
  overflow-x: clip;
}

/* Recorte: una copia a color con su margen blanco, pegada con cinta. */
.recorte {
  --giro: 0deg;
  position: relative;
  padding: clamp(5px, 0.6vw, 9px);
  background: var(--papel);
  box-shadow: 0 22px 40px -18px rgb(0 0 0 / 0.9), 0 3px 6px rgb(0 0 0 / 0.5);
  transform: rotate(var(--giro));
}
.recorte img {
  width: 100%;
}
.recorte::before,
.recorte::after {
  content: '';
  position: absolute;
  z-index: 2;
  width: clamp(72px, 9vw, 128px);
  height: clamp(20px, 2.4vw, 34px);
  background: url(img/cinta-1.webp) center / 100% 100% no-repeat;
}
.recorte::before {
  top: calc(clamp(22px, 2.4vw, 34px) * -0.45);
  left: 8%;
  transform: rotate(-5deg);
}
.recorte::after {
  top: calc(clamp(22px, 2.4vw, 34px) * -0.4);
  right: 7%;
  transform: rotate(4deg);
  background-image: url(img/cinta-2.webp);
}
.recorte figcaption {
  padding: 8px 2px 1px;
  color: var(--toner);
  font-family: var(--f-maquina);
  font-size: 0.8125rem;
  line-height: 1.35;
}

/* Sello de goma, gastado. */
.sello {
  position: absolute;
  z-index: 3;
  padding: 0.12em 0.4em 0.02em;
  border: 0.1em double currentColor;
  border-width: 0.16em;
  font-family: var(--f-cartel);
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  -webkit-mask: url(img/sello-desgaste.webp) 0 0 / 5em 5em;
  mask: url(img/sello-desgaste.webp) 0 0 / 5em 5em;
}
.sello--papel {
  color: var(--papel);
}
.sello--toner {
  color: var(--toner);
}

.juego__entradilla {
  margin-top: calc(var(--paso) * 2);
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.28;
  text-wrap: balance;
}
.juego__texto {
  margin-top: calc(var(--paso) * 1.5);
  max-width: 62ch;
  text-wrap: pretty;
}

/* Datos con puntos guía, como una hoja mecanografiada. */
.datos {
  margin-top: calc(var(--paso) * 3);
  font-family: var(--f-maquina);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.datos div {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: 0.5em;
  padding-block: 5px;
}
.datos dt {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.datos dt::after {
  content: '';
  flex: 1;
  min-width: 1.5em;
  border-bottom: 2px dotted var(--papel);
  transform: translateY(-0.28em);
}
.datos dd {
  min-width: 0;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: calc(var(--paso) * 3.5);
}
.insignia {
  display: block;
  border-radius: 12px;
}
.insignia img {
  height: 58px;
  width: auto;
}
.enlace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid var(--papel);
  font-family: var(--f-maquina);
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color 0.18s var(--salida), color 0.18s var(--salida);
}
.enlace:hover {
  background: var(--papel);
  color: var(--toner);
}
.enlace-texto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--f-maquina);
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.enlace-texto:hover {
  text-underline-offset: 0.45em;
}
/* La acción principal de un juego va en relleno macizo (el blanco lleno se reserva para eso y para el foco). */
.enlace--lleno {
  background: var(--papel);
  color: var(--toner);
}
.enlace--lleno:hover {
  background: var(--toner);
  color: var(--papel);
}

/* Lo que tiene cada juego: una lista mecanografiada, con un guion dibujado delante de cada línea. */
.lista {
  display: grid;
  gap: 10px var(--hueco);
  align-content: start;
  margin: 0;
  padding: calc(var(--paso) * 2) 0 0;
  border-top: 2px solid var(--papel);
  list-style: none;
  font-size: 1rem;
  line-height: 1.45;
}
.lista li {
  position: relative;
  padding-left: 1.7em;
  text-wrap: pretty;
}
.lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 1.1em;
  height: 2px;
  background: var(--papel);
}
.juego .datos {
  margin-top: 0;
  padding-top: calc(var(--paso) * 1.5);
  border-top: 2px solid var(--papel);
}

/* Omniforgers: una partida de verdad (la captura), una carta entera con su marco y, detrás, el arte completo de
   otra carta como apoyo. A la izquierda; la ficha, a la derecha. */
.juego--omni {
  align-items: center;
  row-gap: calc(var(--paso) * 6);
}
.omni__collage {
  grid-column: 1 / span 7;
  position: relative;
  aspect-ratio: 100 / 66;
}
.omni__arte,
.omni__duelo,
.omni__carta-entera {
  position: absolute;
}
.omni__arte {
  --giro: -6deg;
  left: 0;
  top: 0;
  width: 27%;
  z-index: 1;
}
.omni__arte img {
  aspect-ratio: 760 / 1018;
  object-fit: cover;
}
.omni__duelo {
  --giro: -1.2deg;
  left: 7%;
  top: 18%;
  width: 70%;
  z-index: 2;
}
.omni__arte figcaption,
.omni__duelo figcaption {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* La carta entera es un objeto en sí (con su marco y sus esquinas): se pega sin margen blanco, con cinta, y su
   sombra sigue su silueta. */
.omni__carta-entera {
  --giro: 5deg;
  right: 0;
  top: 6%;
  width: 29%;
  z-index: 3;
  margin: 0;
  filter: drop-shadow(0 18px 18px rgb(0 0 0 / 0.75)) drop-shadow(0 3px 4px rgb(0 0 0 / 0.5));
  transform: rotate(var(--giro));
}
.omni__carta-entera::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: -12px;
  left: 50%;
  width: 46%;
  height: clamp(18px, 2vw, 28px);
  background: url(img/cinta-2.webp) center / 100% 100% no-repeat;
  transform: translateX(-50%) rotate(-3deg);
}
/* El sello, sobre el panel oscuro de abajo de la carta entera: tinta papel con contraste. */
.omni__collage .sello {
  right: 2%;
  bottom: 24%;
  z-index: 4;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  transform: rotate(-8deg);
}
.omni__ficha {
  grid-column: 8 / span 5;
}
.omni__nombre img {
  width: min(100%, 460px);
}
.omni__lista {
  grid-column: 1 / span 7;
  align-self: start;
  max-width: 62ch;
}
.omni__datos {
  grid-column: 8 / span 5;
  align-self: start;
}

/* Heatfield: el arte a todo lo ancho con el título pegado encima. */
.juego--hf {
  row-gap: calc(var(--paso) * 5);
}
.hf__cartel {
  grid-column: 1 / -1;
  position: relative;
  padding-top: clamp(28px, 4vw, 56px);
}
.hf__arte {
  --giro: 0.9deg;
  width: 94%;
  margin-left: auto;
}
.hf__titulo {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 40%;
  transform: rotate(-3deg);
  filter: drop-shadow(0 14px 18px rgb(0 0 0 / 0.65));
}
.hf__titulo img {
  width: 100%;
}
/* El sello, en papel sobre el asfalto oscuro de abajo a la derecha. */
.hf__arte .sello {
  right: 3%;
  bottom: 6%;
  transform: rotate(-6deg);
}
.hf__texto {
  grid-column: 1 / span 5;
  grid-row: 2;
}
.hf__lista {
  grid-column: 7 / span 6;
  grid-row: 2 / span 2;
  align-self: start;
}
.hf__datos {
  grid-column: 1 / span 5;
  grid-row: 3;
  align-self: start;
}

/* Etiquetas clavadas a lo que nombran. */
.recorte__img {
  position: relative;
}
.etiquetas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.etiqueta {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  font-family: var(--f-maquina);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.etiqueta__punto {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--toner);
  border-radius: 50%;
  background: var(--papel);
}
.etiqueta__num {
  display: none;
}
.etiqueta__texto {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
}
.etiqueta__texto::before {
  content: '';
  width: var(--linea, 56px);
  height: 2px;
  background: var(--toner);
  box-shadow: 0 0 0 1px rgb(238 237 232 / 0.85);
}
.etiqueta__texto span {
  padding: 6px 9px 5px;
  background: var(--toner);
  color: var(--papel);
}
/* Dónde está cada cosa en el arte (en % de la imagen). */
.etiqueta--n1 {
  --x: 65%;
  --y: 29.5%;
  --linea: 64px;
}
.etiqueta--n2 {
  --x: 54%;
  --y: 71.5%;
  --linea: 48px;
}
.etiqueta--n3 {
  --x: 27.5%;
  --y: 85%;
  --linea: 40px;
}
.etiqueta--der .etiqueta__texto {
  left: 7px;
}
.etiqueta--izq .etiqueta__texto {
  right: 7px;
  flex-direction: row-reverse;
}
.leyenda {
  display: none;
}

/* ───────────── El estudio ───────────── */

.estudio {
  margin-top: calc(var(--paso) * 12);
  padding-bottom: calc(var(--paso) * 6);
}
.estudio .rejilla {
  row-gap: calc(var(--paso) * 4);
  padding-top: calc(var(--paso) * 6);
  border-top: 3px solid var(--papel);
}
.estudio__texto {
  grid-column: 1 / span 6;
}
.titulo-seccion {
  font-family: var(--f-cartel);
  font-weight: 400;
  font-size: clamp(3.25rem, 5.6vw, 5.5rem);
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
}
.estudio__texto p {
  margin-top: calc(var(--paso) * 2.5);
  max-width: 52ch;
  font-size: 1.1875rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.estudio__ficha {
  grid-column: 8 / span 5;
  align-self: start;
  padding: calc(var(--paso) * 2.5) clamp(16px, 2vw, 28px) calc(var(--paso) * 2);
  border: 2px solid var(--papel);
}
.estudio__ficha .datos {
  margin-top: 0;
}

/* Antes de BADKRAFT: la trayectoria, en orden. Recuadrada a trazos mientras esté pendiente de revisión. */
.antes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: calc(var(--paso) * 3) var(--hueco);
  margin-top: calc(var(--paso) * 2);
}
.antes--pendiente {
  padding: calc(var(--paso) * 2.5) clamp(16px, 2vw, 24px) calc(var(--paso) * 3);
  border: 2px dashed var(--papel);
}
.antes__titulo {
  font-family: var(--f-cartel);
  font-weight: 400;
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.antes__aviso {
  margin-top: 10px;
  font-family: var(--f-maquina);
  font-size: 0.8125rem;
}
.antes__intro {
  margin-top: calc(var(--paso) * 1.5);
  font-weight: 700;
}
.antes__etapas {
  counter-reset: etapa;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--paso) * 2) var(--hueco);
  margin: 0;
  padding: 0;
  list-style: none;
}
.antes__etapas li {
  counter-increment: etapa;
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: 10px;
  align-items: baseline;
  max-width: 62ch;
  text-wrap: pretty;
}
.antes__etapas li::before {
  content: counter(etapa);
  font-family: var(--f-cartel);
  font-size: 2.5rem;
  line-height: 0.8;
}

/* ───────────── Contacto (la única franja en positivo) ───────────── */

.trama {
  height: 72px;
  margin-top: calc(var(--paso) * 3);
  background: url(img/trama.svg) 0 0 / 16px 72px repeat-x;
}
.contacto {
  padding-block: calc(var(--paso) * 4) calc(var(--paso) * 9);
  background: var(--papel);
  color: var(--toner);
}
.contacto ::selection {
  background: var(--toner);
  color: var(--papel);
}
.contacto :focus-visible {
  outline-color: var(--toner);
}
.contacto .rejilla {
  row-gap: calc(var(--paso) * 4);
}
.contacto__cabeza {
  grid-column: 1 / span 5;
}
.contacto__cabeza p {
  margin-top: calc(var(--paso) * 2);
  max-width: 40ch;
  font-size: 1.125rem;
  line-height: 1.55;
}
.contacto__correo-bloque {
  grid-column: 6 / span 7;
  align-self: end;
}
.contacto__correo {
  display: inline-block;
  font-family: var(--f-cartel);
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 1;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
  overflow-wrap: anywhere;
  transition: text-underline-offset 0.2s var(--salida);
}
.contacto__correo:hover {
  text-underline-offset: 0.2em;
}
.contacto__direccion {
  margin-top: calc(var(--paso) * 2);
}

/* ───────────── Letra pequeña ───────────── */

.pie {
  padding-block: calc(var(--paso) * 7) calc(var(--paso) * 5);
}
.pie .rejilla {
  row-gap: calc(var(--paso) * 6);
}
.pie__idioma {
  grid-column: span 6;
  padding-top: calc(var(--paso) * 2);
  border-top: 2px solid var(--papel);
}
.pie__idioma--plegado summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--f-maquina);
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  list-style: none;
}
.pie__idioma--plegado summary::-webkit-details-marker {
  display: none;
}
.pie__idioma--plegado summary .icono {
  transition: transform 0.2s var(--salida);
}
.pie__idioma--plegado[open] summary .icono {
  transform: rotate(180deg);
}
.pie__idioma--plegado[open] summary {
  margin-bottom: calc(var(--paso) * 3);
}
.pie__idioma > * + * {
  margin-top: calc(var(--paso) * 4);
}
.pie h2 {
  font-family: var(--f-cartel);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1;
  text-transform: uppercase;
}
.pie .tecleado {
  font-size: 0.875rem;
}
.pie .tecleado p,
.pie .tecleado dl {
  margin-top: 10px;
  max-width: 70ch;
}
.pie dl div {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.6em;
}
.pie dt {
  font-weight: 700;
}
.pie dt::after {
  content: ':';
}
.marca-pendiente {
  padding: 0 4px;
  background: var(--papel);
  color: var(--toner);
  font-weight: 700;
}
.pie__final {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: calc(var(--paso) * 2);
  border-top: 2px solid var(--papel);
  font-family: var(--f-maquina);
  font-size: 0.8125rem;
}

/* ───────────── Movimiento al bajar: los recortes caen y se pegan ───────────── */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .recorte,
    .omni__carta-entera,
    .hf__titulo {
      animation: pegar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    .hf__titulo {
      --giro: -3deg;
    }
  }
}
@keyframes pegar {
  from {
    transform: translateY(40px) rotate(calc(var(--giro) + 4deg)) scale(1.03);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  to {
    transform: translateY(0) rotate(var(--giro)) scale(1);
  }
}

/* ───────────── Tamaños ───────────── */

@media (max-width: 1100px) {
  .portada__logo {
    grid-column: 1 / -1;
    max-width: 860px;
  }
  .portada__texto {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 16px 40px;
  }
  .intro {
    margin-top: 0;
  }
  .omni__collage,
  .omni__ficha,
  .omni__lista,
  .omni__datos {
    grid-column: 1 / -1;
  }
  .omni__collage {
    width: 100%;
    max-width: 760px;
  }
  .hf__texto,
  .hf__lista,
  .hf__datos {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .antes {
    grid-template-columns: 1fr;
  }
  .antes__etapas {
    grid-template-columns: 1fr;
  }
  .estudio__texto,
  .estudio__ficha,
  .contacto__cabeza,
  .contacto__correo-bloque {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1200px) {
  .tira .tira__correo {
    display: none;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 1rem;
  }
  .tira__sub {
    display: none;
  }
  .tira__fila {
    column-gap: 8px;
  }
  .tira__marca {
    padding-block: 6px;
  }
  .idioma {
    order: 2;
  }
  .tira a,
  .idioma [aria-current] {
    min-height: 44px;
  }
  .tira__nav {
    order: 3;
    flex-basis: 100%;
    margin-left: -8px;
  }
  .portada {
    padding-top: calc(var(--paso) * 4);
  }
  .portada__texto {
    display: block;
  }
  .intro {
    margin-top: calc(var(--paso) * 2);
    font-size: 1.0625rem;
  }
  .cartel {
    grid-template-columns: 1fr;
  }
  .cartel__acto + .cartel__acto {
    border-left: 0;
    border-top: 1px solid var(--papel);
  }
  .cartel__acto {
    margin-inline: -8px;
    padding-inline: 8px;
  }
  .omni__lista {
    grid-template-columns: 1fr;
  }
  .hf__cartel {
    padding-top: 0;
  }
  .hf__titulo {
    position: relative;
    width: 76%;
    margin: 0 auto -10%;
  }
  .hf__arte {
    width: 100%;
  }
  .sello {
    font-size: 1.25rem;
  }
  .omni__arte figcaption,
  .omni__duelo figcaption {
    font-size: 0.6875rem;
  }
  .omni__collage .sello {
    font-size: 0.9375rem;
  }
  /* En el móvil las etiquetas se quedan en un número y la leyenda va debajo. */
  .etiqueta__texto {
    display: none;
  }
  .etiqueta__punto {
    display: none;
  }
  .etiqueta__num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 2px solid var(--papel);
    border-radius: 50%;
    background: var(--toner);
    color: var(--papel);
    font-size: 0.8125rem;
  }
  .leyenda {
    display: grid;
    gap: 6px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--f-maquina);
    font-size: 0.875rem;
  }
  .leyenda li {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .leyenda b {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border: 2px solid var(--papel);
    border-radius: 50%;
    font-size: 0.8125rem;
  }
  .pie__idioma {
    grid-column: 1 / -1;
  }
  .insignia img {
    height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .escaner {
    display: none;
  }
}