/* Reds Row
   Lenguaje: collage de fanzine. Papel blanco arrugado y rasgado, fibrón rojo,
   letras de afiche en rojo y negro, cabezas recortadas. */

:root {
  --papel: #f4f1ea;
  --tinta: #17120f;
  --tinta-suave: #4a413b;
  /* El rojo del logo. Para texto chico va el hondo, que contrasta más. */
  --rojo: #d81815;
  --rojo-hondo: #a50f14;
  --pared: #4b2d29;
  --cinta: rgba(226, 208, 160, .8);

  --letra-cartel: 'Anton', 'Haettenschweiler', 'Arial Narrow', Impact, sans-serif;
  --letra-fibron: 'Caveat Brush', 'Segoe Print', 'Bradley Hand', cursive;
  --letra-texto: 'Archivo', 'Segoe UI', system-ui, sans-serif;

  --ancho: 1180px;
  --margen: clamp(16px, 4vw, 48px);
  --sombra-papel: drop-shadow(0 1px 1px rgba(23, 18, 15, .32)) drop-shadow(0 9px 14px rgba(23, 18, 15, .17));
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--letra-texto);
  background-color: var(--papel);
  background-image: url(img/papel-1.webp);
  background-size: 1600px auto;
  background-blend-mode: multiply;
}

img { max-width: 100%; }

.filtros { position: absolute; }

:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }
/* Los títulos reciben el foco al cambiar de vista, pero no se usan con el teclado. */
[tabindex='-1']:focus { outline: none; }

.saltar {
  position: absolute; left: 12px; top: -80px; z-index: 20;
  padding: 12px 16px; background: var(--tinta); color: var(--papel);
  font: 400 1.1rem/1 var(--letra-cartel); text-transform: uppercase; text-decoration: none;
}
.saltar:focus { top: 12px; outline-color: var(--rojo); }

/* Letra de fibrón */
.fibra {
  font-family: var(--letra-fibron);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--rojo);
  filter: url(#fibron-letra);
}

