/* Chassis · landing. Tokens tomados del Figma: Outfit (títulos) + Urbanist (texto), azul #6797ff, tinta #252525 */
:root{
  --ink:#252525;
  --ink-2:#2f2f2f;
  --ink-3:#383838;
  --paper:#f1f1f1;
  --muted:#a9a9a9;
  --blue:#6797ff;
  --blue-d:#4d7fee;
  --line:rgba(255,255,255,.12);
  --f-head:'Outfit',system-ui,sans-serif;
  --f-body:'Urbanist',system-ui,sans-serif;
  --gutter:clamp(20px,4.2vw,60px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 16px/1.5 var(--f-body);color:var(--ink);background:var(--ink);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:20px 0 auto 0;z-index:50;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.nav>*{pointer-events:auto}
.logo{display:flex;align-items:center;gap:10px;font:600 24px/1 var(--f-head);letter-spacing:-.01em;color:var(--ink);transition:color .3s}
.logo svg{width:28px;height:24px}
.menu{display:flex;align-items:center;gap:6px;padding:0;border-radius:999px;border:1px solid transparent;transition:background .35s,border-color .35s,padding .35s,backdrop-filter .35s}
.menu a.lk{padding:9px 14px;border-radius:999px;font-size:14px;color:var(--ink);transition:color .3s,background .2s}
.menu a.lk:hover{background:rgba(37,37,37,.07)}
.menu a.lk.on{font-weight:600}
.pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:500;white-space:nowrap;border:0;cursor:pointer;transition:background .2s,transform .2s}
.pill:hover{background:#000}
.nav.is-pill .logo{color:#fff}
.nav.is-pill .menu{background:rgba(37,37,37,.72);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-color:var(--line);padding:5px}
.nav.is-pill .menu a.lk{color:#d9d9d9}
.nav.is-pill .menu a.lk:hover{background:rgba(255,255,255,.1)}
.nav.is-pill .menu a.lk.on{color:#fff}
.nav.is-pill .pill{background:#fff;color:var(--ink)}
.nav.is-pill .pill:hover{background:#e8e8e8}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(37,37,37,.8);backdrop-filter:blur(10px);cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span::before{display:block;width:16px;height:2px;background:#fff;border-radius:2px;position:relative;transition:.25s}
.burger span::before{content:"";position:absolute;top:-5px;left:0}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{content:"";position:absolute;left:0;top:0;width:16px;height:2px;background:#fff;transform:rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(760px,98vw,1500px);background:#e9e6e1 url(../img/hero.jpg) 50% 52%/cover no-repeat;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(110px,10vw,150px) var(--gutter) 0;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(180deg,rgba(37,37,37,0),var(--ink));pointer-events:none}
.hero>*{position:relative;z-index:1}
.tag{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-size:13px;font-weight:500}
.tag i{width:7px;height:7px;background:var(--blue);transform:rotate(45deg);display:block}
.hero h1{font:600 clamp(38px,5vw,72px)/1.04 var(--f-head);letter-spacing:-.025em;color:#141414;margin:18px 0 18px;text-wrap:balance;max-width:14em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p.sub{max-width:34em;font-size:clamp(15px,1.25vw,18px);color:#2b2b2b;text-wrap:balance}
.cta{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 28px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;font-size:16px;box-shadow:0 8px 24px rgba(103,151,255,.45);transition:transform .2s,box-shadow .2s,background .2s;border:0;cursor:pointer}
.cta:hover{background:var(--blue-d);transform:translateY(-1px);box-shadow:0 12px 30px rgba(103,151,255,.55)}
.cta svg{width:16px;height:16px}
.hero .cta{margin-top:30px}
.demo-link{margin-top:14px;font-size:15px;font-weight:500;color:#1b1b1b;border-bottom:1px solid transparent}
.demo-link:hover{border-color:currentColor}

/* ---------- Secciones oscuras ---------- */
.dark{position:relative;background:var(--ink);color:var(--paper)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.badge{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:22px}
.badge::before,.badge::after{content:"";height:1px;width:clamp(40px,9vw,110px);background:linear-gradient(90deg,transparent,rgba(255,255,255,.4))}
.badge::after{transform:scaleX(-1)}
.badge span{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:13px;font-weight:500;color:#e6e6e6}
.badge span i{width:6px;height:6px;background:var(--blue);transform:rotate(45deg)}
h2.t{font:500 clamp(30px,3.9vw,54px)/1.1 var(--f-head);letter-spacing:-.02em;text-align:center;text-wrap:balance;margin:0 auto;max-width:16em}
.lead{max-width:36em;margin:18px auto 0;text-align:center;color:var(--muted);font-size:17px;text-wrap:balance}

/* Mockup */
.stage{position:relative;padding:clamp(40px,6vw,90px) 0 clamp(70px,9vw,130px);overflow:hidden}
.stage::before{content:"";position:absolute;left:50%;top:18%;width:min(1100px,140vw);height:70%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(103,151,255,.5),rgba(103,151,255,.14) 55%,transparent 75%);filter:blur(30px);pointer-events:none}
.stage>*{position:relative}
.app{margin:clamp(34px,5vw,64px) auto 0;max-width:1040px;border-radius:26px;padding:9px;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05));box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08) inset}
.app-in{display:grid;grid-template-columns:210px 1fr;border-radius:19px;background:#161616;overflow:hidden;min-height:480px;text-align:left}
.side{border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.side .brand{display:flex;align-items:center;gap:8px;font:600 16px var(--f-head);padding:2px 8px 14px}
.side .brand svg{width:20px;height:17px}
.side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:#9a9a9a}
.side a.on{background:rgba(103,151,255,.16);color:#fff}
.side a b{margin-left:auto;font-size:11px;font-weight:600;background:var(--blue);color:#0f1a33;border-radius:99px;padding:1px 7px}
.side svg.ic{width:16px;height:16px;flex:none}
.main{padding:22px 24px;display:flex;flex-direction:column;gap:16px;min-width:0}
.mh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.mh h3{font:500 20px var(--f-head);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chip{font:600 11px var(--f-body);padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.09);color:#cfcfcf}
.chip.ok{background:rgba(88,200,140,.18);color:#7be0aa}
.chip.live{background:rgba(103,151,255,.2);color:#9db9ff}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.meta div{padding:10px 12px;border-radius:12px;background:#1d1d1d;border:1px solid var(--line);font-size:12px;color:#8e8e8e}
.meta div b{display:block;color:#f1f1f1;font-weight:600;font-size:14px;margin-top:2px;word-break:break-all}
.parts{display:flex;flex-wrap:wrap;gap:8px}
.parts span{font-size:12.5px;padding:6px 12px;border-radius:99px;border:1px solid var(--line);color:#d4d4d4}
.q{display:flex;flex-direction:column;gap:8px}
.q-h{font-size:12px;color:#8e8e8e;display:flex;justify-content:space-between}
.row{display:grid;grid-template-columns:1.4fr .9fr .8fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:#1d1d1d;border:1px solid var(--line);font-size:14px;transition:border-color .25s,background .25s}
.row small{display:block;color:#8e8e8e;font-size:12px}
.row .pr{font:500 16px var(--f-head)}
.row.best{border-color:rgba(103,151,255,.55)}
.row.won{border-color:#58c88c;background:rgba(88,200,140,.08)}
.row.lost{opacity:.45}
.row button{height:34px;padding:0 16px;border-radius:99px;border:0;background:#fff;color:var(--ink);font-weight:600;font-size:13px;cursor:pointer;transition:background .2s}
.row button:hover{background:#e3e3e3}
.row button:disabled{background:transparent;color:#7be0aa;cursor:default}
.rec{font-size:11px;color:var(--blue);font-weight:600}
.hint{text-align:center;font-size:13px;color:var(--muted);margin-top:16px}

/* Franja de actores */
.strip{overflow:hidden;padding:6px 0 clamp(60px,8vw,110px);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:16px;width:max-content;animation:slide 38s linear infinite}
.track:hover{animation-play-state:paused}
.track span{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px;border-radius:999px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));font:500 18px var(--f-head);white-space:nowrap}
.track span svg{width:20px;height:20px;color:var(--blue)}
@keyframes slide{to{transform:translateX(-50%)}}

/* Cómo funciona */
.sec{padding:clamp(60px,8vw,120px) 0}
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:clamp(36px,5vw,64px)}
.card{border-radius:24px;padding:28px;background:linear-gradient(180deg,var(--ink-2),#2a2a2a);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-width:0}
.card h3{font:500 22px/1.2 var(--f-head);letter-spacing:-.01em}
.card p{color:var(--muted);font-size:15px}
.card .n{width:38px;height:38px;border-radius:12px;background:rgba(103,151,255,.16);color:var(--blue);display:grid;place-items:center;font:600 15px var(--f-head)}
.c1{grid-column:span 3}.c2{grid-column:span 3}.c3{grid-column:span 2}.c4{grid-column:span 2}.c5{grid-column:span 2}
.card.big{background:radial-gradient(120% 120% at 0 0,rgba(103,151,255,.22),transparent 55%),linear-gradient(180deg,var(--ink-2),#2a2a2a)}

/* Precios */
.pricing{position:relative;overflow:hidden}
.pricing::before{content:"";position:absolute;left:50%;top:40%;width:min(900px,120vw);height:520px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(103,151,255,.45),rgba(60,90,200,.16) 60%,transparent 78%);filter:blur(40px)}
.pricing>*{position:relative}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(36px,5vw,60px);align-items:stretch}
.plan{border-radius:28px;padding:30px 28px;background:rgba(30,30,30,.55);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:16px;min-width:0}
.plan.hi{border-color:rgba(103,151,255,.7);box-shadow:0 0 0 1px rgba(103,151,255,.25),0 0 50px rgba(103,151,255,.25)}
.plan h3{font:500 22px var(--f-head);color:#dcdcdc}
.plan .pp{font:500 38px/1 var(--f-head);letter-spacing:-.02em}
.plan .pp small{font:400 15px var(--f-body);color:var(--muted);letter-spacing:0}
.plan p.d{font-size:14px;color:var(--muted)}
.plan ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px;font-size:14.5px;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.8 2.8L14.2 7.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.plan .go{display:grid;place-items:center;height:46px;border-radius:99px;background:#fff;color:var(--ink);font-weight:600;transition:background .2s}
.plan .go:hover{background:#e3e3e3}
.note{text-align:center;color:#8a8a8a;font-size:13px;margin-top:22px}

/* Lista de espera */
.waitlist{padding:clamp(50px,7vw,100px) 0 clamp(60px,8vw,110px)}
.wl{max-width:760px;margin:0 auto;border-radius:32px;padding:clamp(28px,5vw,56px);text-align:center;background:radial-gradient(90% 140% at 50% 0,rgba(103,151,255,.28),transparent 60%),var(--ink-2);border:1px solid var(--line)}
.wl h2{font:500 clamp(26px,3.2vw,40px)/1.12 var(--f-head);letter-spacing:-.02em;text-wrap:balance}
.wl p{color:var(--muted);margin:12px auto 26px;max-width:30em}
.bar{display:flex;gap:8px;max-width:520px;margin:0 auto;padding:6px;border-radius:999px;background:#1b1b1b;border:1px solid var(--line)}
.bar input{flex:1;min-width:0;background:transparent;border:0;padding:0 18px;font-size:16px;color:#fff;outline:0}
.bar input::placeholder{color:#808080}
.bar:focus-within{border-color:var(--blue)}
.bar .cta{height:46px;box-shadow:none;white-space:nowrap}
.hp{position:absolute;left:-9999px}
.msg{min-height:22px;margin-top:14px;font-size:14px;color:var(--muted)}
.msg.ok{color:#7be0aa}.msg.err{color:#ff9d9d}

footer{border-top:1px solid var(--line);padding:30px 0 40px;color:#8f8f8f;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .logo{color:#fff;font-size:20px}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer a:hover{color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .flow{grid-template-columns:repeat(2,1fr)}
  .c1,.c2,.c3,.c4,.c5{grid-column:span 1}
  .c5{grid-column:span 2}
  .plans{grid-template-columns:1fr;max-width:480px;margin-inline:auto}
}
@media (max-width:820px){
  .app-in{grid-template-columns:1fr}
  .side{display:none}
  .row{grid-template-columns:1fr auto}
  .row .pr,.row .dl{grid-column:1}
  .row button{grid-column:2;grid-row:1/span 2}
}
@media (max-width:760px){
  .nav{inset:14px 0 auto 0}
  .burger{display:flex}
  .menu{position:absolute;top:56px;right:var(--gutter);flex-direction:column;align-items:stretch;gap:2px;min-width:230px;padding:8px;border-radius:22px;background:rgba(37,37,37,.94);border:1px solid var(--line);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s}
  .menu.open{opacity:1;visibility:visible;transform:none}
  .menu a.lk{color:#e6e6e6;padding:12px 14px}
  .menu a.lk:hover{background:rgba(255,255,255,.1)}
  .menu .pill{background:#fff;color:var(--ink);justify-content:center;margin-top:4px}
  .nav.is-pill .menu{padding:8px}
  .hero{background-position:62% 100%;min-height:max(1080px,250vw)}
  .flow{grid-template-columns:1fr}
  .c5{grid-column:span 1}
  .bar{flex-direction:column;border-radius:26px;padding:8px}
  .bar input{height:46px;text-align:center}
  .bar .cta{width:100%;justify-content:center}
  footer .wrap{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track{animation:none}
  *{transition-duration:.01ms!important}
}

.nav::before{content:"";position:absolute;inset:-20px 0 -34px 0;background:linear-gradient(180deg,rgba(37,37,37,.92),rgba(37,37,37,0));opacity:0;transition:opacity .35s;pointer-events:none;z-index:-1}
.nav.is-pill::before{opacity:1}