/* =========================================================
   Codevia — sistema base compartido
   ========================================================= */
:root{
  --ink:#0a0918;
  --ink-2:#110f24;
  --panel:#16132e;
  --panel-2:#1c1840;
  --line:#28244a;
  --line-2:#3a3570;
  --text:#efedfb;
  --muted:#a29ec6;
  --dim:#6f6a98;
  --blue:#5b8cff;
  --violet:#a35cf7;
  --pink:#f0529c;
  --ok:#3ddc97;
  --warn:#ffc15e;
  --bad:#ff6b8b;
  --wa:#25d366;
  --grad:linear-gradient(90deg,var(--blue),var(--violet) 55%,var(--pink));
  --field:#0d0b20;
  --track:#221e44;
  --sunk:#0b0a1c;
  --raised:#1b1740;
  --nav-bg:rgba(10,9,24,.8);
  --radius:18px;
  --wrap:1180px;
  --display:"Plus Jakarta Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--text);font-family:var(--display);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;animation:pagein .5s var(--ease)}
@keyframes pagein{from{opacity:0}to{opacity:1}}
body.leaving{opacity:0;transition:opacity .22s}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
::selection{background:rgba(163,92,247,.45)}
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:.6em}
.eyebrow b{color:var(--violet);font-weight:500}
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.025em;font-weight:800}
h2{font-size:clamp(2rem,4.4vw,3.3rem);margin:.5rem 0 1rem}
.lead{color:var(--muted);font-size:1.1rem;max-width:56ch}
section{scroll-margin-top:64px;position:relative;padding:clamp(80px,11vw,140px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap;margin-bottom:56px}
.sec-head .lead{max-width:44ch}
.band{background:var(--ink-2);border-block:1px solid var(--line)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.95em 1.4em;border-radius:999px;font-weight:700;font-size:.98rem;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,opacity .2s;white-space:nowrap}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -10px rgba(163,92,247,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(240,82,156,.7)}
.btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--violet);background:rgba(163,92,247,.08)}
.btn-wa{background:var(--wa);color:#062b16}
.btn-wa:hover{transform:translateY(-2px)}
.btn-sm{padding:.55em 1em;font-size:.86rem}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}
.icon-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);display:inline-grid;place-items:center;transition:.2s;flex:none}
.icon-btn:hover{border-color:var(--violet);background:rgba(163,92,247,.12)}
.icon-btn svg{width:16px;height:16px}

/* ---------- chips / pills ---------- */
.chip{font-size:.82rem;padding:.4em .9em;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.02);transition:.2s;display:inline-flex;align-items:center;gap:.4em}
button.chip:hover{border-color:var(--line-2);color:var(--text)}
.chip[aria-pressed="true"],.chip.on{background:var(--text);color:var(--ink);border-color:var(--text);font-weight:700}
.pill{font-size:.72rem;font-weight:600;padding:.28em .7em;border-radius:999px;white-space:nowrap;display:inline-block}
.pill.ok{background:rgba(61,220,151,.12);color:var(--ok)}
.pill.warn{background:rgba(255,193,94,.12);color:var(--warn)}
.pill.bad{background:rgba(255,107,139,.12);color:var(--bad)}
.pill.info{background:rgba(91,140,255,.14);color:var(--blue)}

/* ---------- formularios ---------- */
.field{display:grid;gap:8px}
.field>label,.label{font-weight:600;font-size:.92rem}
.field small{color:var(--dim);font-size:.8rem}
.input,select.input,textarea.input{width:100%;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:.75em .95em;outline:none;transition:border-color .2s,box-shadow .2s}
.input:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(163,92,247,.15)}
textarea.input{resize:vertical;min-height:110px;line-height:1.5}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23a29ec6' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:2.4em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:9px;background:linear-gradient(90deg,var(--violet) var(--p,50%),var(--track) var(--p,50%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:5px solid var(--violet);cursor:grab;box-shadow:0 4px 14px rgba(163,92,247,.6)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:5px solid var(--violet);cursor:grab}
input[type=range]:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:14px 16px;border:1px solid var(--line);border-radius:14px;transition:.2s}
.check:hover{border-color:var(--line-2)}
.check input{appearance:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--line-2);flex:none;display:grid;place-items:center;transition:.2s;margin-top:1px}
.check input::after{content:"";width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) scale(0);transition:.2s;margin-top:-3px}
.check input:checked{background:var(--violet);border-color:var(--violet)}
.check input:checked::after{transform:rotate(-45deg) scale(1)}
.check:has(input:checked){border-color:rgba(163,92,247,.5);background:rgba(163,92,247,.06)}

