*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  /*
    Sin esto los desplegables salen en blanco.

    Un `<select>` abierto lo pinta el sistema operativo, no la página: el panel y sus
    `<option>` usan la paleta nativa, y sin `color-scheme` el navegador supone que la
    página es clara. En un sitio negro sale una lista blanca con texto casi invisible — que es
    exactamente lo que Cristian describió en los filtros. Se declara una vez y arregla todos los
    controles del sitio de golpe.
  */
  color-scheme:dark;
}

/*
  Los controles heredan la letra y el color del sitio.

  No había NINGUNA regla para `select`, `option` ni `input`: cada pantalla se
  los pintaba en línea, y el panel abierto —que no es parte de la página— se escapaba igual. El fondo
  va opaco a propósito: con uno translúcido, el popup nativo compone contra el blanco del sistema y
  el problema vuelve.
*/
select,option,input,textarea,button{font-family:inherit;font-size:inherit;color:var(--token-ink-2)}
select,option{background-color:var(--token-bg-card)}
select:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid var(--token-accent);outline-offset:1px;
}
/*
  El armazón del cuerpo. La tipografía ya NO va aquí: sale del rol `cuerpo`, más abajo.

  Lo que se queda son las tres cosas que no son tipografía: el margen —un reset—, el fondo, y el
  suavizado de fuentes, que es una preferencia de renderizado del sitio entero y no algo que tenga
  sentido cambiar por rol.
*/
body{
  margin:0;
  background:var(--token-bg);
  /* Sin el -webkit-font-smoothing: antialiased. Adelgaza los trazos: en fondo claro se nota poco,
     pero sobre fondo oscuro deja la letra fina y temblorosa, que es justo lo que cansa al leer.
     Quitarlo devuelve el suavizado subpíxel del sistema, que es más grueso y más estable. */
  text-rendering:optimizeLegibility;
}

/* El contenedor raíz recorta con `clip`, NO con `hidden`.
   Con `hidden` el ancestro se convierte en contenedor de scroll y ROMPE el `position:sticky`
   de la cabecera. Es el aviso de implementación del diseño entregado. */
#raiz{overflow-x:clip}

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

/*
  De los encabezados sólo queda el margen, que es un reset y no tipografía.

  La familia, el peso, el espaciado y el ajuste de línea estaban aquí en un solo bloque para los
  seis, y encima cada página los volvía a escribir en línea con otros valores. Ahora los pone el rol
  de cada uno, uno por uno, desde `tipografia.ts`.
*/
h1,h2,h3,h4,h5,h6{margin:0}
p{margin:0;text-wrap:pretty}

/* El color del enlace sale del rol `enlace`; esto es sólo lo que pasa al pasar el ratón. */
a:hover{color:var(--token-accent-hover)}

/* El foco tiene que verse siempre: quien navega con teclado necesita saber dónde está. */
:focus-visible{outline:2px solid var(--token-accent);outline-offset:2px}

/* Las cifras, alineadas en columna. La familia la pone el rol `dato`. */
.mono{font-variant-numeric:tabular-nums}

/*
  Las tres clases de los roles que no son elementos.

  Aquí sólo va lo que NO es tipografía: la tipografía —familia, tamaño, peso, color, versalitas— la
  pone el rol desde `tipografia.ts`, y por eso se puede cambiar desde /admin/tipografia/ sin tocar
  código. Lo que se escribe aquí es la caja.
*/
.etiqueta{display:block}
.titulo-tarjeta{display:block}
.cita{margin:0}

/*
  ── La medida de línea ──────────────────────────────────────────────────────

  El ancho del sitio lo fija `Contenedor`; la medida de una columna de texto es cosa del bloque, y
  no son lo mismo. Una sinopsis a 1360px de ancho son 180 caracteres por línea: al llegar al final,
  el ojo no encuentra el principio de la siguiente y hay que volver a buscarlo. Entre 45 y 75 es
  donde se lee sin pensar.

  `prosa-corta` es para lo que se lee de un vistazo y no de corrido —la razón para verla—, donde
  una columna estrecha invita a leerlo entero.
*/
.prosa{max-width:58ch;text-wrap:pretty}
.prosa-corta{max-width:46ch;text-wrap:pretty}

/* ── Los roles tipográficos ──────────────────────────────────────────────────
   Salen de los tokens, no de aquí. Ver `tipografia.ts`: el mismo modelo alimenta estas reglas y
   los controles del panel, así que no pueden desincronizarse. */
h1{font-family:var(--token-tipo-h1-familia);font-size:var(--token-tipo-h1-tamano);font-weight:var(--token-tipo-h1-peso);line-height:var(--token-tipo-h1-interlineado);color:var(--token-tipo-h1-color);letter-spacing:var(--token-tipo-h1-espaciado-letra);text-wrap:var(--token-tipo-h1-ajuste)}
h2{font-family:var(--token-tipo-h2-familia);font-size:var(--token-tipo-h2-tamano);font-weight:var(--token-tipo-h2-peso);line-height:var(--token-tipo-h2-interlineado);color:var(--token-tipo-h2-color);letter-spacing:var(--token-tipo-h2-espaciado-letra);text-wrap:var(--token-tipo-h2-ajuste)}
h3{font-family:var(--token-tipo-h3-familia);font-size:var(--token-tipo-h3-tamano);font-weight:var(--token-tipo-h3-peso);line-height:var(--token-tipo-h3-interlineado);color:var(--token-tipo-h3-color);letter-spacing:var(--token-tipo-h3-espaciado-letra)}
h4{font-family:var(--token-tipo-h4-familia);font-size:var(--token-tipo-h4-tamano);font-weight:var(--token-tipo-h4-peso);line-height:var(--token-tipo-h4-interlineado);color:var(--token-tipo-h4-color);letter-spacing:var(--token-tipo-h4-espaciado-letra)}
h5{font-family:var(--token-tipo-h5-familia);font-size:var(--token-tipo-h5-tamano);font-weight:var(--token-tipo-h5-peso);line-height:var(--token-tipo-h5-interlineado);color:var(--token-tipo-h5-color);letter-spacing:var(--token-tipo-h5-espaciado-letra)}
h6{font-family:var(--token-tipo-h6-familia);font-size:var(--token-tipo-h6-tamano);font-weight:var(--token-tipo-h6-peso);line-height:var(--token-tipo-h6-interlineado);color:var(--token-tipo-h6-color)}
body{font-family:var(--token-tipo-cuerpo-familia);font-size:var(--token-tipo-cuerpo-tamano);font-weight:var(--token-tipo-cuerpo-peso);line-height:var(--token-tipo-cuerpo-interlineado);color:var(--token-tipo-cuerpo-color)}
:where(a){color:var(--token-tipo-enlace-color);text-decoration-line:var(--token-tipo-enlace-decoracion)}
.mono{font-family:var(--token-tipo-dato-familia)}
.etiqueta{font-family:var(--token-tipo-etiqueta-familia);font-size:var(--token-tipo-etiqueta-tamano);font-weight:var(--token-tipo-etiqueta-peso);line-height:var(--token-tipo-etiqueta-interlineado);color:var(--token-tipo-etiqueta-color);letter-spacing:var(--token-tipo-etiqueta-espaciado-letra);text-transform:var(--token-tipo-etiqueta-transformar)}
.titulo-tarjeta{font-family:var(--token-tipo-tarjeta-familia);font-size:var(--token-tipo-tarjeta-tamano);font-weight:var(--token-tipo-tarjeta-peso);line-height:var(--token-tipo-tarjeta-interlineado);color:var(--token-tipo-tarjeta-color);letter-spacing:var(--token-tipo-tarjeta-espaciado-letra)}
:where(.dedicatoria){font-family:var(--token-tipo-dedicatoria-familia);font-size:var(--token-tipo-dedicatoria-tamano);font-weight:var(--token-tipo-dedicatoria-peso);color:var(--token-tipo-dedicatoria-color);text-align:var(--token-tipo-dedicatoria-alineacion)}
.cita{font-size:var(--token-tipo-cita-tamano);font-weight:var(--token-tipo-cita-peso);line-height:var(--token-tipo-cita-interlineado);color:var(--token-tipo-cita-color);letter-spacing:var(--token-tipo-cita-espaciado-letra)}

/*
  Una fila de índice: nombre a la izquierda, cuenta a la derecha.

  Esto va aquí y no en un «style» en línea, que es lo normal en este proyecto, porque se repite
  doscientas veces en la misma página. Medido en r068: los atributos «style» eran el 23% del HTML de
  «/estudio/» —88 KB— y el payload de React los vuelve a mandar enteros, así que se pagaban dos
  veces. La regla del proyecto sigue siendo estilo en línea con tokens; la excepción es lo que se
  repite tantas veces que el propio marcado empieza a pesar.

  El color del borde izquierdo sí queda en línea: es distinto en cada fila.
*/
.fila-indice{
  display:flex;gap:10px;align-items:baseline;justify-content:space-between;
  padding:9px 12px;border:1px solid var(--token-card-line);
  border-left:2px solid var(--token-line);
  color:inherit;text-decoration:none;min-width:0;
}
.fila-indice > span{min-width:0}
.fila-indice b{display:block;font-size:16px;color:var(--token-card-ink);line-height:1.3;font-weight:400}
.fila-indice i{display:block;font-size:13px;color:var(--token-muted-2);margin-top:3px;font-style:normal}
.fila-indice em{
  font-family:var(--token-font-mono);font-variant-numeric:tabular-nums;font-style:normal;
  font-size:13px;color:var(--token-muted);flex:0 0 auto;
}

/*
  Una tarjeta: la caja genérica con borde que se repite por todo el sitio.

  `.fila-indice` es la variante compacta de una rejilla de términos; `.tarjeta` es la de bloque,
  con su título y su texto debajo — las puertas de `/explorar/`, las tarjetas de dato. Comparten la
  respuesta al ratón de abajo para que configurar «el hover de las tarjetas» signifique una sola cosa
  en todo el sitio y no siete parecidas.
*/
.tarjeta{
  display:block;padding:13px 15px;
  border:1px solid var(--token-card-line);
  color:inherit;text-decoration:none;
}
.tarjeta-titulo{font-size:15px;color:var(--token-card-ink)}

/*
  La respuesta al ratón de las rejillas de términos y de las tarjetas.

  Antes no había ninguna. `.fila-indice` fija `color:inherit` y sus hijos fijan su
  propio color, así que la única regla que existía —el `a:hover` global— quedaba anulada: una
  rejilla de mil cajas no decía cuál se iba a pulsar. Todo sale de tokens para que se configure desde
  /admin/diseno/ sin tocar código, que es lo que se pidió.

  `@media (hover:hover)` no es cosmético: en una pantalla táctil `:hover` se queda
  pegado después de tocar, y la caja seguiría iluminada hasta que se toque otra.
*/
.tarjeta,.fila-indice{
  background:var(--token-card-bg);
  transition:
    background-color var(--token-card-ms) ease,
    border-color var(--token-card-ms) ease,
    transform var(--token-card-ms) ease,
    box-shadow var(--token-card-ms) ease;
}
@media (hover:hover){
  .tarjeta:hover,.fila-indice:hover{
    background:var(--token-card-bg-hover);
    border-color:var(--token-card-line-hover);
    transform:translateY(var(--token-card-lift));
    box-shadow:var(--token-card-glow);
  }
  .fila-indice:hover b,.tarjeta:hover .tarjeta-titulo{color:var(--token-card-ink-hover)}
}
@media (prefers-reduced-motion:reduce){
  .tarjeta,.fila-indice{transition:none}
  .tarjeta:hover,.fila-indice:hover{transform:none}
}

/*
  El rail de filtros del catálogo.

  Tenía `position:sticky; top:96` puesto en línea y sin ninguna media query. En un teléfono eso
  hacía dos cosas mal a la vez: el rail caía DEBAJO de la lista —porque el contenedor es un flex con
  `wrap` y el rail es el que sobra— y encima se quedaba pegado ocupando pantalla mientras se hacía
  scroll. Aquí se arregla lo uno con `order:-1` y lo otro con `position:static`.

  Va en una clase y no en línea porque un estilo en línea no puede llevar media query: es la misma
  excepción que ya vale para `.fila-indice`.
*/
.rail-filtros{flex:0 0 220px;width:220px;position:sticky;top:96px}

