/* Hoja de la portada. Vive aparte porque la sirven 2 páginas, /es y /en,
   y dos copias del mismo CSS se desincronizan a la primera corrección. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:#0C0C0D; --night:#070607; --bone:#F4F1EA; --soft:#C2BBAF; --faint:#8A8478;
  --rule:#2B2824; --marco:#1E1A18; --gold:#F6A31D; --gold-d:#CA7F15;
  --r:9px; --r-s:6px; --r-l:12px;

  /* ── Escala de espaciado. 7 pasos, un solo eje, fluidos de 375 a 1200 px.
     celular / escritorio: 6/8 · 12/16 · 20/26 · 30/40 · 46/64 · 64/84 · 88/112 ── */
  --e-1: clamp(6px,   5.1px + 0.24vw,  8px);
  --e-2: clamp(12px, 10.2px + 0.48vw, 16px);
  --e-3: clamp(20px, 17.3px + 0.73vw, 26px);
  --e-4: clamp(30px, 25.5px + 1.21vw, 40px);
  --e-5: clamp(46px, 37.8px + 2.18vw, 64px);
  --e-6: clamp(64px, 54.9px + 2.42vw, 84px);
  --e-7: clamp(88px, 77.1px + 2.91vw, 112px);

  /* ── Alias de rol. Cambiar el ritmo de la página es cambiar estas 6 líneas. ── */
  --fila:        var(--e-2);  /* alto de fila en toda lista de dato */
  --titulo-baja: var(--e-3);  /* de un título a su cuerpo */
  --grupo:       var(--e-4);  /* de un bloque a otro dentro de la misma sección */
  --seccion:     var(--e-5);  /* de una sección a su hermana */
  --acto:        var(--e-6);  /* cabecera a tira */
  --tramo:       var(--e-7);  /* cambio de tramo de la página */

  /* ── Composición del texto. 1ch en Hanken Grotesk mide 0,56 em, pero el
     carácter medio del español compuesto mide 0,50: un tope en ch entrega un
     12 % más de caracteres de los que dice, y por eso max-width:66ch daba 74.
     La medida deja de vivir en cada párrafo y pasa a la columna: se declara
     una vez, y el texto la llena de borde a borde en cualquier ancho. ── */
  /* El tope de medida. Ningún texto corrido pasa de aquí, mida lo que mida su
     caja. Sin él, la respuesta más larga del acordeón se componía a 99
     caracteres —medido a 1440 px— porque su caja llega a 950.

     Son dos topes y manda el menor. El de verdad es 67ch, porque la medida se
     cuenta en caracteres y ch es la única unidad que sigue al tamaño de letra:
     con un tope en píxeles, la descripción de una sede a cuerpo 14 componía 83
     caracteres en los mismos 680 px donde el cuerpo 20 compone 68. Y 67ch son
     unos 67 caracteres de verdad, no 60: en Hanken Grotesk 1ch mide 0,56 em y
     el carácter medio del español compuesto mide entre 0,45 y 0,50 según el
     cuerpo, o sea entre un 12 % y un 24 % más de los que dice. El número está
     puesto para que el PEOR caso —la descripción de sede, a cuerpo 14— quede
     por debajo de 75, no para que el mejor quede exacto.

     El otro tope, 45rem, es el techo absoluto para que un cuerpo grande no
     estire el renglón más allá de la reja. ── */
  --medida: 45rem;
  /* ── Escala tipográfica. Espejo de la de espaciado: pasos numerados y alias
     de rol, para que cambiar la voz de la página vuelva a ser cambiar diez
     líneas. Hasta el 8 de septiembre de 2026 no existía: 43 declaraciones con
     22 valores distintos y solo dos con nombre, y NUEVE de esos valores
     apretados entre 12 y 17 px —12, 12,5, 13, 14, 15, 15,5, 16, 16,5 y 17—.
     Nadie distingue 14 de 14,5 de 15; lo que sí se percibe es que nada
     concuerda con nada. Los nueve se recogen en tres.

     El contraste con el otro eje era lo que dolía: el mismo archivo tenía DOS
     valores crudos de espaciado en 800 líneas. La disciplina existía y
     funcionaba, pero solo se le había aplicado a un eje. ── */
  --t-1: 11px;                              --rotulo:   var(--t-1);
  --t-2: 12.5px;                            --dato-s:   var(--t-2);
  --t-3: 14px;                              --apoyo:    var(--t-3);
  --t-3f: clamp(14px, 1.5vw, 17px);         --apoyo-f:  var(--t-3f);
  --t-4: 15.5px;                            --dato:     var(--t-4);
  --t-5: clamp(17px, 14px + 0.6vw, 20px);   --cuerpo:   var(--t-5);
  --t-6: clamp(17px, 2vw, 22px);            --entrada:  var(--t-6);

  /* La voz de display es otra y tiene su propia rampa. Big Shoulders 900 en
     versalitas es la mejor herramienta de la casa y estaba usada al 34 % de su
     tamaño: los títulos de acto medían 36 px contra un logotipo de 105. */
  --d-1: 17px;                              --rotulo-d: var(--d-1);
  --d-2: 21px;                              --tarjeta:  var(--d-2);
  --d-3: clamp(24px, 3.4vw, 44px);          --ciudad-t: var(--d-3);
  --d-4: clamp(34px, 5.6vw, 54px);          --cifra:    var(--d-4);
  --d-5: clamp(38px, 6.6vw, 76px);          --titulo:   var(--d-5);
  /* Los dos h2 que viven dentro de la reja .dos no pueden crecer: comparten
     ancho con la columna de al lado. Se quedan con el tamaño de antes. */
  --d-col: clamp(26px, 4vw, 36px);          --titulo-col: var(--d-col);
}

html { scroll-behavior:smooth; overflow-x:clip; }
body { font-family:'Hanken Grotesk',sans-serif; font-size:var(--cuerpo); background:var(--ink); color:var(--bone);
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; }

/* Ejes separados. El atajo padding fijaba los 4 lados y anulaba el
   padding-block de header, footer y section por especificidad de clase. */
.wrap { max-width:1080px; margin-inline:auto; padding-inline:clamp(20px,5vw,64px); }

/* ── Barra adherente. Conserva su filete: es la única arista entre 2 planos
   en movimiento relativo, y eso el espacio no lo resuelve. ── */
.barra { position:sticky; top:0; z-index:60; background:rgba(12,12,13,.94);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--rule); }
.barra-in { max-width:1080px; margin-inline:auto;
  padding-block:var(--e-1); padding-inline:clamp(16px,5vw,64px);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--fila); }
.barra .fechas { justify-self:start }
.barra .estado { justify-self:center; text-align:center }
/* La variante la elige el CSS, no el script: es presentación, y así no hay un
   reemplazo de texto al cargar. Las dos frases viven en el HTML. */
.barra .est-angosta { display:none }
@media (max-width:720px) {
  .barra .est-ancha   { display:none }
  .barra .est-angosta { display:inline }
}

/* ── Conmutador de idioma. Vive en la barra porque es lo único presente a
   cualquier altura, y quien no lee español decide en los primeros segundos;
   en el pie llegaría tarde. Es un enlace real a otra URL y no un cambio de
   textos con JavaScript: así se puede compartir, se indexa por separado y no
   parpadea el idioma equivocado. Muestra solo el idioma de DESTINO y se lee
   como acción.

   Y dice la palabra, no el código, escrita EN ESE IDIOMA. Quien no lee la
   página tiene que reconocerla igual: alguien que cae aquí sin español ve
   "English" y sabe. Con "EN" adivina, y en una página en español "EN" es
   además una preposición. Bandera ninguna: una bandera nombra un país y no
   un idioma —el inglés no tiene una— y la de España, en un festival
   colombiano, diría algo que no queremos decir. Se miró qué hacen otros:
   Berlinale, Cannes, Locarno y San Sebastián usan el código de dos letras;
   Guadalajara, que es el comparable exacto, usa la palabra. Ninguno de los
   siete usa bandera. ── */