/* ---------- tarjetas ---------- */
.card{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);position:relative;overflow:hidden;transition:transform .3s,border-color .3s}
.card.hover:hover{transform:translateY(-4px);border-color:#3d3775}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(163,92,247,.12),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::before{opacity:1}
.ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(163,92,247,.12);border:1px solid rgba(163,92,247,.25);flex:none}
.ic svg{width:26px;height:26px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled,.nav.solid{background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.35rem;letter-spacing:-.03em;flex:none}
.logo svg{width:30px;height:30px}
.logo .via{background:linear-gradient(90deg,var(--violet),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav ul{display:flex;gap:1.8rem;list-style:none;font-size:.95rem;color:var(--muted)}
.nav ul a{transition:color .2s;position:relative;padding:6px 0}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--text)}
.nav ul a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--grad)}
.nav-right{display:flex;align-items:center;gap:10px}
.kbd-btn{display:inline-flex;align-items:center;gap:8px;padding:.5em .8em;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:.82rem;transition:.2s}
.kbd-btn:hover{border-color:var(--line-2);color:var(--text)}
.kbd-btn svg{width:15px;height:15px}
kbd{font-family:var(--mono);font-size:.72rem;padding:.1em .45em;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;color:var(--muted);background:var(--field)}
.nav .btn{padding:.65em 1.1em;font-size:.9rem}
.menu-btn{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);align-items:center;justify-content:center}
.menu-btn span{display:block;width:18px;height:2px;background:var(--text);position:relative;transition:.3s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text);transition:.3s}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.nav.open .menu-btn span{background:transparent}
.nav.open .menu-btn span::before{top:0;transform:rotate(45deg)}
.nav.open .menu-btn span::after{top:0;transform:rotate(-45deg)}

/* ---------- page hero (subpáginas) ---------- */
.page-hero{padding:150px 0 70px;overflow:hidden}
.page-hero h1{font-size:clamp(2.5rem,6vw,4.6rem);margin:1rem 0 1.2rem;max-width:18ch}
.crumbs{font-family:var(--mono);font-size:.78rem;color:var(--dim);display:flex;gap:.6em;align-items:center}
.crumbs a:hover{color:var(--text)}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.55}
.glow.a{width:620px;height:620px;background:#3b2a9c;top:-220px;right:-160px}
.glow.b{width:520px;height:520px;background:#1d3b9e;bottom:-260px;left:-200px;opacity:.5}
.glow.c{width:300px;height:300px;background:#8a2a78;top:40%;right:22%;opacity:.25}
.gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%);pointer-events:none}

/* ---------- WhatsApp burbujas ---------- */
.bubble{background:#0f3d33;color:#e7fff5;border-radius:14px 14px 4px 14px;padding:12px 14px;font-size:.92rem;line-height:1.5;margin-left:auto;max-width:92%;position:relative;white-space:pre-wrap;word-wrap:break-word}
.bubble.in{background:#1f2c28;margin-left:0;margin-right:auto;border-radius:14px 14px 14px 4px}
.bubble .caret{display:inline-block;width:2px;height:1em;background:#9ff5d1;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.phone{border:1px solid var(--line);border-radius:28px;background:#0c1512;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.phone-top{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#12201b;border-bottom:1px solid #1d3029}
.phone-top b{font-size:.95rem;display:block}
.phone-top small{font-size:.75rem;color:#7fa596}
.chat{padding:18px;display:grid;gap:10px;min-height:260px;align-content:end;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:18px 18px}
.chat-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid #1d3029;background:#12201b;font-size:.85rem;color:#9cc2b3;flex-wrap:wrap}
.chat-foot button,.chat-foot a{font-weight:700;color:#7ef0bf}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem;background:var(--raised);color:#cfc9ff;flex:none}
.av.brand{background:linear-gradient(135deg,var(--blue),var(--pink));color:#fff}

/* ---------- modal / drawer ---------- */
.overlay{position:fixed;inset:0;background:rgba(5,4,14,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s}
.overlay.open{opacity:1;pointer-events:auto}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);width:min(560px,100% - 24px);max-height:calc(100vh - 40px);overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:22px;z-index:95;opacity:0;pointer-events:none;transition:.28s var(--ease);box-shadow:0 40px 100px -20px rgba(0,0,0,.8)}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:1.2rem;letter-spacing:-.015em}
.modal-body{padding:22px;display:grid;gap:16px}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--panel);border-left:1px solid var(--line-2);z-index:95;transform:translateX(102%);transition:transform .38s var(--ease);display:flex;flex-direction:column;box-shadow:-30px 0 80px rgba(0,0,0,.6)}
.drawer.open{transform:none}
.drawer .modal-body{overflow:auto;flex:1;align-content:start}

/* ---------- command palette ---------- */
.cmdk{position:fixed;left:50%;top:14vh;transform:translateX(-50%) scale(.98);width:min(620px,100% - 24px);background:var(--panel);border:1px solid var(--line-2);border-radius:18px;z-index:120;opacity:0;pointer-events:none;transition:.2s var(--ease);box-shadow:0 40px 120px -20px rgba(0,0,0,.9),0 0 0 1px rgba(163,92,247,.15);overflow:hidden}
.cmdk.open{opacity:1;pointer-events:auto;transform:translateX(-50%)}
.cmdk-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.cmdk-in svg{width:18px;height:18px;color:var(--muted);flex:none}
.cmdk-in input{flex:1;background:none;border:0;outline:none;font-size:1.05rem}
.cmdk-list{max-height:50vh;overflow:auto;padding:8px;list-style:none}
.cmdk-group{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:10px 12px 6px}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer;font-size:.95rem}
.cmdk-item .ci{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--raised);flex:none}
.cmdk-item .ci svg{width:16px;height:16px}
.cmdk-item small{margin-left:auto;color:var(--dim);font-size:.78rem}
.cmdk-item[aria-selected="true"]{background:rgba(163,92,247,.16)}
.cmdk-empty{padding:28px;text-align:center;color:var(--muted);font-size:.92rem}
.cmdk-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);font-size:.75rem;color:var(--dim)}