/*
  En móvil, plegado.

  Seis filtros apilados encima de los resultados empujan la lista fuera de la pantalla, así que van
  dentro de un `<details>`, cerrado de inicio. En escritorio el `<summary>` se esconde y el cuerpo
  se fuerza a visible, de modo que el mismo marcado sirve para los dos sin JavaScript.

  Se apagan las DOS formas de esconder que usan los navegadores para un `<details>` cerrado: la
  vieja, sobre los hijos, y `::details-content`, que es la que usan los que ya siguen la
  especificación nueva. La segunda va en su propia regla a propósito: un navegador que no conozca el
  pseudoelemento tira esa regla entera y se queda con la primera, en vez de tirar las dos.
*/
/*
  El buscador se encoge antes que desbordar.

  Con un ancho fijo era el primero en empujar al resto fuera de la pantalla en cuanto la barra se
  quedaba corta — y lo hacía en silencio, porque lo que se salía era él mismo. Cediendo sitio pierde
  legibilidad poco a poco, que es un fallo que se ve y se aguanta.
*/
@media (min-width:901px){
  header .buscador{flex:0 1 260px;min-width:150px}
  header .buscador input{width:100%!important}
}

@media (min-width:901px){
  .filtros > summary{display:none}
  .filtros > .filtros-cuerpo{display:block}
}
@media (min-width:901px){
  .filtros::details-content{content-visibility:visible;block-size:auto}
}
@media (max-width:900px){
  .rail-filtros{position:static;top:auto;flex:1 1 100%;width:100%;order:-1}
  .filtros{border:1px solid var(--token-line);border-radius:var(--token-radius)}
  .filtros > summary{
    cursor:pointer;padding:11px 14px;font-size:15px;color:var(--token-ink-2);
    display:flex;justify-content:space-between;align-items:center;gap:10px;
  }
  .filtros[open] > summary{border-bottom:1px solid var(--token-line-hair)}
  .filtros > .filtros-cuerpo{padding:14px}
}

/* El botón de «Cargar más»: ancho, centrado y del tamaño de un dedo. */
.cargar-mas{
  display:block;width:100%;max-width:320px;margin:34px auto 0;
  padding:13px 20px;text-align:center;
  border:1px solid var(--token-accent-line);background:var(--token-accent-row);
  color:var(--token-accent);border-radius:var(--token-radius);
  font-size:16px;text-decoration:none;
}
@media (hover:hover){
  .cargar-mas:hover{background:var(--token-accent-fill);border-color:var(--token-accent)}
}

.contenedor{
  max-width:var(--token-content-max);
  margin:0 auto;
  padding-inline:var(--token-content-pad);
}

/* ───────────────────────────────────────────────────────────────────────────
   LA CABECERA EN UN TELÉFONO

   Medido en r069 con un iPhone de 390 px: la barra de navegación ocupaba 506 px,
   y como «#raiz» recorta con «clip» para no romper el «sticky», los tres últimos
   enlaces —«¿Qué veo hoy?», «El mapa» y «Blog»— quedaban fuera de la pantalla y
   eran literalmente inalcanzables. No se desbordaba: se cortaban. Por eso no lo
   cazó ninguna prueba de desbordamiento, y por eso nadie lo habría visto sin
   abrir el sitio en un teléfono.

   Se resuelve dejando que la barra ruede en horizontal, no con un menú de
   hamburguesa: un menú son estado, JavaScript, una isla más y un clic extra para
   todo el mundo. Rodando, los cinco enlaces siguen a la vista y a un dedo de
   distancia. La barra de scroll se esconde porque mide dos píxeles y afea; el
   degradado del borde derecho es el que avisa de que hay más.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  /*
    Dos filas: identidad arriba, navegación debajo.

    El primer intento fue dejar la barra rodando en la misma fila, y midiéndolo se
    vio que no servía: el logotipo ocupa 176 de los 390 px, así que a la barra le
    quedaban CINCUENTA Y UN píxeles de ancho visible. Rodaba, sí, pero enseñando
    un enlace y medio. Con dos filas caben los cinco casi enteros y el que sobra
    se alcanza deslizando.
  */
  /*
    Dos filas y sólo dos: el logotipo con su contador y su botón de menú arriba, y el buscador
    debajo a todo el ancho.

    Antes eran cuatro —logotipo, barra de navegación deslizante, buscador y una tercera fila con el
    selector de títulos y «Entrar»—, 174 píxeles de cabecera antes de ver una sola película, y la
    barra cortada por la mitad enseñando «Blo…». Lo que se hace ahora es lo que hace cualquier sitio
    en un teléfono: lo que no cabe se guarda detrás de un botón, y lo que se usa —buscar— se queda.
  */
  header{
    height:auto!important;
    flex-wrap:wrap;
    align-items:center!important;
    gap:10px!important;
    padding-block:10px!important;
  }

  /*
    El orden de las dos filas, explícito.

    Arriba el logotipo, el contador y el botón del menú; abajo el buscador a todo el ancho. Sin
    estos order el buscador se colaba en la primera fila y empujaba el botón, que es como quedó
    al primer intento.
  */
  header > a:first-child{order:0}
  header > .mono{order:1;margin-left:auto}
  header .menu{order:2}

  /*
    Con logotipo, en el teléfono no se repite el nombre escrito.

    Puestos los dos —que es lo que pide el modo «ambos»— la cabecera se iba a 156px: el logotipo
    ocupa su ancho, el nombre el suyo, y entre los dos empujan el contador a una tercera fila. En
    una pantalla estrecha el logotipo ya dice de quién es el sitio, y el nombre sigue en su texto
    alternativo para quien no lo ve.
  */
  .marca-logo + .marca-texto{display:none}
  .marca-logo{height:28px}

  /* El buscador ocupa la segunda fila entera. */
  header .buscador{order:3;flex-basis:100%}
  header .buscador input{width:100%!important}

  /* Cuarenta píxeles de separación son un tercio de un teléfono. */
  .ficha-columnas{gap:26px!important}

  /* Los márgenes de escritorio se comen media pantalla en un teléfono. */
  :root{--token-content-pad:18px}

  /*
    El suelo del texto pequeño, y el único sitio del proyecto donde hay «!important».

    El diseño usa 9 y 10 px para los datos en monoespaciada. A 1440 px son una nota
    al pie; en un teléfono son ilegibles sin acercar los dedos, y quien tiene que
    acercar para leer un año se va.

    Va con «!important» porque **no hay otra manera**. En este proyecto los estilos
    van en línea a propósito —tokens y «style», sin hojas por componente— y un
    atributo «style» gana a cualquier clase por especificidad. La primera versión de
    esta regla se escribió sin él y no hacía absolutamente nada: los cincuenta
    textos de 10 px seguían midiendo 10 px, y sólo se vio volviendo a medir.

    El mandamiento que prohíbe «!important» habla de los estilos por defecto del
    texto enriquecido, que van con «:where()» para que el formato del editor gane.
    Esto es lo contrario y por eso vale: una consulta de medios que corrige un
    tamaño para que se pueda leer, acotada a móvil y a nada más.
  */
  .mono{font-size:13px!important}
  .mono b,.mono strong,.mono span{font-size:inherit}
}

/* ───────────────────────────────────────────────────────────────────────────
   TEXTO ENRIQUECIDO — la regla que pidió el autor.

   Los estilos por defecto van con `:where()`, que aporta especificidad CERO. Así, cualquier
   formato que venga dentro del HTML del bloque —una negrita, un subrayado, un color puesto en el
   editor— GANA siempre, sin necesidad de un solo `!important`.

   Es la diferencia entre «el estilo por defecto se aplica salvo que hayas decidido otra cosa» y
   «el estilo por defecto pisa lo que decidiste». Queremos lo primero.
   ─────────────────────────────────────────────────────────────────────────── */
.rt :where(p){margin-block:0 1em;color:var(--token-ink-2)}
.rt :where(p:last-child){margin-bottom:0}
.rt :where(h2){font-size:28px;margin-block:1.4em .5em}
.rt :where(h3){font-size:22px;margin-block:1.3em .5em}
.rt :where(h4){font-size:18px;margin-block:1.2em .5em}
.rt :where(ul,ol){margin-block:0 1em;padding-left:1.4em;color:var(--token-ink-2)}
.rt :where(li){margin-block:.3em}
.rt :where(blockquote){
  margin:1.2em 0;
  padding-left:18px;
  border-left:2px solid var(--token-accent);
  font-family:var(--token-font-heading);
  /* Sin cursiva: en una grotesca no crea jerarquía, sólo inclina. El peso hace el trabajo. */
  font-weight:600;
  font-size:24px;
  line-height:1.45;
  color:var(--token-ink);
}
.rt :where(a){color:var(--token-accent);text-decoration:underline;text-underline-offset:2px}
.rt :where(strong,b){font-weight:600;color:var(--token-ink)}
/*
  `em` e `i` NO llevan regla, y eso es a propósito.

  El navegador ya los pinta en cursiva por su hoja de usuario, así que una cursiva escrita a mano en
  una reseña se sigue viendo. Lo que se quita es que el **diseño** use cursiva por su cuenta; lo que
  escriba Cristian en el editor manda siempre (mandamiento 7).
*/
.rt :where(code,pre){font-family:var(--token-font-mono);font-size:.9em}
.rt :where(pre){
  background:var(--token-fill-soft);
  padding:14px 16px;
  overflow-x:auto;
  border:1px solid var(--token-line-hair);
}
.rt :where(hr){border:0;border-top:1px solid var(--token-line-faint);margin:2em 0}

/*
  El ritmo de la ficha.

  Cristian lo dijo así: «el contenido se ve demasiado plano o uniforme, es cansado de leer porque no
  hay descansos visuales». Tenía razón y la causa era literal: todos los bloques eran `h2` + texto
  con el mismo margen, el mismo tamaño y el mismo color, uno detrás de otro. Sin nada que marque
  dónde acaba uno y empieza el siguiente, la vista no encuentra dónde descansar y se lee como un
  muro.

  Los descansos se hacen con lo que ya tiene este diseño —filetes, monoespaciada, el acento— y no
  añadiendo cajas: cinco cajas seguidas vuelven a ser un muro, sólo que con bordes.
*/

/* El filete de encima de cada sección, con un tramo de acento a la izquierda. Es la señal de «aquí
   empieza otra cosa» más barata que existe: un pixel de alto. */
.bloque-ficha{position:relative;padding-top:22px}
.bloque-ficha::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,var(--token-accent-line) 0 44px,var(--token-line-hair) 44px);
}
/* El primero no lleva filete: debajo de la barra de calificaciones ya hay un borde, y dos líneas
   pegadas se leen como un error de maquetación. */
.bloque-ficha:first-of-type{padding-top:0}
.bloque-ficha:first-of-type::before{display:none}

/*
  La entradilla: el primer párrafo del texto principal, más grande.

  Va con `:where()` (mandamiento 7, especificidad cero) para que si alguien puso una negrita o un
  color desde el editor, eso siga ganando.
*/
.rt-entradilla :where(p:first-child){
  font-size:19px;line-height:1.7;color:var(--token-ink);
}

/* La sinopsis en inglés: mismo texto, otro peso visual. No compite con la española. */
.rt-secundario :where(p){font-size:16px;color:var(--token-ink-4);line-height:1.65}

/* La cita: el único sitio de la ficha donde la serif va grande y suelta. Es el respiro. */
/* La caja de la cita de la ficha. La letra la pone el rol `cita` a través de la clase. */
.cita-ficha{
  margin:34px 0;padding:0 0 0 20px;
  border-left:2px solid var(--token-accent);
}

/*
  Los enlaces del reparto y de las taxonomías.

  No respondían al ratón: llevan su propio `color` en línea, y eso gana al `a:hover` global. En un
  bloque con cuarenta nombres seguidos, no saber cuál se va a pulsar es el mismo problema que tenían
  las rejillas de términos.
*/
/* El color base del enlace de reparto. Aquí y no en línea: en línea le ganaba a su propio :hover. */
/*
  Los enlaces de la cabecera y del pie.

  No tenían ningún estado de hover: en escritorio, pasar el ratón por encima no decía nada, y en una
  barra de cinco enlaces eso es la única señal de que se puede pulsar. El subrayado va con
  text-underline-offset para que no corte las descendentes, y el color sube a ink.
*/
/*
  El bloque de WatchAny, bajo «dónde verla».

  Va recuadrado en el color de acento porque es una salida a otro sitio y no una plataforma más de
  la lista de arriba: si se pintara igual que las demás, parecería que la película está ahí. El
  nombre en ámbar es el único de la ficha que no es ni una nota ni dinero, y se justifica por lo
  mismo: es una marca, no un dato.
*/
.bloque-watchany{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding:11px 13px;
  border:1px solid var(--token-accent-line);border-radius:var(--token-radius);
  background:var(--token-accent-fill);
  text-decoration:none;transition:border-color 120ms ease,background 120ms ease;
}
.bloque-watchany:hover{border-color:var(--token-accent);background:var(--token-accent-row)}
.bloque-watchany-pregunta{display:block;font-size:15px;color:var(--token-ink-2);line-height:1.35}
.bloque-watchany-nota{display:block;margin-top:4px;font-size:13px;color:var(--token-muted);line-height:1.45}
.bloque-watchany-marca{
  flex-shrink:0;font-family:var(--token-font-mono);font-size:14px;font-weight:600;
  color:var(--token-boxoffice);text-decoration:underline;text-underline-offset:3px;
}
@media (prefers-reduced-motion:reduce){.bloque-watchany{transition:none}}

