@import url("/static/fuentes.css");

/* ═══════════════════════════════════════════════════════════════════════
   RELIC — sala oscura

   Esto vende cine y series. La primera versión era un catálogo de museo:
   papel hueso, tipografía fina, mucho aire. Elegante y muerto.

   Ahora manda la sala: negro de proyección, un haz de luz ámbar, grano de
   película, cartelas de rótulo y todo el ritmo construido sobre imagen a
   sangre. El texto es el subtítulo, no el protagonista.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LA PALETA VIVE EN tema.css ────────────────────────────────────────
   Aquí había DOS juegos de variables (la sala y un `[data-theme="light"]` que
   no encendía nadie), y más abajo otros cuatro `:root` sueltos que los
   pisaban. Seis sitios donde mirar para saber de qué color es un borde.

   Desde el 19-08-2026 hay UNO: `/static/tema.css`, que se carga el último y
   define la cara clara en `:root`, la oscura en `:root[data-tema="oscuro"]` y
   el automático en `@media (prefers-color-scheme: dark)`. Los números medidos
   de cada rampa están escritos allí, al lado de su valor.

   De este fichero para abajo no debe quedar ni un color escrito a pelo: todo
   sale de esos tokens, que es lo que permite que la misma regla valga para
   las dos caras.                                                            */
:root{
  --paso:clamp(64px, 8vw, 116px);   /* ritmo vertical entre franjas — no es color */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--sala); color:var(--luz);
  font:400 16px/1.6 "Archivo",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* Grano de película sobre toda la página. Es lo que separa "fondo oscuro"
   de "proyección": sin grano, el negro es plano. */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::after{opacity:.028; mix-blend-mode:multiply}

a{color:inherit; text-decoration:none}
img,svg,video{display:block; max-width:100%}

/* ── tipografía ────────────────────────────────────────────────────── */
h1,h2,h3{
  font-family:"Anton",Impact,"Haettenschweiler",sans-serif;
  font-weight:400; text-transform:uppercase; letter-spacing:-.005em;
  /* 1,02 y no 0,93. En español las mayúsculas llevan tilde, y la de Anton
     sube un 28 % por encima de la altura de caja: con la interlínea apretada
     la tilde de PELÍCULA aterrizaba dentro de la línea de arriba y se perdía.
     Se leía «PELICULA» en el titular de la portada. Comprobado midiendo el
     glifo: la I con tilde ocupa 110 px donde la I limpia ocupa 86. */
  line-height:1.02; margin:0; text-wrap:balance;
}
h1{font-size:clamp(2.7rem, 7.6vw, 6.4rem)}
h2{font-size:clamp(1.8rem, 4vw, 3.1rem)}
h3{font-size:clamp(1.02rem, 1.5vw, 1.3rem); line-height:1.1}

.cartela{                          /* el eyebrow, como un rótulo de crédito */
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--haz);
  display:inline-flex; align-items:center; gap:10px;
}
.cartela::before{content:""; width:26px; height:1px; background:var(--haz)}
.rotulo{font-family:"IBM Plex Mono",monospace; font-size:.6rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--luz-3)}
.dato{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
p{margin:0 0 1em}
.lede{font-size:clamp(1rem,1.3vw,1.16rem); color:var(--luz-2); max-width:56ch;
  line-height:1.62}

/* ── cabecera ──────────────────────────────────────────────────────── */
.cabecera{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--sala) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--borde);
}
.cabecera-int{max-width:1440px; margin:0 auto; padding:0 clamp(18px,3vw,40px);
  display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); min-height:68px}
.marca{font-family:"Anton",sans-serif; font-size:1.5rem; letter-spacing:.18em;
  color:var(--luz); flex:none; transition:color .16s}
.marca:hover{color:var(--haz)}
.buscador{position:relative; flex:1; min-width:150px; max-width:520px}
.buscador input{
  width:100%; font:inherit; font-size:.9rem; padding:10px 14px 10px 40px;
  border:1px solid var(--borde); border-radius:2px;
  background:var(--sala-2); color:var(--luz); transition:.18s;
}
.buscador input::placeholder{color:var(--luz-3)}
.buscador input:focus{outline:none; border-color:var(--haz);
  background:var(--sala-3); box-shadow:0 0 0 3px var(--anillo)}
.buscador::before{content:"⌕"; position:absolute; left:14px; top:50%;
  transform:translateY(-53%); color:var(--luz-3); font-size:1.1rem; pointer-events:none}
.nav{display:flex; gap:clamp(11px,1.7vw,22px); font-size:.75rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; align-items:center}
.nav a{color:var(--luz-2); padding:6px 0; border-bottom:1px solid transparent;
  transition:.16s; white-space:nowrap}
.nav a:hover{color:var(--luz); border-bottom-color:var(--haz)}
.globo{display:inline-grid; place-items:center; margin-left:7px; min-width:19px;
  height:19px; padding:0 5px; background:var(--campo); color:var(--campo-tinta);
  border-radius:999px; font-family:"IBM Plex Mono",monospace; font-size:.64rem;
  font-weight:600}

/* ── estructura ────────────────────────────────────────────────────── */
.contenido{max-width:1440px; margin:0 auto; padding:0 clamp(18px,3vw,40px) 110px}
.franja{padding:var(--paso) 0; border-bottom:1px solid var(--borde)}
.franja:last-of-type{border-bottom:0}
.cabeza-seccion{display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:36px; flex-wrap:wrap}
.cabeza-seccion h2{max-width:18ch}
.pie-nota{color:var(--luz-3); font-size:.85rem; max-width:46ch; margin:0}
.pie-nota a{color:var(--haz)}
.enlace-mas{font-family:"IBM Plex Mono",monospace; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--haz); white-space:nowrap}
.enlace-mas:hover{color:var(--haz-fuerte)}
.a-sangre{width:100vw; margin-left:calc(50% - 50vw)}

/* ── el escenario (héroe) ──────────────────────────────────────────── */
.escenario{
  position:relative; min-height:min(92vh, 860px); display:flex; align-items:center;
  width:100vw; margin-left:calc(50% - 50vw); overflow:hidden;
  border-bottom:1px solid var(--borde);
}
#vitrina{position:absolute; inset:0; width:100%; height:100%; z-index:1;
  opacity:0; transition:opacity 2s ease-out}
#vitrina.encendida{opacity:1}
/* El haz cae desde arriba a la izquierda, como en una sala de proyección */
.escenario::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 90% at 16% -12%, rgba(232,163,61,.17), transparent 56%),
    linear-gradient(180deg, transparent 42%, var(--sala) 97%);
}
.escenario-int{position:relative; z-index:3; max-width:1440px; margin:0 auto;
  padding:0 clamp(18px,3vw,40px); width:100%}
.escenario h1{max-width:14ch; margin:.24em 0 0}
.escenario h1 em{font-style:normal; color:var(--haz); display:block}
.escenario .lede{margin-top:1.4em}
.escenario-acciones{display:flex; gap:13px; flex-wrap:wrap; margin-top:2.3em}

.boton{
  display:inline-flex; align-items:center; gap:10px; font:inherit;
  font-size:.77rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 30px; border:1px solid var(--luz); background:var(--luz);
  color:var(--sala); cursor:pointer; transition:.18s;
}
.boton:hover{background:var(--haz); border-color:var(--haz); color:var(--sala)}
.boton--hueco{background:transparent; color:var(--luz); border-color:var(--borde-vivo)}
.boton--hueco:hover{background:transparent; color:var(--haz); border-color:var(--haz)}
.boton--ancho{width:100%; justify-content:center; padding:19px}
.boton:focus-visible{outline:2px solid var(--haz); outline-offset:3px}

.contador{display:flex; gap:clamp(22px,4vw,56px); margin-top:2.8em; flex-wrap:wrap}
.contador div{display:flex; flex-direction:column; gap:6px}
.contador .n{font-family:"Anton",sans-serif; font-size:clamp(1.8rem,3.2vw,2.8rem);
  line-height:.9; color:var(--haz)}

/* ── fotograma: la tarjeta ─────────────────────────────────────────── */
.rejilla{display:grid; gap:clamp(13px,1.5vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,248px),1fr))}
.fotograma{
  position:relative; background:var(--sala-2); border:1px solid var(--borde);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .22s, transform .3s cubic-bezier(.2,.7,.3,1);
}
.fotograma:hover{border-color:var(--borde-vivo); transform:translateY(-3px)}
.fotograma-img{position:relative; overflow:hidden; background:var(--sala-3);
  aspect-ratio:4/5; display:block}
.fotograma-img--baja{aspect-ratio:16/9}
.fotograma-img img,.fotograma-img svg{width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.fotograma:hover .fotograma-img img,.fotograma:hover .fotograma-img svg{transform:scale(1.05)}
/* Velo que se retira al pasar por encima: el fotograma "se enciende" */
.fotograma-img::after{content:""; position:absolute; inset:0; transition:opacity .4s;
  background:linear-gradient(180deg, transparent 48%, rgba(var(--velo),.78))}
.fotograma:hover .fotograma-img::after{opacity:.5}
.fotograma-cuerpo{padding:15px 17px 19px; display:flex; flex-direction:column;
  gap:7px; flex:1}
.fotograma h3 a:hover{color:var(--haz)}
.fotograma-alto{display:flex; justify-content:space-between; align-items:baseline; gap:10px}

.marca-tipo{font-family:"IBM Plex Mono",monospace; font-size:.6rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--luz-3);
  border:1px solid var(--borde); padding:2px 7px; white-space:nowrap}
.sello{font-family:"IBM Plex Mono",monospace; font-size:.6rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; padding:2px 8px;
  border:1px solid currentColor; white-space:nowrap}
.sello.fuerte{color:var(--haz)}
.sello-dp{display:inline-flex; align-items:center; gap:7px;
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--verde);
  border:1px solid currentColor; padding:3px 9px}
.precio{font-family:"IBM Plex Mono",monospace; font-weight:500; color:var(--haz);
  font-variant-numeric:tabular-nums}
.precio--grande{font-size:1.7rem}
.cat{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.14em;
  color:var(--haz)}

.procedencia{border-top:1px solid var(--borde); padding-top:10px; margin:2px 0 0;
  font-size:.83rem; color:var(--luz-2); line-height:1.45}
.procedencia .rotulo{display:block; color:var(--verde); margin-bottom:4px;
  font-size:.58rem; letter-spacing:.2em}
.elementos{color:var(--luz-3); font-size:.78rem; line-height:1.5}

/* ── listado tipo créditos ─────────────────────────────────────────── */
.creditos{list-style:none; margin:0; padding:0; border-top:1px solid var(--borde)}
.creditos li{display:grid; grid-template-columns:74px 96px 1fr auto; gap:20px;
  align-items:center; padding:13px 6px; border-bottom:1px solid var(--borde);
  transition:background .18s}
.creditos li:hover{background:var(--sala-2)}
.creditos .miniatura{width:74px; aspect-ratio:4/3; overflow:hidden;
  background:var(--sala-3); border:1px solid var(--borde)}
.creditos .miniatura img{width:100%; height:100%; object-fit:cover}
.creditos .fecha{font-family:"IBM Plex Mono",monospace; font-size:.74rem;
  color:var(--luz-3); font-variant-numeric:tabular-nums}
.creditos .tit{font-size:1rem; font-weight:500}
.creditos .tit a:hover{color:var(--haz)}
.creditos .sub{display:block; font-size:.76rem; color:var(--luz-3); margin-top:2px}
.creditos .der{display:flex; gap:9px; align-items:center}

/* ── carrusel ──────────────────────────────────────────────────────── */
/* «overflow:hidden» va en la regla original y no en una añadida al final:
   duplicarla creaba dos definiciones que se pisaban. Sin esto, las tarjetas
   del carrusel sobresalían 23 px y arrastraban el documento entero. */
.carrusel{position:relative; overflow:hidden; max-width:100%}
.carrusel-pista{display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(248px,286px); gap:16px; overflow-x:auto;
  scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px}
.carrusel-pista::-webkit-scrollbar{display:none}
.carrusel-pista > *{scroll-snap-align:start}
.carrusel-flechas{display:flex; gap:8px}
.carrusel-flechas button{width:40px; height:40px; display:grid; place-items:center;
  cursor:pointer; background:transparent; border:1px solid var(--borde-vivo);
  color:var(--luz-2); font-size:1rem; transition:.16s}
.carrusel-flechas button:hover:not(:disabled){border-color:var(--haz); color:var(--haz)}
.carrusel-flechas button:disabled{opacity:.28; cursor:default}

/* ── sugerencias del buscador ──────────────────────────────────────── */
.sugerencias{position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:120;
  background:var(--sala-2); border:1px solid var(--borde-vivo); box-shadow:var(--caja);
  max-height:min(74vh,540px); overflow:auto; padding:6px 0}
.sug-titulo{margin:9px 15px 4px; font-family:"IBM Plex Mono",monospace;
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--luz-3)}
.sug{display:flex; gap:13px; align-items:center; padding:9px 15px; color:inherit}
.sug:hover,.sug.activa{background:var(--sala-3)}
.sug-lamina{width:58px; height:40px; flex:none; overflow:hidden; border:1px solid var(--borde)}
.sug-lamina img{width:100%; height:100%; object-fit:cover}
.sug-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.sug-txt strong{font-weight:500; font-size:.93rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.sug-meta{font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--luz-3)}
.sug--pieza{justify-content:space-between}
.sug-precio{font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--haz)}
.sug-vacio{padding:18px 15px; color:var(--luz-3); font-size:.86rem}

/* ── encabezados de página ─────────────────────────────────────────── */
.encabezado{padding:clamp(44px,6.5vw,82px) 0 clamp(26px,3vw,40px);
  border-bottom:1px solid var(--borde); margin-bottom:var(--paso)}
/* Cuando detrás viene la barra de filtros quedaban 158 px muertos entre DOS
   filetes horizontales seguidos, y una franja vacía entre dos rayas se lee
   como «aquí falta algo». La barra ya trae su propio filete arriba, así que
   la cabecera no necesita ni el suyo ni el margen entero. */
.encabezado:has(+ .barra-calendario){
  margin-bottom:0; border-bottom:0; padding-bottom:clamp(16px,2vw,26px)}
.encabezado h1{max-width:16ch}
.encabezado .lede{margin-top:1.1em}
.filtros{display:flex; gap:18px; flex-wrap:wrap; margin-top:24px;
  font-family:"IBM Plex Mono",monospace; font-size:.73rem; letter-spacing:.1em;
  text-transform:uppercase}
.filtros a{color:var(--luz-3); border-bottom:1px solid transparent; padding-bottom:3px}
.filtros a:hover,.filtros a[aria-current]{color:var(--haz); border-bottom-color:var(--haz)}
.filtros .sep{width:1px; background:var(--borde)}
.vacio{padding:76px 0; text-align:center; color:var(--luz-3)}
.letra-chica{font-size:.77rem; color:var(--luz-3); line-height:1.5}
.aviso{color:var(--ambar); font-size:.82rem; border-left:2px solid currentColor;
  padding-left:12px; margin-top:10px}
.miga{display:flex; gap:9px; align-items:center; padding:22px 0 0;
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--luz-3)}
.miga a:hover{color:var(--haz)}

/* ── banda a sangre ────────────────────────────────────────────────── */
.banda{background:var(--sala-2); border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde); padding:var(--paso) 0;
  width:100vw; margin-left:calc(50% - 50vw)}
.banda-int{max-width:1440px; margin:0 auto; padding:0 clamp(18px,3vw,40px)}
.banda .lema-grande{font-family:"Anton",sans-serif; text-transform:uppercase;
  font-size:clamp(1.6rem,3.8vw,3rem); line-height:.98; max-width:20ch; margin:.3em 0 0}
.museo-tira{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:22px; margin-top:42px}
.museo-pieza{margin:0}
.museo-pieza img{width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--borde); filter:grayscale(.28) contrast(1.08)}
.museo-pieza figcaption{display:flex; flex-direction:column; gap:3px; margin-top:11px;
  font-size:.78rem; line-height:1.45; color:var(--luz-3)}
.museo-pieza figcaption strong{color:var(--luz-2); font-weight:500}
.museo-pieza a{color:var(--haz)}

/* ── artículos ─────────────────────────────────────────────────────── */
.articulo{max-width:none; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,72ch) minmax(0,1fr); padding-top:40px}
.articulo > *{grid-column:2}
.articulo > .a-ancho{grid-column:1 / -1}
.articulo h2{font-size:clamp(1.5rem,2.6vw,2.2rem); margin:1.9em 0 .5em}
.articulo h3{font-size:1.15rem; margin:1.6em 0 .4em}
.articulo p,.articulo li{color:var(--luz-2); font-size:1.02rem; line-height:1.72}
.articulo ul,.articulo ol{padding-left:1.3em; display:flex; flex-direction:column; gap:9px}
.articulo strong{color:var(--luz)}
.articulo a{color:var(--haz);
  border-bottom:1px solid color-mix(in srgb, currentColor 38%, transparent)}
.articulo a:hover{border-bottom-color:currentColor}
.articulo table{display:block; overflow-x:auto; width:100%; border-collapse:collapse;
  margin:1.6em 0; font-size:.92rem}
.articulo table th,.articulo table td{border:1px solid var(--filete);
  padding:9px 12px; text-align:left; vertical-align:top; color:var(--luz-2)}
.articulo table th{font-family:"IBM Plex Mono",monospace; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--luz); white-space:nowrap}
.articulo table tbody tr:nth-child(even){background:var(--filete-suave)}
.articulo dl{margin:1.4em 0}
.articulo dt{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--luz); margin-top:1.2em}
.articulo dd{margin:.35em 0 0; color:var(--luz-2); line-height:1.72}
.articulo blockquote{border-left:2px solid var(--haz); padding-left:20px; margin:1.7em 0;
  font-size:1.1rem; color:var(--luz)}
.entradilla{font-size:clamp(1.08rem,1.6vw,1.28rem); color:var(--luz-2);
  line-height:1.6; margin:0 0 2em}
.articulo-cab{padding:clamp(40px,6vw,76px) 0 clamp(24px,3vw,38px);
  border-bottom:1px solid var(--borde)}
.articulo-meta{display:flex; gap:16px; flex-wrap:wrap; align-items:center;
  margin-top:20px; font-family:"IBM Plex Mono",monospace; font-size:.72rem;
  color:var(--luz-3)}

