/* ===========================================================================
   CENTRAL COMUNISTA — Hoja compartida (theme.css)
   Importada por todas las páginas del sitio.

   Lenguaje visual: fotomontaje agitprop / constructivismo industrial.
   Paleta: GRISES CLAROS como base, sin blanco (#fff) ni negro (#000).
   Rojo #E50100 reservado a acentos (títulos, bordes, logos, links).
   Es el MISMO rojo del logo SVG (logo.svg, fill="#E50100"): cosmic pidió
   que la página y el logo no llevaran rojos distintos.

   Los grises son NEUTRO-FRÍOS (B > G > R), como acero: es la paleta
   original. Se templaron una vez (2026-09-06) y cosmic pidió volver atrás.
   NO recalentar la escala: lo que él llamaba "frío" no era la temperatura
   del color, sino que al cambiar de página se sentía una web vieja.
   =========================================================================== */

/* ============ FUENTES LOCALES ============
   ALIGERADO EL 2026-09-22. Los mismos diez cortes, ahora en WOFF2 delante y
   el TTF detrás como respaldo. `woff2_compress` recomprime el MISMO juego de
   glifos (no es un subsetting): no cambia un solo trazo, sólo el envase.

   Medido sobre los seis cortes que la página carga de verdad (los que fuerza
   `document.fonts.load` del taller de pósters + el cuerpo):
       antes  283.148 B   (seis TTF)
       ahora  104.672 B   (los mismos seis en WOFF2)
     -> 178.476 B menos por visita, el 63 %.

   🚨 `font-display:swap` NO es cosmética. Faltaba, y el valor por defecto es
   `auto` = bloqueo de ~3 s: en una conexión lenta la portada se quedaba EN
   BLANCO hasta que llegaba 'Red October'. Con `swap` se pinta ya con la
   fuente de respaldo y el titular cambia cuando llega la buena. Las de
   `google.css` ya lo llevaban; éstas no.

   El orden de `src` importa: woff2 primero y truetype detrás. El navegador
   coge el primero que entiende, así que uno viejo (sin woff2) sigue teniendo
   la fuente buena, y uno nuevo no descarga los 283 KB. */
@font-face{font-family:'Red October';font-display:swap;font-weight:normal;
  src:url('fonts/Red October.woff2') format('woff2'),
      url('fonts/Red October.ttf') format('truetype');}
@font-face{font-family:'Red October';font-display:swap;font-weight:bold;
  src:url('fonts/Red October-Fat.woff2') format('woff2'),
      url('fonts/Red October-Fat.ttf') format('truetype');}
@font-face{font-family:'Russo One';font-display:swap;font-weight:normal;
  src:url('fonts/RussoOne.woff2') format('woff2'),
      url('fonts/RussoOne.ttf') format('truetype');}
@font-face{font-family:'Communist';font-display:swap;font-weight:normal;
  src:url('fonts/Communist.woff2') format('woff2'),
      url('fonts/Communist.ttf') format('truetype');}
@font-face{font-family:'Communist';font-display:swap;font-weight:bold;
  src:url('fonts/Communist-Bold.woff2') format('woff2'),
      url('fonts/Communist-Bold.ttf') format('truetype');}
@font-face{font-family:'CourbeSans';font-display:swap;font-weight:normal;
  src:url('fonts/CourbeSans.woff2') format('woff2'),
      url('fonts/CourbeSans.ttf') format('truetype');}
/* --- RELLENO DE CourbeSans (2026-09-23) -------------------------------------
   🚨 CourbeSans trae 116 codepoints con AVANCE pero SIN CONTORNO. Como el
   glifo EXISTE, el navegador NO cae al siguiente tipo de la pila: dibuja un
   hueco del ancho correcto y no se ve nada. Medido sobre el sitio publicado:
   «CINCO BOTS    MARX, ENGELS, LENIN» — la raya desaparece; y lo mismo con
   «·», «‹», «›», «•», «°», «×», «©», «®».
   (Si el glifo NO existiera, el navegador si caeria al siguiente y se veria.
   Por eso el bug no se detecta mirando la pila de fuentes: hay que medir el
   contorno con FreeType. Ver `.dev/scripts/detecta_glifos_vacios.py`.)

   Arreglo: una cara de RELLENO que apunta a Rodchenko —que ya esta en la pila
   y SI pinta esos glifos— limitada con `unicode-range` a los codepoints rotos,
   y colocada DELANTE de CourbeSans en `--fuente-cuerpo`. Las letras normales
   siguen en CourbeSans; solo los glifos que CourbeSans no sabe dibujar se
   toman de Rodchenko.

   🚨 NO se meten los 116: unos cuantos son INVISIBLES A PROPOSITO (espacio de
   ancho cero, joiners, marcas de direccion). Darles un glifo los haria VISIBLES,
   justo lo contrario de lo que quieren. Se filtran por categoria Unicode
   (fuera Cf/Mn/Me/Cc/Zs/Zl/Zp y todo lo de ancho cero) -> quedan 69.
   La lista esta GENERADA, no escrita a mano. */
@font-face{font-family:'CourbeSansRelleno';font-display:swap;font-weight:normal;
  src:url('fonts/Rodchenko.woff2') format('woff2'),
      url('fonts/Rodchenko.ttf') format('opentype');
  unicode-range:U+005E-0060,U+007B-007E,U+00A2-00A9,U+00AC,U+00AE-00B4,U+00B6-00B9,U+00BC-00BE,U+00D0,U+00D7-00D8,U+00DE-00DF,U+00F0,U+00F7-00F8,U+00FE,U+0126-0127,U+0141,U+0166-0167,U+02C6-02C7,U+02C9,U+02D8-02DA,U+02DC-02DD,U+0384,U+0387,U+0E33,U+0EB3,U+1FEF,U+1FFD,U+2013-2014,U+201E,U+2020-2022,U+2030,U+2039-203A,U+20A3-20A4;}
@font-face{font-family:'Fyodor';font-display:swap;font-weight:normal;
  src:url('fonts/Fyodor-BoldCondensed.woff2') format('woff2'),
      url('fonts/Fyodor-BoldCondensed.ttf') format('truetype');}
@font-face{font-family:'Fyodor';font-display:swap;font-weight:bold;
  src:url('fonts/Fyodor-Bold.woff2') format('woff2'),
      url('fonts/Fyodor-Bold.ttf') format('truetype');}
/* Rodchenko es CFF (OpenType), no TrueType: el `format()` lo dice bien. */
@font-face{font-family:'Rodchenko';font-display:swap;font-weight:normal;
  src:url('fonts/Rodchenko.woff2') format('woff2'),
      url('fonts/Rodchenko.ttf') format('opentype');}
@font-face{font-family:'Rodchenko';font-display:swap;font-weight:bold;
  src:url('fonts/Rodchenko-Bold.woff2') format('woff2'),
      url('fonts/Rodchenko-Bold.ttf') format('opentype');}

/* ============ RESPALDOS DE TEXTO (2026-09-22) ============
   Antes esto era `fonts/google.css`, un <link> aparte: una petición MÁS que
   bloqueaba el pintado para traer 21 reglas de las que se usaban 6. Se ha
   traído aquí dentro (un viaje menos antes de pintar) y se han tirado los
   subsets cirílico, cirílico-extendido y vietnamita: este sitio está en
   español y no tiene una sola letra de esos alfabetos. Quedan latin y
   latin-ext, que es lo que cubre tildes, « », — y ·.
   Las rutas cambian: `google.css` vivía en fonts/, aquí estamos en la raíz,
   así que llevan el prefijo `fonts/`.
   Estas tres familias NO son las del sitio: son la red de seguridad por si
   'CourbeSans', 'Rodchenko' o el mono de sistema fallan. `Oswald` es el
   tercer recurso de --fuente-cuerpo y por eso se conserva. */
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'PT Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/9oRONYoBnWILk-9AnCEzM-Py.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'PT Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/9oRONYoBnWILk-9AnC8zMw.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Special Elite';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/XLYgIZbkc4JPUL5CVArUVL0ntn4OSEFt.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Special Elite';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/XLYgIZbkc4JPUL5CVArUVL0ntnAOSA.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============ VARIABLES ============ */
:root{
  /* Paleta principal: GRIS CLARO real, no blanco. El tono más claro
     (#dfdddb) tiene que leerse como gris a simple vista; si parece
     blanco, est mal calibrado. NO usamos blanco (#fff) ni negro (#000).

     Rampa neutro-fría (B > G > R). Es la original del sitio: no templar. */
  --g-50:#eceae8;   /*· fondo principal  gris claro, NO blanco */
  --g-100:#dedcda;  /* franja clara */
  --g-200:#acaaa7;  /* bordes suaves Y texto sobre fondos oscuros */
  --g-300:#939290;  /* SOLO bordes/separadores: sobre oscuro no llega */
  /* --- Escala de TEXTO sobre papel claro -------------------------------
     Rango tonal ENSANCHADO el 2026-09-12 (segunda vuelta). La primera
     calibro los grises contra --g-50 y se dejo --g-100 (#c9c7c5), que es
     MAS OSCURO: las secciones que usan --g-100 de fondo se quedaban sin
     margen. Medido: --g-400 daba 4.55:1 sobre --g-50 pero 3.66:1 sobre
     --g-100, y --g-500 5.48:1 / 4.40:1. Por eso cosmic seguia viendo
     "letras que no se ven bien" aunque el informe dijera 0 fallos: el
     informe medía el papel claro, no el oscuro.

     La causa de fondo era otra: TODO el sitio vivia en un rango tonal
     estrecho (papel #c9c7c5-#dfdddb, tinta #353432-#575553). Aunque cada
     par pasara el 4.5:1, el conjunto se lee lavado. Se ha aclarado el
     papel (#dfdddb -> #eceae8, #c9c7c5 -> #dedcda) manteniendo el gris
     (no es blanco) y el rango sube ~1,5 puntos en todo el sitio.

     Valores medidos AHORA sobre el papel mas oscuro (--g-100 #dedcda):
       --g-400 #5f5d5b -> 4.80:1  bordes, iconos Y texto pequeno
       --g-500 #575553 -> 5.43:1  texto secundario
       --g-600 #4a4846 -> 6.66:1
       --g-700 #3a3836 -> 8.54:1
       --g-800 #353432 -> 9.10:1
       --rojo-txt #A30100 -> 5.99:1
     Sobre --g-50 (#eceae8) cada uno sube ~1 punto mas.
     NO aclarar --g-400/--g-500: es exactamente el bug que cosmic reporto
     ("bastantes letras no se ven bien, el fondo es de color parecido"). */
  --g-400:#5f5d5b;  /* era #63615f; sobre --g-100 se quedaba en 4.51:1 */
  --g-500:#575553;  /* era #6b6967 */
  --g-600:#4a4846;  /* era #555350 */
  --g-700:#3a3836;  /* era #403e3c */
  --g-800:#353432;  /* banda, enfasis */
  --g-900:#252423;  /* reservado (no usar como fondo) */
  /* Casi blanco de papel. Existe por un unico motivo: el rojo #E50100 tiene
     L=0.167, asi que para que un texto sobre el llegue a 4.5:1 hace falta un
     blanco casi puro. #f7f6f5 se quedaba en 4.49:1 (por debajo del umbral);
     #fbfbfb da 4.68:1. Es SOLO para texto sobre rojo (nav activo, hover de
     botones). NO es el blanco del sitio. */
  --g-25:#fbfbfb;
  /* #E50100 = el rojo EXACTO de logo.svg. Si se cambia el logo, cambiar
     aquí también (y los rgba(229,1,0,*) repartidos por los CSS). */
  --rojo:#E50100;
  /* Rojo de TEXTO. Mismo tono al ~71 %, único rojo de la paleta que
     pasa 4.5:1 sobre los grises claros (6.2:1 sobre --g-50). --rojo
     sigue siendo el rojo de MARCA: filetes, fondos, selection y los
     titulares grandes (>=24px), donde el umbral es 3:1 y si pasa. */
  --rojo-txt:#A30100;
  --rojo-oscuro:#A30100;  /* mismo rojo al ~71 %: hover de cifras y marca
                             de /help. */

  --fuente-muestra:'Red October','Fyodor','Communist','Russo One',sans-serif;
  --fuente-marca:'Russo One','Red October',sans-serif;
  /* 🚨 'CourbeSansRelleno' VA DELANTE, y no es un descuido: cubre con
     `unicode-range` los 69 glifos que CourbeSans tiene sin contorno. Para el
     resto de caracteres su rango no casa y el navegador pasa a CourbeSans. */
  --fuente-cuerpo:'CourbeSansRelleno','CourbeSans','Rodchenko','Oswald',sans-serif;
  --fuente-etiqueta:'PT Mono',monospace;
  --fuente-mano:'Special Elite',cursive;

  /* BORDE A BORDE: solo margen lateral, sin max-width ni margin:auto.
     El tope sube a 5rem: en monitores anchos 3.6rem dejaba el texto casi
     pegado al borde (cosmic lo reportó el 2026-09-07). */
  --margen:clamp(1.1rem,4vw,5rem);

  /* La página es de papel claro y no tiene variante oscura. Sin esto, un
     navegador en modo oscuro con «forzar oscuro» invierte los controles
     nativos, las barras de scroll y los desplegables y deja el sitio a
     parches. `color-scheme:light` le dice que aquí sólo hay un esquema.
     Se declara además en el <head> (`<meta name="color-scheme">`) porque
     así el navegador lo sabe ANTES de tener el CSS. */
  color-scheme:light;
}

