/* ============================================================
   Premios ReparaloYA — branding oficial (azul #0050b0)
   Display: Unbounded · Body: Plus Jakarta Sans
   Tema claro, profesional y confiable como reparaloya.com.uy
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg:#f3f7fc;
  --bg2:#e7eef8;
  --card:#ffffff;
  --line:rgba(0,80,176,.14);
  --txt:#0e2138;
  --muted:#5e7390;
  --blue:#0050b0;
  --blue-dark:#003c87;
  --blue-light:#2e7be0;
  --sky:#33b6ff;
  --gold:#f6b333;
  --gold-deep:#d4901f;
  --green:#23c277;
  --red:#e23b50;
  --shadow:0 22px 60px -22px rgba(0,60,135,.35);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--txt);
  min-height:100vh;
  background:
    radial-gradient(1000px 620px at 50% -12%, rgba(46,123,224,.16), transparent 60%),
    radial-gradient(820px 560px at 112% 18%, rgba(51,182,255,.14), transparent 55%),
    radial-gradient(680px 480px at -12% 85%, rgba(0,80,176,.08), transparent 60%),
    var(--bg);
  display:flex;flex-direction:column;align-items:center;
  padding:26px 16px 60px;
  position:relative;overflow-x:hidden;
}

/* ---------- header ---------- */
.brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin:4px 0 16px;z-index:1}
.brand img{max-width:190px;filter:drop-shadow(0 8px 22px rgba(0,80,176,.25))}
.kicker{
  font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(26px,7vw,40px);
  letter-spacing:-.02em;line-height:1;text-align:center;margin:0;
  background:linear-gradient(95deg,var(--blue) 0%,var(--blue-light) 55%,var(--sky) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{color:var(--muted);font-size:13.5px;text-align:center;margin:4px 0 0;letter-spacing:.05em;text-transform:uppercase;font-weight:700}

/* ---------- cards ---------- */
.card{
  position:relative;z-index:1;width:100%;max-width:440px;margin:14px 0;
  background:var(--card);
  border:1px solid var(--line);border-radius:24px;padding:28px 24px;
  box-shadow:var(--shadow);
  animation:rise .55s cubic-bezier(.2,.8,.2,1) both;
}
.card h2{font-family:'Unbounded',sans-serif;font-weight:800;font-size:22px;margin:0 0 6px;letter-spacing:-.01em;color:var(--blue-dark)}
.card p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 14px}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.oculto{display:none!important}

/* ---------- inputs / botones ---------- */
label.fld{display:block;font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:12px 0 6px}
input{
  width:100%;padding:14px 16px;border-radius:14px;font-size:16px;
  border:1.5px solid #d6e2f1;background:#f7fafe;color:var(--txt);
  font-family:inherit;transition:border-color .2s,box-shadow .2s;
}
input::placeholder{color:#9fb2c8}
input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,80,176,.14);background:#fff}

.btn{
  width:100%;margin-top:18px;padding:16px;border:0;border-radius:16px;cursor:pointer;
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:16px;letter-spacing:.01em;color:#fff;
  background:linear-gradient(180deg,var(--blue-light),var(--blue));
  box-shadow:0 12px 28px -8px rgba(0,80,176,.55),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .12s,box-shadow .2s,filter .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(0,80,176,.7)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:disabled{filter:saturate(.6) brightness(.95);cursor:not-allowed;transform:none}
.btn.gold{background:linear-gradient(180deg,#ffcf6b,var(--gold-deep));color:#3a2700;
  box-shadow:0 12px 28px -8px rgba(246,179,51,.6),inset 0 1px 0 rgba(255,255,255,.5)}

.err{color:var(--red);font-size:13.5px;font-weight:600;margin:10px 0 0;min-height:1px}
.legal{font-size:12px;color:var(--muted);text-align:center;margin-top:16px}
.legal a{color:var(--blue);text-decoration:none;border-bottom:1px dotted rgba(0,80,176,.5);font-weight:600}

/* ---------- selector de juego ---------- */
.juegos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.juego-op{
  border:1.5px solid var(--line);border-radius:18px;padding:22px 14px;cursor:pointer;
  background:linear-gradient(180deg,#f7fafe,#eef4fc);
  text-align:center;transition:transform .15s,border-color .2s,box-shadow .2s;
}
.juego-op:hover{transform:translateY(-4px);border-color:var(--blue);
  box-shadow:0 16px 32px -16px rgba(0,80,176,.55)}
.juego-op .emoji{font-size:42px;display:block;margin-bottom:8px;filter:drop-shadow(0 6px 12px rgba(0,60,135,.2))}
.juego-op .nm{font-family:'Unbounded',sans-serif;font-weight:700;font-size:15px;color:var(--blue-dark)}
.juego-op .tag{display:block;font-size:11px;color:var(--muted);margin-top:3px}

/* ---------- RULETA ---------- */
.ruleta-stage{position:relative;width:min(340px,86vw);aspect-ratio:1;margin:6px auto 4px}
.ruleta-glow{position:absolute;inset:-18px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,123,224,.32),transparent 65%);filter:blur(14px);z-index:0}
.ruleta-svg{position:relative;z-index:2;width:100%;height:100%;
  transform:rotate(0deg);
  filter:drop-shadow(0 16px 36px rgba(0,60,135,.35))}
.ruleta-svg.spinning{transition:transform 5.4s cubic-bezier(.12,.72,.05,1)}
/* bombillas del aro */
.bulbs{position:absolute;inset:0;z-index:3;pointer-events:none}
.bulb{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--gold) 60%,#9a6c12);
  box-shadow:0 0 8px var(--gold);transform:translate(-50%,-50%)}
.bulb.on{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.4;box-shadow:0 0 3px var(--gold)}}
/* puntero */
.pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:5;
  width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;
  border-top:30px solid var(--gold);filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.pointer::after{content:"";position:absolute;top:-38px;left:-7px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--gold));box-shadow:0 0 10px var(--gold)}
