/* ═══════════════════════════════════════════════════════════════════════════
   RADIO SUAVITO · los dos gemelos · 25-sep-2026
   El comp aprobado es `.impeccable/mocks/decision/index-html-gemelos.png`,
   1520×2688, y en móvil se construye a su medida: `--c` es un píxel del comp.
   Lo que dice cada número, y de dónde sale, está en `design-tokens.md`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La tipografía · Anton, autoalojada, SIL OFL 1.1 (`tipos/OFL.txt`) ───── */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("tipos/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* El progreso de la escena, que escribe `pared.js`, y un factor por capa. */
  --p: 0;
  --f-vida:  0.05;
  --f-pieza: 0.00;
  --f-velo1: 0.28;
  --f-velo2: 0.44;
  --f-dentro: 1;      /* lo que se ve por una abertura va más despacio que su papel */

  /* Las tintas, muestreadas del material del cliente. */
  --muro:        #394048;
  --muro-hondo:  #2B3138;
  --mostaza:     #DBC62F;
  --mostaza-baja:#A8931C;
  --rojo:        #D8402F;
  --magenta:     #C768A7;
  --papel:       #F1EADC;
  --hueco:       #05060A;
  --tinta:       #141210;

  --display: "Anton", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* UN PÍXEL DEL COMP. El relato es un contenedor, así que `cqi` es su ancho
     sin la barra de desplazamiento. En móvil el comp ocupa el ancho entero. */
  --c: calc(100cqi / 1520);

  --grano: url("medios/grano-384.webp");

  /* Sombras de papel, con desplazamiento y desenfoque, teñidas del muro. */
  --sombra-pegado: 1px 3px 5px rgba(16, 20, 26, .42);
  --sombra-suelto: 3px 9px 14px rgba(16, 20, 26, .55);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--muro-hondo);
  color: var(--papel);
  font: 400 1rem/1.5 var(--texto);
  -webkit-text-size-adjust: 100%;
}

::selection { background: var(--mostaza); color: var(--tinta); }
:root { scrollbar-color: var(--mostaza-baja) var(--muro-hondo); scrollbar-width: thin; }
:focus-visible { outline: 4px solid var(--mostaza); outline-offset: 3px; }

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

/* El salto al acceso: sólo con teclado. Campo en tinta y filete en mostaza,
   porque aparece sobre lo que toque y ninguna tinta sola contrasta con todo. */
.saltar {
  position: absolute; z-index: 20; left: 1rem; top: 0;
  transform: translateY(-140%);
  padding: .625rem 1rem;
  background: var(--tinta); color: var(--mostaza);
  border: 3px solid var(--mostaza);
  font: 400 1rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}
.saltar:focus-visible { transform: translateY(24%); }

/* ═══ LA ESCENA · el motor `capas.md` ═══════════════════════════════════════ */
.escena {
  position: relative;
  isolation: isolate;
  min-height: 164dvh;
  /* El muro también detrás de todo, quieto: lo que queda cuando el
     escenario pegajoso no cubre (sin JS, al imprimir, al capturar). */
  background-color: var(--muro);
  background-image: var(--grano);
  background-size: 384px 384px;
  background-blend-mode: overlay;
}

.escenario {
  position: sticky; top: 0; z-index: 0;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--muro-hondo);
}

.capa { position: absolute; inset: 0; pointer-events: none; }

/* z0 · VIDA · el muro, con su grano, dos luces lentas con reloj propio y el
   altavoz: anillos mostaza que salen del centro, detrás de los carteles, y se
   apagan hacia los bordes. Miguel, 25-sep-2026, en el 7: «había pensado que el
   fondo de la página podrían ser ondas como de sonido, y así le sacamos más
   partido»; eligió «C · altavoz» entre tres. La pegatina los para como a las
   luces, y con movimiento reducido se quedan quietos, a la vista. */
