/* ═══════════════════════════════════════════════════════════════════════
   css/landing.css — la landing del sitio público (diseño aprobado 2026-09-05,
   maqueta `WEB/planificacion/proyectos/sitio_publico/maquetas/landing_v5.html`).

   Sólo la usa `views/catalogo.php`, vía `views/_chrome.php` (cabecera y pie
   compartidos) y `css/base.css` (tokens, botones, cabecera, pie). Acá sólo lo
   propio de la landing. Las fuentes (Archivo + Newsreader) van self-hosted
   en `css/fonts.css`, para no tocar la CSP.
   ═══════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

.seccion { padding: clamp(3.5rem, 5.5vw, 5.5rem) var(--margen); }
/* Destinos del índice lateral: el salto no queda tapado por la cabecera sticky. */
.heroe, .seccion { scroll-margin-top: var(--cab); }
/* Los copetes alinean columnas con el héroe (7fr/5fr + mismo gap): el h2 cae
   sobre hero-izq y la prosa sobre hero-der, en todas las secciones. */
.seccion-cab {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end;
  padding-bottom: 1.75rem; border-bottom: 2px solid currentColor; margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.seccion-cab h2 { font-size: clamp(2.4rem, 4.4vw, 4rem); }
.seccion-cab .prosa { color: var(--tinta-2); max-width: 52ch; }

/* ── Héroe ──────────────────────────────────────────────────────────── */
/* 2026-09-18 — «una pantalla es una pantalla»: el héroe tiene que medir
   exactamente 100vh − cabecera. El `min-height` ya lo decía, pero mentía: el
   CONTENIDO imponía un min-content mayor y lo desbordaba (medido: 666 px de
   alto en un viewport de 720 con --cab en 64 ⇒ 730 > 720; 673 en uno de 640).
   La causa es que todo escalaba sólo con el ANCHO (vw), y los portátiles con
   la barra de marcadores de Chrome son anchos y BAJOS.
   Arreglo: `--hh` es el alto realmente disponible, y cada pieza que compite
   por ese alto (padding, gaps, el h1, la nube, la leyenda) se topea con una
   fracción de `--hh` además de su tamaño por ancho. En una pantalla holgada
   manda el valor de siempre —nada cambia en 1920×930—; en una baja, el
   conjunto se achica en bloque y entra. */
.heroe {
  --hh: calc(100vh - var(--cab));
  --pad: min(clamp(2rem, 4vw, 3.5rem), calc(var(--hh) * .06));
  /* Aire al pie para la flecha `.baja`, que es absoluta y por lo tanto no
     empuja nada: sin este resguardo el h1 crece hasta debajo de ella (medido
     en 1366×640: las cajas se tocaban por 3,7 px). Vale 0 donde la flecha no
     existe (≤860). */
  --resguardo-baja: min(3rem, calc(var(--hh) * .055));
  position: relative;
  background: var(--rojo); color: var(--blanco);
  min-height: var(--hh);
  padding: var(--pad) var(--margen) calc(var(--pad) + var(--resguardo-baja));
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2rem, 5vw, 5rem);
  align-items: center;
}
/* F2 — los items del grid sin min-width:0 empujan la página (overflow-X en
   móvil); el h1 con minmax ya no alcanza porque el item impone su min-content. */
.heroe > *, .agentes-grid > * { min-width: 0; }
.heroe-izq { display: grid; gap: 1.75rem; align-content: center; }
/* D1 (2026-09-11) — el h1 vuelve a la maqueta: lo estético manda. Se conserva
   el overflow-wrap (fix F2 con overflow-X medido en 390/360, D3 lo ampara). */
/* El tope por alto (.165 · --hh) está calibrado para NO morder donde hoy
   entra: en 1920×930 da 143 px y el 7.4vw da 142, así que el título gigante
   queda igual. Muerde en las pantallas bajas (1366×640 ⇒ 95 px en vez de 101). */
.heroe h1 { font-size: clamp(3rem, min(7.4vw, calc(var(--hh) * .165)), 8rem); overflow-wrap: break-word; }
.heroe .bajada { font-size: clamp(1.15rem, 1.5vw, 1.4rem); max-width: 40ch; opacity: .95; }

.heroe-der { display: grid; grid-template-columns: minmax(0, 1fr); gap: min(1.25rem, calc(var(--hh) * .025)); align-content: center; scroll-margin-top: calc(var(--cab) + 1rem); }
/* F2 — el form (input + botón) imponía su min-content a la columna implícita
   del grid y estiraba a los hermanos a 420px en 390 (overflow-X). */
.heroe-der > * { min-width: 0; }
.buscador-caja { position: relative; display: flex; background: var(--blanco); border-radius: var(--r); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
/* Cursor falso del demo de tipeo (2026-09-15): titila al final de la palabra
   para sugerir que el campo se puede escribir. Lo ubica y apaga js/landing.js. */
.cursor-demo { position: absolute; top: 50%; width: 2px; height: 1.35rem; margin-top: -.675rem; background: var(--tinta); pointer-events: none; animation: titilar 1.06s steps(1) infinite; }
@keyframes titilar { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor-demo { animation: none; } }
.buscador-caja input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 1.05rem 1.25rem; font: 500 1.35rem/1.2 var(--f-titulo); color: var(--tinta); }
.buscador-caja input::placeholder { color: var(--tinta-3); font-weight: 400; }
.buscador-caja input:focus { outline: none; }
/* F1 — la cruz nativa del input[type=search] en gris tinta (en Edge/Chrome
   sale azul sin estilo). appearance:none + SVG propio. */
