/* ═══════════════════════════════════════════════════════════════════════════
   c-prosa · EL DOCUMENTO LARGO                       (tirada 7 · Lote 5)
   Contrato: design-system/16-contrato-tiradas-6-7.md §2
   Correctivo del formulario legal (§7): encargo de la sesión principal, 2026-08-13
   Reglas comunes: 13-contrato-cuarta-tirada.md §0 · manual §5.1
   Doctrina de vida: 07-contrato-vida-y-armazon.md §0 (MATERIA)

   CONSUMIDOR REAL
   `views/legal-page.ejs` → `<article class="legal-prose">` con 5 URLs
   (/legal/aviso-legal · /privacidad · /cookies · /terminos · /desistimiento).
   En el espejo esa clase pasa a ser `c-prosa`.

   LA TESIS
   **El documento de verdad: páginas y páginas, bien compuestas.**
   Esto no es una tarjeta con texto dentro: es un texto largo que alguien va a
   LEER de arriba abajo. Todo lo que sigue está subordinado a eso.
   Y una consecuencia que sólo tiene la quinta URL: **el impreso también trae su
   instancia rellenable** — el formulario de desistimiento, que es §7.

   MARCADO CONGELADO (contrato §2)
   ─────────────────────────────────────────────────────────────────────────
   <article class="c-prosa">
     …HTML crudo: h2, h3, p, ul, ol, li, a, strong, em,
       table, thead, tbody, tr, th, td, code, blockquote, hr…

     …y SÓLO en /legal/desistimiento, el impreso rellenable:
     <form class="legal-form">
       <div class="legal-form__hp">…la trampa anti-bots…</div>
       <label class="field"><span>…la clave…</span>
         <input|select|textarea class="input"></label> × 5
       <button class="btn btn--flame btn--lg">…</button>
     </form>
   </article>

   **SIN CLASES INTERIORES, Y NO ES UN DESCUIDO**: el cuerpo de estas páginas
   sale de `routes/legal.js` como cadenas de HTML crudo. No hay ni una clase
   que agarrar y no se pueden inventar (R2). Por eso este fichero es el único
   del sistema que estila POR ELEMENTO — dentro de `.c-prosa` y sólo ahí.
   **La excepción son esas cinco clases del formulario**, que sí vienen en el
   HTML del servidor: no se piden, se encuentran. Son contenido estable del
   documento, igual que sus `h2` y sus `td`, y se anclan en §7 — nunca fuera de
   `.c-prosa`. Anclar en lo que YA existe no es pedir marcado nuevo (R2).

   LA IDEA POR ÉPOCA — una, y siempre la misma pregunta: ¿de qué está hecho
   este documento y cómo se separan sus partes?
     1 · Cueva   EL RELATO SOPLADO. Todo lo que separa está hecho a mano: el
                 trazo de ocre bajo cada rótulo, bajo el hilo y bajo el corte.
     2 · Piedra  LA INSCRIPCIÓN. Todo está tallado: cada rótulo, cada cita y
                 cada corte son un SURCO — canto oscuro y labio de luz debajo.
     3 · Papel   EL IMPRESO. El documento **ES** una hoja del taller: hoja
                 crema, verjurado, luz de la lámpara, poso, versalitas,
                 elzevirianas, rúbrica y filete doble. Ver §4.
     4 · Hierro  EL MANUAL DE LA MÁQUINA. Todo va sujeto por un filete de
                 latón: rótulos, citas, cortes y la cabecera de la tabla.
     5 · Cabina  LA FICHA EN PANTALLA. El filo de 1px ordena, y la brasa sólo
                 aparece donde hay información (el enlace, el nodo del corte).

     Y el formulario de la quinta URL (§7) no estrena una sexta idea: le pide
     prestado a cada época el material con el que ya dibuja su MESA (la caja) y
     su CAJETÍN (las casillas). Tres rimas, cero invención.

   CLASES DE ESTADO: **ninguna.** Un documento legal no tiene estados. Lo único
   que responde al usuario es el enlace (hover/foco), la fila de tabla (hover) y
   —desde §7— la casilla y el botón del impreso (hover/foco). Todos cambian de
   golpe: ver DECISIÓN 2.

   ── DECISIÓN 1 · LA TABLA SIN ENVOLTORIO ──────────────────────────────────
   `c-tabla` scrollea porque tiene un `<div>` alrededor: una `<table>` no sabe
   hacer scroll. **Aquí ese div NO EXISTE Y NO SE PUEDE PEDIR** (R2), así que el
   scroll va sobre la propia table con `display:block; overflow-x:auto`.

   Lo que eso implica, y hay que saberlo antes de tocarlo:
     · Con `display:block`, thead/tbody/tr/td siguen siendo table-internal y el
       motor les fabrica una TABLA ANÓNIMA dentro del bloque. Las columnas se
       siguen alineando entre cabecera y cuerpo (una sola tabla anónima para
       todos los hijos consecutivos), y `border-collapse` se hereda hasta ella.
     · Esa tabla anónima es shrink-to-fit: si cabe, ocupa el ancho disponible;
       si no cabe, se queda en su min-content y el bloque scrollea. Por eso el
       suelo de columna (`--pr-celda`) NO es cosmético: es lo que garantiza que
       una tabla ancha SIEMPRE tenga min-content mayor que un móvil y por tanto
       scrollee en vez de estrujarse. Con 6 columnas son 6 × 7rem = 672px.
     · `overflow-x:auto` obliga al eje Y a `auto` por spec; como la tabla nunca
       es más alta que su caja, no aparece barra vertical (mismo caso que
       `c-tabla` §1).
     · **NO se usa `white-space:nowrap`** como en `c-tabla`. Allí las celdas son
       datos cortos; aquí son frases de un texto legal, y una celda que no parte
       convertiría la tabla en un kilómetro. Parten, y el suelo de columna es
       quien provoca el scroll.
   El indicio de corte (4 capas, dos `local` + dos `scroll`, cero JS) es el
   MISMO mecanismo de `c-tabla` §1, para que las dos rimen sin compartir clase.

   ── DECISIÓN 2 · CERO ANIMACIÓN, Y CERO TRANSICIÓN ────────────────────────
   El contrato pide cero animación. Aquí se va un paso más allá: **ni una sola
   `transition` en todo el fichero.** Motivos, los dos medidos por la casa:
     · error 2 — el color de un texto ni se retrasa ni se interpola. En una
       página que es 100% texto, la única forma segura de cumplirlo es no
       transicionar nada que toque una letra.
     · error 15 — el fondo de una superficie que sostiene texto no entra en
       ninguna lista de `transition`. La hoja de la época 3 sostiene el
       documento entero: interpolarla al cambiar de época dejaría tinta negra
       sobre un mundo oscuro durante segundo y medio.
   El hover del enlace y el de la fila cambian **de golpe**. Un documento no se
   calienta: se lee.

   ── DECISIÓN 3 · EL TEXTO VA A TINTA PLENA ────────────────────────────────
   La vista vieja pintaba la prosa con `--text-2` y reservaba `--text` para
   `strong` y titulares. Aquí el cuerpo va con la tinta PLENA de la época y el
   `strong` se distingue por PESO, no por color. Es más contraste para el que
   lee (y en la época 3, tinta de humo a 13,18:1 sobre la hoja), y de paso
   elimina la trampa de tener dos grises de texto en un documento largo.
   `--e-tinta-2` queda para lo que de verdad es secundario: la cabecera de la
   tabla, que es una etiqueta, no prosa.

   ── GRAMÁTICA DE PSEUDOS (difiere de §4.5: `.c-prosa` no está en su lista) ──
   `.c-prosa::before` = MATERIA (z-index:-1) — sólo la usa la época 3 (la fibra
   de trapo de la hoja). `.c-prosa::after` = LUZ (z-index:1) y **queda LIBRE a
   propósito**: nada puede ponerse por encima de un párrafo de lectura.
   Los pseudos de los elementos interiores (`li::marker`, `p::first-line`…) son
   de este fichero: no pertenecen a ninguna pieza `c-*`.
   ⚠ `initial-letter` está PROHIBIDA (error 18). La abertura de incunable de la
   época 3 va con `::first-line` + `::first-letter`, y de ellos sólo se tocan
   propiedades de fuente y de color: no flotan, no hunden, no tocan el flujo.

   ── CONTRASTE (protocolo §4.1) ────────────────────────────────────────────
   Medido en píxel renderizado con el texto retirado y `text-shadow:none`, en
   las cinco épocas y sobre el peor píxel de cada fondo. Cifras en el bloque
   VERIFICADO del final. La época 3 se mide **sobre la hoja**, que es donde cae
   todo el documento.

   ORDEN DE CARGA: base.css → epoca-1…5 → vida/*.css → extra/c-prosa.css
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1 · ESTRUCTURA — ni un literal de color. Todo sale de `var(--e-*)`.
   ─────────────────────────────────────────────────────────────────────────── */

.c-prosa{
  /* LA MEDIDA. Una `ch` no mide lo mismo en Anton que en Garamond, así que un
     `68ch` pelado haría que la misma página tuviera 40 líneas en una época y 52
     en otra — o sea, se saltaría el ±20% de caja por la puerta de atrás. El
     `clamp` deja que cada fuente elija su medida DENTRO de una horquilla en px:
     la serif de ojo pequeño compone más estrecho (que es lo correcto) y ninguna
     se va a la línea de 100 caracteres. Medido: 571px en el Papel, 672px en la
     Cabina. */
  --pr-medida: clamp(32rem, 68ch, 42rem);

  /* Los dos aires del documento, con el freno de base.css §1.2 (término fijo +
     factor pequeño): entre párrafos y antes de un rótulo. En crudo, `--e-aire`
     (12→40px) abriría un 40% de diferencia de alto entre la Cueva y la Cabina. */
  --pr-gap:   calc(12px + var(--e-aire) * .18);   /* párrafo → párrafo */
  --pr-salto: calc(22px + var(--e-aire) * .45);   /* aire antes de un h2   */

  /* El SUELO de columna. No es densidad: es lo que garantiza que una tabla de
     varias columnas scrollee en un móvil en vez de estrujarse hasta una palabra
     por línea. 6,5rem × 4 columnas = 416px, ya por encima de los ~350 útiles de
     un 390; y una tabla de dos columnas no pide un scroll que no necesita.
     Quien decide el scroll en escritorio no es este suelo, es el `min-content`
     real del contenido (ver la nota de `th`/`td`). */
  --pr-celda: 6.5rem;

  /* La mesa de datos y su indicio de corte (mismo mecanismo que `c-tabla`).
     `--pr-corte` es el único literal de esta sección, y es el mismo caso que el
     `--t-corte` de `c-tabla` §1: una sombra de pliegue no es un color de la
     paleta —es ausencia de luz— y **las cinco pieles la redeclaran** con la
     densidad de su material. Aquí sólo está para que el mecanismo funcione
     aunque una época se olvide. */
  --pr-mesa:     var(--e-sup);
  --pr-cubierta: var(--e-sup);
  --pr-corte:    rgba(0, 0, 0, .55);

  /* El relleno del documento. Vale 0 en cuatro épocas: la prosa es texto sobre
     el mundo y el marco de la página ya pone su margen. La época 3 lo sube
     porque allí el documento ES una hoja y una hoja tiene márgenes de página.
     NUNCA se redeclara `--e-aire` aquí (error 6): las escalas derivadas ya se
     resolvieron en `<html>`. */
  --pr-pad-x: 0px;
  --pr-pad-y: 0px;

  position: relative;
  isolation: isolate;
  display: block;
  min-width: 0;
  max-width: 100%;
  padding: var(--pr-pad-y) var(--pr-pad-x);

  color: var(--e-tinta);
  font-family: var(--e-cuerpo);
  font-size: 16.5px;
  line-height: 1.68;                 /* dentro de la horquilla 1.6–1.75 */
  overflow-wrap: break-word;         /* un correo largo no desborda a 390 */
}

/* 1.1 · Los dos ganchos del documento. Declarados aquí porque `.c-prosa` no
   está en la lista de base.css §11. Misma gramática: materia debajo, luz
   encima. Ninguno aporta caja, así que el material nunca mueve el texto. */