/* ============ RESET ============ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-color:var(--rojo) var(--g-800);scrollbar-width:thin;}
/* Los controles de formulario NO heredan tipografía por defecto: cada motor
   les pone la suya (y distinta entre sí). Sin esto, cualquier botón o campo
   futuro saldría con Arial mientras el resto de la página va en CourbeSans.
   `font:inherit` los alinea; el tamaño y el color se dejan a cada regla. */
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}
body{
  color:var(--g-700);font-family:var(--fuente-cuerpo);line-height:1.6;
  /* SIN FONDO DE PÁGINA y SIN MARCO: fondo plano urgido 2026-09-13.
     Base #eceae8 (--g-50); sol fondo2 y papel retirados. */
  --marco:0rem;
  /* 🚨 `100vh` PRIMERO, `100svh` DESPUÉS: es el orden, no un descuido.
     `svh` (small viewport height) sólo existe desde Chrome 108 / Safari 15.4
     / Firefox 101. En un navegador más viejo la declaración entera se
     descarta y `min-height` se queda sin valor; con el `100vh` delante, ese
     navegador al menos tiene algo. El que entiende `svh` se queda con el
     bueno, que es el que no cuenta la barra del móvil. */
  min-height:100vh;
  min-height:100svh;
  border:none;
  background-color:#eceae8;
  /* FONDO DE PÁGINA: papel blanco (papelblanco.svg) a cubrir todo (2026-09-13) */
  background-image:none;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
/* <picture> es inline por defecto: al meter los retratos en <picture> para
   servir WebP, la caja se dimensionaba por su contenido y desbordaba la
   columna en pantallas estrechas (el retrato se cortaba contra el borde
   derecho y body{overflow-x:hidden} lo tapaba). Bloque y 100% lo arregla. */
picture{display:block;max-width:100%;}
::selection{background:var(--rojo);color:var(--g-25);}

/* ============ CURSOR: EL PUÑO ============
   Generado desde el puño en alto que pasó cosmic (Descargas/image.svg) con
   `.gen_cursor.py`. Dos variantes del MISMO dibujo:
     cursor.svg       #9A0108  -> cursor normal
     cursor-mano.svg  #E50100  -> sobre enlaces y botones (rojo de marca)
   Si todo llevara el mismo puño se perderia la señal de "esto se pulsa";
   cambiando de tono se mantiene sin meter una flecha distinta.
   Ambas llevan un halo claro de ~0,8 px: el rojo sobre el pie o sobre la
   banda oscura daria 1,6:1 y el cursor desapareceria.
   El .png es el respaldo para navegadores sin cursor SVG.
   Punto activo 1 1 = la punta del dedo (el puño mira arriba-izquierda). */
html{
  cursor:url("./svgs/cursor.svg") 1 1, url("./svgs/cursor.png") 1 1, auto;
}
a,button,summary,label[for],select,[role="button"],input[type="submit"],input[type="button"]{
  cursor:url("./svgs/cursor-mano.svg") 1 1, url("./svgs/cursor-mano.png") 1 1, pointer;
}
/* En campos de texto manda el cursor de texto: con el puño no se ve donde
   esta el punto de insercion. */
input,textarea,[contenteditable="true"]{cursor:text;}
:disabled,[aria-disabled="true"]{cursor:not-allowed;}

/* ============ FONDO BASE (industrial sutil, muy aclarado) ============ */

/* ============ TRANSICIÓN ENTRE PÁGINAS ============
   Antes cada clic era un corte en seco: el navegador pintaba la página
   nueva de golpe y eso se leía como "web del 2010". Con View Transitions
   la navegación hace cross-fade y, lo importante, el fondo y el masthead
   se capturan aparte y NO se mueven: parecen fijos mientras solo cambia
   el contenido. En navegadores sin soporte esto se ignora y la web sigue
   funcionando exactamente igual que antes. */
@view-transition{navigation:auto;}

/* El fondo y la cabecera existen en todas las páginas y son idénticos.
   Se les da nombre propio para que no entren en el cross-fade general:
   si entraran, se veran dos veces translapados (el "fantasma"). */
.masthead{view-transition-name:masthead;}

::view-transition-group(masthead){animation-duration:1ms;}
::view-transition-old(masthead),::view-transition-new(masthead){
  animation:none;mix-blend-mode:normal;}

@keyframes vt-sale{from{opacity:1;}to{opacity:0;transform:translateY(-8px);}}
@keyframes vt-entra{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
::view-transition-old(root){animation:200ms cubic-bezier(.4,0,1,1) both vt-sale;}
::view-transition-new(root){animation:360ms cubic-bezier(.22,.61,.36,1) both vt-entra;}

/* ============ APARICIÓN AL HACER SCROLL ============
   La clase `js` la pone un script en el <head>. Sin JS no existe `js`,
   así que nada se oculta nunca: el contenido siempre es visible. */
html.js .revelable{opacity:0;transform:translateY(16px);}
html.js .revelable.visto{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);}

/* --- RED DE SEGURIDAD (2026-09-22) ---
   `.revelable` lo pone un script y `.visto` lo pone OTRO paso, con un
   `setTimeout(30 + i*35)`. Si ese segundo paso no llega —un error de JS, un
   script bloqueado, un motor que no ejecute el IIFE del escritorio— el
   contenido se queda en `opacity:0` PARA SIEMPRE: la ventana se ve vacía.
   No es teórico: se vio en una captura de Firefox, que fotografía antes de
   que corra ese `setTimeout`. En Chromium no se ve porque espera más.

   Esta animación hace aparecer el bloque sola a los 2,5 s, sin depender del
   JS. NO provoca parpadeo: `both` aplica el estado `from` durante la espera
   (o sea, `opacity:0`, exactamente lo mismo que ya hacía `.revelable`), y si
   `.visto` entra antes de que arranque, la animación deja de casar y no pasa
   nada. Y si `.visto` entrara DESPUÉS, el bloque ya estaría en `opacity:1` y
   `visto` también vale 1: sin cambio de valor, la transición no corre. */
@keyframes revelable-red{from{opacity:0;transform:translateY(16px);}
                         to{opacity:1;transform:none;}}
html.js .revelable:not(.visto){animation:revelable-red .5s ease 2.5s both;}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
  html.js .revelable{opacity:1;transform:none;}
  html.js .revelable:not(.visto){animation:none;}
  /* El desplazamiento suave de las anclas también es movimiento: a quien
     pide reducirlo le marea igual que una animación. Se devuelve al salto
     seco, que es como funcionaban los anclajes antes. */
  html{scroll-behavior:auto;}
}

/* ============ BASE MÓVIL ============
   iOS infla el texto solo al girar a horizontal (text-size-adjust) y deja
   las líneas a saltos. Con 100% el tamaño lo manda siempre el CSS. No rompe
   el zoom manual: eso lo gobierna `user-scalable`, que no tocamos. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

/* ============ APILAMIENTO ============ */
.masthead{position:sticky;top:0;z-index:40;
  /* rompe el margen del body: toca el borde superior y laterales */
  margin:calc(var(--marco)*-1) calc(var(--marco)*-1) 0;
  padding:0;
  width:auto;}
.franja,.banda,footer{position:relative;z-index:3;}

/* ============ MASTHEAD (compartido en todas las páginas) ============ */
.masthead{
  border-bottom:3px solid var(--rojo);
  /* Sin velo ni filtro: fondo2.svg (el sol de rayos) se muestra tal cual,
     como en el diseño original. El color base claro solo respalda por si
     el SVG tiene zonas transparentes; no aplica ninguna capa de lavado. */
  background-color:#e7e5e3;
  background-image:
    url("./svgs/fondo2.webp"),
    url("./svgs/papelgris.svg");
  background-size:cover,480px auto;background-position:center,50% 100%;background-repeat:no-repeat,repeat-x;

}
/* Altura de la barra fija (~la original), para que crezcan solo el logo y
   el nombre. El min-height manda: el logo ya no estira la barra. */
.masthead-in{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem);padding:.1rem 0;min-height:clamp(4.3rem,8vh,5.3rem);}

/* --- Marca: logo grande + nombre en una sola línea ---
   El logo va SIN efectos: ni drop-shadow, ni giro ni escala al pasar el
   cursor (cosmic lo pidió explcitamente). Solo camba la opacidad del
   enlace, que es el feedback mínimo de que es clicable. */
.masthead-logo{display:flex;align-items:center;gap:clamp(.8rem,1.5vw,1.25rem);
  text-decoration:none;flex:0 0 auto;padding:0 .6rem 0 0;
  border-radius:3px;transition:opacity .18s;}
.masthead-logo:hover{opacity:.85;}
.masthead-logo:focus-visible{outline:2px solid var(--rojo);outline-offset:3px;}
/* El SVG es apaisado (viewBox 1120x609 ≈ 1.84:1). Fijar ancho Y alto
   cuadrados dejaba medio logo en blanco y estiraba la barra sin motivo:
   a 92x92 se dibujaba 92 de ancho pero solo 50 de alto. Se fija solo el
   ALTO y el ancho se calcula solo -> mismo tamaño visible, barra corta. */
.masthead-logo img{height:clamp(30px,3vw,42px);width:auto;max-width:none;
  object-fit:contain;flex:0 0 auto;display:block;}

.masthead-nombre{display:flex;flex-direction:column;line-height:1;}
/* Nombre en ROJO PLANO (cosmic lo pidió el 2026-09-06): "Central" y
   "Comunista" van en el mismo --rojo, sin segunda tinta. --rojo-oscuro
   sigue definida pero ya no la usa ninguna regla. */
.masthead-nombre .top{font-family:var(--fuente-marca);
  font-size:clamp(1.3rem,2.45vw,2.05rem);color:var(--rojo);
  letter-spacing:.01em;white-space:nowrap;}
.masthead-nombre .top b{color:var(--rojo);font-weight:inherit;}

/* --- Navegación: píldora suave al pasar + subrayado rojo animado ---
   Activo y hover usan la rampa (--g-50 / --g-900), nunca #fff/#000. */
nav.masthead-nav{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;}
nav.masthead-nav a{position:relative;color:var(--g-700);text-decoration:none;
  text-transform:uppercase;font-size:.74rem;font-weight:700;letter-spacing:.15em;
  padding:.62rem .85rem;border-radius:3px;white-space:nowrap;
  transition:color .18s,background-color .18s;}
nav.masthead-nav a::after{content:"";position:absolute;left:.85rem;right:.85rem;
  bottom:.34rem;height:2px;background:var(--rojo);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .24s cubic-bezier(.4,0,.2,1);}
/* El hover se limita a los dispositivos con puntero de verdad. En táctil
   `:hover` se queda PEGADO tras el toque: al elegir sección el enlace elegido
   seguía con el fondo gris de hover, que además competía con el rojo macizo
   del activo. `@media(hover:hover)` no existe en navegadores antiguos, y ahí
   la consulta no coincide, así que simplemente no hay hover — que es
   exactamente lo que queremos en una pantalla táctil. */
@media(hover:hover){
  nav.masthead-nav a:hover{color:var(--g-900);background:rgba(33,32,31,.07);}
  nav.masthead-nav a:hover::after{transform:scaleX(1);}
}
nav.masthead-nav a.activo{color:var(--g-25);background:var(--rojo);}
nav.masthead-nav a.activo::after{transform:scaleX(1);background:var(--g-25);}
nav.masthead-nav a:focus-visible{outline:2px solid var(--rojo);outline-offset:2px;}
nav.masthead-nav a.activo:focus-visible{outline-color:var(--g-800);}

/* ============ TIPOGRAFÍA EDITORIAL ============ */
.kicker{display:inline-flex;align-items:center;gap:.8rem;color:var(--g-500);
  text-transform:uppercase;letter-spacing:.32em;font-size:.72rem;font-weight:700;
  font-family:var(--fuente-etiqueta);margin-bottom:.6rem;}
.kicker::before{content:"";width:40px;height:3px;background:var(--rojo);}

.t-titular{font-family:var(--fuente-muestra);font-size:clamp(2.4rem,6vw,4.6rem);
  text-transform:uppercase;line-height:.92;letter-spacing:-.01em;color:var(--g-700);}
.t-titular .solido{color:var(--rojo);}
.t-titular .contorno{color:transparent;-webkit-text-stroke:2px var(--rojo);
  paint-order:stroke fill;}
.t-titular--xl{font-size:clamp(3.4rem,11vw,9rem);line-height:.84;letter-spacing:-.02em;}
/* En móvil el mínimo de 3.4rem hacía que "Comunista" no cupiera: se salía
   ~28px y el overflow-x:hidden lo cortaba pegado al borde (cosmic lo
   reportó el 2026-09-07). Se baja el mínimo y se permite partir palabra. */
@media(max-width:600px){
  .t-titular{font-size:clamp(1.8rem,7vw,2.4rem);}
  .t-titular--xl{font-size:clamp(2.1rem,10vw,3.4rem);}
  .t-titular,.t-titular--xl{overflow-wrap:break-word;}
}

.t-subtitulo{font-family:var(--fuente-muestra);font-size:clamp(1.05rem,2vw,1.4rem);
  text-transform:uppercase;letter-spacing:.18em;color:var(--g-600);line-height:1.2;}

.t-cuerpo{font-size:clamp(.95rem,1.2vw,1.05rem);color:var(--g-700);max-width:62ch;}
.t-cuerpo b{color:var(--g-800);}
.t-cuerpo em{color:var(--rojo-txt);font-style:normal;}

.t-firma{font-family:var(--fuente-mano);color:var(--g-500);font-size:.95rem;}

/* ============ FRANJAS (borde a borde, cero tarjetas) ============ */
.ancho{padding-left:var(--margen);padding-right:var(--margen);}
.franja{padding:clamp(2.6rem,7vh,5rem) 0;}
/* Portada única: anclas /#programa etc. No dejar la sección escondida
   bajo la barra fija al hacer scroll por el nav. */
.franja,.bot-perfil,.masthead-seccion,.banner-seccion{
  scroll-margin-top:clamp(5.5rem,9vh,7rem);}
/* Escala de grises (ninguna es blanca): base g-50 < clara g-100 < calida.
   Cada una se distingue de la anterior a simple vista.

   Separacin: ANTES cada franja llevaba filetes de 1px arriba y abajo, y
   eso las dejaba como cajas apiladas de plantilla vieja. Ahora el cambio
   de tono se marca con una sombra interior difusa en los bordes: se sigue
   viendo dnde empieza cada bloque, pero sin la línea dura. */
.franja--base{color:var(--g-700);}
.franja--clara,.franja--calida{color:var(--g-700);
  }




/* Banda oscura solo cuando hace falta drama (llamada, contraste con la base) */
.banda{background:var(--g-800);color:var(--g-100);
  border-top:3px solid var(--rojo);border-bottom:3px solid var(--rojo);overflow:hidden;}
.banda::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(223,221,219,.05) 0 12px,transparent 12px 28px);}
.banda-in{position:relative;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;
  justify-content:space-between;padding-block:clamp(1.8rem,5vw,3rem);}
.banda h3{font-family:var(--fuente-muestra);font-size:clamp(1.4rem,3.5vw,2.2rem);
  text-transform:uppercase;line-height:1.05;color:var(--g-50);}
.banda h3 em{font-style:normal;color:var(--g-200);}

/* ============ CABECERA DE SECCIÓN ============ */
.sec-head{display:flex;align-items:center;gap:1.2rem;margin-bottom:clamp(1.6rem,4vh,2.6rem);
  border-bottom:3px solid var(--rojo);padding-bottom:.9rem;}
.sec-num{font-family:var(--fuente-muestra);font-size:clamp(1.8rem,4vw,2.6rem);
  line-height:1;color:var(--rojo);min-width:2ch;letter-spacing:-.02em;}
.sec-head h2{font-family:var(--fuente-muestra);font-size:clamp(1.6rem,4vw,2.8rem);
  text-transform:uppercase;letter-spacing:.01em;color:var(--g-800);line-height:1;}
.sec-head h2 span{color:var(--rojo-txt);}
.sec-regla{flex:1;height:3px;
  background:repeating-linear-gradient(90deg,var(--g-400) 0 14px,transparent 14px 26px);}

/* ============ PORTADA DE VENTANA (2026-09-22) ============
   Cosmic: «las páginas que no sean inicio más bonitas, que sean casi como
   inicio; inicio déjalo tal cual».

   El problema era de JERARQUÍA, no de contenido. La ventana de inicio abre
   con un aparato completo —antetítulo, titular a dos tonos, subfilete y
   entradilla— y las otras cuatro abrían con un `.sec-head`: un renglón con
   el número, el título y una regla de puntos. En una web de una sola página
   donde el nav cambia de VENTANA (no de documento), eso hacía que las otras
   cuatro se leyeran como un anexo de la primera.

   `.portada` es ese mismo aparato, reutilizado y un punto más contenido para
   que no compita con el hero:
     · antetítulo  -> `.kicker` (el mismo de inicio, con su filete rojo)
     · titular     -> dos líneas, la primera MACIZA en rojo y la segunda a
                      CONTORNO (el gesto de marca del hero)
     · subfilete   -> el par de filetes rojo/acero con la línea espaciada
     · entradilla  -> párrafo con filete rojo a la izquierda y CAPITULAR
     · placa       -> el número de sección en grande, a contorno, a la derecha

   🚨 NO se toca `.hero` ni nada de la ventana de inicio. Esta clase se
   estrena en las ventanas 00/01/04/05; `#principios` (02) y `#frentes` (03)
   son SUBsecciones dentro de la ventana 01 y siguen con su `.sec-head`, que
   es lo correcto: si todo fuera portada, ninguna destacaría. */
.portada{position:relative;margin-bottom:clamp(1.8rem,4.5vh,3rem);}
.portada-in{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.2rem,3.5vw,3rem);align-items:end;}
.portada-col{min-width:0;}

.portada-titular{font-family:var(--fuente-muestra);
  font-size:clamp(2.5rem,7.4vw,5.4rem);line-height:.86;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--g-700);overflow-wrap:break-word;}
.portada-titular .solido{display:block;color:var(--rojo);}
/* 🚨 OJO, ESTE `.contorno` NO ES EL DEL HERO, aunque se llame igual.
   El hero lo redefine a rojo macizo y sin trazo (`.hero .t-titular
   .contorno{-webkit-text-stroke:0}`), así que hoy el contorno NO se usa en
   ninguna parte del sitio. Aquí se estrena, y por eso lleva su propio par
   respaldo + @supports en vez de heredar el de `.t-titular`:
     · sin soporte de `text-stroke` -> `--g-300`, un gris medio: se lee.
     · con soporte -> hueco con trazo rojo de 2 px (paint-order deja el trazo
       por debajo del relleno, que si no se come las contraformas).
   No se toca el del hero: la ventana de inicio tiene que quedar igual. */
