/*
 * La película de Semiótica Tumbada.
 * Un cartel que se mueve: papel blanco y tinta negra, como el carrusel del Telar.
 * Título, cómo se hace y rodaje son una sola escena que cambia con el scroll, sin cortes; los créditos
 * vienen después y se invierten, como al final de una película.
 * Una sola apariencia a propósito: los créditos ya son la versión oscura.
 */
:root {
  --papel: #ffffff;
  --tinta: #000000;
  --gris: #5c5c5c;        /* metadatos sobre papel */
  --fuera: #c9c9c9;       /* los fotogramas de los días que no están al frente: gráfico, nunca texto */
  --negro: #000000;       /* el fundido hacia los créditos */
  --f-cartel: "Archivo", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --f-texto: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --f-guion: "Courier Prime", "Courier New", Courier, monospace;   /* la letra del guion, en créditos y capítulos abiertos */
  --orilla-izq: max(16px, env(safe-area-inset-left, 0px));
  --orilla-der: max(16px, env(safe-area-inset-right, 0px));
  --pie-alto: calc(64px + env(safe-area-inset-bottom, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--papel); scrollbar-gutter: stable; scroll-padding-bottom: calc(var(--pie-alto) + 40px); }   /* el freno de la portada quita el scroll un instante sin mover nada; el foco nunca queda bajo el pie */
html:has(.ficha[open]) { overflow: hidden; }   /* con la ficha abierta, la página de fondo no se mueve */
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;   /* 17 px con la letra normal; crece con la letra grande del navegador */
  line-height: 1.45;
}
img { max-width: 100%; }
picture { display: contents; }   /* la <img> sigue siendo la pieza del layout; <picture> solo elige el cuadro quieto */
picture > source { display: none; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.oculto { position: absolute !important; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#aviso-parada { position: fixed !important; top: 0; left: 0; }   /* va después del pie: fijo, no alarga la página ni deja una raya al final */
/* Los enlaces de salto: ocultos hasta recibir el foco. */
.saltos { position: fixed; z-index: 40; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.saltos a { padding: 10px 14px; background: var(--tinta); color: var(--papel); font-family: var(--f-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.saltos a:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Trazo de plumón ---------- */
.t { fill: none; stroke: var(--tinta); stroke-linecap: round; stroke-linejoin: round; }
.r { fill: none; stroke: var(--papel); stroke-linecap: round; stroke-dasharray: 2 13 6 19; opacity: .9; }
.t.inv { stroke: var(--papel); }
.r.inv { stroke: var(--tinta); }
.t.relleno-papel, .relleno-papel { fill: var(--papel); }
.t.relleno-tinta, .relleno-tinta { fill: var(--tinta); }
.punto-inv { fill: var(--papel); }

/* ---------- Tipografía ---------- */
.cartel-titulo {
  margin: 0;
  font-family: var(--f-cartel);
  font-weight: 900;
  font-stretch: 72%;
  text-transform: uppercase;
  line-height: .84;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;   /* con el espaciado de WCAG 1.4.12 o la letra muy grande, se parte antes que salirse */
}
.cartel-bajada { margin: 0; font-size: clamp(1.15rem, 2.3vw, 1.85rem); line-height: 1.2; }
.antetitulo { margin: 0; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.cartel-bajada, .tu-lugar p, .palabra p { text-wrap: pretty; }

/* ---------- La escena: fija mientras dura su scroll. Sus planos entran y salen sin corte ---------- */
.escenario { position: relative; }
/* Su fondo funde a negro con la escena (pelicula.js crea .escenario-negro y escribe su opacidad), solo por opacidad: en
   el celular, con la barra escondida, la escena no siempre llega abajo. Fijo y del tamaño de la pantalla, con su propia
   capa: el negro sube sin repintar la página (una capa del alto de todo el escenario cuesta más que el repintado). Queda
   bajo la escena y los créditos (van después): solo asoma en la franja que la escena no cubre. */
.escenario-negro { position: fixed; inset: 0; background: var(--negro); opacity: 0; pointer-events: none; will-change: opacity; }
html:not(.apilado) { overscroll-behavior-y: none; }   /* sin jalar para recargar ni rebote nativo en la escena */
html:not(.apilado):not(.ampliado) .escena, html:not(.apilado):not(.ampliado):not(.en-creditos) .pie { touch-action: pinch-zoom; }   /* el dedo lo lleva el imán; el pellizco sigue siendo del navegador (en los créditos, el pie deja pasar el scroll) */
.escena {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overflow: clip;   /* no es un contenedor de scroll: la búsqueda del navegador no la desplaza */
}
.lienzo {
  --dibujo: min(44svh, 74vw, 440px);     /* lado del dibujo que viaja (medir() lo achica si el texto no cabe) */
  --dibujo-t: min(46svh, 84vw, 500px);   /* el cerebro del título, más grande */
  --cy: 36%;                             /* altura de su centro: todo va sobre el mismo eje y a la misma altura */
  position: absolute;
  inset: 0;
  background: var(--papel);
  color: var(--tinta);
}
.plano {
  position: absolute;
  inset: 0;
  padding-left: var(--orilla-izq);
  padding-right: var(--orilla-der);
  padding-bottom: var(--pie-alto);
}
.plano.fuera { pointer-events: none; }
.plano-titulo { z-index: 1; }
.hilo-lienzo { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
/* El texto va delante del hilo, sobre su banda de papel: el hilo pasa por detrás, como por detrás de los dibujos. */
.plano-como { z-index: 3; padding: 0; pointer-events: none; }   /* no tapa al título; la tarjeta al frente sí recibe el puntero */
#como:focus, #rodaje:focus { outline: none; }   /* el foco que deja «Baja» o la muesca del rodaje: un lugar, no un control */
.plano-rodaje { z-index: 4; }
.fundido { position: absolute; inset: 0; z-index: 6; background: var(--negro); opacity: var(--fundido, 0); pointer-events: none; will-change: opacity; }   /* su capa: funde sin repintar la escena */

/* El dibujo que viaja: el cerebro del título y, después, cada dibujo de «Cómo se hace». pelicula.js lo coloca por la
   tinta de cada dibujo (translate y scale); su caja mide lo que el dibujo más grande, así nunca se agranda. */
.morfo {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  width: var(--morfo-lado, var(--dibujo));
  height: var(--morfo-lado, var(--dibujo));
  margin: 0;
  transform: translate(calc(50vw - 50%), calc(var(--cy) - 50%));
  will-change: transform;
  pointer-events: none;
}
.morfo img, .morfo video, .morfo canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; color: transparent; }
.morfo video { object-fit: contain; background: #ffffff; }

/* ---------- Título: el cerebro sobre el eje y, debajo, el título. Todo centrado ---------- */
.cartel { position: absolute; inset: 0; }   /* mide como la escena: el cerebro queda donde estará el dibujo */
.cartel-dibujo {
  position: absolute;
  left: 50%;
  top: var(--cy);
  width: var(--dibujo-t);
  height: var(--dibujo-t);
  margin: 0;
  transform: translate(-50%, -50%);
}
.cartel-dibujo svg, .cartel-dibujo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; display: block; }
.cartel-texto {
  position: absolute;
  left: 50%;
  top: var(--texto-y, calc(var(--cy) + var(--dibujo-t) / 2 + 1.5svh));   /* en la escena, 0.07 del cerebro bajo su tinta */
  width: min(calc(100% - 32px), 62rem);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  container-type: inline-size;
  opacity: calc(1 - min(1, var(--sale, 0) * 2.2));   /* se va hacia arriba antes de que el cerebro se asiente */
  transform: translate(-50%, calc(var(--sale, 0) * -5svh));
}
.plano-titulo .cartel-titulo { font-size: min(19vw, 12svh, 8.5rem); }   /* «SEMIÓTICA» mide 4.63 em */
.cartel-titulo .linea { display: inline-block; max-width: 100%; }
html.entrando .cartel-texto .linea, html.entrando .cartel-bajada, html.entrando .baja { opacity: 0; }   /* mientras se teje el cerebro */
.baja {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 2px;
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.baja-flecha { width: 44px; height: 44px; margin: -6px; }
/* Ya fuera el título, su «Baja» se oculta de verdad: con opacidad 0, Safari sigue animando (y decodificando) la flecha. */
.plano-titulo.fuera .baja { visibility: hidden; }

/* ---------- Cómo se hace: un dibujo que se vuelve línea y se arma en el siguiente ---------- */
.como-ante {
  position: absolute;
  z-index: 3;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: var(--orilla-izq);
  opacity: var(--ante, 0);
}
@media (max-width: 600px) { .como-ante .salto { display: block; } }   /* en dos líneas: así el hilo del eje no la cruza */
.hilera { position: absolute; inset: 0; }
.tarjeta { position: absolute; inset: 0; }
.tarjeta-dibujo { display: none; }
/* La mueve el scroll: pelicula.js escribe --vt (el título), --vd (el detalle), --vb (la banda de papel) y --lado
   (1 si llega, −1 si se va). La que llega sube desde abajo, el título primero; la que se va sigue subiendo
   mientras se apaga. Sin transiciones: va al ritmo de la línea. */
.tarjeta-texto {
  position: absolute;
  left: 50%;
  top: var(--banda-y, calc(var(--cy) + var(--dibujo) / 2 + 2svh));   /* en la escena, 0.07·S bajo el piso de los dibujos */
  width: min(calc(100% - 32px), 36rem);
  display: grid;
  gap: 12px;
  padding: 4px 14px 10px;
  background: var(--papel);
  text-align: center;
  opacity: var(--vb, 0);
  transform: translateX(-50%);
  container-type: inline-size;
}
.tarjeta.activa .tarjeta-texto { pointer-events: auto; }
.tarjeta-texto .cartel-titulo {
  font-size: min(clamp(2.1rem, min(8.6vw, 6.8svh), 4.4rem), 100cqi / 9.2);   /* el título más largo, en 2 renglones de 320 a 1440 px */
  line-height: .94;
  text-wrap: balance;
  opacity: var(--vt, 0);
  transform: translateY(calc((1 - var(--vt, 0)) * var(--lado, 1) * 12px));
}
.tarjeta-texto p {
  margin: 0 auto;
  max-width: 44ch;
  font-size: clamp(1rem, 2.1svh, 1.2rem);
  line-height: 1.38;   /* en tinta: al frente nada va en gris; la jerarquía la dan el cuerpo y el peso */
  text-wrap: pretty;
  opacity: var(--vd, 0);
  transform: translateY(calc((1 - var(--vd, 0)) * var(--lado, 1) * 10px));
}
/* Si la tarjeta tiene un detalle corto (datos.js, corto), la escena lo muestra y el completo queda para el lector de
   pantalla; apilado, se lee el completo. */
.tarjeta-texto p.completo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.apilado .tarjeta-texto p.corto { display: none; }
html.apilado .tarjeta-texto p.completo { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }

/* ---------- Rodaje: una película vertical que sube un día por paso, ensartada en el hilo ---------- */
.plano-rodaje { padding: 0; }
.rodaje-ante {
  position: absolute;
  z-index: 2;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: var(--orilla-izq);
  opacity: var(--ante-r, 0);
  transform: translateY(calc((1 - var(--ante-r, 0)) * 8px));
}
@media (max-width: 600px) { .rodaje-ante .salto { display: block; } .rodaje-ante .punto { display: none; } }   /* en dos líneas y sin punto: el hilo del eje no la cruza */
.rodaje-ayuda { display: block; max-width: 36ch; margin-top: 9px; font: 400 .75rem/1.4 var(--f-texto); text-transform: none; letter-spacing: 0; }
.rodaje-reloj { display: flex; align-items: center; gap: 7px; margin-top: 10px; font: 500 .65rem/1.4 var(--f-mono); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.rodaje-reloj svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* La ventana de la cinta, bajo el rótulo y sobre el pie: los vecinos se pierden en el papel. */
.ventana {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(max(16px, env(safe-area-inset-top, 0px)) + 56px);   /* medir() la pone 24 px bajo el rótulo */
  bottom: calc(var(--pie-alto) + 16px);
  overflow: hidden;
  overflow: clip;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.cinta-mov { position: relative; will-change: transform; }
/* En pantallas táctiles, la ventana se desvanece con dos velos de papel en vez de la máscara (Safari compone la máscara
   fuera de pantalla en cada cuadro en que la cinta se mueve). Sobre papel es la misma mezcla. Solo con el hilo ya
   adentro (.con-hilo, desde pintar()): antes nada de la cinta se ve y por esa orilla sale la flecha del lienzo. */
@media (pointer: coarse) {
  html:not(.apilado) .ventana { -webkit-mask-image: none; mask-image: none; }
  html:not(.apilado) .ventana.con-hilo::before, html:not(.apilado) .ventana.con-hilo::after {
    content: ''; position: absolute; z-index: 1; left: 0; right: 0; height: 24px; pointer-events: none;
  }
  html:not(.apilado) .ventana.con-hilo::before { top: 0; background: linear-gradient(var(--papel), transparent); }
  html:not(.apilado) .ventana.con-hilo::after { bottom: 0; background: linear-gradient(transparent, var(--papel)); }
}
/* El pie cambia de tinta con su fondo. En pantallas táctiles no necesita mezclar cada píxel de la escena
   animada que tiene debajo: Safari puede mantener la cinta y el canvas en sus propias superficies. */
@media (pointer: coarse) and (forced-colors: none), (max-width: 600px) and (forced-colors: none) {
  html .pie { mix-blend-mode: normal; color: #000000; }
  html .pie .marco, html .pie .puntada-hilo { fill: currentColor; }
  html .pie .puntada { fill: #ffffff; }
  .pie .pie-avance i { background: currentColor; }
  .pie .pie-avance { background: rgb(0 0 0 / .28); }
  html.en-creditos .pie, .pie.fundido-oscuro { color: #ffffff; }
  html.en-creditos .pie .puntada, .pie.fundido-oscuro .puntada { fill: #000000; }
  html.en-creditos .pie .pie-avance, .pie.fundido-oscuro .pie-avance { background: rgb(255 255 255 / .28); }
}
/* El hilo: recto por el eje, detrás de los días, del borde de arriba (o de su cabeza, mientras sube) hasta bajo el
   último día, donde sigue solo hacia los créditos. */
.hilo-cinta {
  position: absolute;
  left: 50%;
  top: var(--hilo-desde, -150vh);
  height: max(0px, calc(var(--hilo-hasta, 0px) - var(--hilo-desde, -150vh)));
  width: var(--hilo-g, 6px);
  margin-left: calc(var(--hilo-g, 6px) / -2);
  border-radius: var(--hilo-g, 6px);
  background: var(--tinta);
  opacity: var(--hilo-ver, 1);
}
/* El nudo se desató: bajo el último día el hilo sigue hacia abajo, casi hasta el borde de la ventana, y remata en una
   punta de su mismo grosor con «Créditos» debajo. Es un solo enlace que sube con la cinta (medir() pone --sigue-y y
   --sigue-alto, con el último día al frente) y lleva a la portada de los créditos. El hilo de la cinta se mete 12 px en
   su cola: el rebote no los despega. */
.hilo-sigue {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--sigue-y, 0px);
  height: var(--sigue-alto, 0px);
  width: max-content;
  max-width: 100%;   /* con letra grande, el rótulo se parte antes que salirse */
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--tinta);
  text-decoration: none;
  opacity: var(--hilo-ver, 1);
  pointer-events: none;   /* se toca solo con el último día al frente (pelicula.js pone .activa) */
}
.hilo-sigue.activa { pointer-events: auto; }
.hilo-cola { flex: 1 1 0; min-height: 0; width: var(--hilo-g, 6px); background: var(--tinta); }
/* La punta: dos tramos del hilo a 45°, de 3 hilos de largo (en el viewBox, un hilo mide 1). */
.hilo-punta { flex: none; width: calc(var(--hilo-g, 6px) * 5.24); height: calc(var(--hilo-g, 6px) * 3.12); overflow: visible; }
.hilo-punta path { fill: none; stroke: var(--tinta); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.hilo-rotulo { margin-top: 8px; padding: 4px 6px; font-family: var(--f-mono); font-size: .76rem; font-weight: 500; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; text-align: center; text-wrap: balance; }
.hilo-sigue:focus-visible { outline: none; }
.hilo-sigue:focus-visible .hilo-rotulo { outline: 3px solid var(--tinta); outline-offset: 3px; }
.cinta {
  position: relative;
  width: var(--dia-w, 260px);
  margin: 0 auto;
  padding: 0;   /* arriba y abajo lo pone el JS: la fecha del primer día a 28 px de la ventana */
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--dia-w, 260px) * .234);   /* el aire entre días: un tercio de fotograma */
}
.dia {
  --foco: 0;     /* 1 en el día al frente; lo escribe el JS según su distancia */
  --texto: 0;    /* fecha e invitaciones a abrir: solo cerca del frente */
  --velo: .79;   /* el papel que pone en gris a los vecinos (0.79 deja #c9c9c9) */
  position: relative;
  aspect-ratio: 640 / 940;
  container-type: inline-size;
  transform: scale(calc(.94 + .06 * var(--foco)));
}
/* El velo: un elemento propio (antes .dia::after), así el JS le escribe --velo sin recalcular todo el día. La escala la
   escribe el JS como transform del día y la opacidad del texto, en la fecha y en los nombres. */
.dia-velo { position: absolute; inset: -1px; background: var(--papel); opacity: min(var(--velo), var(--velo-encima, 1)); pointer-events: none; }
.dia.vecino { cursor: pointer; }
@media (hover: hover) {
  .dia.vecino:hover { --velo-encima: .62; }
  .dia.vecino:hover .dia-velo { transition: opacity .09s; }
}
.dia svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
/* Se mantiene la caja de cada día y su texto accesible. Solo la tinta fuera de la ventana se deja de pintar;
   la regla alcanza los grupos del «?» que tienen su propia visibility, sin alterar sus dimensiones. */
html:not(.apilado) .dia.lejos > :not(.oculto),
html:not(.apilado) .dia.lejos > :not(.oculto) * { visibility: hidden !important; }
.dia .marco { fill: var(--tinta); }
.dia .puntada { fill: var(--papel); }
.dia .puntada-hilo { fill: var(--tinta); }   /* el hilo va siempre en tinta: es lo continuo */
.dia-fecha {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 2.6cqi);
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--f-cartel);
  font-weight: 900;
  font-stretch: 72%;
  text-transform: uppercase;
  font-size: var(--fecha, 7.5cqi);   /* medir(): el mayor ≤ 8.4cqi que deja la fecha más ancha a ≥ max(12 px, 4cqi) del hilo */
  line-height: .9;
  opacity: var(--texto);
}
.dia-marca { padding: .4em .7em .32em; border-radius: 999px; background: var(--tinta); color: var(--papel); font: 500 min(max(.625rem, 2.4cqi), max(10px, 5.5cqi))/1 var(--f-mono); letter-spacing: .08em; }
.dia-marca:empty { display: none; }
@container (width < 180px) { .dia-marca { letter-spacing: 0; padding-inline: .45em; } }   /* en días angostos se aprieta: nunca toca el hilo */
/* La ventana conserva la moldura y las perforaciones. El dibujo y su título de guion tienen
   renglones propios: el espacio de la imagen nunca se encima al nombre. Toda la ventana abre la ficha. */
.dia .moldura { fill: none; stroke: var(--papel); stroke-width: 3; }
.dia-cap {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  left: 13.67%;
  width: 72.66%;
  height: 39.04%;
  margin: 0;
  padding: 4cqi 4.2cqi 4.6cqi;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 3.4cqi;
  overflow: hidden;
  border-radius: 2.27cqi;
  background: #000;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.dia-ilustracion { position: static; display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; padding: 0; background: #fff; opacity: var(--claridad, .55); pointer-events: none; }
.dia-cap.con-ilustracion { background: #fff; color: #000; }
.dia-leer { display: block; min-width: 0; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: 400 clamp(.8125rem, 3.8cqi, 1.125rem)/1.2 var(--f-guion); letter-spacing: 0; opacity: var(--texto); white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
.dia-cap:focus-visible { outline: 3px solid #000; outline-offset: -4px; }
.dia-cap:focus-visible .dia-leer { text-decoration: underline; text-underline-offset: .2em; }
@media (hover: hover) { .dia-cap:hover .dia-leer { text-decoration: underline; text-underline-offset: .2em; } }
.dia-cap.a { top: 2.71%; }
.dia-cap.b { top: 58.24%; }
.dia-cap .dia-pregunta { position: static; align-self: center; width: 9.4cqi; height: 13.9cqi; margin: 0; }   /* respaldo si un capítulo aún no tiene ilustración */
/* Los «?» del día al frente hierven: tres versiones apenas distintas, a 8 cuadros por segundo. Los de afuera, quietos. */
.dia-pregunta > g:not(.h0) { visibility: hidden; }
/* Hierven con el reloj de pelicula.js (data-h en el día vivo, 8 cambios por segundo): sin animación de CSS, que pedía
   un cuadro a cada refresco de la pantalla. */
.dia.vivo:is([data-h="1"], [data-h="2"]) .dia-pregunta > .h0 { visibility: hidden; }
.dia.vivo[data-h="1"] .dia-pregunta > .h2, .dia.vivo[data-h="2"] .dia-pregunta > .h1 { visibility: visible; }

/* ---------- Créditos (la página se invierte) ---------- */
.acto-creditos {
  --papel: #000000;
  --tinta: #ffffff;
  --gris: #9d9d9d;
  position: relative;
  background: var(--papel);
  color: var(--tinta);
  margin-top: -2px;   /* tapa la costura de 1 px con la escena cuando su borde cae en medio pixel */
  padding-left: var(--orilla-izq);
  padding-right: var(--orilla-der);
  padding-block: 22vh 0;   /* el aire de abajo va dentro del rollo: así el velo sigue al pie hasta el final */
}
/* Un velo pegado al pie: el texto se desvanece antes de llegar a «Telar de Narrativas». */
.acto-creditos::after {
  content: '';
  position: sticky;
  bottom: 0;
  display: block;
  height: calc(var(--pie-alto) + 28px);
  margin: calc(-1 * (var(--pie-alto) + 28px)) calc(-1 * var(--orilla-der)) 0 calc(-1 * var(--orilla-izq));
  background: linear-gradient(to top, var(--papel) 55%, transparent);
  pointer-events: none;
}
.rollo { max-width: 760px; margin: 0 auto; padding-bottom: 38vh; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(72px, 14vh, 160px); text-align: center; }   /* una palabra larga no ensancha la columna */
.credito-portada { display: grid; gap: 14px; justify-items: center; container-type: inline-size; }
.credito-portada .cartel-titulo { font-size: min(20cqi, 9rem, 22svh); margin-top: max(4px, calc(min(20cqi, 9rem, 22svh) * .25 - 14px)); }   /* el acento de la Ó no toca el rótulo */
/* Sobre negro, los rótulos van en Archivo (Plex Mono se queda en el papel y Courier en el guion). */
.acto-creditos .antetitulo, .credito dt { font-family: var(--f-texto); font-weight: 600; font-stretch: 100%; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }

/* Dirección y reparto se leen seguidos. La flecha bajo la dirección evita un falso cierre. */
.equipo-creditos { display: grid; gap: clamp(24px, 4svh, 36px); }
.direccion-reparto { display: grid; justify-items: center; gap: 16px; }
.seguir-reparto {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  font-family: var(--f-texto);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.seguir-reparto svg { flex: none; width: 20px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.creditos { margin: 0; }
.credito { display: grid; gap: 10px; justify-items: center; }
.credito dd { margin: 0; font-family: var(--f-cartel); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: min(clamp(2.2rem, 6vw, 4rem), 18vw); line-height: .92; }
/* El bloque del guion, compuesto como la portada de un guion: un solo cuerpo para el encabezado, los nombres y la
   acotación, como escribe una máquina. pelicula.js lo baja (hasta 15 px) si un nombre no cabe en un renglón. */
.guion { --guion: clamp(1.0625rem, .9rem + .9vw, 1.5rem); display: grid; gap: clamp(72px, 14vh, 160px); font-family: var(--f-guion); font-size: var(--guion); line-height: 1.5; }
.camara { display: grid; justify-items: center; scroll-margin-top: clamp(24px, 6svh, 64px); }
.camara:focus { outline: none; }   /* destino del enlace; el foco visible sigue en cada botón al avanzar con Tab */
/* «Una película producida / en colaboración con:», en negritas de máquina, como una transición de guion. */
.camara-titulo { margin: 0 0 .8em; font-size: 1em; font-weight: 700; line-height: 1.5; text-transform: uppercase; }
.reparto-ayuda { max-width: 34ch; margin: 0 0 1.4em; color: var(--gris); font-family: var(--f-texto); font-size: .875rem; line-height: 1.5; text-wrap: balance; }
.salto-guion { display: block; }
/* Los nombres, como los de los personajes: uno por renglón, con un renglón en blanco entre ellos. Se tocan: son lo
   único subrayado (el subrayado de la máquina de escribir, que es también el de un enlace) y se invierten al pasar
   o al enfocarlos. */
.reparto { list-style: none; margin: 0; padding: 0; width: min(100%, 660px); display: grid; gap: 1.25em; }
.reparto li { min-width: 0; }
.nombre {
  all: unset;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  display: grid;
  grid-template-columns: var(--mini, 56px) minmax(0, 1fr) var(--mini, 56px);
  align-items: center;
  column-gap: clamp(8px, 2vw, 18px);
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 12px clamp(12px, 2vw, 20px);   /* aire para el personaje dentro del fondo de hover, sin moverlo al entrar */
  font-family: var(--f-guion);
  font-weight: 400;
  font-size: 1em;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;   /* los nombres largos se reparten entre las dos columnas sin reducir toda la lista */
  transition: background-color .09s, color .09s;
}
.nombre-centro {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  min-width: 0;
}
.nombre-texto {
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: max(1px, .05em);
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
  text-decoration-skip-ink: none;
}
.nombre-abrir { flex: none; font-family: var(--f-guion); font-size: .72em; font-weight: 700; line-height: 1; letter-spacing: 0; opacity: .75; text-decoration: none; }
.nombre-personaje { grid-column: 1; grid-row: 1; width: var(--mini, 56px); height: var(--mini, 56px); object-fit: contain; pointer-events: none; }
.reparto li:nth-child(even) .nombre-personaje { grid-column: 3; }
@media (max-width: 420px) { .nombre { --mini: 44px; } }
/* Con el teclado, además de invertirse, el nombre lleva las esquinas de visor del retrato de la ficha. */
.nombre:focus-visible { background: var(--tinta); color: var(--papel); outline: none; }
.nombre:focus-visible::after {
  content: '';
  position: absolute;
  inset: -8px;
  pointer-events: none;
  --l: 12px;
  --g: 3px;
  background:
    linear-gradient(var(--tinta) 0 0) top left / var(--l) var(--g), linear-gradient(var(--tinta) 0 0) top left / var(--g) var(--l),
    linear-gradient(var(--tinta) 0 0) top right / var(--l) var(--g), linear-gradient(var(--tinta) 0 0) top right / var(--g) var(--l),
    linear-gradient(var(--tinta) 0 0) bottom left / var(--l) var(--g), linear-gradient(var(--tinta) 0 0) bottom left / var(--g) var(--l),
    linear-gradient(var(--tinta) 0 0) bottom right / var(--l) var(--g), linear-gradient(var(--tinta) 0 0) bottom right / var(--g) var(--l);
  background-repeat: no-repeat;
}
.nombre:active { translate: 0 1px; }
/* Al escribirse a máquina, cada letra aparece en su lugar (la línea no se mueve) y el cursor va en la última. */
.nombre-texto .l { opacity: 0; }
.nombre-texto .l.v { opacity: 1; }
.nombre-texto .l.cursor { position: relative; }
.nombre-texto .l.cursor::after { content: ''; position: absolute; left: 100%; top: .12em; height: 1.05em; width: .55em; margin-left: .04em; background: currentColor; }
.nombre-texto .l.cursor.fin::after { animation: parpadeo 1.06s steps(1) 3; animation-fill-mode: forwards; }   /* parpadea tres veces (cada 530 ms) y se va */
@keyframes parpadeo { 50% { opacity: 0; } 100% { opacity: 0; } }
.acotacion { margin: 1.5em 0 0; max-width: 32ch; font-size: 1em; color: var(--gris); text-wrap: balance; }
/* En pantallas sin puntero, al terminar la máquina el primer nombre se invierte una vez: así se ve que se tocan. */
.nombre.aviso { background: var(--tinta); color: var(--papel); }
.acotacion:not(:empty)::before { content: '('; }
.acotacion:not(:empty)::after { content: ')'; }

.tu-lugar { display: grid; gap: 22px; justify-items: center; container-type: inline-size; }
.tu-lugar .cartel-titulo { font-size: min(14cqi, 6.5rem); line-height: .93; }   /* los acentos no chocan con la línea de arriba */
.tu-lugar p { margin: 0; max-width: 44ch; }
.boton {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .75em 1.3em;
  border: 3px solid var(--tinta);
  background: var(--tinta);
  color: var(--papel);
  text-decoration: none;
  font-family: var(--f-cartel);
  font-weight: 900;
  font-stretch: 80%;
  text-transform: uppercase;
  font-size: min(1.25rem, 10vw);
}
/* La película es uno de los eventos de Semiótica Tumbada: bajo «Entrar al set», un enlace más callado a todos, con la
   voz de los rótulos sobre negro (Archivo 600) y subrayado. «Continuará.» sigue siendo el cierre. */
.otros-eventos {
  display: inline-block;
  max-width: 100%;
  min-height: 44px;
  margin-top: -8px;
  padding: calc((44px - 1.4em) / 2) .6em;
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: .78rem;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: max(1px, .08em);
  text-underline-offset: .35em;
  text-wrap: balance;
  transition: background-color .09s, color .09s;
}
@media (hover: hover) { .otros-eventos:hover { background: var(--tinta); color: var(--papel); } }
/* Sin text-wrap: balance (Safari antes de la 17.5) se partía «… DE SEMIÓTICA / TUMBADA ↗»: a 19em el corte cae antes
   de «Semiótica Tumbada». Nunca más ancho que su columna, así que no ensancha la página con la letra grande. */
@supports not (text-wrap: balance) { .otros-eventos { max-width: min(100%, 19em); } }
.continuara { display: grid; gap: 14px; justify-items: center; }
.fin-pregunta { width: 110px; height: 128px; }
.continuara .cartel-titulo { font-size: clamp(2.6rem, 9vw, 5.5rem); }
.continuara .antetitulo { color: var(--gris); }

/* ---------- Pie fijo: el del carrusel, con una línea de avance en vez de números. Se invierte sobre el negro ---------- */
.pie {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: var(--orilla-izq);
  padding-right: var(--orilla-der);
  padding-top: 10px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  color: #ffffff;               /* con «difference» se ve negro sobre papel y blanco sobre negro */
  mix-blend-mode: difference;
  pointer-events: none;
}
.logo-telar { width: 56px; height: auto; flex: none; }
@media not all and (forced-colors: active) {   /* con el contraste del sistema no hay fundido: el pie sigue en su paleta */
  .pie.en-fundido { mix-blend-mode: normal; color: #000000; }
  .pie.en-fundido .marco, .pie.en-fundido .puntada-hilo, .pie.en-fundido .pie-avance i { fill: #000000; background: #000000; }
  .pie.en-fundido .puntada { fill: #ffffff; }
  .pie.en-fundido .pie-avance { background: rgb(0 0 0 / .25); }
  .pie.en-fundido.fundido-oscuro { color: #ffffff; }
  .pie.en-fundido.fundido-oscuro .marco, .pie.en-fundido.fundido-oscuro .puntada-hilo, .pie.en-fundido.fundido-oscuro .pie-avance i { fill: #ffffff; background: #ffffff; }
  .pie.en-fundido.fundido-oscuro .puntada { fill: #000000; }
  .pie.en-fundido.fundido-oscuro .pie-avance { background: rgb(255 255 255 / .28); }
}
.pie .marco, .pie .puntada-hilo { fill: #ffffff; }
.pie .puntada { fill: #000000; }
.pie-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; white-space: nowrap; }   /* con la letra grande se recorta: la pausa no sale de la pantalla */
/* El nombre del pie lleva a todos los eventos de Semiótica: la conexión se ve desde el título. 44 px de alto. */
a.pie-nombre { pointer-events: auto; padding-block: 11px; margin-block: -11px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a.pie-nombre:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.pie-avance { flex: 1; min-width: clamp(20px, calc(100vw - 300px), 56px); height: 2px; margin-left: clamp(4px, 1.5vw, 20px); background: rgb(255 255 255 / .28); overflow: hidden; }
.pie-avance { position: relative; overflow: visible; }
.pie-avance i { display: block; height: 100%; background: #ffffff; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
/* Dos muescas, sin números: donde empiezan el rodaje y los créditos. Son botones (44 px de alto y hasta 44 de ancho,
   centrados en su muesca; si quedan cerca, cada una toma la distancia entre las dos, nunca menos de 24 px) que llevan
   directo ahí. El resto del pie no recibe el puntero. */
.muesca { all: unset; position: absolute; top: -21px; left: var(--x, -100px); width: var(--muesca-w, 44px); height: 44px; margin-left: calc(var(--muesca-w, 44px) / -2); cursor: pointer; pointer-events: auto; }
.muesca::before { content: ''; position: absolute; left: calc(50% + var(--raya, 0px) - .5px); top: 18px; width: 1px; height: 8px; background: currentColor; transition: width .09s, left .09s; }   /* --raya: si el botón se corrió, la raya sigue en su lugar */
@media (hover: hover) { .muesca:hover::before { width: 3px; left: calc(50% + var(--raya, 0px) - 1.5px); } }
.muesca:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
/* Pausar animaciones: un ‖ que pasa a ▶, sin letras. Congela los stickers, los «?», la flecha y la máquina de escribir. */
.pausa { all: unset; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -12px -10px 0; cursor: pointer; pointer-events: auto; }
.pausa[hidden] { display: none; }
.pausa svg { width: 18px; height: 18px; overflow: visible; }
.pausa path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pausa .icono-seguir { display: none; fill: currentColor; }
.pausa[aria-pressed="true"] .icono-pausa { display: none; }
.pausa[aria-pressed="true"] .icono-seguir { display: block; }
.pausa:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
/* El fundido corto de las muescas: hacia el papel (rodaje) o hacia el negro (créditos), el salto y de vuelta. */
.corte { position: fixed; inset: 0; z-index: 29; pointer-events: none; opacity: 0; }

/* ---------- Ficha de cada persona: personaje, nombre y motivo ---------- */
html.ficha-abierta { overflow: hidden; }
.ficha {
  --papel: #000;
  --tinta: #fff;
  width: min(920px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100vh - 24px);
  max-height: calc(100svh - 24px);
  padding: 0;
  border: 0;
  background: var(--papel);
  color: var(--tinta);
  overflow: hidden;
}
.ficha::backdrop { background: rgb(0 0 0 / .9); }
.ficha-interior { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - 24px); max-height: calc(100svh - 24px); }
.ficha-barra, .ficha-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ficha-barra { justify-content: flex-end; padding: 4px; }
.ficha-nav { padding: 4px; }
.ficha-cerrar, .ficha-nav button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  min-height: 44px;
  padding: 13px 14px;
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ficha-cerrar:focus-visible, .ficha-nav button:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
.ficha-cuerpo {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 clamp(20px, 5vw, 52px) clamp(20px, 4vw, 40px);
  display: grid;
  gap: 24px;
  align-items: center;
  text-align: center;
}
.ficha-visual { position: relative; width: min(100%, 280px, 30svh); aspect-ratio: 1; margin: 0 auto; }
.ficha-visual img, .ficha-visual video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.ficha-visual video { background: #000; pointer-events: none; }
.ficha-texto { display: grid; gap: 22px; min-width: 0; }
.ficha-texto .cartel-titulo { margin: 0; font-size: clamp(2.8rem, 12vw, 6rem); line-height: .95; overflow-wrap: anywhere; }
.ficha .palabra { max-width: 42ch; margin: 0 auto; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.ficha-contexto { margin: 0; font: 500 .75rem/1.5 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.ficha.ficha-capitulo .ficha-cuerpo { display: block; padding-top: 20px; }
.ficha-capitulo .ficha-texto { max-width: 42rem; margin: 0 auto; text-align: left; gap: 20px; }
.ficha.ficha-capitulo .cartel-titulo { font-family: var(--f-guion); font-size: clamp(1.5rem, 4.5vw, 2.5rem); font-weight: 700; font-stretch: normal; line-height: 1.15; letter-spacing: .01em; }
.ficha.ficha-capitulo .palabra { max-width: none; margin: 0; font-family: var(--f-guion); font-size: 1.125rem; font-weight: 400; line-height: 1.5rem; letter-spacing: 0; }
.ficha-ilustracion { width: min(100%, 520px); margin: 24px auto 0; overflow: hidden; border-radius: 12px; background: #fff; }
.ficha-ilustracion img { display: block; width: 100%; height: auto; }
@media (min-width: 780px) {
  .ficha-cuerpo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; text-align: left; }
  .ficha-visual { width: min(100%, 320px, 50svh); }
  .ficha-texto .cartel-titulo { font-size: clamp(3.5rem, 7vw, 6rem); }
  .ficha .palabra { margin: 0; }
  .ficha.ficha-capitulo .ficha-cuerpo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 28px; }
  .ficha-capitulo .ficha-texto { grid-column: 2; grid-row: 1; }
  .ficha-capitulo .ficha-ilustracion { grid-column: 1; grid-row: 1; margin: 0; }
}
@media (max-height: 480px) {
  .ficha-cuerpo { grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); text-align: left; gap: 20px; }
  .ficha-visual { width: min(100%, 35svh); }
  .ficha-texto .cartel-titulo { font-size: clamp(2rem, 6vw, 3.5rem); }
  .ficha .palabra { margin: 0; }
}
@media (forced-colors: active) {
  .ficha { --papel: Canvas; --tinta: CanvasText; border: 2px solid CanvasText; }
}

/* ---------- Hover solo donde hay puntero (en el celular se quedaba pegado al tocar) ---------- */
@media (hover: hover) {
  .nombre:hover { background: var(--tinta); color: var(--papel); }
  .boton:hover { background: var(--papel); color: var(--tinta); }
  .hilo-sigue:hover .hilo-rotulo { background: var(--tinta); color: var(--papel); }   /* se invierte, como un nombre */
  .ficha-cerrar:hover, .ficha-nav button:hover, .separar:hover { background: var(--tinta); color: var(--papel); }
}

/* ---------- Temas de contraste del sistema: la paleta sigue al tema ---------- */
@media (forced-colors: active) {
  :root, .acto-creditos { --papel: Canvas; --tinta: CanvasText; --fuera: GrayText; --gris: GrayText; }
  .pie { forced-color-adjust: none; mix-blend-mode: normal; color: CanvasText; }
  .pie .marco, .pie .puntada-hilo { fill: CanvasText; }
  .pie .puntada { fill: Canvas; }
  .pie-avance { background: GrayText; }
  .pie-avance i, .muesca::before { background: CanvasText; }
  .muesca:focus-visible, .pausa:focus-visible { outline-color: CanvasText; }
  .saltos a, .boton, .nombre:focus-visible, .nombre.aviso, .retrato.separado ~ .separar, .capa.abierta .capa-marco { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  @media (hover: hover) {
    .nombre:hover, .ficha-cerrar:hover, .ficha-nav button:hover, .separar:hover { forced-color-adjust: none; background: CanvasText; color: Canvas; }
    .boton:hover { background: Canvas; color: CanvasText; }
    .hilo-sigue:hover .hilo-rotulo, .otros-eventos:hover { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  }
  .nombre:focus-visible { outline: 3px solid CanvasText; outline-offset: 4px; }
  .dia-marca { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .dia-cap { forced-color-adjust: none; background: Canvas; color: CanvasText; }
  .dia-leer { background: none; color: CanvasText; }
  .dia-velo { display: none; }
  .hilo-cinta, .hilo-cola, .cinta::before { forced-color-adjust: none; background: CanvasText; }
  .hilo-punta path { forced-color-adjust: none; stroke: CanvasText; }
  .hilo-sigue:focus-visible .hilo-rotulo { outline-color: CanvasText; }
  .acto-creditos::after, html.apilado body::after { forced-color-adjust: none; }   /* los velos del pie, de Canvas */
}
/* Los stickers son relleno blanco con trazo negro y la línea va en CanvasText: en un tema oscuro se invierten para que
   cada relevo cambie de dibujo sin cambiar de tinta. Las fotos de los capítulos, no. */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .morfo img, .morfo video, .cartel-dibujo img, .tarjeta-dibujo, .baja-flecha { filter: invert(1); }
}

/* ---------- Apilado (sin movimiento, pantallas muy bajas, ?quieto o al imprimir): los planos uno debajo del otro,
   sin imán. La clase la pone pelicula.js ---------- */
html.apilado .escenario { height: auto !important; background: none; }
html.apilado .escenario-negro { display: none; }
html.apilado .escena { position: relative; height: auto; overflow: visible; }
html.apilado .lienzo { position: relative; inset: auto; }
html.apilado .plano { position: relative; inset: auto; }
html.apilado .plano-titulo { height: auto; min-height: 100svh; }
html.apilado .cartel { position: relative; inset: auto; min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: 2svh; padding: 24px 0 calc(var(--pie-alto) + 16px); }
/* El cerebro se achica en pantallas bajas (el celular de lado) para que el título, la bajada y «Baja» quepan sobre el pie. */
html.apilado .cartel-dibujo { --lado-cartel: clamp(88px, calc(100svh - var(--pie-alto) - 230px), min(var(--dibujo-t), 46svh)); position: relative; left: auto; top: auto; transform: none; width: var(--lado-cartel); height: var(--lado-cartel); }
html.apilado .plano-como, html.apilado .plano-rodaje { min-height: 100svh; }
html.apilado .plano-como, html.apilado .tarjeta { pointer-events: auto; }
html.apilado .morfo, html.apilado .hilo-lienzo, html.apilado .fundido, html.apilado .tarjeta-alt { display: none !important; }
html.apilado .cartel-texto { position: relative; left: auto; top: auto; width: min(100%, 62rem); opacity: 1 !important; transform: none !important; }   /* el ancho de la escena: «SEMIÓTICA» no se parte */
html.apilado .como-ante, html.apilado .rodaje-ante { opacity: 1 !important; transform: none !important; }
html.apilado .como-ante { position: static; padding: 32px 0 0; text-align: center; }
html.apilado .hilera { position: relative; inset: auto; }
html.apilado .tarjeta { position: static; display: grid; justify-items: center; gap: 16px; padding-block: 32px; }
html.apilado .tarjeta-dibujo { display: block; width: var(--dibujo); height: var(--dibujo); }
html.apilado .tarjeta-texto { position: static; opacity: 1 !important; transform: none !important; }
html.apilado .tarjeta-texto .cartel-titulo, html.apilado .tarjeta-texto p { opacity: 1 !important; transform: none !important; }
html.apilado .rodaje-ante { position: static; padding: 32px var(--orilla-der) 0 var(--orilla-izq); }
html.apilado .ventana { position: static; overflow: visible; margin: 24px 0; -webkit-mask-image: none; mask-image: none; }
html.apilado .cinta-mov { transform: none !important; }
/* Apilado, la cinta es la de la escena: una sola columna sobre el eje, en cualquier ancho (en una rejilla, que se lee
   por renglones, el hilo tendría que regresar hacia arriba de un día al siguiente). Cada día, del ancho que tiene en
   la escena y entero en la pantalla; entre uno y otro, un tercio de fotograma con su fecha adentro. Nunca menos de
   160 px (o del ancho menos 32 px, si es menor): apilado nadie mide los nombres, y de lado Safari, con su barra, deja
   un 100svh de 320 a 340 px, que daba días de 124 a 138 px con «INDIVIDUACIÓ / N». Desde 150 px caben los 26 a 16 px. */
html.apilado .cinta-mov { --dia-w: max(min(160px, 100vw - 32px), min(100vw - 88px, 300px, (100svh - 120px) * .62)); --hilo-g: calc(var(--dia-w) * 12.5 / 640) !important; }
html.apilado .cinta { padding: calc(var(--dia-w) * .14) 0 0 !important; transform: none !important; }
/* El hilo, recto por el eje y por detrás de los días: sale en la puntada del medio de cada uno (su alma tiene su
   ancho), entra por arriba desvaneciéndose y sigue sin corte en la cola de «Baja a los créditos». */
html.apilado .cinta::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: var(--hilo-g); margin-left: calc(var(--hilo-g) / -2); background: linear-gradient(transparent, var(--tinta) 40px); }
html.apilado .dia { --foco: 1 !important; --texto: 1 !important; --velo: 0 !important; transform: none !important; }
html.apilado .dia-fecha, html.apilado .dia-leer { --texto: 1 !important; }
html.apilado .dia-velo { display: none; }
html.apilado .hilo-cinta { display: none; }
/* Apilado, el hilo que sigue va en el flujo, pegado al último día: la cola continúa el hilo de la columna hasta la
   punta y «Baja a los créditos», hacia el negro. */
html.apilado .hilo-sigue { position: static; height: auto; margin: 0 auto 8px; pointer-events: auto; opacity: 1; }
html.apilado .hilo-cola { flex: none; height: calc(var(--dia-w) * .3); }
/* Apilado, el pie fijo lleva un velo de papel debajo: no se encima a los textos. Se recorta donde empiezan los créditos
   (pelicula.js escribe --corte, lo que ocupan de la pantalla); sobre ellos va su propio velo, de negro. */
html.apilado body::after { content: ''; position: fixed; z-index: 29; left: 0; right: 0; bottom: 0; height: calc(var(--pie-alto) + 28px); background: linear-gradient(to top, var(--papel) 55%, transparent); clip-path: inset(0 0 var(--corte, 0px) 0); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .pila, .cel, .ficha, .ficha::backdrop, .dia, .nombre, .otros-eventos { transition: none; }
  .dia.vivo .dia-pregunta > g { animation: none; }
  .nombre-texto .l { opacity: 1; }
  .nombre-texto .l.cursor::after { display: none; }
}
/* «Ver sin movimiento» (?quieto) apaga lo mismo que el movimiento reducido del sistema. */
html.quieto .pila, html.quieto .cel, html.quieto .ficha, html.quieto .ficha::backdrop, html.quieto .dia, html.quieto .nombre, html.quieto .otros-eventos { transition: none; }
html.quieto .dia.vivo .dia-pregunta > g { animation: none; }
html.quieto .nombre-texto .l { opacity: 1; }
html.quieto .nombre-texto .l.cursor::after { display: none; }
/* Al imprimir (va apilado): los nombres completos aunque la máquina de escribir no haya corrido; sin pie ni atajos. */
@media print {
  .nombre-texto .l { opacity: 1 !important; }
  .nombre-texto .l.cursor::after { display: none; }
  .pie, .saltos, .corte, body::after, .hilo-sigue { display: none !important; }
  .acto-creditos { --papel: #ffffff; --tinta: #000000; --gris: #5c5c5c; }   /* el navegador no imprime fondos: los créditos, en tinta sobre papel */
  .acto-creditos::after { display: none; }
  .boton { background: none; color: #000000; }
  .dia { -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* los nombres, blancos sobre el fotograma, y el degradado del filmado */
  html.apilado .cinta-mov { --dia-w: 220px; }   /* la columna, más chica en el papel: casi lo que ocupaba la rejilla */
  .cinta::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* el hilo es un fondo: sin esto no se imprime */
}