.buscador-caja input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 1.1rem; height: 1.1rem; margin-left: .5rem; cursor: pointer; opacity: .65;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='%234E5054' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.buscador-caja input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }
.buscador-caja:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
.buscador-caja .boton { margin: 6px; flex: none; }
/* 2026-09-18 — el texto del toggle va envuelto en `.raiz-txt`, un Único hijo
   del flex: si el «como…» quedara suelto al lado del nodo de texto, el
   `gap: .6rem` de `.raiz` se le aplicaría también a él (cada nodo de texto de
   un flex es un ítem anónimo) y se vería separado de «Incluir variaciones». */
.raiz-txt { display: inline; }
/* "Incluir variaciones como…" + la nube abajo como continuación de la frase.
   Mismo idioma que los filtros del buscador (misma caja, misma letra, mismo
   switch .pista): Archivo 600 .8rem, mayúsculas, espaciado .1em. */
.raiz { display: inline-flex; align-items: center; gap: .6rem; margin: .8rem 0 0; font: 600 .8rem/1 var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--blanco); cursor: pointer; white-space: nowrap; }
.raiz:hover .pista { border-color: var(--blanco); }
.raiz input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.raiz .pista { position: relative; width: 2rem; height: 1.1rem; border: 1px solid rgba(255,255,255,.7); border-radius: var(--r); flex: none; transition: background .2s ease; }
.raiz .pista::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.1rem - 6px); height: calc(1.1rem - 6px); background: rgba(255,255,255,.7); transition: transform .2s ease, background .2s ease; }
.raiz input:checked + .pista { background: var(--blanco); border-color: var(--blanco); }
.raiz input:checked + .pista::after { transform: translateX(.9rem); background: var(--rojo); }
.raiz input:focus-visible + .pista { outline: 2px solid var(--blanco); outline-offset: 2px; }

/* 2026-09-18 — la nube es, de lejos, la pieza más alta del héroe (331 px de
   los 564 de la columna derecha en 1280). Su tipografía ya no es fija: se topa
   contra el alto disponible con `--nu`, la unidad de la nube. En una pantalla
   holgada vale 1rem y las palabras miden lo de siempre (hasta 60,5 px); en una
   baja se achica en bloque —la palabra más pesada baja a ~44 px en 1366×640—
   sin sacar ninguna palabra: en ancho la nube se muestra completa (D2). */
.nube { --nu: min(1rem, calc(var(--hh) * .0195)); min-height: min(15rem, calc(var(--hh) * .34)); display: flex; flex-wrap: wrap; align-items: baseline; gap: .05em .55em; font-family: var(--f-texto); line-height: 1.05; padding-top: .5rem; }
.nube span { display: inline-block; font-size: calc(var(--nu) * 1.35 + var(--peso) * var(--nu) * 2.2); font-variation-settings: 'opsz' 72; opacity: .001; transform: translateY(.2em); animation: entrar .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 80ms); }
.nube span.sentido { font-style: italic; }
.nube .vacio { font-family: var(--f-titulo); font-size: 1rem; opacity: .8; animation: none; transform: none; }
@keyframes entrar { to { opacity: 1; transform: none; } }
/* Rótulo de la nube: sólo en móvil (ver views/catalogo.php). */
.nube-rot { display: none; font: 600 .78rem/1.2 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.leyenda { max-width: 60ch; opacity: .92; border-top: 1px solid rgba(255,255,255,.35); padding-top: min(.9rem, calc(var(--hh) * .018)); font-family: var(--f-texto); font-size: min(1.15rem, calc(var(--hh) * .028)); line-height: 1.45; }
.leyenda em { font-style: italic; }
.leyenda b { font-weight: 500; }

/* F2 — flecha al pie del héroe (ancla a la sección siguiente, #la-prensa). Posición absoluta: no suma
   alto al héroe, que debe seguir midiendo 100vh - cab en desktop. */
/* Rediseño 2026-09-13 (reemplaza el bounce de D4): caja de filete fino con
   la flecha adentro. En reposo, cada tanto la flecha sale por abajo y vuelve
   a entrar por arriba (la caja la recorta): sugiere la dirección sin mover el
   botón. Al hover/foco se rellena de blanco y se abre hacia el costado con el
   nombre de la sección siguiente. */
.baja {
  position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,.55); border-radius: var(--r);
  color: var(--blanco); text-decoration: none;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.baja-ico { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; overflow: hidden; flex: none; }
.baja-ico svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; animation: baja-cae 3.2s cubic-bezier(.6,0,.3,1) infinite; }
.baja-txt {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font: 600 .74rem/1 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase;
  transition: max-width .5s cubic-bezier(.2,.7,.2,1), opacity .3s ease, padding .5s cubic-bezier(.2,.7,.2,1);
}
.baja:hover, .baja:focus-visible { background: var(--blanco); border-color: var(--blanco); color: var(--rojo); }
.baja:hover .baja-txt, .baja:focus-visible .baja-txt { max-width: 16rem; opacity: 1; padding-right: 1.1rem; }
.baja:hover .baja-ico svg, .baja:focus-visible .baja-ico svg { animation: none; }
@keyframes baja-cae {
  0%, 55%    { transform: translateY(0);     opacity: 1; }
  72%        { transform: translateY(130%);  opacity: 0; }
  72.01%     { transform: translateY(-130%); opacity: 0; }
  88%, 100%  { transform: translateY(0);     opacity: 1; }
}