.portada-titular .contorno{display:block;color:var(--g-300);}
@supports ((-webkit-text-stroke:1px red) or (text-stroke:1px red)){
  .portada-titular .contorno{color:transparent;-webkit-text-stroke:2px var(--rojo);
    paint-order:stroke fill;}
}

/* El subfilete: mismo gesto que `.hero-subflag`, un punto más bajo. */
.portada-subflag{margin-top:1.15rem;padding:.55rem 0;
  border-top:3px solid var(--rojo);border-bottom:3px solid var(--g-300);}
.portada-subflag span{font-family:var(--fuente-muestra);text-transform:uppercase;
  letter-spacing:.2em;font-size:clamp(.72rem,1.5vw,1rem);color:var(--g-700);}

/* La entradilla NO lleva filete rojo a la izquierda, y es a propósito: el
   cuerpo que viene justo debajo es un `.manifiesto`, que YA lleva su filete
   rojo de 6 px. Dos lomos rojos seguidos, a distinta anchura y separados por
   un margen, se leen como un error de alineación, no como jerarquía. El
   subfilete de arriba ya cierra la entradilla por arriba; la capitular hace
   el resto. */
.portada-lead{margin-top:1.35rem;color:var(--g-600);max-width:64ch;
  font-size:clamp(1.02rem,1.35vw,1.14rem);line-height:1.75;}
.portada-lead b{color:var(--g-800);}

/* CAPITULAR. `::first-letter` sólo funciona si el párrafo EMPIEZA por texto:
   si el primer hijo fuera un `<b>` o un enlace, en varios motores la regla
   no casa y la letra se queda sin agrandar. En el HTML está escrito así a
   propósito — no meter una etiqueta delante de la primera palabra. */
.portada-lead::first-letter{float:left;font-family:var(--fuente-muestra);
  font-size:3.4em;line-height:.76;padding:.04em .14em 0 0;color:var(--rojo);}

/* La placa: el número de la sección, grande y a contorno, como una chapa
   estarcida. Va en su propia columna y alineada al pie del titular. */
.portada-placa{display:flex;flex-direction:column;align-items:flex-end;
  gap:.4rem;flex:0 0 auto;}
.portada-num{font-family:var(--fuente-muestra);font-size:clamp(3.2rem,9vw,7rem);
  line-height:.8;letter-spacing:-.03em;color:var(--g-200);}
/* 🚨 El respaldo va FUERA del @supports y el efecto dentro, no al revés.
   A contorno quiere decir `color:transparent` + trazo. Un navegador sin
   `-webkit-text-stroke` pintaría el número INVISIBLE (transparente y sin
   trazo que lo dibuje). Aquí, sin soporte, se queda en `--g-200`, que es un
   gris medio: se ve. Y donde sí hay soporte, el resultado es idéntico al
   que ya usa `.t-titular .contorno` en el hero. */
@supports ((-webkit-text-stroke:1px red) or (text-stroke:1px red)){
  .portada-num{color:transparent;-webkit-text-stroke:2px var(--rojo);
    paint-order:stroke fill;}
}
.portada-etq{font-family:var(--fuente-etiqueta);font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--g-500);
  border-top:2px solid var(--rojo);padding-top:.45rem;text-align:right;}

/* En pantalla estrecha la placa no cabe al lado: pasa a ser una franja
   arriba, con el número y la etiqueta en la misma línea. Se pierde altura
   pero no se pierde la identidad de la sección. */
@media(max-width:760px){
  .portada-in{grid-template-columns:minmax(0,1fr);align-items:start;}
  .portada-placa{flex-direction:row;align-items:baseline;justify-content:space-between;
    order:-1;width:100%;gap:1rem;border-bottom:1px solid var(--g-300);padding-bottom:.5rem;}
  .portada-num{font-size:clamp(2.2rem,11vw,3.2rem);}
  .portada-etq{border-top:0;padding-top:0;}
}

/* ============ TIRA DE DATOS ============ */
.tira{display:grid;gap:clamp(.8rem,2vw,1.6rem);
  margin-top:clamp(2.2rem,6vh,4rem);border-top:3px solid var(--rojo);
  border-bottom:1px solid var(--g-300);}
.tira--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.tira--5{grid-template-columns:repeat(5,minmax(0,1fr));}
/* min-width:0: sin esto el ITEM no puede encogerse por debajo de su
   min-content (+ su padding) y se sale de la columna aunque la columna sea
   minmax(0,1fr) — era el recorte de 15px contra el borde en móvil. */
.tira-celda{padding:1.1rem 0 1.1rem clamp(.8rem,2vw,1.6rem);border-left:1px solid rgba(63,67,74,.18);
  min-width:0;overflow-wrap:break-word;}
.tira-celda:first-child{border-left:0;padding-left:0;}
.tira-celda:last-child{padding-right:var(--margen);}
.tira-celda b{display:block;font-family:var(--fuente-muestra);font-size:clamp(1.4rem,3vw,2.2rem);
  line-height:1;color:var(--rojo-txt);}
.tira-celda span{display:block;margin-top:.35rem;font-family:var(--fuente-etiqueta);
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-500);}

/* ============ FILAS (ledger) ============ */
.ledger{border-top:3px solid var(--rojo);}
.fila{display:grid;grid-template-columns:clamp(46px,6vw,70px) minmax(0,1fr) minmax(0,260px) 62px 28px;
  gap:clamp(.9rem,2.4vw,2rem);align-items:center;text-decoration:none;
  padding:1.05rem var(--margen);border-bottom:1px solid rgba(63,67,74,.15);
  transition:background .15s,padding-left .15s;}
.fila:hover{background:rgba(229,1,0,.06);padding-left:calc(var(--margen) + .9rem);}
.fila:focus-visible{outline:2px solid var(--rojo);outline-offset:-2px;
  background:rgba(229,1,0,.06);}
.fila .idx{font-family:var(--fuente-muestra);font-size:1.05rem;color:var(--rojo-txt);letter-spacing:.1em;font-weight:700;}
.fila .ttl{font-family:var(--fuente-muestra);font-size:1.05rem;text-transform:uppercase;color:var(--g-700);}
.fila .meta{font-family:var(--fuente-etiqueta);font-size:.78rem;color:var(--g-500);
  letter-spacing:.1em;text-transform:uppercase;}
.fila .ext{font-family:var(--fuente-muestra);font-size:.78rem;color:var(--rojo-txt);
  padding:0;background:none;border:0;border-radius:0;text-align:center;
  letter-spacing:.14em;font-weight:700;}
.fila .arw{font-size:1.15rem;color:var(--g-500);transition:transform .15s;}
.fila:hover .arw{transform:translateX(5px);color:var(--rojo-txt);}

/* ============ BOTONES ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;text-decoration:none;
  background:transparent;color:var(--g-800);text-transform:uppercase;font-size:.92rem;
  letter-spacing:.18em;padding:.85rem 1.6rem;border:0;border-bottom:3px solid var(--rojo);
  border-radius:0;transition:background .15s,color .15s,padding .15s;}
.btn:hover{background:var(--rojo);color:var(--g-25);}
.btn:focus-visible{outline:2px solid var(--rojo);outline-offset:3px;}
.btn .arw{transition:transform .15s;}
.btn:hover .arw{transform:translateX(4px);}
.btn--sec{color:var(--g-700);border-bottom-color:var(--g-400);}
.btn--sec:hover{background:var(--g-800);color:var(--g-50);border-bottom-color:var(--g-800);}
/* OJO: .banda tiene fondo --g-800. Este botón tenía color:var(--g-800) ->
   texto del MISMO color que su fondo (contraste 1.00:1, botón invisible).
   Medido el 2026-09-12. */
.banda .btn{color:var(--g-50);border-bottom-color:var(--rojo);}
.banda .btn:hover{background:var(--rojo);color:var(--g-25);border-bottom-color:var(--rojo);}
.banda .btn:focus-visible{outline-color:var(--g-50);}

/* ============ FILAS-FRENTE (sin caja) ============ */
.fila-frente{display:grid;grid-template-columns:clamp(60px,7vw,110px) clamp(40px,4vw,56px) minmax(0,1.05fr) minmax(0,1.15fr) auto;
  gap:clamp(.9rem,2.4vw,2.2rem);align-items:center;
  padding:clamp(1.1rem,2.4vw,1.8rem) var(--margen);
  border-bottom:1px solid rgba(63,67,74,.15);
  transition:background .16s,padding-left .16s;}
.fila-frente:hover{background:rgba(229,1,0,.05);padding-left:calc(var(--margen) + .9rem);}
/* min-width:0 en los ítems: sin esto no pueden encogerse por debajo de su
   min-content y el texto se sale de la columna (letras pegadas al borde). */
.fila-frente > *{min-width:0;overflow-wrap:break-word;}
.fila-frente .num{font-family:var(--fuente-muestra);font-size:clamp(.9rem,1.4vw,1.05rem);
  color:var(--rojo-txt);letter-spacing:.22em;font-weight:700;}
.fila-frente .ico{width:clamp(40px,4vw,52px);height:clamp(40px,4vw,52px);color:var(--g-400);}
.fila-frente .ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.fila-frente h3{font-family:var(--fuente-muestra);font-size:clamp(1.05rem,2vw,1.35rem);
  text-transform:uppercase;color:var(--g-800);line-height:1.1;}
.fila-frente p{color:var(--g-600);font-size:.92rem;}
.fila-frente .sub{justify-self:end;white-space:nowrap;
  font-family:var(--fuente-etiqueta);font-size:.7rem;color:var(--g-500);
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  padding:0;background:none;border:0;border-radius:0;}
.fila-frente .sub::before{content:"— ";color:var(--rojo-txt);}

.fila-frente--lead{background:rgba(229,1,0,.05);border-left:6px solid var(--rojo);
  padding-top:clamp(1.6rem,3.4vw,2.6rem);padding-bottom:clamp(1.6rem,3.4vw,2.6rem);}
.fila-frente--lead h3{font-size:clamp(1.4rem,3vw,2rem);}
.fila-frente--lead p{font-size:1rem;color:var(--g-700);}
.fila-frente--lead .ico{color:var(--g-500);}

/* ============ PRINCIPIOS ============ */
.principios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(1.6rem,4vh,2.6rem);border-top:1px solid rgba(63,67,74,.2);}
.principio{padding:1.4rem clamp(.9rem,2vw,1.6rem) 0 0;border-left:1px solid rgba(63,67,74,.18);
  padding-left:clamp(.9rem,2vw,1.6rem);
  min-width:0;overflow-wrap:break-word;}
.principio:first-child{border-left:0;padding-left:0;}
.principio .n{font-family:var(--fuente-muestra);font-size:1rem;letter-spacing:.2em;
  color:var(--rojo-txt);font-weight:700;}
.principio h4{font-family:var(--fuente-muestra);font-size:1.1rem;text-transform:uppercase;
  margin:.35rem 0 .4rem;color:var(--g-800);}
.principio p{color:var(--g-600);font-size:.88rem;}

/* ============ BOTS: tira horizontal ============ */
.bot-tira{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:3px solid var(--rojo);border-bottom:1px solid rgba(63,67,74,.2);}
.bot-celda{padding:clamp(1.4rem,3vw,2.4rem) clamp(.8rem,2vw,1.5rem);
  border-left:1px solid rgba(63,67,74,.18);text-align:center;
  min-width:0;overflow-wrap:break-word;
  transition:background .16s;}
.bot-celda:first-child{border-left:0;}
.bot-celda:hover{background:rgba(229,1,0,.06);}

/* Retrato + inicial superpuesta (mismo lenguaje que bots.html) */
.bot-celda .ava{position:relative;display:block;width:100%;max-width:190px;margin:0 auto .7rem;}
.bot-celda .ava-foto{display:block;width:100%;height:auto;
  border-bottom:5px solid var(--rojo);
  
  filter:grayscale(.35) contrast(1.02);
  transition:filter .2s,transform .2s;}
.bot-celda:hover .ava-foto{filter:grayscale(0) contrast(1.04);transform:translateY(-3px);}
.bot-celda .ava-letra{
  position:absolute;left:.25rem;top:.15rem;
  font-family:var(--fuente-muestra);font-size:clamp(2.6rem,5vw,4rem);
  line-height:.8;color:var(--g-50);letter-spacing:-.02em;
  text-shadow:2px 2px 0 var(--rojo),0 0 10px rgba(30,29,28,.4);
  pointer-events:none;transition:transform .18s;}
.bot-celda:hover .ava-letra{transform:scale(1.06);}

.bot-celda h4{font-family:var(--fuente-muestra);font-size:clamp(.9rem,1.4vw,1.05rem);
  text-transform:uppercase;color:var(--g-800);line-height:1.2;margin-top:.5rem;}
.bot-celda p{font-family:var(--fuente-etiqueta);font-size:.7rem;color:var(--g-500);
  letter-spacing:.08em;margin-top:.35rem;text-transform:uppercase;}
.bot-celda a{text-decoration:none;color:inherit;}

/* ============ FOOTER ============
   Historia de este bloque (para no dar otra vuelta):
     1) Original: papel claro + papelpie.svg a .8 -> el texto --g-300 daba
        1.15:1. Ilegible.
     2) 2026-09-12 (1a): cosmic pidio "haz el fondo mas oscuro". Se fue a
        #1d1c1b. Legible (9:1) pero el resultado era un bloque negro muerto
        pegado al final: "el footer quedo feo".
     3) 2026-09-12 (2a, esta): se vuelve al PAPEL, que es lo que hace el
        resto del sitio, pero con el horizonte fabril de verdad detras y
        un filete rojo de marca. La legibilidad ya no depende de oscurecer
        el fondo, sino del rango tonal: papel --g-50 y texto --g-600/--g-800
        dan 7.5:1 y 10:1.
   La silueta va DEBAJO del texto (padding-bottom reservado), no detras:
   asi no hay ni un parrafo sobre imagen y no hace falta medir nada. */
footer{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,var(--g-50) 0%,var(--g-100) 100%);
  border-top:3px solid var(--rojo);
  color:var(--g-700);
  /* el hueco de abajo es el horizonte fabril */
  padding-bottom:clamp(96px,15vh,150px);
}
/* Textura de papel, la misma familia que el resto del sitio. */
footer::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url("./svgs/papelpie.webp") center/130% no-repeat;
  opacity:.5;filter:grayscale(1) contrast(1.02);
}
/* Horizonte fabril: silueta oscura al pie, como el suelo de la pagina. */
footer::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(96px,15vh,150px);z-index:-1;pointer-events:none;
  background:url("./svgs/fabricas.svg") center bottom/cover no-repeat;
  opacity:.9;filter:grayscale(1) contrast(1.05) brightness(1.1);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 70%);
  mask-image:linear-gradient(180deg,transparent 0,#000 70%);
}
/* padding-block (NO padding a secas): este div lleva también la clase .ancho,
   y `padding:2.8rem 0` pisaba su padding-left/right porque ambas reglas tienen
   la misma especificidad y esta vena después -> el footer quedaba pegado al
   borde izquierdo del monitor. Con padding-block solo tocamos arriba/abajo. */
.foot-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem;
  padding-block:3rem 2.4rem;}
.foot-in > *{min-width:0;overflow-wrap:break-word;}
/* El filete rojo bajo cada titular: es la marca de la casa y ademas
   separa sin necesidad de un gris mas. */
.foot-in .col h4{text-transform:uppercase;letter-spacing:.18em;color:var(--g-800);font-size:.85rem;
  margin-bottom:1rem;font-family:var(--fuente-muestra);font-weight:400;padding-bottom:.45rem;
  border-bottom:2px solid var(--rojo);}
.foot-in .col a,.foot-in .col p{display:block;color:var(--g-600);text-decoration:none;
  font-size:.9rem;margin-bottom:.5rem;font-weight:400;}
.foot-in .col a:hover{color:var(--rojo-txt);}
.foot-in .col a:focus-visible{outline:2px solid var(--rojo);outline-offset:2px;
  color:var(--g-800);}
