/* =========================================================
   MOISÉS MORAO · El Loco que caminó al Sol
   Basramle: títulos grandes · Glimmer of Light: subtítulos · Avenir Next Condensed: textos
   Una sola bajada continua: ningún bloque tiene fondo propio, todo es la misma oscuridad.
   ========================================================= */

@font-face { font-family: "Basramle"; src: url("../assets/fonts/basramle.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Glimmer"; src: url("../assets/fonts/glimmer.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Avenir Cn"; src: url("../assets/fonts/avenir-ultralight.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Avenir Cn"; src: url("../assets/fonts/avenir-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Avenir Cn"; src: url("../assets/fonts/avenir-light-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Avenir Cn"; src: url("../assets/fonts/avenir-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --negro: #050303;
  --sangre: #8c070c;
  --rojo: #c4101c;
  --luz: #ff2a36;
  --blanco: #f2e9df;
  --blanco-2: rgba(242, 233, 223, .66);
  --blanco-3: rgba(242, 233, 223, .3);
  --f-display: "Basramle", "Didot", "Bodoni 72", serif;
  --f-sub: "Glimmer", "Didot", serif;
  --f-text: "Avenir Cn", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --gutter: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(.22, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--negro); color-scheme: dark; -webkit-text-size-adjust: 100%; overflow-x: clip; }   /* nada se sale por los lados: el móvil no encoge la página */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--negro); color: var(--blanco);
  font-family: var(--f-text); font-weight: 300; font-size: clamp(17px, 1.15vw, 20px); line-height: 1.5;
  overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure, blockquote, p, h1, h2, h3 { margin: 0; font-weight: 400; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--rojo); color: var(--blanco); }
:focus-visible { outline: 1px solid var(--luz); outline-offset: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.display { font-family: var(--f-display); text-transform: uppercase; line-height: .86; }
.display span { display: block; }
.display--lg { font-size: clamp(3.2rem, 7vw, 8.4rem); }
.sub { font-family: var(--f-sub); font-size: clamp(1.3rem, 2vw, 2.1rem); line-height: 1.15; }
.body { font-size: clamp(1.05rem, 1.25vw, 1.32rem); line-height: 1.55; color: var(--blanco-2); max-width: 36ch; margin-top: 1.6rem; }
.ch, .wd { display: inline-block; will-change: transform, opacity; }

/* ---------- Atmósfera ---------- */
.dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.dust--front { z-index: 4; }   /* chispas que pasan por delante del libro */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- Preloader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--negro); overflow: hidden; display: grid; place-items: center; }
.loader__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.4s var(--ease); }
.loader.has-video .loader__video.is-playing { opacity: 1; }
.loader__veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, rgba(5, 3, 3, 0) 40%, rgba(5, 3, 3, .85) 100%); }
.loader__card { width: min(30vw, 150px); filter: drop-shadow(0 0 40px rgba(196, 16, 28, .45)); animation: breathe 2.6s var(--ease) infinite alternate; }
.loader.has-video .loader__card { display: none; }
.loader__line { position: absolute; left: 50%; bottom: calc(6vh + env(safe-area-inset-bottom)); translate: -50% 0; width: 120px; height: 1px; background: var(--blanco-3); overflow: hidden; }
.loader__line i { display: block; height: 100%; background: var(--luz); box-shadow: 0 0 10px var(--luz); transform-origin: left; transform: scaleX(0); }
.loader__enter { position: absolute; right: var(--gutter); bottom: calc(6vh + env(safe-area-inset-bottom) - .7em); background: none; border: 0; color: var(--blanco); cursor: pointer; padding: .4em 0; font: italic 300 1.25rem/1 var(--f-text); opacity: 0; visibility: hidden; }
.loader__enter::after { content: ""; display: block; height: 1px; margin-top: .4em; background: var(--luz); transform: scaleX(.25); transform-origin: left; transition: transform .6s var(--ease); }
.loader__enter:hover::after, .loader__enter:focus-visible::after { transform: scaleX(1); }
@keyframes breathe { from { transform: scale(.97); opacity: .75; } to { transform: scale(1); opacity: 1; } }
body:not(.is-loading) .loader { pointer-events: none; }

.hud { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: calc(20px + env(safe-area-inset-top)) var(--gutter) 20px; pointer-events: none; display: flex; justify-content: space-between; align-items: baseline; }
.hud__right { display: flex; align-items: center; gap: 1.6rem; }
.menu-btn { pointer-events: auto; position: relative; width: 34px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.menu-btn i { position: absolute; left: 0; right: 0; height: 1px; background: var(--blanco); transition: transform .6s var(--ease), top .6s var(--ease), background .4s; }
.menu-btn i:first-child { top: 6px; }
.menu-btn i:last-child { top: 15px; }
.menu-btn:focus, .menu-btn:focus-visible { outline: none; }
.menu__name { position: absolute; top: calc(20px + env(safe-area-inset-top)); left: var(--gutter); font-family: var(--f-sub); font-size: 1.2rem; line-height: .9; color: var(--blanco-2); transition: color .4s; }
.menu__name:hover { color: var(--blanco); }
/* con el menú abierto, el nombre grande de la web no se ve (el menú lleva el suyo, pequeño) */
body.menu-open .hud__name { visibility: hidden !important; pointer-events: none; }   /* la animación del nombre escribe su propia opacidad: se oculta del todo */
.hud__name { transition: color .4s, opacity .4s; }
.menu-btn:hover i, .menu-btn:focus-visible i { background: var(--luz); box-shadow: 0 0 10px rgba(255, 42, 54, .7); }
.menu-btn[aria-expanded="true"] i:first-child { top: 11px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { top: 11px; transform: rotate(-45deg); }
/* menú a pantalla completa */
.menu { position: fixed; inset: 0; z-index: 45; visibility: hidden; pointer-events: none; }
.menu.is-open { pointer-events: auto; }
.menu__panel { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, rgba(140, 7, 12, .28), rgba(5, 3, 3, 0) 70%), var(--negro); clip-path: inset(0 50% 0 50%); }
.menu__edge { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255, 42, 54, .9); box-shadow: 0 0 18px rgba(255, 42, 54, .8), 0 0 60px rgba(255, 42, 54, .35); transform-origin: 50% 0; }
.menu__nav { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(.6rem, 1.6vh, 1.2rem); padding: 12vh var(--gutter) 16vh; text-align: center; }
.menu__nav a { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.5rem, min(2.9vw, 4.6vh), 3.1rem); line-height: 1.1; color: var(--blanco); transition: color .5s var(--ease), text-shadow .5s var(--ease); }
.menu__nav a:hover, .menu__nav a:focus-visible { color: #ffd3d3; text-shadow: 0 0 40px rgba(255, 42, 54, .9); }
.menu__foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(4vh + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.menu__langs { display: flex; gap: 1.6rem; }
.menu__langs button, .menu__legal { padding: .2em 0; border: 0; background: none; cursor: pointer; font-family: var(--f-text); font-weight: 300; font-size: clamp(1.05rem, 1.25vw, 1.35rem); letter-spacing: .02em; color: var(--blanco-2); transition: color .4s var(--ease); }
.menu__langs button[aria-pressed="true"] { color: var(--blanco); box-shadow: 0 1px 0 var(--luz), 0 6px 14px -8px rgba(255, 42, 54, .9); }
.menu__langs button:hover, .menu__legal:hover { color: var(--blanco); }
.hud__arcana { margin: 0; display: flex; align-items: baseline; gap: .45em; color: var(--blanco-2); }
.hud__13 { font-family: var(--f-sub); font-size: 1.35rem; line-height: .9; color: var(--blanco); }
.hud__am { font-family: var(--f-text); font-weight: 300; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; line-height: .9; }
.hud__name { pointer-events: auto; display: inline-block; font-family: var(--f-sub); font-size: 1.2rem; line-height: .9; color: var(--blanco-2); transform-origin: 0 0; }   /* sin capa fija: al crecer, las letras se redibujan nítidas */

/* ---------- Control de música: barra de volumen + ondas (silenciar / activar) ---------- */
.sound-ctl {
  position: fixed; right: var(--gutter); bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transition: opacity 1s var(--ease);
}
body:not(.is-loading) .sound-ctl { opacity: 1; }
.sound { position: relative; width: 30px; height: 30px; padding: 5px; border: 0; background: none; cursor: pointer; }
.sound svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sound svg path { fill: none; stroke: var(--blanco-2); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s, opacity .4s; }
.sound .sound__spk { fill: rgba(242, 233, 223, .15); }
.sound .sound__arc { opacity: 0; }
.sound.is-on .sound__arc { opacity: 1; }
.sound.is-on .sound__x { opacity: 0; }
.sound:hover svg path, .sound:focus-visible svg path { stroke: var(--blanco); }
/* barra de volumen: una línea fina; la parte encendida en rojo */
.sound__vol {
  -webkit-appearance: none; appearance: none; width: 88px; height: 20px; margin: 0; background: none; cursor: pointer;
  opacity: .8; transition: opacity .4s var(--ease);
}
.sound-ctl:hover .sound__vol, .sound__vol:focus-visible { opacity: 1; }
.sound__vol::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--luz) var(--v, 60%), var(--blanco-3) var(--v, 60%)); }
.sound__vol::-moz-range-track { height: 1px; background: var(--blanco-3); }
.sound__vol::-moz-range-progress { height: 1px; background: var(--luz); }
.sound__vol::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--blanco); box-shadow: 0 0 10px rgba(255, 42, 54, .8); }
.sound__vol::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--blanco); box-shadow: 0 0 10px rgba(255, 42, 54, .8); }

