/* OperativaCode · homepage · estilos
   Identidad: 60 % Piedra #EFEEE9 · 30 % Bosque #12302A · 10 % Lila #B9A8FF.
   Regla: no se agregan colores nuevos; los grises son transparencias de estos tres. */

/* ============ FUENTES (autohospedadas, subconjunto latino, licencia OFL en assets/fonts) ============ */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/bricolage-grotesque-latin.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/hanken-grotesk-latin.woff2") format("woff2")}

/* ============ IDENTIDAD · 60 Piedra / 30 Bosque / 10 Lila ============ */
:root{
  --piedra:#EFEEE9; --bosque:#12302A; --lila:#B9A8FF;
  --ink:#12302A; --ink-2:rgba(18,48,42,.74); --muted:rgba(18,48,42,.56); --line:rgba(18,48,42,.14); --tint:rgba(18,48,42,.05);
  --on-d:#EFEEE9; --on-d2:rgba(239,238,233,.7); --line-d:rgba(239,238,233,.16); --tint-d:rgba(239,238,233,.06);
  --display:"Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1240px; --gut:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.22,.9,.24,1);
  color-scheme: light;
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px);background:var(--bosque)}
html:not(.lenis){scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--piedra);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:700;letter-spacing:-.035em;line-height:1;font-variation-settings:"opsz" 96}
h2{font-size:clamp(2.3rem,5vw,4.4rem)}
h3{font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.025em;line-height:1.1;font-variation-settings:"opsz" 36}
h4{font-size:1.05rem;letter-spacing:-.015em;line-height:1.25;font-variation-settings:"opsz" 24}
::selection{background:var(--lila);color:var(--bosque)}
:focus-visible{outline:2px solid var(--bosque);outline-offset:3px;border-radius:10px}
.dark :focus-visible{outline-color:var(--lila)}
[tabindex="-1"]:focus{outline:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sect{padding:clamp(96px,12vw,168px) 0;position:relative}
.dark{background:var(--bosque);color:var(--on-d)}
.dark h2,.dark h3,.dark h4{color:var(--on-d)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kick{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem;color:var(--ink-2);margin-bottom:22px}
.kick i{width:10px;height:10px;border-radius:3px;background:var(--lila);display:block}
.dark .kick{color:var(--on-d2)}
.lede{font-size:clamp(1.12rem,1.6vw,1.3rem);color:var(--ink-2);max-width:54ch;margin-top:22px}
.dark .lede{color:var(--on-d2)}
.head{max-width:820px;margin-bottom:clamp(48px,6vw,80px)}

/* ============ Botones y microinteracciones ============ */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:18px;border:1.5px solid transparent;font:700 1rem/1 var(--body);letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.btn-lila{background:var(--lila);color:var(--bosque)}
.btn-lila:hover{background:var(--bosque);color:var(--piedra)}
.dark .btn-lila:hover{background:var(--piedra);color:var(--bosque)}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink)}
.dark .btn-line{border-color:var(--line-d);color:var(--on-d)}
.dark .btn-line:hover{border-color:var(--on-d)}
.btn .arr{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(239,238,233,.5);animation:rip .6s var(--ease);pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.micro{font-size:.93rem;color:var(--muted);margin-top:16px}
.dark .micro,.ticket .micro{color:var(--on-d2)}
.micro a{color:inherit;font-weight:600;text-underline-offset:3px;display:inline-block;min-height:24px}

/* Cursor decorativo (acompaña al del sistema, no lo reemplaza) */
.cur-ring{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:12px;border:1.5px solid var(--bosque);pointer-events:none;z-index:120;opacity:0;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background-color .3s,border-color .3s,opacity .3s,border-radius .3s}
.cur-ring.on{opacity:.5}
.cur-ring.big{width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:18px;background:rgba(185,168,255,.35);border-color:transparent;opacity:1}
.cur-ring.on-dark{border-color:var(--lila)}

/* ============ Navegación ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;padding-top:env(safe-area-inset-top,0px);transition:transform .45s var(--ease),background-color .3s,box-shadow .3s}
.nav.hide{transform:translateY(-110%)}
.nav.solid{background:rgba(239,238,233,.86);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);box-shadow:0 1px 0 var(--line)}
.nav .wrap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;min-height:44px;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.28rem;letter-spacing:-.04em;white-space:nowrap;font-variation-settings:"opsz" 24}
.brand svg{width:32px;height:32px;flex:none;transition:transform .5s var(--ease)}
.brand:hover svg{transform:rotate(-8deg) scale(1.06)}
.brand .cd{font-weight:400}
.menu{display:flex;align-items:center;gap:30px}
.menu a:not(.btn){font-weight:500;font-size:.97rem;color:var(--ink-2);text-decoration:none}
.menu a:not(.btn):hover{color:var(--ink)}
.menu .btn{min-height:46px;padding:0 20px;font-size:.94rem;border-radius:14px;white-space:nowrap}
/* Menú: enlaces en fila en escritorio; en ≤ 920 px, panel que abre la hamburguesa (D-30). Sin JS, el panel no existe y nada cambia */
.menu-links{display:flex;align-items:center;gap:30px}
.menu-cta,.burger{display:none}
.burger{width:46px;height:46px;border-radius:14px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;align-items:center;justify-content:center;flex:none;padding:0}
.burger:hover{border-color:var(--bosque)}
.burger-i,.burger-i::before,.burger-i::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),background-color .2s}
.burger-i{position:relative}
.burger-i::before,.burger-i::after{content:"";position:absolute;left:0}
.burger-i::before{top:-6px}
.burger-i::after{top:6px}
.burger[aria-expanded="true"] .burger-i{background:transparent}
.burger[aria-expanded="true"] .burger-i::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-i::after{transform:translateY(-6px) rotate(-45deg)}
.menu-backdrop{position:fixed;inset:0;z-index:89;background:rgba(18,48,42,.35)}
.nav.open{background:var(--piedra);box-shadow:0 1px 0 var(--line)}
html.scroll-lock,html.scroll-lock body{overflow:hidden}
@media (max-width:920px){
  .menu{gap:10px}
  .menu-links{display:none;position:fixed;left:0;right:0;top:calc(78px + env(safe-area-inset-top,0px));flex-direction:column;align-items:stretch;gap:0;
    padding:4px var(--gut) 22px;background:var(--piedra);box-shadow:0 1px 0 var(--line),0 30px 40px -30px rgba(18,48,42,.5);
    max-height:calc(100vh - 78px);max-height:calc(100dvh - 78px);overflow-y:auto;overscroll-behavior:contain}
  .nav.open .menu-links{display:flex}
  .menu-links a:not(.btn){display:flex;align-items:center;min-height:56px;font-size:1.12rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
  .burger:not([hidden]){display:inline-flex}
}
@media (max-width:560px){
  .nav.has-burger .menu > .btn{display:none}
  .menu-cta{display:flex;margin-top:18px;min-height:56px;font-size:1rem}
}
@media (max-width:420px){.menu .btn{padding:0 12px;font-size:.84rem;min-height:44px}.brand{font-size:1.08rem}.brand svg{width:28px;height:28px}}

/* ============ HERO ============ */
.hero{padding:calc(78px + env(safe-area-inset-top,0px) + clamp(40px,6vw,80px)) 0 0;text-align:center;position:relative;overflow:hidden}
.hero .kick{justify-content:center}
.hero h1{font-size:clamp(3rem,9vw,8.2rem);letter-spacing:-.055em;line-height:.9;max-width:11ch;margin:0 auto}
.hero .lede{margin:28px auto 36px;max-width:52ch}
.hero .ctas{justify-content:center}
.split .word{display:inline-block}
.scene{position:relative;margin:clamp(56px,7vw,88px) auto 0;max-width:1100px;height:680px}
.scene::before{content:"";position:absolute;left:50%;bottom:0;width:120%;height:62%;transform:translateX(-50%);background:var(--bosque);border-radius:48px 48px 0 0}
.phone{position:absolute;left:50%;top:0;width:320px;margin-left:-160px;height:640px;border-radius:50px;background:var(--bosque);padding:10px;box-shadow:0 60px 90px -50px rgba(18,48,42,.8),inset 0 0 0 1px rgba(239,238,233,.12);z-index:2}
.screen{height:100%;border-radius:41px;overflow:hidden;background:var(--piedra);display:flex;flex-direction:column;text-align:left;font-size:14px;line-height:1.4;color:var(--bosque)}
.url{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 12px 8px;font-size:.76rem;color:var(--muted);font-weight:600}
.url svg{width:12px;height:12px}
.bh{display:flex;align-items:center;gap:10px;padding:10px 12px 12px;border-bottom:1px solid var(--line)}
.bl{width:36px;height:36px;border-radius:12px;background:var(--bosque);color:var(--piedra);display:grid;place-items:center;font:700 .8rem var(--display);flex:none}
.bh b{display:block;font-size:.92rem;font-family:var(--display);letter-spacing:-.02em;line-height:1.2}
.bh small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.76rem;font-weight:600}
.bh small::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--lila)}
.seg{margin-left:auto;display:inline-flex;padding:3px;border-radius:10px;background:var(--tint);flex:none}
.seg button{min-height:30px;padding:0 8px;border-radius:8px;border:0;background:transparent;font:600 .72rem var(--body);color:var(--ink-2);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--bosque);color:var(--piedra)}
.chat{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.m{max-width:85%;padding:9px 12px;border-radius:16px;font-size:.9rem;line-height:1.42;animation:pop .35s var(--ease)}
.m.bot{align-self:flex-start;background:var(--tint);border-bottom-left-radius:5px}
.m.me{align-self:flex-end;background:var(--bosque);color:var(--piedra);border-bottom-right-radius:5px}
.m.ok{background:var(--lila);color:var(--bosque)}
.m.err{background:transparent;box-shadow:inset 0 0 0 1.5px var(--bosque)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:var(--tint);border-radius:16px 16px 16px 5px}
.typing i{width:6px;height:6px;border-radius:2px;background:var(--muted);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-2px)}}
.opts{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:95%;animation:pop .35s var(--ease)}
.opt{min-height:40px;padding:0 14px;border-radius:12px;border:1.5px solid var(--bosque);background:transparent;color:var(--bosque);font:600 .86rem var(--body);cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s var(--ease)}
.opt:hover{background:var(--lila);border-color:var(--lila)}
.opt:active{transform:scale(.96)}
.opt:disabled{opacity:.35;cursor:default;background:transparent;border-color:var(--bosque)}
.opt .fr{display:inline-block;width:6px;height:6px;border-radius:2px;background:var(--bosque);margin-right:6px;vertical-align:1px}
.qbar{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 2px;scrollbar-width:none;border-top:1px solid var(--line)}
.qbar::-webkit-scrollbar{display:none}
.q{flex:none;min-height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--bosque);font:600 .8rem var(--body);cursor:pointer;transition:border-color .2s,background-color .2s}
.q:hover{border-color:var(--bosque);background:var(--tint)}
.send{display:flex;gap:8px;padding:8px 12px 14px}
.send input{flex:1;min-width:0;min-height:46px;border-radius:14px;border:1.5px solid var(--line);background:transparent;padding:0 14px;font:500 .95rem var(--body);color:var(--bosque)}
.send input::placeholder{color:var(--muted)}
.send input:focus{outline:none;border-color:var(--bosque)}
.send button{width:46px;height:46px;border-radius:14px;border:0;background:var(--bosque);color:var(--piedra);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .2s var(--ease),background-color .2s,color .2s}
.send button:hover{background:var(--lila);color:var(--bosque)}
.send button:active{transform:scale(.92)}
.send button svg{width:18px;height:18px}

