/* ============================================================
   NuvaMed — home
   Chapters, product stages, the two-world switch, the ring, the
   phone dock and the register launch. Loads after styles.css
   (tokens, buttons, pricing, footer) and nav.css. Everything that
   moves is driven by --p (scroll progress, 0..1) and the cumulative
   step classes .s1…, both written by assets/home.js; the static
   values are the END states, so no JS and reduced motion both
   render the finished page.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --navy: #02323F;
  --teal: #095D7E;
  --green: #14967F;
  --white: #F8FAFB;
  --ink: #0F1724;
  /* Figures, kickers and labels use the product's own face (Hanken Grotesk, the
     app's display/body font) so the page reads like NuvaMed, not like a terminal. */
  --font-fig: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  --pin-h: 100vh;
  --stage-zoom: 1;
  --spring: cubic-bezier(.34, 1.4, .64, 1);
}
@supports (height: 100dvh) { :root { --pin-h: 100dvh } }

/* Sticky needs the global clip guard off. Sections clip themselves. */
html.nv-home, html.nv-home body { overflow-x: visible; }
html.nv-home body { background: var(--white); }
.clip { overflow: hidden; }
.anchor { display: block; height: 0; position: relative; top: -72px; }

/* ---------- type ---------- */
.kicker, .kicker-sm, .fig-num, .plan .price .clp, .log time, .note-meta, .contact-line, .cta-note, .dock-note, .plan-from { font-variant-numeric: tabular-nums; }
.section-pricing .plan .per, .section-pricing .price-foot, .section-pricing .billing-toggle-badge, .section-pricing .aud-grid-label { font-family: var(--font-fig); }
.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--font-fig); font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal);
}
.kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.kicker-sm { font-family: var(--font-fig); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.hero h1 {
  margin: 0 0 22px; font-size: clamp(40px, 4.5vw, 64px); font-weight: 600; line-height: 1;
  letter-spacing: -.045em; color: var(--navy); text-wrap: balance;
}
.chapter-copy h2, .chapter-copy h2 > span, .chapter-head h2 { text-wrap: balance; }
.chapter-copy h2, .chapter-head h2, .section-pricing .section-title, .section-faq h2, .final-band h2 {
  margin: 0 0 18px; font-size: clamp(34px, 4.4vw, 60px); font-weight: 600; line-height: 1.04;
  letter-spacing: -.04em; color: var(--navy); text-wrap: balance;
}
.hero h1 em, .chapter-copy h2 em, .chapter-head h2 em, .section-faq h2 em, .section-pricing .section-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--teal) 0%, var(--green) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lead { margin: 0 0 26px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--neutral-600); max-width: 46ch; text-wrap: pretty; }
.chapter-head.center { text-align: center; max-width: 780px; margin: 0 auto; }
.chapter-head.center .lead { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn-hero, .btn-chapter {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px; border-radius: 999px; overflow: hidden;
  background: var(--teal); color: #fff; font: 600 16px/1.2 var(--font-body); letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(2,50,63,.2), 0 10px 30px -10px rgba(9,93,126,.55), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 320ms var(--spring), box-shadow 320ms var(--ease-out-quart), background 320ms var(--ease-out-quart);
}
.btn-hero::after, .btn-chapter::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 720ms var(--ease-out-quart); pointer-events: none;
}
.btn-hero:hover, .btn-chapter:hover { background: #0b6f95; box-shadow: 0 2px 4px rgba(2,50,63,.2), 0 18px 40px -12px rgba(9,93,126,.6), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-hero:hover::after, .btn-chapter:hover::after { transform: translateX(120%); }
.btn-hero:active, .btn-chapter:active { transform: scale(.97); }
.btn-hero:focus-visible, .btn-chapter:focus-visible, .world-switch button:focus-visible, .link-quiet:focus-visible { outline: 3px solid rgba(20,150,127,.45); outline-offset: 3px; }
.btn-hero.big { min-height: 60px; padding: 18px 36px; font-size: 18px; background: linear-gradient(120deg, var(--green), var(--teal)); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 60px -16px rgba(20,150,127,.7); }
.btn-hero.big:hover { background: linear-gradient(120deg, #17a98f, #0b6f95); }
.btn-chapter { min-height: 48px; padding: 12px 24px; font-size: 15px; }
.link-quiet { display: inline-flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; min-height: 44px; color: var(--teal); font-size: 15px; font-weight: 500; text-decoration: none; }
.link-quiet span { transition: transform 320ms var(--spring); display: inline-block; }
.link-quiet:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.link-quiet:hover span { transform: translateX(4px); }
.link-quiet.on-dark { color: rgba(255,255,255,.82); }
.cta-row > span, .cta-row.center { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.cta-row.center { justify-content: center; }
.cta-note { margin: 12px 0 0; font-family: var(--font-fig); font-size: 12px; letter-spacing: .02em; color: var(--neutral-500); }

/* ---------- world switch ---------- */
.world-row > span { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.world-label { font-family: var(--font-fig); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--neutral-500); font-weight: 600; }
.world-switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px;
  border-radius: 999px; background: #e9f0f3; border: 1px solid var(--neutral-200);
}
.world-switch::before {
  content: ''; position: absolute; inset: 4px auto 4px 4px; width: calc(50% - 4px); border-radius: 999px;
  background: #fff; box-shadow: 0 2px 12px rgba(9,93,126,.16), 0 0 0 1px rgba(9,93,126,.06);
  transform: translateX(calc(var(--thumb, 0) * 100%)); transition: transform 460ms var(--spring);
}
.world-switch button {
  position: relative; z-index: 1; min-height: 40px; padding: 8px 22px; border: 0; background: none;
  border-radius: 999px; font: 600 14px/1 var(--font-body); color: var(--neutral-600); cursor: pointer; white-space: nowrap;
  transition: color 260ms ease;
}
.world-switch button.is-active { color: var(--teal); }
.world-switch.big { margin: 28px auto 0; }
.world-switch.big button { min-height: 52px; padding: 12px 30px; font-size: 16px; }

/* ---------- two worlds: variants ---------- */
html[data-audience="med"] [data-aud="psi"], html[data-audience="psi"] [data-aud="med"] { display: none; }
.swap { display: grid; }
.swap > [data-aud] { grid-area: 1 / 1; display: block; transition: opacity 360ms var(--ease-out-quart), transform 360ms var(--ease-out-quart); }
html[data-audience="med"] .swap > [data-aud="psi"], html[data-audience="psi"] .swap > [data-aud="med"] {
  display: block; opacity: 0; transform: translateY(8px); visibility: hidden; pointer-events: none;
}
.psi-headline { margin: 22px auto 0; text-align: center; font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; letter-spacing: -.02em; color: var(--navy); max-width: 32ch; }

/* ---------- entrance masks (hero) ---------- */
.mask { overflow: hidden; }
.mask > span, .h-mask .line > span { display: block; animation: riseIn 1s var(--ease-out-expo) both; }
.h-mask .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero .kicker.mask > span { animation-delay: 60ms; }
.h-mask .line:nth-child(1) > span { animation-delay: 160ms; }
.h-mask .line:nth-child(2) > span { animation-delay: 260ms; }
.hero .lead.mask > span { animation-delay: 420ms; }
.hero .cta-row.mask > span { animation-delay: 520ms; }
.hero .cta-note.mask > span { animation-delay: 620ms; }
.hero .world-row.mask > span { animation-delay: 720ms; }
@keyframes riseIn { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
.kicker.mask { display: block; overflow: hidden; }
.kicker.mask > span { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: calc(100vh - 64px); display: grid; align-items: center; padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 6vw, 80px); background: var(--white); }
.hero-glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 60% 55% at 78% 45%, rgba(20,150,127,.14), transparent 65%),
  radial-gradient(ellipse 40% 40% at 90% 90%, rgba(9,93,126,.10), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero-copy { max-width: 640px; }
.hero .kicker { margin-bottom: 26px; max-width: 46ch; text-transform: none; letter-spacing: .02em; font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--teal); }
.hero .kicker::before { flex: none; }
.hero .lead { max-width: 40ch; }
.hero .world-row { margin-top: 32px; }
/* stage recedes as the page scrolls into chapter one */
.hero .stage-once { transform: translateY(calc(var(--p, 0) * -40px)) scale(calc(1 - var(--p, 0) * .06)); opacity: calc(1 - var(--p, 0) * 1.2); }

/* ---------- STAGES: shared ---------- */
.stage { position: relative; margin: 0; zoom: var(--stage-zoom); }
.stage figcaption { margin-top: 14px; text-align: center; font-family: var(--font-fig); font-size: 11px; letter-spacing: .04em; color: var(--neutral-500); }
.app-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #fff; background: linear-gradient(135deg, var(--teal), var(--green)); font: 800 12px/1 var(--font-body); }
.app-mark.big { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }
/* Typed lines: static text for no-JS readers, blinking caret while typing */
html.no-home-js .tl::after { content: attr(data-text); }
.tl.typing::after { content: ''; display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -.12em; background: var(--green); animation: caret 900ms steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ---------- STAGE · UNA VEZ (hero) ---------- */
.stage-once { width: 100%; max-width: 640px; margin-inline: auto; }
.once-tilt { position: relative; height: 470px; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 320ms var(--ease-out-quart); transform-style: preserve-3d; }
.note {
  /* Never wider than the space left of the fan: the three documents sit
     190px + 30px from the right edge, so the note stops 12px short of them. */
  position: absolute; left: 0; top: 24px; width: min(400px, calc(100% - 232px)); padding: 18px 20px 16px; border-radius: 18px; background: #fff;
  border: 1px solid rgba(9,93,126,.10); box-shadow: 0 30px 70px -30px rgba(2,50,63,.45), 0 0 0 1px rgba(255,255,255,.6) inset;
  animation: noteIn 900ms var(--ease-out-expo) 200ms both;
}
@keyframes noteIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.note-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12px; color: var(--neutral-500); }
.note-title { font-weight: 600; color: var(--ink); margin-right: auto; }
.note-meta { font-family: var(--font-fig); font-size: 11px; }
.note-line { min-height: 1.5em; margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--neutral-800); }
.note-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--neutral-100); }
.sig { width: 104px; height: 38px; color: var(--navy); }
.sig path { stroke-dasharray: 260; stroke-dashoffset: 0; animation: draw 700ms var(--ease-out-quart) 4.3s both; }
@keyframes draw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
.sign-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; background: #e6f7f2; color: #0a6b57; font: 600 12px/1 var(--font-body); animation: popIn 500ms var(--spring) 4.9s both; }
.sign-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
@keyframes popIn { from { opacity: 0; transform: scale(.7); } }
.docs { position: absolute; inset: 0; pointer-events: none; }
.doc {
  position: absolute; width: 190px; padding: 14px 14px 12px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(9,93,126,.12); box-shadow: 0 24px 50px -24px rgba(2,50,63,.5);
  transform-origin: 20% 80%;
}
.doc-kind { display: block; font: 600 13px/1.2 var(--font-body); color: var(--ink); margin-bottom: 10px; }
.doc-lines { display: grid; gap: 6px; margin-bottom: 10px; }
.doc-lines i { display: block; height: 6px; border-radius: 3px; background: var(--neutral-100); }
.doc-lines i:nth-child(2) { width: 82%; } .doc-lines i:nth-child(3) { width: 60%; }
.doc-ok { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-fig); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #0a6b57; }
.doc-ok::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.doc.d1 { right: 30px; top: 0;     transform: rotate(4deg);  animation: fan1 900ms var(--spring) 5.2s both; }
.doc.d2 { right: 0;    top: 165px; transform: rotate(-3deg); animation: fan2 900ms var(--spring) 5.38s both; }
.doc.d3 { right: 46px; top: 318px; transform: rotate(2deg);  animation: fan3 900ms var(--spring) 5.56s both; }
@keyframes fan1 { from { opacity: 0; transform: translate(-160px, 120px) rotate(-6deg) scale(.6); } to { opacity: 1; transform: rotate(4deg); } }
@keyframes fan2 { from { opacity: 0; transform: translate(-200px, -20px) rotate(-6deg) scale(.6); } to { opacity: 1; transform: rotate(-3deg); } }
@keyframes fan3 { from { opacity: 0; transform: translate(-160px, -160px) rotate(-6deg) scale(.6); } to { opacity: 1; transform: rotate(2deg); } }
.sweep { position: absolute; inset: -10%; pointer-events: none; background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-120%); animation: sweep 1.1s var(--ease-out-quart) 6s both; mix-blend-mode: soft-light; }
@keyframes sweep { to { transform: translateX(120%); } }
/* JS present but the sequence not started yet: hold the pieces hidden so nothing flashes */
html:not(.no-home-js) .stage-once:not(.is-playing) .note,
html:not(.no-home-js) .stage-once:not(.is-playing) .doc,
html:not(.no-home-js) .stage-once:not(.is-playing) .sign-pill { opacity: 0; animation: none; }
html:not(.no-home-js) .stage-once:not(.is-playing) .sig path { stroke-dashoffset: 260; animation: none; }
html:not(.no-home-js) .stage-once:not(.is-playing) .sweep { animation: none; }

