/* La presentacion publica de ebr2pdf (la raiz del dominio). Hoja propia y no `ui.css`: es una pagina
   de lectura con su tipografia editorial, y no comparte componentes con el producto.
   Diseño: docs/diseno/2026-09-30-presentacion-papel.md. Contrastes medidos (WCAG 2.x): noche sobre
   papel 15,5; pizarra sobre papel 6,3 y sobre blanco 6,8; noche sobre ambar 9,2; ambar sobre noche 9,2;
   gris claro sobre noche 9,5 y sobre la mesa 8,6. El ambar sobre papel da 1,7: nunca texto ni foco ahi.

   DOS MODOS DE PORTADA, con la primera pantalla igual en los dos (nada visible se mueve al cambiar):
   - quieta (por defecto: sin guion, sin WebGL, con movimiento reducido o sin sitio): el abanico de las
     hojas en HTML y el relato en su sitio;
   - escena (`con-escena` en <html>, lo pone presentacion.js): el relato fijado cuatro pantallas y la
     escena de papel.js detras. */

@font-face { font-family: "Archivo"; src: url("/estaticos/ui/fuentes/archivo-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/estaticos/ui/fuentes/archivo-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/estaticos/ui/fuentes/newsreader-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/estaticos/ui/fuentes/newsreader-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/estaticos/ui/fuentes/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --noche: #101E2B; --mesa: #152536; --ambar: #F2B544; --ambar-vivo: #F5C466; --papel: #F7F5EF; --blanco: #FFFFFF;
  --pizarra: #4B5D6B; --linea: #C7D0D6; --sobre-noche: #F7F5EF; --sobre-noche-2: #B9C4CD; --borde-noche: #5A6B79;
  --f-titulo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto: "Newsreader", Georgia, "Times New Roman", serif;
  --f-rotulo: "Plex Mono", ui-monospace, Menlo, monospace;
  --ancho: 1180px; --margen: 40px; --seccion: 128px;
  /* EL MOVIMIENTO: el papel que se posa. Entra despacio y se asienta sin rebote; sale rapido. */
  --curva-hoja: cubic-bezier(0.22, 0.8, 0.16, 1); --curva-sale: cubic-bezier(0.4, 0, 1, 1);
  --dur-rapida: 180ms; --dur-senal: 240ms; --dur-hoja: 900ms; --dur-renglon: 700ms; --escalon: 90ms;
  --sombra-papel: 0 1px 0 #0000001a, 0 18px 30px -12px #0000004d, 0 44px 80px -30px #00000066;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--noche); }
body { margin: 0; background: var(--papel); color: var(--noche); font: 400 21px/31px var(--f-texto); }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--noche); outline-offset: 3px; }
.oscuro :focus-visible { outline-color: var(--ambar); }
.saltar { position: fixed; left: -9999px; top: 8px; background: var(--ambar); color: var(--noche); padding: 10px 16px; font: 600 16px/1 var(--f-titulo); border-radius: 6px; z-index: 10; }
.saltar:focus { left: 16px; }
.dentro { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.rotulo { font: 500 13px/18px var(--f-rotulo); letter-spacing: .02em; margin: 0 0 14px; }
h1, h2, h3 { font-family: var(--f-titulo); margin: 0; }
h2 { font-weight: 600; font-size: 48px; line-height: 50px; letter-spacing: -.02em; text-wrap: balance; }
h3 { font-weight: 600; font-size: 22px; line-height: 28px; letter-spacing: -.01em; }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 6px;
  font: 600 16px/20px var(--f-titulo); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; text-align: center;
  transition: background-color var(--dur-rapida) var(--curva-hoja), border-color var(--dur-rapida) var(--curva-hoja), transform 400ms var(--curva-hoja); }
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(1px); }
.boton.principal { background: var(--ambar); color: var(--noche); }
.boton.principal:hover { background: var(--ambar-vivo); }
.boton.claro { border-color: var(--borde-noche); color: var(--sobre-noche); }
.boton.claro:hover { border-color: var(--sobre-noche-2); }
.enlace { font: 600 16px/24px var(--f-titulo); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-rapida) var(--curva-hoja); }
.enlace:hover { text-decoration-thickness: 2px; }

