@font-face{font-family:Archivo;font-weight:500;font-display:block;src:url(fonts/archivo-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Archivo;font-weight:900;font-display:block;src:url(fonts/archivo-latin-900-normal.woff2) format("woff2")}

:root{
  --lila:#492C83; --naranja:#EE7528; --blanco:#FFFFFF;
  --sombra:0 4px 18px rgba(46,22,96,.55), 0 1px 3px rgba(46,22,96,.6);
  --side:108px; --top:150px; --bottom:220px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--lila);font-family:Archivo,sans-serif;color:var(--blanco);
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
button,input{font-family:inherit}

/* Escenario fijo 1080x1920 escalado al tamaño real del tótem */
#stage{position:absolute;left:50%;top:50%;width:1080px;height:1920px;transform-origin:center;overflow:hidden}

/* Fondo: degradado amplio animado lila ↔ naranja */
.bg{position:absolute;inset:-25%;background:
  radial-gradient(ellipse 90% 70% at 20% 15%, var(--naranja) 0%, transparent 70%),
  radial-gradient(ellipse 90% 70% at 85% 90%, var(--naranja) 0%, transparent 65%),
  linear-gradient(160deg, var(--lila) 0%, #6b3f8f 45%, var(--lila) 100%);
  animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(-6%,4%) rotate(8deg)}100%{transform:translate(5%,-5%) rotate(-6deg)}}

/* HUD */
.hud{position:absolute;inset:48px;pointer-events:none;font-weight:500;font-size:22px;letter-spacing:.18em;opacity:.85;text-shadow:var(--sombra)}
.hud .br{position:absolute;width:56px;height:56px;border:3px solid var(--blanco);filter:drop-shadow(0 2px 6px rgba(46,22,96,.5))}
.hud .tl{top:0;left:0;border-right:0;border-bottom:0}.hud .tr{top:0;right:0;border-left:0;border-bottom:0}
.hud .bl{bottom:0;left:0;border-right:0;border-top:0}.hud .br2{bottom:0;right:0;border-left:0;border-top:0}
.hud-top,.hud-bot{position:absolute;left:80px;right:80px;display:flex;justify-content:space-between}
.hud-top{top:14px}.hud-bot{bottom:14px}

.brand{position:absolute;top:var(--top);left:0;right:0;display:flex;justify-content:center;z-index:5}
#logo{height:96px;filter:drop-shadow(0 4px 14px rgba(46,22,96,.6))}
.logo-text{font-weight:900;font-size:96px;letter-spacing:.08em;line-height:1;text-shadow:var(--sombra)}

/* Pantallas */
.screen{position:absolute;inset:0;padding:310px var(--side) var(--bottom);display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:40px;opacity:0;pointer-events:none;transform:scale(.96);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.screen.active{opacity:1;pointer-events:auto;transform:none}

.kicker{font-weight:500;font-size:34px;letter-spacing:.24em;text-shadow:var(--sombra)}
.mega{font-weight:900;font-size:200px;line-height:.88;letter-spacing:-.02em;text-shadow:var(--sombra)}
.title{font-weight:900;font-size:104px;line-height:.95;text-shadow:var(--sombra)}
.sub{font-weight:500;font-size:34px;text-shadow:var(--sombra);opacity:.95}

.cta,.ghost{white-space:nowrap;border:0;border-radius:999px;font-weight:900;font-size:46px;letter-spacing:.06em;padding:34px 70px;cursor:pointer;transition:transform .15s}
.cta{background:var(--blanco);color:var(--lila);box-shadow:0 14px 40px rgba(46,22,96,.45)}
.ghost{background:transparent;color:var(--blanco);border:4px solid var(--blanco);text-shadow:var(--sombra)}
.cta:active,.ghost:active{transform:scale(.95)}
.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06);box-shadow:0 0 0 18px rgba(255,255,255,.18),0 14px 40px rgba(46,22,96,.45)}}
.row{display:flex;gap:32px;margin-top:auto}

/* Ruleta */
.wheel-wrap{position:relative;flex:none}
.wheel-wrap.teaser{width:640px;height:640px}
.wheel-wrap.big{width:860px;height:860px;margin-top:20px}
.wheel{width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 14px var(--blanco),0 30px 80px rgba(46,22,96,.55)}
.wheel svg{width:100%;height:100%;display:block}
.teaser .wheel{animation:slowspin 30s linear infinite}
@keyframes slowspin{to{transform:rotate(360deg)}}
.pointer{position:absolute;top:-46px;left:50%;transform:translateX(-50%);width:0;height:0;z-index:3;
  border-left:46px solid transparent;border-right:46px solid transparent;border-top:92px solid var(--blanco);filter:drop-shadow(0 6px 10px rgba(46,22,96,.6))}
