/* documentales.css - Casa Marx
   La seccion de documentales de casamarx.com. Paso 422, 2026-09-18.

   ES COMPARTIDO POR TODOS LOS DOCUMENTALES. Vive en /documentales/assets/ y no
   dentro de la carpeta de cada uno: el segundo documental no debe traer una
   copia de este archivo que despues se desfase de la primera.

   TRES COSAS QUE NO SE PUEDEN ROMPER AQUI

   1. La tipografia es BARLOW CONDENSED, la de la marca, no Oswald. El
      artefacto de diseno usaba Oswald, que no es de Casa Marx; el index.html
      del sitio ya pide Barlow Condensed a Google Fonts, asi que esta pagina la
      reusa del cache del navegador y no agrega una peticion.
   2. La CSP del sitio permite estilos de fonts.googleapis.com y fuentes de
      fonts.gstatic.com, pero NO imagenes de otros dominios. Por eso los iconos
      de redes son SVG en linea y no vienen de cdn.simpleicons.org, que era lo
      que el artefacto hacia y que el navegador habria bloqueado sin avisar.
   3. Nada de este archivo depende de JavaScript. El menu, el mosaico y el
      formulario se ven y se usan con el script apagado; lo que el script
      agrega es la cuenta regresiva, el visor y el video.

   La paleta viene del diseno original, no del design system del panel: es una
   pagina de campana con su propia identidad, verde oscuro y rojo. */

:root {
  --verde-900: #061a17;
  --verde-800: #08201c;
  --verde-700: #0b2823;
  --verde-600: #123a31;
  --verde-400: #2f6f5c;
  --menta:     #8fe3bd;
  --crema:     #eaf6ef;
  --amarillo:  #f5d661;
  --amarillo-2:#e9c84f;
  --rojo:      #e02b1d;
  --blanco:    #ffffff;

  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --cuerpo:  "Source Sans 3", system-ui, -apple-system, sans-serif;

  --ancho: 1200px;
}

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

/* OBLIGATORIO, NO COSMETICO. El azul de seleccion del navegador sobre el verde
   oscuro de esta pagina es ilegible, y el diseno original define el suyo. Se
   declara ::selection Y ::-moz-selection: no se pueden agrupar en una sola
   regla, porque un navegador que no entiende uno de los dos selectores
   descarta la regla completa. */
::selection   { background: var(--menta); color: var(--verde-800); }
::-moz-selection { background: var(--menta); color: var(--verde-800); }

/* OBLIGATORIO, NO COSMETICO. El visor y el modal llevan display:flex y
   display:grid, y esas reglas VENCEN al display:none que el navegador aplica a
   [hidden] por venir despues en la hoja. Sin esta linea, el visor negro y el
   modal amarillo se ven encima de la pagina desde el primer momento, y sin
   JavaScript se quedan ahi para siempre. Defecto propio, encontrado en el
   navegador el 2026-09-18: el HTML decia hidden y el elemento tapaba los clics
   igual. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--verde-800);
  color: var(--crema);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--menta); }

h1, h2, h3, .display {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0;
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* Para lectores de pantalla, no para la vista. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -- Barra superior ------------------------------------------------------- */

.barra-doc {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 10px 24px;
  background: rgba(6, 26, 23, .94);
  border-bottom: 1px solid rgba(143, 227, 189, .18);
  backdrop-filter: blur(6px);
}
.barra-doc .marca img { height: 30px; width: auto; }
.barra-doc nav { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.barra-doc nav a {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--crema); text-decoration: none;
}
.barra-doc nav a:hover, .barra-doc nav a:focus-visible { color: var(--amarillo); }

/* Migajas de regreso al indice de documentales. SEO/GEO, 2026-09-19. */
.migas {
  margin: 0; padding: 10px 24px;
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(234, 246, 239, .6);
}
.migas a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.migas a:hover, .migas a:focus-visible { color: var(--amarillo); }

/* La ultima entrada del menu NO es una entrada mas: es la accion de la pagina.
   Amarillo relleno, como en el diseno original. Si se ve igual que las otras
   cinco, no destaca y deja de ser un llamado. */
.barra-doc nav a.nav-registro {
  padding: 9px 16px; border-radius: 2px;
  background: var(--amarillo); color: var(--verde-700);
}
.barra-doc nav a.nav-registro:hover,
.barra-doc nav a.nav-registro:focus-visible { background: var(--blanco); color: var(--verde-700); }

/* -- Menu movil ------------------------------------------------------------ */
/* SOLO EXISTE CON JAVASCRIPT: el boton nace con "hidden" y el menu de arriba
   (.barra-doc nav) se ve completo, envuelto en varias lineas, hasta que
   documentales.js prende html[data-js="si"]. Asi una visita sin JavaScript
   sigue teniendo las seis secciones a la vista, nunca un boton que no hace
   nada. Paso 432, 2026-09-19. */
