/* KONTEO · la web v3 (11-sep-2026, estructura de Roman)
   Pergamino, una lámina grande por sección y los instrumentos en negro, dibujados por código.
   Solo se anima transform y opacity; lo que está fuera de escena lleva .fuera (no se pinta, no carga y no gira). */

:root {
  --papel: #EDE4CE;
  --tinta: #0E1524;                       /* la tinta de la marca: el texto */
  --tinta-70: rgba(14, 21, 36, .72);
  --tinta-45: rgba(14, 21, 36, .45);
  --negro: #17140F;                       /* negro de imprenta: aros, balanza e instrumentos */
  --display: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --texto: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --mano: 'Petit Formal Script', 'Snell Roundhand', 'Apple Chancery', cursive;
  --interfaz: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --acento: 'Instrument Serif', 'Libre Caslon Text', Georgia, serif;   /* la segunda voz del titular, en cursiva (v4b) */
  /* el dorado sobre el pergamino (v4c; Roman: «con dorado le damos aspecto más premium»). El oro de la marca #C9A45C da
     1,85:1 y no se lee solo: aquí es un oro viejo SIN destello (Roman eligió este frente al del brillo #D9BC6E, 11-sep):
     2,5:1 en lo alto de la letra y de 3,4 a 5:1 en su cuerpo */
  --oro-viejo: #A07A2E;                   /* 3,1:1 */
  --oro-hondo: #7A5B22;                   /* 5,0:1 */
  --oro-sombra: #5E4515;                  /* 7,1:1 */
  --metal: linear-gradient(180deg, #B08A3C 8%, #97732F 48%, var(--oro-hondo) 92%);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  background-color: var(--papel);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 42%, transparent 60%, rgba(122, 88, 38, .16) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .27  0 0 0 0 .14  0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
  color: var(--tinta); font-family: var(--texto); -webkit-font-smoothing: antialiased;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: inherit; }
.fuera { display: none !important; }

/* ---- EL GESTO ÚNICO: cartela → titular → filete → cuerpo, con UNA variable --v ---- */
@property --v { syntax: '<number>'; inherits: false; initial-value: 0; }
.gesto { --v: 0;
  --g1: clamp(0, calc(var(--v) / .30), 1);
  --g2: clamp(0, calc((var(--v) - .14) / .34), 1);
  --g3: clamp(0, calc((var(--v) - .32) / .30), 1);
  --g4: clamp(0, calc((var(--v) - .44) / .42), 1); }
.gesto.suave { transition: --v .95s var(--curva); }
.gesto.suave.ve { --v: 1; }
.gesto .cartela { opacity: var(--g1); transform: translateY(calc((1 - var(--g1)) * 7px)); }
.gesto h1, .gesto h2, .gesto .firma, .gesto .pregunta, .gesto .cifra, .gesto .hora { opacity: var(--g2); transform: translateY(calc((1 - var(--g2)) * 11px)); }
.gesto .filete { opacity: var(--g3); transform: scaleX(var(--g3)); transform-origin: left center; }
.gesto p:not(.cartela), .gesto .opciones, .gesto form, .gesto .conectores { opacity: var(--g4); transform: translateY(calc((1 - var(--g4)) * 9px)); }
p.gesto { --g4: clamp(0, calc(var(--v) / .5), 1); }
p.gesto.texto { transform: none; }

/* ---- el raíl y el escenario ---- */
#rail { height: 3000vh; position: relative; }   /* 2900vh de recorrido + la pantalla del final */
#stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; overflow: clip; isolation: isolate; }
.lamina { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; will-change: transform, opacity; z-index: 3; }
.lamina img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }

/* ---- los instrumentos: cajas cuadradas; su tamaño lo pone el JS y giran con CSS (en el compositor) ---- */
.instr { position: absolute; left: 0; top: 0; width: 100px; height: 100px; pointer-events: none; z-index: 5; opacity: 0; transform-origin: 0 0; will-change: transform, opacity; }
.instr svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.instr .l, #nav-sello .l, .aro-c .l { fill: none; stroke: var(--negro); vector-effect: non-scaling-stroke; }
.instr .f, #nav-sello .f { fill: var(--negro); stroke: none; }
.instr text, #nav-sello text { fill: var(--negro); font-family: var(--texto); }
.instr .k, #nav-sello .k { font-family: var(--display); }
.gira { animation: gira var(--gira, 120s) linear infinite; }
.gira.rev { animation-direction: reverse; }
@keyframes gira { to { transform: rotate(360deg); } }
.capa-i { transition: opacity .35s var(--curva); }