.barra-fin { justify-self:end; display:flex; align-items:center; gap:var(--e-2) }
.idioma { font-family:'Spline Sans Mono',monospace; font-size:var(--rotulo); letter-spacing:1.4px;
  text-transform:uppercase; color:var(--faint); text-decoration:none; white-space:nowrap;
  padding:10px 12px; margin-inline:-6px; transition:color var(--paso) var(--curva) }
.idioma:hover, .idioma:focus-visible { color:var(--bone) }
.barra .fechas { font-family:'Spline Sans Mono',monospace; font-size:var(--rotulo); letter-spacing:1.4px;
  text-transform:uppercase; color:var(--soft); }
/* ── EL ÁMBAR VUELVE A SER UN ACENTO ─────────────────────────────────────────
   Medido el 8 de septiembre de 2026: había CUATRO objetos en oro a la vez en la
   misma pantalla —hero, secciones y sedes—, y dos de ellos en TODAS sin
   excepción, porque viven en la barra adherente. Un color que aparece cuatro
   veces por pantalla y nunca se va dejó de ser acento y pasó a ser fondo. Eso
   es lo que se leía como «banner».

   Y no era cuestión de cantidad: el ámbar ocupa entre el 0,5 y el 1,1 % de cada
   pantalla. Era de reparto, y sobre todo de QUÉ objetos lo llevaban. Los tres
   que más gritaban «software» no tenían nada que ver con el tono:
     · la línea de estado en monoespaciada ámbar, que es un log de terminal
     · el «+» del acordeón, que es documentación
     · el anillo de foco de color, que es un design system

   Sobreviven en oro: el punto del logotipo, la bola que lo explica, el hito
   próximo, MEDELLÍN y el punto de la conclusión de Dónde —esos dos los eligió
   Juan David por su nombre y no se tocan— y un solo botón relleno por pantalla.
   ── */
.barra .estado { font-family:'Spline Sans Mono',monospace; font-size:var(--rotulo); letter-spacing:1.4px;
  text-transform:uppercase; color:var(--soft); }
/* gap:0 y el espacio va escrito. La clase .b es un flex con gap:8px, pensado
   para separar un icono de su etiqueta; al partir el rótulo en «Inscribir» +
   un <span> para poder acortarlo en el teléfono, las dos palabras pasaron a
   ser dos elementos del flex y el gap se metió entre ellas: 6,7 px más que un
   espacio, y se leía «Inscribir  película». El espacio duro del marcado no se
   descarta, que es lo que sí le pasa al espacio normal dentro de un flex. */
.barra .b { justify-self:end; font-size:var(--dato-s); text-decoration:none; padding:6px 13px; gap:0 }
.barra .b-oro { background:var(--bone); border-color:var(--bone); color:var(--ink) }
.barra .b-oro:hover { background:var(--soft); border-color:var(--soft) }
.b-oro { background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:500 }
.b-oro:hover { background:var(--gold-d); border-color:var(--gold-d); color:var(--ink) }

/* ── El tracking descentra un texto centrado ─────────────────────────────────
   letter-spacing añade el espacio también DESPUÉS de la última letra, así que
   la tinta de un texto centrado con pista queda media pista a la izquierda del
   centro de su caja. Medido: «FESTIVAL DE CINE» bajo el logotipo estaba 1,75 px
   a la izquierda, en escritorio y en teléfono por igual, y justo debajo de una
   marca de 105 px, donde se lee como que el subtítulo no está alineado.
   Se compensa devolviendo pista de margen a la derecha, y va DOBLE porque los
   tres llevan margin-inline:auto: el margen negativo lo reparte el centrado
   entre los dos lados, así que la mitad se pierde. Medido: «FESTIVAL DE CINE»
   estaba 2,50 px a la izquierda del centro del logotipo; con una pista quedaba
   en 1,00 y con dos, centrado.

   Solo estos tres. La línea de estado de la barra y los rótulos de la anatomía
   también llevan pista, pero cambian de alineación por punto de quiebre —van
   centrados en escritorio y a la izquierda en el teléfono— y ahí la
   compensación estaría corrigiendo algo que no está descentrado. Su desvío es
   de 1,3 px y no se ve. ── */
.rotulo, .legal, .mision { margin-right:calc(var(--pista, 0px) * -2) }

/* ── Cabecera. Big Shoulders a line-height .9 esconde unos 6 px de blanco
   sobre las mayúsculas y unos 4 px bajo la línea base: el hueco de arriba
   se ve mayor de lo que dice el número, y el de abajo puede ser el corto. ── */
header { padding-block:var(--acto) 0; text-align:center; }
header p { margin-inline:auto }
/* El logotipo es el mismo SVG que ya llevan Patrocinio, Proyecto, Acervo y
   Mercadeo: trazos idénticos, salido de logo/2490fc-hueso.svg. La landing era
   la única página que aún lo componía con letra viva, y por eso era la única
   que parpadeaba: al cargar salía en la grotesca del sistema, 406 px de ancho,
   y al llegar Big Shoulders se encogía a 336, un 17 % de golpe y cambiando la
   forma entera. Un logotipo es arte, no texto: como trazo no depende de la red
   y no puede volver a saltar.

   currentColor y var(--gold) en vez de los hexadecimales del archivo, que son
   los mismos valores: así un cambio de paleta no deja el logotipo atrás.

   Se dimensiona por ALTO y el ancho lo pone la proporción del viewBox, que es
   3,208. Los números salen de medir el título anterior: ocupaba 336 px de
   ancho a 1440, con font-size clamp(52px,9vw,104px). 336/3,208 = 105 de alto,
   y de ahí el clamp de abajo, que reproduce el mismo tamaño en todo el rango.
   Comprobado: 337 px a 1440 contra los 336 de antes. */
h1.title { margin:0; line-height:0; color:var(--bone) }
h1.title { --marca-h:clamp(52px,9.07vw,105px) }
h1.title .marca { height:var(--marca-h); width:auto; display:inline-block; vertical-align:top }
/* Símbolo del logo nuevo (oct 2026), apilado sobre el logotipo con las
   proporciones del archivo de marca: ancho = 56,5 % de los glifos y un
   blanco de un tercio de la altura de las cifras antes de ellas. */
h1.title .simbolo { display:block; height:calc(var(--marca-h) * .927); width:auto;
  margin:0 auto calc(var(--marca-h) * .108) }
.rotulo { --pista:3px;
  font-family:'Spline Sans Mono',monospace; font-size:var(--rotulo); letter-spacing:var(--pista);
  text-transform:uppercase; color:var(--soft); margin-top:var(--e-3); line-height:1.9 }
.rotulo span { display:block; color:var(--faint) }
.cuando { margin-top:var(--seccion); font-size:var(--cuerpo); color:var(--soft) }
.cuando b { color:var(--bone); font-weight:500 }
.acciones { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:var(--grupo) }
.acciones .b { text-decoration:none; font-size:var(--apoyo); padding:11px 20px }