.hamburguesa {
  display: none; margin-left: auto;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  background: transparent; color: var(--crema); cursor: pointer;
  border: 1px solid rgba(143, 227, 189, .35); border-radius: 2px;
}
.hamburguesa:hover { background: rgba(143, 227, 189, .14); border-color: var(--menta); }
.hamburguesa:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* EL PANEL SALE DESDE LA DERECHA, sobre todo lo demas. z-index por encima de
   la barra (40) y del visor (60), porque el menu tiene que quedar alcanzable
   incluso si alguien lo abre con el visor abierto. */
.menu-movil {
  position: fixed; inset: 0 0 0 auto; z-index: 70;
  width: min(84vw, 320px); padding: 90px 28px 28px;
  background: var(--verde-900); border-left: 1px solid rgba(143, 227, 189, .25);
  box-shadow: -20px 0 50px rgba(0, 0, 0, .4);
  transform: translateX(100%); transition: transform .25s ease;
}
.menu-movil.abierto { transform: translateX(0); }
.menu-movil nav { display: flex; flex-direction: column; gap: 6px; }
.menu-movil nav a {
  padding: 14px 4px; border-bottom: 1px solid rgba(143, 227, 189, .12);
  font-family: var(--display); font-size: 16px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--crema);
  text-decoration: none;
}
.menu-movil nav a:hover, .menu-movil nav a:focus-visible { color: var(--amarillo); }
.menu-movil nav a.nav-registro {
  margin-top: 10px; padding: 14px 16px; border: 0; border-radius: 2px;
  text-align: center; background: var(--amarillo); color: var(--verde-700);
}
/* EL FONDO OSCURO DETRAS DEL PANEL, para cerrar tocando afuera. Es la MISMA
   marca de apertura (".abierto" en <html>) para no manejar dos estados. */
html.menu-abierto { overflow: hidden; }
html.menu-abierto::after {
  content: ""; position: fixed; inset: 0; z-index: 65;
  background: rgba(4, 16, 14, .6);
}

/* -- Portada -------------------------------------------------------------- */

.portada {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center; gap: 48px;
  padding: 64px 24px 72px;
  background: radial-gradient(120% 90% at 70% 0%, var(--verde-400) 0%, var(--verde-600) 45%, var(--verde-900) 100%);
  overflow: hidden;
}
.portada > * { position: relative; z-index: 1; }
.portada-texto { max-width: 640px; margin-left: auto; margin-right: auto; }

.kicker {
  display: inline-block; margin-bottom: 18px;
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--amarillo);
}
.portada h1 {
  font-size: clamp(38px, 7vw, 86px); font-weight: 700; line-height: .92;
  color: var(--blanco); text-wrap: balance;
}
/* La segunda mitad del titulo, la que va despues de los dos puntos. Mas chica
   y en menta, como en el cartel: el h1 completo en un solo tamano se come cinco
   renglones y deja de leerse como un titulo. */
.portada h1 .titulo-2 {
  display: block; margin-top: 6px;
  font-size: clamp(22px, 3.4vw, 42px); font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--menta);
}
.portada .subtitulo {
  margin: 16px 0 0;
  font-family: var(--cuerpo); font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 400; color: rgba(234, 246, 239, .85);
}
/* El resumen de una oracion. Mas chico que el subtitulo: es un dato de
   apoyo (que, cuando, gratis, donde), no el mensaje principal. SEO/GEO,
   2026-09-19. */
.portada .resumen {
  margin: 10px 0 0; max-width: 46ch;
  font-family: var(--cuerpo); font-size: 14px;
  color: rgba(234, 246, 239, .65);
}
.portada .resumen a { color: var(--menta); }
.portada .credito { margin: 14px 0 0; color: rgba(234, 246, 239, .82); }

.portada-cartel { position: relative; max-width: 420px; margin: 0 auto; }
/* -- Carrusel de carteles -------------------------------------------------- */
/* CADA CARTEL ES UN <a> A SU IMAGEN COMPLETA (ver la nota del generador): sin
   JavaScript solo se ve el primero, como una imagen fija igual que antes de
   este cambio. El carrusel (pasar de cartel) y el visor (ampliar) los prende
   documentales.js. */