.c-vida {
  z-index: 0;
  transform: translate3d(0, calc(var(--p) * var(--f-vida) * -100vh), 0);
  background-color: var(--muro);
  background-image: var(--grano);
  background-repeat: repeat;
  background-size: 384px 384px;
  background-blend-mode: overlay;
  will-change: transform;
}
.muro-luz {
  position: absolute; inset: -20%;
  background: radial-gradient(38% 30% at 32% 24%, rgba(219, 198, 47, .13), rgba(219, 198, 47, 0) 70%);
  animation: deriva-a 26s ease-in-out infinite;
}
.muro-luz--b {
  background: radial-gradient(34% 28% at 74% 72%, rgba(199, 104, 167, .12), rgba(199, 104, 167, 0) 72%);
  animation: deriva-b 37s ease-in-out infinite;
}
@keyframes deriva-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2.4%, -3%, 0) scale(1.07); }
}
@keyframes deriva-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  50%      { transform: translate3d(-3%, 2.2%, 0) scale(1); }
}
@property --anillo { syntax: "<length>"; inherits: false; initial-value: 0px; }
.c-vida::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-radial-gradient(circle at 50% 55%, transparent 0 var(--anillo), rgba(219, 198, 47, .32) var(--anillo) calc(var(--anillo) + 3px), transparent calc(var(--anillo) + 3px) 110px);
  -webkit-mask: radial-gradient(circle at 50% 55%, #000 20%, transparent 100%);
          mask: radial-gradient(circle at 50% 55%, #000 20%, transparent 100%);
  animation: altavoz 6s linear infinite;
}
@keyframes altavoz { to { --anillo: 108px; } }

.c-pieza { z-index: 1; transform: translate3d(0, calc(var(--p) * var(--f-pieza) * -100vh), 0); }
.c-velo1 { z-index: 2; transform: translate3d(0, calc(var(--p) * var(--f-velo1) * -100vh), 0); }
.c-velo2 { z-index: 3; transform: translate3d(0, calc(var(--p) * var(--f-velo2) * -100vh), 0); }

/* ═══ EL RELATO ═════════════════════════════════════════════════════════════ */
.relato {
  --franja-h: 356;   /* el alto de la franja del logo, en píxeles del comp */
  --logo-w: 420;     /* el ancho del logo, en píxeles del comp */
  position: relative; z-index: 4;
  margin-top: -100dvh;
  container-type: inline-size;
  pointer-events: none;
}
.relato > * { pointer-events: auto; }

/* El comp es una columna de 1520 píxeles suyos. En móvil ocupa el ancho
   entero; en tableta se centra y la acota el alto (ver «Cortes»). */
.gemelos,
.abertura,
.listas {
  position: relative;
  width: calc(1520 * var(--c));
  margin-left: auto; margin-right: auto;
}

/* ── LA FRANJA DEL LOGO ────────────────────────────────────────────────────
   El logo del cliente es cuadrado y de dos líneas: el comp lo redibujaba en
   una, y Miguel: «Ignore the comp for the logo and the DJs». Entra tal cual,
   con su pizarra y su grano pegados, centrado sobre el muro. */
.franja {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  height: calc(var(--franja-h) * var(--c));
  /* La franja es del color del fondo del propio logo (#363C43, medido en sus
     cuatro esquinas), así que el logo no se lee como un recuadro pegado:
     se funde en la banda, que es más honda que el muro, como en el comp. */
  background-color: #363C43;
  background-image: var(--grano);
  background-size: 384px 384px;
  background-blend-mode: overlay;
  box-shadow: 0 3px 6px rgba(16, 20, 26, .45);
}
.franja__logo {
  margin: 0;
  width: calc(var(--logo-w) * var(--c));
}
.franja__logo img { width: 100%; }

/* ── EL CARTEL · el papel es imagen y la letra es texto ───────────────────── */
/* Cada giro lleva su eje en el canto derecho, del lado que no lo empuja
   hacia fuera: si un cartel crece (letra ampliada, texto largo), gira hacia
   dentro de la página y no abre desplazamiento lateral. */
.cartel {
  position: relative;
  color: var(--tinta);
}
.cartel__papel,
.cartel__papel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.cartel__papel img { object-fit: fill; filter: var(--tono, none) drop-shadow(var(--sombra-pegado)); }

.mensaje {
  position: relative; z-index: 1;   /* su propio contexto: las dos pasadas quedan sobre el papel */
  margin: 0;
  font-weight: 400;
}
.mensaje > span {
  display: block;
  font-family: var(--display);
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
@supports (text-box: trim-both cap alphabetic) {
  .mensaje > span { text-box: trim-both cap alphabetic; }
}
/* El tracking acerca el ancho de Anton al del lettering del comp, que es
   más estrecho: -0,04em es el suelo, y ahí se queda el grito. */
.mensaje__lo   { font-size: max(1.5rem, calc(var(--lo) * var(--c))); letter-spacing: -.02em; }
.mensaje__cola { font-size: max(1.5rem, calc(var(--cola) * var(--c))); margin-top: calc(var(--aire-cola) * var(--c)); }
.mensaje__grito {
  position: relative;
  font-size: max(3.1rem, calc(var(--grito) * var(--c)));
  letter-spacing: -.04em;
  margin-top: calc(var(--aire-grito) * var(--c));
}
/* Dos pasadas de tinta mal registradas, en tinta plana y sin degradado. El
   lector de pantalla no las lee: `/ ""` es su texto alternativo, vacío. */
.mensaje__grito::before,
.mensaje__grito::after {
  content: attr(data-texto);
  content: attr(data-texto) / "";
  position: absolute; left: 0; top: 0; z-index: -1;
  color: var(--eco);
}
.mensaje__grito::before { --eco: var(--eco-1); transform: translate(-.008em, .06em); }
.mensaje__grito::after  { --eco: var(--eco-2); transform: translate(-.016em, .12em); }

/* HOT · medido sobre el comp: el papel ocupa x 90–1460 e y 365–1494. */
.cartel--hot {
  --lo: 215; --grito: 498; --cola: 201;
  --aire-grito: 20; --aire-cola: 76;
  /* El papel del 4 sale más vivo que el del comp: medido en el centro del
     cartel, 215·47·24 contra 204·58·33. Este tono lo acerca sin repintarlo. */
  --tono: saturate(.85) brightness(1.04);
  --eco-1: rgba(241, 214, 196, .62);
  --eco-2: rgba(232, 150, 120, .55);
  z-index: 2;
  width: calc(1370 * var(--c));
  min-height: calc(1129 * var(--c));
  margin: calc((365 - var(--franja-h)) * var(--c)) 0 0 calc(90 * var(--c));
  padding: calc(107 * var(--c)) calc(80 * var(--c)) calc(120 * var(--c)) calc(135 * var(--c));
  rotate: 1.2deg;
  transform-origin: 100% 0;
  translate: calc(12 * var(--c)) calc(14 * var(--c));   /* lo que mueve el eje */
}

/* ── EL RASGÓN · en el papel vacío de HOT, a la derecha de su palabra ─────
   Una tira de papel arrancada: su silueta es el alfa de `img-10` (una placa
   del 4), estirada y girada casi en vertical. Debajo asoma su alma blanca,
   la misma silueta un poco mayor en papel crudo; dentro, el hueco del muro
   y el medio, que va más despacio que el papel al bajar. */
.rasgon {
  position: absolute; z-index: 0;
  left: calc(760 * var(--c)); top: calc(250 * var(--c));
  width: calc(640 * var(--c)); height: calc(330 * var(--c));
  rotate: -76deg;
  pointer-events: none;
}
.rasgon__alma,
.rasgon__hueco {
  position: absolute;
  -webkit-mask: url("medios/img-10-640.webp") 0 0 / 100% 100% no-repeat;
          mask: url("medios/img-10-640.webp") 0 0 / 100% 100% no-repeat;
}
.rasgon__alma {
  inset: -9% -3%;
  background-color: #EDE4D1;
  background-image: var(--grano);
  background-size: 384px 384px;
  background-blend-mode: soft-light;
}
.rasgon__hueco {
  inset: 0;
  overflow: hidden;
  background: var(--hueco);
}
/* El medio se gira al revés que el rasgón, así que se ve derecho. */
.rasgon__medio {
  position: absolute; left: 50%; top: 50%;
  width: calc(1000 * var(--c)); height: calc(1000 * var(--c));
  translate: -50% -50%;
  rotate: 76deg;
}
.rasgon__medio img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  translate: 0 calc((var(--p) - .3) * var(--f-dentro) * 70px);
}
/* La hondura del hueco: una sombra dentro, encima del medio. */
.rasgon__hueco::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 calc(60 * var(--c)) calc(18 * var(--c)) rgba(5, 6, 10, .9);
}
/* Vacío o error: queda el hueco con su hondura, sin contarle nada a nadie. */
[data-estado="vacio"] .rasgon__fija,
[data-estado="error"] .rasgon__fija { visibility: hidden; }

