/* ═══════════════════════════════════════════════════════════════════
   RESPIRANDO CON-CIENCIA · landing (respirando/)
   «Una primera respiración consciente convertida en interfaz.»
   Spec de Diego: MASTER LANDING SPECIFICATION V1.0 (2026-09-28).
   V2 (mismo día, feedback de Diego): guiar de principio a fin, menos texto,
   más interacción y el sistema de movimiento de respirando-con-ciencia.html:
     BREATH   el orbe respira (una sola cadencia)
     REVEAL   las frases llegan de una en una
     EXPAND   el scroll hace inhalar y exhalar al orbe
     DISSOLVE escenas fijas: la frase activa está, la anterior sube y se desenfoca
     MORPH    amanecer (círculo crema) y anochecer (círculo noche)
   + una GUÍA fija abajo que dice qué hacer en cada escena.
   Estático por defecto: sin JS o con reduced motion todo se lee en orden.
   Mundo DEMIN + el par tipográfico de respira/ (Bodoni Moda + Jost).
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --night: #1C1A18; --night-2: #24211D;
  --gold: #C9A84C; --gold-hi: #E3C988;
  --gold-dim: rgba(201, 168, 76, 0.4); --gold-line: rgba(201, 168, 76, 0.24);
  --cream: #F2EDE4;
  --muted: rgba(242, 237, 228, 0.74);      /* 9.1:1 sobre noche */
  --quiet: rgba(242, 237, 228, 0.58);      /* 6.0:1, solo microtexto */
  --ink: #1C1A18;                          /* texto sobre crema */
  --ink-muted: #5E564E;                    /* 6.1:1 sobre crema */
  --ink-gold: #7A5C0B;                     /* dorado legible sobre crema */
  --rule-ink: rgba(28, 26, 24, 0.22);
  --display: 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif;
  --sans: 'Jost', 'Futura', 'Century Gothic', 'Helvetica Neue', sans-serif;
  --fs-caps: 0.875rem; --track-caps: 0.16em;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --breathe: cubic-bezier(0.45, 0, 0.55, 1);
  --breath: 6s;
  --pad: clamp(20px, 6vw, 96px);
  --beat: 450ms;
  /* Un paso de escena = un deslizamiento cómodo. Con menos, en el celular
     las frases se saltaban (aprendido en respirando-con-ciencia.html). */
  --step-len: 80svh;
}
@media (min-width: 900px) { :root { --step-len: 66svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body.rl {
  margin: 0; background: var(--night); color: var(--cream);
  font-family: var(--sans); font-weight: 450; line-height: 1.55;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  caret-color: var(--gold); scrollbar-color: var(--gold-line) var(--night);
}
::selection { background: rgba(201, 168, 76, 0.35); color: var(--cream); }
button { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 0.28em; text-decoration-thickness: 1px; }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 5px; border-radius: 4px; }
p { margin: 0; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Guion de CON-CIENCIA dibujado: en Bodoni el guion casi desaparece. */
.hy { display: inline-block; width: 0.5em; height: 0.065em; margin: 0 0.1em; vertical-align: 0.3em; background: currentColor; }
em { font-style: italic; }

.rl-skip { position: absolute; left: 16px; top: -80px; z-index: 50; padding: 12px 18px; background: var(--gold); color: var(--night); border-radius: 999px; font-size: var(--fs-caps); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; }
.rl-skip:focus { top: 16px; }

.has-motion [data-reveal] { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity 1000ms var(--ease), transform 1000ms var(--ease), filter 1000ms var(--ease); transition-delay: calc(var(--d, 0) * var(--beat)); }
.has-motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

.link-next { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; font-size: var(--fs-caps); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; color: var(--gold-hi); }
.link-next span { transition: transform 400ms var(--ease); }
.link-next:hover span { transform: translateX(6px); }
.link-next--quiet { color: var(--muted); }
.link-next--quiet:hover { color: var(--cream); }

/* ─── Indicador de escenas (pantallas anchas) ──────────────── */
.rl-progress { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 20; display: none; flex-direction: column; }
.rl-progress a { display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 28px; }
.rl-progress a::before { content: ''; display: block; width: 30px; height: 1px; background: var(--quiet); transform: scaleX(0.4); transform-origin: right; transition: transform 500ms var(--ease), background-color 500ms var(--ease); }
.rl-progress a:hover::before { transform: scaleX(0.66); background: var(--cream); }
.rl-progress a[aria-current="true"]::before { transform: none; background: var(--gold); }
.rl-progress.is-light a::before { background: rgba(28, 26, 24, 0.4); }
.rl-progress.is-light a[aria-current="true"]::before { background: var(--ink-gold); }
@media (min-width: 900px) { .rl-progress { display: flex; } }

/* ─── La guía ─────────────────────────────────────────────── */
.guide { position: fixed; z-index: 30; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; max-width: calc(100vw - 132px); padding: 10px 18px 10px 14px; border-radius: 999px; background: rgba(28, 26, 24, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--gold-line); color: var(--cream); font-size: 0.9375rem; line-height: 1.25; letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; transition: opacity 600ms var(--ease), transform 600ms var(--ease), background-color 600ms var(--ease), color 600ms var(--ease); }
.guide.is-light { background: rgba(242, 237, 228, 0.82); color: var(--ink); border-color: var(--rule-ink); }
.guide.is-off { opacity: 0; transform: translate(-50%, 12px); }
.guide__txt { transition: opacity 400ms var(--ease); }
.guide.is-swap .guide__txt { opacity: 0; }
.guide__ico { position: relative; flex: none; width: 18px; height: 18px; display: grid; place-items: center; }
/* desliza: una línea con una luz que baja */
.guide[data-kind="scroll"] .guide__ico span { position: relative; width: 1px; height: 18px; overflow: hidden; background: rgba(201, 168, 76, 0.3); }
.guide[data-kind="scroll"] .guide__ico span::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gold); }
.has-motion .guide[data-kind="scroll"] .guide__ico span::after { animation: cue 2.6s var(--breathe) infinite; }
@keyframes cue { 0% { top: -40%; } 60%, 100% { top: 100%; } }
/* toca: un punto con un aro que late */
.guide[data-kind="tap"] .guide__ico span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.guide[data-kind="tap"] .guide__ico::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); }
.has-motion .guide[data-kind="tap"] .guide__ico::after { animation: tapring 2.2s var(--ease) infinite; }
@keyframes tapring { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
/* respira: el aro crece y decrece */
.guide[data-kind="breath"] .guide__ico span { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--gold); }
.has-motion .guide[data-kind="breath"] .guide__ico span { animation: gbreath 11s var(--breathe) infinite; }
@keyframes gbreath { 0%, 100% { transform: scale(0.45); } 36%, 45% { transform: scale(1); } }

