/* Define Tu Cuerpo · para Daniel · the story.
   His world: the gym at night. Night ground, chalk type, one accent: the orange of his reel text (#F18012).
   Barlow Condensed (titles, stats, cards: close to his reel text) and Inter (text, the face of his site): fonts.css.
   html.st-on   = the experience (story.js running).
   html.st-flat = ?rm=1, the flat mode: the readable document with end states and the one live phone.
   Without either, the page is a readable static document (no JS, or a script failed to load). */

:root {
  --night: #0F1113;
  --slate: #181B1E;
  --iron: #2A2F34;
  --chalk: #F2EFE9;
  --mute: #A8A49C;
  --veil: rgba(15, 17, 19, .72);
  --orange: #F18012;
  --night-rgb: 15, 17, 19;
  --hair: rgba(242, 239, 233, .1);
  --f-d: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --f-t: "Inter", Arial, Helvetica, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --gut: 16px;
  --S: 100vh;
  --LH: 100vh;
  color-scheme: dark;
}
@supports (height: 100svh) { :root { --S: 100svh; --LH: 100lvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color: var(--chalk); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--night); color: var(--chalk);
  font: 500 17px/1.35 var(--f-t);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
p, h1, h2, h3, ol, ul, li, figure, blockquote { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }
ol, ul { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
b { font-weight: 700; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.probe { position: fixed; top: 0; left: 0; width: 0; visibility: hidden; pointer-events: none; }
#vh-s { height: 100vh; height: 100svh; }
#vh-l { height: 100vh; height: 100lvh; }
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 1000; padding: 10px 14px; border-radius: 12px;
  background: var(--chalk); color: var(--night); font: 600 15px/1.2 var(--f-t); text-decoration: none;
  transform: translateY(calc(-100% - 90px));
}
.skip:focus-visible { transform: none; }
.sr-story { display: none; }
html.st-on .sr-story { display: block; }
#end { height: 1px; }
.or { color: var(--orange); }

/* ---------------------------------------------------------------------------------------------- type roles (SPEC 3) */
.t-over { font: 700 14px/1.2 var(--f-d); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.t-h1 { font: 800 46px/.98 var(--f-d); letter-spacing: -.01em; }
.t-h2 { font: 800 34px/1.02 var(--f-d); letter-spacing: -.005em; }
.t-key { font: 800 40px/1 var(--f-d); letter-spacing: -.01em; }
.t-lead { font: 700 26px/1.1 var(--f-d); }
.t-stat { font: 800 56px/1 var(--f-d); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.t-num { font: 800 30px/1 var(--f-d); font-variant-numeric: tabular-nums; }
.t-label { font: 500 15px/1.3 var(--f-t); color: var(--mute); }
.t-card { font: 600 26px/1.12 var(--f-d); }
.t-row { font: 500 17px/1.35 var(--f-t); }
.t-body { font: 500 17px/1.35 var(--f-t); }
.t-quote { font: 600 26px/1.15 var(--f-d); }
.t-small { font: 500 12px/1.3 var(--f-t); letter-spacing: .02em; color: var(--mute); }
html.st-desk .t-over { font-size: 16px; }
html.st-desk .t-h1 { font-size: 92px; }
html.st-desk .t-h2 { font-size: 64px; }
html.st-desk .t-key { font-size: 84px; }
html.st-desk .t-lead { font-size: 38px; }
html.st-desk .t-stat { font-size: 96px; }
html.st-desk .t-num { font-size: 44px; }
html.st-desk .t-label { font-size: 17px; }
html.st-desk .t-card { font-size: 34px; }
html.st-desk .t-row, html.st-desk .t-body { font-size: 21px; }
html.st-desk .t-quote { font-size: 36px; }
html.st-desk .t-small { font-size: 13px; }
/* an exercise card (his carousel format): slate, radius 18 */
.cd { background: var(--slate); border-radius: 18px; padding: 14px 18px 15px; box-shadow: inset 0 0 0 1px rgba(242, 239, 233, .06), 0 24px 48px -28px rgba(0, 0, 0, .9); }
html.st-desk .cd { padding: 18px 22px 19px; }

/* ---------------------------------------------------------------------------------------------- light and grain */
/* static chalk specks (.035), never animated, no blend mode */
.grain {
  position: fixed; inset: 0; z-index: 800; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .95  0 0 0 0 .94  0 0 0 0 .91  0 0 0 1.4 -.4'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
/* a cool top light on the gym night */
.light { display: none; }
html.st-on .light {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 60% at 50% -12%, rgba(176, 196, 222, .10) 0, rgba(176, 196, 222, .04) 45%, rgba(176, 196, 222, 0) 72%);
}

/* ============================================================================================== experience */
html.js:not(.st-on):not(.st-fail):not(.st-flat) #story,
html.js:not(.st-on):not(.st-fail):not(.st-flat) #dock { visibility: hidden; }
html.st-boot *, html.st-boot *::before, html.st-boot *::after { transition: none !important; }
html.st-on #run { position: relative; height: calc(var(--runL, 3860vh) + var(--LH)); }
html.st-on #end { position: absolute; left: 0; bottom: 0; width: 1px; }
html.st-on #stage {
  position: -webkit-sticky; position: sticky; top: 0;
  height: 100vh; height: var(--LH);
  overflow: hidden; overflow: clip;
  background: var(--night);
}
/* a chapter is a scene of the stage: no stacking context of its own; every block is placed by story.js (left, top,
   width at layout time; transform, opacity, clip-path per frame) */
html.st-on .sc { position: absolute; left: 0; top: 0; width: 100%; height: var(--LH); visibility: hidden; pointer-events: none; }
html.st-on .sc > * { position: absolute; left: 0; top: 0; z-index: 20; }
html.st-on .s1hero { display: none; }
html.st-on .sc.is-on [data-id] { will-change: transform, opacity; }

/* ---------------------------------------------------------------------------------------------- media frames */
.mb__i, .mb__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.mb__i { color: transparent; font-size: 0; }
.mb__v { z-index: 1; opacity: 0; transition: opacity .3s linear; }
.mb__v.on { opacity: 1; }

/* the backdrops (his wide loops, veiled 72%): never upscaled past 1.3x, the edges fall into the night */
.bg { display: none; }
html.st-on .bg {
  display: block; position: absolute; left: 0; top: 0; z-index: 1; overflow: hidden; pointer-events: none; visibility: hidden; opacity: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, .5) 80%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, .5) 80%, transparent 100%);
}
.bg__veil { position: absolute; inset: 0; z-index: 2; background: var(--veil); }