/* ── Papel roto ─────────────────────────────────────────────────────────── */
.roto { position: relative; display: block; filter: var(--sombra-papel); }
.roto__fibra { position: absolute; inset: 0; background: #fffdf7; pointer-events: none; }
.roto__cara {
  position: relative; display: block;
  background-color: var(--papel);
  background-image: url(img/papel-1.webp);
  background-size: 1100px auto;
  background-blend-mode: multiply;
}

/* Cinta de papel para pegar cosas */
.cinta {
  position: absolute; z-index: 3; left: 50%; top: -13px;
  width: clamp(70px, 9vw, 108px); height: 28px;
  translate: -50% 0; rotate: -3deg;
  background: var(--cinta);
  clip-path: polygon(0 12%, 3% 0, 6% 14%, 9% 2%, 12% 12%, 100% 4%, 97% 26%, 100% 44%, 97% 62%, 100% 82%, 97% 100%, 4% 96%, 0 84%, 3% 66%, 0 48%, 3% 30%);
}

/* ── Garabatos de fibrón ────────────────────────────────────────────────── */
.garabato { display: block; width: 100%; height: auto; overflow: visible; filter: url(#fibron); }
.garabato path {
  fill: none;
  stroke: var(--rojo);
  stroke-width: var(--grosor);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset .36s cubic-bezier(.65, .05, .3, 1) calc(var(--i) * 85ms + var(--espera, 0ms)),
    opacity 0s linear calc(var(--i) * 85ms + var(--espera, 0ms));
}
.garabato--relleno path { fill: var(--rojo); stroke: none; }
.garabato--oculto path { stroke-dashoffset: 1; opacity: 0; transition: none; }

/* ── Categorías: papeles colgados que se hamacan ────────────────────────── */
.categorias { display: flex; align-items: flex-start; }

.cat {
  position: relative; display: block;
  padding-top: 12px;
  color: var(--tinta); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.cat__cinta {
  position: absolute; z-index: 2; left: 50%; top: 0;
  width: clamp(44px, 5.4vw, 84px); height: clamp(18px, 2vw, 26px);
  translate: -50% 0; rotate: var(--giro-cinta, -3deg);
  background: var(--cinta);
  clip-path: polygon(0 12%, 4% 0, 8% 14%, 12% 2%, 100% 6%, 96% 30%, 100% 52%, 96% 76%, 100% 100%, 5% 94%, 0 78%, 4% 56%, 0 34%);
}
.cat__cuelga {
  position: relative; display: block;
  transform-origin: 50% -1.6em;
  animation: hamaca var(--tiempo, 3.2s) ease-in-out var(--desfase, 0s) infinite alternate;
  will-change: transform;
}
@keyframes hamaca {
  from { transform: rotate(calc(var(--vaiven, 3deg) * -1)); }
  to { transform: rotate(var(--vaiven, 3deg)); }
}
/* Al apuntarle se queda quieta para que sea fácil de tocar. */
.cat:hover .cat__cuelga, .cat:focus-visible .cat__cuelga { animation-play-state: paused; }
.cat__papel .roto__cara { padding: .5em .72em .42em; }
.cat__nombre { display: block; font: 400 1em/1 var(--letra-cartel); text-transform: uppercase; letter-spacing: .012em; white-space: nowrap; }
.cat__garabatos { position: absolute; inset: 0; pointer-events: none; }
.cat__garabatos .garabato { position: absolute; }

/* ── Tira de arriba ─────────────────────────────────────────────────────── */
.tira {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 6px clamp(12px, 3vw, 40px);
  padding: 10px var(--margen) 30px;
}
/* En la portada el logo grande ya está abajo: la tira lleva solo las categorías, más grandes. */
body[data-vista='portada'] .tira { justify-content: center; padding-top: 14px; padding-bottom: 40px; }
body[data-vista='portada'] .tira__logo { display: none; }
body[data-vista='portada'] .categorias { gap: clamp(14px, 5vw, 84px); }
body[data-vista='portada'] .cat { font-size: clamp(1.5rem, 4.2vw, 3.3rem); }
.tira__fondo { position: absolute; inset: 0; z-index: -1; }
/* La tira es negra para que los garabatos rojos de las categorías se vean
   enteros, también donde se salen del papel. */
.tira__fondo .roto__cara {
  height: 100%;
  background-color: #1c1614;
  background-image: url(img/papel-2.webp);
  background-size: 1400px auto;
  background-blend-mode: overlay;
}
.tira__logo { display: block; flex: none; width: clamp(72px, 9vw, 104px); padding: 4px; }
.tira__logo:focus-visible { outline-color: #fff; }
.tira__firma {
  display: block; aspect-ratio: 745 / 662;
  background: var(--rojo);
  -webkit-mask: url(img/logo.png) center / contain no-repeat;
  mask: url(img/logo.png) center / contain no-repeat;
  transition: rotate .2s;
}
.tira__logo:hover .tira__firma { rotate: -4deg; }
.categorias { gap: clamp(8px, 2.2vw, 30px); padding-top: 4px; }
.cat { font-size: clamp(1.15rem, 2.3vw, 1.7rem); }
.cat:focus-visible { outline-color: #fff; }

/* ── Vistas ─────────────────────────────────────────────────────────────── */
main { position: relative; z-index: 1; }
main:focus { outline: none; }

.vista {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(26px, 5vw, 60px) var(--margen) clamp(70px, 10vw, 130px);
}
.vista[hidden] { display: none; }

@keyframes cae {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}
.vista--entra [data-cae] {
  animation: cae .5s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--orden, 0) * 70ms);
}

.titulo {
  position: relative; display: inline-block; justify-self: start; margin: 0 0 .2em;
  font: 400 clamp(4.2rem, 16vw, 12.5rem)/.9 var(--letra-cartel);
  text-transform: uppercase; letter-spacing: -.005em;
}
.titulo--claro { color: var(--papel); }
/* Palabras largas (Personajes): un poco más chico para que entre con lo de al lado. */
.titulo--largo { font-size: clamp(3.2rem, 12.6vw, 10rem); }
.titulo__raya { position: absolute; left: -1%; right: -5%; top: 93%; }

.subtitulo {
  margin: clamp(48px, 8vw, 100px) 0 clamp(18px, 3vw, 34px);
  font: 400 clamp(2.2rem, 5.5vw, 4rem)/1 var(--letra-cartel);
  text-transform: uppercase;
}
.subtitulo--claro { color: var(--papel); }

.pie { display: block; margin-top: .6em; font-size: 1.45rem; color: var(--rojo-hondo); }

/* Carteles de lo que todavía no está cargado */
.falta { margin: 0; }
.falta__cartel {
  display: inline-block; margin: 0;
  padding: .22em .6em .12em;
  border: 2px dashed currentColor;
  font: 400 1.6rem/1.1 var(--letra-fibron); text-transform: uppercase;
  color: var(--rojo-hondo);
  rotate: -1.2deg;
}
.falta__nota { margin: .7em 0 0; font-size: .98rem; color: var(--tinta-suave); }
.vacio { margin: clamp(30px, 6vw, 70px) 0; font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--rojo-hondo); }
.sin-imagen {
  display: grid; place-items: center; min-height: 120px; padding: 16px;
  background: #e6e0d3; color: var(--tinta-suave);
  font: 400 1.4rem/1.1 var(--letra-fibron); text-transform: uppercase; text-align: center;
}

/* ── Portada ────────────────────────────────────────────────────────────── */
.portada { max-width: none; padding: 0; }
.portada__hoja {
  position: relative;
  max-width: 1480px; margin: 0 auto;
  padding: clamp(16px, 2vw, 26px) var(--margen) clamp(46px, 6vw, 86px);
  text-align: center;
}
.portada__esquina { position: absolute; top: clamp(14px, 2vw, 26px); margin: 0; font-size: clamp(1.5rem, 3vw, 2.7rem); }
.portada__esquina--izq { left: var(--margen); rotate: -2deg; }
.portada__esquina--der { right: var(--margen); rotate: 1.6deg; }
.portada__logo { width: clamp(180px, 20vw, 290px); margin: clamp(0px, calc(48px - 4vw), 44px) auto 0; }
.portada__logo img { display: block; width: 100%; height: auto; }

.fila {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(0px, .5vw, 8px);
  max-width: 1260px; margin: clamp(2px, .8vw, 12px) auto 0; padding: 0;
  list-style: none;
}
.fila li { flex: var(--ancho) 1 0; min-width: 0; }
.cabeza { position: relative; display: block; color: var(--rojo); text-decoration: none; }
.cabeza img {
  display: block; width: 100%; height: auto;
  transform: translateY(calc(var(--cuelga) * 1%));
  transition: transform .22s cubic-bezier(.3, .8, .3, 1);
}
.cabeza:hover img, .cabeza:focus-visible img { transform: translateY(calc(var(--cuelga) * 1% - 10px)) rotate(var(--ladeo)); }
.cabeza__cartel {
  position: relative; display: block; margin-top: .55em;
  font: 400 clamp(1.2rem, 1.75vw, 1.6rem)/1.04 var(--letra-cartel); text-transform: uppercase;
}
.cabeza__cartel span { display: block; }
.portada__servidor { margin: clamp(20px, 2.8vw, 40px) 0 0; font-size: clamp(2.5rem, 5vw, 4.3rem); rotate: -1.5deg; }
.portada__temporada { margin: .1em 0 0; font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.portada__garabato { position: absolute; bottom: clamp(14px, 2.4vw, 30px); width: clamp(84px, 12vw, 190px); }
.portada__garabato--izq { left: -2%; rotate: 4deg; }
.portada__garabato--der { right: -2%; scale: -1 1; rotate: -4deg; }


/* ── Lore ───────────────────────────────────────────────────────────────── */
.lore__cabecera {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 0 clamp(18px, 4vw, 60px); align-items: end;
}
.lore__temporada { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0 .5em; margin: .5em 0 .3em; font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.lore__temporada span + span::before { content: '·'; margin-right: .5em; }
.lore__foto { position: relative; grid-column: 2; grid-row: 1 / span 2; margin: 0; rotate: 2.2deg; }
.lore__recorte img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 62%; }

.capitulos { display: grid; gap: clamp(30px, 5.5vw, 70px); margin: clamp(46px, 8vw, 104px) 0 0; padding: 0; list-style: none; }
.capitulo {
  display: grid; grid-template-columns: clamp(58px, 11vw, 140px) minmax(0, 1fr);
  gap: clamp(8px, 2vw, 26px); align-items: start;
  width: min(100%, 860px);
  rotate: -.7deg;
}
.capitulo:nth-child(even) { margin-left: auto; rotate: .8deg; }
.capitulo__numero { padding-top: .12em; font-size: clamp(3.6rem, 9.5vw, 7.4rem); line-height: .8; text-align: right; }
.capitulo__hoja .roto__cara { padding: clamp(22px, 3.2vw, 40px) clamp(18px, 3.2vw, 44px) clamp(24px, 3.4vw, 44px); }
.capitulo__titulo { margin: 0 0 .4em; font: 400 clamp(1.7rem, 3.6vw, 2.8rem)/1 var(--letra-cartel); text-transform: uppercase; }
.capitulo__cuando { margin: -.2em 0 .7em; font-size: 1.5rem; color: var(--rojo-hondo); }
.capitulo__texto p { max-width: 64ch; margin: 0 0 1em; }
.capitulo__texto p:last-child { margin-bottom: 0; }
.capitulo__foto { position: relative; max-width: 420px; margin: 1.6em 0 0; rotate: -1.5deg; }
.capitulo__recorte img { display: block; width: 100%; }

/* ── Barrio: la pared con las firmas ────────────────────────────────────── */
body[data-vista='barrio'] {
  background-color: var(--pared);
  background-image: url(img/papel-2.webp);
}
body[data-vista='barrio']::before {
  content: ''; position: fixed; inset: -25%; z-index: 0;
  background: #7d141b;
  opacity: .5;
  -webkit-mask: url(img/logo.png) 0 0 / 330px auto repeat, url(img/logo.png) 190px 170px / 210px auto repeat;
  mask: url(img/logo.png) 0 0 / 330px auto repeat, url(img/logo.png) 190px 170px / 210px auto repeat;
  rotate: -9deg;
  pointer-events: none;
}
body[data-vista='barrio'] :focus-visible { outline-color: #fff; }

.barrio__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 34px clamp(20px, 5vw, 70px); }
.barrio__zona { flex: 0 1 380px; rotate: 1.4deg; color: var(--tinta); }
.nota .roto__cara { padding: 20px 24px 24px; }
.nota__rotulo { margin: 0 0 .3em; font: 400 1.5rem/1 var(--letra-cartel); text-transform: uppercase; }
.nota__dato { margin: 0; font: 400 clamp(1.8rem, 4vw, 2.6rem)/1 var(--letra-fibron); text-transform: uppercase; color: var(--rojo); }
.nota__texto { margin: .8em 0 0; }

.barrio__mapa { position: relative; max-width: 920px; margin: clamp(46px, 7vw, 84px) 0 0; rotate: -1deg; color: var(--tinta); }
.mapa { margin: 0; }
.mapa img { display: block; width: 100%; }
.mapa .pie { padding: 0 20px 18px; }
.mapa__hueco {
  display: grid; place-items: center; text-align: center;
  min-height: clamp(220px, 42vw, 440px); padding: 40px 24px;
  /* Renglones de hoja: marcan que acá va algo dibujado. */
  background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(23, 18, 15, .1) 31px 32px);
}
/* Clip de alambre que sostiene el mapa */
.clip {
  position: absolute; z-index: 3; left: clamp(22px, 6vw, 70px); top: -22px;
  width: 22px; height: 62px;
  border: 3px solid #b9b4ac; border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 1px 2px 2px rgba(0, 0, 0, .35);
  rotate: 7deg;
}
.clip::after { content: ''; position: absolute; left: 4px; right: 4px; top: 12px; bottom: -3px; border: 3px solid #b9b4ac; border-top: 0; border-radius: 0 0 8px 8px; }

.lugares { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(26px, 4vw, 52px); margin: 0; padding: 0; list-style: none; }

.polaroid {
  padding: 12px 12px 0;
  background: #fbfaf5; color: var(--tinta);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .32), 0 12px 24px rgba(0, 0, 0, .3);
  rotate: var(--giro, -2deg);
}
.polaroid__foto { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: #1c1615; }
.polaroid__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.polaroid__hueco { padding: 12px; font-size: 1.5rem; text-align: center; color: #cfc7b8; }
.polaroid__pie { min-height: 92px; padding: 12px 4px 18px; }
.polaroid__nombre { margin: 0; font-size: 1.7rem; color: var(--rojo-hondo); }
.polaroid__texto { margin: .35em 0 0; font-size: .95rem; line-height: 1.45; color: var(--tinta-suave); }
.polaroid__texto:empty { display: none; }

/* ── Personajes ─────────────────────────────────────────────────────────── */
.personajes__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px 40px; }
.personajes__esquinas { display: grid; gap: .1em; margin: 0 0 .2em; font-size: clamp(1.6rem, 3.2vw, 2.5rem); text-align: right; }
.personajes__esquinas span:first-child { rotate: -1.5deg; }

.elenco {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 6vw, 84px) clamp(10px, 3vw, 50px); align-items: end;
  margin: clamp(46px, 7vw, 96px) 0 0; padding: 0; list-style: none;
}
.elenco li:nth-child(3n + 2) { translate: 0 clamp(16px, 3.4vw, 46px); }
.figura { display: block; color: var(--rojo); text-align: center; text-decoration: none; }
.figura img {
  display: block; height: auto; margin: 0 auto;
  width: calc(var(--ancho) / 611 * 100%); max-width: 330px;
  transition: transform .22s cubic-bezier(.3, .8, .3, 1);
}
.figura:hover img, .figura:focus-visible img { transform: translateY(-10px) rotate(var(--ladeo)); }
.figura__cartel {
  position: relative; display: inline-block; margin-top: .5em;
  font: 400 clamp(1.3rem, 2.9vw, 2.3rem)/1.05 var(--letra-cartel); text-transform: uppercase;
}
.figura__raya { position: absolute; left: -4%; top: 92%; width: 108%; }
.figura:hover .figura__raya path, .figura:focus-visible .figura__raya path {
  stroke-dashoffset: 0; opacity: 1;
  transition: stroke-dashoffset .34s cubic-bezier(.65, .05, .3, 1), opacity 0s;
}
.figura__dato { display: block; margin-top: .5em; font-size: 1.5rem; color: var(--rojo-hondo); }

/* ── Ficha ──────────────────────────────────────────────────────────────── */
.volver { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.7rem; color: var(--rojo-hondo); text-underline-offset: .18em; text-decoration-thickness: 2px; }
.volver:hover { color: var(--rojo); }

.ficha__cuerpo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(30px, 5vw, 76px); align-items: start;
  margin-top: clamp(18px, 3vw, 34px);
}

.afiche { position: relative; margin: 0; rotate: -1.6deg; }
.afiche--propio img { display: block; width: 100%; height: auto; box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 16px 30px rgba(23, 18, 15, .26); }

.afiche__papel {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: #f7f4ec;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 16px 30px rgba(23, 18, 15, .26);
  container-type: inline-size;
}
/* Mismos números que FIGURA en app.js (izquierda 14%, ancho 78%, apoya al 8%). */
.afiche__figura { position: absolute; left: 14%; bottom: 8%; width: 78%; mix-blend-mode: multiply; }
/* Trama de puntos: la foto en gris se promedia con una grilla de puntos
   difusos y el contraste al máximo deja solo puntos, más gordos donde la
   foto es más oscura. */
.trama { position: relative; background: #fff; filter: contrast(30); }
.trama img { display: block; width: 100%; height: auto; filter: grayscale(1) brightness(1.75); }
.trama::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-color: #fff;
  background-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, 0)), radial-gradient(closest-side, #000, rgba(0, 0, 0, 0));
  background-size: 1.7cqw 1.7cqw;
  background-position: 0 0, .85cqw .85cqw;
}
.afiche__mira {
  position: absolute; width: 27%; aspect-ratio: 1; translate: -50% -50%;
  border: 2px solid var(--rojo);
  display: grid; place-items: center;
}
.afiche__mira::before, .afiche__mira::after { content: ''; position: absolute; background: var(--rojo); }
.afiche__mira::before { left: -22%; right: -22%; top: 50%; height: 1.5px; }
.afiche__mira::after { top: -22%; bottom: -22%; left: 50%; width: 1.5px; }
.afiche__mira .garabato { position: relative; z-index: 1; width: 62%; filter: none; }
.afiche__nombre {
  position: absolute; left: 8%; bottom: 7%;
  writing-mode: vertical-rl; rotate: 180deg;
  font: 400 15cqw/.9 var(--letra-cartel); text-transform: uppercase; white-space: nowrap;
  color: var(--rojo);
}
.afiche__cruces { position: absolute; right: 7%; top: 58%; writing-mode: vertical-rl; font: 700 3.6cqw/1 var(--letra-texto); letter-spacing: .5em; color: var(--tinta); }
.afiche__marco { position: absolute; inset: 0; width: 100%; height: 100%; }
.afiche__marco rect { stroke: var(--rojo); }
.afiche__marco path { fill: var(--rojo); }

.hoja { rotate: .7deg; }
.hoja .roto__cara { padding: clamp(26px, 4vw, 50px) clamp(20px, 3.4vw, 46px) clamp(30px, 4.4vw, 56px); }
.hoja__numero { margin: 0 0 .25em; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.hoja__nombre { margin: 0; max-width: 76%; font: 400 clamp(2.9rem, 6vw, 5.2rem)/.94 var(--letra-cartel); text-transform: uppercase; overflow-wrap: break-word; }
.hoja__nombre + .hoja__numero { margin: .5em 0 0; color: var(--rojo-hondo); }
.hoja__sello { position: absolute; right: clamp(-14px, -1vw, -4px); top: clamp(-70px, -6vw, -34px); width: clamp(104px, 15vw, 176px); rotate: 7deg; pointer-events: none; }
.hoja__sello img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 0 #fffdf7) drop-shadow(2px 0 0 #fffdf7) drop-shadow(-2px 0 0 #fffdf7) drop-shadow(0 2px 0 #fffdf7) drop-shadow(0 -2px 0 #fffdf7) drop-shadow(0 4px 5px rgba(23, 18, 15, .3)); }
.hoja__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 1.8em 0 0; }
.hoja__datos dt { font: 700 .86rem/1.2 var(--letra-texto); color: var(--tinta-suave); }
.hoja__datos dd { margin: .1em 0 0; font: 400 1.7rem/1.1 var(--letra-cartel); text-transform: uppercase; }
.hoja__subtitulo { margin: 1.6em 0 .5em; font: 400 1.7rem/1 var(--letra-cartel); text-transform: uppercase; }
.hoja__historia p { max-width: 62ch; margin: 0 0 1em; }
.hoja__fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; margin: 2em 0 0; padding: 0; list-style: none; }
.hoja .falta { margin-top: 1.8em; }

.otros { margin-top: clamp(50px, 8vw, 96px); }
.otros ul { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(8px, 2.4vw, 30px); margin: 0; padding: 0; list-style: none; }
.otro { position: relative; display: block; width: clamp(54px, 9vw, 92px); transition: transform .2s; }
.otro img { display: block; width: 100%; height: auto; }
.otro:hover { transform: translateY(-6px); }
.otro__marca { position: absolute; left: -22%; top: -12%; width: 144%; }

/* ── Dirección que no existe ────────────────────────────────────────────── */
.perdido { text-align: center; }
.perdido .titulo { font-size: clamp(3rem, 11vw, 8rem); }
.perdido__texto { max-width: 46ch; margin: 1.6em auto; }
.boton {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.2em;
  background: var(--tinta); color: var(--papel);
  font: 400 1.3rem/1 var(--letra-cartel); text-transform: uppercase; text-decoration: none;
}
.boton:hover { background: var(--rojo-hondo); }

.sin-js { max-width: 46ch; margin: 40px auto; padding: 0 var(--margen); text-align: center; }

/* ── Pantallas angostas ─────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .ficha__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .afiche { width: min(100%, 440px); margin: 0 auto; }
  .lore__cabecera { grid-template-columns: minmax(0, 1fr); }
  .lore__foto { grid-column: 1; grid-row: auto; margin-top: 26px; }
}

@media (max-width: 720px) {
  .tira { justify-content: center; padding-bottom: 26px; }
  .cat__papel .roto__cara { padding: .62em .56em .52em; }
  body[data-vista='portada'] .cat { font-size: clamp(1.3rem, 5.6vw, 2rem); }
  .fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 4px; margin-top: 10px; }
  /* En grilla cada cabeza guarda su tamaño relativo (611 es la más ancha). */
  .cabeza img { width: calc(var(--ancho) / 611 * 100%); margin: 0 auto; }
  .portada__logo { margin-top: 46px; }
  .elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elenco li:nth-child(3n + 2) { translate: none; }
  .elenco li:nth-child(even) { translate: 0 22px; }
  .hoja__datos { grid-template-columns: minmax(0, 1fr); }
  .personajes__esquinas { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .cat__cuelga { animation: none; }
  .vista--entra [data-cae] { animation: none; }
  .garabato path, .cabeza img, .figura img, .otro, .tira__firma { transition: none; }
}