/* ═══ ORBE — respira en toda la página ═══════════════════════
   .orb la mueve el scroll (EXPAND); .orb__core respira sola (BREATH). */
.orb { position: absolute; top: 50%; left: 50%; width: min(90vmin, 620px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; will-change: transform; }
.orb__core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(201, 168, 76, 0.26) 0%, rgba(201, 168, 76, 0.1) 36%, rgba(201, 168, 76, 0.025) 58%, transparent 70%); }
.orb__core::before, .orb__core::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(201, 168, 76, 0.24); }
.orb__core::before { inset: 21%; }
.orb__core::after { inset: 8%; border-color: rgba(201, 168, 76, 0.1); }
.has-motion .orb__core { animation: breath var(--breath) var(--breathe) infinite; }
@keyframes breath { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1); } }

/* ═══ ESCENAS FIJAS ═══════════════════════════════════════════
   Sin movimiento: una sección normal con sus frases en orden.
   Con movimiento: una sección alta con un escenario pegado arriba y el
   scroll decide qué frase está presente (DISSOLVE). */
.scene { position: relative; }
.scene__stage { position: relative; overflow: clip; display: grid; place-items: center; align-content: center; gap: 32px; min-height: 100svh; padding: 96px var(--pad); text-align: center; }
.scene .orb { display: none; }
.steps { position: relative; display: grid; justify-items: center; gap: 1.2em; width: 100%; max-width: 20ch; font-family: var(--display); font-size: clamp(1.9rem, 4.2vw + 0.9rem, 4.25rem); line-height: 1.08; letter-spacing: -0.012em; }
.step { margin: 0; text-wrap: balance; }
.step--em, .step em { font-style: italic; color: var(--gold-hi); }

.has-motion .scene { height: calc(100svh + (var(--steps) + 0.6) * var(--step-len)); }
.has-motion .scene__stage { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 0 var(--pad); }
.has-motion .scene .orb { display: block; }
.has-motion .steps { display: grid; gap: 0; }
/* Sale rápido y entra después: nunca se ven dos frases encimadas. */
.has-motion .steps > .step { grid-area: 1 / 1; align-self: center; opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(6px); pointer-events: none; transition: opacity 380ms var(--ease), transform 900ms var(--ease), filter 380ms var(--ease); }
.has-motion .steps > .step.is-past { transform: translateY(-26px) scale(1.01); }
.has-motion .steps > .step.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; transition-duration: 1000ms, 1300ms, 1000ms; transition-delay: 420ms; }

/* ═══ TEXTO EDITORIAL (.ed) ══════════════════════════════════
   Una frase larga nunca va como un solo bloque: se parte en líneas con papel
   propio. Móvil primero; los tamaños no dependen del contenedor (rem).
     --s    entrada: pequeña, itálica, gris
     --m    cuerpo: mediano, crema
     --xl   remate: grande, itálica, dorado
     --gold una línea media en dorado · --in desplazada · --end a la derecha
   .ed--center para los escenarios centrados (la versión larga). */
.ed { display: grid; justify-items: start; width: min(100%, 32rem); margin: 0; font-family: var(--display); font-weight: 400; font-style: normal; font-size: 1rem; line-height: 1.1; letter-spacing: -0.01em; text-align: left; color: var(--cream); }
.ed--center { justify-items: center; text-align: center; margin-inline: auto; }
.ed__l { display: block; max-width: 100%; text-wrap: balance; }
.ed__l--s { margin-top: 0.9rem; font-size: clamp(1.1rem, 0.5vw + 1rem, 1.45rem); font-style: italic; line-height: 1.3; letter-spacing: 0; color: var(--muted); }
.ed__l--s:first-child, .ed__rule + .ed__l--s { margin-top: 0; }
.ed__l--m { font-size: clamp(1.75rem, 2.2vw + 1.1rem, 3rem); line-height: 1.06; max-width: 15ch; }
.ed__l--xl { margin-top: 0.08em; font-size: clamp(2.4rem, 4.6vw + 1.3rem, 5.5rem); line-height: 0.96; letter-spacing: -0.022em; font-style: italic; color: var(--gold-hi); max-width: 11ch; }
.ed__l--gold { font-style: italic; color: var(--gold-hi); }
.ed__l--in { margin-left: clamp(1.75rem, 10vw, 5rem); }
.ed__l--end { justify-self: end; text-align: right; }
.ed__rule { display: block; width: 56px; height: 1px; margin: 1.4rem 0 0.9rem; background: var(--gold); opacity: 0.6; }
.ed--center .ed__rule { justify-self: center; }
.ed--center .ed__l--in { margin-left: 0; }
/* En los escenarios fijos el ancho lo pone .ed, no el max-width en ch del escenario. */
.steps--caption, .steps--key, .steps--journey, .steps--maybe { max-width: min(92vw, 36rem); }
.has-motion .steps--key { width: min(92vw, 34rem); }
.steps--caption .step.ed { color: var(--cream); }