.c-prosa::before,
.c-prosa::after{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.c-prosa::before{ z-index: -1; }    /* MATERIA — sólo la usa el Papel        */
.c-prosa::after { z-index:  1; }    /* LUZ — LIBRE: nada tapa un párrafo     */


/* 1.2 · RÓTULOS — h2 y h3.
   `scroll-margin-top` es obligatorio: las páginas legales enlazan a sus propias
   secciones y la barra pegajosa se come el destino (error 9). `--e-ancla` es el
   único token que el sistema no puede calcular solo, y aquí se usa tal cual.
   `margin-block` explícito porque un `h2` dentro de una rejilla NO colapsa
   márgenes (error 19) y estas páginas se montan en `c-marco--estrecho`. */
.c-prosa h2,
.c-prosa h3{
  scroll-margin-top: var(--e-ancla);
  font-family: var(--e-display);
  color: var(--e-tinta);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.c-prosa h2{
  margin-block: var(--pr-salto) calc(var(--pr-gap) * .78);
  font-size: clamp(20px, .95rem + .7vw, 24px);
  font-weight: var(--e-peso-display);
  line-height: 1.2;
  letter-spacing: var(--e-tracking);
}
.c-prosa h3{
  margin-block: calc(var(--pr-salto) * .62) calc(var(--pr-gap) * .55);
  font-size: clamp(16.5px, .9rem + .25vw, 18px);
  font-weight: var(--e-peso-fuerte);
  line-height: 1.28;
  letter-spacing: var(--e-tracking);
}
/* Un documento no empieza con un hueco: lo primero que llega va pegado arriba. */
.c-prosa > :first-child{ margin-top: 0; }


/* 1.3 · PÁRRAFO Y LISTAS — el cuerpo del documento, a ancho de lectura.
   La medida se pone en los bloques de TEXTO, no en el artículo: así la tabla
   puede ocupar todo el ancho de la columna (que es lo que necesita) sin que la
   prosa se vaya a 90 caracteres por línea. */
.c-prosa p,
.c-prosa ul,
.c-prosa ol,
.c-prosa blockquote{
  max-width: var(--pr-medida);
}
.c-prosa p{
  margin-block: 0 var(--pr-gap);
}
/* El hueco de la viñeta se mide en `em` y no sólo en `--e-pad-caja`: la viñeta
   de una época puede ser una RAYA (el Papel), y una raya de 1em no cabe en los
   17,6px que `--e-pad-caja` deja en la Cueva — se saldría por la izquierda del
   artículo. Con el `max()`, el hueco nunca es menor que la marca que tiene que
   alojar, en ninguna de las cinco. */
.c-prosa ul,
.c-prosa ol{
  margin-block: 0 var(--pr-gap);
  padding-inline-start: max(1.5em, var(--e-pad-caja));
}
.c-prosa li{
  margin-block: 0 calc(var(--pr-gap) * .42);
}
.c-prosa li:last-child{ margin-bottom: 0; }
/* Listas anidadas: respiran arriba, no repiten el hueco de abajo. */
.c-prosa li > ul,
.c-prosa li > ol{
  margin-block: calc(var(--pr-gap) * .42) 0;
}
/* La viñeta es material de época: cada piel le pone su glifo y su tinta.
   `::marker` sólo admite propiedades de fuente, `color` y `content` — no puede
   mover nada de sitio, que es justo lo que se quiere de un adorno de lista. */
.c-prosa li::marker{
  color: var(--e-tinta-2);
}
.c-prosa ol > li::marker{
  font-variant-numeric: tabular-nums;
}


/* 1.4 · LO QUE PASA DENTRO DE UNA FRASE — strong, em, a. */
.c-prosa strong{
  font-weight: var(--e-peso-fuerte);
  color: inherit;                  /* el peso distingue; el color no cambia */
}
.c-prosa em{
  font-style: italic;
  color: inherit;                  /* una cursiva más floja se pierde en 12 págs */
}

/* EL ENLACE. Dos reglas duras del contrato:
     · SIEMPRE subrayado — es prosa, y el color no puede ser la única señal;
     · el acento va POR CONTEXTO, que en la época 3 significa la rúbrica sola
       (la hoja redeclara `--e3-rojo` en §4 y aquí no hay que saber nada).
   `text-underline-offset` separa el trazo de las descendentes; el grosor se
   ata a `--e-grosor` con suelo de 1px para que la Cabina no lo deje en un
   pelo invisible ni la Cueva lo convierta en un tachón. */
.c-prosa a{
  color: var(--e-acento);
  text-decoration-line: underline;
  text-decoration-thickness: max(1px, calc(var(--e-grosor) * .5));
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in oklab, var(--e-acento) 45%, var(--e-nada));
  overflow-wrap: anywhere;         /* correos y URLs largas, a 390 */
}
.c-prosa a:hover{
  color: var(--e-acento-nucleo);
  text-decoration-color: currentColor;
}
/* El foco lo pone base.css §2 (`:focus-visible`, anillo del grosor de la época
   y del color del acento; en el Papel, del color de `--e3-foco`, que esta hoja
   redeclara a tinta en §4). Aquí sólo se garantiza que el anillo de un enlace
   partido en dos líneas se dibuje entero. */
.c-prosa a:focus-visible{
  border-radius: 2px;
}


/* 1.5 · CÓDIGO — el cajetín.
   La familia es la mono de la época, sea cual sea (en el Papel la mono ES la
   Garamond: allí el tell no puede ser la letra, y por eso el cajetín lleva su
   propio papel — ver §4). El texto va a tinta plena, nunca al acento: el acento
   del documento ya es el enlace, y dos colores encendidos en la misma frase
   compiten (MATERIA §5). */
.c-prosa code{
  font-family: var(--e-mono);
  font-size: .82em;
  line-height: 1;
  padding: .16em .42em;
  border: max(1px, calc(var(--e-grosor) * .5)) solid var(--e-linea);
  border-radius: min(6px, var(--e-radio));
  background-color: color-mix(in oklab, var(--e-tinta) 7%, var(--e-nada));
  color: var(--e-tinta);
  overflow-wrap: anywhere;
}


/* 1.6 · CITA — el filo de cita.
   Sin comillas dibujadas y sin manecillas: el filo es la idea, y cada época le
   da su material. El texto se queda a tinta plena (una cita en un documento
   legal suele ser el texto MÁS importante de la página). */
.c-prosa blockquote{
  margin-block: var(--pr-gap);
  margin-inline: 0;
  padding-block: calc(var(--pr-gap) * .3);
  padding-inline-start: var(--e-pad-caja);
  border-inline-start: max(2px, var(--e-grosor)) solid var(--e-linea);
  color: var(--e-tinta);
}
.c-prosa blockquote > :last-child{ margin-bottom: 0; }


/* 1.7 · EL CORTE — `hr` como separador del mundo.
   Caja de 12px sin borde: todo se dibuja con capas de fondo, así que el corte
   NUNCA aporta geometría distinta entre épocas (12px en las cinco) y el ±20%
   ni se entera. */
.c-prosa hr{
  height: 12px;
  margin-block: calc(var(--pr-salto) * .8);
  border: 0;
  background-repeat: no-repeat;
  background-image: linear-gradient(90deg, var(--e-linea) 0 100%);
  background-size: 100% max(1px, calc(var(--e-grosor) * .5));
  background-position: 0 50%;
}


/* 1.8 · LA TABLA — sin envoltorio (ver DECISIÓN 1 de la cabecera).
   La `<table>` es a la vez el contenedor de scroll y la rejilla de datos. */
.c-prosa table{
  display: block;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  /* `fit-content` y no `100%`, y esto se vio en el banco antes que en el papel:
     con `width:100%` el BLOQUE ocupaba la columna entera mientras la tabla
     anónima de dentro se encogía a su contenido, así que una tabla corta dejaba
     una franja de superficie vacía a la derecha —el filete y el fondo seguían y
     la rejilla no—, que se lee como un fallo. Con `fit-content` el bloque mide
     lo mismo que su rejilla cuando cabe (una tabla es tan ancha como sus datos)
     y se planta en el ancho disponible cuando no cabe, que es justo cuando tiene
     que scrollear. Medido: la tabla de 4 columnas pasa de 694px de caja con 630
     de rejilla a 630 y 630. */
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin-block: 0 var(--pr-gap);

  border-collapse: collapse;      /* se hereda hasta la tabla anónima */
  border-spacing: 0;
  border: max(1px, calc(var(--e-grosor) * .5)) solid var(--e-linea);
  border-radius: var(--e-radio);
  background-color: var(--pr-mesa);
  color: var(--e-tinta);
  font-size: 14.5px;
  line-height: 1.5;
  text-align: left;

  /* INDICIO DE CORTE — el mismo mecanismo de `c-tabla` §1, sin una línea de JS:
     capas 1-2 (`local`) son tapas del color de la superficie y viajan CON el
     contenido, así que sólo cubren el borde cuando estás pegado a ese extremo;
     capas 3-4 (`scroll`) son las sombras, clavadas a los bordes de la caja.
     Resultado: si la tabla cabe entera no se ve ninguna. */
  background-image:
    linear-gradient(to right, var(--pr-cubierta) 34%, var(--e-nada)),
    linear-gradient(to left,  var(--pr-cubierta) 34%, var(--e-nada)),
    linear-gradient(to right, var(--pr-corte),        var(--e-nada)),
    linear-gradient(to left,  var(--pr-corte),        var(--e-nada));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;

  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--e-tinta) 26%, var(--e-nada)) transparent;
}
.c-prosa table::-webkit-scrollbar{ height: 9px; }
.c-prosa table::-webkit-scrollbar-track{ background: transparent; }
.c-prosa table::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: color-mix(in oklab, var(--e-tinta) 22%, var(--e-nada));
}
.c-prosa table::-webkit-scrollbar-thumb:hover{
  background: color-mix(in oklab, var(--e-tinta) 34%, var(--e-nada));
}

/* LA CELDA. `vertical-align: top` y no `middle` como en `c-tabla`: allí las
   celdas son datos de una línea, aquí son frases de tres. El suelo de columna
   (`--pr-celda`) es el que provoca el scroll cuando no cabe. */
/* `overflow-wrap: break-word` y NO `anywhere`, y esto se probó en las dos
   direcciones porque no es obvio:
     · `anywhere` sí cuenta para el `min-content`, así que la tabla de seis
       columnas cabía en la columna de lectura… partiendo palabras por la mitad
       para conseguirlo. Medido en el banco: «DESTINATARI/OS» en un rótulo,
       «Facturacio/n» y «administraci/on» en las celdas. Una tabla legal con las
       palabras rotas es peor que una tabla que se desplaza.
     · `break-word` parte sólo cuando una palabra no cabe de ninguna manera y no
       toca el `min-content`: la columna reserva el ancho de su palabra más
       larga y, si la suma no cabe, **la tabla scrollea con dignidad**. Que es
       exactamente lo que hace `c-tabla` con su `white-space: nowrap`, por el
       mismo motivo y con el mismo indicio de corte.
   Consecuencia medida y buscada: las tablas legales de verdad (3 y 4 columnas)
   caben enteras en las cinco épocas; la de seis se desplaza en todas. */
.c-prosa th,
.c-prosa td{
  min-width: var(--pr-celda);
  padding: calc(var(--e-pad-corto) * .82) var(--e-pad-caja);
  vertical-align: top;
  text-align: left;
  overflow-wrap: break-word;
  hyphens: none;                /* una tabla no se divide con guiones */
}
/* LA CABECERA — etiqueta de instrumento, no prosa: es lo único del documento
   que se pinta con la tinta secundaria. El tracking lleva suelo con `max()`
   porque la Cabina lo tiene NEGATIVO y en micro-mayúsculas eso es ilegible
   (misma cautela que `c-tabla` y `c-panel__meta`).
   ⚠ Aquí NO va el `white-space: nowrap` de `c-tabla`: allí los rótulos son
   «Alumno» o «Estado»; en un registro legal son «Categorías de datos» o
   «Transferencias internacionales», y un rótulo que no parte fija él solo el
   min-content de la tabla en 815px. Se parte en dos líneas, que es lo que hace
   un encabezado de tabla impresa. */