/* ---------- Apertura con el tul ---------- */
.intro { position: fixed; inset: 0; z-index: 100; pointer-events: none; mix-blend-mode: screen; }
.intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.intro__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }
 }
.hud__name:hover { color: var(--blanco); }

main, .contact { position: relative; z-index: 2; }

/* =========================================================
   ANTES DEL LIBRO
   ========================================================= */
.paso.paso--preludio { height: 190vh; display: block; padding: 0 var(--gutter); }
/* el texto se queda quieto en el centro mientras el libro cae por delante */
.preludio__text { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; justify-items: center; text-align: center; row-gap: .2em; font-size: clamp(3rem, 8.8vw, 11rem); margin: 0; }
.pl { display: block; white-space: nowrap; }
/* tipografías originales: Basramle en las dos primeras líneas, Glimmer en la tercera */
.pl--a, .pl--b { font-family: var(--f-display); font-size: 1em; line-height: .74; }
.pl--b { margin-top: .17em; }            /* la línea del medio baja un poco: mismo aire arriba y abajo */
.pl--c { font-family: var(--f-sub); font-size: .56em; line-height: .78; margin-top: -.17em; color: var(--blanco); text-shadow: 0 0 60px rgba(255, 42, 54, .45); }
.preludio__text {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--reveal, 130%) - 14%), transparent var(--reveal, 130%));
  mask-image: linear-gradient(90deg, #000 calc(var(--reveal, 130%) - 14%), transparent var(--reveal, 130%));
}
/* con JS, las palabras esperan ocultas a que pase el tul (evita el parpadeo inicial) */
html.js .preludio__text { --reveal: -15%; }
/* hasta que arranca el tul no se pinta ningún texto (sin parpadeos al recargar) */
html.js:not(.is-ready) main, html.js:not(.is-ready) .hud, html.js:not(.is-ready) .contact, html.js:not(.is-ready) .sound-ctl { visibility: hidden; }
.hud { transition: opacity 1.2s var(--ease); }
html.js:not(.is-ready) .hud { opacity: 0; }
html.js .paso--preludio .scroll-cue { opacity: 0; }
.paso--preludio .scroll-cue { top: calc(100svh - 9vh); bottom: auto; }
.scroll-cue { position: absolute; left: 50%; bottom: 0; z-index: 3; width: 1px; height: 9vh; background: var(--blanco-3); overflow: hidden; }
.scroll-cue span { display: block; width: 100%; height: 40%; background: var(--blanco); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

/* =========================================================
   EL VIAJE CON EL LIBRO
   ========================================================= */
.viaje { position: relative; }
.viaje__layer {
  position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
  z-index: 2; pointer-events: none; overflow: clip;
}
.viaje__glow {
  position: absolute; left: 50%; top: 46%; width: 130vmin; height: 130vmin; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 42, 54, .3), rgba(158, 7, 18, .14) 48%, rgba(5, 3, 3, 0) 76%);
  opacity: 0;
}
.viaje__glow::after { /* la luz del Sol */
  content: ""; position: absolute; inset: -20%; border-radius: 50%; opacity: var(--sun, 0);
  background: radial-gradient(closest-side, rgba(255, 226, 180, .7), rgba(255, 140, 70, .35) 35%, rgba(196, 16, 28, .15) 60%, rgba(5, 3, 3, 0) 80%);
}
.viaje__book { position: absolute; inset: 0; z-index: 2; opacity: 0; }
.viaje__book canvas { width: 100% !important; height: 100% !important; display: block; }
.viaje__fallback { position: absolute; left: 50%; top: 50%; height: 60vh; width: auto; translate: -50% -50%; box-shadow: 0 30px 90px rgba(0, 0, 0, .8); }
.viaje__book.is-3d .viaje__fallback { display: none; }

/* frases que dan la vuelta al libro: letras enormes, cada una colocada por JS */
.orbit { position: absolute; left: 0; top: 0; margin: 0; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(3.6rem, 9.4vw, 11rem); line-height: 1; white-space: nowrap; }
.orbit .oc { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }

/* cada paso del viaje: por defecto las frases pasan por detrás del libro */
.paso { position: relative; z-index: 1; height: 100vh; height: 100svh; overflow-x: clip; }
.paso--caida { height: 130vh; }
.paso p { margin: 0; }

.fx-em { display: block; margin: .45em 0 1.1em;   /* punto y aparte después de «comienzos.» */ font-family: var(--f-sub); font-style: normal; font-size: 1.04em; line-height: 1.25; color: var(--blanco); -webkit-text-stroke: 0; text-shadow: 0 0 24px rgba(255, 42, 54, .55); }
.nobr { white-space: nowrap; }
.fx-em--tail { margin: 1.1em 0 0; }
.paso .fx-fill.fx-side { text-wrap: nowrap; }
.fx-fill.fx-side .wd { -webkit-text-stroke-color: currentColor; }   /* el contorno se enciende con la palabra */
.fx-light { position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%; width: clamp(23.5rem, 27vw, 460px); font-weight: 200; font-size: calc(clamp(1.05rem, 1.45vw, 1.7rem) + 3px); line-height: 1.5; }
/* la frase que cae: sin ningún contorno, y cada letra se pinta limpia (sin capas que dejen filo) */
.fx-fall, .fx-fall .ch { -webkit-text-stroke: 0; }
.fx-fall .ch { will-change: auto; }
.fx-fall { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 7vh; text-align: center; font-style: italic; font-weight: 300; font-size: clamp(2.2rem, 5.2vw, 6.4rem); line-height: 1.02; text-wrap: balance; }
.fx-rise { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 5vh; text-align: center; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.2rem, 4.6vw, 6rem); line-height: .9; text-wrap: balance; }
.paso .fx-sun { left: var(--gutter); right: auto; top: 50%; bottom: auto; translate: 0 -50%; width: auto; text-align: left; text-transform: none; font-size: 1rem; line-height: 1; white-space: nowrap; }   /* a la izquierda; el libro, a la derecha */
.sun__sub { display: block; font-family: var(--f-sub); font-size: clamp(1.4rem, 2.4vw, 3rem); line-height: 1.1; color: var(--blanco); text-shadow: 0 0 40px rgba(255, 42, 54, .45); }
.sun__desc { display: block; margin-top: .9rem; font-family: var(--f-text); font-weight: 200; font-size: clamp(1.3rem, 2.3vw, 2.9rem); line-height: 1.2; color: var(--blanco); -webkit-text-stroke: .45px var(--blanco); paint-order: stroke fill; }
/* capítulo de El Loco: el texto a la derecha, en la letra condensada de las descripciones */
.paso .fx-rise, .paso .fx-fill.fx-side {
  left: auto; right: 9vw; top: 50%; bottom: auto; translate: 0 -50%; width: auto; max-width: none;
  text-align: right; font-family: var(--f-text); font-weight: 200; text-transform: none;
  font-size: calc(clamp(1.05rem, 1.45vw, 1.7rem) + 3px); line-height: 1.5; text-wrap: nowrap;
  -webkit-text-stroke: .45px var(--blanco); paint-order: stroke fill;
}
.fx-rise .ln { display: block; overflow: hidden; padding-top: .06em; }
.fx-rise .ln > span { display: inline-block; }
.fx-marquee { position: absolute; left: 0; top: 50%; translate: 0 -50%; white-space: nowrap; font-style: italic; font-weight: 200; font-size: clamp(5rem, 14vw, 17rem); line-height: 1; color: var(--blanco); }
.fx-marquee span { display: inline-block; will-change: transform; }
.fx-marquee, .fx-marquee span { -webkit-text-stroke: 0; paint-order: normal; }   /* sin ningún contorno */