/* ── pie ───────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--borde); background:var(--sala-2)}
.pie-int{max-width:1440px; margin:0 auto; padding:var(--paso) clamp(18px,3vw,40px);
  display:grid; grid-template-columns:minmax(340px,1fr) minmax(0,auto); gap:clamp(30px,5vw,70px)}
.pie .lema{font-family:"Anton",sans-serif; text-transform:uppercase;
  font-size:clamp(1.25rem,2.2vw,1.9rem); line-height:1.02; max-width:17ch; margin:0}
.boletin{margin-top:24px; max-width:380px}
.boletin-fila{display:flex; flex-wrap:wrap; margin-top:10px}
.boletin input{flex:1 1 120px; min-width:0; font:inherit; font-size:.88rem; padding:13px 15px;
  border:1px solid var(--borde-vivo); border-right:0; background:var(--sala);
  color:var(--luz)}
.boletin input:focus{outline:none; border-color:var(--haz)}
.boletin button{font:inherit; font-size:.73rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; padding:13px 22px; border:1px solid var(--haz);
  background:var(--haz); color:var(--sala); cursor:pointer}
.boletin button:hover{background:var(--haz-fuerte); border-color:var(--haz-fuerte)}
.pie-nav{display:flex; gap:clamp(26px,4vw,56px); flex-wrap:wrap}
.pie-nav div{display:flex; flex-direction:column; gap:9px; font-size:.83rem}
.pie-nav span.rotulo{margin-bottom:4px}
.pie-nav a{color:var(--luz-2)}
.pie-nav a:hover{color:var(--haz)}
.cupon{display:inline-block; margin:22px 0 8px; padding:14px 30px;
  border:1px dashed var(--haz); color:var(--haz);
  font-family:"IBM Plex Mono",monospace; font-size:1.3rem; letter-spacing:.14em}

/* ── ficha de pieza ────────────────────────────────────────────────── */
.pieza-detalle{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(30px,4.5vw,64px); padding-top:26px; align-items:start}
.galeria{position:sticky; top:88px; display:flex; flex-direction:column; gap:12px}
.galeria-principal{background:var(--sala-2); border:1px solid var(--borde);
  aspect-ratio:4/5; overflow:hidden}
.galeria-principal img,.galeria-principal svg{width:100%; height:100%; object-fit:contain}
.galeria-tiras{display:flex; gap:8px; flex-wrap:wrap}
.tira{padding:0; border:1px solid var(--borde); background:var(--sala-2);
  width:64px; aspect-ratio:4/5; overflow:hidden; cursor:pointer; transition:.15s}
.tira img,.tira svg{width:100%; height:100%; object-fit:contain}
.tira:hover{border-color:var(--haz)}
.tira.activa{border-color:var(--luz); border-width:2px}
.pieza-datos h1{font-size:clamp(1.9rem,3.4vw,3rem); margin:.24em 0 .2em}
.colores{display:flex; gap:9px; flex-wrap:wrap}
.color-chip input{position:absolute; opacity:0; pointer-events:none}
.color-chip span{display:block; width:32px; height:32px; border-radius:50%;
  background:var(--muestra); border:1px solid var(--borde-vivo); cursor:pointer;
  transition:.14s; box-shadow:inset 0 0 0 2px var(--sala)}
.color-chip:hover span{border-color:var(--haz)}
.color-chip input:checked + span{border-color:var(--luz); border-width:2px}
.color-chip input:focus-visible + span{outline:2px solid var(--haz); outline-offset:3px}
.tallas{display:flex; gap:6px; flex-wrap:wrap}
.talla input{position:absolute; opacity:0; pointer-events:none}
.talla span{display:grid; place-items:center; min-width:52px; height:46px; padding:0 10px;
  border:1px solid var(--borde-vivo); font-family:"IBM Plex Mono",monospace;
  font-size:.86rem; cursor:pointer; transition:.14s}
.talla:hover span{border-color:var(--haz); color:var(--haz)}
.talla input:checked + span{background:var(--luz); color:var(--sala); border-color:var(--luz)}
.talla input:focus-visible + span{outline:2px solid var(--haz); outline-offset:2px}
/* Talla que ese color no fabrica. Se enseña tachada en vez de esconderla: si
   desaparece, la fila de tallas cambia de ancho al cambiar de color y parece
   que la página se ha roto. */
.talla input:disabled + span{opacity:.3; cursor:not-allowed; text-decoration:line-through}
.talla:has(input:disabled):hover span{border-color:var(--borde); color:inherit}
.comprar fieldset{border:0; padding:0; margin:0 0 20px}
.comprar legend{padding:0; margin-bottom:11px; display:flex; align-items:center; gap:4px}
.enlace-guia{background:none; border:0; padding:0 0 0 10px; font:inherit;
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--haz); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px}
.confianza{list-style:none; padding:0; margin:26px 0 0; display:flex;
  flex-direction:column; gap:10px; font-size:.87rem; color:var(--luz-2)}
.confianza li{padding-left:18px; position:relative}
.confianza li::before{content:"›"; position:absolute; left:2px; color:var(--haz)}
.confianza strong{color:var(--luz); font-weight:600}
.confianza a{color:var(--haz)}
.datos-bloque{border-top:1px solid var(--borde); padding-top:22px; margin-top:26px}
.datos-bloque--origen{border-top-color:var(--verde)}
.datos{display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px 22px;
  margin:14px 0 0; font-size:.88rem}
.datos dt{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--luz-3); padding-top:3px}
.datos dd{margin:0; color:var(--luz-2); line-height:1.5}
.guia{border:1px solid var(--borde-vivo); background:var(--sala-2); color:var(--luz);
  max-width:min(92vw,760px); padding:34px}
.guia::backdrop{background:var(--velo-modal)}
.guia .cerrar{position:absolute; top:12px; right:16px; background:none; border:0;
  font-size:1.8rem; line-height:1; color:var(--luz-3); cursor:pointer}
.guia .cerrar:hover{color:var(--luz)}
.tabla-scroll{overflow-x:auto; margin:18px 0}
.tabla-simple{width:100%; border-collapse:collapse; font-size:.92rem}
.tabla-simple th,.tabla-simple td{padding:9px 13px; border-bottom:1px solid var(--borde);
  text-align:left}
.tabla-simple thead th{font-family:"IBM Plex Mono",monospace; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--luz-3)}
.tabla-simple td{color:var(--luz-2)}

/* ── carrito ───────────────────────────────────────────────────────── */
.tabla-carrito{width:100%; border-collapse:collapse; margin-top:8px}
.tabla-carrito td{padding:15px 10px; border-bottom:1px solid var(--borde);
  vertical-align:middle}
.cel-img{width:88px}
.cel-img img,.cel-img svg{border:1px solid var(--borde); background:var(--sala-2)}
.tabla-carrito .sub{display:block; font-size:.77rem; color:var(--luz-3); margin-top:3px}
.quitar{background:none; border:0; color:var(--luz-3); font-size:1.35rem; cursor:pointer;
  line-height:1; padding:4px 8px}
.quitar:hover{color:var(--rojo)}
.total{margin-top:30px; display:flex; flex-direction:column; gap:10px;
  align-items:flex-end; text-align:right}
.total p{margin:0; display:flex; gap:16px; align-items:baseline}

/* ── legales ───────────────────────────────────────────────────────── */
.legal{display:grid; grid-template-columns:220px minmax(0,68ch); gap:clamp(30px,5vw,64px);
  padding-top:44px}
.legal-nav{display:flex; flex-direction:column; gap:10px; font-size:.86rem;
  position:sticky; top:88px; align-self:start}
.legal-nav a{color:var(--luz-2)}
.legal-nav a:hover{color:var(--haz)}
.legal-nav a[aria-current]{color:var(--haz)}
.legal-texto h2{font-size:1.35rem; margin:2em 0 .5em}
.legal-texto h3{font-size:1.05rem; margin:1.6em 0 .4em}
.legal-texto p,.legal-texto li{color:var(--luz-2); font-size:.97rem; line-height:1.7}
.legal-texto ul{padding-left:1.25em; display:flex; flex-direction:column; gap:9px}
.modelo{border-left:2px solid var(--haz); padding-left:20px; margin:20px 0;
  color:var(--luz-3); font-size:.9rem}
.actualizado{margin-top:3em; padding-top:1.2em; border-top:1px solid var(--borde)}

/* ── revelado al hacer scroll ──────────────────────────────────────── */
.revela{opacity:0; transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1)}
.revela.visible{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  .revela{opacity:1; transform:none}
}
@media (max-width:900px){
  .pieza-detalle,.legal,.articulo{grid-template-columns:1fr}
  .articulo > *{grid-column:1}
  .galeria,.legal-nav{position:static}
  .legal-nav{flex-direction:row; flex-wrap:wrap; gap:16px}
}
@media (max-width:820px){
  .pie-int{grid-template-columns:minmax(0,1fr)}
  .boletin{max-width:none}
  .creditos li{grid-template-columns:74px 1fr; gap:14px}
  .creditos .fecha,.creditos .der{grid-column:2}
}
@media (max-width:560px){
  .cabecera-int{flex-wrap:wrap; padding-top:12px; padding-bottom:12px}
  .buscador{order:3; flex-basis:100%; max-width:none}
  .creditos li{grid-template-columns:1fr}
  .creditos .miniatura{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   La sala: efectos
   ═══════════════════════════════════════════════════════════════════════ */

/* ── telón de apertura ─────────────────────────────────────────────── */
.telon{position:fixed; inset:0; z-index:10000; pointer-events:none}
.telon i{position:absolute; left:0; right:0; height:50vh; background:var(--telon);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1)}
.telon i:first-child{top:0}
.telon i:last-child{bottom:0}
.telon.abre i:first-child{transform:translateY(-100%)}
.telon.abre i:last-child{transform:translateY(100%)}

/* ── viñeta y parpadeo de lámpara ──────────────────────────────────── */
.escenario{--lampara:1}
.escenario::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 42%, transparent 42%, var(--vineta));
  opacity:calc(2 - var(--lampara));
}
#vitrina{opacity:0}
#vitrina.encendida{opacity:var(--lampara)}

/* ── el título entra como un rótulo ────────────────────────────────── */
.rotulo-entra .palabra{
  display:inline-block; opacity:0; transform:translateY(.36em) scaleY(1.12);
  filter:blur(6px);
  animation:entra-palabra .8s cubic-bezier(.2,.7,.25,1) forwards;
}
@keyframes entra-palabra{
  to{opacity:1; transform:none; filter:blur(0)}
}

/* ── luz que sigue al cursor ───────────────────────────────────────── */
/* «con-foco» crea un contexto de posicionamiento, y sobre un carrusel eso
   impide que el contenedor recorte: las tarjetas sobresalían 23 px y
   arrastraban el documento. Se le pone el mismo recorte. */
.con-foco{position:relative}
/* El halo de «con-foco» se extiende 40 px por fuera con inset:-40px. Sobre
   una pista de carrusel eso desborda por la derecha y estira el documento.
   En el carrusel el halo no aporta nada —la tarjeta ya se destaca sola— así
   que se apaga ahí y sigue funcionando en el resto. */
.carrusel-pista.con-foco{max-width:100%; overflow-x:auto}
.carrusel-pista.con-foco::before{display:none}
.con-foco::before{
  content:""; position:absolute; inset:-40px -18px; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .45s;
  background:radial-gradient(340px circle at var(--fx,50%) var(--fy,50%),
             var(--foco), transparent 62%);
}
.con-foco:hover::before{opacity:1}
.con-foco > *{position:relative; z-index:1}

/* ── el fotograma se inclina y saca perforación ────────────────────── */
.fotograma{
  --gx:0deg; --gy:0deg;
  transform:perspective(900px) rotateY(var(--gx)) rotateX(var(--gy));
  transform-style:preserve-3d;
}
.fotograma:hover{transform:perspective(900px) rotateY(var(--gx)) rotateX(var(--gy))
  translateY(-4px)}
/* Perforación de película en el canto: aparece al pasar por encima */
.fotograma-img::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:13px; z-index:3;
  opacity:0; transition:opacity .3s;
  background:
    linear-gradient(90deg, rgba(var(--velo),.55), transparent),
    repeating-linear-gradient(180deg,
      transparent 0 9px, var(--filete-fuerte) 9px 15px, transparent 15px 24px);
  background-size:100% 100%, 7px 24px;
  background-repeat:no-repeat, repeat-y;
  background-position:0 0, 3px 0;
}
.fotograma:hover .fotograma-img::before{opacity:1}

/* ── cinta de avance ───────────────────────────────────────────────── */
.cinta{position:fixed; top:0; left:0; right:0; height:2px; z-index:200;
  pointer-events:none; background:transparent}
.cinta::after{
  content:""; display:block; height:100%; width:100%;
  transform:scaleX(var(--avance,0)); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--haz), var(--haz-fuerte));
  transition:transform .1s linear;
}

/* ── marquesina ────────────────────────────────────────────────────── */
.marquesina{
  overflow:hidden; border-bottom:1px solid var(--borde); background:var(--sala-2);
  padding:9px 0; white-space:nowrap;
}
.marquesina-pista{display:inline-flex; gap:0; animation:corre 42s linear infinite}
.marquesina span{
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--luz-3); padding:0 28px;
}
.marquesina span::after{content:"·"; margin-left:28px; color:var(--haz)}
.marquesina:hover .marquesina-pista{animation-play-state:paused}
@keyframes corre{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ── guiño: teclea RELIC y se enciende el proyector ────────────────── */
:root.proyector{--haz:var(--proyector); --haz-fuerte:var(--proyector-vivo)}
:root.proyector .escenario::before{
  background:
    radial-gradient(120% 90% at 16% -12%, rgba(127,212,255,.2), transparent 56%),
    linear-gradient(180deg, transparent 42%, var(--sala) 97%);
}
:root.proyector body::after{opacity:.09}

/* ── barra de desplazamiento como cinta ────────────────────────────── */
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:var(--sala-2)}
::-webkit-scrollbar-thumb{background:var(--borde-vivo); border:3px solid var(--sala-2)}
::-webkit-scrollbar-thumb:hover{background:var(--haz)}
::selection{background:var(--campo); color:var(--campo-tinta)}

@media (prefers-reduced-motion:reduce){
  .telon,.cinta{display:none}
  .rotulo-entra .palabra{opacity:1; transform:none; filter:none; animation:none}
  .marquesina-pista{animation:none}
  .fotograma{transform:none !important}
}

/* ── filtrador de la tienda ────────────────────────────────────────── */
.filtrador{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap;
  padding:0 0 30px; margin-bottom:34px; border-bottom:1px solid var(--borde)}
.filtrador label{display:flex; flex-direction:column; gap:7px; min-width:150px}
.filtrador--ancho{flex:1; min-width:230px}
.filtrador select{
  font:inherit; font-size:.88rem; padding:11px 34px 11px 13px; cursor:pointer;
  border:1px solid var(--borde-vivo); background:var(--sala-2); color:var(--luz);
  appearance:none; border-radius:2px; transition:.16s;
  background-image:linear-gradient(45deg,transparent 50%,var(--luz-3) 50%),
                   linear-gradient(135deg,var(--luz-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.filtrador select:hover{border-color:var(--haz)}
.filtrador select:focus{outline:none; border-color:var(--haz);
  box-shadow:0 0 0 3px var(--anillo)}
.cuenta-piezas{margin-left:auto; color:var(--luz-3); font-size:.8rem; padding-bottom:12px}

/* La fuente encabeza la tarjeta: es el título que la gente reconoce */
.fuente-alta{margin:0; font-family:"IBM Plex Mono",monospace; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--haz)}

/* ── mosaico de colecciones ────────────────────────────────────────── */
.mosaico{display:grid; gap:clamp(12px,1.4vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));
  grid-auto-rows:1fr}
.loza{position:relative; overflow:hidden; border:1px solid var(--borde);
  background:var(--sala-2); aspect-ratio:4/5; transition:border-color .22s}
.loza:hover{border-color:var(--haz)}
.loza--grande{grid-column:span 2; aspect-ratio:8/5}
@media (max-width:640px){.loza--grande{grid-column:span 1}}
.loza a{display:block; height:100%; position:relative}
.loza-img{position:absolute; inset:0}
.loza-img img{width:100%; height:100%; object-fit:cover;
  filter:grayscale(.4) contrast(1.14) brightness(.82);
  transition:transform .9s cubic-bezier(.2,.7,.3,1), filter .5s}
.loza:hover .loza-img img{transform:scale(1.07); filter:grayscale(0) contrast(1.16) brightness(.95)}
.loza-img::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--velo),.05) 22%, rgba(var(--velo),.55) 58%, rgba(var(--velo),.95))}
.loza-txt{position:absolute; inset:auto 0 0 0; padding:22px; display:flex;
  flex-direction:column; gap:8px; z-index:2}
.loza-alto{display:flex; gap:8px; flex-wrap:wrap}
.loza h3{font-size:clamp(1.15rem,1.9vw,1.6rem); color:var(--luz)}
.loza--grande h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.loza-autor{margin:0; font-size:.82rem; color:var(--luz-2)}
.loza .elementos{margin:2px 0 0; opacity:0; max-height:0; overflow:hidden;
  transition:opacity .35s, max-height .35s}
.loza:hover .elementos{opacity:1; max-height:4em}

/* Salvavidas: si por lo que sea el observador no dispara (sin JS, error, o un
   robot que no ejecuta scripts), a los 2 s todo se enseña igual. Una tarjeta
   invisible es peor que una sin animar. */
@keyframes rescate-revela{to{opacity:1; transform:none}}
.revela{animation:rescate-revela .01s linear 2s forwards}
.revela.visible{animation:none}

/* ═══════════════════════════════════════════════════════════════════════
   Calendario de estrenos
   ═══════════════════════════════════════════════════════════════════════ */
.encabezado--calendario{display:flex; justify-content:space-between;
  align-items:flex-end; gap:40px; flex-wrap:wrap}
.cuenta-grande{font-family:"Anton",sans-serif; font-size:clamp(3rem,7vw,6rem);
  line-height:.8; color:var(--haz); margin:0; opacity:.9}

/* ── esta semana ───────────────────────────────────────────────────── */
.semana-rejilla{display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,214px),1fr))}
.destacado{border:1px solid var(--borde); background:var(--sala-2); overflow:hidden;
  transition:border-color .22s, transform .3s cubic-bezier(.2,.7,.3,1)}
.destacado:hover{border-color:var(--haz); transform:translateY(-4px)}
.destacado-img{position:relative; aspect-ratio:2/3; overflow:hidden;
  background:var(--sala-3)}
.destacado-img img{width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1), filter .4s;
  filter:grayscale(.3) contrast(1.06)}
.destacado:hover .destacado-img img{transform:scale(1.06); filter:grayscale(0)}
.destacado-img::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--velo),.1) 55%, rgba(var(--velo),.9))}
.dia-sello{position:absolute; top:12px; left:12px; z-index:2; display:grid;
  place-items:center; width:46px; padding:6px 0; background:var(--campo);
  color:var(--campo-tinta); line-height:1}
.dia-sello b{font-family:"Anton",sans-serif; font-size:1.35rem}
.dia-sello i{font-family:"IBM Plex Mono",monospace; font-style:normal;
  font-size:.56rem; letter-spacing:.14em}
.destacado-txt{padding:14px 16px 18px; display:flex; flex-direction:column; gap:6px}
.destacado-txt h3{font-size:1.02rem}