.cartel-item { display: none; position: relative; }
.cartel-item.activo { display: block; }
.cartel-item img {
  width: 100%; display: block;
  border: 1px solid rgba(143, 227, 189, .25);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.cartel-item .ojo {
  position: absolute; right: 12px; bottom: 12px; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(6, 26, 23, .72); border: 1px solid rgba(143, 227, 189, .45);
}
.cartel-item .ojo svg { width: 17px; height: 17px; display: block; }
/* LAS FLECHAS QUEDAN OCULTAS (hidden) HASTA QUE EL SCRIPT LAS ENCIENDE, igual
   que los controles de la linea de tiempo: con un solo cartel visible y sin
   JavaScript, una flecha que no hace nada es peor que ninguna flecha. */
.carrusel-ctrl button {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(6, 26, 23, .72); color: var(--crema); cursor: pointer;
  border: 1px solid rgba(143, 227, 189, .45); border-radius: 50%;
}
.carrusel-ctrl button:hover { background: rgba(143, 227, 189, .22); border-color: var(--menta); }
.carrusel-ctrl button:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.carrusel-ctrl button[data-carrusel="prev"] { left: -8px; }
.carrusel-ctrl button[data-carrusel="next"] { right: -8px; }

/* -- Cuenta regresiva ----------------------------------------------------- */
/* Los numeros se pintan en el servidor con el valor del momento de publicar y
   el script los actualiza cada segundo. Asi una pagina sin JavaScript muestra
   una cuenta que se quedo quieta, no cuatro ceros. */

.cuenta { margin: 30px 0 28px; }
.cuenta-titulo {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--menta);
  margin-bottom: 10px;
}
/* LAS CUATRO CAJAS MIDEN LO MISMO, y eso es flex:1 y no min-width. Con
   min-width cada caja crece con su contenido y "07" y "142" dan cajas de
   distinto ancho: el contador se mueve solo al pasar de dos digitos a tres.
   Con flex:1 y max-width en la fila, las cuatro reparten el ancho por igual y
   nada salta al cambiar de segundo. */
.cuenta-cajas { display: flex; gap: 14px; max-width: 520px; }
.cuenta-caja {
  flex: 1; min-width: 0; padding: 14px 6px; text-align: center;
  background: rgba(8, 32, 28, .55);
  border: 1px solid rgba(143, 227, 189, .3);
  border-radius: 3px;
}
.cuenta-caja b {
  display: block;
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(26px, 5vw, 46px);
  color: var(--blanco); font-variant-numeric: tabular-nums;
}
.cuenta-caja span {
  display: block; margin-top: 8px;
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--menta);
}
/* La caja de los segundos va en rojo, y es la unica distinta. En el diseno
   original marca lo que se mueve: las otras tres cambian cada tanto, esta
   cambia a la vista. */
