:root{
  --ink:#0f1216;--ink2:#181c22;--ink3:#232932;--cream:#FAF8EF;--yellow:#EAD91E;--yellow-d:#9c9112;--code:#9ee6b0;
  --text:#f4f2ec;--muted:#b4b6b4;--line:rgba(244,242,236,.16);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --display:'Baloo 2',system-ui,sans-serif;--body:Manrope,system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --gutter:clamp(20px,5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}
body{background:var(--ink);color:var(--text);font:500 17px/1.55 var(--body);overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.015em}
h2{font-size:clamp(40px,6.4vw,84px)}
em{font-style:normal;color:var(--yellow)}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.eyebrow{font:700 14px/1.3 var(--mono);color:var(--yellow);letter-spacing:.02em;margin-bottom:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;background:var(--yellow);color:#181717;font:800 21px/1 var(--display);text-decoration:none;border-radius:16px;box-shadow:0 6px 0 0 var(--yellow-d);cursor:pointer;transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 0 var(--yellow-d)}
.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--line)}
.btn--ghost:active{transform:scale(.97);box-shadow:inset 0 0 0 2px var(--line)}
.btn--sm{min-height:44px;padding:0 18px;font-size:17px;border-radius:12px;box-shadow:0 4px 0 0 var(--yellow-d)}
@media(hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 0 var(--yellow-d)}.btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--yellow)}}

