:root{
  --bg:#f4f6f7; --ink:#06080d; --muted:#5d6670; --accent:#3fc5dc;
  --radius:18px; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.topbar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(16px,4vw,48px);backdrop-filter:blur(8px);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.brand{font-weight:800;letter-spacing:.08em;text-decoration:none}
.brand span{color:var(--accent);font-weight:600}
.topbar nav{display:flex;gap:14px;align-items:center;font-size:14px}
.topbar nav a{text-decoration:none;color:var(--muted)}
.topbar nav a:hover{color:var(--ink)}
.pill{font:inherit;font-size:13px;border:1px solid #cfd5da;background:#fff;border-radius:99px;padding:6px 12px;cursor:pointer}
.pill[aria-pressed="false"]{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:640px){.topbar nav a{display:none}}

/* El vídeo tiene fondo blanco de estudio: multiply hace que el blanco "desaparezca" sobre un fondo claro */
.stage{position:relative;margin:0;aspect-ratio:1/1}
.stage video{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;
  -webkit-user-select:none;user-select:none}
.stage-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.hero{min-height:100svh;background:var(--bg);display:grid;grid-template-columns:1fr minmax(280px,min(46vw,78svh));align-items:center;
  gap:clamp(16px,4vw,64px);padding:90px clamp(16px,6vw,96px) 40px;touch-action:pan-y}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--muted);margin:0 0 12px}
h1{font-size:clamp(44px,7.5vw,112px);line-height:.92;letter-spacing:-.04em;margin:0 0 20px}
.lead{font-size:clamp(16px,1.4vw,20px);line-height:1.5;color:var(--muted);max-width:34ch}
.cta{display:inline-block;margin-top:12px;background:var(--ink);color:#fff;text-decoration:none;padding:12px 20px;border-radius:99px}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:80px}
  .hero-copy{order:2}.lead{margin-inline:auto}
  .stage--look{order:1;width:min(88vw,52svh);margin-inline:auto}
}

.lift{height:420vh;position:relative}
.lift-sticky{position:sticky;top:0;height:100svh;background:var(--bg);display:grid;place-items:center;overflow:hidden}
.stage--lift{aspect-ratio:16/9;width:min(100vw,calc((100svh - 64px)*16/9));height:auto;margin-top:48px}
@media (max-aspect-ratio:1/1){.stage--lift{width:180vw}} /* en móvil vertical, recorte lateral */
.captions{position:absolute;left:clamp(16px,6vw,96px);bottom:12svh;max-width:min(520px,80vw)}
.caption{position:absolute;bottom:0;margin:0;font-size:clamp(26px,4vw,56px);font-weight:800;letter-spacing:-.03em;
  opacity:0;transform:translateY(16px);transition:opacity .35s,transform .35s;white-space:nowrap}
.caption.is-on{opacity:1;transform:none}
.progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#e2e6e9}
.progress span{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}