/* ── barra de filtros ──────────────────────────────────────────────── */
.barra-calendario{display:flex; gap:20px; align-items:center; flex-wrap:wrap;
  justify-content:space-between; padding:26px 0; margin-bottom:14px;
  border-top:1px solid var(--borde); border-bottom:1px solid var(--borde);
  position:sticky; top:68px; z-index:40;
  background:color-mix(in srgb, var(--sala) 94%, transparent);
  backdrop-filter:blur(10px)}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chips a{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; padding:8px 15px; border:1px solid var(--borde-vivo);
  color:var(--luz-2); transition:.16s}
.chips a:hover{border-color:var(--haz); color:var(--haz)}
.chips a[aria-current]{background:var(--luz); border-color:var(--luz); color:var(--sala)}
.salto-mes{display:flex; align-items:center; gap:10px}
.salto-mes select{font:inherit; font-family:"IBM Plex Mono",monospace; font-size:.78rem;
  padding:9px 30px 9px 12px; border:1px solid var(--borde-vivo);
  background:var(--sala-2); color:var(--luz); appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--luz-3) 50%),
                   linear-gradient(135deg,var(--luz-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.salto-mes select:hover{border-color:var(--haz)}

/* ── el mes ────────────────────────────────────────────────────────── */
.mes{margin-bottom:var(--paso)}
.mes-cab{display:flex; align-items:baseline; gap:16px; padding:34px 0 16px;
  position:sticky; top:130px; z-index:30;
  background:linear-gradient(180deg, var(--sala) 72%, transparent)}
.mes-cab span{font-size:clamp(1.5rem,3vw,2.4rem)}
.mes-cab i{font-family:"IBM Plex Mono",monospace; font-style:normal;
  font-size:.72rem; color:var(--luz-3); letter-spacing:.14em}
.mes-cab::after{content:""; flex:1; height:1px; background:var(--borde)}

.tira-estrenos{list-style:none; margin:0; padding:0}
.linea{display:grid; grid-template-columns:48px 64px 1fr auto; gap:20px;
  align-items:center; padding:14px 8px; border-bottom:1px solid var(--borde);
  transition:background .2s, padding-left .2s}
.linea:hover{background:var(--sala-2); padding-left:16px}
.linea--hoy{background:linear-gradient(90deg, rgba(232,163,61,.10), transparent 60%)}
.linea--hoy::before{content:"HOY"; position:absolute; margin-left:-46px;
  font-family:"IBM Plex Mono",monospace; font-size:.52rem; letter-spacing:.16em;
  color:var(--haz)}
.linea-dia{display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--luz-3)}
.linea-dia b{font-family:"Anton",sans-serif; font-size:1.32rem; color:var(--luz-2);
  line-height:1}
.linea-dia i{font-style:normal; font-family:"IBM Plex Mono",monospace;
  font-size:.58rem; letter-spacing:.1em}
.linea:hover .linea-dia b{color:var(--haz)}
.linea-img{width:64px; aspect-ratio:3/4; overflow:hidden; background:var(--sala-3);
  border:1px solid var(--borde); display:block}
.linea-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s;
  filter:grayscale(.35)}
.linea:hover .linea-img img{transform:scale(1.08); filter:grayscale(0)}
.linea-txt h3{font-family:"Archivo",sans-serif; text-transform:none;
  font-size:1.05rem; font-weight:500; line-height:1.25; letter-spacing:0}
.linea-txt h3 a:hover{color:var(--haz)}
.linea-orig{margin:2px 0 0; font-size:.78rem; color:var(--luz-3)}
.linea-meta{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:6px 0 0;
  font-size:.78rem; color:var(--luz-3)}
.linea-meta .nota{color:var(--haz)}
.linea .procedencia{margin-top:8px; padding-top:8px; font-size:.79rem;
  max-width:62ch}
.linea .procedencia .rotulo{display:inline; margin-right:8px}
.linea-der{display:flex; gap:8px; align-items:center}

@media (max-width:700px){
  .linea{grid-template-columns:44px 1fr; gap:14px}
  .linea-img{display:none}
  .linea-der{grid-column:2}
  .barra-calendario{position:static}
  .mes-cab{position:static}
}

/* ═══════════════════════════════════════════════════════════════════════
   V2 — profundidad
   Lo que separa "fondo oscuro con cajas" de una pieza con cuerpo: capas de
   sombra, luz que se derrama, elementos que se pisan y paralaje real.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── sistema de sombra en capas ──────────────────────────────────────
   Los tres escalones viven en tema.css: en negro la sombra es negra, sobre
   papel una sombra negra ensucia y va teñida del marrón de la casa. */
.fotograma,.destacado,.loza{box-shadow:var(--sombra-1)}
.fotograma:hover,.destacado:hover{box-shadow:var(--sombra-3), var(--brillo)}
.loza:hover{box-shadow:var(--sombra-3)}

/* La luz se derrama por debajo de la tarjeta al encenderse */
.fotograma::after,.destacado::after{
  content:""; position:absolute; left:12%; right:12%; bottom:-18px; height:34px;
  z-index:-1; opacity:0; transition:opacity .35s; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, rgba(232,163,61,.4), transparent 72%);
  filter:blur(14px);
}
.fotograma:hover::after,.destacado:hover::after{opacity:1}

/* ── paralaje: el héroe se hunde al bajar ──────────────────────────── */
.escenario{will-change:transform}
.escenario-int{will-change:transform}

/* ── títulos que rompen la retícula ────────────────────────────────── */
/* El título fantasma (content:attr(data-eco), 158,72 px y nowrap) mide
   1432,58 px y arranca en x=30,48: llega a 1463 y desbordaba la portada 23 px.
   Se recorta AQUÍ, en su contenedor. Tres intentos anteriores fallaron por
   buscarlo en el carrusel: un pseudo-elemento no sale en querySelectorAll('*'),
   así que la búsqueda por rect nunca lo iba a encontrar.
   `clip` y no `hidden`: con `hidden` el overflow-y pasa a `auto`, el titular se
   vuelve contenedor de scroll y se come el sangrado hacia arriba (top:-.42em). */
.franja > .cabeza-seccion{overflow-x:clip}
.franja > .cabeza-seccion h2{position:relative}
.franja > .cabeza-seccion h2::before{
  content:attr(data-eco); position:absolute; left:-.06em; top:-.42em; z-index:-1;
  font-size:2.1em; line-height:1; color:transparent; pointer-events:none;
  -webkit-text-stroke:1px var(--eco); white-space:nowrap;
}

/* ── separador de bobina ───────────────────────────────────────────── */
.bobina{height:26px; width:100vw; margin-left:calc(50% - 50vw); position:relative;
  background:var(--sala-2); border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde); overflow:hidden}
.bobina::before{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    transparent 0 16px, var(--filete) 16px 26px, transparent 26px 42px);
  animation:pasa-bobina 3.4s linear infinite}
@keyframes pasa-bobina{to{transform:translateX(42px)}}

/* ── revelado escalonado ───────────────────────────────────────────── */
.rejilla .revela:nth-child(1){transition-delay:0s}
.rejilla .revela:nth-child(2){transition-delay:.06s}
.rejilla .revela:nth-child(3){transition-delay:.12s}
.rejilla .revela:nth-child(4){transition-delay:.18s}
.rejilla .revela:nth-child(5){transition-delay:.24s}
.rejilla .revela:nth-child(n+6){transition-delay:.3s}

/* ── la cabecera se encoge al bajar ────────────────────────────────── */
.cabecera{transition:min-height .3s, box-shadow .3s}
body.rodando .cabecera{box-shadow:var(--sombra-2)}
body.rodando .cabecera-int{min-height:56px}

/* ── botones con brillo que barre ──────────────────────────────────── */
.boton{position:relative; overflow:hidden}
.boton::before{content:""; position:absolute; inset:0 auto 0 -60%; width:45%;
  background:linear-gradient(100deg, transparent, var(--barrido), transparent);
  transform:skewX(-18deg); transition:left .55s cubic-bezier(.2,.7,.3,1)}
.boton:hover::before{left:120%}

@media (prefers-reduced-motion:reduce){
  .bobina::before{animation:none}
  .boton::before{display:none}
  .fotograma::after,.destacado::after{display:none}
}

/* ── el carrito como panel deslizante ──────────────────────────────── */
.boton-carrito{position:relative; display:inline-flex; align-items:center; gap:2px;
  background:none; border:0; color:var(--luz-2); cursor:pointer; padding:6px 2px;
  transition:color .16s}
.boton-carrito:hover{color:var(--haz)}
.boton-carrito:focus-visible{outline:2px solid var(--haz); outline-offset:4px}
.boton-carrito .globo{position:absolute; top:-2px; right:-9px; margin:0}

.panel{position:fixed; inset:0; z-index:400}
.panel-fondo{position:absolute; inset:0; background:var(--velo-modal); opacity:0;
  transition:opacity .3s; backdrop-filter:blur(3px)}
.panel.abierto .panel-fondo{opacity:1}
.panel-caja{position:absolute; top:0; right:0; bottom:0; width:min(94vw,420px);
  background:var(--sala-2); border-left:1px solid var(--borde-vivo);
  box-shadow:var(--sombra-3); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.8,.25,1)}
.panel.abierto .panel-caja{transform:none}
.panel-cab{display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid var(--borde)}
.panel-cab h2{font-size:1.15rem}
.panel-cerrar{background:none; border:0; color:var(--luz-3); font-size:1.7rem;
  line-height:1; cursor:pointer; padding:0 4px}
.panel-cerrar:hover{color:var(--luz)}
.panel-cuerpo{flex:1; overflow-y:auto; padding:8px 0}
.panel-vacio{padding:56px 24px; text-align:center; color:var(--luz-3); line-height:1.9}
.panel-vacio a{color:var(--haz)}
.panel-lineas{list-style:none; margin:0; padding:0}
.panel-lineas li{display:grid; grid-template-columns:66px 1fr auto; gap:14px;
  align-items:center; padding:15px 24px; border-bottom:1px solid var(--borde)}
.panel-img img{border:1px solid var(--borde); background:var(--sala-3)}
.panel-txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.panel-txt a{font-weight:500; font-size:.94rem}
.panel-txt a:hover{color:var(--haz)}
.panel-txt em{font-style:normal; font-size:.76rem; color:var(--luz-3);
  text-transform:capitalize}
.panel-txt b{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:.82rem;
  color:var(--haz)}
.panel-quitar button{background:none; border:0; color:var(--luz-3); font-size:1.3rem;
  cursor:pointer; line-height:1; padding:4px}
.panel-quitar button:hover{color:var(--rojo)}
.panel-total{padding:22px 24px; border-top:1px solid var(--borde-vivo);
  background:var(--sala-3)}
.panel-total p{display:flex; justify-content:space-between; align-items:baseline;
  margin:0 0 10px}

/* ── colecciones: género y títulos ─────────────────────────────────── */
.etiqueta-genero{align-self:flex-start; font-family:"IBM Plex Mono",monospace;
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--campo-tinta); background:var(--campo); padding:3px 9px}
.loza-tambien{margin:2px 0 0; font-size:.8rem; color:var(--luz-2)}
.loza-fuente{margin:8px 0 0; font-size:.76rem; color:var(--luz-3); line-height:1.4}
.loza-fuente .rotulo{display:block; font-size:.54rem; color:var(--verde);
  margin-bottom:2px}
.loza-alto{margin-top:10px}
.chips i{font-style:normal; opacity:.55; margin-left:5px; font-size:.9em}
.busca-col input{font:inherit; font-size:.84rem; padding:9px 14px; min-width:240px;
  border:1px solid var(--borde-vivo); background:var(--sala-2); color:var(--luz)}
.busca-col input:focus{outline:none; border-color:var(--haz);
  box-shadow:0 0 0 3px var(--anillo)}
@media (prefers-reduced-motion:reduce){
  .panel-caja,.panel-fondo{transition:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   V2 — rango: la sala es negra, el archivo es de papel
   Un sitio oscuro que nunca va a claro no tiene rango: tiene un tono.
   ═══════════════════════════════════════════════════════════════════════ */
.papel{
  background:var(--losa); color:var(--losa-tinta);
  width:100vw; margin-left:calc(50% - 50vw);
  padding:clamp(56px,7vw,110px) 0;
}
.papel-int{max-width:1440px; margin:0 auto; padding:0 clamp(18px,3vw,40px)}
.papel h1,.papel h2,.papel h3{color:var(--losa-tinta)}
.papel p{color:var(--losa-texto)}
.papel .cartela,.papel .rotulo{color:var(--losa-haz)}
.papel .cartela::before{background:var(--losa-haz)}
.papel a{color:var(--losa-haz)}
.papel .museo-pieza img{border-color:rgba(10,10,11,.20); filter:none}
.papel .museo-pieza figcaption{color:var(--losa-apunte)}
.papel .museo-pieza figcaption strong{color:var(--losa-tinta)}
.papel .lema-grande{color:var(--losa-tinta)}

/* ── el ámbar como CAMPO, no como texto de 0,6rem ──────────────────── */
.campo-ambar{background:var(--campo); color:var(--campo-tinta)}
.campo-ambar .rotulo,.campo-ambar .cartela{color:var(--campo-apunte)}
.campo-ambar .cartela::before{background:var(--campo-apunte)}
.campo-ambar h2,.campo-ambar h3,.campo-ambar p{color:var(--campo-tinta)}

/* El precio deja de ser texto suelto: es un bloque */
.precio--bloque{display:inline-block; background:var(--campo); color:var(--campo-tinta);
  font-family:"Anton",sans-serif; font-size:clamp(1.5rem,2.4vw,2.1rem);
  padding:9px 18px; line-height:1}
.precio--bloque small{font-family:"IBM Plex Mono",monospace; font-size:.42em;
  opacity:.7; margin-left:8px; letter-spacing:.06em}

/* El chip activo en ámbar, no en blanco */
.chips a[aria-current]{background:var(--campo); border-color:var(--campo); color:var(--campo-tinta)}

/* El boletín del pie: campo ámbar entero a sangre */
.pie .boletin{background:var(--campo); color:var(--campo-tinta); padding:26px;
  max-width:none; margin-top:28px}
.pie .boletin .rotulo{color:var(--campo-apunte)}
.pie .boletin .letra-chica{color:var(--campo-apunte)}
.pie .boletin input{border-color:rgba(var(--velo),.28); background:var(--campo-hueco);
  color:var(--campo-tinta)}
.pie .boletin button{background:var(--campo-tinta); border-color:var(--campo-tinta);
  color:var(--campo)}
.pie .boletin button:hover{background:var(--losa-tinta); border-color:var(--losa-tinta)}

/* ── el escalón tipográfico que faltaba ────────────────────────────── */
.t-medio{font-family:"Anton",sans-serif; text-transform:uppercase; line-height:.95;
  font-size:clamp(1.9rem,3vw,2.8rem); letter-spacing:-.01em}

/* ── efectos que estaban por debajo del umbral de ver ──────────────── */
body::after{opacity:.085; mix-blend-mode:soft-light}
.franja > .cabeza-seccion h2::before{
  -webkit-text-stroke:1px var(--eco); font-size:3.2em;
}
.bobina{height:64px}
.bobina::before{background:repeating-linear-gradient(90deg,
  transparent 0 22px, var(--filete) 22px 36px, transparent 36px 58px);
  animation-duration:4.6s}
@keyframes pasa-bobina{to{transform:translateX(58px)}}

/* La marquesina de seis mensajes en bucle era lo más cutre del sitio:
   una sola línea fija con el dato duro. */
.marquesina{padding:11px 0; text-align:center}
.marquesina-pista{animation:none; display:block}
.marquesina span:nth-child(n+4){display:none}

/* Y fuera la inclinación 3D y la perforación: sólo existen con ratón */
.fotograma{transform:none !important}
.fotograma-img::before{display:none}

/* ═══════════════════════════════════════════════════════════════════════
   La ficha vende. Fondo claro para que la prenda se vea, y una barra fija
   con el precio y el botón: comprar no puede exigir volver arriba.
   ═══════════════════════════════════════════════════════════════════════ */
.galeria-principal{background:var(--sala-2); border-color:var(--borde); aspect-ratio:5/6;
  display:grid; place-items:center; padding:22px}
.galeria-principal img{width:100%; height:100%; object-fit:contain}
.tira{background:var(--sala-2); border-color:var(--borde); width:70px; aspect-ratio:5/6;
  display:grid; place-items:center; padding:4px}
.tira img{object-fit:contain}
.tira--fuente{background:var(--sala-3); border-color:var(--borde)}
.tira--fuente img{object-fit:cover; padding:0}
.pie-galeria{margin-top:4px}

.barra-compra{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:color-mix(in srgb, var(--sala-2) 96%, transparent);
  backdrop-filter:blur(14px); border-top:1px solid var(--borde-vivo);
  transform:translateY(110%); transition:transform .32s cubic-bezier(.2,.8,.25,1);
}
.barra-compra.visible{transform:none}
.barra-compra-int{max-width:1440px; margin:0 auto; padding:12px clamp(18px,3vw,40px);
  display:flex; align-items:center; gap:18px}
.barra-pieza{display:flex; align-items:center; gap:12px; min-width:0; flex:1}
.barra-pieza img{background:var(--sala-3); border:1px solid var(--borde); flex:none}
.barra-pieza b{font-weight:500; font-size:.94rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.barra-precio{font-family:"Anton",sans-serif; font-size:1.5rem; color:var(--haz);
  flex:none}
.barra-compra .boton{flex:none; padding:14px 26px}
@media (max-width:560px){
  .barra-pieza b{display:none}
  .barra-compra .boton{flex:1; justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════════
   Mecánicas robadas de sitios premiados, con sus valores medidos
   ═══════════════════════════════════════════════════════════════════════ */

/* darkroom.au: 16px de hueco entre columnas pero SÓLO 2px entre filas. El
   canalón vertical casi nulo funde las filas en una losa, y la retícula deja
   de leerse como tarjetas sueltas flotando. */
.rejilla{column-gap:clamp(13px,1.5vw,18px); row-gap:3px}

/* ylem.watch: las secciones no se separan con un filete de 1px, se separan
   alternando dos negros a un pelo de distancia. Un borde a 1,7:1 no separa
   nada; un cambio de superficie sí. */
.franja{border-bottom:0; padding:var(--paso) 0}
.franja:nth-of-type(even){
  background:var(--banda); width:100vw; margin-left:calc(50% - 50vw);
  padding-left:clamp(18px,3vw,40px); padding-right:clamp(18px,3vw,40px);
}
.franja:nth-of-type(even) > *{max-width:1440px; margin-inline:auto}

/* thirdmanrecords: intercalar un bloque de color dentro del negro hace que la
   oscuridad se lea como un capítulo y no como papel pintado. */
.franja--ambar{background:var(--campo); color:var(--campo-tinta);
  width:100vw; margin-left:calc(50% - 50vw);
  padding:var(--paso) clamp(18px,3vw,40px)}
.franja--ambar h2,.franja--ambar h3,.franja--ambar p{color:var(--campo-tinta)}
.franja--ambar .cartela{color:var(--campo-apunte)}
.franja--ambar .cartela::before{background:var(--campo-apunte)}
.franja--ambar > *{max-width:1440px; margin-inline:auto}

/* ironhill.au / krakenindustries: el display grande va con interlineado 1,0 o
   menos y tracking NEGATIVO — a 260px usan −3%. A tamaño de titular, el
   espaciado por defecto abre demasiado y se lee blando. */
h1{line-height:.88; letter-spacing:-.022em}
h2{line-height:.92; letter-spacing:-.016em}
.contador .n{line-height:.84; letter-spacing:-.03em}
.cuenta-grande{line-height:.8; letter-spacing:-.035em}

/* Brain Dead: una fila de anchuras irregulares antes de volver a la regular.
   Rompe el papel pintado sin necesidad de contenido especial. */
.rejilla > *:nth-child(7){grid-column:span 2}
@media (min-width:1101px){
  .rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rejilla > *{grid-column:span 1}
  .rejilla > *:nth-child(7){grid-column:span 2}
  .rejilla > *:nth-child(7) .fotograma-img{aspect-ratio:16/10}
  .rejilla > *:nth-child(7) h3{font-size:clamp(1.6rem,2.2vw,2.3rem)}
}

/* ── la estampa a sangre: lo único material que tenemos, a tamaño real ── */
.estampa-sangre{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  min-height:min(84vh,760px); display:flex; align-items:flex-end;
  overflow:hidden; border-block:1px solid var(--borde);
}
.estampa-sangre img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 34%; filter:grayscale(.18) contrast(1.05);
}
.estampa-sangre::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--velo),.28) 0%, rgba(var(--velo),.05) 34%,
             rgba(var(--velo),.86) 82%, var(--velo-fin) 100%);
}
.estampa-txt{position:relative; z-index:2; max-width:1440px; margin:0 auto;
  padding:0 clamp(18px,3vw,40px) clamp(44px,6vw,84px); width:100%}