/* ---------------------------------------------------------------------------------------------- 1 · Guarda y comparte */
.hero { display: none; }
html.st-on .hero { display: block; position: absolute; left: 0; top: 0; z-index: 2; overflow: hidden; transform-origin: 0 0; visibility: hidden; pointer-events: none; background: var(--slate); }
html.st-on .sc-1.is-on ~ .hero, html.st-on .hero.is-on { will-change: transform, opacity; }
/* phones: the bottom veil rides up with the type (story.js moves it) */
.hero__veil {
  position: absolute; left: 0; right: 0; top: 0; height: 300%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 0, rgba(var(--night-rgb), .55) 90px, rgba(var(--night-rgb), .86) 170px, rgba(var(--night-rgb), .94) 260px, rgba(var(--night-rgb), .96) 100%);
}
html.st-desk .hero__veil { display: none; }
html.st-on.st-desk .hero { box-shadow: 0 0 0 1px rgba(242, 239, 233, .06); }
.cnt { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; row-gap: 14px; align-items: center; }
.cnt__r { display: contents; }
.cnt__r .t-stat, .cnt__r .t-body { display: block; }
.cnt__r .t-body { text-wrap: balance; }
html.st-desk .cnt { column-gap: 28px; row-gap: 24px; }
/* a thin top shade under the saves (T1) */
.hero__top { position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(var(--night-rgb), .55), rgba(var(--night-rgb), 0)); }
html.st-desk .hero__top { display: none; }
.c1cue { color: var(--chalk); opacity: .8; }

