/* Concepto: sala de control oscura (verde = senal sana, naranja = accion). Una columna de lectura, secciones con aire, precios al centro. */
:root{
  --bg:#060809; --panel:#0d1117; --card:#131922; --card-2:#1b2432;
  --line:#1f293d; --line-2:#2d3b54;
  --green:#10b981; --green-2:#34d399; --green-dk:#047857;
  --orange:#f97316; --orange-2:#fb923c; --orange-dk:#c2410c;
  --fg:#f3f4f6; --dim:#a3acb9; --muted:#7b8594;
  --blue:#3b82f6;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,"Courier New",monospace;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:16px/1.6 var(--sans);padding-inline:0;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
svg.i{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);background-size:56px 56px}
.fx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glow{position:absolute;border-radius:50%;filter:blur(130px);opacity:.38;pointer-events:none;z-index:0}
.glow.g{width:460px;height:460px;background:var(--green);top:-120px;left:12%}
.glow.o{width:400px;height:400px;background:var(--orange);top:420px;right:4%}
main,header,footer{position:relative;z-index:1}

/* barra superior */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(6,8,9,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{width:38px;height:38px;flex:none}
.logo b{display:block;font-size:19px;letter-spacing:.14em;font-weight:800;line-height:1.1}
.logo small{display:block;font-size:10px;letter-spacing:.16em;color:var(--orange-2);font-weight:700;text-transform:uppercase}
.nav{display:flex;gap:6px}
.nav a{padding:8px 14px;border-radius:99px;color:var(--dim);text-decoration:none;font-size:14px;font-weight:600}
.nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:12px;font:700 15px var(--sans);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
.btn-g{background:linear-gradient(135deg,var(--green),var(--green-2));color:#04120c;box-shadow:0 4px 22px rgba(16,185,129,.3)}
.btn-g:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(16,185,129,.5)}
.btn-o{background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#120700;box-shadow:0 4px 22px rgba(249,115,22,.3)}
.btn-o:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(249,115,22,.5)}
.btn-s{background:var(--card);color:var(--fg);border-color:var(--line-2)}
.btn-s:hover{background:var(--card-2);border-color:var(--green)}
.btn-sm{padding:9px 16px;font-size:14px}

/* hero */
.hero{padding-block:84px 56px;text-align:center}
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border:1px solid var(--green-dk);background:rgba(16,185,129,.08);color:var(--green-2);border-radius:99px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--green-2);box-shadow:0 0 10px var(--green)}
h1{font-size:clamp(34px,5.4vw,58px);line-height:1.12;font-weight:800;letter-spacing:-.03em;margin:26px auto 0;max-width:15em;text-wrap:balance}
h1 em{font-style:normal;background:linear-gradient(135deg,var(--green-2),var(--orange-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.type{font:700 clamp(16px,2.4vw,24px) var(--mono);color:var(--orange-2);margin:22px 0 4px;min-height:1.6em}
.type span{border-right:3px solid var(--orange);padding-right:5px}
.lead{max-width:44rem;margin:14px auto 34px;color:var(--dim);font-size:clamp(16px,1.9vw,19px)}
.cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;border:1px solid var(--line);border-radius:20px;background:rgba(13,17,23,.75);overflow:hidden}
.fact{padding:26px 18px;text-align:center}
.fact+.fact{border-left:1px solid var(--line)}
.fact b{display:block;font:700 clamp(20px,3vw,30px) var(--mono);color:#fff}
.fact b .reel{display:inline-block;margin:0;font:inherit;letter-spacing:0;text-transform:none}
.fact span{display:block;margin-top:4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* secciones */
section{padding-block:76px}
.eyebrow{display:block;font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
h2{font-size:clamp(26px,3.6vw,38px);line-height:1.18;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.head{text-align:center;max-width:46rem;margin:0 auto 48px}
.head p{color:var(--dim);margin-top:12px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px;min-width:0}
.ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.22);color:var(--green-2);margin-bottom:18px}
.ico.or{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.22);color:var(--orange-2)}
.ico svg{width:24px;height:24px}
.card h3{font-size:19px;font-weight:700;margin-bottom:10px}
.card p{color:var(--dim);font-size:15px}

/* cabecera */
.dvb{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:48px;border:1px solid var(--line-2);border-radius:24px;background:linear-gradient(160deg,#0d131a,#060809)}
.dvb h2{font-size:clamp(24px,3vw,32px);margin-bottom:14px}
.dvb>div{min-width:0}
.dvb>div>p{color:var(--dim)}
.ticks{list-style:none;margin-top:22px;display:grid;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.ticks svg{color:var(--green-2);margin-top:3px}
.term{background:#040608;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-family:var(--mono)}
.term header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 16px;background:#0a0e14;border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#ef4444}.dots i:nth-child(2){background:#f59e0b}.dots i:nth-child(3){background:var(--green)}
.term header small{font-size:11.5px;color:var(--muted)}
.term pre{padding:18px;font:12.5px/1.85 var(--mono);color:var(--dim);overflow-x:auto;white-space:pre}
.term .ok{color:var(--green-2)}.term .or{color:var(--orange-2)}
.term footer{padding:9px 16px;border-top:1px solid var(--line);font:11px var(--mono);color:var(--muted)}

/* pasos */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px;list-style:none;counter-reset:s}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;position:relative}
.steps li::before{content:counter(s);font:700 13px var(--mono);color:var(--green-2);border:1px solid var(--green-dk);border-radius:8px;padding:2px 9px;display:inline-block;margin-bottom:12px}
.steps b{display:block;font-size:16.5px;margin-bottom:6px}
.steps p{color:var(--dim);font-size:14.5px}
.steps code{font:600 13px var(--mono);color:var(--orange-2)}

/* precios */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:36px 28px;position:relative;min-width:0}
.plan.hot{border-color:var(--green);background:linear-gradient(160deg,#131d27,#0c141d);box-shadow:0 0 40px rgba(16,185,129,.16)}
.tag{position:absolute;top:-14px;right:24px;background:linear-gradient(135deg,var(--green),var(--green-2));color:#04120c;font:800 11.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:99px}
.plan h3{font-size:22px;font-weight:800}
.plan .sub{color:var(--muted);font-size:14px;margin:6px 0 22px}
.price{display:flex;align-items:baseline;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.price b{font:700 clamp(42px,5vw,52px)/1 var(--mono)}
.price i{font-style:normal;font-size:26px;font-weight:800;color:var(--green-2)}
.price span{color:var(--muted);font-size:14.5px}
.plan ul{list-style:none;display:grid;gap:12px;margin-bottom:30px;flex:1}
.plan li{display:flex;gap:11px;align-items:flex-start;color:var(--dim);font-size:15px}
.plan li svg{color:var(--green-2);margin-top:4px}
.plan .btn{width:100%}
.nota{max-width:46rem;margin:36px auto 0;text-align:center;padding:20px 24px;border:1px dashed var(--orange-dk);border-radius:14px;background:rgba(249,115,22,.05);color:var(--orange-2);font-size:14.5px;font-weight:600}

/* faq + contacto */
.faq{max-width:50rem;margin-inline:auto;display:grid;gap:10px}
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 20px}
summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:700 22px/1 var(--mono);color:var(--green-2);transition:transform .4s cubic-bezier(.2,.7,.2,1),color .3s}
details.abierto summary::after{transform:rotate(135deg);color:var(--orange-2)}
details{overflow:hidden;transition:border-color .3s,background .3s,box-shadow .3s}
details:hover{border-color:var(--line-2)}
details.abierto{border-color:var(--green-dk);background:linear-gradient(160deg,#131d27,var(--card));box-shadow:0 10px 30px rgba(16,185,129,.1)}
details p{color:var(--dim);padding-bottom:18px;font-size:15px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;max-width:960px;margin-inline:auto}
.contact>div{min-width:0}
.vias{display:grid;gap:14px}
.via{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.via .ico{margin:0;flex:none}
.via b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.via span.v{font:600 15px var(--mono);word-break:break-all;user-select:all}
.via .btn{margin-left:auto}
.form label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.form .f{margin-bottom:16px}
.form input,.form textarea,.form select{width:100%;padding:13px 14px;background:var(--bg);border:1px solid var(--line-2);border-radius:10px;color:#fff;font:15px var(--sans)}
.form textarea{min-height:84px;resize:vertical}
.salida{margin-top:18px;padding:18px;border:1px solid var(--green-dk);border-radius:14px;background:rgba(16,185,129,.06)}
.salida[hidden]{display:none}
.salida p{color:var(--dim);font-size:14px;margin-bottom:12px}
.salida pre{white-space:pre-wrap;word-break:break-word;font:13px/1.6 var(--mono);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px;user-select:all}
.salida .acc{display:flex;gap:10px;flex-wrap:wrap}
.ok-msg{font-size:13px;color:var(--green-2);margin-top:10px;min-height:1.2em}

footer.pie{border-top:1px solid var(--line);background:#030507;padding-block:40px 28px}
.pie .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.pie nav{display:flex;gap:20px;flex-wrap:wrap}
.pie nav a{color:var(--dim);text-decoration:none;font-size:14px}
.copy{width:100%;text-align:center;color:var(--muted);font-size:13.5px;padding-top:22px;border-top:1px solid var(--line)}


/* animaciones */
.js .rv:not(.in){opacity:0}
.js .rv.in{animation:entra .85s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
@keyframes entra{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
.card,.plan,.steps li{transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover,.steps li:hover{transform:translateY(-6px);border-color:var(--green);box-shadow:0 14px 40px rgba(16,185,129,.14)}
.plan:hover{transform:translateY(-6px);border-color:var(--orange)}
.plan.hot:hover{border-color:var(--green-2)}
.badge i{animation:pulso 1.8s infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(52,211,153,.7)}100%{box-shadow:0 0 0 12px rgba(52,211,153,0)}}
h1 em{background-size:200% 100%;animation:fluye 6s linear infinite}
@keyframes fluye{0%{background-position:0 0}100%{background-position:200% 0}}
.glow.g{animation:flota 14s ease-in-out infinite alternate}
.glow.o{animation:flota 18s ease-in-out infinite alternate-reverse}
@keyframes flota{from{transform:translate(0,0)}to{transform:translate(70px,50px)}}
.onda{display:block;width:100%;height:90px;margin-top:46px;opacity:.9}
.onda path{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:6 10;animation:corre 3s linear infinite}
.onda path:nth-child(2){stroke:var(--orange);opacity:.6;animation-duration:4.5s}
.onda path:nth-child(1){stroke:var(--green-2)}
@keyframes corre{to{stroke-dashoffset:-160}}
.btn-o,.btn-g{position:relative;overflow:hidden}
.btn-o::after,.btn-g::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:brillo 4s infinite}
@keyframes brillo{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.dolor{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dolor>div{border-radius:18px;padding:32px;border:1px solid var(--line);min-width:0}
.dolor .antes{background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.25)}
.dolor .despues{background:rgba(16,185,129,.06);border-color:var(--green-dk)}
.dolor h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.antes h3{color:#f87171}.despues h3{color:var(--green-2)}
.dolor ul{list-style:none;display:grid;gap:14px}
.dolor li{display:flex;gap:12px;font-size:15.5px;color:var(--dim)}
.dolor li::before{content:"\2715";color:#f87171;font-weight:800}
.despues li::before{content:"\2713";color:var(--green-2)}
.dolor li b{color:var(--fg)}
.garantia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px;margin-top:30px}
.garantia div{text-align:center;padding:18px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(13,17,23,.7);font-size:14px;color:var(--dim)}
.garantia b{display:block;color:var(--green-2);font-size:15px;margin-bottom:3px}
.dia{display:inline-block;margin-top:-10px;margin-bottom:20px;font-size:13.5px;color:var(--green-2);font-weight:700}
.term pre .cur{display:inline-block;width:8px;height:1em;background:var(--green-2);vertical-align:-2px;animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.term pre{min-height:15.2em}
.vivo{display:inline-flex;align-items:center;gap:7px;font:700 11px var(--mono);color:var(--green-2)}
.vivo i{width:7px;height:7px;border-radius:50%;background:var(--green-2);animation:pulso 1.4s infinite}

.guia{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start}
.req{position:sticky;top:90px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
.req h3,.cmds h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.req ul{list-style:none;display:grid;gap:12px;font-size:14.5px;color:var(--dim)}
.req li::before{content:"\203A";color:var(--green-2);font-weight:800;margin-right:8px}
.req b{color:var(--fg)}
.gsteps{list-style:none;counter-reset:g;display:grid;gap:18px;min-width:0}
.gsteps>li{counter-increment:g;position:relative;padding:26px 26px 26px 76px;background:var(--card);border:1px solid var(--line);border-radius:16px;min-width:0}
.gsteps>li::before{content:counter(g);position:absolute;left:24px;top:24px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font:700 15px var(--mono);color:#04120c;background:linear-gradient(135deg,var(--green),var(--green-2))}
.gsteps h3{font-size:18px;margin-bottom:8px}
.gsteps p,.cmds p{color:var(--dim);font-size:15px;margin-bottom:12px}
.gsteps code,.cmds code{font:600 13px var(--mono);color:var(--orange-2);background:rgba(249,115,22,.08);padding:1px 6px;border-radius:5px}
.code{position:relative;margin:4px 0 14px}
.code pre{background:#040608;border:1px solid var(--line);border-radius:10px;padding:14px 90px 14px 16px;font:13px/1.7 var(--mono);color:var(--green-2);overflow-x:auto;white-space:pre}
.cc{position:absolute;top:8px;right:8px;padding:5px 12px;border-radius:8px;border:1px solid var(--line-2);background:var(--card-2);color:var(--fg);font:600 12px var(--sans);cursor:pointer}
.cc:hover{border-color:var(--green)}
.tip{border-left:3px solid var(--orange);padding-left:12px;font-size:14px!important}
.cmds{margin-top:34px;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
@media (max-width:900px){.guia{grid-template-columns:1fr}.req{position:static}.gsteps>li{padding:70px 18px 20px}.gsteps>li::before{left:18px;top:18px}}
@media (max-width:900px){.dolor{grid-template-columns:1fr}
  .nav{display:none}
  .dvb{grid-template-columns:1fr;padding:28px 22px}
  .contact{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}.fact+.fact{border-left:0;border-top:1px solid var(--line)}
  section{padding-block:56px}
}
@media (max-width:520px){.top .btn{padding:9px 14px;font-size:13.5px}.logo small{display:none}.via{flex-wrap:wrap}.via .btn{margin-left:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.nav a[aria-current]{color:#fff;background:rgba(255,255,255,.08)}
.phero{padding-block:70px 30px;text-align:center}
.phero h1{font-size:clamp(30px,4.6vw,48px)}
.phero .lead{margin-bottom:0}
.guiasec{padding-top:36px}
.fin{margin-top:44px;text-align:center;padding:36px 24px;border:1px solid var(--green-dk);border-radius:20px;background:rgba(16,185,129,.06)}
.fin h2{font-size:clamp(22px,3vw,30px);margin-bottom:10px}
.fin p{color:var(--dim);margin-bottom:20px}

/* mas movimiento */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--green),var(--green-2),var(--orange));z-index:90;pointer-events:none}
.card,.steps li,.plan:not(.hot),.gsteps>li,.req,.via{background-image:radial-gradient(360px circle at var(--mx,50%) var(--my,-80%),rgba(52,211,153,.11),transparent 62%)}
.plan.hot::after{content:"";position:absolute;inset:-1px;border-radius:22px;pointer-events:none;animation:aura 3.2s ease-in-out infinite}
@keyframes aura{0%,100%{box-shadow:0 0 22px rgba(16,185,129,.18)}50%{box-shadow:0 0 62px rgba(52,211,153,.5)}}
.tag{animation:flotar 3s ease-in-out infinite}
@keyframes flotar{50%{transform:translateY(-4px)}}
.ico{transition:transform .4s,background .3s}
.card:hover .ico,.via:hover .ico{transform:rotate(-8deg) scale(1.12)}
.ticks svg,.plan li svg{transition:transform .3s}
.ticks li:hover svg,.plan li:hover svg{transform:scale(1.35)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--green-2),var(--orange));transform:scaleX(0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:#fff}
.logo svg{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.logo:hover svg{transform:rotate(180deg)}
.badge{animation:entra .9s .05s backwards}
.fact b{background:linear-gradient(135deg,#fff,var(--green-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fact b .reel{-webkit-text-fill-color:currentColor}
.gsteps>li::before{transition:transform .4s}
.gsteps>li:hover::before{transform:rotate(-8deg) scale(1.12)}
.onda circle{filter:drop-shadow(0 0 5px currentColor)}
.term{box-shadow:0 0 0 0 rgba(16,185,129,.3);animation:latido 4s ease-in-out infinite}
@keyframes latido{50%{box-shadow:0 0 50px -10px rgba(16,185,129,.35)}}
.glow.o{animation-duration:20s}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.onda circle{display:none}.prog{display:none}}

/* comprar y privacidad */
.compra{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
.pedido{min-width:0;display:grid;gap:22px}
fieldset{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:26px;min-width:0}
legend{padding:0 10px;font-weight:800;color:var(--orange-2);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.opt{display:block;cursor:pointer}.opt input{position:absolute;opacity:0;pointer-events:none}
.oc{display:block;height:100%;border:1px solid var(--line2);border-radius:14px;padding:18px;background:var(--bg);transition:transform .3s,border-color .3s,box-shadow .3s,background .3s}
.oc b{display:block;font-size:17px}.oc i{display:block;font:700 30px var(--mono);font-style:normal;margin:6px 0;color:var(--green-2)}.oc i em{font:600 13px var(--sans);color:var(--muted);font-style:normal}
.oc small{color:var(--dim);font-size:13px}
.opt:hover .oc{transform:translateY(-4px);border-color:var(--green)}
.opt.on .oc,.opt input:checked+.oc{border-color:var(--green);background:linear-gradient(160deg,#10231d,var(--bg));box-shadow:0 0 28px rgba(16,185,129,.2)}
.opt input:focus-visible+.oc{outline:2px solid var(--green-2);outline-offset:2px}
.meses{margin-top:18px}.meses label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.paso{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.paso button{width:46px;height:46px;border:0;background:var(--card-2);color:#fff;font:700 22px var(--mono);cursor:pointer}.paso button:hover{background:var(--green-dk)}
.paso input{width:70px;height:46px;border:0;background:var(--bg);color:#fff;text-align:center;font:700 18px var(--mono)}
.aviso-demo{margin-top:16px;padding:14px 16px;border:1px solid var(--orange-dk);border-radius:12px;background:rgba(249,115,22,.06);color:var(--orange-2);font-size:14px}
.aviso-demo a,.sm-mail b{color:var(--green-2)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compra .f{margin-bottom:14px;min-width:0}
.compra label:not(.opt):not(.chk){display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.compra input[type=text],.compra input[type=email],.compra input[type=tel],.compra select,.compra textarea{width:100%;padding:13px 14px;background:var(--bg);border:1px solid var(--line2);border-radius:10px;color:#fff;font:15px var(--sans)}
.compra textarea{min-height:84px;resize:vertical}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--dim);margin:6px 0 16px;cursor:pointer}.chk input{margin-top:4px;width:18px;height:18px;accent-color:var(--green);flex:none}.chk a{color:var(--green-2)}
.resumen{position:sticky;top:90px;border:1px solid var(--green-dk);border-radius:18px;padding:26px;background:linear-gradient(160deg,#10231d,var(--card))}
.resumen h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-2);margin-bottom:12px}
.rs-plan{font-size:20px;font-weight:800}.rs-total{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.rs-total span{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700}.rs-total b{font:700 42px var(--mono);color:#fff}
.rs-sub{color:var(--dim);font-size:13.5px;margin-bottom:16px}.rs-lista{list-style:none;display:grid;gap:9px;margin-bottom:16px}
.rs-lista li{font-size:14px;color:var(--dim);padding-left:22px;position:relative}.rs-lista li::before{content:"\2713";position:absolute;left:0;color:var(--green-2);font-weight:800}
.rs-nota{font-size:13px;color:var(--orange-2);border-top:1px dashed var(--orange-dk);padding-top:12px}
.salida{margin-top:0}.salida .acc{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.sm-mail{font-size:14px;color:var(--dim)}
.notas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:40px}
.notas div{padding:20px;border:1px solid var(--line);border-radius:14px;background:rgba(13,17,23,.7);color:var(--dim);font-size:14.5px}.notas b{display:block;color:var(--green-2);margin-bottom:6px}.notas a{color:var(--green-2)}
.priv{max-width:860px}
.callout{border:1px solid var(--orange-dk);background:rgba(249,115,22,.07);border-radius:16px;padding:24px 26px;margin-bottom:34px}
.callout b{display:block;color:var(--orange-2);letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;margin-bottom:8px}.callout p{color:var(--fg)}
.priv article{margin-bottom:30px}.priv h2{font-size:22px;margin-bottom:10px}.priv p,.priv li{color:var(--dim)}.priv ul{padding-left:22px;display:grid;gap:8px}
.priv .tab{margin-top:6px}.priv td,.priv th{vertical-align:top}.priv b{color:var(--fg)}
.priv table{width:100%;border-collapse:collapse;font-size:14.5px}.priv th,.priv td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}.priv th{color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase}.priv tr:last-child td{border-bottom:0}
@media (max-width:980px){.compra{grid-template-columns:1fr}.resumen{position:static;order:-1}}
@media (max-width:640px){.opts,.f2{grid-template-columns:1fr}fieldset{padding:20px 16px}}
.priv .tab{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}

/* v62: aviso de compra cerrada en comprar.html */
.cerrado{margin-top:18px;padding:18px;border:1px solid var(--orange-dk);border-radius:14px;background:rgba(249,115,22,.07)}
.cerrado[hidden]{display:none}
.cerrado b{display:block;font-size:17px;color:var(--orange-2);margin-bottom:8px}
.cerrado p{color:var(--dim);font-size:14px;margin-bottom:10px}
.cerrado p a{color:var(--green-2)}
.cerrado .cerrado-aviso{color:var(--green-2)}
.cerrado .cerrado-aviso[hidden]{display:none}
.cerrado .acc{display:flex;gap:10px;flex-wrap:wrap}