/* Loop Lab · sitio · tokens iguales a los del cotizador */
:root{
  --black:#080808; --graphite:#202020; --graphite-2:#161616; --steel:#777777; --line:#2E2E2E;
  --off:#F4F4F0; --dim:#A8A8A2;
  --lime:#C6FF00; --lime-ink:#0A0A00; --lime-dim:#7E9E14;
  --red:#FF4D3D;
  --d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --m:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --gut:clamp(16px,5vw,64px);
  --wide:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--black);color:var(--off);font-family:var(--d);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;line-height:1.05;text-wrap:balance;font-weight:800;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
strong,b{font-weight:700}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.mono{font-family:var(--m)}
.skip{position:absolute;left:-9999px;top:0;background:var(--lime);color:var(--lime-ink);padding:10px 16px;z-index:99}
.skip:focus{left:0}

/* ---------- marca ---------- */
.mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark img{height:24px;width:auto;display:block}
.mark i{font-style:normal;font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.34em;color:var(--dim);position:relative;top:1px}
.foot .mark img{height:30px}

/* ---------- barra ---------- */
.bar{position:sticky;top:0;z-index:30;background:rgba(8,8,8,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar .in{max-width:var(--wide);margin:0 auto;display:flex;align-items:center;gap:22px;padding:12px var(--gut)}
.nav{margin-left:auto;display:flex;gap:22px;font-family:var(--m);font-size:12.5px;letter-spacing:.06em}
.nav a{text-decoration:none;color:var(--dim);padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--off);border-bottom-color:var(--lime)}
@media (max-width:720px){.nav{display:none}.bar .in{gap:12px}.bar .btn{margin-left:auto}}

/* ---------- botones ---------- */
.btn{display:inline-block;text-decoration:none;background:transparent;border:1px solid var(--line);color:var(--off);padding:9px 16px;border-radius:7px;cursor:pointer;font-size:14px;font-family:var(--d);white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.btn:hover{border-color:var(--steel)}
.btn.go{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);font-weight:700}
.btn.go:hover{background:#D4FF3B;border-color:#D4FF3B}
.btn.big{padding:13px 24px;font-size:16px;border-radius:8px}
.btn[disabled]{opacity:.5;cursor:default}

/* ---------- estructura ---------- */
.eyebrow{font-family:var(--m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-bottom:18px}
.band{max-width:var(--wide);margin:0 auto;padding:clamp(56px,8vw,104px) var(--gut);border-top:1px solid var(--line)}
.band>h2{font-size:clamp(26px,3.4vw,40px);max-width:22ch;margin-bottom:38px}
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr;gap:32px}}
.prose{display:flex;flex-direction:column;gap:14px;color:var(--dim);font-size:16.5px;max-width:58ch}
.prose strong{color:var(--off)}
.prose .hl{color:var(--off);border-left:2px solid var(--lime);padding-left:14px}
.prose b.mono{color:var(--lime);font-size:14px}

/* ---------- hero ---------- */
.hero{max-width:var(--wide);margin:0 auto;padding:clamp(56px,10vw,120px) var(--gut) clamp(40px,6vw,64px)}
.hero h1{font-size:clamp(38px,7vw,78px);font-stretch:104%;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero .lead{margin-top:26px;max-width:56ch;font-size:clamp(16.5px,1.5vw,19px);color:var(--dim)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(44px,7vw,76px);background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.strip li{background:var(--black);padding:20px;font-size:14.5px;color:var(--dim);display:flex;gap:12px;align-items:flex-start}
.strip span{font-family:var(--m);font-size:11px;color:var(--lime);letter-spacing:.1em;padding-top:3px}
@media (max-width:760px){.strip{grid-template-columns:1fr}}

/* ---------- claim ---------- */
.claim{font-size:clamp(24px,3.2vw,36px);max-width:20ch}

/* ---------- tarjetas ---------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cards>li,.cards>div,.cards>article{background:var(--graphite-2);padding:24px}
.five{grid-template-columns:repeat(5,1fr)}
.four{grid-template-columns:repeat(4,1fr)}
.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.five{grid-template-columns:repeat(2,1fr)}.four{grid-template-columns:repeat(2,1fr)}.three{grid-template-columns:1fr}}
@media (max-width:620px){.five,.four{grid-template-columns:1fr}}
.cards .num{font-family:var(--m);font-size:11.5px;color:var(--lime);letter-spacing:.12em}
.cards h3{font-size:21px;margin:10px 0 12px}
.cards .q{font-size:14.5px;color:var(--dim)}
.cards .out{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--m);font-size:11.5px;line-height:1.5;color:var(--steel)}
.note{margin-top:22px;font-family:var(--m);font-size:12.5px;color:var(--steel);display:flex;gap:10px;align-items:center}
.note .loop{color:var(--lime);font-size:20px;line-height:1}
.reglas h3{font-size:18px;margin-bottom:10px;color:var(--lime)}
.reglas p{font-size:14.5px;color:var(--dim)}

/* ---------- dato ---------- */
.dato{margin:0;background:var(--graphite-2);border:1px solid var(--line);border-radius:12px;padding:28px}
.dato .eyebrow{margin-bottom:14px}
.dato .big{font-family:var(--d);font-stretch:104%;font-weight:800;font-size:clamp(44px,6vw,68px);line-height:1;color:var(--lime);letter-spacing:-.03em}
.dato .big.frase{font-size:clamp(28px,3.2vw,38px);line-height:1.08;color:var(--lime)}
.dato .txt{margin-top:14px;color:var(--off);font-size:16px}
.dato figcaption{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--steel);line-height:1.6}

/* ---------- planes ---------- */
.planes .plan{display:flex;flex-direction:column;gap:14px;padding:28px 24px}
.plan.star{background:var(--graphite);box-shadow:inset 0 0 0 1px var(--lime)}
.plan .tag{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime-ink);background:var(--lime);align-self:flex-start;padding:3px 9px;border-radius:4px;font-weight:700}
.plan h3{font-size:23px}
.plan .price{font-family:var(--d);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.03em}
.plan .cur{font-family:var(--m);font-size:15px;font-weight:500;color:var(--dim);letter-spacing:0}
.plan .per{font-family:var(--m);font-size:13px;font-weight:400;color:var(--steel)}
.plan .for{color:var(--dim);font-size:15px}
.plan ul{display:flex;flex-direction:column;gap:9px;margin-top:4px;flex:1}
.plan ul li{position:relative;padding-left:18px;font-size:14.5px;color:var(--off)}
.plan ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--lime);border-radius:2px}
.plan .no{font-family:var(--m);font-size:11.5px;color:var(--steel);line-height:1.5}
.plan .btn{text-align:center;margin-top:4px}
.extras{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);margin-top:44px}
@media (max-width:860px){.extras{grid-template-columns:1fr;gap:32px}}
.list{display:flex;flex-direction:column;gap:9px;font-size:12.5px;color:var(--dim);line-height:1.6}
.list li{padding-bottom:9px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:14px}
.list b{color:var(--lime);white-space:nowrap}