.enlace-barra{color:var(--token-ink-4);text-decoration:none;transition:color 120ms ease}
.enlace-barra:hover,.enlace-barra:focus-visible{color:var(--token-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--token-accent)}
.enlace-barra[aria-current="page"]{color:var(--token-ink)}
@media (prefers-reduced-motion:reduce){.enlace-barra{transition:none}}

/*
  ── El menú de la cabecera ──────────────────────────────────────────────────

  Un <details> y no un botón con JavaScript, igual que el rail de filtros del catálogo: el
  navegador ya sabe abrir y cerrar, recuerda el estado y lo hace accesible con teclado. Cero bytes
  de script para algo que el HTML resuelve.

  En escritorio el <details> **desaparece de la maqueta** con display: contents: sus hijos —la
  navegación, el selector de títulos y la cuenta— pasan a ser hijos directos del <header> flex,
  exactamente como estaban antes. En móvil vuelve a ser una caja con su botón y su panel.
*/
/*
  La marca de la cabecera: el logotipo subido y el nombre escrito.

  Los dos con su aspecto EN LA CLASE y no en línea, porque el teléfono necesita cambiarlos —el
  logotipo se achica y el nombre se esconde— y un estilo en línea gana siempre a una regla. Ya pasó
  con los chips, con el reparto y con los enlaces de esta misma barra.
*/
.marca-logo{height:34px;width:auto;max-width:220px;object-fit:contain;display:block}
.marca-texto{display:flex;align-items:baseline;gap:7px}

.menu{position:relative}
.menu-boton{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-left:auto;
  border:1px solid var(--token-line);border-radius:var(--token-radius);
  color:var(--token-ink-3);cursor:pointer;list-style:none;
}
.menu-boton::-webkit-details-marker{display:none}
.menu-boton:hover{color:var(--token-ink);border-color:var(--token-line-strong)}
.menu[open] .menu-boton{color:var(--token-accent);border-color:var(--token-accent-line)}

.menu-panel{
  position:absolute;top:calc(100% + 9px);right:0;z-index:60;
  min-width:210px;display:flex;flex-direction:column;gap:2px;
  padding:10px;
  background:var(--token-bg-panel);
  border:1px solid var(--token-line);border-radius:var(--token-radius);
}
.menu-panel nav{display:flex;flex-direction:column;gap:2px}
.menu-panel nav a{white-space:nowrap}
.menu-panel a{padding:9px 10px;border-radius:var(--token-radius)}
.menu-panel a:hover{background:var(--token-fill-soft)}
.menu-panel > *:not(nav){padding-top:8px;border-top:1px solid var(--token-line-hair);margin-top:6px}

/*
  A partir de aquí la navegación cabe en la barra. Antes eran 1120px y con cinco enlaces era
  verdad; con el sexto —la línea de tiempo— y un buscador de 260px dejó de serlo: a 1120 la
  cabecera se desbordaba 325 píxeles y el buscador salía fuera de la pantalla. Por debajo de este
  ancho el menú plegable hace su trabajo, que para eso está.

  Medido en el navegador de 390 a 1600: por debajo de 1400 la fila no cabe sin partir el selector de
  títulos en dos líneas, y una cabecera torcida es peor que un menú plegable.
*/
@media (min-width:1420px){
  /*
    En escritorio el menú deja de ser un menú: la navegación vuelve a la barra.

    Y NO con display:contents sobre el <details>, que fue el primer intento y no funciona: un
    <details> guarda sus hijos en un árbol interno (::details-content), así que quitarle la caja al
    elemento no promueve nada — la navegación quedaba apilada en una columna de 441px. Lo que sí
    funciona es tratarlo como lo que es, un contenedor: se le da flex y se le pide al contenido
    interno que se vea y crezca. Es lo mismo que hace el rail de filtros del catálogo.
  */
  .menu{display:flex;flex:1;position:static}
  .menu-boton{display:none}
  .menu::details-content{content-visibility:visible;block-size:auto;display:flex;flex:1}

  .menu-panel{
    position:static;flex-direction:row;align-items:center;gap:22px;flex:1;
    background:none;border:0;padding:0;min-width:0;
  }
  .menu-panel nav{flex-direction:row;gap:22px;flex:1}
  .menu-panel a{padding:0}
  .menu-panel a:hover{background:none}
  .menu-panel > *:not(nav){padding-top:0;border-top:0;margin-top:0}
}

/*
  Un enlace dentro de un texto tiene que verse que es un enlace, sin pasar el ratón.

  Esto valía color:var(--token-ink-2) y text-decoration:none: exactamente el mismo color y la
  misma forma que el texto de al lado. Medido en el navegador comparando cada enlace con el color de
  su párrafo: **54 en una ficha** —todo el reparto y todas las taxonomías— a distancia cero, y sesenta
  más en el historial. Se veía en la cabecera de la ficha: «Domhnall Gleeson, Rachel McAdams, Bill
  Nighy» debajo de la etiqueta REPARTO, sin nada que dijera que se puede pulsar en cada nombre.
  Descubrirlo dependía de pasar el ratón por encima, y en un teléfono no hay ratón que pasar.

  La solución no es pintarlos todos del color de acento: cuarenta nombres en verde en una columna es
  peor que ninguno. Es un subrayado **fino y en el acento a un 30% de opacidad**, que a tamaño de
  lectura se lee como «esto se pulsa» sin gritar, y que al pasar el ratón se enciende entero. El
  color sube de ink-2 a ink para separarlo del texto corrido sin cambiarle la voz.

  .enlace-texto es el mismo trato para cualquier enlace que viva dentro de una frase o de una
  lista de datos —el historial, los enlaces externos de la ficha—. Lo que NO lo lleva son los enlaces
  que ya se ven: las tarjetas, los chips, los botones y la navegación, que tienen su propia forma.
*/
.enlace-ficha,.enlace-texto{
  color:var(--token-ink);
  text-decoration:underline;
  text-decoration-color:var(--token-accent-line);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color 120ms ease,text-decoration-color 120ms ease;
}
@media (prefers-reduced-motion:reduce){.enlace-ficha,.enlace-texto{transition:none}}
@media (hover:hover){
  .enlace-ficha:hover,.enlace-texto:hover{
    color:var(--token-accent);text-decoration-color:var(--token-accent);
  }
  .chip:hover{
    border-color:var(--token-accent-line);background:var(--token-accent-fill);color:var(--token-accent);
  }
}
/*
  El chip: una etiqueta clicable. Género, país, década, formato, premio.

  Todo su aspecto vive aquí y NADA en línea, y eso no es estilo: es lo que hace que el `:hover` de
  arriba pueda aplicarse. En r096 el componente ponía el borde, el fondo y el color en línea y a la
  vez se añadió la regla de hover; un estilo en línea gana siempre a una clase, así que la regla
  estaba escrita y no se aplicaba en ninguna parte. Se notó en la portada, que es donde hay más.

  Los colores salen de los tokens de tarjeta, así que los chips y las rejillas de términos responden
  igual y se configuran juntos desde /admin/diseno/.
*/
.chip{
  display:inline-block;padding:4px 10px;font-size:14px;text-decoration:none;
  border:1px solid var(--token-card-line);
  background:transparent;
  color:var(--token-card-ink);
  border-radius:var(--token-radius);
  transition:
    background-color var(--token-card-ms) ease,
    border-color var(--token-card-ms) ease,
    color var(--token-card-ms) ease;
}
/*
  Las taxonomías de la ficha: se resalta el TÍTULO, no la caja de cada valor.

  Antes, cada valor iba en un chip con su borde, y el título de la sección era una etiqueta de once
  píxeles en mayúsculas y en gris. O sea que lo que saltaba a la vista eran diez rectángulos iguales
  y lo que costaba encontrar era de qué iban: «¿esto son géneros o países?». Cristian lo pidió al
  revés y tiene razón — el título es la pregunta y los valores son la respuesta, y una respuesta no
  necesita marco.

  Los valores pasan a ser enlaces de texto separados por comas, con el subrayado de .enlace-texto.
  Ocupan la mitad, se leen de corrido, y siguen distinguiéndose del texto que no es enlace.
*/
.tax-titulo{
  font-family:var(--token-font-heading);
  font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.25;
  color:var(--token-ink);margin-bottom:7px;
}
.tax-valores{font-size:15px;line-height:1.8;color:var(--token-muted-2)}
/* El término principal de la ficha, el que ordena el catálogo: en negrita, sin caja. */
.tax-valores .tax-principal{font-weight:600}

/* El del término principal de la ficha, que ya viene marcado sin que haya que pasar el ratón. */
.chip-acento{
  border-color:var(--token-accent-line);
  background:var(--token-accent-fill);
  color:var(--token-accent);
}
@media (prefers-reduced-motion:reduce){.chip{transition:none}}

/*
  El conmutador: una fila de opciones donde una está elegida.

  El selector de vista del catálogo, las pestañas de la cuenta, los filtros del diario, las opciones
  de «¿qué veo hoy?». Todos estaban escritos en línea, cada uno con sus propios colores, y ninguno
  reaccionaba al ratón — mismo motivo que los chips: el estilo en línea gana a la clase, así que ni
  siquiera se podía arreglar añadiendo una regla.

  La opción elegida NO cambia al pasar el ratón: ya está marcada, e iluminarla más haría dudar de
  cuál está puesta.
*/
.opcion{
  padding:6px 12px;font-size:14px;text-decoration:none;
  border:1px solid var(--token-card-line);
  background:transparent;
  color:var(--token-ink-4);
  border-radius:var(--token-radius);
  transition:
    background-color var(--token-card-ms) ease,
    border-color var(--token-card-ms) ease,
    color var(--token-card-ms) ease;
}
.opcion-activa{
  border-color:var(--token-accent-line);
  background:var(--token-accent-row);
  color:var(--token-accent);
}
@media (hover:hover){
  .opcion:not(.opcion-activa):hover{
    border-color:var(--token-card-line-hover);color:var(--token-card-ink-hover);
  }
}
@media (prefers-reduced-motion:reduce){.opcion{transition:none}}

/* La dedicatoria del pie: lo más discreto del sitio, hasta que se pasa el ratón por encima. */
/*
  La dedicatoria ya no fija aquí su aspecto: lo pone el rol «Dedicatoria del pie», que se edita
  desde /admin/tipografia/. Lo único que queda es lo que no es tipografía —cómo se ilumina al pasar
  el ratón—, porque eso no es un rol, es un comportamiento.
*/
.dedicatoria{
  transition:color 200ms ease;
}
@media (hover:hover){.dedicatoria:hover{color:var(--token-accent-soft)}}
@media (prefers-reduced-motion:reduce){.dedicatoria{transition:none}}

/*
  Las cifras de la portada.

  Bloques grandes y clicables. El número va en la serif de los títulos, no en la monoespaciada: aquí
  la cifra es un titular, no un dato que se compare en columna con otro. Comparten los tokens de
  tarjeta, así que reaccionan al ratón como todo lo demás y se configuran desde el mismo sitio.
*/
.cifra-portada{
  display:block;padding:20px 18px;text-decoration:none;
  border:1px solid var(--token-card-line);
  background:var(--token-card-bg);
  transition:
    background-color var(--token-card-ms) ease,
    border-color var(--token-card-ms) ease,
    transform var(--token-card-ms) ease;
}
.cifra-portada-numero{
  display:block;font-family:var(--token-font-heading);font-size:clamp(24px,3.4vw,38px);
  font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--token-ink);
  font-variant-numeric:tabular-nums;
}
.cifra-portada-texto{
  display:block;font-size:13px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--token-muted);margin-top:10px;
}
@media (hover:hover){
  .cifra-portada:hover{
    background:var(--token-card-bg-hover);
    border-color:var(--token-card-line-hover);
    transform:translateY(var(--token-card-lift));
  }
  .cifra-portada:hover .cifra-portada-numero{color:var(--token-card-ink-hover)}
}
@media (prefers-reduced-motion:reduce){
  .cifra-portada{transition:none}
  .cifra-portada:hover{transform:none}
}