/* Barra */
.oscuro { background: var(--noche); color: var(--sobre-noche); }
.barra { position: relative; z-index: 5; }
.barra .dentro { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.barra img { height: 22px; width: auto; display: block; }
.barra .producto { font: 600 15px/1 var(--f-titulo); color: var(--sobre-noche-2); border-left: 1px solid var(--borde-noche); padding-left: 16px; }
.barra nav { margin-left: auto; display: flex; gap: 24px; align-items: center; }
.barra nav a.texto { font: 600 15px/1 var(--f-titulo); color: var(--sobre-noche-2); text-decoration: none; padding: 14px 0; }
.barra nav a.texto:hover { color: var(--sobre-noche); }

/* LA PORTADA, QUIETA: texto a la izquierda y el abanico de hojas a la derecha; el resto del relato,
   debajo, en renglones. La primera pantalla mide lo mismo que en escena. */
.heroe { position: relative; }
.escenario { position: relative; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.lienzo-3d, .guia, .progreso { display: none; }
.relatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; padding-bottom: 72px; }
.bloque .rotulo, .heroe .rotulo { color: var(--ambar); }
.bloque:first-child { grid-column: 1 / -1; min-height: calc(100svh - 68px); display: flex; flex-direction: column; justify-content: center; max-width: 560px; padding: 40px 0; }
.bloque:not(:first-child) { border-top: 2px solid var(--ambar); padding-top: 24px; }
.bloque:not(:first-child) h2 { font-size: 26px; line-height: 31px; }
.bloque:not(:first-child) p:not(.rotulo) { color: var(--sobre-noche-2); margin: 12px 0 0; font-size: 18px; line-height: 27px; }
.heroe h1 { font-weight: 700; font-size: 76px; line-height: 72px; letter-spacing: -.025em; text-wrap: balance; }
.heroe .entrada { color: var(--sobre-noche-2); margin: 24px 0 32px; max-width: 30em; }
.heroe .acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.bloque.final .leyenda { margin-top: 16px; }

/* El abanico: las siete hojas del cuaderno de ejemplo, a la derecha de la primera pantalla. */
.abanico { position: absolute; top: 0; right: var(--margen); width: min(46%, 560px); height: calc(100svh - 68px); pointer-events: none; }
.abanico img { position: absolute; top: 50%; left: 50%; width: 46%; height: auto; background: var(--blanco); box-shadow: var(--sombra-papel);
  transform: translate(-50%, -50%) translateX(calc(var(--i) * 17%)) rotate(calc(var(--i) * 4deg)) translateY(calc(var(--i) * var(--i) * 1.2%)); }
.abanico img:nth-child(1) { --i: -3; } .abanico img:nth-child(2) { --i: -2; } .abanico img:nth-child(3) { --i: -1; } .abanico img:nth-child(4) { --i: 0; }
.abanico img:nth-child(5) { --i: 1; } .abanico img:nth-child(6) { --i: 2; } .abanico img:nth-child(7) { --i: 3; }
.abanico img:nth-child(2) { z-index: 8; }

/* ENTRE MOVIL Y PORTATIL (hasta 1199 px; entre 1100 y 1140 la hoja de la izquierda aun tocaba el titular), QUIETA: no caben texto y abanico lado a lado sin que las hojas pisen el titular,
   asi que el abanico va debajo del relato, medido por su alto. */
@media (min-width: 761px) and (max-width: 1199px) {
  html:not(.con-escena) .escenario { display: flex; flex-direction: column; }
  html:not(.con-escena) .abanico { order: 2; position: relative; right: auto; width: 100%; height: 360px; margin: 0 0 64px; }
  html:not(.con-escena) .abanico { overflow: hidden; }
  html:not(.con-escena) .abanico img { width: auto; height: 86%; }
}

/* MIENTRAS EL GUION DECIDE: donde puede ir la escena, el abanico espera oculto (sin moverse de sitio) en vez
   de pintarse y cambiar a la guia un instante despues en una red lenta. Si el guion decide quieta, pone
   `sin-escena`; sin guion (`scripting: none`) esta regla no aplica y el abanico sale. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 360px) and (min-height: 600px) {
  html:not(.sin-escena):not(.con-escena) .abanico { visibility: hidden; }
}

/* El detalle anotado: la operacion a tamaño de lectura, con sus tres señales. */
.cuaderno { margin: 0 0 72px; max-width: 520px; }
.cuaderno .detalle { position: relative; background: var(--blanco); padding: 14px; border-radius: 6px; box-shadow: var(--sombra-papel); outline: 3px solid var(--ambar); outline-offset: -3px; }
.cuaderno .detalle img { display: block; width: 100%; height: auto; }
.cuaderno figcaption { margin-top: 16px; }
.cuaderno .enlace { color: var(--sobre-noche); }

/* LA PORTADA EN ESCENA: el escenario fijado cuatro pantallas; el lienzo detras, la guia en HTML mientras
   llega la escena, y los bloques del relato uno a uno. */
.con-escena .heroe { height: 420svh; }
.con-escena .escenario { position: sticky; top: 0; height: 100svh; max-width: none; padding: 0; overflow: hidden; }
.con-escena .lienzo-3d { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.con-escena .abanico { display: none; }
/* La guia: cada fila es el recorte del titulo en su hoja, de 12 px de alto (una fila larga encoge entera, sin
   puntos suspensivos). `.filtros` solo lleva el filtro que pone la tinta en ambar. */
.filtros { position: absolute; width: 0; height: 0; }
.con-escena .guia { display: block; position: absolute; top: 20%; left: 54%; right: 6%; margin: 0; padding: 0; list-style: none; }
.con-escena .guia li { padding: 5px 0 6px; border-bottom: 1px solid #F2B54473; }
.con-escena .guia svg { display: block; height: 12px; width: auto; max-width: 100%; }
.con-escena .guia li[data-nivel="1"] { padding-left: 24px; } .con-escena .guia li[data-nivel="2"] { padding-left: 48px; }
/* EL RELEVO ES SECO: la escena pinta sus filas encima de las HTML en su primer cuadro y las HTML se van en
   ese mismo cuadro. Un fundido dejaba 600 ms dos letras distintas una sobre otra. */
.escena-lista .lienzo-3d { opacity: 1; }
.escena-lista .guia { opacity: 0; }
.con-escena .relatos { position: absolute; left: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen))); top: 0; bottom: 68px; width: min(600px, 48vw); display: block; padding: 0; z-index: 2; }
.con-escena .bloque { position: absolute; top: 50%; left: 0; right: 0; opacity: 0; visibility: hidden; transform: translateY(calc(-50% - 16px)); border: 0; padding: 0; min-height: 0; max-width: none;
  transition: opacity 200ms var(--curva-sale), transform 250ms var(--curva-sale), visibility 0s 250ms; }