.float{position:absolute;z-index:3;text-align:left;border-radius:24px;padding:18px 20px}
.float.rev{left:3%;top:110px;width:250px;background:var(--piedra);box-shadow:0 30px 60px -30px rgba(18,48,42,.5),inset 0 0 0 1px var(--line)}
.float.biz{right:2%;top:250px;width:270px;background:var(--bosque);color:var(--on-d);box-shadow:0 30px 60px -30px rgba(18,48,42,.9),inset 0 0 0 1px var(--line-d)}
.float .t{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;margin-bottom:8px}
.float.rev .t{color:var(--ink-2)}
.float.biz .t{color:var(--lila)}
.float .t::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--lila)}
.stars{display:flex;gap:4px;margin:6px 0 8px}
.stars svg{width:22px;height:22px;color:var(--bosque)}
.float.rev p{margin:0;font-size:.9rem;color:var(--ink-2)}
.float.biz b{display:block;font-family:var(--display);font-size:1.12rem;letter-spacing:-.02em;margin-bottom:2px}
.float.biz p{margin:0;font-size:.88rem;color:var(--on-d2)}
.float.biz.flash{animation:flash .9s var(--ease)}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(185,168,255,.9),inset 0 0 0 1px var(--line-d)}100%{box-shadow:0 0 0 18px rgba(185,168,255,0),inset 0 0 0 1px var(--line-d)}}
.scene-note{position:absolute;left:0;right:0;bottom:18px;z-index:3;font-size:.84rem;color:var(--on-d2)}
@media (max-width:1060px){.float.rev{left:0;top:80px;width:210px}.float.biz{right:0;width:220px}}
@media (max-width:820px){
  .scene{height:auto;padding-bottom:70px}
  .scene::before{height:74%;width:140%}
  .phone{position:relative;left:auto;margin:0 auto;width:min(320px,100%)}
  .float{position:relative;left:auto!important;right:auto!important;top:auto!important;margin:16px auto 0;width:min(320px,100%)!important}
}