/* ═══ 01 · EL ESPEJO ═══════════════════════════════════════ */
.hero { position: relative; overflow: clip; min-height: 100svh; display: grid; place-items: center; padding: 96px var(--pad); text-align: center; }
.hero__media { position: absolute; inset: 0; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1600ms var(--ease); }
.hero__video.is-ready { opacity: 0.5; }
.hero .orb { width: min(118vmin, 860px); }
.has-motion .orb--hero .orb__core { animation: breathDeep var(--breath) var(--breathe) infinite, orbIn 2600ms var(--ease) both; }
@keyframes breathDeep { 0%, 100% { transform: scale(0.84); } 50% { transform: scale(1); } }
@keyframes orbIn { from { opacity: 0; } }
.hero__content { position: relative; will-change: opacity, transform; }
.hero__title { margin: 0; max-width: 13ch; font-family: var(--display); font-weight: 400; font-size: clamp(2.5rem, 6.4vw + 0.4rem, 5.75rem); line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; }
.hero__line { display: block; }
.hero__line--em { font-style: italic; color: var(--gold-hi); }
.has-motion .hero__line { opacity: 0; transform: translateY(20px); filter: blur(6px); transition: opacity 1400ms var(--ease), transform 1400ms var(--ease), filter 1400ms var(--ease); transition-delay: calc(400ms + var(--i) * 1100ms); }
.has-motion .is-ready .hero__line { opacity: 1; transform: none; filter: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 84px; width: 1px; height: 52px; overflow: hidden; background: rgba(242, 237, 228, 0.14); }
.scroll-cue::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gold); }
.has-motion .scroll-cue { animation: orbIn 1200ms 2800ms both; }
.has-motion .scroll-cue::after { animation: cue var(--breath) var(--breathe) infinite; }

.steps--voices { font-style: italic; max-width: 16ch; }
.steps--voices .step:not(.step--em) { color: var(--muted); }

/* ═══ 02 · ¿TE RECONOCES? ══════════════════════════════════ */
.sc--recognize { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 96px var(--pad) 120px; text-align: center; }
.recognize { position: relative; width: 100%; max-width: 1100px; display: grid; justify-items: center; gap: 20px; }
.recognize__q { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw + 0.5rem, 5.25rem); line-height: 1; letter-spacing: -0.015em; }
.words { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; max-width: 30rem; }
.word { position: relative; min-height: 48px; padding: 6px 16px; border: 0; background: none; cursor: pointer; font-family: var(--display); font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.4rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: transform 600ms var(--ease), opacity 600ms var(--ease), color 600ms var(--ease); }
.word::after { content: ''; position: absolute; left: 16px; right: calc(16px + 0.14em); bottom: 8px; height: 1px; background: var(--gold); opacity: 0.2; transform: scaleX(0.35); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.word:hover { color: var(--cream); }
.word:hover::after { transform: scaleX(1); opacity: 0.45; }
.word[aria-pressed="true"] { color: var(--gold-hi); transform: scale(1.05); }
.word[aria-pressed="true"]::after { transform: scaleX(1); opacity: 0.7; }
.recognize[data-state="focus"] .word:not([aria-pressed="true"]) { opacity: 0.25; }
.recognize[data-state="focus"] .word:not([aria-pressed="true"]):hover { opacity: 0.6; }
.recognize__echo { min-height: 5.2em; max-width: 24ch; font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 1.2vw + 1rem, 1.9rem); line-height: 1.3; color: var(--cream); text-wrap: balance; }
.is-new { animation: echo-in 900ms var(--ease); }
@keyframes echo-in { from { opacity: 0; filter: blur(4px); transform: translateY(8px); } }
.recognize__after { display: grid; justify-items: center; gap: 18px; animation: echo-in 1200ms var(--ease) backwards; transition: opacity 500ms var(--ease); }
.after__line { font-family: var(--display); font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem); line-height: 1.15; }
.has-motion .words li { animation: drift 14s var(--breathe) infinite; animation-delay: calc(var(--i) * -1.7s); }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(3px, -5px); } 66% { transform: translate(-4px, 3px); } }
.has-motion .words li { opacity: 0; transition: opacity 1200ms var(--ease) calc(var(--i) * 140ms + 400ms); }
.has-motion .recognize.is-in .words li { opacity: 1; }
/* Transición 2 → 3: las palabras se juntan en el centro y se vuelven puntos. */
.sc--recognize.is-converging .word { transition: transform 1100ms var(--ease), opacity 900ms var(--ease) 300ms, color 400ms; transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.12); opacity: 0; color: var(--gold); }
.sc--recognize.is-converging .recognize__echo, .sc--recognize.is-converging .recognize__after { opacity: 0; transition: opacity 500ms var(--ease); }
@media (min-width: 768px) {
  .recognize { min-height: min(64vh, 600px); align-content: center; }
  .words { position: absolute; inset: 0; margin: 0; max-width: none; display: block; pointer-events: none; }
  .words li { position: absolute; left: calc(50% + var(--x) * 1%); top: calc(50% + var(--y) * 1%); translate: -50% -50%; pointer-events: auto; }
  .recognize__q { position: relative; z-index: 1; margin-bottom: 7rem; }
  .recognize__echo { position: absolute; top: calc(50% + 2.5rem); left: 50%; translate: -50% 0; width: 24ch; }
}