/* ---------- footer ---------- */
footer.site{padding:64px 0 36px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-grid h4{font-size:.78rem;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:500;margin-bottom:14px}
.foot-grid ul{list-style:none;display:grid;gap:8px}
.foot-grid a:hover{color:var(--text)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:.82rem;color:var(--dim)}
.foot-bottom .tags{font-family:var(--mono)}

/* ---------- CTA final ---------- */
.cta{text-align:center;overflow:hidden}
.cta-box{position:relative;border-radius:36px;padding:clamp(56px,9vw,110px) 24px;border:1px solid rgba(163,92,247,.35);background:radial-gradient(700px 360px at 50% 0%,rgba(163,92,247,.3),transparent 70%),radial-gradient(500px 300px at 10% 100%,rgba(91,140,255,.22),transparent 70%),radial-gradient(500px 300px at 90% 100%,rgba(240,82,156,.2),transparent 70%),var(--ink-2);overflow:hidden}
.cta-box>*{position:relative}
.cta h2{font-size:clamp(2.4rem,6vw,4.6rem);max-width:15ch;margin:1rem auto}
.cta .lead{margin:0 auto 2.2rem}
.cta .ctas{justify-content:center}
.big-brackets{position:absolute!important;font-family:var(--mono);font-weight:700;font-size:clamp(10rem,30vw,26rem);line-height:1;color:rgba(255,255,255,.025);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,160%);background:var(--text);color:var(--ink);padding:.8em 1.2em;border-radius:12px;font-weight:700;font-size:.9rem;z-index:200;transition:transform .35s var(--ease);box-shadow:0 12px 30px rgba(0,0,0,.4);display:flex;align-items:center;gap:.6em;max-width:calc(100% - 32px)}
.toast.show{transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;color:#1a9c62;flex:none}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
.load{opacity:0;transform:translateY(18px);animation:up .9s var(--ease) forwards}
.l2{animation-delay:.12s}.l3{animation-delay:.24s}.l4{animation-delay:.36s}.l5{animation-delay:.5s}
@keyframes up{to{opacity:1;transform:none}}

/* ---------- barra de progreso de scroll ---------- */
.scroll-bar{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:var(--grad);z-index:60;pointer-events:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .kbd-btn .kl{display:none}
}
@media (max-width:860px){
  .nav ul,.nav .nav-cta,.nav .kbd-btn{display:none}
  .menu-btn{display:flex}
  .nav.open{background:var(--ink)}
  .nav.open ul{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;padding:12px 16px 28px;gap:0;background:var(--ink);border-bottom:1px solid var(--line)}
  .nav.open ul a{display:block;padding:14px 0;font-size:1.1rem;color:var(--text);border-bottom:1px solid var(--line)}
  .nav.open ul a[aria-current="page"]::after{display:none}
  .nav.open ul a[aria-current="page"]{color:var(--violet)}
}
@media (max-width:520px){
  body{font-size:16px}
  .foot-grid{grid-template-columns:1fr}
  .card{padding:24px}
  .ctas .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.load{opacity:1;transform:none}
}

/* ---------- calculadora compartida ---------- */
.calc-box{display:grid;grid-template-columns:1fr 1.1fr;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--ink-2)}
.calc-in{padding:clamp(28px,4vw,48px);display:grid;gap:30px;align-content:start}
.calc-in label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;margin-bottom:12px}
.calc-in output{font-family:var(--mono);font-weight:700;font-size:1.15rem}
.dotbars{display:grid;grid-template-columns:repeat(20,1fr);gap:4px}
.dotbars i{aspect-ratio:1;border-radius:3px;background:var(--track);transition:background .3s}
.dotbars i.late{background:var(--bad)}
.calc-out{padding:clamp(28px,4vw,48px);background:radial-gradient(600px 400px at 100% 0%,rgba(163,92,247,.22),transparent 60%),radial-gradient(500px 400px at 0% 100%,rgba(91,140,255,.18),transparent 60%),var(--field);border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.big{font-size:clamp(3.4rem,8vw,6.2rem);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.calc-out p{color:var(--muted);margin-top:.6rem;font-size:1.05rem}
.formula{margin-top:1.8rem;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.25);font-family:var(--mono);font-size:.85rem;color:var(--muted)}
.formula strong{color:var(--text);font-family:var(--display);display:block;margin-top:.4rem;font-size:1rem}
.formula .hl{color:var(--ok)}
.year b{color:var(--text)}
@media (max-width:980px){.calc-box{grid-template-columns:1fr}.calc-out{border-left:0;border-top:1px solid var(--line)}}

/* ---------- accesibilidad ---------- */
.a11y-btn{width:38px;height:38px;border-radius:10px}
.a11y-btn svg{width:19px;height:19px}
.a11y-pop{position:fixed;top:78px;right:max(16px,calc((100vw - var(--wrap))/2));z-index:70;width:290px;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:16px;display:grid;gap:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.85);opacity:0;transform:translateY(-8px);pointer-events:none;transition:.22s var(--ease)}
.a11y-pop.open{opacity:1;transform:none;pointer-events:auto}
.a11y-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.a11y-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.92rem;font-weight:600;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer}
.a11y-row input{appearance:none;width:40px;height:24px;border-radius:99px;background:var(--track);position:relative;cursor:pointer;transition:.2s;flex:none}
.a11y-row input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.a11y-row input:checked{background:var(--violet)}
.a11y-row input:checked::after{transform:translateX(16px)}
.a11y-size{display:flex;align-items:center;gap:6px}
.a11y-size button{width:36px;height:30px;border-radius:8px;border:1px solid var(--line-2);font-weight:800;font-size:.8rem}
.a11y-size button:hover{border-color:var(--violet)}
.a11y-size output{font-family:var(--mono);font-size:.8rem;min-width:44px;text-align:center}
html.hc{--muted:#dcd9f5;--dim:#bdb9e3;--line:#5b5596;--line-2:#7c76bb;--ink-2:#0a0918;--panel:#0f0d24}
html.hc body{background:#000}
html.hc .grad{background:none;-webkit-background-clip:initial;background-clip:initial;color:#d7c2ff}
html.hc .btn-primary{background:#7c3aed}
html.hc .pill{outline:1px solid currentColor}
html.no-motion *,html.no-motion *::before,html.no-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
html.no-motion .reveal,html.no-motion .load{opacity:1!important;transform:none!important}
html.no-motion .mq-track{animation:none!important}
html.ul-links a:not(.btn):not(.logo):not(.card):not(.ig){text-decoration:underline;text-underline-offset:3px}
.link-btn{color:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:var(--text)}
.foot-bottom kbd{font-size:.65rem}

/* ---------- atajos ---------- */
.keys-body{gap:6px!important}
.keys-body h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:500;margin:10px 0 4px}
.keys-body h4:first-child{margin-top:0}
.kr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.kr kbd{font-size:.78rem;padding:.2em .55em}

/* ---------- confeti ---------- */
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:300}
@media (max-width:860px){.a11y-btn{display:none}}


/* =========================================================
   Tema claro
   ========================================================= */
html[data-theme="light"]{
  color-scheme:light;
  --ink:#f6f5fb;--ink-2:#eeecf7;--panel:#ffffff;--panel-2:#f4f2fb;
  --line:#e1ddf0;--line-2:#cbc5e6;--text:#17142e;--muted:#55507a;--dim:#8984aa;
  --field:#ffffff;--track:#e7e3f5;--sunk:#f1eff9;--raised:#f4f2fb;
  --ok:#0f9a64;--warn:#b26b00;--bad:#d42f58;--nav-bg:rgba(246,245,251,.86);
}
html[data-theme="light"] .glow{opacity:.16}
html[data-theme="light"] .gridbg{background-image:linear-gradient(rgba(40,20,120,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(40,20,120,.06) 1px,transparent 1px)}
html[data-theme="light"] .card{background:#fff;box-shadow:0 1px 0 rgba(20,10,60,.03),0 10px 30px -18px rgba(40,20,120,.18)}
html[data-theme="light"] .btn-primary{box-shadow:0 10px 26px -12px rgba(163,92,247,.55)}
html[data-theme="light"] .overlay{background:rgba(30,20,70,.35)}
html[data-theme="light"] .modal,html[data-theme="light"] .drawer,html[data-theme="light"] .cmdk{box-shadow:0 40px 100px -30px rgba(30,20,70,.45)}
html[data-theme="light"] ::selection{background:rgba(163,92,247,.25)}
html[data-theme="light"] .big-brackets{color:rgba(40,20,120,.04)}
html[data-theme="light"] .pill.ok{background:rgba(15,154,100,.12)}
html[data-theme="light"] .pill.warn{background:rgba(178,107,0,.12)}
html[data-theme="light"] .pill.bad{background:rgba(212,47,88,.1)}

/* islas oscuras: mockups de producto que se quedan oscuros en ambos temas */
html[data-theme="light"] :is(.app,.shell,.x3d,.phone,.sysmock,.term,.stage,.ba-after,.story .vis,.bot-h .av){
  --ink:#0a0918;--ink-2:#110f24;--panel:#16132e;--panel-2:#1c1840;
  --line:#28244a;--line-2:#3a3570;--text:#efedfb;--muted:#a29ec6;--dim:#6f6a98;
  --field:#0d0b20;--track:#221e44;--sunk:#0b0a1c;--raised:#1b1740;
  --ok:#3ddc97;--warn:#ffc15e;--bad:#ff6b8b;
  color:var(--text)
}

/* ---------- botón de tema ---------- */
.theme-btn{width:38px;height:38px;border-radius:10px;position:relative;overflow:hidden}
.theme-btn svg{width:18px;height:18px;position:absolute;inset:0;margin:auto;transition:transform .45s var(--ease),opacity .3s}
.theme-btn .moon{transform:translateY(0)}
.theme-btn .sun{transform:translateY(140%) rotate(90deg);opacity:0}
html[data-theme="light"] .theme-btn .moon{transform:translateY(-140%) rotate(-90deg);opacity:0}
html[data-theme="light"] .theme-btn .sun{transform:none;opacity:1}
html.theme-anim,html.theme-anim *{transition:background-color .35s,border-color .35s,color .35s!important}

html[data-theme="light"] .term{background:#0b0a1c}

.toast-act{margin-left:6px;padding:.3em .7em;border-radius:8px;background:var(--ink);color:var(--text);font-weight:800;font-size:.82rem}
.toast-act:hover{background:var(--violet);color:#fff}
.toast{pointer-events:auto}

/* ---------- botones magnéticos ---------- */
.btn-primary.mag{transition:transform .25s var(--ease),box-shadow .2s}

/* ---------- saltar al contenido ---------- */
.skip{position:fixed;left:16px;top:-60px;z-index:400;padding:.7em 1.1em;border-radius:10px;background:var(--text);color:var(--ink);font-weight:800;transition:top .2s}
.skip:focus{top:14px}