/* ── El hero se queda con la primera pantalla entera, para que «El festival»
   quede debajo del pliegue y de verdad se revele al bajar. Antes cabía
   completo al cargar —terminaba en el píxel 589 de 900 en escritorio— así que
   el observador lo revelaba en el mismo instante y la animación no se veía.
   No faltaba maquinaria: faltaba pista.

   Lo que llena la pantalla no es solo el título: es el título, las fechas,
   los dos botones y la tira de cinco datos. Por eso el hero no queda vacío,
   que es el riesgo de todo hero a pantalla completa.

   svh y no vh: en el móvil, vh cuenta la barra del navegador que no está y
   deja el hero más alto que la pantalla. min-height y no height: en una
   pantalla corta el contenido empuja en vez de recortarse.

   Los dos margin-top:auto se reparten el hueco libre: el primero centra el
   bloque, el segundo clava la flecha abajo. Sin posicionamiento absoluto, que
   en pantalla corta se montaría encima del contenido.

   --barra-h la escribe el script del <head> midiendo la barra de verdad, que
   pasa de 37 a 56 px cuando envuelve. El valor de aquí es el de escritorio y
   es el que queda si no hay JavaScript: se queda corto solo en móvil angosto,
   y por el lado seguro, que es el hero de más y no de menos. ── */
:root { --barra-h:37px }
.hero { min-height:calc(100svh - var(--barra-h)); display:flex; flex-direction:column }
.hero > header { margin-top:auto }
.baja { margin-top:auto; align-self:center; display:block; padding:var(--e-2) var(--e-3) var(--grupo);
  color:var(--faint); transition:color var(--paso) var(--curva) }