/*
  El título de la ficha recortado sobre la imagen.

  Es el efecto que Cristian señaló en PopcornMovies: la imagen de la película se ve **dentro** de las
  letras del título, y se mueve despacio. Se hace con `background-clip:text` y el texto en
  transparente, así que las letras son el recorte y no hay ninguna imagen encima.

  Sigue siendo texto de verdad: se selecciona, se copia, lo lee un lector de pantalla y Google lo
  indexa como el `<h1>` que es. Ésa es la diferencia entre esto y poner el título como imagen.

  `background-size` al 200% y el vaivén de `background-position`: mover la imagen dentro de las
  letras necesita que sobre imagen a los lados, o al llegar al borde se vería el corte.
*/
.titulo-mascara{
  background-image:var(--titulo-imagen);
  background-size:200% auto;
  background-position:center;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:titulo-vaiven 18s ease-in-out infinite alternate;
}
@keyframes titulo-vaiven{
  from{background-position:22% 40%}
  to{background-position:78% 60%}
}

/*
  El respaldo, que aquí no es opcional.

  Si el navegador no sabe recortar el fondo con el texto, `color:transparent` sí lo entiende y el
  título desaparecería del todo: el h1 de la página, en blanco. Con `@supports` sólo se aplica el
  recorte donde funciona, y en el resto queda el título normal.
*/
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .titulo-mascara{
    background-image:none;color:var(--token-ink);-webkit-text-fill-color:currentColor;animation:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .titulo-mascara{animation:none}
}

/* El isologo: alto contenido, ancho el que salga. El máximo evita que un logo enorme se coma la
   cabecera entera en una pantalla ancha. */
.titulo-isologo{
  display:block;height:clamp(56px,9vw,116px);width:auto;max-width:min(100%,620px);object-fit:contain;
}
.rt :where(img){margin-block:1em}
.rt :where(figure){margin:1.5em 0}
.rt :where(figcaption){
  font-size:14px;
  color:var(--token-muted);
  margin-top:8px;
}
.rt :where(table){
  width:100%;
  border-collapse:collapse;
  margin-block:1.2em;
  font-size:16px;
}
.rt :where(th,td){
  border-bottom:1px solid var(--token-line-hair);
  padding:8px 10px;
  text-align:left;
}
.rt :where(th){color:var(--token-muted);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.12em}
.rt :where(iframe){width:100%;aspect-ratio:16/9;border:0;margin-block:1.2em}

/* Clases que el editor sí puede usar (las únicas que sobreviven al saneado). */
.rt .rt-destacado{color:var(--token-accent)}
.rt .rt-nota{font-size:15px;color:var(--token-muted)}
.rt .rt-cita{font-family:var(--token-font-heading);font-weight:600}
.rt .alignleft{text-align:left}
.rt .aligncenter{text-align:center}
.rt .alignright{text-align:right}

/* ═══════════════════════════════════════════════════════════════════════════
   EL PANEL

   Todo lo de aquí abajo cuelga de `.panel`, que se pone una vez en el armazón de
   /admin/. No es manía de encapsular: es lo que garantiza que el significado que el acento tiene
   dentro del panel —acción principal y estado correcto— **no se escape** a una pantalla pública,
   donde el mismo cian quiere decir «esto es mío y esto se pulsa».

   El panel es más callado que el sitio. El sitio se mira; el panel se usa ocho horas seguidas. De
   ahí las tres reglas de las que sale todo lo demás:

     · base de 14px en vez de 16,
     · filas de 34px y celdas de 8×12, que es la densidad a la que caben treinta películas sin
       hacer scroll,
     · y **todo dato en monoespaciada**, porque en el panel casi todo es un dato que se compara
       con el de la fila de arriba.

   Y el titular de una pantalla de panel es un h3 disfrazado: 25/800. Un h1 de 88px es correcto en
   una portada y ridículo encima de una tabla de redirecciones — que es exactamente lo que quedó
   en las 40 pantallas cuando la r102 subió la escala del sitio público.
   ═══════════════════════════════════════════════════════════════════════════ */
.panel{font-size:16px}

/* Sólo el tamaño y el peso: el color, la familia y el interlineado siguen saliendo del rol, así
   que /admin/tipografia/ los sigue gobernando. */
.panel h1{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.panel h2{font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.panel h3{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.panel h4{font-size:14px;font-weight:700;letter-spacing:0;line-height:1.35}

/* ── 1 · El armazón ────────────────────────────────────────────────────────── */
.panel-barra{
  display:flex;align-items:center;gap:26px;
  height:var(--token-header-height);padding:0 24px;
  background:var(--token-bg-panel);
  border-bottom:1px solid var(--token-line-soft);
}
.panel-marca{
  font-family:var(--token-font-heading);font-size:19px;font-weight:900;
  letter-spacing:-.02em;color:var(--token-ink);text-decoration:none;flex:0 0 auto;
}
.panel-marca span{font-weight:400;color:var(--token-muted)}
.panel-nav{display:flex;align-items:center;gap:18px;flex:1;min-width:0}

/*
  El enlace de la barra, con su marca de activo.

  No existía **ninguna**: los siete enlaces de la barra y los veintisiete del desplegable se
  pintaban idénticos estuvieras donde estuvieras. Una navegación que no dice dónde estás obliga a
  leer el título de la pantalla para saberlo, y eso es trabajo que debería hacer la barra.

  El filete va debajo y no es un fondo: dentro del panel el acento significa «acción principal», y
  un enlace con fondo cian se lee como un botón.
*/
.panel-enlace{
  font-size:15px;color:var(--token-ink-4);text-decoration:none;white-space:nowrap;
  padding-bottom:3px;border-bottom:1px solid transparent;
}
.panel-enlace-activo{color:var(--token-accent);border-bottom-color:var(--token-accent)}
@media (hover:hover){.panel-enlace:not(.panel-enlace-activo):hover{color:var(--token-ink-2)}}

.panel-grupo{
  font-family:var(--token-font-mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--token-muted-2);
}
.panel-salida{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--token-font-body);font-size:14px;color:var(--token-muted);
}

/*
  Un solo ancho, y una excepción con nombre.

  Había doce anchos distintos entre 560 y 1200 para cuarenta pantallas, así que cambiar de pantalla
  movía el margen izquierdo y la vista tenía que volver a buscar dónde empieza el texto. Ahora son
  dos: el normal, y `.panel-estrecho` para las que son un formulario y nada más — ahí un campo de
  1180px de ancho no es generoso, es incómodo de rellenar.
*/
/* El panel acompaña al sitio: si el público se ensancha y esto no, las tablas del panel —que son
   lo más ancho que hay— siguen apretadas sin motivo. */
.panel-contenido{flex:1;width:100%;max-width:1360px;margin:0 auto;padding:30px 24px 80px}
.panel-estrecho{max-width:860px;margin-inline:auto}

/* ── 2 · La cabecera de pantalla ───────────────────────────────────────────── */
/*
  El filete va SIEMPRE debajo del título, nunca encima del contenido. Dos pantallas vecinas lo
  dibujaban en lados opuestos y al navegar entre ellas parecía que la página había cambiado de
  maquetación.

  `.cabecera-acciones` es la ranura que no existía. Sin ella, las acciones de pantalla acabaron
  en cinco sitios distintos, y una de ellas con un `marginTop:-14` para deshacer el margen que
  ponía la propia cabecera.
*/
.cabecera-pantalla{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:13px;margin-bottom:22px;
  border-bottom:1px solid var(--token-line-hair);
}
.cabecera-pantalla > div{min-width:0}
.cabecera-sub{margin-top:6px;font-size:15px;color:var(--token-muted);max-width:70ch}
.cabecera-acciones{display:flex;align-items:center;gap:9px;flex-wrap:wrap;flex:0 0 auto}

/* Las migas: dónde estoy dentro del panel. */
.migas{
  display:flex;align-items:center;gap:7px;margin-bottom:9px;
  font-family:var(--token-font-mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--token-muted-2);
}
.migas a{color:var(--token-muted);text-decoration:none}
@media (hover:hover){.migas a:hover{color:var(--token-accent)}}

/* ── 3 · Formularios ───────────────────────────────────────────────────────── */
/*
  Treinta y una formas de dibujar un campo, quince de dibujar su etiqueta y once de dibujar su
  ayuda. No es que se vieran mal: es que se veían **casi** iguales, que es peor, porque el ojo
  detecta la diferencia sin poder nombrarla y todo el panel parece descuidado.

  Lo que faltaba de verdad no era estilo: era el **error por campo** —sólo había el aviso general
  de la pantalla, que te dice que algo falló pero no cuál— y la marca de obligatorio.
*/
/*
  `text-transform` y `letter-spacing` van explícitos y no sobran.

  El patrón de casi todo el panel es la etiqueta **envolviendo** al campo —`<label>Buscar<input></label>`—
  y `.campo-etiqueta` declara versalitas con `.14em`. Sin apagarlas aquí, lo que se teclea en el
  campo saldría en mayúsculas y separado. El resto de propiedades ya se apagan solas porque `.campo`
  las declara; éstas dos no las declaraba nadie. */
.campo{
  width:100%;height:32px;padding:0 10px;
  background:var(--token-fill-soft);
  border:1px solid var(--token-line);border-radius:var(--token-radius);
  color:var(--token-ink);font-family:var(--token-font-body);font-size:15px;
  text-transform:none;letter-spacing:normal;
}
/* Cuando la etiqueta envuelve al campo, la separación va por dentro. */
.campo-etiqueta > .campo{margin-top:6px}
textarea.campo{height:auto;min-height:120px;padding:9px 10px;line-height:1.65;resize:vertical}
.campo:disabled{color:var(--token-muted-2);background:var(--token-fill-faint);cursor:not-allowed}
.campo-invalido{border-color:var(--token-rt)}
.campo-grupo{margin-bottom:16px}
.campo-etiqueta{
  display:block;margin-bottom:6px;
  font-family:var(--token-font-mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--token-muted-label);
}
.campo-etiqueta b{color:var(--token-accent);font-weight:600;margin-left:3px}
.campo-ayuda{margin-top:5px;font-size:14px;color:var(--token-muted-2);max-width:64ch}
.campo-error{margin-top:5px;font-size:14px;color:var(--token-rt)}
.campo-fila{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* La casilla y su texto, en una línea que se puede pulsar entera. */
.campo-casilla{
  display:flex;align-items:center;gap:9px;
  font-size:15px;color:var(--token-ink-3);cursor:pointer;
}
.campo-casilla input{accent-color:var(--token-accent);flex:0 0 auto}

/* ── 4 · Botones ───────────────────────────────────────────────────────────── */
/*
  Ciento diez botones escritos a mano contra ochenta que pasaban por el componente: el 58% del
  panel se dibujaba su propio botón. Tres de esas constantes eran byte a byte idénticas y se
  llamaban de tres maneras distintas en tres ficheros.

  Dentro del panel el acento significa **acción principal**, así que sólo hay un botón lleno por
  pantalla; lo demás va de contorno. Un panel donde todo es cian es un panel donde nada destaca.
*/
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:32px;padding:0 14px;
  border:1px solid transparent;border-radius:var(--token-radius);
  font-family:var(--token-font-body);font-size:15px;font-weight:600;letter-spacing:.03em;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  background:transparent;color:var(--token-ink-2);
}
.boton-primario{background:var(--token-accent);border-color:var(--token-accent);color:var(--token-bg)}
.boton-contorno{border-color:var(--token-line-strong);color:var(--token-ink)}
.boton-discreto{color:var(--token-muted)}
/*
  El destructivo. Va de contorno y nunca lleno: un botón rojo sólido tira del ojo hacia lo único
  de la pantalla que no hay que pulsar sin pensarlo.
*/
.boton-peligro{
  border-color:color-mix(in srgb,var(--token-rt) 42%,transparent);
  color:var(--token-rt);
}
.boton-mini{height:26px;padding:0 10px;font-size:14px;gap:5px}
.boton:disabled{opacity:.45;cursor:not-allowed}
/*
  La respuesta al ratón es lo único que se mueve en el panel, y se mueve poco: cambia el color, no
  la posición. Nada de levantar, de brillar ni de escalar — eso es del sitio público.
*/
@media (hover:hover){
  .boton-primario:not(:disabled):hover{background:var(--token-accent-hover);border-color:var(--token-accent-hover)}
  .boton-contorno:not(:disabled):hover{border-color:var(--token-accent-line);color:var(--token-accent)}
  .boton-discreto:not(:disabled):hover{color:var(--token-ink-2)}
  .boton-peligro:not(:disabled):hover{background:color-mix(in srgb,var(--token-rt) 10%,transparent)}
}

/* ── 5 · La tabla de datos ─────────────────────────────────────────────────── */
/*
  Siete tablas y siete combinaciones distintas de `<th>`, con el mismo encabezado en peso 400 en
  una y en 600 en otra. Y cinco de las siete sin envoltorio que ruede: en un portátil de 1280 la
  tabla de campañas se salía de la pantalla y las columnas de la derecha eran inalcanzables.

  `.tabla-envoltura` no es decoración: es lo que hace que una tabla ancha ruede **ella** en vez de
  poner a rodar la página entera.
*/
.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-datos{width:100%;border-collapse:collapse;font-size:15px}
.tabla-datos th{
  padding:8px 12px;text-align:left;white-space:nowrap;
  font-family:var(--token-font-mono);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--token-muted-label);
  border-bottom:1px solid var(--token-line);
}
/*
  La interlínea va explícita, y sin ella la fila no mide lo que dice.

  El cuerpo del sitio va a 1.7 —correcto para un párrafo—, y una celda que lo hereda mide 43px con
  `height:34px` puesto: en una tabla, `height` es un **mínimo**, y el contenido la empuja. Medido en
  el navegador, no leído. Con 18px de interlínea y 8 de relleno arriba y abajo, la fila mide los 34
  que tiene que medir.
*/
.tabla-datos td{
  height:34px;padding:8px 12px;line-height:18px;vertical-align:middle;
  color:var(--token-ink-3);
  border-bottom:1px solid var(--token-line-hair);
}
.tabla-datos tbody tr:last-child td{border-bottom:0}
.tabla-datos th.num,.tabla-datos td.num{text-align:right}
.tabla-datos a{color:var(--token-ink-2);text-decoration:none}
@media (hover:hover){
  .tabla-datos tbody tr:hover td{background:var(--token-fill-faint)}
  .tabla-datos a:hover{color:var(--token-accent)}
}
/*
  Una sola opacidad para «esto está apagado», donde había seis (.45 .5 .55 .62 .68). Seis grises
  distintos para el mismo estado hacen creer que significan seis cosas.
*/
.fila-inactiva td{color:var(--token-muted-2)}
.fila-inactiva a{color:var(--token-muted-2)}

/* ── 6 · La pastilla de estado ─────────────────────────────────────────────── */
/*
  Cinco estados y cinco colores. No hay un sexto: si un estado no cabe en éstos, el estado está mal
  definido y hay que arreglar el estado, no añadir un color.

    listo     · accent     — publicado, activo, conectado, guardado, enviado
    cola      · boxoffice  — encolado, pendiente, sin enriquecer
    error     · rt         — fallido, rechazado, caducado por error
    inactivo  · muted-2    — borrador, apagado, archivado, vacío
    proceso   · budget     — informativo, en curso

  El tinte y el borde salen del **mismo** color con `color-mix`, así que la pastilla se define en
  una regla y las cinco variantes son una línea cada una. Sin `color-mix` harían falta diez tokens
  nuevos para no escribir un hex, y el encargo dice que no se inventan tokens.

  Lo que sale de aquí: `imdb` ya no significa «pendiente». Ese amarillo es de IMDb y de nada más.
*/
.pastilla{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:84px;padding:3px 8px;
  font-family:var(--token-font-mono);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  border-radius:var(--token-radius);
  color:var(--pastilla,var(--token-muted));
  background:color-mix(in srgb,var(--pastilla,var(--token-muted)) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--pastilla,var(--token-muted)) 30%,transparent);
}
.pastilla-listo{--pastilla:var(--token-accent)}
.pastilla-cola{--pastilla:var(--token-boxoffice)}
.pastilla-error{--pastilla:var(--token-rt)}
.pastilla-inactivo{--pastilla:var(--token-muted-2)}
.pastilla-proceso{--pastilla:var(--token-budget)}