.cuenta-caja.segundos {
  background: rgba(192, 57, 43, .22);
  border-color: rgba(192, 57, 43, .6);
}
.cuenta-caja.segundos b, .cuenta-caja.segundos span { color: #ff8d7d; }
.cuenta.estrenado .cuenta-cajas { display: none; }

/* -- Botones -------------------------------------------------------------- */

.botones { display: flex; gap: 14px; flex-wrap: wrap; }
.boton, .boton-2, .boton-3, .boton-inerte {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 22px;
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border-radius: 2px;
  transition: transform .12s ease, background .12s ease;
}
/* EL BOTON PRINCIPAL ES AMARILLO, NO ROJO, y es la correccion del 2026-09-18.
   En el diseno original el rojo es el color del duelo y del dato grave: el +43,
   la noche de Iguala, los segundos que corren. El amarillo es el de la accion.
   Pintar de rojo "Avisame del estreno" mezclaba las dos cosas. */
.boton { background: var(--amarillo); color: var(--verde-700); border: 1px solid var(--amarillo); }
.boton:hover { background: var(--blanco); border-color: var(--blanco); }
.boton-2 { background: transparent; color: var(--crema); border: 1px solid rgba(234, 246, 239, .45); }
.boton-2:hover { background: rgba(143, 227, 189, .14); border-color: var(--menta); }
/* Amarillo en linea: el mismo peso de accion, un escalon por debajo del lleno. */
.boton-3 { background: transparent; color: var(--amarillo); border: 1px solid rgba(245, 214, 97, .6); }
.boton-3:hover { background: rgba(245, 214, 97, .14); border-color: var(--amarillo); }
/* NO ES UN BOTON, y por eso no es un <a> ni un <button>: es la etiqueta de una
   funcion que todavia no tiene fecha. El borde punteado dice "aqui va a haber
   algo" sin invitar a un clic que no lleva a ninguna parte. */
.boton-inerte {
  background: transparent; color: rgba(234, 246, 239, .55);
  border: 1px dashed rgba(143, 227, 189, .4); cursor: default;
}
.boton:active, .boton-2:active, .boton-3:active { transform: scale(.985); }
.boton:focus-visible, .boton-2:focus-visible, .boton-3:focus-visible {
  outline: 3px solid var(--amarillo); outline-offset: 2px;
}
.boton-3:focus-visible { outline-color: var(--blanco); }

/* -- Secciones ------------------------------------------------------------ */

section { padding: 80px 0; }
section > .contenedor > h2 {
  font-size: clamp(26px, 4vw, 46px); font-weight: 700; line-height: 1;
  color: var(--blanco); margin-bottom: 10px;
}
.seccion-nota { color: rgba(234, 246, 239, .72); margin: 0 0 30px; max-width: 70ch; }

.s-trailer   { background: var(--verde-700); }
.s-cartelera { background: var(--verde-900); border-top: 3px solid var(--rojo); }
.s-documental{ background: var(--verde-800); }
.s-contexto  { background: linear-gradient(180deg, var(--verde-600) 0%, var(--verde-700) 100%); }
.s-galeria   { background: var(--verde-800); }
.s-cartelera > .contenedor > h2 { color: var(--amarillo); }

/* -- El video ------------------------------------------------------------- */
/* FACHADA, no iframe de entrada. El iframe de YouTube solo se inserta cuando
   alguien pulsa, y eso hace tres cosas: la pagina no carga el reproductor que
   quiza nadie use, no se le habla a YouTube sin que el visitante lo pida, y si
   la CSP del sitio no tiene frame-src abierto, el resto de la pagina no se
   entera. */

.video-marco {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--verde-900); border: 1px solid rgba(143, 227, 189, .2);
  overflow: hidden;
}
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-fachada {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  width: 100%; padding: 24px; cursor: pointer;
  background: var(--verde-900); border: 0; color: var(--crema);
  font-family: var(--display); font-size: 15px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.video-fachada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.video-fachada .play {
  position: relative; display: grid; place-items: center;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--rojo); box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.video-fachada .play svg { width: 26px; height: 26px; margin-left: 4px; }
.video-fachada span { position: relative; }
.video-sin {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 32px; text-align: center; color: rgba(234, 246, 239, .8);
}
/* LA NOTA VA DEBAJO DEL VIDEO Y EN CHICO. Estaba arriba y del tamano de un
   subtitulo, asi que se leia como una promesa antes de ver nada; abajo y al 13
   es lo que es: un pie de foto. Correccion del 2026-09-18. */
.video-nota {
  margin: 14px 0 0; font-size: 13px; line-height: 1.5;
  color: rgba(234, 246, 239, .5);
}

/* -- Cartelera ------------------------------------------------------------ */

/* LA CARTELERA. El 2026-09-18 se pegaron las tres tarjetas sin aire entre
   ellas (gap:2px sobre un fondo amarillo translucido, simulando lineas). El
   2026-09-19 el usuario pidio volver a separarlas: pegadas se leian como una
   sola pieza partida en columnas, no como tres lugares distintos. Ahora cada
   tarjeta lleva su propio borde y el espacio entre ellas es real (gap:24px).

   EN MOBILE (@media 860px abajo) la rejilla se vuelve una fila con scroll
   horizontal, igual que la linea de tiempo de "Los 43": antes las tarjetas se
   apilaban una debajo de otra y alargaban el scroll vertical de toda la
   pagina. Decision del usuario del 2026-09-19. */
.cartelera-encabezado {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between; margin-bottom: 30px;
}
.cartelera-encabezado h2 { margin: 0; color: var(--amarillo); }
.insignia-cupo {
  padding: 8px 14px; white-space: nowrap;
  border: 1px solid rgba(224, 43, 29, .7); border-radius: 2px; color: #ff8d7d;
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.rejilla-3 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.tarjeta-sede {
  display: flex; flex-direction: column; background: var(--verde-700);
  border: 1px solid rgba(245, 214, 97, .28);
}
/* El hueco se queda AUNQUE NO HAYA IMAGEN, por decision del usuario del
   2026-09-18: las tres tarjetas conservan la misma altura y el marco dice
   donde va la foto que falta. */
.tarjeta-sede .imagen {
  width: 100%; aspect-ratio: 16 / 10; background: var(--verde-900); overflow: hidden;
}
.tarjeta-sede .imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-sede .cuerpo { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* El antetitulo es el lugar; el titular grande es la fecha o el llamado. Ese
   orden es del diseno original y no es un capricho: quien mira una cartelera
   busca CUANDO, no donde. */
.tarjeta-sede .lugar {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--menta);
}
.tarjeta-sede.invita .lugar { color: #ff8d7d; }
.tarjeta-sede h3 {
  margin: 0; font-family: var(--display); font-size: 27px; font-weight: 700;
  line-height: 1.05; text-transform: uppercase; color: var(--blanco);
}
.tarjeta-sede p { margin: 0; font-size: 15px; color: rgba(234, 246, 239, .6); }
.tarjeta-sede .pie { margin: auto 0 0; padding-top: 12px; display: flex; }
.tarjeta-sede .pie > * { flex: 1; min-height: 44px; font-size: 13px; }
.cartelera-contacto { margin: 18px 0 0; color: rgba(234, 246, 239, .5); }
.cartelera-contacto a { color: var(--menta); text-decoration: underline; text-underline-offset: 3px; }
.cartelera-contacto a:hover, .cartelera-contacto a:focus-visible { color: var(--blanco); }

/* -- El documental y la ficha --------------------------------------------- */

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 42px; }
.dos-columnas p { color: rgba(234, 246, 239, .88); }

/* SIN RECUADRO: una linea vertical y nada mas. El recuadro la convertia en una
   caja aparte, y la ficha tecnica es una nota al margen de la sinopsis, no otra
   seccion. Es la correccion del 2026-09-18. */
.ficha {
  background: transparent; border: 0;
  border-left: 2px solid rgba(143, 227, 189, .3);
  padding: 0 0 0 26px;
}
.ficha h3 {
  font-size: 12px; font-weight: 600; letter-spacing: .24em; color: var(--menta);
  margin-bottom: 16px;
}
.ficha dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.ficha dt {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(143, 227, 189, .85);
}
.ficha dl { gap: 16px; }
.ficha dd { margin: 6px 0 0; color: var(--blanco); }
/* El correo de contacto se puede tocar. Escribir una direccion y no enlazarla
   obliga a seleccionarla y copiarla a mano. */
.ficha dd a { color: var(--menta); text-decoration: underline; text-underline-offset: 3px; }
.ficha dd a:hover, .ficha dd a:focus-visible { color: var(--blanco); }

/* -- Contexto y linea de tiempo ------------------------------------------- */

/* EL +43 VA EN ROJO Y EN LA MISMA LINEA BASE QUE EL TITULO, no debajo ni al
   otro lado. Estaba en una rejilla de dos columnas que lo mandaba a un renglon
   aparte en cuanto el titulo crecia, y en menta translucida, como si fuera
   decoracion. No es decoracion: es el numero de la seccion.
   flex con align-items:baseline es lo que alinea el pie de las dos tipografias,
   que es lo que hace que se lean como una sola linea. */
.contexto-encabezado {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 24px;
  margin-bottom: 36px;
}
.contexto-encabezado h2 {
  margin: 0; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.05;
  color: var(--blanco); max-width: 16ch;
}
.marca-43 {
  font-family: var(--display); font-size: clamp(80px, 16vw, 190px); font-weight: 700;
  line-height: .8; letter-spacing: -.02em; color: var(--rojo);
}

.linea-ctrl { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 14px; }
.linea-ctrl button {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: transparent; color: var(--crema); cursor: pointer;
  border: 1px solid rgba(143, 227, 189, .35); border-radius: 2px;
}
.linea-ctrl button:hover { background: rgba(143, 227, 189, .14); border-color: var(--menta); }

/* ES UNA LINEA DE TIEMPO, Y ANTES ERA UNA FILA DE CAJAS.
   La diferencia no es de adorno: una caja con borde dice "esto es una ficha
   suelta", y diez fichas sueltas no cuentan una secuencia. El diseno original
   dibuja lo que el nombre promete: un punto por hito y una linea que los
   encadena, sin cajas, sin fondo y sin separacion visible entre uno y otro.
   Es la correccion del 2026-09-18.

   COMO SE DIBUJA. Cada hito lleva arriba un punto de 11px y, a su derecha, una
   franja de 1px que ocupa el resto del ancho. Pegados, los tramos de todos los
   hitos forman una sola linea continua, y el punto de cada uno cae sobre ella.
   El color del punto y de la fecha lo pone el dato, no el CSS: cada hito trae
   el suyo (rojo lo grave, amarillo lo que se movio, menta lo que se probo).

   scroll-snap-type: x proximity y NO mandatory. Con mandatory el navegador
   obliga a caer siempre en el borde de un hito, y arrastrar la linea se vuelve
   un forcejeo; con proximity ayuda cuando el gesto termina cerca y no estorba
   cuando no. */
.linea {
  display: flex; gap: 0; overflow-x: auto; padding-bottom: 18px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  /* LA BARRA GRIS SOBRE FONDO TRANSPARENTE, sin la pista blanca del
     scrollbar por defecto de escritorio: en mobile el sistema ya la pinta asi
     (una barra angosta y translucida, sin pista), y esto iguala el resto de
     los navegadores a eso. Correccion del usuario del 2026-09-19. */
  scrollbar-width: thin; scrollbar-color: rgba(234, 246, 239, .35) transparent;
}
.linea::-webkit-scrollbar { height: 6px; }
.linea::-webkit-scrollbar-track { background: transparent; }
.linea::-webkit-scrollbar-thumb { background: rgba(234, 246, 239, .35); border-radius: 3px; }
.linea::-webkit-scrollbar-thumb:hover { background: rgba(234, 246, 239, .55); }
.hito {
  flex: 0 0 auto; scroll-snap-align: start;
  width: clamp(230px, 26vw, 290px); padding: 0 22px 0 0;
  background: transparent; border: 0;
  /* SIN NUMERO DE LISTA. <ol> pinta "1." "2." ... por defecto, y la linea de
     tiempo ya cuenta la secuencia con el punto de color y el tramo que los
     une: el numero de encima sobraba. Correccion del usuario del 2026-09-19. */
  list-style: none;
}
/* El punto y su tramo de linea. El punto NO se encoge (flex:0 0 auto) y el
   tramo se come lo que sobra, que es lo que hace que la linea llegue hasta el
   punto del hito siguiente sin importar el ancho de la columna. */
.hito .riel { display: flex; align-items: center; }
.hito .punto {
  width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%;
  background: var(--menta);
}
.hito .tramo { flex: 1; height: 1px; background: rgba(143, 227, 189, .3); }
.hito .fecha {
  display: block; margin: 16px 0 6px;
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--menta);
}
.hito h3 {
  margin: 0 0 8px; font-family: var(--display); font-size: 20px; font-weight: 700;
  line-height: 1.15; text-transform: uppercase; color: var(--blanco);
}
.hito p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(234, 246, 239, .7); }
/* El color lo trae el dato, por clase. Rojo lo que fue un golpe, amarillo lo
   que se movio, menta lo que se probo con peritaje. */