.paso[data-fx="collage"], .paso[data-fx="marquee"] { z-index: 3; }   /* el texto pasa por delante del libro */
.fx-collage { position: absolute; inset: 0; }
.cw { position: absolute; display: block; white-space: nowrap; }
.cw--1 { left: var(--gutter); top: 17vh; font-weight: 200; font-size: clamp(1.4rem, 2.6vw, 3.2rem); line-height: 1.1; -webkit-text-stroke: .45px var(--blanco); }
/* la frase vive en los márgenes: nunca pisa el libro (centrado, ocupa ~31 %–69 % del ancho) */
.cw--2 { left: var(--gutter); top: calc(17vh + 6.5vw); max-width: 24vw; white-space: normal; font-family: var(--f-sub); font-size: clamp(1.5rem, 2.7vw, 3.3rem); line-height: 1.05; color: var(--blanco); text-shadow: 0 0 40px rgba(255, 42, 54, .5); }
.cw--3 { white-space: nowrap; right: var(--gutter); bottom: calc(12vh + 2.4 * clamp(1.3rem, 2.3vw, 2.9rem) + .9rem);   /* justo encima de «y descubrir…» */ max-width: none; text-align: right; font-family: var(--f-sub); font-size: clamp(1.4rem, 2.4vw, 3rem); line-height: 1.1; text-shadow: 0 0 40px rgba(255, 42, 54, .45); }
.cw--4 { right: var(--gutter); bottom: 12vh; white-space: nowrap; text-align: right; font-weight: 200; font-size: clamp(1.3rem, 2.3vw, 2.9rem); line-height: 1.2; color: var(--blanco); -webkit-text-stroke: .45px var(--blanco); }

.fx-devil { position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%; width: min(32vw, 620px); text-align: left; }   /* a la izquierda; el libro, a la derecha */
.dv { display: block; }
.dv--1 { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.6rem, 5.6vw, 7rem); line-height: 1.08; }
.dv--2 { font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 1.9vw, 2.3rem); line-height: 1.25; white-space: nowrap; margin: 1.4rem 0 0; color: var(--blanco); }
.dv--2 .ln { display: block; overflow: hidden; }
.dv--2 .ln > span { display: inline-block; }

.fx-focus { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 8vh; text-align: center; font-weight: 300; font-size: clamp(2rem, 4.6vw, 5.8rem); line-height: 1.04; white-space: nowrap; }   /* siempre dos líneas, también durante la animación */
.fx-fill { position: absolute; left: 12vw; right: 12vw; bottom: 6vh; text-align: center; font-weight: 200; font-size: clamp(1.5rem, 3vw, 3.7rem); line-height: 1.18; text-wrap: balance; }
.fx-sun { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 5vh; text-align: center; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.4rem, 5.6vw, 7.2rem); line-height: .9; text-wrap: balance; }

.paso--back { z-index: 3; }
/* contraportada y El Mago: la misma maqueta (mismo ancho, mismos tamaños, misma frase final) */
.contra { position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; width: min(37vw, 680px); }
.contra__title { font-size: clamp(3rem, 6.8vw, 8.2rem); line-height: 1.04; }
.contra__title span { display: block; }   /* cada línea con su aire: sin letras pegadas */
.contra .sub { margin-top: 1.3rem; font-size: clamp(1.1rem, 1.55vw, 1.9rem); white-space: nowrap; }   /* siempre dos líneas */
.contra .body { margin-top: 1.1rem; font-size: calc(clamp(1rem, 1.1vw, 1.2rem) + 3px); width: 0; min-width: 100%; text-wrap: pretty; }   /* misma anchura que el subtítulo, sin palabras sueltas */
.contra__end { font-style: italic; color: var(--blanco); margin-top: 1.2rem; }
.contra .contra__end { margin-top: 1.6rem; font-size: calc(clamp(1.2rem, 1.5vw, 1.75rem) + 3px); line-height: 1.35; white-space: nowrap; }   /* destaca del resto */

.paso--quien { z-index: 3; display: grid; place-items: center; padding: 0 var(--gutter); }
.quien { font-family: var(--f-sub); font-size: clamp(2.2rem, 3.1vw, 3.8rem); line-height: 1.35; text-align: center; color: var(--blanco); text-shadow: 0 0 40px rgba(255, 42, 54, .45); }   /* mismo tamaño que el subtítulo de la contraportada */
.quien .ql { display: block; white-space: nowrap; }

/* =========================================================
   LAS CARTAS
   ========================================================= */
.cartas { position: relative; padding-top: 22vh; }
.cartas__title { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(3rem, 7.6vw, 9.5rem); line-height: .86; text-align: center; max-width: 17ch; margin: 0 auto; padding: 0 var(--gutter); }
.cartas__title .ln { display: block; overflow: hidden; padding-top: .06em; }
.cartas__title .ln > span { display: inline-block; }

.baraja { position: relative; z-index: 1; height: 100vh; height: 100svh; }   /* por debajo de la carta grande del jazmín: las cartas salen de detrás de ella */
.baraja::before { content: ""; position: absolute; left: 50%; top: 58%; width: 120vmin; height: 90vmin; translate: -50% -50%; background: radial-gradient(closest-side, rgba(196, 16, 28, .3), rgba(5, 3, 3, 0)); }
.baraja__fan { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.naipe { position: absolute; left: 0; top: 0; height: min(38vh, 18vw); aspect-ratio: 600 / 900; translate: -50% -50%; perspective: 1400px; }
.naipe__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); }
.naipe__in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.naipe__back { transform: rotateY(180deg) translateZ(.5px); }
.naipe__front { transform: translateZ(.5px); }   /* cada cara en su plano: la de atrás nunca se cuela */
.naipe__in { will-change: transform; }

.mesa { width: min(62vw, 1100px); margin: 6vh auto 0; display: grid; justify-items: center; gap: 2.4rem; }
.mesa figcaption { font-style: italic; font-weight: 300; font-size: clamp(1.25rem, 2vw, 2.4rem); line-height: 1.25; text-align: center; max-width: 30ch; }

