/* =====================================================
   JACKPOT ITEM — ESTILOS TEMÁTICOS CON BRILLO
   Utiliza clases como: .jackpot-item.jackpot--oro, .jackpot--diamante, etc.
===================================================== */

/* Base común para todos los jackpot-items */
.jackpot-item {
  position: relative;
  color: var(--clr-black);
  padding: var(--sp-6);
  border-radius: var(--radius-l);
  text-align: center;
  overflow: hidden;
  transition: transform var(--transition-normal);
}

/* Brillo animado base */
.jackpot-item::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -50%;
  width: 200%;
  height: 180%;
  transform: rotate(10deg);
  pointer-events: none;
}

/* Animación universal */
@keyframes jackpot-brillo {
  0%   { left: -60%; }
  60%  { left: 110%; }
  100% { left: 110%; }
}

/* ===== EFECTO DE MOVIMIENTO HORIZONTAL ===== */

.jackpot-item.animate-slide {
  animation: jackpot-deslizar 4s ease-in-out infinite alternate;
}

@keyframes jackpot-deslizar {
  0%   { transform: translateX(-10px); }
  50%  { transform: translateX(10px); }
  100% { transform: translateX(-10px); }
}


/* ========== EFECTO DE BRILLO INTERNO EN MOVIMIENTO ========== */

.jackpot-item.glow-motion::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  animation: glow-slide 3.5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

/* Asegura que el contenido esté debajo del brillo */
.jackpot-item {
  position: relative;
  z-index: 0;
}

@keyframes glow-slide {
  0%   { left: -75%; }
  50%  { left: 0%; }
  100% { left: -75%; }
}

/* -------------------------------
   🟡 EFECTO ORO
-------------------------------- */
.jackpot--oro {
  background: linear-gradient(135deg, #FFD700 0%, #FFC300 40%, #FFF8DC 60%, #B8860B 100%);
  box-shadow: 0 6px 30px rgba(200,160,30,0.4), 0 2px 4px rgba(0,0,0,0.1);
  border: 2px solid #FFD700;
}

.jackpot--oro::before {
  background: linear-gradient(120deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.5) 80%, rgba(255,255,255,0) 100%);
  animation: jackpot-brillo 3s linear infinite;
}

/* -------------------------------
   💎 EFECTO DIAMANTE
-------------------------------- */
.jackpot--diamante {
  background: linear-gradient(135deg, #e0f7ff, #a2d4f7, #91bff1);
  box-shadow: 0 6px 30px rgba(60,130,200,0.4), 0 2px 4px rgba(0,0,0,0.1);
  border: 2px solid #91c5f1;
}

.jackpot--diamante::before {
  background: linear-gradient(120deg, rgba(255,255,255,0) 60%, rgba(173,216,230,0.5) 80%, rgba(255,255,255,0) 100%);
  animation: jackpot-brillo 3s linear infinite;
}

/* -------------------------------
   🔴 EFECTO RUBÍ
-------------------------------- */
.jackpot--rubi {
  background: linear-gradient(135deg, #FF4E50 0%, #FF6E6D 40%, #FFD1D1 60%, #AA1E2F 100%);
  box-shadow: 0 6px 30px rgba(180,40,50,0.4), 0 2px 4px rgba(0,0,0,0.1);
  border: 2px solid #FF4E50;
}

.jackpot--rubi::before {
  background: linear-gradient(120deg, rgba(255,255,255,0) 60%, rgba(255,200,200,0.4) 80%, rgba(255,255,255,0) 100%);
  animation: jackpot-brillo 3s linear infinite;
}

/* -------------------------------
   ⚪ EFECTO PLATA
-------------------------------- */
.jackpot--plata {
  background: linear-gradient(135deg, #dcdcdc 0%, #f0f0f0 40%, #ffffff 60%, #b0b0b0 100%);
  box-shadow: 0 6px 30px rgba(150,150,150,0.4), 0 2px 4px rgba(0,0,0,0.08);
  border: 2px solid #c0c0c0;
}

.jackpot--plata::before {
  background: linear-gradient(120deg, rgba(255,255,255,0) 60%, rgba(220,220,220,0.4) 80%, rgba(255,255,255,0) 100%);
  animation: jackpot-brillo 3s linear infinite;
}

/* -------------------------------
   🟣 EFECTO MORADO / AMATISTA
-------------------------------- */
.jackpot--morado {
  background: linear-gradient(135deg, #A96EFF 0%, #B889FC 40%, #E6CCFF 60%, #6F42C1 100%);
  box-shadow: 0 6px 30px rgba(128,80,180,0.4), 0 2px 4px rgba(0,0,0,0.1);
  border: 2px solid #B889FC;
}

.jackpot--morado::before {
  background: linear-gradient(120deg, rgba(255,255,255,0) 60%, rgba(216,191,255,0.5) 80%, rgba(255,255,255,0) 100%);
  animation: jackpot-brillo 3s linear infinite;
}

/* -------------------------------
   🟢 EFECTO VERDE / ESMERALDA
-------------------------------- */
.jackpot--verde {
  background: linear-gradient(135deg, #7BE88D 0%, #51D07C 40%, #C2F6C9 60%, #229D53 100%);
  box-shadow: 0 6px 30px rgba(30,160,90,0.4), 0 2px 4px rgba(0,0,0,0.1);
  border: 2px solid #51D07C;
}

.jackpot--verde::before {
  background: linear-gradient(120deg, rgba(255,255,255,0) 60%, rgba(195,255,215,0.4) 80%, rgba(255,255,255,0) 100%);
  animation: jackpot-brillo 3s linear infinite;
}


.jackpot-item:hover {
  transform: translateY(-4px);
}

.jackpot-title {
  font-size: var(--fs-400);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.jackpot-amount {
  font-size: var(--fs-700);
  font-weight: var(--fw-extrabold);
  margin-bottom: var(--sp-2);
  color: #222222; /* var(--clr-white); */
}

.jackpot-sub {
  font-size: var(--fs-200);
  opacity: 0.9;
  font-weight: var(--fw-medium);
}

/* 4. FIN CLASES DEL COMPONENTE JACKPOTS */