.hito-rojo     .punto { background: var(--rojo); }
.hito-rojo     .fecha { color: var(--rojo); }
.hito-amarillo .punto { background: var(--amarillo); }
.hito-amarillo .fecha { color: var(--amarillo); }
.hito-menta    .punto { background: var(--menta); }
.hito-menta    .fecha { color: var(--menta); }

/* -- Registro ------------------------------------------------------------- */

.s-registro { background: linear-gradient(180deg, var(--amarillo) 0%, var(--amarillo-2) 100%); color: var(--verde-700); }
.s-registro > .contenedor > h2 { color: var(--verde-700); }
.s-registro .seccion-nota { color: rgba(11, 40, 35, .82); }

.formulario-registro { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 900px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo.ancho { grid-column: 1 / -1; }
.campo label {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--verde-700);
}
.campo label .opcional { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .7; }
.campo input, .campo select, .campo textarea {
  font-family: var(--cuerpo); font-size: 16px; color: var(--verde-700);
  padding: 11px 12px; background: var(--blanco);
  border: 1px solid rgba(11, 40, 35, .35); border-radius: 2px;
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 3px solid var(--verde-700); outline-offset: 1px;
}
.campo textarea { resize: vertical; min-height: 88px; }
.acepta { display: flex; align-items: flex-start; gap: 10px; grid-column: 1 / -1; }
.acepta input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 3px; }
.acepta label { font-family: var(--cuerpo); font-size: 15px; text-transform: none; letter-spacing: 0; }
/* EL FORMULARIO VIVE SOBRE AMARILLO EN DOS LUGARES, la seccion y el modal, y
   las dos reglas van juntas: con solo .s-registro, el boton del modal salia
   ROJO sobre amarillo mientras el de la seccion era verde. El formulario sale
   de la misma funcion de PHP; su estilo tambien tiene que salir del mismo
   lugar. */