.con-escena .bloque { text-shadow: 0 2px 18px #101E2Bb3, 0 0 2px #101E2B80; }
.con-escena .bloque.activo { opacity: 1; visibility: visible; transform: translateY(-50%);
  transition: opacity 600ms var(--curva-hoja) 220ms, transform 800ms var(--curva-hoja) 220ms, visibility 0s; }
.con-escena .bloque:not(:first-child) h2 { font-size: 48px; line-height: 50px; }
.con-escena .bloque:not(:first-child) p:not(.rotulo) { font-size: 21px; line-height: 31px; margin-top: 20px; }
.con-escena .cuaderno { position: absolute; right: 7vw; bottom: 12svh; width: min(460px, 34vw); margin: 0; z-index: 3; opacity: 0; visibility: hidden;
  transform: translateY(40px) scale(.9) rotate(-1.5deg); transition: opacity 500ms var(--curva-sale), transform 500ms var(--curva-sale), visibility 0s 500ms; }
.con-escena .cuaderno.visible { opacity: 1; visibility: visible; transform: none; transition: opacity 800ms var(--curva-hoja), transform 1100ms var(--curva-hoja), visibility 0s; }
.con-escena .cuaderno .anotacion { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity 400ms, transform 600ms var(--curva-hoja); }
.con-escena .cuaderno.visible .anotacion { opacity: 1; transform: none; }
.con-escena .cuaderno.visible .anotacion:nth-child(1) { transition-delay: 350ms; } .con-escena .cuaderno.visible .anotacion:nth-child(2) { transition-delay: 550ms; } .con-escena .cuaderno.visible .anotacion:nth-child(3) { transition-delay: 750ms; }
.con-escena .progreso { display: flex; position: absolute; right: 48px; bottom: 36px; z-index: 3; gap: 14px; align-items: center; font: 500 13px/1 var(--f-rotulo); color: var(--sobre-noche-2); }
.con-escena .progreso i { display: block; width: 120px; height: 2px; background: #2a3b4c; position: relative; overflow: hidden; }
.con-escena .progreso i::after { content: ""; position: absolute; inset: 0; background: var(--ambar); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* Las anotaciones: cajas del generador sobre el recorte. Un trazo noche y un fondo ambar translucido,
   para que no dependan solo del ambar (1,7 sobre papel). */
.detalle, .hoja { position: relative; }
.anotaciones { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); overflow: visible; pointer-events: none; }
.anotacion rect { fill: rgba(242, 181, 68, .22); stroke: var(--noche); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.anotacion circle { fill: var(--noche); }
.anotacion text { fill: var(--sobre-noche); font: 600 30px var(--f-titulo); text-anchor: middle; }
.leyenda { list-style: none; counter-reset: anotacion; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font: 500 13px/18px var(--f-rotulo); color: var(--sobre-noche-2); }
.leyenda li { counter-increment: anotacion; display: flex; align-items: center; gap: 8px; }
.leyenda li::before { content: counter(anotacion); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ambar); color: var(--noche); font: 600 11px/1 var(--f-titulo); }

/* Secciones: la misma materia que la escena (diseño 2026-09-30-presentacion-secciones.md). Papel con grano y
   sombra de contacto sobre la mesa; trayectos con punta. Ninguna rejilla de tarjetas iguales. */
.seccion { padding: var(--seccion) 0; }
.seccion.blanca { background: var(--blanco); }
.seccion.mesa { background: radial-gradient(120% 90% at 30% 0%, #1f3346 0%, var(--mesa) 55%, #0f1c29 100%); color: var(--sobre-noche); }
.cabeza { max-width: 42em; margin-bottom: 40px; }
.cabeza p { color: var(--pizarra); margin: 16px 0 0; }
.mesa .cabeza p, .mesa .aclaracion { color: var(--sobre-noche-2); }
.mesa :focus-visible { outline-color: var(--ambar); }
.materia { position: absolute; width: 0; height: 0; }
.grano { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; opacity: .16; border-radius: inherit; }

/* ASI SALE EL CUADERNO: dos tiras de papel en la mesa, un poco giradas, con luz de lampara (arriba a la
   izquierda) y sombra de contacto. La lupa (con guion) sigue al cursor, al dedo o a las flechas. */
.comparar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; margin-top: 56px; }
.comparar figure { margin: 0; }
.tira .hoja { position: relative; background: linear-gradient(160deg, #fffefb 0%, #f6f3ea 70%, #efeadf 100%); border-radius: 2px; padding: 34px 30px 40px;
  box-shadow: 0 1px 1px #00000040, 0 14px 22px -10px #00000080, 0 40px 70px -30px #000000a6; transform: rotate(var(--giro, 0deg)); transition: transform 700ms var(--curva-hoja), box-shadow 700ms var(--curva-hoja); }
/* Por tipo y no por posicion: el rotulo de la comparacion va detras de las dos figuras, y `:last-child` ya
   no casaba con la segunda tira (adversarial del PR 520). */
.tira:nth-of-type(1) { --giro: -1.4deg; } .tira:nth-of-type(2) { --giro: 1deg; margin-top: 36px; }
.tira .hoja::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, #ffffff66 0%, transparent 35%, transparent 70%, #00000014 100%); }
.tira .lienzo { position: relative; }
.tira .lienzo .anotaciones { inset: 0; width: 100%; height: 100%; }
.tira img { display: block; width: 100%; height: auto; }
/* Al pasar solo cambia la sombra: si la hoja se movia, el papel se escapaba de un cursor quieto y la lupa se
   apagaba en el borde (adversarial del PR 520). */
.tira:hover .hoja, .tira:focus-within .hoja { box-shadow: 0 1px 1px #00000040, 0 24px 32px -12px #00000080, 0 60px 90px -30px #000000b3; }
.comparar figcaption { margin-top: 20px; font-size: 17px; line-height: 24px; color: var(--sobre-noche-2); }
.comparar figcaption b { display: block; font: 600 15px/22px var(--f-titulo); color: var(--sobre-noche); }
.aclaracion { max-width: 42em; margin: 32px 0 0; font-size: 16px; line-height: 24px; color: var(--pizarra); }
.rotulo-comparar { grid-column: 1 / -1; max-width: 42em; margin: 8px 0 0; padding: 16px 20px; border-left: 4px solid var(--ambar); background: #0c1722cc; color: var(--sobre-noche); font: 600 17px/25px var(--f-titulo); }
.pie-seccion { margin: 32px 0 0; }
.mesa .enlace { color: var(--sobre-noche); }
.uso-lupa { margin: 28px 0 0; font: 500 13px/18px var(--f-rotulo); color: var(--sobre-noche-2); }
.uso-lupa .con-dedo { display: none; }
@media (hover: none) { .uso-lupa .con-raton { display: none; } .uso-lupa .con-dedo { display: inline; } }
/* La lupa: un disco con el mismo recorte a 2,4 aumentos, borde de cristal y sombra. */
.lupa { position: absolute; left: 0; top: 0; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 3;
  background: #fffefb; box-shadow: 0 0 0 3px #f7f5ef, 0 0 0 5px #10202d, 0 18px 40px -10px #000000b3, inset 0 0 18px #0000002e;
  opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity 180ms var(--curva-hoja), transform 260ms var(--curva-hoja); }
.lupa img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.tira.con-lupa .lienzo { cursor: zoom-in; }
.tira.lupa-activa .lupa { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tira[tabindex]:focus-visible { outline: 3px solid var(--ambar); outline-offset: 8px; border-radius: 4px; }

/* QUE OBTIENES: el cuaderno de ejemplo abierto (sus tres primeras paginas reales, en abanico sobre la
   mesa blanca) domina; lo que promete va al lado, en texto, y «Dentro de tu red» como condicion aparte. */
.entregables { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: center; }
/* Las paginas se miden por el alto de su caja y no por el ancho: a 756 x 491, al 46 % del ancho, una hoja
   A4 medía 466 px y pisaba el titulo de la seccion. */
.cuaderno-abierto { position: relative; height: 460px; }
.cuaderno-abierto img { position: absolute; top: 50%; left: 50%; width: auto; height: 78%; background: var(--blanco);
  box-shadow: 0 1px 1px #10202d33, 0 20px 34px -16px #10202d80, 0 50px 80px -40px #10202d66; transform: translate(-50%, -50%) translateX(var(--x)) rotate(var(--g)); }
/* Enteras dentro de su columna, sin recorte: el abanico abre un 40 % de la pagina a cada lado (con 58 % y
   `overflow-x: clip`, las laterales salian cortadas a cuchillo, adversarial del PR 520). */
.cuaderno-abierto img:nth-child(1) { --x: -40%; --g: -5deg; } .cuaderno-abierto img:nth-child(2) { --x: 0%; --g: 0deg; z-index: 2; } .cuaderno-abierto img:nth-child(3) { --x: 40%; --g: 4deg; }
/* Por debajo de 1200 px, el cuaderno abierto encima y las promesas debajo: lado a lado, las paginas se salian
   de su columna y pisaban el texto. */
@media (max-width: 1199px) { .entregables { grid-template-columns: minmax(0, 1fr); gap: 32px; } .cuaderno-abierto { height: 380px; } }
.promesa { padding: 0 0 26px; }
.promesa + .promesa { padding-top: 24px; border-top: 1px solid var(--linea); }
.promesa p { margin: 10px 0 0; color: var(--pizarra); font-size: 19px; line-height: 28px; }
.promesa.condicion { margin-top: 8px; padding: 22px 24px; border: 0; border-left: 4px solid var(--noche); background: var(--papel); }

/* GMP: un expediente principal con el indice real del paquete y dos folios auxiliares. */
.expediente { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.auxiliares { display: grid; gap: 32px; }
.folio { position: relative; margin: 0; padding: 32px 32px 34px; background: linear-gradient(170deg, #f7f5ef 0%, #ece7da 100%); color: var(--noche); border-radius: 2px;
  box-shadow: 0 1px 1px #00000040, 0 18px 30px -12px #000000a6; transform: rotate(var(--g, 0deg)); }
.folio.principal { --g: -.6deg; padding: 40px 40px 44px; }
.auxiliares .folio:nth-child(1) { --g: .7deg; } .auxiliares .folio:nth-child(2) { --g: -.3deg; }
.folio h3 { color: var(--noche); }
.folio.principal h3 { font-size: 28px; line-height: 32px; }
.folio p { margin: 12px 0 0; color: #33424e; font-size: 18px; line-height: 27px; }
.indice-paquete { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: doc; border-top: 2px solid var(--noche); }
.indice-paquete li { counter-increment: doc; display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid #10202d26; font: 500 15px/21px var(--f-titulo); color: var(--noche); }
.indice-paquete li::before { content: counter(doc, decimal-leading-zero); font: 500 13px/21px var(--f-rotulo); color: var(--pizarra); }
/* Cada celda, al menos del ancho de su palabra, y si no caben las cinco pasan a otra fila: con `overflow-wrap:
   anywhere`, «Versión» se partía a 1024 px. */
.asiento { display: flex; flex-wrap: wrap; margin-top: 22px; border: 1px solid #10202d40; }
.asiento span { flex: 1 0 auto; padding: 8px 6px 22px; font: 500 11px/15px var(--f-rotulo); border-bottom: 1px solid #10202d26; margin-bottom: -1px; color: var(--pizarra); border-left: 1px solid #10202d26; }
.asiento span:first-child { border-left: 0; }

/* COMO FUNCIONA: la exportacion entra, ebr2pdf la transforma y el cuaderno sale. Tres etapas con su objeto
   (los .cab, la prensa, la pagina) y dos trayectos con peso, curva y punta; al entrar, el trazo se dibuja y
   una hoja lo recorre. */
/* Los trayectos van de un punto a otro: de los .cab a la ranura de entrada y de la ranura de salida a la pagina. */
.recorrido { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr) 150px minmax(0, 1fr); gap: 0 12px; align-items: start; }
.etapa { position: relative; }
.etapa .rotulo { color: var(--pizarra); margin-top: 22px; }
.etapa p:not(.rotulo) { margin: 10px 0 0; font-size: 18px; line-height: 27px; color: var(--pizarra); }
.etapa .fichero { font: 500 15px/22px var(--f-rotulo); color: var(--noche); }
.ficheros { position: relative; height: 150px; }
.fichero-cab { position: absolute; width: 118px; height: 146px; padding: 92px 10px 0; font: 500 13px/1.2 var(--f-rotulo); color: var(--noche);
  background: linear-gradient(135deg, #fff 0%, #f1efe9 100%); border: 1px solid #10202d26; border-radius: 3px; box-shadow: 0 12px 22px -12px #10202d73;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.fichero-cab::before { content: ""; position: absolute; right: 0; top: 0; width: 26px; height: 26px; background: linear-gradient(225deg, transparent 50%, #d9d4c7 50%); }
.fichero-cab::after { content: ".cab"; position: absolute; left: 10px; top: 16px; padding: 4px 8px; font: 700 12px var(--f-titulo); color: var(--noche); background: var(--ambar); border-radius: 3px; }
.fichero-cab:first-child { left: 0; top: 4px; transform: rotate(-4deg); } .fichero-cab:last-child { left: 132px; top: 0; transform: rotate(3deg); }
.motor { padding: 28px 26px 30px; background: var(--noche); color: var(--sobre-noche); border-radius: 10px; box-shadow: 0 22px 40px -18px #10202d; }
.motor .rotulo { color: var(--ambar); margin-top: 18px; }
.motor h3 { color: var(--sobre-noche); }
.motor p:not(.rotulo) { color: var(--sobre-noche-2); }
.prensa { position: relative; height: 34px; }
.prensa .ranura { position: absolute; top: 0; width: 42%; height: 12px; border-radius: 6px; background: #07111a; box-shadow: inset 0 3px 6px #000000b3, 0 1px 0 #ffffff1f; }
.prensa .entrada-ranura { left: 0; } .prensa .salida-ranura { right: 0; top: 18px; background: linear-gradient(90deg, #07111a 0%, #07111a 70%, var(--ambar) 70%); }
/* Los cuadernos que salen: la pagina y, detras, otras dos del mismo tamaño (uno por guia). */
.salida { position: relative; max-width: 250px; isolation: isolate; }
.salida::before, .salida::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #f3f1ea; border-radius: 2px; box-shadow: 0 10px 20px -12px #10202d66; transform: translate(10px, 8px) rotate(3deg); }
.salida::after { background: #faf8f2; transform: translate(5px, 4px) rotate(-2deg); }
.trayecto .origen { fill: var(--noche); }
.sale .miniatura { width: 100%; max-width: 250px; background: var(--blanco); border-radius: 2px; padding: 6px; box-shadow: 0 1px 1px #10202d33, 0 18px 30px -14px #10202d80; transform: rotate(-1.5deg); }
.sale .miniatura .lienzo { position: relative; }
.sale .miniatura img { display: block; width: 100%; height: auto; }
.sale .marca { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sale .marca rect { fill: none; stroke: var(--ambar); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.trayecto { width: 150px; height: 125px; overflow: visible; color: var(--noche); position: relative; z-index: 2; }
.trayecto .traza { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.trayecto .viajero { fill: var(--blanco); stroke: var(--noche); stroke-width: 1.5; opacity: 0; }

.cierre { overflow: hidden; }
.cierre .dentro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-top: 104px; padding-bottom: 104px; }
.cierre .pila { position: relative; grid-column: 2; grid-row: 1; height: 460px; }
.cierre .pila img { position: absolute; left: 50%; top: 50%; width: 300px; height: auto; background: var(--blanco); box-shadow: var(--sombra-papel); transform: translate(-50%, -50%) rotate(var(--g)); transition: transform var(--dur-hoja) var(--curva-hoja); }
.cierre .pila img:nth-child(1) { --g: 8deg; } .cierre .pila img:nth-child(2) { --g: -5deg; } .cierre .pila img:nth-child(3) { --g: 3deg; } .cierre .pila img:nth-child(4) { --g: -1deg; }
.cierre .llamada { grid-column: 1; grid-row: 1; }
.cierre p { color: var(--sobre-noche-2); margin: 16px 0 0; }
.cierre .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.acciones-cierre { margin-top: 36px; }
.boton.grande { min-height: 58px; padding: 0 30px; font-size: 18px; }
.otra-accion { margin: 22px 0 0; font-size: 17px; line-height: 25px; color: var(--sobre-noche-2); }
.otra-accion .enlace { color: var(--sobre-noche); margin-right: 4px; }
.cierre form { display: grid; gap: 10px; margin-top: 32px; }
.cierre label { font: 600 15px/20px var(--f-titulo); }
.cierre .fila { display: flex; gap: 12px; flex-wrap: wrap; }
.cierre input[type=email] { flex: 1 1 240px; min-height: 52px; border-radius: 6px; border: 1.5px solid var(--blanco); background: var(--blanco); color: var(--noche); padding: 0 16px; font: 600 18px/1 var(--f-titulo); }
.cierre .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cierre .legal { font-size: 15px; line-height: 22px; margin: 6px 0 0; }
.pie { border-top: 1px solid var(--borde-noche); }
.pie .dentro { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; padding-top: 20px; padding-bottom: 28px; font: 500 13px/18px var(--f-rotulo); color: var(--sobre-noche-2); }
.pie a { color: var(--sobre-noche-2); padding: 12px 0; }

/* LA ENTRADA DE LAS SECCIONES, una vez, con guion y sin movimiento reducido (`con-revelado`): el papel cae y
   se posa, el cuaderno se abre en abanico, el expediente se ordena, los trayectos se dibujan y una hoja los
   recorre una vez, y la pila del cierre se apila. Sin guion o con movimiento reducido, todo esta en su sitio. */
.con-revelado [data-revela] .tira .hoja { opacity: 0; transform: translateY(-40px) rotate(calc(var(--giro) * 3)); }
.con-revelado [data-revela].vista .tira .hoja { opacity: 1; transform: rotate(var(--giro)); transition: opacity 500ms var(--curva-hoja), transform var(--dur-hoja) var(--curva-hoja); }
.con-revelado [data-revela].vista .tira + .tira .hoja { transition-delay: 160ms; }
.con-revelado [data-revela] .cuaderno-abierto img { opacity: 0; transform: translate(-50%, -50%) translateX(0) rotate(0deg) translateY(-30px); }
.con-revelado [data-revela].vista .cuaderno-abierto img { opacity: 1; transform: translate(-50%, -50%) translateX(var(--x)) rotate(var(--g)); transition: opacity 400ms var(--curva-hoja), transform var(--dur-hoja) var(--curva-hoja); }
.con-revelado [data-revela].vista .cuaderno-abierto img:nth-child(2) { transition-delay: 90ms; } .con-revelado [data-revela].vista .cuaderno-abierto img:nth-child(3) { transition-delay: 180ms; }
.con-revelado [data-revela] .folio { opacity: 0; transform: translateY(24px) rotate(var(--g)); }
.con-revelado [data-revela].vista .folio { opacity: 1; transform: rotate(var(--g)); transition: opacity 500ms var(--curva-hoja), transform 800ms var(--curva-hoja); }
.con-revelado [data-revela].vista .auxiliares .folio:nth-child(1) { transition-delay: 150ms; } .con-revelado [data-revela].vista .auxiliares .folio:nth-child(2) { transition-delay: 300ms; }
.con-revelado [data-revela] .indice-paquete li { opacity: 0; }
.con-revelado [data-revela].vista .indice-paquete li { opacity: 1; transition: opacity 300ms var(--curva-hoja) calc(500ms + var(--n, 0) * 60ms); }
.indice-paquete li:nth-child(2) { --n: 1; } .indice-paquete li:nth-child(3) { --n: 2; } .indice-paquete li:nth-child(4) { --n: 3; } .indice-paquete li:nth-child(5) { --n: 4; } .indice-paquete li:nth-child(6) { --n: 5; } .indice-paquete li:nth-child(7) { --n: 6; } .indice-paquete li:nth-child(8) { --n: 7; }
.con-revelado [data-revela] .etapa { opacity: 0; transform: translateY(16px); }
.con-revelado [data-revela].vista .etapa { opacity: 1; transform: none; transition: opacity 500ms var(--curva-hoja), transform 700ms var(--curva-hoja); }
.con-revelado [data-revela].vista .etapa:nth-child(3) { transition-delay: 700ms; } .con-revelado [data-revela].vista .etapa:nth-child(5) { transition-delay: 1400ms; }
.con-revelado [data-revela] .traza { stroke-dasharray: 1; stroke-dashoffset: 1; }
.con-revelado [data-revela].vista .traza { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--curva-hoja) 350ms; }
.con-revelado [data-revela].vista .trayecto:nth-child(4) .traza { transition-delay: 1050ms; }
.con-revelado [data-revela] .trayecto .traza { marker-end: none; }
.con-revelado [data-revela].vista .trayecto .traza { marker-end: url(#punta); }
.trayecto .viajero { offset-path: path("M4 60 C 50 60, 88 27, 123 27"); offset-rotate: auto; }
.trayecto:nth-child(4) .viajero { offset-path: path("M-26 42 C 30 42, 80 50, 128 50"); }
.con-revelado [data-revela].vista .viajero { animation: viaje 1.4s var(--curva-hoja) 700ms both; }
.con-revelado [data-revela].vista .trayecto:nth-child(4) .viajero { animation-delay: 1400ms; }
@keyframes viaje { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { offset-distance: 88%; opacity: 0; } }
.con-revelado [data-revela] .sale .miniatura { opacity: 0; transform: translateY(-24px) rotate(-6deg); }
.con-revelado [data-revela].vista .sale .miniatura { opacity: 1; transform: rotate(-1.5deg); transition: opacity 400ms 1500ms, transform var(--dur-hoja) var(--curva-hoja) 1500ms; }
.con-revelado [data-revela] .pila img { opacity: 0; transform: translate(-50%, calc(-50% - 60px)) rotate(0); }
.con-revelado [data-revela].vista .pila img { opacity: 1; transform: translate(-50%, -50%) rotate(var(--g)); transition: opacity 400ms var(--curva-hoja), transform var(--dur-hoja) var(--curva-hoja); }
.con-revelado [data-revela].vista .pila img:nth-child(2) { transition-delay: 140ms; } .con-revelado [data-revela].vista .pila img:nth-child(3) { transition-delay: 280ms; } .con-revelado [data-revela].vista .pila img:nth-child(4) { transition-delay: 420ms; }
/* La comparacion enciende sus recuadros cuando las tiras ya estan posadas. */
/* En el papel de la comparacion, las señales son de rotulador: fondo ambar sin trazo, para enmarcar sin
   cortar la letra de al lado («0 (mg)», «fecha»). */
.comparar .anotacion rect { fill: #F2B54470; stroke: none; mix-blend-mode: multiply; }
.con-senales .comparar .anotacion { opacity: 0; transition: opacity var(--dur-senal) var(--curva-hoja); }
.con-senales .vista .comparar .anotacion { opacity: 1; transition-delay: 700ms; }

/* EN UNA PANTALLA BAJA, el titular de la escena baja un punto para que la primera pantalla quepa entera
   (a 1024 x 760 el boton acababa 43 px por debajo). */
@media (min-width: 761px) and (max-height: 840px) {
  .con-escena .heroe h1 { font-size: 60px; line-height: 58px; letter-spacing: -.02em; }
  .con-escena .heroe .entrada { margin: 18px 0 24px; }
}

@media (max-width: 760px) {
  :root { --margen: 20px; --seccion: 72px; }
  body { font-size: 18px; line-height: 27px; }
  h2 { font-size: 30px; line-height: 33px; }
  h3 { font-size: 20px; line-height: 26px; }
  .barra nav a.texto, .barra .producto { display: none; }
  .heroe h1 { font-size: 40px; line-height: 42px; }
  .heroe .entrada { margin: 16px 0 24px; }
  .heroe .acciones .boton, .cierre .acciones .boton, .cierre .fila .boton { flex: 1 1 100%; }
  .acciones-cierre .boton { width: 100%; }
  .relatos { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 48px; }
  .bloque:first-child { min-height: 0; padding: 28px 0 0; }
  .abanico { position: relative; right: auto; width: 100%; height: 300px; margin: 8px 0 24px; }
  /* Por su alto y no por su ancho: a 42 % del ancho, una hoja A4 de 317 px medía 449 de alto, se salía de
     la caja por arriba y por abajo y pisaba el titular (adversarial del PR 506). */
  .abanico { overflow: hidden; }
  .abanico img { width: auto; height: 78%; }
  .cuaderno .detalle { padding: 10px; }
  .detalle .anotaciones { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
  .con-escena .relatos { left: var(--margen); right: var(--margen); width: auto; top: auto; bottom: 0; height: 58%; }
  .con-escena .relatos::before { content: ""; position: absolute; inset: -64px calc(-1 * var(--margen)) 0; background: linear-gradient(to bottom, #101E2B00, var(--noche) 64px); }
  .con-escena .bloque { top: auto; bottom: 28px; transform: translateY(16px); }
  .con-escena .bloque.activo { transform: none; }
  .con-escena .bloque:not(:first-child) h2 { font-size: 30px; line-height: 33px; }
  .con-escena .bloque:not(:first-child) p:not(.rotulo) { font-size: 18px; line-height: 27px; }
  /* En el movil la guia va en el hueco entre la barra y el texto: presentacion.js lo mide y reparte el alto
     entre las once filas (--guia-arriba, --fila, --hueco). Si no cabe con filas legibles, portada quieta. */
  .con-escena .guia { top: var(--guia-arriba, 11%); left: var(--margen); right: var(--margen); }
  .con-escena .guia li { padding: var(--hueco, 3px) 0 var(--hueco, 4px); }
  .con-escena .guia svg { height: var(--fila, 9px); }
  /* En los telefonos bajos, el titular un punto menor: deja sitio a la guia. */
  @media (max-height: 779px) { .con-escena .heroe h1 { font-size: 34px; line-height: 36px; } }
  .con-escena .cuaderno { left: var(--margen); right: var(--margen); width: auto; top: 76px; bottom: auto; }
  .con-escena .progreso { right: var(--margen); bottom: 10px; }
  .cabeza { margin-bottom: 28px; }
  .comparar { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .tira .hoja { padding: 12px; }
  .tira:nth-of-type(2) { margin-top: 0; }
  .lupa { width: 140px; height: 140px; }
  .entregables { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cuaderno-abierto { height: 250px; }
  .expediente { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .folio.principal { padding: 28px 22px 30px; } .folio.principal h3 { font-size: 22px; line-height: 27px; }
  .recorrido { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .trayecto { width: 90px; height: 90px; transform: rotate(90deg); margin: 8px 0 8px 20px; }
  .motor { justify-self: stretch; }
  .cierre .dentro { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 56px; padding-bottom: 56px; }
  .cierre .pila { grid-column: 1; grid-row: 2; height: 300px; }
  .cierre .pila img { width: 190px; }
  .cierre .llamada { grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .boton:hover, .boton:active { transform: none; } }
/* AL ENTRAR EN ESCENA, NADA SE ANIMA: lo que la portada quieta enseñaba (los otros tres bloques y el detalle)
   se oculta de golpe; con sus transiciones, salía 300 ms encima del titular. `arranque` lo pone y lo quita
   presentacion.js en dos cuadros. */
.arranque .bloque, .arranque .cuaderno, .arranque .cuaderno .anotacion, .arranque .abanico, .arranque .guia { transition: none !important; }

/* EL FORMULARIO DE CONTACTO Y LAS PAGINAS LEGALES (decision 2026-10-01). */
.cierre label span { font-weight: 400; color: var(--sobre-noche-2); }
.cierre textarea { min-height: 120px; border-radius: 6px; border: 1.5px solid var(--blanco); background: var(--blanco); color: var(--noche); padding: 12px 16px; font: 400 18px/26px var(--f-texto); resize: vertical; }
.cierre input[type=email]:focus-visible, .cierre textarea:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.estado-contacto { margin: 24px 0 0; padding: 14px 18px; border-radius: 6px; font: 600 16px/22px var(--f-titulo); border: 1.5px solid var(--borde-noche); }
.estado-contacto.bueno { border-color: var(--ambar); }
.legal-pagina { padding: 56px 0 96px; }
.legal-pagina .dentro { max-width: 760px; }
.legal-pagina h1 { font: 700 40px/46px var(--f-titulo); margin: 0 0 32px; }
.legal-pagina h2 { font: 600 22px/28px var(--f-titulo); margin: 40px 0 10px; }
.legal-pagina p { margin: 0 0 14px; }
.cierre .titulo-contacto { font: 600 22px/28px var(--f-titulo); margin: 40px 0 4px; }
.cierre button.boton.claro { background: transparent; }

/* LA MARCA EN TEXTO de un dominio sin logo en imagen (Team Banzai: Plex Mono, final en ambar). */
.marca-texto { font: 500 19px/22px var(--f-rotulo); color: var(--sobre-noche); white-space: nowrap; letter-spacing: -0.01em; }
.marca-texto .acento { color: #FFA033; }
.barra .dentro > a { text-decoration: none; }