/* ── 7 · La tarjeta de cifra ───────────────────────────────────────────────── */
/*
  Dieciocho maneras de pintar «número grande con rótulo», ocho de ellas llamadas literalmente
  `Cifra`, y el rótulo arriba en unas y abajo en otras.

  Aquí el rótulo va **arriba**: se lee «películas: 612», que es el orden en que se pregunta. Y el
  número va en monoespaciada, no en la de titulares, porque en el panel una cifra existe para
  compararse con la de al lado y con la de ayer — para eso tiene que alinearse en columna.

  La rejilla se separa con `gap:1px` sobre el fondo del borde: un filete entre celdas sin dibujar
  ocho bordes que se suman de dos en dos.
*/
.rejilla-cifras{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  background:var(--token-line-hair);
  border:1px solid var(--token-line-hair);
}
.cifra{display:block;padding:14px 16px;background:var(--token-bg-panel);color:inherit;text-decoration:none}
.cifra-rotulo{
  display:block;margin-bottom:8px;
  font-family:var(--token-font-mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--token-muted-label);
}
.cifra-numero{
  display:block;line-height:1;
  font-family:var(--token-font-mono);font-size:28px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--token-ink-hi);
}
.cifra-pie{display:block;margin-top:7px;font-size:14px;color:var(--token-muted)}
@media (hover:hover){
  a.cifra:hover{background:var(--token-fill-soft)}
  a.cifra:hover .cifra-numero{color:var(--token-accent)}
}

/* ── 8 · Gráficas ──────────────────────────────────────────────────────────── */
/*
  Sin librería (mandamiento 1) y sin SVG: son cajas con un ancho o un alto en porcentaje. Ese
  porcentaje es el ÚNICO estilo en línea legítimo de una gráfica, porque es el dato. El color no:
  el color va aquí, o el día que cambie el acento habrá barras cian por todo el panel.
*/
.barra{height:6px;background:var(--token-fill-soft);overflow:hidden}
.barra-relleno{height:100%;background:var(--token-accent)}
.barra-relleno-cola{background:var(--token-boxoffice)}
.barra-relleno-error{background:var(--token-rt)}
.barra-relleno-proceso{background:var(--token-budget)}
.columnas{display:flex;align-items:flex-end;gap:2px;height:88px}
.columna{flex:1 1 0;min-width:2px;background:var(--token-fill-soft);position:relative}
.columna-relleno{position:absolute;left:0;right:0;bottom:0;background:var(--token-accent)}
.eje{
  display:flex;justify-content:space-between;margin-top:7px;
  font-family:var(--token-font-mono);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--token-muted-2);
}

/* ── 9 · El estado vacío ───────────────────────────────────────────────────── */
/*
  Ocho formas y cuarenta y una apariciones, y **ninguna ofrecía la acción que lo resuelve**: te
  decía que no hay nada y te dejaba ahí. Un vacío es el mejor sitio del panel para poner el botón,
  porque es exactamente el momento en que hace falta.
*/
.vacio{
  display:grid;justify-items:start;gap:9px;
  padding:24px 20px;
  border:1px dashed var(--token-line);border-radius:var(--token-radius);
  background:var(--token-fill-faint);
}
.vacio-titulo{
  font-family:var(--token-font-heading);font-size:17px;font-weight:700;
  letter-spacing:-.01em;color:var(--token-ink-4);
}
.vacio-texto{font-size:15px;color:var(--token-muted);max-width:58ch}

/* ── 10 · Avisos ───────────────────────────────────────────────────────────── */
/*
  Mismo mecanismo que las pastillas y por el mismo motivo: un color, y de él salen el borde y el
  velo. Los tonos son los mismos cinco estados, con otros nombres porque un aviso se lee como una
  frase y una pastilla como una etiqueta.
*/
.aviso{
  padding:11px 13px;margin-bottom:18px;font-size:15px;
  border-radius:var(--token-radius);
  color:var(--token-ink-2);
  background:color-mix(in srgb,var(--aviso,var(--token-muted)) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--aviso,var(--token-muted)) 34%,transparent);
}
.aviso-ok{--aviso:var(--token-accent)}
.aviso-error{--aviso:var(--token-rt)}
.aviso-atencion{--aviso:var(--token-boxoffice)}
.aviso-info{--aviso:var(--token-budget)}
.aviso b{color:var(--token-ink);font-weight:600}

/* ── 11 y 12 · La cuenta y el anunciante ───────────────────────────────────── */
/*
  Son públicas, así que aquí NO entra ningún color de estado: en el sitio, el cian sigue queriendo
  decir «esto es mío y esto se pulsa», y un usuario no tiene por qué aprender que el dorado
  significa «en cola». Lo que sí comparten con el panel es el esqueleto —cabecera, pestañas,
  cifras— porque son pantallas de gestión y se leen igual.

  Las pestañas usan `.opcion`, que ya existe y ya responde al ratón. `Pestana` estaba escrito dos
  veces, con dos firmas y dos colores de activo.
*/
.cuenta-cabecera{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:24px;
  border-bottom:1px solid var(--token-line-hair);
}
.cuenta-pestanas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
/*
  Las cifras de una pantalla pública: el número en la de titulares y no en monoespaciada. Aquí una
  cifra es un titular —«llevas 213 de las 1,000»— y no algo que se compare en columna. Es la misma
  información que en el panel y se dibuja distinto a propósito.
*/
.cuenta-cifras{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cuenta-cifra{border:1px solid var(--token-line-hair);padding:16px 18px;background:var(--token-bg-card)}
.cuenta-cifra-numero{
  display:block;font-family:var(--token-font-heading);font-size:32px;font-weight:800;
  line-height:1;letter-spacing:-.03em;color:var(--token-ink-hi);font-variant-numeric:tabular-nums;
}
.cuenta-cifra-rotulo{
  display:block;margin-top:9px;
  font-family:var(--token-font-mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--token-muted-label);
}

/* Sólo para lectores de pantalla. */
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/*
  ── La línea de tiempo ──────────────────────────────────────────────────────

  Casi todo el aspecto de esta página va aquí y no en estilos en línea, y hay un motivo concreto:
  **las tres filas de la gráfica tienen que compartir la misma retícula de 92 pistas**. El eje de
  décadas se coloca con grid-column:span N sobre esas mismas pistas, y así la celda de los 2020
  empieza exactamente donde empieza la barra de 2020. Con anchos flexibles la deriva llegaba a
  catorce píxeles —casi dos barras— y al pasar por «2020s» se iluminaba 1969.

  Y todo lo que cambia con el ancho vive en consultas de medios, no en JavaScript: la página se
  renderiza en el servidor y tiene que verse bien antes de que cargue ningún script.
*/

.lt-cabecera{display:grid;gap:26px}
.lt-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 34px}
.lt-cifra-num{
  font-family:var(--token-font-heading);font-size:34px;font-weight:800;letter-spacing:-.035em;
  color:var(--token-ink-hi);font-variant-numeric:tabular-nums;line-height:1;
}

/* El prólogo: fuera del conjunto, y por eso el filete de abajo va discontinuo. */
.lt-prologo{
  border-top:1px solid var(--token-line-soft);
  border-bottom:1px dashed var(--token-line-strong);
  padding:20px 0 22px;
}
.lt-prologo-cols{display:grid;gap:20px;grid-template-columns:1fr}
.lt-prologo-cols > div{border-left:1px dashed var(--token-line-strong);padding-left:18px}

/* El panel de la gráfica. */
.lt-panel{border:1px solid var(--token-line-soft);background:var(--token-bg-panel)}
.lt-lector{
  display:grid;gap:18px;min-height:116px;padding:16px 18px;
  border-bottom:1px solid var(--token-line-soft);align-items:center;
}