/* FRESH · el papel ocupa x 75–1475 e y 1490–2560, y lo pisa la tira. */
.cartel--fresh {
  --lo: 212; --grito: 483; --cola: 198;
  --aire-grito: 50; --aire-cola: 43;
  /* Medido igual: 191·66·120 contra 179·78·118. */
  --tono: saturate(.85) brightness(1.02);
  --eco-1: rgba(241, 214, 226, .62);
  --eco-2: rgba(214, 140, 170, .55);
  z-index: 2;
  width: calc(1400 * var(--c));
  min-height: calc(1070 * var(--c));
  margin: calc(-130 * var(--c)) 0 0 calc(75 * var(--c));
  padding: calc(155 * var(--c)) calc(80 * var(--c)) calc(40 * var(--c)) calc(176 * var(--c));
  rotate: -1.6deg;
  transform-origin: 100% 100%;
  translate: calc(15 * var(--c)) calc(-20 * var(--c));
}

/* ── LA TIRA · el único acceso ─────────────────────────────────────────────
   Papel mostaza con la esquina despegada, cruzando el canto entre los dos
   carteles. El mostaza es campo, y sólo existe aquí. El texto es un enlace
   de texto, y la tira crece con él cuando se amplía la letra. */
.tira {
  position: relative; z-index: 3;
  display: grid; place-items: center;
  width: calc(850 * var(--c));
  min-height: calc(250 * var(--c));
  margin: calc(-124 * var(--c)) 0 0 calc(440 * var(--c));
  padding: calc(40 * var(--c)) calc(92 * var(--c)) calc(40 * var(--c)) calc(30 * var(--c));
  color: var(--tinta);
  text-decoration: none;
  rotate: .5deg;
  transform-origin: 100% 0;
  translate: calc(1 * var(--c)) calc(4 * var(--c));
}
.tira__papel,
.tira__papel img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Medido como los carteles: 228·177·18 contra el 210·172·25 del comp. La
   esquina de la placa se levanta hacia arriba y la del comp se despega hacia
   abajo: la placa se voltea, y la sombra se queda fuera del volteo. */