.foot-in .brand .marca{font-size:1.25rem;margin-bottom:.7rem;color:var(--g-900);
  font-family:var(--fuente-marca);}
.foot-in .brand .marca b{color:var(--rojo-txt);font-weight:inherit;}
.foot-in .brand p{color:var(--g-600);max-width:360px;}
/* Deuda declarada con las fuentes del sitio (2026-09-21). Va en el pie de
   todas las páginas y es discreta a propósito: es un crédito, no un banner.
   🚨 Los enlaces van EN LÍNEA: `.foot-in .col a` los pone en bloque y aquí
   partirían el párrafo en tres renglones sueltos. */
.foot-credito{display:block;margin-top:.9rem;font-size:.78rem;line-height:1.6;
  color:var(--g-500);max-width:360px;}
.foot-in .col .foot-credito a{display:inline;font-size:inherit;margin:0;
  color:var(--g-600);border-bottom:1px solid var(--g-400);}
.foot-in .col .foot-credito a:hover{color:var(--rojo-txt);border-bottom-color:var(--rojo);}
/* padding-block por lo mismo que .foot-in: si no, el texto del crédito se
   pegaba a los bordes en pantallas estrechas. */
.credit{border-top:1px solid var(--g-300);padding-block:1.2rem;color:var(--g-600);font-size:.78rem;
  letter-spacing:.14em;text-align:center;text-transform:uppercase;font-family:var(--fuente-etiqueta);}
.credit span{color:var(--rojo-txt);font-weight:700;}

/* ============ SELLO ============ */
.sello{position:absolute;font-family:var(--fuente-muestra);color:var(--rojo-txt);
  font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;transform:rotate(-6deg);white-space:nowrap;}

/* ============ UTILIDADES ============ */
.ref{font-family:var(--fuente-mano);font-style:italic;color:var(--g-500);
  border-top:1px dashed var(--g-400);padding-top:1rem;margin-top:1.4rem;}
.divisor-rojo{height:6px;background:var(--rojo);width:100%;}
.manifiesto{padding-left:clamp(1rem,2.5vw,2rem);border-left:6px solid var(--rojo);}
.manifiesto h3{font-family:var(--fuente-muestra);font-size:clamp(1.3rem,3vw,2rem);
  text-transform:uppercase;margin-bottom:1rem;color:var(--g-800);}
.manifiesto p{color:var(--g-700);max-width:86ch;margin-bottom:.9rem;}
.manifiesto .entradilla{font-size:1.08rem;color:var(--g-800);}
.manifiesto a{color:var(--rojo-txt);text-decoration:none;font-weight:700;}

/* ============ MASTHEAD DE SECCIÓN ============ */
/* Común a las 5 páginas y a las 6 de /help: antes cada una traía su copia
   metida en un <style> propio. La variante --ayuda es la de /help. */
.masthead-seccion{
  position:relative;overflow:hidden;
  padding:clamp(3rem,8vh,5.5rem) 0 clamp(2rem,5vh,3rem);
  background:linear-gradient(180deg,var(--g-100) 0%,var(--g-50) 100%);
  border-bottom:3px solid var(--rojo);
}
.masthead-seccion::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(223,221,219,.35),rgba(223,221,219,.75) 70%);
}
.masthead-seccion .ancho{position:relative;z-index:1;}
.masthead-seccion .t-titular--xl{margin-bottom:.6rem;}
.masthead-seccion .t-subtitulo{margin-top:1rem;color:var(--g-600);}
/* Variante de /help: algo más baja y con el velo un poco más opaco.
   El velo queda como degradado puro de grises; la imagen del banner ya no existe.
.masthead-seccion--ayuda{
  padding:clamp(2.6rem,7vh,4.6rem) 0 clamp(1.8rem,4vh,2.6rem);
}
.masthead-seccion--ayuda::after{
  background:linear-gradient(180deg,rgba(223,221,219,.35),rgba(223,221,219,.78) 70%);
}

/* ============ ESTÉTICA PROPIA DE CADA CUADRO ============ */
/* Cada bot tiene su tinta: --acento (color) y --acento-osc (segunda tinta,
   como --rojo / --rojo-oscuro en la marca). Solo se aplican en /help/<bot>,
   que es donde el cuadro aparece en solitario; el resto del sitio sigue con
   el rojo de marca. Los tres --acento-suave-* son el mismo color al 10/13/22 %
   para fondos de resaltado (no se pueden calcular con color-mix en todos los
   navegadores, así que van precalculados). */
.bot-marxbot{
  --acento:#E50100;--acento-osc:#A30100;
  --acento-suave-10:rgba(229,1,0,.10);
  --acento-suave-13:rgba(229,1,0,.13);
  --acento-suave-22:rgba(229,1,0,.22);
}
.bot-engelsbot{
  --acento:#E50100;--acento-osc:#A30100;
  --acento-suave-10:rgba(229,1,0,.10);
  --acento-suave-13:rgba(229,1,0,.13);
  --acento-suave-22:rgba(229,1,0,.22);
}
.bot-leninbot{
  --acento:#E50100;--acento-osc:#A30100;
  --acento-suave-10:rgba(229,1,0,.10);
  --acento-suave-13:rgba(229,1,0,.13);
  --acento-suave-22:rgba(229,1,0,.22);
}
.bot-luxemburgobot{
  --acento:#E50100;--acento-osc:#A30100;
  --acento-suave-10:rgba(229,1,0,.10);
  --acento-suave-13:rgba(229,1,0,.13);
  --acento-suave-22:rgba(229,1,0,.22);
}
.bot-trotskybot{
  --acento:#E50100;--acento-osc:#A30100;
  --acento-suave-10:rgba(229,1,0,.10);
  --acento-suave-13:rgba(229,1,0,.13);
  --acento-suave-22:rgba(229,1,0,.22);
}

/* Banner del cuadro: 1360x480 nativo. Como cosmic lo diseñó lleva el
   nombre y el subtítulo grabados encima del retrato, así que si lo metemos
   de fondo en .masthead-seccion--ayuda se come al h1. Va en una franja
   aparte, a tamao fijo (sin opacidad, sin grayscale), para que se vea
   integro y haga de cabecera del cuadro. .ancho lo centra. */
.banner-seccion{
  position:relative;
  padding:clamp(1.6rem,4vh,2.4rem) 0 clamp(2rem,5vh,3rem);
  background:linear-gradient(180deg,var(--g-50) 0%,var(--g-100) 100%);
  border-bottom:3px solid var(--acento,var(--rojo));
}
.banner-seccion .ancho{display:flex;justify-content:center;}
.banner-seccion .banner-cuadro{
  position:relative;
  width:100%;
  max-width:980px;
  aspect-ratio:1360/480;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  border:1px solid var(--g-300);
  border-bottom:4px solid var(--acento,var(--rojo));
  
}
.masthead-seccion--ayuda .kicker::before{background:var(--acento,var(--rojo));}
.masthead-seccion--ayuda .t-titular--xl .solido,
.masthead-seccion--ayuda .t-titular--xl .contorno{color:var(--acento,var(--rojo));}
.masthead-seccion--ayuda{border-bottom-color:var(--acento,var(--rojo));}

/* Ficha del cuadro: retrato + datos. Antes la cabecera de /help/<bot> no
   llevaba ninguna imagen, al contrario que /bots. */
.ficha-cuadro{display:flex;align-items:center;gap:1.2rem;margin-top:1.6rem;}
.ficha-cuadro-foto{
  flex:0 0 auto;width:96px;height:96px;object-fit:cover;object-position:center top;
  border:3px solid var(--acento,var(--rojo));
  filter:grayscale(1) contrast(1.08);
  background:var(--g-100);
}
.ficha-cuadro-datos{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;}
.ficha-cuadro-datos div{
  font-family:var(--fuente-etiqueta);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g-500);
}
.ficha-cuadro-datos b{
  display:block;font-family:var(--fuente-muestra);
  font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--g-800);
}
@media (max-width:600px){
  .ficha-cuadro{flex-direction:column;align-items:flex-start;}
  .ficha-cuadro-foto{width:80px;height:80px;}
}

/* ============ VIDA: microinteracciones (2026-09-07) ============ */
/* Un poco de movimiento, sin recargar: las celdas se elevan un par de
   píxeles y los retratos "respiran" (y recuperan el color) al pasar el
   cursor. Todo se apaga con prefers-reduced-motion. */
.bot-celda,.tira-celda{
  transition:transform .22s cubic-bezier(.22,.61,.36,1),
             background-color .18s ease;}
.bot-celda:hover,.tira-celda:hover{
  transform:translateY(-3px);
  }

.bot-perfil-foto,.indice-foto,.ficha-cuadro-foto{
  transition:transform .45s cubic-bezier(.22,.61,.36,1),
             filter .45s ease;}
.bot-perfil-foto:hover{transform:scale(1.02);}
.indice-foto:hover{transform:scale(1.05);}
/* La ficha de ayuda va en gris: al pasar el cursor vuelve al color. */
.ficha-cuadro-foto:hover{transform:scale(1.05);filter:grayscale(0) contrast(1.02);}

/* Bloques de texto: en vez de levantarlos (romperían las líneas de la
   rejilla) se les da un lavado de rojo muy claro y la cifra se oscurece
   un punto, como si se apretara. OJO: .principio/.paso/.garantia s se
   emiten; .bot-celda, .bot-tira e .indice-foto son CSS heredado de una
   maqueta vieja que build.py ya no genera (se dejan por si vuelven). */
.principio,.paso,.garantia{
  transition:background-color .2s ease;}
.principio:hover,.paso:hover,.garantia:hover{background:rgba(229,1,0,.045);}
.principio .n,.paso .numero,.garantia .num{transition:color .2s ease;}
.principio:hover .n,.paso:hover .numero,.garantia:hover .num{color:var(--rojo-oscuro);}

/* Comandos: al pasar el cursor la fila se marca como "esto se copia". */
.comandos li{transition:background-color .18s ease;}
.comandos li:hover{background:rgba(229,1,0,.06);}

@media (prefers-reduced-motion:reduce){
  .bot-celda,.tira-celda,
  .bot-perfil-foto,.indice-foto,.ficha-cuadro-foto,
  .principio,.paso,.garantia,.comandos li{transition:none;}
  .bot-celda:hover,.tira-celda:hover{transform:none;}
  .bot-perfil-foto:hover,.indice-foto:hover,.ficha-cuadro-foto:hover{transform:none;}
}

/* ============ AVISO DE EXCLUSIVIDAD ============ */
/* Los cuadros no son públicos ni invitables: este aviso sale en Inicio, en
   Bots, en el índice de ayuda y en la cabecera de cada bot. */
.aviso-exclusivo{display:flex;gap:.4rem 1.2rem;align-items:baseline;flex-wrap:wrap;
  margin:1.4rem 0 0;padding:.85rem 1.15rem;border-left:3px solid var(--rojo);
  background:rgba(229,1,0,.045);}
.aviso-exclusivo .ax-sello{font-family:var(--fuente-etiqueta);font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--rojo-txt);white-space:nowrap;
  flex:0 0 auto;}
.aviso-exclusivo p{flex:1 1 22rem;color:var(--g-700);font-size:.95rem;line-height:1.55;}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .bot-tira{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bot-celda:nth-child(4){border-left:0;}
  .principios{grid-template-columns:repeat(2,minmax(0,1fr));}
  .principio:nth-child(3){border-left:0;padding-left:0;}
  .tira--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tira-celda:nth-child(3){border-left:0;padding-left:0;}
  .fila-frente{grid-template-columns:clamp(50px,8vw,80px) 40px minmax(0,1fr);}
  .fila-frente p{grid-column:3;}
  .fila-frente .sub{grid-column:3;justify-self:start;margin-top:.6rem;}
  .foot-in{grid-template-columns:1fr 1fr;}
}
/* El masthead se apila MUCHO antes que el resto del sitio: el nav mide ~535px
   y, si la marca crece, se parte en dos filas al lado del logo (barra de 89px
   y nav quebrado). A partir de 1080px ya no caben los dos en una línea, así
   que aquí se apila: nombre arriba, nav abajo, cada uno en su fila. */
@media(max-width:1080px){
  /* OJO: padding-left/right NO se tocan: los pone .ancho (var(--margen)).
     Usar el atajo `padding:` aquí los machacara a 0 y el logo quedaría
     pegado al borde de la pantalla. */
  .masthead-in{flex-direction:column;align-items:flex-start;gap:.1rem;
    padding-top:.35rem;padding-bottom:.2rem;min-height:0;}
  .masthead-logo{padding-bottom:0;}
  /* Margen negativo: alinea el texto del nav con el borde izquierdo del logo */
  nav.masthead-nav{margin-left:-.85rem;flex-wrap:wrap;}
  /* Al apilarse, el nombre ya no compite con el nav: puede crecer. */
  .masthead-nombre .top{font-size:clamp(1.3rem,4.2vw,1.9rem);}
}
/* La portada lleva un enlace más que el resto de páginas (8 contra 6-7): su nav
   mide 724px y, aun recortando el relleno, marca + nav no caben en una fila
   hasta los ~1172px. Así que SÓLO la portada se apila también entre 1081 y
   1200; el resto de páginas sigue apilándose a 1080 como siempre (subirles el
   corte les habría dejado la barra en 124px sin ganar nada).
   🚨 El corte estaba en 1080 y subió a 1200 el 2026-09-21, al añadirse el
   octavo enlace («Qué es»). Medido con los 8: nav 724px, marca ~390px,
   separación 36 → 1150 contra los 995 útiles a 1081. Partía en dos filas. */
@media(min-width:1081px) and (max-width:1200px){
  body.menu-movil .masthead-in{flex-direction:column;align-items:flex-start;gap:.1rem;
    padding-top:.35rem;padding-bottom:.2rem;min-height:0;}
  body.menu-movil .masthead-logo{padding-bottom:0;}
  body.menu-movil nav.masthead-nav{margin-left:-.85rem;flex-wrap:wrap;}
  body.menu-movil .masthead-nombre .top{font-size:clamp(1.3rem,4.2vw,1.9rem);}
  /* Y el recorte de siempre, que ya estaba aquí. */
  nav.masthead-nav a{padding-left:.62rem;padding-right:.62rem;}
  nav.masthead-nav a::after{left:.62rem;right:.62rem;}
}
/* El nav de la portada mide 724px de ancho natural con sus 8 enlaces (medido a
   1024/1200/1361+). En las dos franjas donde la cuenta aprieta se recorta SÓLO
   el relleno de los enlaces —el cuerpo del texto no cambia— y baja a 634px:
     · 721-1080px: el nav va en su propia fila y a 721 el contenedor deja 677px.
       Sin recorte partía en DOS filas: medido, el masthead subía a 124px a 721
       y a 768 (que es justo iPad en vertical).
     · 1201-1360px: marca y nav comparten fila y el logo se come ~390px.
   Va bajo `body.menu-movil` para no apretar el nav de las páginas de /help,
   que tienen menos enlaces y nunca lo necesitaron. */
