@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* Marca Club de Ganadores */
  --cdg-blue:#0C78B4; --cdg-blue-deep:#0078B4; --cdg-navy:#003C78; --cdg-navy-ink:#002B57;
  --cdg-gold:#FCA83C; --cdg-gold-soft:#FCC060; --cdg-gold-deep:#E08A1E; --cdg-white:#FCFCFC;
  /* Base / superficies */
  --bg:#F4F8FC; --surface:#FFFFFF; --surface-alt:#EAF2FA; --border:#D4E2F0; --border-strong:#B8CEE4;
  --hero-from:#0C78B4; --hero-to:#003C78;
  /* Texto */
  --text-primary:#0B2440; --text-secondary:#5B7794; --text-on-dark:#FCFCFC;
  /* Estados */
  --success:#1E9E5A; --warning:#E08A1E; --error:#D23B3B;
  --glow-gold:0 0 28px rgba(252,168,60,0.40);
  --ring-gold:0 0 0 3px rgba(252,168,60,0.30);
  --shadow-soft:0 8px 24px rgba(12,120,180,0.10);
  --shadow-card:0 4px 16px rgba(12,120,180,0.08);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--text-primary);
  background:#0a2036;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.display{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em;line-height:1.02}

/* ---------- STAGE / FRAME ---------- */
#stage{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(12,120,180,.55), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(252,168,60,.18), transparent 55%),
    linear-gradient(160deg,#06314f 0%,#072a44 45%,#04223a 100%);
}
#stage::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size:26px 26px;
}
#scaler{transform-origin:center center}
.phone{
  position:relative;width:390px;height:844px;border-radius:54px;
  background:#0b1722;
  padding:13px;
  box-shadow:
    0 1px 0 2px #1c2c3a inset,
    0 40px 90px -20px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.04);
}
.phone__notch{
  position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:128px;height:30px;background:#0b1722;border-radius:0 0 18px 18px;z-index:30;
}
.screen{
  position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;
  background:var(--bg);display:flex;flex-direction:column;
}

/* status bar */
.statusbar{
  position:absolute;top:0;left:0;right:0;height:52px;z-index:20;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 26px 6px;pointer-events:none;
}
.statusbar.on-dark{color:var(--text-on-dark)}
.statusbar.on-light{color:var(--text-primary)}
.statusbar .time{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;letter-spacing:.02em}
.statusbar .ic{display:flex;align-items:center;gap:6px}