/* ---------- CHAPTERS ---------- */
.chapter { position: relative; height: 260vh; }
.chapter-short { height: 200vh; }
.chapter-stage { position: sticky; top: 0; height: var(--pin-h); display: grid; align-items: center; background: var(--white); }
.chapter:nth-of-type(odd) .chapter-stage { background: linear-gradient(180deg, #fff, var(--white)); }
.chapter-inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 72px); align-items: center; width: 100%; }
.chapter-copy .proof { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.chapter-copy .proof li {
  position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--neutral-500); text-wrap: pretty;
  transform: translateX(-4px); transition: transform 500ms var(--ease-out-quart), color 500ms ease;
}
.chapter-copy .proof li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; border-radius: 2px; background: var(--green); transition: width 400ms var(--spring); }
.chapter.s1 .proof li[data-i="1"], .chapter.s2 .proof li[data-i="2"], .chapter.s3 .proof li[data-i="3"] { transform: none; color: var(--ink); }
.chapter.s1 .proof li[data-i="1"]::before, .chapter.s2 .proof li[data-i="2"]::before, .chapter.s3 .proof li[data-i="3"]::before { width: 14px; }
.figure { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline; margin: 0 0 26px; padding: 16px 0 0; border-top: 1px solid var(--neutral-200); }
.figure .fig-num { color: var(--neutral-500); transition: color 500ms ease; }
.chapter.s4 .figure .fig-num, html.no-home-js .fig-num { color: var(--navy); }
.fig-num { font-family: var(--font-fig); font-size: clamp(30px, 3vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.fig-text { font-size: 13px; line-height: 1.5; color: var(--neutral-600); max-width: 36ch; }
.chapter-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.plan-from { font-family: var(--font-fig); font-size: 12px; color: var(--neutral-500); }

/* ---------- STAGE · DOS MUNDOS ---------- */
.mundos-inner { display: grid; justify-items: center; }
.stage-worlds { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; width: 100%; max-width: 860px; margin: 34px auto 0; min-height: 250px; }
.world { padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid rgba(9,93,126,.10); box-shadow: 0 30px 60px -32px rgba(2,50,63,.4); transition: transform 900ms var(--ease-out-expo), opacity 700ms ease; }
.world-tag { display: inline-block; margin-bottom: 12px; font-family: var(--font-fig); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.world ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.world li { position: relative; padding-left: 18px; font-size: 14px; color: var(--neutral-800); }
.world li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--green); border-radius: 2px; }
.world-med { transform: translateX(-16%) rotateY(14deg); opacity: 0; }
.world-psi { transform: translateX(16%) rotateY(-14deg); opacity: 0; }
.world-app { display: grid; justify-items: center; gap: 10px; padding: 26px 30px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--teal), var(--green)); box-shadow: 0 30px 70px -24px rgba(9,93,126,.7); transform: scale(.55); opacity: 0; transition: transform 900ms var(--spring), opacity 500ms ease; }
.world-app b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
#mundos.s1 .world-med, #mundos.s1 .world-psi, html.no-home-js .world { transform: none; opacity: 1; }
#mundos.s2 .world-med { transform: translateX(10%) scale(.94); opacity: .55; }
#mundos.s2 .world-psi { transform: translateX(-10%) scale(.94); opacity: .55; }
#mundos.s2 .world-app, html.no-home-js .world-app { transform: none; opacity: 1; }
#mundos .world-switch.big, #mundos .psi-headline { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 700ms var(--spring); }
#mundos.s3 .world-switch.big, #mundos.s3 .psi-headline, html.no-home-js #mundos .world-switch.big, html.no-home-js #mundos .psi-headline { opacity: 1; transform: none; }