@media(min-width:721px) and (max-width:1080px),
      (min-width:1201px) and (max-width:1360px){
  body.menu-movil nav.masthead-nav a{padding-left:.5rem;padding-right:.5rem;}
  body.menu-movil nav.masthead-nav a::after{left:.5rem;right:.5rem;}
}
@media(max-width:680px){
  nav.masthead-nav a{font-size:.69rem;letter-spacing:.1em;padding:.55rem .6rem;}
  nav.masthead-nav a::after{left:.6rem;right:.6rem;}
  .principios{grid-template-columns:1fr;}
  .principio{border-left:0;padding-left:0;}
  .fila-frente{grid-template-columns:44px minmax(0,1fr);}
  .fila-frente .ico{display:none;}
  .fila-frente p,.fila-frente .sub{grid-column:2;}
  .fila{grid-template-columns:40px minmax(0,1fr) 56px;gap:.8rem;}
  .fila .meta,.fila .arw{display:none;}
  .bot-tira{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bot-celda{border-left:0;border-top:1px solid rgba(63,67,74,.18);}
  .foot-in{grid-template-columns:1fr;}
  .tira--4{grid-template-columns:1fr 1fr;}
}
/* Por debajo de ~560px los 6 enlaces del nav NO caben en una fila y se
   partian en dos (INICIO BOTS PROGRAMA BIBLIOTECA / TICKETS AYUDA): ademas
   de feo, la barra crecia y se comia media pantalla. En vez de partirlo se
   deja UNA sola fila con scroll horizontal: todos siguen alcanzables con el
   dedo y la barra no crece. La barra de scroll se oculta; el corte del
   ultimo enlace ya avisa de que hay mas. */
@media(max-width:560px){
  nav.masthead-nav{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    align-self:stretch;width:auto;
    margin-right:calc(var(--margen) * -1);
    padding-right:var(--margen);
    scrollbar-width:none;-ms-overflow-style:none;
  }
  nav.masthead-nav::-webkit-scrollbar{display:none;height:0;}
  nav.masthead-nav a{flex:0 0 auto;}
}
/* Por debajo de ~430px el logo + "Central Comunista" empiezan a apretar:
   el nombre se saldría del padding y quedaría recortado por el
   `overflow-x:hidden` del body (sin scroll, pero cortado). Se baja un
   escaln el texto, no el logo. */
@media(max-width:430px){
  .masthead-nombre .top{font-size:1.15rem;}
  .masthead-logo{gap:.7rem;}
}
/* En ~320-355px ya no cabe ni apretando el texto: el logo (1.84:1) mide
   70px de ancho a 38 de alto. Aqu ceden los dos un poco. */
@media(max-width:355px){
  .masthead-logo img{height:32px;}
  .masthead-nombre .top{font-size:1rem;}
}

/* ============ MENÚ DE MÓVIL (2026-09-21) ============
   Auditoría previa a 8 anchos (360/390/430/560/768/1024/1280/1600). Lo que
   salió, medido:
     · el nav medía 534px y a 360 el contenedor 356 → el último enlace
       («Ayuda») quedaba FUERA de pantalla (`ultimo_visible:false`).
     · los enlaces medían 52x35px de alto: por debajo de los 44px que pide un
       dedo y justo en el filo de los 24px de WCAG 2.2 AA.
     · el apilado de 1080px dejaba el masthead en 79px a 360.
   Ahora, por debajo de 720px, el nav se pliega en un panel que abre un botón
   de 44x44 y la barra vuelve a UNA fila (marca | botón): ~55px en vez de 79.

   🚨 Va en theme.css y NO en el <style> de la portada porque las seis páginas
   de /help comparten `.masthead-in` y `nav.masthead-nav`. Por eso TODO el
   bloque va bajo `body.menu-movil`: sin esa guarda el nav de /help se
   convertiría en un panel oculto sin botón que lo abra.
   (Sólo la portada lleva `menu-movil` hoy; /help sigue con su fila con scroll.)

   🚨 Las tres barras se dibujan con CSS, NO con el glifo «☰»: las fuentes del
   sitio no traen glifos no latinos y uno ausente NO da error de consola, sólo
   un hueco. Ya nos mordió con el «×» del aviso de descarga.

   🚨 `flex-wrap:nowrap` es obligatorio: el apilado de 1200px deja
   `flex-wrap:wrap` en el nav y, con `flex-direction:column`, un wrap lo
   partiría en DOS COLUMNAS en vez de en una lista. */
.masthead-burger{display:none;}

@media(max-width:720px){
  body.menu-movil .masthead-in{
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:.5rem;padding-top:.35rem;padding-bottom:.35rem;min-height:0;}
  body.menu-movil .masthead-logo{padding-bottom:0;}

  body.menu-movil .masthead-burger{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 auto;padding:0;margin:0;
    background:transparent;border:0;border-radius:3px;
    color:var(--g-900);cursor:pointer;
    transition:background-color .18s;}
  body.menu-movil .masthead-burger:hover{background:rgba(33,32,31,.07);}
  body.menu-movil .masthead-burger:focus-visible{
    outline:2px solid var(--rojo);outline-offset:2px;}
  body.menu-movil .masthead-burger i{position:relative;display:block;
    width:22px;height:2px;background:currentColor;
    transition:background-color .16s;}
  body.menu-movil .masthead-burger i::before,
  body.menu-movil .masthead-burger i::after{content:"";position:absolute;
    left:0;width:22px;height:2px;background:currentColor;
    transition:transform .22s cubic-bezier(.4,0,.2,1),
               top .22s cubic-bezier(.4,0,.2,1);}
  body.menu-movil .masthead-burger i::before{top:-7px;}
  body.menu-movil .masthead-burger i::after{top:7px;}
  body.menu-movil .masthead-burger[aria-expanded="true"] i{background:transparent;}
  body.menu-movil .masthead-burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg);}
  body.menu-movil .masthead-burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg);}

  /* El panel cuelga de `.masthead` (que es position:relative) y NO de
     `.masthead-in`: así su fondo llega a los dos bordes y su relleno interior
     puede alinearse con el logo usando el mismo --margen que `.ancho`.
     `top:calc(100% + 3px)` deja a la vista el filete rojo del masthead, que
     si no quedaría tapado por el panel. */
  body.menu-movil nav.masthead-nav{
    position:absolute;top:calc(100% + 3px);left:0;right:0;
    display:flex;flex-direction:column;flex-wrap:nowrap;
    align-items:stretch;
    gap:.15rem;margin:0;padding:.5rem var(--margen) .8rem;
    /* Igual que en el `body`: el `100vh` delante como red y el `dvh` detrás
       como bueno. Sin el primero, un navegador sin `dvh` dejaba el panel del
       menú móvil sin tope de alto y la lista se salía de la pantalla. */
    max-height:calc(100vh - 4.5rem);
    max-height:calc(100dvh - 4.5rem);overflow-y:auto;overflow-x:hidden;
    /* 🚨 `--g-100` PLANO, sin la textura del masthead. Probado con
       `papelgris.svg` (lo que lleva el masthead debajo del sol): ese SVG es
       OSCURO (base #575657) y el panel salía gris oscuro con los enlaces
       `--g-700` encima — ilegible (medido: los enlaces apenas se separaban del
       fondo). Y con `fondo2.webp` a `cover` el panel se comía el centro del
       sol, que es su parte más oscura (media 147 de 255). Plano no falla:
       `--g-700` sobre `--g-100` son 8,54:1, el par que el sitio ya tiene
       calibrado. */
    background:var(--g-100);
    border-bottom:3px solid var(--rojo);
    box-shadow:inset 0 1px 0 rgba(33,32,31,.08),
               0 22px 34px -20px rgba(33,32,31,.62);
    /* visibility:hidden y no display:none: así el cierre se puede animar y,
       de paso, los enlaces no son alcanzables con el tabulador mientras está
       cerrado (un elemento invisible no recibe foco). */
    visibility:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease,
               visibility 0s linear .18s;}
  body.menu-movil nav.masthead-nav.abierto{
    visibility:visible;opacity:1;transform:none;pointer-events:auto;
    transition:opacity .18s ease,transform .18s ease,visibility 0s;}
  /* 44px de alto por enlace: el dedo, no el ratón. */
  body.menu-movil nav.masthead-nav a{
    flex:0 0 auto;display:flex;align-items:center;min-height:44px;
    font-size:.78rem;letter-spacing:.14em;padding:.5rem .9rem;}
  /* El subrayado animado no tiene sentido en una lista: aquí marca el activo
     el rojo macizo, igual que en la barra de escritorio. */
  body.menu-movil nav.masthead-nav a::after{display:none;}
  body.menu-movil nav.masthead-nav a.activo{color:var(--g-25);background:var(--rojo);}
}
@media (prefers-reduced-motion:reduce){
  body.menu-movil nav.masthead-nav,
  body.menu-movil .masthead-burger i,
  body.menu-movil .masthead-burger i::before,
  body.menu-movil .masthead-burger i::after{transition:none;}
}
/* ============ VELO SUTIL DEL HORIZONTE ============
   La misma imagen del sticky header (/svgs/papelblanco.svg en banda/pie y /svgs/papelblanco.svg en el hero) aparecen como
   fondo muy sutil en la banda oscura, el pie y el hero: grises de la
   propia imagen, opacidades tan bajas que solo se leen como textura. */
.banda .banda-in,
.foot-in,
.credit{position:relative;z-index:1;}





/* ============ TELA DE FABRICAS EN TODA LA PAGINA ============ */

section.hero::after{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url("./svgs/fondoinicio.webp") center/cover no-repeat;
  opacity:.55;
  filter:grayscale(1) contrast(1.35) brightness(1.02);
}
.franja::before,.masthead-seccion::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("./svgs/papelblanco.webp") center bottom/cover no-repeat;
  opacity:.10;filter:grayscale(1) contrast(.85) brightness(1.06);
}
/* El hero lleva su propio fondo (fondoinicio.svg en ::after). El papelblanco
   de .franja::before le pintaba una capa blanca por encima que tapaba justo
   la parte de abajo del montaje que el usuario quiere ver. */
.hero::before{display:none;}
/* El pie tiene sus propias capas de fondo (papel + horizonte fabril);
   viven junto a las reglas del pie, mas arriba, para no tenerlas partidas
   en dos sitios. Aqui solo queda el apilado del contenido. */
.banda .banda-in,.foot-in,.credit{position:relative;z-index:1;}






/* ============ ANIMACIONES PROLETARIAS v5 (medidas) ============
   El titular manda (baja con peso). Lo demas acompana: poco viaje
   (16px), rapido (0.5s), sin latigazos. Los 3 puntos de la ventana
   respiran, el rojo manda sobre la mancha. */
@keyframes bloque-baja{0%{opacity:0;transform:translateY(-18px);}40%{opacity:1;}100%{opacity:1;transform:none;}}
@keyframes bloque-en{0%{opacity:0;transform:translateX(-14px);}40%{opacity:1;}100%{opacity:1;transform:none;}}
@keyframes estampa-firme{0%{opacity:0;transform:scale(1.06) rotate(-0.5deg);}100%{opacity:1;transform:none;}}
@keyframes pulso-punto{0%,100%{transform:scale(1);}40%{transform:scale(1.35);}60%{transform:scale(1.22);}}
@keyframes cubre-tinta{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.t-titular{animation:bloque-baja .8s cubic-bezier(.16,0,.2,1) .1s both;}
.kicker{animation:bloque-en .45s cubic-bezier(.25,0,.2,1) .2s both;}
.manifiesto,.bot-celda{animation:bloque-baja .55s cubic-bezier(.2,0,.2,1) both;}
.fila,.fila-frente,.principio{animation:bloque-en .5s cubic-bezier(.25,0,.2,1) both;}
.tira{animation:bloque-baja .5s cubic-bezier(.2,0,.2,1) both;}
.tira .tira-celda{animation:bloque-baja .45s cubic-bezier(.2,0,.2,1) both;}
.tira-celda:nth-child(2){animation-delay:.12s;}
.tira-celda:nth-child(3){animation-delay:.24s;}
.tira-celda:nth-child(4){animation-delay:.36s;}
.sec-head .sec-num{animation:estampa-firme .6s cubic-bezier(.2,0,.15,1) .12s both;}
.sec-head .sec-regla{transform-origin:left center;animation:cubre-tinta .6s cubic-bezier(.25,0,.1,1) .3s both;}
/* La portada de ventana entra con el mismo compás que el hero: el titular
   manda y baja con peso, lo demás acompaña medio paso por detrás. */
.portada-titular{animation:bloque-baja .8s cubic-bezier(.16,0,.2,1) .08s both;}
.portada-subflag{animation:bloque-en .5s cubic-bezier(.25,0,.2,1) .24s both;}
.portada-lead{animation:bloque-baja .55s cubic-bezier(.2,0,.2,1) .3s both;}
.portada-num{animation:estampa-firme .6s cubic-bezier(.2,0,.15,1) .1s both;}
.portada-etq{animation:bloque-en .5s cubic-bezier(.25,0,.2,1) .34s both;}
.aviso-exclusivo{animation:bloque-baja .45s cubic-bezier(.2,0,.2,1) .15s both;}

.bot-perfil .bot-perfil-meta{animation:bloque-en .55s cubic-bezier(.25,0,.2,1) both;}
.bot-perfil .bot-perfil-texto{animation:bloque-baja .55s cubic-bezier(.2,0,.2,1) .15s both;}
.bot-perfil-foto{animation:estampa-firme .65s cubic-bezier(.2,0,.15,1) .2s both;}


/* ============ ANIMACIONES CIRCULOS ============ */

/* === los 3 circulos de cada ventana === */
.ventana-dots i{transform-origin:center center;}
.ventana.activa .ventana-dots i:first-child{animation:pulso-punto 2.6s ease-in-out both;}
.ventana.activa .ventana-dots i:nth-child(2),.ventana.activa .ventana-dots i:nth-child(3){animation:estampa-firme .5s cubic-bezier(.2,0,.15,1) .1s both;}

/* botones */
.btn{position:relative;z-index:0;overflow:hidden;}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(1);background:rgba(229,1,0,.15);}
.btn:not(:hover)::after{transform:scaleX(0);transition:transform .5s cubic-bezier(.3,0,.1,1);}
.btn:hover::after{transform:scaleX(1);transition:transform .25s cubic-bezier(.4,0,.2,1);}

.fila:hover .arw{transform:translateX(4px);transition:transform .3s cubic-bezier(.4,0,.2,1);}

@media (prefers-reduced-motion:reduce){
  .kicker,.t-titular,.manifiesto,.bot-celda,.fila,.fila-frente,.principio,
  .tira,.tira .tira-celda,.sec-head .sec-num,.sec-head .sec-regla,.aviso-exclusivo,
  .bot-perfil .bot-perfil-meta,.bot-perfil .bot-perfil-texto,.bot-perfil-foto,
  .portada-titular,.portada-subflag,.portada-lead,.portada-num,.portada-etq,
  .ventana-dots i{animation:none !important;}
  .btn::after{visibility:hidden;}
}


.ventana:not(.activa) .kicker,
.ventana:not(.activa) .t-titular,
.ventana:not(.activa) .sec-head .sec-num,
.ventana:not(.activa) .sec-head .sec-regla,
.ventana:not(.activa) .manifiesto,
.ventana:not(.activa) .tira,
.ventana:not(.activa) .tira .tira-celda,
.ventana:not(.activa) .banda-in,
.ventana:not(.activa) .portada-titular,
.ventana:not(.activa) .portada-subflag,
.ventana:not(.activa) .portada-lead,
.ventana:not(.activa) .portada-num,
.ventana:not(.activa) .portada-etq,
.ventana:not(.activa) .bot-perfil .bot-perfil-meta,
.ventana:not(.activa) .bot-perfil .bot-perfil-texto,
.ventana:not(.activa) .bot-perfil-foto{animation:none;}

/* HERO: solo el titular anima, todo lo demas quieto */
.hero *:not(.t-titular){animation:none !important;}

/* ⚠️ CÓDIGO MUERTO desde el 2026-09-17 (comprobado, no supuesto).
   Estas dos reglas son de cuando la pasarela vivía DENTRO de `.hero`. Hoy
   `<section class="franja hero">` mide 1414 bytes y no contiene ni `pasarela`
   ni `prensa`: los dos carruseles de la cinta son HERMANOS de `.hero`, no
   hijos, así que este selector no casa con nada. Y ningún otro HTML del sitio
   (los 6 `/help`, `carrusel.html`) usa `.pasarela`.
   Se dejan marcadas en vez de borradas porque no me lo pidieron, pero
   🚨 **si algún día se mete un carrusel dentro de `.hero`, esto lo devuelve al
   avance a golpes** (`cubic-bezier`, 38 s/52 s) — justo lo que cosmic mandó
   quitar. Antes de reutilizar el hero, borrar el bloque.
   (Excepción: el `.hero *:not(.t-titular){animation:none !important}` de
   arriba es de otra cosa y sigue siendo válido.) */
