*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0c0e; --s1:#121416; --s2:#1a1c20;
  --line:#252830; --line-hi:#3a3f4a;
  --text:#eff0f2; --soft:#a4aab5;
  --lime:#c8f135; --lime-hi:#d6f75c; --lime-ink:#0b0c0e; --acc:#c8f135;
  --glass:rgba(11,12,14,.8); --sh:rgba(0,0,0,.85);
  --blob1:rgba(70,125,20,.5); --blob2:rgba(50,95,14,.45); --blob3:rgba(200,241,53,.09);
  --wrap:1180px; --pad:clamp(20px,5vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
/* modo claro: crema cálido, con un verde más profundo que se lee bien sobre fondo claro */
:root[data-theme=light]{
  --bg:#f4efe4; --s1:#ece6d7; --s2:#f9f5ec;
  --line:#ddd5c2; --line-hi:#c5bca6;
  --text:#1d1e18; --soft:#5b5c50;
  --lime:#b4d92a; --lime-hi:#c2e63c; --lime-ink:#141708; --acc:#4d6800;
  --glass:rgba(244,239,228,.82); --sh:rgba(70,58,24,.28);
  --blob1:rgba(170,205,60,.5); --blob2:rgba(200,180,110,.45); --blob3:rgba(150,190,40,.25);
  color-scheme:light;
}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:var(--line-hi) var(--bg)}
body{background:var(--bg);color:var(--text);font:400 1rem/1.6 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background .5s,color .5s}
::selection{background:var(--lime);color:var(--lime-ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
img,video{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
h1,h2,h3{text-wrap:balance;letter-spacing:-.03em}
h1{font-size:clamp(2.7rem,8vw,5.6rem);font-weight:900;line-height:1}
h2{font-size:clamp(2rem,4.8vw,3.5rem);font-weight:900;line-height:1.05}
h3{font-size:1.1rem;font-weight:700;letter-spacing:-.015em}
.sub{color:var(--soft);font-size:clamp(1rem,1.4vw,1.15rem);font-weight:300;max-width:58ch;margin-top:1.1rem}

/* palabras clave: el resaltador las "pinta" cuando entran en pantalla */
mark{color:inherit;padding:0 .14em;margin:0 -.04em;border-radius:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 50%/0% 100%;
  transition:background-size .9s var(--ease) .25s,color .3s .5s}
html:not(.js) mark,.in mark,mark.in{background-size:100% 100%;color:var(--lime-ink)}

/* aparición al hacer scroll */
.js [data-r]{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s),filter .9s var(--ease) var(--d,0s)}
.js [data-r].in{opacity:1;transform:none;filter:none}

/* fondo vivo */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.bg i:nth-child(2){width:720px;height:720px;top:-280px;left:-200px;background:radial-gradient(circle,var(--blob1),transparent 68%);animation:d1 16s ease-in-out infinite alternate}
.bg i:nth-child(3){width:560px;height:560px;bottom:-220px;right:-160px;background:radial-gradient(circle,var(--blob2),transparent 70%);animation:d2 21s ease-in-out infinite alternate}
.bg i:nth-child(4){width:380px;height:380px;top:38%;left:58%;background:radial-gradient(circle,var(--blob3),transparent 70%);animation:d3 26s ease-in-out infinite alternate}
.bg b{position:absolute;inset:-60px;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:60px 60px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);
  animation:grid 14s linear infinite}
@keyframes d1{to{transform:translate(160px,110px) scale(1.15)}}
@keyframes d2{to{transform:translate(-140px,-120px) scale(1.2)}}
@keyframes d3{to{transform:translate(-220px,90px) scale(1.3)}}
@keyframes grid{to{transform:translate(60px,60px)}}

/* botones: con relieve, y se hunden al tocarlos */
.btn,.press{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6em;cursor:pointer;font-family:inherit;text-decoration:none;border:1px solid transparent;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s,border-color .2s,color .2s}
.btn{min-height:48px;padding:0 22px;border-radius:10px;font-weight:600;font-size:.95rem;letter-spacing:-.005em}
.btn-lime,.press-lime{background:var(--lime);color:var(--lime-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.2),0 6px 14px -8px var(--sh)}
.btn-lime:hover{background:var(--lime-hi);transform:translateY(-1px)}
.btn-lime::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn-lime:hover::after{transform:translateX(120%)}
.btn-ghost,.press-ghost{background:var(--s2);border-color:var(--line-hi);color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.14)}
.btn-ghost:hover,.press-ghost:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.btn:active,.press:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 1px 3px rgba(0,0,0,.28);filter:brightness(.95);transition-duration:.08s}
.btn svg{flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

/* cabecera */
header{position:sticky;top:0;z-index:30;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:22px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;text-decoration:none;margin-right:auto}
.logo img{display:block;width:38px;height:38px;object-fit:contain;transform:scale(1.3);margin-right:3px}
header nav{display:flex;gap:26px}
header nav a{color:var(--soft);font-size:.9rem;text-decoration:none;transition:color .2s}
header nav a:hover{color:var(--text)}
.login-link{font-size:.88rem;text-decoration:none;white-space:nowrap;color:var(--text)}
header .btn{min-height:40px;padding:0 16px;font-size:.88rem;gap:0}
.theme{width:40px;height:40px;border-radius:10px}
.theme svg{width:18px;height:18px}
[data-theme=dark] .theme .moon,[data-theme=light] .theme .sun{display:none}
.prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:0 50%}