.c-prosa thead th{
  border-bottom: max(1px, var(--e-grosor)) solid var(--e-linea);
  font-family: var(--e-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: max(.08em, var(--e-tracking));
  text-transform: uppercase;
  color: var(--e-tinta-2);
}
.c-prosa tbody td{
  border-top: max(1px, calc(var(--e-grosor) * .5)) solid var(--e-linea);
}
.c-prosa tbody tr:first-child td{ border-top: 0; }
/* HOVER DE FILA — sin transición (DECISIÓN 2): es orientación mientras se lee
   una tabla que scrollea, no un efecto. */
.c-prosa tbody tr:hover{
  background-color: color-mix(in oklab, var(--e-tinta) 6%, var(--e-nada));
}
.c-prosa td strong{ color: inherit; }
/* UN CAJETÍN DENTRO DE UNA CELDA NO SE PARTE. En prosa, un identificador larguísimo
   tiene que poder partirse o desborda la página; dentro de una tabla no, porque la
   tabla ya sabe desplazarse. Visto en el banco a 390: `connect.sid` se rompía en
   «connect.si» + «d», y el trozo huérfano se llevaba su propio filete y su propio
   relleno — dos cajetines donde hay un dato. Como el token entero (~70px) cabe de
   sobra bajo el suelo de columna, esto no ensancha nada. */
.c-prosa th code,
.c-prosa td code{ white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════════════════════
   2 · ÉPOCA 1 · LA CUEVA — EL RELATO SOPLADO EN LA PARED
   La cueva no tiene imprenta: tiene una mano y un cuenco de ocre. Así que aquí
   no se dibuja ni una caja — lo que separa las partes del relato es siempre EL
   MISMO TRAZO SOPLADO, en tres tamaños: bajo el rótulo, en el corte y bajo la
   cabecera de la tabla. Una sola idea, repetida como se repetía una mano.
   Prioridad absoluta: la cal se lee sobre la roca.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="1"] .c-prosa{
  --pr-mesa:     #17100B;
  --pr-cubierta: #17100B;
  --pr-corte:    rgba(0, 0, 0, .82);

  /* el trazo soplado: nunca recto, nunca del mismo grosor */
  --pr1-trazo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='10' viewBox='0 0 600 10' preserveAspectRatio='none'%3E%3Cfilter id='pw'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06 0.4' numOctaves='3' seed='4' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath d='M0 5 C60 2 110 8 170 4 C232 1 280 8 344 4 C400 1 452 7 512 4 C548 2 576 7 600 4 L600 8 C560 10 520 6 470 9 C420 11 372 6 320 9 C266 11 214 6 160 9 C104 11 52 6 0 8 Z' fill='%23C97A3D'  filter='url(%23pw)'/%3E%3C/svg%3E");

  line-height: 1.66;
}

/* EL RÓTULO va SUBRAYADO A MANO, no encajonado. Anton sólo tiene un peso y la
   época ya baja `--e-peso-display` a 400 (error 7): aquí no se toca. */
html[data-epoca="1"] .c-prosa h2{
  padding-bottom: 11px;
  background-image: var(--pr1-trazo);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: min(100%, var(--pr-medida)) 7px;
  letter-spacing: .045em;
}
html[data-epoca="1"] .c-prosa h3{
  color: var(--e-tinta);
  letter-spacing: .05em;
}

/* la viñeta es la huella del dedo mojado en ocre */
html[data-epoca="1"] .c-prosa li::marker{
  content: "\25CF\00a0";
  color: #C97A3D;                /* ocre PLENO: un color con alfa hace que la
                                    medida de contraste mienta (mide el nominal,
                                    no lo que el ojo recibe). Aquí y en las 5. */
  font-size: .72em;
}
html[data-epoca="1"] .c-prosa ol > li::marker{
  content: counter(list-item) ".\00a0";
  font-size: 1em;
  color: var(--e-tinta-2);
}

/* EL CORTE: el mismo trazo, a lo ancho */
html[data-epoca="1"] .c-prosa hr{
  background-image: var(--pr1-trazo);
  background-size: 100% 9px;
  background-position: 0 50%;
}

/* LA CITA: una franja de pigmento que se va lavando hacia dentro */
html[data-epoca="1"] .c-prosa blockquote{
  border-inline-start-color: rgba(201, 122, 61, .70);
  background-image: linear-gradient(90deg,
    rgba(201, 122, 61, .085) 0%, rgba(201, 122, 61, 0) 62%);
}

/* EL CAJETÍN: un hueco de pared con su moteado, no una etiqueta */
html[data-epoca="1"] .c-prosa code{
  border-color: rgba(201, 122, 61, .40);
  background-color: rgba(201, 122, 61, .10);
}

/* LA TABLA: cero filetes entre filas (la cueva no traza rejillas), tandas de
   pigmento para separar renglones y el trazo soplado bajo la cabecera. Es el
   mismo criterio que tomó `c-tabla` en esta época, y por eso riman. */
html[data-epoca="1"] .c-prosa table{
  border-color: rgba(201, 122, 61, .58);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .42);
}
html[data-epoca="1"] .c-prosa thead th{
  border-bottom: 0;
  padding-bottom: calc(var(--e-pad-corto) * .95);
  background-image: var(--pr1-trazo);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 6px;
  letter-spacing: .10em;
}
html[data-epoca="1"] .c-prosa tbody td{ border-top: 0; }
html[data-epoca="1"] .c-prosa tbody tr:nth-child(even){
  background-color: rgba(201, 122, 61, .05);
}
html[data-epoca="1"] .c-prosa tbody tr:hover{
  background-color: rgba(255, 106, 31, .10);
}


/* ═══════════════════════════════════════════════════════════════════════════
   3 · ÉPOCA 2 · LA PIEDRA — LA INSCRIPCIÓN
   Un documento tallado. Una sola idea, y se llama SURCO: canto negro con el
   labio de luz justo debajo, que es como se ve un corte real en la piedra
   cuando la antorcha viene de arriba. El surco separa el rótulo, marca la cita,
   corta el documento y sostiene la cabecera de la tabla.
   La letra va grabada: sombra dura de un píxel, jamás relieve claro (un relieve
   claro sobre piedra oscura sube el fondo medido y se come el contraste).
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="2"] .c-prosa{
  --pr-mesa:     #1A1713;
  --pr-cubierta: #1A1713;
  --pr-corte:    rgba(0, 0, 0, .74);
  --pr2-corte:   rgba(0, 0, 0, .82);
  /* DOS labios, y la diferencia costó una pasada: el surco tallado se ve por su
     LABIO ILUMINADO, no por el corte. Sobre la cara pulida del bloque (la mesa
     de la tabla) basta un labio tenue, y así rima con `c-tabla` en esta época.
     Sobre la PARED del mundo, que ya es casi negra, un corte negro no dibuja
     nada: el `hr` de la primera pasada, hecho sólo de negro y de un labio al
     .15, era literalmente invisible en el banco. Los elementos que se tallan
     directamente en el mundo (rótulo, corte y cita) usan el labio fuerte. */
  --pr2-labio:   rgba(207, 199, 184, .15);
  --pr2-lumbre:  rgba(207, 199, 184, .38);

  line-height: 1.72;               /* la Spectral pide aire entre renglones */
}

/* EL RÓTULO GRABADO: mayúsculas espaciadas de lápida y el surco debajo. Cinzel
   es una capital romana: en versal alta y con el tracking de la época, dice
   «inscripción» sin necesidad de una sola caja. */
html[data-epoca="2"] .c-prosa h2{
  padding-bottom: 10px;
  border-bottom: 2.5px solid var(--pr2-corte);
  box-shadow: 0 1.5px 0 var(--pr2-lumbre);
  font-size: clamp(17px, .8rem + .55vw, 20px);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
}
html[data-epoca="2"] .c-prosa h3{
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: clamp(14.5px, .78rem + .2vw, 15.5px);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}

/* la viñeta es un sillar visto en punta */
html[data-epoca="2"] .c-prosa li::marker{
  content: "\25C6\00a0";
  color: #8A8378;                /* la piedra a media luz, en pleno */
  font-size: .66em;
}
html[data-epoca="2"] .c-prosa ol > li::marker{
  content: counter(list-item) ".\00a0";
  font-size: 1em;
  color: var(--e-tinta-2);
}

/* EL CORTE: el surco de siempre, a lo ancho del bloque */
html[data-epoca="2"] .c-prosa hr{
  background-image:
    linear-gradient(180deg, var(--pr2-corte)  0 100%),
    linear-gradient(180deg, var(--pr2-lumbre) 0 100%);
  background-size: 100% 3px, 100% 1.5px;
  background-position: 0 4px, 0 7px;
}

/* LA CITA: la jamba tallada — corte a la izquierda, labio de luz por dentro */
html[data-epoca="2"] .c-prosa blockquote{
  border-inline-start-color: var(--pr2-corte);
  box-shadow: inset 3px 0 0 var(--pr2-lumbre);
}

/* EL CAJETÍN: cartucho hundido en el bloque */
html[data-epoca="2"] .c-prosa code{
  border-color: var(--pr2-corte);
  border-radius: 2px;
  background-color: rgba(0, 0, 0, .34);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), 0 1px 0 var(--pr2-labio);
}

/* LA TABLA: el registro lapidario. Cabecera grabada y un surco por renglón. */
html[data-epoca="2"] .c-prosa table{
  border-color: rgba(207, 199, 184, .20);
  box-shadow:
    inset 0 1px 0 rgba(207, 199, 184, .13),
    inset 0 -2px 0 rgba(0, 0, 0, .82);
}
html[data-epoca="2"] .c-prosa thead th{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .12));
  border-bottom: 2.5px solid var(--pr2-corte);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 var(--pr2-labio);
  font-family: var(--e-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  color: #CFC7B8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
}
html[data-epoca="2"] .c-prosa tbody td{
  border-top: 1.5px solid var(--pr2-corte);
  box-shadow: inset 0 1px 0 var(--pr2-labio);
}
html[data-epoca="2"] .c-prosa tbody tr:first-child td{ box-shadow: none; }
html[data-epoca="2"] .c-prosa tbody tr:hover{
  background-color: rgba(255, 138, 61, .10);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4 · ÉPOCA 3 · EL PAPEL (TALLER DE NOCHE) — **EL IMPRESO**
   Ésta es la pieza que más obviamente pertenece a esta época: un documento
   legal en el taller del impresor no es «texto sobre una hoja», es LA HOJA. Y
   es la hoja más grande del sistema, así que se lleva la ración COMPLETA de
   luz (`--e3-luz-hoja`, no la corta que usan las cinco piezas pequeñas) y el
   poso de una hoja de tamaño página.

   4.0 · SUPERFICIE DE PAPEL NUEVA → REDECLARA EL PROTOCOLO ENTERO
   ─────────────────────────────────────────────────────────────────────────
   Regla 3 del §4.4.1 del manual y error 20: una superficie de papel que no
   redeclara los tokens de contexto hereda la crema del TALLER sobre la crema
   de la HOJA (1,04:1 medido en el desplegable antes de su arreglo). Aquí se
   redeclaran los nueve, con `--e3-foco` incluido porque este documento CONTIENE
   piezas enfocables (todos sus enlaces). Los valores van LITERALES, como en
   `c-acceso` §4.0: así el fichero sigue siendo autocontenido — no LEE ni un
   token ajeno de la época, sólo ALIMENTA los que sus pieles ya leen.
   Los `--e-*` de debajo son el mismo papel por la otra vía: la de las reglas
   que no pasan por `--e3-*` (base.css, y cualquier `c-*` que la página componga
   dentro del documento, como el botón del formulario de desistimiento). Con
   ellos, ese botón se estampa en RÚBRICA seca sobre el papel en vez de en
   MINIO fresco bajo el quinqué.

   4.1 · LA LEY DE LA LÁMPARA — SE OBEDECE, NO SE INTERPRETA
   ─────────────────────────────────────────────────────────────────────────
   Hay UNA lámpara, arriba a la derecha, fuera de cuadro (error 14). Este
   documento no enciende ninguna luz propia: usa los tokens comunes de la época
   —`--e3-luz-hoja` en el `background-image` de la caja y `--e3-poso` en su
   sombra— exactamente como `.c-panel`. Coge luz por su canto de arriba y por el
   de la derecha, se enfría hacia abajo-izquierda y tira la sombra hacia
   abajo-izquierda. Y del degradado **sólo se toca el lóbulo que ACLARA**: el
   que oscurece se hereda tal cual, porque cada décima que se le sume se la
   llevan las cinco superficies de papel que comparten ese token.

   4.2 · LA FIBRA VA MÁS FLOJA QUE EN NINGUNA OTRA HOJA
   ─────────────────────────────────────────────────────────────────────────
   MATERIA §4: la textura es la prueba del material, **nunca sobre un párrafo
   de lectura**. Este componente es un párrafo de lectura de doce páginas. Por
   eso la fibra baja de `.105` (la de `.c-panel`) a `.06`: el que dice «papel» a
   este tamaño es el VERJURADO —corondeles cada 5px y puntizones cada 46px, o
   sea ESTRUCTURA— y no el grano. Es el mismo traspaso de presupuesto que hizo
   la época en su pasada de cohesión, llevado un paso más allá porque aquí no
   hay dos líneas de texto: hay mil. Y el que pone el techo sigue siendo la
   RÚBRICA, que es lo único de la hoja que vive cerca del 4.5.

   4.3 · LA TABLA NO ES UNA SEGUNDA HOJA
   ─────────────────────────────────────────────────────────────────────────
   Está IMPRESA sobre esta. Por eso su fondo es transparente y no repite ni el
   verjurado ni la luz: un segundo degradado anclado a la caja de la tabla sería
   una segunda lámpara dentro de la misma hoja. Lo único que la tabla trae de
   suyo es el rayado de registro —filete de asiento, renglón alterno, cabecera
   en versalitas con filete doble— y el indicio de corte, cuyas tapas van del
   color del papel para que el pliegue se lea como papel que sigue.

   4.4 · LA ABERTURA DE INCUNABLE
   ─────────────────────────────────────────────────────────────────────────
   `initial-letter` está PROHIBIDA (error 18): genera una caja flotante y
   hundida que se traga líneas del párrafo, y ya hizo desaparecer una línea
   entera del render en esta misma época. La abertura va con `::first-line` +
   `::first-letter` y **de ellos sólo se tocan fuente y color** — no flotan, no
   hunden, no tocan el flujo. Acotada a `p:first-of-type`, o sea al primer
   párrafo real del documento: jamás aterriza sobre una lista, una tabla ni un
   rótulo, pase lo que pase con el HTML que sirva el servidor.

   4.5 · ADORNOS: NINGUNO
   ─────────────────────────────────────────────────────────────────────────
   La §POLÍTICA DE ADORNOS de `epoca-3.css` está cerrada: el sello es del panel
   destacado, el losange del kicker, las marcas de registro del pliego recién
   tirado. Este documento **no añade ni uno**. Su imprenta es su material:
   verjurado, fibra, versalitas, elzevirianas, filetes y rúbrica.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="3"] .c-prosa{
  /* — EL CONTEXTO DE HOJA (los nueve tokens, valores de la hoja) — */
  --e3-texto:       #1A1714;                 /* negro de humo   · 13,18:1 ✔ */
  --e3-texto-2:     #4A423A;                 /* segunda pasada  ·  7,28:1 ✔ */
  --e3-filete:      rgba(26, 23, 20, .20);
  --e3-rojo:        #A8321E;                 /* rúbrica seca    ·  4,94:1 ✔ */
  --e3-rojo-hondo:  #8E2A18;                 /* cuando la prensa aprieta    */
  --e3-verde:       #1B5334;
  --e3-regla:       #1A1714;
  --e3-papel-local: #F2EAD9;
  --e3-foco:        #1A1714;                 /* contiene enlaces: anillo de tinta */

  /* — el mismo papel por la vía de base.css — */
  --e-fondo:          #F2EAD9;
  --e-fondo-2:        #E9DFC9;
  --e-tinta:          #1A1714;
  --e-tinta-2:        #4A423A;
  --e-linea:          rgba(26, 23, 20, .20);
  --e-acento:         #A8321E;               /* en papel manda la rúbrica   */
  --e-acento-nucleo:  #8E2A18;               /* «más rúbrica», no más claro */
  --e-halo:           rgba(168, 50, 30, .18);
  --e-ok:             #1B5334;

  --pr-mesa:     transparent;                /* la tabla está impresa aquí  */
  --pr-cubierta: #F2EAD9;
  --pr-corte:    rgba(26, 23, 20, .26);
  --pr3-fuerte:  rgba(26, 23, 20, .55);

  /* márgenes de página: una hoja no lleva el texto pegado al canto */
  --pr-pad-x: calc(var(--e-pad-caja) * 1.15);
  --pr-pad-y: calc(var(--e-pad-caja) * 1.15);

  background-color: #F2EAD9;
  /* EL VERJURADO Y LA LÁMPARA — los tokens comunes de la época, en el
     `background-image` de la propia caja: quedan bajo la fibra y muy por debajo
     del texto (no son un velo), su alfa es la que dice y los dos ganchos siguen
     libres. El orden pinta el primero ENCIMA: las rayas del molde van sobre el
     papel ya iluminado, que es como se ven al trasluz. Ración COMPLETA de luz:
     ésta es la hoja grande, no una cédula. */
  background-image: var(--e3-verjurado), var(--e3-luz-hoja);
  /* LA HOJA, POSADA (LA LEY DE LA LÁMPARA): canto de luz arriba y a la derecha,
     canto hundido abajo e izquierda, sombra corta y densa pegada al canto más
     la larga y blanda detrás. Ni una cifra propia: el poso común de la época. */
  box-shadow: var(--e3-poso);
  color: var(--e3-texto);
  font-size: 17.5px;              /* la Garamond es de ojo pequeño */
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
  hyphens: auto;
}