.hero .pasarela .pista{
  animation:pasarela-rodar 38s cubic-bezier(.65,0,.35,1) infinite !important;
}
.hero .pasarela .carril--contrario .pista{
  animation-direction:reverse !important;
  animation-duration:52s !important;
  animation-timing-function:cubic-bezier(.35,0,.65,1) !important;
}


/* ============ LETRAS DEL HERO SIEMPRE LEGIBLES ============
   El fondo usaba `fondoinicio.svg` (hoy es `fondoinicio.webp`), un fotomontaje
   con zonas claras Y oscuras.
   Con el lienzo viejo (.66 -> .28 y mascara que se apagaba al 75%) el texto
   caía sobre el montaje y se medía 1.0-2.5:1: ilegible justo donde el
   collage es oscuro.
   Ahora el lienzo es un panel de papel CASI OPACO con borde difuso. El
   montaje sigue viendose alrededor (emblema, esquinas) pero la columna de
   texto se apoya en papel, como un cartel pegado sobre el fotomontaje.
   Medido después: titular 3.6:1 (texto grande), párrafo 7.5:1. */
.hero .hero-col{position:relative;z-index:0;
  /* Sin cartel de papel: el fondo fondoinicio se ve tal cual. El halo claro
     (text-shadow, heredado por todo el texto) mantiene la legibilidad sobre
     el fotomontaje sin meter una caja blanca. */
  text-shadow:0 1px 3px rgba(236,234,232,.72),0 0 1px rgba(236,234,232,.85);}
/* La tira de datos del hero también cae sobre el montaje: el "III" se medía
   1.16:1 y las etiquetas 1.78:1. Se apoya en el mismo papel que la columna
   de texto, así que sigue leyendose como un cartel pegado al fotomontaje. */
.hero .tira{
  background:linear-gradient(180deg,rgba(232,230,228,.96) 0%,rgba(226,224,222,.93) 100%);
  padding:0 clamp(.9rem,2.2vw,1.7rem);
  box-shadow:0 12px 34px rgba(26,25,24,.12);
}
.hero .tira .tira-celda:last-child{padding-right:0;}
.hero .kicker,.hero .hero-subflag span,.hero .t-subtitulo,.hero .hero-manifiesto,.hero .hero-manifiesto .t-firma{color:var(--g-800);}
.hero .hero-manifiesto p{color:var(--g-700);}
.hero .t-titular .solido,.hero .t-titular .contorno{color:var(--rojo);}
.hero .t-titular .contorno{-webkit-text-stroke:0;}

/* Reserva de altura: el typewriter no debe empujar el resto de la página */
.hero .hero-manifiesto{ min-height: 9rem; }

/* === Máquina de escribir === */
.typewriter{ display:inline; white-space:normal; }
.tw-caret{
  display:inline-block; width:.09em; height:1.05em;
  background:var(--rojo); vertical-align:-.12em; margin-left:.04em;
  animation: twBlink 1s step-end infinite;
}
@keyframes twBlink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .tw-caret{ display:none; }
}

/* === Tira continua de módulos (marquee) === */
/* Estilo cartel: fondo tinta, cifras rojas, texto claro. Al pasar el
   cursor la celda vira a rojo pleno con texto claro. */
.MagicScroll{
  position:relative; overflow:hidden; margin-top:clamp(2.2rem,6vh,4rem);
  border-top:3px solid var(--rojo);
  background:var(--g-800);
  box-shadow:0 12px 34px rgba(26,25,24,.12);
  /* la tira entra y sale difuminada, sin corte duro en los bordes */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.MagicScroll-track{display:flex; width:max-content; will-change:transform;}
.MagicScroll-group{display:flex; flex:0 0 auto;}
.MagicScroll-group .tira-celda{
  box-sizing:border-box; flex:0 0 clamp(190px,28vw,330px);
  display:block; min-height:6.6rem; padding:1.1rem clamp(.9rem,2.2vw,1.7rem);
  border-left:1px solid rgba(236,234,232,.14);
  text-decoration:none; color:inherit;
}
.MagicScroll-group .tira-celda:first-child{border-left:0;}
.MagicScroll-group .tira-celda:last-child{padding-right:clamp(.9rem,2.2vw,1.7rem);}
.MagicScroll-group .tira-celda b{
  color:var(--rojo);
  transition:color .2s ease;
}
.MagicScroll-group .tira-celda span{
  color:var(--g-200);
  transition:color .2s ease;
}
.MagicScroll-group .tira-celda:hover,
.MagicScroll-group .tira-celda:focus-visible{background:var(--rojo);}
.MagicScroll-group .tira-celda:hover b,
.MagicScroll-group .tira-celda:focus-visible b,
.MagicScroll-group .tira-celda:hover span,
.MagicScroll-group .tira-celda:focus-visible span{color:#fbfbfb;}
.MagicScroll-group .tira-celda:focus-visible{
  outline:2px solid #fbfbfb; outline-offset:-2px;
}
@media (prefers-reduced-motion:reduce){.MagicScroll-track{transform:none !important;}}

/* === Carrusel audiovisual === */
.multimedia{margin:clamp(2rem,5vh,3.8rem) 0 2.6rem;}
.multimedia-intro{margin-bottom:1.1rem;}
.multimedia-intro h2{margin:.35rem 0 .45rem; font-family:var(--fuente-muestra);
  font-size:clamp(1.45rem,3vw,2.2rem); color:var(--g-900);}
.multimedia-intro p{max-width:62ch; margin:0; color:var(--g-600);}
.mu-swiper-multimedia-outer-wrapper{overflow:hidden;}
.mu-swiper-multimedia{position:relative; overflow:hidden; border-top:2px solid var(--rojo);
  background:rgba(236,234,232,.72);}
.swiper-wrapper{display:flex; transition:transform .65s cubic-bezier(.4,0,.2,1); will-change:transform;}
.swiper-slide{flex:0 0 100%; min-width:0;}
.video-frame{background:var(--g-900); aspect-ratio:16/9;
  /* en PC las diapositivas completas eran gigantes e incómodas: tope */
  max-width:min(720px, 92vw); margin:0 auto;}
.video-frame iframe{display:block; width:100%; height:100%; border:0;}
.swiper-slide-footer{width:calc(100% - 3.2rem); max-width:min(720px,92vw);
  margin:0 auto; padding:.85rem clamp(1rem,2.5vw,1.6rem) 1rem; border-left:1px solid var(--g-300); border-right:1px solid var(--g-300);}
.swiper-slide-footer p{margin:0; font-family:var(--fuente-marca); font-size:clamp(1rem,1.8vw,1.25rem); color:var(--g-900);}
.swiper-slide-footer small{display:block; margin-bottom:.25rem; font-family:var(--fuente-etiqueta);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rojo-txt);}
.mu-nav{position:absolute; top:calc((100% - 4.1rem) / 2); z-index:2; width:2.45rem; height:2.45rem;
  border:2px solid var(--rojo); border-radius:50%; background:rgba(236,234,232,.92); color:var(--rojo);
  font-size:1.45rem; line-height:1; cursor:pointer;}
/* 🚨 Era `color:#fff` — la ÚNICA regla de theme.css que quedaba con blanco
   puro, contra la regla de la casa («el token más claro es --g-25»). Cambiado
   el 2026-09-21. Coste de contraste: 4,04:1 → 3,90:1 sobre el rojo macizo;
   sigue por encima del 3:1 que pide WCAG para un control no textual. */
.mu-nav:hover{background:var(--rojo); color:var(--g-25);}
.mu-prev{left:.75rem;}.mu-next{right:.75rem;}
.swiper-pagination{display:flex; justify-content:center; gap:.45rem; padding:.8rem 0 .95rem;}
.swiper-pagination button{width:.62rem; height:.62rem; padding:0; border:0; border-radius:50%;
  background:rgba(229,1,0,.3); cursor:pointer;}
.swiper-pagination button.is-active{background:var(--rojo);}
@media (prefers-reduced-motion:reduce){
  .modulos-track{animation:none;}
  .swiper-wrapper{transition:none;}
}

/* ===========================================================================
   PASARELA DE PÓSTERS (componente 2026-09-13)
   8 plantillas agitprop sobre papel texturizado (img/papel-*.png).
   El rojo medio multifibras, la tinta fuerte, el papel sutil: LUT fijo.
   =========================================================================== */
.pasarela{ overflow:hidden;
  /* sangre completa: carriles a lo ancho del viewport, no del contenido */
  margin-left:calc(var(--margen)*-1); margin-right:calc(var(--margen)*-1);
  padding:2px 0; }
.pasarela .carril{
  position:relative; overflow:hidden;
  padding:8px 0;
}
.pasarela .pista{
  --paso:36px;                       /* la separación entre pósters */
  display:flex; gap:var(--paso); width:max-content;
  animation:pasarela-rodar 40s linear infinite;
}
.pasarela .carril--contrario .pista{ animation-direction:reverse; animation-duration:54s; }
/* Deslizamiento llano: la pista SÓLO se traslada.
   Antes esta curva llevaba `rotate(-.14deg)`/`rotate(.12deg)` alternos y, por
   encima, un `cubic-bezier(.65,0,.35,1)` por segmento —el «tic de imprenta»—,
   así que la tira entera se mecía y avanzaba a golpes. Cosmic lo mandó quitar
   el 2026-09-17: «que simplemente pasen los pósters, y ya, sin esos efectos».
   De paso desaparece un `62.5%` duplicado (dos fotogramas en el mismo
   instante): con dos únicas paradas ya no hay dónde repetirlo.

   🚨 El `- var(--paso)/2` NO es un adorno: sin él el bucle da un salto de
   18 px. La pista lleva 20 pósters (2 juegos de 10), así que `-50%` son
   3342 px —pero un juego entero mide 3360, porque con `gap` hay 19 huecos y
   no 20. La diferencia es justo medio hueco, 18 px, y se veía como un
   respingo cada 46 s. Con 10 pósters por juego el descuadre es SIEMPRE
   `gap/2`, sea cual sea el número de tarjetas, así que la fórmula aguanta si
   algún día cambia `repartir()`.
   (Medido a 1600 px: ancho_total 6684 · medio_pista 3342 · ancho_un_set 3360
   · salto 18 px.) */
@keyframes pasarela-rodar{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(calc(-50% - var(--paso, 36px) / 2)); }
}
.pasarela .carril:hover .pista{ animation-play-state:paused; }
/* La cinta es movimiento continuo y no tenía salida para quien pide
   `prefers-reduced-motion`: el sitio ya respeta esa preferencia en siete
   sitios (revelado, MagicScroll, `.modulos-track`, el canvas de la franja),
   pero los DOS carruseles de la cinta seguían rodando. Pararla en seco deja la
   pista en `translateX(0)`, o sea el primer póster pegado al canto izquierdo:
   no se pierde nada, sólo se queda quieta. (2026-09-21) */
@media (prefers-reduced-motion:reduce){
  .pasarela .pista{ animation:none; }
}

/* --- base --- */
/* ESTILO CONSTRUCTIVISTA (2026-09-17, tarde). Cosmic: «has que los pósters se
   vean con el estilo de la página, si te das cuenta la página parece un póster
   constructivista toda». Los tres cambios de fondo:
     · ESQUINAS RECTAS — tenían `border-radius:14px`, y era lo ÚNICO redondeado
       de todo el sitio. La página entera es ángulos duros.
     · PAPEL DE LA PÁGINA — el fondo era `#f2f1ef` (un blanco más frío) en vez
       de `--g-50 #eceae8`, que es el papel real del hero.
     · BLOQUEO ROJO — el filete de arriba pasa de 2 a 6 px, así que cada
       tarjeta lleva una franja roja maciza, y el filete bajo el antetítulo
       pasa a 2 px de rojo pleno. */
.pasarela .poster{
  position:relative; flex:0 0 300px; height:236px;
  padding:1.25rem 1.45rem;
  display:flex; flex-direction:column; overflow:hidden;
  /* 🚨 EL PAPEL SE HACE CON `multiply`, NO CON `soft-light` (2026-09-18).
     Hasta hoy esto era `var(--g-50) url('img/papel-base.png')` con
     `background-blend-mode:soft-light`. Dos problemas medidos:
       · `papel-base.png` no es papel, es HORMIGÓN: manchas gordas, min 196 /
         mediana 218 / máx 236 (sigma 6,0). Nada que ver con la fibra de una
         hoja hecha a mano.
       · `soft-light` contra `#eceae8` sólo mueve +-3 niveles. Medido en la
         tarjeta: media 241,4 con sigma 0,4 y rango 240-243. PLANA.
     Ahora lleva `img/papel-fibra.webp`, generada a propósito (512 x 512, sin
     costura, fibra corta + impurezas, mediana 250). Con `multiply` la
     tarjeta queda en media 245,1 y sigma 5,4 (rango 203-251): 13 veces más
     recorrido que antes, y se ve a tamaño real.
     🚨 LA BASE ES `--g-25`, NO `--g-50`. `multiply` sólo puede OSCURECER, así
     que el grano se paga con tono: sobre `--g-50` la tarjeta caía a 228,6 y
     el fondo (217,4) se le echaba encima — 11 niveles de separación donde
     antes había 24. Sobre `--g-25` (#fbfbfb) queda en 245,1: MÁS clara que
     antes y con 28 niveles de separación. Es un token de la paleta, no
     blanco puro (`#fff` sigue prohibido).
     ⚠️ `multiply` a plena fuerza sobre tinta saturada la APAGA. Sobre las
     masas rojas se usa la misma fibra, pero su mediana (250) sólo baja el
     rojo un 2 %: el rojo de marca se mantiene. */
  background:
    url('img/papel-fibra.webp') 0 0 / 512px repeat,
    linear-gradient(var(--rojo),var(--rojo)) 0 0 / 100% 6px no-repeat,
    var(--g-25);
  background-blend-mode:multiply, normal, normal;
  color:var(--g-900);
  /* 🚨 EL BORDE Y LA SOMBRA SON ESTRUCTURALES, NO ADORNO (2026-09-17, noche).
     Mientras la sección fue oscura, la tarjeta se despegaba sola: papel claro
     sobre negro. Al pasar la sección a PAPEL, tarjeta y fondo son el MISMO
     `--g-50`, y sin estos dos rasgos las tarjetas se fundirían con el fondo.
     La paleta del sitio prohíbe el blanco puro (`#fff`), así que no se puede
     resolver aclarando la tarjeta: hay que resolverlo con el canto.
       · borde de TINTA PLENA (era `rgba(53,52,50,.55)`): canto nítido.
       · sombra DURA sin desenfoque, offset 5/6 — el idioma constructivista
         del resto de la página (ángulos duros, nada de difuminados).
     Se probó antes con la sombra difusa heredada (`0 12px 28px rgba(0,0,0,.45)`)
     y sobre papel se leía como una mancha sucia, no como una sombra. */
  border:1px solid var(--g-800);
  /* 🚨 EL FILETE ROJO YA NO ES UN BORDE: ES UNA CAPA DE FONDO (2026-09-18).
     Un borde no se puede texturizar — pinta ENCIMA del fondo, y los hijos
     van recortados al padding box por el `overflow:hidden`, así que tampoco
     llega un overlay por arriba. Con el borde TRANSPARENTE el fondo (que se
     pinta en el border-box) se ve a través, y la fibra lo multiplica como a
     todo lo demás.
     ⚠️ Se probó antes a BAJAR el borde a 1 px y el padding box subía 5 px:
     había que retocar cinco reglas (`pe`, `pf`, `pd`, `ph` y la base) que
     están calibradas contra el clamp de líneas. Transparente no toca nada. */
  border-top:6px solid transparent;
  border-radius:0;

  /* ═══════════════════════════════════════════════════════════════════════
     PÓSTER «HECHO A MANO» (2026-09-20)
     Cosmic pidió que los pósters parezcan más hechos a mano y eligió las
     CUATRO cosas a la vez: inclinación, bordes irregulares, papel más gastado
     y registro desplazado. Las cuatro viven aquí o en su `::after`.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── (1) INCLINACIÓN ──────────────────────────────────────────────────
     Un póster pegado a mano nunca queda a nivel. ±0,4-0,5° es lo justo para
     que se note sin que parezca roto: sobre 300 px de ancho, 0,4° mueven las
     esquinas ~1,2 px. El ciclo es de 5, distinto del de 4 de la fibra, del de
     3 de los titulares y del de 10 de las plantillas, así que la pauta tarda
     30 tarjetas en repetirse (una pista tiene 20).
     ⚠️ `transform` NO afecta al layout: el carril sigue midiendo lo mismo, y
     lo que sobresale lo recorta el `overflow:hidden` de `.carril`.
     Aquí NO hay `:hover` (cosmic pidió que los pósters sólo pasen), así que no
     compite con nada. Las reglas de `nth-child` están más abajo. */
  transform:rotate(-.4deg);

  /* ── (2) BORDE IRREGULAR ──────────────────────────────────────────────
     Canto mordido, como papel cortado a mano: 32 puntos, mordida máxima
     2,4 % del lado (~7,2 px en una tarjeta de 300).
     🚨 Con 2 px NO SE VE — se probó el 2026-09-18 y se descartó por eso.
     🚨 Y con 1,6 % TAMPOCO: medido el 2026-09-20 ampliando el canto x8, la
     primera versión (`prof * rnd.random()**2.2`) dejaba casi todas las mordidas
     por debajo de 0,7 px y el canto se leía recto. El sesgo era el culpable,
     no la profundidad: ahora hay suelo del 30 % y se genera al 2,4 %.
     Si hay que retocar, se regenera con `scripts/gen_mordida.py <prof> 3 1000`
     (reproducible, y comprueba que el polígono no se auto-interseca antes de
     imprimirlo).
     Hay TRES variantes (más abajo, ciclo 3n) para que no se repita la misma
     silueta en tarjetas contiguas.
     🚨 `clip-path` RECORTA EL `box-shadow`: la sombra dura de antes ya no
     puede ser un `box-shadow` y pasa a `filter:drop-shadow()` (justo abajo).
     También recorta el borde de 1 px, y eso es lo que se busca: el canto de
     tinta sigue la mordida. */
  clip-path:polygon(0.00% 0.00%,13.27% 1.85%,19.10% 1.31%,33.08% 1.62%,48.16% 0.94%,56.89% 1.33%,66.58% 1.06%,79.07% 1.10%,88.56% 0.79%,100.00% 0.00%,97.64% 14.16%,98.50% 30.71%,98.58% 46.74%,99.24% 60.48%,98.49% 74.54%,97.69% 90.55%,100.00% 100.00%,91.41% 98.11%,80.82% 99.01%,69.83% 98.75%,59.32% 97.85%,46.07% 97.97%,32.96% 98.95%,23.84% 98.74%,9.88% 98.89%,0.00% 100.00%,1.76% 81.76%,2.18% 73.49%,1.49% 57.29%,1.19% 44.57%,2.37% 33.45%,0.96% 12.77%);

  /* ── (2b) LA SOMBRA, AHORA POR FILTRO ─────────────────────────────────
     `drop-shadow` con desenfoque 0 da la MISMA sombra dura de antes (el
     idioma del sitio son los ángulos duros) pero siguiendo la SILUETA
     mordida en vez del rectángulo — que todavía es más de papel recortado a
     mano.
     Antes era `box-shadow:5px 6px 0 rgba(53,52,50,.15)`, que el `clip-path`
     se come entero. */
  filter:drop-shadow(5px 6px 0 rgba(53,52,50,.15));
}
/* Las tres siluetas. Ciclo 3n, el mismo de las fuentes del titular: así dos
   tarjetas seguidas nunca llevan la misma mordida. Especificidad (0,3,0), por
   encima de la base (0,2,0), así que no hay sorpresas de orden. */