.baja svg { width:26px; height:26px; display:block; animation:respira 2.6s ease-in-out infinite }
.baja:hover, .baja:focus-visible { color:var(--bone) }
@keyframes respira { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
@media (prefers-reduced-motion:reduce) { .baja svg { animation:none } }

/* El hero es el único bloque cuyo límite es el ALTO. La escala de espaciado
   es fluida en el ancho, así que en una pantalla baja conserva el ritmo de
   escritorio y el contenido no cabe: a 1280×720 se pasaba 11 px y la flecha
   caía debajo del pliegue. Aquí baja un escalón, y solo dentro del hero. */
@media (max-height:860px) {
  .hero > header { padding-top:var(--seccion) }
  .hero .rotulo  { margin-top:var(--e-2) }
  .hero .cuando  { margin-top:var(--grupo) }
  .hero .acciones{ margin-top:var(--e-3) }
  .hero .tira    { margin-top:var(--grupo) }
  .baja          { padding-block:var(--e-1) var(--e-2) }
}

/* En un teléfono bajo no cabe ni apretando: la tira sola mide 255 px con sus
   cinco filas apiladas. Ahí la flecha sobra, porque la tira queda cortada por
   el pliegue y un contenido cortado es la mejor invitación a bajar que hay.
   La flecha sirve donde la pantalla se ve completa y podría parecer que se
   acabó, que es el escritorio. */
@media (max-height:740px) and (max-width:620px) { .baja { display:none } }

/* ── LOS RECUADROS SE HUNDEN ─────────────────────────────────────────────────
   Estaban DIEZ unidades por encima del suelo —#161513 sobre #0C0C0D— y a esa
   distancia la placa y el fondo son el mismo plano: las tarjetas no se leían
   como objetos, se leían como una mancha algo más clara.

   El primer arreglo fue subirlas más. Estaba mal de raíz, porque una placa que
   flota por encima del fondo es la placa de Vercel y de Linear —la convención
   de producto— y era justo lo que había que quitar. Aquí la placa va al revés:
   el recuadro es un hueco recortado en el negro, no una loza apoyada encima.

   Sobre casi negro el TONO solo no alcanza para decirlo. Medido en L*, que es
   la escala que corresponde a estas luminancias —el contraste WCAG aquí miente,
   lo domina su piso de +0,05—: el suelo está en L* 3,3 y el hueco en L* 1,7, o
   sea 1,6 de recorrido. Es todo lo que hay hacia abajo y no basta solo.

   Lo que da el filo es el MARCO. Un recuadro con filete perimetral es recurso
   de imprenta —el destacado enmarcado de un programa de mano— y no de interfaz.
   Con marco, el hueco tiene borde; sin marco, es un charco.

   El peso del marco es el de un hueco, no el de una placa. Nació en #302B29,
   que es L* 18 contra un suelo de L* 3,3: cuando las placas estaban levantadas
   tenía sentido, pero con la placa hundida ese filete pasaba a ser lo más claro
   del bloque después de la tipografía. #1E1A18 lo deja en L* 9,7 —seis puntos
   sobre el suelo, suficientes para que el borde exista sin que se anuncie.

   Token propio: --rule sigue siendo el filete que SEPARA (la barra, la firma de
   Festhome, el pie) y --marco es el que ENCIERRA. Dos oficios, dos nombres. ── */
.tira, .anatomia, .sec, .sede { border:1px solid var(--marco) }
/* El acordeón lleva el marco siempre, transparente en reposo: si apareciera al
   pasar el puntero, el bloque saltaría un píxel. */
details { border:1px solid transparent }
details[open], details:hover { border-color:var(--marco) }
/* Y el botón secundario entra en la misma familia: si las cajas se enmarcan,
   el botón que vive entre ellas no puede llevar otro filete. */
.b:not(.b-oro) { border-color:var(--marco) }

/* ── Tira de datos. Un solo panel tonal en vez de 6 filetes. ── */
.tira { margin-top:var(--seccion); background:var(--night); border-radius:var(--r);
  padding:var(--e-3); display:grid; grid-template-columns:repeat(5,1fr); gap:var(--e-3); }
.tira dt { font-family:'Spline Sans Mono',monospace; font-size:var(--rotulo); letter-spacing:1.3px;
  text-transform:uppercase; color:var(--faint); margin-bottom:var(--e-1) }
.tira dd { font-size:var(--dato); color:var(--bone); font-variant-numeric:tabular-nums }
/* Los valores comparten línea aunque un rótulo se parta en dos: entre unos 760
   y 1000 px «Cuota del festival» y los premios bajan a 2 renglones y «Cierra»
   y «Estreno» no, y los valores quedaban a alturas distintas. */
.tira div { display:flex; flex-direction:column }
.tira dd { margin-top:auto }

/* ── Ritmo de secciones. Arriba 46 y 64, abajo del título 20 y 26:
   razón de 2,3 a 1, para que el título encabece y no flote. ── */
section { padding-block:var(--seccion) 0 }

/* ── La página se lee por actos ──────────────────────────────────────────────
   Cada acto se queda con una pantalla y se centra en ella, como el hero. Son
   cinco: El festival, Las secciones, Si queda seleccionada, Calendario —con la
   banda de Festhome, que sola mide el 5 % de una pantalla— y Dónde con
   Preguntas, que cierran juntas porque Dónde sola es 0,29 y se vería vacía.

   min-height y centrado, nunca alto fijo: los actos que sobran de pantalla
   crecen en vez de recortarse. Medido el 7 de septiembre de 2026: en
   escritorio y tablet caben los cinco; en un teléfono corto, «Si queda
   seleccionada» y «Calendario» piden 1,40 y 1,50 pantallas y no hay
   maquetación que lo arregle, es contenido.

   Y por eso el enganche es proximity y no mandatory. Mandatory obliga a parar
   en cada frontera y pelea justo cuando el bloque no cabe, que es el caso del
   teléfono; proximity engancha si ya estás cerca del borde y se aparta si no.
   La misma página se porta bien en los dos sitios sin decidir dos veces.

   Se apaga con movimiento reducido y en pantallas bajas, donde encerrar el
   contenido molesta más de lo que ordena. ── */
.acto { min-height:calc(100svh - var(--barra-h));
  display:flex; flex-direction:column; justify-content:center }

/* Y entre acto y acto, aire propio. En escritorio el hueco entre dos actos es
   la mitad del sobrante de cada uno y sobra de más; en el teléfono no sobra
   nada —los seis piden entre 1,0 y 2,3 pantallas— así que el centrado no
   reparte y los actos se tocaban. Medido el 8 de septiembre de 2026: 0 px de
   separación entre los seis, en las cinco anchuras de teléfono probadas, y lo
   que se veía era la banda de Festhome naciendo pegada a la D de DÓNDE.

   MARGEN y no relleno. Con box-sizing:border-box el relleno vive dentro de los
   100svh y le quita presupuesto al contenido: probado, sacaba de su pantalla a
   Calendario y a Dónde en 1024×768 y en 1280×720, que hasta ahora cabían. El
   margen va por fuera, así que el acto sigue midiendo exactamente una pantalla
   y el enganche sigue cayendo en el borde de la caja, no en el del margen: el
   aire se recorre al desplazar y no se ve como un hueco al parar. */
main > .acto + .acto { margin-top:var(--acto) }
/* El último no reserva pantalla. Preguntas y el pie son el cierre y van
   juntos: si el acto se queda con su pantalla entera, el centrado abre un
   hueco entre la última pregunta y los enlaces, y el final de la página
   parece un descuido en vez de un final. Sin min-height, Preguntas mide lo
   que mide y el pie viene detrás; el enganche sigue cayendo en su borde, así
   que la última pantalla es las dos cosas a la vez. */
/* Y el relleno arriba es SUYO y no del margen. El margen de main > .acto + .acto
   vive fuera de la caja, así que el enganche no lo cuenta: al parar en Preguntas
   el título quedaba pegado a la barra, sin un píxel. En los demás actos no se
   nota porque el centrado deja hueco; éste no tiene min-height, así que no hay
   de dónde. Lo tenía y se lo quité yo al pasar de relleno a margen. */
main > .acto:last-child { min-height:0; padding-top:var(--seccion) }
/* Dentro de un acto el aire lo pone el centrado, no el padding de sección: si
   no, el bloque queda descentrado por arriba. */
.acto > section:first-child { padding-top:0 }
.acto > section + section { padding-top:var(--seccion) }

@media (prefers-reduced-motion: no-preference) and (min-height:640px) {
  html { scroll-snap-type:y proximity; scroll-padding-top:var(--barra-h) }
  .hero, .acto { scroll-snap-align:start }
  /* Y el pie engancha por su FINAL. Sin esto, el último punto de enganche es
     el borde de Preguntas y el resto del documento —el pie— queda dentro de su
     radio de atracción: la rueda se devuelve y los últimos 139 px no se
     alcanzan nunca. Se veía como una página cortada en «Organiza la
     Corporación Cinéfagos». Con align:end el final del documento también es
     un sitio válido donde parar. No se nota con scrollTo, que fija la
     posición a mano; solo con rueda de verdad. */
  footer { scroll-snap-align:end }
}
#festival { padding-block-start:var(--tramo) }
/* ── El título de acto, al tamaño que la página ya le tenía reservado.
   Medía 36 px contra un logotipo de 105: cada acto se quedaba con una pantalla
   entera y después susurraba. «EL FESTIVAL», «DÓNDE», «PREGUNTAS» son una o dos
   palabras en la voz de display de la casa, usada al 34 % de su tamaño.

   El tope son 76 px y no más. Medido el 8 de septiembre de 2026: a 64 el título
   más largo —«Si la película queda seleccionada», 33 caracteres— todavía cabe
   en una línea a 1440 y a 1024; de 72 en adelante se parte en dos. Se eligió
   partirlo, porque con text-wrap:balance parte en «SI LA PELÍCULA / QUEDA
   SELECCIONADA», que se lee mejor que la línea única, y porque en el teléfono
   ya iba en dos líneas desde siempre: así los seis actos se comportan igual en
   todas las anchuras.

   A este cuerpo el tracking cambia de signo: .01em abría de más, así que pasa a
   -.005em, y la interlínea baja de 1 a .92, que es lo que pide una versalita
   condensada de 76 px. ── */
h2 { font-family:'Big Shoulders Display',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:var(--titulo); line-height:.92; letter-spacing:-.005em; margin:0 0 var(--titulo-baja) }
/* Los dos que viven dentro de la reja no pueden crecer: comparten ancho con la
   columna de al lado, y a 76 px chocarían. */
#inscribir h2, #calendario h2 { font-size:var(--titulo-col); line-height:1; letter-spacing:.01em }

/* En pantalla baja el título grande cuesta alto, y el alto es lo que la
   arquitectura de actos reparte. A 1280×720 el acto del título largo se pasaba
   un 5 % de su pantalla, que antes cabía justo: son los 104 px que el título
   ganó al pasar de una línea de 36 a dos de 76. Aquí el tope baja a 56, el
   título vuelve a una línea y el acto vuelve a caber. La escala fluida ya
   responde al ancho; esto la hace responder también al alto, que es lo que le
   faltaba en una página que reserva pantallas. */
@media (max-height:820px) { :root { --d-5: clamp(38px, 5vw, 56px) } }

.sub { color:var(--soft); font-size:var(--cuerpo);
  margin:calc(var(--e-2) - var(--titulo-baja)) 0 var(--grupo) }

/* El texto llena su columna; las rejas son las que hacen ancha la página y
   conservan el ancho completo. En 375 px min() devuelve el 100 % y la columna
   desaparece sola, sin consulta de medios. Va anclada a la izquierda, no
   centrada, para compartir margen con los títulos y los paneles. */
section.acto { padding-top:0 }
section > :is(p, details) { width:auto }
/* El tope se pone en el texto y no en la caja: las rejas y los paneles siguen
   ocupando el ancho completo —son ellos los que dan la anchura a la página— y
   lo único que se detiene a 45rem es el renglón. Va anclado a la izquierda,
   sin márgenes automáticos, para compartir borde con los títulos. */
:where(main :is(p, li, dd)) { max-width:min(var(--medida), 60ch) }

/* ── BANDERA A LA IZQUIERDA, EN TODA LA PORTADA Y EN TODOS LOS ANCHOS ────────
   El justificado era decisión del proyecto y se sostuvo mientras hubo medida
   ancha que lo sostuviera. Con el tope de medida ya no la hay: el mismo tope
   que impide que un bloque se componga a 99 caracteres deja a casi todos por
   debajo de los 63 que el justificado necesita para no abrir los espacios. Las
   dos reglas no caben juntas, y de las dos la que sirve al lector es el tope.

   Medido antes de quitarlo, hueco por hueco y con el rectángulo real de cada
   palabra, no estimando: el espacio natural de Hanken Grotesk es 0,201 em; el
   peor espacio justificado llegaba a 0,748 em, tres veces y media el natural, y
   47 de 295 espacios pasaban de 0,42 em. Uno de cada seis, en escritorio.

   Con esto se van cuatro cosas de una vez: el justificado, la partición
   automática que existía solo para sostenerlo, la regla de bandera a 620 px y
   la consulta de contenedor que la repetía por columna. Y con la consulta se
   van los container-type que no tenían otro consumidor. Las palabras largas
   siguen cubiertas por overflow-wrap:break-word, que no dependía de nada de
   esto. ── */
:is(h1,h2,h3,.condicion) { text-wrap:balance }
section > p + p { margin-top:var(--e-3) }
/* El arranque de El festival: tres versos, no un párrafo. */
/* ── Anatomía del nombre. Es la pieza del primer momento de la presentación en
   su estado explicado: cada parte del logotipo con su lectura literal y su
   significado, colgando de una flecha. Dice lo mismo que decía el párrafo del
   pulso, pero se ve en vez de leerse, y el nombre deja de ser una marca opaca
   para quien llega de fuera.
   La cifra y la flecha llevan alto fijo: es lo que alinea las 3 lecturas entre
   sí sin recurrir a subgrid, que aún no está en todos los navegadores. ── */
.anatomia { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start;
  gap:0 clamp(16px,3.2vw,40px); margin-bottom:var(--grupo); text-align:center;
  background:var(--night); border-radius:var(--r); padding:var(--e-4) var(--e-3) }
.anatomia .parte { display:flex; flex-direction:column; align-items:center }
.anatomia .fig { font-family:'Big Shoulders Display',sans-serif; font-weight:900;
  font-size:var(--cifra); line-height:1; letter-spacing:-.012em; color:var(--bone);
  height:clamp(36px,5.8vw,56px); display:flex; align-items:center; justify-content:center }
.anatomia .sigla .fig i { font-style:normal; letter-spacing:-.015em }
.anatomia .bola { width:clamp(10px,1.2vw,15px); aspect-ratio:1; border-radius:50%; background:var(--gold) }
.anatomia .flecha { position:relative; width:2px; height:clamp(24px,3.2vw,38px);
  margin-top:var(--e-2); border-radius:2px; transform-origin:top center;
  background:linear-gradient(to bottom, rgba(138,132,120,.15), var(--faint)) }
.anatomia .flecha::after { content:''; position:absolute; left:50%; bottom:-8px; margin-left:-5px;
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid var(--faint) }
.anatomia .texto { display:flex; flex-direction:column; align-items:center; margin-top:var(--e-3) }
.anatomia .lit { font-family:'Spline Sans Mono',monospace; font-weight:500; font-size:var(--rotulo);
  letter-spacing:1.3px; text-transform:uppercase; color:var(--faint); line-height:1.5 }
.anatomia .mean { margin-top:var(--e-1); font-weight:300; font-size:var(--apoyo-f);
  color:var(--bone); line-height:1.35 }
/* La condición es lo único que decide si una película existe para el festival,
   así que carga el peso de entradilla de la sección.

   Y NO se justifica. Un párrafo justificado de dos líneas no tiene dónde
   repartir el sobrante: la primera se lo come entero. Medido a 1440 px el 8 de
   septiembre de 2026: 0,96 em de hueco entre palabras, 3,7 veces el espacio
   normal, en la frase que define el festival y en la primera pantalla después
   del hero. Peor que el 0,89 em que arreglamos esa misma tarde para el
   teléfono. El balance se queda: con bandera es justo lo que iguala las dos
   líneas, que es para lo que sirve. */
.condicion { font-size:var(--entrada); color:var(--soft) }
.condicion b { color:var(--bone); font-weight:500 }

/* ── Tarjetas de sección. El tono y el radio ya estaban: sobraba el borde. ── */
.secciones { display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:var(--fila) }
.sec { position:relative; border-radius:var(--r); padding:var(--e-3); background:var(--night);
  display:flex; flex-direction:column; gap:var(--e-1) }
.sec h3 { font-family:'Big Shoulders Display',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:var(--tarjeta); line-height:1; letter-spacing:.01em }
.sec:has(.marca) h3 { padding-right:var(--e-7) }
.sec .en { font-family:'Spline Sans Mono',monospace; font-size:var(--rotulo); letter-spacing:1.2px;
  text-transform:uppercase; color:var(--faint) }
.sec p { font-size:var(--apoyo); color:var(--soft); margin-top:var(--e-1) }
.sec .dur { font-family:'Spline Sans Mono',monospace; font-size:var(--dato-s); color:var(--bone) }
.sec .corta { display:none }
/* Declaración única. Antes eran 2 y la segunda mataba margin-top y padding-top. */
.sec .marca { position:absolute; top:calc(var(--e-3) + 7px); right:var(--e-3); margin:0; padding:0;
  font-family:'Spline Sans Mono',monospace; font-size:var(--rotulo); letter-spacing:1.2px;
  text-transform:uppercase; color:var(--soft) }
.rotulo-sec { font-family:'Spline Sans Mono',monospace; font-size:var(--rotulo); letter-spacing:1.4px;
  text-transform:uppercase; color:var(--faint); margin:var(--grupo) 0 var(--fila) }

/* ── No son hermanas: una es prosa y la otra es un dato, y por eso no van a
   partes iguales. Medido el 8 de septiembre de 2026, con las dos a 1fr:
   la columna de los pasos llevaba 355 caracteres a cuerpo 20 y la del
   calendario 179 a cuerpo 15 —dos veces el texto en una letra un tercio mayor,
   casi tres veces la tinta— y la reja les daba el mismo ancho. El calendario
   tiene TECHO: su línea más larga mide 256 px y no crece nunca, ni a 1024 ni a
   1440, así que de sus 444 px sobraban 188, el 42 %, en hueco. La prosa, en
   cambio, es elástica y crecía hacia abajo: el desnivel entre columnas era de
   89 px a 1440, 124 a 1024 y 227 a 800.

   Y la acción va PRIMERO. En lectura de izquierda a derecha el ojo aterrizaba
   en cinco fechas antes de llegar a lo que el acto pide hacer, y en el teléfono
   eso era literal: una pantalla entera de calendario antes del primer botón.
   La objeción —que en una convocatoria la fecha de cierre es la noticia— la
   cubre la barra adherente, que lleva la cuenta regresiva viva a toda altura.

   El filete se va. Estaba compensando que dos cosas distintas se veían iguales;
   con una columna ancha de prosa y un riel angosto de dato, el aire basta. Y de
   paso desaparece el defecto que tenía: colgaba del alto de la SEGUNDA columna,
   así que bajaba 89 px por debajo del final de la primera y moría solo. ── */
.dos { display:grid; grid-template-columns:7fr 5fr; gap:var(--e-5); align-items:start }
#inscribir .acciones { justify-content:flex-start; margin-top:var(--e-3) }
ol.pasos { list-style:none; counter-reset:p; display:flex; flex-direction:column; gap:var(--e-3) }
ol.pasos li { counter-increment:p; padding-left:34px; position:relative; color:var(--soft) }
/* ── ALINEACIÓN ÓPTICA DE LOS MARCADORES ─────────────────────────────────────
   El punto de la línea de tiempo es la vara: su caja y la de las versalitas de
   «15 DIC 2026» ocupan exactamente las mismas filas de píxel. Ninguno de los
   otros cuatro llegaba a eso, y los dos de la lista de premisas ni siquiera
   concordaban entre sí —la raya iba 3,5 px alta y el punto 4,5— con los valores
   aparentemente intercambiados a ojo. Todo lo de abajo son correcciones contra
   el centro de la caja de la equis del texto con el que comparten renglón, que
   es lo que el ojo alinea. ── */
ol.pasos li::before { content:counter(p); position:absolute; left:0; top:3px;
  font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:var(--tarjeta); color:var(--bone); line-height:1.3 }
ol.pasos b { color:var(--bone); font-weight:500 }

/* ── Calendario como línea de tiempo. Aquí la línea sí es la información:
   une los hitos y muestra en cuál va el proceso. El estado lo calcula el
   navegador, así que la página no envejece. ── */
.hitos { list-style:none; display:flex; flex-direction:column }
.hitos li { position:relative; padding:0 0 var(--e-3) 28px; display:flex;
  flex-direction:column; gap:2px }
.hitos li:last-child { padding-bottom:0 }
/* el punto */
.hitos li::before { content:''; position:absolute; left:0; top:5px; width:9px; height:9px;
  border-radius:50%; background:var(--rule); box-shadow:0 0 0 3px var(--ink); z-index:1 }
/* el hilo que une un hito con el siguiente */
.hitos li::after { content:''; position:absolute; left:4px; top:9px; bottom:-4px; width:1px;
  background:var(--rule) }
.hitos li:last-child::after { display:none }
.hitos .dia { font-family:'Spline Sans Mono',monospace; font-size:var(--dato-s); letter-spacing:1.2px;
  text-transform:uppercase; color:var(--faint) }
.hitos .que { font-size:var(--dato); color:var(--soft) }
/* Lo cumplido se apaga, pero apagado no es borrado. Iba en --rule, que sobre
   el fondo da 1,33 : 1 —AA pide 4,5— y no se leía: era un renglón en blanco.
   Comprobado adelantando el reloj de la página: desde el 1 de octubre el
   primer hito desaparecía, y desde el 15 de diciembre desaparecían dos, justo
   los meses en que la página trabaja. Ahora baja a --faint, que es 5,26 : 1, y
   la jerarquía la hacen tres pasos legibles: hueso el próximo, --soft lo que
   viene, --faint lo cumplido. El punto sí puede quedarse en --rule: es
   decoración, no texto. */
.hitos li.pasado::before { background:var(--rule) }
.hitos li.pasado .dia, .hitos li.pasado .que { color:var(--faint) }
/* el que sigue manda */
.hitos li.proximo::before { background:var(--gold); box-shadow:0 0 0 3px var(--ink),0 0 0 6px rgba(246,163,29,.16) }
.hitos li.proximo .dia { color:var(--gold) }
.hitos li.proximo .que { color:var(--bone); font-weight:500 }
/* el festival es la meta */
.hitos li.fin::before { width:11px; height:11px; left:-1px; top:4px; background:none;
  border:2px solid var(--faint) }
.hitos li.fin .que { color:var(--bone) }

/* ── Lo que recibe una película seleccionada. Iba en rejilla de dos columnas y
   la rejilla iguala el alto de la fila: cada punto corto quedaba estirado hasta
   el alto de su vecino largo. Medido a 1440 px: 42 px de hueco en la primera
   fila, 42 en la segunda y 110 en la tercera —218 px de aire muerto dentro de
   una lista de seis puntos—. A 820 px eran 267.

   Es una lista, no una tabla: los seis puntos no se comparan entre sí renglón
   por renglón, así que nada obliga a que compartan altura. Con columnas de
   texto cada punto ocupa lo suyo y el navegador reparte. Se lee hacia abajo y
   luego a la derecha, que en una lista de puntos independientes da igual. ── */
ul.recibe { list-style:none; columns:2; column-gap:var(--grupo) }
ul.recibe li { position:relative; padding-left:17px; color:var(--soft);
  break-inside:avoid; margin-bottom:var(--fila) }
ul.recibe li::before { content:''; position:absolute; left:0; top:.75em; width:5px; height:5px;
  border-radius:50%; background:var(--faint) }
ul.recibe b { color:var(--bone); font-weight:500 }
.recibe + details { margin-top:var(--grupo) }

/* ── Sedes. Paneles tonales en las 2 anchuras: auto-fit apila solo en el
   celular, así que la rama móvil y sus 3 filetes desaparecen. ── */
/* La ciudad es la respuesta a la pregunta del título: va debajo de DÓNDE, en
   la misma voz de display, y un punto por debajo de ella —34 contra 36— para
   que el título siga siendo el título. En oro: primero estuvo enterrada en la
   bajada, en gris y del tamaño del cuerpo, y no se veía; luego se fue al otro
   extremo, a 72. Lo que sobraba era el tamaño, no el color. Con 34 el oro ya
   no compite con el punto de la conclusión: uno es el nombre y el otro es el
   remate, y a esta escala se leen como dos cosas y no como dos titulares. */
.ciudad { font-family:'Big Shoulders Display',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:var(--ciudad-t); line-height:.95; letter-spacing:.01em; color:var(--gold);
  margin:0 0 var(--e-1) }
.ciudad + .sub { margin-top:0 }

/* Las dos premisas y su conclusión, y la conclusión lleva EL punto: el mismo
   que separa 24 de 90 en el logotipo, que es el punto de encuentro entre el
   fútbol y el cine. La frase dice literalmente eso, así que el signo y el
   texto dicen lo mismo. Las premisas van con raya, que es un guion de lista y
   no compite; el punto es lo único en oro y por eso se lee como el remate.
   Las medidas del círculo salen del logotipo: .42em de diámetro, alineado a
   la altura de la equis. */
.premisas { list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:var(--fila) }
.premisas li { display:grid; grid-template-columns:1.7em 1fr; align-items:start;
  color:var(--soft) }
.premisas li::before { content:''; align-self:start; margin-top:.82em;
  width:.75em; height:1px; background:var(--faint) }   /* la raya: .66em → .82em */
.premisas .punto { color:var(--bone) }
.premisas .punto::before { width:.42em; height:.42em; margin-top:.665em;
  border-radius:50%; background:var(--gold) }

/* Las tres en vertical y no en fila. El acto ya no es una lista de sedes: es
   la ciudad y, debajo, sus tres salas. Apiladas, cada una tiene sitio para
   decir qué es —un centro cultural, la sala alternativa, el museo—, que es lo
   que las convierte en tres vertientes de Medellín y no en tres direcciones. */
.sedes { display:flex; flex-direction:column; gap:var(--fila); margin-top:var(--grupo) }
.sede { border-radius:var(--r); padding:var(--e-3); background:var(--night);
  display:grid; grid-template-columns:minmax(0,12rem) 1fr; gap:var(--e-3); align-items:baseline }
@media (max-width:620px) { .sede { grid-template-columns:1fr; gap:var(--e-1) } }
.sede h3 { font-size:var(--dato); font-weight:500 }
/* Dónde está cada una. Va pegada al nombre y en la voz de dato, no de prosa:
   es una seña, no una frase. */
.sede .donde { font-family:'Spline Sans Mono',monospace; font-size:var(--rotulo); letter-spacing:1.2px;
  text-transform:uppercase; color:var(--soft); margin-top:2px }
/* El texto de la sede es contenido, no etiqueta. Iba en --faint por venir de
   cuando las tres sedes eran una fila estrecha; hoy son tres placas anchas. */
.sede p { font-size:var(--apoyo); color:var(--soft) }

/* ── Pantalla ancha pero baja. A 1024×768 el acto «Dónde» medía 746 px contra
   713 útiles: 33 de más, y ninguno era grasa —título, ciudad, bajada, tres
   premisas y tres sedes, todo con la escala de la casa—. Comprimir la escala en
   todas partes para ganar en un solo tamaño sale caro, así que el ritmo baja un
   peldaño únicamente cuando la pantalla es baja.

   El mínimo de 900 px deja fuera al teléfono a propósito: allí los actos se
   desbordan por otra razón —el contenido no cabe en 667 px de alto ni
   comprimido— y por mucho más que 33 px, así que apretarlo no arreglaría nada
   y solo quitaría aire donde ya se lee justo. ── */
@media (min-width:900px) and (max-height:800px) {
  :root { --grupo: var(--e-3) }
  .sede { padding-block: var(--e-2) }
  /* Y las tres salas pasan a fila. En pantalla alta van apiladas a propósito
     —el acto es la ciudad y, debajo, sus tres salas, y apiladas cada una tiene
     sitio para decir qué es—, pero apiladas miden 367 px y a 720 px de alto eso
     deja al acto 83 px por fuera. La decisión de apilar sigue en pie donde cabe;
     donde no cabe, la alternativa no es apilarlas más apretadas, es no ver el
     acto. En fila, el nombre se pone encima de su descripción y cada sala dice
     lo mismo en tres renglones. */
  .sedes { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-2) }
  .sede { grid-template-columns:1fr; gap:var(--e-1) }
  /* La columna ya es angosta: el tope de medida no tiene nada que recortar y
     apretaría el texto contra un borde que ya está cerca. */
  .sede p { max-width:none }
}