/* MATERIA — la fibra de trapo, y sólo ella (§4.2: a .04, no a .105).
   La cifra no es de gusto, está medida en el banco: la RÚBRICA del enlace es lo
   único de esta hoja que vive cerca del suelo, y cada punto de fibra se lo come.
   Con la fibra a .06 el peor píxel bajo un enlace bajaba a rgb(219,212,196) y el
   enlace se quedaba en **4,53** — pasa, pero sin margen para nada. A .04 el peor
   píxel sube a rgb(226,219,203) y el enlace vuelve a **4,92**, que es justo el
   presupuesto con el que la época documenta su hoja (4,94 en `.c-panel`).
   Y hay una segunda razón, la del contrato: esta superficie es un párrafo de
   lectura de doce páginas, y MATERIA §4 dice que la textura nunca va encima de
   uno. Quien dice «papel» aquí es el VERJURADO, que es estructura, no grano. */
html[data-epoca="3"] .c-prosa::before{
  content: "";
  background-image: var(--e3-fibra);
  background-size: 260px 260px;
  mix-blend-mode: multiply;
  opacity: .04;
}

/* Seleccionar sobre una hoja no puede pintar crema sobre crema: base.css lleva
   `::selection` a `--e-tinta`, que en la raíz de esta época es la del TALLER. */
html[data-epoca="3"] .c-prosa ::selection{
  background: rgba(240, 128, 63, .34);
  color: #1A1714;
}

/* EL RÓTULO — versalitas de verdad (`smcp`), nunca mayúscula encogida, con el
   filete de imprenta debajo. El `h3` no lleva filete: en un impreso, el
   epígrafe de segundo orden se distingue por la letra, no por otra raya. */
html[data-epoca="3"] .c-prosa h2{
  padding-bottom: 7px;
  border-bottom: 2px solid var(--e3-regla);
  box-shadow: 0 3px 0 -2px var(--e3-filete);
  font-size: clamp(20px, .95rem + .7vw, 24px);
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1;
  letter-spacing: .055em;
  color: var(--e3-texto);
}
html[data-epoca="3"] .c-prosa h3{
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1, "onum" 1;
  letter-spacing: .085em;
  color: var(--e3-texto);
}

/* LA RAYA DEL COMPOSITOR: en un impreso español la lista va con raya, no con
   bolo. Y la numerada va en rúbrica, como las cláusulas de una escritura. */
html[data-epoca="3"] .c-prosa li::marker{
  content: "\2014\00a0";
  color: var(--e3-texto-2);
}
html[data-epoca="3"] .c-prosa ol > li::marker{
  content: counter(list-item) ".\00a0";
  color: var(--e3-rojo);
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
}

/* EL CORTE — el FILETE DOBLE del impresor (grueso + fino), corto y centrado:
   así se parte un pliego, no con una raya de pared a pared. */
html[data-epoca="3"] .c-prosa hr{
  width: 42%;
  margin-inline: auto;
  background-image:
    linear-gradient(180deg, var(--e3-regla) 0 100%),
    linear-gradient(180deg, var(--e3-regla) 0 100%);
  background-size: 100% 2px, 100% 1px;
  background-position: 0 4px, 0 8px;
}

/* LA CITA — el renglón del copista: filete de tinta y cursiva de la Garamond
   (la única cursiva de verdad del viaje junto a la Spectral). */
html[data-epoca="3"] .c-prosa blockquote{
  border-inline-start: 2px solid var(--e3-regla);
  color: var(--e3-texto);
  font-style: italic;
}

/* EL CAJETÍN — aquí la mono ES la Garamond, así que el tell no puede ser la
   letra: es LA PAPELETA. Un cuadratín de papel de otro tono, con su filete, que
   es como se guarda un dato literal en una imprenta. Tinta de humo sobre
   papeleta: 13,01:1 ✔ (la rúbrica ahí se quedaría en 4,88 y no hace falta). */
html[data-epoca="3"] .c-prosa code{
  border-color: var(--e3-filete);
  border-radius: 0;
  background-color: #E7DBC2;
  color: var(--e3-texto);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: .01em;
}

/* LA TABLA — el rayado de registro impreso SOBRE esta hoja (§4.3). */
html[data-epoca="3"] .c-prosa table{
  border-color: var(--e3-filete);
  color: var(--e3-texto);
  font-size: 15.5px;
  scrollbar-color: rgba(26, 23, 20, .34) transparent;
}
html[data-epoca="3"] .c-prosa table::-webkit-scrollbar-thumb{
  background: rgba(26, 23, 20, .28);
}
/* Cifras elzevirianas pero TABULARES: una columna de importes que baila no es
   un libro de registro. */
html[data-epoca="3"] .c-prosa th,
html[data-epoca="3"] .c-prosa td{
  font-variant-numeric: oldstyle-nums tabular-nums;
  font-feature-settings: "onum" 1, "tnum" 1, "kern" 1, "liga" 1;
  color: var(--e3-texto);
}
html[data-epoca="3"] .c-prosa thead th{
  font-family: var(--e-display);
  font-size: 13px;
  font-weight: var(--e-peso-fuerte);
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1;
  text-transform: none;
  letter-spacing: .09em;
  color: var(--e3-texto-2);
  border-bottom: 4px double var(--pr3-fuerte);
  background: none;
}
html[data-epoca="3"] .c-prosa tbody td{ border-top: 1px solid var(--e3-filete); }
html[data-epoca="3"] .c-prosa tbody tr:nth-child(even){
  background-color: rgba(26, 23, 20, .035);
}
html[data-epoca="3"] .c-prosa tbody tr:hover{
  background-color: rgba(26, 23, 20, .065);
}

/* UN IMPRESO VA JUSTIFICADO. Con la caja de composición ancha y `hyphens:auto`
   puesto arriba, la Garamond cierra los renglones sin abrir calles. Acotado a
   pantalla ancha, igual que `.c-panel__cuerpo`: en móvil se compone en bandera
   (ver §9). Se justifica el párrafo y la lista; nunca la tabla ni el rótulo. */
@media (min-width: 721px){
  html[data-epoca="3"] .c-prosa p,
  html[data-epoca="3"] .c-prosa li{ text-align: justify; }
}

/* LA ABERTURA DE INCUNABLE (§4.4). Sólo fuente y color. */
html[data-epoca="3"] .c-prosa > p:first-of-type::first-line{
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1, "onum" 1;
}
html[data-epoca="3"] .c-prosa > p:first-of-type::first-letter{
  color: var(--e3-rojo);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5 · ÉPOCA 4 · EL HIERRO — EL MANUAL DE LA MÁQUINA
   Un documento de fábrica: chapa, y todo lo que separa va SUJETO POR UN FILETE
   DE LATÓN. Una sola idea, en cinco sitios: bajo el rótulo, en el corte (un
   fleje con sus dos remaches), en el canto de la cita, en el borde del cajetín
   y en la cabecera troquelada de la tabla.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="4"] .c-prosa{
  --pr-mesa:     #1B1815;
  --pr-cubierta: #1B1815;
  --pr-corte:    rgba(0, 0, 0, .70);
  --pr4-laton:   rgba(198, 164, 112, .58);
  --pr4-laton-2: rgba(198, 164, 112, .22);

  line-height: 1.68;
}

/* EL RÓTULO: Bodoni con su filete de latón — el rótulo de una placa de máquina */
html[data-epoca="4"] .c-prosa h2{
  padding-bottom: 9px;
  border-bottom: 1.5px solid var(--pr4-laton);
  box-shadow: 0 2.5px 0 -1.5px var(--pr4-laton-2);
}
html[data-epoca="4"] .c-prosa h3{
  color: var(--e-tinta);
}

/* la viñeta es el remache cuadrado */
html[data-epoca="4"] .c-prosa li::marker{
  content: "\25AA\00a0";
  color: #B49A6E;                /* latón en pleno */
  font-size: .82em;
}
html[data-epoca="4"] .c-prosa ol > li::marker{
  content: counter(list-item) ".\00a0";
  font-size: 1em;
  color: var(--e-tinta-2);
}

/* EL CORTE: un fleje de latón con un remache en cada punta. Todo con capas de
   fondo — cero pseudos, cero geometría nueva. */
html[data-epoca="4"] .c-prosa hr{
  background-image:
    radial-gradient(circle at 8px 50%,
      #E7CFA4 0 2.2px, rgba(0, 0, 0, .55) 2.2px 3.2px, var(--e-nada) 3.4px),
    radial-gradient(circle at calc(100% - 8px) 50%,
      #E7CFA4 0 2.2px, rgba(0, 0, 0, .55) 2.2px 3.2px, var(--e-nada) 3.4px),
    linear-gradient(180deg, rgba(214, 182, 131, .82) 0 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0 100%);
  background-size: 100% 100%, 100% 100%, 100% 2px, 100% 1px;
  background-position: 0 0, 0 0, 0 50%, 0 calc(50% + 2px);
}

/* LA CITA: una chapa fina sujeta por su canto de latón */
html[data-epoca="4"] .c-prosa blockquote{
  border-inline-start-color: var(--pr4-laton);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .04), rgba(0, 0, 0, .16));
  box-shadow: inset 0 1px 0 rgba(255, 226, 190, .07);
}

/* EL CAJETÍN: placa troquelada, esquinas casi rectas */
html[data-epoca="4"] .c-prosa code{
  border-color: var(--pr4-laton-2);
  border-radius: 2px;
  background-color: rgba(255, 255, 255, .05);
  box-shadow: inset 0 1px 0 rgba(255, 226, 190, .10);
}

/* LA TABLA: el panel de fichas. Cabecera TROQUELADA en latón y fichas de chapa
   separadas por su filo, con el brillo del canto arriba. */