/* ═══ 03 · EL PATRÓN ═══════════════════════════════════════ */
.stage--pattern { gap: clamp(16px, 4vh, 40px); }
.pm { --pm: min(88vw, 56svh, 560px); position: relative; width: var(--pm); aspect-ratio: 1; }
.pm__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pm__ghost { fill: none; stroke: rgba(242, 237, 228, 0.08); stroke-width: 0.25; }
.pm__spoke, .pm__arc { fill: none; stroke: var(--gold); stroke-width: 0.3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pm__spoke { opacity: 0.55; }
.has-motion .pm__spoke, .has-motion .pm__arc { stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease); }
.has-motion .pm__spoke.is-on, .has-motion .pm__arc.is-on { stroke-dashoffset: 0; }
/* «Eso es un patrón»: la vuelta se repite sola. */
.has-motion .pm.is-loop .pm__arc { stroke-dasharray: 0.06 0.04; stroke-width: 0.45; animation: loop 3.2s linear infinite; }
@keyframes loop { to { stroke-dashoffset: -1; } }
.pn { position: absolute; width: 44px; height: 44px; translate: -50% -50%; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.pn--n { left: 50%; top: 16%; } .pn--e { left: 84%; top: 50%; } .pn--s { left: 50%; top: 84%; } .pn--w { left: 16%; top: 50%; }
.pn__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--night); border: 1px solid var(--gold); transition: background-color 600ms var(--ease), transform 600ms var(--ease); }
.pn__lbl { position: absolute; white-space: nowrap; font-size: 0.8125rem; font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--cream); transition: color 400ms var(--ease); }
.pn--n .pn__lbl { bottom: 100%; }
.pn--s .pn__lbl, .pn--e .pn__lbl, .pn--w .pn__lbl { top: 100%; }
.pn:hover .pn__lbl { color: var(--gold-hi); }
.pn.is-lit .pn__dot { background: var(--gold); transform: scale(1.25); }
.pn[aria-pressed="true"] .pn__dot { transform: scale(1.6); }
.pn[aria-pressed="true"] .pn__lbl { color: var(--gold-hi); }
.pn--c { left: 50%; top: 50%; width: 32%; height: 32%; border-radius: 50%; border: 1px solid var(--gold); background: radial-gradient(circle, rgba(201, 168, 76, 0.16), rgba(201, 168, 76, 0.02) 70%); }
.pn--c .pn__lbl { position: static; font-family: var(--display); font-weight: 500; font-size: clamp(0.72rem, 0.35rem + 1.3vw, 1.05rem); letter-spacing: 0.1em; }
.has-motion .pn--c { animation: pbreath 11s var(--breathe) infinite; }
@keyframes pbreath { 0%, 100% { transform: scale(0.9); } 36%, 45% { transform: scale(1); } }
.has-motion .pn:not(.pn--c) { opacity: 0; transition: opacity 800ms var(--ease); }
.has-motion .pn.is-lit { opacity: 1; }
.steps--caption { max-width: 22ch; min-height: 3.4em; font-style: italic; font-size: clamp(1.3rem, 1.1vw + 1rem, 1.9rem); line-height: 1.25; color: var(--muted); }
.steps--caption .step--big { font-style: normal; font-size: 1.25em; color: var(--cream); }
.steps--caption .step--em { font-style: italic; color: var(--gold-hi); }
.pm__tap { display: none; }
.has-motion .pm__tap { display: block; grid-area: 1 / 1; align-self: center; color: var(--gold-hi); }
.has-motion .stage--pattern.is-tapped .steps--caption > .step { opacity: 0; }