/* Franja */
.band{background:var(--lila);color:var(--bosque);overflow:hidden;padding:20px 0}
.band .track{display:flex;width:max-content;animation:slide 32s linear infinite}
.band span{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.7rem);letter-spacing:-.03em;white-space:nowrap;font-variation-settings:"opsz" 48}
.band span::after{content:"";width:12px;height:12px;border-radius:3px;background:var(--bosque)}
.band:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ UN DÍA (horizontal) ============ */
.dia{padding:clamp(96px,11vw,150px) 0 clamp(72px,8vw,110px);overflow:hidden}
.dia-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(40px,5vw,64px)}
.dia-head .lede{margin-top:0;max-width:42ch}
.dia-view{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;padding:0 var(--gut) 4px}
.dia-view::-webkit-scrollbar{display:none}
.dia.pinned .dia-view{overflow:visible;scroll-snap-type:none}
/* Fijada debe caber en la ventana: menos aire abajo y tarjetas que se ajustan al alto */
.dia.pinned{padding-bottom:clamp(28px,4vh,56px)}
.dia.pinned .dia-head{margin-bottom:clamp(24px,4vh,64px)}
.dia.pinned .hc{min-height:min(420px,46vh)}
.dia.pinned .dia-foot{margin-top:20px}
.dia-track{display:flex;gap:18px;width:max-content;padding-right:var(--gut)}
.hc{scroll-snap-align:start;flex:none;width:min(380px,82vw);min-height:420px;border-radius:30px;padding:28px;background:var(--tint-d);box-shadow:inset 0 0 0 1px var(--line-d);display:flex;flex-direction:column;gap:18px}
.hc:first-child{margin-left:max(0px,calc((100vw - var(--wrap))/2))}
.hc .time{font-family:var(--display);font-weight:700;font-size:3.4rem;letter-spacing:-.05em;line-height:1;color:var(--lila);font-variant-numeric:tabular-nums}
.hc .ask{align-self:flex-start;background:var(--piedra);color:var(--bosque);padding:12px 14px;border-radius:18px 18px 18px 6px;font-size:.98rem;max-width:92%}
.hc .did{margin-top:auto;display:flex;gap:12px;align-items:flex-start;padding-top:18px;border-top:1px solid var(--line-d)}
.hc .did svg{width:24px;height:24px;color:var(--lila);flex:none;margin-top:2px}
.hc .did b{display:block;font-size:1.05rem;letter-spacing:-.01em}
.hc .did span{font-size:.92rem;color:var(--on-d2)}
.hc.end{background:var(--lila);color:var(--bosque);box-shadow:none;justify-content:space-between}
.hc.end h3{color:var(--bosque);font-size:clamp(1.8rem,3vw,2.4rem)}
.hc.end p{color:var(--bosque);opacity:.8;margin:0}
.dia-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;font-size:.88rem;color:var(--on-d2)}
.dia-bar{flex:1;max-width:320px;height:3px;background:var(--line-d);border-radius:3px;overflow:hidden}
.dia-bar i{display:block;height:100%;width:0;background:var(--lila)}