/* En el amarillo del formulario el boton se invierte: verde oscuro con letra
   amarilla. Y al pasar el raton se pone ROJO, que es lo que el diseno original
   hace y lo que faltaba en produccion: es el unico rojo de esta seccion y
   marca el paso que cierra el registro. */
.s-registro .boton, .modal-caja .boton {
  grid-column: 1 / -1; justify-self: start;
  background: var(--verde-700); border-color: var(--verde-700); color: var(--blanco);
}
.s-registro .boton:hover, .modal-caja .boton:hover,
.s-registro .boton:focus-visible, .modal-caja .boton:focus-visible {
  background: var(--rojo); border-color: var(--rojo); color: var(--blanco);
}

/* EL ENLACE DEL AVISO DE PRIVACIDAD, sobre amarillo. El menta del resto de la
   pagina sobre este amarillo es practicamente ilegible: hay que leerlo para
   aceptarlo. Defecto propio, encontrado mirando la captura el 2026-09-18. */
.s-registro a, .modal-caja a {
  color: var(--verde-700); text-decoration: underline; font-weight: 600;
}
.s-registro a:hover, .modal-caja a:hover { color: var(--verde-900); }
.s-registro a:focus-visible, .modal-caja a:focus-visible {
  outline: 3px solid var(--verde-700); outline-offset: 2px;
}

/* La trampa para robots. NO se oculta con display:none: hay robots que
   detectan eso. Se saca de la pantalla y se marca para lectores y para el
   navegador, que asi no la autocompleta. */