/* the bookmark (our own, never a platform icon): one path family, 7 points (story.js morphs it) */
.bm { display: none; }
html.st-on .bm { display: block; position: absolute; left: 0; top: 0; z-index: 22; overflow: visible; pointer-events: none; transform-origin: 0 0; visibility: hidden; }
.bm__p { fill: var(--orange); fill-opacity: 0; stroke: var(--chalk); stroke-width: .9; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; }
.bm.is-or .bm__p { stroke: var(--orange); }
/* T1: the saves */
.saves { display: none; }
html.st-on .saves { display: block; position: absolute; inset: 0; z-index: 15; pointer-events: none; visibility: hidden; }
.sv { position: absolute; left: 0; top: 0; width: 22px; height: 22px; overflow: visible; transform-origin: 0 0; opacity: 0; }
.sv path { fill: var(--orange); stroke: var(--orange); stroke-width: 1.4; stroke-linejoin: round; }
.sv--p1 path { fill: rgba(241, 128, 18, .55); stroke: none; }
.sv--p2 path { fill: none; stroke: rgba(242, 239, 233, .5); stroke-width: 1.6; }

/* ---------------------------------------------------------------------------------------------- 2 · Lo que ya tienes */
.c2h span { display: block; }
.band { display: none; }
html.st-on .band { display: block; z-index: 18; overflow: visible; pointer-events: none; }
.band__p { fill: none; stroke: rgba(241, 128, 18, .7); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.band__hl { fill: none; stroke: rgba(255, 226, 194, .16); stroke-width: 2; stroke-linecap: round; }
.band__sh { fill: none; stroke: url(#band-sh); stroke: rgba(255, 236, 214, .85); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .1 1.3; opacity: 0; }
.band__a { fill: var(--iron); stroke: rgba(242, 239, 233, .25); stroke-width: 1; }
.kit { background: var(--slate); border-radius: 18px; padding: 4px 16px; box-shadow: inset 0 0 0 1px rgba(242, 239, 233, .06), 0 24px 48px -28px rgba(0, 0, 0, .9); }
.kit__r { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 13px 0; }
.kit__r + .kit__r { border-top: 1px solid var(--iron); }
.kit__r .t-num { display: block; color: var(--chalk); white-space: nowrap; }
.kit__r .t-label { display: block; }
html.st-desk .kit { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 40px; column-gap: 72px; }
html.st-desk .kit__r { grid-template-columns: 1fr; row-gap: 12px; padding: 30px 0; align-content: start; }
html.st-desk .kit__r + .kit__r { border-top: 0; }
html.st-desk .kit__r:nth-child(n+3) { border-top: 1px solid var(--iron); }
html.st-desk .kit__r .t-label { max-width: 460px; }

/* ---------------------------------------------------------------------------------------------- 3 · Tu método */
.sls { display: block; }
html.st-on .sls { overflow: visible; z-index: 12; }
html.st-on .sls.is-clip { overflow: hidden; }
.sl { position: relative; overflow: hidden; border-radius: 16px; background: var(--slate); aspect-ratio: 4 / 5; }
html.st-on .sl { position: absolute; left: 0; top: 0; visibility: hidden; }
.sl--ph { background: transparent; }
.sl--ph .mb__i { object-fit: contain; }
.dots { display: none; }
html.st-on .dots { display: flex; gap: 8px; z-index: 14; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--iron); transition: background-color .2s linear, transform .2s var(--ease-out); }
.dots i.on { background: var(--chalk); transform: scale(1.2); }
.sc-3 .cd { text-wrap: balance; }
html.st-desk .sc-3 .cd { font-size: 30px; padding: 16px 18px 17px; }
html.st-desk .sc-3 .ln { display: block; }

/* ---------------------------------------------------------------------------------------------- 4 · ¿Y después? */
.grid { display: none; }
html.st-on .grid { display: block; width: 100%; height: 100%; z-index: 8; }
html.st-on .grid.is-fly { z-index: 21; }
.tl { position: absolute; left: 0; top: 0; overflow: hidden; border-radius: 6px; background: var(--slate); transform-origin: 50% 50%; opacity: 0; }
.tl img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.tl--n { background: var(--slate); box-shadow: inset 0 0 0 1px rgba(242, 239, 233, .05); }
.tl__bm { position: absolute; right: 7px; top: 7px; width: 10px; height: 13px; background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); }
html.st-desk .tl__bm { right: 9px; top: 9px; width: 12px; height: 16px; }
.gveil { display: none; }
html.st-on .gveil {
  display: block; width: 100%; height: 100%; z-index: 9; pointer-events: none; opacity: 0;
  background: linear-gradient(0deg, rgba(var(--night-rgb), .97) 0, rgba(var(--night-rgb), .93) var(--gb, 200px), rgba(var(--night-rgb), 0) calc(var(--gb, 200px) + 130px));
}
html.st-on.st-desk .gveil {
  background: linear-gradient(90deg, rgba(var(--night-rgb), 0) 0, rgba(var(--night-rgb), 0) 56%, rgba(var(--night-rgb), .9) 62%, var(--night) 100%);
}
.key span { display: block; }
.key .or { margin-top: 6px; }
html.st-desk .key .or { margin-top: 10px; }
/* T4: the icon the grid collapses into */
.ic { display: none; }
html.st-on .ic { display: block; position: absolute; left: 0; top: 0; z-index: 16; width: 84px; height: 84px; visibility: hidden; pointer-events: none; transform-origin: 50% 50%; }
.ic__sq { position: absolute; inset: 0; border-radius: 23%; background: var(--night); box-shadow: inset 0 0 0 1.5px var(--iron), 0 18px 40px -16px rgba(0, 0, 0, .9); transform-origin: 50% 50%; }
.ic__bm { position: absolute; left: 30%; top: 16%; width: 40%; height: 48%; overflow: visible; transform-origin: 50% 50%; }
.ic__bm path { fill: var(--orange); stroke: var(--orange); stroke-width: 1.6; stroke-linejoin: round; }
.ic__t { position: absolute; left: 0; right: 0; bottom: 13%; text-align: center; font: 800 15px/1 var(--f-d); letter-spacing: .06em; color: var(--chalk); }

/* ---------------------------------------------------------------------------------------------- 5 · Tu app */
html.st-on .steps { position: static; }
html.st-on .steps > li { position: absolute; left: 0; top: 0; z-index: 20; text-wrap: balance; }
html.st-desk .steps > li { transition: color .25s linear, background-color .25s linear; }
html.st-desk .steps > li.dim { color: var(--mute); background: rgba(24, 27, 30, .55); box-shadow: inset 0 0 0 1px rgba(242, 239, 233, .04); }
html.st-desk .steps > li.act { color: var(--orange); }
.cdots { display: none; }
html.st-on .cdots { display: flex; flex-direction: column; gap: 12px; z-index: 14; }
.cdots i { position: relative; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--iron); }
.cdots i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--orange); transform: scale(var(--f, 0)); }
.ring { display: none; }
html.st-on .ring { display: block; width: 52px; height: 52px; z-index: 14; opacity: 0; }
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring__t { fill: none; stroke: var(--iron); stroke-width: 3; }
.ring__a { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.ring__n { position: absolute; left: 0; right: 0; top: 50%; margin-top: -.5em; text-align: center; font: 700 13px/1 var(--f-d); letter-spacing: .02em; color: var(--chalk); font-variant-numeric: tabular-nums; }
html.st-desk .ring { width: 64px; height: 64px; }
html.st-desk .ring__n { font-size: 15px; }

/* ---------------------------------------------------------------------------------------------- 6 · Tu turno */
.day { display: none; }
html.st-on.st-desk .day { display: block; }
.day__n { font: 800 44px/1 var(--f-d); letter-spacing: -.005em; }
.day__c { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 20px; }
.day__c i { position: relative; height: 10px; border-radius: 3px; background: var(--iron); overflow: hidden; }
.day__c i::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }

/* ---------------------------------------------------------------------------------------------- 4 · 5 · 6 · the phone (graphite titanium) */
html.st-on .phone {
  display: block; position: absolute; left: 0; top: 0; z-index: 13;
  width: var(--cw, 393px); height: var(--chh, 852px); transform-origin: 0 0; pointer-events: none;
}
.phone { --R: 55px; --bz: 11px; --band: 6px; }
html.st-on .phone.ph-off { opacity: 0; visibility: hidden; }
html.st-on .phone.is-anim { will-change: transform, opacity, clip-path; }
html.st-on .phone__screen { pointer-events: auto; }
.phone__frame {
  position: absolute; inset: calc((var(--bz) + var(--band)) * -1);
  border-radius: calc(var(--R) + var(--bz) + var(--band));
  border: var(--band) solid transparent;
  background:
    linear-gradient(#060708, #060708) padding-box,
    linear-gradient(158deg, #4A4F55 0%, #3A3E43 12%, #2B2E31 30%, #353A3F 50%, #2B2E31 68%, #3D4247 86%, #4A4F55 100%) border-box;
  box-shadow: 0 0 0 .6px rgba(0, 0, 0, .8), inset 0 0 0 .6px rgba(255, 255, 255, .06);
  pointer-events: none;
}
.phone__frame::before {
  content: ""; position: absolute; inset: 0; border-radius: calc(var(--R) + var(--bz));
  border: var(--bz) solid #040505; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 .75px rgba(255, 255, 255, .05);
}
.phone__frame::after {
  content: ""; position: absolute; inset: calc(var(--band) * -1); border-radius: inherit; pointer-events: none;
  border-top: 1px solid rgba(214, 226, 240, .28);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 30%, #000 70%, transparent 92%);
  mask-image: linear-gradient(90deg, transparent 8%, #000 30%, #000 70%, transparent 92%);
}
html.st-on .phone::before {
  content: ""; position: absolute; inset: calc((var(--bz) + var(--band)) * -1); border-radius: calc(var(--R) + var(--bz) + var(--band));
  box-shadow: 0 50px 90px -34px rgba(0, 0, 0, .95); pointer-events: none;
}
.pb { position: absolute; width: 5px; border-radius: 2px; background: linear-gradient(90deg, #24272A 0%, #4A4F55 45%, #5A6066 55%, #2B2E31 100%); }
.pb--act { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 122px; height: 32px; }
.pb--vu { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 182px; height: 60px; }
.pb--vd { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 254px; height: 60px; }
.pb--pw { right: calc(0px - var(--bz) - var(--band) - 3.5px); top: 214px; height: 94px; }
.phone__screen { position: absolute; inset: 0; border-radius: var(--R); overflow: hidden; overflow: clip; background: var(--night); transform: translateZ(0); }
#daniel-app { position: absolute; left: 0; top: 0; width: 100%; height: 100%; contain: strict; touch-action: pan-y; }
.phone__glare {
  position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: var(--R);
  background: linear-gradient(118deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .02) 20%, rgba(255, 255, 255, 0) 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.phone__island { position: absolute; top: 11px; left: 50%; z-index: 41; width: 126px; height: 37px; margin-left: -63px; border-radius: 18.5px; background: #000; pointer-events: none; }
.phone__island::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3A4656 0, #121821 38%, #05070A 62%, #000 72%);
}
/* a soft orange bounce under the phone */
.bounce { display: none; }
html.st-on .bounce {
  display: block; position: absolute; left: 0; top: 0; z-index: 3; width: 640px; height: 280px; margin: -140px 0 0 -320px; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(241, 128, 18, .17), rgba(241, 128, 18, .06) 55%, rgba(241, 128, 18, 0));
}
/* the static splash: only when the app is missing */
.phone__fb { display: none; position: absolute; inset: 0; background: var(--night); color: var(--chalk); text-align: center; }
html.st-noapp .phone__fb, html[data-noapp] .phone__fb, html:not(.st-on):not(.st-flat) .phone__fb { display: block; }
html.st-noapp #daniel-app, html[data-noapp] #daniel-app, html:not(.st-on):not(.st-flat) #daniel-app { display: none; }
.fb__ic { position: relative; display: block; width: 96px; height: 96px; margin: 300px auto 0; border-radius: 23%; background: var(--night); box-shadow: inset 0 0 0 1.5px var(--iron); }
.fb__ic svg { position: absolute; left: 30%; top: 16%; width: 40%; height: 48%; overflow: visible; }
.fb__ic path { fill: var(--orange); stroke: var(--orange); stroke-width: 1.6; stroke-linejoin: round; }
.fb__ic b { position: absolute; left: 0; right: 0; bottom: 13%; font: 800 16px/1 var(--f-d); letter-spacing: .06em; }
.fb__w { margin-top: 26px; font: 800 30px/1 var(--f-d); letter-spacing: .02em; }
.fb__s { margin-top: 10px; font: 500 15px/1 var(--f-t); color: var(--mute); }

/* the scroll reminder (chapter 6): story.js places it under the live phone (phones) or beside it (desktop), never on the glass */
.nudge { display: none; }
html.st-on .nudge {
  display: flex; position: absolute; z-index: 27; left: 0; top: 0; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px; border-radius: 24px; background: var(--slate); color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--hair), 0 18px 40px -18px rgba(0, 0, 0, .9); white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity .32s linear, translate .42s var(--ease-out), visibility 0s linear .42s;
}
html.st-on .nudge.on { opacity: 1; visibility: inherit; translate: 0 0; transition: opacity .32s linear, translate .42s var(--ease-out), visibility 0s; }
.nudge__c { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--orange); }
.nudge__c svg { width: 18px; height: 18px; fill: none; stroke: var(--night); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nudge__t { display: flex; flex-direction: column; gap: 1px; }
.nudge__t b { font: 700 16px/1.15 var(--f-d); letter-spacing: .01em; }
.nudge__t span { font: 400 13px/1.25 var(--f-t); color: var(--mute); }
html.st-on:not(.rmos) .nudge.on .nudge__c svg { animation: st-nudge 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes st-nudge { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

/* ---------------------------------------------------------------------------------------------- 7 · Por qué funciona: la ficha */
.fc { display: none; }
html.st-on .fc { display: block; z-index: 18; background: var(--slate); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(242, 239, 233, .06), 0 30px 60px -30px rgba(0, 0, 0, .95); opacity: 0; }
.fc__h { position: absolute; left: 0; top: 0; width: 2px; border-radius: 1px; background: var(--orange); opacity: 0; box-shadow: 0 0 10px 1px rgba(241, 128, 18, .5); }
html.st-on .fcr { position: static; }
html.st-on .fcr > li { position: absolute; left: 0; top: 0; z-index: 20; }
.fr__k { font: 700 1.06em/1 var(--f-d); letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
html.st-on .fr::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--sep, 12px) * -1); height: 1px; background: var(--iron); }
html.st-on .fr.fr--top::before { display: none; }

/* ---------------------------------------------------------------------------------------------- 8 · Los números (quiet) */
.nr b { font-weight: 700; color: var(--chalk); }
.sc-8 .nr { color: rgba(242, 239, 233, .86); }
html.st-on .nr::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 1px; background: var(--iron); }
html.st-on.st-desk .nr::before { top: -20px; }

/* ---------------------------------------------------------------------------------------------- 9 · Escríbenos */
.t-quote { color: var(--chalk); }
.ct { background: var(--slate); border-radius: 22px; padding: 4px 16px; box-shadow: inset 0 0 0 1px rgba(242, 239, 233, .07), 0 30px 60px -30px rgba(0, 0, 0, .95); }
.ct:focus { outline: none; }
.ct__p { padding: 14px 0; }
.ct__p + .ct__p { border-top: 1px solid var(--iron); }
.ct__who { display: flex; align-items: center; gap: 10px; font: 700 18px/1.1 var(--f-d); letter-spacing: .01em; }
.ct__who img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--slate), 0 0 0 2.5px var(--hair); }
.ct__who span { font: 500 13px/1 var(--f-t); color: var(--mute); }
.ct__bs { display: flex; gap: 10px; margin-top: 12px; }
.btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 48px; padding: 0 14px;
  border-radius: 14px; background: var(--orange); color: var(--night); text-decoration: none; font: 700 17px/1 var(--f-d); letter-spacing: .02em;
  transition: transform .14s var(--ease-out); touch-action: manipulation;
}
.btn--2 { background: transparent; color: var(--chalk); box-shadow: inset 0 0 0 1.5px rgba(242, 239, 233, .32); }
.btn:active { transform: scale(.97); }
.btn span { white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.st-on .ct { pointer-events: none; }
html.st-on .ct.live { pointer-events: auto; }
html.st-desk .ct { padding: 8px 26px; border-radius: 24px; }
html.st-desk .ct__p { padding: 22px 0; }
html.st-desk .ct__who { font-size: 22px; gap: 14px; }
html.st-desk .ct__who img { width: 48px; height: 48px; }
html.st-desk .ct__bs { gap: 12px; margin-top: 16px; }
html.st-desk .btn { height: 54px; font-size: 19px; }
.c9s { color: var(--orange); font-weight: 600; }
html.c9-tight:not(.st-desk) .ct__p { padding: 10px 0; }
html.c9-tight:not(.st-desk) .ct__bs { margin-top: 8px; }
html.c9-tight:not(.st-desk) .ct .btn { height: 44px; }

/* ---------------------------------------------------------------------------------------------- the contact pill + sheet */
#dock {
  position: fixed; z-index: 900; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s;
}
#dock.aside { transform: translate3d(0, calc(100% + 16px), 0); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s linear .28s; }
.pill {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 9px;
  border-radius: 24px; background: rgba(24, 27, 30, .96); color: var(--chalk); border: 0;
  box-shadow: inset 0 0 0 1px rgba(242, 239, 233, .14), 0 18px 40px -18px rgba(0, 0, 0, .9);
  font: 700 17px/1 var(--f-d); letter-spacing: .02em; text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: transform .14s var(--ease-out), opacity .2s linear;
}
.pill:active { transform: scale(.96); }
.pill__faces { display: flex; }
.pill__faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--slate); }
.pill__faces img + img { margin-left: -8px; }
#dock.open .pill { opacity: 0; }
/* the autoplay control: bottom left, the contact pill keeps bottom right (as alan) */
#autoplay {
  position: fixed; z-index: 900; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s;
}
html.js:not(.st-on) #autoplay, html.st-flat #autoplay, html.st-fail #autoplay { display: none; }
#autoplay.aside { transform: translate3d(0, calc(100% + 16px), 0); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s linear .28s; }
.auto {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px 0 11px;
  border-radius: 24px; background: rgba(24, 27, 30, .96); color: var(--chalk); border: 0;
  box-shadow: inset 0 0 0 1px rgba(242, 239, 233, .14), 0 18px 40px -18px rgba(0, 0, 0, .9);
  font: 700 17px/1 var(--f-d); letter-spacing: .02em; white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: transform .14s var(--ease-out);
}
.auto:active { transform: scale(.96); }
.auto__i { width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: var(--night); display: grid; place-items: center; flex: none; }
.auto__i svg { width: 10px; height: 10px; fill: currentColor; display: block; }
.auto__i svg[fill="none"] { fill: none; width: 12px; height: 12px; }
.auto__bar { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 1px; background: rgba(242, 239, 233, .14); overflow: hidden; }
.auto__bar i { display: block; width: 100%; height: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }
#autoplay:not(.is-on) .auto__bar { opacity: .55; }
#sheet-scrim { position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, .62); opacity: 0; transition: opacity .22s linear; }
#sheet-scrim.on { opacity: 1; }
#sheet {
  position: fixed; z-index: 960; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  max-width: 480px; margin: 0 auto; max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  padding: 22px 20px 20px; border-radius: 28px; background: var(--slate); color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--hair), 0 30px 80px -24px rgba(0, 0, 0, .9);
  transform: translate3d(0, 112%, 0); transition: transform .4s var(--ease-ios);
}
#sheet.on { transform: none; }
.sheet__grab { width: 38px; height: 5px; border-radius: 3px; background: rgba(242, 239, 233, .18); margin: -8px auto 14px; }
.sheet__x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--chalk); }
.sheet__h { font: 800 32px/1 var(--f-d); letter-spacing: -.005em; padding-right: 44px; }
.sheet__s { margin-top: 8px; font: 400 15px/1.3 var(--f-t); color: var(--mute); }
.who { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--slate), 0 0 0 2.5px var(--hair); }
.who__n { display: flex; flex-direction: column; gap: 3px; }
.who__n b { font: 700 19px/1.1 var(--f-d); letter-spacing: .01em; }
.who__n span { font: 500 13px/1.2 var(--f-t); color: var(--mute); }
.who__b { grid-column: 1 / -1; display: flex; gap: 10px; }