/* ============ BENTO ============ */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(210px,auto);gap:16px}
.tile{position:relative;border-radius:30px;padding:clamp(24px,3vw,34px);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .3s}
.tile:hover{box-shadow:inset 0 0 0 1.5px var(--bosque)}
.tile .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--tint);margin-bottom:22px}
.tile .ic svg{width:24px;height:24px}
.tile p{color:var(--ink-2);margin:10px 0 0;font-size:.98rem}
.t-asis{grid-column:span 4;grid-row:span 2;background:var(--bosque);color:var(--on-d);box-shadow:none}
.t-asis h3{color:var(--on-d);font-size:clamp(1.8rem,3.2vw,2.8rem);max-width:14ch;letter-spacing:-.04em}
.t-asis > p{color:var(--on-d2);max-width:44ch}
.t-asis:hover{box-shadow:none}
.caps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.caps li{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--tint-d);transition:background-color .25s}
.caps li:hover{background:rgba(185,168,255,.16)}
.caps svg{width:22px;height:22px;color:var(--lila);flex:none;margin-top:1px}
.caps b{display:block;font-size:.98rem}
.caps span{font-size:.86rem;color:var(--on-d2);line-height:1.4}
.noai{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font-size:.92rem;color:var(--on-d2)}
.noai svg{width:20px;height:20px;color:var(--lila);flex:none;margin-top:2px}
.t-rev{grid-column:span 2}
/* D-28: sin tarjeta de métricas; QR y Configuración reparten la tercera fila */
.t-qr,.t-cfg{grid-column:span 3}
.t-dom{grid-column:span 2;background:var(--lila);box-shadow:none}
.t-dom:hover{box-shadow:none}
.t-dom p{color:var(--bosque);opacity:.8}
.t-dom .ic{background:rgba(18,48,42,.1)}
.typer{margin-top:18px;font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.03em;min-height:1.5em;word-break:break-all;font-variation-settings:"opsz" 36}
.typer .c{display:inline-block;width:2px;height:1em;background:var(--bosque);vertical-align:-.12em;margin-left:2px;animation:cb 1s steps(1) infinite}
@keyframes cb{50%{opacity:0}}
.badge{display:inline-flex;align-items:center;font-size:.78rem;font-weight:700;padding:5px 10px;border-radius:8px;background:var(--bosque);color:var(--piedra);position:absolute;top:24px;right:24px}
.qrbox{width:88px;height:88px;margin-bottom:18px}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.t-asis{grid-column:1 / -1;grid-row:auto}.t-rev,.t-qr,.t-cfg,.t-dom{grid-column:span 1}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.t-rev,.t-qr,.t-cfg,.t-dom{grid-column:1 / -1}.caps{grid-template-columns:1fr}}

