@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/space-grotesk-var.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/space-mono-400.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-mono-700.woff2) format("woff2")}
/* assets/tokens.css — Sistema visual Konverxo (inspeccionado desde
   pucelometro.es/jugar). Compartido entre las 4 rutas de la app. */


:root{
  --bg:#0a0611; --bg2:#130a23;
  --panel:rgba(255,255,255,.035); --panel2:rgba(255,255,255,.06);
  --br:rgba(168,85,247,.22); --br2:rgba(168,85,247,.4);
  --violeta:#a855f7; --violeta2:#c084fc; --violeta-deep:#6d28d9;
  --oro:#f6c945; --oro2:#ffe08a;
  --txt:#efeaf8; --dim:#a99cc6; --dim2:#8d80a8;
  --verde:#34e89e; --rojo:#ff5470; --cian:#18c8e8;
  --r:2px;
  --font-display:"Anton",sans-serif;
  --font-body:"Space Grotesk",system-ui,sans-serif;
  --font-mono:"Space Mono",monospace;
}

.alp-h{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.01em; font-weight:400; }

body.alp{
  margin:0; min-height:100vh;min-height:100dvh; background:radial-gradient(ellipse at 50% 0%, var(--bg2), var(--bg));
  color:var(--txt); font-family:"Space Grotesk",system-ui,sans-serif;
  position:relative; overflow-x:hidden;
}

.alp-card{
  background:var(--panel); border:1px solid var(--br2); border-radius:var(--r);
  padding:22px 18px; box-shadow:0 0 24px rgba(168,85,247,.08);
}

.alp-btn{
  font-family:"Space Grotesk",sans-serif; font-weight:600; border-radius:var(--r);
  border:1px solid var(--br); background:var(--panel); color:var(--txt);
  padding:12px 18px; cursor:pointer; transition:.13s;
}
.alp-btn:hover{ border-color:var(--br2); background:var(--panel2); }
.alp-btn.gold{ background:var(--oro); border-color:var(--oro); color:#1a1204; font-weight:700; }
.alp-btn.verde{ background:var(--verde); border-color:var(--verde); color:#04231a; font-weight:700; }
.alp-btn.rojo{ background:var(--rojo); border-color:var(--rojo); color:#2a0410; font-weight:700; }

.alp-opt{
  text-align:left; font-family:"Space Grotesk",sans-serif; font-weight:600;
  background:var(--panel); border:1px solid var(--br); color:var(--txt);
  padding:14px 15px; border-radius:var(--r); cursor:pointer;
  display:flex; align-items:center; gap:13px; transition:.13s; width:100%;
}
.alp-opt:hover{ border-color:var(--br2); background:var(--panel2); }
.alp-opt.elegido{
  background:rgba(52,232,158,.18); border-color:var(--verde); color:#bdffe2;
  box-shadow:0 0 0 1px var(--verde), 0 0 12px rgba(52,232,158,.4);
}
.alp-opt.deshabilitado{ opacity:.3; pointer-events:none; }
.alp-key{
  flex:0 0 34px; height:34px; border-radius:2px; background:rgba(168,85,247,.18);
  display:grid; place-items:center; font-weight:700; font-size:13px; color:var(--violeta2);
}

/* Partículas flotantes */
.alp-particulas{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.alp-particula{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--violeta2); box-shadow:0 0 6px var(--violeta);
  animation:alp-flt linear infinite; will-change:transform,opacity;
}
@keyframes alp-flt{
  0%{ transform:translateY(0); opacity:0; }
  10%{ opacity:.6; }
  88%{ opacity:.4; }
  100%{ transform:translateY(-104vh); opacity:0; }
}

/* Skyline (silueta genérica, técnica de degradado violeta) */
.alp-skyline{ position:fixed; left:0; right:0; bottom:0; height:14vh; min-height:90px; z-index:0; pointer-events:none; }
.alp-skyline svg{ width:100%; height:100%; display:block; }

/* Portal de escaneo (fondo de /pantalla) */
.alp-portal{
  position:fixed; top:50%; left:50%; width:min(70vmin,720px); height:min(70vmin,720px);
  transform:translate(-50%,-50%); z-index:0; pointer-events:none;
  transition:filter .5s ease;
}
.alp-portal svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.alp-anillo-a{ animation:alp-spin 46s linear infinite; will-change:transform; }
.alp-anillo-b{ animation:alp-spin-rev 60s linear infinite; will-change:transform; }
@keyframes alp-spin{ to{ transform:rotate(360deg); } }
@keyframes alp-spin-rev{ to{ transform:rotate(-360deg); } }

.alp-portal-glow{
  position:absolute; inset:18%; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--portal, var(--violeta)) 42%, transparent), transparent 70%);
  transition:background .5s ease;
}
.alp-portal-sweep{
  position:absolute; inset:0; border-radius:50%; will-change:transform;
  background:conic-gradient(from 0deg, transparent 0deg,
    color-mix(in srgb, var(--portal, var(--violeta)) 45%, transparent) 18deg, transparent 42deg);
  animation:alp-spin 5s linear infinite;
}

.alp-footer{
  position:fixed; bottom:calc(8px + env(safe-area-inset-bottom)); left:0; right:0; text-align:center; z-index:6;
}
.alp-footer img{ height:16px; opacity:.92; }

/* ------------------------------------------------------------
   Seguridad móvil: evita el zoom automático de iOS al enfocar un
   campo de texto (pasa si el font-size es menor de 16px), quita el
   resalte gris feo al tocar, y evita el scroll lateral accidental.
   ------------------------------------------------------------ */