.pasarela .poster:nth-child(3n+2){ clip-path:polygon(0.00% 0.00%,7.88% 1.85%,23.49% 0.80%,32.19% 1.20%,42.50% 0.95%,56.29% 0.72%,63.97% 1.21%,78.04% 1.28%,91.81% 1.96%,100.00% 0.00%,97.86% 12.33%,99.27% 27.39%,98.04% 46.76%,98.87% 60.55%,98.65% 71.96%,97.73% 83.02%,100.00% 100.00%,89.50% 97.94%,78.08% 97.60%,69.82% 97.97%,53.42% 98.66%,42.16% 98.08%,30.10% 97.62%,19.26% 98.97%,13.06% 97.94%,0.00% 100.00%,1.08% 85.99%,1.30% 68.40%,1.97% 59.14%,1.58% 47.76%,2.01% 30.84%,1.98% 10.08%); }
.pasarela .poster:nth-child(3n)  { clip-path:polygon(0.00% 0.00%,13.52% 1.36%,19.77% 0.80%,35.12% 0.95%,44.26% 1.91%,52.48% 1.52%,64.21% 2.39%,78.92% 2.38%,90.78% 2.17%,100.00% 0.00%,98.20% 16.93%,98.75% 32.98%,97.87% 39.55%,97.90% 58.18%,98.96% 69.68%,98.50% 89.00%,100.00% 100.00%,87.99% 99.07%,80.30% 98.52%,64.49% 97.99%,52.14% 99.10%,45.89% 98.86%,36.17% 98.77%,21.98% 97.69%,14.87% 98.62%,0.00% 100.00%,1.46% 83.37%,1.72% 71.73%,1.98% 52.98%,2.35% 42.13%,1.19% 28.79%,0.88% 19.22%); }

/* ── (3) PAPEL MÁS GASTADO ───────────────────────────────────────────────
   El desgaste va en un `::after` y NO como capa de fondo, por dos razones:
     · `background-position` es UNA sola propiedad para TODAS las capas, así
       que meter capas nuevas obligaría a reescribir las reglas `nth-child`
       con más valores (ya llevan tres) y a mantenerlos en sincronía.
     · Aquí el `::after` es libre — `.poster::before` y `.poster::after` no
       los usaba nadie.
   Va por DEBAJO del contenido (`.poster > *` lleva `z-index:3`, esto lleva
   `z-index:2`) y en `multiply`, así que oscurece en vez de tapar: se lee como
   manchas y dobleces del propio papel, no como una capa encima.
   🚨 Los valores son MUY bajos a propósito. `multiply` no perdona: si se sube
   el alfa de las manchas, el rojo de marca se apaga con ellas (misma trampa
   que documenta el papel de fibra). */
.pasarela .poster::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  mix-blend-mode:multiply;
  background:
    /* dos manchas grandes y suaves, como de humedad o de roce */
    radial-gradient(34% 26% at 17% 74%, rgba(53,52,50,.055), transparent 72%),
    radial-gradient(28% 20% at 84% 26%, rgba(53,52,50,.05),  transparent 72%),
    /* una manchita pequeña y más marcada, para que no sea todo simétrico */
    radial-gradient(11% 9%  at 63% 88%, rgba(53,52,50,.07),  transparent 70%),
    /* doblez: una banda clara/dos veces oscura a lo largo de la tarjeta.
       `repeating-linear-gradient` a 93° (no 90°) para que no sea perfectamente
       vertical — un doblez recto de máquina se nota. */
    repeating-linear-gradient(93deg,
      rgba(53,52,50,.030) 0 1px, transparent 1px 3px, transparent 3px 88px),
    /* y el borde desgastado: el canto pierde tinta */
    linear-gradient(180deg, rgba(53,52,50,.045) 0 2px, transparent 2px),
    linear-gradient(0deg,   rgba(53,52,50,.05) 0 3px, transparent 3px);
  background-blend-mode:multiply, multiply, multiply, multiply, multiply, multiply;
}
/* La fibra es una tesela de 512 px y la tarjeta mide 300: si todas
   arrancaran en `0 0` se vería el MISMO trozo repetido 40 veces. Tres
   posiciones más. El ciclo de 4 no coincide con el de 3 de los titulares
   ni con el de 10 de las plantillas, así que la pauta tarda en repetirse.
   🚨 Hacen falta TRES valores, uno por capa: `background-position` afecta a
   TODAS las capas, y con un solo valor se desplazaría también el degradado
   del filete y se saldría de la tarjeta. */
/* ── (4) REGISTRO DESPLAZADO ─────────────────────────────────────────────
   En una impresión antigua la plancha del rojo no cae exacta sobre la del
   negro. Aquí se desplaza sólo la banda roja (2ª capa del fondo) unos pocos
   px, distinto en cada tarjeta: queda un hilo de papel por un lado de la banda
   y el rojo se cuela un poco más por el otro. El negro —texto, filetes,
   numerales— NO se mueve, y eso es lo que hace creíble el efecto: lo que
   fallaba era la tinta de color, no el dibujo.
   ⚠️ Hacen falta TRES valores por regla: `background-position` afecta a TODAS
   las capas, así que con uno solo se desplazaría también la fibra y el rojo se
   saldría de la tarjeta. La 1ª capa es la fibra, la 2ª la banda, la 3ª el
   color base (que no se posiciona).
   ⚠️ Aquí también va el 4n+1, que antes no existía: sin él la primera de cada
   cuatro se quedaba sin desplazar y el ciclo se notaba. */
.pasarela .poster:nth-child(4n+1){ background-position:0 0,           -6px 2px, 0 0; }
.pasarela .poster:nth-child(4n+2){ background-position:-137px -83px,   4px -1px, 0 0; }
.pasarela .poster:nth-child(4n+3){ background-position:-61px -171px,  -3px 1px, 0 0; }
.pasarela .poster:nth-child(4n)  { background-position:-218px -47px,   5px 3px, 0 0; }

/* ── (1bis) LAS CINCO INCLINACIONES ──────────────────────────────────────
   Ciclo 5, distinto del 4 de la fibra y del 3 de los titulares, para que la
   pauta no se lea. Los valores están elegidos para que ninguno sea múltiplo
   de otro: -0,42 / +0,33 / -0,16 / +0,48 / -0,29. */
.pasarela .poster:nth-child(5n+1){ transform:rotate(-.42deg); }
.pasarela .poster:nth-child(5n+2){ transform:rotate(.33deg); }
.pasarela .poster:nth-child(5n+3){ transform:rotate(-.16deg); }
.pasarela .poster:nth-child(5n+4){ transform:rotate(.48deg); }
.pasarela .poster:nth-child(5n)  { transform:rotate(-.29deg); }
/* Sin `:hover`: el póster ya no se levanta al pasar el ratón ni cambia de
   sombra. Cosmic pidió el 2026-09-17 que los pósters sólo pasen, sin efectos,
   así que se fueron también la regla `:hover` y el `transition` que la
   animaba (quedaba declarado sin nada que transicionar). */
.pasarela .poster > *{ position:relative; z-index:3; }
.pasarela .numeral{ display:none;
  position:absolute; right:-8px; bottom:-26px; z-index:2;
  font-family:'Red October',sans-serif; font-size:6rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(53,52,50,.22);
  user-select:none; pointer-events:none;
}
.pasarela .poster .tag{
  position:relative; z-index:3;
  font-family:'Rodchenko',sans-serif; font-weight:bold;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rojo-txt);
  padding-bottom:.3rem; margin-bottom:.4rem;
  border-bottom:2px solid var(--rojo);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex-shrink:0; display:block;
}
.pasarela .poster .tag::before{ content:'★ '; color:var(--rojo); }
.pasarela .titular{
  display:flex; flex-direction:column; gap:.04em;
  line-height:1.04; text-transform:uppercase; color:var(--rojo);
  flex-shrink:0;
}
/* Titulares más grandes (2026-09-17): de 1.36/1.40/1.48 a 1.48/1.52/1.62 rem.
   De paso cruzan los 24 px, que es el umbral a partir del cual `--rojo` puro
   cumple contraste sobre el papel (4,04:1 ≥ 3:1 para texto grande). */
.poster:nth-child(3n+1) .titular{ font-family:'Russo One',sans-serif; font-size:1.48rem; }
.poster:nth-child(3n+2) .titular{ font-family:'Red October',sans-serif; font-weight:bold; font-size:1.52rem; }
.poster:nth-child(3n)   .titular{ font-family:'Rodchenko',sans-serif; font-weight:bold; font-size:1.62rem; }
.titular .contorno{ color:var(--rojo-txt); -webkit-text-stroke:0; opacity:.72; }
.pasarela .poster p{
  font-family:'CourbeSans','Rodchenko',sans-serif;
  font-size:.84rem; line-height:1.55; color:var(--g-900);
  margin-top:.45rem;
  overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:4; -webkit-box-orient:vertical;
}
/* 🚨 El número de líneas tiene que ser el que CABE en cada plantilla, no el
   mismo para todas. Las que llevan banda inferior o superior tienen menos
   hueco, y si el clamp pide más líneas de las que caben el párrafo NO
   desborda —tiene `flex-shrink:1`— sino que se COMPRIME y la última línea
   aparece cortada a media altura. Medido a 1600 px, hueco real de cada
   plantilla y líneas que caben a 20,83 px por línea:

     pt · pb · pg   104 px → 4,99    pe · pf · pi   98-101 px → 4,70-4,85
     ph              94 px → 4,51    pj · pd · pc    62 px → 2,98

   Las tres últimas van 0,5 px justas de más, así que además de bajar a 3
   líneas se les aprieta un poco el interlineado (1,4 en vez de 1,55): así
   caben 3 líneas de verdad y se ve MÁS texto que dejándolas en 2.
   ⚠️ Este bloque tiene que ir DESPUÉS de todo lo que toque `line-clamp`:
   la regla «Posters letzten» de más abajo volvía a poner 5 para todas y
   pisaba la base, que es justo el fallo que me costó una ronda. */
.pasarela .poster.pc p{ -webkit-line-clamp:2; line-height:1.4; }
.pasarela .poster.pd p,
.pasarela .poster.pj p{ -webkit-line-clamp:3; line-height:1.4; }
.pasarela .pie{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; border-top:2px solid var(--g-800); padding-top:.4rem;
  font-family:'Rodchenko',sans-serif; font-weight:bold;
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--g-600); white-space:nowrap; overflow:hidden; flex-shrink:0;
}
.pasarela .pie span:first-child{ color:var(--rojo); }
.pasarela .sello{
  position:absolute; top:3.3rem; right:.85rem; z-index:3;
  font-family:'Russo One',sans-serif; font-size:.54rem; letter-spacing:.12em;
  border:2px dashed rgba(163,1,0,.5); border-radius:2px;
  padding:.1rem .38rem; color:var(--rojo-txt); background:rgba(236,234,232,.7);
  transform:rotate(8deg);
}
.pasarela .poster{ height:246px; }

/* --- A · CUÑA (ahora al borde derecho: el texto nunca cae sobre rojo) --- */
.pasarela .pt{ padding-right:5rem; }
.pasarela .pt .cu-a{
  position:absolute; top:0; right:0; z-index:1;
  width:150px; height:150px;
  /* Misma fibra que el papel de la tarjeta, multiplicada sobre el rojo: la
     tinta no es una masa plana, la hoja se lee POR DEBAJO. Antes llevaba
     `papel-rojo.png` (sigma 5,4) a 170 px, que no se distinguía del plano. */
  background:url('img/papel-fibra.webp') center / 512px repeat, var(--rojo);
  background-blend-mode:multiply;
  clip-path:polygon(100% 0, 0 0, 100% 100%);
}
.pasarela .pt .estrella{
  position:absolute; top:.55rem; left:.85rem; z-index:2;
  color:var(--rojo); font-size:1.3rem; line-height:1;
}

/* --- B · LOOM --- */
.pasarela .pb{ padding-right:4.4rem; }
.pasarela .pb .via{
  position:absolute; top:0; right:0; bottom:0; z-index:2;
  width:3rem;
  background:url('img/papel-gris.webp') center/170px repeat, var(--g-800);
  background-blend-mode:multiply;
}
.pasarela .pb .via span{
  position:absolute; top:50%; right:.45rem;
  transform:rotate(90deg);
  transform-origin:center;
  font-family:'Rodchenko',sans-serif; font-weight:bold;
  font-size:.6rem; letter-spacing:.24em; white-space:nowrap;
  color:var(--g-50);
}
.pasarela .pb .pie{ margin-right:3.15rem; }
.pasarela .pb .numeral{ display:none; }