.tira__papel { filter: saturate(.9) brightness(.95) drop-shadow(var(--sombra-suelto)); }
.tira__papel img { object-fit: fill; transform: scaleY(-1); }
.tira__texto {
  position: relative;
  font: 400 max(1.5rem, calc(114 * var(--c)))/1 var(--display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  rotate: 3.5deg;
}
@supports (text-box: trim-both cap alphabetic) {
  .tira__texto { text-box: trim-both cap alphabetic; }
}
/* Sus estados. El puntero la despega un poco más; el tacto no pierde nada,
   porque el reposo ya es el estado encendido. El foco no es un anillo, que
   sobre papel rasgado y girado no se ve entero: es la tira en negativo,
   campo en tinta y letra en mostaza. */
.tira { transition: translate .26s cubic-bezier(.16, 1, .3, 1); scroll-margin-block: 18vh; }
.tira__papel { transition: filter .26s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) {
  .tira:hover { translate: calc(1 * var(--c)) calc(-6 * var(--c)); }
  .tira:hover .tira__papel { filter: saturate(.9) brightness(1) drop-shadow(5px 14px 18px rgba(16, 20, 26, .6)); }
}
.tira:focus-visible { outline: none; color: var(--mostaza); }
.tira:focus-visible .tira__papel { filter: grayscale(1) brightness(.16) drop-shadow(var(--sombra-suelto)); }
.tira:active { translate: calc(1 * var(--c)) calc(8 * var(--c)); }

/* ── LA ABERTURA · los dos DJ, impresos en papel y pegados bajo FRESH ─────
   Miguel: «Ignore the comp for the logo and the DJs». Va la ilustración del
   cliente, casi a todo el ancho, porque es lo que él quiere ver en el móvil.
   Es papel rasgado como lo demás: su silueta es el alfa del papel de HOT
   (`img-6`), y debajo asoma su alma blanca, la misma silueta un poco mayor. */
.abertura {
  position: relative; z-index: 1;
  margin-top: calc(-60 * var(--c));
  padding: 0 calc(16 * var(--c));
}
.abertura__dj { position: relative; }
.abertura__dj::before {
  content: "";
  position: absolute; inset: calc(-12 * var(--c)) calc(-10 * var(--c));
  background-color: #EDE4D1;
  background-image: var(--grano);
  background-size: 384px 384px;
  background-blend-mode: soft-light;
  -webkit-mask: url("medios/img-6-800.webp") 0 0 / 100% 100% no-repeat;
          mask: url("medios/img-6-800.webp") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(var(--sombra-pegado));
}
.abertura__dj picture {
  position: relative;
  overflow: hidden;
  -webkit-mask: url("medios/img-6-800.webp") 0 0 / 100% 100% no-repeat;
          mask: url("medios/img-6-800.webp") 0 0 / 100% 100% no-repeat;
}
/* El toque de paralaje: la ilustración va un poco más despacio que su papel. */
.abertura__dj img,
.abertura__dj video {
  width: 100%;
  scale: 1.16;
  translate: 0 calc((var(--p) - .5) * var(--f-dentro) * 30px);
}
/* El bucle (`H-01`) va encima de su póster, que es la ilustración: la toma es
   16:9 y la caja 896:486, así que se recorta por abajo y enseña la misma
   franja. Entra con opacidad cuando suena de verdad. */
.abertura__dj video {
  position: absolute; inset: 0;
  height: 100%;
  object-fit: cover; object-position: 50% 0;
  opacity: 0; transition: opacity .6s cubic-bezier(.16, 1, .3, 1);
}
.abertura__dj video.suena { opacity: 1; }

.lema {
  position: absolute; z-index: 2;
  right: calc(22 * var(--c)); top: calc(56 * var(--c));
  display: grid; place-items: start;
  width: calc(700 * var(--c));
  min-height: calc(250 * var(--c));
  margin: 0;
  padding: calc(46 * var(--c)) calc(44 * var(--c)) calc(46 * var(--c)) calc(56 * var(--c));
  rotate: -2deg;
  transform-origin: 100% 100%;
  translate: calc(4 * var(--c)) calc(-12 * var(--c));
}
.lema__papel,
.lema__papel img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Más claro que el papel de FRESH, y es por el contraste: la tinta sobre el
   magenta del 4 da 3,8:1, y el lema es letra de lectura. Sobre este tono
   pasa de 4,5:1 sin subirla a letra grande. */
.lema__papel img { object-fit: fill; filter: saturate(.9) brightness(1.22) drop-shadow(var(--sombra-suelto)); }
.lema__texto {
  position: relative;
  color: var(--tinta);
  font: 400 max(1rem, calc(64 * var(--c)))/1.15 var(--display);
  letter-spacing: .01em;
  text-align: left;
}

/* ── LA PEGATINA DE PARAR · WCAG 2.2.2 ─────────────────────────────────────
   Pegada arriba a la izquierda del cartel de los DJ, sobre las luces y no
   sobre las caras, que en un móvil corriente ya asoma en la primera pantalla. Es una tira de papel crema (el papel del
   lema, sin su tinta), no mostaza: el mostaza es sólo del acceso. */
.pegatina {
  position: absolute; z-index: 3;
  isolation: isolate;
  left: calc(46 * var(--c)); top: calc(120 * var(--c));
  max-width: calc(700 * var(--c));   /* con la letra ampliada parte en dos, y no llega al lema */
  min-height: 44px;
  margin: 0;
  padding: calc(34 * var(--c)) calc(62 * var(--c)) calc(34 * var(--c)) calc(52 * var(--c));
  border: 0;
  background: none;
  color: var(--tinta);
  font: 400 1rem/1.1 var(--display);
  letter-spacing: .02em;
  text-align: left;
  cursor: pointer;
  rotate: -3deg;
  transition: rotate .2s cubic-bezier(.16, 1, .3, 1), translate .2s cubic-bezier(.16, 1, .3, 1);
}
/* El papel va en su propia capa: el filtro que lo vuelve crema no toca la letra. */
.pegatina::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url("medios/img-10-640.webp") 0 0 / 100% 100% no-repeat;
  filter: grayscale(1) sepia(.18) brightness(1.62) contrast(.92) drop-shadow(var(--sombra-pegado));
  transition: filter .2s cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .pegatina:hover { rotate: -4.5deg; translate: 0 -2px; }
}
/* El foco no es un anillo: es la tira en negativo, papel en tinta y letra en
   papel, porque el anillo sobre papel girado se lee como caja de interfaz. */