/* Las tres filas, sobre las mismas 92 pistas. */
/*
  Las 92 pistas, y el relleno que hay que quitar.

  La fila de barras es una lista, y un <ul> trae 40px de relleno a la izquierda que ningún reset de
  este proyecto quita. Con ellos, las barras arrancaban cuarenta píxeles más a la derecha que el eje
  y las pistas eran más estrechas: la celda de los 1940 caía 37px antes que la barra de 1940 y la de
  los 2020, 2,6px después. Lo mismo que se avisaba de no hacer con anchos flexibles, colado por la
  puerta de atrás.
*/
.lt-rejilla{display:grid;grid-template-columns:repeat(92,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none}
.lt-puntos{height:16px;align-items:end}
.lt-barras{height:140px;align-items:end;position:relative}
.lt-eje{display:none}

/*
  La barra es el <span> de color, y el <a> que la envuelve es otra cosa.

  Los dos llevaban la misma clase, así que el enlace —que ocupa el alto entero de la celda para que
  se pueda señalar el año sin apuntar a una marca de cuatro píxeles— también recibía el fondo y el
  radio. Se veía igual de casualidad y medía mal cualquiera que lo consultara.
*/
.lt-ano{display:flex;align-items:flex-end;width:100%;height:100%}
.lt-barra{display:block;width:100%;border-radius:1px;transition:background-color 120ms ease}
@media (prefers-reduced-motion:reduce){.lt-barra{transition:none}}

/* Las dos líneas de referencia. Decorativas: no cuentan para nadie que no vea. */
.lt-guia{position:absolute;left:0;right:0;height:1px;background:var(--token-line-hair)}
.lt-guia-num{
  position:absolute;right:0;bottom:2px;font-size:11px;color:var(--token-muted-2);
  background:var(--token-bg-panel);padding-left:5px;
}

/*
  En el teléfono la gráfica es una silueta: se navega por décadas, no por años.

  92 años en 350px son 3,8 píxeles por año: la forma se lee perfectamente y un año concreto no se
  puede tocar. Eso no se disimula con un tooltip que nadie va a poder abrir — se cambia la
  navegación. Y si alguien quiere el detalle de un año, el sitio para eso es /ano/1972/.
*/
.lt-solo-movil{display:block}
.lt-decadas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--token-line-faint)}
.lt-decada{
  display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;
  background:var(--token-bg-panel);text-decoration:none;
}

/*
  Los filetes van en cada tarjeta, no en el hueco de la rejilla.

  El truco de siempre —fondo en el contenedor y gap de 1px— deja un agujero cuando las tarjetas no
  llenan la última fila, y once hitos en tres columnas dejan uno siempre. Ese agujero se ve como una
  tarjeta vacía, que es peor que no tener filete. Con el contorno en cada tarjeta no hay huecos que
  rellenar, y dos contornos contiguos se leen como una línea de dos píxeles, que es lo que se quería.
*/
.lt-hitos{display:grid;grid-template-columns:1fr;gap:1px}
.lt-hito{
  display:flex;flex-direction:column;background:var(--token-bg-panel);padding:22px 24px 20px;
  text-decoration:none;transition:background-color 120ms ease;
  box-shadow:0 0 0 1px var(--token-line-faint);
}
@media (prefers-reduced-motion:reduce){.lt-hito{transition:none}}

.lt-salidas{display:grid;grid-template-columns:1fr;gap:1px;background:var(--token-line-faint)}
.lt-salida{background:var(--token-bg-panel);padding:22px 24px;text-decoration:none}

