/* La presentacion publica de ebr2pdf (la raiz del dominio). Hoja propia y no `sistema.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; }
@font-face { font-family: "Plex Mono"; src: url("/estaticos/ui/fuentes/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; 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; }
/* EL HALO ES PARA EL TEXTO SOBRE EL LIENZO, no para el boton ambar, que tiene fondo propio: emborronaba la
   etiqueta (INSUD-371, captura del 2-oct-2026). */
.con-escena .bloque .boton.principal { text-shadow: none; }
.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; esquemas 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); }
.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; }

/* 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); }
/* QUE OBTIENES: las tres razones (contingencia, al dia, auditoria), cada una con su esquema. Los esquemas son
   el componente comun (`/estaticos/ui/esquema.css` y `esquema.js`, el mismo de la demo) con la piel de esta
   pagina: papel con esquina doblada para lo que entra, codos y punta noche (decision 2026-10-01, propuesta B). */
.esq-l, .esq-como { --esq-color-trazo: var(--noche); --esq-color-punta: var(--noche); --esq-grosor: 2; }
.pilar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 64px; align-items: center; padding: 48px 0; border-top: 1px solid var(--linea); }
.pilar:first-of-type { border-top: 0; padding-top: 8px; }
.pilar .rotulo { color: var(--pizarra); }
.pilar h3 { font-size: 28px; line-height: 33px; }
.pilar-texto p:not(.rotulo) { margin: 14px 0 0; font-size: 18px; line-height: 27px; color: var(--pizarra); }
.esq-l { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; align-items: center; }
/* Filas de la misma altura: con tres salidas, la del medio cae a la altura del origen y su flecha va recta. */
.esq-l-col { position: relative; z-index: 1; display: grid; grid-auto-rows: 1fr; gap: 12px; }
/* `nth-of-type` y no `nth-child`: el primer hijo de la figura es el SVG de los trazos. */
.esq-l-col:nth-of-type(1) .esq-n { --esq-sale: derecha; }
.esq-l-col:nth-of-type(2) .esq-n { --esq-entra: izquierda; --esq-sale: derecha; }
.esq-l-col:nth-of-type(3) .esq-n { --esq-entra: izquierda; }
.esq-n { position: relative; display: grid; align-content: start; gap: 3px; padding: 12px 14px 13px; background: linear-gradient(160deg, #fffefb 0%, #f6f3ea 80%); border: 1px solid #10202d26; border-radius: 2px; box-shadow: 0 1px 0 #10202d14, 0 10px 18px -12px #10202d59; }
.esq-l-col:nth-of-type(1) .esq-n, .esq-como .n-entrada { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.esq-l-col:nth-of-type(1) .esq-n::before, .esq-como .n-entrada::before { content: ""; position: absolute; right: 0; top: 0; width: 18px; height: 18px; background: linear-gradient(225deg, transparent 50%, #d9d4c7 50%); }
.esq-r { font: 500 12px/16px var(--f-rotulo); color: var(--pizarra); }
.esq-n b { font: 600 17px/22px var(--f-titulo); color: var(--noche); letter-spacing: -.005em; }
.esq-desc { font-size: 16px; line-height: 21px; color: var(--pizarra); }
.esq-n code { font: 500 14px/1 var(--f-rotulo); }
/* El formato de cada cuaderno, en dos etiquetas: PDF y Word. */
.esq-formato { justify-self: start; margin-top: 6px; display: inline-flex; gap: 4px; }
.esq-formato span { font: 500 12px/1 var(--f-rotulo); color: var(--noche); background: var(--papel); border: 1px solid #10202d26; border-radius: 3px; padding: 4px 7px; }

/* COMO FUNCIONA: dos ficheros caen en la banda de ebr2pdf y salen cuatro hojas dibujadas, cada una con su
   rasgo. Las tres filas comparten el ancho, para que sus filos caigan en la misma linea. */
.esq-como { margin: 8px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 44px; justify-items: center; }
.esq-como-fila { position: relative; z-index: 1; display: grid; width: min(1000px, 100%); }
.esq-como-entradas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.esq-como .n-entrada { --esq-sale: abajo; }
.esq-como .n-entrada .esq-r { justify-self: start; border: 1px solid var(--noche); border-radius: 3px; padding: 1px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.esq-como .n-entrada.opcional .esq-r { border-style: dashed; border-color: var(--pizarra); }
.esq-como .n-motor { --esq-entra: arriba; --esq-sale: abajo; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; padding: 20px 22px; background: var(--noche); border-color: var(--noche); border-radius: 6px; }
.esq-como .n-motor .esq-r { grid-row: 1 / span 2; color: var(--ambar); }
.esq-como .n-motor b { color: var(--sobre-noche); font-size: 22px; line-height: 27px; }
.esq-pasos { list-style: none; grid-column: 2; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; counter-reset: paso; font-size: 16px; line-height: 22px; color: var(--sobre-noche-2); }
.esq-pasos li { counter-increment: paso; display: grid; grid-template-columns: 26px 1fr; }
.esq-pasos li::before { content: "0" counter(paso); font: 500 12px/22px var(--f-rotulo); color: var(--ambar); }
.esq-como-salidas { margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: 28px; row-gap: 4px; }
.esq-como .n-salida { --esq-entra: arriba; grid-row: span 4; display: grid; grid-template-rows: subgrid; justify-items: center; text-align: center; background: none; border: 0; box-shadow: none; padding: 0; }
.esq-como .n-salida .esq-formato { justify-self: center; align-self: end; }
.esq-papel { position: relative; width: 84px; height: 112px; margin-bottom: 12px; background: var(--blanco); border-radius: 2px; box-shadow: var(--sombra-papel);
  background-image: linear-gradient(var(--noche), var(--noche)), repeating-linear-gradient(180deg, transparent 0 9px, #dcd7cb 9px 10px); background-size: 50% 4px, calc(100% - 20px) 62px; background-position: 10px 12px, 10px 30px; background-repeat: no-repeat; }
.esq-papel i { position: absolute; left: 40px; right: 10px; top: 34px; height: 22px; }
.esq-papel.valores i { background: linear-gradient(var(--ambar), var(--ambar)) 0 0 / 46% 5px no-repeat, linear-gradient(var(--ambar), var(--ambar)) 0 9px / 70% 5px no-repeat, linear-gradient(var(--ambar), var(--ambar)) 0 18px / 36% 5px no-repeat; }
.esq-papel.huecos i { background: repeating-linear-gradient(90deg, var(--pizarra) 0 3px, transparent 3px 6px) 0 4px / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--pizarra) 0 3px, transparent 3px 6px) 0 13px / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--pizarra) 0 3px, transparent 3px 6px) 0 22px / 100% 1px no-repeat; }
.esq-papel.varias { box-shadow: 5px 5px 0 -1px var(--blanco), 5px 5px 0 0 #10202d26, 10px 10px 0 -1px var(--blanco), 10px 10px 0 0 #10202d26, var(--sombra-papel); }
.esq-papel.anexo i { left: 0; right: 0; height: 46px; background: linear-gradient(var(--noche), var(--noche)) 50% 0 / 24px 10px no-repeat, linear-gradient(var(--pizarra), var(--pizarra)) 50% 10px / 1px 8px no-repeat, linear-gradient(var(--noche), var(--noche)) 50% 18px / 24px 10px no-repeat, linear-gradient(var(--pizarra), var(--pizarra)) 50% 28px / 1px 8px no-repeat, linear-gradient(var(--noche), var(--noche)) 50% 36px / 24px 10px no-repeat; }
/* En vertical: los esquemas caen de arriba abajo y lo que sale cuelga de un rail a la izquierda. */
@media (max-width: 960px) {
  .pilar { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .esq-l { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .esq-l-col:nth-of-type(1) .esq-n { --esq-sale: abajo; }
  .esq-l-col:nth-of-type(2) .esq-n { --esq-entra: arriba; --esq-sale: abajo; --esq-sale-x: 18px; }
  .esq-l-col { grid-auto-rows: auto; }
  .esq-l-col:nth-of-type(3) { padding-left: 34px; }
  .esq-como { row-gap: 32px; justify-items: stretch; }
  .esq-como-entradas { gap: 12px; }
  .esq-como .n-motor { --esq-sale-x: 18px; grid-template-columns: minmax(0, 1fr); }
  .esq-como .n-motor .esq-r, .esq-pasos { grid-row: auto; grid-column: auto; }
  .esq-pasos { display: grid; }
  .esq-como-salidas { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-left: 34px; row-gap: 12px; }
  .esq-como .n-salida { --esq-entra: izquierda; grid-row: auto; grid-template-rows: none; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "p t" "p d" "p f"; column-gap: 14px; justify-items: start; text-align: left; align-items: center; background: var(--blanco); border: 1px solid #10202d26; border-radius: 4px; padding: 12px; }
  .esq-como .n-salida .esq-papel { grid-area: p; zoom: .55; margin: 0; }
  .esq-como .n-salida b { grid-area: t; } .esq-como .n-salida .esq-desc { grid-area: d; } .esq-como .n-salida .esq-formato { grid-area: f; justify-self: start; }
}
@media (max-width: 600px) { .pilar h3 { font-size: 24px; line-height: 29px; } }

.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 expediente se ordena y la pila del cierre se apila. Las flechas de los esquemas las traza
   `esquema.js` una vez. 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] .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] .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; }
  .expediente { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .folio.principal { padding: 28px 22px 30px; } .folio.principal h3 { font-size: 22px; line-height: 27px; }
  .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. Es la de team-banzai.com (`Logo.astro` y
   `global.css`): Plex Mono 600 sin espaciado propio, tinta #ECECEE y final en ambar #FFA033; en la barra
   a 18 px en linea, y por debajo de 640 px y en el pie a dos alturas, 16 y 20 px con interlineado .92. */
.marca-texto { display: inline-flex; align-items: center; font: 600 18px/1 var(--f-rotulo); color: #ECECEE; white-space: nowrap; }
.marca-texto .acento { color: #FFA033; }
.marca-texto .marca-linea { display: inline; }
.marca-texto .marca-pila { display: none; flex-direction: column; align-items: flex-start; line-height: .92; }
.marca-pie .marca-pila { display: inline-flex; font-size: 20px; }
@media (max-width: 639.98px) {
  .marca-texto .marca-linea { display: none; }
  .marca-texto .marca-pila { display: inline-flex; font-size: 16px; }
  .marca-pie .marca-pila { font-size: 20px; }
}
.barra .dentro > a { text-decoration: none; }

/* EL SELECTOR DE IDIOMA de la direccion por idioma (INSUD-513): a la derecha de la barra, detras de las
   secciones si las hay. Dos letras por idioma, con el actual relleno; objetivo tactil de 44 px. */
.barra .idiomas { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.barra nav + .idiomas { margin-left: 0; }
.barra .idiomas a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--f-titulo); letter-spacing: .04em; color: var(--sobre-noche-2); text-decoration: none; border-radius: 6px; }
.barra .idiomas a:hover { color: var(--sobre-noche); }
.barra .idiomas a[aria-current="page"] { color: var(--noche); background: var(--sobre-noche); }
.legal-pagina .traduccion { font: 400 16px/24px var(--f-titulo); color: var(--pizarra); border-left: 3px solid var(--ambar); padding-left: 12px; margin: -16px 0 24px; }
@media (max-width: 760px) { .barra .dentro { gap: 10px; } .barra .idiomas { gap: 0; } }
/* Con selector, en un movil no caben la marca, el boton de la demo y los idiomas: el boton sale de la barra,
   y la misma llamada esta en la portada, justo debajo del titular. */
@media (max-width: 520px) { .barra:has(.idiomas) nav .boton { display: none; } }