/* ── Acervo. El degradado se reancla dentro del hueco: iba de #1a1817 al tono
   de placa, y con la placa hundida cruzaba el plano del suelo —la caja empezaba
   por encima del fondo y terminaba por debajo. Ahora cae de #0B0A0A al tono de
   placa: todo el recorrido queda bajo el suelo. ── */
.acervo-caja { border-radius:var(--r-l); padding:var(--e-3);
  background:linear-gradient(180deg,#0B0A0A,var(--night)) }
.acervo-caja .n { font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:var(--cifra);
  line-height:1; color:var(--gold) }
.acervo-caja p { margin-top:var(--fila); color:var(--soft) }

/* ── Acordeón. Sin filetes: separación por espacio en reposo y por tono
   al pasar el puntero y al abrir. Retira 9 líneas, 7 de ellas seguidas. ── */
details { border-radius:var(--r); padding-inline:var(--e-3);
  margin-inline:calc(var(--e-3) * -1); transition:background var(--paso) var(--curva) }
details + details { margin-top:var(--e-1) }
details:hover { background:var(--night) }
details[open] { background:var(--night); padding-bottom:var(--fila) }
details summary { cursor:pointer; padding-block:var(--fila); padding-right:var(--grupo);
  position:relative; font-size:var(--dato); font-weight:500; list-style:none }
details summary::-webkit-details-marker { display:none }
details summary::after { content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%);
  color:var(--faint); font-size:var(--rotulo-d); line-height:1 }
/* U+2212 MINUS SIGN, no el guion medio: por diseño comparte anchura y eje
   con el «+», así que al abrir y cerrar el glifo no salta ni de sitio ni de
   altura. El contenido del sitio ya usa el menos correcto en «UTC−5»; era la
   hoja de estilos la que no. */
details[open] summary::after { content:'−' }
/* El panel sigue ocupando el ancho entero —es él quien da la caja— pero su
   texto ya no: el max-width:none que llevaba el párrafo estaba puesto para
   ganarle a un tope anterior, y era justo lo que dejaba la respuesta más larga
   componiéndose a 99 caracteres. */
details { max-width:none }
details p { margin:0 0 var(--fila); color:var(--soft); font-size:var(--cuerpo) }
details p:last-child { margin-bottom:0 }

/* ── Pie. Recupera sus 3 valores anulados. Con ese blanco encima, sobra
   el filete que lo separaba del acordeón. ── */
footer { margin-top:var(--grupo); padding-block:var(--grupo) var(--seccion) }
footer { text-align:center }
.pie-fila { display:flex; gap:var(--grupo); flex-wrap:wrap; align-items:center; justify-content:center }
.pie-enl { display:flex; gap:var(--e-3); flex-wrap:wrap; justify-content:center }
.pie-enl a { color:var(--soft); text-decoration:none; font-size:var(--apoyo) }
.pie-enl a:hover, .pie-enl a:focus-visible { color:var(--bone); text-decoration:underline;
  text-underline-offset:4px; text-decoration-color:var(--soft) }
/* ── Festhome no es una tercera llamada: es una credencial. Dice en qué
   plataforma vas a caer, que es lo que el botón no dice. Pero estaba puesta
   como si fuera un botón —centrada, sola, en su propia banda— y era el objeto
   de más contraste de todo el acto: una plancha blanca sobre #0C0C0D salta más
   que el botón oro. Con esto había CINCO enlaces a la misma ficha en la página
   y TRES visibles a la vez en esa pantalla. Eso no da confianza, insiste.

   Ahora es la firma del bloque, con el tratamiento que el reglamento ya usaba:
   filete arriba, rótulo, logotipo, alineado a la izquierda como todo lo demás.

   Y CAMBIA EL ARCHIVO, que es lo que más se nota y no costó nada: la variante
   discreta ya estaba en el repositorio desde el 4 de septiembre. Ojo con los
   nombres, que engañan: «claro» y «oscuro» nombran el TEMA al que va cada una,
   no el color del botón. festhome-boton-claro.png es la plancha gris oscura
   con texto blanco —la que el reglamento sirve en tema claro— y aquí, sobre
   nuestro negro, es la que se lee como firma en vez de como anuncio pegado.
   El alt baja a «Festhome» a secas: el rótulo de al lado ya dice qué es, y
   una credencial no da órdenes. ── */
/* Las dos redes, al lado de los enlaces del pie. Del tamaño del texto que
   tienen al lado, no más: son una vía de contacto, no una llamada. */
.pie-redes { display:flex; align-items:center; gap:var(--e-2) }
.pie-redes a { color:var(--soft); display:inline-flex; padding:6px;
  transition:color var(--paso) var(--curva) }
.pie-redes a:hover, .pie-redes a:focus-visible { color:var(--bone) }
.pie-redes svg { width:19px; height:19px; display:block }
/* La equis es maciza y a igual altura pesa el doble que un trazo: se compensa. */
.pie-redes svg.equis { width:16px; height:16px }

.banda-festhome { margin-top:var(--acto); padding-top:var(--e-4);
  border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap }
.banda-festhome .rot { font-family:'Spline Sans Mono',monospace; font-size:var(--rotulo);
  letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); margin:0 }
