/* ═══════════════════════════════════════════════════════════════════════════════════════
EL VIAJE · viaje-landing.css — LA FUNDACIÓN DE LAS TRES LANDINGS
Contrato: CONTRATO-landings-viaje-2026-08-18.md §3 (agente A)
Arte de origen: design-system/01-contrato-viaje.md + design-system/02-adenda-caracter-de-epoca.md
+ el prototipo design-system/viaje/ (viaje.css y e1..e5)
QUÉ ES ESTE FICHERO
La adaptación a producción del prototipo EL VIAJE. Trae los 5 mundos (tokens IDÉNTICOS a
los del prototipo, valor a valor), la mecánica de sección-época con su velo, la brújula
temporal, las primitivas de texto y un juego de piezas de landing (tarjetas, listas,
precios, FAQ, footer) para que las tres páginas se compongan iguales sin que nadie
reinvente una caja.
LA TESIS QUE ORDENA TODO (no es decoración, es la estructura de la página)
Cada salto de la humanidad es el mismo salto: alguien deja de hacer la tarea y empieza a
operar la herramienta que la hace. El scroll ES la línea de tiempo: la página entra en la
cueva y sale en la cabina, y todo lo transaccional vive en la última época. La misma llama
#FF6A1F en las cinco: cambia la lámpara, no el fuego.
REGLA DURA HEREDADA: cada época es BELLA, NO POBRE. El contraste y la usabilidad no bajan
en ninguna. La 3 es la CLARA — es el eje del viaje, no un error.
─────────────────────────────────────────────────────────────────────────────────────────
██ CÓMO SE MONTA UNA SECCIÓN ██ (esto es lo que tienen que leer los agentes B, C y D)
─────────────────────────────────────────────────────────────────────────────────────────
1) UNA SECCIÓN POR ÉPOCA, EN ORDEN Y COMO HERMANAS. El esqueleto mínimo:
HACE 40.000 AÑOSLa cueva
Antetítulo
El titular de la sección
Párrafo.
· `data-era` va SIEMPRE en la sección: así se pinta sola aunque no corra el JavaScript.
· `id="era-N"` es obligatorio: es el destino de la brújula.
· Los cinco rótulos de año son EXACTAMENTE éstos y no se traducen ni se abrevian:
1 → HACE 40.000 AÑOS · 2 → 3.200 a.C. · 3 → 1440 · 4 → 1879 · 5 → HOY
· Una sección puede repetirse: si una landing necesita dos tramos en la época 4, se
ponen dos `` seguidas. La segunda no pone `v-rotulo` (el año ya
se dijo) y lleva `class="v-epoca v-epoca--sigue"` para no volver a medir 100svh.
2) EL ORDEN DE ÉPOCAS NO SE ROMPE. 1 → 2 → 3 → 4 → 5, siempre hacia delante. Volver atrás
contaría la historia al revés, y la historia es el argumento de venta.
3) TODO LO TRANSACCIONAL, EN LA ÉPOCA 5. Precio, botón de compra, checkout, garantía:
comprar es llegar al futuro. Un CTA en la cueva rompe la tesis de la página.
⚠ EXCEPCIÓN QUE MANDA SOBRE LA ANTERIOR (doctrina Sofatutor, R5 del contrato): si una
sección tiene un CTA de la membresía, el precio + el trial + «cancela cuando quieras»
se ven ANTES del botón, viva esa sección en la época que viva. Pieza: `.v-pline`.
La época cambia la lámpara; jamás esconde el precio.
4) LAS PIEZAS SE USAN, NO SE REINVENTAN. Todo lo que hay aquí abajo funciona en las cinco
épocas porque saca su color, su radio, su holgura y su velocidad de los tokens:
Texto ......... .v-kicker · .v-titular · .v-titular--menor · .v-cuerpo · .v-cuerpo--guia
.v-pie · .v-nota · .v-enfasis · .v-tachado
Estructura .... .v-marco · .v-bloque · .v-rejilla (--2 --3 --4) · .v-panel · .v-hoja
Piezas ........ .v-tarjeta · .v-lista · .v-chips/.v-chip · .v-dato/.v-datos
.v-nombres · .v-cita · .v-faq · .v-pasos · .v-ilustra
Venta ......... .v-cta · .v-boton · .v-boton--fantasma · .v-pline · .v-precio
Viaje ......... .v-rotulo · .v-viaje (el bloque «esto es un viaje»)
Cromo ......... .v-anio · .v-brujula (van una sola vez por página, vía el partial)
Cierre ........ .v-legal (footer) · .v-preview (banner de vista previa)
Sistema ....... .v-entra · .v-vis-oculto
5) MEDIDAS A MANO = ERROR. Si necesitas una holgura, deriva: `calc(var(--v-aire) * N)`.
Un `margin: 32px` hace que las cinco épocas respiren igual, que es exactamente lo que
este sistema existe para evitar.
6) SIN JAVASCRIPT LA PÁGINA SE LEE ENTERA. `.v-entra` nace visible y colocado; solo se
oculta cuando el JS se ha anunciado. Nada informativo puede depender de un evento.
7) CERO PETICIONES EXTERNAS (R3). Las 11 familias van auto-hostadas aquí abajo desde
/fonts/viaje/ (las sirve routes/landings.js — ver §0). Prohibido @import, Google Fonts,
CDNs e imágenes remotas.
8) CONTRASTE (R10). El texto informativo va en `--v-tinta` (≥7:1 en las cinco).
`--v-tinta-2` está medido y también pasa AA (6,8 a 9,0:1) — sirve para apoyo.
⚠ En la época 3, `--v-luz` (#C4551A) sobre papel da 3,7:1: vale para titulares grandes
y para adornos, NO para texto pequeño. Para eso está `--v-materia` (5,4:1).
─────────────────────────────────────────────────────────────────────────────────────────
ORDEN DE CARGA: esta hoja es autosuficiente y va sola. No necesita becama.css, ni el CSS
de épocas, ni fuentes-epoca.css — las @font-face que usa las trae ella misma (más abajo se
explica por qué se duplican en vez de enlazarse).
═══════════════════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────────────────────
0 · TIPOGRAFÍAS — auto-hostadas, cero peticiones externas (R3)
POR QUÉ SE REPITEN AQUÍ EN VEZ DE ENLAZAR /css/fuentes-epoca.css: porque una landing es un
documento autónomo y escrito por tres agentes distintos, y un `` que hay que acordarse
de poner ANTES que otro es una trampa. Si a alguien se le olvida, la página no se rompe con
un error: sale con las letras del sistema y nadie lo nota hasta que Bernat lo ve. Un solo
enlace no se puede olvidar. Los ficheros .woff2 son los MISMOS (mismas URLs), así que un
navegador que ya los tenga por otra página no descarga nada.
LAS SUSTITUCIONES DEL CONTRATO ORIGINAL YA ESTABAN HECHAS: el 01-contrato-viaje pedía Rubik
Spray Paint, Archivo Black, Alfa Slab One y Syne; la adenda 02 las cambió por Anton, Archivo,
Bodoni Moda e Inter Tight — que son justo las 11 que la casa ya sirve en local. O sea: cero
sustituciones pendientes y ni una letra que descargar de fuera. Familias por época:
é1 Anton + Archivo · é2 Cinzel + Cinzel Decorative + Spectral · é3 EB Garamond
é4 Bodoni Moda + Oswald + Libre Franklin · é5 Inter Tight + JetBrains Mono
⚠ LAS URLS SON /fonts/viaje/…, NO /fonts/epoca/… — Y NO ES UN DESPISTE. Los .woff2 son
exactamente los mismos ficheros de disco (public/fonts/epoca/), pero esa ruta está CERRADA
en server.js: hasta que `diseno_live` esté encendido, solo el admin puede descargarlos, y
una landing pública que pidiera sus letras por ahí saldría con las del sistema para todo el
mundo. `/fonts/viaje/` lo sirve el propio routes/landings.js, detrás de la misma guarda que
las páginas: si se ven las landings, se ven sus letras; si no, esa ruta tampoco existe.
Así estas tres páginas no dependen del interruptor de otra feature para verse bien.
Licencias: SIL OFL 1.1 (public/fonts/epoca/LICENCIAS.txt).
─────────────────────────────────────────────────────────────────────────────────────── */
@font-face { font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap;
src:url('/fonts/viaje/anton-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:400 700; font-display:swap;
src:url('/fonts/viaje/archivo-400-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:400 700; font-display:swap;
src:url('/fonts/viaje/cinzel-400-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Cinzel Decorative'; font-style:normal; font-weight:700; font-display:swap;
src:url('/fonts/viaje/cinzel-decorative-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap;
src:url('/fonts/viaje/spectral-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap;
src:url('/fonts/viaje/spectral-600-latin.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap;
src:url('/fonts/viaje/spectral-400-italic-latin.woff2') format('woff2'); }
@font-face { font-family:'EB Garamond'; font-style:normal; font-weight:400 700; font-display:swap;
src:url('/fonts/viaje/eb-garamond-400-700-latin.woff2') format('woff2'); }
@font-face { font-family:'EB Garamond'; font-style:italic; font-weight:400 500; font-display:swap;
src:url('/fonts/viaje/eb-garamond-400-500-italic-latin.woff2') format('woff2'); }
@font-face { font-family:'Bodoni Moda'; font-style:normal; font-weight:700; font-display:swap;
src:url('/fonts/viaje/bodoni-moda-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Libre Franklin'; font-style:normal; font-weight:400 700; font-display:swap;
src:url('/fonts/viaje/libre-franklin-400-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:400 600; font-display:swap;
src:url('/fonts/viaje/oswald-400-600-latin.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:400 700; font-display:swap;
src:url('/fonts/viaje/inter-tight-400-700-latin.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap;
src:url('/fonts/viaje/jetbrains-mono-400-700-latin.woff2') format('woff2'); }
/* ───────────────────────────────────────────────────────────────────────────────────────
1 · UTILIDADES DE SISTEMA (:root)
Medidas mecánicas del viaje. NO son carácter — el carácter vive en los bloques [data-era].
─────────────────────────────────────────────────────────────────────────────────────── */
:root{
/* Solape entre épocas. El contrato pide 120px; en móvil 120px se comen media pantalla,
así que respira con el viewport sin pasar de 120. */
--v-solape: clamp(72px, 12vh, 120px);
/* Altura del velo saliente: el mundo que se va empieza a teñirse ANTES de que el
siguiente lo cubra, por eso el doble del solape. */
--v-velo: calc(var(--v-solape) * 2);
/* Ancho útil de lectura y canal lateral reservado a la brújula. */
--v-marco: 1180px;
--v-canal: 56px;
/* Curva única. Sin rebote: la época 5 exige movimiento seco y un overshoot la delataría.
La diferencia de carácter la pone la DURACIÓN (--v-vel), no la curva. */
--v-ease: cubic-bezier(.22,.61,.36,1);
/* Alto de la barra inferior de la brújula en móvil. */
--v-barra: 58px;
/* Máscaras y vacíos — no son paleta. */
--v-opaco: #000;
--v-nada: transparent;
}
/* ───────────────────────────────────────────────────────────────────────────────────────
2 · RESET MÍNIMO — lo justo para que cinco mundos partan del mismo cero.
Alcance acotado: estas landings son documentos completos y propios, no comparten hoja con
la plataforma, así que el reset no puede llegarle a nadie más.
─────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; }
html{
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* El viaje se recorre con el scroll: los saltos de la brújula deslizan, no
teletransportan. Se anula en reduced-motion. */
scroll-behavior: smooth;
}
body{ margin: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul{ margin: 0; }
ul[class], ol[class]{ list-style: none; padding: 0; }
img, video{ display: block; max-width: 100%; height: auto; }
svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ background: none; border: 0; padding: 0; cursor: pointer; }
/* Foco visible SIEMPRE y del grosor de la época, pero nunca por debajo de 2px: la belleza
de un mundo no puede costar la navegación por teclado. El atajo va primero con un valor
simple, por si un motor no supiera resolver el max(). */
:focus-visible{
outline: 2px solid var(--v-luz);
outline-width: max(2px, var(--v-grosor-linea));
outline-offset: 3px;
}
::selection{ background: var(--v-halo); color: var(--v-tinta); }
/* ───────────────────────────────────────────────────────────────────────────────────────
3 · LOS 5 BLOQUES [data-era] — el corazón del fichero
Cada bloque declara los MISMOS tokens; lo único que cambia son los valores. Así una
sección no sabe en qué época vive: se pinta sola.
Se aplican a dos sitios a la vez:
· html[data-era="N"] → ambiente global (rótulo de año, brújula, fondo del documento).
Lo mueve el JS.
· .v-epoca[data-era="N"] → la sección se pinta SOLA aunque el JS no corra.
El bloque 1 incluye :root para que la cáscara arranque ya en la cueva antes de que el JS
diga nada. Especificidad: :root = (0,1,0) y html[data-era] = (0,1,1) → las épocas 2-5
ganan siempre, sin depender del orden.
LOS EJES DE CARÁCTER (de la adenda 02) — por qué las cinco no respiran igual:
--v-aire ............ 12 → 19 → 26 → 33 → 40px. Rampa monotónica: perder materia es
ganar vacío, y el vacío es el lujo de la época 5. De ella salen TODOS los paddings.
--v-interlineado/--v-medida ... NO monotónicos a propósito: la 2 es monumental (renglón
suelto) y la 3 densa y ancha (una página impresa tiene márgenes generosos y
renglones apretados).
--v-radio ........... irregular a mano → arco → recto → chapa → sistema.
--v-grosor-linea .... 3 → 2,5 → 2 → 1,5 → 1px. La línea adelgaza hasta el filo.
--v-vel ............. 720 → 560 → 400 → 240 → 130ms. Termina en seco.
--v-tracking-display .05 → .14 → 0 → −.01 → −.035em.
AÑADIDO DE ESTA ADAPTACIÓN (no estaba en el prototipo): cada bloque declara además su
`--v-textura` y su `--v-siguiente`. La textura la pinta `.v-epoca::before` y el velo la
funde gratis; el `--v-siguiente` tiñe la banda inferior hacia el mundo que viene. Las
texturas se han rehecho con medidas de VIEWPORT (vw/vh) en vez de porcentajes porque una
sección de landing mide varias pantallas de alto: con porcentajes, la luz de la hoguera se
estiraría hasta desaparecer.
─────────────────────────────────────────────────────────────────────────────────────── */
/* ÉPOCA 1 · PREHISTORIA — la hoguera · HACE 40.000 AÑOS
MATERIA PURA. El halo más grande del viaje (.50): la primera luz todavía no sabe alumbrar
dirigida, lo inunda todo. Lo más apretado e irregular, con el titular mandando en pantalla
sobre un cuerpo arrimado. Anton: condensada, enorme, sin curvas amables. */
:root,
html[data-era="1"],
.v-epoca[data-era="1"]{
--v-fondo: #0B0705;
--v-fondo-2: #120C08;
--v-sup: #17100B;
--v-tinta: #F2E3D2;
--v-tinta-2: #B99C82;
--v-linea: rgba(201,122,61,.22);
--v-luz: #FF6A1F;
--v-luz-nucleo: #FFC08A;
--v-halo: rgba(255,106,31,.50);
--v-materia: #C97A3D;
--v-display: 'Anton', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif;
--v-apoyo: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--v-cuerpo: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--v-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--v-aire: 12px;
/* Radio irregular a propósito: la mano no traza circunferencias. Se usa TAL CUAL en
border-radius (lleva la sintaxis con barra); nunca dentro de un calc(). */
--v-radio: 14px 4px 11px 6px / 6px 12px 5px 10px;
--v-grosor-linea: 3px;
--v-vel: 720ms;
--v-tracking-display: .05em;
--v-interlineado: 1.42;
--v-interlineado-display: 1.04; /* era .86: las líneas del hero se tocaban (Bernat, 18-ago) */
--v-medida: 40ch;
/* matices propios */
--e1-tierra: #8C3B22;
/* La pared: lamido de hoguera abajo-izquierda, manchas de pigmento y bultos de roca,
con grano encima. El grano es un SVG con su opacidad ya cocida dentro (no se puede
usar mix-blend-mode en una lista de fondos de un solo elemento). */
--v-textura:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='e1n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23e1n)' opacity='.09'/%3E%3C/svg%3E"),
radial-gradient(80vw 60vh at 12% 100%, rgba(255,106,31,.20), transparent 70%),
radial-gradient(48vw 34vh at 20% 96%, rgba(255,192,138,.10), transparent 72%),
radial-gradient(42vw 30vh at 84% 4%, rgba(201,122,61,.11), transparent 70%),
radial-gradient(46vw 32vh at 94% 62%, rgba(140,59,34,.14), transparent 72%),
radial-gradient(34vw 24vh at 40% 2%, rgba(140,59,34,.10), transparent 70%),
radial-gradient(70vw 50vh at 60% 40%, var(--v-sup), transparent 74%),
radial-gradient(96vw 70vh at 26% 22%, var(--v-fondo-2), transparent 78%);
--v-siguiente: #0E0D0B;
}
/* ÉPOCA 2 · LA ESCRITURA — piedra y antorcha · 3.200 a.C.
MONUMENTAL. Halo pequeño (.32) y quieto: la antorcha alumbra MENOS que la hoguera pero ya
no se apaga — ese es el salto, no más luz sino luz que se puede llevar. Su monumentalidad
NO está en los márgenes sino en el renglón: el interlineado más suelto de las cinco y el
tracking más ancho. Una inscripción no se lee, se contempla. */
html[data-era="2"],
.v-epoca[data-era="2"]{
--v-fondo: #0E0D0B;
--v-fondo-2: #14120F;
--v-sup: #1A1713;
--v-tinta: #E8E2D5;
--v-tinta-2: #A29985;
--v-linea: rgba(207,199,184,.16);
--v-luz: #FF8A3D;
--v-luz-nucleo: #FFD0A0;
--v-halo: rgba(255,138,61,.32);
--v-materia: #B08D57;
--v-display: 'Cinzel', Georgia, 'Times New Roman', serif;
--v-apoyo: 'Cinzel Decorative', 'Cinzel', Georgia, 'Times New Roman', serif;
--v-cuerpo: 'Spectral', Georgia, 'Times New Roman', serif;
--v-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--v-aire: 19px;
/* Arco de dintel arriba, base asentada abajo: el remate de una estela. */
--v-radio: 22px 22px 2px 2px;
--v-grosor-linea: 2.5px;
--v-vel: 560ms;
--v-tracking-display: .14em;
--v-interlineado: 1.78;
--v-interlineado-display: 1.18;
--v-medida: 50ch;
--e2-piedra: #CFC7B8;
--e2-hueco: #080706;
--e2-brillo: rgba(232,226,213,.30);
/* El muro: vetas de mármol, hiladas de sillería apenas insinuadas, la luz de dos
antorchas contra la pared y polvo de piedra. */
--v-textura:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='e2n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23e2n)' opacity='.07'/%3E%3C/svg%3E"),
linear-gradient(104deg, transparent 38%, rgba(207,199,184,.045) 40%, transparent 41.4%),
linear-gradient(97deg, transparent 61%, rgba(207,199,184,.035) 62.4%, transparent 63.6%),
linear-gradient(112deg, transparent 20%, rgba(207,199,184,.028) 21.6%, transparent 22.8%),
linear-gradient(88deg, transparent 76%, rgba(176,141,87,.045) 77.5%, transparent 78.6%),
repeating-linear-gradient(0deg, transparent 0 166px, rgba(0,0,0,.24) 166px 168px),
radial-gradient(30vw 40vh at 8% 12%, rgba(255,138,61,.12), transparent 70%),
radial-gradient(30vw 40vh at 92% 12%, rgba(255,138,61,.12), transparent 70%),
radial-gradient(110vw 80vh at 50% 40%, var(--v-fondo-2), var(--v-fondo) 78%);
--v-siguiente: #EFE7D8;
}
/* ÉPOCA 3 · LA IMPRENTA — papel y tinta · 1440
LA RUPTURA DEL VIAJE: el único mundo CLARO. Aquí la información deja de ser luz y pasa a
ser tinta, y por eso se invierte todo el sistema. La marca se contiene a #C4551A porque el
naranja puro sobre papel no llega a 4.5:1: la llama es la misma, la lámpara es tinta y la
tinta no brilla. Halo mínimo (.18) — el papel no emite. La mancha más ancha (64ch) con el
renglón más corto (1.34) y radio 0: esto es una PÁGINA, no una web beige. */
html[data-era="3"],
.v-epoca[data-era="3"]{
--v-fondo: #EFE7D8;
--v-fondo-2: #E6DCC9;
--v-sup: #F7F1E6;
--v-tinta: #1A1714;
--v-tinta-2: #4A423A;
--v-linea: rgba(26,23,20,.20);
--v-luz: #C4551A;
--v-luz-nucleo: #E0762F;
--v-halo: rgba(196,85,26,.18);
--v-materia: #A8321E;
--v-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
--v-apoyo: 'EB Garamond', Georgia, 'Times New Roman', serif;
--v-cuerpo: 'EB Garamond', Georgia, 'Times New Roman', serif;
--v-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--v-aire: 26px;
/* Cero. La tinta no tiene esquinas redondeadas: tiene filetes rectos. */
--v-radio: 0;
--v-grosor-linea: 2px;
--v-vel: 400ms;
--v-tracking-display: 0em;
--v-interlineado: 1.34;
--v-interlineado-display: 1.06;
--v-medida: 64ch;
/* El naranja de marca INTACTO: en esta época solo aparece como sello estampado. */
--e3-marca: #FF6A1F;
/* La plancha: fibra de trapo, una mancha de tinta muy leve y el papel iluminado de
arriba. Sin viñeta oscura: un papel no tiene bordes quemados. */
--v-textura:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='e3n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23e3n)' opacity='.055'/%3E%3C/svg%3E"),
radial-gradient(38vw 26vh at 10% 22%, rgba(168,50,30,.075), transparent 68%),
radial-gradient(46vw 30vh at 92% 74%, rgba(26,23,20,.05), transparent 70%),
radial-gradient(120vw 60vh at 50% 0%, var(--v-sup), transparent 62%),
radial-gradient(100vw 60vh at 50% 100%, var(--v-fondo-2), transparent 70%);
--v-siguiente: #0C0B0A;
}
/* ÉPOCA 4 · EL FILAMENTO — hierro y bombilla · 1879
La luz se domestica: --v-luz sube a un ámbar pálido porque ya no es fuego, es un filamento
dentro de un vidrio. Halo medio (.38). Cartel decimonónico: denso, con mezcla de tamaños,
chapa de canto matado y movimiento ya mecánico. */
html[data-era="4"],
.v-epoca[data-era="4"]{
--v-fondo: #0C0B0A;
--v-fondo-2: #141210;
--v-sup: #1B1815;
--v-tinta: #EDE6DA;
--v-tinta-2: #A39A8B;
--v-linea: rgba(156,123,74,.22);
--v-luz: #FFB070;
--v-luz-nucleo: #FFE0BE;
--v-halo: rgba(255,176,112,.38);
--v-materia: #9C7B4A;
--v-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, 'Times New Roman', serif;
--v-apoyo: 'Oswald', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif;
--v-cuerpo: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--v-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--v-aire: 33px;
--v-radio: 2px;
--v-grosor-linea: 1.5px;
--v-vel: 240ms;
--v-tracking-display: -.01em;
--v-interlineado: 1.55;
--v-interlineado-display: 1.06; /* era 1: prieto en titulares multilínea (18-ago) */
--v-medida: 46ch;
--e4-hierro: #3A3835;
--e4-hierro-alto: #55504A;
--e4-hierro-sombra: #2A2724;
--e4-brillo: rgba(255,255,255,.05);
--e4-brillo-alto: rgba(255,226,190,.08);
--e4-sombra: rgba(0,0,0,.30);
--e4-sombra-dura: rgba(0,0,0,.62);
--e4-hollin: rgba(6,5,4,.82);
--e4-hollin-lado: rgba(4,3,2,.68);
--e4-negro: #100E0C;
/* Un remache: metal iluminado arriba-izquierda, sombra dura abajo. */
--e4-remache: radial-gradient(circle at 34% 30%,
#D3B183 0%, #A5824B 34%, #6A5027 58%,
rgba(12,10,8,.85) 76%, transparent 78%);
/* Hollín en los lados, grano y el resplandor alto del gas. */
--v-textura:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='e4n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23e4n)' opacity='.085'/%3E%3C/svg%3E"),
linear-gradient(90deg, var(--e4-hollin-lado) 0%, transparent 15%, transparent 85%, var(--e4-hollin-lado) 100%),
radial-gradient(70vw 46vh at 56% 4%, rgba(255,176,112,.10), transparent 62%),
radial-gradient(90vw 60vh at 50% 6%, #17140F 0%, transparent 62%);
--v-siguiente: #06070A;
}
/* ÉPOCA 5 · CABINA — el dato · HOY
INFORMACIÓN PURA, cero materia. Vuelve EXACTAMENTE el naranja de la hoguera (#FF6A1F):
cuarenta mil años después, la misma llama — lo único que cambió fue la lámpara. Aire máximo
del viaje (la sección respira más del triple que la cueva), filo de 1px sin sombras,
movimiento seco y el titular apretado. Grande pero sobrio: la elegancia está en la
contención. Su matriz le PROHÍBE el grano: lisa, sin ruido. */
html[data-era="5"],
.v-epoca[data-era="5"]{
--v-fondo: #06070A;
--v-fondo-2: #0B0D12;
--v-sup: #11141A;
--v-tinta: #EEF1F6;
--v-tinta-2: #A7AFBD;
--v-linea: rgba(238,241,246,.12);
--v-luz: #FF6A1F;
--v-luz-nucleo: #FFC08A;
--v-halo: rgba(255,106,31,.45);
--v-materia: #7B8494;
--v-display: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--v-apoyo: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--v-cuerpo: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--v-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--v-aire: 40px;
--v-radio: 4px;
--v-grosor-linea: 1px;
--v-vel: 130ms;
--v-tracking-display: -.035em;
--v-interlineado: 1.7;
--v-interlineado-display: 1.04; /* era .95: prieto en titulares multilínea (18-ago) */
--v-medida: 58ch;
--e5-vidrio-alto: rgba(238,241,246,.055);
--e5-vidrio-bajo: rgba(238,241,246,.016);
--e5-realce: rgba(238,241,246,.10);
--e5-vela: rgba(238,241,246,.035);
--e5-vinieta: rgba(2,3,5,.85);
/* Sin grano (su matriz lo prohíbe): dos veladuras frías, el resplandor de brasa arriba a
la derecha y una viñeta que hunde los bordes. */
--v-textura:
radial-gradient(50vw 34vh at 82% 3%, rgba(255,106,31,.10), transparent 66%),
radial-gradient(58vw 40vh at 78% 5%, var(--e5-vela), transparent 68%),
radial-gradient(46vw 34vh at 14% 95%, var(--e5-vela), transparent 70%),
radial-gradient(130vw 90vh at 50% 46%, transparent 34%, var(--e5-vinieta) 100%);
--v-siguiente: transparent;
}
/* ───────────────────────────────────────────────────────────────────────────────────────
4 · DOCUMENTO
El fondo del documento sigue a la época activa (lo mueve el JS en ) para que el
rebote del scroll en móvil nunca enseñe un color de otro mundo. Y lo hace a la velocidad
de la época: en la cueva funde despacio, en la cabina corta.
─────────────────────────────────────────────────────────────────────────────────────── */
body{
background-color: var(--v-fondo);
color: var(--v-tinta);
font-family: var(--v-cuerpo);
font-size: 100%;
line-height: var(--v-interlineado);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* `clip` y no `hidden`: recorta el arte que se desborda sin convertir el body en
contenedor de scroll (que rompería position:sticky). */
overflow-x: clip;
transition: background-color var(--v-vel) linear;
}
/* ───────────────────────────────────────────────────────────────────────────────────────
5 · LA ÉPOCA + EL VELO DE TRANSICIÓN
MECÁNICA — «la que llega se materializa encima»:
1. Cada sección sube --v-solape px sobre la anterior (margin-top negativo), de modo que
los dos mundos comparten una banda.
2. La sección entrante lleva una máscara que va de transparente (arriba) a opaca (a
--v-solape px). En esa banda se ve el mundo anterior por debajo y el nuevo aparece
disolviéndose sobre él. Nunca hay corte seco.
3. La máscara va en la SECCIÓN, no en un pseudo-elemento: así funde TODO lo que la época
pinte, incluido lo que las vistas se inventen dentro.
4. El contenido no se ve afectado porque el padding superior es mayor que la banda.
Nadie necesita saber quién viene detrás: cada sección funde su PROPIO mundo sobre el
anterior. El ensamblado solo tiene que poner las secciones EN ORDEN Y COMO HERMANAS.
─────────────────────────────────────────────────────────────────────────────────────── */
.v-epoca{
/* Respiro de la sección: DOS unidades de aire. Es la medida que más delata la época —
24px en la cueva contra 80px en la cabina, más del triple. */
--v-respiro: calc(var(--v-aire) * 2);
position: relative;
/* Aísla el mundo: los z-index de una época no se escapan a la de al lado ni al cromo. */
isolation: isolate;
/* 100vh salta en móvil cada vez que aparece la barra del navegador; 100svh es el alto
pequeño estable. vh primero como respaldo para motores que no conozcan svh. */
min-height: 100vh;
min-height: 100svh;
display: grid;
/* `minmax(0, 1fr)` y no `1fr`: un ítem de rejilla nace con `min-width: auto`, o sea que se
NIEGA a encogerse por debajo de su contenido mínimo. Con un titular largo —o con el
tracking de .14em de la época 2, que añade un hueco detrás de la última letra— la columna
crece por encima del ancho de la pantalla y el `overflow-x: clip` de aquí abajo lo tapa
en vez de arreglarlo: no hay barra horizontal, pero el texto se CORTA. Medido a 375px:
la época 2 se iba a 376,23px. Con `minmax(0, …)` la columna puede encoger y el texto
parte, que es lo que tiene que pasar. */
grid-template-columns: minmax(0, 1fr);
align-content: center;
padding-block: calc(var(--v-solape) + var(--v-respiro));
padding-inline: 0;
color: var(--v-tinta);
background-color: var(--v-nada);
overflow-x: clip;
margin-top: calc(-1 * var(--v-solape));
-webkit-mask-image: linear-gradient(to bottom, var(--v-nada) 0, var(--v-opaco) var(--v-solape));
mask-image: linear-gradient(to bottom, var(--v-nada) 0, var(--v-opaco) var(--v-solape));
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* La primera época no tiene nada detrás que fundir: entra sólida y sin solape. */
.v-epoca:first-of-type{
margin-top: 0;
-webkit-mask-image: none;
mask-image: none;
}
/* Segunda (y siguientes) sección de la MISMA época: sigue el mundo anterior sin volver a
exigir pantalla completa ni volver a fundir nada. Una landing larga necesita partir una
época en varios tramos y eso no puede costar cinco pantallas vacías. */
.v-epoca--sigue{
min-height: 0;
margin-top: 0;
padding-block: var(--v-respiro);
-webkit-mask-image: none;
mask-image: none;
}
/* EL MUNDO. Capa de fondo de la época: color + textura. */
.v-epoca::before{
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: var(--v-textura, none), var(--v-fondo);
pointer-events: none;
}
/* Un tramo de continuación no repinta el mundo: ya está pintado por el tramo de arriba, y
volver a pintarlo cortaría los degradados justo en la juntura. */
.v-epoca--sigue::before{ background: var(--v-fondo); }
/* EL VELO SALIENTE. Tiñe la banda inferior hacia la época que viene ANTES de que ésta la
cubra: el cruce se vuelve un fundido doble. */
.v-epoca::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--v-velo);
z-index: -1;
background: linear-gradient(to bottom, var(--v-nada), var(--v-siguiente, transparent));
pointer-events: none;
}
.v-epoca--sigue::after{ display: none; }
/* ───────────────────────────────────────────────────────────────────────────────────────
6 · CROMO GLOBAL — el rótulo de año y la BRÚJULA TEMPORAL
Viven fuera de las secciones y se tiñen con los tokens de , que el observador
mantiene sincronizado con la época visible. Son la demostración visual de la tesis: el
naranja recorre las cinco marcas y solo cambia de matiz cuando cambia la lámpara.
También heredan el CARÁCTER: la marca activa se enciende en 720ms en la cueva y en 130ms
en la cabina, y el raíl pasa de 3px de pigmento a un filo de 1px.
─────────────────────────────────────────────────────────────────────────────────────── */
/* — Rótulo de año — esquina superior izquierda (la derecha es de la brújula).
En mono, tabular y dentro de una cápsula: es un instrumento, no un titular. La cápsula no
es adorno — sin ella, el rótulo flota sobre el arte de cada época y su contraste depende
de por dónde vaya el scroll. Con ella, se mide contra --v-sup y se acabó. */
.v-anio{
position: fixed;
top: clamp(14px, 2.4vw, 26px);
left: clamp(16px, 3vw, 32px);
z-index: 61;
padding: .42em .8em;
border: 1px solid var(--v-linea);
border-radius: 999px;
background: var(--v-sup);
font-family: var(--v-mono);
font-size: clamp(.66rem, .6rem + .2vw, .76rem);
font-variant-numeric: tabular-nums;
letter-spacing: .16em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
color: var(--v-luz);
pointer-events: none;
transition: color var(--v-vel) linear, background-color var(--v-vel) linear;
}
/* Sin JS el rótulo llega vacío: entonces no existe y no deja un hueco raro. */
.v-anio:empty{ display: none; }
/* En la época clara el naranja contenido da 3,7:1 sobre papel: para un rótulo pequeño no
basta. El rojo de rúbrica sobre la cápsula da 5,9:1. */
html[data-era="3"] .v-anio{ color: var(--v-materia); }
/* — LA BRÚJULA TEMPORAL — raíl vertical pegado al borde derecho en escritorio.
Es lo único que cruza las cinco épocas. Funciona SIN JavaScript: sin él no hay marca
activa, pero las cinco paradas siguen ahí, en orden, y siguen llevando a su sección. */
.v-brujula{
position: fixed;
top: 50%;
right: clamp(10px, 1.4vw, 20px);
transform: translateY(-50%);
z-index: 60;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 12px 4px;
}
/* El hilo que cruza el viaje entero, del grosor de la época activa. */
.v-brujula::before{
content: "";
position: absolute;
top: 16px;
bottom: 16px;
left: 50%;
width: var(--v-grosor-linea);
transform: translateX(-50%);
background: var(--v-linea);
pointer-events: none;
transition: width var(--v-vel) var(--v-ease);
}
.v-brujula__paradas{
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 0;
}
/* Marca: 26px de área táctil (mínimo accesible) con un punto de 8px dentro. */
.v-brujula__marca{
position: relative;
display: block;
width: 26px;
height: 26px;
}
.v-brujula__punto{
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
border-radius: 50%;
border: 1px solid var(--v-linea);
background: var(--v-fondo-2);
transition:
width var(--v-vel) var(--v-ease),
height var(--v-vel) var(--v-ease),
margin var(--v-vel) var(--v-ease),
background-color var(--v-vel) linear,
box-shadow var(--v-vel) linear;
}
.v-brujula__marca:hover .v-brujula__punto,
.v-brujula__marca:focus-visible .v-brujula__punto{
background: var(--v-tinta-2);
border-color: var(--v-tinta-2);
}
/* La activa se enciende con la luz de SU época y hereda su halo. */
.v-brujula__marca.is-activa .v-brujula__punto{
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
background: var(--v-luz);
border-color: var(--v-luz-nucleo);
box-shadow: 0 0 0 5px var(--v-halo);
}
/* El año de la parada. Oculto por defecto y revelado en dos casos: cuando esa parada es la
activa, y al pasar por encima o llegar con el teclado. Así el raíl no invade el texto en
pantallas medianas y el año sigue estando SIEMPRE a un gesto — y siempre en el árbol de
accesibilidad, que para un lector de pantalla es lo único que importa. */
.v-brujula__anio{
position: absolute;
top: 50%;
right: calc(100% + 6px);
transform: translateY(-50%);
padding: .38em .72em;
border: 1px solid var(--v-linea);
border-radius: 999px;
background: var(--v-sup);
font-family: var(--v-mono);
font-size: .64rem;
letter-spacing: .13em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
color: var(--v-tinta-2);
opacity: 0;
visibility: hidden;
transition: opacity var(--v-vel) linear, visibility var(--v-vel) linear;
}
.v-brujula__marca:hover .v-brujula__anio,
.v-brujula__marca:focus-visible .v-brujula__anio,
.v-brujula__marca.is-activa .v-brujula__anio{
opacity: 1;
visibility: visible;
}
.v-brujula__marca.is-activa .v-brujula__anio{ color: var(--v-tinta); }
/* El titulillo de la brújula: para lectores de pantalla. La brújula se explica con el
bloque «esto es un viaje», no con una etiqueta flotante. */
.v-brujula__titulo{
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ───────────────────────────────────────────────────────────────────────────────────────
7 · PRIMITIVAS DE TEXTO — aquí es donde el carácter se hace carne
Ninguna medida está escrita a mano: todos los paddings, márgenes, interlineados, radios y
duraciones derivan de los tokens de la época. Por eso la misma clase se siente apretada en
la cueva y aireada en la cabina sin que nadie la reescriba.
─────────────────────────────────────────────────────────────────────────────────────── */
/* Contenedor de lectura. El aire lateral crece con la época: ~20px en la cueva, ~50px en la
cabina. El max(20px, …) es la red de seguridad de los 390px. */
.v-marco{
position: relative;
z-index: 1;
width: 100%;
/* La otra mitad del arreglo del `minmax(0, 1fr)` de .v-epoca: el marco también puede ser
ítem de una rejilla que no controlo (una vista que anide dos). Vale para las dos. */
min-width: 0;
max-width: var(--v-marco);
margin-inline: auto;
padding-inline: max(20px, min(4vw, calc(var(--v-aire) * 1.4)));
}
.v-marco--estrecho{ max-width: 760px; }
/* Separación entre bloques dentro de una sección. */
.v-bloque + .v-bloque{ margin-top: calc(var(--v-aire) * 2.4); }
/* Rótulo de época: el año en grande y el nombre del mundo. Es el cumplimiento visible de la
regla «años rotulados por era»: aunque no corra el JavaScript y la brújula esté muda, cada
sección dice en qué momento del tiempo estás. */
.v-rotulo{
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .6em;
margin-bottom: calc(var(--v-aire) * 1.6);
padding-bottom: calc(var(--v-aire) * .5);
border-bottom: var(--v-grosor-linea) solid var(--v-linea);
font-family: var(--v-mono);
font-size: clamp(.66rem, .6rem + .2vw, .76rem);
letter-spacing: .18em;
text-transform: uppercase;
line-height: 1.2;
color: var(--v-tinta-2);
}
.v-rotulo b{
font-weight: 700;
color: var(--v-luz);
font-variant-numeric: tabular-nums;
}
/* Misma corrección que en el rótulo fijo: sobre papel, el naranja contenido no llega. */
[data-era="3"] .v-rotulo b{ color: var(--v-materia); }
/* Antetítulo / etiqueta de sección. Usa la familia de APOYO de la época, no el cuerpo. El
tracking se queda ancho a propósito: son micro-mayúsculas y sin separación no se leen. */
.v-kicker{
display: block;
font-family: var(--v-apoyo);
font-size: clamp(.68rem, .62rem + .24vw, .8rem);
letter-spacing: .18em;
text-transform: uppercase;
line-height: 1.2;
color: var(--v-tinta-2);
margin-bottom: calc(var(--v-aire) * .9);
}
/* Titular. */
.v-titular{
font-family: var(--v-display);
font-size: clamp(2.2rem, 1.3rem + 4.4vw, 4.4rem);
font-weight: 700;
line-height: var(--v-interlineado-display);
letter-spacing: var(--v-tracking-display);
/* 'Anton' y 'Bodoni Moda' existen en un solo peso: sin esto el navegador les inventa una
negrita sintética que emborrona los remates. */
font-synthesis-weight: none;
color: var(--v-tinta);
text-wrap: balance;
/* A 390px un titular largo no puede empujar la página a lo ancho. */
overflow-wrap: break-word;
hyphens: manual;
margin-bottom: calc(var(--v-aire) * 1.5);
}
/* El titular del hero: el único que puede comerse la pantalla. */
.v-titular--hero{ font-size: clamp(2.5rem, 1.35rem + 5.2vw, 5.2rem); }
/* Titular de subsección. */
.v-titular--menor{
font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem);
margin-bottom: calc(var(--v-aire) * .9);
}
/* Un trozo del titular encendido con la llama de la época. Sobre papel el naranja contenido
da 3,7:1, pero aquí es texto GRANDE (≥24px en negrita), donde AA pide 3:1 — y aun así se
refuerza con el rojo de rúbrica, que da 5,4:1. */
.v-titular .v-llama{ color: var(--v-luz); }
[data-era="3"] .v-titular .v-llama{ color: var(--v-materia); }
/* Cuerpo. Usa --v-tinta (no --v-tinta-2): es texto informativo y el contrato exige ≥4.5:1 en
las cinco épocas, incluida la clara. */
.v-cuerpo{
font-family: var(--v-cuerpo);
font-size: clamp(1.02rem, .96rem + .4vw, 1.24rem);
line-height: var(--v-interlineado);
color: var(--v-tinta);
max-width: var(--v-medida);
text-wrap: pretty;
}
.v-cuerpo + .v-cuerpo{ margin-top: calc(var(--v-aire) * .9); }
/* Entradilla: el párrafo que va pegado al titular y manda más que los demás. */
.v-cuerpo--guia{
font-size: clamp(1.12rem, 1.02rem + .6vw, 1.42rem);
color: var(--v-tinta);
}
/* Un párrafo que no tiene que respetar la medida de lectura (una lista, una fila de datos). */
.v-cuerpo--ancho{ max-width: none; }
/* Énfasis dentro del cuerpo. */
.v-enfasis{ color: var(--v-tinta); font-weight: 700; }
.v-tachado{ text-decoration: line-through; color: var(--v-tinta-2); font-weight: 400; }
/* Pie de sección: la frase que empuja a seguir bajando. */
.v-pie{
font-family: var(--v-cuerpo);
font-size: clamp(.92rem, .88rem + .2vw, 1.02rem);
line-height: var(--v-interlineado);
color: var(--v-tinta-2);
margin-top: calc(var(--v-aire) * 2);
}
/* Letra pequeña honesta: la condición de la garantía, los impuestos, el aviso de dato
inventado en una ilustración. Pequeña, no escondida: va en --v-tinta-2, que pasa AA. */
.v-nota{
font-family: var(--v-cuerpo);
font-size: .88rem;
line-height: 1.5;
color: var(--v-tinta-2);
max-width: 62ch;
}
.v-nota a{ color: inherit; text-decoration: underline; text-underline-offset: .2em; }
/* Utilidad: contenido solo para lectores de pantalla. */
.v-vis-oculto{
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ───────────────────────────────────────────────────────────────────────────────────────
8 · SUPERFICIES — .v-panel y sus vestidos por época
Una sola clase que en cada mundo es de un material distinto: losa de roca, estela de
piedra, hoja de papel, chapa remachada, panel de instrumento. Es lo que permite que B, C y
D compongan tarjetas sin inventarse cinco arte-direcciones.
⚠ `.v-panel` y `.v-tarjeta` usan sus DOS pseudo-elementos (::before para los remaches de
la 4, ::after para la verjura de la 3). Las vistas no pueden usarlos.
─────────────────────────────────────────────────────────────────────────────────────── */
.v-panel,
.v-tarjeta,
.v-hoja{
position: relative;
background: var(--v-sup);
border: var(--v-grosor-linea) solid var(--v-linea);
border-radius: var(--v-radio);
color: var(--v-tinta);
}
.v-tarjeta,
.v-hoja{
padding: calc(var(--v-aire) * 1.1) calc(var(--v-aire) * 1.2);
}
/* La hoja es el panel en formato PÁGINA: más márgenes, medida de lectura y el pie más
generoso que la cabeza, como en cualquier impreso. */
.v-hoja{
padding:
calc(var(--v-aire) * 1.4)
calc(var(--v-aire) * 1.5)
calc(var(--v-aire) * 1.8);
}
/* é1 · LOSA DE ROCA. El borde no es una línea: es pigmento. */
[data-era="1"] .v-panel,
[data-era="1"] .v-tarjeta,
[data-era="1"] .v-hoja{
background:
radial-gradient(70% 60% at 22% 12%, rgba(201,122,61,.07), transparent 70%),
var(--v-sup);
border-color: rgba(201,122,61,.30);
box-shadow: inset 0 0 0 1px rgba(11,7,5,.6), 0 18px 40px -28px #000;
}
/* é2 · ESTELA. Arco de dintel, brillo de antorcha en el canto alto y base asentada. */
[data-era="2"] .v-panel,
[data-era="2"] .v-tarjeta,
[data-era="2"] .v-hoja{
background:
linear-gradient(180deg, rgba(232,226,213,.05), transparent 42%),
var(--v-sup);
border-color: rgba(207,199,184,.22);
box-shadow:
inset 0 1px 0 var(--e2-brillo, rgba(232,226,213,.30)),
inset 0 -1px 0 rgba(0,0,0,.5),
0 22px 46px -30px #000;
}
/* é3 · HOJA DE PAPEL. Filete recto, sombra de página levantada y el rayado del copista.
Sin esto, la época clara se lee como «una web con fondo beige», que es justo lo que la
adenda prohíbe. */
[data-era="3"] .v-panel,
[data-era="3"] .v-tarjeta,
[data-era="3"] .v-hoja{
background: var(--v-sup);
border-color: var(--v-linea);
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 2px 3px rgba(26,23,20,.10),
0 26px 50px -26px rgba(26,23,20,.45);
}
[data-era="3"] .v-hoja::after{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
/* Corondeles finos de papel de tina. No es una cuadrícula: cruzarlos con un rayado
convertiría la hoja en papel milimetrado, que es de otro siglo. */
background: repeating-linear-gradient(90deg, rgba(26,23,20,.028) 0 1px, transparent 1px 5px);
opacity: .8;
}
/* é4 · CHAPA REMACHADA. Cuatro remaches en las esquinas, hechos con fondos y no con nodos. */
[data-era="4"] .v-panel,
[data-era="4"] .v-tarjeta,
[data-era="4"] .v-hoja{
background:
linear-gradient(180deg, var(--e4-brillo), var(--e4-sombra)),
linear-gradient(103deg, var(--v-sup) 0%, var(--v-fondo-2) 58%, var(--e4-negro) 100%);
border-color: var(--v-linea);
box-shadow:
inset 0 1px 0 var(--e4-brillo-alto),
inset 0 -1px 0 var(--e4-sombra-dura),
0 30px 70px -34px var(--e4-hollin);
}
[data-era="4"] .v-tarjeta::before,
[data-era="4"] .v-hoja::before,
[data-era="4"] .v-panel::before{
content: "";
position: absolute;
inset: 9px;
pointer-events: none;
background-image: var(--e4-remache), var(--e4-remache), var(--e4-remache), var(--e4-remache);
background-position: 0 0, 100% 0, 0 100%, 100% 100%;
background-size: 12px 12px;
background-repeat: no-repeat;
}
/* é5 · PANEL DE INSTRUMENTO. Filo de 1px y un vidrio frío. Cero sombras: en la cabina la
profundidad la da la luz, no el relieve. */
[data-era="5"] .v-panel,
[data-era="5"] .v-tarjeta,
[data-era="5"] .v-hoja{
background: linear-gradient(180deg, var(--e5-vidrio-alto), var(--e5-vidrio-bajo));
border-color: var(--v-linea);
box-shadow: inset 0 1px 0 var(--e5-realce);
}
/* La regla de CABINA: una sola cosa encendida. `is-encendida` es esa una. */
[data-era="5"] .v-tarjeta.is-encendida,
[data-era="5"] .v-panel.is-encendida{
border-color: rgba(255,106,31,.42);
box-shadow: inset 0 1px 0 var(--e5-realce), 0 0 0 1px rgba(255,106,31,.14), 0 24px 70px -40px var(--v-halo);
}
/* ───────────────────────────────────────────────────────────────────────────────────────
9 · PIEZAS DE LANDING
Todo lo que las tres páginas necesitan repetir. Cada pieza saca color, radio, holgura y
velocidad de los tokens, así que funciona en las cinco épocas sin una línea extra.
─────────────────────────────────────────────────────────────────────────────────────── */
/* — Rejilla. Auto-fit: nunca hay que pensar en el móvil, se recoloca sola. */
.v-rejilla{
display: grid;
gap: calc(var(--v-aire) * 1.1);
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.v-rejilla--2{ grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.v-rejilla--3{ grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.v-rejilla--4{ grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
/* — Tarjeta (el vestido lo pone §8). */
.v-tarjeta__titulo{
font-family: var(--v-display);
font-size: clamp(1.12rem, 1.02rem + .5vw, 1.35rem);
font-weight: 700;
font-synthesis-weight: none;
line-height: 1.15;
letter-spacing: var(--v-tracking-display);
color: var(--v-tinta);
margin-bottom: calc(var(--v-aire) * .5);
}
.v-tarjeta__texto{
font-size: 1rem;
line-height: var(--v-interlineado);
color: var(--v-tinta);
}
.v-tarjeta__pie{
margin-top: calc(var(--v-aire) * .7);
padding-top: calc(var(--v-aire) * .5);
border-top: 1px solid var(--v-linea);
font-family: var(--v-apoyo);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--v-tinta-2);
}
/* — Lista con marca. El ✓ va como pseudo-elemento y no como carácter en el HTML: así un
lector de pantalla lee la lista, no un desfile de «marca de verificación». */
.v-lista{
display: grid;
gap: calc(var(--v-aire) * .55);
max-width: var(--v-medida);
}
.v-lista li{
position: relative;
padding-left: 1.9em;
font-size: 1rem;
line-height: var(--v-interlineado);
color: var(--v-tinta);
}
.v-lista li::before{
content: "✓";
position: absolute;
left: 0;
top: 0;
width: 1.25em;
text-align: center;
font-family: var(--v-apoyo);
font-weight: 700;
color: var(--v-luz);
}
[data-era="3"] .v-lista li::before{ color: var(--v-materia); }
/* La variante para lo que NO incluye o para quién NO es. Se dice con una raya, no con una
cruz roja: es honestidad, no una advertencia. */
.v-lista--no li::before{ content: "—"; color: var(--v-tinta-2); }
.v-lista--ancha{ max-width: none; }
/* — Chips: los tres o cuatro hechos que van bajo un hero. */
.v-chips{ display: flex; flex-wrap: wrap; gap: calc(var(--v-aire) * .5); }
.v-chip{
display: inline-flex;
align-items: center;
gap: .5em;
padding: .5em .9em;
border: 1px solid var(--v-linea);
border-radius: 999px;
background: var(--v-sup);
font-family: var(--v-apoyo);
font-size: .76rem;
letter-spacing: .1em;
text-transform: uppercase;
line-height: 1;
color: var(--v-tinta);
}
/* — Banda de autoridad: nombres en texto, jamás logos. */
.v-nombres{
display: flex;
flex-wrap: wrap;
gap: calc(var(--v-aire) * .6) calc(var(--v-aire) * 1.2);
align-items: center;
padding-block: calc(var(--v-aire) * .8);
}
.v-nombres li{
font-family: var(--v-display);
font-size: clamp(.95rem, .88rem + .5vw, 1.3rem);
font-weight: 700;
font-synthesis-weight: none;
letter-spacing: var(--v-tracking-display);
color: var(--v-tinta);
}
/* En la piedra, los nombres van GRABADOS: relieve por doble sombra (una clara arriba, una
oscura abajo), nunca con filter. Es la época de las inscripciones institucionales. */
[data-era="2"] .v-nombres li{
text-transform: uppercase;
text-shadow:
0 -1px 0 var(--e2-brillo, rgba(232,226,213,.30)),
0 1px 0 var(--e2-hueco, #080706);
}
/* — Cifras grandes. */
.v-datos{
display: grid;
gap: calc(var(--v-aire) * .9);
grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
.v-dato__cifra{
display: block;
font-family: var(--v-display);
font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.8rem);
font-weight: 700;
font-synthesis-weight: none;
line-height: 1;
letter-spacing: var(--v-tracking-display);
font-variant-numeric: tabular-nums;
color: var(--v-luz);
}
[data-era="3"] .v-dato__cifra{ color: var(--v-materia); }
.v-dato__texto{
display: block;
margin-top: calc(var(--v-aire) * .35);
font-size: .95rem;
line-height: 1.4;
color: var(--v-tinta);
}
/* — Cita / remate de sección: la frase que resume el tramo. */
.v-cita{
position: relative;
margin-top: calc(var(--v-aire) * 1.6);
padding-left: calc(var(--v-aire) * 1.1);
border-left: var(--v-grosor-linea) solid var(--v-luz);
font-family: var(--v-cuerpo);
font-size: clamp(1.08rem, 1rem + .55vw, 1.35rem);
line-height: var(--v-interlineado);
color: var(--v-tinta);
max-width: var(--v-medida);
}
[data-era="3"] .v-cita{ border-left-color: var(--v-materia); font-style: italic; }
/* — Pasos numerados (la escalera, la semana). El número es un contador CSS: la vista no
escribe «1.», así que reordenar no obliga a renumerar a mano. */
.v-pasos{ counter-reset: vpaso; display: grid; gap: calc(var(--v-aire) * .9); }
.v-pasos > li{
counter-increment: vpaso;
position: relative;
padding-left: 3.2em;
min-height: 2.2em;
}
.v-pasos > li::before{
content: counter(vpaso);
position: absolute;
left: 0;
top: 0;
display: grid;
place-items: center;
width: 2.2em;
height: 2.2em;
border: var(--v-grosor-linea) solid var(--v-linea);
border-radius: var(--v-radio);
background: var(--v-sup);
font-family: var(--v-apoyo);
font-size: .9em;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--v-luz);
}
[data-era="3"] .v-pasos > li::before{ color: var(--v-materia); }
/* — FAQ con . Funciona sin una línea de JavaScript. */
.v-faq{ display: grid; gap: calc(var(--v-aire) * .5); max-width: 780px; }
.v-faq details{
border: var(--v-grosor-linea) solid var(--v-linea);
border-radius: var(--v-radio);
background: var(--v-sup);
padding: calc(var(--v-aire) * .7) calc(var(--v-aire) * .9);
}
.v-faq summary{
cursor: pointer;
list-style: none;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1em;
font-family: var(--v-cuerpo);
font-weight: 700;
font-size: 1.02rem;
line-height: 1.35;
color: var(--v-tinta);
}
.v-faq summary::-webkit-details-marker{ display: none; }
.v-faq summary::after{
content: "+";
flex: none;
font-family: var(--v-apoyo);
font-weight: 400;
color: var(--v-luz);
}
[data-era="3"] .v-faq summary::after{ color: var(--v-materia); }
.v-faq details[open] summary::after{ content: "–"; }
.v-faq details > *:not(summary){
margin-top: calc(var(--v-aire) * .55);
font-size: .98rem;
line-height: var(--v-interlineado);
color: var(--v-tinta);
}
.v-faq a{ color: inherit; text-decoration: underline; text-underline-offset: .2em; }
/* — Marco de ilustración. Las ilustraciones son HTML/CSS/SVG con datos SIEMPRE inventados;
este marco solo les da caja y aire. El pie es obligatorio cuando hay cifras dentro: una
ilustración con números y sin «datos de ejemplo» es una captura falsa. */
.v-ilustra{
position: relative;
overflow: hidden;
border: var(--v-grosor-linea) solid var(--v-linea);
border-radius: var(--v-radio);
background: var(--v-fondo-2);
padding: calc(var(--v-aire) * .9);
}
.v-ilustra__pie{
margin-top: calc(var(--v-aire) * .5);
font-family: var(--v-mono);
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--v-tinta-2);
}
/* ───────────────────────────────────────────────────────────────────────────────────────
10 · VENTA — botones, precio y la doctrina Sofatutor
─────────────────────────────────────────────────────────────────────────────────────── */
.v-cta{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--v-aire) * .8);
margin-top: calc(var(--v-aire) * 1.2);
}
/* Botón. La luz de la época de fondo, el fondo de la época de tinta. La caja entera (radio,
grosor, holgura, velocidad) sale de los tokens. */
.v-boton{
--v-boton-fondo: var(--v-luz);
--v-boton-tinta: var(--v-fondo);
--v-boton-linea: var(--v-luz);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6em;
min-height: 48px;
padding: calc(var(--v-aire) * .55) calc(var(--v-aire) * 1.3);
font-family: var(--v-cuerpo);
font-size: clamp(.98rem, .94rem + .2vw, 1.08rem);
font-weight: 700;
line-height: 1.1;
text-align: center;
color: var(--v-boton-tinta);
background: var(--v-boton-fondo);
border: var(--v-grosor-linea) solid var(--v-boton-linea);
border-radius: var(--v-radio);
cursor: pointer;
transition:
transform calc(var(--v-vel) * .35) var(--v-ease),
box-shadow var(--v-vel) var(--v-ease),
background-color var(--v-vel) linear;
}
.v-boton:hover{
transform: translateY(-1px);
box-shadow: 0 10px 34px var(--v-halo);
}
.v-boton:active{ transform: translateY(0); }
/* ⚠ ÉPOCA 3 · OBLIGATORIO, NO ESTÉTICO. El vestido por defecto (papel sobre #C4551A) da
3,7:1 y no cumple AA. Aquí se invierte: tinta oscura de fondo y papel encima, que da
16:1. La llama sigue apareciendo — como sello, que es su papel en esta época. */
[data-era="3"] .v-boton{
--v-boton-fondo: var(--v-tinta);
--v-boton-tinta: var(--v-sup);
--v-boton-linea: var(--v-tinta);
}
/* Botón secundario: la segunda puerta nunca compite con la primera. */
.v-boton--fantasma{
--v-boton-fondo: transparent;
--v-boton-tinta: var(--v-tinta);
--v-boton-linea: var(--v-linea);
font-weight: 600;
}
.v-boton--fantasma:hover{
--v-boton-linea: var(--v-tinta-2);
box-shadow: none;
}
[data-era="3"] .v-boton--fantasma{
--v-boton-fondo: transparent;
--v-boton-tinta: var(--v-tinta);
--v-boton-linea: var(--v-linea);
}
/* Enlace de texto dentro del cuerpo o al lado de un CTA. */
.v-enlace{
color: var(--v-tinta);
text-decoration: underline;
text-underline-offset: .22em;
text-decoration-thickness: 1px;
}
.v-enlace:hover{ color: var(--v-luz); }
[data-era="3"] .v-enlace:hover{ color: var(--v-materia); }
/* — LA LÍNEA DE PRECIO (doctrina Sofatutor · R5).
Va SIEMPRE antes del botón de la membresía, en la época que sea. No es estética: es un
requisito legal, y por eso tiene su propia pieza en vez de dejarse a la memoria de quien
maqueta. Nada de flex aquí dentro: con flex, cada nodo de texto es un ítem y la coma de
«11,11 €/mes, impuestos incluidos» se despega al saltar de línea en móvil. */
.v-pline{
display: inline-block;
max-width: 100%;
margin-bottom: calc(var(--v-aire) * .8);
padding: .75em 1.1em;
border: var(--v-grosor-linea) solid var(--v-linea);
border-radius: var(--v-radio);
background: var(--v-sup);
font-family: var(--v-cuerpo);
font-size: .98rem;
line-height: 1.55;
color: var(--v-tinta);
}
.v-pline b{ font-weight: 700; color: var(--v-tinta); }
.v-pline .v-llama{ color: var(--v-luz); font-weight: 700; }
[data-era="3"] .v-pline .v-llama{ color: var(--v-materia); }
/* — El bloque de precio grande (é5: es donde vive lo transaccional). */
.v-precio{
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .6em;
margin-bottom: calc(var(--v-aire) * .6);
}
.v-precio__cifra{
font-family: var(--v-display);
font-size: clamp(2.4rem, 1.6rem + 3.2vw, 3.8rem);
font-weight: 700;
font-synthesis-weight: none;
line-height: 1;
letter-spacing: var(--v-tracking-display);
font-variant-numeric: tabular-nums;
color: var(--v-tinta);
}
.v-precio__antes{
font-family: var(--v-cuerpo);
font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
text-decoration: line-through;
color: var(--v-tinta-2);
}
.v-precio__nota{
font-family: var(--v-apoyo);
font-size: .76rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--v-tinta-2);
}
/* ───────────────────────────────────────────────────────────────────────────────────────
11 · EL VIAJE, EXPLICADO — el bloque que va tras el hero
La regla es que la narrativa se EXPLICA, no se insinúa: el lector tiene que SABER que
está haciendo un viaje en el tiempo, no deducirlo. Por eso esta pieza existe y por eso es
obligatoria en las tres landings.
─────────────────────────────────────────────────────────────────────────────────────── */
.v-viaje{
position: relative;
margin-top: calc(var(--v-aire) * 2);
padding: calc(var(--v-aire) * 1.1) calc(var(--v-aire) * 1.3);
border: var(--v-grosor-linea) solid var(--v-linea);
border-left-width: max(4px, calc(var(--v-grosor-linea) * 2));
border-left-color: var(--v-luz);
border-radius: var(--v-radio);
background: var(--v-sup);
max-width: 720px;
}
[data-era="3"] .v-viaje{ border-left-color: var(--v-materia); }
.v-viaje__titulo{
font-family: var(--v-apoyo);
font-size: .76rem;
letter-spacing: .18em;
text-transform: uppercase;
line-height: 1.2;
color: var(--v-tinta-2);
margin-bottom: calc(var(--v-aire) * .6);
}
.v-viaje p{
font-size: 1rem;
line-height: var(--v-interlineado);
color: var(--v-tinta);
}
.v-viaje p + p{ margin-top: calc(var(--v-aire) * .6); }
/* ───────────────────────────────────────────────────────────────────────────────────────
12 · BANNER DE VISTA PREVIA Y PIE LEGAL
─────────────────────────────────────────────────────────────────────────────────────── */
/* El aviso de que esto solo lo ve el admin. Va arriba del todo y en el flujo (no fijo): un
banner que tapa contenido durante una revisión de diseño es peor que ninguno. */
.v-preview{
position: relative;
z-index: 62;
padding: .75em 1.1em;
background: var(--v-luz);
color: #0B0705;
font-family: var(--v-apoyo);
font-size: .82rem;
line-height: 1.4;
text-align: center;
}
.v-preview b{ font-weight: 700; }
/* Pie legal. Los cinco enlaces son los mismos que en todas las páginas públicas de la casa:
ninguno se cae por rediseñar una landing. */
.v-legal{
position: relative;
z-index: 1;
padding-block: calc(var(--v-aire) * 1.4);
border-top: 1px solid var(--v-linea);
background: var(--v-fondo);
color: var(--v-tinta-2);
}
.v-legal__in{
max-width: var(--v-marco);
margin-inline: auto;
padding-inline: max(20px, min(4vw, calc(var(--v-aire) * 1.4)));
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--v-aire) * .5) calc(var(--v-aire) * 1);
font-size: .84rem;
line-height: 1.5;
}
.v-legal__enlaces{
display: flex;
flex-wrap: wrap;
gap: .5em 1.1em;
}
.v-legal a{
color: var(--v-tinta-2);
text-decoration: underline;
text-underline-offset: .2em;
}
.v-legal a:hover{ color: var(--v-tinta); }
/* ───────────────────────────────────────────────────────────────────────────────────────
13 · ENTRADAS (.v-entra / .is-dentro)
REGLA INNEGOCIABLE: sin JavaScript no puede quedar NADA invisible. Por eso el estado por
defecto es «visible y colocado», y solo cuando el JS se anuncia (clase `js` en , o
el data-era que pone el observador) pasa a ocultarse para poder entrar.
El desplazamiento también es carácter: sale de --v-aire, así que en la cueva el bloque se
mueve 7px en 720ms (orgánico) y en la cabina 24px en 130ms (seco).
─────────────────────────────────────────────────────────────────────────────────────── */
.v-entra{
opacity: 1;
transform: none;
transition:
opacity var(--v-vel) var(--v-ease),
transform var(--v-vel) var(--v-ease);
}
html.js .v-entra,
html[data-era] .v-entra{
opacity: 0;
transform: translateY(min(24px, calc(var(--v-aire) * .6)));
}
html.js .v-entra.is-dentro,
html[data-era] .v-entra.is-dentro{
opacity: 1;
transform: none;
}
/* ───────────────────────────────────────────────────────────────────────────────────────
14 · MÓVIL Y ESCRITORIO
─────────────────────────────────────────────────────────────────────────────────────── */
/* Escritorio: se reserva un canal a cada lado para que la brújula no pise el texto.
Simétrico a propósito — la época 2 es de simetría axial y no puede quedar descentrada por
culpa del raíl. */
@media (min-width: 821px){
.v-epoca{ padding-inline: var(--v-canal); }
}
/* ≤820px: la brújula baja a barra inferior. */
@media (max-width: 820px){
.v-brujula{
top: auto;
bottom: 0;
left: 0;
right: 0;
transform: none;
padding: 10px 12px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
border-top: var(--v-grosor-linea) solid var(--v-linea);
background: var(--v-fondo);
background: color-mix(in srgb, var(--v-fondo) 88%, var(--v-nada));
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: background-color var(--v-vel) linear;
}
.v-brujula__paradas{ flex-direction: row; gap: 16px; }
/* El hilo se tumba con el raíl. */
.v-brujula::before{
top: 50%;
bottom: auto;
left: 16px;
right: 16px;
width: auto;
height: var(--v-grosor-linea);
transform: translateY(-50%);
}
/* El año de la parada activa sube por encima de la barra en vez de salir a un lado: a lo
ancho no cabe, y en vertical hay sitio de sobra. */
.v-brujula__anio{
top: auto;
right: auto;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
}
/* La última época no puede acabar debajo de la barra. */
.v-epoca:last-of-type{
padding-bottom: calc(var(--v-solape) + var(--v-respiro) + var(--v-barra));
}
/* Y el pie legal tampoco. */
.v-legal{ padding-bottom: calc(var(--v-aire) * 1.4 + var(--v-barra)); }
.v-anio{
top: clamp(12px, 3vw, 18px);
left: clamp(14px, 4vw, 20px);
}
}
/* Pantallas muy bajas (móvil apaisado): el solape se come la sección entera. */
@media (max-height: 520px){
.v-epoca{ padding-block: calc(var(--v-solape) + var(--v-respiro) * .5); }
}
/* ───────────────────────────────────────────────────────────────────────────────────────
15 · prefers-reduced-motion
Sin desplazamientos, sin latidos, sin parpadeos, sin fundidos: todo colocado. El corte es
GLOBAL y con !important a propósito — es la fundación la que garantiza esta promesa, no
cada vista por su cuenta. El velo de transición no se toca: es un degradado estático, no
una animación.
─────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
*, *::before, *::after{
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: .001ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
html.js .v-entra,
html[data-era] .v-entra,
.v-entra{
opacity: 1 !important;
transform: none !important;
}
.v-boton:hover{ transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════════════════
— FOTOS (adenda A) —
Contrato: CONTRATO-landings-viaje-2026-08-18.md · ADENDA A («faltan algunas imágenes mías
— sácalas de Fotos-Pro»). Deroga la D7 (hero sin foto).
LA TESIS, QUE ES LA MISMA QUE LA DE `.v-panel`: una foto no se pega encima de una época,
una foto ES material de su época. Por eso el vestido NO se elige con un modificador en la
vista: se elige solo, con el `data-era` de la sección en la que caiga. La misma foto
metida en la cueva sale en ocre de pigmento y metida en la cabina sale limpia, sin que
nadie tenga que acordarse de nada. Es exactamente lo que ya hacen la losa, la estela, la
hoja, la chapa y el panel de instrumento con `.v-panel`.
POR QUÉ EL TONO SE HACE CON `filter` Y NO CON UNA CAPA DE COLOR ENCIMA
Una capa de color plana tiñe igual las sombras y las luces: el resultado es una foto con
un cristalito delante, no una foto de otro mundo. `grayscale() sepia() hue-rotate()
saturate()` es un MAPA TONAL: las sombras se quedan sombras y son las luces las que se
vuelven ocre. Eso es una gradación, y es lo que pedía la adenda. Además no necesita
`mix-blend-mode`, que en Safari se comporta distinto según lo que haya detrás.
EL MARCO
`.v-foto__caja` saca su filo, su radio y su fondo de los tokens, así que en la cueva la
foto tiene el borde IRREGULAR de la mano (--v-radio de la é1 lleva la sintaxis con barra)
y en la cabina un filete de 1px. Ni una medida escrita aquí.
⚠ LOS DOS PSEUDO-ELEMENTOS DE `.v-foto__caja` SON DE ESTA HOJA (::before = tono/veladura,
::after = la luz de la época). Las vistas no pueden usarlos — mismo aviso que trae
`.v-panel` en el §8.
MARCADO CANÓNICO (lo componen igual las tres landings):
Pie opcional
· `width`/`height` van SIEMPRE y con los píxeles reales del fichero: es lo que le deja al
navegador reservar el hueco antes de descargar nada. Sin ellos la página pega un salto
al cargar cada foto, que es justo lo que un scroll narrativo no puede permitirse.
· `loading="lazy"` en todas MENOS en la del hero: la del hero se ve sin bajar y aplazarla
solo consigue que el primer golpe de vista llegue tarde.
· `alt` descriptivo de verdad. Un `alt=""` aquí sería mentir por omisión: estas fotos SON
el argumento de autoridad de la página, no adorno.
═══════════════════════════════════════════════════════════════════════════════════════ */
.v-foto{ margin: 0; }
.v-foto__caja{
position: relative;
/* Contiene el recorte del radio y aísla lo que pase dentro. */
overflow: hidden;
isolation: isolate;
border: var(--v-grosor-linea) solid var(--v-linea);
border-radius: var(--v-radio);
background: var(--v-fondo-2);
/* La foto no puede quedar por encima de la brújula ni del banner de vista previa. */
z-index: 0;
}
.v-foto img{
display: block;
width: 100%;
height: auto;
}
/* Las dos capas de época. Nacen vacías: cada era les pone su trabajo más abajo. */
.v-foto__caja::before,
.v-foto__caja::after{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
/* Pie de foto: es un dato (dónde y cuándo), no un adorno. Va en --v-tinta-2, que la
fundación tiene medido AA en las cinco épocas (§8 de la cabecera). */
.v-foto__pie{
margin-top: calc(var(--v-aire) * .5);
font-family: var(--v-cuerpo);
font-size: .86rem;
line-height: 1.4;
color: var(--v-tinta-2);
max-width: 46ch;
}
/* Escape: una foto que por lo que sea NO debe llevar el vestido de su época. Hoy no la usa
nadie; existe para que el día que haga falta no se resuelva con un `style=""`. */
.v-foto--cruda img{ filter: none; }
.v-foto--cruda .v-foto__caja::before,
.v-foto--cruda .v-foto__caja::after{ display: none; }
/* ── é1 · LA CUEVA — GRADACIÓN OCRE ────────────────────────────────────────────────────
El pigmento de la pared: sombras de tierra quemada y luces de ocre. `sepia` da el mapa
cálido y el `hue-rotate` negativo lo lleva del marrón amarillo del sepia (~40°) al ocre
de la hoguera (~26°, que es donde vive --v-materia #C97A3D). El contraste sube un pelo
porque la escala de grises aplana, y baja el brillo porque en la cueva NADA está
plenamente iluminado: hay una hoguera y punto. */
[data-era="1"] .v-foto img{
filter: grayscale(1) sepia(.95) hue-rotate(-14deg) saturate(2.45) brightness(.94) contrast(1.06);
}
/* Veladura de tierra en los bordes: la foto no está COLGADA en la pared, está DENTRO. */
[data-era="1"] .v-foto__caja::before{
background:
radial-gradient(120% 90% at 50% 45%, transparent 42%, color-mix(in srgb, var(--e1-tierra) 46%, transparent) 100%);
}
/* Y el lamido de la hoguera, abajo a la izquierda — el mismo sitio del que viene la luz en
la textura de la sección (§3, é1). Si la foto se iluminara desde otro lado, la sección
entera se leería como un collage. */
[data-era="1"] .v-foto__caja::after{
background:
radial-gradient(110% 75% at 6% 104%, var(--v-halo), transparent 58%),
linear-gradient(0deg, color-mix(in srgb, var(--v-fondo) 62%, transparent), transparent 38%);
}
/* ── é2 · LA PIEDRA — PÉTREO ───────────────────────────────────────────────────────────
Desaturado casi entero (queda un 8% de color para que la piel no parezca de yeso), con el
contraste subido: una inscripción se lee por el relieve, no por el color. El brillo NO
baja aquí: esta foto lleva el rótulo de la institución detrás y apagarla sería apagar la
prueba. La antorcha entra desde arriba, como las dos de la textura de la sección. */
[data-era="2"] .v-foto img{
filter: grayscale(.92) contrast(1.16) brightness(.98);
}
[data-era="2"] .v-foto__caja{
/* El relieve de la estela: canto alto iluminado, base asentada. Mismo recetario que
`[data-era="2"] .v-panel` (§8) — la foto es una placa más del muro. */
box-shadow:
inset 0 1px 0 var(--e2-brillo),
inset 0 -1px 0 var(--e2-hueco),
0 22px 46px -30px var(--v-opaco);
}
/* Polvo de piedra: una veladura mineral fría muy leve, para que el gris no sea gris de foto
en blanco y negro sino gris de MATERIAL. */
[data-era="2"] .v-foto__caja::before{
background: linear-gradient(168deg,
color-mix(in srgb, var(--e2-piedra) 9%, transparent),
transparent 46%,
color-mix(in srgb, var(--e2-hueco) 40%, transparent));
}
[data-era="2"] .v-foto__caja::after{
background:
radial-gradient(80% 55% at 12% -8%, color-mix(in srgb, var(--v-luz) 16%, transparent), transparent 62%),
radial-gradient(80% 55% at 88% -8%, color-mix(in srgb, var(--v-luz) 16%, transparent), transparent 62%);
}
/* ── é3 · EL PAPEL — TINTA IMPRESA ─────────────────────────────────────────────────────
Hoy ninguna landing pone una foto en la imprenta, pero la pieza tiene que funcionar en
las cinco o no es una pieza del sistema (regla 4 de la cabecera). Aquí una foto es un
GRABADO: sin color, con el papel comiéndose los blancos y la tinta cerrando los negros. */
[data-era="3"] .v-foto img{
filter: grayscale(1) contrast(1.2) brightness(1.04);
}
[data-era="3"] .v-foto__caja::before{
/* El tono del papel por debajo de la tinta. */
background: linear-gradient(180deg,
color-mix(in srgb, var(--v-sup) 22%, transparent),
color-mix(in srgb, var(--v-fondo-2) 26%, transparent));
}
/* ── é4 · EL HIERRO — MEDIA TINTA A LA LUZ DEL FILAMENTO ───────────────────────────────
Tampoco la usa nadie hoy. Cartel decimonónico: casi sin color, el ámbar de la bombilla
entrando por arriba y el hollín cerrando los lados, igual que la textura de la sección. */
[data-era="4"] .v-foto img{
filter: grayscale(.85) sepia(.25) contrast(1.12) brightness(.96);
}
[data-era="4"] .v-foto__caja::after{
background:
linear-gradient(90deg, var(--e4-hollin-lado), transparent 18%, transparent 82%, var(--e4-hollin-lado)),
radial-gradient(90% 60% at 54% -6%, color-mix(in srgb, var(--v-luz) 18%, transparent), transparent 64%);
}
/* ── é5 · LA CABINA — LIMPIA ───────────────────────────────────────────────────────────
HOY NO LLEVA FILTRO, y eso es una decisión, no una omisión: en la cabina la información
se enseña tal cual. Las cuatro épocas anteriores son un recuerdo teñido; ésta es lo que
está pasando. Se declaran los tres `none` a propósito para que ninguna regla de arriba se
cuele por herencia si un día alguien anida secciones. */
[data-era="5"] .v-foto img{ filter: none; }
[data-era="5"] .v-foto__caja::before,
[data-era="5"] .v-foto__caja::after{ background: none; }