html[data-epoca="4"] .c-prosa table{
  border: 1.5px solid var(--pr4-laton-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 190, .07),
    0 2px 0 rgba(0, 0, 0, .55);
}
html[data-epoca="4"] .c-prosa thead th{
  background-image: linear-gradient(180deg, #D6B683 0%, #A8874F 100%);
  border-bottom: 1.5px solid rgba(0, 0, 0, .62);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 220, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .30);
  color: #100E0C;
  font-family: 'Oswald', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-shadow: 0 1px 0 rgba(255, 244, 220, .30);
}
html[data-epoca="4"] .c-prosa tbody td{
  border-top: 1px solid var(--pr4-laton-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
html[data-epoca="4"] .c-prosa tbody tr:nth-child(even){
  background-color: rgba(255, 255, 255, .022);
}
html[data-epoca="4"] .c-prosa tbody tr:hover{
  background-color: rgba(255, 226, 190, .075);
}


/* ═══════════════════════════════════════════════════════════════════════════
   6 · ÉPOCA 5 · LA CABINA — LA FICHA EN PANTALLA
   El documento de un panel de control: nada tallado, nada estampado. Lo que
   ordena es EL FILO DE 1PX, y la brasa aparece sólo donde hay información — el
   enlace, el nodo del corte y el canto de la cita. Una sola cosa encendida por
   pantalla, que es la ley de esta era.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="5"] .c-prosa{
  --pr-mesa:     #0B0E14;
  --pr-cubierta: #0B0E14;
  --pr-corte:    rgba(0, 0, 0, .72);

  line-height: 1.7;
}

/* EL RÓTULO: apretado, con el hilo de 1px que separa sin encajonar */
html[data-epoca="5"] .c-prosa h2{
  padding-bottom: 10px;
  border-bottom: 1px solid var(--e-linea);
}

/* la viñeta es el cursor de la sala de mando */
html[data-epoca="5"] .c-prosa li::marker{
  content: "\25B8\00a0";
  color: color-mix(in oklab, var(--e-acento) 78%, var(--e-tinta));
  font-size: .82em;
}
html[data-epoca="5"] .c-prosa ol > li::marker{
  content: counter(list-item) ".\00a0";
  font-size: 1em;
  color: var(--e-tinta-2);
}

/* EL CORTE: un hilo con un nodo de brasa en el centro. Es la única brasa que
   no es un enlace, y por eso está sola en el eje. */
html[data-epoca="5"] .c-prosa hr{
  background-image:
    radial-gradient(circle,
      var(--e-acento) 0 2px, var(--e-nada) 2.6px),
    linear-gradient(90deg,
      var(--e-nada) 0, var(--e-linea) 9%, var(--e-linea) 91%, var(--e-nada) 100%);
  background-size: 12px 12px, 100% 1px;
  background-position: 50% 50%, 0 50%;
}

/* LA CITA: el canto de brasa a la izquierda, cristal detrás */
html[data-epoca="5"] .c-prosa blockquote{
  border-inline-start-color: var(--e-acento);
  background-color: rgba(255, 255, 255, .035);
  border-radius: 0 var(--e-radio) var(--e-radio) 0;
}

/* EL CAJETÍN: cristal con su filo de 1px */
html[data-epoca="5"] .c-prosa code{
  border-color: rgba(238, 241, 246, .18);
  background-color: rgba(255, 255, 255, .06);
}

/* LA TABLA: el panel de datos. Ni cebra ni cajas — lo que separa es el filo. */
html[data-epoca="5"] .c-prosa table{
  border: 1px solid var(--e-linea);
  background-image:
    linear-gradient(to right, var(--pr-cubierta) 34%, var(--e-nada)),
    linear-gradient(to left,  var(--pr-cubierta) 34%, var(--e-nada)),
    linear-gradient(to right, var(--pr-corte),        var(--e-nada)),
    linear-gradient(to left,  var(--pr-corte),        var(--e-nada)),
    linear-gradient(180deg,
      rgba(255, 255, 255, .048) 0%,
      rgba(255, 255, 255, .014) 46%,
      rgba(255, 255, 255, .022) 100%);
  background-size: 28px 100%, 28px 100%, 16px 100%, 16px 100%, 100% 100%;
  background-position: 0 0, 100% 0, 0 0, 100% 0, 0 0;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll, scroll;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 1px 2px rgba(0, 0, 0, .5);
}
html[data-epoca="5"] .c-prosa thead th{
  background-color: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(238, 241, 246, .24);
  font-size: 10px;
  letter-spacing: .155em;
}
html[data-epoca="5"] .c-prosa tbody td{
  border-top: 1px solid rgba(238, 241, 246, .10);
}
html[data-epoca="5"] .c-prosa tbody tr:hover{
  background-color: rgba(255, 255, 255, .05);
}


/* ═══════════════════════════════════════════════════════════════════════════
   7 · EL FORMULARIO DEL DOCUMENTO
   **TESIS: el impreso también trae su instancia rellenable.**

   Un documento legal no siempre termina en el punto final. `/legal/desistimiento`
   tiene que ofrecer por ley la «función de desistimiento», y `routes/legal.js`
   la sirve como un `<form>` DENTRO de la misma cadena de HTML crudo que el resto
   del texto (líneas ~505-539). O sea: no es una pantalla con un formulario, es
   UNA HOJA MÁS DEL MISMO IMPRESO — la que se rellena. Todo lo que sigue está
   subordinado a eso, igual que §1 lo está a «esto se lee de arriba abajo».

   ── POR QUÉ ESTA SECCIÓN ES UN CORRECTIVO Y NO UN GUSTO ───────────────────
   La vista vieja vestía este formulario con su propio `<style>` (`legal-page.ejs`
   líneas 80-91). La vista espejo (`views/epoca/legal-page.ejs`) no puede: imprime
   `page.bodyHtml` sin tocar una letra, que es su regla dura. Al medirlo destapó
   dos cosas, y la segunda es la que obliga:
     · los controles salían con el chrome NATIVO del navegador sobre la cueva;
     · **el honeypot anti-bots salía VISIBLE** — el `<div class="legal-form__hp">`
       con «No rellenes este campo» a la vista de cualquier persona. Seguía
       funcionando (el servidor sólo mira si llegó relleno), pero una trampa que
       se ve no es una trampa: el humano la rellena por obediencia y el bot la
       rellena igual. §7.1 es, literalmente, la razón de existir de esta sección.

   ── DE QUÉ ME AGARRO, Y POR QUÉ NO ES PEDIR MARCADO (R2) ──────────────────
   R2 prohíbe **pedir** una clase nueva al HTML para que una época se vea
   distinta. Aquí no se pide ninguna: `legal-form`, `legal-form__hp`, `field`,
   `input` y `btn` YA están en el HTML que sirve el servidor y son **contenido
   estable del documento**, exactamente igual que sus `h2`, sus `li` y sus `td`.
   Este fichero es el único del sistema que estila lo que le llega en vez de lo
   que él nombra (cabecera, MARCADO CONGELADO); anclar en esas cinco clases es la
   misma decisión que estilar `table` — sólo que aquí el documento sí trae un
   nombre que agarrar y sería absurdo no usarlo. Se anotan las cinco:

     `.legal-form`      el impreso rellenable (contenedor `<form>`)
     `.legal-form__hp`  la trampa anti-bots (⚠ tiene que quedar INVISIBLE)
     `.field`           `<label>` que envuelve `<span>` (la clave) + el control
     `.input`           el control, sea `<input>`, `<select>` o `<textarea>`
     `.btn`             el único botón de las cinco páginas legales

   Y dos cautelas que van con el anclaje:
     · **todo cuelga de `.c-prosa`.** Si mañana alguna de esas clases aparece en
       otra vista, esta hoja no la toca.
     · **`.btn--flame` y `.btn--lg` NO se leen.** Hay UN botón en las cinco
       páginas y es el de enviar: modularlo sería inventarse una jerarquía que el
       documento no tiene. `.btn` a secas = la estampa encendida.

   ── LA IDEA POR ÉPOCA: NINGUNA NUEVA, TRES RIMAS ──────────────────────────
   El contrato da UNA idea por componente y época, y §1-§6 ya la gastaron. Este
   formulario no estrena una sexta: **reutiliza las tres que el documento ya
   tiene**, cada pieza con la suya, y por eso el impreso rellenable se ve del
   mismo material que el impreso leído sin compartir una sola clase:

     la caja del formulario  →  se asienta en LA MESA de la tabla (`--pr-mesa`)
                                y lleva su mismo filete. El documento tiene UNA
                                superficie propia; las dos cosas que la usan son
                                la mesa de datos y el impreso rellenable.
     la clave (`span`)       →  se compone como la CABECERA de la tabla (§1.8):
                                etiqueta de instrumento, no prosa.
     el control (`.input`)   →  es EL CAJETÍN (§1.5) a tamaño de casilla: mismo
                                filete, mismo papel, misma decisión en las cinco.

   Y una cuarta que no es de este fichero sino del sistema: **las cifras del
   control son las de `.c-campo__input` y las del botón las de `.c-boton--brasa`
   (base.css §5 y §3), una a una**. No se importa la clase —el marcado es del
   servidor y está congelado— se importa la MEDIDA, para que el formulario del
   documento y el del resto de la academia sean el mismo objeto. Lo que NO se
   copia es el movimiento: ni las `transition` del campo ni el `translateY(-2px)`
   del botón (DECISIÓN 2 de la cabecera — un documento no se calienta).

   ── ÉPOCA 3: NO ES UNA SEGUNDA HOJA (§4.3, error 14) ──────────────────────
   El formulario está IMPRESO sobre la hoja de §4, no posado encima: cero
   verjurado propio, cero `--e3-luz-hoja`, cero poso. Sólo su filete de tinta.
   Y no necesita redeclarar el protocolo `--e3-*` porque **ya está dentro de la
   superficie que lo redeclaró**: `.c-prosa` (§4.0) alimenta los nueve tokens de
   contexto Y los `--e-*` de base, y las propiedades personalizadas se heredan.
   Consecuencia medida, no supuesta: `--e-tinta` vale `#1A1714` aquí dentro, así
   que la clave sale en tinta de humo; `--e-fondo-2` vale `#E9DFC9`, así que la
   casilla sale del tono de la papeleta; `--e-acento` vale `#A8321E`, así que el
   botón se estampa en RÚBRICA SECA y no en minio fresco. Era exactamente lo que
   §4.0 anunciaba («el botón del formulario de desistimiento»), cumplido.

   ── EL FOCO ──────────────────────────────────────────────────────────────
   Lo pone base.css §2 y, en el Papel, la regla `html[data-epoca="3"]
   :focus-visible` de `epoca-3.css`, que lo lleva a `--e3-foco` — y `--e3-foco`
   vale `#1A1714` aquí dentro porque §4.0 lo redeclara. O sea: el anillo del
   documento y el del formulario son el mismo, sin una línea nueva. La ÚNICA
   excepción es el botón: su anillo iría del color del acento sobre el propio
   acento y no se vería. Se reconduce a `--e-tinta`, que es lo que hace base con
   `.c-boton--brasa` y que en el Papel resuelve al mismo `#1A1714`.

   ── `color-scheme`, LA ÚNICA PALANCA SOBRE LO QUE PINTA EL NAVEGADOR ──────
   Hay tres cosas de un formulario que no dibuja el CSS: el icono del calendario
   de un `<input type="date">`, la lista que despliega un `<select>` y las barras
   internas del `<textarea>`. Sin decirle nada, Chrome las pinta en claro y
   quedan blancas sobre la cueva. `color-scheme` es la palanca —no es un color, es
   una declaración de mundo— y va en el `<form>`: `dark` en las cuatro épocas de
   penumbra y `light` en el Papel. Es la misma decisión que tomaría un impresor:
   decir de qué color es el papel antes de imprimir nada.
   ⚠ REPORTADO, no arreglado: la lista desplegada del `<select>` la sigue
   dibujando el sistema operativo. `base.css` §16.13 ya tiene resuelto el
   «desplegable del mundo» con `appearance: base-select`, pero está atado a
   `.c-campo--seleccion .c-campo__input` y aquí el marcado no trae esas clases.
   Promoverlo es una decisión de sistema (o cambiar las clases en
   `routes/legal.js`), no de este fichero: queda anotado, no inventado.

   ── LO QUE SIGUE SIN VESTIR, Y SE REPORTA ────────────────────────────────
   El mismo HTML crudo trae otras dos clases que este correctivo NO cubre porque
   no estaban en su encargo, y ninguna de las dos rompe nada (las dos se leen
   como prosa, que es el reposo honesto de esta hoja):
     · `.legal-note` / `--ok` / `--err` — los avisos de «solicitud recibida» y de
       error, justo encima del formulario. Su pieza natural es `c-aviso`.
     · `.legal-ident` — el bloque de identificación de la empresa (clave→valor)
       que abre las cinco páginas. Su pieza natural es `c-fila-dato`, que el
       contrato de la cuarta tirada §2 ya nombra como consumidor a «legal-page
       (identificación)».
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   7.1 · LA TRAMPA — lo primero de la sección, porque es lo único FUNCIONAL.
   Las cinco declaraciones son **EXACTAMENTE** las de la vista vieja
   (`views/legal-page.ejs` línea 90), ni una más ni una menos, y no se tocan:
     · `position:absolute` la saca del flujo — con el `<form>` en rejilla eso
       significa además que no crea pista ni se lleva un `gap`;
     · `left:-9999px` la manda fuera de cuadro. El bloque contenedor es
       `.c-prosa`, que es `position:relative` desde §1, así que los 9999px se
       miden desde la columna de lectura: fuera de cualquier viewport imaginable.
       Y en LTR el desbordamiento por la IZQUIERDA no genera scroll —el origen
       del scroll está en el borde izquierdo—, así que esto no le cuesta un píxel
       al «390 sin desbordes» de §9 (medido, no supuesto);
     · `width/height:1px` + `overflow:hidden` son el cinturón: aunque alguien
       posicionara el ancestro y el -9999px dejara de sacarla de cuadro, la caja
       sigue siendo un píxel con su contenido recortado.
   NO se usa `display:none` ni `visibility:hidden`: los dos hacen que un bot
   decente la descarte, y entonces la trampa deja de cazar. Tiene que estar viva
   y rellenable para la máquina, e inexistente para el ojo.
   ⚠ El `<input>` de dentro NO lleva clase (`.input` es de los campos de verdad),
   así que ninguna regla de §7.4 lo alcanza. Es deliberado: la trampa no se viste.
   ─────────────────────────────────────────────────────────────────────────── */

.c-prosa .legal-form__hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ───────────────────────────────────────────────────────────────────────────
   7.2 · LA PILA — la caja del impreso rellenable.
   Rejilla de una columna: un formulario legal se rellena de arriba abajo y no
   hay dos campos que pidan ir codo con codo (el marcado no trae ninguna fila).
   ─────────────────────────────────────────────────────────────────────────── */

.c-prosa .legal-form{
  /* El aire entre campos, en la escala COMPRIMIDA y con el freno de base.css
     §1.2 — la misma fórmula exacta que `--cf-gap` de `c-formulario`, para que
     dos formularios del sistema respiren igual sin compartir clase. En crudo,
     `--e-aire` (12→40px) haría que el mismo impreso midiera casi el doble entre
     la Cueva y la Cabina y se llevaría por delante el ±20% de §9. */
  --lf-gap: calc(9px + var(--e-aire) * .12);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lf-gap);
  min-width: 0;

  /* A LA MEDIDA DE LA PROSA. Es lo que lo distingue de la tabla: una tabla es
     tan ancha como sus datos (§1.8), pero un formulario se rellena leyendo, y
     una casilla de 700px de ancho para un nombre propio se ve como un error.
     Alineado al mismo borde derecho que los párrafos de encima. */
  max-width: var(--pr-medida);
  margin-block: var(--pr-gap);
  padding: var(--e-pad-caja);

  /* LA MESA DEL DOCUMENTO — la misma superficie y el mismo filete que la tabla
     de §1.8. En el Papel `--pr-mesa` vale `transparent` y el impreso queda
     IMPRESO sobre la hoja, sin segunda hoja ni segunda lámpara (§4.3, error 14). */
  border: max(1px, calc(var(--e-grosor) * .5)) solid var(--e-linea);
  border-radius: var(--e-radio);
  background-color: var(--pr-mesa);
  color: var(--e-tinta);

  /* DE QUÉ COLOR ES ESTE PAPEL, para lo que no dibuja el CSS (ver cabecera).
     Cuatro épocas de penumbra; el Papel lo corrige en §7.6.3. */
  color-scheme: dark;
}


/* ───────────────────────────────────────────────────────────────────────────
   7.3 · LA CLAVE DEL IMPRESO — `<label class="field">` + su `<span>`.
   El `<label>` envuelve al control, así que la rejilla va en él: clave arriba,
   casilla debajo, con el mismo hueco que base.css §5 pone entre `__etiqueta` e
   `__input` (`--e-gap × .38`, la cifra literal de base).
   El `<span>` se compone como la CABECERA de la tabla (§1.8) y por el mismo
   motivo: es una etiqueta, no prosa. Diferencias deliberadas con `thead th`:
     · va a TINTA PLENA, no a `--e-tinta-2`. La cabecera de una tabla rotula un
       dato que ya está escrito; esta clave le dice a una persona qué tiene que
       escribir. Es instrucción, y la instrucción se lee entera.
     · sube de 11px a 12px y afloja el tracking de .08em a .07em: cinco líneas de
       versalitas apretadas seguidas cansan más que una fila de cabecera.
   `max-width` NO se hereda de §1.3 (un `span` no está en esa lista) y no hace
   falta: la caja del formulario ya está a la medida.
   ─────────────────────────────────────────────────────────────────────────── */

.c-prosa .legal-form .field{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--e-gap) * .38);
  min-width: 0;
  margin: 0;
}
.c-prosa .legal-form .field > span{
  font-family: var(--e-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: max(.07em, var(--e-tracking));
  text-transform: uppercase;
  color: var(--e-tinta);
}


/* ───────────────────────────────────────────────────────────────────────────
   7.4 · LA CASILLA — `.input`, sea `<input>`, `<select>` o `<textarea>`.
   Las cifras son las de `.c-campo__input` (base.css §5) una a una: mismo alto de
   control, mismos rellenos, mismo cuerpo de 15px, mismo `--e-fondo-2` de papel.
   Lo único que no viaja es la `transition` (DECISIÓN 2): el filo cambia de golpe.
   `appearance:none` en los tres: sin él, macOS dibuja el `<select>` entero con su
   propio material y el mundo se rompe justo donde hay que tocar.
   ─────────────────────────────────────────────────────────────────────────── */

.c-prosa .legal-form .input{
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--e-alto-ctrl);
  padding-block: calc(var(--e-pad-corto) * .55);
  padding-inline: calc(var(--e-pad-caja) * .72);

  border: var(--e-grosor) solid var(--e-linea);
  border-radius: var(--e-radio);
  background-color: var(--e-fondo-2);
  color: var(--e-tinta);

  font-family: var(--e-cuerpo);
  font-size: 15px;
  line-height: 1.4;
  -webkit-appearance: none;
          appearance: none;
}
/* El placeholder es la pista, no el dato: tinta secundaria, como en base. */
.c-prosa .legal-form .input::placeholder{
  color: var(--e-tinta-2);
  opacity: 1;
}
/* Reposo → hover → foco, los tres de base.css §5 y sin una sola interpolación. */
.c-prosa .legal-form .input:hover{
  border-color: color-mix(in oklab, var(--e-tinta) 28%, var(--e-linea));
}
.c-prosa .legal-form .input:focus{
  border-color: var(--e-acento);
}

