:root{
  --gold-1:#ffe27a;
  --gold-2:#d89a2c;
  --gold-3:#7a4e10;
  --accent:#ff5b1f;
  --accent-2:#ff8a3d;
  --bg:#0a0a0a;
  --radius: 16px;          /* estado inicial: amontonados */
  --radius-open: 150px;    /* estado abierto: en circulo */
  --duration: 26s;         /* velocidad del giro lento */
}

*{box-sizing:border-box;}

.premios-section{
  text-align:center;
  overflow:hidden;
  position:relative;
}

.premios-title{
  font-size:64px;
  font-weight:900;
  letter-spacing:1px;
  color:#fff;
  -webkit-text-stroke: 3px var(--accent);
  text-stroke: 3px var(--accent);
  text-shadow:
    0 0 18px rgba(255,91,31,.45),
    0 6px 0 rgba(0,0,0,.5);
  margin:0 0 10px;
}

.premios-sub{
  color:#cfcfcf;
  font-family:Arial, sans-serif;
  font-weight:400;
  font-size:15px;
  margin:0 0 36px;
  letter-spacing:.3px;
}

/* ---------- ESCENARIO ---------- */
.stage{
  width:100%;
  max-width:640px;
  height:470px;
  margin:0 auto;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.platform{
  position:absolute;
  left:50%;
  bottom:46px;
  width:72%;
  height:54px;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 30%, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%);
  box-shadow:
    0 0 40px rgba(255,200,80,.35),
    0 18px 30px rgba(0,0,0,.6);
  transition: box-shadow .6s ease, transform .6s ease;
}
.stage.open .platform{
  box-shadow:
    0 0 70px rgba(255,200,80,.55),
    0 18px 30px rgba(0,0,0,.6);
}

.orbit-root{
  position:absolute;
  left:50%;
  top:58%;
  width:0;
  height:0;
}

/* posición fija de cada premio alrededor del círculo */
.slot{
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0;
  transform: rotate(var(--start-angle));
}

/* anillo que se expande/contrae y gira */
.ring{
  position:absolute;
  top:0;
  left:0;
  width:calc(var(--radius) * 2);
  height:calc(var(--radius) * 2);
  margin-top:calc(var(--radius) * -1);
  margin-left:calc(var(--radius) * -1);
  transition: width 1.1s cubic-bezier(.34,1.4,.4,1),
              height 1.1s cubic-bezier(.34,1.4,.4,1),
              margin 1.1s cubic-bezier(.34,1.4,.4,1);
  animation: spin var(--duration) linear infinite;
  animation-play-state: paused;
}
.stage.open .ring{
  width:calc(var(--radius-open) * 2);
  height:calc(var(--radius-open) * 2);
  margin-top:calc(var(--radius-open) * -1);
  margin-left:calc(var(--radius-open) * -1);
  animation-play-state: running;
}

/* corrige el angulo fijo del slot, para que el premio no quede inclinado */
.item-pos{
  position:absolute;
  top:50%;
  left:100%;
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--start-angle)));
}

/* contrarresta SOLO el giro animado del anillo, asi el premio siempre mira hacia arriba */
.item-wrap{
  animation: counterspin var(--duration) linear infinite;
  animation-play-state: paused;
  transition: filter .3s ease;
}
.stage.open .item-wrap{
  animation-play-state: running;
}

@keyframes spin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes counterspin{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}

.product-img{
  display:block;
  max-height:118px;
  width:auto;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.55));
  transition: transform .25s ease, filter .25s ease;
}

.stage.open .item-wrap:hover .product-img{
  transform:scale(1.12);
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(255,150,40,.5));
}

.label{
  position:absolute;
  bottom:-26px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-family:Arial, sans-serif;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:rgba(0,0,0,.65);
  border:1px solid var(--accent);
  padding:3px 9px;
  border-radius:20px;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.stage.open .item-wrap .label{ opacity:1; }

.hint{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  color:#fff;
  font-family:Arial, sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.4px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  padding:10px 22px;
  border-radius:30px;
  box-shadow:0 6px 18px rgba(255,91,31,.45);
  animation: pulse 1.6s ease-in-out infinite;
  transition: opacity .4s ease, visibility .4s ease;
}
.stage.open .hint{
  opacity:1;
  visibility:hidden;
}

@keyframes pulse{
  0%,100%{ transform:translateX(-50%) scale(1); }
  50%{ transform:translateX(-50%) scale(1.06); }
}

@media (max-width:480px){
  .premios-title{font-size:42px;}
  .stage{height:350px;}
  .product-img{max-height:100px;}
  :root{ --radius-open: 108px; }
}

@media (prefers-reduced-motion: reduce){
  .ring, .item-wrap, .hint{ animation: none !important; }
}