/* ============ SIN / CON ============ */
.vs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.switch{display:inline-flex;align-items:center;gap:14px;margin-top:32px;background:none;border:0;padding:0;cursor:pointer;font:700 1.05rem var(--body);color:var(--ink);min-height:44px}
.switch .tr{position:relative;width:72px;height:40px;border-radius:14px;background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--bosque);transition:background-color .35s var(--ease);flex:none}
.switch .kn{position:absolute;top:5px;left:5px;width:30px;height:30px;border-radius:10px;background:var(--bosque);transition:transform .45s var(--ease)}
.switch[aria-checked="true"] .tr{background:var(--lila)}
.switch[aria-checked="true"] .kn{transform:translateX(32px)}
.switch .lb{text-align:left}
.rows{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--bosque)}
.rows li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line)}
.rows .ix{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--tint);transition:background-color .4s var(--ease)}
.rows .ix svg{width:22px;height:22px}
.rows .tx{display:grid}
.rows .tx span{grid-area:1 / 1;display:block;font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:600;letter-spacing:-.01em;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.rows .tx .con{opacity:0;transform:translateY(10px)}
.vs.on .rows .tx .sin{opacity:0;transform:translateY(-10px)}
.vs.on .rows .tx .con{opacity:1;transform:none}
.vs.on .rows .ix{background:var(--lila)}
.vs .rows li:nth-child(2) .tx span{transition-delay:.05s}.vs .rows li:nth-child(3) .tx span{transition-delay:.1s}.vs .rows li:nth-child(4) .tx span{transition-delay:.15s}.vs .rows li:nth-child(5) .tx span{transition-delay:.2s}
@media (max-width:900px){.vs{grid-template-columns:1fr}}

/* ============ PRECIO ============ */
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.ticket{position:relative;background:var(--bosque);color:var(--on-d);border-radius:30px;padding:clamp(28px,4vw,44px);
  -webkit-mask:radial-gradient(circle 16px at 0 58%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% 58%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 16px at 0 58%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% 58%,#0000 98%,#000) right/51% 100% no-repeat}
.ticket .top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px}
.ticket .top h3{font-size:1.8rem;color:var(--on-d)}
.ticket .top span{font-size:.8rem;font-weight:700;padding:6px 10px;border-radius:8px;background:var(--lila);color:var(--bosque)}
.big{font-family:var(--display);font-weight:700;font-size:clamp(3.6rem,8vw,6rem);letter-spacing:-.06em;line-height:.85;font-variant-numeric:tabular-nums}
.then{margin:14px 0 0;color:var(--on-d2);font-size:1.05rem}
.then b{color:var(--on-d)}
.perf{border:0;border-top:2px dashed var(--line-d);margin:30px -8px}
.inc{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px}
.inc li{display:flex;gap:12px;align-items:flex-start}
.inc svg{width:20px;height:20px;color:var(--lila);flex:none;margin-top:3px}
.inc li.hl{padding:12px 14px;border-radius:14px;background:rgba(185,168,255,.14)}
.sim{border-radius:30px;box-shadow:inset 0 0 0 1px var(--line);padding:clamp(24px,3.4vw,40px)}
.sim h3{margin-bottom:8px}
.sim > p{color:var(--ink-2);margin:0 0 26px}
.dayout{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.dayout .dn{font-family:var(--display);font-weight:700;font-size:2.4rem;letter-spacing:-.05em}
.dayout .ph{font-size:.88rem;font-weight:700;padding:6px 10px;border-radius:8px;background:var(--tint)}
.dayout .ph.paid{background:var(--bosque);color:var(--piedra)}
.dayout .ph.trial{background:var(--lila)}
.range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;margin:0}
.range::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--lila) 0 50.8%,var(--bosque) 50.8% 100%)}
.range::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--lila) 0 50.8%,var(--bosque) 50.8% 100%)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:9px;background:var(--piedra);border:3px solid var(--bosque);margin-top:-10px;transition:transform .2s var(--ease)}
.range::-moz-range-thumb{width:22px;height:22px;border-radius:9px;background:var(--piedra);border:3px solid var(--bosque)}
.range:active::-webkit-slider-thumb{transform:scale(1.15)}
.scale{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:22px}
.state{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.state li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}
.state li > span:first-child{color:var(--ink-2)}
.state .v{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.02em;text-align:right}
.state .v i{width:9px;height:9px;border-radius:3px;background:var(--lila);flex:none}
.state .v.off{opacity:.5}
.state .v.off i{background:var(--line)}
.bump{animation:bump .4s var(--ease)}
@keyframes bump{40%{transform:translateY(-3px)}}
.sim .switch{margin-top:22px;font-size:.97rem}
.sim .switch .tr{width:60px;height:34px}.sim .switch .kn{width:24px;height:24px}
.sim .switch[aria-checked="true"] .kn{transform:translateX(26px)}
@media (max-width:920px){.price{grid-template-columns:1fr}}

