:root{--negro:#000;--fondo:#0a0a0a;--tarjeta:#141414;--borde:rgba(255,255,255,.12);--texto:#fff;--suave:#b5b5b5;--gris:#2b2b2b;--gris-borde:#5b5b5b;--naranja:#e14201;--naranja-2:#ff5a1f;--rojo:#ff5d5d;--verde:#3ccf7a;--radio:22px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--negro);color:var(--texto);font-family:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.55}
a{color:var(--naranja-2)}
img{max-width:100%;height:auto}
.envoltura{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
.angosta{max-width:760px}
.aviso-modo{background:#3a2a00;color:#ffd36a;text-align:center;font-size:13px;font-weight:600;padding:8px 16px}

/* encabezado */
.top{position:sticky;top:0;z-index:5;background:rgba(0,0,0,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px}
.logo img{display:block;width:150px;height:auto}
.top nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:600}
.top nav a{color:#fff;text-decoration:none;opacity:.85}
.top nav a:hover{opacity:1;color:var(--naranja-2)}
.top nav .nav-app{border:1px solid var(--gris-borde);border-radius:45px;padding:8px 16px;opacity:1}

/* portada */
.hero{padding:70px 0 26px;text-align:center;background:radial-gradient(ellipse at 50% 0,rgba(225,66,1,.22),transparent 62%)}
.eyebrow{color:var(--naranja-2);text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:800;margin:0 0 10px}
h1{font-weight:900;font-size:clamp(34px,6vw,54px);line-height:1.05;margin:0 0 16px;letter-spacing:-.01em}
.lead{color:var(--suave);font-size:17px;max-width:640px;margin:0 auto}
.lead strong{color:#fff}

/* planes */
.planes{padding:30px 0 60px}
.grid-planes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:34px 28px 28px}
.plan.destacado{border:2px solid var(--naranja);box-shadow:0 0 0 6px rgba(225,66,1,.08),0 24px 60px rgba(225,66,1,.15)}
.etiqueta{position:absolute;top:-14px;left:50%;transform:translateX(-50%);margin:0;background:var(--naranja);color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:6px 14px;border-radius:45px;white-space:nowrap}
.plan h2{font-weight:900;font-size:30px;margin:0 0 4px}
.plan .sub{color:var(--suave);font-size:14px;margin:0 0 18px}
.precio{margin:0;font-size:16px;color:var(--suave)}
.precio span{font-size:54px;font-weight:900;color:#fff;letter-spacing:-.02em}
.precio small{font-size:14px}
.mat{margin:0 0 20px;color:var(--suave);font-size:14px}
.plan ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px;font-size:14px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.chk{flex:0 0 20px;width:20px;height:20px;margin-top:1px}
.chk circle{fill:rgba(225,66,1,.15);stroke:var(--naranja);stroke-width:1.5}
.chk path{fill:none;stroke:var(--naranja-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cobro{margin:auto 0 14px;font-size:12.5px;color:var(--suave);text-align:center}
.elige-paquete{margin:auto 0 10px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--suave)}
.paquetes{display:grid;gap:10px}
.paquete{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:#fff;border:1px solid var(--gris-borde);background:var(--gris);border-radius:45px;padding:13px 20px;font-size:15px;transition:.15s}
.paquete span{font-weight:900;font-size:18px}
.paquete:hover,.paquete:focus-visible{border-color:var(--naranja);background:rgba(225,66,1,.14)}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:45px;padding:14px 26px;font:inherit;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:.15s;text-align:center}
.btn-naranja{background:var(--naranja);color:#fff}
.btn-naranja:hover{background:var(--naranja-2)}
.btn-gris{background:var(--gris);color:#fff;border-color:var(--gris-borde)}
.btn-gris:hover{border-color:#fff}
.btn-grande{width:100%;padding:17px 26px;font-size:16px}
.btn:disabled{opacity:.6;cursor:wait}
.plan .btn{width:100%}

/* cómo funciona */
.como{padding:50px 0 70px;border-top:1px solid rgba(255,255,255,.06)}
.como h2{text-align:center;font-weight:900;font-size:32px;margin:0 0 28px}
.pasos{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pasos li{counter-increment:p;background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:24px}
.pasos li::before{content:counter(p);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--naranja);font-weight:900;margin-bottom:12px}
.pasos strong{display:block;font-size:17px;margin-bottom:4px}
.pasos span{color:var(--suave);font-size:14px}
.como-nota{text-align:center;color:var(--suave);font-size:14px;margin:26px auto 0;max-width:640px}

/* formulario y pago */
.paso{padding:40px 0 70px}
.dos-col{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:start}
.dos-col aside{position:sticky;top:96px}
.volver{display:inline-block;color:var(--suave);text-decoration:none;font-size:14px;margin-bottom:22px}
.volver:hover{color:#fff}
.formulario{display:grid;gap:18px}
.formulario label{display:grid;gap:7px;font-weight:600;font-size:14px}
.formulario label em{font-style:normal;color:var(--suave);font-weight:500}
.formulario small{color:var(--suave);font-weight:500;font-size:12.5px}
input[type=text],input[type=email],input[type=tel],input[type=password]{width:100%;min-width:0;background:#111;border:1px solid #3a3a3a;color:#fff;border-radius:14px;padding:14px 16px;font:inherit;font-size:16px}
input:focus{outline:2px solid var(--naranja);outline-offset:1px;border-color:var(--naranja)}
fieldset{border:1px solid var(--borde);border-radius:18px;padding:16px 18px 18px;margin:0;display:grid;gap:12px;min-width:0}
legend{padding:0 6px;font-weight:700;font-size:14px}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opcion{display:flex!important;grid-template-columns:none!important;align-items:center;gap:10px!important;border:1px solid #3a3a3a;border-radius:14px;padding:13px 14px;cursor:pointer}
.opcion:has(input:checked){border-color:var(--naranja);background:rgba(225,66,1,.12)}
.opcion input,.check input{accent-color:var(--naranja);width:18px;height:18px;margin:0;flex:0 0 18px}
.fija{margin:0;font-weight:700}
.fija small{display:block}
.check{display:flex!important;align-items:flex-start;gap:12px!important;font-weight:500!important;line-height:1.45}
.check input{margin-top:2px}
.oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.error{background:rgba(255,93,93,.12);border:1px solid rgba(255,93,93,.45);color:#ffc3c3;border-radius:14px;padding:13px 16px;font-size:14px;font-weight:600}
.aviso{background:rgba(255,211,106,.1);border:1px solid rgba(255,211,106,.4);color:#ffe3a1;border-radius:14px;padding:13px 16px;font-size:14px}
.hola{color:var(--suave)}
.hola strong{color:#fff}

.resumen{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:24px}
.resumen h3{margin:0 0 14px;font-size:18px;font-weight:800}
.resumen dl{margin:0;display:grid;gap:10px}
.resumen dl div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.resumen dt{color:var(--suave)}
.resumen dd{margin:0;font-weight:700;white-space:nowrap}
.resumen .total{border-top:1px solid var(--borde);padding-top:12px;margin-top:4px}
.resumen .total dt{color:#fff;font-weight:700}
.resumen .total dd{font-size:24px;font-weight:900;color:var(--naranja-2)}
.resumen .sede{font-size:14px;color:var(--suave);margin:16px 0 0}
.resumen .sede strong{color:#fff}
.nota-cobro{font-size:13px;color:var(--suave);margin:12px 0 0}
.nota-cobro strong{color:#fff}

.caja-pago{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:22px;display:grid;gap:14px}
.caja-pago.simulada{border:2px dashed #7a5a00}
.sim-titulo{margin:0;color:#ffd36a;font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.caja-pago p{margin:0}
.sim-botones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seguro{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--suave)}
.seguro svg{width:18px;height:18px;fill:var(--verde);flex:0 0 18px}
#pago-botones:empty,#pago-form:empty{display:none}
#pago-form{background:#fff;border-radius:16px;padding:6px;color:#111}
.mensaje{font-size:14px;font-weight:600;min-height:1em}
.mensaje.ok{color:var(--verde)}
.mensaje.mal{color:#ff9d9d}

/* listo */
.listo{text-align:center}
.sello{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:rgba(60,207,122,.14);border:2px solid var(--verde);display:grid;place-items:center}
.sello svg{width:42px;height:42px;fill:none;stroke:var(--verde);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tarjeta-cuenta{background:var(--tarjeta);border:2px solid var(--naranja);border-radius:var(--radio);padding:26px;margin:30px 0 18px;text-align:left}
.tarjeta-cuenta h2{margin:0 0 10px;font-size:20px;font-weight:800}
.tarjeta-cuenta p{color:var(--suave);margin:0 0 10px}
.tarjeta-cuenta .usuario{font-size:18px;color:#fff}
.tarjeta-cuenta .btn{margin-top:8px}
.detalle{text-align:left;color:var(--suave);font-size:14px}
.detalle strong{color:#fff}
.ref{font-size:12px;opacity:.7}

/* términos */
.texto h2{font-size:20px;font-weight:800;margin:30px 0 8px}
.texto p,.texto li{color:#d6d6d6;font-size:15px}
.texto ul{padding-left:20px;display:grid;gap:6px}
.actualizado{color:var(--suave);font-size:13px}

/* pie */
.pie{border-top:1px solid rgba(255,255,255,.08);padding:36px 0 40px;text-align:center;color:var(--suave);font-size:13px}
.pie img{width:120px;opacity:.9}
.pie p{margin:8px 0}
.pie-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
.pie-links a{color:#fff;text-decoration:none}
.pie-seguro{max-width:520px;margin:12px auto!important}
.pie-copy{opacity:.6}

@media (max-width:960px){
  .grid-planes{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .plan.destacado{order:-1}
  .pasos{grid-template-columns:1fr}
  .dos-col{grid-template-columns:1fr;gap:26px}
  .dos-col aside{position:static;order:-1}
}
@media (max-width:560px){
  .envoltura{padding:0 16px}
  .top nav a:not(.nav-app){display:none}
  .logo img{width:124px}
  .hero{padding:44px 0 16px}
  .plan{padding:30px 20px 22px}
  .precio span{font-size:46px}
  .opciones,.sim-botones{grid-template-columns:1fr}
}