/* Páginas de acceso de Producto Winner (ingresar, invitación). Mismo estilo que la portada: pantalla partida, a la
   izquierda la marca con el radar; a la derecha el formulario. En el celular, solo el formulario con la marca arriba. */
:root { --fondo:#0b0720; --tinta:#f4f1ff; --suave:#b9b2d6; --tenue:#8a83ab; --linea:rgba(255,255,255,.1); --morado:#7c4dff; --morado2:#6122ed;
  --lima:#c8ff3d; --oro:#ffd23f; --curva:cubic-bezier(.2,.8,.2,1); }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { min-height:100%; }
body { background:var(--fondo); color:var(--tinta); font-family:Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; }
.oculto { display:none !important; }
a { color:inherit; }
.acceso { min-height:100vh; display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, 1fr); }

/* ── El lado de la marca ── */
.lado { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:38px clamp(28px, 4vw, 60px);
  background:radial-gradient(ellipse 80% 60% at 30% 0%, rgba(124,77,255,.55), transparent 65%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255,45,149,.18), transparent 70%), #0d0826;
  border-right:1px solid var(--linea); }
.lado:after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.3px); background-size:46px 46px; mask-image:radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%); }
.lado > * { position:relative; z-index:1; }
.marca { display:inline-flex; align-items:center; gap:10px; font-family:Sora, Inter, sans-serif; font-weight:800; font-size:20px; color:#fff; text-decoration:none; }
.marca b { color:var(--lima); }
.logo { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, var(--morado), var(--morado2)); box-shadow:0 8px 22px rgba(124,77,255,.5); }
.lado-centro { max-width:520px; }
.chip { display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-size:13px; color:var(--suave); margin-bottom:22px; }
.chip i { width:8px; height:8px; border-radius:50%; background:var(--lima); animation:late 1.8s ease-out infinite; }
@keyframes late { 0% { box-shadow:0 0 0 0 rgba(200,255,61,.7); } 70% { box-shadow:0 0 0 9px rgba(200,255,61,0); } 100% { box-shadow:0 0 0 0 rgba(200,255,61,0); } }
.lado h2 { font-family:Sora, Inter, sans-serif; font-size:clamp(32px, 3.6vw, 50px); line-height:1.06; letter-spacing:-.035em; margin-bottom:16px; }
.grad { background:linear-gradient(100deg, #fff 0%, #d9ccff 35%, var(--lima) 70%, #fff 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:brillo 6s linear infinite; }
@keyframes brillo { to { background-position:-220% 0; } }
.lado-centro > p { color:var(--suave); font-size:16px; line-height:1.6; margin-bottom:26px; max-width:440px; }
.puntos { list-style:none; display:grid; gap:14px; }
.puntos li { display:flex; gap:14px; align-items:flex-start; font-size:14.5px; color:var(--suave); line-height:1.45; }
.puntos li b { display:block; color:#fff; font-size:15px; margin-bottom:1px; }
.puntos .ico { flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid var(--linea); color:var(--lima); }
.lado-pie { font-size:12.5px; color:var(--tenue); }

/* El radar que gira, abajo a la derecha del lado de la marca. */
.radar { position:absolute; right:-150px; bottom:-150px; width:460px; height:460px; border-radius:50%; z-index:0 !important; opacity:.9;
  background:repeating-radial-gradient(circle, transparent 0 56px, rgba(167,139,250,.22) 56px 57px); }
.radar:before { content:''; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(200,255,61,.0) 0deg, rgba(200,255,61,.0) 300deg, rgba(200,255,61,.35) 360deg); animation:barre 4.5s linear infinite; }
.radar:after { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(167,139,250,.2); box-shadow:0 0 0 0 transparent; }
@keyframes barre { to { transform:rotate(360deg); } }
.radar i { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--lima); box-shadow:0 0 14px var(--lima); animation:punto 4.5s ease-out infinite; opacity:0; }
.radar i:nth-child(1) { left:30%; top:28%; animation-delay:.6s; }
.radar i:nth-child(2) { left:62%; top:22%; animation-delay:1.4s; background:var(--oro); box-shadow:0 0 14px var(--oro); }
.radar i:nth-child(3) { left:22%; top:60%; animation-delay:2.6s; }
.radar i:nth-child(4) { left:40%; top:44%; animation-delay:3.4s; background:#a78bfa; box-shadow:0 0 14px #a78bfa; }
@keyframes punto { 0% { opacity:0; transform:scale(.4); } 8% { opacity:1; transform:scale(1.3); } 20% { transform:scale(1); } 70% { opacity:.8; } 100% { opacity:0; } }

/* ── El lado del formulario ── */
.lado-form { display:grid; place-items:center; padding:40px 24px; background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124,77,255,.14), transparent 70%); }
.caja { width:min(420px, 100%); animation:entra .7s var(--curva) both; }
@keyframes entra { from { opacity:0; transform:translateY(18px); } }
.temblor { animation:temblor .45s; }
@keyframes temblor { 20%, 60% { transform:translateX(-7px); } 40%, 80% { transform:translateX(7px); } }
.caja .marca { display:none; margin-bottom:28px; }
h1 { font-family:Sora, Inter, sans-serif; font-size:30px; letter-spacing:-.025em; margin-bottom:8px; }
.sub { color:var(--suave); font-size:15px; margin-bottom:26px; line-height:1.5; }
label { display:block; font-size:13px; font-weight:600; color:#d9d2f5; margin-bottom:16px; }
.fila-eti { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.fila-eti a { font-size:12.5px; font-weight:600; color:#c4b5fd; text-decoration:none; }
.fila-eti a:hover { color:#fff; }
input { display:block; width:100%; margin-top:8px; height:52px; padding:0 16px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  color:#fff; font:inherit; font-size:15.5px; outline:none; transition:border-color .2s, box-shadow .2s, background .2s; }
input::placeholder { color:#7d769e; }
input:focus { border-color:#9b7bff; box-shadow:0 0 0 4px rgba(124,77,255,.22); background:rgba(255,255,255,.08); }
input:-webkit-autofill { -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 40px #1b1440 inset; caret-color:#fff; }
.clave { position:relative; display:block; }
.clave input { padding-right:50px; }
.ver { position:absolute; right:8px; top:calc(50% + 4px); transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:10px; background:none; cursor:pointer;
  color:var(--tenue); display:grid; place-items:center; }
.ver:hover { color:#fff; background:rgba(255,255,255,.08); }
.btn { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:54px; margin-top:10px; border:0; border-radius:14px;
  font:inherit; font-weight:700; font-size:16px; cursor:pointer; text-decoration:none; transition:transform .25s var(--curva), box-shadow .3s, opacity .2s; }
.btn:hover { transform:translateY(-2px); }
.prim { background:var(--lima); color:#14081f; box-shadow:0 10px 30px rgba(200,255,61,.25), inset 0 -3px 0 rgba(0,0,0,.12); }
.prim:hover { box-shadow:0 14px 40px rgba(200,255,61,.42), inset 0 -3px 0 rgba(0,0,0,.12); }
.prim:before { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform:skewX(-20deg); animation:destello 3.6s ease-in-out infinite; }
@keyframes destello { 0%, 60% { left:-60%; } 100% { left:130%; } }
.btn:disabled { opacity:.6; cursor:wait; transform:none; }
.btn .flecha { transition:transform .25s var(--curva); }
.btn:hover .flecha { transform:translateX(3px); }
.btn.cargando .flecha { display:inline-block; animation:gira .8s linear infinite; }
@keyframes gira { to { transform:rotate(360deg); } }
.aviso { border-radius:12px; padding:11px 14px; font-size:14px; margin-bottom:18px; line-height:1.45; }
.aviso.mal { background:rgba(255,45,85,.12); color:#ffb3c2; border:1px solid rgba(255,45,85,.3); }
.aviso.info { background:rgba(124,77,255,.14); color:#d9ccff; border:1px solid rgba(124,77,255,.35); }
.aviso.bien { background:rgba(200,255,61,.12); color:#e3ffa3; border:1px solid rgba(200,255,61,.3); }
.separa { display:flex; align-items:center; gap:12px; margin:26px 0 18px; color:var(--tenue); font-size:12.5px; }
.separa:before, .separa:after { content:''; flex:1; height:1px; background:var(--linea); }
.socio { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border-radius:16px; background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--linea); text-decoration:none; transition:border-color .2s, transform .25s var(--curva); }
.socio:hover { border-color:rgba(167,139,250,.5); transform:translateY(-2px); }
.socio b { display:block; font-size:14.5px; color:#fff; }
.socio span span { font-size:13px; color:var(--tenue); }
.socio em { font-style:normal; flex:none; font-weight:700; font-size:13.5px; color:var(--lima); }
.seguro { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:22px; font-size:12.5px; color:var(--tenue); }
.pie { margin-top:20px; text-align:center; color:var(--tenue); font-size:13.5px; line-height:1.5; }
.pie a { color:var(--lima); font-weight:600; text-decoration:none; }
.acepto { display:flex; gap:10px; align-items:flex-start; font-weight:500; color:var(--suave); font-size:13.5px; line-height:1.45; margin:4px 0 14px; cursor:pointer; }
.acepto input { display:inline-block; width:18px; height:18px; margin:1px 0 0; padding:0; flex:none; accent-color:var(--lima); box-shadow:none; }
.acepto a { color:#c4b5fd; }
.legal-pie { margin-top:14px; font-size:12.5px; }
.legal-pie a { color:var(--tenue); font-weight:500; }
.legal-pie a:hover { color:#fff; }
.reglas { list-style:none; display:grid; gap:5px; margin:-6px 0 16px; font-size:12.5px; color:var(--tenue); }
.reglas li:before { content:'○ '; }
.reglas li.ok { color:var(--lima); }
.reglas li.ok:before { content:'✓ '; }

@media (max-width:900px) {
  .acceso { grid-template-columns:1fr; }
  .lado { display:none; }
  .lado-form { min-height:100vh; align-items:start; padding-top:56px; background:radial-gradient(ellipse 90% 45% at 50% 0%, rgba(124,77,255,.4), transparent 70%); }
  .caja .marca { display:inline-flex; }
}
@media (prefers-reduced-motion:reduce) { .radar:before, .radar i, .grad, .prim:before, .chip i { animation:none; } .radar i { opacity:.8; } }