/* hero */
.hero{position:relative;padding:clamp(56px,9vw,116px) 0 clamp(72px,10vw,130px)}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),var(--blob3),transparent 70%)}
.hero:hover::after{opacity:1}
h1 .w{display:inline-block;animation:rise 1.1s var(--ease) both;animation-delay:calc(var(--w)*90ms)}
@keyframes rise{from{opacity:0;transform:translateY(.6em) rotate(3deg);filter:blur(10px)}}
.hero .sub{animation:rise 1.1s var(--ease) .55s both}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2rem}
.hero .cta-row{animation:rise 1.1s var(--ease) .7s both}
.hero-vis{position:relative;margin-top:clamp(56px,8vw,96px);padding-left:clamp(0px,9vw,120px);animation:rise 1.4s var(--ease) .85s both}

/* marcos de dispositivo: siempre oscuros, porque el sistema grabado es oscuro */
.frame{--s1:#121416;--line:#252830;--line-hi:#3a3f4a;--soft:#a4aab5;--acc:#c8f135;color:#eff0f2;
  border:1px solid var(--line-hi);border-radius:14px;overflow:hidden;background:#0b0c0e;box-shadow:0 40px 80px -24px var(--sh),0 12px 28px -8px var(--sh)}
.frame-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-bottom:1px solid var(--line);color:var(--soft);font-size:.78rem;background:var(--s1)}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-hi)}
.frame-bar span{margin-left:8px}
.frame video{width:100%;aspect-ratio:1280/732;object-fit:cover}
.chip{margin-left:auto!important;display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:999px;border:1px solid rgba(200,241,53,.35);color:var(--acc);font-weight:600;font-size:.74rem;white-space:nowrap;transition:color .4s,border-color .4s}
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.phone{position:relative;flex:none;border:7px solid #23262c;border-radius:34px;overflow:hidden;background:#000;box-shadow:0 40px 70px -20px var(--sh),0 0 0 1px #000,0 10px 24px -6px var(--sh)}
.phone::before{content:'';position:absolute;z-index:1;top:8px;left:50%;width:30%;height:16px;margin-left:-15%;border-radius:10px;background:#000}
.phone video{width:100%;aspect-ratio:400/718;object-fit:cover}
.hero-vis .phone{position:absolute;left:0;bottom:-34px;width:clamp(120px,21vw,236px);transform:rotate(-5deg);animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:rotate(-3.5deg) translateY(-14px)}}

/* hojas que se montan una sobre otra */
.sheet{position:relative;background:var(--s1);border-radius:40px 40px 0 0;margin-top:-40px;border-top:1px solid var(--line-hi);box-shadow:0 -40px 80px -30px var(--sh);transition:background .5s}
.sheet.dark{background:var(--bg)}
.pad{padding-block:clamp(84px,11vw,150px)}

/* manifiesto */
.mani p{font-size:clamp(1.6rem,4.2vw,3.3rem);font-weight:900;line-height:1.14;letter-spacing:-.035em;max-width:22ch;text-wrap:balance}
.mani p+p{margin-top:.9em;color:var(--soft)}
.mani .wrap{padding-bottom:calc(clamp(84px,11vw,150px) + 40px)}

/* problema → solución */
.pairs{list-style:none;margin-top:3rem;border-top:1px solid var(--line)}
.pairs li{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.15fr);gap:10px 28px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.pairs span{color:var(--soft);font-weight:300}
.pairs svg{color:var(--acc)}
.pairs b{font-weight:700;font-size:clamp(1.02rem,1.5vw,1.2rem);letter-spacing:-.015em}

/* recorrido en vivo: avanza solo, y cada paso se puede tocar */
.rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin-top:44px}
.rail::before,.rail-fill{content:'';position:absolute;left:0;right:0;top:17px;height:3px;border-radius:3px;background:var(--line)}
.rail-fill{background:linear-gradient(90deg,var(--lime),var(--lime-hi),var(--lime)) 0 0/200% 100%;animation:shim 2s linear infinite;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s linear}
@keyframes shim{to{background-position:-200% 0}}
.rail li:not(.rail-fill){position:relative;z-index:1}
.rail button{width:38px;height:38px;border-radius:50%;border:2px solid var(--line-hi);background:var(--s2);color:var(--soft);font-weight:700;font-size:.76rem}
.rail button:hover{border-color:var(--acc);color:var(--acc)}
.rail span{display:block;margin-top:10px;font-size:.84rem;color:var(--soft);transition:color .4s}
.rail .done button{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.rail .on button{border-color:var(--acc);color:var(--acc);animation:pulse 1.8s infinite}
.rail .on span{color:var(--acc);font-weight:700}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(180,217,42,.55)}70%{box-shadow:0 0 0 14px rgba(180,217,42,0)}100%{box-shadow:0 0 0 0 rgba(180,217,42,0)}}
.hint{margin-top:14px;color:var(--soft);font-size:.84rem}
.stage{margin-top:40px}
.step{display:none}
.step.on{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.side{display:flex;flex-direction:column;gap:26px;min-width:0}
.step h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:900;letter-spacing:-.03em;line-height:1.1}
.step-txt p{color:var(--soft);font-weight:300;margin-top:.7rem;max-width:62ch}
.step .phone{height:min(64vh,560px);aspect-ratio:400/718}
.step .phone video{height:100%}
.desk small{display:none;color:var(--soft);font-size:.8rem;margin-bottom:10px}
.desk video{transition:filter .7s var(--ease)}
/* el local todavía no reaccionó: la pantalla espera en penumbra */
.desk.wait video{filter:brightness(.28) blur(5px)}
.desk.wait .chip{color:var(--soft);border-color:var(--line-hi)}
.desk.go .frame{animation:flash 1.3s var(--ease)}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(200,241,53,.9),0 40px 80px -24px var(--sh);border-color:#c8f135}100%{box-shadow:0 0 0 26px rgba(200,241,53,0),0 40px 80px -24px var(--sh)}}
.step.on .step-txt{animation:inUp .8s var(--ease) both}
.step.on .phone{animation:inPhone .9s var(--ease) both}
.step.on .desk{animation:inUp .9s var(--ease) .1s both}
@keyframes inUp{from{opacity:0;transform:translateY(30px);filter:blur(8px)}}
@keyframes inPhone{from{opacity:0;transform:translateY(50px) rotate(4deg)}}