/* ═══ 04 · LA RESPIRACIÓN COMO LLAVE ═══════════════════════ */
.stage--key { gap: clamp(20px, 4vh, 44px); }
.key { --k: min(62vw, 44svh, 400px); position: relative; width: var(--k); aspect-ratio: 1; display: grid; place-items: center; transition: opacity 900ms var(--ease), transform 1200ms var(--ease); }
.key__breath { position: absolute; inset: 0; display: grid; place-items: center; }
.key__circle, .key__wave { position: absolute; inset: 0; border-radius: 50%; }
.key__circle { border: 1px solid var(--gold); background: radial-gradient(circle, rgba(201, 168, 76, 0.12), rgba(201, 168, 76, 0.02) 70%); }
.key__wave { border: 1px solid var(--gold-line); opacity: 0; }
.has-motion .key__circle { animation: kbreath 11s var(--breathe) infinite; }
@keyframes kbreath { 0%, 100% { transform: scale(0.8); } 36%, 45% { transform: scale(1); } }
.has-motion .key.is-waves .key__wave { animation: wave 5.5s var(--ease) infinite; animation-delay: calc(var(--w) * 2.75s); }
@keyframes wave { 0% { transform: scale(0.95); opacity: 0; } 10% { opacity: 0.8; } 100% { transform: scale(1.9); opacity: 0; } }
.key__word { position: relative; margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 1.2vw + 0.65rem, 1.6rem); letter-spacing: 0.14em; text-transform: uppercase; }
.key { margin-bottom: 64px; }
.key__around { position: absolute; left: 50%; width: min(90vw, 30rem); translate: -50% 0; top: calc(100% + 18px); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font-size: var(--fs-caps); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-hi); }
.has-motion .key__around { position: absolute; left: 50%; top: calc(100% + 18px); width: 90vw; margin: 0; translate: -50% 0; transition: opacity 800ms var(--ease); }
.has-motion .key__around li { opacity: 0; transform: scale(0.8); transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--i) * 380ms); }
.has-motion .key__around.is-active li, .has-motion .key__around.is-past li { opacity: 1; transform: none; }
@media (min-width: 768px) {
  .has-motion .key__around { inset: 0; top: 0; width: auto; translate: none; }
  .has-motion .key__around li { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transform: rotate(var(--a)) translate(calc(var(--k) * 0.78)) rotate(calc(-1 * var(--a))) scale(0.8); }
  .has-motion .key__around.is-active li, .has-motion .key__around.is-past li { transform: rotate(var(--a)) translate(calc(var(--k) * 0.78)) rotate(calc(-1 * var(--a))); }
}
.steps--key { max-width: 22ch; font-size: clamp(1.4rem, 1.5vw + 1rem, 2.3rem); line-height: 1.2; color: var(--muted); }
.steps--door { max-width: 12ch; font-size: clamp(2.2rem, 5vw + 0.6rem, 5.25rem); line-height: 1.02; }
.key__door { display: none; }
.has-motion .key__door { display: block; position: absolute; left: 50%; top: 50%; height: min(78svh, 680px, 138vw); aspect-ratio: 2 / 3; translate: -50% -48%; overflow: visible; pointer-events: none; }
.key__door path { fill: none; stroke: var(--gold); stroke-width: 0.35; stroke-dasharray: 1; stroke-dashoffset: 1; }
.has-motion .steps--door { position: absolute; left: 50%; top: 56%; translate: -50% -50%; width: calc(min(78svh, 680px, 138vw) * 0.52); font-size: clamp(2rem, 2.6vw + 0.9rem, 3.6rem); }
.has-motion .steps--key { position: absolute; left: 50%; bottom: max(100px, 16svh); translate: -50% 0; width: min(88vw, 22ch); }
.has-motion .key { margin: -12svh 0 0; }
.has-motion .stage--key.is-door .key { opacity: 0; transform: scale(1.35); }

/* ═══ 05 · ENTENDER ≠ EXPERIMENTAR ═════════════════════════ */
.rail { display: none; }
.steps--journey { list-style: none; margin: 0; padding: 0; max-width: 24ch; }
.steps--journey .step { display: grid; justify-items: center; gap: 16px; }
.jw { font-family: var(--display); font-size: clamp(2.2rem, 5vw + 0.8rem, 5.25rem); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.steps--journey q { max-width: 20ch; font-style: italic; font-size: clamp(1.2rem, 0.9vw + 1rem, 1.7rem); line-height: 1.3; color: var(--muted); quotes: '“' '”'; }
.step--close { font-size: clamp(1.8rem, 3vw + 1rem, 3.6rem); line-height: 1.1; }
.has-motion .rail { display: block; position: absolute; left: 50%; top: 22svh; width: min(74vw, 640px); height: 22px; translate: -50% 0; transition: opacity 800ms var(--ease); }
.rail__line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--gold-line); }
.rail__fill { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(var(--t, 0)); }
.rail__dot { position: absolute; top: 50%; left: calc(var(--k) * 33.333%); width: 9px; height: 9px; translate: -50% -50%; border-radius: 50%; border: 1px solid var(--gold); background: var(--night); transition: background-color 500ms var(--ease); }
.rail__dot.is-on { background: var(--gold); }
.rail__traveler { position: absolute; top: 50%; left: calc(var(--t, 0) * 100%); width: 22px; height: 22px; translate: -50% -50%; border-radius: 50%; border: 1px solid var(--gold-hi); }
.has-motion .rail__traveler { animation: breath 3s var(--breathe) infinite; }
.stage--journey.is-close .rail { opacity: 0; }
.has-motion .steps--journey > .step { transform: translateX(60px); }
.has-motion .steps--journey > .step.is-past { transform: translateX(-60px); }
.has-motion .steps--journey > .step.is-active { transform: none; }

/* ═══ 06 · EL PASO ══════════════════════════════ */
.scene--dusk .scene__stage { background: var(--night); }
.steps--maybe { max-width: 18ch; font-size: clamp(1.9rem, 3.4vw + 1rem, 4rem); }
.step--cta { display: grid; justify-items: center; gap: 22px; }
.step--cta .cta { margin-top: 26px; font-family: var(--sans); font-style: normal; font-size: var(--fs-caps); line-height: 1; letter-spacing: var(--track-caps); }
.step--cta .link-next { font-family: var(--sans); line-height: 1; }
.steps--maybe .step:not(:last-child) { color: var(--muted); }
.cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 58px; margin-top: 18px; padding: 0 38px; border-radius: 999px; background: var(--gold); color: var(--night); text-decoration: none; font-size: var(--fs-caps); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; transition: background-color 400ms var(--ease), transform 400ms var(--ease), opacity 1000ms var(--ease), filter 1000ms var(--ease); }
.cta::before { content: ''; position: absolute; inset: -9px; border-radius: inherit; border: 1px solid var(--gold); opacity: 0.5; pointer-events: none; }
.has-motion .cta::before { animation: ring 5.5s var(--breathe) infinite; }
.cta:hover { background: var(--gold-hi); }
.cta:active { transform: scale(0.98); }
.cta:focus-visible { outline-color: var(--cream); outline-offset: 14px; }


/* ─── Pie dentro de la pantalla de cierre (Diego, 2026-09-30) ───
   El pie ya no es una sección aparte: aparece abajo de la última pantalla,
   junto al CTA. Queda por encima del control de sonido (esquina inferior). */