.jazmin { display: grid; grid-template-columns: auto 1fr; gap: 7vw; align-items: center; padding: 15vh calc(var(--gutter) + 4vw) 10vh; }
.jazmin__card { position: relative; z-index: 2; height: min(76vh, 52vw); aspect-ratio: 1100 / 1650; filter: drop-shadow(0 30px 80px rgba(196, 16, 28, .35)); perspective: 1400px; }
.jazmin__card img { width: 100%; height: 100%; object-fit: contain; }
/* mismo ancho, tamaños y estilo que el texto de la contraportada */
.jazmin__text { width: min(38vw, 640px); }
.jazmin__title { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(3rem, 6.8vw, 8.2rem); line-height: 1.04; }
.jazmin__title span { display: block; }
.jazmin .body { margin-top: 1.1rem; font-size: calc(clamp(1rem, 1.1vw, 1.2rem) + 3px); }
.jazmin__title + .body { margin-top: 1.6rem; }
/* contorno blanco fino en la letra condensada de las descripciones */
.fx-light, .voz__context, .contra .body, .mago__text .body, .jazmin .body, .jazmin__lead {
  -webkit-text-stroke: .45px var(--blanco); paint-order: stroke fill;
}
.jazmin__lead { font-weight: 300; font-size: clamp(1.3rem, 2vw, 2.4rem); line-height: 1.3; max-width: 30ch; margin-top: 2.4rem; }

.registro { font-weight: 200; font-size: clamp(1.6rem, 3vw, 3.9rem); line-height: 1.3; text-align: center; max-width: none; white-space: nowrap; margin: -6vh auto 0; padding: 0 var(--gutter); text-wrap: balance; }   /* 5 líneas anchas; se queda fija en el centro mientras se enciende */
/* tras un espacio, las dos últimas líneas en la letra de subtítulo */
.registro__sub { display: block; margin-top: 1.1em; font-family: var(--f-sub); text-transform: lowercase; font-size: .7em; line-height: 1.4; -webkit-text-stroke: .6px currentColor; }
@media (max-width: 800px), (orientation: portrait) and (max-width: 1100px) { .registro { white-space: normal; font-size: 6.4vw; } }   /* la mitad del espacio que había sobre la frase */


/* =========================================================
   JUNG Y KRISHNAMURTI
   ========================================================= */
.voces { position: relative; padding: 24vh var(--gutter) 10vh; display: grid; gap: 30vh; }
.voz { display: grid; justify-items: center; text-align: center; gap: 3rem; }
.voz__context { font-weight: 200; font-size: calc(clamp(1.15rem, 1.7vw, 2rem) + 3px); line-height: 1.4; max-width: 44ch; color: var(--blanco-2); text-wrap: balance; }
.voz__quote { margin: 0; text-wrap: balance; }
.voz .voz__quote { font-style: italic; font-weight: 300; font-size: clamp(1.7rem, 3.6vw, 4.6rem); line-height: 1.1; max-width: 20ch; }
.voz--jung { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); align-items: start; align-content: start; grid-template-rows: auto auto 1fr; justify-items: start; text-align: left; column-gap: 6vw; row-gap: 2.4rem; max-width: 1500px; margin: 0 auto; width: 100%; }
.voz--jung > * { grid-column: 2; }
.voz--jung .voz__photo { grid-column: 1; grid-row: 1 / -1; margin: 0; width: 100%; aspect-ratio: 900 / 1200; position: relative; }
/* el retrato se funde con la oscuridad por los bordes */
.voz__photo img { width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, #000 52%, transparent 100%);
  filter: saturate(.85) contrast(1.05); }
/* destello rojo detrás del retrato, como el de las cartas */
.voz__photo { isolation: isolate; }
.voz__photo::after { content: ""; position: absolute; left: 50%; top: 45%; width: 170%; height: 130%; translate: -50% -50%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(196, 16, 28, .42), rgba(5, 3, 3, 0)); }
/* Krishnamurti: en espejo, el retrato a la derecha */
.voz--krishna { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); align-items: start; align-content: start; grid-template-rows: auto auto 1fr; justify-items: end; text-align: right; column-gap: 6vw; row-gap: 2.4rem; max-width: 1500px; margin: 0 auto; width: 100%; }
.voz--krishna > * { grid-column: 1; }
.voz--krishna .voz__photo { grid-column: 2; grid-row: 1 / -1; margin: 0; width: 100%; aspect-ratio: 750 / 1000; position: relative; }
/* el texto, centrado en vertical con la foto: dos filas elásticas arriba y abajo */
.voz--jung, .voz--krishna { grid-template-rows: 1fr auto auto auto 1fr; align-content: stretch; }
.voz--jung :where(.voz__context), .voz--krishna :where(.voz__context) { grid-row: 2; }
.voz--jung :where(.voz__quote), .voz--krishna :where(.voz__quote) { grid-row: 3; }
.voz--jung :where(.voz__name), .voz--krishna :where(.voz__name) { grid-row: 4; }
.voz__name { margin: -1.2rem 0 0; font-family: var(--f-text); font-weight: 300; font-size: clamp(.85rem, .95vw, 1.05rem); color: var(--blanco-2); }   /* como una firma */

/* =========================================================
   LOS DIVISORES: las dobles páginas que abren cada capítulo
   ========================================================= */
.divisores { position: relative; padding-top: 16vh; }
.divisores__head { text-align: center; padding: 0 var(--gutter); display: grid; justify-items: center; gap: 2.4rem; }
/* «13» enorme a la izquierda y tres líneas a su lado; el texto debajo ocupa el mismo ancho */
.divisores__block { width: fit-content; margin: 0 auto; }
.divisores__title { position: relative; display: block; margin: 0; padding-left: var(--numw, 4.2em); font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.6rem, 6.4vw, 8rem); line-height: 1.14; text-align: left; }
/* el 13 se mide en JS: su parte alta coincide con «FORMAS» y su base con «UNA VIDA» */
.dt__num { position: absolute; left: 0; top: 0; font-family: var(--f-sub); font-size: 3.9em; line-height: 1; }
.dt__words { display: grid; white-space: nowrap; }
.dt__num > span { display: inline-block; }
.dt__3 { transform-origin: 50% 0; }   /* su curva baja de la línea: se ajusta en JS para que apoye igual que el 1 */
.dt__words > span { display: block; }
.divisores__text { margin: 1.8rem 0 0; width: 0; min-width: 100%; text-align: center; font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 1.9vw, 2.3rem); line-height: 1.3; text-wrap: pretty; }
.pila { position: relative; height: 100vh; height: 100svh; --imgw: min(66vw, 98vh); --cy: 60vh; }   /* imagen y texto centrados juntos en el espacio bajo los números */
/* las hojas en su propia capa 3D, por debajo de los números y los textos */
.pila__hojas { position: absolute; inset: 0; z-index: 1; perspective: 2200px; }
/* números de los capítulos: de un extremo al otro, el activo en blanco */
.pila__nums { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); top: 15.6vh; display: flex; gap: .7vw; }
.pila__n { flex: 1 1 0; min-width: 0; height: clamp(2.2rem, 3.2vw, 3rem); border-radius: 999px; border: 1px solid rgba(242, 233, 223, .16); background: transparent; color: rgba(242, 233, 223, .7); font: 400 clamp(.85rem, 1.05vw, 1.15rem) / 1 var(--f-text); cursor: pointer; transition: background .5s ease, color .5s ease, border-color .5s ease; }
.pila__n:hover { border-color: rgba(242, 233, 223, .45); color: var(--blanco); }
.pila__n.is-on { background: var(--blanco); border-color: var(--blanco); color: #050303; }
/* texto de cada capítulo, bajo la hoja */
.pila__caps { position: absolute; z-index: 3; left: calc(var(--gutter) + var(--imgw) + 3.5vw); right: var(--gutter); top: var(--cy); translate: 0 -50%; text-align: left; }
.pila__cap { position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; }
.pila__cap.is-on { position: relative; }
.pc__num { margin: 0; font: 400 clamp(.85rem, 1.05vw, 1.15rem) / 1 var(--f-text); color: var(--blanco); }   /* igual que los números de los indicadores */
.pc__title { margin: .6rem 0 0; font-family: var(--f-sub); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2.7rem); line-height: 1.1; color: var(--blanco); text-transform: lowercase; }
.pc__sub { margin: .3rem 0 0; font-family: var(--f-text); font-weight: 200; font-style: italic; font-size: clamp(1.1rem, 1.35vw, 1.6rem); line-height: 1.3; color: var(--blanco); }
.pc__text { margin: 1.6rem 0 0; white-space: nowrap; font-family: var(--f-text); font-weight: 200; font-size: calc(clamp(1rem, 1.1vw, 1.2rem) + 3px); line-height: 1.45; color: var(--blanco-2); -webkit-text-stroke: .45px var(--blanco); paint-order: stroke fill; text-wrap: pretty; }
.hoja {
  position: absolute; left: calc(var(--gutter) + var(--imgw) / 2); top: var(--cy); margin: 0; background: var(--negro);   /* mientras carga, nunca deja ver la lámina de debajo */   /* el centrado (-50%) lo pone la animación */
  width: var(--imgw); aspect-ratio: 1280 / 859;
  transform-origin: 50% 100%; will-change: transform, opacity;
}
.hoja img { width: 100%; height: 100%; object-fit: contain; box-shadow: 0 50px 120px rgba(0, 0, 0, .85), 0 0 0 1px rgba(242, 233, 223, .06); }
.hoja figcaption { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 1.6rem); text-align: center; font-family: var(--f-sub); font-size: clamp(1.2rem, 1.8vw, 2.2rem); color: var(--blanco-2); }