.trampa {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

.aviso-formulario {
  grid-column: 1 / -1; padding: 12px 14px; border-radius: 2px;
  background: rgba(11, 40, 35, .1); border: 1px solid rgba(11, 40, 35, .3);
}
.aviso-formulario.malo { background: rgba(224, 43, 29, .12); border-color: var(--rojo); }

/* -- Galeria -------------------------------------------------------------- */

.mosaico {
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 88px; gap: 10px;
}
/* CADA FOTO ES UN <a> a la imagen completa, no un <button>: sin JavaScript
   sigue llevando a la foto grande. El visor lo intercepta cuando el script
   corre, y entonces el cursor de lupa dice lo que va a pasar. */
.mosaico a {
  display: block; overflow: hidden; cursor: zoom-in;
  background: var(--verde-900);
}
.mosaico a { position: relative; filter: saturate(.94); }
.mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaico a:hover, .mosaico a:focus-visible { filter: saturate(1.12); }
.mosaico a:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
/* EL OJO EN LA ESQUINA. Una foto que se puede abrir tiene que decirlo sin que
   haya que pasar el raton por encima: en un telefono no hay raton, y el cursor
   de lupa no existe. Faltaba en produccion.
   pointer-events:none para que el clic siempre le llegue al enlace de abajo y
   no se coma el toque justo en la esquina, que es donde cae el pulgar. */
.mosaico .ojo {
  position: absolute; right: 8px; bottom: 8px; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(6, 26, 23, .72); border: 1px solid rgba(143, 227, 189, .45);
}
.mosaico .ojo svg { width: 17px; height: 17px; display: block; }

/* -- El boton que sigue al lector ----------------------------------------- */

/* FALTABA EN PRODUCCION. El formulario esta al fondo de una pagina larga, y
   quien llega a la mitad y decide registrarse no tiene a mano donde hacerlo.
   Este boton va fijo abajo a la derecha y abre el mismo modal.
   No se esconde nunca mientras no haya registro: el dia del estreno es el dato
   perecedero de esta pagina y el registro es lo unico que la pagina pide. */
.flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 20px; white-space: nowrap; cursor: pointer;
  background: var(--amarillo); color: var(--verde-700); border: 0;
  border-radius: 40px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.flotante:hover { background: var(--blanco); }
.flotante:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; }
/* Sin JavaScript el modal no abre, asi que el boton no se pinta: un boton que
   no hace nada es peor que no tenerlo. Lo enciende documentales.js. */
html:not([data-js="si"]) .flotante { display: none; }

/* -- Visor ---------------------------------------------------------------- */

/* LOS CONTROLES VAN ABAJO Y JUNTOS, no repartidos por las esquinas.
   Antes: cerrar arriba a la derecha, las flechas flotando sobre los bordes
   izquierdo y derecho de la foto. Eso obliga a cruzar la pantalla para pasar
   de una foto a la siguiente y a buscar el cierre en otro sitio, y en un
   telefono las flechas caen encima de la imagen. El diseno original los pone
   en una fila bajo la foto: flecha, "8 / 20", flecha, y Cerrar en amarillo.
   Todo queda al alcance del pulgar y el numero dice donde estas.
   Es la correccion del 2026-09-18.

   COLUMNA Y NO CENTRADO ABSOLUTO: la foto y la fila son hermanas en un flex
   vertical, asi que la fila nunca se monta sobre la imagen ni depende de que
   la imagen mida lo que se esperaba. */