/* ---- los textos: sin caja; un halo de papel detrás, por si rozan una lámina ---- */
.texto { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; pointer-events: none; z-index: 8; }
.texto::before { content: ""; position: absolute; inset: -16% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(237, 228, 206, .9), rgba(237, 228, 206, .6) 60%, rgba(237, 228, 206, 0)); }
.cartela { display: flex; align-items: center; gap: 12px; margin: 0 0 1.1em; font: 600 12.5px/1.3 var(--interfaz); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-70); }
.cartela.sec::before { display: none; }
.aro-s { position: relative; flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; }
.aro-s svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --gira: 90s; }
.aro-s svg .l { fill: none; stroke: var(--negro); vector-effect: non-scaling-stroke; }
.aro-s svg .f { fill: var(--negro); }
.aro-s i { position: relative; font: normal 400 17px/1 var(--display); letter-spacing: 0; color: var(--negro); }
.cartela::before { content: ""; flex: 0 0 26px; height: 1px; background: var(--negro); }
.texto h2, #t-portada h1, #colofon h2 { font-family: var(--display); font-weight: 400; color: var(--tinta); text-wrap: balance;
  -webkit-text-stroke: .016em var(--tinta); paint-order: stroke fill;
  text-shadow: 0 1px 0 rgba(255, 251, 238, .75), 0 -1px 0 rgba(14, 21, 36, .16); }   /* tinta prensada: reflejo claro debajo, toque oscuro arriba */
.texto h2 { font-size: clamp(39px, 4.9vw, 84px); line-height: 1.02; letter-spacing: -.012em; margin: 0; }
.filete { display: block; width: 64px; height: 1px; background: var(--negro); margin: 1.05em 0 .95em; }
.texto p, p.texto { font: 500 clamp(18px, 1.32vw, 20px)/1.5 var(--interfaz); color: var(--tinta); max-width: 38ch; text-wrap: pretty; letter-spacing: .002em; }
.texto h2 + p, .texto h2 + .filete + p { margin-top: .7em !important; }
.texto p { margin: 0; }
.texto p + p { margin-top: .55em; }
.texto b { font-weight: 600; font-family: var(--interfaz); }
.enlace { display: inline-block; margin-top: .5em; text-decoration: none; border-bottom: 1px solid var(--negro); font-style: italic; }
.enlace::after { content: "  →"; }

/* ---- 1 · PORTADA (la de siempre) ---- */
#t-portada { width: 100%; left: 0; top: 0; height: 0; opacity: 1; }
#t-portada::before { display: none; }
#t-portada .bajada { position: absolute; left: 50%; top: 0; translate: -50% 0; width: max-content; max-width: 92vw; margin: 0; letter-spacing: .18em; }
#t-portada .bajada::after { content: ""; flex: 0 0 26px; height: 1px; background: var(--negro); }
#t-portada h1 { position: absolute; left: 50%; top: 0; translate: -50% 0; width: max-content; max-width: 90vw; margin: 0; text-align: center;
  font: 400 clamp(30px, 3.3vw, 54px)/1.1 var(--display); letter-spacing: .005em; text-wrap: balance; }
#t-portada h1::before { content: ""; position: absolute; inset: -30% -8%; z-index: -1; background: radial-gradient(closest-side, rgba(237, 228, 206, .92), rgba(237, 228, 206, 0)); }
#baja { position: absolute; left: 50%; bottom: 3.2vh; translate: -50% 0; z-index: 8; margin: 0; }
.senal { display: flex; align-items: center; gap: 14px; font-style: italic; color: var(--tinta-70); }
.senal .hilo { position: relative; width: 1px; height: 46px; background: var(--tinta-45); overflow: hidden; }
.senal .hilo i { position: absolute; left: -1px; top: 0; width: 3px; height: 10px; background: var(--negro); animation: gota 1.9s var(--curva) infinite; }
@keyframes gota { 0% { transform: translateY(-10px); } 100% { transform: translateY(48px); } }
#l-cirrus { aspect-ratio: 2000/716; z-index: 2; }
#l-cumulus { aspect-ratio: 2000/1388; z-index: 2; }
.nube img { animation: deriva 140s ease-in-out infinite alternate; }
#l-cumulus img { animation-duration: 170s; animation-direction: alternate-reverse; }
@keyframes deriva { from { transform: translate(-1.6%, .6%); } to { transform: translate(1.6%, -.6%); } }
.marco { z-index: 6; }
#l-esq-bar { aspect-ratio: 1974/3003; }
#l-esq-mesa { aspect-ratio: 2000/2404; }
#l-cortina { aspect-ratio: 3000/2390; z-index: 12; }
#sello { z-index: 7; }

/* las gaviotas: la trayectoria (vuelo), la onda (ola) y el aleteo (la tira de fotogramas desplazada) */
.gav { position: absolute; left: var(--x0); top: var(--y0); width: var(--gw); aspect-ratio: 1100/678; z-index: 4; pointer-events: none;
  animation: vuelo var(--dur) linear var(--del) infinite; will-change: transform; }
.gav.izq { animation-direction: reverse; }
@keyframes vuelo { from { transform: translateX(calc(-1 * var(--x0) - var(--gw) - 6vw)); } to { transform: translateX(calc(100vw - var(--x0) + 6vw)); } }
.gav-ola { width: 100%; height: 100%; animation: ola var(--ola) ease-in-out infinite alternate; }
@keyframes ola { from { transform: translateY(-16%); } to { transform: translateY(16%); } }
.gav-caja { width: 100%; height: 100%; overflow: hidden; }
.gav.izq .gav-caja { transform: scaleX(-1); }
.gav-caja img { display: block; width: 400%; max-width: none; height: 100%; animation: aleteo 2.4s steps(1, end) infinite; animation-delay: calc(var(--del) / 7); }
@keyframes aleteo {
  0% { transform: translateX(-25%); } 8% { transform: translateX(-50%); } 16% { transform: translateX(-75%); } 24% { transform: translateX(-50%); }
  32% { transform: translateX(-25%); } 40% { transform: translateX(-50%); } 48% { transform: translateX(-75%); } 56% { transform: translateX(-50%); }
  64% { transform: translateX(-25%); } 70% { transform: translateX(0); } 100% { transform: translateX(0); } }