/* El botón mide 200×30 y en el teléfono eso es un blanco de 30 px de alto: por
   debajo de los 44 que pide el dedo. El enlace se estira con relleno y se le
   descuenta el mismo relleno por fuera, así que el área que se toca crece y la
   imagen no se mueve un píxel de donde estaba. */
.banda-festhome a { display:inline-block; padding-block:7px; margin-block:-7px }
.banda-festhome img { width:200px; max-width:100%; height:auto; display:block;
  opacity:.85; transition:opacity var(--paso) var(--curva) }
.banda-festhome a:hover img, .banda-festhome a:focus-visible img { opacity:1 }
.mision { --pista:.03em;
  font-family:'Big Shoulders Display',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:var(--dato); line-height:1.35; letter-spacing:var(--pista); margin-top:var(--seccion); color:var(--faint) }
.mision span { display:block; white-space:nowrap }
.mision, .legal { margin-inline:auto }
.mision .oro { color:var(--gold-d) }
.legal { --pista:1.2px;
  margin-top:var(--grupo); font-family:'Spline Sans Mono',monospace; font-size:var(--rotulo); letter-spacing:var(--pista);
  text-transform:uppercase; color:var(--faint); line-height:2 }
/* Único enlace dentro de prosa del documento: recupera su subrayado. */
.legal a { color:var(--faint); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--rule) }
.legal a:hover { color:var(--soft); text-decoration-color:var(--gold-d) }