/* ── La prensa en el Plata (2026-09-13) ─────────────────────────────── */
/* Mismas columnas 7fr/5fr que el héroe y los copetes: los hitos caen bajo el
   h2 y el grabado bajo la prosa. El grabado queda fijo mientras se leen. */
.prensa-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: start; }
.prensa-grid > * { min-width: 0; }
.hitos { list-style: none; margin: 0; padding: 0; display: grid; }
.hito { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1.5rem; row-gap: .45rem; padding: 1.75rem 0; }
.hito:first-child { padding-top: 0; }
.hito + .hito { border-top: 1px solid var(--gris-2); }
.hito-fecha { grid-row: span 2; font: 700 .9rem/1.6 var(--f-titulo); letter-spacing: .06em; color: var(--rojo); font-variant-numeric: tabular-nums; }
.hito p { font-family: var(--f-texto); font-size: 1.1rem; line-height: 1.5; color: var(--tinta-2); max-width: 62ch; }
.prensa cite { font-style: italic; }
.grabado { margin: 0; position: sticky; top: calc(var(--cab) + 2rem); }
.grabado-marco { background: var(--gris); padding: clamp(1.25rem, 2.5vw, 2.25rem); }
/* multiply: el papel del grabado se funde con el gris del marco. */
.grabado img { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; mix-blend-mode: multiply; }
.grabado figcaption { display: grid; gap: .3rem; margin-top: 1rem; padding-left: 1rem; border-left: 2px solid var(--rojo); }
.grabado-tit { font-family: var(--f-texto); font-style: italic; font-size: 1.35rem; line-height: 1.2; }
.grabado-fuente { font-size: .9rem; line-height: 1.4; color: var(--tinta-2); }
.prensa-cierre {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: center;
  margin-top: clamp(2rem, 3.5vw, 3rem); padding-top: 1.75rem; border-top: 2px solid currentColor;
}
.prensa-cierre .prosa { max-width: 60ch; }
.prensa-cierre .boton { justify-self: start; line-height: 1.3; }

/* ── Rasgos ─────────────────────────────────────────────────────────────
   🔴 HUÉRFANO DESDE EL 2026-09-18: la sección «Buscá una vez, encontralo todo»
   (`#como-buscar`) quedó comentada en views/catalogo.php a pedido de Tomás, y
   con ella todo el marcado `.rasgos` / `.rasgo` / `.demo`. No se borra: si la
   sección vuelve, se descomenta este bloque tal cual (y las tres líneas
   marcadas «HUÉRFANO» en los media queries del final).
   ──────────────────────────────────────────────────────────────────────── */
/*
.rasgos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rasgo { padding-right: 1.75rem; margin-right: 1.75rem; display: grid; grid-template-rows: auto 1fr auto; gap: .9rem; align-content: start; }
.rasgo + .rasgo { border-left: 1px solid var(--gris-2); padding-left: 1.75rem; }
.rasgo p { font-family: var(--f-texto); font-size: 1.08rem; line-height: 1.45; color: var(--tinta-2); }
.demo { background: var(--gris); border-left: 3px solid var(--rojo); padding: 1rem 1.1rem 1.1rem; height: 13.5rem; display: grid; gap: .5rem; align-content: start; font: 400 1rem/1.4 var(--f-titulo); color: var(--tinta); }
.demo .entrada { font-weight: 500; font-size: 1rem; line-height: 1.35; }
.demo .entrada b { font-weight: 700; color: var(--rojo); }
.demo .grande { font-family: var(--f-texto); font-size: 2.1rem; line-height: 1.1; min-height: 1.2em; margin-top: .3rem; }
.demo .grande .cambia { display: inline-block; transition: opacity .35s ease; }
.demo .grande .cambia.salir { opacity: 0; }
.demo .fila { display: flex; justify-content: space-between; gap: 1rem; white-space: nowrap; font-size: .92rem; color: var(--tinta-2); opacity: .001; transform: translateX(-6px); }
.visto .demo .fila { animation: entrar .5s ease forwards; animation-delay: calc(var(--i) * 260ms + 300ms); }
.demo .conteo { font-size: .92rem; font-weight: 600; color: var(--rojo); opacity: .001; margin-top: .15rem; }
.visto .demo .conteo { animation: entrar .5s ease forwards; animation-delay: 1.5s; }
.demo .tecla { font-family: var(--f-texto); font-size: 1.5rem; min-height: 1.5em; margin-top: .3rem; }
.demo .tecla .caret { display: inline-block; width: 2px; height: 1em; background: var(--tinta); vertical-align: -.1em; margin-left: 1px; animation: parpadeo 1s steps(2, end) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.demo .sentido { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-family: var(--f-texto); font-style: italic; font-size: 1.3rem; line-height: 1.25; color: var(--tinta); margin-top: .3rem; }
.demo .sentido span { opacity: .001; transform: translateY(4px); }
.visto .demo .sentido span { animation: entrar .5s ease forwards; animation-delay: calc(var(--i) * 220ms + 500ms); }
*/