/* EL DESPLEGABLE. La flecha se dibuja con dos medias diagonales de fondo —el
   mismo truco que usaba la vista vieja, aquí con tinta secundaria en vez de un
   literal— y se le reserva su hueco por la derecha para que una opción larga no
   se le meta debajo. La lista que se abre la pinta el sistema operativo: ver el
   apartado `color-scheme` de la cabecera (REPORTADO). */
.c-prosa .legal-form select.input{
  cursor: pointer;
  padding-inline-end: calc(var(--e-pad-caja) * 1.9);
  background-image:
    linear-gradient(45deg,  var(--e-nada) 50%, var(--e-tinta-2) 50%),
    linear-gradient(135deg, var(--e-tinta-2) 50%, var(--e-nada) 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* Mejor esfuerzo sobre las filas del desplegable: donde el motor las respete,
   salen del mundo; donde no (macOS), manda `color-scheme`. */
.c-prosa .legal-form select.input option{
  background-color: var(--e-fondo);
  color: var(--e-tinta);
}

/* EL COMENTARIO LIBRE. Crece sólo a lo alto: un `resize` horizontal dentro de
   una columna de lectura desmonta la caja del documento. Interlínea de prosa
   (1.6) y no de control (1.4), porque aquí se escriben frases. */
.c-prosa .legal-form textarea.input{
  min-height: calc(var(--e-alto-ctrl) * 2.4);
  line-height: 1.6;
  resize: vertical;
}

/* LA FECHA. `appearance:none` le quita el widget, no el icono del calendario:
   ese lo sigue pintando el navegador y su color lo decide `color-scheme` (§7.2).
   Aquí sólo se le da el cursor que dice que se puede pulsar. */
.c-prosa .legal-form input[type="date"].input::-webkit-calendar-picker-indicator{
  cursor: pointer;
}


/* ───────────────────────────────────────────────────────────────────────────
   7.5 · LA ESTAMPA — el botón de enviar.
   Cifras de `.c-boton` + `.c-boton--brasa` (base.css §3), una a una, con dos
   diferencias y las dos son de este documento:
     · **sin `transition` y sin `translateY(-2px)`** en hover (DECISIÓN 2). El
       botón cambia de golpe y no se levanta: en una hoja quieta, un botón que
       flota es el único objeto con física propia y se ve como un error.
     · **anillo de foco a `--e-tinta`**, porque el del sistema es del color del
       acento y aquí el fondo YA es el acento. Es lo mismo que hace base con
       `.c-boton--brasa:focus-visible`; en el Papel resuelve a `#1A1714`, que es
       exactamente el valor que `--e3-foco` tiene dentro de esta hoja.
   `color: var(--e-fondo)` es el truco de base y resuelve las dos direcciones de
   contraste con un solo token: tinta oscura sobre brasa en las cuatro épocas de
   penumbra, y papel crema sobre la rúbrica seca en el Papel.
   ─────────────────────────────────────────────────────────────────────────── */

.c-prosa .legal-form .btn{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--e-gap) * .55);
  min-height: var(--e-alto-ctrl);
  padding-block: calc(var(--e-pad-corto) * .55);
  padding-inline: calc(var(--e-pad-caja) * 1.05);
  max-width: 100%;

  border: var(--e-grosor) solid var(--e-acento);
  border-radius: var(--e-radio);
  background-color: var(--e-acento);
  color: var(--e-fondo);
  box-shadow: 0 10px 30px -14px var(--e-halo);

  font-family: var(--e-display);
  font-weight: var(--e-peso-display);
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: var(--e-tracking);
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.c-prosa .legal-form .btn:hover{
  background-color: var(--e-acento-nucleo);
  border-color: var(--e-acento-nucleo);
  box-shadow: 0 14px 38px -12px var(--e-halo);
}
.c-prosa .legal-form .btn:focus-visible{
  outline-color: var(--e-tinta);
}


/* ───────────────────────────────────────────────────────────────────────────
   7.6 · LAS CINCO PIELES DEL IMPRESO
   Van aquí y no repartidas por §2-§6 a propósito: esto es un correctivo con
   dueño propio y se lee entero de una vez o no se entiende. La cascada no se
   entera — cada regla sigue siendo `html[data-epoca="N"] .c-prosa …` y este
   fichero se carga el último (R3), así que ninguna piel necesita `!important`.
   Ni una idea nueva: cada época le presta al formulario el material con el que
   ya dibuja su mesa (§1.8) y su cajetín (§1.5).
   ─────────────────────────────────────────────────────────────────────────── */

/* — 7.6.1 · CUEVA — el hueco de pared, con el borde de ocre y la penumbra dentro.
     Mismo pigmento y misma sombra excavada que la tabla; las casillas son los
     huecos pequeños, del mismo material que el cajetín. El trazo soplado NO
     entra aquí: ya está en el rótulo, en el corte y en la cabecera de tabla, y
     una cuarta repetición (× 5 campos) lo convertiría en un patrón de papel
     pintado en vez de en el gesto de una mano. */
html[data-epoca="1"] .c-prosa .legal-form{
  border-color: rgba(201, 122, 61, .58);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .42);
}
html[data-epoca="1"] .c-prosa .legal-form .field > span{
  letter-spacing: .10em;
}
html[data-epoca="1"] .c-prosa .legal-form .input{
  border-color: rgba(201, 122, 61, .40);
  background-color: rgba(201, 122, 61, .10);
}
html[data-epoca="1"] .c-prosa .legal-form .input:hover{
  border-color: rgba(201, 122, 61, .62);
}

/* — 7.6.2 · PIEDRA — la tabla de registro tallada: el bloque con su labio de luz
     arriba y su corte abajo, y cada casilla un cartucho hundido, exactamente
     como el cajetín de §3. La clave se graba, como todo lo que rotula en esta
     era: capital romana con la sombra dura de un píxel. */