/* módulos apilados */
.stack{margin-top:56px}
.card{position:sticky;top:calc(88px + var(--i)*24px);padding:clamp(22px,3.4vw,40px);margin-bottom:44px;border-radius:28px;border:1px solid var(--line-hi);background:var(--s2);box-shadow:0 -24px 50px -18px var(--sh)}
.card-head{display:grid;grid-template-columns:1fr 1fr;gap:16px 48px;align-items:end;margin-bottom:26px}
.card h3{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:900;letter-spacing:-.03em;line-height:1.08}
.card p{color:var(--soft);font-weight:300;max-width:44ch}
.crop{overflow:hidden;border-radius:14px;border:1px solid var(--line-hi);background:#0b0c0e}
.crop img{width:115.4%;max-width:none;margin-left:-15.4%;height:auto}
.crop video{width:100%}
.card .crop{max-height:calc(100vh - 330px);min-height:220px}
.marquee{overflow:hidden;margin-top:30px;padding-block:22px;border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee ul{display:flex;width:max-content;list-style:none;animation:scroll 38s linear infinite}
.marquee li{padding-inline:26px;font-size:clamp(1.1rem,2.2vw,1.6rem);font-weight:900;letter-spacing:-.02em;white-space:nowrap;color:var(--soft)}
.marquee li::after{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);margin-left:52px;vertical-align:middle}
.marquee:hover ul{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

/* métricas */
.metrics{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.metrics ul{list-style:none;margin-top:2rem;border-top:1px solid var(--line)}
.metrics li{padding:15px 0;border-bottom:1px solid var(--line);font-weight:600;display:flex;gap:14px;align-items:baseline}
.metrics li span{color:var(--soft);font-weight:300;font-size:.92rem}
.peek{position:relative;perspective:1600px}
.peek .crop{aspect-ratio:1650/912;transform:rotateY(-14deg) rotateX(5deg);transform-origin:100% 50%;box-shadow:0 40px 80px -24px var(--sh);
  -webkit-mask-image:linear-gradient(180deg,#000 38%,transparent 96%);mask-image:linear-gradient(180deg,#000 38%,transparent 96%);transition:transform 1.4s var(--ease)}
.peek.in .crop{transform:rotateY(-6deg) rotateX(2deg)}
.peek figcaption{margin-top:-8px;color:var(--soft);font-size:.84rem;text-align:right}

/* roles */
.roles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:3rem;border-top:1px solid var(--line)}
.roles div{padding:30px 28px 0 0}
.roles div+div{padding-left:28px;border-left:1px solid var(--line)}
.roles h3{font-size:1.6rem;font-weight:900;letter-spacing:-.03em;color:var(--acc)}
.roles p{color:var(--soft);font-weight:300;margin-top:.6rem}

/* preguntas */
.faq{margin-top:3rem;border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:1.12rem;font-weight:700;letter-spacing:-.015em;cursor:pointer;list-style:none;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--acc)}
.faq summary::after{content:'';flex:none;width:12px;height:12px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq p{color:var(--soft);font-weight:300;padding-bottom:24px;max-width:62ch}

/* cierre */
.end{text-align:center}
.end .sub{margin-inline:auto}
.end .cta-row{justify-content:center}
footer{border-top:1px solid var(--line);padding-block:30px;color:var(--soft);font-size:.86rem;background:var(--bg)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-left:auto}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:var(--acc)}

/* aviso de cookies */
.ck{position:fixed;z-index:40;left:16px;bottom:16px;max-width:360px;padding:18px 20px;border-radius:16px;border:1px solid var(--line-hi);background:var(--s2);box-shadow:0 24px 50px -12px var(--sh);font-size:.88rem;color:var(--soft);animation:rise .8s var(--ease) 1.6s both}
.ck[hidden]{display:none}
.ck a{color:var(--text)}
.ck button{margin-top:12px;min-height:40px;padding:0 18px;border-radius:10px;font-weight:700;font-size:.86rem}

@media(max-width:1023px){
  header nav{display:none}
  .card{top:calc(76px + var(--i)*16px)}
  .card-head{grid-template-columns:1fr}
  .card .crop{max-height:none;min-height:0}
  .metrics{grid-template-columns:1fr;gap:40px}
  .roles{grid-template-columns:1fr}
  .roles div,.roles div+div{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}
  .sheet{border-radius:28px 28px 0 0;margin-top:-28px}
  .mani .wrap{padding-bottom:calc(clamp(84px,11vw,150px) + 28px)}
}
@media(max-width:819px){
  .pairs li{grid-template-columns:1fr;gap:6px}
  .pairs svg{display:none}
  /* en celular: texto, teléfono y debajo la pantalla del local */
  .step.on{grid-template-columns:1fr;gap:26px}
  .side{display:contents}
  .step-txt{order:1}
  .step .phone{order:2;height:auto;width:min(62%,240px);margin-inline:auto}
  .step .phone video{height:auto}
  .desk{order:3}
  .desk small{display:block}
  .rail span{font-size:.74rem}
}
@media(max-width:480px){
  header .wrap{gap:12px}
  header .btn{display:none}
  header .btn span{display:none}
  .cta-row .btn{width:100%}
  .ck{right:16px;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-r]{opacity:1;transform:none;filter:none}
  mark{background-size:100% 100%;color:var(--lime-ink)}
}

/* Named static presentation parameters, extracted from the HTML. */
html body .landing-presentation-1.landing-presentation-1 { --w:0; }
html body .landing-presentation-2.landing-presentation-2 { --w:1; }
html body .landing-presentation-3.landing-presentation-3 { --w:2; }
html body .landing-presentation-4.landing-presentation-4 { --w:3; }
html body .landing-presentation-5.landing-presentation-5 { --w:4; }
html body .landing-presentation-6.landing-presentation-6 { --w:5; }
html body .landing-presentation-7.landing-presentation-7 { --w:6; }
html body .landing-presentation-8.landing-presentation-8 { --w:7; }
html body .landing-presentation-9.landing-presentation-9 { --w:8; }
html body .landing-presentation-10.landing-presentation-10 { padding-bottom:calc(clamp(84px,11vw,150px) + 40px); }
html body .landing-presentation-11.landing-presentation-11 { --d:0.00s; }
html body .landing-presentation-12.landing-presentation-12 { --d:0.06s; }
html body .landing-presentation-13.landing-presentation-13 { --d:0.12s; }
html body .landing-presentation-14.landing-presentation-14 { --d:0.18s; }
html body .landing-presentation-15.landing-presentation-15 { --d:0.24s; }
html body .landing-presentation-16.landing-presentation-16 { --d:0.30s; }
html body .landing-presentation-17.landing-presentation-17 { --d:.1s; }
html body .landing-presentation-18.landing-presentation-18 { height:40px; }
html body .landing-presentation-19.landing-presentation-19 { --i:0; }
html body .landing-presentation-20.landing-presentation-20 { --i:1; }
html body .landing-presentation-21.landing-presentation-21 { --i:2; }
html body .landing-presentation-22.landing-presentation-22 { --i:3; }
html body .landing-presentation-23.landing-presentation-23 { --i:4; }
html body .landing-presentation-24.landing-presentation-24 { height:90px; }
html body .landing-presentation-25.landing-presentation-25 { --d:.2s; }
html body .landing-presentation-26.landing-presentation-26 { --d:.12s; }
html body .landing-presentation-27.landing-presentation-27 { --d:.24s; }