/* scroll viewport */
.viewport{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.viewport::-webkit-scrollbar{display:none}
.viewport.with-nav{padding-bottom:92px}
.pad{padding:0 18px}

/* bottom nav */
.bottomnav{
  position:absolute;left:0;right:0;bottom:0;height:84px;z-index:25;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  display:flex;align-items:flex-start;padding:8px 3px 0;
}
.navbtn{
  flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding-top:8px;color:var(--text-secondary);position:relative;border-radius:12px;
}
.navbtn span{font-size:9px;font-weight:600;letter-spacing:0;line-height:1}
.navbtn.active{color:var(--cdg-blue)}
/* Indicador único que se DESLIZA entre pestañas. Mide una celda de ancho (1/6 del
   área de tabs, descontando el padding lateral de 3px) y se traslada activeIndex*100%. */
.navind{
  position:absolute;top:8px;left:3px;height:3px;z-index:1;pointer-events:none;
  width:calc((100% - 6px) / 6);display:flex;justify-content:center;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.navind > span{width:24px;height:3px;border-radius:999px;background:var(--cdg-gold);transition:background .3s ease}
.navbtn--concurso.active{color:#D23B3B}
.navbtn--concurso.active .navdot{background:#D23B3B}
.navbtn--concurso.active svg{filter:drop-shadow(0 0 8px rgba(210,59,59,.5))}
.navbtn .badge-count{
  position:absolute;top:2px;right:50%;margin-right:-22px;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--cdg-gold);
  color:#3a2400;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;box-shadow:0 0 0 2px #fff;
}

/* ---------- TYPO HELPERS ---------- */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cdg-blue)}
.h-sec{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.02em;text-transform:uppercase;color:var(--text-primary);line-height:1.05}
.muted{color:var(--text-secondary)}
.tiny{font-size:12px}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 20px;border-radius:14px;font-weight:700;font-size:15px;
  letter-spacing:.01em;transition:transform .12s ease, box-shadow .2s ease, background .2s;
  width:100%;white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn--gold{background:linear-gradient(180deg,var(--cdg-gold-soft),var(--cdg-gold));color:#3a2400;box-shadow:var(--glow-gold)}
.btn--gold:hover{box-shadow:0 0 34px rgba(252,168,60,.55)}
.btn--blue{background:linear-gradient(180deg,var(--cdg-blue),var(--cdg-navy));color:#fff;box-shadow:var(--shadow-soft)}
.btn--ghost{background:var(--surface);color:var(--cdg-blue);border:1.5px solid var(--border-strong)}
.btn--disabled,.btn:disabled{background:var(--surface-alt);color:var(--text-secondary);box-shadow:none;cursor:not-allowed}
.btn--sm{height:42px;font-size:13.5px;border-radius:11px;padding:0 14px;width:auto}

.iconbtn{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--text-primary)}

/* ---------- CARDS ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card)}
.card-gold{border-color:rgba(252,168,60,.45);box-shadow:0 10px 26px rgba(224,138,30,.16)}
.chip{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;
  font-size:13px;font-weight:600;background:var(--surface-alt);color:var(--text-secondary);
  border:1px solid transparent;transition:.15s;white-space:nowrap;
}
.chip.active{background:var(--cdg-blue);color:#fff;box-shadow:var(--shadow-soft)}
.chip.toggle.active{background:linear-gradient(180deg,var(--cdg-gold-soft),var(--cdg-gold));color:#3a2400}

.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.01em}
.badge--win{background:rgba(30,158,90,.14);color:var(--success)}
.badge--lock{background:var(--surface-alt);color:var(--text-secondary)}
.badge--gold{background:rgba(252,168,60,.18);color:var(--cdg-gold-deep)}
.badge--blue{background:rgba(12,120,180,.12);color:var(--cdg-blue)}

/* ---------- FIELDS ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600;color:var(--text-primary)}
.input{
  height:50px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);
  padding:0 14px;font-size:15px;color:var(--text-primary);transition:.15s;width:100%;
}
.input:focus{outline:none;border-color:var(--cdg-blue);box-shadow:var(--ring-gold)}
.input.err{border-color:var(--error)}
.input::placeholder{color:#9fb3c8}
select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%235B7794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.err-text{font-size:12.5px;color:var(--error);font-weight:600;display:flex;align-items:center;gap:5px}
.field-hint{font-size:12px;color:var(--text-secondary)}

/* OTP */
.otp-row{display:flex;gap:9px;justify-content:space-between}
.otp-box{
  flex:1;min-width:0;height:62px;border-radius:13px;border:1.5px solid var(--border);background:var(--surface);
  text-align:center;font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:var(--text-primary);}
.otp-box:focus{outline:none;border-color:var(--cdg-blue);box-shadow:var(--ring-gold)}
.otp-box.filled{border-color:var(--cdg-gold);background:#fffaf0}

/* focus ring globally */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--cdg-blue);outline-offset:2px;
}

/* ---------- HERO / RAYS ---------- */
.rays{
  position:absolute;inset:0;overflow:hidden;
  background:
    repeating-conic-gradient(from 0deg at 50% 38%,
      rgba(252,192,96,.16) 0deg 7deg, transparent 7deg 14deg);
  -webkit-mask-image:radial-gradient(circle at 50% 38%, #000 0%, transparent 62%);
          mask-image:radial-gradient(circle at 50% 38%, #000 0%, transparent 62%);
  pointer-events:none;
}
.hero-bg{
  position:relative;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(252,168,60,.20), transparent 50%),
    linear-gradient(170deg,var(--hero-from),var(--hero-to) 78%);
}

/* ---------- MEDAL RING (meta) ---------- */
.medalwrap{position:relative;width:188px;height:188px;display:flex;align-items:center;justify-content:center}
.medalwrap .ray2{
  position:absolute;inset:-6px;border-radius:999px;
  background:repeating-conic-gradient(from 8deg, rgba(252,192,96,.55) 0deg 8deg, rgba(252,168,60,.12) 8deg 16deg);
  -webkit-mask:radial-gradient(circle, transparent 60%, #000 61% 78%, transparent 79%);
          mask:radial-gradient(circle, transparent 60%, #000 61% 78%, transparent 79%);
  animation:spin 26s linear infinite;
}
.medal-center{
  position:relative;z-index:2;width:128px;height:128px;border-radius:999px;
  background:radial-gradient(circle at 50% 30%, #fff, #f1f7fd);
  border:5px solid var(--cdg-gold);box-shadow:inset 0 0 0 4px #fff, var(--glow-gold);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
@keyframes spin{to{transform:rotate(360deg)}}

.ring-svg circle.track{stroke:rgba(255,255,255,.18)}
.ring-svg circle.draw{
  stroke-linecap:round;
  stroke-dasharray:var(--circ);stroke-dashoffset:var(--circ);
  animation:draw 1100ms cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes draw{to{stroke-dashoffset:var(--off)}}

/* gauge de objetivo */
.gauge-val{stroke-dasharray:100;stroke-dashoffset:100;animation:gdraw 1100ms cubic-bezier(.22,1,.36,1) forwards}
@keyframes gdraw{to{stroke-dashoffset:0}}
.gauge-needle{animation:gsweep 1100ms cubic-bezier(.22,1,.36,1) both}
@keyframes gsweep{from{transform:rotate(-210deg)}to{transform:rotate(0deg)}}

/* reel de posición del concurso */
.pos-circle{animation:posland 380ms cubic-bezier(.34,1.56,.64,1) 1.25s both}
@keyframes posland{0%{transform:scale(1)}30%{transform:scale(1.24)}62%{transform:scale(.93)}100%{transform:scale(1)}}

/* Pepsi Coin */
.pcoin{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;flex:0 0 auto;
  background:radial-gradient(circle at 34% 28%, #FCD98A, #E08A1E 78%);
  color:#6b3d00;font-weight:800;font-family:'Anton',sans-serif;letter-spacing:.02em;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), inset 0 -3px 6px rgba(140,80,0,.30), 0 4px 10px rgba(224,138,30,.32);}
.pcoin--lg{width:46px;height:46px;font-size:25px}

/* ---------- ANIMATIONS ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes riseT{from{transform:translateY(16px)}to{transform:none}}
.stagger > *{animation:riseT .5s cubic-bezier(.22,1,.36,1) both}
.stagger > *:nth-child(1){animation-delay:.04s}
.stagger > *:nth-child(2){animation-delay:.10s}
.stagger > *:nth-child(3){animation-delay:.16s}
.stagger > *:nth-child(4){animation-delay:.22s}
.stagger > *:nth-child(5){animation-delay:.28s}
.stagger > *:nth-child(6){animation-delay:.34s}
.stagger > *:nth-child(7){animation-delay:.40s}

@keyframes pop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.medal-pop{animation:pop .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(252,168,60,.0)}40%{box-shadow:0 0 40px 6px rgba(252,168,60,.7)}100%{box-shadow:var(--shadow-card)}}
.gold-flash{animation:flash 1.1s ease-out .25s both}

@keyframes fadein{from{opacity:0}to{opacity:1}}
.screen-enter{animation:fadein .18s ease both}

/* toast */
.toast-wrap{position:absolute;left:0;right:0;bottom:100px;z-index:60;display:flex;justify-content:center;pointer-events:none}
.toast{
  background:var(--text-primary);color:#fff;border-radius:13px;padding:12px 16px;font-size:13.5px;font-weight:600;
  display:flex;align-items:center;gap:9px;box-shadow:0 12px 30px rgba(0,0,0,.28);max-width:300px;
  animation:rise .25s ease both;
}
.toast .ic-ok{color:var(--cdg-gold-soft)}

/* confetti */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:.9;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(640px) rotate(540deg);opacity:0}}

/* pieces */
.divider{height:1px;background:var(--border);margin:4px 0}
.skel{background:linear-gradient(100deg,var(--surface-alt) 30%,#f3f8fd 50%,var(--surface-alt) 70%);background-size:200% 100%;animation:shim 1.3s linear infinite;border-radius:12px}
@keyframes shim{to{background-position:-200% 0}}

/* podium */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px}
.podstep{border-radius:12px 12px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:10px;color:#fff;font-weight:700;width:64px}

/* member card */
.member-card{
  position:relative;border-radius:18px;overflow:hidden;padding:18px;color:#fff;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(252,168,60,.30), transparent 55%),
    linear-gradient(150deg,var(--cdg-blue),var(--cdg-navy-ink));
  box-shadow:var(--shadow-soft);border:1px solid rgba(255,255,255,.12);
}
.member-card .mc-rays{position:absolute;inset:0;opacity:.5;
  background:repeating-conic-gradient(from 0deg at 78% 22%, rgba(252,192,96,.18) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask:radial-gradient(circle at 78% 22%, #000, transparent 60%);mask:radial-gradient(circle at 78% 22%, #000, transparent 60%)}

/* avatar ring */
.avatar-ring{padding:3px;border-radius:999px;background:linear-gradient(135deg,var(--cdg-gold-soft),var(--cdg-gold-deep))}
.avatar-ring img,.avatar-ring .ava{display:block;border-radius:999px;background:#dbe8f5}

/* timeline */
.tl-line{position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--border)}
.tl-dot{width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;z-index:1;flex:0 0 auto}
.tl-dot.done{background:linear-gradient(180deg,var(--cdg-gold-soft),var(--cdg-gold));color:#3a2400}
.tl-dot.current{background:var(--cdg-blue);color:#fff;animation:pulse 1.6s ease-in-out infinite}
.tl-dot.pending{background:var(--surface-alt);color:var(--text-secondary);border:1px solid var(--border)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(12,120,180,.35)}50%{box-shadow:0 0 0 7px rgba(12,120,180,0)}}

/* prize image mock */
.prize-img{position:relative;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #eef5fb 55%, #e2edf7 100%);}
.prize-img .lock{position:absolute;inset:0;background:rgba(244,248,252,.55);backdrop-filter:saturate(.6) blur(.5px);display:flex;align-items:center;justify-content:center}
.prize-puck{border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 32%, #ffffff, #f0f6fc);
  box-shadow:0 10px 22px rgba(12,120,180,.16), inset 0 0 0 1px rgba(255,255,255,.9), inset 0 -4px 10px rgba(12,120,180,.06);}

/* Premios no alcanzables: a todo color (sin gris). El candado + "Te faltan" ya indican el estado. */
.locked-img{filter:none}

/* ---------- ANIMATIONS (extra, sesión 15 jun) ---------- */
/* Lista/grid con entrada escalonada fade + rise */
.fade-up-list > *{animation:rise .5s cubic-bezier(.22,1,.36,1) both}
.fade-up-list > *:nth-child(1){animation-delay:.03s}
.fade-up-list > *:nth-child(2){animation-delay:.07s}
.fade-up-list > *:nth-child(3){animation-delay:.11s}
.fade-up-list > *:nth-child(4){animation-delay:.15s}
.fade-up-list > *:nth-child(5){animation-delay:.19s}
.fade-up-list > *:nth-child(6){animation-delay:.23s}
.fade-up-list > *:nth-child(7){animation-delay:.27s}
.fade-up-list > *:nth-child(8){animation-delay:.31s}
.fade-up-list > *:nth-child(9){animation-delay:.35s}
.fade-up-list > *:nth-child(10){animation-delay:.39s}
.fade-up-list > *:nth-child(n+11){animation-delay:.42s}

/* Feedback táctil en tarjetas clicables */
.tappable{transition:transform .14s cubic-bezier(.22,1,.36,1), box-shadow .2s ease}
.tappable:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(12,120,180,.14)}
.tappable:active{transform:scale(.985)}

/* Tarjeta de premio: realce sutil al hover */
.prize-card{transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .2s ease}
.prize-card:hover{transform:translateY(-3px)}
.prize-card:active{transform:scale(.985)}

/* Brillo/pulso suave para el saldo mientras cuenta */
@keyframes coinpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.coin-spin{animation:coinpulse 1.1s ease-in-out}

/* Respeta usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* Transición entre pantallas (cambio de pestaña). La clase + dirección las pone el
   layout sobre el PROPIO .viewport (que es position:absolute;inset:0 → siempre bien
   dimensionado, NO colapsa con páginas cuya raíz es absoluta). Avanzar = entra desde
   la derecha, retroceder = izquierda; otras navegaciones = fade hacia arriba.
   IMPORTANTE: el .viewport es ANCESTRO de los overlays position:fixed (detalle de
   premio, carrito, checkout) que se anclan al marco .dm-phone. Si aquí usáramos
   `transform` u `opacity`, crearíamos un bloque contenedor / contexto de apilamiento
   y esos overlays quedarían MAL anclados o pintados DEBAJO de la nav (botón oculto).
   Por eso el deslizamiento se hace con left/right (y top/bottom) — son propiedades de
   posición que NO crean bloque contenedor ni contexto de apilamiento. Sensación
   natural con curva de desaceleración tipo iOS (cubic-bezier(.32,.72,0,1)). */
@keyframes cdgPageRight{from{left:34px;right:-34px}to{left:0;right:0}}
@keyframes cdgPageLeft{from{left:-34px;right:34px}to{left:0;right:0}}
@keyframes cdgPageUp{from{top:12px;bottom:-12px}to{top:0;bottom:0}}
.cdg-slide{animation:cdgPageUp .38s cubic-bezier(.32,.72,0,1) both}
.cdg-slide.dir-right{animation:cdgPageRight .44s cubic-bezier(.32,.72,0,1) both}
.cdg-slide.dir-left{animation:cdgPageLeft .44s cubic-bezier(.32,.72,0,1) both}