.estampa-txt h2{font-size:clamp(2.6rem,7vw,5.6rem); margin:.2em 0 .4em; max-width:16ch}
.estampa-pie{font-family:"IBM Plex Mono",monospace; font-size:.78rem;
  color:var(--luz-2); line-height:1.6; margin:0 0 1.8em; max-width:52ch}

/* ── la tienda por película ─────────────────────────────────────────── */
/* El estante: una película con sus piezas debajo. El cartel a la izquierda
   hace de ancla — es lo que el cliente reconoce, y sin él la página vuelve a
   ser una lista de nombres de diseño que no le dicen nada. */
.chips--vista{margin:0 0 clamp(22px,3vw,34px)}
.estante{padding:clamp(26px,3.4vw,44px) 0; border-bottom:1px solid var(--borde)}
.estante:last-of-type{border-bottom:0}
.estante-cab{display:flex; gap:clamp(14px,2vw,26px); align-items:flex-end;
  margin-bottom:clamp(16px,2vw,26px)}
.estante-cartel{flex:none; width:clamp(78px,9vw,122px); aspect-ratio:3/4;
  overflow:hidden; background:var(--sala-3); border:1px solid var(--borde);
  display:block}
.estante-cartel img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.estante-cartel:hover img{transform:scale(1.05)}
.estante-txt{min-width:0}
.estante-txt h2{margin:.14em 0 .3em; font-size:clamp(1.35rem,2.6vw,2.1rem)}
.estante-txt h2 a:hover{color:var(--haz)}
.estante-txt .letra-chica{margin:0; color:var(--luz-3)}
@media (max-width:560px){
  .estante-cab{align-items:flex-start}
  .estante-txt h2{font-size:1.24rem}
}

/* ── calendario de estrenos ─────────────────────────────────────────── */
.calendario{margin:0 0 var(--paso); border:1px solid var(--borde);
  background:var(--sala-2)}
.cal-cab{display:flex; align-items:center; gap:16px; padding:16px clamp(12px,2vw,22px);
  border-bottom:1px solid var(--borde)}
.cal-titulo{flex:1; text-align:center}
.cal-titulo h2{font-size:clamp(1.3rem,2.4vw,1.9rem)}
.cal-titulo h2 span{color:var(--luz-3); font-size:.62em}
.cal-titulo p{margin:5px 0 0; color:var(--luz-3)}
.cal-mover{flex:none; width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--borde-vivo); color:var(--luz-2); font-size:1.1rem;
  transition:.16s}
.cal-mover:hover{border-color:var(--haz); color:var(--haz)}

.cal-rejilla{display:grid; grid-template-columns:repeat(7,1fr);
  gap:1px; background:var(--borde); border-top:1px solid var(--borde)}
.cal-dow{background:var(--sala-3); padding:9px 6px; text-align:center;
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.18em;
  color:var(--luz-3)}
.cal-hueco{background:var(--sala)}
.cal-dia{background:var(--sala); min-height:clamp(64px,9vw,116px);
  padding:6px 7px; display:flex; flex-direction:column; gap:4px;
  transition:background .18s}
.cal-dia--lleno{background:var(--sala-2)}
.cal-dia--lleno:hover{background:var(--sala-3)}
.cal-dia--hoy{box-shadow:inset 0 0 0 2px var(--haz)}
.cal-num{font-size:.72rem; color:var(--luz-3)}
.cal-dia--hoy .cal-num{color:var(--haz); font-weight:600}
.cal-lista{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:3px; min-width:0}
.cal-lista li{font-size:.66rem; line-height:1.25; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; color:var(--luz-2)}
.cal-lista a{display:flex; align-items:center; gap:5px; min-width:0}
.cal-lista a:hover{color:var(--haz)}
.cal-mas{color:var(--luz-3); font-family:"IBM Plex Mono",monospace; font-size:.6rem}
.cal-punto{flex:none; width:6px; height:6px; border-radius:50%;
  display:inline-block; background:var(--luz-3)}
.cal-punto--pelicula{background:var(--haz)}
.cal-punto--serie{background:var(--verde)}
.cal-punto--saga{background:var(--rojo)}
.cal-leyenda{display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  padding:12px clamp(12px,2vw,22px); margin:0; border-top:1px solid var(--borde);
  color:var(--luz-3)}
.cal-leyenda .cal-punto{margin-right:2px}

/* En el móvil no caben tres títulos por celda: se deja el número y un punto
   por estreno, que es lo que de verdad se lee de un vistazo. */
@media (max-width:700px){
  .cal-dia{min-height:52px; padding:4px}
  .cal-lista li{font-size:0; gap:0}
  .cal-lista{flex-direction:row; flex-wrap:wrap; gap:3px}
  .cal-lista a{gap:0}
  .cal-mas{display:none}
}

/* ── las láminas de museo dentro de un artículo ─────────────────────── */
.lamina-museo{margin:0; background:var(--sala-2); border:1px solid var(--borde)}
.lamina-museo img{width:100%; aspect-ratio:4/3; object-fit:cover}
.lamina-museo figcaption{padding:11px 13px; color:var(--luz-3); line-height:1.45}
.lamina-museo figcaption b{color:var(--luz-2); font-weight:600}
.lamina-museo figcaption a{color:var(--haz)}

/* ── ficha técnica de una obra ──────────────────────────────────────── */
.ficha-tecnica{display:grid; grid-template-columns:auto 1fr; gap:6px 18px;
  margin:22px 0 0; font-size:.86rem}
.ficha-tecnica dt{font-family:"IBM Plex Mono",monospace; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--luz-3);
  padding-top:4px}
.ficha-tecnica dd{margin:0; color:var(--luz-2)}
/* ── cabecera de una ficha de cine ──────────────────────────────────── */
/* El cartel es vertical (2:3). Sin ancho máximo se estiraba a toda la
   columna y la cabecera medía 2.700 px de alto: el tráiler quedaba a dos
   pantallas de scroll y no lo veía nadie. Ahora el cartel manda el tamaño,
   no al revés. */
.obra-cab{display:grid; gap:clamp(20px,3vw,40px); align-items:start;
  grid-template-columns:1fr; margin-bottom:clamp(24px,3vw,40px)}
@media (min-width:760px){
  .obra-cab{grid-template-columns:minmax(190px,258px) minmax(0,1fr)}
}
.obra-cab-img{max-width:258px; width:100%}
.obra-cab-img img{width:100%; height:auto; aspect-ratio:2/3; object-fit:cover;
  border:1px solid var(--borde); box-shadow:var(--caja); display:block}
.obra-cab h1{font-size:clamp(1.9rem,4.4vw,3.4rem); margin:.12em 0 .3em}
.obra-meta{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;
  margin-bottom:16px; font-size:.86rem; color:var(--luz-2)}
.obra-cab .sinopsis{max-width:62ch; color:var(--luz-2); line-height:1.62}
@media (max-width:759px){
  /* En el móvil el cartel a media columna y el texto debajo: a pantalla
     completa ocuparía el primer scroll entero él solo. */
  .obra-cab-img{max-width:172px}
}
@media (max-width:560px){.ficha-tecnica{grid-template-columns:1fr; gap:2px 0}
  .ficha-tecnica dt{padding-top:10px}}

/* ── guardar la cesta ───────────────────────────────────────────────── */
.guardar-cesta{margin:var(--paso) 0 0; padding:clamp(20px,3vw,32px);
  border:1px solid var(--borde); background:var(--sala-2); max-width:560px}
.guardar-cesta .rotulo{display:block; margin-bottom:12px; color:var(--luz-2)}
.guardar-cesta .letra-chica{margin:10px 0 0; color:var(--luz-3)}

/* Atribución exigida por la licencia de TheTVDB. Discreta, pero visible:
   ocultarla sería incumplir el permiso que hace gratis el uso comercial. */
.atribucion-cartel{margin-top:6px; color:var(--luz-3)}
.atribucion-cartel a{color:var(--haz)}

/* ── tráiler ────────────────────────────────────────────────────────── */
/* El tráiler a todo el ancho son 765 px de alto en escritorio: el mismo error
   que tenían los carteles antes de encajarlos. Un vídeo de 16:9 no necesita
   más de 720 px de ancho para verse bien, y así la ficha no se parte en dos. */
.trailer-caja{margin:clamp(26px,3.4vw,42px) 0; max-width:720px}
.trailer-marco{position:relative; width:100%; aspect-ratio:16/9;
  background:var(--sala-3); border:1px solid var(--borde); overflow:hidden}
.trailer-marco iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.trailer-pie{margin:9px 0 0; color:var(--luz-3)}

/* ── cuenta ─────────────────────────────────────────────────────────── */
.cuenta-doble{display:grid; gap:clamp(18px,2.6vw,32px); align-items:start;
  grid-template-columns:1fr; max-width:900px}
@media (min-width:760px){.cuenta-doble{grid-template-columns:1fr 1fr}}
.cuenta-caja{border:1px solid var(--borde); background:var(--sala-2);
  padding:clamp(20px,3vw,32px)}
.cuenta-caja h2{font-size:clamp(1.1rem,2vw,1.5rem); margin-bottom:18px}
.formulario{display:flex; flex-direction:column; gap:14px}
.formulario label{display:flex; flex-direction:column; gap:6px}
.formulario input,.formulario select{font:inherit; font-size:.95rem;
  padding:12px 14px; border:1px solid var(--borde); background:var(--sala-3);
  color:var(--luz); border-radius:2px}
.formulario input:focus,.formulario select:focus{outline:none;
  border-color:var(--haz); box-shadow:0 0 0 3px var(--anillo)}
.formulario-fila{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.nav-cuenta{white-space:nowrap}

/* Placa para las fichas sin cartel: mejor una inicial que un hueco. */
.cartel-vacio{aspect-ratio:2/3; width:100%; display:grid; place-items:center;
  gap:8px; background:linear-gradient(160deg,var(--sala-3),var(--sala-2));
  border:1px solid var(--borde); text-align:center}
.cartel-vacio span{font-family:"Anton",sans-serif; font-size:clamp(2rem,5vw,3.4rem);
  color:var(--borde-vivo); line-height:1}
.cartel-vacio i{font-family:"IBM Plex Mono",monospace; font-style:normal;
  font-size:.7rem; letter-spacing:.2em; color:var(--luz-3)}

/* ── recorte de obras de arte ───────────────────────────────────────── */
/* `object-fit:cover` centrado destrozaba los cuadros: la «Penélope» de
   Marchal salía recortada a la altura del vestido, sin cara. En pintura y
   grabado el asunto está casi siempre en el tercio superior, así que se
   encuadra ahí. Es una regla de composición, no un capricho. */
.loza-img img,
.estampa-sangre img,
.lamina-museo img{object-position:center 28%}
/* Los carteles de cine sí van centrados: el diseño ya está pensado para el
   marco entero y moverlo corta el título. */
.obra-cab-img img,
.estante-cartel img,
.fotograma-img img[src*="/static/obra/"]{object-position:center center}

/* ── catálogo de cine ───────────────────────────────────────────────── */
.rejilla-cine{list-style:none; margin:0; padding:0; display:grid;
  gap:clamp(14px,2vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,158px),1fr))}
.tarjeta-cine h3{font-size:.92rem; line-height:1.14; margin:10px 0 3px}
.tarjeta-cine .letra-chica{margin:0; color:var(--luz-3)}
.tarjeta-cine-img{aspect-ratio:2/3; overflow:hidden; background:var(--sala-3);
  border:1px solid var(--borde); transition:border-color .2s, transform .3s}
.tarjeta-cine-img img{width:100%; height:100%; object-fit:cover}
.tarjeta-cine a:hover .tarjeta-cine-img{border-color:var(--haz);
  transform:translateY(-3px)}
.tarjeta-cine a:hover h3{color:var(--haz)}
.tarjeta-cine .cartel-vacio{height:100%; border:0}

.barra-orden{display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  margin:0 0 clamp(20px,3vw,30px); padding-bottom:14px;
  border-bottom:1px solid var(--borde); font-size:.8rem}
.barra-orden a{color:var(--luz-3)}
.barra-orden a:hover{color:var(--luz)}
.barra-orden a[aria-current]{color:var(--haz)}

.paginas{display:flex; gap:22px; align-items:center; justify-content:center;
  margin:clamp(30px,4vw,52px) 0 0; font-size:.85rem}
.paginas a{color:var(--haz)}
.paginas .dato{color:var(--luz-3)}

/* ── cajas para cartel de cine ──────────────────────────────────────── */
/* Casi todas las imágenes del sitio pasaron a ser carteles verticales (2:3)
   mientras las cajas seguían siendo apaisadas (16:9). Un cartel de 680x1000
   dentro de una caja de 325x183 pierde el 70 % de la imagen: se ve un trozo
   de cielo o una pierna. La caja se adapta a lo que enseña, no al revés. */
.fotograma-img--cartel{aspect-ratio:2/3}
.fotograma-img--cartel img{width:100%; height:100%; object-fit:cover;
  object-position:center center}
/* En el carrusel se dejan algo más bajas para que quepan varias a la vez
   sin que la fila se vuelva una muralla. */
.carrusel-pista .fotograma-img--cartel{aspect-ratio:3/4}
@media (max-width:560px){.fotograma-img--cartel{aspect-ratio:3/4}}

/* ── cabecera de artículo con cartel ────────────────────────────────── */
.articulo-cab--cartel{display:grid; gap:clamp(20px,3vw,38px); align-items:end;
  grid-template-columns:1fr}
@media (min-width:760px){
  .articulo-cab--cartel{grid-template-columns:minmax(150px,210px) minmax(0,1fr)}
}
.articulo-cartel{display:block; max-width:210px}
.articulo-cartel img{width:100%; height:auto; aspect-ratio:2/3; object-fit:cover;
  border:1px solid var(--borde); box-shadow:var(--caja)}
@media (max-width:759px){.articulo-cartel{max-width:132px}}

/* ── tope de tamaño para cualquier imagen suelta ────────────────────── */
/* Red de seguridad: si en alguna plantilla se cuela una imagen sin caja con
   proporción, que no se coma la pantalla. Ha pasado ya con el cartel de la
   ficha (2.700 px de alto) y con el tráiler. */
.articulo img:not(.articulo-cartel img),
.estampa-txt img{max-width:100%; height:auto}
.articulo img{max-height:70vh; width:auto; margin:1.4em auto; display:block}
.lamina-museo img{max-height:420px}

/* Miniatura del buscador: los carteles son verticales (2:3). En la caja
   apaisada de antes se veía una franja del cartel y no se reconocía nada. */
.sug-lamina{flex:none; width:40px}
.sug-lamina img{width:40px; height:60px; object-fit:cover;
  border:1px solid var(--borde); display:block}

/* El titular en el pie: presente en todas las páginas pero sin competir con
   la navegación. Se lee si se busca, no estorba si no. */
.pie-titular{margin-top:.9rem;font-size:.78rem;opacity:.55;line-height:1.5}
.pie-titular a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ── Página de colección ────────────────────────────────────────────────
   Era una lista de títulos de 252 palabras. Ahora es una página con texto
   propio, y el texto necesita una medida legible: una línea de 90 caracteres
   se lee mal por muy ancha que sea la pantalla. */
.ficha-coleccion{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;margin:1.1rem 0 0;
  padding-top:1rem;border-top:1px solid var(--linea)}
.ficha-coleccion dt{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  opacity:.55;margin-bottom:.25rem}
.ficha-coleccion dd{margin:0;font-size:1.02rem;font-weight:600}

/* El cartel manda en la cabecera: una foto de cine dice de qué va la colección
   antes que cualquier grabado. Proporción 2:3, que es la del cartel real —
   meterlo en una caja apaisada recortaba el 70 %. */
.cartel-coleccion{width:100%;max-width:270px;aspect-ratio:2/3;object-fit:cover;
  border-radius:3px;box-shadow:var(--sombra-2);display:block}

.texto-coleccion .franja{padding-top:0}
.cuerpo-texto{max-width:68ch;font-size:1.06rem;line-height:1.72}
.cuerpo-texto p{margin:0 0 1.05em}
.cuerpo-texto ul,.cuerpo-texto ol{max-width:66ch;margin:0 0 1.05em;padding-left:1.25em}
.cuerpo-texto li{margin-bottom:.45em}
.cuerpo-texto blockquote{margin:1.4em 0;padding-left:1.1em;
  border-left:2px solid var(--borde-vivo);opacity:.82;font-style:italic}
.parrafo-ancho{max-width:68ch;font-size:1.06rem;line-height:1.72}

.franja--iconografia{padding-bottom:0}
/* La procedencia cierra la página: es la que sostiene todo lo demás, así que
   se separa del resto en vez de quedar como un pie de página más. */
.franja--procedencia{border-top:1px solid var(--linea);
  margin-top:calc(var(--paso)*1.2);padding-top:calc(var(--paso)*.9)}
.franja--procedencia .apunte{max-width:68ch;margin-top:.9rem;font-size:.86rem;opacity:.62}