.hub{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;border:10px solid var(--naranja);
  background:var(--blanco);color:var(--lila);font-weight:900;font-size:50px;cursor:pointer;box-shadow:0 10px 30px rgba(46,22,96,.5);z-index:2}
.hub:active{transform:scale(.94)}
.hub:disabled{opacity:.9}

/* Reto */
.steps{list-style:none;display:flex;flex-direction:column;gap:22px;width:100%;text-align:left}
.steps li{display:flex;align-items:center;gap:28px;font-weight:500;font-size:40px;line-height:1.15;text-shadow:var(--sombra)}
.steps b{flex:none;width:84px;height:84px;border-radius:50%;background:var(--blanco);color:var(--lila);display:grid;place-items:center;font-weight:900;font-size:48px;text-shadow:none}
.steps em{font-style:normal;font-weight:900}
.qrs{display:flex;flex-wrap:wrap;justify-content:center;gap:36px;width:100%}
.qr{background:var(--blanco);border-radius:32px;padding:26px 26px 16px;width:300px;color:var(--lila);font-weight:900;font-size:28px;letter-spacing:.06em;box-shadow:0 12px 30px rgba(46,22,96,.4)}
.qrs.n1 .qr{width:420px}
.qr svg{width:100%;height:auto;display:block;margin-bottom:8px}
.qr-empty{font-weight:500;font-size:28px;opacity:.85;text-shadow:var(--sombra)}

/* PIN */
.pin-dots{display:flex;gap:28px;height:44px}
.pin-dots i{width:40px;height:40px;border-radius:50%;border:4px solid var(--blanco)}
.pin-dots i.on{background:var(--blanco)}
.pin-dots.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-20px)}75%{transform:translateX(20px)}}
.keypad{display:grid;grid-template-columns:repeat(3,200px);gap:26px}
.keypad button{height:170px;border-radius:36px;border:4px solid rgba(255,255,255,.9);background:rgba(255,255,255,.12);color:var(--blanco);
  font-weight:900;font-size:66px;text-shadow:var(--sombra);cursor:pointer}
.keypad button:active{background:var(--blanco);color:var(--lila)}

/* Resultado */
.prize{font-weight:900;font-size:110px;line-height:1;background:var(--blanco);color:var(--lila);padding:50px 60px;border-radius:44px;
  box-shadow:0 20px 60px rgba(46,22,96,.5);animation:pop .9s cubic-bezier(.2,1.6,.4,1) both;max-width:100%}
@keyframes pop{0%{transform:scale(.2) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
.turno{display:flex;flex-direction:column;gap:8px;border:4px solid var(--blanco);border-radius:36px;padding:30px 70px;text-shadow:var(--sombra)}
.turno span{font-weight:500;font-size:32px;letter-spacing:.18em}
.turno strong{font-weight:900;font-size:130px;line-height:1}
.turno small{font-weight:500;font-size:30px}
#s-result .cta{margin-top:auto}
.burst{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.burst i{position:absolute;top:-40px;width:22px;height:34px;border-radius:4px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(2050px) rotate(720deg)}}

.toast{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);background:var(--blanco);color:var(--lila);font-weight:900;font-size:34px;
  padding:24px 44px;border-radius:999px;box-shadow:0 10px 30px rgba(46,22,96,.5);z-index:60}

[hidden]{display:none!important}
#s-reto{gap:30px}
#s-reto .qr{width:250px;padding:22px 22px 12px;font-size:24px}
#s-reto .row{margin-top:auto;padding-bottom:10px}
#s-reto .qrs.n4{max-width:560px}

/* Verificación del asesor */
#s-pin{gap:28px}
.keypad button{height:140px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.chips button{font-weight:900;font-size:30px;letter-spacing:.04em;padding:22px 30px;border-radius:999px;border:4px solid var(--blanco);
  background:transparent;color:var(--blanco);text-shadow:var(--sombra);cursor:pointer}
.chips button.on{background:var(--blanco);color:var(--lila);text-shadow:none}
.chips button.on::before{content:"✓ "}
.chips.need{animation:shake .4s}