:root {
  --bg: #05070d; --txt: #f5f7fb; --txt2: rgba(235,242,255,.62); --txt3: rgba(235,242,255,.34);
  --azul: #2f8bf0; --cian: #3fd8ff; --viol: #7a6cff; --err: #ff6b81; --ok: #38e08c;
  --resp: cubic-bezier(.22,1,.36,1); --rebote: cubic-bezier(.34,1.56,.64,1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100dvh; color: var(--txt); background: var(--bg); overflow-x: hidden;
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* ---------- Fondo vivo ---------- */
#red { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.aurora { position: fixed; inset: -20vmax; z-index: 0; pointer-events: none; filter: blur(70px) saturate(140%); opacity: .75; }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; mix-blend-mode: screen; }
.aurora i:nth-child(1) { width: 55vmax; height: 55vmax; left: 5%; top: 0; background: radial-gradient(circle, rgba(47,139,240,.85), transparent 65%); animation: flota1 22s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 45vmax; height: 45vmax; right: 0; top: 25%; background: radial-gradient(circle, rgba(122,108,255,.7), transparent 65%); animation: flota2 28s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 40vmax; height: 40vmax; left: 25%; bottom: 0; background: radial-gradient(circle, rgba(63,216,255,.55), transparent 65%); animation: flota3 25s ease-in-out infinite alternate; }
@keyframes flota1 { to { transform: translate(18vmax, 12vmax) scale(1.2); } }
@keyframes flota2 { to { transform: translate(-16vmax, -10vmax) scale(.9); } }
@keyframes flota3 { to { transform: translate(10vmax, -14vmax) scale(1.15); } }
.grano { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background: radial-gradient(120% 80% at 50% 0%, transparent 40%, var(--bg) 100%); }
.luz { position: fixed; z-index: 1; width: 520px; height: 520px; left: 0; top: 0; margin: -260px 0 0 -260px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(63,216,255,.22), rgba(47,139,240,.08) 45%, transparent 70%); will-change: transform; opacity: 0; transition: opacity .6s; }
.luz.on { opacity: 1; }

/* ---------- Escenario ---------- */
.escena { position: relative; z-index: 2; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(22px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom)); perspective: 1200px; }
.logo { width: 132px; height: auto; margin: 0 auto 26px; display: block; filter: brightness(1.35) drop-shadow(0 0 22px rgba(47,139,240,.6));
  animation: entraLogo 1.1s var(--resp) both; }
@keyframes entraLogo { from { opacity: 0; transform: translateY(-12px) scale(.94); filter: brightness(2) drop-shadow(0 0 40px rgba(63,216,255,.9)); } }

.tarjeta { position: relative; width: 100%; max-width: 480px; border-radius: 30px; padding: 22px 24px 26px; transform-style: preserve-3d;
  background: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04) inset, 0 1px 0 rgba(255,255,255,.18) inset;
  animation: entraTarjeta 1s .12s var(--resp) both; will-change: transform; transition: transform .25s var(--resp); }
.tarjeta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), rgba(255,255,255,.55), rgba(63,216,255,.05) 25%, rgba(122,108,255,.45) 50%, rgba(63,216,255,.05) 75%, rgba(255,255,255,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .8; }
.tarjeta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.13), transparent 55%); opacity: var(--foco, 0); transition: opacity .4s; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.tarjeta { animation: entraTarjeta 1s .12s var(--resp) both, gira 9s linear infinite; }
@keyframes gira { to { --ang: 360deg; } }
@keyframes entraTarjeta { from { opacity: 0; transform: translateY(40px) rotateX(10deg) scale(.96); } }

/* progreso */
.prog { display: flex; gap: 6px; margin-bottom: 26px; }
.prog b { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.prog b::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; border-radius: inherit;
  background: linear-gradient(90deg, var(--cian), var(--azul)); box-shadow: 0 0 14px var(--cian); transition: transform .7s var(--resp); }
.prog b.on::after { transform: scaleX(1); }

/* pasos */
.pasos { display: grid; position: relative; transition: height .6s var(--resp); }
.paso { grid-area: 1 / 1; align-self: start; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(34px); filter: blur(10px);
  transition: opacity .5s var(--resp), transform .6s var(--resp), filter .5s var(--resp), visibility 0s .6s; }