.rejilla--notas{display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.rejilla--notas .apunte{font-size:.85rem;line-height:1.5;opacity:.68;margin-top:.35rem}

@media (max-width:640px){
  .cuerpo-texto,.parrafo-ancho{font-size:1.01rem}
  .cartel-coleccion{max-width:180px;margin:0 auto}
  .ficha-coleccion{gap:1rem 1.6rem}
}

/* La sinopsis, marcada como cita ajena. Se distingue del texto propio a
   propósito: lo que escribe RELIC y lo que se cita de Wikipedia no pueden
   parecer lo mismo, ni para el lector ni para la licencia. */
.sinopsis--citada{margin:1.1rem 0 0;padding:.1rem 0 .1rem 1.1rem;
  border-left:2px solid var(--borde-vivo)}
.sinopsis--citada p{margin:0;font-size:1.02rem;line-height:1.62}
.sinopsis--citada footer{margin-top:.5rem;font-size:.76rem;opacity:.55}
.sinopsis--citada footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Rejilla de carteles bajo la ficha: proporción 2:3, que es la del cartel de
   cine. Meterlos en cajas apaisadas recorta el 70 % de la imagen. */
.rejilla--carteles{display:grid;gap:1.1rem;list-style:none;padding:0;margin:1.1rem 0 0;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.rejilla--carteles .fotograma-img{display:block;aspect-ratio:2/3;overflow:hidden;
  border-radius:3px;background:var(--sala-3)}
.rejilla--carteles img{width:100%;height:100%;object-fit:cover;display:block}
.rejilla--carteles h3{font-size:.92rem;line-height:1.25;margin:.4rem 0 0}
.rejilla--carteles .marca-tipo{font-size:.68rem;opacity:.6}

/* La casilla de consentimiento: se lee, no se esconde. Un consentimiento en
   letra de 10 px al pie no es informado. */
.casilla{display:flex;gap:.6rem;align-items:flex-start;margin:.4rem 0 .2rem;
  font-size:.9rem;line-height:1.45;cursor:pointer}
.casilla input{margin-top:.22rem;width:16px;height:16px;flex:0 0 auto;cursor:pointer}
.casilla a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ── Panel de gestión ──────────────────────────────────────────────────
   Sobrio a propósito: esto se mira todos los días y con prisa. Lo único
   que destaca es lo que hay que hacer hoy. */
.tablero{display:grid;gap:.8rem;list-style:none;padding:0;margin:1.2rem 0;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.tablero li{padding:.85rem 1rem;border:1px solid var(--linea);
  border-radius:4px;display:flex;flex-direction:column;gap:.15rem}
.tablero .cifra{font-size:1.6rem;font-weight:700;line-height:1.05}
.tablero li span:last-child{font-size:.76rem;opacity:.6;line-height:1.3}
/* Lo que urge se ve sin buscarlo. */
.tablero--urge{border-color:var(--urge);background:var(--urge-campo)}
.tablero--urge .cifra{color:var(--urge)}

.filtros-estado{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 .6rem}
.filtros-estado a{font-size:.8rem;padding:.3rem .7rem;border-radius:99px;
  border:1px solid var(--linea);text-decoration:none;color:inherit;opacity:.75}
.filtros-estado a[aria-current]{background:var(--papel);color:var(--tinta);
  border-color:var(--papel);opacity:1}

.tabla-pedidos{width:100%;min-width:640px;font-size:.9rem}
.tabla-pedidos code{font-size:.82rem}
.sello--pagado{background:rgba(30,120,60,.14)}
.sello--produccion{background:rgba(200,140,20,.16)}
.sello--enviado{background:rgba(40,90,180,.14)}
.sello--entregado{background:var(--sello-neutro)}
.sello--cancelado{background:rgba(180,52,31,.14)}
.sello--pendiente{background:var(--sello-neutro)}
.sello--aviso{background:rgba(180,52,31,.16);margin-left:.35rem}

.ficha-pedido{display:grid;gap:2rem;margin-top:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.acciones-pedido{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:flex-end;
  margin-top:calc(var(--paso)*.9);padding-top:1.2rem;
  border-top:1px solid var(--linea)}
.acciones-pedido .formulario{display:flex;flex-wrap:wrap;gap:.9rem;align-items:flex-end;margin:0}
.acciones-pedido select,.acciones-pedido input{padding:.5rem .6rem;
  border:1px solid var(--linea);border-radius:3px;font:inherit}

/* ── Selector de idioma en la cabecera ─────────────────────────────────
   Con <details>: se abre y se cierra sin JavaScript y funciona con teclado. */
.idioma{position:relative;margin-left:.4rem}
.idioma>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:.34rem;padding:.34rem .5rem;border-radius:3px;line-height:1;
  border:1px solid transparent}
.idioma>summary::-webkit-details-marker{display:none}
.idioma>summary:hover,.idioma[open]>summary{border-color:var(--filete)}
.bandera{font-size:1.02rem;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.idioma-cod{font-size:.66rem;letter-spacing:.08em;opacity:.7}
.idioma-lista{position:absolute;right:0;top:calc(100% + .45rem);z-index:60;
  min-width:172px;margin:0;padding:.3rem;list-style:none;border-radius:4px;
  background:var(--sala-2);border:1px solid var(--borde-vivo);
  box-shadow:var(--caja)}
.idioma-lista a{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;
  border-radius:3px;text-decoration:none;color:inherit;font-size:.86rem;white-space:nowrap}
.idioma-lista a:hover{background:var(--filete)}
.idioma-lista a[aria-current]{opacity:.55}
/* En móvil el desplegable se ancla a la derecha de la pantalla, no al botón,
   para no salirse por el borde. */
@media (max-width:640px){
  .idioma-cod{display:none}
  .idioma-lista{right:.6rem;position:fixed;top:auto;margin-top:.4rem}
}

/* Guía de tallas: números alineados a la derecha para poder compararlos de un
   vistazo, que es justo lo que se hace con una tabla de medidas. */
.tabla-tallas td.dato{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla-tallas th[scope="row"]{white-space:nowrap;text-align:left}

/* ── Cabecera que cabe en un móvil ─────────────────────────────────────
   Medido antes de tocar nada: con una pantalla de 360 px el <nav> terminaba
   en x=571, así que Tienda, Cuenta y el carrito quedaban fuera. Y el botón
   del carrito medía 4 px porque su svg se dejaba aplastar. */
.cabecera-iconos{display:flex;align-items:center;gap:.35rem;flex:none}
.boton-carrito{flex:none}
/* El svg NO se encoge: era la causa de que el carrito midiera 4 px. */
.boton-carrito svg{flex:none;display:block}

.abre-menu{position:absolute;opacity:0;pointer-events:none}
.hamburguesa{display:none;flex:none;width:40px;height:40px;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border-radius:3px}
.hamburguesa span{display:block;width:19px;height:1.6px;background:currentColor;
  transition:transform .18s ease,opacity .18s ease}
.abre-menu:checked ~ .hamburguesa span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.abre-menu:checked ~ .hamburguesa span:nth-child(2){opacity:0}
.abre-menu:checked ~ .hamburguesa span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
/* Se ve el foco al tabular: si no, con teclado no se sabe dónde estás. */
.abre-menu:focus-visible ~ .hamburguesa{outline:2px solid currentColor;outline-offset:2px}

@media (max-width:860px){
  .hamburguesa{display:flex}
  /* El menú fluye DENTRO de la cabecera, en una fila propia a todo lo ancho.
     Con posición fija había que adivinar la altura de la cabecera y el menú
     salía de 27 px en vez de 312: se colaba por debajo. Así no hay nada que
     adivinar, y la cabecera crece sola cuando se abre. */
  .cabecera-int{flex-wrap:wrap;row-gap:.2rem}
  .nav{display:none;order:10;flex-basis:100%;width:100%;
    flex-direction:column;gap:0;padding:.2rem 0 .5rem;
    border-top:1px solid var(--filete);max-height:70vh;overflow-y:auto}
  .abre-menu:checked ~ .nav{display:flex}
  /* Área de toque de sobra: 52 px de alto es lo mínimo cómodo con el pulgar. */
  .nav a{padding:.95rem .2rem;min-height:52px;display:flex;align-items:center;
    border-bottom:1px solid var(--filete-suave);font-size:1rem}
  .nav a:last-child{border-bottom:0}
}

/* Y las tres correcciones que sacaban el documento fuera de la pantalla: */
/* 1. El eco decorativo de los títulos medía 92 px de texto sin recortar. */
@media (max-width:760px){
  .franja > .cabeza-seccion h2::before,
  .cabeza-seccion h2[data-eco]::before{display:none}
}
/* 2. iOS hace zoom solo en cualquier campo por debajo de 16 px, y no lo
      deshace: el usuario se queda con la página ampliada y descuadrada. */
@media (max-width:760px){
  .buscador input,.boletin input,.filtrador select,.filtrador input,
  .formulario input,.formulario select,.formulario textarea{font-size:16px}
}
/* 3. En la tienda no entraba NI UN producto en la primera pantalla y la
      página medía 48.599 px. Dos columnas: se ven cuatro piezas de golpe. */
@media (max-width:560px){
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rejilla--piezas{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* ── La prenda entera, sin recortar ────────────────────────────────────
   Las fotos de producto son CUADRADAS y las tarjetas eran 4:5, así que con
   object-fit:cover se comía el 25 % del ancho: la camiseta salía cortada por
   los costados. En una tienda de ropa, enseñar la prenda a medias es lo mismo
   que no enseñarla. Caja cuadrada y «contain»: se ve entera siempre. */
.fotograma-img--prenda{aspect-ratio:1/1;background:var(--suelo-neutro)}
.fotograma-img--prenda img{object-fit:contain !important;padding:6%}

/* Los colores disponibles, en la propia tarjeta. Antes había que entrar en la
   ficha para saber que la camiseta viene en tres colores, y quien no entra no
   se entera: se va pensando que sólo hay negro. */
.colores-tarjeta{display:flex;gap:.3rem;margin-top:.45rem;align-items:center}
.colores-tarjeta span{width:13px;height:13px;border-radius:50%;display:block;
  border:1px solid var(--filete-fuerte);flex:none}
.colores-tarjeta .mas{font-size:.68rem;opacity:.5;margin-left:.15rem}

/* Las promesas de compra, arriba y no escondidas en el pie: plazo, devolución
   y de dónde se imprime son las tres preguntas que se hace todo el mundo antes
   de meter algo en el carrito. */
.promesas{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.4rem}
.promesas li{font-size:.88rem;opacity:.82;line-height:1.4;padding-left:1rem;position:relative}
.promesas li::before{content:"›";position:absolute;left:0;opacity:.5}

/* El enlace de la ficha a su ropa: visible sin gritar. */
.a-su-ropa{margin:.9rem 0 0}
.a-su-ropa a{display:inline-block;padding:.5rem .9rem;border:1px solid currentColor;
  border-radius:3px;font-size:.86rem;text-decoration:none;color:inherit;opacity:.85}
.a-su-ropa a:hover{opacity:1;background:var(--filete-suave)}

/* Índice de directores: muchas líneas cortas, en columnas para no hacer una
   lista de 351 elementos que obliga a bajar media hora. */
.lista-directores{list-style:none;padding:0;margin:1.2rem 0 0;
  columns:3 220px;column-gap:2rem}
.lista-directores li{break-inside:avoid;padding:.3rem 0;font-size:.94rem}
.lista-directores a{color:inherit;text-decoration:none}
.lista-directores a:hover{text-decoration:underline}
.lista-directores .letra-chica{opacity:.45;margin-left:.35rem;font-size:.76rem}

/* Los formatos de cada diseño, en la tarjeta. Sustituyen a tener cinco
   tarjetas iguales con el mismo nombre. */
.formatos{display:flex;flex-wrap:wrap;gap:.28rem;margin:.4rem 0 0}
.formatos span{font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.16rem .38rem;border:1px solid var(--filete);border-radius:2px;
  opacity:.6;white-space:nowrap}

/* ── Página de error ───────────────────────────────────────────────────
   Antes esto devolvía {"detail":"Not Found"} en JSON pelado: 22 bytes que
   en un navegador se leen como una web caída. Quien llega a un 404 venía
   buscando algo concreto; lo que hay que darle es el buscador, no una
   disculpa. */
.pagina-404{max-width:820px;margin:calc(var(--paso)*1.6) auto}
.buscador-404{margin:1.4rem 0 2rem}
.buscador-404-fila{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.buscador-404-fila input{flex:1 1 240px;padding:.85rem 1rem;font-size:16px;
  border:1px solid var(--filete);border-radius:3px;
  background:var(--filete-suave);color:inherit}
.buscador-404-fila button{padding:.85rem 1.5rem;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;border:0;border-radius:3px;cursor:pointer;
  background:var(--papel);color:var(--tinta);font-weight:600}
.rejilla-404{display:grid;gap:.7rem;margin:1.6rem 0;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.rejilla-404 a{display:block;padding:.85rem 1rem;border-radius:3px;
  border:1px solid var(--filete);text-decoration:none;color:inherit}
.rejilla-404 a:hover{background:var(--filete-suave)}
.rejilla-404 b{display:block;font-size:.98rem}
.rejilla-404 span{display:block;font-size:.78rem;opacity:.58;margin-top:.2rem;line-height:1.4}

/* ── Arreglos de móvil y tablet, medidos con revisar_movil.py ──────────
   El comprobador recorre 21 rutas a 360 y a 768 y estos son los fallos que
   sacó. Cada uno con su motivo, porque en móvil nada de esto da error: la
   página carga, se ve mal y el visitante se va sin decir nada. */

/* 1. TABLET SE QUEDABA FUERA. Las reglas de móvil estaban en 760 px y el
      tablet en vertical mide 768: se libraba por ocho píxeles y arrastraba
      todos los fallos —el eco decorativo sacaba el documento a 987 px y los
      campos seguían por debajo de 16. */
@media (max-width:1024px){
  .franja > .cabeza-seccion h2::before,
  .cabeza-seccion h2[data-eco]::before{display:none}
  .buscador input,.boletin input,.filtrador select,.filtrador input,
  .formulario input,.formulario select,.formulario textarea,
  input[type="search"],input[type="email"],input[type="text"],
  input[type="password"],select,textarea{font-size:16px}
}

/* 2. LAS NOTAS SE SALÍAN A 1.586 px. `1fr` es `minmax(auto,1fr)`, así que el
      ancho mínimo del carrusel mandaba sobre el de la pantalla y estiraba el
      documento entero. Un carácter de diferencia. */
@media (max-width:1024px){
  .articulo{grid-template-columns:minmax(0,1fr)}
  .articulo > *{min-width:0}
  .carrusel,.carrusel-pista{max-width:100%;min-width:0}
  /* Y que el carrusel se pase con el dedo, no sólo con las flechas. */
  .carrusel-pista{overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch}
  .carrusel-pista > *{scroll-snap-align:start}
}

/* 3. LA MARCA MEDÍA 69×38: por debajo de los 44 px de lado que hacen falta
      para acertar con el pulgar, y es el enlace a la portada. */
@media (max-width:1024px){
  .marca{min-height:44px;display:flex;align-items:center}
  .idioma > summary{min-height:44px;min-width:44px;justify-content:center}
  .boton-carrito{min-width:44px;min-height:44px;display:flex;
    align-items:center;justify-content:center}
  .hamburguesa{width:44px;height:44px}
}

/* 4. NADA PUEDE SER MÁS ANCHO QUE LA PANTALLA. Red de seguridad para tablas,
      preformateados y bloques largos que aparezcan mañana. */
@media (max-width:1024px){
  img,video,table,pre,iframe{max-width:100%}
  table{display:block;overflow-x:auto}
  .rejilla,.rejilla--carteles,.rejilla--piezas,.rejilla--notas{min-width:0}
}

/* 5. Los enlaces del desplegable de idioma medían 160×38: seis píxeles por
      debajo de los 44 que hacen falta para acertar con el pulgar. Cambiar de
      idioma es de las primeras cosas que hace quien entra desde fuera. */
@media (max-width:1024px){
  .idioma-lista a{min-height:44px;padding:.7rem .7rem}
  /* El pie es donde están legal, envíos y devoluciones: si no se aciertan
     con el pulgar, no se leen. 44 px como todo lo demás. */
  .pie-nav a{min-height:44px;display:inline-flex;align-items:center}
}

/* 6. EL CALENDARIO DE ESTRENOS sacaba el documento a 1.417 px en tablet: una
      rejilla de siete columnas con anchos que no se encogen. En una pantalla
      de 768 no cabe una semana de siete columnas con texto dentro, así que
      se desplaza en horizontal dentro de su caja en vez de estirar la página
      entera. Y los botones del calendario suben a 44 px. */
@media (max-width:1024px){
  .calendario,.rejilla-calendario,[class*="cal-rejilla"],[class*="cal-mes"]{
    max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .barra-calendario{max-width:100%;overflow-x:auto}
  .cal-dow{min-width:0}
  .cal-mover{min-width:44px;min-height:44px}
  .barra-calendario select,.encabezado--calendario select{font-size:16px}
}

/* 7. Enlaces de «ver más» y selector de color: eran de 18 px de alto y 13,3 px
      de tipografía. El de color es el que decide qué camiseta se compra. */
@media (max-width:1024px){
  .enlace-mas{min-height:44px;display:inline-flex;align-items:center}
  .colores label,.colores .color,.selector-color label{min-width:44px;min-height:44px}
  .pieza-opciones select,.pieza-opciones input,
  fieldset select,fieldset input[type="text"]{font-size:16px}
}

/* Paginador con saltos: primera, última y una ventana alrededor de la actual.
   Con 65 páginas y sólo «Siguiente», la última estaba a 64 clics. */
.paginas{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;justify-content:center;
  margin:calc(var(--paso)*.9) 0 .4rem}
.paginas a,.paginas .pagina-actual{min-width:44px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 .6rem;border-radius:3px;
  text-decoration:none;color:inherit;font-size:.9rem;
  border:1px solid var(--filete)}
.paginas a:hover{background:var(--filete-suave)}
.paginas .pagina-actual{background:var(--papel);color:var(--tinta);
  border-color:var(--papel);font-weight:600}
.paginas .salto{opacity:.4;padding:0 .2rem}

/* Botón y plazo en cada tarjeta de la tienda: eran las dos preguntas que
   obligaban a entrar en la ficha antes de decidir. */
.boton-comprar{display:block;margin-top:.6rem;padding:.7rem 1rem;text-align:center;
  background:var(--papel);color:var(--tinta);text-decoration:none;
  border-radius:3px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;min-height:44px;display:flex;align-items:center;justify-content:center}
.boton-comprar:hover{opacity:.88}
.plazo-tarjeta{margin:.4rem 0 0;font-size:.72rem;opacity:.55;line-height:1.35;text-align:center}
.formatos a{font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.28rem .42rem;border:1px solid var(--filete);border-radius:2px;
  opacity:.62;white-space:nowrap;text-decoration:none;color:inherit;
  min-height:28px;display:inline-flex;align-items:center}
.formatos a:hover{opacity:1;border-color:var(--filete-fuerte)}

/* El formato bajo el nombre: es parte de QUÉ es el producto, no un botón.
   Antes iba como etiqueta con borde y se confundía con algo pulsable. */
.formato-pieza{margin:.25rem 0 .5rem;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;opacity:.5}

/* La cabecera de sección con enlace y flechas juntos, y la lista del carrusel
   sin viñetas. El carrusel en sí usa las reglas de arriba, que ya contenían
   bien: mezclarlas con flex lo desbordaba 23 px. */
.cabeza-derecha{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
ul.carrusel-pista{list-style:none;margin:0}

/* El recorte horizontal también en <html>. Con overflow-x:hidden sólo en
   <body>, el navegador lo propaga al elemento raíz y el documento sigue
   midiendo de más — 1.463 px en una ventana de 1.440—. Comprobado antes de
   ponerlo: ningún elemento visible se sale, así que esto no tapa nada, cierra
   el residuo que dejan los contenedores ya recortados. */
html{overflow-x:hidden}

/* ─── Colores disponibles en la tarjeta ──────────────────────────────────
   Sin esto la tienda parece de ropa negra y sólo negra: la tarjeta enseña
   UNA foto, y quien pasa por encima no tiene forma de saber que la misma
   pieza existe en marino y en arena. Son puntos, no texto, porque el color
   se reconoce antes de leerlo. */
/* El hueco sube de .34rem a .5rem por una razón de puntería, no de gusto:
   el blanco de cada punto se estira 4 px por fuera del círculo (ver el
   bloque «los puntos de color, ahora pulsables») para llegar a 24 px, y con
   5,4 px de hueco los blancos de dos puntos vecinos se solapaban: un clic
   junto al borde de «arena» caía en «blanco». Con 8 px se tocan justos. */
.puntos-color{display:flex; gap:.5rem; align-items:center; list-style:none;
  padding:0; margin:.55rem 0 0}
/* EL <li> NO PINTA NADA. Tenía 14×14 con su propio aro mientras el <button>
   de dentro mide 16×16 con OTRO aro: dos círculos concéntricos desalineados
   1 px por lado en cada punto de la tienda. Eso es lo que se veía «mal
   hecho». El color, el tamaño y el aro los pone el botón, que es lo que se
   pulsa; el <li> sólo lo sujeta. */
.puntos-color li{display:flex; flex:0 0 auto; width:auto; height:auto;
  border-radius:0; box-shadow:none; background:none}
.visualmente-oculto{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}

/* ── La prenda, encuadrada igual en todas partes ───────────────────────
   Medido a 1440x1000: el botón «Comprar» de una tarjeta salía 34,8 px más
   abajo que el de la de al lado, y la 7ª tarjeta de cada rejilla se pintaba
   a 669x418 con la prenda flotando y 331 px de negro a los lados. */

/* 1. La regla irregular de la 7ª tarjeta es para carteles, no para ropa:
      un producto con otra caja y otro alto parece de otra talla. */
.rejilla > *:nth-child(7):has(.fotograma-img--prenda){grid-column:span 1}
.rejilla > *:nth-child(7) .fotograma-img--prenda{aspect-ratio:1/1}
.rejilla > *:nth-child(7):has(.fotograma-img--prenda) h3{font-size:inherit}

/* 2. Botón y plazo pegados al fondo: misma línea en toda la fila, mida lo
      que mida la procedencia de arriba. */
.fotograma-cuerpo .boton-comprar{margin-top:auto}

/* 3. La procedencia, dos líneas como mucho. «Exorcismo, demonología y
      Pazuzu (fuentes antiguas, dominio público)» ocupaba tres. */
.fuente-alta{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}

/* 4. SIN VELO SOBRE LA PRENDA. El degradado a rgba(var(--velo),.78) está
      pensado para un fotograma de cine; sobre una camiseta arena funde la
      mitad inferior con el fondo #101011 y la prenda parece cortada por la
      cintura. Es la causa número uno de «la camiseta se ve mal». */
.fotograma-img--prenda::after{display:none}

/* ── Lista de lecturas de la ficha de obra ─────────────────────────────
   Antes reutilizaba el molde de «créditos», de tres columnas (fecha ·
   título · derecha). Aquí no hay fecha ni tercera columna: salía el slug
   crudo «en-que-se-basa» a la izquierda y el título estrujado en una
   columna de dos palabras de ancho. */
.lecturas{list-style:none; padding:0; margin:.6rem 0 0;
  display:grid; gap:.1rem}
.lecturas li{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem;
  padding:.7rem 0; border-bottom:1px solid var(--filete)}
.lecturas li a{flex:1 1 18rem; font-size:1.05rem; text-decoration:none}
.lecturas li a:hover{text-decoration:underline}
.lecturas .marca-tipo{flex:0 0 auto; opacity:.62}

/* ── Pie de procedencia de la galería (ficha de pieza) ─────────────────
   Bloque propio, añadido al final a propósito: no reescribe ninguna regla
   de arriba. La última miniatura de la ficha ya no es una lámina vectorial
   sino el cartel, el grabado o la portada de la que sale el diseño, y al
   pulsarla aparece este pie con el título, el autor y el año. Sin el pie la
   imagen es decoración; con el pie es la procedencia, que es lo que se
   vende. */
.pie-obra{margin:.5rem 0 0; font-size:.8rem; line-height:1.45;
  color:var(--luz-3); text-wrap:pretty}
.pie-obra[hidden]{display:none}
.pie-obra b{font-weight:600}
.pie-obra a{margin-left:.45em; white-space:nowrap}
/* El cartel y el grabado no son 5/6 como la prenda: en la miniatura se
   recortan (ya lo hace .tira--fuente img) y en grande se contienen, que es
   lo que hereda .galeria-principal img. Aquí sólo se marca que esa casilla
   es pulsable, porque antes era un enlace y ahora es un botón. */
.tira--procedencia{cursor:pointer}

/* ── Índice de notas y ficha de nota ───────────────────────────────────
   Bloque propio, añadido al final a propósito: no reescribe ninguna regla de
   arriba, sólo la vence por orden a igualdad de especificidad.

   MEDIDO el 19-08-2026 con Playwright a 1440x1000 y 390x844, contra la web
   que corre y contra la base:

   · 5 de 73 notas publicadas no tenían cartel de obra. Las cinco caían a
     /lamina/{slug}.svg, una lámina vectorial de rayas que NO es ninguna obra
     —ni el cartel, ni el grabado, ni la prenda— y encima llega apaisada
     (340x192) a una caja 2:3, así que se recortaba el 62,4 % de sí misma.
     Quitada de notas.html y de nota.html. En su lugar, la fuente de museo.
   · La 7ª tarjeta del índice se pintaba a 669x418 (16/10) con un cartel de
     320x471 dentro: 57,5 % del cartel fuera de cuadro.
   · La galería «La fuente, en un museo» caía en la columna de texto de 72ch,
     se partía en 4 columnas fijas y dejaba cada obra en 149x112 px con el
     47-66 % recortado, porque la caja es 4/3 y los grabados son verticales.  */

/* 1. LA FILA IRREGULAR NO ES PARA CARTELES.
      «.rejilla > *:nth-child(7)» (estilo.css:1087) ensancha la séptima tarjeta
      a dos columnas y «.rejilla > *:nth-child(7) .fotograma-img» (:1092) le
      pone aspect-ratio:16/10. Gana por especificidad (0,3,0) a
      «.fotograma-img--cartel» (0,1,0), que es lo que el índice usa. Sobre una
      rejilla de carteles verticales eso no rompe el papel pintado: parte un
      cartel por la mitad. Se neutraliza SÓLO en el índice de notas —el mismo
      remedio, y por la misma razón, que el de la prenda unas líneas más
      arriba—; donde la fila irregular sí sea intencionada, sigue viva. */
.rejilla--indice > *:nth-child(7){grid-column:span 1}
.rejilla--indice > *:nth-child(7) .fotograma-img{aspect-ratio:2/3}
.rejilla--indice > *:nth-child(7) h3{font-size:inherit}
@media (max-width:560px){
  .rejilla--indice > *:nth-child(7) .fotograma-img{aspect-ratio:3/4}
}

/* 2. LA FUENTE, CUANDO NO HAY CARTEL.
      Un grabado del XIX no es un cartel de cine: no está compuesto para una
      caja 2:3 y recortarlo a sangre lo destroza (el retrato de Audubon, de
      640x809, perdía la cabeza). Se muestra ENTERO sobre un paspartú, que es
      como se cuelga una obra de museo, y rotulado, para que nadie lo confunda
      con el cartel de la película. */
.fotograma-img--fuente{aspect-ratio:2/3; background:var(--sala-3)}
@media (max-width:560px){.fotograma-img--fuente{aspect-ratio:3/4}}
.fotograma-img--fuente img{width:100%; height:100%; object-fit:contain;
  padding:12% 10% 22%; background:
    repeating-linear-gradient(45deg, var(--filete-suave) 0 6px, transparent 6px 12px)}
/* SIN VELO SOBRE LA LÁMINA. El degradado de «.fotograma-img::after»
   (estilo.css:203) baja hasta rgba(var(--velo),.78) y está pensado para un
   fotograma de cine a sangre; sobre una obra contenida y centrada funde el
   tercio de abajo con el paspartú y parece que la lámina esté rota o cortada.
   Es la misma causa que ya se anuló para la prenda. */
.fotograma-img--fuente::after{display:none}
.sello-fuente{position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:7px 10px 8px; font-family:"IBM Plex Mono",monospace;
  font-size:.56rem; line-height:1.35; letter-spacing:.04em;
  color:var(--luz-2); background:linear-gradient(180deg,
    rgba(var(--velo),0), rgba(var(--velo),.86) 42%);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden}
.sello-fuente b{display:block; color:var(--verde); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; font-size:.54rem}
/* La prenda sí llena su caja: no necesita paspartú, sólo aire. */
.fotograma-img--pieza img{padding:6% 6% 20%; background:none}

/* 3. NI CARTEL, NI FUENTE, NI PRENDA: ENTONCES TEXTO.
      Hoy no la usa ninguna nota, y ése es justo el punto: si mañana entra una
      sin nada que enseñar, la tarjeta no finge una foto ni deja un hueco gris.
      Se compone como una entrada de índice —rótulo, obra, pie— con la
      tipografía de la casa, y se lee como el lomo de un libro. */
.fotograma-img--indice{display:flex; flex-direction:column; justify-content:center;
  gap:14px; padding:26px 22px; text-align:center; aspect-ratio:2/3;
  background:var(--sala-3);
  border-bottom:1px solid var(--borde)}
@media (max-width:560px){.fotograma-img--indice{aspect-ratio:3/4; padding:18px 14px}}
.fotograma-img--indice::after{display:none}
.fotograma-img--indice::before{display:none}
.indice-marca{font-family:"IBM Plex Mono",monospace; font-size:.58rem;
  font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--haz)}
.indice-obra{font-family:"Anton",Impact,sans-serif; font-size:clamp(1.1rem,2.4vw,1.7rem);
  line-height:.98; letter-spacing:-.01em; text-transform:uppercase;
  color:var(--luz); text-wrap:balance;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
  overflow:hidden}
.indice-pie{font-family:"IBM Plex Mono",monospace; font-size:.54rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--luz-3)}

/* 4. LA CABECERA DE LA NOTA SIN CARTEL.
      Cinco fichas abrían con el titular sobre negro y la mitad izquierda
      vacía. Ahora abren con la obra de museo de la que sale la historia, en la
      misma columna de 210 px que ocuparía el cartel, contenida y con crédito
      —lo que se enseña es de dominio público, y decir de dónde sale es
      exactamente el oficio de esta casa. */
.articulo-plancha{margin:0; max-width:210px}
.articulo-plancha img{width:100%; height:auto; aspect-ratio:2/3;
  object-fit:contain; background:var(--sala-2);
  border:1px solid var(--borde); box-shadow:var(--caja); padding:9px}
.articulo-plancha figcaption{margin-top:9px; font-size:.68rem; line-height:1.45;
  color:var(--luz-3); text-wrap:pretty}
.articulo-plancha figcaption b{color:var(--luz-2); font-weight:600}
@media (max-width:759px){.articulo-plancha{max-width:150px}}

/* 5. LA GALERÍA DE MUSEO, A SU TAMAÑO Y SIN RECORTAR.
      Dos arreglos, y los dos se ven de lejos:
      a) la sección pasa a «a-ancho» en la plantilla, así que ya no vive en la
         columna de 72ch;
      b) auto-fit en vez de las 4 columnas fijas de «.rejilla» (:1089), para
         que tres obras ocupen tres columnas anchas y no tres sellos y un
         hueco.
      Y sobre todo: object-fit CONTAIN. Una obra de museo no se recorta. La
      caja se mantiene igual en toda la fila para que los pies se alineen, y
      lo que sobra es paspartú, no imagen perdida. */
.rejilla--museo{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  align-items:start}
@media (min-width:1101px){
  .rejilla--museo{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
  .rejilla--museo > *{grid-column:span 1}
  .rejilla--museo > *:nth-child(7){grid-column:span 1}
}
.articulo .lamina-museo img{width:100%; max-width:100%; height:auto;
  max-height:none; aspect-ratio:4/3; object-fit:contain; object-position:center;
  margin:0; display:block; padding:14px; background:var(--sala-3)}

/* ── Titulares con tilde y salto a la colección (páginas de nota) ───────
   Segundo bloque propio al final, por lo mismo: no reescribe nada de arriba.  */

/* 6. LAS TILDES DEL TITULAR.
      La regla de arriba —«h1,h2,h3{line-height:1.02}», estilo.css:82— existe
      justamente para esto, y su comentario lo cuenta: en Anton la tilde de una
      mayúscula sube un 28 % por encima de la caja, así que con la interlínea
      apretada aterriza dentro de la línea de arriba y desaparece. Pero el
      bloque tipográfico de estilo.css:1079 la vuelve a apretar
      («h1{line-height:.88}», «h2{line-height:.92}») y gana por ir después.

      MEDIDO a 1440x1000 en /nota/casablanca-…: h1 de 102,4 px con line-height
      de 90,1 px y 154 px de tinta por línea; la tinta de la línea 2 empieza
      64 px dentro de la línea 1. En pantalla se lee «LLEGO EN PAGINAS» donde
      pone «llegó en páginas», y «UN EGIPTOLOGO» donde pone «egiptólogo». No es
      un recorte de la caja —no hay overflow:hidden— es la línea de arriba
      comiéndose la tilde de la de abajo.

      Se corrige SÓLO en las páginas de nota, que son las mías. La misma
      regla global aprieta los h1 y h2 de toda la casa, así que el mismo
      defecto sale en cualquier otro titular con tilde de dos líneas: eso hay
      que mirarlo página por página y no desde aquí. El h3 de las tarjetas se
      midió también y está bien: 20,8 px con interlínea 22,9 (1,1). */
.articulo-cab h1{line-height:1.03}
.articulo h2{line-height:1.04}

/* 7. EL SALTO A LA COLECCIÓN.
      La nota dice de dónde sale la historia; la colección lo desarrolla en
      unas 2.200 palabras propias. Se compone como un cartón de sala —regla
      ámbar a la izquierda, rótulo, título y una línea de invitación—, no como
      un banner: es una lectura, no un anuncio. */
.salto-coleccion{margin:var(--paso) 0 0; padding:26px 0 26px 26px;
  border-left:2px solid var(--haz); background:
    linear-gradient(90deg, rgba(232,163,61,.06), transparent 60%)}
.salto-coleccion .rotulo{display:block; color:var(--verde); margin-bottom:10px}
.salto-coleccion h2{font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0}
.salto-meta{font-family:"IBM Plex Mono",monospace; font-size:.7rem;
  color:var(--luz-3); margin:.55em 0 0}
.salto-coleccion .salto-meta:empty{display:none}
.salto-txt{margin:.9em 0 1.1em; color:var(--luz-2); max-width:60ch}
.salto-coleccion .enlace-mas{display:inline-block}

/* 8. EL PIE DEL CARTEL DE LISTA.
      «De la lista · Rain Man» debajo del cartel de la cabecera. Sin ese pie el
      lector cree que la nota va de esa película, y va de las 66 de Zimmer. */
.pie-lista{display:block; margin-top:8px; font-family:"IBM Plex Mono",monospace;
  font-size:.62rem; letter-spacing:.06em; color:var(--luz-3); line-height:1.4}
.articulo-cartel .pie-lista{text-transform:none}

/* ─── Los puntos de color, ahora pulsables ────────────────────────────────
   Eran adorno: decían qué colores existen y para verlos había que abrir la
   ficha. Ahora cada punto trae la foto de su color y la cambia en la tarjeta.
   Se dibujan como botón sin apariencia de botón. */
.puntos-color .punto-color{
  position:relative;
  display:block; width:16px; height:16px; padding:0; border:0; border-radius:50%;
  cursor:pointer; appearance:none; -webkit-appearance:none;
  box-shadow:inset 0 0 0 1px var(--filete-fuerte), 0 0 0 1px rgba(0,0,0,.5);
  transition:transform .12s ease, box-shadow .12s ease}
/* EL BLANCO ES MÁS GRANDE QUE LA TINTA. El círculo sigue midiendo 16 px
   porque a más grande deja de leerse como «una muestra de color» y empieza a
   parecer un botón de otra cosa; pero 16 px es la mitad de lo que pide un
   dedo. Este pseudo-elemento no se ve y estira lo pulsable a 24×24 sin mover
   ni un píxel del dibujo. */
.puntos-color .punto-color::after{
  content:""; position:absolute; inset:-4px; border-radius:50%}
.puntos-color .punto-color:hover{transform:scale(1.18)}
.puntos-color .punto-color:focus-visible{outline:2px solid var(--haz); outline-offset:3px}
.puntos-color .punto-color[aria-pressed="true"]{
  box-shadow:inset 0 0 0 1px var(--filete-fuerte), 0 0 0 2px var(--haz)}
/* El blanco y el arena se pierden sobre fondo claro: se les marca el borde. */
.puntos-color .punto-color[style*="#FFFFFF"],
.puntos-color .punto-color[style*="#DCCCB4"]{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.5)}
/* Un punto sin foto de ese color no engaña: se ve que no es pulsable. */
.puntos-color .punto-color:not([data-foto]),
.puntos-color .punto-color:disabled{cursor:default; opacity:.4}
.puntos-color .punto-color:disabled{transform:none}
.puntos-color .punto-color:disabled::after{content:none}
/* Mientras la foto viaja, el punto late: el clic contesta aunque la red no.
   Con la precarga hecha esto no llega a verse; sólo aparece si de verdad
   hay que esperar, que es cuando hace falta. */
.puntos-color .punto-color.cargando{animation:punto-late .9s ease-in-out infinite}
@keyframes punto-late{50%{opacity:.4}}
@media (prefers-reduced-motion: reduce){
  .puntos-color .punto-color{transition:none}
  .puntos-color .punto-color:hover{transform:none}
  .puntos-color .punto-color.cargando{animation:none; opacity:.6}
}

/* ═══════════════════════════════════════════════════════════════════════
   LAS DOS CASAS — 19-08-2026
   Bloque propio al final: no reescribe ninguna regla de arriba, sólo la vence
   por orden a igualdad de especificidad.

   EL DIAGNÓSTICO, MEDIDO con Playwright contra la web que corre y con las
   fórmulas de contraste de la WCAG:

     prenda            contra la caja de antes    contra el papel de la ficha
                            (#101011)                    (#EFEAE0)
     negro  #111111          1,01 : 1                     15,75 : 1
     marino #112537          1,22 : 1                     13,04 : 1
     arena  #DCCCB4         12,08 : 1                      1,36 : 1
     blanco #FFFFFF         19,02 : 1                      1,16 : 1

   1,01:1 es literalmente el mismo color: la camiseta negra NO ESTABA en la
   tienda. Y en la ficha pasaba justo al revés con la arena y la blanca. La
   misma pieza se vende en cuatro colores, así que NO EXISTE ningún fondo fijo
   —ni claro ni oscuro— que sirva para las cuatro. La caja tiene que moverse.

   Y la rampa entera estaba comprimida: --sala #0A0A0B, --sala-2 1,18:1,
   --sala-3 1,36:1, --borde 1,71:1. Cuatro superficies entre 1,18 y 1,71 no son
   cuatro superficies: son el mismo negro cuatro veces, y una página sin
   jerarquía de superficies es exactamente lo que se lee como barato.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1. LA RAMPA, ABIERTA Y MEDIDA ─────────────────────────────────────
   Los escalones se calcularon en L* (la claridad perceptual del CIE), no en
   ratio WCAG, porque el ratio se aplasta en los tonos oscuros: entre #0A0A0B
   y #1F1D20 hay 1,18:1 —parece nada— pero 8,3 puntos de L*, que sí se ven.
   Lo que de verdad no se veía era el FILETE, a 1,71:1. Ahora la rampa tiene
   pasos de 9 a 12 puntos de L* de principio a fin.

     --sala        #0C0C0E   L*  3,4    1,00 : 1
     --sala-2      #201F23   L* 12,0    1,19 : 1   tarjeta
     --sala-3      #343237   L* 21,2    1,54 : 1   superficie elevada
     --borde       #4C4A4F   L* 31,8    2,23 : 1   antes 1,71
     --borde-vivo  #6A686D   L* 44,3    3,55 : 1   antes 2,27              */
/* Los valores que estaban aquí —la rampa oscura, el papel y la tinta, el
   ámbar partido en dos, los suelos de la foto— se han mudado enteros a
   tema.css, con sus mismas cifras medidas al lado. Lo que cambia es de qué
   cuelgan: antes de `data-casa`, que lo decidía el servidor mirando la URL;
   ahora de `data-tema`, que lo decide el visitante. La tienda ya no es la
   única página clara: puede serlo la web entera, o ninguna.               */

/* ── 3. EL SUELO DE LA FOTO SE MUEVE CON EL PRODUCTO ───────────────────
   La clase la pinta el servidor (fondo_prenda / fondo_color en main.py) a
   partir del color del mockup que esa tarjeta enseña, y fondo-prenda.js la
   vuelve a calcular cuando el cliente cambia de color sin recargar.
   `.suelo.suelo--x` son dos clases (0,2,0) para ganarle a `.fotograma-img--prenda`
   (0,1,0) sin recurrir a !important. */
.suelo{background:var(--suelo-neutro); transition:background-color .28s ease}
.suelo.suelo--claro{background:var(--suelo-claro)}
.suelo.suelo--oscuro{background:var(--suelo-oscuro)}
/* El canto interior es el mismo en los dos suelos, y ése es el truco para que
   una rejilla mitad clara y mitad oscura se lea como UN sistema y no como un
   tablero de ajedrez: cambia el fondo, no cambia la caja. */
.fotograma-img--prenda.suelo{box-shadow:inset 0 0 0 1px rgba(128,128,128,.16)}

/* Las miniaturas de la ficha y las líneas del carrito llevan el mismo suelo,
   así que la prenda tampoco se pierde ahí. */
.tira.suelo{border-color:var(--borde)}
.cel-img.suelo,.panel-img.suelo{border-radius:2px}
.cel-img.suelo img,.panel-img.suelo img{background:none; border:0}
#barra-suelo{display:inline-flex; padding:2px; border:1px solid var(--borde)}
#barra-suelo img{background:none; border:0}
/* La galería grande hereda el suelo, no el #EFEAE0 fijo de la línea 1096. */
.galeria-principal.suelo{border-color:var(--borde)}

/* ── LA LÁMINA NO ES UNA PRENDA ────────────────────────────────────────
   Ocho de las 34 piezas son láminas, y llegaron después del encuadre de la
   prenda. Medido: el mockup es 1000×1000 con la hoja recortada dentro en
   692×911 —proporción 0,76, papel vertical, no cuadrado— y el papel es hueso
   (#F1EDE3), con la sombra de caída ya pintada en el propio PNG.

   Contra el suelo claro esa hoja da 1,02:1: desaparece, y lo único que se ve
   es el dibujo flotando. Contra el grafito da 18,29:1 y se lee como lo que es:
   una estampa colgada. Así que la lámina va SIEMPRE sobre oscuro (lo decide
   `CATEGORIAS_CLARAS` en main.py) y con menos aire, porque ya trae margen
   dentro del propio archivo.

   La caja se queda CUADRADA a propósito, aunque la hoja sea 3:4: en la tienda
   una lámina y una camiseta comparten fila, y dos alturas distintas en la
   misma fila descuadran el pie de todas las tarjetas. La hoja se contiene
   dentro del cuadrado y lo que sobra es pared. */
.fotograma-img--lamina.suelo{background:var(--suelo-oscuro)}
.fotograma-img--lamina img{object-fit:contain !important; padding:3.5% !important}
.galeria-principal.suelo--oscuro img{padding:0}


/* ── 4. FUERA EL BAÑO DE ÁMBAR ─────────────────────────────────────────
   `--brillo` ya se redefinió arriba. Aquí se apaga el derrame de luz ámbar
   por debajo de la tarjeta —un `radial-gradient` de rgba(232,163,61,.4) con
   14 px de desenfoque— que era lo que le daba a la rejilla ese aire de plantilla
   con resplandor. La tarjeta se levanta con sombra y con el filete, que ahora
   se ve. */
.fotograma::after,.destacado::after{display:none}
.fotograma:hover,.destacado:hover{box-shadow:var(--sombra-3); border-color:var(--borde-vivo)}
/* La luz que sigue al cursor deja de ser ámbar y pasa a ser luz. Se queda
   sólo en la casa oscura: sobre papel un halo blanco no es nada.
   OJO: no se toca `inset:-40px -18px`, que costó tres intentos y es lo que
   impide que el halo desborde el documento. */
.con-foco::before{background:radial-gradient(340px circle at var(--fx,50%) var(--fy,50%),
  var(--foco), transparent 62%)}
/* En la cara clara `--foco` es `transparent`: el halo existe y no pinta. */
/* El haz del proyector en el héroe: de .17 a .12. Sigue siendo el haz, deja
   de ser un filtro naranja sobre la portada. */
.escenario::before{
  background:
    radial-gradient(120% 90% at 16% -12%, rgba(232,163,61,.12), transparent 56%),
    linear-gradient(180deg, transparent 42%, var(--sala) 97%);
}

/* El ámbar que SÍ se queda: como campo, con tinta encima a 8,67:1. Es el
   acento medido y escaso, no el baño. */
.precio--bloque,.globo,.dia-sello,.etiqueta-genero,.campo-ambar,.franja--ambar,
.pie .boletin,.chips a[aria-current]{background:var(--campo); color:var(--campo-tinta)}
.precio--bloque small{color:var(--campo-tinta)}
.globo{color:var(--campo-tinta)}
.franja--ambar h2,.franja--ambar h3,.franja--ambar p,
.campo-ambar h2,.campo-ambar h3,.campo-ambar p{color:var(--campo-tinta)}
.pie .boletin button{background:var(--campo-tinta); border-color:var(--campo-tinta);
  color:var(--campo)}
.cinta::after{background:linear-gradient(90deg, var(--campo), var(--haz-fuerte))}

/* EL PRECIO NO ES UN ACENTO: ES EL DATO. En la tarjeta iba en ámbar de 0,9rem,
   del mismo tamaño y peso que el rótulo de la categoría. Sobre papel el mismo
   ámbar daría 1,88:1 —ilegible— y sobre negro competía con la cartela, el
   enlace y el sello, que también eran ámbar. Pasa a tinta plena y a un cuerpo
   por encima del resto de la tarjeta: 16,44:1 sobre papel, 17,48:1 sobre negro. */
.fotograma .precio,.loza .precio{color:var(--luz); font-size:1.06rem;
  font-weight:500; letter-spacing:.01em}


/* ── 5. LAS TILDES DEL TITULAR, EN TODA LA CASA ────────────────────────
   MEDIDO con TextMetrics sobre la Anton que sirve esta web, a 100 px:
       H, I  (versal limpia)      85,9 px sobre la línea base
       Í, Ó  (versal con tilde)  110,1 px  →  la tilde sobresale 24,2 px
                                              por encima de la altura de caja
       Q     (descendente)         9,1 px por debajo
   Es decir: la tinta de una línea empieza a 1,101 em de su propia base. Con
   `h1{line-height:.88}` (estilo.css:1079) la base siguiente estaba a 0,88 em,
   así que la tilde de la línea de abajo aterrizaba 0,221 em DENTRO de la línea
   de arriba. En pantalla se leía «BERLIN» donde pone BERLÍN y «COMO» donde
   pone CÓMO. No es un recorte de caja: no hay overflow. Es una línea comiéndose
   la tilde de la siguiente.

   El mínimo que despeja una versal con tilde es 1,101. Se usa 1,12 —un 2 % de
   margen— y se conserva lo que de verdad da el aire de display, que es el
   `letter-spacing` negativo. Los números no llevan tilde, así que los
   contadores y la cuenta grande se quedan apretados. */
h1{line-height:1.12}
h2{line-height:1.12}
h3{line-height:1.14}
.articulo-cab h1,.articulo h2,.encabezado h1,.escenario h1,.obra-cab h1,
.pieza-datos h1,.estampa-txt h2,.banda .lema-grande,.pie .lema,.t-medio,
.indice-obra,.loza h3,.loza--grande h3,.mes-cab span,.cal-titulo h2,
.destacado-txt h3,.fotograma h3,.estante-txt h2{line-height:1.12}
/* Y donde de verdad no puede pasar nada, porque son sólo cifras. */
.contador .n{line-height:.84}
.cuenta-grande{line-height:.8}
.dia-sello b{line-height:1}
.precio--bloque{line-height:1}


/* ── 6. LO QUE ESTABA ESCRITO EN BLANCO A PELO ─────────────────────────
   Veinticinco reglas usaban rgba(255,255,255,.x) para filetes y fondos. En la
   casa clara eso es invisible: bordes que no existen, listas sin separación y
   un menú móvil sin costuras. Se reescriben con los mismos valores relativos
   pero derivados del color de texto de la casa, así que valen en las dos. */
.idioma>summary:hover,.idioma[open]>summary{border-color:var(--borde-vivo)}
.idioma-lista{background:var(--sala-2); border-color:var(--borde-vivo);
  box-shadow:var(--caja)}
.idioma-lista a:hover{background:var(--sala-3)}
@media (max-width:860px){
  .nav{border-top-color:var(--borde)}
  .nav a{border-bottom-color:var(--borde)}
}
.colores-tarjeta span{border-color:var(--borde-vivo)}
.a-su-ropa a:hover{background:var(--sala-3)}
.formatos span,.formatos a{border-color:var(--borde)}
.formatos a:hover{border-color:var(--borde-vivo)}
.buscador-404-fila input{border-color:var(--borde-vivo); background:var(--sala-3);
  color:var(--luz)}
.buscador-404-fila button{background:var(--papel); color:var(--tinta)}
.rejilla-404 a{border-color:var(--borde)}
.rejilla-404 a:hover{background:var(--sala-3)}
.paginas a,.paginas .pagina-actual{border-color:var(--borde)}
.paginas a:hover{background:var(--sala-3)}
.paginas .pagina-actual{background:var(--papel); color:var(--tinta);
  border-color:var(--papel)}
.lecturas li{border-bottom-color:var(--borde)}
.articulo table th,.articulo table td{border-color:var(--borde); color:var(--luz-2)}
.articulo table tbody tr:nth-child(even){background:var(--sala-2)}
.articulo table th{color:var(--luz)}
.cuerpo-texto blockquote{border-left-color:var(--borde-vivo)}
.sinopsis--citada{border-left-color:var(--borde-vivo)}
.fotograma-img--fuente img{background:none}
.franja:nth-of-type(even){background:var(--banda)}
.tablero li,.filtros-estado a{border-color:var(--borde)}
.filtros-estado a[aria-current]{background:var(--papel); color:var(--tinta);
  border-color:var(--papel)}


/* ── 7. LOS PUNTOS DE COLOR, EN LAS DOS CARAS ──────────────────────────
   Son botones y cambian la foto de la tarjeta, así que su estado tiene que
   verse. Sobre negro el anillo de foco ámbar funciona; sobre papel el mismo
   ámbar daba 1,88:1 y el punto ARENA y el BLANCO se comían el fondo. El
   contorno pasa a ser tinta de la casa, que en la casa clara es negro y en la
   oscura es blanco: siempre hay borde, mida lo que mida el color de dentro. */
.puntos-color .punto-color{
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.5), 0 0 0 1px var(--borde-vivo)}
.puntos-color .punto-color:focus-visible{
  outline:2px solid var(--luz); outline-offset:3px}
.puntos-color .punto-color[aria-pressed="true"]{
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.5), 0 0 0 2px var(--luz)}
/* El blanco y el arena, que son los que se pierden sobre papel. */
.puntos-color .punto-color[style*="#FFFFFF"],
.puntos-color .punto-color[style*="#fef1d1"],
.puntos-color .punto-color[style*="#e7d3b3"],
.puntos-color .punto-color[style*="#CFCBC8"],
.puntos-color .punto-color[style*="#DCCCB4"]{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28), 0 0 0 1px var(--luz-3)}
.color-chip span{box-shadow:inset 0 0 0 2px var(--sala-2)}
.color-chip input:checked + span{border-color:var(--luz)}


/* ── 8. LA TIENDA, COMPUESTA PARA VENDER ───────────────────────────────
   Con la casa clara la tarjeta pasa a ser una hoja blanca sobre papel, con
   filete y sombra, y el botón deja de ser un bloque crema a toda anchura en
   cada una de las 34 piezas —treinta y cuatro rectángulos llenos en una
   pantalla es lo que hace que una rejilla parezca un catálogo de plantilla—.
   Pasa a ser un botón de contorno que se llena al pasar por encima: la misma
   promesa, sin gritar treinta y cuatro veces. */
.fotograma{background:var(--sala-2); border-color:var(--borde)}
.boton-comprar{background:transparent; color:var(--luz);
  border:1px solid var(--borde-vivo); font-weight:600; letter-spacing:.1em;
  transition:background .16s, color .16s, border-color .16s}
.boton-comprar:hover{opacity:1; background:var(--papel); color:var(--tinta);
  border-color:var(--papel)}
.plazo-tarjeta{color:var(--luz-3); opacity:1}
.formato-pieza{color:var(--luz-3); opacity:1}
.fuente-alta{color:var(--haz)}
/* El botón principal de la ficha sí es sólido: ahí sólo hay uno. */
.boton{background:var(--papel); border-color:var(--papel); color:var(--tinta)}
.boton:hover{background:var(--campo); border-color:var(--campo); color:var(--campo-tinta)}
.boton--hueco{background:transparent; color:var(--luz); border-color:var(--borde-vivo)}
.boton--hueco:hover{background:transparent; color:var(--haz); border-color:var(--haz)}
/* El barrido blanco del botón sólo tiene sentido sobre un botón oscuro. */
/* El barrido del botón es `--barrido`: blanco sobre botón oscuro, oscuro
   sobre botón claro. Se invierte con el botón, que es el inverso de la página. */

/* El velo de cine NO vuelve sobre el producto: ni sobre prenda ni sobre lámina.
   Es la causa número uno de «la camiseta se ve mal» y ya estaba anulado para la
   prenda; la lámina llegó después y le faltaba. */
.fotograma-img--lamina::after{display:none}


/* ── 9. EL PASPARTÚ: lo que impide que la rejilla parezca un ajedrez ────
   Primera pasada mirada a 1440×1000: con el suelo pegado al borde de la
   tarjeta, una fila de cuatro con dos prendas claras y dos oscuras se leía
   como un tablero de ajedrez —los suelos oscuros eran AGUJEROS en el papel—.
   El suelo tiene que moverse (es la única forma de que se vea la prenda), así
   que lo que cambia es el marco: la foto deja de ir a sangre y se monta sobre
   la tarjeta con un margen igual por los cuatro costados, como una obra sobre
   su paspartú. Entonces la tarjeta es siempre la misma hoja y lo que cambia es
   sólo el color del cartón de detrás, que es exactamente lo que hace un museo
   cuando cuelga un grabado claro al lado de uno oscuro. */
.fotograma-img--prenda.suelo{
  margin:16px 16px 0; border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.20)}
.fotograma:hover .fotograma-img--prenda.suelo{box-shadow:inset 0 0 0 1px rgba(128,128,128,.34)}
/* La séptima tarjeta de la rejilla se ensancha a dos columnas (regla de la
   fila irregular, estilo.css:1087). Con prenda ya estaba neutralizada; el
   paspartú tiene que seguirla. */
.rejilla > *:nth-child(7) .fotograma-img--prenda.suelo{margin:16px 16px 0}

/* El pie de la tarjeta se alinea con el paspartú, no con el borde. */
.fotograma:has(.fotograma-img--prenda) .fotograma-cuerpo{padding:13px 17px 17px}

/* ── 10. EL ÁMBAR, CONTADO ─────────────────────────────────────────────
   En la portada había ámbar en la cartela, en media línea del titular, en los
   tres contadores, en el enlace de sección y en el precio de cada tarjeta:
   seis sitios en una pantalla. Eso no es un acento, es un baño, y ámbar sobre
   casi negro es la paleta más vista en las webs baratas.

   Se queda donde SIGNIFICA algo —la marca en el titular y el rótulo de
   sección— y se va de donde sólo era color: los contadores pasan a tinta
   (17,48:1 en vez de 9,06) y el número recupera el peso que le tocaba. */
.contador .n{color:var(--luz)}
.contador div span:last-child{color:var(--luz-3)}


/* ── 11. LO QUE «venta.css» TOMA PRESTADO DE AQUÍ ──────────────────────
   La hoja de venta —el envío en la ficha, la escalera de cantidad, el doble
   botón— está escrita entera con las variables de la casa, que es justo lo
   que hay que hacer. Pero una de ellas, `--ambar-hondo`, sólo existía en
   versión oscura: `#5A3A0C` con `color:var(--luz)` encima. En la casa clara
   `--luz` es tinta casi negra, así que el atajo de cantidad elegido salía
   marrón oscuro con texto negro dentro —el «1 · precio» era ilegible—.
   Medido en la ficha de la lámina antes de tocarlo.

   La casa clara necesita el ámbar por el otro extremo: un lavado pálido con
   la tinta encima. #F7E6C4 contra #16140F da 14,52:1. */
.atajo[aria-pressed="true"]{border-color:var(--haz-fuerte)}
/* La flecha del selector de país iba pintada dentro de un SVG con el ámbar
   de la sala, y un data-URI no puede leer una variable CSS: con la luz
   encendida daba 1,88:1 y desaparecía. Pasa a dibujarse con dos degradados,
   como la del filtrador, y así sigue al color de texto de la casa. */

/* EL BOTÓN QUE COBRA ES EL ÚNICO ÁMBAR PLENO DE LA FICHA.
   Ahí el ámbar no es decoración: es el sitio donde la casa quiere que se
   pulse, y es el único de la página. Tinta encima a 8,67:1. El de la cesta se
   queda en hueco debajo, que es la jerarquía que ya traía venta.css. */
.boton--vende{background:var(--campo); border-color:var(--campo);
  color:var(--campo-tinta)}
.boton--vende:hover{background:var(--haz-fuerte); border-color:var(--haz-fuerte);
  color:var(--papel)}
/* Al pasar por encima, el botón que cobra se llena de ámbar fuerte y el
   texto pasa al color de la PÁGINA: 8,97:1 con la luz encendida, 11,41:1 con
   la luz apagada. Antes hacía falta una regla por casa. */
.boton--vende:hover{color:var(--sala)}
.barra-compra .barra-vende{background:var(--campo); border-color:var(--campo);
  color:var(--campo-tinta)}

/* ── 12. EL SUELO CLARO, UN PUNTO MÁS HONDO ────────────────────────────
   Mirado a 1440: con #F3EFE5 la galería de la ficha —que ocupa media
   pantalla— quedaba a 1,05:1 de la página y la prenda parecía flotar sobre la
   nada, sin caja. Se baja a #EFEADE: 1,10:1 contra la página y 1,21:1 contra
   la tarjeta —el plato se lee— y la prenda oscura sigue a 15,26:1 (negro) y
   12,63:1 (marino), que es lo único que no se puede perder. */
/* (el valor vive en tema.css: #E9E3D4, 1,28:1 contra la página blanca) */

/* ── 13. UN SOLO ÁMBAR POR PANTALLA ────────────────────────────────────
   Mirada la ficha con el botón de cobrar ya en ámbar: quedaban DOS bloques
   ámbar plenos en la misma columna —el precio arriba y el botón abajo— más el
   lavado del atajo de cantidad. Tres focos calientes es ninguno: el ojo no
   sabe dónde ir, y ésa es exactamente la sensación de «plantilla» que había
   que quitar.
   El precio pasa a bloque de tinta (16,44:1 sobre papel, 17,48:1 sobre negro).
   Sigue siendo el elemento más pesado de la columna —es un bloque de Anton a
   2,1 rem— pero deja de competir por el color. El ámbar se queda sólo donde
   se pulsa. */
/* REVERTIDO tras medirlo: esta regla ponía el precio en bloque de tinta, pero
   tema.css —que se carga después— agrupa `.precio--bloque` con `.globo` y
   `.dia-sello` como CAMPO ÁMBAR y le fija `color:var(--campo-tinta)`. Con el
   fondo puesto aquí en `--papel` (que en la cara clara es tinta casi negra) y
   el texto puesto allí en casi negro, el precio quedaba a 1,00:1 — el mismo
   color, invisible. Medido en las dos fichas.
   El campo ámbar es de tema.css y ahí se queda: el precio vuelve a ser el
   cartel amarillo que ya era. El único ámbar que se añade sigue siendo el
   botón que cobra, y ése no lo toca nadie más. */


/* ── 14. AIRE DEBAJO DEL TITULAR ───────────────────────────────────────
   Al soltar la interlínea para que quepan las tildes, un h1 de dos líneas
   creció 0,24 em por línea y se comió el hueco que lo separaba de la entradilla.
   Medido en /coleccion/poe: «EL CUERVO Y EL PÉNDULO» terminaba a 25 px del
   primer párrafo, y con una caja de Anton a 102 px eso se lee como si el texto
   colgara del titular. El margen se pone AQUÍ, en el titular, y no en cada
   página. */
.encabezado h1,.articulo-cab h1,.escenario h1{margin-bottom:.34em}
.encabezado h1 + p,.encabezado h1 + .lede{margin-top:0}
.texto-coleccion .cuerpo-texto:first-child,.encabezado .parrafo-ancho{margin-top:.3em}

/* ── 15. EL CARRITO VACÍO NO ES UN AGUJERO ─────────────────────────────
   Medido a 1440: entre el filete de la cabecera y el pie había 660 px con una
   sola frase de 15 px centrada en medio. Un carrito vacío es de las páginas
   más visitadas de cualquier tienda —se entra a mirar y se sale sin comprar—
   y dejarla en blanco es despedir al cliente. Se compone como una tarjeta de
   la casa, con el mismo filete y el mismo papel que todo lo demás, y con la
   acción dentro. */
.vacio{padding:clamp(34px,5vw,54px) clamp(20px,4vw,44px); margin:8px auto 0;
  max-width:520px; border:1px solid var(--borde); background:var(--sala-2);
  border-radius:2px; color:var(--luz-2); font-size:1rem; line-height:1.7}
.vacio a{display:inline-block; margin-top:14px; padding:13px 26px;
  border:1px solid var(--borde-vivo); color:var(--luz);
  font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; transition:.16s}
.vacio a:hover{background:var(--papel); color:var(--tinta); border-color:var(--papel)}

/* ── 16. LA TARJETA, CON CUERPO ────────────────────────────────────────
   Sobre papel el filete solo (1,43:1) deja la tarjeta plana. Una sombra corta
   y muy abierta —nada de resplandor— la separa de la hoja sin ensuciarla. */
.fotograma,.destacado,.cuenta-caja,.guardar-cesta{box-shadow:var(--sombra-1)}
.fotograma:hover,.destacado:hover{box-shadow:var(--sombra-3); border-color:var(--borde-vivo)}


/* ── 17. LOS 4 px QUE SE SALÍAN EN LA FICHA A 360 ──────────────────────
   Medido quitando antes las máscaras `html,body{overflow-x:hidden}` por JS,
   que si no lo tapan y no se ve: en /pieza/ a 360 px el documento medía 364 y
   el que sobresalía era DIV.galeria.

   Es el mismo carácter que ya costó las notas: `grid-template-columns:1fr`
   (estilo.css:505) es en realidad `minmax(auto,1fr)`, así que el ancho MÍNIMO
   del contenido —la tira de cinco miniaturas de 70 px con sus huecos: 382 px—
   manda sobre el de la pantalla y estira el documento entero. Con
   `minmax(0,1fr)` la columna puede encogerse y la tira envuelve, que es lo que
   ya hace por su cuenta con flex-wrap. */
@media (max-width:900px){
  .pieza-detalle,.legal,.articulo{grid-template-columns:minmax(0,1fr)}
  .pieza-detalle > *,.galeria,.galeria-tiras,.comprar{min-width:0}
}


/* ── 18. EL CARRITO: MINIATURA, PRECIO Y AIRE ──────────────────────────
   a) El suelo iba en el <td>, que mide lo que mida la fila (120 px de alto por
      88 de ancho), así que la prenda quedaba flotando en medio de un rectángulo
      de color con márgenes desiguales arriba y abajo. Ahora el suelo es una
      caja cuadrada del tamaño de la foto y la fila puede crecer sin arrastrarlo. */
.cel-img{width:104px; padding-left:0}
.cel-suelo{display:block; width:88px; aspect-ratio:1/1; border-radius:2px;
  border:1px solid var(--borde); overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.16)}
.cel-suelo img{width:100%; height:100%; object-fit:contain; padding:5%;
  background:none; border:0}
.panel-img.suelo{display:block; width:66px; aspect-ratio:1/1; border-radius:2px;
  border:1px solid var(--borde); overflow:hidden}
.panel-img.suelo img{width:100%; height:100%; object-fit:contain; padding:5%}

/* b) EL PRECIO EN ÁMBAR NO ES UN PRECIO, ES UN ENLACE. En el carrito había
      siete cifras en ámbar seguidas —unidad, línea, subtotal— y en la casa
      clara el ámbar de texto es un ocre oscuro que parece un enlace roto. El
      precio es el dato más duro de la página: va en tinta plena (16,44:1 sobre
      papel, 17,48:1 sobre negro) y lo que lo destaca es el cuerpo, no el color.
      El ámbar se queda donde se pulsa. */
.precio{color:var(--luz)}
.precio--grande{color:var(--luz); font-size:1.9rem; letter-spacing:-.01em}
.tabla-carrito .precio{font-size:.98rem}
.total .cartela{color:var(--luz-3)}
.total .cartela::before{background:var(--borde-vivo)}

/* c) 116 px entre el filete de la cabecera y la primera fila del pedido. En una
      página editorial ese aire es ritmo; en la que se paga es una pantalla en
      blanco antes de ver lo que llevas. */
:root[data-casa="papel"] .encabezado{margin-bottom:clamp(30px,4vw,56px)}
:root[data-casa="papel"] .tabla-carrito{margin-top:0}
.panel-txt b{color:var(--luz)}
.sug-precio{color:var(--luz)}


/* ── 19. DOS CONTRASTES DE TEXTO QUE NO LLEGABAN ───────────────────────
   Barridos los 4.210 nodos de texto de diez rutas midiendo cada uno contra su
   fondo real. Sólo dos fallaban de verdad (el resto eran color-mix mal leído
   por el medidor, corregido):

   a) La letra pequeña del boletín, escrita en rgba(var(--velo),.62) sobre el
      campo ámbar: 4,18:1 contra los 4,5 que pide un cuerpo de 12,3 px. Es el
      consentimiento de un alta por correo, o sea justo lo que no puede quedar
      en letra difícil de leer. A .74 sube a 5,53:1. */
.pie .boletin .letra-chica{color:rgba(var(--velo),.74)}
.pie .boletin .rotulo{color:rgba(var(--velo),.78)}

/* b) Las iniciales de los días en el calendario de estrenos: --luz-3 sobre
      --sala-3 da 3,90:1 a 9,9 px. Con --luz-2 sube a 6,05:1. */
.cal-dow{color:var(--luz-2)}

/* ─── AÑADIDO POR EL FRENTE «buscador» (19-08-2026) ──────────────────────
   Bloque al final y comentado porque esta hoja tiene dueño.
   La única pieza nueva del desplegable: la fila de salida al listado
   completo. Va separada por una línea porque no es un resultado más —es la
   puerta— y de una familia entera («camiseta») el desplegable enseña cinco
   de cincuenta: sin esta fila, lo que no cabe no existe. */
.sug--todo{border-top:1px solid var(--borde); justify-content:center;
  position:sticky; bottom:-6px; background:var(--sala-2)}
.sug--todo strong{color:var(--haz); font-size:.84rem}
/* Pegada abajo: el panel se corta a 540 px y con cuatro bloques la salida
   quedaba fuera de la vista, que es justo cuando hace falta. */
/* ─── FIN DEL AÑADIDO ─────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   AÑADIDO 19-08-2026 · composición por color en el bloque «La prenda».
   Cuando dentro de una misma prenda hay colores con composiciones distintas
   —los jaspeados llevan poliéster y los lisos no—, la ficha deja de dar una
   sola frase y pinta una línea por color. Cada línea es un <span> dentro del
   mismo <dd>, así que hay que forzarlos a bloque para que no se peguen.
   ───────────────────────────────────────────────────────────────────────── */
.comp-colores span{display:block}
.comp-colores span + span{margin-top:2px}
.comp-colores b{font-weight:600}

/* La separación entre los cuatro bloques de /buscar (piezas, obras,
   colecciones, notas). Sin esto iban pegados y no se veía dónde acaba lo que
   se vende y dónde empieza el catálogo. */
.bloque-buscar{margin-bottom:clamp(30px,4vw,54px)}
.bloque-buscar > h2{margin-bottom:16px}

/* ─────────────────────────────────────────────────────────────────────────
   AÑADIDO 19-08-2026 · la ficha dice QUÉ ES, no sólo qué dibujo lleva.
   Dueño de este fichero: OTRO. Por eso esto va al final y en bloque, sin
   tocar ni una regla de arriba.

   Medido contra la web viva antes de tocar nada: 70 fichas de producto
   activas y 21 <title> distintos —los 70 duplicados, todos por debajo de 30
   caracteres— porque el título y el h1 llevaban el nombre del DIBUJO y
   callaban la PRENDA. Aquí van sólo las clases nuevas que hacen falta para
   pintar eso: la segunda línea del h1 y las dos secciones de cuerpo propio
   de cada familia y de cada diseño (plantilla pieza.html, texto en
   app/fichas.py).
   ───────────────────────────────────────────────────────────────────────── */

/* La prenda, debajo del nombre del diseño. Va dentro del <h1> a propósito
   —quien llega de un buscador tiene que leer «taza» en la primera línea— pero
   NO puede competir con él: de ahí el salto de bloque, el cuerpo pequeño y la
   versalita. Sin `display:block` se pegaría al nombre en la misma línea. */
.pieza-titulo-forma{
  display:block; margin-top:.42em;
  font-size:.83rem; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--luz-3); line-height:1.45;
}

/* Las dos columnas de cuerpo: a la izquierda la familia (qué es esta taza),
   a la derecha el dibujo (qué se ve y de dónde sale). Se reparten a partes
   iguales en pantalla ancha y se apilan en cuanto no caben, sin media query:
   `minmax(min(30ch,100%),1fr)` hace justo eso y evita que una columna de
   texto se quede en veinte caracteres de ancho. */
.franja--ficha .ficha-columnas{
  display:grid; gap:clamp(26px,4vw,54px);
  grid-template-columns:repeat(auto-fit,minmax(min(34ch,100%),1fr));
}
.franja--ficha .ficha-bloque h2{margin:0 0 .55em}
.franja--ficha .ficha-bloque p{max-width:62ch; line-height:1.72; margin:0 0 1em}

/* La cita de la fuente. Es el argumento entero de la tienda, así que se
   marca con filete y no con cursiva: en un párrafo con títulos de obra
   entrecomillados, la cursiva se pelearía con ellos. */
.franja--ficha .ficha-origen{
  border-left:2px solid var(--borde); padding-left:clamp(12px,1.6vw,18px);
  color:var(--luz-3); font-size:.95rem;
}

/* «Este diseño también está en…». Enlaces sueltos separados por punto medio;
   se subrayan al pasar porque son navegación, no decoración. */
.ficha-hermanas{
  margin-top:1.4em; padding-top:1em; border-top:1px solid var(--borde);
  font-size:.92rem; line-height:1.9;
}
.ficha-hermanas b{display:block; margin-bottom:.15em; font-weight:600}
.ficha-hermanas a{color:var(--haz); text-decoration:none}
.ficha-hermanas a:hover,.ficha-hermanas a:focus-visible{text-decoration:underline}
/* ─── FIN DEL AÑADIDO ─────────────────────────────────────────────────── */

/* La procedencia escrita, dentro del bloque del dibujo. Es un dato con
   crédito (autor · fecha · museo), así que se pinta como un pie de obra y no
   como un párrafo más: cuerpo pequeño y el rótulo en negrita delante. */
.ficha-procedencia{
  margin-top:1.1em; font-size:.9rem; line-height:1.65; color:var(--luz-3);
}
/* --luz y NO --tinta. Aquí se escribió primero `color:var(--tinta)` y en tema
   claro --tinta es #FFFFFF: es la tinta de los chips INVERTIDOS, la que va
   sobre --papel (#14120E). Sobre el fondo normal habría dejado el rótulo en
   blanco sobre blanco. --luz es el texto fuerte de siempre. */
.ficha-procedencia b{color:var(--luz); font-weight:600}
.ficha-procedencia a{color:var(--haz)}

/* ═══════════════════════════════════════════════════════════════════════
   MOSAICO DE CARTELES — la foto de las notas de conjunto (19-08-2026)
   ═══════════════════════════════════════════════════════════════════════
   Añadido al final y en bloque, que es la norma de la casa cuando hay más
   manos trabajando sobre la hoja.

   QUÉ ES. Diez intenciones de nota —un año de cine, una semana de estrenos,
   un premio, una filmografía— no hablan de UNA película sino de un conjunto,
   así que no tienen cartel que enseñar: son 29 de las 111 publicadas. Su foto
   es un 2x2 compuesto con los carteles de las películas que la propia nota
   nombra, generado por app/fotos.py y servido por /img/mosaico/.

   NO NECESITA CAJA PROPIA. El mosaico se compone a 800x1200 —2:3 clavado, que
   es la misma proporción de un cartel— precisamente para poder entrar en
   «.fotograma-img--cartel» sin una sola regla nueva de encuadre. Lo único que
   cambia es el sello: el de un cartel dice «de la lista» y nombra una
   película; el del mosaico dice cuántas hay dentro, que es lo que la tarjeta
   promete.

   Y el velo de «.fotograma-img::after» sí se queda: aquí hay cuatro carteles
   con cuatro fondos distintos y sin él el rótulo de abajo se pierde sobre el
   que le toque. */
.fotograma-img--mosaico{background:var(--sala-3)}
/* El sello del mosaico va en ÁMBAR y no en verde: el verde («--verde-foto») es
   el de la PROCEDENCIA —«la fuente», material de museo con su crédito— y esto
   no es una procedencia, es un recuento. Que se distingan de un vistazo.

   El ámbar va escrito claro y NO por «--haz-fuerte»: en tema claro esa
   variable vale #6B3F0A, que es el ámbar para leer sobre papel, y aquí el
   rótulo va sobre el velo oscuro que pinta «.fotograma-img::after» encima de
   los carteles. Marrón oscuro sobre velo casi negro es el mismo fallo que ya
   está documentado tres bloques más arriba en tema.css. #F5BC63 sobre el velo
   al 86 % da 8,3:1, que pasa de sobra. */
.fotograma-img--mosaico .sello-fuente b{color:#F5BC63}

/* EN LA CABECERA DE LA NOTA NO HACE FALTA NADA. Se comprobó antes de escribir
   una regla: «.articulo-cartel img» (:1319) ya trae aspect-ratio:2/3 y
   object-fit:cover, que es exactamente la caja del mosaico, y «.articulo-cartel
   .pie-lista» (:1973) ya sabe pintar el pie. La única diferencia con el cartel
   al que sustituye es que el mosaico va en un <div> y no en un <a>: no cuelga
   de UNA película, así que no hay ficha a la que enlazar. */
/* ─── FIN DEL MOSAICO ─────────────────────────────────────────────────── */