.visor {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; background: rgba(4, 16, 14, .94);
}
.visor img {
  max-width: min(100%, 1200px); max-height: 74vh; object-fit: contain;
  border-radius: 3px;
}
.visor .pie {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 900px; text-align: center; color: var(--crema);
}
.visor .alt { margin: 0; font-size: 15px; color: rgba(234, 246, 239, .8); }
.visor .controles { display: flex; align-items: center; gap: 14px; }
.visor .pos {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: .2em; color: var(--menta); font-variant-numeric: tabular-nums;
  min-width: 78px;
}
.visor button {
  display: grid; place-items: center;
  width: 46px; height: 46px; background: transparent;
  color: var(--crema); border: 1px solid rgba(143, 227, 189, .45);
  border-radius: 2px; cursor: pointer;
}
.visor button:hover { background: rgba(143, 227, 189, .16); border-color: var(--menta); }
.visor button:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.visor .cerrar {
  width: auto; height: 46px; padding: 0 18px;
  background: var(--amarillo); border-color: var(--amarillo); color: var(--verde-700);
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.visor .cerrar:hover { background: var(--blanco); border-color: var(--blanco); }

/* -- Modal del estreno ---------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 22px; background: rgba(3, 12, 10, .8); }
.modal-caja {
  width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
  padding: 28px; background: var(--amarillo); color: var(--verde-700);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.modal-caja h2 { font-size: clamp(22px, 4.4vw, 32px); font-weight: 700; color: var(--verde-700); margin-bottom: 10px; }
.modal-cerrar {
  float: right; width: 38px; height: 38px; margin: -6px -6px 0 0;
  background: transparent; border: 1px solid rgba(11, 40, 35, .35); cursor: pointer;
  color: var(--verde-700); font-size: 20px; line-height: 1;
}

/* -- Preguntas frecuentes, en acordeon --------------------------------------
   Movida al fondo, antes del pie, y en acordeon por decision del usuario,
   2026-09-19. <details>/<summary> es HTML nativo: se abre y cierra sin
   JavaScript. El triangulo (marker) se gira con [open], no con una clase que
   dependa de script. */

.preguntas { display: grid; gap: 12px; max-width: 760px; }
.pregunta {
  border: 1px solid rgba(143, 227, 189, .2); border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.pregunta summary {
  cursor: pointer; list-style: none; padding: 16px 20px;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  color: var(--blanco); display: flex; align-items: center; gap: 12px;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::before {
  content: '+'; flex: 0 0 auto; width: 18px; text-align: center;
  color: var(--menta); font-weight: 700;
}
.pregunta[open] summary::before { content: '−'; }
.pregunta summary:hover, .pregunta summary:focus-visible { color: var(--amarillo); }
.pregunta p { margin: 0; padding: 0 20px 18px 50px; color: rgba(234, 246, 239, .8); }

/* -- Pie ------------------------------------------------------------------ */

.pie-doc { padding: 70px 0 60px; background: var(--verde-800); border-top: 1px solid rgba(143, 227, 189, .15); }
/* CENTRADO, y con los logos en una rejilla de tres.
   Con flex-wrap los seis logos se alineaban a la izquierda y la ultima fila
   quedaba coja, con dos logos pegados a un lado y un hueco al otro. Una
   rejilla de tres columnas con justify-items:center reparte por igual y las
   dos filas quedan simetricas. Es la correccion del 2026-09-18. */
.pie-doc .presentan { text-align: center; }
.pie-doc h3 { font-size: 12px; font-weight: 600; letter-spacing: .26em; color: var(--menta); margin-bottom: 28px; }
.logos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center; justify-items: center; gap: 36px 28px;
  max-width: 660px; margin: 0 auto 40px;
}
.logos a { display: block; width: 100%; max-width: 170px; }
.logos img { width: 100%; max-width: 170px; height: auto; object-fit: contain; opacity: .9; }
.logos a:hover img, .logos a:focus-visible img { opacity: 1; }
/* El logo de Desde las Bases es blanco sobre blanco en su original: necesita
   su propio fondo para verse sobre el verde. */
.logos .con-fondo { padding: 10px; background: var(--blanco); border-radius: 3px; }

.pie-abajo { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid rgba(143, 227, 189, .15); }
.pie-doc p { color: rgba(234, 246, 239, .72); max-width: 62ch; margin: 0; }
.pie-doc p a { color: var(--menta); text-decoration: underline; text-underline-offset: 3px; }
.pie-doc p a:hover, .pie-doc p a:focus-visible { color: var(--blanco); }
.compartir { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.compartir a, .compartir button {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 42px; padding: 0 14px;
  background: transparent; color: var(--crema); cursor: pointer;
  border: 1px solid rgba(143, 227, 189, .35); border-radius: 2px;
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.compartir a { width: 42px; padding: 0; }
.compartir a:hover, .compartir button:hover { background: rgba(143, 227, 189, .14); border-color: var(--menta); }
.compartir svg { width: 17px; height: 17px; }

/* -- Pantallas chicas ----------------------------------------------------- */

@media (max-width: 860px) {
  section { padding: 60px 0; }
  .dos-columnas { grid-template-columns: 1fr; }
  /* La ficha pasa de linea izquierda a linea superior: a una columna, una raya
     vertical de 2px al lado no separa nada. */
  .ficha { border-left: 0; border-top: 2px solid rgba(143, 227, 189, .3); padding: 22px 0 0; }
  /* LA CARTELERA EN FILA, NO EN COLUMNA. Con las tres tarjetas apiladas el
     scroll vertical de la pagina entera crecia con cada sede que se agregara.
     Se desliza con el dedo, igual que la linea de tiempo. */
  .rejilla-3 {
    display: flex; overflow-x: auto; gap: 16px; padding-bottom: 6px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .tarjeta-sede { flex: 0 0 82%; scroll-snap-align: start; }
  .mosaico { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 74px; }
  /* EL MENU DE ARRIBA SE ESCONDE Y EL BOTON APARECE, pero solo con JS: sin el,
     esta regla no aplica y el menu de seis enlaces se sigue viendo envuelto,
     como hasta ahora. */
  html[data-js="si"] .barra-doc nav { display: none; }
  html[data-js="si"] .hamburguesa { display: inline-flex; }
  .barra-doc nav { width: 100%; margin-left: 0; gap: 14px; }
  .barra-doc nav a { font-size: 13px; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 84px; }
  /* Cuatro cajas de contador no caben en 320px con 14px de aire. */
  .cuenta-cajas { gap: 8px; }
  .cuenta-caja { padding: 10px 2px; }
  .visor { padding: 14px; }
  .visor .controles { gap: 8px; }
  .flotante { right: 12px; bottom: 12px; padding: 12px 16px; font-size: 12px; }
}