/* ── Consulta de medios: solo disposición. Todas las constantes de
   espaciado viven en la escala fluida y no se repiten aquí. ── */
@media (max-width:720px) {
  .dos { grid-template-columns:1fr; gap:var(--seccion) }
  .dos .col + .col { border-left:0; padding-left:0;
    border-top:1px solid var(--rule); padding-top:var(--seccion) }

  /* La anatomía del nombre no cabe en 4 columnas: cada parte pasa a fila y la
     flecha gira, de apuntar hacia abajo a apuntar al texto. */
  .anatomia { grid-template-columns:1fr; max-width:none; gap:var(--e-3) }
  .anatomia .parte { flex-direction:row; align-items:center; gap:var(--e-3); text-align:left }
  /* el suelo de --cifra: la fluida daría 40 a 720 px y aquí la cifra ya no
     manda la fila, la comparte con el texto */
  .anatomia .fig { height:auto; min-width:2ch; font-size:34px }
  .anatomia .flecha { width:26px; height:2px; margin-top:0; flex:none; transform-origin:left center;
    background:linear-gradient(to right, rgba(138,132,120,.15), var(--faint)) }
  .anatomia .flecha::after { left:auto; right:-8px; bottom:auto; top:50%; margin:-5px 0 0 0;
    border-left:8px solid var(--faint); border-right:0;
    border-top:5px solid transparent; border-bottom:5px solid transparent }
  .anatomia .texto { margin-top:0; align-items:flex-start }

  /* La tira toma la anatomía de la lista de fechas dentro de su panel. */
  .tira { grid-template-columns:1fr; gap:0 }
  .tira div { display:flex; flex-direction:row; align-items:baseline; justify-content:space-between; gap:var(--e-3);
    padding-block:var(--fila) }
  .tira div:first-child { padding-top:0 }
  .tira div:last-child { padding-bottom:0 }
  .tira dt { margin-bottom:0 }
  /* El valor no se parte: «15 dic 2026» y «2.000 dólares» son una pieza. Si no
     cabe al lado de su etiqueta, baja a su propio renglón en vez de reventar la
     fila. Pasaba en inglés a 320 px, donde «615, from 93 countries» se salía
     por 0,64 px: invisible porque html lleva overflow-x:clip, pero a un
     carácter de verse cortado con cualquier letra sustituta. */
  .tira div { flex-wrap:wrap }
  .tira dd { font-size:var(--apoyo); text-align:right; white-space:nowrap; margin-top:0 }

  ul.recibe { columns:1 }

  /* Lo que compite lleva panel. Lo que no compite pasa a fila con aire. */
  .secciones { grid-template-columns:1fr }
  .invitadas { gap:var(--e-3) }
  .sec.invita { background:none; border-radius:0; padding:0; box-shadow:none; border:0;
    flex-direction:row; align-items:baseline; justify-content:space-between; gap:var(--e-3) }
  /* Salvo cuando el rótulo es una frase. «Puede venir de la convocatoria» mide
     228 px y no cede, así que el título se quedaba con lo que sobraba: a 375 px
     «Cuadro Abierto» caía en dos renglones y a 320 px en 48 px de ancho, con
     «Cuadro» encima de «Abierto». Apilado se lee igual que las sedes: el nombre
     y debajo su seña. Medido el 8 de septiembre de 2026. */
  .sec.invita:has(.corta) { flex-direction:column; align-items:flex-start; gap:2px }
  .sec.invita .corta { white-space:normal }
  .sec.invita h3 { font-size:var(--rotulo-d) }
  .sec.invita p, .sec.invita .en { display:none }
  .sec.invita .corta { display:block; font-family:'Spline Sans Mono',monospace; font-size:var(--rotulo);
    letter-spacing:1px; text-transform:uppercase; color:var(--faint); white-space:nowrap }

  /* En el celular la barra se queda con lo que decide: estado y botón. */
  .barra .fechas { display:none }
  .barra-in { display:flex; gap:8px; flex-wrap:nowrap }
  .barra .estado { justify-self:auto; text-align:left }
  .barra-fin { margin-left:auto }
  .barra .estado { font-size:var(--rotulo); letter-spacing:.8px; line-height:1.25;
    white-space:nowrap }
  .barra .b { font-size:var(--dato-s); white-space:nowrap }

  /* El botón suelta la palabra que no hace falta. En la barra el contexto ya
     está puesto —es la portada de un festival de cine— y «Inscribir» dice lo
     mismo con la mitad del ancho; la etiqueta entera sigue en el hero y en
     Cómo inscribir, que es donde alguien la lee por primera vez.
     No es cosmética: los tres elementos de la barra no caben en un teléfono, y
     el que cedía era el estado, que se partía en «ABRE EL 1 DE / OCTUBRE» y
     dejaba la barra en dos renglones. Medido el 8 de septiembre de 2026: con
     la etiqueta larga el estado solo cabe en una línea desde 430 px; con la
     corta, desde 360. */
  .barra .b .mas { display:none }
}