.explain{max-width:760px;margin:0 auto;padding:12vh 24px 16vh;line-height:1.6}
.explain h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.03em}
.explain li{margin-bottom:10px}
.note{color:var(--muted);font-size:14px}
code{background:#e7ecef;padding:1px 6px;border-radius:6px;font-size:.9em}

/* Movimiento reducido: sin transiciones; los textos del scroll se ven todos */
.reduced .caption{transition:none}
.reduced .lift{height:auto}
.reduced .lift-sticky{position:relative;height:auto;padding:12vh 0}
.reduced .captions{position:static;margin:24px auto 0;padding:0 24px}
.reduced .caption{position:static;opacity:1;transform:none;white-space:normal;font-size:clamp(20px,3vw,32px)}
.reduced .progress{display:none}

/* Panel de calibración */
.calib{position:fixed;right:16px;bottom:16px;z-index:50;width:min(380px,calc(100vw - 32px));max-height:80vh;overflow:auto;
  background:#fff;border:1px solid #d6dce0;border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.12);padding:16px;font-size:13px}
.calib h3{margin:0 0 6px;font-size:15px}
.calib p{margin:6px 0;color:var(--muted)}
.calib .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0}
.calib button,.calib select,.calib input[type=number]{font:inherit;padding:6px 10px;border:1px solid #cfd5da;border-radius:10px;background:#fff;cursor:pointer}
.calib input[type=number]{width:70px}
.calib button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.calib input[type=range]{width:100%}
.calib table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.calib td,.calib th{border-bottom:1px solid #eef1f3;padding:3px 4px;text-align:left}
.calibrating .stage--look{cursor:crosshair}
.calibrating .stage--look .stage-overlay{pointer-events:auto}

/* ---------- Tema oscuro (versión J: vídeos con fondo negro de estudio) ----------
   Aquí NO usamos multiply (sobre negro lo oscurecería todo): el fondo de página iguala el negro del vídeo
   y una máscara suave difumina los bordes del encuadre para que no se vea el rectángulo. */
.theme-dark{--bg:#0b0b0b;--ink:#f1f3f4;--muted:#9aa4ad;--accent:#7fe3c8}
.theme-dark .stage video{mix-blend-mode:normal}
.theme-dark .stage--look{aspect-ratio:600/906;width:min(100%,calc(84svh*600/906));justify-self:center;
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 40%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 72% 62% at 50% 40%,#000 62%,transparent 100%)}
.theme-dark .stage--lift{-webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 50%,#000 60%,transparent 100%);
          mask-image:radial-gradient(ellipse 62% 70% at 50% 50%,#000 60%,transparent 100%)}
.theme-dark.calibrating .stage--look,.theme-dark[data-debug] .stage--look{-webkit-mask-image:none;mask-image:none}
.theme-dark .cta{color:#0b0b0b}
@media (max-width:820px){.theme-dark .stage--look{width:min(72vw,calc(54svh*600/906))}}
.topbar nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.theme-dark .calib{--ink:#06080d;--muted:#5d6670;color:#06080d}

/* ---- Secciones de ejercicios (entrena con J) ---- */
.lift--ex{height:330vh}
.ex-head{position:absolute;top:calc(64px + 4svh);left:clamp(16px,6vw,96px);max-width:min(560px,86vw);z-index:2}
.ex-head .eyebrow{margin-bottom:8px}
.ex-title{margin:0;font-size:clamp(30px,4.6vw,64px);font-weight:800;letter-spacing:-.035em;line-height:.98}
.lift--ex .caption{font-size:clamp(20px,2.6vw,36px)}
.theme-dark .progress{background:#1d2226}
.reduced .lift--ex .ex-head{position:static;margin:0 auto 24px;padding:0 24px}
@media (max-width:820px){ .ex-head{top:calc(56px + 2svh)} }
@media (max-aspect-ratio:1/1){ .lift--ex .stage--lift{width:100vw} }
.ex-title{font-size:clamp(28px,3.6vw,52px)}
.ex-head--right{left:auto;right:clamp(16px,6vw,96px);text-align:right}
@media (max-aspect-ratio:1/1){ .ex-head--right{right:auto;left:clamp(16px,6vw,96px);text-align:left} }
.ex-head--low-right{top:auto;bottom:30svh;left:auto;right:clamp(16px,6vw,96px);text-align:right}
.captions--right{left:auto;right:clamp(16px,6vw,96px);text-align:right}
.captions--right .caption{right:0}
@media (max-aspect-ratio:1/1){
  .ex-head--low-right{top:calc(56px + 2svh);bottom:auto;right:auto;left:clamp(16px,6vw,96px);text-align:left}
  .captions--right{right:auto;left:clamp(16px,6vw,96px);text-align:left}
  .captions--right .caption{right:auto}
}
.reduced .captions--right,.reduced .ex-head--low-right{text-align:left}
.ex-head--low-left{top:auto;bottom:30svh}
@media (max-aspect-ratio:1/1){ .ex-head--low-left{top:calc(56px + 2svh);bottom:auto} }
.ex-head--low-left{max-width:min(400px,86vw)}
.reduced .lift--ex .ex-head{order:-1;max-width:none;width:min(1100px,100%);text-align:left}
.reduced .lift--ex .captions{width:min(1100px,100%)}
.reduced .lift--ex .caption{font-size:clamp(18px,2.2vw,26px)}