/* ═══════════════════════════════════════════════════════════════════════════ PORTADA · .c-portada (+ __interior __chips __titulo __apagada __sub __extras __cta __meta) Tiradas 8-9 · contrato `19-contrato-tiradas-8-9-lote-6.md` §T8.1 · reglas comunes `13-contrato-cuarta-tirada.md` §0 · doctrina MATERIA del contrato 07 · manual `DESIGN-SYSTEM.md` §4 y §5.1. Orden de carga: base.css → epoca-1…5.css → vida/*.css → extra/c-portada.css ── QUÉ ES ESTA PIEZA ────────────────────────────────────────────────────── El hero. Lo PRIMERO que se ve de la web, y por tanto la pieza de mayor esencia del sistema: si aquí no se distingue una época de otra en un segundo, el sistema entero no se distingue (modo de fallo nº13 de la skill). Consumidores del marcado congelado: `views/landing-manifiesto.ejs` (hero con chips + titular con palabra apagada y palabra encendida + sub + bloque de precio + 2 CTA + 4 cifras) y `views/landing-cinematografica.ejs` (el mismo hero sin `__meta`). Las dos vistas espejo se montan sobre este marcado. LA TESIS, en una frase: **La boca del mundo: la primera bocanada de cada época.** No es una caja con un titular dentro — es el UMBRAL por el que se entra a esa era, y en las cinco es UN OBJETO posado sobre la sala, nunca la sala repintada. ── EL TEATRO, POR ÉPOCA (una idea cada una, ni una más) ─────────────────── 1 · CUEVA LA BOCA DE LA CUEVA AL FUEGO. El hueco de roca se cierra por los cuatro costados y la hoguera —fuera de cuadro, abajo a la izquierda, como en la sala— lame el titular desde abajo. El hero no termina en una línea recta: termina en un LABIO DE ROCA cuyo filo coge la lumbre. Titular soplado en pigmento. 2 · PIEDRA EL MONUMENTO. Una estela: arquitrabe de luz dura arriba, zócalo con su corte negro abajo, filete de bronce y TODO SOBRE EL EJE (la ley de simetría axial de la época manda también aquí: chips, titular, bajada, botones y cifras). Titular en versal tallada con su relieve duro. 3 · PAPEL EL CARTEL RECIÉN TIRADO. Una GRAN hoja de tina clavada a lo ancho de la mesa —la hoja alta, la que acaba de salir de la prensa—, con su verjurado, su fibra, la luz del quinqué por el canto de arriba y a la derecha, el poso que la apoya y la BARBA del papel abajo, por donde vuelve a verse el nogal. (La decisión hoja-vs-taller está razonada más abajo.) 4 · HIERRO LA MARQUESINA. La gran chapa colgada de la viga: plancha con su grano, canto de luz arriba, y abajo el CANTO DE LATÓN con la hilera de remaches que cierra la marquesina de lado a lado. 5 · CABINA EL VISOR SE ENCIENDE. El cristal principal de la cabina: filo de 1px, cuatro escuadras de encuadre y la regla de horizonte al pie. Lo único encendido sigue siendo la palabra (`c-enfasis` ya lo hace en esta época): el visor solo la ENMARCA. Un instrumento no brilla, informa. ── LA DECISIÓN DE LA ÉPOCA 3: HOJA-CARTEL, NO TALLER ────────────────────── El contrato deja abierta la elección con una condición dura (si hoja → protocolo entero) y un juez (el lado-a-lado a 700px tiene que cantar). Se elige HOJA, y por tres razones que se sostienen solas: 1. Las otras cuatro épocas le dan al hero UNA SUPERFICIE propia (boca de roca, estela, chapa, cristal). «El taller con tinta clara» es la única opción que NO le da ninguna: el hero sería exactamente la mesa que ya se ve detrás de toda la página, o sea la única época del sistema con hero invisible. Eso es literalmente el error 13 (pasa las medidas y no se ve). 2. El objeto que es «lo primero que se ve» en un taller de imprenta ES el pliego recién tirado colgado a lo ancho: el cartel. Y «portada», en 1440, es la hoja de título del incunable. La pieza se llama portada. 3. El contraste juega a favor: sobre la hoja alta la tinta de humo mide 14,9 nominal y la rúbrica 5,6 — el frente cómodo de la época. En el taller, en cambio, el titular a tamaño de puerta obligaría a jugarse toda la pieza a la crema sobre el nogal, que es el frente caro. EL RIESGO, DICHO EN ALTO: Bernat rechazó TRES veces «el mundo blanco». Esta pieza no lo devuelve, y la diferencia es estructural, no de matiz: lo blanco es UN OBJETO, no el mundo. El cabezal de la prensa sigue siendo madera, todo lo que va debajo del hero sigue siendo madera, la hoja tiene barba abajo, poso, y la lámpara le entra por donde le entra a las otras nueve superficies. Es la misma relación que `c-portada-curso` con la mesa, a escala de puerta. Queda REPORTADO para su ojo: si dice taller, el cambio es esta sección y la `__meta`, nada más. ── LO QUE ESTE FICHERO NO HACE ──────────────────────────────────────────── · **No redibuja ni restila nada de lo que compone.** `c-distintivo` (chips), `c-boton--grande` (CTA), `c-instrumento` (cifras) y `c-enfasis` (la palabra encendida) entran con su piel y su vida ya validadas: aquí solo se les da sitio (fila, hueco, quién estira, quién se centra). · No toca `base.css`, `epoca-*.css`, `vida/*.css` ni los muestrarios. · Cero JS, cero fuentes, cero peticiones (los SVG van en `data:`). · **Cero animación en reposo y cero calor propio.** La portada no es clicable: lo que se calienta son los botones que lleva dentro, con su vida. El `reveal` del marcado viejo es JS de la página, no de esta pieza. ── GRAMÁTICA DE PSEUDOS ─────────────────────────────────────────────────── `.c-portada` NO es una de las piezas que `base.css` §11 deja preparadas, así que aquí se preparan a mano (posición, capa y `pointer-events`), con la misma convención del sistema: `.c-portada::before` → MATERIA · z-index:-1 · bajo el texto, sobre el fondo `.c-portada::after` → LUZ · z-index: 1 · sobre todo, sin ratón. ⚠ REGLA PROPIA: en las cinco épocas esta capa está ACOTADA a un canto (banda inferior en 1/3/4, esquinas y filos en 2/5). Una capa de luz a sangre sobre el cuerpo del hero bajaría de golpe el contraste del titular, la bajada y las cuatro cifras — los cinco textos a la vez. `.c-portada__meta::before` → EL FILO que abre la banda de cifras. `__interior` (que es un `c-marco`), `__titulo`, `__chips`, `__sub`, `__extras`, `__cta` y `__apagada` quedan con sus dos ganchos SIN GASTAR. ── `__apagada`: LA CONTRAPARTIDA DE `c-enfasis` ─────────────────────────── La palabra que se APAGA dentro del titular. NO es decoración: es retórica — «Deja de USAR Claude» solo funciona si «usar» se lee. Por eso es tinta secundaria y se mide como texto (≥4.5:1), no como adorno. Cada época le da el material que le corresponde a lo que perdió la luz: pigmento lavado, piedra sin pulir, la segunda pasada de tinta, metal sin corriente, el gris más bajo que sigue siendo texto. Es elemento propio de la portada y no una utilidad global: fuera de un titular no significa nada. ── `__meta`: EL FILO QUE ABRE LA BANDA (decisión documentada) ───────────── El contrato pide «separar las cifras con filos de época». Las cifras son `c-instrumento`, que en las CINCO épocas ya trae su propia caja con su material (fragmento de pared, pedestal, cédula, placa, cristal): meter además un filete vertical en el hueco duplicaría un borde que ya está dibujado, y restilar el instrumento está prohibido. Así que el filo de época es el que ABRE LA BANDA — la misma regla que el marcado viejo tenía como `border-top: 1px solid var(--line)` en `.hero__meta`, ahora dibujada en el material de cada era: trazo de pigmento soplado · filete de bronce con su corte · doble filete de imprenta · hilo de latón con su sombra · línea de 1px. Se pinta en `__meta::before`, que es gancho propio. ── LAS TRAMPAS QUE ESTE FICHERO ESQUIVA (todas medidas o documentadas) ──── 1. **Márgenes dentro de rejilla (error 19).** `__interior` es `display:grid` y el marcado congelado mete un `

` y un `

` dentro. `base.css` solo resetea el `margin-block` de `.c-cabecera__titulo`, no el de estos: sin el reset de abajo, los 0,67em del `h1` (44px con el titular a 66px) entraban ENTEROS arriba y abajo de su fila y partían la retícula. 2. **El fondo jamás en `transition` (error 15).** Ni aquí ni en ninguna de las cinco pieles hay una sola propiedad en transición: el hero sostiene cinco textos y al saltar de la 5 a la 3 el suelo viajaría 1.400 ms mientras la letra cambia de golpe. No hay transición porque no hay calor: la portada no responde a la mano. 3. **Anton pesa 400 (error 7).** El titular usa `var(--e-peso-display)`, que la época 1 ya declara a 400. Si alguna vez se escribe un peso a mano aquí, la Cueva se emborrona. 4. **Un pseudo transformado empuja el scroll (error 17).** `.c-portada` lleva `overflow: hidden`: el labio de roca, la barba del papel y la hilera de remaches viven dentro de su caja pase lo que pase, y el titular torcido de la Cueva tampoco puede empujar `scrollWidth` a 390. 5. **La época 2 no cabe a tamaño de puerta.** Su titular es versal con `.14em` de tracking: al mismo cuerpo que las demás se iría a una línea más y rompería el ±20%. Se le baja el clamp, exactamente como hace `epoca-2.css` con `.c-cabecera__titulo`, y por el mismo motivo. 6. **`background-position` en % no es un desplazamiento (error 11).** Aquí no se usa ni un porcentaje de posición: todas las capas van ancladas a `top`/`bottom`/`left`/`right` o a un tamaño de tesela conocido. ── ±20% DE ALTO ENTRE ÉPOCAS ────────────────────────────────────────────── Todo el aire vertical de la pieza sale de la escala COMPRIMIDA (`A + aire·k`, §4.6 del manual), nunca de `--e-aire` en crudo, y `__interior` renuncia al `padding-block` que trae `c-marco` para que no haya dos fuentes de aire. Las cifras medidas están al final del fichero. ── CONTRASTE (protocolo de `DESIGN-SYSTEM.md` §4.1) ─────────────────────── Medido sobre el PÍXEL RENDERIZADO, con el texto retirado Y SUS SOMBRAS (`color:transparent; text-shadow:none`) para leer el fondo, en las 5 épocas × los 5 textos de la pieza (titular · palabra apagada · palabra encendida · bajada · etiqueta de cifra), y en la época 3 sobre los DOS frentes. Cifras al final del fichero. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 1 · ESTRUCTURA — solo `var(--e-*)` ═══════════════════════════════════════════════════════════════════════════ */ .c-portada{ position: relative; isolation: isolate; /* la caja de la pieza es un umbral, no una tarjeta: llega de canto a canto */ display: block; /* ver trampa 4: ninguna capa de materia puede empujar el scroll */ overflow: hidden; /* ESCALA COMPRIMIDA. Con `--e-aire` en crudo (12px → 40px) la puerta de la Cabina mediría 56px más de aire vertical que la de la Cueva solo aquí. */ padding-block: calc(52px + var(--e-aire) * .46) calc(40px + var(--e-aire) * .40); } /* Los ganchos, preparados a mano: `.c-portada` no está en la lista de §11 de base.css, así que aquí no viene nada puesto. Sin `content`: lo pone cada piel, y una pieza sin piel no dibuja capas fantasma. */ .c-portada::before, .c-portada::after, .c-portada__meta::before{ position: absolute; pointer-events: none; } .c-portada::before{ inset: 0; z-index: -1; } .c-portada::after{ inset: 0; z-index: 1; } /* `__interior` ES un `c-marco`: ancho, centrado y sangrado los pone él. Aquí solo se le da el ritmo vertical y se le quita SU aire para que no haya dos fuentes del mismo hueco (ver ±20%). */ .c-portada__interior{ display: grid; justify-items: start; row-gap: calc(13px + var(--e-aire) * .17); padding-block: 0; } /* Trampa 1: dentro de una rejilla los márgenes del navegador NO colapsan. */ .c-portada__titulo, .c-portada__sub{ margin-block: 0; } /* ── EL TITULAR · tamaño de puerta ──────────────────────────────────────── */ .c-portada__titulo{ position: relative; isolation: isolate; max-width: 100%; min-width: 0; font-family: var(--e-display); /* el peso lo pone la época: la Cueva lo baja a 400 porque Anton solo tiene ese (error 7) y las demás suben hasta el 700 que su fuente sí carga */ font-weight: var(--e-peso-display); font-size: clamp(33px, 5.6vw, 64px); line-height: 1.02; letter-spacing: var(--e-tracking); color: var(--e-tinta); text-wrap: balance; overflow-wrap: break-word; } /* LA PALABRA APAGADA — tinta secundaria, y se lee (≥4.5:1 en las cinco). */ .c-portada__apagada{ color: var(--e-tinta-2); } /* ── LA BAJADA · a ancho de lectura ─────────────────────────────────────── */ .c-portada__sub{ max-width: min(100%, 56ch); font-family: var(--e-cuerpo); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: var(--e-tinta-2); overflow-wrap: break-word; } /* el marcado congelado del consumidor mete dentro de la bajada */ .c-portada__sub b, .c-portada__sub strong{ color: var(--e-tinta); font-weight: var(--e-peso-fuerte); } /* ── LAS TRES FILAS DE COLOCACIÓN ─────────────────────────────────────────── `__chips`, `__extras` y `__cta` son SLOTS: la página mete dentro `c-distintivo`, el bloque de precio y los `c-boton--grande`. Aquí solo hay fila, hueco y ajuste — ni un color, ni un borde, ni un tamaño de letra. */ .c-portada__chips, .c-portada__extras, .c-portada__cta{ display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px + var(--e-aire) * .16); min-width: 0; max-width: 100%; } .c-portada__cta{ margin-block-start: calc(8px + var(--e-aire) * .20); } /* ── LA BANDA DE CIFRAS ───────────────────────────────────────────────────── Compone `c-instrumento` sin tocarlo. `auto-fit` + `minmax(min(…),1fr)` es lo que hace que cuatro cifras sean cuatro columnas en la puerta, dos en la tableta y dos en el móvil, sin una sola media query de columnas. */ .c-portada__meta{ position: relative; isolation: isolate; justify-self: stretch; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr)); gap: calc(12px + var(--e-aire) * .18); margin-block-start: calc(12px + var(--e-aire) * .20); padding-block-start: calc(16px + var(--e-aire) * .20); } /* EL FILO que abre la banda (ver la nota de la cabecera). La estructura solo deja la caja y el grosor de la época; el material lo pone cada piel. */ .c-portada__meta::before{ content: ""; inset: 0 0 auto 0; height: var(--e-grosor); background: var(--e-linea); } /* ═══════════════════════════════════════════════════════════════════════════ 2 · ÉPOCA 1 · LA CUEVA — LA BOCA DE LA CUEVA AL FUEGO El hero es el hueco: roca por los cuatro costados, la hoguera fuera de cuadro abajo a la izquierda —la MISMA que la sala, no una segunda lumbre— lamiendo el titular, y un labio de piedra abajo por donde la cueva se cierra. PRESUPUESTO DE LUZ: la lamida entra a α .125 en su punto más fuerte y su núcleo cae FUERA del lienzo (abajo y a la izquierda), igual que hace la hoguera del armazón — por eso lo que entra en pantalla es la cola del halo y no la bola. Empezó en .085 y se subió tras MIRARLA: a esa dosis existía en el código y no en la pantalla. La subida no costó ni una décima de contraste porque los cinco textos viven arriba y a la izquierda del charco: medido antes y después, la palabra apagada se queda en 6,53:1 en los dos casos. ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="1"] .c-portada{ /* el hueco es MÁS HONDO que la sala: se entra en la piedra */ background-color: var(--e1-carbon); background-image: var(--e1-moteado), var(--e1-roca); background-size: 190px 190px, 600px 600px; background-repeat: repeat, repeat; } /* MATERIA · el hueco y la lumbre. Las dos capas viven aquí (z-index:-1) y no en `::after`: una luz por encima del titular a tamaño de puerta le comería el contraste a la única palabra que la retórica apaga. */ html[data-epoca="1"] .c-portada::before{ content: ""; background-image: /* LA LAMIDA DE LA HOGUERA. Núcleo fuera del lienzo, abajo a la izquierda: una hoguera se ve por su luz, no por su bola (misma ley que la sala). */ radial-gradient(82vw 104% at -8% 116%, rgba(255, 106, 31, .125) 0%, rgba(255, 106, 31, .052) 44%, transparent 76%), /* EL HUECO: la piedra se cierra por los cuatro costados. Solo OSCURECE, o sea que sube el contraste de los cinco textos donde cae. */ radial-gradient(104% 118% at 34% 46%, transparent 22%, rgba(5, 3, 2, .42) 64%, rgba(5, 3, 2, .74) 100%); } /* LUZ · EL LABIO DE ROCA. Banda acotada al canto inferior: la cueva no acaba en una línea recta. El filo del labio coge la lumbre —sin ese hilo de ocre la silueta no existe: roca oscura contra pared oscura no dibuja nada, que es lo que ya midió el canto roto de la cornisa en `epoca-1.css` §13. */ html[data-epoca="1"] .c-portada::after{ content: ""; inset: auto 0 0 0; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='26' viewBox='0 0 620 26'%3E%3Cpath d='M0 26 V13 C36 6 62 15 96 11 C132 7 158 17 196 13 C232 9 256 3 292 8 C330 13 352 18 388 14 C424 10 448 4 486 9 C522 14 548 17 584 12 C598 10 610 12 620 14 V26Z' fill='%230B0705'/%3E%3Cpath d='M0 13 C36 6 62 15 96 11 C132 7 158 17 196 13 C232 9 256 3 292 8 C330 13 352 18 388 14 C424 10 448 4 486 9 C522 14 548 17 584 12 C598 10 610 12 620 14' fill='none' stroke='%23C97A3D' stroke-opacity='.42' stroke-width='1.6'/%3E%3C/svg%3E"); background-size: 620px 26px; background-repeat: repeat-x; background-position: left bottom; } /* EL TITULAR SOPLADO. Mismo pigmento y misma inclinación que el titular de sección de la época (`epoca-1.css` §10), a escala de puerta: los halos son OCRE y TIERRA, nunca oscuros, así que no tocan el contraste de la cal. */ html[data-epoca="1"] .c-portada__titulo{ font-weight: 400; /* Anton solo tiene este (error 7) */ line-height: .94; width: fit-content; max-width: 100%; rotate: -.55deg; transform-origin: left center; text-shadow: 0 0 1px rgba(201, 122, 61, .58), 1px 1px 0 rgba(201, 122, 61, .26), -1px 0 0 rgba(140, 59, 34, .22), 0 0 30px rgba(255, 106, 31, .16), 0 0 76px rgba(255, 106, 31, .09); } /* LA PALABRA APAGADA · el pigmento que se lavó: sin borde soplado y sin halo. No es que se vea menos — es que no la sopló nadie. */ html[data-epoca="1"] .c-portada__apagada{ color: var(--e-tinta-2); text-shadow: none; } /* EL FILO DE LA BANDA · el trazo de pigmento soplado bajo lo importante. */ html[data-epoca="1"] .c-portada__meta::before{ height: 8px; background-color: transparent; background-image: var(--e1-trazo); background-size: 300px 8px; background-repeat: repeat-x; } /* ═══════════════════════════════════════════════════════════════════════════ 3 · ÉPOCA 2 · LA PIEDRA — EL MONUMENTO Una estela: el bloque, su arquitrabe arriba (filo de luz + corte negro) y su zócalo abajo rematado por el filete de bronce. Y la ley de la época aplicada sin rebaja: SIMETRÍA AXIAL. Todo lo que hay dentro se pone sobre el eje — chips, titular, bajada, botones y cifras—, que es la única época del sistema donde el hero se centra. Es la misma decisión que ya tomó `c-instrumento` en esta era («la cifra, sobre el eje del pedestal»). ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="2"] .c-portada{ background-color: var(--e-fondo); background-image: var(--e2-polvo), var(--e2-veta); background-repeat: repeat, no-repeat; /* EL RELIEVE DURO de la época, a escala de sala: la estela sobresale del muro. Ni un desenfoque, como manda la cabecera de `epoca-2.css`. */ box-shadow: inset 0 2px 0 var(--e2-brillo), inset 0 -3px 0 var(--e2-corte); } /* MATERIA · la cara del sillar. Solo el degradado de la piedra: la veta y el polvo ya van en la caja, y una tercera trama sobre un titular de 64px sería ruido, no material. */ html[data-epoca="2"] .c-portada::before{ content: ""; background-image: radial-gradient(88% 96% at 50% 34%, var(--e-fondo-2), var(--e-fondo) 76%); } /* LUZ · EL FILETE DE BRONCE DEL ZÓCALO. Acotado al canto inferior: dos rayas duras (bronce + su corte) que rematan el monumento. */ html[data-epoca="2"] .c-portada::after{ content: ""; inset: auto 0 0 0; height: 5px; background-image: linear-gradient(var(--e2-bronce) 0 0), linear-gradient(var(--e2-bronce-hondo) 0 0), linear-gradient(var(--e2-corte) 0 0); background-size: 100% 2px, 100% 1px, 100% 2px; background-position: top, center, bottom; background-repeat: no-repeat, no-repeat, no-repeat; } /* EL EJE. La única piel que cambia la colocación, y es la ley de la época. */ html[data-epoca="2"] .c-portada__interior{ justify-items: center; text-align: center; } html[data-epoca="2"] .c-portada__chips, html[data-epoca="2"] .c-portada__extras, html[data-epoca="2"] .c-portada__cta{ justify-content: center; } html[data-epoca="2"] .c-portada__sub{ margin-inline: auto; } /* EL TITULAR TALLADO. Versal con el tracking de la época y el relieve duro de toda la era (luz arriba, hueco y negro debajo). El clamp baja al 77% del de las demás por lo mismo que `epoca-2.css` lo baja en `.c-cabecera__titulo`: la caja alta con .14em ocupa muchísimo más y se iría a una línea más. */ html[data-epoca="2"] .c-portada__titulo{ font-size: clamp(23px, 4.3vw, 49px); line-height: 1.12; text-transform: uppercase; letter-spacing: var(--e-tracking); text-indent: var(--e-tracking); /* compensa el tracking al centrar */ text-shadow: 0 -1px 0 var(--e2-brillo), 0 2px 0 var(--e2-hueco), 0 3px 0 rgba(0, 0, 0, .72); } /* LA PALABRA APAGADA · la piedra que no se pulió: conserva el corte que la talla deja debajo, pierde el filo de luz que la pule por arriba. */ html[data-epoca="2"] .c-portada__apagada{ color: var(--e-tinta-2); text-shadow: 0 2px 0 var(--e2-hueco), 0 3px 0 rgba(0, 0, 0, .72); } /* EL FILO DE LA BANDA · filete de bronce con su corte, como todo canto aquí. */ html[data-epoca="2"] .c-portada__meta::before{ height: 3px; background-color: transparent; background-image: linear-gradient(var(--e2-bronce-hondo) 0 0), linear-gradient(var(--e2-corte) 0 0); background-size: 100% 2px, 100% 1px; background-position: top, bottom; background-repeat: no-repeat, no-repeat; } /* ═══════════════════════════════════════════════════════════════════════════ 4 · ÉPOCA 3 · EL PAPEL — EL CARTEL RECIÉN TIRADO ⚠ ESTA ES UNA SUPERFICIE DE PAPEL NUEVA, y por eso lo PRIMERO que hace es REDECLARAR EL PROTOCOLO DE CONTEXTO ENTERO (`DESIGN-SYSTEM.md` §4.4.1, regla 3). Sin esto, todo lo que cae dentro —chips, botones, cédulas, la palabra encendida— hereda la crema del TALLER sobre la crema de la HOJA: 1,04:1 medido en el precedente del desplegable. El papel es `--e3-hoja-alta`, y no por gusto: es «la recién tirada», que es exactamente lo que un cartel es, y además deja un escalón por debajo para que las cédulas de `__meta` (que son `--e3-hoja`) se lean como papeles distintos posados encima y no como agujeros del mismo tono. LA LEY DE LA LÁMPARA se obedece con los tokens de la época, sin inventar ni un foco: `--e3-luz-hoja` (ración entera — es una hoja grande) por el canto de arriba y a la derecha, `--e3-poso` para apoyarla en la mesa, y la sombra sale por el rincón contrario. La fibra va en `::before` con `multiply`, copiando el patrón de `.c-panel`, y el verjurado en la caja, NUNCA dentro del pseudo con opacidad (ahí se pintaría a media milésima). ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="3"] .c-portada{ /* — EL CONTEXTO DE PAPEL: el bloque entero, igual que `.c-panel` — */ --e3-texto: var(--e3-tinta-hoja); --e3-texto-2: var(--e3-tinta-hoja-2); --e3-filete: var(--e3-linea-hoja); --e3-rojo: var(--e3-rubrica); --e3-rojo-hondo: var(--e3-tinta-honda); --e3-verde: var(--e3-ok-hoja); --e3-regla: var(--e3-tinta-hoja); --e3-papel-local: var(--e3-hoja-alta); --e3-foco: var(--e3-tinta-hoja); background-color: var(--e3-hoja-alta); background-image: var(--e3-verjurado), var(--e3-luz-hoja); color: var(--e3-texto); font-variant-numeric: oldstyle-nums; font-feature-settings: "onum" 1, "kern" 1, "liga" 1; /* LA HOJA POSADA: cantos de luz arriba y a la derecha, cantos hundidos abajo y a la izquierda, sombra en dos tiempos hacia abajo-izquierda. */ box-shadow: var(--e3-poso); /* la barba de abajo se pinta en `::after`: se le reserva el hueco */ padding-block-end: calc(52px + var(--e-aire) * .52); } /* MATERIA · SOLO la fibra de trapo, en `multiply` como en `.c-panel`. Esta capa únicamente puede OSCURECER, y por eso el techo lo pone la rúbrica: con el verjurado ya puesto por la caja, .07 es lo que admite el papel. */ html[data-epoca="3"] .c-portada::before{ content: ""; background-image: var(--e3-fibra); background-size: 260px 260px; mix-blend-mode: multiply; opacity: .07; } /* LUZ · LA BARBA DEL PAPEL. Banda acotada al canto inferior: la hoja se acaba con el borde deckle del papel de tina y debajo vuelve el nogal de la mesa. Es lo que impide que el cartel se lea como «la página se ha vuelto blanca»: un rectángulo blanco a sangre no es una hoja, es un mundo. El color del nogal va HORNEADO en el SVG porque un `data:` no puede leer una propiedad personalizada; es el mismo `--e-fondo` de la época. */ html[data-epoca="3"] .c-portada::after{ content: ""; inset: auto 0 0 0; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='30' viewBox='0 0 480 30'%3E%3Cpath d='M0 30 V11.5 C22 9.4 38 12.6 60 10.8 C84 8.8 104 13.4 128 11.4 C150 9.6 168 6.8 192 9.2 C218 11.8 236 14.2 260 12 C284 9.8 302 7.4 326 9.6 C350 11.8 368 14 392 11.6 C416 9.2 436 12.4 458 10.6 C466 9.9 473 10.6 480 11.2 V30Z' fill='%231A1512'/%3E%3Cpath d='M0 11.5 C22 9.4 38 12.6 60 10.8 C84 8.8 104 13.4 128 11.4 C150 9.6 168 6.8 192 9.2 C218 11.8 236 14.2 260 12 C284 9.8 302 7.4 326 9.6 C350 11.8 368 14 392 11.6 C416 9.2 436 12.4 458 10.6 C466 9.9 473 10.6 480 11.2' fill='none' stroke='%23000' stroke-opacity='.34' stroke-width='2.4'/%3E%3C/svg%3E"), /* la tinta se encharca en el canto: el papel se oscurece al llegar a la barba. Solo oscurece, o sea que no gasta presupuesto de contraste. */ linear-gradient(180deg, transparent 0%, rgba(58, 40, 24, .16) 100%); background-size: 480px 30px, 100% 12px; background-position: left bottom, left bottom 11px; background-repeat: repeat-x, repeat-x; } /* EL TITULAR DEL CARTEL. La Garamond de un incunable no es negrita: el peso lo daba el cuerpo del tipo. Cifras elzevirianas y ligaduras, y ni una sombra — sobre papel la tinta no proyecta. */ html[data-epoca="3"] .c-portada__titulo{ line-height: 1.08; color: var(--e3-texto); text-shadow: none; } /* LA PALABRA APAGADA · la segunda pasada, la que salió floja de la prensa. */ html[data-epoca="3"] .c-portada__apagada{ color: var(--e3-texto-2); } html[data-epoca="3"] .c-portada__sub{ color: var(--e3-texto-2); } html[data-epoca="3"] .c-portada__sub b, html[data-epoca="3"] .c-portada__sub strong{ color: var(--e3-texto); } /* EL FILO DE LA BANDA · el doble filete de una hoja de título: uno grueso y uno fino, que es como la imprenta separa el cuerpo del colofón. */ html[data-epoca="3"] .c-portada__meta::before{ height: 4px; background-color: transparent; background-image: linear-gradient(var(--e3-texto) 0 0), linear-gradient(var(--e3-filete) 0 0); background-size: 100% 2px, 100% 1px; background-position: top, bottom; background-repeat: no-repeat, no-repeat; } /* seleccionar sobre una hoja no puede pintar crema sobre crema */ html[data-epoca="3"] .c-portada ::selection, html[data-epoca="3"] .c-portada::selection{ background: rgba(240, 128, 63, .34); color: var(--e3-tinta-hoja); } /* ═══════════════════════════════════════════════════════════════════════════ 5 · ÉPOCA 4 · EL HIERRO — LA MARQUESINA La gran chapa que cuelga de la viga sobre la entrada: plancha con su grano, canto de luz arriba y, abajo, EL CANTO DE LATÓN con la hilera de remaches que la cierra de lado a lado. POR QUÉ LOS REMACHES VAN EN HILERA Y NO EN LAS ESQUINAS: la viga (`c-barra-marca`) ya lleva cuatro remaches, uno por esquina. Repetir ese dibujo aquí haría de la marquesina una segunda viga. Una hilera continua es otra pieza de la misma máquina: la costura del canto que cierra la chapa. ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="4"] .c-portada{ background-color: var(--e-fondo); background-image: var(--e4-grano), var(--e4-plancha); box-shadow: inset 0 1px 0 var(--e4-brillo-alto), /* el canto de arriba coge luz */ inset 0 -2px 0 var(--e4-sombra-dura); /* y el de abajo se hunde */ } /* MATERIA · la luz de trabajo de la nave resbalando por la chapa. Cae desde arriba, que es de donde cuelga la lámpara del armazón: la marquesina no trae una luz propia, refleja la que ya hay. */ html[data-epoca="4"] .c-portada::before{ content: ""; background-image: linear-gradient(180deg, rgba(255, 226, 190, .036) 0%, rgba(255, 226, 190, .010) 34%, transparent 62%), radial-gradient(96% 62% at 50% 108%, var(--e4-hollin), transparent 68%); } /* LUZ · EL CANTO DE LATÓN Y SU COSTURA DE REMACHES. Acotado al canto inferior. Los remaches son los dos degradados que ya define la época (cabeza + brillo) sobre una tesela de 78px: el radio del círculo es absoluto, así que el tamaño de la tesela solo decide cada cuánto aparece. */ html[data-epoca="4"] .c-portada::after{ content: ""; inset: auto 0 0 0; height: 16px; background-image: var(--e4-remache-luz), var(--e4-remache), linear-gradient(var(--e4-laton-medio) 0 0), linear-gradient(var(--e4-laton-filo-2) 0 0), linear-gradient(var(--e4-sombra-dura) 0 0); background-size: 78px 12px, 78px 12px, 100% 2px, 100% 1px, 100% 3px; background-position: left 22px bottom 2px, left 22px bottom 2px, left top, left top 2px, left bottom; background-repeat: repeat-x, repeat-x, no-repeat, no-repeat, no-repeat; } /* EL TITULAR DE CARTEL. La didona de 1879 con su óptico automático: a 64px la fuente adelgaza sola los finos, que es exactamente lo que hace un cartel. */ html[data-epoca="4"] .c-portada__titulo{ font-weight: 700; font-optical-sizing: auto; line-height: 1.03; } /* LA PALABRA APAGADA · el metal que no coge la corriente. La palabra encendida de esta época lleva el canto de luz ARRIBA (`epoca-4.css`, énfasis); ésta lleva justo lo contrario, la sombra dura DEBAJO y ninguna luz. ⚠ MEDIDO, y por eso NO usa `--e4-apagado`: ese token (#8B8275) es el del control deshabilitado, y sobre el canto iluminado de la marquesina se queda en 3,63:1 — falla incluso sobre la plancha desnuda, antes de mi capa. Con `--e-tinta-2` sube a 5,14 ✔ y el canto de luz de la chapa bajó además de .052 a .036 para dejarle aire. */ html[data-epoca="4"] .c-portada__apagada{ color: var(--e-tinta-2); text-shadow: 0 1px 0 var(--e4-sombra-dura); } /* EL FILO DE LA BANDA · el hilo de latón con su sombra, el mismo remate que lleva cualquier canto de esta era. */ html[data-epoca="4"] .c-portada__meta::before{ height: 4px; background-color: transparent; background-image: linear-gradient(var(--e4-laton-filo) 0 0), linear-gradient(var(--e4-laton-filo-2) 0 0), linear-gradient(var(--e4-sombra-dura) 0 0); background-size: 100% 2px, 100% 1px, 100% 1px; background-position: top, center, bottom; background-repeat: no-repeat, no-repeat, no-repeat; } /* ═══════════════════════════════════════════════════════════════════════════ 6 · ÉPOCA 5 · LA CABINA — EL VISOR SE ENCIENDE El cristal principal: relleno translúcido, filo de 1px, las CUATRO ESCUADRAS DE ENCUADRE de un instrumento y la regla de horizonte al pie. LO ENCENDIDO SIGUE SIENDO UNA SOLA COSA, y no es el marco: es la palabra (`c-enfasis`, que en esta época se enciende con su halo). Las escuadras van en `--e5-grafito`, el token que la época reserva para trazos y puntos y que tiene prohibido ser texto. Un visor no brilla: enmarca lo que brilla. ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="5"] .c-portada{ background-image: var(--e5-cristal); box-shadow: inset 0 1px 0 var(--e5-realce); } /* MATERIA · el aire del visor. Un velo frío que se apaga hacia abajo, para que el cristal tenga profundidad y no sea un rectángulo translúcido. */ html[data-epoca="5"] .c-portada::before{ content: ""; background-image: linear-gradient(180deg, rgba(255, 255, 255, .022) 0%, transparent 46%), radial-gradient(72% 58% at 50% 118%, rgba(0, 0, 0, .34), transparent 72%); } /* LUZ · LAS CUATRO ESCUADRAS Y EL HORIZONTE. Ocho segmentos de 1px en las esquinas y la regla al pie: todo en los cantos, nada sobre el cuerpo — una capa de luz encima del titular a 64px le costaría contraste a los cinco textos a la vez. */ html[data-epoca="5"] .c-portada::after{ content: ""; background-image: linear-gradient(var(--e5-grafito) 0 0), linear-gradient(var(--e5-grafito) 0 0), linear-gradient(var(--e5-grafito) 0 0), linear-gradient(var(--e5-grafito) 0 0), linear-gradient(var(--e5-grafito) 0 0), linear-gradient(var(--e5-grafito) 0 0), linear-gradient(var(--e5-grafito) 0 0), linear-gradient(var(--e5-grafito) 0 0), linear-gradient(var(--e-linea) 0 0); background-size: 24px 1px, 1px 24px, 24px 1px, 1px 24px, 24px 1px, 1px 24px, 24px 1px, 1px 24px, 100% 1px; background-position: left 18px top 18px, left 18px top 18px, right 18px top 18px, right 18px top 18px, left 18px bottom 18px, left 18px bottom 18px, right 18px bottom 18px, right 18px bottom 18px, left bottom; background-repeat: no-repeat; } html[data-epoca="5"] .c-portada__titulo{ font-weight: 600; line-height: 1; } /* LA PALABRA APAGADA · el gris más bajo que la época admite como texto. */ html[data-epoca="5"] .c-portada__apagada{ color: var(--e5-tinta-3); } /* EL FILO DE LA BANDA · la línea de 1px, y nada más. Aquí el filo ES el material: la Cabina no tiene relieve que dibujar. */ html[data-epoca="5"] .c-portada__meta::before{ height: 1px; background: var(--e-linea); } /* ═══════════════════════════════════════════════════════════════════════════ 7 · VIDA — no hay Y es una decisión, no un olvido. La portada no es clicable, no cambia de estado y no responde a la mano: lo que se calienta dentro de ella son los `c-boton--grande` y los `c-instrumento`, cada uno con la vida que ya tiene validada. En reposo NO SE MUEVE NADA (contrato §T8.1) y no hay una sola propiedad en `transition` — en particular ninguna capa de fondo, que aquí sostiene cinco textos (error 15). El único movimiento que la página puede traer es su `reveal.js`, que es JS de la vista y no de esta pieza. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 8 · 390px — sin desbordes La banda de cifras ya baja sola a dos columnas por el `auto-fit`. Lo que sí hay que recoger es el aire de puerta: a 390 una puerta de 1.280 no cabe. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 560px){ /* A 390 el aire de la época se aplana casi del todo: es donde más se nota la diferencia de `--e-aire` (12px de la Cueva contra 33 del Hierro) y donde menos margen hay, porque las piezas compuestas —los chips, que ahí ya doblan a dos filas en tres épocas, y la cédula del Papel— se llevan solas casi 110px de diferencia que este fichero no puede tocar sin restilarlas. */ .c-portada{ padding-block: calc(46px + var(--e-aire) * .06) calc(36px + var(--e-aire) * .06); } .c-portada__interior{ row-gap: calc(16px + var(--e-aire) * .02); } .c-portada__cta{ margin-block-start: calc(10px + var(--e-aire) * .02); } .c-portada__meta{ gap: calc(15px + var(--e-aire) * .02); margin-block-start: calc(11px + var(--e-aire) * .02); padding-block-start: calc(15px + var(--e-aire) * .02); } /* la versal de la Piedra a 23px se iría a cuatro líneas en 350px de ancho */ html[data-epoca="2"] .c-portada__titulo{ font-size: 21px; } /* los dos CTA se ponen uno debajo del otro y a todo lo ancho: a 390 dos botones de puerta en la misma fila dejan el segundo en dos líneas */ .c-portada__cta{ display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } .c-portada__cta > *{ width: 100%; } /* el labio, la barba y la costura se recogen con la caja */ html[data-epoca="1"] .c-portada::after{ height: 18px; background-size: 460px 18px; } html[data-epoca="3"] .c-portada{ padding-block-end: calc(42px + var(--e-aire) * .06); } html[data-epoca="3"] .c-portada::after{ height: 22px; background-size: 360px 22px, 100% 9px; background-position: left bottom, left bottom 8px; } html[data-epoca="4"] .c-portada::after{ height: 13px; background-size: 62px 10px, 62px 10px, 100% 2px, 100% 1px, 100% 2px; background-position: left 14px bottom 2px, left 14px bottom 2px, left top, left top 2px, left bottom; } html[data-epoca="5"] .c-portada::after{ background-position: left 12px top 12px, left 12px top 12px, right 12px top 12px, right 12px top 12px, left 12px bottom 12px, left 12px bottom 12px, right 12px bottom 12px, right 12px bottom 12px, left bottom; } } /* ═══════════════════════════════════════════════════════════════════════════ 9 · MOVIMIENTO REDUCIDO — estado final, quieto Esta pieza no anima nada, así que aquí no hay nada que apagar. El bloque se deja igualmente como red: si alguien añade un día una capa con vida, esta regla la deja quieta antes de que llegue a producción. ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ .c-portada, .c-portada::before, .c-portada::after, .c-portada__titulo, .c-portada__meta::before{ animation: none; transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ VERIFICADO — las cifras de esta pieza (2026-08-13, Chrome headless por CDP) Banco: el hero completo del consumidor (2 chips + titular con palabra apagada y palabra encendida + bajada con + fila de precio + 2 CTA de puerta + 4 cifras), armazón puesto y contenido debajo para ver la sala. ── SINTAXIS (error 16) ──────────────────────────────────────────────────── 65 bloques en el fuente = 65 reglas en el CSSOM · 2 at-reglas · 297 declaraciones. Ni un comentario cierra dentro de otro. ── ALTO DE CAJA · el ±20% ───────────────────────────────────────────────── Alto de `.c-portada` en las cinco épocas, en px: 1 2 3 4 5 variación 1280px 628,2 668,3 717,1 698,8 710,0 +14,2 % 700px 657,2 731,9 771,4 749,8 749,5 +17,4 % 390px (iframe) 710 775 846 804 808 +19,2 % A 390 es donde menos margen hay y NO es por el aire de esta pieza (ahí ya va casi plano): los chips doblan a dos filas en tres épocas y la cédula del Papel mide 119px contra los 89 del fragmento de pared de la Cueva — 110px de diferencia que salen de piezas COMPUESTAS y que este fichero no puede tocar sin restilarlas. Por eso el bloque de 390 aplana el término variable hasta coeficientes de .02–.06: es lo único que quedaba en mi mano. ── 390px ────────────────────────────────────────────────────────────────── `documentElement.scrollWidth` y `body.scrollWidth` = 390 en las CINCO, medido dentro de un iframe de 390 (el viewport real, 1000px). Sin desbordes. ── CONTRASTE · protocolo §4.1 ───────────────────────────────────────────── Método: se apaga TODO el texto de la portada (`color:transparent; text-shadow:none; -webkit-text-fill-color:transparent`) y se reenciende UNO con estilo en línea `!important`; la máscara de tinta es la diferencia entre las dos capturas, así que el fondo se lee bajo los GLIFOS. Hizo falta: con la caja del elemento, la caja inline de Anton (98px para una línea de 60) metía el chip de la fila de arriba en la medida y daba 2,43 falsos. 11 textos × 5 épocas × 3 anchos = 165 lecturas, TODAS ≥4.5. Peor caso de cada época a 1280px: 1 · CUEVA titular 13,33 · apagada 6,53 · encendida 5,82 · bajada 6,48 cifra 9,09 · etiqueta 5,72 · chips 9,44/5,73 · CTA 5,77/10,37 2 · PIEDRA titular 14,49 · apagada 6,63 · encendida 10,38 · bajada 6,62 cifra 10,00 · etiqueta 5,30 · chips 10,03/6,51 · CTA 6,71/12,44 3 · PAPEL titular 12,43 · apagada 7,16 · encendida 4,74 ← PEOR DE LA PIEZA (la rúbrica sobre la hoja alta) · bajada 6,91 · cifra 11,75 · etiqueta 6,84 · chips 14,31/5,34 · CTA 5,42/12,14 4 · HIERRO titular 10,74 · apagada 5,01 · encendida 8,10 · bajada 5,28 cifra 11,77 · etiqueta 5,92 · chips 7,01/11,95 · CTA 13,37/6,06 5 · CABINA titular 13,95 · apagada 5,30 · encendida 6,08 · bajada 8,44 cifra 16,41 · etiqueta 8,83 · chips 7,09/5,38 · CTA 6,60/16,40 HOVER CON PUNTERO REAL (evento de ratón por CDP, no una clase forzada) sobre el CTA primario, que es la única pieza de la portada que se calienta — etiqueta del botón contra la película de tinta o el metal de debajo: 1 · 5,94 2 · 7,76 3 · 5,24 4 · 11,13 5 · 7,24 todas ✔ LO QUE COSTÓ UNA ITERACIÓN, y queda escrito: `--e4-apagado` (#8B8275) parecía el token perfecto para la palabra apagada del Hierro —es «el metal sin pulir»— y se quedaba en 3,63 sobre el canto iluminado de la marquesina. No era mi capa: falla también sobre la plancha desnuda. Es el token del control DESHABILITADO, no el de un texto. Con `--e-tinta-2` sube a 5,01, y de paso el canto de luz bajó de .052 a .036. ── FOCO ─────────────────────────────────────────────────────────────────── `overflow:hidden` no se come ningún anillo: el CTA vive a 82px del canto izquierdo y a 217-235px del inferior, y el anillo es de 2px con 3px de separación en las cinco. En la época 3 el anillo sale de `--e3-foco`, que esta pieza SÍ redeclara (a diferencia de `c-portada-curso`, que no lo hace a propósito): allí el foco se dibuja fuera de la tarjeta, sobre la mesa; aquí los elementos enfocables viven DENTRO de la hoja, así que el anillo tiene que ser tinta — medido #1A1714 sobre la hoja alta, 14,9:1. ── LEY DE LA LÁMPARA · la hoja de la época 3 ────────────────────────────── El diagnóstico que obligó a la ley medía los dos cantos de una hoja y le salían idénticos. Aquí, media de color en cuatro rincones de la hoja: arriba-derecha (247,8 · 241,6 · 227,1) ← el que mira a la lámpara arriba-izquierda(243,6 · 237,7 · 227,0) abajo-derecha (241,8 · 235,5 · 223,4) abajo-izquierda (215,2 · 207,8 · 195,5) ← el rincón contrario 32,6 niveles de 255 entre el rincón de la lámpara y el contrario, en la diagonal correcta. Una sola lámpara, y se ve. ── REPOSO Y MOVIMIENTO REDUCIDO ─────────────────────────────────────────── `animationName` = none en `.c-portada` y en TODOS sus descendientes y pseudos (0 animaciones encontradas en las cinco épocas) · `transitionDuration` = 0s en la portada y en la banda de cifras · con `prefers-reduced-motion: reduce` emulado, todo sigue quieto. La pieza no tiene calor propio: lo que se calienta son los botones que lleva dentro. ═══════════════════════════════════════════════════════════════════════════ */