/* ---------- STAGE · EN EL BOX ---------- */
.stage-box { width: 100%; max-width: 660px; margin-inline: auto; }
.app-frame {
  position: relative; z-index: 2; border-radius: 20px; background: #fff; border: 1px solid rgba(9,93,126,.12);
  box-shadow: 0 40px 90px -40px rgba(2,50,63,.5), 0 0 0 1px rgba(255,255,255,.7) inset;
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 320ms var(--ease-out-quart);
}
.app-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--neutral-100); font-size: 12px; color: var(--neutral-600); }
.app-title { font-weight: 600; color: var(--ink); margin-right: auto; }
.app-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 600 11px/1 var(--font-body); background: var(--neutral-50); color: var(--neutral-600); transition: opacity 400ms ease; }
.app-pill.rec::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e0524f; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
#box.s3 .app-pill.rec { opacity: .35; }
#box.s3 .app-pill.rec::before { animation: none; background: var(--neutral-400); }
.app-body { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 14px; }
.capture, .draft { border-radius: 14px; border: 1px solid var(--neutral-100); background: #fbfdfd; padding: 14px; }
.cap-label { display: block; font-family: var(--font-fig); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.wave { display: flex; align-items: center; gap: 3px; height: 42px; margin-bottom: 12px; }
.wave i { flex: 1; height: 18%; border-radius: 2px; background: linear-gradient(180deg, var(--green), var(--teal)); opacity: .9; transition: height 500ms ease; }
#box.s1 .wave i { animation: wave 900ms ease-in-out infinite alternate; }
#box.s1 .wave i:nth-child(2n) { animation-duration: 760ms; animation-delay: -200ms; }
#box.s1 .wave i:nth-child(3n) { animation-duration: 1040ms; animation-delay: -420ms; }
#box.s1 .wave i:nth-child(5n) { animation-duration: 640ms; animation-delay: -100ms; }
@keyframes wave { from { height: 14%; } to { height: 100%; } }
#box.s3 .wave i { animation: none; height: 18%; opacity: .45; }
.transcript { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--neutral-700); min-height: 4.6em; }
.redact { display: inline-block; padding: 1px 6px; margin: 0 2px; border-radius: 5px; background: #e6f0f4; color: var(--teal); font-family: var(--font-fig); font-size: 10.5px; }
.shield { display: block; font-family: var(--font-fig); font-size: 9.5px; line-height: 1.4; letter-spacing: .02em; color: var(--neutral-600); }
.draft-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ai-tag { font: 500 10px/1 var(--font-fig); color: var(--green); }
.soap { display: grid; gap: 9px; margin-bottom: 12px; }
.soap-row { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px; }
.soap-row b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #e6f0f4; color: var(--teal); font: 700 10px/1 var(--font-fig); }
.soap .bar { display: block; height: 8px; width: 0; border-radius: 4px; background: linear-gradient(90deg, #d5e6ec, #c3dbe4); transition: width 800ms var(--ease-out-quart); }
#box.s2 .b1, html.no-home-js .b1 { width: 94%; }
#box.s2 .b2, html.no-home-js .b2 { width: 68%; transition-delay: 120ms; }
#box.s2 .b3, html.no-home-js .b3 { width: 82%; transition-delay: 240ms; }
#box.s2 .b4, html.no-home-js .b4 { width: 56%; transition-delay: 360ms; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font: 600 11px/1 var(--font-body); border: 1px solid transparent; opacity: 0; transform: scale(.85) translateY(4px); transition: opacity 400ms ease, transform 500ms var(--spring); }
.chip.dx { background: #e6f0f4; color: var(--teal); }
.chip.rx { background: #e6f7f2; color: #0a6b57; }
#box.s2 .chip, html.no-home-js .chip { opacity: 1; transform: none; }
#box.s2 .chip.rx { transition-delay: 160ms; }
.verify { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 600 12px/1.3 var(--font-body); color: #0a6b57; opacity: 0; transform: translateY(6px); transition: opacity 400ms ease, transform 500ms var(--ease-out-quart); }
.verify svg { width: 18px; height: 18px; flex: none; color: var(--green); }
.verify .tick { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 500ms var(--ease-out-quart) 200ms; }
#box.s3 .verify, html.no-home-js .verify { opacity: 1; transform: none; }
#box.s3 .verify .tick, html.no-home-js .verify .tick { stroke-dashoffset: 0; }
.sign-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 36px; border-radius: 10px; background: #e9eef1; color: var(--neutral-600); font: 600 12px/1 var(--font-body); transition: background 400ms ease, color 400ms ease, box-shadow 400ms ease; }
#box.s3 .sign-btn, html.no-home-js .sign-btn { background: var(--teal); color: #fff; box-shadow: 0 10px 24px -10px rgba(9,93,126,.7); animation: pulse 1.6s ease-in-out 2; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(9,93,126,.14); } }
.docs-out { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; pointer-events: none; z-index: 1; }
.doc-card {
  position: absolute; bottom: 0; left: var(--x); width: 29%; padding: 12px 14px; border-radius: 12px; background: #fff;
  border: 1px solid rgba(9,93,126,.12); box-shadow: 0 20px 40px -20px rgba(2,50,63,.45);
  font: 600 12px/1.2 var(--font-body); color: var(--ink); opacity: 0; transform: translateY(-90px) scale(.9);
  transition: transform 900ms var(--spring), opacity 400ms ease;
}
.doc-card::before { content: ''; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--green); margin-bottom: 8px; }
.doc-card.c1 { --x: 3%; --rot: -2deg; } .doc-card.c2 { --x: 35.5%; --rot: 1deg; transition-delay: 110ms; } .doc-card.c3 { --x: 68%; --rot: 2.5deg; transition-delay: 220ms; }
#box.s4 .doc-card, html.no-home-js .doc-card { opacity: 1; transform: translateY(0) rotate(var(--rot)); }
#box .stage-box { padding-bottom: 104px; }
.stage-box figcaption { position: absolute; left: 0; right: 0; bottom: -40px; margin: 0; }

/* ---------- STAGE · ENTRE SESIONES ---------- */
.stage-portal { width: 100%; max-width: 700px; margin-inline: auto; display: grid; grid-template-columns: 330px 1fr; gap: 20px; align-items: start; }
.device {
  --pv: clamp(0, var(--p, 1) / .3, 1);
  position: relative; grid-row: 1 / 3; align-self: center; border-radius: 26px; padding: 12px; background: #0f2731;
  box-shadow: 0 40px 90px -36px rgba(2,50,63,.7), inset 0 0 0 1px rgba(255,255,255,.08);
  transform: perspective(1400px) rotateY(calc(-14deg * (1 - var(--pv)))) translateX(calc(-24px * (1 - var(--pv))));
  opacity: calc(.4 + .6 * var(--pv));
}
.device-screen { position: relative; overflow: hidden; border-radius: 16px; background: #fff; aspect-ratio: 900 / 895; }
.device-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.device-label { display: block; margin-top: 10px; text-align: center; font-family: var(--font-fig); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.tap { position: absolute; left: 67.8%; top: 79%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 2px solid var(--green); opacity: 0; transform: scale(.4); }
#sesiones.s2 .tap { animation: tap 1.5s ease-out 2 both; }
@keyframes tap { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.2); } }
.pill-done { position: absolute; left: 50%; top: 45%; transform: translate(-50%, 8px) scale(.9); padding: 8px 14px; border-radius: 999px; background: var(--navy); color: #fff; font: 600 12px/1 var(--font-body); box-shadow: 0 12px 30px -10px rgba(2,50,63,.8); opacity: 0; transition: opacity 400ms ease, transform 600ms var(--spring); white-space: nowrap; }
#sesiones.s3 .pill-done, html.no-home-js .pill-done { opacity: 1; transform: translate(-50%, 0); }
.briefing { border-radius: 18px; background: #fff; border: 1px solid rgba(9,93,126,.12); box-shadow: 0 30px 70px -34px rgba(2,50,63,.45); padding: 16px 18px; }
.brief-head { display: grid; gap: 4px; margin-bottom: 12px; }
.brief-head strong { font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.brief-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.brief-rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--neutral-100); font-size: 12.5px; color: var(--neutral-600); opacity: 0; transform: translateY(6px); transition: opacity 400ms ease, transform 500ms var(--ease-out-quart); }
.brief-rows li b { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; text-align: right; }
.spark { width: 64px; height: 18px; color: var(--green); }
.spark path { stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 900ms var(--ease-out-quart) 200ms; }
#sesiones.s2 .brief-rows li[data-i="1"], #sesiones.s3 .brief-rows li[data-i="2"], #sesiones.s3 .brief-rows li[data-i="3"], #sesiones.s4 .brief-rows li[data-i="4"], #sesiones.s4 .brief-rows li[data-i="5"], html.no-home-js .brief-rows li { opacity: 1; transform: none; }
#sesiones.s3 .brief-rows li[data-i="3"] { transition-delay: 120ms; }
#sesiones.s4 .brief-rows li[data-i="5"] { transition-delay: 120ms; }
#sesiones.s3 .spark path, html.no-home-js .spark path { stroke-dashoffset: 0; }
.brief-foot { margin: 12px 0 0; font-size: 12px; color: var(--neutral-500); }
.msg { display: grid; gap: 8px; justify-items: start; }
.bubble { max-width: 92%; padding: 10px 14px; border-radius: 16px; font-size: 12.5px; line-height: 1.45; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity 400ms ease, transform 600ms var(--spring); }
.bubble.in { background: #fff; border: 1px solid rgba(9,93,126,.12); color: var(--ink); border-bottom-left-radius: 6px; }
.bubble.out { background: var(--teal); color: #fff; justify-self: end; border-bottom-right-radius: 6px; }
#sesiones.s5 .bubble, html.no-home-js .bubble { opacity: 1; transform: none; }
#sesiones.s5 .bubble.out { transition-delay: 380ms; }
.msg-note { font-family: var(--font-fig); font-size: 10px; letter-spacing: .04em; color: var(--neutral-500); opacity: 0; transition: opacity 400ms ease 700ms; }
#sesiones.s5 .msg-note, html.no-home-js .msg-note { opacity: 1; }
.stage-portal figcaption { grid-column: 1 / -1; }

/* ---------- STAGE · ENTRE COLEGAS ---------- */
.stage-network { width: 100%; max-width: 660px; margin-inline: auto; }
.net { position: relative; height: 400px; }
.node { position: absolute; top: 0; width: 132px; display: grid; justify-items: center; gap: 4px; padding: 14px 10px; border-radius: 16px; background: #fff; border: 1px solid rgba(9,93,126,.12); box-shadow: 0 24px 50px -28px rgba(2,50,63,.45); text-align: center; transition: box-shadow 500ms ease, border-color 500ms ease; }
.node.me { left: 0; } .node.them { right: 0; }
.node b { font-size: 12.5px; color: var(--ink); } .node small { font-family: var(--font-fig); font-size: 10px; color: var(--neutral-500); }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e6f0f4; color: var(--teal); font: 700 13px/1 var(--font-body); }
#colegas.s4 .node.them, html.no-home-js .node.them { border-color: var(--green); box-shadow: 0 0 0 4px rgba(20,150,127,.14), 0 24px 50px -28px rgba(2,50,63,.45); }
.net-path { position: absolute; left: 132px; top: 40px; width: calc(100% - 264px); height: 40px; color: var(--neutral-300); }
#colegas.s3 .net-path path { animation: dash 1s linear infinite; color: var(--green); }
@keyframes dash { to { stroke-dashoffset: -28; } }
.consent { position: absolute; left: 0; top: 126px; display: flex; align-items: center; gap: 10px; max-width: 250px; font-size: 12px; line-height: 1.35; color: var(--neutral-600); }
.toggle { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--neutral-300); transition: background 400ms ease; }
.toggle i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 500ms var(--spring); }
#colegas.s1 .toggle, html.no-home-js .toggle { background: var(--green); }
#colegas.s1 .toggle i, html.no-home-js .toggle i { transform: translateX(16px); }
.summary {
  --t: clamp(0, (var(--p, 1) - .5) / .22, 1);
  position: absolute; top: 170px; width: 240px; padding: 12px 14px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(9,93,126,.14); box-shadow: 0 24px 50px -24px rgba(2,50,63,.5);
  left: calc(var(--t) * (100% - 240px));
  transform: translateY(calc(50px - (var(--t) - .5) * (var(--t) - .5) * 200px)) scale(calc(1 - var(--t) * .06));
  opacity: 0; transition: opacity 500ms ease;
}
#colegas.s2 .summary, html.no-home-js .summary { opacity: 1; }
.sum-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 600 12px/1.3 var(--font-body); color: var(--ink); }
.lock { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 999px; background: #e6f7f2; color: #0a6b57; font: 600 9.5px/1 var(--font-fig); white-space: nowrap; }
.lock::before { content: ''; width: 6px; height: 7px; border: 1.5px solid currentColor; border-radius: 2px 2px 1px 1px; }
.sum-row { display: grid; grid-template-columns: 76px 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid var(--neutral-100); font-size: 11px; color: var(--neutral-500); }
.sum-row b { color: var(--ink); font-weight: 500; }
.redact-anim { display: inline-grid; } .redact-anim > span { grid-area: 1 / 1; transition: opacity 400ms ease 500ms; }
.redact-anim .now { opacity: 0; color: var(--neutral-400); letter-spacing: -.1em; }
#colegas.s2 .redact-anim .was, html.no-home-js .redact-anim .was { opacity: 0; }
#colegas.s2 .redact-anim .now, html.no-home-js .redact-anim .now { opacity: 1; }
.return {
  --r: clamp(0, (var(--p, 1) - .88) / .12, 1);
  position: absolute; top: 186px; left: calc((1 - var(--r)) * (100% - 220px)); width: 220px; padding: 10px 14px; border-radius: 12px;
  background: var(--navy); color: #fff; font: 600 12px/1.3 var(--font-body); box-shadow: 0 20px 40px -18px rgba(2,50,63,.8);
  opacity: 0; transition: opacity 400ms ease;
}
.return::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 8px; vertical-align: 1px; }
#colegas.s5 .return, html.no-home-js .return { opacity: 1; }
.log { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.log li { display: flex; gap: 12px; align-items: baseline; font-size: 12px; color: var(--neutral-600); opacity: 0; transform: translateX(-6px); transition: opacity 400ms ease, transform 500ms var(--ease-out-quart); }
.log time { font-family: var(--font-fig); font-size: 10.5px; color: var(--neutral-400); min-width: 58px; }
#colegas.s1 .log li[data-i="1"], #colegas.s3 .log li[data-i="2"], #colegas.s4 .log li[data-i="3"], #colegas.s5 .log li[data-i="4"], html.no-home-js .log li { opacity: 1; transform: none; }

/* ---------- EL CICLO (ring) ---------- */
.section-ring { padding: clamp(80px, 9vw, 130px) 0; background: #fff; border-top: 1px solid var(--neutral-100); }
.ring-layout { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(28px, 4vw, 48px); }
.ring-wrap { position: relative; aspect-ratio: 1; }
.ring { width: 100%; height: 100%; display: block; }
.ring-track { fill: none; stroke: var(--neutral-100); stroke-width: 14; }
.ring-arc { fill: none; stroke: url(#ring-grad); stroke: var(--teal); stroke-width: 14; stroke-linecap: butt; stroke-dasharray: 212.06 848.23; }
.ring-arc.a1 { --a: clamp(0, (var(--p, 1) - .34) / .08, 1); stroke-dashoffset: calc(212.06px * (1 - var(--a))); }
.ring-arc.a2 { --a: clamp(0, (var(--p, 1) - .42) / .08, 1); stroke-dashoffset: calc(212.06px * (1 - var(--a))); stroke: #0b7291; }
.ring-arc.a3 { --a: clamp(0, (var(--p, 1) - .50) / .08, 1); stroke-dashoffset: calc(212.06px * (1 - var(--a))); stroke: #108a84; }
.ring-arc.a4 { --a: clamp(0, (var(--p, 1) - .58) / .08, 1); stroke-dashoffset: calc(212.06px * (1 - var(--a))); stroke: var(--green); }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; }
.ring-center b { font-size: 14px; color: var(--navy); }
/* Each label sits at the midpoint of its own arc (a1 starts at 12 o'clock and
   runs clockwise), 180/400 of the box from the centre: outside the stroke,
   in the corner the square leaves empty. */
.ring-lbl { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-fig); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; text-align: center; color: var(--neutral-500); transition: color 400ms ease; }
.ring-lbl.l1 { left: 82%; top: 18%; }
.ring-lbl.l2 { left: 82%; top: 82%; }
.ring-lbl.l3 { left: 18%; top: 82%; }
.ring-lbl.l4 { left: 18%; top: 18%; max-width: 9ch; }
.ring-layout.s1 .l1, .ring-layout.s2 .l2, .ring-layout.s3 .l3, .ring-layout.s4 .l4, html.no-home-js .ring-lbl { color: var(--teal); }
.moments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; counter-reset: m; }
.moments li { position: relative; padding: 20px 22px 22px; border-radius: 18px; background: var(--white); border: 1px solid var(--neutral-100); opacity: .45; transform: translateY(8px); transition: opacity 500ms ease, transform 600ms var(--ease-out-quart), border-color 500ms ease, box-shadow 500ms ease; }
.moments li::before { counter-increment: m; content: '0' counter(m); display: block; margin-bottom: 8px; font-family: var(--font-fig); font-size: 11px; letter-spacing: .12em; color: var(--green); }
.moments h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--navy); }
.moments p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--neutral-600); text-wrap: pretty; }
.ring-layout.s1 .moments li[data-i="1"], .ring-layout.s2 .moments li[data-i="2"], .ring-layout.s3 .moments li[data-i="3"], .ring-layout.s4 .moments li[data-i="4"], html.no-home-js .moments li { opacity: 1; transform: none; background: #fff; border-color: rgba(9,93,126,.14); box-shadow: 0 20px 50px -30px rgba(2,50,63,.35); }

/* ---------- CONFIANZA + OFERTAS ---------- */
.section-trust { padding: clamp(72px, 8vw, 110px) 0; background: var(--white); border-top: 1px solid var(--neutral-100); }
.trust-grid { list-style: none; margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.trust-grid li { display: grid; gap: 6px; padding: 18px 0 0; border-top: 2px solid var(--teal); }
.trust-grid b { font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--navy); }
.trust-grid span { font-size: 13.5px; line-height: 1.5; color: var(--neutral-600); }
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.offer { padding: 28px 30px; border-radius: 22px; background: #fff; border: 1px solid rgba(9,93,126,.10); box-shadow: 0 30px 60px -40px rgba(2,50,63,.3); }
.offer .kicker { margin-bottom: 12px; }
.offer h3 { margin: 0 0 10px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.03em; color: var(--navy); }
.offer p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--neutral-600); text-wrap: pretty; }
.statement { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 24ch; text-align: center; font-size: clamp(24px, 3vw, 40px); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; color: var(--navy); text-wrap: balance; }

/* ---------- ORIGEN ---------- */
.section-origin { padding: clamp(64px, 7vw, 96px) 0; background: #fff; border-top: 1px solid var(--neutral-100); }
.origin-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.origin-lead { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; color: var(--navy); text-wrap: balance; }
.founders { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.founders li { display: grid; gap: 3px; padding: 14px 0; border-top: 1px solid var(--neutral-200); }
.founders b { font-size: 16px; color: var(--ink); } .founders span { font-size: 13px; color: var(--neutral-500); }
.cross { grid-column: 1 / -1; margin: 12px 0 0; font-size: 15px; color: var(--neutral-600); }
.cross a { color: var(--teal); font-weight: 600; text-decoration: none; }
.cross a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- PRECIOS (markup from styles.css; world-aware) ---------- */
.section-pricing .price-intro .kicker { justify-content: center; }
.section-pricing .world-switch { display: inline-grid; margin: 0 auto var(--space-6); }
.section-pricing .price-intro + .world-switch { position: relative; left: 50%; transform: translateX(-50%); }
.aud-grid-label { display: none; }
html[data-audience="psi"] #planes-psiquiatras, html[data-audience="med"] #planes-psicologos { display: none; }
.plan .price .clp { font-family: var(--font-fig); font-size: 38px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--teal); }
.plan .price .clp.clp-cotizar { font-size: 26px; }

/* ---------- FAQ ---------- */
.section-faq { padding: clamp(72px, 8vw, 110px) 0; background: var(--white); border-top: 1px solid var(--neutral-100); }
.section-faq .faq-intro { position: sticky; top: 96px; }
.section-faq .faq-list p { padding-right: 0; }

/* ---------- CIERRE ---------- */
.final-band { position: relative; padding: clamp(96px, 12vw, 160px) 0; background: var(--navy); color: #fff; text-align: center; isolation: isolate; }
.final-band .kicker { color: var(--secondary-300); justify-content: center; }
.final-band h2 { color: #fff; font-size: clamp(40px, 6vw, 84px); }
.final-band h2 em { font-style: normal; background: linear-gradient(120deg, #7ddbc4, #9dd2e6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.final-lead { margin: 0 auto 32px; max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: rgba(255,255,255,.72); text-wrap: pretty; }
.contact-line { margin: 28px 0 0; font-family: var(--font-fig); font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.5); }
.aurora { position: absolute; inset: -20%; z-index: -1; pointer-events: none; filter: blur(80px); opacity: .55; }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) { width: 46%; height: 60%; left: 4%; top: 10%; background: rgba(20,150,127,.55); animation: drift1 26s ease-in-out infinite; }
.aurora i:nth-child(2) { width: 40%; height: 55%; right: 4%; top: 22%; background: rgba(11,126,165,.5); animation: drift2 30s ease-in-out infinite; }
.aurora i:nth-child(3) { width: 34%; height: 40%; left: 36%; bottom: 0; background: rgba(61,201,168,.35); animation: drift3 34s ease-in-out infinite; }
@keyframes drift1 { 50% { transform: translate(12%, 10%) scale(1.08); } }
@keyframes drift2 { 50% { transform: translate(-10%, 8%) scale(.94); } }
@keyframes drift3 { 50% { transform: translate(8%, -12%) scale(1.05); } }

/* ---------- PHONE DOCK ---------- */
#nv-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; align-items: center; gap: 14px;
  padding: 10px var(--page-gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(248,250,251,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--neutral-100); box-shadow: 0 -10px 30px -20px rgba(2,50,63,.35);
  transform: translateY(110%); transition: transform 420ms var(--ease-out-expo);
}
#nv-dock.is-visible { transform: none; }
.dock-note { font-family: var(--font-fig); font-size: 11px; line-height: 1.35; color: var(--neutral-600); white-space: nowrap; }
.dock-btn { flex: 1; min-height: 48px; }
@media (max-width: 700px) {
  #nv-dock { display: flex; }
  .chapter-stage { padding-bottom: 78px; } /* room for the dock */
  /* The dock carries the register CTA on phones; the per-chapter one would
     push the pinned stage below the fold. No-JS keeps the in-chapter CTA. */
  .chapter-cta { display: none; }
  html.no-home-js .chapter-cta { display: flex; }
  .chapter-inner { gap: 14px; }
  .chapter-copy .kicker { margin-bottom: 10px; }
  .chapter-copy h2 { font-size: clamp(28px, 7.6vw, 36px); margin-bottom: 10px; }
  .chapter-copy .lead { font-size: 15px; margin-bottom: 12px; }
  .chapter-copy .proof { gap: 4px; margin-bottom: 12px; }
  .chapter-copy .proof li { font-size: 13.5px; line-height: 1.4; padding-left: 18px; }
  .figure { gap: 2px 12px; padding-top: 10px; margin-bottom: 8px; }
  .fig-num { font-size: 24px; }
  .fig-text { font-size: 12px; line-height: 1.4; }
}

/* ---------- LAUNCH OVERLAY ---------- */
.nv-launch {
  position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 10px; color: #fff;
  background: radial-gradient(circle at 50% 50%, var(--green), var(--teal) 45%, var(--navy) 85%);
  clip-path: circle(0 at 50% 50%); visibility: hidden;
}
.nv-launch.is-on { visibility: visible; }
.launch-mark { font-size: 34px; font-weight: 700; letter-spacing: -.02em; } .launch-mark em { font-style: normal; color: #7ddbc4; }
.launch-sub { font-family: var(--font-fig); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1280px) { :root { --stage-zoom: .9; } }
@media (max-width: 1100px) { .stage-portal { grid-template-columns: 290px 1fr; } }
@media (max-width: 1000px) {
  /* Not a typo: below 1000px the chapter is one column, so the stage gets the
     full width back and can be larger than in the two-column 1000–1280 band. */
  :root { --stage-zoom: .95; }
  .hero { min-height: 0; padding-top: 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  /* Stacked: the stage sits under the copy, so the exit fade (keyed to the
     hero's top edge) would dim it before anyone reaches it. */
  .hero .stage-once { transform: none; opacity: 1; }
  .hero-copy { max-width: 680px; }
  .chapter-inner { grid-template-columns: 1fr; gap: 22px; align-content: center; }
  .chapter-copy .lead { margin-bottom: 16px; }
  .chapter-copy .proof { margin-bottom: 16px; gap: 6px; }
  .chapter-copy .proof li { font-size: 14px; }
  .figure { margin-bottom: 18px; padding-top: 12px; }
  .ring-layout { grid-template-columns: 1fr; }
  .ring-wrap { max-width: 360px; margin: 0 auto; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .origin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --stage-zoom: .78; }
  .chapter-copy h2 { font-size: clamp(30px, 8vw, 40px); }
  .offers, .moments, .trust-grid { grid-template-columns: 1fr; }
  .stage-worlds { grid-template-columns: 1fr 1fr; gap: 12px; }
  .world { padding: 18px; }
  .world-app { grid-column: 1 / -1; order: 3; justify-self: center; }
  #mundos.s2 .world-med, #mundos.s2 .world-psi { transform: scale(.94); }
  .stage-portal { grid-template-columns: 1fr; }
  .device { grid-row: auto; max-width: 320px; margin-inline: auto; }
  .app-body { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --stage-zoom: .62; }
  .hero h1 { font-size: clamp(40px, 11vw, 52px); }
  .hero .kicker { font-size: 12px; }
  .cta-row > span { flex-direction: column; align-items: stretch; }
  .btn-hero, .btn-chapter { width: 100%; }
  .chapter-cta { flex-direction: column; align-items: stretch; }
  .world-switch { width: 100%; }
  .world-switch.big button { padding-inline: 12px; font-size: 14px; }
  .final-band h2 { font-size: clamp(34px, 10vw, 48px); }
}
@media (max-width: 420px) { :root { --stage-zoom: .5; } .hero { padding-bottom: 40px; } }
/* Short desktop viewports (1366×768 class): keep the pinned copy compact. */
@media (max-height: 800px) and (min-width: 1001px) {
  .chapter-copy h2 { font-size: clamp(30px, 3.4vw, 44px); }
  .chapter-copy .lead { margin-bottom: 16px; font-size: 16px; }
  .chapter-copy .proof { gap: 6px; margin-bottom: 16px; }
  .figure { margin-bottom: 18px; }
  :root { --stage-zoom: .86; }
}

/* ---------- TOUCH: chapters unpin and play on a clock ----------
   Flick-scrolling scrubs a pinned scene to its end before it is seen, so on
   hover-less coarse pointers (phones, tablets) each chapter is a normal
   full-height section whose timeline home.js plays once it enters view. */
@media (hover: none) and (pointer: coarse) {
  .chapter, .chapter-short { height: auto; }
  .chapter-stage { position: relative; height: auto; min-height: var(--pin-h); padding-top: 24px; }
}

/* ---------- MOTION OFF / NO JS ---------- */
@media (prefers-reduced-motion: reduce) {
  .chapter, .chapter-short { height: auto; }
  .chapter-stage { position: relative; height: auto; padding: clamp(64px, 8vw, 104px) 0; }
  [data-scene] { --p: 1; }
  .swap > [data-aud] { transition: none; }
  .hero .stage-once { transform: none; opacity: 1; }
  .wave i { height: 40%; }
}
html.no-home-js .chapter, html.no-home-js .chapter-short { height: auto; }
html.no-home-js .chapter-stage { position: relative; height: auto; padding: clamp(64px, 8vw, 104px) 0; }
html.no-home-js [data-scene] { --p: 1; }
html.no-home-js .hero .stage-once { transform: none; opacity: 1; }
html.no-home-js .chapter-copy .proof li { transform: none; color: var(--ink); }
html.no-home-js #nv-dock { display: none; }
@media (prefers-contrast: more) {
  .chapter-copy .proof li, .fig-num { color: var(--ink); }
  .moments li, .brief-rows li, .log li, .chip, .verify, .bubble, .summary, .return, .doc-card, .world, .world-app { opacity: 1; }
}

/* Footer headings keep their look but follow the page's heading order. */
.foot-col h3 { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--neutral-400); margin: 0 0 var(--space-4); }