/* ============================================================
   Sistema de diseño de la plataforma de webinars
   Origen: página de captura clase.uxcontratable.com
   Regla: cyan = acción principal / plataforma · naranja = energía, urgencia, acento
   ============================================================ */
:root{
  color-scheme:dark;
  --cyan:#00ccff; --orange:#ff8a00;
  --bg:#000;
  --text:#f5f3ef; --text-1:#e8ecef; --text-2:#d6dbe0; --muted-2:#9aa8b6; --body:#c3cad2;
  --red:#ff6b4a; --green:#2de0b0;
  --glass:rgba(26,31,38,.55); --glass-line:rgba(0,204,255,.15);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:16px;
}
::selection{background:rgba(0,204,255,.35);color:#fff}
html{scrollbar-color:#2a3340 #000;scroll-behavior:smooth}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* fondo fijo: la foto no se mueve, el contenido se desplaza encima */
.bg-fixed{position:fixed;inset:0;z-index:-1;transform:translateZ(0);background:#000 url(bg-escritorio.webp) 70% 50%/cover no-repeat;pointer-events:none}
.bg-fixed::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.72) 55%,rgba(0,0,0,.8))}
.bg-fixed.calm::after{background:rgba(0,0,0,.88)}
@media (max-width:900px){.bg-fixed{background-image:url(bg-movil.webp);background-position:50% 50%}}

/* superficies */
.glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.panel{background:rgba(16,20,26,.88);border:1px solid var(--glass-line);border-radius:var(--r)}
.dots{position:relative;isolation:isolate}
.dots::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(0,204,255,.28) 1px,transparent 1.5px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 12% 20%,#000,transparent 72%);mask-image:radial-gradient(ellipse 60% 70% at 12% 20%,#000,transparent 72%);opacity:.55}

/* tipografía */
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--cyan);background:rgba(0,204,255,.07);border:1px solid rgba(0,204,255,.28);border-radius:999px;padding:7px 14px;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.eyebrow.o{color:var(--orange);background:rgba(255,138,0,.07);border-color:rgba(255,138,0,.3)}
.eyebrow.o::before{background:var(--orange);box-shadow:0 0 10px var(--orange)}
.kicker{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.kicker.o{color:var(--orange)}
.big{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;font-size:clamp(34px,4.7vw,66px);text-wrap:balance}
.big.md{font-size:clamp(28px,3.8vw,48px);line-height:1.17}
.big.sm{font-size:clamp(22px,2.4vw,30px);line-height:1.2}
.hl{color:#000;background:linear-gradient(var(--cyan),var(--cyan)) no-repeat 0 55%/100% 86%;padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:2px}
.hl-o{background-image:linear-gradient(var(--orange),var(--orange))}
.micro{font-size:14px;line-height:20px;color:var(--muted-2)}
.micro b{color:var(--text);font-weight:600}

/* botón principal (cyan) */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--cyan);color:#000;text-decoration:none;border:0;cursor:pointer;font-family:inherit;border-radius:12px;padding:17px 34px;font-weight:800;font-size:clamp(15px,1.7vw,17px);line-height:22px;text-transform:uppercase;letter-spacing:.02em;text-align:center;box-shadow:0 0 0 1px rgba(0,204,255,.55),0 10px 36px rgba(0,204,255,.28);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-2px) scale(1.015);filter:brightness(1.08);box-shadow:0 0 0 1px rgba(90,225,255,.85),0 14px 46px rgba(0,204,255,.45)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn[disabled]{cursor:wait;filter:saturate(.7) brightness(.9);transform:none}
.btn small{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.04em;opacity:.85}
.btn .bt{display:inline-flex;align-items:center;gap:10px}
.btn.sm{padding:11px 20px;font-size:13px;line-height:18px;border-radius:10px}
.btn.block{display:flex;width:100%}
/* botón de acción cálida (oferta de cierre): naranja solo si es compra/urgencia */
.btn.o{background:var(--orange);box-shadow:0 0 0 1px rgba(255,138,0,.55),0 10px 36px rgba(255,138,0,.28)}
.btn.o:hover{box-shadow:0 0 0 1px rgba(255,170,60,.8),0 14px 46px rgba(255,138,0,.5)}
/* botón secundario */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:var(--text);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:14px 22px;font-family:inherit;font-weight:700;font-size:14px;line-height:20px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.btn-ghost:hover{border-color:var(--cyan);background:rgba(0,204,255,.08);color:var(--cyan)}
.mini{font-family:inherit;font-size:12px;line-height:16px;font-weight:600;color:var(--text-2);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:6px 12px;background:rgba(255,255,255,.03);transition:border-color .15s,color .15s,background .15s;white-space:nowrap;cursor:pointer}
.mini:hover{border-color:var(--cyan);color:var(--cyan)}
.mini.on{background:rgba(0,204,255,.14);border-color:var(--cyan);color:var(--cyan)}

/* campos */
.field,.inp{width:100%;font:inherit;font-size:16px;line-height:24px;color:var(--text);background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 16px;outline:none;transition:border-color .2s,box-shadow .2s}
.field::placeholder,.inp::placeholder{color:#6b7886}
.field:focus,.inp:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,204,255,.18)}
.field.bad,.inp.bad{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,107,74,.15)}
.field.good,.inp.good{border-color:rgba(45,224,176,.55)}
select.field option{background:#1A1F26}
.lbl,.fld label,.fld legend{display:block;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:8px;padding:0}
.lbl{color:var(--muted-2);font-size:12px;margin-bottom:6px}
.fld label i,.fld legend i{font-style:normal;color:var(--orange)}
.m-err,.err{margin-top:7px;font-size:14px;line-height:20px;color:var(--red);font-weight:500}
.m-hint,.hint{margin-top:7px;font-size:14px;line-height:20px;color:var(--orange)}
.m-hint button,.hint button{font:inherit;font-weight:700;color:#fff;background:none;border:0;border-bottom:1px solid var(--orange);cursor:pointer;padding:0}

/* etiquetas */
.pill{font-size:11px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 10px;white-space:nowrap;display:inline-block}
@keyframes pulse-live{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}}
@keyframes dotp{0%,100%{opacity:1}50%{opacity:.3}}
.live{background:#dc2626;color:#fff;animation:pulse-live 1.6s infinite}
.live i{animation:dotp 1.2s infinite}
.blink{animation:dotp 1.2s infinite}
.dot{width:9px;height:9px;border-radius:50%;background:var(--orange);flex:0 0 auto;animation:pulse 1.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,138,0,.85);transform:scale(.85)}60%{box-shadow:0 0 0 12px rgba(255,138,0,0);transform:scale(1.15)}100%{box-shadow:0 0 0 0 rgba(255,138,0,0);transform:scale(.85)}}