.ladder{margin-top:clamp(64px,8vw,104px)}
.ladder-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:26px}
.ladder-head p{margin:0;color:var(--ink-2);max-width:46ch}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:14px;height:2px;background:var(--line)}
.steps li{position:relative;padding:44px 16px 0 0}
.steps li::before{content:"";position:absolute;top:6px;left:0;width:18px;height:18px;border-radius:6px;background:var(--piedra);box-shadow:inset 0 0 0 2px var(--bosque);transition:transform .3s var(--ease)}
.steps li:hover::before{transform:rotate(45deg)}
.steps li.now::before{background:var(--lila)}
.steps b{display:block;font-family:var(--display);font-size:1.35rem;letter-spacing:-.03em}
.steps .qq{display:block;color:var(--ink-2);font-size:.93rem;margin:6px 0 10px;line-height:1.4}
.steps .ft{display:block;font-size:.9rem;font-weight:600;line-height:1.4;margin:0 0 12px}
.steps .pp{font-weight:700;font-size:.95rem}
.steps .pp small{display:block;font-weight:500;color:var(--muted);font-size:.8rem}
@media (max-width:900px){.steps{grid-template-columns:1fr}.steps::before{left:8px;right:auto;top:0;bottom:0;width:2px;height:auto}.steps li{padding:0 0 26px 40px}.steps li::before{top:4px}}