.close-foot { display: grid; justify-items: center; gap: 2px; width: min(92vw, 26rem); margin: 56px auto 0; padding-top: 14px; border-top: 1px solid var(--gold-line); font-size: 0.9375rem; color: var(--muted); }
.close-foot__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; color: var(--cream); }
.close-foot__brand img { width: auto; height: 28px; }
.close-foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; }
.close-foot__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.close-foot a:hover { color: var(--cream); }
.close-foot__links a:hover { text-decoration: underline; }
.has-motion .scene--dusk .close-foot, .rl--corta .cs-close .close-foot { position: absolute; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 60px); margin: 0; translate: -50% 0; }
.has-motion .scene--dusk .close-foot { opacity: 0; pointer-events: none; transition: opacity 900ms var(--ease) 500ms; }
.has-motion .scene--dusk .scene__stage.is-final .close-foot { opacity: 1; pointer-events: auto; }
/* El CTA sube un poco para dejar sitio al pie. */
.has-motion .scene--dusk .steps--maybe { transition: translate 900ms var(--ease); }
.has-motion .scene--dusk .scene__stage.is-final .steps--maybe { translate: 0 -7svh; }
/* Celulares angostos (≤ 359 px): el CTA y su enlace caben en una línea. */
.cta, .link-next { white-space: nowrap; }
@media (max-width: 359px) {
  .cta { padding: 0 24px; font-size: 0.8125rem; letter-spacing: 0.1em; }
  .link-next { font-size: 0.8125rem; letter-spacing: 0.1em; }
}

/* ─── Te acompaña + próxima sesión (2026-10-02) ─────────────
   Foto, credencial, la comunidad en números reales y la nota de seguridad.
   Móvil primero: una columna centrada; desde 760 px, foto y texto lado a lado. */
.guia { display: grid; justify-items: center; gap: 28px; padding: clamp(80px, 14vh, 140px) var(--pad); text-align: center; }
.guia__foto { position: relative; width: clamp(150px, 38vw, 220px); aspect-ratio: 1; }
.guia__foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.guia__foto::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0.5; pointer-events: none; }
.has-motion .guia__foto::after { animation: ring 6s var(--breathe) infinite; }
.guia__txt { display: grid; justify-items: center; gap: 14px; max-width: 30rem; }
.guia__name { width: auto; }
.guia__cred { font-size: 1rem; letter-spacing: 0.02em; color: var(--gold-hi); }
.guia__voz { font-family: var(--display); font-style: italic; font-size: clamp(1.15rem, 0.6vw + 1rem, 1.45rem); line-height: 1.35; color: var(--muted); text-wrap: balance; }
.guia__cuenta { font-size: 1rem; color: var(--muted); }
.guia__cuenta b { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--cream); font-variant-numeric: tabular-nums; }
.guia__seg { font-size: 0.875rem; line-height: 1.5; color: var(--quiet); max-width: 34ch; }
.guia__seg a { color: var(--gold-hi); white-space: nowrap; }
@media (min-width: 760px) {
  .guia { grid-template-columns: auto minmax(0, 30rem); justify-content: center; align-items: center; column-gap: clamp(40px, 6vw, 88px); text-align: left; }
  .guia__txt { justify-items: start; }
  .guia .ed { justify-items: start; text-align: left; margin-inline: 0; }
}
.proxima { margin: 0; font-family: var(--sans); font-style: normal; font-size: 0.9375rem; line-height: 1.4; letter-spacing: 0.01em; color: var(--muted); text-wrap: balance; }
.proxima span { color: var(--cream); }

/* El aro que respira (CTA y foto). Vivía en el bloque de «Pruébalo»; al quitarlo se perdió. */
@keyframes ring { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.1); opacity: 0.15; } }

/* «Te acompaña»: centrado en el teléfono, a la izquierda junto a la foto en escritorio. */
.guia .ed { justify-items: center; text-align: center; margin-inline: auto; }
@media (min-width: 760px) { .guia .ed { justify-items: start; text-align: left; margin-inline: 0; } }

/* ─── Versión corta (2026-10-09): el vaso, el método en dos fases y Qué es / Qué no es ───
   Aditivo: la versión corta (respirando-con-ciencia-corta.html) no tiene estas piezas. */
#reconoces .vaso { position: relative; z-index: 0; width: clamp(92px, 24vw, 120px); pointer-events: none; }
.vaso:empty { display: none; }
.vaso-agua { position: relative; width: 100%; aspect-ratio: 3 / 4; }
.vaso-agua__svg, .vaso-agua__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vaso-agua__svg-agua { transition: y 1.6s var(--ease); }
.vaso-agua__lienzo { opacity: 0; transition: opacity 900ms var(--ease); }
.vaso-agua.is-gl .vaso-agua__lienzo { opacity: 1; }
.vaso-agua.is-gl .vaso-agua__svg { opacity: 0; transition: opacity 900ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .vaso-agua__svg-agua { transition-duration: 1ms; } }

.fase { font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.fase--b { color: var(--muted); }
.scene--metodo .steps--journey q { quotes: none; color: var(--cream); opacity: 0.86; }
.rail__fase { position: absolute; bottom: calc(100% + 10px); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); translate: -50% 0; white-space: nowrap; }
.rail__fase--a { left: 16.666%; }
.rail__fase--b { left: 83.333%; color: var(--muted); }