/* ============================================================================================== static document
   (no JS, a script failed to load, or ?rm=1): the same words, the same order, readable, end states. */
html:not(.st-on) #stage { position: static; height: auto; overflow: visible; }
html:not(.st-on) .bg, html:not(.st-on) .hero, html:not(.st-on) .saves, html:not(.st-on) .bm, html:not(.st-on) .band,
html:not(.st-on) .dots, html:not(.st-on) .grid, html:not(.st-on) .gveil, html:not(.st-on) .ic, html:not(.st-on) .cdots,
html:not(.st-on) .ring, html:not(.st-on) .bounce, html:not(.st-on) .nudge, html:not(.st-on) .fc, html:not(.st-on) .light,
html:not(.st-on) .mb__v, html:not(.st-on) .c1cue { display: none; }
html.no-js img[data-src] { display: none; }
html:not(.st-on) .sc { position: relative; padding: 64px var(--gut) 0; max-width: 760px; margin: 0 auto; }
html:not(.st-on) .sc-1 { padding-top: 0; }
html:not(.st-on) .s1hero { position: relative; margin: 0 calc(var(--gut) * -1) 20px; height: min(72vh, 680px); overflow: hidden; }
html:not(.st-on) .s1hero img { width: 100%; height: 100%; object-fit: cover; }
html:not(.st-on) .s1hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 55%, var(--night) 100%); }
html:not(.st-on) .t-over { margin-bottom: 10px; }
html:not(.st-on) .t-h1, html:not(.st-on) .t-h2 { display: block; font-size: clamp(34px, 8vw, 64px); }
html:not(.st-on) .t-h1 { margin-bottom: 18px; }
html:not(.st-on) .c2h, html:not(.st-on) .key { display: block; margin-bottom: 18px; }
html:not(.st-on) .key { margin-top: 28px; }
html:not(.st-on) .cnt { margin: 18px 0; }
html:not(.st-on) .cnt__r { --sw: 128px; }
html:not(.st-on) .t-small { display: block; margin-top: 8px; }
html:not(.st-on) .kit { margin: 18px 0; }
html:not(.st-on) .t-lead { margin-top: 14px; }
html:not(.st-on) .sls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 12px; }
html:not(.st-on) .sc-3 .cd { margin-top: 14px; }
html:not(.st-on) .sc-4 .t-body, html:not(.st-on) .sc-6 .t-body, html:not(.st-on) .sc-7 .t-body { margin-top: 10px; }
html:not(.st-on) .t-key { display: block; }
html:not(.st-on) .steps { display: grid; gap: 12px; margin-top: 18px; }
html:not(.st-on) .sc-6 .t-key { margin-top: 18px; }
html:not(.st-on) .phone { position: relative; width: 393px; height: 852px; margin: 34px 0 calc(852px * -.28 + 10px) calc(50% - 196.5px); transform: scale(.72); transform-origin: 50% 0; }
html:not(.st-on) .phone__screen { border-radius: 55px; }
html:not(.st-on) .fcr { display: grid; gap: 12px; margin-top: 18px; padding: 18px; border-radius: 18px; background: var(--slate); }
html:not(.st-on) .nr { margin-top: 12px; }
html:not(.st-on) .t-quote { margin-bottom: 8px; }
html:not(.st-on) .sc-9 .t-h1 { margin-top: 26px; }
html:not(.st-on) .ct { margin: 22px 0 16px; }
html:not(.st-on) .sc-9 { padding-bottom: 110px; }
@media (min-width: 760px) {
  html:not(.st-on) .sls { grid-template-columns: repeat(4, 1fr); }
  html:not(.st-on) .s1hero { max-width: 420px; margin: 40px auto 24px; border-radius: 18px; aspect-ratio: 9 / 16; height: auto; }
}