@media (min-width:720px){
  .lt-prologo-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lt-hitos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lt-salidas{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:900px){
  .lt-cabecera{grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:start}
  .lt-lector{grid-template-columns:minmax(0,1fr) auto}
  .lt-rejilla{gap:2px}
  .lt-barras{height:210px}
  /* A partir de aquí el eje sustituye a la lista de décadas: hay sitio para señalar años. */
  .lt-eje{display:grid}
  .lt-decadas,.lt-solo-movil{display:none}
  .lt-hitos{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/*
  El foco tiene que verse sobre una barra de cuatro píxeles.

  Con outline a secas el contorno se dibuja pegado a la barra y en la cola —donde miden 4px de
  ancho— no se distingue de la propia barra. El desplazamiento lo separa lo justo.
*/
.lt-ano:focus-visible,.lt-hito:focus-visible,.lt-decada:focus-visible,.lt-salida:focus-visible{
  outline:2px solid var(--token-accent);outline-offset:2px;
}

/* Saltar noventa y dos enlaces con el tabulador es media hoja de teclado. */
.lt-saltar{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.lt-saltar:focus{
  position:static;width:auto;height:auto;overflow:visible;clip:auto;
  display:inline-block;padding:7px 12px;margin-bottom:10px;
  border:1px solid var(--token-accent-line);border-radius:var(--token-radius);
  background:var(--token-accent-fill);color:var(--token-accent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   LA PORTADA

   Todo lo de aquí abajo es de una sola pantalla, y va en la hoja y no en linea
   por dos motivos: son bloques con estados —hover, activo— que un estilo en
   linea no puede llevar, y son rejillas que cambian tres veces con el ancho,
   que en linea significaria repetir el mismo objeto en cuatro sitios.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Botones ────────────────────────────────────────────────────────────────
   Estaban como objetos de estilo dentro de la portada, asi que una isla de
   cliente no podia usarlos sin importar la pagina entera. */
.boton-relleno,.boton-contorno,.boton-tenue{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 22px;border-radius:var(--token-radius);
  font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;
  font-family:inherit;
  transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease;
}
.boton-relleno{background:var(--token-accent);color:var(--token-bg);border:0}
.boton-contorno{background:transparent;color:var(--token-ink);border:1px solid var(--token-line-soft)}
.boton-tenue{background:transparent;color:var(--token-muted);border:1px solid var(--token-line-faint);font-weight:400}
@media (hover:hover){
  .boton-relleno:hover{background:var(--token-accent-hover);color:var(--token-bg)}
  .boton-contorno:hover,.boton-tenue:hover{border-color:var(--token-accent);color:var(--token-accent)}
}

/* ── Rotulo de seccion: cuadrado de acento y texto en versalitas ──────────── */
.rotulo-seccion{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rotulo-seccion::before{content:"";width:5px;height:5px;background:var(--token-accent);flex:0 0 auto}
.rotulo-seccion span{
  font-family:var(--token-font-mono);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--token-accent);
}

/* La cabecera de casi todas: titulo y parrafo a la izquierda, un enlace a la derecha. */
.cabecera-seccion{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:30px;flex-wrap:wrap;margin-bottom:26px;
}
.cabecera-seccion > a{flex:0 0 auto;font-size:15px;font-weight:600;color:var(--token-accent);text-decoration:none}
@media (hover:hover){.cabecera-seccion > a:hover{color:var(--token-accent-hover)}}
.cabecera-seccion p{font-size:17px;line-height:1.65;color:var(--token-muted);margin-top:9px;max-width:62ch;text-wrap:pretty}

/* ── 3 · El hero ──────────────────────────────────────────────────────────
   Dos columnas desde 1200px: el manifiesto a la izquierda y el avance a la
   derecha. El avance era una linea de texto debajo de una barra; aqui es una
   cifra de 46px, porque es el dato que dice en que punto esta la lista. */
.hero-rejilla{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:56px;align-items:end;
}
.hero-rotulo{margin-bottom:22px}
.hero-rotulo::before{width:24px;height:1px}
.hero-h1{
  font-family:var(--token-font-heading);font-size:78px;font-weight:900;
  line-height:.92;letter-spacing:-.045em;color:var(--token-ink-hi);
  max-width:17ch;text-wrap:balance;
}
.hero-manifiesto{font-size:18px;line-height:1.75;color:var(--token-ink-2);margin-top:26px;max-width:54ch;text-wrap:pretty}
.hero-botones{display:flex;align-items:center;gap:14px;margin-top:34px;flex-wrap:wrap}

.hero-avance{max-width:420px;width:100%}
.hero-avance-alto{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:10px}
.hero-cifra{
  font-family:var(--token-font-heading);font-size:46px;font-weight:900;
  letter-spacing:-.04em;line-height:1;color:var(--token-ink-hi);
  font-variant-numeric:tabular-nums;margin-bottom:7px;
}
.hero-faltan-rotulo{font-size:13px;color:var(--token-muted-2)}
.hero-faltan{
  font-family:var(--token-font-heading);font-size:22px;font-weight:800;
  letter-spacing:-.03em;color:var(--token-ink-5);font-variant-numeric:tabular-nums;
}
.hero-pista{height:6px;background:var(--token-fill-soft);position:relative;overflow:hidden}
.hero-pista span{position:absolute;top:0;bottom:0;left:0;background:var(--token-accent)}
.hero-tres{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;
  font-size:12px;color:var(--token-muted);
}
.hero-tres b{color:var(--token-ink);font-weight:400}
.hero-defondo{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--token-line-faint);
  font-size:14px;color:var(--token-muted-2);
}

@media (max-width:1199px){
  .hero-rejilla{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-h1{font-size:58px}
}
@media (max-width:639px){
  .hero-h1{font-size:44px}
}

/* ── 4 · Que veo hoy ────────────────────────────────────────────────────── */
.qvh{background:var(--token-bg-panel);border-bottom:1px solid var(--token-line-faint)}
.qvh-dentro{max-width:var(--token-content-max);margin:0 auto;padding:64px var(--token-content-pad) 70px}
.qvh-cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:34px}
.qvh-h2{
  font-family:var(--token-font-heading);font-size:64px;font-weight:900;
  letter-spacing:-.045em;line-height:.95;color:var(--token-ink-hi);
}
.qvh-entradilla{font-size:18px;line-height:1.7;color:var(--token-ink-2);margin-top:18px;max-width:52ch;text-wrap:pretty}
.qvh-cuenta{font-size:13px;color:var(--token-muted-2);flex:0 0 auto}

.qvh-preguntas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:1px;background:var(--token-line-faint);border:1px solid var(--token-line-faint);
}
.qvh-pregunta{background:var(--token-bg-card);padding:20px 22px 22px}
.qvh-rotulo{margin-bottom:14px}
.qvh-fichas{display:flex;flex-wrap:wrap;gap:7px}
.qvh-ficha{
  padding:8px 13px;border:1px solid var(--token-line-soft);background:transparent;
  color:var(--token-ink-2);font-size:15px;border-radius:var(--token-radius);cursor:pointer;
  transition:border-color 120ms ease,background-color 120ms ease,color 120ms ease;
}
.qvh-ficha-activa{
  border-color:var(--token-accent);background:var(--token-accent-fill);
  color:var(--token-accent-soft);font-weight:600;
}
@media (hover:hover){.qvh-ficha:hover{border-color:var(--token-accent);color:var(--token-accent)}}

.qvh-resultado{
  margin-top:26px;border:1px solid var(--token-accent-line);background:var(--token-bg-card);
  display:grid;grid-template-columns:240px minmax(0,1fr);
}
.qvh-cartel-ancho,.qvh-cartel-bloque{position:relative;display:block;background:var(--token-bg-poster);overflow:hidden}
.qvh-cartel-ancho{min-height:260px}
.qvh-cartel-ancho img,.qvh-cartel-bloque img{width:100%;height:100%;object-fit:cover;display:block}
/* El de bloque sólo aparece cuando desaparece la columna. Ver el porqué en el componente. */
.qvh-cartel-bloque{display:none;width:168px;aspect-ratio:2/3;border:1px solid var(--token-line-faint);margin-bottom:24px;flex:none}
.qvh-nota{
  position:absolute;top:0;right:0;background:var(--token-accent);color:var(--token-bg);
  font-size:15px;font-weight:600;padding:5px 10px;
}
.qvh-puesto{
  position:absolute;bottom:0;left:0;background:var(--token-bg);color:var(--token-ink-4);
  font-size:12px;padding:4px 9px;
}
.qvh-texto{padding:30px 34px 28px;display:flex;flex-direction:column;min-width:0}
.qvh-datos{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:16px;font-size:15px;color:var(--token-ink-4)}
.qvh-datos .mono{font-size:13px}
.qvh-ano{
  color:var(--token-accent-soft);border:1px solid var(--token-accent-line);
  padding:3px 8px;font-weight:600;font-size:12px;
}
.qvh-titulo{
  font-family:var(--token-font-heading);font-size:44px;font-weight:900;
  letter-spacing:-.04em;line-height:.96;color:var(--token-ink-hi);text-wrap:balance;
}
.qvh-titulo a{color:inherit;text-decoration:none}
@media (hover:hover){.qvh-titulo a:hover{color:var(--token-accent)}}
.qvh-original{margin-top:10px;font-size:17px;font-weight:500;color:var(--token-ink-5)}
.qvh-razon{
  margin-top:22px;border-left:2px solid var(--token-accent);
  background:linear-gradient(90deg,var(--token-accent-fill),transparent 70%);
  padding:12px 18px;
}
.qvh-razon > p:last-child{
  font-family:var(--token-font-heading);font-size:20px;font-weight:600;
  line-height:1.45;letter-spacing:-.015em;color:var(--token-ink-hi);max-width:46ch;text-wrap:pretty;
}
.qvh-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:26px}

/* ── 5 y 7 · Las dos rejillas de carteles ─────────────────────────────────
   Son la misma: cualquier diferencia entre ellas se lee como un error. Por eso
   una sola clase y no dos parecidas. */
.rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.rail-tarjeta{display:block;text-decoration:none;color:inherit;transition:opacity 120ms ease}
@media (hover:hover){.rail-tarjeta:hover{opacity:.9}}
/* display:block en los tres, y no es cosmetico: son <span> dentro de un <a>, o sea
   en linea. Sin esto, aspect-ratio no se aplica —una caja en linea no tiene alto
   propio— y las dos insignias, que van absolutas, se colocaban respecto de una caja
   de altura cero: la nota salia flotando encima del cartel y el numero de puesto
   caia encima del titulo. Se vio en el primer render. */
.rail-cartel{
  display:block;
  position:relative;aspect-ratio:2/3;background:var(--token-bg-poster);
  overflow:hidden;border:1px solid var(--token-line-faint);
}
.rail-cartel img{width:100%;height:100%;object-fit:cover;display:block}
.rail-nota{
  position:absolute;top:0;right:0;background:var(--token-bg);color:var(--token-accent);
  font-size:13px;font-weight:600;padding:4px 8px;
}
.rail-puesto{
  position:absolute;bottom:0;left:0;background:var(--token-bg);color:var(--token-ink-4);
  font-size:11px;padding:3px 7px;
}
.rail-titulo{
  display:block;
  font-family:var(--token-font-heading);font-size:16px;font-weight:700;
  letter-spacing:-.02em;line-height:1.25;color:var(--token-ink-hi);margin-top:11px;
}
.rail-meta{display:block;font-size:11px;letter-spacing:.06em;color:var(--token-muted-label);margin-top:6px}

/* ── 6 · Donde no coincido ────────────────────────────────────────────────── */
.panel-doble{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--token-line-hair);border:1px solid var(--token-line-hair);
}
.panel-doble > *{background:var(--token-bg-panel);padding:22px 24px 20px}
.div-titulo{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.div-titulo b{font-family:var(--token-font-heading);font-size:19px;font-weight:800;letter-spacing:-.025em;color:var(--token-ink-hi)}
.div-titulo .mono{margin-left:auto;font-size:12px;color:var(--token-muted-2)}
.div-cuadro{width:8px;height:8px;flex:0 0 auto}
.div-fila{
  display:grid;grid-template-columns:minmax(0,1fr) 46px 96px 46px;gap:12px;align-items:center;
  padding:11px 0;border-top:1px solid var(--token-line-hair);text-decoration:none;
}
@media (hover:hover){.div-fila:hover{background:var(--token-accent-fill)}}
.div-nombre{display:block;min-width:0}
.div-nombre b{
  display:inline-block;max-width:100%;font-size:16px;font-weight:500;color:var(--token-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:1px solid var(--token-accent-line);
}
.div-nombre span{display:block;font-size:11px;color:var(--token-muted-label);margin-top:4px}
.div-mia,.div-rt{font-size:15px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.div-mia{color:var(--token-accent)}
.div-rt{color:var(--token-rt)}
/* La pista de la barra de divergencia. La barra sale del centro: el signo se lee por el lado. */
.div-pista{height:6px;background:var(--token-line-hair);position:relative}
.div-barra{position:absolute;top:0;bottom:0}
.div-pie{
  display:grid;grid-template-columns:minmax(0,1fr) 46px 96px 46px;gap:12px;
  padding-top:12px;border-top:1px solid var(--token-line-hair);
}

/* ── 8 · La lista de un vistazo ───────────────────────────────────────────── */
.vistazo-cabecera{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;gap:12px}
.vistazo-barras{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;align-items:end;height:118px}
.vistazo-barra{background:var(--token-grafica-barra);display:block;width:100%;border:0;padding:0;cursor:pointer}
@media (hover:hover){.vistazo-barra:hover{background:var(--token-accent-hover)}}
.vistazo-pies{
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;margin-top:8px;
  border-top:1px solid var(--token-line-faint);padding-top:8px;
}
.vistazo-pie{text-align:center;overflow:hidden}
.vistazo-pie span{display:block;font-size:10px;color:var(--token-muted-label)}
.vistazo-pie b{display:block;font-family:var(--token-font-heading);font-size:14px;font-weight:800;color:var(--token-ink-3);font-variant-numeric:tabular-nums}
.vistazo-nota{margin-top:18px;font-size:16px;color:var(--token-ink-2);min-height:3em}
.vistazo-pais{display:block;text-decoration:none;color:inherit}
@media (hover:hover){.vistazo-pais:hover{opacity:.82}}
.vistazo-pais-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:5px}
.vistazo-pais-fila span:first-child{font-size:16px;color:var(--token-ink)}
.vistazo-pais-fila .mono{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.vistazo-pista{height:5px;background:var(--token-line-hair)}

/* ── 9 · Por donde entrar ─────────────────────────────────────────────────── */
.entrar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 40px}
.entrar-cabecera{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:11px;margin-bottom:14px;border-bottom:1px solid var(--token-line-faint);
}
.entrar-cabecera .mono:last-child{font-size:11px;color:var(--token-muted-2)}
.entrar-fichas{display:flex;flex-wrap:wrap;gap:7px}
.entrar-ficha{
  display:inline-flex;align-items:baseline;gap:7px;padding:7px 11px;
  border:1px solid var(--token-card-line);border-radius:var(--token-radius);text-decoration:none;
  transition:border-color 120ms ease;
}
.entrar-ficha span:first-child{font-size:15px;color:var(--token-card-ink)}
.entrar-ficha .mono{font-size:11px;color:var(--token-muted-2);font-variant-numeric:tabular-nums}
.entrar-primera{border-color:var(--token-accent-line);background:var(--token-accent-fill)}
.entrar-primera span:first-child{color:var(--token-accent-soft);font-weight:600}
@media (hover:hover){.entrar-ficha:hover{border-color:var(--token-accent)}}
.entrar-cola{margin-top:13px;font-size:14px;color:var(--token-muted-2)}

/* ── 10 · Lo ultimo que escribi ───────────────────────────────────────────── */
.blog-portada{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--token-line-hair);border:1px solid var(--token-line-hair);
}
.blog-portada > a{
  background:var(--token-bg-panel);padding:24px 26px 22px;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:background-color 120ms ease;
}
@media (hover:hover){.blog-portada > a:hover{background:var(--token-bg-card)}}
.blog-portada-alto{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.blog-portada-alto .mono:last-child{margin-left:auto;font-size:11px;color:var(--token-muted-2)}
.blog-portada-titulo{
  font-family:var(--token-font-heading);font-size:21px;font-weight:800;
  letter-spacing:-.03em;line-height:1.15;color:var(--token-ink-hi);text-wrap:balance;
}
.blog-portada-entradilla{font-size:16px;line-height:1.65;color:var(--token-muted);margin-top:12px;max-width:44ch;text-wrap:pretty}
.blog-portada-pie{margin-top:auto;padding-top:20px;font-size:11px;color:var(--token-muted-2)}

/* ── 11 · De que tamano es esto ───────────────────────────────────────────── */
.cifras{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--token-line-hair);border:1px solid var(--token-line-hair);
}
.cifras > *{background:var(--token-bg-panel);padding:24px 26px 22px}
.cifra-n{
  font-family:var(--token-font-heading);font-size:36px;font-weight:800;
  letter-spacing:-.04em;line-height:1;color:var(--token-ink-hi);font-variant-numeric:tabular-nums;
}
.cifra-nota{font-size:15px;line-height:1.55;color:var(--token-ink-5);margin-top:10px}
a.cifra-enlace{text-decoration:none}
a.cifra-enlace .cifra-n{color:var(--token-accent)}

/* ── Puntos de ruptura ─────────────────────────────────────────────────────
   Todas las pistas con minmax(0,1fr) y nunca 1fr a secas: con 1fr un titulo
   largo obliga a la columna a crecer y desborda la seccion. */
@media (max-width:1199px){
  .qvh-h2{font-size:50px}
  .qvh-resultado{grid-template-columns:minmax(0,1fr)}
  .qvh-cartel-ancho{display:none}
  .qvh-cartel-bloque{display:block}
  .qvh-titulo{font-size:36px}
  .panel-doble{grid-template-columns:minmax(0,1fr)}
  .entrar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-portada{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cifras{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Seis carteles a 1.100px salen a 150px de ancho: el titulo se parte en tres lineas
     y la fila deja de leerse como una fila. Cuatro es donde vuelve a funcionar. */
  .rail{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:899px){
  .vistazo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:639px){
  .qvh-h2{font-size:40px}
  .qvh-dentro{padding:44px var(--token-content-pad) 50px}
  .qvh-preguntas{grid-template-columns:minmax(0,1fr)}
  .qvh-texto{padding:22px 20px 20px}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .entrar{grid-template-columns:minmax(0,1fr)}
  .blog-portada{grid-template-columns:minmax(0,1fr)}
  .cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .div-fila,.div-pie{grid-template-columns:minmax(0,1fr) 40px 60px 40px;gap:8px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA ESQUINA FLOTANTE

   Dos botones y un panel. Van juntos porque dos botones flotantes en dos
   esquinas distintas convierten un sitio en un tablero de mandos.
   ═══════════════════════════════════════════════════════════════════════════ */

.flotante{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  /* El contenedor no captura el raton: si lo hiciera, la columna entera taparia
     el texto que hay debajo aunque solo se vea un boton. */
  pointer-events:none;
}
.flotante > *{pointer-events:auto}

/* ── La entrada de cine ─────────────────────────────────────────────────────
   Las dos muescas de los lados y la linea de puntos del talon son lo que hace
   que se lea como una entrada y no como un rectangulo con una flecha. Se hacen
   con mask y no con imagenes, asi que siguen al color del modo sin dibujar seis
   versiones. */
.entrada-arriba{
  position:relative;
  width:54px;height:46px;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--token-bg-card);
  border:0;cursor:pointer;
  color:var(--token-accent);
  box-shadow:0 0 0 1px var(--token-accent-line);
  -webkit-mask:
    radial-gradient(circle 6px at 0 50%, transparent 98%, #000 100%),
    radial-gradient(circle 6px at 100% 50%, transparent 98%, #000 100%);
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(circle 6px at 0 50%, transparent 98%, #000 100%),
    radial-gradient(circle 6px at 100% 50%, transparent 98%, #000 100%);
  mask-composite:intersect;
  transition:background-color 120ms ease,color 120ms ease;
}
@media (hover:hover){
  .entrada-arriba:hover{background:var(--token-accent);color:var(--token-on-accent)}
}
.entrada-flecha{font-size:19px;line-height:1;font-weight:700}
/* El talon: tres perforaciones, como las de una tira de pelicula. */
.entrada-talon{display:flex;gap:3px;border-top:1px dashed var(--token-accent-line);padding-top:4px;width:32px;justify-content:center}
.entrada-talon i{width:3px;height:3px;background:currentColor;opacity:.75}

/* ── El selector de modo ────────────────────────────────────────────────── */
.modo-caja{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.modo-boton{
  display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 11px;
  background:var(--token-bg-card);color:var(--token-ink-4);
  border:1px solid var(--token-line-soft);border-radius:var(--token-radius);
  font-family:inherit;font-size:13px;cursor:pointer;
  transition:border-color 120ms ease,color 120ms ease;
}
@media (hover:hover){.modo-boton:hover{border-color:var(--token-accent);color:var(--token-accent)}}
.modo-boton-texto{white-space:nowrap}
.modo-muestra{display:inline-flex;gap:2px;flex:0 0 auto}
.modo-muestra i{width:7px;height:14px;display:block}

.modo-panel{
  width:min(320px,calc(100vw - 36px));
  background:var(--token-bg-panel);
  border:1px solid var(--token-line-soft);
  border-radius:var(--token-radius);
  padding:12px;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:0 10px 40px var(--token-veil-soft);
}
.modo-panel-titulo{margin-bottom:8px}
.modo-opcion{
  display:flex;align-items:flex-start;gap:10px;text-align:left;
  padding:9px 10px;background:transparent;border:1px solid transparent;
  border-radius:var(--token-radius);cursor:pointer;font-family:inherit;
  transition:background-color 120ms ease,border-color 120ms ease;
}
@media (hover:hover){.modo-opcion:hover{background:var(--token-fill-soft)}}
.modo-opcion-activa{border-color:var(--token-accent-line);background:var(--token-accent-fill)}
.modo-opcion .modo-muestra{margin-top:2px}
.modo-texto{display:block;min-width:0}
.modo-texto b{display:block;font-size:15px;color:var(--token-ink);font-weight:600}
.modo-opcion-activa .modo-texto b{color:var(--token-accent)}
.modo-texto span{display:block;font-size:12px;line-height:1.45;color:var(--token-muted-2);margin-top:2px}

/* En un telefono el texto de cada modo sobra: se queda la muestra y el nombre. */
@media (max-width:520px){
  .flotante{right:12px;bottom:12px}
  .modo-boton-texto{display:none}
  .modo-texto span{display:none}
}

/* ── El cambio de modo ──────────────────────────────────────────────────────
   Doscientos milisegundos de fondo y color, y nada mas: es un cambio de luz,
   no una animacion. Se declara en html y body, que son los dos que pintan el
   fondo de la pagina; ponerlo en * seria animar seiscientos elementos a la vez. */
html,body{transition:background-color 200ms ease,color 200ms ease}

/* Quien pide menos movimiento, recibe menos movimiento. No es opcional. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ── Motor de efectos ─────────────────────────────────────────────────────────
   Las capas van DENTRO de su sección —.fx-seccion las recorta— y NO capturan
   el ratón. Fueron position:fixed sobre el documento entero hasta que se vio
   lo que costaba: una capa de ruido redibujándose sobre cada párrafo. El orden
   de z es relativo a la sección: viñeta 1, scanlines 2, grano 3. */
.fx-capa{position:absolute;inset:0;pointer-events:none;will-change:opacity}

/* El ancho y el alto explícitos NO sobran, y su ausencia tuvo el grano roto desde que se escribió.
   `inset:0` estira un <div> porque su tamaño no está definido de antemano; un <canvas> es un
   elemento REEMPLAZADO y conserva su tamaño intrínseco —el del buffer, 210×135— pase lo que pase
   con inset. Resultado: la viñeta y las líneas de barrido cubrían la ventana y el grano se pintaba
   en un cuadradito de 210×135 en la esquina superior izquierda. Medido en una ventana de 1400×1000:
   las dos capas de <div> a 1400×1000 y el lienzo a 210×135.
   Se descubrió construyendo la vista previa de /admin/efectos: la muestra del panel se veía y la
   del sitio no, y la diferencia era que allí el tamaño iba puesto en línea. */
canvas.fx-capa{width:100%;height:100%}

.fx-vineta{z-index:1;background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.55) 100%)}

.fx-scanlines{z-index:2;background:repeating-linear-gradient(
  to bottom,rgba(0,0,0,.16) 0px,rgba(0,0,0,.16) 1px,transparent 1px,transparent 3px)}

/* El grano se dibuja en un lienzo de 210×135 y se estira. Ese estirado ES el efecto:
   con un buffer del tamaño de la pantalla el ruido queda fino y parece suciedad de monitor. */
/* La mezcla la pone el modo: sobre papel el grano es polvo (multiply), no luz (overlay).
   Con overlay sobre un fondo claro el grano sencillamente no se ve, y bajar la opacidad
   no lo arregla: hay que cambiar el modo de mezcla. */
.fx-grano{z-index:3;mix-blend-mode:var(--token-grano-mezcla);image-rendering:pixelated}

.fx-seccion{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* La luz del proyector: un círculo en modo pantalla que sigue al cursor. */
.fx-proyector{
  position:absolute;width:460px;height:460px;margin:-230px 0 0 -230px;
  border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(circle,var(--fx-acento,var(--token-accent)) 0%,transparent 62%);
  transition:opacity .35s ease;will-change:transform
}

/* Border-beam: un degradado cónico girando dentro de 1px de padding. */
.fx-borde{position:relative;padding:1px;border-radius:var(--token-radius);overflow:hidden}
.fx-borde::before{
  content:"";position:absolute;inset:-140%;z-index:0;
  background:conic-gradient(from 0deg,transparent 0deg,var(--token-accent) 24deg,
             var(--token-magenta) 48deg,transparent 84deg);
  animation:fx-girar 5.5s linear infinite
}
.fx-borde > *{position:relative;z-index:1;background:var(--token-bg-card);
  border-radius:calc(var(--token-radius) - 1px)}

/* El degradado fluido del título: 320% de tamaño moviéndose 16 s. */
/*
  El degradado del título del hero, con las paradas contenidas.

  Antes el color ocupaba de la parada 12% a la 84%: con la serif fina de entonces se leía como un
  reflejo. Con una grotesca de peso 900 las astas son mucho más anchas y ese mismo degradado se ve
  como un arcoíris que se come la palabra.

  Ahora el color aparece en dos tramos cortos —el cian sobre el 40%, el magenta sobre el 72%— y el
  resto es el blanco de los encabezados. Sigue moviéndose; deja de gritar.
*/
.fx-titulo{
  background:linear-gradient(115deg,
    var(--token-ink-hi) 0%,var(--token-ink-hi) 26%,
    var(--token-accent) 40%,
    var(--token-ink-hi) 54%,
    var(--token-magenta) 72%,
    var(--token-ink-hi) 88%,var(--token-ink-hi) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fx-fluir 16s ease-in-out infinite
}

@keyframes fx-girar{to{transform:rotate(1turn)}}
@keyframes fx-fluir{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* `steps(1)` a propósito: la ventanilla de un proyector salta, no hace un fundido. */
@keyframes fx-parpadeo{
  0%,100%{filter:brightness(1)}
  25%{filter:brightness(1.045)}
  50%{filter:brightness(.975)}
  75%{filter:brightness(1.02)}
}
@keyframes fx-vaiven{
  0%,100%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(.6px,-.4px,0)}
  66%{transform:translate3d(-.5px,.5px,0)}
}
.fx-parpadeo{animation:fx-parpadeo 4s steps(1) infinite}
.fx-vaiven{animation:fx-vaiven 7s ease-in-out infinite}

/* Quien pide menos movimiento recibe menos movimiento. No es una cortesía: para algunas personas
   esto es la diferencia entre poder leer el sitio y tener que cerrarlo. */
@media (prefers-reduced-motion: reduce){
  .fx-grano,.fx-particulas,.fx-proyector{display:none}
  .fx-borde::before,.fx-titulo,.fx-parpadeo,.fx-vaiven{animation:none}
  .fx-titulo{color:var(--token-ink-hi);-webkit-text-fill-color:currentColor}
}

[data-modo="papel"]{--token-accent:#0A6355;--token-accent-deep:#053B33;--token-accent-hover:#074A40;--token-accent-soft:#0A6355;--token-bg:#EFEAE0;--token-bg-card:#F6F2EA;--token-bg-chip:#E2DBCC;--token-bg-panel:#E8E2D6;--token-bg-poster:#DCD5C7;--token-bg-sala:#DCD5C7;--token-boxoffice:#6B5820;--token-budget:#4A5966;--token-grano-mezcla:multiply;--token-grano-opacidad:.14;--token-imdb:#7A5C00;--token-ink:#24242B;--token-ink-2:#34343C;--token-ink-3:#43434C;--token-ink-4:#55555F;--token-ink-5:#5F5F69;--token-ink-faint:#C4BDAF;--token-ink-hi:#191920;--token-magenta:#8E1AA8;--token-muted:#4F4F58;--token-muted-2:#64646E;--token-muted-label:#575760;--token-on-accent:#F6F2EA;--token-poster-filter:none;--token-rt:#B82606;--token-second:#8E1AA8}
[data-modo="nitrato"]{--token-accent:#F4F4F2;--token-accent-deep:#A9A9A7;--token-accent-hover:#FFFFFF;--token-accent-soft:#D2D2D0;--token-bg:#101012;--token-bg-card:#1B1B20;--token-bg-chip:#26262C;--token-bg-panel:#16161A;--token-bg-poster:#24242A;--token-bg-sala:#0A0A0C;--token-boxoffice:#A9A9A7;--token-budget:#7E7E7C;--token-grano-mezcla:overlay;--token-grano-opacidad:.42;--token-imdb:#B9B9B7;--token-ink:#E6E6E4;--token-ink-2:#D2D2D0;--token-ink-3:#BEBEBC;--token-ink-4:#A9A9A7;--token-ink-5:#9B9B99;--token-ink-faint:#434349;--token-ink-hi:#F4F4F2;--token-magenta:#D2D2D0;--token-muted:#8D8D8B;--token-muted-2:#7E7E7C;--token-muted-label:#8D8D8B;--token-on-accent:#101012;--token-poster-filter:grayscale(1) contrast(1.08);--token-rt:#8D8D8B;--token-second:#D2D2D0}
[data-modo="tintado"]{--token-accent:#E8A33D;--token-accent-deep:#A8742A;--token-accent-hover:#F5C578;--token-accent-soft:#D89A3C;--token-bg:#17120C;--token-bg-card:#241C13;--token-bg-chip:#302518;--token-bg-panel:#1D1710;--token-bg-poster:#2E2418;--token-bg-sala:#0F0B06;--token-boxoffice:#C9A25A;--token-budget:#8C8270;--token-grano-mezcla:overlay;--token-grano-opacidad:.4;--token-imdb:#E8C63D;--token-ink:#EDE1CA;--token-ink-2:#DACDB4;--token-ink-3:#C6B79E;--token-ink-4:#AEA189;--token-ink-5:#9E927B;--token-ink-faint:#463A28;--token-ink-hi:#F7EDD9;--token-magenta:#5B8FD6;--token-muted:#9A8F79;--token-muted-2:#857C6A;--token-muted-label:#8E836E;--token-on-accent:#17120C;--token-poster-filter:sepia(.34) saturate(.7) contrast(1.04);--token-rt:#DB6A4E;--token-second:#5B8FD6}
[data-modo="technicolor"]{--token-accent:#00B8CC;--token-accent-deep:#00808F;--token-accent-hover:#5BE4F2;--token-accent-soft:#3FCEDD;--token-bg:#0C0A14;--token-bg-card:#1A1428;--token-bg-chip:#251D38;--token-bg-panel:#141020;--token-bg-poster:#231B34;--token-bg-sala:#07050E;--token-boxoffice:#FFC400;--token-budget:#7385BE;--token-grano-mezcla:overlay;--token-grano-opacidad:.24;--token-imdb:#FFC400;--token-ink:#F2E8D5;--token-ink-2:#DFD3BE;--token-ink-3:#CCBFA9;--token-ink-4:#B2A694;--token-ink-5:#9F9384;--token-ink-faint:#3E3552;--token-ink-hi:#FCF4E3;--token-magenta:#E5188C;--token-muted:#9A9082;--token-muted-2:#8A8074;--token-muted-label:#8F8578;--token-on-accent:#0C0A14;--token-poster-filter:saturate(1.22) contrast(1.06);--token-rt:#E8321A;--token-second:#E5188C}
[data-modo="eastmancolor"]{--token-accent:#E0708F;--token-accent-deep:#A85069;--token-accent-hover:#F0A0B5;--token-accent-soft:#D3708B;--token-bg:#1A1218;--token-bg-card:#271C25;--token-bg-chip:#332530;--token-bg-panel:#20161E;--token-bg-poster:#31232E;--token-bg-sala:#120C10;--token-boxoffice:#C09A6E;--token-budget:#9385A0;--token-grano-mezcla:overlay;--token-grano-opacidad:.34;--token-imdb:#D9B45E;--token-ink:#EBDAD7;--token-ink-2:#D8C5C3;--token-ink-3:#C4AFAE;--token-ink-4:#AC9A99;--token-ink-5:#9C8B8A;--token-ink-faint:#4A3644;--token-ink-hi:#F6E7E4;--token-magenta:#6FA9AE;--token-muted:#9A8988;--token-muted-2:#8E7E7E;--token-muted-label:#8D7C7C;--token-on-accent:#1A1218;--token-poster-filter:saturate(.78) sepia(.1) contrast(.96) hue-rotate(-6deg);--token-rt:#D9705E;--token-second:#6FA9AE}