/* --- C · FALDA --- */
/* 🚨 Aquí había un descosido: el texto reservaba 3.9rem (62 px) por abajo,
   pero las dos bandas llegaban hasta 3.1 + 2.9 = 6rem (96 px) desde el fondo,
   así que los últimos 34 px del párrafo quedaban TAPADOS por el faldón. Se
   notaba porque el `.pie` —que iba por encima de las bandas y disimulaba el
   corte— está `display:none` desde el 2026-09-14. Medido a 1600 px, la 3ª
   línea aparecía cortada a media altura.
   Ahora las bandas bajan a 2.4 + 1.8 = 4.2rem (67 px) y el texto reserva
   4.4rem (70 px): el párrafo queda 3 px por encima del faldón y no lo toca.
   Con ese hueco (≈48 px) caben 2 líneas, así que el clamp de `.pc` baja a 2
   en vez de 3 — es lo que hay, la plantilla tiene mucho bloque. */
.pasarela .pc{ padding-bottom:4.4rem; }
.pasarela .pc .faldon{
  position:absolute; left:-1.4rem; right:-1.4rem; bottom:0; z-index:1;
  height:2.4rem;
  background:url('img/papel-fibra.webp') center / 512px repeat, var(--rojo);
  background-blend-mode:multiply;
}
.pasarela .pc .faldita{
  position:absolute; left:-.4rem; right:-.4rem; bottom:2.4rem; z-index:2;
  height:1.8rem;
  background:url('img/papel-gris.webp') center/170px repeat, var(--g-800);
  background-blend-mode:multiply;
  transform:skewY(-2deg);
}
.pasarela .pc .pie{
  margin-left:-1.4rem; margin-right:-1.4rem;
  border-top:none; padding:.5rem 1.45rem;
  color:var(--g-25); z-index:3;
}
.pasarela .pc .pie span:first-child{ color:var(--g-25); }
.pasarela .pc .numeral{ bottom:6.8rem; }

/* --- D · CABECERA --- */
.pasarela .pd{ padding-top:3.7rem; }
.pasarela .pd .bandera{
  position:absolute; top:0; left:-0px; right:0; z-index:1;
  height:2.6rem;
  background:url('img/papel-fibra.webp') center / 512px repeat, var(--rojo);
  background-blend-mode:multiply;
  display:flex; align-items:center; gap:.5rem;
  padding:0 1.1rem;
}
.pasarela .pd .bandera > span{
  font-family:'Russo One',sans-serif; font-size:.92rem; color:var(--g-25);
}
.pasarela .pd .bandera > b{
  margin-left:auto; font-family:'Rodchenko',sans-serif; font-weight:bold;
  font-size:.58rem; letter-spacing:.2em; color:rgba(251,251,251,.85);
  text-transform:uppercase;
}
.pasarela .pd .numeral{ bottom:auto; top:.4rem; right:.2rem; }

/* --- E · FRANJAS --- */
.pasarela .pe::before{
  content:''; position:absolute; top:0; left:-0; right:-0; z-index:1; height:.7rem;
  background:repeating-linear-gradient(90deg,var(--g-800) 0 12px,transparent 12px 20px);
}
.pasarela .pe::after{
  content:''; position:absolute; bottom:0; left:-0; right:-0; height:.55rem;
  background:repeating-linear-gradient(90deg,var(--rojo) 0 7px,transparent 7px 16px);
}
.pasarela .pe{ padding-top:1.6rem; }

/* --- E · ESTAMPA --- */
.pasarela .pf::before{
  content:''; position:absolute; inset:9px; z-index:2;
  border:4px double var(--g-800); pointer-events:none;
}
.pasarela .pf{ padding:1.5rem 1.55rem; }
.pasarela .pf .numeral{ right:auto; left:-6px; bottom:-30px; transform:rotate(-6deg); }

/* --- F · PLANCHA --- */
.pasarela .pg{
  /* Misma ESTRUCTURA de capas que la tarjeta normal —fibra + filete rojo +
     papel— para que las posiciones de `nth-child` (que son de tres capas) le
     sigan valiendo. Aquí sólo cambian el papel de abajo y su textura.
     🚨 El filete va en la capa de EN MEDIO, no arriba: si estuviera arriba no
     lo tocaría la fibra, y si estuviera debajo lo multiplicaría `papel-gris`
     (mediana 154) y el rojo se quedaría en rgb(138,1,0). */
  background:
    url('img/papel-fibra.webp') 0 0 / 512px repeat,
    linear-gradient(var(--rojo),var(--rojo)) 0 0 / 100% 6px no-repeat,
    url('img/papel-gris.webp') 0 0 / 190px repeat var(--g-800);
  background-blend-mode:multiply, normal, multiply;
  color:var(--g-50);
}
.pasarela .pg .titular{ color:var(--rojo); }
.pasarela .pg .titular .contorno{ color:#eceae8; opacity:.6; }
.pasarela .pg .tag{ color:#f08a86; border-bottom-color:rgba(162,157,153,.45); }
.pasarela .pg .tag::before{ color:var(--rojo); }
.pasarela .pg p{ color:var(--g-100); }
.pasarela .pg .pie{ border-top-color:var(--g-100); color:var(--g-200); }
.pasarela .pg .numeral{ -webkit-text-stroke-color:rgba(236,234,232,.25); }

/* --- G · CABEZA --- */
.pasarela .ph::before{
  content:''; position:absolute; top:0; left:0; right:0; height:5px; z-index:1;
  background:url('img/papel-fibra.webp') 0 0 / 512px repeat, var(--rojo);
  background-blend-mode:multiply;
}
.pasarela .ph::after{
  content:''; position:absolute; top:9px; left:0; right:0; height:2px; z-index:1;
  background:var(--g-800);
}
.pasarela .ph{ padding-top:1.9rem; }
.pasarela .ph .tag{ letter-spacing:.3em; }
.pasarela .ph p{ -webkit-line-clamp:3; }

/* Módulos reubicados (banda "El colectivo convoca") */
.modulo-links{ display:flex; flex-direction:column; gap:.45rem; margin-top:1rem; }
.modulo-links a{ color:var(--g-200); text-decoration:none; font-family:var(--fuente-cuerpo);
  font-size:.95rem; letter-spacing:.02em; }
.modulo-links a b{ font-family:var(--fuente-muestra); color:var(--g-50); margin-right:.5rem; }
.modulo-links a:hover{ color:var(--g-50); }

/* ============ VENTANA DISCORD (widget oficial + widget.json) ============ */
.discord-visor{margin-top:2.2rem;}
.discord-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:1.6rem;padding:clamp(1.8rem,4vw,2.6rem);max-width:none;}
.discord-panel{display:flex;flex-direction:column;gap:1.1rem;
  background:var(--g-800);color:var(--g-100);padding:1.5rem 1.6rem;
  border-left:5px solid var(--rojo);}
.discord-cifras{display:flex;align-items:baseline;gap:.9rem;
  grid-column:1 / -1;}
.cif-num{font-family:var(--fuente-muestra);font-size:clamp(3rem,5.5vw,4.2rem);
  line-height:1;color:var(--rojo);}
.discord-leyenda{font-family:var(--fuente-etiqueta);font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--g-200);}
.discord-panel .colulado{min-width:0;}
@media(min-width:821px){
  .discord-canales-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:1.6rem;}
}
.discord-canales li{font-family:var(--fuente-cuerpo);font-size:.9rem;
  color:var(--g-200);padding:.4rem 0;border-bottom:1px solid rgba(236,234,232,.12);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.discord-invite{display:inline-block;font-family:var(--fuente-muestra);
  color:var(--g-50);text-decoration:none;font-size:1.15rem;
  border:2px solid var(--rojo);padding:.55rem 1rem;align-self:flex-start;}
.discord-invite:hover{background:var(--rojo);}


/* BARRA DE RODILLO COMUNISTA (global): tinta + pulgar rojo, track filete */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--g-800);}
::-webkit-scrollbar-thumb{background:var(--rojo);border:2px solid var(--g-800);}
::-webkit-scrollbar-thumb:hover{background:var(--g-25);}

/* Widget propio: cabecera, miembros con avatar Discord */
.discord-cabecera{display:flex;align-items:center;gap:.7rem;border-bottom:2px solid var(--rojo);
  padding-bottom:.55rem;}
.discord-cabecera .discord-marca{color:var(--rojo);font-size:1.1rem;line-height:1;}
.discord-cabecera span#discord-nombre{font-family:var(--fuente-muestra);text-transform:uppercase;
  letter-spacing:.08em;font-size:1.05rem;color:var(--g-50);}
.discord-cabecera b{margin-left:auto;font-family:var(--fuente-etiqueta);color:var(--g-200);
  font-weight:normal;display:flex;align-items:center;gap:.4rem;}
.discord-cabecera b::before{content:'● ';color:var(--rojo);font-size:.7rem;}
.discord-miembros{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem 1rem;
  margin:0;padding:.2rem 0;align-content:start;}
.discord-visor{grid-template-columns:1fr;}
.discord-miembros li{display:flex;align-items:center;gap:.45rem;
  font-family:var(--fuente-cuerpo);font-size:.98rem;color:var(--g-200);
  background:rgba(236,234,232,.07);border:1px solid rgba(236,234,232,.14);
  padding:.4rem .75rem .4rem .4rem;border-radius:3px;}
.discord-miembros img{width:34px;height:34px;border-radius:50%;
  border:1px solid var(--rojo);display:block;}
.discord-miembros .carga{color:var(--g-400);border:none;}
@media(max-width:720px){ .discord-panel{max-width:100%;} }

/* Reparto del panel Discord: cabecera+cifras arriba; miembros | canales; invite derecha */
.discord-cabecera{grid-column:1 / -1;}
@media(min-width:821px){
  .discord-miembros{grid-column:1;grid-row:3;min-width:0;}
  .discord-canales{grid-column:2;grid-row:3;}
  .discord-invite{grid-column:2;grid-row:4;justify-self:start;}
}
@media(max-width:820px){
  .discord-panel{grid-template-columns:1fr;}
  .discord-invite{justify-self:start;}
}

/* Posters letzten: papel visible, sin números/sellos/pie (2026-09-14) */
.pasarela .numeral, .pasarela .sello, .pasarela .pie{ display:none; }
/* ⚠️ Aquí había un `.pasarela .poster p{ -webkit-line-clamp:5; }` que, por
   venir después y tener la misma especificidad (0,2,1), PISABA el clamp de
   arriba sin que se notara. El número de líneas se decide ahora en un único
   sitio (la base + las tres plantillas estrechas). No volver a ponerlo aquí. */
.pasarela .titular{ margin-top:.15rem; }


/* PI · SIERRA: onda roja arriba, tipo diente de sierra del lápiz */
.pasarela .pi{ padding-top:1.9rem; }
.pasarela .pi .sierra{
  position:absolute; top:0; left:0; right:0; height:1.1rem; z-index:1;
  background:var(--rojo);
  clip-path:polygon(0 100%,3% 0,6% 100%,9% 0,12% 100%,15% 0,18% 100%,21% 0,24% 100%,27% 0,30% 100%,33% 0,36% 100%,39% 0,42% 100%,45% 0,48% 100%,51% 0,54% 100%,57% 0,60% 100%,63% 0,66% 100%,69% 0,72% 100%,75% 0,78% 100%,81% 0,84% 100%,87% 0,90% 100%,93% 0,96% 100%,100% 0);
}

/* PJ · ARCO: comilla gigante + regla lateral roja, tipo revista */
.pasarela .pj{ padding-left:2.9rem; padding-top:1.9rem; }
.pasarela .pj .comilla{
  position:absolute; top:.4rem; left:.5rem; z-index:2;
  font-family:'Red October',sans-serif; font-size:3.6rem; line-height:1;
  color:var(--rojo); opacity:.9;
}
.pasarela .pj .regla-lat{
  position:absolute; top:1.6rem; bottom:1.6rem; left:0; width:4px; z-index:2;
  background:var(--rojo);
}

/* --- PÓRTICO: las banderolas por las que entran y salen los pósters
   (2026-09-16, sustituye a los arcos rojos del 2026-09-14) ---
   DOS banderolas por lado, una por carril: la de arriba para el carril de
   arriba, la de abajo para el de abajo. Así cada carril entra y sale por su
   propia boca en vez de compartir una sola pieza. Las dos piezas son la misma
   banderola girada 180°, así que el conjunto queda simétrico.

   Van por ENCIMA de los carriles (z-index 6) y sin capturar el ratón,
   para que pasar el cursor por encima de un póster lo siga parando.
   z-index:0 en .pasarela para que ese 6 quede DENTRO: si no, las
   banderolas competirían con el z-index:1 de .prensa y taparían el
   labio rojo en vez de entrar por debajo de la máquina.

   ⚠️ Los ficheros de cosmic van CRUZADOS respecto al lado donde se ven:
     img/portico-izq.svg  <-  ~/Descargas/derecha.svg
     img/portico-der.svg  <-  ~/Descargas/izquierda.svg
   Se copiaron ya con el nombre del lado que OCUPAN, para que el markup no
   tenga que cruzarse. Si cosmic reexporta, respetar este cruce.

   ─── EL CANTO: por qué el relleno vive DENTRO del SVG (2026-09-16) ───────
   La banderola no es un rectángulo: es un estandarte con el canto cortado en
   diagonal. Contra el borde de la ventana quedaba una cuña transparente por la
   que asomaba el papel claro de la página, y se leía como un HUECO.

   El primer intento rellenó esa cuña con `background` estirado en el propio
   <img>. Se descartó: el `background` pinta SIEMPRE el rectángulo entero del
   elemento, así que (a) el relleno asomaba por todos los huecos de la silueta
   como un parche cuadrado y (b) el drop-shadow pasaba de seguir la banderola a
   seguir un rectángulo. Cosmic lo vio enseguida: «no pongas ese cuadrado,
   déjalo solo en el espacio necesario, que siga la forma natural».

   Ahora el relleno es un <path> MÁS DENTRO del SVG, generado a partir de la
   silueta medida fila a fila (scripts/rellena_canto.py). Va relleno con un
   degradado vertical cuyos topes son el color del metal que tiene al lado en
   cada altura, así que el canto se lee como si la pieza continuara. Como está
   dentro del SVG, la silueta —y por tanto el drop-shadow— sigue la forma real:
   no hay rectángulo por ningún lado.

   Por eso aquí ya NO hay `background-*`: cualquier fondo que se pusiera se
   vería por los huecos de la silueta y volvería a dibujar el cuadrado. */

.pasarela{ position:relative; z-index:0; }

/* VUELVEN A USARSE desde el 2026-09-17 (tarde). Estuvieron un rato sin uso,
   cuando se borró la pasarela; cosmic pidió después «una de las de izquierda y
   derecha en cada borde de cada cinta», así que hay un
   `<img class="portico portico--izq|--der">` por borde, hermano de `.carril`
   dentro del `.pasarela` de cada carril de la cinta.
   El `height:58%` de aquí queda anulado en las cintas por
   `.prensa-carril .portico{height:100%}` (en el <style> de index.html): 293 px
   de banderola para 236 px de póster ≈ 1,24, el mismo ratio que daba la vieja
   pasarela (306/246). */
.pasarela .portico{
  position:absolute; height:58%; width:auto;
  z-index:6; pointer-events:none; user-select:none;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.6));
}
.pasarela .portico--izq{ left:0; }
.pasarela .portico--der{ right:0; }
/* Las dos se anclan a su extremo y se solapan un 16 % en el medio: las puntas
   de la de arriba y de la de abajo se cruzan y no queda ni un resquicio entre
   las dos. */
.pasarela .portico--arriba{ top:0; }
.pasarela .portico--abajo{ bottom:0; }

/* En pantallas estrechas la pasarela sigue midiendo 528 px de alto, así que
   a toda altura las dos banderolas se comerían medio ancho de móvil. Se
   encogen en la misma proporción (la altura manda el ancho, por el viewBox)
   y se anclan a su extremo. */
@media (max-width:820px){
  .pasarela .portico{ height:34%; }
}