html[data-epoca="2"] .c-prosa .legal-form{
  border-color: rgba(207, 199, 184, .20);
  box-shadow:
    inset 0 1px 0 rgba(207, 199, 184, .13),
    inset 0 -2px 0 rgba(0, 0, 0, .82);
}
html[data-epoca="2"] .c-prosa .legal-form .field > span{
  font-family: var(--e-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}
/* El cajetín de §3 usa el labio TENUE (`--pr2-labio`, .15) porque es una palabra
   dentro de una frase: se encuentra leyendo. Una casilla no: hay que verla para
   ir a pulsarla, y el corte del surco es negro sobre una pared casi negra — el
   mismo diagnóstico que hizo esta época con su `hr` («era literalmente
   invisible en el banco», §3). Así que la casilla se lleva el labio FUERTE,
   `--pr2-lumbre`, que es el token que la propia época reservó para lo que se
   talla directamente en el mundo. Medido en píxel, el labio contra la mesa:
   **1,12 con `--pr2-labio` → 1,74 con `--pr2-lumbre`**, y quien acaba dibujando
   la casilla es ese labio, no el corte. (Sobre el techo real de esta señal en
   las cinco épocas, ver la nota «EL FILO DE UNA CASILLA» del bloque VERIFICADO:
   es un nivel del SISTEMA, no de este fichero.) */
html[data-epoca="2"] .c-prosa .legal-form .input{
  border-color: var(--pr2-corte);
  border-radius: 2px;
  background-color: rgba(0, 0, 0, .34);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), 0 1px 0 var(--pr2-lumbre);
}
html[data-epoca="2"] .c-prosa .legal-form .input:hover{
  border-color: rgba(0, 0, 0, .92);
}

/* — 7.6.3 · PAPEL — LA PAPELETA A RELLENAR, impresa sobre la hoja de §4.
     Cero fondo propio (`--pr-mesa` ya es `transparent`), cero verjurado, cero
     luz: sólo el filete de tinta, que es lo único que un impresor añade cuando
     tira un formulario sobre una hoja que ya existe (§4.3, error 14).
     La casilla es el tono de la papeleta —el mismo recurso del cajetín de §4—,
     y la clave va en VERSALITAS de verdad. Ojo con el orden: la estructura de
     §7.3 pone `text-transform:uppercase` y hay que RETIRARLO, porque las
     versalitas necesitan minúsculas de entrada; con la caja alta forzada, la
     `smcp` no tiene sobre qué actuar y sale una mayúscula encogida. */
html[data-epoca="3"] .c-prosa .legal-form{
  border-color: var(--e3-filete);
  color-scheme: light;
}
html[data-epoca="3"] .c-prosa .legal-form .field > span{
  font-family: var(--e-display);
  font-size: 14px;
  font-weight: var(--e-peso-fuerte);
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1;
  text-transform: none;
  letter-spacing: .085em;
  color: var(--e3-texto);
}
html[data-epoca="3"] .c-prosa .legal-form .input{
  border-color: var(--e3-filete);
  background-color: #E7DBC2;                 /* la papeleta, como el cajetín §4 */
  color: var(--e3-texto);
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
}
html[data-epoca="3"] .c-prosa .legal-form .input::placeholder{
  color: var(--e3-texto-2);
}
html[data-epoca="3"] .c-prosa .legal-form .input:hover{
  border-color: var(--pr3-fuerte);
}
html[data-epoca="3"] .c-prosa .legal-form .input:focus{
  border-color: var(--e3-rojo);
}
/* Un impreso NO justifica sus casillas: §4 justifica `p` y `li` a partir de
   721px, y el comentario libre es un `textarea` — no le llega. Se deja escrito
   para que nadie lo «arregle»: la bandera es lo correcto al escribir. */
html[data-epoca="3"] .c-prosa .legal-form textarea.input{
  text-align: left;
}

/* — 7.6.4 · HIERRO — el panel de fichas: la chapa sujeta por su filete de latón
     con el brillo del canto arriba, y cada casilla una placa troquelada. Mismos
     valores que la tabla y el cajetín de §5. */
html[data-epoca="4"] .c-prosa .legal-form{
  border: 1.5px solid var(--pr4-laton-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 190, .07),
    0 2px 0 rgba(0, 0, 0, .55);
}
html[data-epoca="4"] .c-prosa .legal-form .field > span{
  letter-spacing: .11em;
  color: var(--e-tinta);
}
html[data-epoca="4"] .c-prosa .legal-form .input{
  border-color: var(--pr4-laton-2);
  border-radius: 2px;
  background-color: rgba(255, 255, 255, .05);
  box-shadow: inset 0 1px 0 rgba(255, 226, 190, .10);
}
html[data-epoca="4"] .c-prosa .legal-form .input:hover{
  border-color: var(--pr4-laton);
}

/* — 7.6.5 · CABINA — la ficha en pantalla: cristal con su filo de 1px y nada
     más. La única brasa del formulario es el botón, que es donde está la acción
     — misma ley que el resto de la era (una cosa encendida por pantalla). */
html[data-epoca="5"] .c-prosa .legal-form{
  border: 1px solid var(--e-linea);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .048) 0%,
    rgba(255, 255, 255, .014) 46%,
    rgba(255, 255, 255, .022) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 1px 2px rgba(0, 0, 0, .5);
}
html[data-epoca="5"] .c-prosa .legal-form .field > span{
  font-size: 11px;
  letter-spacing: .145em;
}
html[data-epoca="5"] .c-prosa .legal-form .input{
  border-color: rgba(238, 241, 246, .18);
  background-color: rgba(255, 255, 255, .06);
}
html[data-epoca="5"] .c-prosa .legal-form .input:hover{
  border-color: rgba(238, 241, 246, .34);
}


