/* ChispaChile — estilo claro tipo Apple, con el amarillo como acento */
:root{
  --bg:#fbfbfd; --bg-2:#f5f5f7; --card:#ffffff;
  --ink:#1d1d1f; --ink-2:#424245; --muted:#6e6e73; --line:#d2d2d7;
  --volt:#ffd23f; --volt-deep:#e8a800; --spark:#ff6a2b;
  --font:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --r-xl:28px; --r-lg:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.47 var(--font);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.06}
p{margin:0}
:focus-visible{outline:2px solid #0071e3;outline-offset:3px;border-radius:8px}

.grad{background:linear-gradient(92deg,#f5a300 0%,#ffcc1f 45%,#ff6a2b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-size:15px;font-weight:600;color:var(--spark);letter-spacing:-.005em;margin-bottom:14px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;text-decoration:none;font-weight:500;font-size:17px;padding:13px 24px;border-radius:980px;transition:background .2s,transform .2s var(--ease),box-shadow .2s}
.btn:hover{background:#000;transform:scale(1.02);box-shadow:0 8px 30px -10px rgba(0,0,0,.45)}
.btn--sm{font-size:14px;padding:7px 15px}
.btn--lg{font-size:19px;padding:16px 32px}
.link-arrow{font-size:17px;color:#0066cc;text-decoration:none;font-weight:500}
.link-arrow::after{content:" ›";transition:margin .2s}
.link-arrow:hover::after{margin-left:4px}

/* navegación de vidrio */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,251,253,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.is-scrolled{border-bottom-color:rgba(0,0,0,.08)}
.nav__in{max-width:1080px;margin:0 auto;padding:0 22px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:17px;text-decoration:none;letter-spacing:-.02em}
.logo svg{width:24px;height:24px}.logo rect{fill:var(--ink)}.logo path{fill:var(--volt)}
.nav__links{display:flex;gap:30px}
.nav__links a{font-size:13px;color:var(--ink-2);text-decoration:none;transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{display:flex;align-items:center;gap:16px}
.nav__entrar{font-size:13px;text-decoration:none;color:var(--ink-2)}

/* hero */
.hero{max-width:1080px;margin:0 auto;padding:88px 22px 40px;text-align:center}
.hero__t{font-size:clamp(44px,8vw,96px);font-weight:700;letter-spacing:-.045em;line-height:1.02}
.hero__lead{max-width:680px;margin:24px auto 0;font-size:clamp(19px,2.1vw,24px);line-height:1.38;color:var(--muted);letter-spacing:-.02em}
.hero__ctas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px;margin-top:34px}

.stage{position:relative;height:640px;margin-top:64px}
.js .stage{opacity:0;translate:0 40px;transition:opacity 1.2s var(--ease),translate 1.2s var(--ease)}
.js .stage.in{opacity:1;translate:0 0}
.glow{position:absolute;left:50%;top:46%;width:760px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,210,63,.55),rgba(255,106,43,.12) 60%,transparent);filter:blur(30px);pointer-events:none}
.phone{position:absolute;left:50%;top:0;width:300px;height:620px;margin-left:-150px;border-radius:54px;background:#111;padding:12px;box-shadow:0 50px 100px -30px rgba(0,0,0,.45),0 0 0 2px #2a2a2c inset}
.phone__notch{position:absolute;top:22px;left:50%;width:96px;height:28px;margin-left:-48px;border-radius:20px;background:#000;z-index:2}
.screen{height:100%;border-radius:43px;background:var(--bg);padding:62px 20px 20px;text-align:left;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.s-bar{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.s-logo{width:16px;height:16px;border-radius:5px;background:var(--ink);box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 9px var(--volt)}
.s-k{font-size:11px;font-weight:600;color:var(--spark)}
.s-t{font-size:24px;font-weight:700;letter-spacing:-.03em;margin-top:-6px}
.s-doc{background:#fff;border-radius:14px;padding:14px;display:grid;gap:7px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.s-doc i,.mini-doc i{display:block;height:6px;border-radius:4px;background:var(--bg-2)}
.s-doc .w70,.mini-doc .w70{width:70%}.s-doc .w50,.mini-doc .w50{width:50%}
.s-pad{background:#fff;border-radius:14px;height:110px;display:grid;place-items:center;border:1.5px dashed var(--line)}
.s-pad svg{width:86%}
.sig{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:480;stroke-dashoffset:480}
.stage.in .sig{animation:trazo 2.2s .5s var(--ease) forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
.s-btn{background:var(--ink);color:#fff;border-radius:980px;text-align:center;font-size:14px;font-weight:500;padding:12px}
.s-ok{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#1a7f37;opacity:0;transform:translateY(6px)}
.s-ok span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#1a7f37;color:#fff;font-size:11px}
.stage.in .s-ok{animation:sube .6s 2.8s var(--ease) forwards}
@keyframes sube{to{opacity:1;transform:none}}

.chip{position:absolute;background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:14px 18px;text-align:left;box-shadow:0 20px 50px -20px rgba(0,0,0,.25);display:grid;gap:2px}
.chip b{font-size:15px;font-weight:600}.chip span{font-size:13px;color:var(--muted)}
.chip--a{left:calc(50% - 400px);top:110px}
.chip--b{left:calc(50% + 190px);top:200px}
.chip--c{left:calc(50% - 360px);top:420px}

/* banda de cifras */
.band{background:var(--bg-2)}
.band__in{max-width:1080px;margin:0 auto;padding:56px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.band b{display:block;font-size:clamp(40px,5vw,56px);font-weight:700;letter-spacing:-.04em}
.band span{font-size:15px;color:var(--muted)}

/* historia con scroll pegajoso */
.story{max-width:1080px;margin:0 auto;padding:140px 22px 60px}
.story__head{text-align:center;margin-bottom:60px}
.story__head h2,.sect__head h2,.final h2{font-size:clamp(36px,5.6vw,64px);font-weight:700;letter-spacing:-.04em}
.story__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.story__sticky{position:sticky;top:110px;height:min(640px,calc(100vh - 140px));display:grid;place-items:center}
.device{width:min(330px,100%);aspect-ratio:9/17.5;border-radius:48px;background:#111;padding:11px;box-shadow:0 40px 90px -30px rgba(0,0,0,.45)}
.device__screen{position:relative;height:100%;border-radius:38px;background:var(--bg);overflow:hidden}
.pane{position:absolute;inset:0;padding:46px 20px 20px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.pane.is-on{opacity:1;transform:none}
.p-k{font-size:20px;font-weight:700;letter-spacing:-.03em;margin-bottom:6px}
.field{background:#fff;border-radius:12px;padding:10px 12px;display:grid;gap:2px;box-shadow:0 1px 6px rgba(0,0,0,.04)}
.field span{font-size:11px;color:var(--muted)}.field b{font-size:14px;font-weight:600}
.opt{background:#fff;border-radius:12px;padding:12px;font-size:14px;font-weight:500;border:1.5px solid transparent}
.opt.is-sel{border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,210,63,.5)}
.mini-doc{margin-top:auto;background:#fff;border-radius:12px;padding:12px;display:grid;gap:6px}
.mini-doc .hl{background:var(--volt)}
.share{display:flex;gap:6px;flex-wrap:wrap}
.share span{font-size:12px;font-weight:600;background:#fff;border-radius:980px;padding:8px 12px}
.share .wa{background:#25d366;color:#fff}
.bubble{background:#dcf8c6;border-radius:16px 16px 16px 4px;padding:12px;font-size:13px;line-height:1.4}
.done{margin-top:auto;background:#e8f6ec;color:#1a7f37;border-radius:12px;padding:12px;font-size:13px;font-weight:600}
.steps{list-style:none;margin:0;padding:12vh 0}
.step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .5s var(--ease)}
.step.is-on{opacity:1}
.step__n{font-size:15px;font-weight:600;color:var(--spark);margin-bottom:12px}
.step h3{font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-.035em;margin-bottom:14px}
.step p{font-size:21px;line-height:1.42;color:var(--muted);max-width:440px}

/* secciones */
.sect{max-width:1080px;margin:0 auto;padding:120px 22px}
.sect--alt{max-width:none;background:var(--bg-2)}
.sect--alt>*{max-width:1036px;margin-left:auto;margin-right:auto}
.sect__head{text-align:center;margin-bottom:56px}
.sect__lead{max-width:640px;margin:18px auto 0;font-size:21px;color:var(--muted);line-height:1.4}

.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{background:var(--card);border-radius:var(--r-xl);padding:34px;min-height:250px;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 20px rgba(0,0,0,.04);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}
.tile__k{font-size:14px;font-weight:600;color:var(--muted)}
.tile h3{font-size:30px;font-weight:700;letter-spacing:-.035em}
.tile p{font-size:17px;color:var(--muted);line-height:1.42}
.tile--wide{grid-column:span 2;min-height:300px}
.tile--dark{background:linear-gradient(160deg,#1d1d1f,#2c2c2e);color:#f5f5f7}
.tile--dark p,.tile--dark .tile__k{color:#a1a1a6}
.tile--dark h3{font-size:44px}
.tile--accent{background:linear-gradient(150deg,#fff5cc,#ffe27a)}
.tile--accent p,.tile--accent .tile__k{color:#6b5300}
.brands{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap}
.brands span{border:1px solid rgba(255,255,255,.18);border-radius:980px;padding:7px 14px;font-size:14px;font-weight:500}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{background:var(--card);border-radius:var(--r-lg);padding:30px;display:grid;gap:8px;align-content:start}
.feat__i{font-size:30px;line-height:1}
.feat h3{font-size:21px;font-weight:600;letter-spacing:-.02em}
.feat p{font-size:16px;color:var(--muted);line-height:1.45}

.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 40px 24px 0;font-size:21px;font-weight:600;letter-spacing:-.02em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 40px 24px 0;font-size:17px;color:var(--muted);line-height:1.5}

.final{text-align:center;padding:140px 22px 160px}

.foot{background:var(--bg-2);border-top:1px solid var(--line)}
.foot__in{max-width:1080px;margin:0 auto;padding:28px 22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.foot a{color:var(--ink-2)}

/* aparición al hacer scroll (con JS) */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* responsivo */
@media (max-width:980px){
  .chip--a{left:16px;top:60px}.chip--b{left:auto;right:16px;top:240px}.chip--c{left:16px;top:440px}
  .story__grid{grid-template-columns:1fr}
  .story__sticky{top:70px;height:auto;padding:10px 0;z-index:1;background:linear-gradient(var(--bg) 85%,transparent)}
  .device{width:240px}
  .steps{padding:0}
  .step{min-height:46vh}
  .bento,.features{grid-template-columns:1fr 1fr}
  .tile--wide{grid-column:span 2}
}
@media (max-width:640px){
  .nav__links,.nav__entrar{display:none}
  .hero{padding-top:56px}
  .stage{height:560px;transform:scale(.88);transform-origin:top center;margin-top:30px}
  .chip{padding:10px 14px}.chip b{font-size:13px}.chip span{font-size:12px}
  .chip--a{left:-6px}.chip--b{right:-6px}.chip--c{left:-6px}
  .band__in{grid-template-columns:1fr 1fr;gap:28px}
  .bento,.features{grid-template-columns:1fr}
  .tile--wide{grid-column:auto}
  .tile{min-height:0;padding:28px}
  .story{padding-top:100px}
  .device{width:200px}
  .step p{font-size:18px}
  .sect{padding:90px 20px}
}
/* solo se apagan las animaciones que se repiten o mueven mucho */
@media (prefers-reduced-motion:reduce){
  .stage.in .sig{animation:none;stroke-dashoffset:0}
  .stage.in .s-ok{animation:none;opacity:1;transform:none}
  [data-parallax]{transform:none!important}
}
.verif{text-align:center;margin-top:36px}

/* Demo de firma */
.demo__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:960px;margin:0 auto;align-items:center}
.demo__doc{background:#fff;border-radius:var(--r-lg);padding:28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.25);display:grid;gap:10px;aspect-ratio:3/3.6}
.demo__doc i{display:block;height:8px;border-radius:4px;background:var(--bg-2)}
.demo__doc i.c{width:62%}
.demo__k{margin:0;font-size:12px;font-weight:600;color:var(--spark)}
.demo__t{margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.demo__slot{margin-top:auto;height:90px;border-bottom:1.5px solid var(--ink);display:grid;place-items:center;position:relative}
.demo__slot span{font-size:12px;color:var(--muted)}
.demo__slot img{max-height:84px;max-width:100%;animation:demoIn .6s var(--ease) both}
.demo__sello{margin:4px 0 0;font-size:12px;color:#1a7f37;font-weight:500;animation:demoIn .6s .15s var(--ease) both}
.demo__pad{display:grid;gap:14px}
.demo__pad canvas{width:100%;height:230px;background:#fff;border:2px dashed var(--line);border-radius:var(--r-lg);touch-action:none;cursor:crosshair}
.demo__acc{display:flex;gap:10px;flex-wrap:wrap}
.btn--ghost{background:rgba(0,0,0,.06);color:var(--ink)}
.btn--ghost:hover{background:rgba(0,0,0,.1)}
.demo__nojs{color:var(--muted);font-size:14px}
@media (max-width:760px){.demo__grid{grid-template-columns:1fr}.demo__doc{aspect-ratio:auto}}
@keyframes demoIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}