/* =========================================================
   UN MAPA DE LA CONCIENCIA · cartas que se pueden pulsar
   ========================================================= */
/* jazmines: seis vídeos repartidos que se abren al aparecer */
.flores { position: relative; height: 300vh; margin-top: 8vh; }
/* hilo de palabras en ondas que une los jazmines y se va escribiendo al bajar */
.hilo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hilo__t { dominant-baseline: middle; font-family: var(--f-text); font-style: italic; font-weight: 300; font-size: clamp(.95rem, 1.05vw, 1.2rem); letter-spacing: .02em; fill: rgba(242, 233, 223, .78); }
.flor { position: absolute; display: block; height: auto; mix-blend-mode: screen; opacity: 0; pointer-events: none;
  filter: brightness(.92) contrast(1.35);   /* el negro del vídeo pasa a negro puro: desaparece en modo pantalla */
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.flor--1 { left: 5vw; top: 0%; width: 24vw; aspect-ratio: 1; }
.flor--2 { right: 6vw; top: 18%; width: 23vw; aspect-ratio: 1; }
.flor--3 { left: 6vw; top: 36%; width: 21vw; aspect-ratio: 650 / 846; }
.flor--4 { right: 6vw; top: 54%; width: 22vw; aspect-ratio: 594 / 626; }
.flor--5 { left: 5vw; top: 70%; width: 24vw; aspect-ratio: 670 / 696; }
.flor--6 { right: 3vw; bottom: 0; width: 22vw; aspect-ratio: 674 / 642; }
.flor--pila { aspect-ratio: 1; z-index: 2; right: var(--gutter); top: auto; bottom: 3vh; width: min(14vw, 20vh); }   /* aparece con El Sol, abajo a la derecha bajo el texto; de aquí sale el hilo */   /* aparece con El Sol; de aquí sale el hilo */
.mapa { display: grid; justify-items: center; text-align: center; gap: 2rem; padding: 18vh var(--gutter) 0; }
.mapa__title { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.8rem, 7vw, 9rem); line-height: .86; }
.mapa__title span { display: block; }
.mapa__text { font-weight: 200; font-size: clamp(1.2rem, 1.9vw, 2.3rem); line-height: 1.35; max-width: 38ch; text-wrap: balance; }
button.naipe { border: 0; padding: 0; background: none; cursor: pointer; color: inherit; }
button.naipe:focus-visible { outline: 1px solid var(--luz); outline-offset: 6px; }
.naipe__in { display: block; transition: filter .4s var(--ease); }
button.naipe:hover .naipe__in { filter: drop-shadow(0 0 26px rgba(255, 42, 54, .55)); }

.carta-modal {
  width: min(1100px, 92vw); max-height: 92vh; padding: 0; border: 0; color: var(--blanco); background: transparent; overflow: visible;
}
.carta-modal::backdrop { background: rgba(5, 3, 3, .9); backdrop-filter: blur(8px); }
.carta-modal[open] { animation: cmIn .6s var(--ease); }
@keyframes cmIn { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
.cm-inner { display: grid; grid-template-columns: auto 1fr; gap: 5vw; align-items: center; }
.cm-img { margin: 0; height: min(78vh, 900px); aspect-ratio: 1100 / 1650; filter: drop-shadow(0 30px 80px rgba(196, 16, 28, .4)); }
.cm-img img { width: 100%; height: 100%; object-fit: contain; }
.cm-name { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 6.8rem); line-height: .86; }
.cm-title { font-family: var(--f-sub); font-size: clamp(1.4rem, 2.4vw, 2.6rem); margin-top: 1.4rem; color: var(--blanco); text-shadow: 0 0 40px rgba(255, 42, 54, .5); }
.cm-body { font-weight: 300; font-size: clamp(1.1rem, 1.5vw, 1.6rem); line-height: 1.5; color: var(--blanco-2); max-width: 34ch; margin-top: 1.4rem; }
.cm-nav { display: flex; gap: 1rem; margin-top: 2.6rem; }
.cm-nav button, .cm-close { background: none; border: 1px solid var(--blanco-3); color: var(--blanco); width: 52px; height: 52px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; transition: border-color .4s, color .4s; }
.cm-nav button:hover, .cm-close:hover, .cm-nav button:focus-visible, .cm-close:focus-visible { border-color: var(--luz); color: var(--luz); }
.cm-close { position: fixed; top: calc(18px + env(safe-area-inset-top)); right: var(--gutter); }

/* =========================================================
   MARQUESINAS
   ========================================================= */
.marquesinas { position: relative; padding: 10vh 0 18vh; display: grid; gap: 3vh; }
.mq { white-space: nowrap; line-height: 1.05; padding: .08em 0; overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq span { display: inline-block; will-change: transform; }
.mq--a { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(5rem, 16vw, 20rem); line-height: .82; }
.mq--b { font-family: var(--f-sub); font-size: clamp(2.4rem, 7vw, 9rem); color: var(--blanco-2); margin: 1vh 0; }
.mq--c { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(3rem, 9vw, 11rem); line-height: .86; color: var(--rojo); text-shadow: 0 0 60px rgba(255, 42, 54, .45); }

/* =========================================================
   EL MAGO
   ========================================================= */
/* el rayo rojo: el mismo filo de luz de la puerta de El Mago */
.registro-wrap { position: relative; padding-bottom: 70vh; }
.rayo { position: fixed; z-index: 6; left: 0; right: 0; top: 0; height: 0; overflow: hidden; pointer-events: none; }
.rayo-tramo { position: relative; height: 45vh; }
/* la punta del rayo: un destello que baja por la línea mientras cae (como en las historias de Instagram) */
.rayo-punta { position: fixed; z-index: 7; left: calc(50% - 1px); top: 0; width: 5vh; height: 12vh; margin: -6vh 0 0 -2.5vh; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 220, 220, .95), rgba(255, 42, 54, .6) 40%, rgba(255, 42, 54, 0) 100%); filter: blur(4px); will-change: transform, opacity; }
/* los brillos de los lados: las mismas hojas de la puerta de El Mago, ya abiertas, fijas hasta el final de la web */
.lados { position: fixed; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; overflow: hidden; }
.lados.is-on { visibility: visible; }
.lados i { position: absolute; top: -300px; height: calc(100vh + 600px); width: 50%; }
.lados i:first-child { left: -50.5%; box-shadow: 1px 0 0 rgba(255, 42, 54, .9), 20px 0 60px rgba(255, 42, 54, .35); }
.lados i:last-child { left: 100.5%; box-shadow: -1px 0 0 rgba(255, 42, 54, .9), -20px 0 60px rgba(255, 42, 54, .35); }
/* exactamente la misma luz que la rendija de las puertas: el borde de una hoja que proyecta su filo rojo y su resplandor */
.rayo i { content: ""; position: absolute; left: 50%; width: 60vw; top: -300px; height: calc(100vh + 600px);
  box-shadow: -1px 0 0 rgba(255, 42, 54, .9), -20px 0 60px rgba(255, 42, 54, .35); }