/* ───────────────────────────────────────────────────────────────────────────
   7.7 · EL IMPRESO EN PANTALLA CORTA
   Dos cosas, y ninguna toca la letra ni el honeypot:
     · la caja del formulario estrecha su margen de página (un móvil no puede
       gastar 24px por lado en el marco de un impreso);
     · el botón deja de alinearse a la izquierda y ocupa el ancho, que es lo que
       hacía la vista vieja en su `@media (max-width:520px)`. Aquí el corte es
       560px, el mismo de §9, para no tener dos móviles distintos en un fichero.
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 560px){
  .c-prosa .legal-form{
    padding-inline: calc(var(--e-pad-caja) * .70);
    padding-block:  calc(var(--e-pad-caja) * .82);
  }
  .c-prosa .legal-form .btn{
    justify-self: stretch;
    width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8 · LA VIDA — la que no hay, y por qué
   Un documento legal está QUIETO. No se calienta, no entra, no respira: cero
   `animation` y cero `transition` en las cinco épocas (DECISIÓN 2 de la
   cabecera). Lo único que responde al usuario está ya escrito arriba y cambia
   de golpe:
     · el enlace en `:hover` (color + trazo del subrayado);
     · el anillo de `:focus-visible`, que lo pone base.css §2;
     · la fila de tabla en `:hover`, que es orientación mientras se lee una
       tabla que scrollea, no un efecto.
   Si algún día alguien quiere darle calor a esta pieza: no. La cola de tres
   párrafos encendiéndose detrás del cursor en una página de doce páginas es
   ruido, y el fondo de la hoja de la época 3 sostiene texto (error 15).
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   9 · PANTALLA CORTA — 390px sin desbordes
   Tres cosas cambian, y ninguna toca la letra:
     · el documento pierde el aire grande de los rótulos (un móvil no tiene
       sitio para 40px de silencio antes de cada epígrafe);
     · el suelo de columna de la tabla baja: 6 columnas siguen sin caber —que es
       lo que se quiere, la tabla scrollea— pero una de dos o tres columnas deja
       de pedir un scroll que no hacía falta;
     · la hoja de la época 3 estrecha sus márgenes de página.
   Lo que NO cambia: la medida (ya la limita el viewport) ni el cuerpo de texto.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 560px){
  .c-prosa{
    --pr-salto: calc(18px + var(--e-aire) * .28);
    --pr-celda: 5.5rem;
  }
  .c-prosa th,
  .c-prosa td{
    padding-inline: calc(var(--e-pad-caja) * .62);
  }
  /* Un impreso justificado en una columna de 320px abre calles blancas: en
     móvil el Papel compone en bandera, como hace `.c-panel__cuerpo`. La
     justificación de §4 ya está acotada a 721px o más: aquí sólo se estrechan
     los márgenes de página de la hoja. */
  html[data-epoca="3"] .c-prosa{
    --pr-pad-x: calc(var(--e-pad-caja) * .70);
    --pr-pad-y: calc(var(--e-pad-caja) * .82);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10 · MOVIMIENTO REDUCIDO — estado final, quieto
   Aquí no hay estado que congelar (§8), así que esto es un cinturón: si alguien
   añade una transición en el futuro, se apaga sola y no hay que acordarse.
   Ninguna información depende del movimiento en esta pieza. El comodín
   `.c-prosa *` cubre también los controles del formulario de §7 — que ya nacen
   sin una sola `transition`, así que aquí no hay nada que apagar.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce){
  .c-prosa,
  .c-prosa *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   VERIFICADO  (2026-08-12 · Chrome real sin cabeza, píxel renderizado)

   Banco: `t7-prosa/` en el scratchpad de la sesión — un fragmento legal de
   mentira con h2 + h3 + p con enlaces, strong, em y code + ul + ol +
   blockquote + hr + UNA TABLA DE 6 COLUMNAS (el caso duro) y otra de 4 (la
   forma real de estas páginas), servido en las cinco épocas con el CSS del
   sistema cargado desde `localhost:8822` y las fuentes self-hosted. A 1200 de
   viewport (columna de lectura de 696px) y a 390 EXACTOS dentro de un iframe.

   ── CONTRASTE · peor píxel bajo cada línea de texto ───────────────────────
   Protocolo §4.1 entero: los rects se sacan con `Range.getClientRects()` —o
   sea, la caja exacta de las letras, no la del bloque—, el fondo se fotografía
   con `color: transparent`, `-webkit-text-fill-color: transparent`,
   `text-shadow: none` y `text-decoration-color: transparent` (el subrayado del
   enlace es letra, no fondo: sin quitarlo se mide el propio trazo), y el hover
   con PUNTERO REAL vía CDP. Se mira píxel a píxel: entre 1.500 y 190.000 por
   diana. Se anota el PEOR y, entre paréntesis, el percentil 5.

     diana         é1 Cueva   é2 Piedra  é3 Papel   é4 Hierro  é5 Cabina
     p             11.63      12.42      11.86      12.03      14.69
     a (enlace)     5.31       6.93       4.55       9.32       6.38
     strong        12.61      13.17      12.63      12.71      16.42
     em            12.66      13.17      12.53      14.12      17.48
     li            12.66      12.48      11.85      14.44      17.79
     h2            11.72      13.47      11.64      10.98      15.34
     h3            12.60      12.87      12.09      14.27      17.14
     code          11.63      14.51      13.01      12.03      14.69
     blockquote    10.81      13.35      11.76      13.72      16.81
     th            +7.30      11.05       6.36       6.56       7.63
     td            14.97      13.84      12.79      14.25      15.85
     td (par)      14.21      13.84      11.77      13.51      16.43
     marcador       4.80       4.30       6.54       6.64       8.79   (≥3)
     a:hover       10.05      12.37       6.55      13.27      12.19
     tr:hover td   13.19      11.76      11.31      11.93      13.91

   PEOR DE TODO EL COMPONENTE: **4,30** (el marcador de lista de la Piedra,
   cuyo umbral es 3:1 por ser una marca) y **4,55** en texto (el enlace del
   Papel). Los dos por encima del suelo, y ninguno por casualidad:

   · EL ENLACE DEL PAPEL, 4,55 · p05 5,15. La rúbrica es lo único de esta hoja
     que vive cerca del suelo, y el peor píxel no es «el papel»: es el CRUCE de
     un corondel con un puntizón —`--e3-verjurado` pinta rgba(26,23,20,.036)
     cada 5px y .060 cada 46px, y donde se cruzan el crema baja de rgb(242,234,
     217) a rgb(221,212,197)—. Ese cruce mide 1 × 1,5 px y cubre el 0,65% de la
     superficie: el 95% de los píxeles bajo el enlace está en 5,15 o mejor.
     Se probó bajar la fibra de .06 a .04 buscando margen y sólo movió dos
     centésimas — confirmación de que el presupuesto se lo lleva el verjurado,
     que es un token COMPARTIDO por cinco superficies más y no se toca desde
     aquí. La fibra se quedó en .04 igualmente, por MATERIA §4.
   · EL MARCADOR DE LA PIEDRA, 4,30. Es una marca (umbral 3:1) y aun así pasa
     el umbral de texto. Los cinco marcadores se pintan con colores PLENOS: con
     alfa, el contraste declarado y el que recibe el ojo dejan de coincidir.

   ── CAJA · ±20% del MISMO fragmento entre épocas ──────────────────────────
     1200px:  é1 2004,8 · é2 2154,8 · é3 2220,7 · é4 2136,6 · é5 2155,9
              → variación **10,8%**  (límite 20%)
     390px:   é1 2903,2 · é2 3007,7 · é3 3095,4 · é4 3162,1 · é5 2974,5
              → variación **8,9%**
   Lo que lo mantiene a raya: la medida en `clamp(32rem, 68ch, 42rem)` en vez de
   `ch` pelado (571px en el Papel, 672px en el Hierro), los dos aires con freno
   `A + aire·k`, y el `hr` de 12px iguales en las cinco.

   ── 390px · dentro de un iframe de 390 exactos ────────────────────────────
     documento:  390/390 en las CINCO (scrollWidth == clientWidth) · cero desborde
     tabla 6col: 693/348 · 753/348 · 679/319 · 725/348 · 709/348 → scrollea
     tabla 4col: cabe entera en escritorio en las cinco; a 390 también scrollea
     desborde por la izquierda (marcadores de lista): 0px en las cinco

   ── QUIETO ────────────────────────────────────────────────────────────────
   0 de 95 elementos del documento tienen `transition-duration` o
   `animation-duration` mayores que cero, en las cinco épocas. Con
   `prefers-reduced-motion: reduce`, exactamente lo mismo: no hay nada que
   congelar. Es la DECISIÓN 2 de la cabecera, medida.

   ── FOCO ──────────────────────────────────────────────────────────────────
   Con Tab de verdad (teclado por CDP) el primer enlace de la prosa recibe
   `:focus-visible` en las cinco: 3px en la Cueva y 2px en las otras, offset 3px.
   En el Papel el anillo sale en TINTA (rgb(26,23,20)) y no en crema, porque
   `.c-prosa` redeclara `--e3-foco` — que es justo el motivo de redeclararlo.

   ── SINTAXIS (error 16) ───────────────────────────────────────────────────
   Compuerta de dos pasos antes de dar nada por bueno: (1) una máquina de
   estados quita los comentarios y exige que TODO lo que quede fuera de las
   llaves sea un selector —una tilde o una raya delatan prosa colada—; (2) se
   cuentan los preludes de la fuente contra las reglas vivas del navegador con
   el mismo CSS cargado en la propia origen. **109 en la fuente ↔ 109 en el
   CSSOM**, 3 at-rules y 5 reglas dentro de ellas. Ni una regla muerta.

   ── GOTCHA DE MEDICIÓN, por si vuelve a morder ────────────────────────────
   Un `color-mix(in oklab, …)` NO computa a `rgb()`: `getComputedStyle` devuelve
   `oklab(L a b)`. Leerlo como si fuera rgb da (0,0,0) y un falso 1,04:1 — pasó
   con el marcador de la Cabina en la primera pasada. El analizador convierte
   oklab a sRGB antes de comparar.

   ── CRITERIO PERCEPTUAL (error 13) ────────────────────────────────────────
   Lado a lado de las cinco a 700px: la esencia se ve en un segundo. El Papel es
   EL impreso del taller —una hoja crema posada sobre la mesa oscura, con la luz
   de la lámpara en su canto de arriba y su sombra caída hacia abajo-izquierda,
   versalitas, filete doble, raya de compositor y rúbrica— y no un PDF gris.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   VERIFICADO · §7 EL FORMULARIO DEL DOCUMENTO
   (2026-08-13 · Chrome 151 real sin cabeza en el puerto 9473 con su propio
    user-data-dir · píxel renderizado)

   Banco: `t7b-prosa-form/` en el scratchpad de la sesión. Envoltorio REAL del
   espejo (`c-marco c-marco--estrecho`, 760px) + `.c-prosa` con un fragmento
   legal (h2/h3/p con enlaces, strong, code, ul, ol, blockquote, hr y una tabla
   de 4 columnas) y **una copia literal del formulario de `routes/legal.js`**,
   honeypot y comentario incluidos, con los valores de plantilla resueltos a
   nombres históricos. CSS del sistema servido desde `localhost:8822` en el
   orden de R3 (base → 5 épocas → 8 vidas → este fichero) y fuentes
   self-hosted. A 1280 de viewport y a 390 EXACTOS dentro de un iframe.

   ── LA TRAMPA · 10/10 (5 épocas × 2 anchos) ───────────────────────────────
   Caja: 1×1px en `x = -9695` (1280) y `x = -9979` (390) — o sea, el borde
   DERECHO del honeypot queda a −9694 / −9978. **Área dentro del viewport: 0,0
   px² en las diez.** `scrollWidth == clientWidth` en las diez (el desbordamiento
   por la izquierda no genera scroll en LTR): 0px de desborde, igual que antes
   de existir esta sección.
   **PÍXELES PINTADOS: 0.** Prueba directa, no inferencia: se fotografía la
   página entera con la trampa y otra vez con `display:none` forzado sobre ella,
   y se restan. 0 píxeles distintos sobre 1280×1225 (Papel) y 1280×1218 (Cabina).
   Y sigue siendo una trampa VIVA: `display:block`, `visibility:visible`, el
   `<input name="website">` en el DOM y enviable — un bot la rellena. Con Tab de
   verdad **nunca recibe el foco** en ninguna de las cinco (`tabindex="-1"`).

   ── CONTRASTE · peor píxel bajo cada diana (protocolo §4.1) ───────────────
   Fondo fotografiado con `color:transparent`, `-webkit-text-fill-color`,
   `text-shadow:none`, `text-decoration-color:transparent` y `caret-color:
   transparent`; el color del texto se lee pintándolo en un canvas de 1×1 (así
   un `color-mix`/oklab no miente). Hover con PUNTERO REAL vía CDP.

     diana            é1 Cueva  é2 Piedra é3 Papel  é4 Hierro é5 Cabina
     clave (peor de 5) 14.97     13.84     12.13     14.25     15.67
     valor escrito     13.36     14.82     13.01     12.44     13.54
     pista (placeholder) 6.51      6.77      7.18      5.55      7.17
     botón             7.01      8.28      5.59     10.95      7.03
     botón :hover     12.57     13.67      7.03     15.60     12.62

   PEOR DE TODO EL FORMULARIO: **5,55** (la pista del Hierro), y en el botón
   **5,59** (la rúbrica seca del Papel con papel crema encima). Los dos por
   encima del 4,5 y ninguno por casualidad: el botón hereda el truco de base
   (`color: var(--e-fondo)`), que en el Papel resuelve a `#F2EAD9` sobre
   `#A8321E` porque `.c-prosa` §4.0 redeclara los dos tokens.

   ── EL FILO DE UNA CASILLA · nivel del SISTEMA, no de este fichero ────────
   El contraste no textual de un control se mide contra la superficie que lo
   rodea. Medido en píxel, mi `.input` CONTRA el `.c-campo__input` oficial en el
   MISMO fondo y la misma época (los dos dentro de esta prosa, banco `05`):

     señal            é1     é2     é3     é4     é5
     MÍA · filo       2.12   1.16   1.73   1.63   1.08
     MÍA · relleno    1.12   1.07   1.16   1.15   1.16
     SISTEMA · filo   1.65   1.06   1.12   1.17   1.19
     SISTEMA · rell.  1.07   1.02   1.09   1.05   1.01

   Ninguna llega a 3:1 — **ni la mía ni la del sistema**, en ninguna época. Una
   casilla de este sistema se dibuja con un filo tenue y un relleno hundido, y
   eso es una decisión de `base.css` §5 + las cinco pieles de `.c-campo__input`,
   no de este componente: subirla es una decisión de SISTEMA (R5) y queda
   REPORTADA, no parcheada por la puerta de atrás. Lo que sí se hizo aquí, que
   es lo que sí me toca: mi casilla queda por encima de la del sistema en 4 de
   las 5 épocas por filo y en las 5 por relleno; y en la Piedra el labio pasó de
   `--pr2-labio` a `--pr2-lumbre` (1,12 → 1,74 medido) porque un corte negro
   sobre una pared negra no dibuja nada — el mismo diagnóstico que ya había
   hecho esta época con su `hr`.

   ── FOCO · con Tab de verdad (teclado por CDP) ────────────────────────────
   Recorrido idéntico en las cinco y sin sorpresas:
     enlace → nombre → email → producto → fecha (3 paradas, son los segmentos
     nativos del `<input type=date>`) → comentario → botón.
   El honeypot NO aparece. Anillo en el botón: 3px en la Cueva y 2px en las
   otras cuatro, offset 3px, y del color de la tinta —
     é1 rgb(242,227,210) · é2 rgb(232,226,213) · é3 **rgb(26,23,20)** ·
     é4 rgb(237,230,218) · é5 rgb(238,241,246)
   El Papel sale en TINTA y no en minio porque `.c-prosa` redeclara `--e3-foco`
   (§4.0) y `epoca-3.css` lo lleva a cualquier `:focus-visible` de la época:
   el anillo del formulario y el de los enlaces del documento son el mismo.

   ── QUIETO ────────────────────────────────────────────────────────────────
   **0 de 350** elementos del documento (70 por época × 5, formulario incluido)
   tienen `transition-duration` o `animation-duration` mayores que cero. El
   botón en hover con puntero real: `transition-duration: 0s` y
   `transform: none` — no se levanta, cambia de golpe. La casilla en hover sólo
   cambia `border-color`, también a 0s. Es la DECISIÓN 2, medida.
   (Gotcha del banco: el `.c-campo` de referencia SÍ trae transiciones — son
   suyas, de `base.css`/`vida-campo.css`. Se retira antes de contar.)

   ── CAJA · ±20% del MISMO fragmento entre épocas ──────────────────────────
     1280px:  é1 1620,6 · é2 1732,7 · é3 1912,5 · é4 1773,2 · é5 1880,0
              → variación **18,0%**   (el mismo fragmento SIN el formulario:
                                       21,8% — o sea, el impreso ACERCA las
                                       épocas en vez de separarlas, porque su
                                       geometría sale casi entera de tokens
                                       frenados)
     390px:   é1 2084,7 · é2 2157,8 · é3 2401,1 · é4 2226,2 · é5 2196,9
              → variación **15,2%**   (sin el formulario: 16,9%)
   Sólo el formulario: 506,4 → 570,7 a 1280 (**12,7%**) y 500,1 → 550,9 a 390
   (**10,2%**).

   ── 390px · dentro de un iframe de 390 exactos ────────────────────────────
     documento:   390/390 en las CINCO (scrollWidth == clientWidth) · 0 desborde
     formulario:  348/348 en cuatro épocas y 319/319 en el Papel (sus márgenes
                  de página) → no scrollea por dentro, no desborda por fuera
     botón:       a la izquierda en escritorio, a todo el ancho por debajo de
                  560px (justo lo que hacía la vista vieja a 520px)
     tabla:       sigue desplazándose, que es lo suyo (431→475 de rejilla en
                  348 de caja) — el formulario no le quitó su scroll
   GOTCHA DEL BANCO, apuntado porque muerde: `body.c-sala` es `display:flex` y un
   ítem de flex tiene `min-width:auto`, o sea min-content. Con un envoltorio
   casero el min-content de la TABLA empujaba el documento a 488px dentro del
   iframe de 390 y todo parecía desbordar. Con el envoltorio real del espejo
   (`c-marco--estrecho`) desaparece. El banco tiene que traer el armazón de
   verdad o mide otra cosa.

   ── SINTAXIS (error 16) · el fichero ENTERO ───────────────────────────────
   Máquina de estados sobre la fuente: 131 comentarios abiertos y cerrados, **0
   cierres huérfanos**, nada fuera de las llaves y ni un prelude con tilde o raya
   (prosa colada). Conteo contra el CSSOM con el mismo CSS en la propia origen:
   **151 reglas de estilo en la fuente ↔ 151 en el CSSOM**, 4 at-rules y 7 reglas
   dentro de ellas. Ni una regla muerta. (Antes de §7: 109 ↔ 109, 3 y 5.)

   ── CRITERIO PERCEPTUAL (error 13) ────────────────────────────────────────
   Miradas las cinco a tamaño real, más el móvil del Papel y de la Cabina. El
   impreso se lee de una: el Papel es una PAPELETA en versalitas sobre la hoja
   con el sello de rúbrica al pie; la Piedra, un registro tallado con los
   cartuchos hundidos; el Hierro, un panel de fichas de chapa con latón; la
   Cueva, huecos de pared con el canto de ocre y las esquinas irregulares que le
   da su `--e-radio`; la Cabina, cristal y filo. Ninguna estrena una idea que el
   documento no tuviera ya.

   ── LO QUE QUEDA REPORTADO (no arreglado aquí, a propósito) ───────────────
   1. La lista desplegada del `<select>` la pinta el sistema operativo.
      `base.css` §16.13 lo tiene resuelto con `appearance: base-select`, pero
      atado a `.c-campo--seleccion .c-campo__input`, y este marcado no trae esas
      clases. `color-scheme` (§7.2) es lo que se puede hacer sin cruzar R5.
   2. El contraste del filo/relleno de las casillas del sistema (tabla de
      arriba): es un nivel de `base.css` §5 y de las cinco pieles.
   3. `.legal-note` (los avisos de la misma página) y `.legal-ident` (el bloque
      de identificación de las cinco) siguen sin vestir. Piezas naturales:
      `c-aviso` y `c-fila-dato`.
   ═══════════════════════════════════════════════════════════════════════════ */