.nav{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px var(--gutter);background:rgba(15,18,22,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
section[id]{scroll-margin-top:72px}
.brand{display:flex;align-items:center;gap:10px;font:800 21px/1 var(--display);text-decoration:none}
.brand b{color:var(--yellow)}
.brand img{background:var(--cream);border-radius:10px;padding:3px}
.nav nav{display:flex;gap:26px;margin-left:auto}
.nav nav a{font-weight:700;font-size:15px;text-decoration:none;opacity:.85}
.nav nav a:hover{opacity:1;color:var(--yellow)}
@media(max-width:760px){.nav nav,.nav .btn{display:none}.brand{font-size:19px}}

.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;background:#0f1216 url(/lab/media/hero.jpg) center/cover}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,18,22,.9) 0%,rgba(15,18,22,.55) 48%,rgba(15,18,22,.12) 100%),linear-gradient(180deg,rgba(15,18,22,.3) 0%,rgba(15,18,22,0) 50%,#0f1216 100%)}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(234,217,30,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(234,217,30,.07) 1px,transparent 1px);background-size:54px 54px;mask:linear-gradient(90deg,#000,transparent 70%);-webkit-mask:linear-gradient(90deg,#000,transparent 70%)}
.hero__body{position:relative;padding:90px var(--gutter) 40px;max-width:1040px}
.tag{display:inline-block;font:700 15px/1 var(--mono);color:#181717;background:var(--yellow);padding:9px 14px;border-radius:999px}
h1{font-size:clamp(64px,min(12.5vw,17vh),168px);line-height:.88;margin-top:20px}
.term{font:500 clamp(15px,2vw,22px)/1.4 var(--mono);color:var(--code);margin-top:18px;min-height:1.4em}
.prompt{color:var(--yellow)}
.caret{display:inline-block;width:.55em;height:1em;background:var(--code);vertical-align:-.12em;margin-left:3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hero__lead{font-size:clamp(18px,2vw,24px);font-weight:700;line-height:1.35;margin-top:18px;max-width:680px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:30px;font-size:15px;font-weight:700}
.hero__meta b{display:block;font:700 12px/1.6 var(--mono);color:var(--yellow)}

.promise{background:var(--cream);color:#181717;padding:clamp(70px,11vw,150px) var(--gutter)}
.promise__big{font:800 clamp(32px,5.2vw,70px)/1.08 var(--display);letter-spacing:-.015em;max-width:1120px}
.promise__big .w{opacity:.13}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(40px,6vw,76px);border-top:3px solid #181717;padding-top:24px}
.stats dt{font:800 clamp(52px,8vw,104px)/1 var(--display)}
.stats dd{font-weight:800;font-size:16px}
@media(max-width:620px){.stats{grid-template-columns:1fr 1fr}}

/* Efecto firma: el mapa se recorre con el scroll y el jugador gana color en cada mundo */
.map{position:relative;background:#11151b;overflow:hidden}
.map__track{display:flex;flex-direction:column}
.panel{position:relative;padding:60px var(--gutter);display:grid;gap:28px}
.panel--intro h2{margin-bottom:16px}
.panel h3{font-size:clamp(38px,5vw,68px);margin-bottom:18px}
.panel ol{counter-reset:c;display:grid;gap:9px}
.panel li{counter-increment:c;display:flex;gap:12px;font-weight:700;font-size:clamp(16px,1.5vw,19px);line-height:1.3}
.panel li::before{content:counter(c);flex:none;width:27px;height:27px;display:grid;place-items:center;background:var(--ink3);color:var(--yellow);font:700 13px/1 var(--mono);border-radius:7px}
.loot{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:18px;padding:10px 14px;background:var(--yellow);color:#181717;border-radius:12px;font-weight:800;font-size:16px;line-height:1.25}
.loot span{font:700 12px/1 var(--mono)}
.panel__media{border-radius:20px;overflow:hidden;background:var(--ink3);aspect-ratio:16/10;box-shadow:0 0 0 2px var(--line)}
.panel__media video{width:100%;height:100%;object-fit:cover}
.hint{font:700 15px/1 var(--mono);color:var(--yellow);margin-top:20px}
.flag{display:none}
.map__hud,.map__ground,.map__sprite{display:none}

.map.is-pinned{height:100dvh}
.is-pinned .map__track{flex-direction:row;height:100%;width:max-content;will-change:transform}
.is-pinned .panel{flex:none;width:100vw;height:100%;align-content:center;padding:74px var(--gutter) 150px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(24px,4vw,60px)}
.is-pinned .panel--intro{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:100vw}
.is-pinned .flag{display:block;position:absolute;left:calc(100% - 44px);bottom:92px;width:6px;height:62px;background:var(--text)}
.is-pinned .flag::after{content:"";position:absolute;left:6px;top:0;width:36px;height:24px;background:var(--ink3);clip-path:polygon(0 0,100% 50%,0 100%);transition:background 200ms var(--ease-out)}
.panel.is-done .flag::after{background:var(--yellow)}
.is-pinned .map__hud{display:flex;position:absolute;z-index:6;top:70px;left:var(--gutter);right:var(--gutter);align-items:center;gap:14px;font:700 14px/1 var(--mono)}
.hud__lvl b,.hud__xp b{color:var(--yellow)}
.hud__bar{flex:1;height:10px;background:var(--ink3);border-radius:3px;overflow:hidden}
.hud__bar i{display:block;height:100%;width:100%;background:var(--yellow);transform:scaleX(0);transform-origin:left}
.is-pinned .map__ground{display:block;position:absolute;z-index:4;left:0;right:0;bottom:0;height:92px;background:
  repeating-linear-gradient(90deg,#2b3340 0 44px,#242b36 44px 88px) 0 0/88px 22px repeat-x,
  linear-gradient(#181d25,#181d25);border-top:6px solid var(--yellow)}
.is-pinned .map__sprite{display:block;position:absolute;z-index:5;left:0;bottom:92px;width:72px;height:84px;image-rendering:pixelated;will-change:transform}
.is-pinned .panel{min-height:0}
@media(max-width:860px){
  .is-pinned .panel{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:104px var(--gutter) 128px;gap:14px;align-content:stretch}
  .is-pinned .panel--intro{padding-top:104px}
  .is-pinned .panel__media{aspect-ratio:auto;min-height:0;height:100%}
  .is-pinned .panel h3{margin-bottom:10px;font-size:34px}
  .is-pinned .panel ol{gap:6px}.is-pinned .panel li{font-size:15px}
  .is-pinned .loot{margin-top:10px;font-size:14px}
  .is-pinned .map__ground{height:68px}
  .is-pinned .map__sprite{bottom:68px;width:54px;height:63px}
  .is-pinned .flag{bottom:68px;height:48px}
  .is-pinned .map__hud{top:66px}
}

.reel{padding:clamp(70px,10vw,130px) var(--gutter)}
.reel__lead{font-size:clamp(18px,2vw,22px);font-weight:700;max-width:780px;margin-top:16px}
.reel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:18px;overflow:hidden;background:var(--ink3);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform 300ms var(--ease-out)}
.yt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(15,18,22,.92))}
.yt i{position:absolute;z-index:1;left:50%;top:44%;width:64px;height:64px;margin:-32px;background:var(--yellow);border-radius:18px;transition:transform 160ms var(--ease-out)}
.yt i::after{content:"";position:absolute;left:25px;top:19px;border-left:20px solid #181717;border-top:13px solid transparent;border-bottom:13px solid transparent}
.yt span{position:absolute;z-index:1;left:16px;right:16px;bottom:12px;font-size:14px;font-weight:700;line-height:1.3}
.yt b{display:block;font:800 25px/1.1 var(--display)}
.yt:active i{transform:scale(.94)}
@media(hover:hover){.yt:hover img{transform:scale(1.04)}}
.yt iframe{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0}
.reel__note{font-size:13px;color:var(--muted);margin-top:14px}
@media(max-width:860px){.reel__grid{grid-template-columns:1fr}}

.play{background:var(--yellow);color:#181717;padding:clamp(60px,9vw,120px) var(--gutter)}
.play .eyebrow{color:#181717}
.play__head{max-width:820px;margin-bottom:28px}
.play__head p:last-child{font-weight:700;font-size:19px;margin-top:14px}
#game{width:100%;height:auto;background:#0f1216;border-radius:20px;box-shadow:0 8px 0 0 var(--yellow-d);cursor:pointer;touch-action:manipulation}
.play__keys{font:700 13px/1.3 var(--mono);margin-top:16px}

.method{padding:clamp(70px,10vw,130px) var(--gutter)}
.method h2{margin-bottom:36px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps article{background:var(--ink2);border:2px solid var(--line);border-radius:22px;padding:26px}
.steps b{display:grid;place-items:center;width:46px;height:46px;background:var(--yellow);color:#181717;border-radius:12px;font:800 25px/1 var(--display);margin-bottom:18px}
.steps h3{font-size:31px;margin-bottom:8px}
.steps p{color:var(--muted)}
.care{margin-top:18px;padding:26px;border-radius:22px;background:var(--cream);color:#181717}
.care h3{font-size:29px;margin-bottom:12px}
.care ul{display:grid;gap:7px;font-weight:700}
.care li{padding-left:24px;position:relative}
.care li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;background:#181717;border-radius:3px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

.sched{background:var(--cream);color:#181717;padding:clamp(70px,10vw,130px) var(--gutter)}
.sched .eyebrow{color:#7a7109}
.sched__lead{font-size:21px;font-weight:700;margin-top:12px}
.groups{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.group{display:block;background:#181717;color:var(--text);padding:28px;border-radius:24px;text-decoration:none;cursor:pointer;transition:transform 160ms var(--ease-out)}
.group:active{transform:scale(.98)}
@media(hover:hover){.group:hover{transform:translateY(-4px)}}
.group small{font:700 14px/1 var(--mono);color:var(--yellow)}
.group b{display:block;font:800 clamp(36px,5vw,62px)/1.05 var(--display);margin:10px 0 8px}
.group span{font-weight:700;opacity:.82}
.group em{display:block;margin-top:16px;font-weight:800}
.dates{margin-top:24px;display:grid;gap:10px}
.dates li{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:15px 20px;background:#efeddf;border-radius:14px;font-weight:700}
.dates b{font:700 15px/1.5 var(--mono)}
.dates .is-hi{background:var(--yellow)}
.dates .is-rest{background:transparent;box-shadow:inset 0 0 0 2px #dad7c6;color:#55554e}
@media(max-width:620px){.groups{grid-template-columns:1fr}.dates li{grid-template-columns:1fr;gap:2px}}

.teacher{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:clamp(26px,5vw,70px);align-items:center;padding:clamp(70px,10vw,130px) var(--gutter)}
.teacher__photo{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--ink3)}
.teacher__photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.teacher__mono{position:absolute;inset:0;display:grid;place-items:center;font:800 110px/1 var(--display);color:var(--yellow)}
.teacher__role{font-weight:800;font-size:21px;color:var(--yellow);margin:12px 0 14px}
.teacher p:last-child{max-width:620px;font-size:19px}
@media(max-width:700px){.teacher{grid-template-columns:1fr}.teacher__photo{max-width:320px}}

.price{padding:24px var(--gutter) clamp(70px,10vw,130px)}
.price__card{max-width:720px;margin:auto;background:var(--ink2);border:3px solid var(--yellow);border-radius:28px;padding:clamp(26px,5vw,48px)}
.price__old{font-weight:700;color:var(--muted)}
.price__now{font:800 clamp(60px,10vw,104px)/1 var(--display);color:var(--yellow);margin:6px 0}
.price__save{font-weight:800}
.price__card ul{display:grid;gap:7px;margin:22px 0;font-weight:700}
.price__card li{padding-left:24px;position:relative}
.price__card li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;background:var(--yellow);border-radius:3px}
.price__sum{border-top:2px solid var(--line);padding-top:14px;display:grid;gap:7px}
.price__sum div{display:flex;justify-content:space-between;gap:16px;font-weight:700}
.price__sum .total{font:800 27px/1.2 var(--display);border-top:2px solid var(--line);padding-top:10px}
.price__fee{margin:14px 0 24px}
.price__card .btn{width:100%}

.faq{background:var(--cream);color:#181717;padding:clamp(70px,10vw,120px) var(--gutter)}
.faq h2{margin-bottom:28px;font-size:clamp(36px,5vw,62px)}
.faq details{border-top:2px solid #181717;max-width:900px}
.faq details:last-child{border-bottom:2px solid #181717}
.faq summary{cursor:pointer;font:800 23px/1.2 var(--display);padding:18px 0;min-height:44px}
.faq details p{padding-bottom:18px;font-size:17px}

.final{padding:clamp(80px,12vw,160px) var(--gutter);text-align:center;background:radial-gradient(ellipse at 50% 120%,rgba(234,217,30,.2),transparent 60%)}
.final h2{margin-bottom:30px}
.final p{font:700 18px/1 var(--mono);margin-top:24px}
.foot{padding:24px var(--gutter) 92px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:grid;gap:4px}
.wa-float{display:none}
@media(max-width:760px){.wa-float{display:flex;align-items:center;justify-content:center;position:fixed;z-index:40;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));min-height:52px;background:var(--yellow);color:#181717;font:800 19px/1 var(--display);text-decoration:none;border-radius:14px;box-shadow:0 5px 0 0 var(--yellow-d),0 12px 30px rgba(0,0,0,.45);transition:transform 200ms var(--ease-out)}.wa-float.is-hidden{transform:translateY(90px)}}
@media(prefers-reduced-motion:reduce){.caret{animation:none}.promise__big .w{opacity:1}*{transition:none!important}}