/* primera puerta: detrás, la pantalla en blanco con la pregunta en negro */
.mago__blanco { position: absolute; inset: 3px 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 2.2rem; padding: 0 var(--gutter); text-align: center; background: var(--blanco); color: #070404; }
.mago__intro { margin: 0; font-weight: 200; font-size: clamp(1.4rem, 2.6vw, 3.2rem); line-height: 1.25; -webkit-text-stroke: .45px #070404; }
.mago__ask { margin: 0; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.6rem, 6.4vw, 8.4rem); line-height: 1.06; }
.mago__ask span { display: block; white-space: nowrap; }
.mago__ask .abre { font-style: normal; display: inline-block; transform: translateY(-.3em); }   /* el «¿» de Basramle cuelga bajo la línea: se sube para alinearlo con el texto */
.mago__door { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.mago__light { position: absolute; left: 50%; top: 50%; width: 120vmin; height: 120vmin; translate: -50% -50%; background: radial-gradient(closest-side, rgba(255, 42, 54, .55), rgba(158, 7, 18, .3) 45%, rgba(5, 3, 3, 0) 75%); }
.mago__book { position: absolute; inset: 0 0 0 34%; z-index: 2; }
.book3d canvas { width: 100% !important; height: 100% !important; display: block; }
.book3d.is-draggable { cursor: grab; touch-action: pan-y; }
.book3d.is-dragging { cursor: grabbing; }
.book3d__fallback { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transition: opacity 1.2s var(--ease); }
.mago__book .book3d__fallback { height: min(62vh, 100vw); width: auto; box-shadow: 0 30px 90px rgba(0, 0, 0, .8); }
.book3d.is-3d .book3d__fallback { opacity: 0; }
.mago__leaf { position: absolute; top: -2px; bottom: -2px; width: 50%; z-index: 4; background: var(--negro); }   /* la rendija justo en el centro, donde cae el rayo; sin filos claros arriba ni abajo */
.mago__leaf--l { left: 0; }
.mago__leaf--r { right: 0; }
/* las hojas encienden su filo solo mientras se mueven; cerradas, la rendija la dibuja el rayo (una sola luz, sin empalmes) */
.mago__door.is-lit .mago__leaf--l { box-shadow: 1px 0 0 rgba(255, 42, 54, .9), 20px 0 60px rgba(255, 42, 54, .35); }
.mago__door.is-lit .mago__leaf--r { box-shadow: -1px 0 0 rgba(255, 42, 54, .9), -20px 0 60px rgba(255, 42, 54, .35); }
.mago__text { position: absolute; z-index: 5; left: var(--gutter); top: 50%; translate: 0 -50%; width: min(37vw, 680px); }
.mago__text .display--lg { font-size: clamp(3rem, 6.8vw, 8.2rem); line-height: 1.04; }
.mago__text .display--lg span { display: block; }
.mago__text .sub { font-size: clamp(1.1rem, 1.55vw, 1.9rem); white-space: nowrap; }
.mago__text .body { margin-top: 1.1rem; font-size: calc(clamp(1rem, 1.1vw, 1.2rem) + 3px); text-wrap: pretty; width: 0; min-width: 100%; }
/* la frase final, como la de la contraportada: más grande, en cursiva y en dos líneas */
.mago__text .mago__end-line { margin-top: 1.6rem; font-style: italic; color: var(--blanco); font-size: calc(clamp(1.2rem, 1.5vw, 1.75rem) + 3px); line-height: 1.35; white-space: nowrap; }
.mago__text .sub { margin-top: 1.3rem; }
.mago__end { min-height: 70vh; display: grid; place-items: center; padding: 0 var(--gutter); text-align: center; position: relative; }
.mago__coda { font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 3.2vw, 4rem); max-width: 26ch; line-height: 1.2; text-wrap: balance; }

/* =========================================================
   LAS PORTADAS
   ========================================================= */
.covers { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.covers::before { content: ""; position: absolute; left: 50%; top: 46%; width: 130vmin; height: 90vmin; translate: -50% -50%; background: radial-gradient(closest-side, rgba(196, 16, 28, .34), rgba(5, 3, 3, 0)); pointer-events: none; }
.covers__stage { position: absolute; inset: 10vh 6vw 24vh 6vw; z-index: 2; }   /* los dos libros, algo más pequeños */
.covers__flat { display: flex; gap: 6vw; align-items: center; justify-content: center; width: 100%; height: 100%; translate: none; left: 0; top: 0; }
.covers__flat img { height: 62vh; width: auto; box-shadow: 0 30px 90px rgba(0, 0, 0, .8); }
.covers__captions { position: absolute; z-index: 3; left: 0; right: 0; top: 74vh; height: 0; }
/* cada texto, centrado bajo su libro (los libros están a ±20,24vw del centro: 0,46 × la mitad del escenario, que mide 88vw) */
.covers__captions .covers__text { position: absolute; top: 0; width: min(30vw, 30ch); translate: -50% 0; text-align: center; }
.covers__captions .covers__text:first-child { left: calc(50% - 20.24vw); }
.covers__captions .covers__text:last-child { left: calc(50% + 20.24vw); }
.covers__text { font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 1.6vw, 1.9rem); line-height: 1.3; max-width: 30ch; margin: 0 auto; color: var(--blanco); text-wrap: balance; }

/* =========================================================
   CONTACTO · el nombre de lado a lado
   ========================================================= */
.contact { min-height: 100vh; min-height: 100svh; display: grid; align-content: end; gap: 6vh; padding: 0 0 calc(3vh + env(safe-area-inset-bottom)); overflow: hidden; }
.contact::before { content: ""; position: absolute; left: 50%; bottom: -30vmin; width: 140vmin; height: 90vmin; translate: -50% 0; background: radial-gradient(closest-side, rgba(196, 16, 28, .32), rgba(5, 3, 3, 0)); pointer-events: none; }
.contact { gap: 4vh; }
.contact__head { position: relative; margin-bottom: 14vh; display: grid; justify-items: center; text-align: center; gap: 1.6rem; padding: 0 var(--gutter); }
.contact__title { margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 5.6vw, 6.8rem); line-height: 1.04; color: var(--blanco); }
.contact__social { display: flex; gap: 1.4rem; }
.contact__social a { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(242, 233, 223, .22); border-radius: 50%; transition: border-color .5s var(--ease), box-shadow .5s var(--ease); }
.contact__social svg { width: 22px; height: 22px; fill: none; stroke: var(--blanco); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.contact__social .is-dot { fill: var(--blanco); stroke: none; }
.contact__social a:hover, .contact__social a:focus-visible { border-color: var(--luz); box-shadow: 0 0 22px rgba(255, 42, 54, .45); }
.contact__lead { margin: 0; font-weight: 200; font-size: calc(clamp(1rem, 1.1vw, 1.2rem) + 3px); line-height: 1.5; color: var(--blanco-2); -webkit-text-stroke: .45px var(--blanco); paint-order: stroke fill; }
.contact__links { position: relative; display: flex; gap: clamp(1.4rem, 4vw, 4.5rem); flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); }
.contact__links a { position: relative; font-style: italic; font-size: clamp(1.15rem, 1.5vw, 1.6rem); color: var(--blanco-2); padding: .3em 0; transition: color .5s var(--ease); }
.contact__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--luz); box-shadow: 0 0 10px var(--luz); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.contact__links a:hover, .contact__links a:focus-visible { color: var(--blanco); }
.contact__links a:hover::after, .contact__links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
/* mismo tipo de letra que el logo de arriba; el tamaño lo ajusta JS para ir de lado a lado */
.contact__name { position: relative; top: 3.5vh; font-family: var(--f-sub); line-height: .9; white-space: nowrap; text-align: center; font-size: 18vw; opacity: 0; }   /* el nombre de arriba baja hasta aquí */
.contact__name span { display: inline-block; }
/* palabras del libro en latín, en la letra de los subtítulos */
.contact__latin { position: relative; top: 1.6vh; overflow: hidden; white-space: nowrap; margin-top: 3.5vh; }   /* el nombre y la marquesina, un poco más abajo */
.contact__latin span { display: inline-block; font-family: var(--f-sub); font-size: clamp(.95rem, 1.15vw, 1.25rem); color: var(--blanco-2); animation: latin 90s linear infinite; }
@keyframes latin { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
/* los textos pequeños, alineados con los bordes del nombre grande (el margen lo mide el JS) y más nítidos */
.contact__legal { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: 0 var(--legal-pad, var(--gutter)); font-weight: 300; font-size: 1rem; letter-spacing: .01em; color: var(--blanco-2); -webkit-font-smoothing: antialiased; }
.contact__legal a { color: var(--blanco-2); padding-bottom: 3px; background: linear-gradient(var(--luz), var(--luz)) 0 100% / 0 1px no-repeat; transition: color .4s var(--ease), background-size .5s var(--ease); }
.contact__legal a:hover, .contact__legal a:focus-visible { color: var(--blanco); background-size: 100% 1px; }   /* subrayado rojo: es un enlace */

/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width: 800px), (orientation: portrait) and (max-width: 1100px) {
  .preludio__text { font-size: 11.44vw; }
  .viaje__glow { top: 34%; }
  .fx-light { left: var(--gutter); right: var(--gutter); top: auto; bottom: 5vh; translate: none; width: auto; font-size: 1.02rem; }
  .fx-fall { font-size: 9vw; bottom: 8vh; }
  .paso .fx-rise { right: var(--gutter); top: auto; bottom: 8vh; translate: none; font-size: 1.15rem; }
  .fx-marquee { font-size: 26vw; top: 74%; }
  .cw--1 { top: auto; bottom: 30vh; font-size: 6.5vw; }
  .cw--2 { top: auto; bottom: 16vh; font-size: 19vw; }
  .cw--3 { top: auto; bottom: 12vh; font-size: 6.4vw; }
  .cw--4 { bottom: 4vh; font-size: 13vw; }
  .dv--1 { font-size: 13vw; }
  .dv--2 { font-size: 1.12rem; }
  .fx-focus { font-size: 8vw; }
  .fx-fill { left: var(--gutter); right: var(--gutter); font-size: 5.4vw; }
  .fx-sun { font-size: 9vw; }
  .orbit { font-size: 15vw; }
  .contra { left: var(--gutter); right: var(--gutter); top: auto; bottom: 5vh; translate: none; width: auto; }
  .contra__title { font-size: 10.6vw; }
  .contra .sub { font-size: 1.15rem; margin-top: .8rem; }
  .contra .body { font-size: .98rem; margin-top: .8rem; }
  .quien { font-size: 9vw; }
  .naipe { height: 24vh; }
  .mesa { width: 92vw; }
  .jazmin { grid-template-columns: 1fr; gap: 6vh; padding: 18vh var(--gutter) 6vh; }
  .jazmin__card { height: 56vh; justify-self: center; }
  .jazmin__lead { font-size: 1.25rem; }
  .mago__book { inset: 7vh 0 46% 0; }
  .mago__text { left: var(--gutter); right: var(--gutter); top: auto; bottom: 6vh; translate: none; max-width: none; }
  .mago__text .display--lg { font-size: 12.5vw; }
  .mago__text .body { font-size: .98rem; margin-top: .9rem; }
  .covers__stage { inset: 9vh 0 22vh 0; }
  .covers__flat img { height: 40vh; }
  .covers__captions { top: auto; bottom: 6vh; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 var(--gutter); }
  .covers__captions .covers__text { position: static; width: auto; translate: none; }
  .covers__text { font-size: 1rem; }
  .contact__links { flex-direction: column; align-items: center; gap: .8rem; }
  .contact__legal { flex-direction: column; align-items: center; text-align: center; }
  .voces { gap: 18vh; padding-top: 16vh; }
  .voz--jung { grid-template-columns: 1fr; grid-template-rows: none; justify-items: center; text-align: center; }
  .voz--jung > *, .voz--jung .voz__photo { grid-column: 1; grid-row: auto; }
  .voz--jung .voz__photo { width: 72vw; }
  .voz--krishna { grid-template-columns: 1fr; grid-template-rows: none; justify-items: center; text-align: center; }
  .voz--krishna > *, .voz--krishna .voz__photo { grid-column: 1; grid-row: auto; }
  .voz--krishna .voz__photo { width: 72vw; }
  .hoja { width: 94vw; }
  .cm-inner { grid-template-columns: 1fr; gap: 1.4rem; justify-items: center; text-align: center; }
  .cm-img { height: 46vh; }
  .cm-name { font-size: 12vw; }
  .cm-body { margin-left: auto; margin-right: auto; }
  .cm-nav { justify-content: center; }
}