.paso.sale { transform: translateY(-34px); }
.paso.activo { opacity: 1; visibility: visible; pointer-events: auto; transform: none; filter: none; transition-delay: 0s; }
.paso[data-dir="atras"]:not(.activo) { transform: translateY(-34px); }
.paso[data-dir="atras"].sale { transform: translateY(34px); }
.kick { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cian); font-weight: 600; margin: 0 0 12px; }
h1, h2.p { font-size: clamp(1.9rem, 7.4vw, 2.5rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; margin: 0 0 26px; }
h1 .grad, h2 .grad { background: linear-gradient(100deg, #fff 10%, var(--cian) 60%, var(--azul)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.letra { display: inline-block; opacity: 0; transform: translateY(.6em) rotateX(-70deg); filter: blur(6px); }
.paso.activo .letra { animation: letra .7s var(--resp) forwards; animation-delay: calc(var(--i) * 28ms + 120ms); }
@keyframes letra { to { opacity: 1; transform: none; filter: none; } }

.entrada { position: relative; }
.entrada input { width: 100%; font: inherit; font-size: clamp(1.5rem, 6vw, 1.9rem); font-weight: 600; letter-spacing: -.02em; color: var(--txt);
  background: transparent; border: 0; border-bottom: 1.5px solid rgba(255,255,255,.2); padding: 10px 0 12px; outline: none; border-radius: 0; caret-color: var(--cian); }
.entrada input::placeholder { color: var(--txt3); }
.entrada::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--cian), var(--azul), var(--viol)); box-shadow: 0 0 18px var(--cian), 0 6px 26px rgba(47,139,240,.55); transition: transform .55s var(--resp); }
.entrada:focus-within::after { transform: scaleX(1); }
.entrada.tel { display: flex; align-items: baseline; gap: 12px; }
.entrada.tel span { font-size: clamp(1.5rem, 6vw, 1.9rem); font-weight: 600; color: var(--txt3); }
.entrada.tel input { flex: 1; min-width: 0; }
.pista { color: var(--txt3); font-size: .85rem; margin: 12px 0 0; display: flex; align-items: center; gap: 8px; }
.pista kbd { font: inherit; font-size: .72rem; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 1px 7px; color: var(--txt2); }
.mal .entrada { animation: sacude .45s var(--resp); }
.mal .entrada input { border-bottom-color: var(--err); }
.mal .err { opacity: 1; transform: none; }
.err { color: var(--err); font-size: .88rem; margin: 10px 0 0; opacity: 0; transform: translateY(-4px); transition: .3s var(--resp); min-height: 1.3em; }
@keyframes sacude { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }

/* mosaicos */
.mosaicos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mosaicos input { position: absolute; opacity: 0; pointer-events: none; }
.mosaicos label { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px 14px 14px; border-radius: 18px; cursor: pointer; font-size: .96rem; font-weight: 600; line-height: 1.2;
  background: rgba(255,255,255,.055); box-shadow: 0 0 0 1px rgba(255,255,255,.09) inset; overflow: hidden;
  transition: transform .35s var(--rebote), background .3s, box-shadow .3s; transform-style: preserve-3d; }