.pausa .gav, .pausa .gav-ola, .pausa .gav-caja img, .pausa .gira, .pausa .nube img { animation-play-state: paused; }

/* ---- 2 · la balanza: instrumento negro; en sus platos, la factura sola y el montón con la tira del Z ---- */
.bal { z-index: 5; }
#bal-cruz { z-index: 6; }
.factura-sola { position: absolute; left: 0; top: 0; z-index: 6; opacity: 0; will-change: transform, opacity; padding: 7% 9%; display: flex; flex-direction: column; gap: 7%;
  background: #F8F2E4; border: 1px solid rgba(58, 42, 21, .25); box-shadow: 0 6px 14px rgba(58, 42, 21, .18); pointer-events: none; }
.factura-sola b { font: 600 clamp(7px, .62vw, 10px)/1 var(--interfaz); letter-spacing: .18em; color: rgba(38, 40, 46, .75); }
.factura-sola i { display: block; height: 2px; background: rgba(38, 40, 46, .22); }
.factura-sola i:nth-of-type(2n) { width: 64%; }
.factura-sola span { display: block; height: 3px; width: 42%; margin-left: auto; background: rgba(38, 40, 46, .5); }
#l-facturas { aspect-ratio: 1400/1328; z-index: 6; }
#l-tira { z-index: 5; }
.dos p + p { margin-top: .9em; }

/* ---- 3 · la rueda: el diorama de Alicante en tres capas, la línea sobre las ondas y cada fase en su aro ---- */
.capa { position: absolute; left: 0; top: 0; max-width: none; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); }   /* al entrar y al salir, el borde se funde: nunca un corte recto */
#viajero { z-index: 7; }
#d-fondo { z-index: 1; aspect-ratio: 3200/1169; } #d-ciudad { z-index: 2; aspect-ratio: 3200/1033; } #d-frente { z-index: 4; aspect-ratio: 3200/1295; }
/* las copas de las palmeras tocan el borde de su lámina: además del fundido de los lados, se funden por arriba en el papel */
#d-frente { -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent), linear-gradient(to bottom, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent), linear-gradient(to bottom, transparent 0, #000 14%);
  mask-composite: intersect; }
#gav-4, #gav-5 { z-index: 3; }
#t-solo h2 { font-size: clamp(22px, 2.2vw, 34px); margin-bottom: .8em; }
.conectores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6vw; }
.conectores li { display: flex; gap: .7em; align-items: flex-start; }
.conectores .aro-c { flex: 0 0 auto; width: 34px; height: 34px; overflow: visible; --gira: 90s; }
.conectores li:nth-child(2) .aro-c { --gira: 120s; } .conectores li:nth-child(3) .aro-c { --gira: 150s; } .conectores li:nth-child(4) .aro-c { --gira: 70s; }
.conectores p { font-size: clamp(14px, 1.02vw, 16px) !important; line-height: 1.45 !important; }