/* =========================================================
   Movimiento reducido: todo visible y quieto
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .grain, .loader__card, .scroll-cue span, .sound.is-on span { animation: none; }
  .sound.is-on span { height: 12px; }
  .dust { display: none; }
  .contact__name { opacity: 1; }
  .viaje__layer { position: relative; margin: 0; height: 80vh; }
  .viaje__book { opacity: 1; }
  .orbit { position: relative; display: block; white-space: normal; text-align: center; font-size: 3rem; padding: 4vh var(--gutter); }
  .paso { height: auto; min-height: 60vh; display: grid; place-items: center; padding: 8vh var(--gutter); }
  .paso > * { position: relative !important; inset: auto !important; translate: none !important; }
  .fx-collage .cw { position: relative; inset: auto; display: block; white-space: normal; }
  .naipe { position: relative; display: inline-block; translate: none; margin: 1vh; }
  .naipe__in { transform: none; }
  .naipe__back { display: none; }
  .baraja { height: auto; }
  .baraja__fan { position: relative; left: 0; top: 0; width: auto; height: auto; text-align: center; }
  .mago__leaf { display: none; }
}

/* la letra de los subtítulos (Glimmer), siempre en minúsculas: sin sus mayúsculas */
.sub,
.menu__name,
.hud__13,
.hud__name,
.pl--c,
.fx-em,
.sun__sub,
.cw--2,
.cw--3,
.quien,
.dt__num,
.pc__title,
.hoja figcaption,
.cm-title,
.mq--b,
.contact__name,
.contact__latin span { text-transform: lowercase; }

/* Glimmer: un contorno mínimo del mismo color engorda un poco sus trazos finos para que se lea mejor */
.sub, .menu__name, .hud__13, .hud__name, .pl--c, .fx-em, .sun__sub, .cw--2, .cw--3, .quien, .dt__num, .pc__title,
.hoja figcaption, .cm-title, .mq--b, .contact__name, .contact__latin span { -webkit-text-stroke: .6px currentColor; }

/* =========================================================
   MÓVIL · ajustes finales (pantallas de hasta 800 px)
   El libro va arriba y los textos debajo, sin cortes ni letras apiladas.
   ========================================================= */
