/* ==========================================================================
   KROVO — test.usakrovo.com
   Landing de diagnóstico. Sitio independiente: mismo sistema visual que
   usakrovo.com pero sin compartir un solo archivo con él.
   ========================================================================== */

@font-face{font-family:'Ethnocentric';src:url(/assets/fonts/ethnocentric.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'KROVO Display';src:url(/assets/fonts/michroma.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(/assets/fonts/ibm-plex-sans-var.woff2) format('woff2-variations');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#000;
  --panel:#050505;
  --ink:#E8E8E8;
  --ink-2:#B7B7B7;
  --ink-3:#c9c9c9;
  --dim:#8a8a8a;
  --dim-2:#7d7d7d;
  --dim-3:#9c9c9c;
  --mute:#5e5e5e;
  --mute-2:#4f4f4f;
  --faint:#3d3d3d;
  --line:#1a1d21;
  --line-2:#16181b;
  --line-3:#141619;
  --bd:#2e3238;
  --bd-2:#282c31;
  --edge:rgba(255,255,255,.055);

  --font-display:'Ethnocentric','KROVO Display',ui-sans-serif,system-ui,sans-serif;
  --font-sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --top-h:54px;
  --wrap:1240px;
  --pad:20px;
  --ease:cubic-bezier(.16,1,.3,1);

  --c0:#60aaf3; --c0rgb:96,170,243;
  --c1:#75d079; --c1rgb:117,208,121;
  --c2:#dabc43; --c2rgb:218,188,67;
  --c3:#f87966; --c3rgb:248,121,102;
  --c4:#b984df; --c4rgb:185,132,223;
  --c5:#56c4ca; --c5rgb:86,196,202;
  --acc:var(--c0); --acc-rgb:var(--c0rgb);
}

/* ---------- Reset --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--bg);-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;line-height:1.55;
  overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:rgba(255,255,255,.08);
}
h1,h2,h3,p,ul,ol,figure,form{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:#fff;text-decoration:none;transition:color .3s}
a:hover{color:var(--ink-2)}
::selection{background:#fff;color:#000}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
h1[tabindex],h2[tabindex]{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:fixed;top:8px;left:8px;z-index:300;transform:translateY(-160%);
  padding:12px 18px;background:#fff;color:#000;
  font:600 11px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;
  transition:transform .25s var(--ease);
}
.skip:focus{transform:none;color:#000}

/* ---------- Marca --------------------------------------------------------- */
.mark{
  display:block;flex:none;background:#fff;
  -webkit-mask:url(/assets/img/krovo-mark.png) center/contain no-repeat;
  mask:url(/assets/img/krovo-mark.png) center/contain no-repeat;
}
.mark--chrome{background:linear-gradient(115deg,#3a3a3a,#d8d8d8 20%,#fff 33%,#8f8f8f 48%,#232323 60%,#cfcfcf 82%,#4a4a4a)}
.mark--sm{width:19px;height:19px}
.wordmark{
  display:block;flex:none;width:72px;height:8.6px;background:#fff;
  -webkit-mask:url(/assets/img/krovo-wordmark.svg) left center/contain no-repeat;
  mask:url(/assets/img/krovo-wordmark.svg) left center/contain no-repeat;
}

/* ---------- Tipografía ---------------------------------------------------- */
.eyebrow{font:500 9px/1.4 var(--font-mono);letter-spacing:.28em;color:#737373;text-transform:uppercase}
.h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(30px,8.6vw,74px);line-height:.98;letter-spacing:-.02em;
  color:#fff;text-transform:uppercase;overflow-wrap:break-word;
}
.h1 span{display:inline-block}
.h1 span.is-swap{animation:kWord .5s var(--ease) both}
.h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,6.2vw,50px);line-height:1.02;letter-spacing:-.02em;
  color:#fff;text-transform:uppercase;text-wrap:balance;
}
.lead{max-width:520px;font-size:15.5px;line-height:1.62;color:#8f8f8f;text-wrap:pretty}
.lead b{color:var(--ink);font-weight:600}
.hi{color:var(--ink-2)}
.ticks{display:flex;flex-wrap:wrap;gap:10px 20px;font:500 9.5px/1.3 var(--font-mono);letter-spacing:.14em;color:var(--dim-2);text-transform:uppercase}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks li span{color:#fff}
.ticks--col{flex-direction:column;gap:11px}
.dot{
  display:inline-block;width:5px;height:5px;background:#fff;margin-right:8px;flex:none;
  animation:kBlink 1.5s steps(1,end) infinite;
}

/* ---------- Botones ------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:15px 24px;border:0;background:transparent;cursor:pointer;
  font:600 10.5px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;
  overflow:hidden;transition:background .3s,color .3s,border-color .3s,opacity .3s,transform .12s ease;
}
.btn--solid{background:#fff;color:#000}
.btn--solid:hover{background:var(--ink)}
.btn--ghost{border:1px solid var(--bd);color:var(--ink);font-weight:500}
.btn--ghost:hover{border-color:#fff;color:#fff}
.btn--lg{min-height:56px;padding:18px 30px}
.btn--sweep>span{position:relative;z-index:2}
.btn--sweep::after{
  content:"";position:absolute;inset-block:0;left:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  mix-blend-mode:overlay;animation:kSweep 3.6s cubic-bezier(.7,0,.3,1) infinite;
}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn[disabled]::after{display:none}

/* ---------- Header -------------------------------------------------------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:120;
  background:rgba(0,0,0,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-3);
  padding-top:env(safe-area-inset-top);
}
.top__in{
  max-width:var(--wrap);margin-inline:auto;height:var(--top-h);
  padding-inline:max(var(--pad),env(safe-area-inset-left));
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.brand{display:flex;align-items:center;gap:10px}
.top__tag{
  display:flex;align-items:center;
  font:500 8.5px/1 var(--font-mono);letter-spacing:.2em;color:var(--mute);text-transform:uppercase;
}
.top__rail{height:2px;background:var(--line-2)}
.top__rail i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4a4a4a,#fff);transition:width .6s var(--ease)}

/* ---------- Estadios ------------------------------------------------------ */
.stage{
  min-height:100svh;padding:calc(var(--top-h) + 26px) 0 40px;
  display:flex;align-items:center;
  animation:kStage .55s var(--ease) both;
}
.stage__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:max(var(--pad),env(safe-area-inset-left));
}

/* ══════════ HERO ══════════ */
.stage--hero{
  position:relative;
  background:radial-gradient(120% 70% at 50% 4%,#141414 0%,#050505 44%,#000 100%);
}
.stage--hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 40%,#000,transparent 80%);
  mask-image:radial-gradient(70% 55% at 50% 40%,#000,transparent 80%);
}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero__copy .btn{align-self:stretch}
.hero__proof{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 var(--edge);
}
.hero__proof>div{background:#050505;padding:16px 12px}
.hero__proof b{display:block;font:400 clamp(16px,4.4vw,21px)/1 var(--font-display);color:#fff;white-space:nowrap}
.hero__proof span{display:block;margin-top:8px;font:500 7.5px/1.3 var(--font-mono);letter-spacing:.18em;color:var(--mute);text-transform:uppercase}
.scroll-hint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:none;align-items:center;gap:9px;
  font:500 8px/1 var(--font-mono);letter-spacing:.24em;color:var(--faint);text-transform:uppercase;
}
.scroll-hint i{
  width:1px;height:22px;background:linear-gradient(#3d3d3d,transparent);
  animation:kHint 2.2s ease-in-out infinite;
}

/* ---------- El cubo ------------------------------------------------------- */
.hero__cube{display:flex;flex-direction:column;align-items:center;gap:18px}
.cube-stage{
  position:relative;width:min(74vw,300px);height:min(74vw,300px);
  perspective:1150px;perspective-origin:50% 48%;
}
.cube-stage--sm{width:min(52vw,190px);height:min(52vw,190px)}
.cube-stage--card{width:min(56vw,208px);height:min(56vw,208px)}
.cube-glow{
  position:absolute;left:50%;top:62%;width:60%;height:18%;transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(var(--acc-rgb),.45),transparent 72%);
  filter:blur(12px);transition:background .7s ease;
}
.cube-float{position:absolute;inset:0;transform-style:preserve-3d;animation:kFloat 7s ease-in-out infinite}
.cube{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(-14deg) rotateY(0deg);
  transition:transform 1.4s cubic-bezier(.22,.9,.16,1);
}
.cube__f{
  --s:184px;
  position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background:linear-gradient(150deg,rgba(var(--fc),.15),#050505);
  border:1px solid rgba(var(--fc),.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  backface-visibility:hidden;overflow:hidden;
  transition:background .7s ease,border-color .7s ease,box-shadow .7s ease;
}
.cube-stage--sm .cube__f{--s:118px}
.cube-stage--card .cube__f{--s:128px}
.cube__f[data-face="0"]{--fc:var(--c0rgb);transform:translateZ(calc(var(--s) / 2))}
.cube__f[data-face="1"]{--fc:var(--c1rgb);transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.cube__f[data-face="2"]{--fc:var(--c2rgb);transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
.cube__f[data-face="3"]{--fc:var(--c3rgb);transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
.cube__f[data-face="4"]{--fc:var(--c4rgb);transform:rotateX(90deg) translateZ(calc(var(--s) / 2))}
.cube__f[data-face="5"]{--fc:var(--c5rgb);transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}
.cube__f.is-on{
  background:linear-gradient(150deg,rgba(var(--fc),.92),rgba(var(--fc),.52));
  border-color:rgba(var(--fc),.85);
  box-shadow:0 0 64px rgba(var(--fc),.4),inset 0 1px 0 rgba(255,255,255,.22);
}
.cube__spec{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 46%,rgba(0,0,0,.34));
  animation:kSpec 8s ease-in-out infinite;
}
.cube__mark{
  position:absolute;inset:22%;
  -webkit-mask:url(/assets/img/krovo-mark.png) center/contain no-repeat;
  mask:url(/assets/img/krovo-mark.png) center/contain no-repeat;
  background:rgba(var(--fc),.26);transition:background .7s ease;
}
.cube__f.is-on .cube__mark{background:#000}
.cube__f b{
  position:absolute;left:11px;bottom:10px;
  font:500 7.5px/1 var(--font-mono);letter-spacing:.2em;color:var(--faint);text-transform:uppercase;
  transition:color .7s ease;
}
.cube__f.is-on b{color:rgba(0,0,0,.62)}

.cube__caption{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  max-width:340px;min-height:118px;
}
.cube__caption-k{font:500 8px/1 var(--font-mono);letter-spacing:.26em;color:var(--mute-2);text-transform:uppercase}
.cube__caption-t{
  font:400 clamp(17px,4.6vw,22px)/1.1 var(--font-display);color:#fff;text-transform:uppercase;
  transition:color .5s;
}
.cube__caption-d{font-size:13.5px;line-height:1.55;color:var(--dim);text-wrap:pretty}

@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px}
  .hero__cube{order:2}
  .hero__copy{order:1;gap:24px}
  .hero__copy .btn{align-self:flex-start;min-width:300px}
  .cube-stage{width:min(38vw,360px);height:min(38vw,360px)}
  .cube__f{--s:214px}
  .scroll-hint{display:flex}
}

/* ══════════ QUIZ ══════════ */
.stage--quiz{background:radial-gradient(110% 60% at 50% 0%,#101215 0%,#050505 46%,#000 100%)}
.quiz{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-content:start}
.quiz__head{display:flex;align-items:center;gap:14px}
.quiz__step{font:500 9.5px/1 var(--font-mono);letter-spacing:.24em;color:var(--mute);text-transform:uppercase}
.quiz__step span{color:#fff}
.quiz__step i{font-style:normal;color:var(--faint);margin-inline:3px}
.quiz__dots{display:flex;gap:5px;flex:1}
.quiz__dots i{
  flex:1;height:3px;background:var(--line);border-radius:0;
  transition:background .45s var(--ease);
}
.quiz__dots i.is-done{background:var(--mute)}
.quiz__dots i.is-now{background:#fff}
.quiz__back{
  flex:none;min-height:36px;padding:0 4px;border:0;background:transparent;cursor:pointer;
  font:500 9px/1 var(--font-mono);letter-spacing:.16em;color:var(--mute-2);text-transform:uppercase;
  transition:color .3s;
}
.quiz__back:hover{color:#fff}

.quiz__q{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(22px,6vw,44px);line-height:1.04;letter-spacing:-.02em;
  color:#fff;text-transform:uppercase;text-wrap:balance;
}
.quiz__hint{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--dim);max-width:520px}
.quiz__opts{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 var(--edge)}
.opt{
  position:relative;display:flex;align-items:center;gap:13px;
  min-height:62px;padding:14px 15px;
  border:0;border-left:2px solid transparent;background:#060606;cursor:pointer;
  text-align:left;font-family:var(--font-sans);
  transition:background .28s,border-color .28s,transform .12s ease;
}
.opt:hover{background:#101215}
.opt__k{
  flex:none;width:22px;height:22px;border:1px solid var(--bd);color:var(--mute);
  display:flex;align-items:center;justify-content:center;
  font:600 9px/1 var(--font-mono);
  transition:background .28s,border-color .28s,color .28s;
}
.opt__t{flex:1;min-width:0;font-size:14.5px;line-height:1.35;font-weight:600;color:var(--ink-3);transition:color .28s}
.opt__s{
  flex:none;font:500 8.5px/1.3 var(--font-mono);letter-spacing:.14em;
  color:var(--mute-2);text-transform:uppercase;text-align:right;
}
.opt.is-on{background:#121417;border-left-color:var(--acc)}
.opt.is-on .opt__k{background:#fff;border-color:#fff;color:#000}
.opt.is-on .opt__t{color:#fff}
.opt.is-on .opt__s{color:var(--ink-2)}
.quiz__multi{
  margin-top:12px;font:500 8.5px/1.4 var(--font-mono);letter-spacing:.18em;
  color:var(--mute-2);text-transform:uppercase;transition:color .3s;
}
.quiz__multi.is-max{color:#fff;animation:kShake .4s ease}
@keyframes kShake{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.quiz__foot{display:flex;flex-direction:column;gap:12px;order:3}
.quiz__side{order:2}
.quiz__foot .btn{width:100%}
.quiz__built{
  font:500 9px/1.5 var(--font-mono);letter-spacing:.14em;color:var(--acc);text-transform:uppercase;
  min-height:14px;transition:color .4s;
}
.quiz__built.is-new{animation:kPop .5s var(--ease) both}

.quiz__side{
  border:1px solid var(--line);background:linear-gradient(180deg,#0b0d0f,#030303);
  box-shadow:inset 0 1px 0 var(--edge);padding:16px;
}
.quiz__side-h{font:500 8.5px/1 var(--font-mono);letter-spacing:.24em;color:#6b6b6b;text-transform:uppercase}
.quiz__mini{
  margin-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line-2);
  display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-items:center;
}
.quiz__mini .mark{width:34px;height:34px;grid-row:1 / span 2}
.quiz__mini b{grid-column:2;font:400 13.5px/1.2 var(--font-display);color:#fff;text-transform:uppercase}
.quiz__mini span{grid-column:2;margin-top:6px;font:500 8px/1.3 var(--font-mono);letter-spacing:.16em;color:var(--mute);text-transform:uppercase}
.quiz__mods{margin-top:14px;display:flex;flex-direction:column;gap:6px;min-height:24px}
.quiz__mods li{
  display:flex;align-items:center;gap:9px;
  font:500 10.5px/1.35 var(--font-mono);color:var(--dim-3);
  animation:kFly .45s var(--ease) both;
}
.quiz__mods li i{width:5px;height:5px;flex:none;background:var(--acc)}
.quiz__mods li b{
  margin-left:auto;flex:none;color:var(--mute-2);font-weight:500;
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;
}

@media (min-width:900px){
  .quiz{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:14px 44px;align-items:start}
  .quiz__head{grid-column:1 / -1}
  .quiz__body{grid-column:1}
  .quiz__side{grid-column:2;grid-row:2 / span 2;position:sticky;top:calc(var(--top-h) + 20px)}
  .quiz__foot{grid-column:1;grid-row:3;order:0;flex-direction:row;align-items:center;gap:20px}
  .quiz__foot .btn{width:auto;min-width:260px}
  .quiz__side{order:0}
  .quiz__opts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ══════════ ARMANDO ══════════ */
.stage--build{background:radial-gradient(100% 60% at 50% 40%,#0d0f12,#000 70%)}
.build{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.build__t{font:400 clamp(18px,5vw,26px)/1.1 var(--font-display);color:#fff;text-transform:uppercase}
.build__log{
  width:100%;max-width:440px;min-height:120px;
  display:flex;flex-direction:column;gap:1px;background:var(--line-3);border:1px solid var(--line-3);
}
.build__log li{
  background:#040404;padding:10px 12px;display:flex;align-items:center;gap:10px;
  font:500 10.5px/1.4 var(--font-mono);color:var(--dim-3);text-align:left;
  animation:kFly .4s var(--ease) both;
}
.build__log li b{margin-left:auto;color:#fff;font-weight:500}
.build__bar{width:100%;max-width:440px;height:3px;background:var(--line)}
.build__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4a4a4a,#fff);transition:width .35s linear}

/* ══════════ RESULTADO ══════════ */
.stage--result{align-items:flex-start;background:radial-gradient(120% 60% at 50% 0%,#111417 0%,#050505 44%,#000 100%)}
.result{display:flex;flex-direction:column;gap:26px}
.result__hero{display:flex;flex-direction:column;gap:14px}
.result__hero .h2 span{color:var(--acc);transition:color .6s}
.result__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.result__cols{display:flex;flex-direction:column;gap:18px}
.card{
  border:1px solid var(--line);background:linear-gradient(180deg,#0b0d0f,#030303);
  box-shadow:inset 0 1px 0 var(--edge);
}
.card__h{
  padding:13px 15px;border-bottom:1px solid var(--line-2);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font:500 8.5px/1 var(--font-mono);letter-spacing:.22em;color:#6b6b6b;text-transform:uppercase;
}
.card__cube{display:flex;justify-content:center;padding:22px 16px 10px}
.card__meters{padding:6px 15px 16px;display:flex;flex-direction:column;gap:13px}
.card__meters p{display:flex;justify-content:space-between;gap:10px;font:500 8.5px/1.2 var(--font-mono);letter-spacing:.18em;color:#6b6b6b;text-transform:uppercase}
.card__meters b{color:#fff}
.rail{margin-top:8px;height:3px;background:var(--line)}
.rail i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5a5a5a,#fff);transition:width .9s var(--ease)}
.card__kpis{border-top:1px solid var(--line-2);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-2)}
.card__kpis>div{background:#040404;padding:14px 12px}
.card__kpis b{display:block;font:400 16px/1 var(--font-display);color:#fff;white-space:nowrap}
.card__kpis span{display:block;margin-top:7px;font:500 7.5px/1.3 var(--font-mono);letter-spacing:.16em;color:var(--mute);text-transform:uppercase}

.mods{display:flex;flex-direction:column;gap:1px;background:var(--line-3)}
.mods li{
  background:#040404;padding:13px 15px;display:flex;align-items:flex-start;gap:12px;
  animation:kFly .45s var(--ease) both;
}
.mods li i{
  flex:none;width:18px;height:18px;margin-top:1px;
  border:1px solid var(--ink);background:var(--ink);color:#000;
  display:flex;align-items:center;justify-content:center;font:600 9px/1 var(--font-mono);font-style:normal;
}
.mods li div{min-width:0}
.mods li b{display:block;font-size:13.5px;line-height:1.3;font-weight:600;color:#fff}
.mods li span{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--dim-2)}

.why{padding:6px 15px 16px;display:flex;flex-direction:column;gap:12px}
.why li{
  display:flex;align-items:flex-start;gap:11px;
  animation:kFly .45s var(--ease) both;
}
.why li::before{content:"→";flex:none;color:var(--acc);font-weight:600;line-height:1.55;transition:color .5s}
.why li>span{min-width:0;font-size:13.5px;line-height:1.55;color:var(--dim-3);text-wrap:pretty}
.why li b{color:#fff;font-weight:600}

.card--locked{border-color:#2a2f35}
.locked{padding:20px 15px;display:flex;align-items:center;gap:14px}
.locked__i{
  flex:none;width:38px;height:38px;border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
}
.locked__i::before{
  content:"";width:13px;height:10px;border:1.5px solid var(--ink-2);border-top:0;
  position:relative;margin-top:4px;
}
.locked__i::after{
  content:"";position:absolute;width:9px;height:8px;margin-top:-9px;
  border:1.5px solid var(--ink-2);border-bottom:0;border-radius:5px 5px 0 0;
}
.locked__t{min-width:0}
.locked__t b{display:block;font:400 15px/1.15 var(--font-display);color:#fff;text-transform:uppercase}
.locked__t span{display:block;margin-top:7px;font-size:13px;line-height:1.5;color:var(--dim-2)}

.result__cta{
  border:1px solid #2a2f35;background:linear-gradient(120deg,#131619,#050505);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  padding:22px 18px;display:flex;flex-direction:column;gap:16px;
}
.result__cta-h{font:400 clamp(18px,4.8vw,26px)/1.1 var(--font-display);color:#fff;text-transform:uppercase}
.result__cta-s{margin-top:10px;font-size:14px;line-height:1.6;color:var(--dim)}
.result__cta .btn{width:100%}
.result__redo{
  align-self:center;min-height:44px;padding:0 10px;border:0;background:transparent;cursor:pointer;
  font:500 9px/1 var(--font-mono);letter-spacing:.18em;color:var(--mute-2);text-transform:uppercase;
  transition:color .3s;
}
.result__redo:hover{color:#fff}
@media (min-width:900px){
  .result__grid{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:22px}
  .result__cta{flex-direction:row;align-items:center;justify-content:space-between;gap:34px;padding:26px 24px}
  .result__cta .btn{width:auto;min-width:280px;flex:none}
}

/* ══════════ FORM ══════════ */
.stage--form{background:radial-gradient(110% 60% at 50% 0%,#101215,#000 60%)}
.formw{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.formw__side{display:flex;flex-direction:column;gap:16px}
.formw__form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:9px}
.field>span{font-size:13.5px;font-weight:600;color:var(--ink)}
.field>span i{color:var(--dim);font-style:normal}
.field input{
  width:100%;appearance:none;padding:15px 14px;border-radius:0;
  border:1px solid var(--line);background:#020202;color:#fff;
  font-family:var(--font-sans);font-size:16px;outline:none;
  transition:border-color .3s;
}
.field input:focus{border-color:#fff}
.field input:not(:placeholder-shown){border-color:var(--bd-2)}
.field input[aria-invalid="true"]{border-color:#f87966}
.formw__acts{margin-top:6px;display:flex;flex-direction:column-reverse;gap:10px}
.formw__acts .btn{width:100%}
.formw__hint{font:500 9px/1.6 var(--font-mono);letter-spacing:.14em;color:var(--mute-2);text-transform:uppercase}
.formw__hint.is-warn{color:#fff}
@media (min-width:900px){
  .formw{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px}
  .formw__acts{flex-direction:row;justify-content:flex-end}
  .formw__acts .btn{width:auto}
}

/* ══════════ GRACIAS ══════════ */
.stage--done{background:radial-gradient(110% 70% at 50% 40%,#121417 0%,#050505 48%,#000 100%)}
.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.done__mark{width:min(34vw,124px);height:min(34vw,124px);animation:kDrift 9s ease-in-out infinite}
.done .lead{max-width:640px}
.done__next{
  width:100%;max-width:620px;margin-top:6px;
  display:flex;flex-direction:column;gap:1px;background:var(--line-2);border:1px solid var(--line-2);
}
.done__next li{
  background:#000;padding:14px;display:flex;align-items:flex-start;gap:12px;text-align:left;
  font-size:13.5px;line-height:1.5;color:var(--dim-3);
}
.done__next b{
  flex:none;width:25px;height:25px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bd);font:600 9px/1 var(--font-mono);color:var(--ink-2);
}
.done__next strong{color:#fff;font-weight:600}
.done__price{
  width:100%;max-width:620px;margin-top:4px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  background:var(--line-2);border:1px solid #2a2f35;box-shadow:inset 0 1px 0 var(--edge);
}
.done__price>div{
  background:#050505;padding:14px 15px;text-align:left;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
}
.done__price span{flex:none;font:500 8px/1.3 var(--font-mono);letter-spacing:.18em;color:var(--mute);text-transform:uppercase}
.done__price b{font:400 clamp(16px,4.6vw,21px)/1 var(--font-display);color:#fff;white-space:nowrap;text-align:right}
.done__price b.sm{font:600 12.5px/1.2 var(--font-mono);color:var(--ink)}
@media (min-width:620px){
  .done__price{grid-template-columns:repeat(3,minmax(0,1fr))}
  .done__price>div{flex-direction:column;align-items:flex-start;gap:0;padding:16px 14px}
  .done__price b{margin-top:9px;text-align:left}
}
.done__note{font:500 8.5px/1.7 var(--font-mono);letter-spacing:.16em;color:var(--mute-2);text-transform:uppercase;max-width:520px}
.done__cta{margin-top:6px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}
.done__cta .btn{flex:1 1 260px;max-width:340px}

/* ---------- Footer -------------------------------------------------------- */
.foot{
  padding:26px max(var(--pad),env(safe-area-inset-left)) calc(30px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-3);text-align:center;
  display:flex;flex-direction:column;gap:10px;
}
.foot p{font:500 8.5px/1.6 var(--font-mono);letter-spacing:.2em;color:var(--mute-2);text-transform:uppercase}
.foot__by a{color:var(--dim);border-bottom:1px solid var(--bd)}
.foot__by a:hover{color:#fff;border-color:#fff}
.noscript{padding:40px max(var(--pad),env(safe-area-inset-left));font-size:15px;line-height:1.6;color:var(--dim)}
.noscript b{color:#fff}
.noscript a{border-bottom:1px solid var(--bd)}

/* ---------- Keyframes ----------------------------------------------------- */
@keyframes kStage{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes kWord{from{opacity:0;transform:translateY(16px) skewY(3deg)}to{opacity:1;transform:none}}
@keyframes kFloat{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
@keyframes kSpec{0%,100%{opacity:.16}50%{opacity:.4}}
@keyframes kBlink{0%,45%{opacity:1}50%,95%{opacity:.15}100%{opacity:1}}
@keyframes kSweep{from{transform:translateX(-140%) skewX(-18deg)}to{transform:translateX(240%) skewX(-18deg)}}
@keyframes kFly{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes kPop{0%{opacity:0;transform:translateY(6px)}60%{transform:translateY(-2px)}100%{opacity:1;transform:none}}
@keyframes kDrift{0%,100%{opacity:.4}50%{opacity:.95}}
@keyframes kHint{0%,100%{opacity:.2;transform:translateY(-4px)}50%{opacity:1;transform:translateY(4px)}}

/* ---------- Preferencias -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
@media (hover:none){
  .btn:active,.opt:active{transform:scale(.985)}
  .opt:hover{background:#060606}
  .opt.is-on:hover{background:#121417}
  .btn--ghost:hover{border-color:var(--bd);color:var(--ink)}
}