.esno { display: grid; justify-items: center; gap: clamp(36px, 6vh, 56px); padding: clamp(80px, 14vh, 140px) var(--pad); }
.esno__t { width: auto; text-align: center; }
.esno__cols { display: grid; gap: 40px; width: min(100%, 44rem); }
.esno__h { margin: 0 0 14px; font-family: var(--sans); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.esno__col--no .esno__h { color: var(--muted); }
.esno__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.esno__col li { font-family: var(--display); font-size: clamp(1.25rem, 0.8vw + 1.05rem, 1.6rem); line-height: 1.25; color: var(--cream); text-wrap: balance; }
.esno__col--no li { color: var(--muted); }
.esno__col s { text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 58% / 100% 1px; }
.has-motion .esno__col--no s { background-size: 0 1px; transition: background-size 900ms var(--ease) calc(var(--j, 0) * 160ms + 500ms); }
.has-motion .esno__col--no.is-in s { background-size: 100% 1px; }
.esno__col--no li:nth-child(2) { --j: 1; } .esno__col--no li:nth-child(3) { --j: 2; } .esno__col--no li:nth-child(4) { --j: 3; }
.esno__modelo { max-width: 38ch; font-size: 0.9375rem; line-height: 1.55; color: var(--quiet); text-align: center; text-wrap: pretty; }
@media (min-width: 760px) { .esno__cols { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); } }
/* El vaso empuja la pregunta hacia abajo: en escritorio el eco baja con ella. */
@media (min-width: 768px) { #reconoces .recognize__echo { top: calc(50% + 7rem); } #reconoces .recognize__q { margin-bottom: 9rem; } }
@media (max-width: 759px) { .esno__cols { text-align: center; justify-items: center; } }

/* ─── «Descarga tu vaso» con el scroll (2026-10-09) ─────────────────────
   js/respirando-vaso.js: las palabras caen al vaso hasta llenarlo; luego
   Respira · Siente bajan el agua, en Nombra las palabras salen otra vez y en
   Resignifica se vuelven doradas. Sin movimiento: lectura en orden. */
.vs { position: relative; background: var(--night); }
.vs__stage { position: relative; display: grid; justify-items: center; gap: 28px; width: min(100%, 44rem); margin: 0 auto; padding: 96px 20px; text-align: center; }
.vs__copa { position: relative; display: grid; justify-items: center; gap: 6px; width: clamp(130px, 34vw, 200px); transform-origin: 50% 70%; will-change: transform; }
.vs .vs__vaso { width: 100%; pointer-events: none; }
.vs__medida { margin: 0; font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; }
.vs__de { font-size: 0.6em; color: var(--quiet); }
.vs__words { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.vs__words li { font-family: var(--display); font-size: clamp(0.95rem, 0.6vw + 0.85rem, 1.3rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color 900ms var(--ease); }
.vs__caps { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.vs__cap { display: grid; justify-items: center; gap: 10px; }
.vs__cap.ed { width: auto; justify-items: center; text-align: center; }
.vs__t { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 3vw + 1.2rem, 3.4rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--cream); }
.vs__jw { font-family: var(--display); font-size: clamp(2.2rem, 3vw + 1.4rem, 3.6rem); line-height: 1; color: var(--cream); }
.vs__jw--oro { font-style: italic; color: var(--gold-hi); }
.vs__cap q { max-width: 22ch; font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 0.8vw + 0.95rem, 1.5rem); line-height: 1.3; color: var(--muted); quotes: '“' '”'; text-wrap: balance; }

/* Con movimiento: escena fija, el recorrido lo marca el scroll. */
.has-motion .vs { height: 720svh; }
.has-motion .vs__stage { position: sticky; top: 0; display: block; width: 100%; max-width: none; height: 100svh; padding: 0; overflow: clip; }
.has-motion .vs__copa { position: absolute; left: 50%; top: 58%; translate: -50% -50%; width: clamp(112px, min(30vw, 30svh), 210px); }
.has-motion .vs__words { position: absolute; inset: 0; display: block; pointer-events: none; }
.has-motion .vs__words li { --kx: 0.68; --ky: 0.5; position: absolute; left: calc(50% + var(--x) * var(--kx) * 1%); top: calc(58% + var(--y) * var(--ky) * 1svh); transform: translate(-50%, -50%); white-space: nowrap; will-change: transform, opacity; }
.has-motion .vs.is-oro .vs__words li { color: var(--gold-hi); }
.has-motion .vs__caps { position: absolute; left: 50%; top: max(9svh, 64px); width: min(88vw, 34rem); translate: -50% 0; display: grid; }
.has-motion .vs__cap { grid-area: 1 / 1; align-content: start; opacity: 0; transform: translateY(18px); filter: blur(5px); transition: opacity 600ms var(--ease), transform 900ms var(--ease), filter 600ms var(--ease); }
.has-motion .vs__cap.is-active { opacity: 1; transform: none; filter: none; }
.has-motion .vs__cap.is-past { transform: translateY(-14px); }
.has-motion .vs__cap q { font-size: clamp(1rem, 0.7vw + 0.9rem, 1.35rem); }
.vs .vaso-agua { transition: filter 1400ms var(--ease); }
.vs.is-oro .vaso-agua { filter: brightness(1.18) saturate(0.7); }
.vs.is-lleno .vs__medida { color: var(--gold-hi); }
@media (min-width: 900px) {
  .has-motion .vs__words li { --kx: 0.42; --ky: 0.56; }
  .has-motion .vs__copa { top: 60%; }
  .has-motion .vs__words li { top: calc(60% + var(--y) * var(--ky) * 1svh); }
}

/* ─── El paso: registro o Sesión de Claridad ─────────────────────────── */
.cierre { position: relative; display: grid; justify-items: center; gap: 22px; min-height: 100svh; padding: 18svh 20px 40px; overflow: clip; text-align: center; }
.cierre > * { position: relative; z-index: 1; }
.cierre .orb--cierre { position: absolute; z-index: 0; top: 30%; width: min(110vmin, 760px); opacity: 0.55; }
.has-motion .orb--cierre .orb__core { animation: breathDeep var(--breath) var(--breathe) infinite; }
.cierre .ed { justify-items: center; text-align: center; }
.cierre__es { max-width: 34ch; margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--muted); text-wrap: balance; }
.cierre__acciones { display: grid; justify-items: center; gap: 10px; margin-top: 8px; }
.cierre__acciones .cta { margin-top: 0; }
.cta--ghost { background: transparent; color: var(--cream); border: 1px solid var(--gold-line); }
.cta--ghost:hover { background: rgba(201, 168, 76, 0.12); }
.cierre__guia { max-width: 40ch; margin: 18px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--quiet); text-wrap: balance; }
.cierre__guia a { color: var(--muted); }
.cierre__foot { margin-top: 40px; }
/* Sin movimiento: la pregunta arriba, luego el vaso y sus palabras, luego el método. */
html:not(.has-motion) .vs__caps { display: contents; }
html:not(.has-motion) .vs__copa { order: 1; }
html:not(.has-motion) .vs__words { order: 2; }
html:not(.has-motion) .vs__cap { order: 3; }
html:not(.has-motion) .vs__cap:first-child { order: 0; }