/* ============ FAQ ============ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,56px);align-items:start}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:24px 0;font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:-.025em;min-height:44px;font-variation-settings:"opsz" 24}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:34px;height:34px;border-radius:11px;box-shadow:inset 0 0 0 1.5px var(--line);position:relative;transition:background-color .3s,transform .4s var(--ease),box-shadow .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--bosque);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--ease)}
.faq summary:hover i{box-shadow:inset 0 0 0 1.5px var(--bosque)}
.faq details[open] summary i{background:var(--lila);box-shadow:none;transform:rotate(180deg)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq details p{color:var(--ink-2);margin:0;padding:0 0 24px;max-width:56ch}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* ============ CIERRE ============ */
.final{overflow:hidden;text-align:center;padding-bottom:clamp(40px,5vw,64px)}
.huge{display:flex;width:max-content;animation:slide 40s linear infinite;margin-top:clamp(56px,7vw,96px)}
.huge span{font-family:var(--display);font-weight:800;font-size:clamp(4rem,13vw,11rem);letter-spacing:-.06em;line-height:.95;padding-right:.35em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--line-d)}
.huge span:nth-child(odd){color:var(--lila);-webkit-text-stroke:0}
.final h2{max-width:15ch;margin:0 auto}
.final .lede{margin:24px auto 36px}
.final .ctas{justify-content:center}
.foot{background:var(--bosque);color:var(--on-d2);padding:64px 0 48px;font-size:.95rem;border-top:1px solid var(--line-d)}
.foot .wrap{display:grid;grid-template-columns:1fr 2fr;gap:32px}
.foot .brand{color:var(--on-d)}
.foot nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px}
.foot nav a{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
@media (max-width:920px), (pointer:coarse){.foot nav a{min-height:44px}}
.foot nav a:hover{color:var(--on-d)}
@media (max-width:700px){.foot .wrap{grid-template-columns:1fr}.foot nav{grid-template-columns:1fr 1fr}}

/* Balance 60/30/10 */
.final{background:var(--lila);color:var(--bosque)}
.final .kick{color:var(--bosque)}
.final .kick i{background:var(--bosque)}
.final .lede{color:rgba(18,48,42,.8)}
.final .btn-lila{background:var(--bosque);color:var(--piedra)}
.final .btn-lila:hover{background:var(--piedra);color:var(--bosque)}
.final .btn-line{border-color:rgba(18,48,42,.35);color:var(--bosque)}
.final .btn-line:hover{border-color:var(--bosque)}
.final .huge span{-webkit-text-stroke:1.5px rgba(18,48,42,.35)}
.final .huge span:nth-child(odd){color:var(--bosque);-webkit-text-stroke:0}

/* Simulador oscuro solo con dos columnas; en una columna vuelve al diseño claro para cuidar el 60/30/10 (como las tarjetas de marca en v5) */
@media (min-width:921px){
  .sim.dark{box-shadow:none}
  .sim.dark > p{color:var(--on-d2)}
  .sim.dark .dayout .ph{background:var(--tint-d);color:var(--on-d)}
  .sim.dark .dayout .ph.trial{background:var(--lila);color:var(--bosque)}
  .sim.dark .dayout .ph.paid{background:var(--piedra);color:var(--bosque)}
  .sim.dark .range::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--lila) 0 50.8%,rgba(239,238,233,.28) 50.8% 100%)}
  .sim.dark .range::-moz-range-track{background:linear-gradient(90deg,var(--lila) 0 50.8%,rgba(239,238,233,.28) 50.8% 100%)}
  .sim.dark .range::-webkit-slider-thumb{background:var(--bosque);border-color:var(--lila)}
  .sim.dark .range::-moz-range-thumb{background:var(--bosque);border-color:var(--lila)}
  .sim.dark .scale{color:var(--on-d2)}
  .sim.dark .state,.sim.dark .state li{border-color:var(--line-d)}
  .sim.dark .state li > span:first-child{color:var(--on-d2)}
  .sim.dark .state .v.off i{background:var(--line-d)}
  .sim.dark .switch{color:var(--on-d)}
  .sim.dark .switch .tr{background:var(--tint-d);box-shadow:inset 0 0 0 1.5px var(--on-d2)}
  .sim.dark .switch .kn{background:var(--piedra)}
  .sim.dark .switch[aria-checked="true"] .tr{background:var(--lila);box-shadow:none}
  .sim.dark .switch[aria-checked="true"] .kn{background:var(--bosque)}
}
@media (max-width:920px){
  .sim.dark{background:transparent;color:var(--ink)}
  .sim.dark h3{color:var(--ink)}
  .sim.dark :focus-visible{outline-color:var(--bosque)}
}
.final{padding-top:clamp(80px,9vw,128px)}