/* ---- 4 · el día a día ---- */
.tira-z { position: absolute; left: 0; top: 0; z-index: 6; opacity: 0; will-change: transform, opacity; padding: 10% 12%; display: flex; flex-direction: column; gap: 9%; align-items: center;
  background: #F6F0E1; box-shadow: 0 1px 0 rgba(58, 42, 21, .2), 0 6px 14px rgba(58, 42, 21, .18); pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 90% 98.5%, 80% 100%, 70% 98.5%, 60% 100%, 50% 98.5%, 40% 100%, 30% 98.5%, 20% 100%, 10% 98.5%, 0 100%); }
.tira-z b, .tira-z span { font: 600 clamp(7px, .6vw, 10px)/1 var(--interfaz); letter-spacing: .12em; color: rgba(38, 40, 46, .8); white-space: nowrap; }
.tira-z i { display: block; width: 100%; height: 2px; background: rgba(38, 40, 46, .24); }
.tarjeta { padding: 1.1em 1.3em 1.2em; background: #F7F1E3; border: 1px solid rgba(58, 42, 21, .22); box-shadow: 0 14px 34px rgba(58, 42, 21, .16); }
.tarjeta::before { display: none; }
.tarjeta h2 { font-size: clamp(20px, 1.9vw, 30px) !important; font-variant-numeric: lining-nums; }
.tarjeta p { margin-top: .5em !important; }
.esfera-txt { position: absolute; left: 0; top: 0; z-index: 8; opacity: 0; text-align: center; transform: translate(-50%, -50%); pointer-events: none; }
.esfera-txt .cartela { justify-content: center; margin-bottom: .7em; }
.esfera-txt .cartela::before { display: none; }
.esfera-txt .cifra { display: block; font: 400 clamp(34px, 3.6vw, 60px)/1 var(--display); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.muestra { margin: 1em 0 0; }
.momento .hora { display: block; font: 400 clamp(34px, 3.6vw, 58px)/1 var(--display); letter-spacing: .03em; margin-bottom: .35em; }

/* ---- 5 · el asistente: las preguntas, a pluma ---- */
.pregunta-k { font: 400 clamp(22px, 2.3vw, 36px)/1.25 var(--mano) !important; text-align: center; max-width: none !important; }

/* ---- 6 · la libreta a boli: lo escrito a mano y lo pasado a limpio, sobre las páginas del libro ---- */
#l-libro { aspect-ratio: 2400/1797; z-index: 4; }
.renglones { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; pointer-events: none; will-change: transform, opacity; }
.renglones ol { position: absolute; margin: 0; padding: 0; list-style: none; transform-origin: 0 0; }
.a-mano li { font: 400 1em/1 var(--mano); color: rgba(28, 36, 70, .85); opacity: 0; white-space: nowrap; }
.a-limpio li { display: flex; align-items: baseline; font: 400 .8em/1 var(--texto); color: rgba(38, 34, 30, .92); opacity: 0; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.a-limpio li i { flex: 1 1 auto; min-width: 1.4em; margin: 0 .4em; border-bottom: 1.5px dotted rgba(38, 34, 30, .5); }

/* ---- el menú: Asesorías · la K · Precios. La K solo aparece cuando llega la de la portada (es la misma) ---- */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 4vw; pointer-events: none; }
#nav a { text-decoration: none; pointer-events: auto; }
#nav::before { content: ""; position: absolute; inset: 0 0 -26px; z-index: -1; opacity: 0; transition: opacity .3s; pointer-events: none; background: linear-gradient(var(--papel) 62%, rgba(237, 228, 206, 0)); }
#nav.sobre-pie::before { opacity: 1; }
#nav .lado a { font: italic 400 15px/1 var(--texto); color: var(--tinta-70); border-bottom: 1px solid transparent; padding: 10px 0; }
#nav .lado a:hover, #nav .lado a:focus-visible { border-bottom-color: var(--negro); }
#nav .der { text-align: right; }
#nav .sello { display: block; width: 46px; height: 46px; opacity: 0; pointer-events: none; }
#nav.sello-vivo .sello { opacity: 1; pointer-events: auto; }
#nav-sello { width: 100%; height: 100%; display: block; overflow: visible; }
#nav-sello .arco { fill: none; stroke: var(--negro); stroke-width: 2.4; }

/* ---- 7 · el librito ---- */
#hoja { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 4vw; opacity: 0; pointer-events: none; z-index: 10; }
#hoja.vivo { pointer-events: auto; }
.libro { position: relative; width: min(92vw, 820px); min-height: min(52vw, 460px); display: grid; container-type: inline-size; perspective: 1800px; will-change: transform;
  background: #F2EAD7 linear-gradient(90deg, rgba(58, 42, 21, .16), transparent 8%, transparent 46%, rgba(58, 42, 21, .2) 50%, transparent 54%, transparent 92%, rgba(58, 42, 21, .16));
  box-shadow: 0 30px 70px rgba(58, 42, 21, .32), 0 0 0 1px rgba(58, 42, 21, .28); --ink: #2B2418; transform-origin: 50% 50%; }
.libro::after { content: ""; position: absolute; inset: 9% 6%; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(2.6cqw - 1px), rgba(120, 60, 40, .12) calc(2.6cqw - 1px) 2.6cqw); }
.cara { grid-area: 1/1; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding: 7.5% 7%; color: var(--ink);
  transform-origin: left center; transition: transform .7s var(--curva), opacity .5s var(--curva); }
.cara[hidden] { display: none; }
.cara.pasa { transform: rotateY(-34deg); opacity: 0; }
.cara.entra { animation: entra .7s var(--curva); }
@keyframes entra { from { transform: rotateY(24deg); opacity: 0; } to { transform: none; opacity: 1; } }
.pg { min-width: 0; align-self: center; }
.cara .pregunta { font: 400 clamp(22px, 5.4cqw, 44px)/1.2 var(--mano); margin: 0; text-wrap: balance; }
.cara h2 { font: 400 clamp(18px, 3.7cqw, 31px)/1.15 var(--display); margin: 0; text-wrap: balance; }
.cara .renglon { font: italic 400 clamp(12px, 1.8cqw, 15px)/1.5 var(--texto); color: rgba(43, 36, 24, .8); margin: .9em 0 0; max-width: 34ch; }
.cara .renglon b, .cara .precio-l b { font: normal 400 1.22em/1.3 var(--display); color: var(--ink); }
.cara .precio-l { font: italic 400 clamp(12px, 1.75cqw, 15px)/1.45 var(--texto); color: rgba(43, 36, 24, .8); margin: 1em 0 0; }
.cara .opciones { display: grid; gap: 1.2cqw; align-content: center; }
.cara .opciones button { display: flex; align-items: center; gap: 2.4cqw; width: 100%; text-align: left; padding: 2cqw .4cqw; border: 0; border-bottom: 1px solid rgba(43, 36, 24, .4);
  background: none; cursor: pointer; font: 400 clamp(16px, 2.8cqw, 24px)/1.2 var(--display); color: var(--ink); transition: transform .18s, border-color .18s; }
.cara .opciones button i { flex: 0 0 auto; width: max(13px, 2.1cqw); height: max(13px, 2.1cqw); border-radius: 50%; border: 1px solid rgba(43, 36, 24, .6); position: relative; }
.cara .opciones button:hover, .cara .opciones button:focus-visible { transform: translateX(1.2cqw); border-bottom-color: var(--negro); }
.cara .opciones button:hover i::after, .cara .opciones button:focus-visible i::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--negro); }
.cara form { align-self: center; display: grid; gap: .5em; }
.cara .campo { display: flex; align-items: flex-end; gap: 3cqw; margin-top: .4em; }
.cara input { width: 100%; min-width: 0; padding: 1cqw .4cqw .7cqw; background: none; border: 0; border-bottom: 1px solid rgba(43, 36, 24, .55); color: var(--ink);
  font: italic 400 clamp(15px, 2.2cqw, 19px)/1.3 var(--texto); caret-color: var(--ink); border-radius: 0; }
.cara input::placeholder { color: rgba(43, 36, 24, .45); }
.cara input:focus { outline: none; border-bottom-color: var(--ink); }
.lacre { flex: 0 0 auto; display: flex; align-items: center; gap: 1.6cqw; border: 0; background: none; cursor: pointer; color: var(--ink); font: 400 clamp(14px, 2cqw, 17px)/1 var(--display); letter-spacing: .04em; min-height: 44px; padding: 0; }
.lacre .sello-l { width: max(44px, 6.6cqw); height: max(44px, 6.6cqw); border-radius: 50%; display: grid; place-items: center; color: #F2EAD7; background: var(--negro);
  box-shadow: 0 6px 14px rgba(58, 42, 21, .35), inset 0 0 0 3px rgba(242, 234, 215, .18); transition: transform .18s; }
.lacre .sello-l svg { width: 74%; height: 74%; overflow: visible; }
.lacre .sello-l text { font: 400 21px/1 var(--display); }
.lacre:hover .sello-l, .lacre:focus-visible .sello-l { transform: scale(1.05); }
.lacre.pulsa .sello-l { animation: pulsa .5s var(--curva); }
@keyframes pulsa { 40% { transform: scale(.88); } 100% { transform: scale(1); } }
.cara .error { margin: .2em 0 0; font: 400 clamp(12px, 1.7cqw, 14px)/1.4 var(--texto); color: #93331F; min-height: 1.2em; }
.cara .alcance { margin: 0; font: italic 400 clamp(11.5px, 1.6cqw, 13.5px)/1.4 var(--texto); color: rgba(43, 36, 24, .66); }
.cara .volver { position: absolute; right: 2.5%; top: 3%; width: max(40px, 6cqw); height: max(40px, 6cqw); border: 0; background: none; cursor: pointer; color: rgba(43, 36, 24, .7); display: grid; place-items: start end; z-index: 2; padding: 0; }
.cara .volver svg { width: 80%; height: 80%; transform: scaleX(-1); }
.cara .firma { font: 400 clamp(26px, 6cqw, 50px)/1.1 var(--mano); margin: 0; }
.libro :focus-visible { outline: 2px solid var(--negro); outline-offset: 2px; }

/* ---- el pie: el colofón con su sello y el aviso ---- */
#colofon { position: relative; padding: 16vh 7vw 4vh; max-width: 860px; margin: 0 auto; text-align: center; }
#sello-pie { position: relative; width: min(52vw, 230px); height: min(52vw, 230px); margin: 0 auto 2.4em; opacity: 1; }
#colofon h2 { font: 400 clamp(32px, 3.8vw, 58px)/1.1 var(--display); margin: 0 0 .45em; opacity: var(--g2); transform: translateY(calc((1 - var(--g2)) * 11px)); }
#colofon .firma-marca { margin: 0; font: italic 400 clamp(16px, 1.25vw, 19px)/1.5 var(--texto); color: var(--tinta-70); opacity: var(--g4); }
#pie { padding: 7vh 7vw 8vh; max-width: 1120px; margin: 0 auto; display: grid; gap: 1.1em; justify-items: center; text-align: center; }
#pie .aviso { margin: 0; max-width: 60ch; font: italic 400 14px/1.5 var(--texto); color: var(--tinta-70); }
#pie nav { display: flex; gap: 2em; flex-wrap: wrap; justify-content: center; }
#pie a { font: italic 400 15px/1 var(--texto); text-decoration: none; border-bottom: 1px solid var(--tinta-45); padding: 6px 0; }
#pie .mini { font: 400 12px/1 var(--texto); letter-spacing: .14em; color: var(--tinta-70); margin: 0; }
#pie .legales { gap: 1.6em; }
#pie .legales a { font-size: 13px; color: var(--tinta-70); }
#pie a:hover, #pie a:focus-visible { border-bottom-color: var(--negro); }
#pie a:focus-visible, #nav a:focus-visible { outline: 2px solid var(--negro); outline-offset: 3px; }
.cara .alcance a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* «Tócala tú»: el enlace a la app de muestra dentro de un texto del raíl (los textos no reciben el ratón; el enlace sí) */
.texto a.enlace { pointer-events: auto; font: italic 400 1em/1.3 var(--texto); color: var(--tinta); margin-top: .9em; padding: 4px 0; }
.texto a.enlace:hover { border-bottom-width: 2px; }
.texto a.enlace:focus-visible { outline: 2px solid var(--negro); outline-offset: 3px; }

/* ---- móvil ---- */
@media (max-width: 720px) {
  #nav { padding: 8px 5vw; } #nav .sello { width: 40px; height: 40px; } #nav .lado a { font-size: 14px; }
  .texto h2 { font-size: clamp(23px, 6.6vw, 30px); }
  .texto p, p.texto { font-size: 15px; }
  .paso h2, #t-solo h2 { font-size: clamp(20px, 5.6vw, 25px); }
  #t-portada .bajada { display: block; width: min(84vw, 330px); white-space: normal; text-align: center; font-size: 11px; line-height: 1.7; letter-spacing: .14em; }
  #t-portada .bajada::before, #t-portada .bajada::after { display: none; }
  #t-portada h1 { font-size: clamp(28px, 8.4vw, 36px); width: 84vw; }
  #baja { bottom: 2.4vh; }
  .conectores { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .conectores .aro-c { width: 26px; height: 26px; }
  .conectores p { font-size: 13.5px !important; }
  .momento .hora { font-size: clamp(30px, 9vw, 40px); }
  .esfera-txt .cartela { font-size: 10px; letter-spacing: .12em; }
  .pregunta-k { font-size: clamp(20px, 5.8vw, 26px) !important; }
  #d-ciudad, #gav-5 { display: none !important; }
  .cara.form, .cara#h1 { grid-template-columns: 1fr; gap: 1.2em; padding: 9% 7%; }
  .libro { background: #F2EAD7; }
  .cara .renglon, .cara .precio-l { font-size: 13px; max-width: none; }
  .cara input { font-size: 16px; padding: 7px 2px 6px; }
  #colofon { padding-top: 12vh; }
}

/* ---- captura fija y movimiento reducido ---- */
html.still *, html.still *::before, html.still *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .gesto { --v: 1 !important; }
  .gira, .gav, .gav-ola, .gav-caja img, .nube img, .senal .hilo i { animation: none !important; }
  .cara, .capa-i { transition: none; }
}

/* ======================================================================
   v4 · el pulido: la barra cronológica, las tarjetas, las piezas del bar y los tamaños de titular por sección
   ====================================================================== */
#t-portada h1 { font-size: clamp(35px, 4vw, 66px); line-height: 1.02; }
#colofon h2 { font-size: clamp(39px, 4.7vw, 77px); line-height: 1.02; }
/* 3 · la rueda: una banda de papel arriba (el diorama pasa por debajo), la barra con sus cinco hitos y la línea de llamada */
#cab3 { position: absolute; left: 0; right: 0; top: 0; height: 30vh; z-index: 6; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: linear-gradient(var(--papel) 0, var(--papel) calc(100% - 56px), rgba(237, 228, 206, 0)); }
#crono { position: absolute; left: 0; top: 0; width: 100px; height: 0; z-index: 7; opacity: 0; pointer-events: none; }
#crono i { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: rgba(23, 20, 15, .35); transform-origin: 0 50%; }
#crono .crono-lleno { top: -2.5px; height: 5px; background: var(--negro); }
.hito { z-index: 8; }
.hito .disco { fill: #F3EBD8; }
.hito .astro { opacity: 0; transition: opacity .3s; }
.hito.activo .astro { opacity: 1; }
#llamada { position: absolute; left: 0; top: 0; width: 1.5px; height: 100px; background: var(--negro); z-index: 7; opacity: 0; transform-origin: 50% 0; pointer-events: none; }
.tarjeta-f { padding: 1.4em 1.6em 1.5em; background: #F7F1E3; border: 1px solid rgba(23, 20, 15, .55); box-shadow: 0 0 0 5px #F7F1E3, 0 0 0 6px rgba(23, 20, 15, .22), 0 20px 44px rgba(58, 42, 21, .2); }
.tarjeta-f::before { display: none; }
.tarjeta-f .num { display: block; font: 400 clamp(40px, 3.6vw, 60px)/1 var(--display); color: var(--negro); margin-bottom: .1em; }
.tarjeta-f h2 { font-size: clamp(25px, 2.2vw, 37px) !important; }
.tarjeta-f p { max-width: none; }
.tarjeta-f .tiempo { font-style: normal; font-weight: 600; font-size: .86em !important; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-70); margin-top: .9em; }
.aro-t { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; }
.aro-t svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.aro-t svg .l, .aro-t svg .f { vector-effect: non-scaling-stroke; } .aro-t svg .l { fill: none; stroke: var(--negro); } .aro-t svg .f { fill: var(--negro); }
#t-3 h2 { font-size: clamp(39px, 4.4vw, 75px); }
#t-solo h2 { font-size: clamp(27px, 2.6vw, 44px) !important; margin-bottom: .6em; }
.conectores .con { padding: 1em 1.1em; background: #F7F1E3; border: 1px solid rgba(23, 20, 15, .45); box-shadow: 0 12px 28px rgba(58, 42, 21, .14); }
.conectores .aro-c { width: 36px; height: 36px; }
.conectores .aro-c .f { fill: var(--negro); }
.conectores p { font-size: clamp(15px, 1.1vw, 17px) !important; }
.gav-p { position: absolute; left: 0; top: 0; aspect-ratio: 1100/678; z-index: 5; opacity: 0; pointer-events: none; will-change: transform, opacity; }
/* 4 · el día a día: la barra de suelo y las piezas del bar */
#barra { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar-h, 150px); z-index: 2; opacity: 0; will-change: transform, opacity; }
.barra-tira { position: absolute; left: 0; top: 0; height: 100%; width: calc(100% + 3 * var(--tramo-w, 444px)); will-change: transform;
  background: url("laminas/nuevas/derivadas/barra-tramo-m.webp") repeat-x 0 0 / auto 100%;
  background-image: -webkit-image-set(url("laminas/nuevas/derivadas/barra-tramo-m.webp") 1x, url("laminas/nuevas/derivadas/barra-tramo.webp") 2x);
  background-image: image-set(url("laminas/nuevas/derivadas/barra-tramo-m.webp") 1x, url("laminas/nuevas/derivadas/barra-tramo.webp") 2x); }
#l-botella { aspect-ratio: 1073/1400; z-index: 3; } #l-comanda { aspect-ratio: 1000/1114; z-index: 4; } #l-cana { aspect-ratio: 894/1817; z-index: 5; }
#l-aceite { aspect-ratio: 1085/1540; z-index: 6; } #l-tortilla { aspect-ratio: 1404/843; z-index: 6; } #l-caja { aspect-ratio: 2000/1635; z-index: 6; }
#t-4 h2 { font-size: clamp(39px, 4.4vw, 74px); }
.momento .hora { font-size: clamp(48px, 5vw, 84px) !important; -webkit-text-stroke: .012em var(--tinta); }
/* 5 · el asistente */
#t-5a h2 { font-size: clamp(39px, 4.4vw, 74px); }
.funcion h2 { font-size: clamp(35px, 3.7vw, 63px); }
.mano { font-family: var(--mano); font-size: 1.22em; line-height: 1.3; color: var(--tinta); }
h2.medio { font-size: clamp(30px, 3vw, 51px) !important; }
.pequena { font-size: clamp(15px, 1.05vw, 17px) !important; color: var(--tinta-70) !important; }
/* 6 · carga tus datos */
#t-6a h2 { font-size: clamp(37px, 3.9vw, 67px); }
.via h2 { font-size: clamp(35px, 3.5vw, 62px); }
@media (max-width: 720px) {
  .texto h2 { font-size: clamp(34px, 9.8vw, 43px); -webkit-text-stroke: .012em var(--tinta); text-shadow: 0 1px 0 rgba(255, 251, 238, .7); }
  .texto p, p.texto { font-size: 16.5px; }
  #t-portada h1 { font-size: clamp(31px, 8.6vw, 38px); }
  #t-3 h2, #t-4 h2, #t-5a h2, #t-6a h2 { font-size: clamp(32px, 9.3vw, 41px); }
  .funcion h2, .via h2 { font-size: clamp(31px, 8.6vw, 38px); }
  .tarjeta-f h2 { font-size: clamp(22px, 6.1vw, 27px) !important; }
  .tarjeta-f { padding: 1.1em 1.2em 1.2em; }
  #t-solo h2 { font-size: clamp(25px, 7.2vw, 31px) !important; }
  .conectores .con { padding: .8em .8em; }
  .momento .hora { font-size: clamp(40px, 11vw, 48px) !important; }
  h2.medio { font-size: clamp(25px, 7vw, 31px) !important; }
  .conectores { grid-template-columns: 1fr; gap: 8px; }
  .conectores li { gap: .65em; align-items: center; }
  .conectores .con { padding: .55em .8em; }
  .conectores .aro-c { width: 24px; height: 24px; }
  .conectores p { font-size: 14px !important; line-height: 1.38 !important; }
  #l-botella { display: none !important; }
}

/* ======================================================================
   v4b · dos letras en el titular (Roman, 11-sep): la Caslon de imprenta dice la frase y la cursiva de Instrument Serif
   (la hermana de la letra de la app) dice lo que importa, en metal dorado (en la v4b fue cobre
   y no convenció). La cursiva sobresale de su caja: el relleno de lado a lado, devuelto con margen, evita que el
   recorte del degradado le coma la punta a la última letra.
   ====================================================================== */
:is(.texto h2, #t-portada h1, #colofon h2, .cara h2) em {
  font-family: var(--acento); font-style: italic; font-weight: 400; letter-spacing: 0;
  color: var(--oro-hondo); -webkit-text-stroke: 0; text-shadow: none; padding: 0 .1em; margin: 0 -.1em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  :is(.texto h2, #t-portada h1, #colofon h2) em, .tarjeta-f .num {
    background-image: var(--metal); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}
.tarjeta-f .num { color: var(--oro-hondo); }
.cara h2 em { color: var(--oro-hondo); }   /* en el libro el titular es pequeño (menos de 24 px): oro hondo liso, 5:1 */

/* ======================================================================
   v4c · «Y lo que va solo», en el centro y en grande (Roman: «no se ve bien; debería ocupar más la página o el centro,
   algo más llamativo»): un velo de papel aparta el paseo, y cuatro tarjetas de dos en dos, cada una con su aro y su dibujo
   ====================================================================== */
#velo-solo { position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none; will-change: opacity;
  background: radial-gradient(ellipse 66% 64% at 50% 52%, rgba(237, 228, 206, .97) 0, rgba(237, 228, 206, .93) 55%, rgba(237, 228, 206, .5) 80%, rgba(237, 228, 206, 0) 100%); }
#t-solo { text-align: center; }
#t-solo::before { display: none; }
#t-solo h2 { font-size: clamp(39px, 4.4vw, 75px) !important; margin: 0 0 .5em; }
.conectores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); text-align: left; }
.conectores .con { display: flex; align-items: center; gap: 1.1em; padding: 1.25em 1.5em; background: #F7F1E3; border: 1px solid rgba(23, 20, 15, .55);
  box-shadow: 0 0 0 5px #F7F1E3, 0 0 0 6px rgba(23, 20, 15, .22), 0 18px 40px rgba(58, 42, 21, .18); }
.aro-i { position: relative; flex: 0 0 auto; width: clamp(56px, 4.8vw, 80px); aspect-ratio: 1; display: grid; place-items: center; }
.aro-i .aro-c { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.aro-i .ico { position: relative; width: 48%; height: 48%; fill: none; stroke: var(--negro); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.conectores p { font-size: clamp(16px, 1.2vw, 19px) !important; line-height: 1.42 !important; max-width: none; }
.conectores b { display: block; font: 400 clamp(22px, 1.8vw, 31px)/1.1 var(--display); color: var(--tinta); letter-spacing: -.005em; margin-bottom: .2em; }
@media (max-width: 720px) {
  #velo-solo { background: rgba(237, 228, 206, .94); }
  #t-solo h2 { font-size: clamp(30px, 8.6vw, 38px) !important; }
  .conectores { grid-template-columns: 1fr; gap: 11px; }
  .conectores .con { gap: .85em; padding: .8em 1em; box-shadow: 0 0 0 4px #F7F1E3, 0 0 0 5px rgba(23, 20, 15, .22), 0 10px 22px rgba(58, 42, 21, .16); }
  .aro-i { width: 46px; }
  .conectores b { font-size: 20px; }
  .conectores p { font-size: 14.5px !important; line-height: 1.38 !important; }
}

/* la K de astros (el icono de la app): el trazo escala con el dibujo */
.ka { fill: none; stroke: var(--negro); stroke-linecap: round; }
.ka-f { fill: var(--negro); stroke: none; }
.aro-i .ico { width: 42%; height: 42%; }

/* ======================================================================
   v4d · la barra de bar, con más cosas encima (Roman, 11-sep: «que parezca una barra de bar, con más detalles: ración de
   gildas, vasos llenos y vacíos… no hace falta que se muevan»). Cada pieza se apoya en el mostrador: abajo en su caja
   ====================================================================== */
.bar-p img { object-position: 50% 100%; }
#l-tirador { z-index: 3; } #l-servilletero { z-index: 4; } #l-gildas { z-index: 5; }
#l-cana-vacia { z-index: 4; } #l-vermut { z-index: 5; } #l-copa-vacia { z-index: 4; }

/* ======================================================================
   v5a · los gestos astrales de la app, en negro (el dorado, solo para el acierto): la constelación de lectura del 12:40,
   el diafragma de la K del asistente y la estrella del mes cubierto. La estrella fugaz la pinta fugaz.js en su lienzo
   ====================================================================== */
.constelacion { position: absolute; left: 0; top: 0; z-index: 7; opacity: 0; pointer-events: none; overflow: visible; will-change: opacity; }
.constelacion .fe { stroke-width: 1.3; opacity: 0; }
.constelacion .traza { fill: none; stroke: var(--negro); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.constelacion .tick { stroke: var(--negro); stroke-width: .8; stroke-dasharray: 1.5 2.5; opacity: 0; transition: opacity .22s var(--curva); }
.constelacion .tick.on { opacity: .75; }
.constelacion .astro { fill: var(--negro); opacity: 0; transition: opacity .22s var(--curva); }
.constelacion .astro.on { opacity: 1; }
.diafragma { z-index: 7; }
.diafragma .hoja-k { fill: #F3EBD8; stroke: var(--negro); stroke-width: .9; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.estrella-mes { fill: url(#k-metal-esf); stroke: #F3EBD8; stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .42s var(--curva); }
.estrella-mes.on { opacity: 1; }