/* ── Visor ──────────────────────────────────────────────────────────── */
.visor { background: var(--gris); scroll-margin-top: var(--cab); }
.visor-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 2.5rem; align-items: start; }
.llamadas { display: grid; gap: 3.25rem; align-content: start; padding-top: 3.5rem; }
.llamada { display: grid; gap: .5rem; }
.llamada::before { content: ''; display: block; width: 2.5rem; height: 2px; background: var(--rojo); margin-bottom: .5rem; }
.llamada p { font-family: var(--f-texto); font-size: 1.05rem; line-height: 1.45; color: var(--tinta-2); }

.hoja {
  position: relative; margin: 0;
  background: var(--blanco); color: var(--tinta);
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3.5vw, 3rem) 2rem;
  box-shadow: 0 1px 0 var(--gris-3), 0 30px 60px -30px rgba(0,0,0,.35);
  font-family: var(--f-texto); font-variation-settings: 'opsz' 12;
}
.hoja-cintillo { text-align: center; font-family: var(--f-titulo); font-weight: 700; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
.hoja-logo { display: block; width: 100%; max-width: 640px; height: auto; margin: .5rem auto 0; }
.hoja-sub { text-align: center; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; border-top: 1px solid var(--tinta); padding-top: .35rem; margin-top: .4rem; }
.hoja-linea { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; font-style: italic; border-top: 1px solid var(--tinta); border-bottom: 2px solid var(--tinta); padding: .3rem 0; margin-top: .35rem; }
.hoja-cols { column-count: 3; column-gap: 1.4rem; column-rule: 1px solid var(--gris-2); margin-top: 1rem; font-size: .86rem; line-height: 1.4; text-align: justify; hyphens: auto; }
.hoja-cols h4 { font-family: var(--f-texto); font-weight: 700; font-size: .95rem; text-align: center; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .35rem; break-after: avoid; }
.hoja-cols p { margin: 0 0 .6rem; }
.hoja-cols .aviso-tit { font-family: var(--f-titulo); font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.diverg { background: none; color: inherit; box-shadow: inset 0 -2px 0 var(--rojo); cursor: pointer; }
.diverg-2 { box-shadow: inset 0 -2px 0 var(--rojo-3); }
.hit { background: var(--resalte); }
.hoja-pie { display: flex; justify-content: space-between; font-size: .75rem; color: var(--tinta-3); margin-top: 1rem; border-top: 1px solid var(--gris-2); padding-top: .4rem; }
.popover {
  position: absolute; width: 270px; z-index: 2;
  background: var(--blanco); border: 1px solid var(--tinta); border-radius: var(--r);
  padding: .9rem 1rem; font-family: var(--f-titulo); font-size: .85rem; line-height: 1.4;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.4);
}
.popover::before { content: ''; position: absolute; top: -6px; left: 18px; width: 10px; height: 10px; background: var(--blanco); border-left: 1px solid var(--tinta); border-top: 1px solid var(--tinta); transform: rotate(45deg); }
.popover h5 { margin: 0 0 .5rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.popover table { width: 100%; border-collapse: collapse; }
.popover td { padding: .35rem 0; border-top: 1px solid var(--gris-2); vertical-align: top; }
.popover td:last-child { text-align: right; color: var(--tinta-3); white-space: nowrap; }
.popover .lec { font-family: var(--f-texto); font-size: 1.05rem; }
.popover .lec-actual { font-weight: 700; }
.popover .en-pantalla { display: block; color: var(--rojo); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

/* ── Control (oscura) ───────────────────────────────────────────────── */
.control { background: var(--negro); color: var(--sobre-negro); scroll-margin-top: var(--cab); }
.control .seccion-cab .prosa { color: var(--sobre-negro-2); }
.flujo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paso { padding-right: 2rem; margin-right: 2rem; display: grid; gap: 1rem; align-content: start; }
.paso + .paso { border-left: 1px solid rgba(255,255,255,.2); padding-left: 2rem; }
.paso p { font-family: var(--f-texto); font-size: 1.1rem; line-height: 1.45; color: var(--sobre-negro-2); }
.lecturas { display: grid; gap: .35rem; font-family: var(--f-texto); font-size: 1.35rem; margin-top: .5rem; }
.lecturas div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem .8rem; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r); opacity: .001; transform: translateY(8px); }
.visto .lecturas div { animation: entrar .5s ease forwards; animation-delay: calc(var(--i) * 350ms + 200ms); }
.lecturas small { font-family: var(--f-titulo); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sobre-negro-2); }
.lecturas .tachada span:first-child { position: relative; color: var(--sobre-negro-2); }
.lecturas .tachada span:first-child::after { content: ''; position: absolute; left: 0; right: 0; top: 55%; height: 2px; background: var(--rojo-3); transform: scaleX(0); transform-origin: left; transition: transform .4s ease 1.6s; }
.visto .lecturas .tachada span:first-child::after { transform: none; }
.lecturas .elegida { transition: background .5s ease 1.6s, border-color .5s ease 1.6s; }
.visto .lecturas .elegida { border-color: var(--rojo-3); background: rgba(166,27,43,.3); }
.lecturas .elegida small { color: var(--sobre-negro); }
.paso .frase { font-family: var(--f-texto); font-size: 1.35rem; line-height: 1.35; margin-top: .5rem; }
.paso .frase u { text-decoration: none; background-image: linear-gradient(var(--rojo-3), var(--rojo-3)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: background-size .6s ease .6s; }
.paso .frase u.doble { background-image: linear-gradient(var(--sobre-negro-2), var(--sobre-negro-2)); transition-delay: 1.1s; }
.visto .paso .frase u { background-size: 100% 2px; }
.control-nota { margin-top: 2.5rem; font-family: var(--f-texto); font-size: 1.1rem; color: var(--sobre-negro-2); max-width: 70ch; }

/* ── Catálogo ───────────────────────────────────────────────────────── */
.catalogo-cab { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--tinta); margin-bottom: 0; }
.catalogo-cab h2 { font-size: clamp(2.4rem, 4.4vw, 4rem); }
.catalogo-wrap { overflow-x: auto; }
table.catalogo { width: 100%; border-collapse: collapse; font-size: 1.2rem; }
.catalogo th { text-align: left; padding: .9rem 1rem .6rem 0; border-bottom: 1px solid var(--gris-2); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--tinta-3); }
.catalogo td { padding: 1.25rem 1rem 1.25rem 0; border-bottom: 1px solid var(--gris-2); vertical-align: middle; }
.catalogo .num { text-align: right; font-variant-numeric: tabular-nums; width: 14rem; }
.catalogo .titulo-cell a { font-weight: 700; letter-spacing: -.01em; }
.catalogo .titulo-cell a:hover { color: var(--rojo); }
.catalogo .col-anos { width: 40%; min-width: 260px; }
.linea { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: 1.25rem; font-variant-numeric: tabular-nums; }
.linea .eje { position: relative; height: 10px; }
.linea .eje::before { content: ''; position: absolute; inset: 4px 0 auto; height: 1px; background: var(--gris-2); }
.linea .tramo { position: absolute; top: 0; height: 10px; background: var(--rojo); min-width: 6px; transform-origin: left; transform: scaleX(.05); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.visto .linea .tramo { transform: none; }
.catalogo-vacio { font-family: var(--f-texto); font-size: 1.15rem; color: var(--tinta-2); padding: 2.5rem 0; }
/* F3 — el botón "Ver todos" del catálogo (sólo existe si hay más de 5). */
.catalogo-mas { margin-top: 1.5rem; }
/* 2026-09-18 — `.boton` declara `display: inline-flex`, que le gana al
   `display: none` que la hoja del user-agent le da al atributo `hidden`: sin
   esta línea el botón se vería aun cuando el JS decide que no hay nada que
   ocultar (catálogo de 6 títulos en una pantalla ≥1600). Mismo problema que
   el de las filas de abajo. */
.catalogo-mas .boton[hidden] { display: none; }
/* 🔴 2026-09-18 — la regla de ≤640 `.catalogo tr { display: grid }` también le
   ganaba al `hidden`: el colapso del catálogo NO funcionaba en móvil (medido:
   22 filas, 22 visibles, con el botón «Ver todos» a la vista). Va acá, fuera
   del media query, para que valga en los dos modos de la tabla. */
.catalogo tr[hidden] { display: none; }

/* ── Agentes ────────────────────────────────────────────────────────── */
.agentes { background: var(--gris); }
.agentes-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start; }
.agentes-lista { display: grid; gap: 1.6rem; }
.agentes-lista .item { display: grid; gap: .4rem; padding-left: 1.25rem; border-left: 2px solid var(--rojo); }
.agentes-lista p { font-family: var(--f-texto); font-size: 1.1rem; line-height: 1.45; color: var(--tinta-2); }
.consola { background: var(--negro); color: var(--sobre-negro); border-radius: var(--r); padding: 1.5rem 1.75rem; font: 400 .95rem/1.55 'IBM Plex Mono', 'Consolas', ui-monospace, monospace; overflow-x: auto; }
.consola .cmt { color: var(--sobre-negro-2); }
.consola .k { color: var(--rojo-3); }
.consola .s { color: #E9D8A6; }
.consola pre { margin: 0; white-space: pre; }

/* ── CTA ──────────────────────────────────────────────────────────── */
.cta { background: var(--rojo); color: var(--blanco); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: center; }
.cta h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.cta .prosa { margin-top: 1.25rem; max-width: 44ch; opacity: .95; }
.cta-acciones { display: grid; gap: 1rem; justify-items: start; }
.cta-acciones .nota { font-size: .95rem; opacity: .85; max-width: 36ch; }

/* ── Índice lateral de secciones (2026-09-13) ─────────────────────────
   Cerrado: riel mudo, una raya por sección dentro de --margen (no toca la
   prosa); la de la sección actual, más larga. El scroll NUNCA lo abre —
   interrumpía la lectura—: sólo corre el riel a la sección activa.
   Abierto (hover en el borde izquierdo o foco, js/landing.js): la entrada
   centrada (data-d="0") queda en el medio de la ventana y el riel se traslada
   --i posiciones. Las alturas son fijas por estado (--ih / --ia) para que la
   traslación salga en CSS mientras la letra anima su tamaño.
   Tono: cada entrada toma el color de texto de la zona (sección o pie) que
   tiene detrás a su altura — lo calcula el JS por entrada, así una lista que
   cruza el borde entre dos secciones contrasta en las dos. La placa sólo
   desenfoca (sin tinte: con tinte manchaba la sección vecina). */
.indice {
  --ih: 2rem; --ia: 3.4rem; --i: 0;
  position: fixed; z-index: 15; left: 0; top: var(--cab); bottom: 0;
  width: clamp(1.5rem, 3.5vw, 4rem);            /* franja de hover */
  color: var(--tinta);
}
.indice-placa {
  position: absolute; left: 0; top: 50%; width: 32rem; height: 30rem; transform: translateY(-50%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent), linear-gradient(transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 45%, transparent), linear-gradient(transparent, #000 25%, #000 75%, transparent);
  mask-composite: intersect;
  opacity: 0; pointer-events: none;
}
.indice-riel {
  position: absolute; top: 50%; left: 0; margin: 0; padding: 0 0 0 clamp(1rem, 1.8vw, 1.75rem); list-style: none;
  transform: translateY(calc(-1 * (var(--i) * var(--ih) + var(--ia) / 2)));
  pointer-events: none;
}
.indice-riel li { height: var(--ih); display: flex; align-items: center; opacity: .4; }
/* Letra: la del nav de la cabecera (Archivo, ancho normal, texto natural). */
.indice-riel a { display: flex; align-items: center; gap: .8rem; white-space: nowrap; font-family: var(--f-titulo); }
.indice-raya { flex: none; width: .7rem; height: 1px; background: currentColor; }
.indice-etq { font-size: .85rem; font-weight: 500; letter-spacing: 0; line-height: 1; opacity: 0; }
.indice-riel li[data-d="0"] { height: var(--ia); opacity: 1; }
.indice-riel li[data-d="0"] .indice-raya { width: 1.6rem; height: 2px; }
.indice-riel li[data-d="0"] .indice-etq { font-size: 1.45rem; font-weight: 300; letter-spacing: -.01em; }
/* Abierto: el ojo de pez de siempre. */
.indice.abierto .indice-placa { opacity: 1; }
.indice.abierto .indice-riel { pointer-events: auto; }
.indice.abierto .indice-etq { opacity: 1; }
.indice.abierto .indice-raya { width: .9rem; height: 1px; }
.indice.abierto .indice-riel li { opacity: 0; }
.indice.abierto .indice-riel li[data-d="0"] { opacity: 1; }
.indice.abierto .indice-riel li[data-d="0"] .indice-raya { width: 2.5rem; height: 1px; }
.indice.abierto .indice-riel li[data-d="1"] { opacity: .72; }
.indice.abierto .indice-riel li[data-d="2"] { opacity: .48; }
.indice.abierto .indice-riel li[data-d="3"] { opacity: .26; }
.indice.abierto .indice-riel li[data-d="4"] { pointer-events: none; }
.indice.abierto .indice-riel li:hover { opacity: 1; }
/* Transiciones sólo después del primer pintado: recargar a mitad de página no
   debe animar el riel desde la primera sección. */
.indice.listo .indice-placa { transition: opacity .35s ease; }
.indice.listo .indice-riel { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.indice.listo .indice-riel li { transition: height .6s cubic-bezier(.2,.7,.2,1), opacity .45s ease, color .3s ease; }
.indice.listo .indice-raya { transition: width .6s cubic-bezier(.2,.7,.2,1), height .6s ease; }
.indice.listo .indice-etq { transition: font-size .6s cubic-bezier(.2,.7,.2,1), font-weight .6s ease, letter-spacing .6s ease, opacity .35s ease; }

.aparece { opacity: .001; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.aparece.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .aparece, .nube span, .demo .fila, .demo .conteo, .demo .sentido span, .lecturas div { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .baja-ico svg { animation: none !important; }
  .linea .tramo { transform: none; transition: none; }
  .caret { animation: none !important; }
  .lecturas .tachada span:first-child::after { transform: none; transition: none; }
  .paso .frase u { background-size: 100% 2px; transition: none; }
  .indice, .indice * { transition: none !important; }
}

@media (max-width: 1100px) {
  /* HUÉRFANO 2026-09-18 (sección #como-buscar comentada):
  .rasgos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .rasgo:nth-child(3) { border-left: 0; padding-left: 0; } */
  .visor-grid { grid-template-columns: 1fr; }
  .llamadas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .flujo { grid-template-columns: 1fr; row-gap: 2rem; }
  .paso + .paso { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding-top: 2rem; }
  .agentes-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .indice { display: none; }
  /* 2026-09-18 — en una columna el héroe apila el h1 SOBRE la caja de
     búsqueda: necesita del orden de 690 px de contenido, el doble que en dos
     columnas. Por eso acá el 100vh no se promete siempre, sino sólo donde
     entra (ver el bloque de abajo): en una tablet vertical (768×1024) la
     primera pantalla tiene que llenarse —antes medía 740 de 960 y la sección
     siguiente asomaba sin motivo—, pero en una ventana angosta y baja
     (641×640) forzarlo sólo desbordaría. */
  .heroe { grid-template-columns: 1fr; min-height: 0; --resguardo-baja: 0px; }
  /* La flecha «bajar a la sección siguiente» SE VA cuando el héroe pasa a una
     columna (2026-09-18). Es la misma decisión que el índice lateral, que ya
     se ocultaba en este mismo corte: las dos son ayudas de navegación que sólo
     tienen sentido en una pantalla ancha. Acá el héroe es una pila alta que se
     recorre con el dedo o con la rueda, la flecha no agrega nada, y en cambio
     costaba caro: es absoluta contra el borde inferior, así que en móvil se
     montaba 34 px sobre la leyenda (la colisión que reportó Tomás) y en tablet
     obligaba a reservarle un resguardo que no entraba. */
  .baja { display: none; }
  .seccion-cab, .cta, .prensa-grid, .prensa-cierre { grid-template-columns: 1fr; }
  .grabado { position: static; max-width: 30rem; }
  .llamadas { grid-template-columns: 1fr; }
  .popover { position: static; width: auto; margin-top: 1rem; }
  .popover::before { display: none; }
  .catalogo-cab { flex-direction: column; align-items: start; }

  /* ── Sección del visor sin la muestra de página (pedido 3) ────────────
     Tomás: «en mobile creo que podemos directamente ocultar el preview del
     periódico». Se corta en 860 y no en 640 porque el corte real es cuándo la
     hoja deja de ser legible: abajo de 860 la muestra queda en una sola
     columna de ~800 px con tres columnas de prensa de 7 px efectivos — es una
     mancha, no una página. Se oculta con display:none, el marcado sigue ahí y
     en ancho no cambia nada.
     Las seis llamadas quedan entonces en una sola lista. Dos de ellas se
     apoyaban en la imagen: «Lecturas en disputa» se retituló en la vista, y
     «La disposición del original» describe lo que se ve al ABRIR una página,
     no la muestra, así que se sostiene sola. El orden del marcado ya es el
     correcto para leerlas seguidas (1-2-3 y 4-5-6): con la hoja fuera del
     medio no hace falta reordenar nada. */
  .visor .hoja { display: none; }
  .llamadas { padding-top: 0; gap: 1.75rem; }
  /* El mismo aire entre los dos grupos de llamadas que dentro de cada uno: con
     la hoja en display:none siguen siendo dos hijos del grid, y el gap del
     grid es lo único que los separa (un `.llamadas + .llamadas` no serviría:
     el hermano inmediato sigue siendo la figure oculta). */
  .visor-grid { gap: 1.75rem; }
}
/* 2026-09-18 (corrección del mismo día) — el héroe de una columna cumple
   100vh SIEMPRE, no sólo de 800 px de alto para arriba. 641×640 no es un
   teléfono: es una ventana de escritorio angosta, y el pedido de Tomás es que
   el héroe mida una pantalla en toda resolución no-móvil. Antes ahí se rendía
   porque el contenido apilado pedía ~690 px contra 576 disponibles.
   Ahora se aprieta contra `--hh` con la misma técnica del bloque de dos
   columnas, pero más fuerte, sobre las dos piezas altas: el h1 (que apilado
   ocupa el doble de líneas) y la nube. Los coeficientes están calibrados para
   NO morder donde hoy ya entra —en 768×1024 el h1 sigue en 57 px y la nube en
   1rem, idénticos— y morder sólo en las bajas. Medido en 641×640 y 768×640. */
@media (min-width: 641px) and (max-width: 860px) {
  .heroe { min-height: var(--hh); gap: min(2.5rem, calc(var(--hh) * .045)); }
  .heroe h1 { font-size: clamp(2rem, min(7.4vw, calc(var(--hh) * .092)), 8rem); }
  .heroe-der { gap: min(1.25rem, calc(var(--hh) * .022)); }
  .nube { --nu: min(1rem, calc(var(--hh) * .0165)); min-height: min(15rem, calc(var(--hh) * .21)); }
}

@media (max-width: 640px) {
  /* ── Héroe en móvil (pedidos 2 y 5) ───────────────────────────────────
     Acá el héroe SÍ es de alto natural: forzar 100vh en un teléfono no
     ordena nada (la barra de direcciones cambia el alto al scrollear) y
     dejaría la leyenda fuera de cuadro. */
  /* 2026-09-28 (T4, sitio_busqueda_mobile_0928) — REVIERTE lo de arriba.
     Tomás: «el banner rojo tiene que llenar toda la altura de la primera
     pantalla mobile, y los elementos se acomodan para espaciarse ahí».
     Alto = viewport CHICO (`svh`: con la barra de direcciones visible), no
     `dvh`: el `dvh` cambia al scrollear y haría saltar la página; con `svh`
     la primera pantalla nunca queda cortada y al esconderse la barra asoma
     apenas la sección siguiente. Fallback `vh` para navegadores sin `svh`.
     Es `min-height`: si el contenido no entrara (texto agrandado por el
     usuario), el héroe crece en vez de solapar.
     Reparto: h1 arriba, leyenda al pie y el buscador centrado en el hueco
     que queda entre los dos (márgenes `auto` del form en la columna flex).
     La nube y la flecha `.baja` siguen ocultas (decisiones del 2026-09-21 y
     del 2026-09-18): el reparto no depende de ellas. */
  .heroe { min-height: var(--hh); grid-template-rows: auto 1fr; align-content: stretch; align-items: stretch; row-gap: min(2.5rem, calc(var(--hh) * .045)); padding-bottom: min(2rem, calc(var(--hh) * .05)); }
  @supports (height: 100svh) { .heroe { --hh: calc(100svh - var(--cab)); } }
  /* El h1 escala también por alto (antes: 3rem fijos por el clamp). Calibrado
     para que en 320×568 (512 útiles) entre todo: h1 38,4 px, delta 0; en
     390×844 manda el ancho (48,75 px) y en 430×932 llega a 53,75. */
  .heroe h1 { font-size: clamp(2.1rem, min(12.5vw, calc(var(--hh) * .075)), 3.5rem); }
  .heroe-der { display: flex; flex-direction: column; gap: min(1.25rem, calc(var(--hh) * .025)); }
  .heroe-der form { margin-block: auto; }
  /* La nube, acá, tiene que EXPLICARSE y no tapar la pantalla: rótulo visible
     y tipografía chica (la leyenda que la explicaba queda demasiado abajo).
     El tope de palabras lo pone js/landing.js, también sólo en móvil. */
  /* 2026-09-21 — Tomás: en el teléfono la nube no entra en la primera
     pantalla y confunde. Se saca, con su rótulo; la leyenda queda y explica
     sola. (El tope de palabras de js/landing.js queda latente.) */
  .nube-rot, .nube { display: none; }
  /* 2026-09-18 — el «como…» del toggle se esconde acá. En ancho la frase
     «Incluir variaciones como…» encadena con la nube que cae justo abajo;
     en móvil, con el rótulo de la nube en el medio, dejaba de encadenar y
     quedaba una frase cortada a la mitad. El toggle se lee entero solo. */
  .raiz-como { display: none; }
  /* Área táctil del toggle: 17,6 px de alto no se tocan con el pulgar. */
  .raiz { min-height: 44px; }
  .nube { --nu: .72rem; min-height: 0; padding-top: .15rem; gap: .1em .5em; }
  .leyenda { font-size: 1rem; }

  /* HUÉRFANO 2026-09-18 (sección #como-buscar comentada):
  .rasgos { grid-template-columns: 1fr; } */
  .hito { grid-template-columns: 1fr; }
  .hito-fecha { grid-row: auto; }
  /* HUÉRFANO 2026-09-18 (sección #como-buscar comentada):
  .rasgo,.rasgo + .rasgo { border-left: 0; padding-left: 0; margin-right: 0; padding-right: 0; } */
  .catalogo thead { display: none; }
  .catalogo tr { display: grid; gap: .4rem; padding: 1.1rem 0; border-bottom: 1px solid var(--gris-2); }
  .catalogo td { display: block; padding: 0; border: 0; }
  .catalogo td.num { text-align: left; width: auto; font-size: 1rem; }
  .catalogo td.num::before { content: attr(data-col) ': '; color: var(--tinta-3); }
  .catalogo td.col-anos { min-width: 0; margin-top: .25rem; }
  /* El título del periódico es el único enlace de la fila y medía 21 px de
     alto: no se acierta con el pulgar. Se le da el área táctil mínima sin
     cambiar la tipografía ni el interlineado de la tabla. */
  .catalogo .titulo-cell a { display: inline-flex; align-items: center; min-height: 44px; }
  /* F3 — en ≤640px la barra queda ilegible: se oculta conservando el rango. */
  .linea { grid-template-columns: 1fr; }
  .linea .eje { display: none; }

  /* 2026-09-18 — la consola de la API. Tiene `overflow-x: auto`, y en 360 px
     la caja mide 264 px útiles contra una línea de 52 caracteres: para que
     entrara habría que bajar la monoespaciada a 8 px. Era una tira que se
     arrastraba de costado y no se leía. Acá el ejemplo se lee en vertical:
     las líneas largas (la URL) envuelven y la sangría de JSON se conserva.
     En ancho no cambia nada: ahí entra entera y el scroll lateral no molesta. */
  .consola { padding: 1rem 1.1rem; }
  .consola pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; }

  /* La cabecera de la muestra de página ya no se ve en móvil (la .hoja está
     oculta desde 860): esta regla quedó inalcanzable, se deja marcada.
  .hoja-cols { column-count: 2; } */
}

/* 2026-09-28 (T3) — teléfono en HORIZONTAL (medido en 844×390). Pasa del
   corte de 640 y le tocaba el héroe «de pantalla completa» de escritorio: para
   entrar en 326 px útiles la leyenda se apretaba contra `--hh` hasta 9,1 px
   (ilegible) y aun así el héroe desbordaba 15 px. En una ventana tan baja la
   promesa de una pantalla no se puede cumplir leyendo: el héroe vuelve a su
   alto natural y la leyenda a un cuerpo legible. Ninguna ventana de escritorio
   real mide ≤500 px de alto; los cortes medidos del proyecto (641×600,
   1366×640…) no cambian. */
@media (min-width: 641px) and (max-height: 500px) {
  .heroe { min-height: 0; }
  .leyenda { font-size: 1rem; padding-top: .8rem; }
}