/* ─── Inicio: el vaso lleno (2026-10-09) ────────────────────────────────
   Solo en respirando-con-ciencia.html (.hero--vaso); la corta no cambia. */
.hero--vaso .hero__content { display: grid; justify-items: center; gap: 0; }
.hero--vaso .hero__title { max-width: 16ch; font-size: clamp(2.3rem, 4.4vw + 0.8rem, 4.9rem); line-height: 1.06; }
.hero__kicker { margin: 0 0 14px; font-family: var(--sans); font-size: var(--fs-caps); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold); }
.hero__sub { max-width: 30ch; margin: 22px 0 0; font-family: var(--display); font-style: italic; font-size: clamp(1.15rem, 0.7vw + 1rem, 1.5rem); line-height: 1.35; color: var(--muted); text-wrap: balance; }
.hero__metodo { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 26px 0 0; padding: 0; list-style: none; font-family: var(--sans); font-size: var(--fs-caps); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--cream); }
.hero__metodo li + li::before { content: '·'; margin: 0 12px; color: var(--gold); }
.hero__metodo li:nth-child(n+3) { color: var(--muted); }
.hv { position: relative; width: clamp(92px, 15svh, 150px); margin-bottom: 18px; }
.hv__vaso { width: 100%; }
/* La gota que se sale del vaso y resbala por fuera del vidrio. */
.hv__gota { position: absolute; right: 13%; top: 10%; width: 7px; height: 9px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--gold-hi); opacity: 0; pointer-events: none; }
.has-motion .hv.is-vivo .hv__gota { animation: hvGota var(--breath) var(--ease) infinite; animation-delay: 1.2s; }
@keyframes hvGota {
  0%, 30% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  38% { opacity: 1; transform: translate(2px, 0) scale(1); }
  80% { opacity: 0.85; transform: translate(-4px, 380%) scale(0.9); }
  100% { opacity: 0; transform: translate(-6px, 640%) scale(0.7); }
}
@media (max-height: 640px) { .hv { width: 80px; margin-bottom: 10px; } .hero__metodo { margin-top: 16px; } }
.hero--vaso .scroll-cue { display: none; }
@media (min-width: 900px) { .hero--vaso .hero__title { max-width: 20ch; font-size: clamp(2.6rem, 3.4vw + 0.8rem, 4.4rem); } }
@media (max-width: 480px) { .hero__metodo { letter-spacing: 0.12em; } .hero__metodo li + li::before { margin: 0 7px; } }
/* Las palabras salen resignificadas: la segunda palabra (su opuesto) solo en la salida. */
.vs__w--nueva { display: none; }
.vs__words li.is-nueva .vs__w { display: none; }
.vs__words li.is-nueva .vs__w--nueva { display: inline; }
.has-motion .vs__words li.is-nueva { color: var(--cream); }
.has-motion .vs.is-oro .vs__words li.is-nueva { color: var(--gold-hi); }
/* La frase final más contenida para no tocar las palabras. */
.has-motion .vs__cap .ed__l--xl { font-size: clamp(2rem, 2.4vw + 1.2rem, 3.2rem); line-height: 1.05; }
.has-motion .vs__cap .ed__l--s { font-size: clamp(1rem, 0.4vw + 0.95rem, 1.25rem); }
/* No es / Es / Lo mides tú. */
.cierre__es { display: grid; justify-items: center; gap: 6px; max-width: none; }
.cierre__es p { margin: 0; }
.cierre__no { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-family: var(--sans); font-size: var(--fs-caps); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--quiet); }
.cierre__no s { text-decoration-color: var(--gold); text-decoration-thickness: 1px; }
.cierre__si { font-family: var(--display); font-style: italic; font-size: clamp(1.9rem, 2vw + 1.3rem, 2.8rem); line-height: 1.1; color: var(--gold-hi); }
.cierre__mide { font-family: var(--display); font-style: italic; font-size: 1.125rem; color: var(--muted); }
.cierre__es { margin-top: 14px; }
/* Cierre: los tres caminos con el mismo ancho (2026-10-09). */
.cierre__acciones .cta { width: min(100%, 320px); padding: 0 20px; }
.cierre__acciones .cta--ghost::before { display: none; }