@media (max-width: 800px), (orientation: portrait) and (max-width: 1100px) {
  /* los textos de cada escena, justo debajo del libro: --book-bottom lo publica el libro 3D en cada momento */

  .fx-marquee { top: calc(var(--book-bottom, 52vh) + 2vh + 15vw); }   /* la marquesina pasa justo debajo del libro */

  /* El Loco: textos centrados debajo del libro */
  .paso .fx-rise, .paso .fx-fill.fx-side, .paso .fx-sun {
    left: var(--gutter); right: var(--gutter); top: auto; bottom: 7vh; translate: none; width: auto;
    text-align: center; font-size: 1.05rem; line-height: 1.45; white-space: normal; text-wrap: balance;
  }
  .paso .fx-sun { line-height: 1.2; }
  .sun__sub { font-size: 1.35rem; }
  .sun__desc { font-size: 1.05rem; line-height: 1.45; margin-top: .7rem; text-wrap: balance; }

  .paso .fx-rise .fx-em, .paso .fx-fill .fx-em { font-size: 1.3rem; }

  /* Caballero de Copas: las cuatro piezas, apiladas bajo el libro */
  .cw--1 { left: var(--gutter); top: 11vh; bottom: auto; font-size: 1.05rem; }
  .cw--2 { left: var(--gutter); right: var(--gutter); text-wrap: balance; top: calc(11vh + 3.1rem); bottom: auto; max-width: 84vw; font-size: 1.55rem; line-height: 1.1; }
  .cw--3 { right: var(--gutter); top: calc(var(--book-bottom, 60vh) + 2.5vh); bottom: auto; font-size: 1.45rem; }
  .cw--4 { right: var(--gutter); top: calc(var(--book-bottom, 60vh) + 2.5vh + 3.3 * 1.45rem + .5rem); bottom: auto; font-size: 1rem; line-height: 1.35; }

  /* El Diablo: la frase grande y el texto, debajo del libro */
  .fx-devil { left: var(--gutter); right: var(--gutter); top: auto; bottom: 6vh; translate: none; width: auto; }
  .dv--1 { font-size: 9.6vw; line-height: 1.04; white-space: normal; text-wrap: balance; }
  .dv--2 { font-size: 1rem; margin-top: .9rem; }

  /* contraportada */
  .contra .sub { white-space: normal; font-size: 1.05rem; }
  .contra .body { width: auto; min-width: 0; }
  .contra .contra__end { white-space: normal; font-size: 1.05rem; }
  /* contraportada: justo debajo del libro, el título en una línea y los párrafos a todo el ancho */
  .contra { top: calc(var(--book-bottom, 50vh) + 2vh); bottom: auto; }
  .contra__title span { display: inline; }
  .contra .body { max-width: none; font-size: .95rem; line-height: 1.5; }

  /* la frase de los andamios */
  .quien { font-size: 5.8vw; }
  .contra__title { font-size: 9vw; }

  /* divisores: la imagen a todo el ancho y el texto debajo */
  .pila { --imgw: calc(100vw - 2 * var(--gutter)); --cy: 40vh; }
  .hoja { width: var(--imgw); }
  .pila__nums { gap: 4px; }
  .pila__n { height: 1.7rem; font-size: .62rem; }
  .pila__caps { left: var(--gutter); right: var(--gutter); top: calc(var(--cy) + var(--imgw) * .3355 + 4vh); translate: none; }
  .pc__title { font-size: 1.6rem; }
  .pc__text { white-space: normal; margin-top: .9rem; font-size: 1rem; }
  .flor--pila { width: 16vw; }

  /* el hilo: cuatro jazmines, más juntos, alternando lados */
  .flores { height: 210vh; }
  .flor--5, .flor--6 { display: none; }
  .flor--1 { left: 6vw; right: auto; top: 0; bottom: auto; width: 30vw; }
  .flor--2 { right: 6vw; left: auto; top: 30%; bottom: auto; width: 30vw; }
  .flor--3 { left: 6vw; right: auto; top: 60%; bottom: auto; width: 28vw; }
  .flor--4 { right: 6vw; left: auto; top: auto; bottom: 0; width: 28vw; }

  /* el jazmín */
  .jazmin__text { width: auto; }
  .jazmin__title { font-size: 12vw; }

  /* la fe: las líneas se reparten solas */
  .registro br { display: none; }   /* en móvil la frase se reparte sola, con líneas de ancho parecido */
  .registro, .registro__sub { text-wrap: balance; }
  .registro__sub { margin-top: 1.2em; }
  .fx-focus { white-space: normal; text-wrap: balance; font-size: 1.4rem; line-height: 1.3; }
  .fx-focus br { display: none; }

  /* El Mago: pantalla blanca */
  .mago__intro { font-size: 1.32rem; line-height: 1.35; text-wrap: balance; }
  .mago__ask { font-size: 7.2vw; }

  /* El Mago: el libro arriba, más pequeño; el texto entero debajo */
  .mago__book { inset: 3vh 0 50% 0; }   /* tan grande como en la contraportada */
  .mago__text { width: auto; bottom: 3vh; }
  .mago__text .display--lg span { display: inline; }
  .mago__text .sub br, .mago__text .mago__end-line br { display: none; }   /* una línea el subtítulo; la frase final, a todo el ancho */
  .mago__text .display--lg { font-size: 8.4vw; }
  .mago__text .sub { white-space: normal; font-size: 1.05rem; }
  .mago__text .body { font-size: .9rem; line-height: 1.45; }
  .mago__text .mago__end-line { white-space: normal; font-size: 1rem; }

  /* contacto */
  .contact__lead { white-space: normal; text-wrap: balance; }

  /* el final de El Mago: menos vacío antes de los libros */
  .mago__end { min-height: 45vh; }

  /* los dos libros: libro, su texto, espacio, libro, su texto */
  .covers { height: 125vh; height: 125svh; }
  .covers__stage { inset: 0; }
  .covers__captions { display: block; top: 0; bottom: 0; height: auto; padding: 0; }
  .covers__captions .covers__text { position: absolute; left: var(--gutter); right: var(--gutter); width: auto; max-width: none; }
  .covers__captions .covers__text:first-child { top: 39%; left: var(--gutter); }
  .covers__captions .covers__text:last-child { top: 84%; left: var(--gutter); }
  .covers__text { font-size: 1.05rem; }

  /* el nombre grande del pie, más abajo */
  .contact__name { top: 10vh; }
  .contact__latin { top: 6vh; }   /* bajan con el nombre, sin pegarse */
  .contact__legal { top: 4vh; }
  .contact { padding-bottom: calc(7vh + env(safe-area-inset-bottom)); }
}

/* tableta en vertical: el mismo diseño que el móvil (libro arriba, texto debajo), con la letra algo mayor */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  html { font-size: 118%; }
}

/* móvil y tableta vertical: los textos de cada escena, justo debajo del libro (--book-bottom lo publica el libro 3D).
   Va al final para mandar sobre las reglas anteriores, que los dejaban pegados al borde de abajo. */
@media (max-width: 800px), (orientation: portrait) and (max-width: 1100px) {
  .fx-light, .fx-fall, .paso .fx-rise, .paso .fx-fill.fx-side, .paso .fx-sun, .fx-focus, .fx-devil {
    top: calc(var(--book-bottom, 52vh) + 3.5vh) !important; bottom: auto !important; translate: none !important;
  }
}

/* móvil y tableta vertical: los párrafos ocupan todo el ancho de la pantalla, sin columnas estrechas */
@media (max-width: 800px), (orientation: portrait) and (max-width: 1100px) {
  .contra { top: calc(var(--book-bottom, 50vh) + 8vh) !important; }
  .contra .body, .jazmin .body, .jazmin__text, .mago__text .body, .voz__context { max-width: none !important; width: auto !important; min-width: 0 !important; }
  .contra .contra__end br, .jazmin .body br { display: none; }
  .mago__intro br { display: none; }
  .paso .fx-rise, .paso .fx-fill.fx-side, .sun__desc, .dv--2 { white-space: nowrap !important; }   /* tres líneas, siempre las mismas */   /* el texto de la pantalla blanca se reparte en líneas de ancho parecido */
  .mago__intro { text-wrap: balance; max-width: 37ch; margin-left: auto; margin-right: auto; }   /* cuatro líneas */
}

/* móvil: contraportada, jazmín y El Mago con la misma composición — libro arriba, el texto justo debajo, el conjunto centrado */
@media (max-width: 800px), (orientation: portrait) and (max-width: 1100px) {
  .mago__book { inset: 5vh 0 50% 0 !important; }
  .mago__text { top: 54vh !important; bottom: auto !important; translate: none !important; }
  .jazmin { gap: 3vh !important; padding: 8vh var(--gutter) 8vh !important; min-height: 100svh; align-content: center; }
  .jazmin__card { height: 44vh !important; }
  .jazmin__title { font-size: 9vw !important; }
  .jazmin__title span { display: inline; }
  .jazmin .body { font-size: .95rem !important; line-height: 1.5; }
}