input, textarea, select{ font-size:16px; }
button, .alp-btn, a.alp-btn, input, a{ -webkit-tap-highlight-color:transparent; }
html{ overflow-x:hidden; }

/* ------------------------------------------------------------
   Efectos de acabado "Konverxo" (inspirados en creadores.donodelobo.es):
   banda de escaneo + textura CRT. Uso: alpInitCRT() desde fx.js.
   ------------------------------------------------------------ */
.alp-scan{
  position:fixed; left:0; right:0; height:110px; z-index:1; pointer-events:none;
  background:linear-gradient(transparent, color-mix(in srgb, var(--violeta2) 8%, transparent), transparent);
  top:0; animation:alp-scanmove 7.5s linear infinite; will-change:transform;
}
@keyframes alp-scanmove{ 0%{ transform:translateY(-110px); } 100%{ transform:translateY(100vh); } }
.alp-crt{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.3;
  background:repeating-linear-gradient(rgba(0,0,0,.22) 0px, rgba(0,0,0,.22) 1px, transparent 1px, transparent 3px);
}

/* Tarjeta con marco neón + esquinas tipo HUD */
.alp-card-neon{
  position:relative; background:var(--panel); border:1px solid var(--br2); border-radius:var(--r);
  padding:26px 22px; box-shadow:0 0 30px color-mix(in srgb, var(--violeta) 25%, transparent),
    inset 0 0 40px color-mix(in srgb, var(--violeta) 6%, transparent);
}
.alp-card-neon::before, .alp-card-neon::after{
  content:''; position:absolute; width:16px; height:16px; border:2px solid var(--violeta2); opacity:.7;
}
.alp-card-neon::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.alp-card-neon::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* ------------------------------------------------------------
   Panel de acceso por PIN — icono, título con resplandor, texto
   tipo terminal, y 4 casillas de dígito independientes.
   ------------------------------------------------------------ */
.alp-pin-icono{ width:44px; height:44px; margin:0 auto 14px; display:block; color:var(--violeta2);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--violeta) 70%, transparent)); }
.alp-pin-titulo{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em;
  font-size:1.5em; color:var(--txt); margin-bottom:6px;
  text-shadow:0 0 14px color-mix(in srgb, var(--violeta) 75%, transparent),
              0 0 30px color-mix(in srgb, var(--violeta) 35%, transparent); }
.alp-pin-sub{ font-family:var(--font-mono); font-size:.72em; letter-spacing:.28em; text-transform:uppercase;
  color:var(--dim2); margin-bottom:24px; }
.alp-pin-digitos{ display:flex; gap:8px; justify-content:center; margin-bottom:20px; }
.alp-pin-digitos input{
  flex:1 1 0; min-width:0; max-width:54px; aspect-ratio:0.85; box-sizing:border-box;
  text-align:center; font-family:var(--font-display); font-size:clamp(1.1em,7vw,1.7em);
  border-radius:var(--r); border:1.5px solid var(--br); background:var(--panel2); color:var(--txt);
  box-shadow:inset 0 0 14px rgba(0,0,0,.45); transition:.15s ease;
}
.alp-pin-digitos input:focus{
  outline:none; border-color:var(--violeta2);
  box-shadow:0 0 16px color-mix(in srgb, var(--violeta) 55%, transparent), inset 0 0 14px rgba(0,0,0,.45);
}
.alp-pin-digitos input.error{ border-color:var(--rojo); animation:alp-pin-shake .3s; }
@keyframes alp-pin-shake{ 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* Refuerzos de las 4 familias de transición de /pantalla */
@keyframes alp-punch{ 0%{transform:scale(.9)} 60%{transform:scale(1.03)} 100%{transform:scale(1)} }
.alp-clase-impacto{ animation:alp-punch .32s cubic-bezier(.2,.7,.3,1); }
@keyframes alp-medalla{ 0%{filter:drop-shadow(0 0 0 transparent)} 100%{filter:drop-shadow(0 0 22px currentColor)} }
.alp-clase-resultado{ animation:alp-medalla .5s ease forwards; }

/* Recuadro «qué va a pasar» de las pantallas del móvil del público */
.que-pasa{margin:10px 0 14px;padding:10px 14px;border-radius:var(--r);border:1px solid var(--br2);background:color-mix(in srgb,var(--violeta) 10%,transparent);
  font-family:var(--font-body);font-size:.95em;line-height:1.4;color:var(--txt);text-align:left}
.que-pasa b{display:block;font-family:var(--font-mono);font-size:.74em;letter-spacing:.1em;text-transform:uppercase;color:var(--violeta2);margin-bottom:3px}

/* alp-html-oscuro: nunca fondo blanco (barra de estado, rebote, huecos) */
html{background:#0a0611;color-scheme:dark;overscroll-behavior-y:none}

/* ===== Sistema común de marcos (público · invitado · máster): rectángulos con esquinas, como la tele ===== */
.alp-card{position:relative;border-radius:2px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border-color:var(--br)}
.alp-card::before,.alp-card::after{content:"";position:absolute;width:12px;height:12px;border:2px solid var(--violeta2);pointer-events:none;opacity:.85}
.alp-card::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.alp-card::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.alp-btn,.alp-opt{border-radius:2px}
.alp-etq{font-family:var(--font-mono);font-weight:700;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--violeta2)}
.alp-etq::before{content:"> ";opacity:.7}