/* hub central */
.hub{position:absolute;z-index:4;top:50%;left:50%;width:64px;height:64px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 38% 32%,#fff,#dbe6f5 40%,#9fb4d2 100%);
  box-shadow:0 6px 18px rgba(0,40,90,.4),inset 0 -3px 6px rgba(0,40,90,.18);
  display:flex;align-items:center;justify-content:center;font-size:26px}

/* ---------- RASPADITA ---------- */
.scratch-wrap{position:relative;width:min(360px,88vw);height:190px;margin:8px auto 4px;
  border-radius:20px;overflow:hidden;box-shadow:0 14px 34px -16px rgba(0,60,135,.4)}
.scratch-prize{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:18px;
  background:
    radial-gradient(circle at 50% 40%,rgba(46,123,224,.18),transparent 70%),
    linear-gradient(135deg,#eef4fc,#dbe8fa);
}
.scratch-prize .em{font-size:40px}
.scratch-prize .nm{font-family:'Unbounded',sans-serif;font-weight:800;font-size:19px;color:var(--blue)}
.scratch-canvas{position:absolute;inset:0;touch-action:none;cursor:grab}
.scratch-hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;
  font-size:12px;color:rgba(255,255,255,.95);font-weight:700;z-index:3;pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.35)}

/* ---------- PREMIO / CUPÓN ---------- */
.prize-burst{text-align:center}
.prize-emoji{font-size:64px;display:inline-block;animation:pop .6s cubic-bezier(.2,1.4,.4,1) both,float 3s ease-in-out 0.6s infinite}
@keyframes pop{from{transform:scale(0) rotate(-25deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes float{50%{transform:translateY(-8px)}}
.prize-name{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(24px,7vw,34px);
  margin:6px 0 2px;background:linear-gradient(95deg,var(--blue),var(--sky));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.coupon{
  margin:18px 0 6px;padding:18px;border-radius:18px;text-align:center;
  background:linear-gradient(135deg,rgba(0,80,176,.07),rgba(51,182,255,.1));
  border:1.5px dashed rgba(0,80,176,.4);position:relative;
}
.coupon .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-weight:800}
.coupon .code{font-family:'Unbounded',sans-serif;font-weight:900;font-size:30px;letter-spacing:.12em;
  color:var(--blue-dark);margin:6px 0 4px}
.coupon .exp{font-size:13px;color:var(--muted)}
.fineprint{font-size:12.5px;color:var(--muted);line-height:1.5;text-align:center;margin-top:14px}

/* confeti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;opacity:.95;
  animation:fall linear forwards}
@keyframes fall{to{transform:translateY(108vh) rotate(720deg);opacity:.9}}

@media (max-width:380px){.juegos{gap:10px}.card{padding:24px 18px}}