/* Por debajo de 360 px no caben los tres de ninguna manera, y antes de partir
   el estado en dos es mejor callarlo: la fecha de apertura está en el hero, en
   el calendario y en la primera pregunta. */
@media (max-width:359px) {
  .barra .estado { display:none }
  /* Sin el estado, los dos que quedan se reparten el ancho en vez de amontonarse
     a la derecha dejando media barra vacía. */
  .barra-fin { margin-left:0; flex:1; justify-content:space-between }
}

/* ── Con el dedo, no con el puntero. Un enlace de 24 px de alto se falla; las
   guías de Apple piden 44 y las de Android 48. Se paga en relleno, que es
   transparente: no cambia el dibujo de nada, solo agranda el blanco activo.
   La consulta es por tipo de puntero y no por ancho, porque lo que decide es
   el dedo: una tableta de 1024 px también lo necesita, y una ventana angosta
   en el escritorio no. Medido el 8 de septiembre de 2026: el botón de la barra
   daba 36 px, «English» 39 y los tres enlaces del pie 24. ── */
@media (pointer:coarse) {
  .barra .b { padding-block:11px }
  .idioma   { padding:12px 10px }
  .pie-enl a { display:inline-block; padding-block:10px }
  .pie-enl  { gap:var(--e-2) var(--e-3) }
  /* Fijo, no calculado con relleno: los dos iconos no miden lo mismo —el trazo
     19, el glifo 16— así que un mismo relleno daba 43 y 40, y el mínimo es 44. */
  .pie-redes a { min-width:44px; min-height:44px; justify-content:center; padding:0 }
  .baja     { padding-inline:var(--e-5) }
}

/* ── Revelado al desplazar. Enhancement puro y a prueba de fallos: la clase
   .rvl la pone el script del <head>, y un temporizador la retira si el
   observador nunca arranca. Sin JavaScript, con movimiento reducido, en un
   navegador viejo o si algo se rompe, la página aparece completa y quieta.
   Nada de contenido queda esperando a un observador para existir. ── */
html.rvl [data-rvl] { opacity:0; transform:translateY(14px) }
html.rvl [data-rvl].visto { opacity:1; transform:none;
  transition:opacity .58s var(--curva) var(--rvl-d,0s),
             transform .58s var(--curva) var(--rvl-d,0s) }
/* El valor del atributo es el turno dentro del grupo. El escalonado se
   reserva para hermanos que entran a la vez, en fila; lo apilado en vertical
   ya lo escalona el propio desplazamiento y sumarle retardo lo vuelve lento. */
html.rvl [data-rvl] { --rvl-p:.07s }
html.rvl [data-rvl="2"] { --rvl-d:calc(var(--rvl-p) * 1) }
html.rvl [data-rvl="3"] { --rvl-d:calc(var(--rvl-p) * 2) }
html.rvl [data-rvl="4"] { --rvl-d:calc(var(--rvl-p) * 3) }
html.rvl [data-rvl="5"] { --rvl-d:calc(var(--rvl-p) * 4) }
html.rvl [data-rvl="6"] { --rvl-d:calc(var(--rvl-p) * 5) }

/* ── La línea de tiempo es la única con tratamiento propio. Los hitos entran
   en orden y el hilo que los une se dibuja hacia abajo. Acá el movimiento no
   adorna: dice lo mismo que el bloque, que esto es una secuencia. El paso va
   más lento y el recorrido más corto, porque los 5 caben en media pantalla. ── */
html.rvl .hitos li { --rvl-p:.09s }
html.rvl .hitos li[data-rvl] { transform:translateY(8px) }
html.rvl .hitos li[data-rvl]::after { transform:scaleY(0); transform-origin:top }
html.rvl .hitos li[data-rvl].visto::after { transform:none;
  transition:transform .45s var(--curva) calc(var(--rvl-d,0s) + .14s) }
/* La flecha de la anatomía se dibuja al entrar, igual que el hilo de la línea
   de tiempo: el movimiento señala, no adorna. */
html.rvl .anatomia .parte[data-rvl] .flecha { transform:scaleY(0) }
html.rvl .anatomia .parte[data-rvl].visto .flecha { transform:none;
  transition:transform .45s var(--curva) calc(var(--rvl-d,0s) + .12s) }
@media (max-width:720px) {
  html.rvl .anatomia .parte[data-rvl] .flecha { transform:scaleX(0) }
}

@media (prefers-reduced-motion: reduce) {
  html.rvl [data-rvl] { opacity:1; transform:none; transition:none }
}