.pegatina:focus-visible { outline: none; color: var(--papel); }
.pegatina:focus-visible::before { filter: grayscale(1) brightness(.2) drop-shadow(var(--sombra-pegado)); }
.pegatina:active { translate: 0 1px; }
[data-parado] .muro-luz,
[data-parado] .c-vida::before { animation-play-state: paused; }

/* ── LAS CUATRO LISTAS · carteles pegados, cada uno con su tinta ──────────
   No son botones: carteles de papel sin enlace, de tamaño, giro y solape
   propios. El papel es la placa del 4 (la de HOT o la de FRESH), volteada y
   entintada con un filtro, así que el canto rasgado es siempre imagen. */
.listas {
  position: relative;
  padding: calc(150 * var(--c)) calc(40 * var(--c)) calc(220 * var(--c));
}
.listas__titulo {
  margin: 0 0 calc(70 * var(--c)) calc(20 * var(--c));
  max-width: 22ch;
  color: var(--papel);
  font: 400 max(1.5rem, calc(96 * var(--c)))/1.1 var(--display);
  letter-spacing: .01em;
  text-wrap: balance;
}
.listas__marca { color: var(--mostaza); }
.listas__muro {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  margin: 0; padding: 0; list-style: none;
}
.lista {
  --w: 52%;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
  width: var(--w);
  aspect-ratio: 8 / 5;
  margin: var(--mt, 0) 0 0 var(--ml, 0);
  padding: calc(110 * var(--c)) calc(150 * var(--c));
  color: var(--tinta);
  rotate: var(--giro, 0deg);
  transform-origin: var(--eje, 100% 100%);
}
.lista::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--hoja) 0 0 / 100% 100% no-repeat;
  transform: var(--vuelta, none);
  filter: var(--tinta-papel, none) drop-shadow(var(--sombra-suelto));
}
.lista__nombre {
  font: 400 max(1.5rem, calc(104 * var(--c)))/1.02 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.lista--papel {
  --hoja: url("medios/img-7-800.webp"); --vuelta: scaleX(-1);
  --tinta-papel: grayscale(1) sepia(.55) saturate(.8) brightness(1.95) contrast(.86);
  --w: 50%; --giro: -2.6deg;
}
.lista--rojo {
  --hoja: url("medios/img-6-800.webp"); --vuelta: scaleY(-1);
  --tinta-papel: saturate(.85) brightness(1.04);
  --w: 54%; --ml: -4%; --mt: 9%; --giro: 2.2deg; --eje: 100% 0;
}
.lista--magenta {
  --hoja: url("medios/img-7-800.webp");
  --tinta-papel: saturate(.85) brightness(1.02);
  --w: 76%; --ml: auto; --mt: -5%; --giro: 1.8deg; --eje: 100% 0;
  padding-inline: calc(120 * var(--c));
}
.lista--crema {
  --hoja: url("medios/img-6-800.webp"); --vuelta: scaleX(-1);
  --tinta-papel: grayscale(1) sepia(.7) saturate(.75) brightness(1.85) contrast(.86);
  --w: 58%; --ml: 3%; --mt: -4%; --giro: -2.2deg;
}

/* ═══ EL PIE · sobrio: no lleva mostaza ni caja ═════════════════════════════ */
.pie {
  position: relative;
  padding: 3.5rem 1.25rem 3rem;
  background-color: var(--muro-hondo);
  background-image: var(--grano);
  background-size: 384px 384px;
  background-blend-mode: overlay;
  text-align: center;
}
.pie a {
  color: var(--papel);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  text-decoration-color: rgba(241, 234, 220, .45);
  transition: text-decoration-color .2s cubic-bezier(.16, 1, .3, 1);
}
.pie a:hover { text-decoration-color: var(--papel); }
.pie__canal {
  font: 400 clamp(1.35rem, 5vw, 2rem)/1.2 var(--display);
  letter-spacing: .03em;
  overflow-wrap: anywhere;
}
.firma-lenx-linea { margin-bottom: 0; font-family: var(--texto); }

/* ═══ MOVIMIENTO REDUCIDO · la misma página, quieta ═════════════════════════
   Sin paralaje, sin luces que derivan, sin anillos que salen y sin bucle (no se carga: lo decide
   `pared.js`). Queda la fija del rasgón. Como nada se mueve solo, la
   pegatina de parar no tiene nada que parar, y no se sirve. */
@media (prefers-reduced-motion: reduce) {
  :root { --f-vida: 0; --f-velo1: 0; --f-velo2: 0; --f-dentro: 0; }
  .muro-luz,
  .c-vida::before { animation: none; }
  .pegatina { display: none; }
  html { scroll-behavior: auto; }
}
/* ?quieto=1 · para capturar: las luces se quedan en su fotograma de inicio. */
[data-quieto] .muro-luz,
[data-quieto] .c-vida::before { animation-play-state: paused; }

/* ═══ CORTES ════════════════════════════════════════════════════════════════
   Móvil: el comp a todo el ancho, que es para lo que se hizo.
   Tableta (48rem): el mismo comp, centrado, y su ancho lo acota el alto: la
   tira del acceso (su canto de abajo está en el píxel 1620 del comp) cabe
   siempre en la primera pantalla.
   Escritorio (64rem): una versión propia, no el comp de móvil estirado.
   Miguel, 25-sep-2026, en el 7, al ver el estirado en su pantalla: «Debemos
   tener una versión mobile y otra desktopp» y «Esto para desktop es gigante».
   Los dos gemelos uno junto al otro, y la tira cruzando el canto de abajo
   entre los dos. La escala la pone lo que falte antes, el ancho o el alto: la
   fila entera, franja incluida, mide 1630 píxeles del comp de alto y 2900 de
   ancho. */
@media (min-width: 48rem) {
  .relato { --c: calc(min(100cqi, (100dvh - 48px) * .93) / 1520); }
}

@media (min-width: 64rem) {
  .relato { --c: min(calc(94cqi / 2900), calc((100dvh - 32px) / 1630)); }

  .gemelos {
    width: calc(2760 * var(--c));
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: start;
    padding-bottom: calc(150 * var(--c));
  }
  .cartel--hot   { grid-column: 1; grid-row: 1; margin: calc(20 * var(--c)) 0 0; }
  .cartel--fresh { grid-column: 2; grid-row: 1; margin: calc(60 * var(--c)) 0 0 calc(-10 * var(--c)); }
  /* La tira cruza el canto de abajo entre los dos: pisa el papel vacío que
     queda bajo «DEL INVIERNO» y bajo «DEL VERANO», nunca una palabra. */
  .tira {
    position: absolute; z-index: 3;
    left: calc(50% - 425 * var(--c)); top: calc(1030 * var(--c));
    margin: 0;
  }

  .abertura {
    width: calc(1500 * var(--c));
    margin-top: calc(40 * var(--c));
  }

  .listas {
    width: calc(2760 * var(--c));
    padding: calc(200 * var(--c)) 0 calc(260 * var(--c));
  }
  .listas__titulo { margin-left: calc(60 * var(--c)); max-width: none; }
  .listas__muro { flex-wrap: wrap; justify-content: center; align-items: flex-start; }
  /* Cada ancho sale de su palabra más larga, medida en Anton: «DESCUBRIMIENTOS»
     mide 7,02em y «DELICIOSAS» 4,32em, y ninguna se parte. Las cuatro suman el
     75 % del muro, en una fila centrada; si el canal tiene más, la fila parte. */
  .lista { --ml: -1%; padding: calc(90 * var(--c)) calc(80 * var(--c)); }
  .lista__nombre { font-size: max(1.5rem, calc(76 * var(--c))); }
  .lista--papel   { --w: 15%; --mt: 0%; --ml: 0; }
  .lista--rojo    { --w: 17%; --mt: 4%; }
  .lista--magenta { --w: 26%; --mt: 5%; padding-inline: calc(80 * var(--c)); }
  .lista--crema   { --w: 20%; --mt: 1%; }
}