/* beneficios con palomita y bloque de oferta */
.ck-li{display:flex;gap:12px;font-size:16px;line-height:24px;color:var(--text-2)}
.ck-li .ck{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;margin-top:0;color:var(--green);background:rgba(45,224,176,.12);border:1px solid rgba(45,224,176,.4)}
.offer{background:linear-gradient(135deg,rgba(255,138,0,.1),rgba(16,20,26,.92) 55%);border:1px solid rgba(255,138,0,.4);border-radius:18px;box-shadow:0 8px 30px rgba(0,0,0,.35),0 0 50px rgba(255,138,0,.08)}

/* popup / card de registro */
body.lock{overflow:hidden}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.modal.open{opacity:1;visibility:visible;transition:opacity .25s ease}
.dialog{position:relative;width:100%;max-width:480px;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;padding:30px 28px 26px;background:rgba(14,18,24,.96);border:1px solid rgba(0,204,255,.28);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 70px rgba(0,204,255,.1),0 0 90px rgba(255,138,0,.07);outline:none}
.modal .dialog{transform:translateY(14px) scale(.985);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.modal.open .dialog{transform:none}
.dialog.card-fija{max-height:none;overflow:visible}
.dialog .eyebrow{margin-bottom:16px}
.dialog h1,.dialog h2{font-size:clamp(26px,3.4vw,34px);line-height:1.12}
.m-sub{margin-top:12px;font-size:15px;line-height:23px;color:var(--body)}
.m-sub b{color:#fff;font-weight:700}
.m-form{display:grid;gap:18px;margin-top:22px}
.slots{display:grid;gap:10px}
.slot{position:relative}
.slot input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.fld .slot label{display:flex;align-items:center;gap:14px;margin:0;text-transform:none;letter-spacing:0;font-size:15px;line-height:22px;font-weight:600;color:var(--text-1);padding:14px 16px;background:rgba(16,20,26,.88);border:1px solid var(--glass-line);border-radius:12px;transition:border-color .2s,background .2s;cursor:pointer}
.slot input:checked+label{border-color:var(--cyan);background:rgba(0,204,255,.08);box-shadow:0 0 28px rgba(0,204,255,.1)}
.slot input:focus-visible+label{outline:2px solid var(--cyan);outline-offset:3px}
.slot .rd{flex:0 0 20px;height:20px;border-radius:50%;border:2px solid #4a5764;display:grid;place-items:center}
.slot input:checked+label .rd{border-color:var(--cyan)}
.slot input:checked+label .rd::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.slot label small{display:block;font-size:13px;line-height:18px;font-weight:500;color:var(--muted-2)}
.slot label em{margin-left:auto;font-style:normal;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);text-align:right;white-space:nowrap}
.slot label em.hot{color:var(--orange)}
.fld .opt{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-size:15px;line-height:22px;font-weight:400;color:var(--text-2);position:relative}
.opt input{position:absolute;opacity:0}
.opt .bx{flex:0 0 22px;height:22px;margin-top:1px;border-radius:6px;border:1.5px solid #4a5764;display:grid;place-items:center;color:#000;transition:background .2s,border-color .2s;font-size:14px;font-weight:800}
.opt .bx::after{content:"✓";opacity:0}
.opt input:checked+.bx{background:var(--cyan);border-color:var(--cyan)}
.opt input:checked+.bx::after{opacity:1}
.opt input:focus-visible+.bx{outline:2px solid var(--cyan);outline-offset:3px}
.wa-box{margin-top:14px}
.wa-row{display:flex;gap:10px}
.wa-row .pre{flex:0 0 auto;display:flex;align-items:center;padding:0 14px;color:var(--muted-2);font-weight:600;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);border-radius:12px;font-size:15px;user-select:none}
.m-priv{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:14px;font-size:14px;line-height:20px;color:var(--muted-2);text-align:center}
.spin{display:inline-block;width:18px;height:18px;border-radius:50%;border:3px solid rgba(0,0,0,.25);border-top-color:#000;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.tick-ok{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;color:var(--green);background:rgba(45,224,176,.1);border:2px solid rgba(45,224,176,.55);box-shadow:0 0 0 7px rgba(45,224,176,.08),0 0 40px rgba(45,224,176,.3);animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media (max-width:640px){
  .modal{align-items:end;padding:0}
  .modal .dialog{max-width:none;max-height:92dvh;border-radius:20px 20px 0 0;padding:26px 20px calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(40px)}
  .modal.open .dialog{transform:none}
}

/* toast */
#toast{transition:opacity .3s,transform .3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}