:root{
  --bg1: #0b0d1a;
  --bg2: #0e1030;
  --glow1: 210 100% 60%;
  --glow2: 270 100% 65%;
  --panel: 0 0% 100% / 0.14;   /* MÁS TRANSPARENTE */
  --panel-border: 0 0% 100% / 0.08;
  --text: #dfe6ff;
  --text-dim: #a8b0d9;
  --brand: #74a7ff;
  --cta1: #2f6bff;
  --cta2: #6cc6ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  color:var(--text); background: radial-gradient(1200px 800px at 85% 30%, hsl(var(--glow1)/.10), transparent 60%),
                      radial-gradient(1000px 700px at 20% 70%, hsl(var(--glow2)/.08), transparent 60%),
                      linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

/* Canvas animado de ondas */
#bg-waves{
  position:fixed; inset:0; width:100%; height:100%; z-index:-1; display:block;
  opacity:0.9;
}

.brand{ display:flex; justify-content:center; margin:48px 0 8px }
.logo{ height:36px; width:auto; filter:drop-shadow(0 4px 12px rgba(0,0,0,.45)) }

.container{ max-width:1050px; margin:0 auto; padding:8px 24px 40px; text-align:center }
h1{ font-size: clamp(32px, 6vw, 68px); letter-spacing:.02em; margin:10px 0 8px }
.sub{ color:var(--text-dim); font-size: clamp(14px, 2.2vw, 20px); margin:0 0 28px }

.card{
  margin: 0 auto 16px;
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: hsl(var(--panel));
  border:1px solid hsl(var(--panel-border));
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  text-align:left;
  max-width: 1000px;
}

.row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width: 860px){ .row{ grid-template-columns:1fr } }

label{ display:block; color:var(--text-dim); font-size:13px; margin: 0 0 6px 2px }
input{
  width:100%; padding:14px 14px; border-radius:10px; border:1px solid hsl(var(--panel-border));
  background: rgba(16,18,40,.42); color:var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
input::placeholder{ color:#96a1d9; opacity:.55 }

.check{ display:flex; gap:10px; align-items:center; margin:14px 2px 10px; font-size:14px; color:var(--text-dim) }
.check input[type="checkbox"]{ width:18px; height:18px; accent-color:#6ca8ff }

.captcha{ margin: 8px 2px 12px }

.cta{
  appearance:none; border:0; cursor:pointer;
  padding:14px 22px; border-radius:10px; font-weight:700; letter-spacing:.2px;
  color:white; background: linear-gradient(90deg, var(--cta1), var(--cta2));
  box-shadow: 0 10px 32px rgba(67,142,255,.35);
}
.cta:hover{ filter:saturate(1.06) brightness(1.03) }

.msg{ margin: 12px 2px 0; min-height: 20px; color: var(--text-dim) }

.x-link{
  margin: 22px auto 0;
  width:max-content; display:inline-flex; gap:10px; align-items:center;
  padding:10px 14px; border-radius:999px; color:#b9c7ff;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
}
.x-ico{ width:18px; height:18px }

.foot{ text-align:center; color:#8fa0db; font-size:13px; margin: 24px 0 36px }