/* Dial Funnel — auth (GLF-74). Tokens alineados con index.html / prototipo validado.
   Cuando aterrice GLF-72 (sistema de diseño) se puede refactorizar a tokens compartidos. */
:root{
  --ground:#FFFFFF; --panel:#F7F9FC;
  --ink:#0B1C3C; --ink-2:#3A4C66; --ink-3:#73859F;
  --line:#E4EBF3; --line-strong:#D3DEEC;
  --navy:#07142E; --accent:#16C7E8; --accent-deep:#0E93AE;
  --accent-soft:rgba(22,199,232,0.10); --accent-line:rgba(22,199,232,0.32);
  --good:#12A06A; --good-soft:rgba(18,160,106,0.10);
  --bad:#D64545; --bad-soft:rgba(214,69,69,0.09);
  --grid:rgba(11,28,60,0.045); --grid-strong:rgba(11,28,60,0.07);
  --glow:rgba(22,199,232,0.10); --glow-2:rgba(16,58,110,0.09);
  --shadow:0 1px 2px rgba(11,28,60,.05),0 12px 34px rgba(11,28,60,.10);
  --radius:14px;
  --font-head:"Sora",system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"DM Sans",system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#07142E; --panel:#0E2548;
    --ink:#EAF2FF; --ink-2:#B4C6E2; --ink-3:#7E93B4;
    --line:rgba(255,255,255,0.10); --line-strong:rgba(255,255,255,0.16);
    --grid:rgba(255,255,255,0.045); --grid-strong:rgba(255,255,255,0.075);
    --glow:rgba(22,199,232,0.13); --glow-2:rgba(22,199,232,0.06);
    --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 38px rgba(0,0,0,.45);
    --accent-soft:rgba(22,199,232,0.14);
  }
}
*{box-sizing:border-box}
html,body{min-height:100%}
/* Centrado que NO recorta: la tarjeta se centra si cabe y, si es más alta que
   la pantalla, se ancla arriba y la página hace scroll (margin:auto en flex). */
body{margin:0;min-height:100vh;background:var(--ground);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;
  align-items:center;padding:32px 18px;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 500px at 82% -12%, var(--glow), transparent 62%),
    radial-gradient(820px 480px at -10% 112%, var(--glow-2), transparent 58%),
    linear-gradient(var(--grid) 1px, transparent 1px) -1px -1px / 72px 72px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) -1px -1px / 72px 72px,
    linear-gradient(var(--grid-strong) 1px, transparent 1px) -1px -1px / 288px 288px,
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px) -1px -1px / 288px 288px,
    var(--ground);
  -webkit-mask-image:radial-gradient(150% 130% at 50% 0%, #000 55%, rgba(0,0,0,.5) 100%);
  mask-image:radial-gradient(150% 130% at 50% 0%, #000 55%, rgba(0,0,0,.5) 100%);}

.card{width:100%;max-width:440px;margin:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow);padding:34px 32px 30px}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px}
.brand .mark{width:34px;height:34px;border-radius:9px;
  background:linear-gradient(145deg,var(--accent),var(--accent-deep));display:grid;place-items:center;
  color:#04202A;font-family:var(--font-head);font-weight:800;font-size:18px}
.brand .wm{font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:-0.01em}
.brand .wm span{color:var(--accent)}

h1{font-family:var(--font-head);font-weight:800;letter-spacing:-0.02em;line-height:1.15;
  font-size:24px;margin:0 0 6px;text-align:center}
.lede{margin:0 0 22px;color:var(--ink-3);font-size:14.5px;text-align:center}

label.fld{display:block;margin:0 0 14px}
label.fld > span{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
input[type=text],input[type=email],input[type=tel],input[type=password]{
  width:100%;font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:var(--ground);border:1px solid var(--line-strong);border-radius:10px;
  padding:12px 13px;transition:border-color .15s, box-shadow .15s}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder{color:var(--ink-3)}
.hint{font-size:12px;color:var(--ink-3);margin:5px 0 0}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:64px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--ink-3);font-family:var(--font-body);
  font-size:12px;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:7px}
.pw-toggle:hover{color:var(--accent-deep);background:var(--accent-soft)}

button.cta{width:100%;margin-top:6px;padding:13px 18px;border-radius:11px;border:0;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:15px;color:#04202A;
  background:linear-gradient(145deg,var(--accent),var(--accent-deep));
  box-shadow:0 8px 22px rgba(22,199,232,.28),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s, box-shadow .15s, opacity .15s}
button.cta:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 28px rgba(22,199,232,.38)}
button.cta:disabled{opacity:.6;cursor:progress}

.msg{display:none;margin:0 0 18px;padding:12px 14px;border-radius:11px;font-size:13.5px;line-height:1.5}
.msg.show{display:block}
.msg.err{background:var(--bad-soft);border:1px solid rgba(214,69,69,.3);color:var(--bad)}
.msg.ok{background:var(--good-soft);border:1px solid rgba(18,160,106,.3);color:var(--good)}

.alt{margin:20px 0 0;text-align:center;font-size:13.5px;color:var(--ink-3)}
.alt a{color:var(--accent-deep);font-weight:600}
@media (prefers-color-scheme:dark){.alt a,.wa a{color:var(--accent)}}
.sep{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--ink-3);font-size:12px}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}

.wa{margin:16px 0 0;text-align:center;font-size:13px;color:var(--ink-3)}
.wa a{color:var(--accent-deep);font-weight:600}

.foot{margin:22px 0 0;text-align:center;font-size:12px;color:var(--ink-3)}
.foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(4,32,42,.35);
  border-top-color:#04202A;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}