.bh{flex-wrap:wrap}
.seg{order:3;width:100%;margin:8px 0 0}
.seg button{flex:1}
/* Objetivos táctiles de 44 px en el teléfono de la demo cuando se usa con el dedo (regla 9) */
@media (max-width:920px), (pointer:coarse){
  .seg button{min-height:44px;font-size:.8rem}
  .q{min-height:44px;font-size:.84rem}
  .opt{min-height:44px}
}

.vs h2{font-size:clamp(2.1rem,3.8vw,3.4rem);overflow-wrap:anywhere}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--bosque);color:var(--piedra);padding:12px 18px;border-radius:14px;font-size:.9rem;font-weight:600;opacity:0;transition:.35s var(--ease);z-index:130;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Volver arriba (D-31): aparece tras 400 px, se esconde cerca del pie. Lila porque es una acción */
.to-top{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:80;
  width:48px;height:48px;border-radius:14px;border:0;padding:0;background:var(--lila);color:var(--bosque);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 14px 30px -14px rgba(18,48,42,.6);opacity:0;transform:translateY(12px);visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.to-top.show{opacity:1;transform:none;visibility:visible;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
.to-top svg{width:22px;height:22px}
.to-top:focus-visible{outline:2px solid var(--bosque);outline-offset:3px}

/* Progreso de lectura (D-32): 3 px arriba de todo, encima del encabezado fijo sin taparlo */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:95;pointer-events:none;opacity:0;transition:opacity .3s}
.read-progress.on{opacity:1}
.read-progress i{display:block;height:100%;background:var(--lila);transform-origin:0 50%;transform:scaleX(0)}

/* Reveal de respaldo (sin GSAP) */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .band .track,.huge{animation:none}
}