.mosaicos label::before { content: ""; position: absolute; inset: 0; background: radial-gradient(160px circle at var(--lx, 50%) var(--ly, 0%), rgba(63,216,255,.28), transparent 60%); opacity: 0; transition: opacity .3s; }
.mosaicos label:hover::before { opacity: 1; }
.mosaicos label:active { transform: scale(.95); }
.mosaicos svg { width: 30px; height: 30px; stroke: var(--cian); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--rebote), filter .3s; }
.mosaicos label:hover svg { transform: translateY(-3px) scale(1.08); filter: drop-shadow(0 0 8px var(--cian)); }
.mosaicos input:checked + label { background: linear-gradient(150deg, rgba(47,139,240,.45), rgba(122,108,255,.3)); box-shadow: 0 0 0 1.5px var(--cian) inset, 0 12px 40px -10px rgba(47,139,240,.7); transform: scale(1.03); }
.mosaicos input:focus-visible + label { box-shadow: 0 0 0 2px #fff inset; }
.omitir { background: none; border: 0; color: var(--txt2); font: inherit; font-size: .9rem; margin: 16px auto 0; display: block; cursor: pointer; padding: 6px 12px; border-radius: 8px; transition: color .2s; }
.omitir:hover { color: #fff; }

/* consentimiento */
.consent { display: flex; gap: 14px; align-items: flex-start; font-size: .9rem; color: var(--txt2); line-height: 1.45; cursor: pointer; margin: 0 0 8px; }
.consent input { appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin: 0; border-radius: 9px; cursor: pointer; background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.22) inset; display: grid; place-content: center; transition: .35s var(--resp); }
.consent input::after { content: ""; width: 7px; height: 13px; border: solid #04101e; border-width: 0 2.6px 2.6px 0; transform: rotate(45deg) scale(0); margin-top: -3px; transition: transform .35s var(--rebote); }
.consent input:checked { background: linear-gradient(135deg, var(--cian), var(--azul)); box-shadow: 0 0 22px rgba(63,216,255,.6); }
.consent input:checked::after { transform: rotate(45deg) scale(1); }
.consent a { color: var(--cian); text-decoration: none; }
.mal .consent input { box-shadow: 0 0 0 1.5px var(--err) inset; animation: sacude .45s var(--resp); }

/* botones */
.fila { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.atras { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; color: var(--txt); background: rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset;
  display: grid; place-content: center; transition: transform .3s var(--rebote), background .2s, opacity .3s; }
.atras:hover { background: rgba(255,255,255,.14); transform: translateX(-2px); }
.atras:active { transform: scale(.92); }
.atras[hidden] { display: none; }
.sig { position: relative; flex: 1; height: 52px; border: 0; border-radius: 26px; cursor: pointer; color: #fff; font: inherit; font-weight: 600; font-size: 1.04rem; letter-spacing: -.01em; overflow: hidden;
  background: linear-gradient(110deg, var(--azul), #4f7dff 55%, var(--viol)); box-shadow: 0 10px 34px -6px rgba(47,139,240,.8), 0 1px 0 rgba(255,255,255,.4) inset;
  transition: transform .3s var(--rebote), box-shadow .3s, opacity .3s; will-change: transform; }
.sig::before { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: brillo 3.6s ease-in-out infinite; }
@keyframes brillo { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.sig:hover { box-shadow: 0 14px 44px -4px rgba(63,216,255,.8), 0 1px 0 rgba(255,255,255,.5) inset; }
.sig:active { transform: scale(.97); }
.sig[disabled] { opacity: .6; cursor: default; }
.sig span { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.sig svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--rebote); }
.sig:hover svg { transform: translateX(4px); }
.aviso { display: none; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255,107,129,.12); color: var(--err); font-size: .9rem; }
.aviso.on { display: block; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* escena final */
.exito { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .6s .2s; }
.fin .exito { opacity: 1; visibility: visible; }
.fin .prog, .fin .pasos, .fin .fila { opacity: 0; transform: scale(.96); filter: blur(8px); pointer-events: none; transition: .5s var(--resp); }
.fin { min-height: 360px; }
.orbe { position: relative; width: 120px; height: 120px; margin: 0 auto 26px; }
.orbe .aro { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; }
.fin .orbe .aro { animation: onda 2.4s var(--resp) infinite; }
.fin .orbe .aro:nth-child(2) { animation-delay: .5s; } .fin .orbe .aro:nth-child(3) { animation-delay: 1s; }
@keyframes onda { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.orbe .nucleo { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8dffc4, var(--ok) 55%, #12a55e); box-shadow: 0 0 60px rgba(56,224,140,.75), 0 0 120px rgba(56,224,140,.35);
  transform: scale(0); }
.fin .orbe .nucleo { animation: nace .9s .25s var(--rebote) forwards; }
@keyframes nace { to { transform: scale(1); } }
.orbe svg { position: absolute; inset: 34px; width: 52px; height: 52px; stroke: #04210f; fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.fin .orbe svg { animation: trazo .6s .9s var(--resp) forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.exito h2 { font-size: 1.9rem; letter-spacing: -.03em; margin: 0 0 8px; }
.exito p { color: var(--txt2); margin: 0 auto; max-width: 30ch; }
.exito .esc { display: inline-block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ok); font-weight: 600; margin-bottom: 12px; }
.pie { position: relative; z-index: 2; margin-top: 22px; font-size: .8rem; color: var(--txt3); text-align: center; }
.demo { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 9; font-size: .72rem; padding: 6px 12px; border-radius: 999px; background: #ff9f0a; color: #000; white-space: nowrap; }

@media (min-width: 560px) { .tarjeta { padding: 30px 34px 34px; } .logo { width: 150px; } }
@media (max-width: 380px) { .mosaicos label { padding: 14px 12px; font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) {
  .aurora i, .sig::before, .tarjeta { animation: none !important; }
  .letra { opacity: 1; transform: none; filter: none; animation: none !important; }
  .paso { transition-duration: .01s; filter: none; }
  .luz { display: none; }
}