/* ---------- formulario ---------- */
.form-wrap{align-items:start}
form{display:flex;flex-direction:column;gap:14px;background:var(--graphite-2);border:1px solid var(--line);border-radius:12px;padding:clamp(20px,3vw,30px)}
.f{display:flex;flex-direction:column;gap:6px}
.f label{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.req{color:var(--lime)}
input[type=text],input[type=tel],input[type=email],select,textarea{background:var(--graphite);border:1px solid var(--line);border-radius:7px;padding:11px 12px;width:100%;font:inherit;font-size:15px;color:var(--off)}
textarea{resize:vertical;min-height:96px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
input::placeholder,textarea::placeholder{color:var(--steel)}
input:hover,select:hover,textarea:hover{border-color:var(--steel)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.row{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form .btn.go{margin-top:6px}
.status{font-size:12.5px;min-height:18px;color:var(--lime)}
.status.err{color:var(--red)}
.tiny{font-size:11px;color:var(--steel)}
.f.bad input,.f.bad select{border-color:var(--red)}
.foot-note{margin-top:26px;font-size:11.5px;color:var(--steel);letter-spacing:.06em}
.done{display:flex;flex-direction:column;gap:12px;background:var(--graphite-2);border:1px solid var(--lime);border-radius:12px;padding:clamp(24px,3vw,34px)}
.done h3{font-size:24px;color:var(--lime)}
.done p{color:var(--dim);font-size:15.5px}

/* ---------- pie ---------- */
.foot{border-top:1px solid var(--line)}
.foot .in{max-width:var(--wide);margin:0 auto;padding:30px var(--gut);display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.foot .mono{font-size:12px;color:var(--dim);letter-spacing:.04em}
.foot .dim{margin-left:auto;color:var(--steel)}
@media (max-width:620px){.foot .dim{margin-left:0}}

/* ---------- franja lima con el logo de fondo ---------- */
.franja{position:relative;background:var(--lime);color:var(--lime-ink);overflow:hidden;isolation:isolate}
.franja::before{content:"";position:absolute;z-index:-1;left:-8%;bottom:-16%;width:min(1500px,118%);aspect-ratio:1600/744;
  background:url("/img/loop-negro.png") no-repeat center/contain;opacity:.16;pointer-events:none}
.franja .band{border-top:0}
.franja .eyebrow{color:var(--lime-ink);opacity:.72}
.franja h2{color:var(--lime-ink)}
.franja .prose{color:rgba(10,10,0,.78)}
.franja .prose strong{color:var(--lime-ink)}
.franja .foot-note{color:rgba(10,10,0,.6)}
@media (max-width:860px){.franja::before{left:-20%;bottom:-6%;width:150%;opacity:.13}}

/* ---------- marca de agua del hero ---------- */
.hero{position:relative;isolation:isolate}
.marca-agua{position:absolute;z-index:-1;right:-14%;top:-6%;width:min(980px,86%);aspect-ratio:1600/744;
  background:url("/img/loop.png") no-repeat center/contain;opacity:.055;pointer-events:none}
@media (max-width:860px){.marca-agua{right:-30%;top:-2%;width:130%;opacity:.05}}