/* ============================================================
   EnRacha reskin — capa ADITIVA para las páginas autocontenidas
   del tema CasinoZeta (inicio, casino, livecasino, sports,
   games/new). Se enlaza DESPUÉS del <style> inline original,
   por lo que recolorea el tema dorado a la identidad de
   enracha.es: NARANJA (#f91047) sobre negro + Montserrat.
   No borra nada del original; solo sobreescribe (cascada + !important).
   ============================================================ */

:root {
  --en-orange:      #f91047;
  --en-orange-2:    #ff3362;
  --en-orange-dark: #c00c38;
  --en-bg:          #0b0b0c;
  --en-surface:     #1c1d1f;

  /* Reasigna las variables del tema dorado -> naranja (cascada
     automática a todo lo que use var(--gana-gold), etc.) */
  --gana-gold:       #f91047;
  --gana-gold-dark:  #c00c38;
  --gana-gold-hover: #ff3362;
  --gana-bg:         #0b0b0c;
  --gana-bg-card:    #141416;
  --gana-bg-header:  #0c0c0d;
}

/* ===== TIPOGRAFÍA + FONDO GLOBAL ===== */
body {
  background-color: #0b0b0c !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ===== NAVBAR ===== */
.gana-navbar {
  background: linear-gradient(92deg, #161617, #0c0c0d) !important;
  border-bottom: 1px solid rgba(249, 16, 71, 0.35) !important;
}
.gana-login-btn { box-shadow: 0 2px 14px rgba(249, 16, 71, 0.4) !important; }
.gana-balance {
  background: rgba(249, 16, 71, 0.1) !important;
  border-color: rgba(249, 16, 71, 0.35) !important;
  color: var(--en-orange) !important;
}
.gana-mobile-menu { background: #141416 !important; }

/* ===== STRIP DE CATEGORÍAS / CARRUSEL DE PROVEEDORES ===== */
.cat-strip { background: #060607 !important; }
.prov-carousel-wrap { background: #0e0e0f !important; }
.prov-arrow { background: rgba(10, 10, 11, 0.9) !important; }
.prov-arrow:hover { background: #1c1c1e !important; color: var(--en-orange) !important; }
.brand-img-wrap { background: #1c1d1f !important; }
.brand-item:hover .brand-img-wrap {
  background: #2a1a12 !important;
  border-color: rgba(249, 16, 71, 0.45) !important;
}

/* ===== SECCIONES DE TÍTULO ===== */
.title-line {
  background: linear-gradient(90deg, transparent, rgba(249, 16, 71, 0.4), transparent) !important;
}

/* ===== JUEGOS (grid + top games) ===== */
.top-game-item { background: #141416 !important; }
.game-card { background: #141416 !important; }
.game-card-overlay { background-color: transparent !important; }
.game-card:hover .game-card-overlay { background: rgba(0, 0, 0, 0.5) !important; }
.skeleton-item, .skeleton-card {
  background: linear-gradient(90deg, #141416 25%, #242528 50%, #141416 75%) !important;
  background-size: 200% 100% !important;
}

/* ===== SLIDER + SCROLLBAR (dots dorados -> naranja) ===== */
.slider-dot { background: rgba(249, 16, 71, 0.35) !important; }
.slider-dot.active { background: var(--en-orange) !important; }
::-webkit-scrollbar-thumb { background: rgba(249, 16, 71, 0.45) !important; }
::-webkit-scrollbar-track { background: #0b0b0c !important; }

/* ===== INLINE STYLES (atributos style="...") =====
   Recolorea los valores dorados/azul-noche embebidos en el HTML
   sin tener que tocar el markup original. */

/* Texto dorado inline -> naranja (encabezados de footer, links,
   "Inicio", "Iniciar sesión/Registrarse", GamblingTherapy, nav activo) */
[style*="color:#f5c518"],
[style*="color: #f5c518"] { color: var(--en-orange) !important; }

/* Botones con gradiente dorado inline -> gradiente naranja */
[style*="#f5c518,#d4a017"],
[style*="#f5c518, #d4a017"] {
  background-image: linear-gradient(135deg, var(--en-orange), var(--en-orange-dark)) !important;
}

/* Fondos azul-noche inline -> negro/gris EnRacha */
[style*="background:#070c19"],
[style*="background: #070c19"] { background: #0a0a0b !important; }
[style*="#04060f"] { background: #050505 !important; }
[style*="background:#0c1320"],
[style*="background: #0c1320"] {
  background: #141416 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[style*="background:#111827"],
[style*="background: #111827"] { background: #0e0e0f !important; }

/* Border de foco (lo setea el JS a dorado) -> naranja */
.modal input:focus,
input:focus { border-color: rgba(249, 16, 71, 0.6) !important; }

/* ===== UTILIDADES TAILWIND (sports / games/new) yellow|amber -> naranja ===== */
.bg-yellow-300, .bg-yellow-400, .bg-yellow-500, .bg-yellow-600,
.bg-amber-400, .bg-amber-500 { background-color: var(--en-orange) !important; }
.hover\:bg-yellow-400:hover, .hover\:bg-yellow-500:hover,
.hover\:bg-amber-500:hover { background-color: var(--en-orange-dark) !important; }
.text-yellow-300, .text-yellow-400, .text-yellow-500, .text-yellow-600,
.text-amber-400, .text-amber-500 { color: var(--en-orange) !important; }
.border-yellow-400, .border-yellow-500, .border-amber-400, .border-amber-500 {
  border-color: var(--en-orange) !important;
}
.from-yellow-300, .from-yellow-400, .from-yellow-500, .from-amber-400 {
  --tw-gradient-from: #f91047 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 16, 71, 0)) !important;
}
.to-yellow-400, .to-yellow-500, .to-yellow-600, .to-amber-500 {
  --tw-gradient-to: #c00c38 !important;
}
.via-yellow-400, .via-yellow-500 {
  --tw-gradient-stops: var(--tw-gradient-from), #f91047, var(--tw-gradient-to, rgba(249, 16, 71, 0)) !important;
}
.ring-yellow-400, .ring-yellow-500 { --tw-ring-color: var(--en-orange) !important; }

/* Colores custom de la config Tailwind (cb-gold) -> naranja */
.text-cb-gold, .text-cb-gold2 { color: var(--en-orange) !important; }
.bg-cb-gold, .bg-cb-gold2 { background-color: var(--en-orange) !important; }
.border-cb-gold, .border-cb-gold2 { border-color: var(--en-orange) !important; }
.from-cb-gold, .from-cb-gold2 { --tw-gradient-from: #f91047 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 16, 71, 0)) !important; }
.to-cb-gold, .to-cb-gold2 { --tw-gradient-to: #c00c38 !important; }
.ring-cb-gold { --tw-ring-color: var(--en-orange) !important; }

/* Clases Tailwind con valor arbitrario (dorado + azul-noche) -> EnRacha */
.text-\[\#f5c518\] { color: var(--en-orange) !important; }
.bg-\[\#111827\] { background-color: #0e0e0f !important; }
.bg-\[\#0c1320\] { background-color: #141416 !important; }
.bg-\[\#070c18\], .bg-\[\#070c19\] { background-color: #0a0a0b !important; }
.bg-\[\#0a0b1d\] { background-color: #0b0b0c !important; }
.border-\[\#f5c518\] { border-color: var(--en-orange) !important; }

/* ===== SECCIÓN PROMO DESTACADA (banner tipo "Cluck It") =====
   Componente nuevo del rediseño. Banner a ancho completo con
   título en mayúsculas y cinta diagonal "NUEVO" en la esquina. */
.promo-feature-wrap {
  padding: 0.5rem 10px 1.5rem !important;
}
.promo-feature__title {
  margin: 0 0 0.85rem !important;
  font-size: clamp(1.05rem, 3.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.promo-feature {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(249, 16, 71, 0.35);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.promo-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(249, 16, 71, 0.35);
}
.promo-feature__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.promo-feature__badge {
  position: absolute;
  top: 16px;
  right: -36px;
  width: 140px;
  text-align: center;
  background: linear-gradient(135deg, #f91047, #c00c38);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

/* ===== SECCIÓN TORNEO / PROMO 2 (banner + fila de juegos nuevos) =====
   Banner a ancho completo con cinta "NUEVO" y, debajo, una fila
   horizontal de juegos nuevos que termina en el botón "VER MÁS JUEGOS". */
.promo2-wrap {
  padding: 0.5rem 10px 1.5rem !important;
}
.promo2__title {
  margin: 0 0 0.85rem !important;
  font-size: clamp(1.05rem, 3.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.promo2__banner {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(249, 16, 71, 0.35);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.promo2__banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(249, 16, 71, 0.35);
}
.promo2__banner-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.promo2__badge {
  position: absolute;
  top: 16px;
  right: -36px;
  width: 140px;
  text-align: center;
  background: linear-gradient(135deg, #f91047, #c00c38);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.promo2__row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding-bottom: 4px;
}
.promo2__row::-webkit-scrollbar { display: none; }
.promo2__game {
  flex: 0 0 auto;
  width: 110px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.promo2__game:hover {
  transform: translateY(-3px);
  border-color: rgba(249, 16, 71, 0.55);
}
.promo2__game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.promo2__more {
  flex: 0 0 auto;
  width: 110px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #141416;
  border: 1px solid rgba(249, 16, 71, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.promo2__more:hover {
  transform: translateY(-3px);
  background: rgba(249, 16, 71, 0.12);
}
.promo2__more-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #f91047;
  color: #f91047;
  font-size: 1rem;
  font-weight: 700;
}
@media (min-width: 640px) {
  .promo2__game, .promo2__more { width: 130px; }
}

/* ===== SECCIÓN OASIS DE VERANO (banner + 3 juegos temáticos) =====
   Banner a ancho completo y, debajo, una fila de 3 tarjetas landscape
   (1ª con cinta "NUEVO") + bloque botón "VER MÁS JUEGOS". */
.oasis-wrap {
  padding: 0.5rem 10px 1.5rem !important;
}
.oasis__title {
  margin: 0 0 0.85rem !important;
  font-size: clamp(1.05rem, 3.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.oasis__banner {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(249, 16, 71, 0.35);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.oasis__banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(249, 16, 71, 0.35);
}
.oasis__banner-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.oasis__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 560px) {
  .oasis__row { grid-template-columns: repeat(2, 1fr); }
}
.oasis__game {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.oasis__game:hover {
  transform: translateY(-3px);
  border-color: rgba(249, 16, 71, 0.55);
}
.oasis__game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.oasis__game-badge {
  position: absolute;
  top: 10px;
  right: -30px;
  width: 120px;
  text-align: center;
  background: linear-gradient(135deg, #f91047, #c00c38);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.oasis__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #141416;
  border: 1px solid rgba(249, 16, 71, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.oasis__more:hover {
  transform: translateY(-3px);
  background: rgba(249, 16, 71, 0.12);
}
.oasis__more-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #f91047;
  color: #f91047;
  font-size: 1rem;
  font-weight: 700;
}

/* ===== SECCIÓN SLOT DE LA SEMANA (banner simple) =====
   Solo título + banner a ancho completo (sin fila de juegos). */
.slotweek-wrap {
  padding: 0.5rem 10px 1.5rem !important;
}
.slotweek__title {
  margin: 0 0 0.85rem !important;
  font-size: clamp(1.05rem, 3.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.slotweek__banner {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(249, 16, 71, 0.35);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.slotweek__banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(249, 16, 71, 0.35);
}
.slotweek__banner-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ===== SECCIÓN RULETA EN VIVO (banner + 3 imágenes estáticas) =====
   Banner a ancho completo y, debajo, fila de 3 tarjetas (imágenes
   estáticas vivo2/3/4, sin overlays ni números) + botón "VER MÁS JUEGOS". */
.vlive-wrap {
  padding: 0.5rem 10px 1.5rem !important;
}
.vlive__banner {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(249, 16, 71, 0.35);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vlive__banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(249, 16, 71, 0.35);
}
.vlive__banner-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.vlive__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 560px) {
  .vlive__row { grid-template-columns: repeat(2, 1fr); }
}
.vlive__game {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 306 / 325;
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.vlive__game:hover {
  transform: translateY(-3px);
  border-color: rgba(249, 16, 71, 0.55);
}
.vlive__game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.vlive__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 306 / 325;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #141416;
  border: 1px solid rgba(249, 16, 71, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.vlive__more:hover {
  transform: translateY(-3px);
  background: rgba(249, 16, 71, 0.12);
}
.vlive__more-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #f91047;
  color: #f91047;
  font-size: 1rem;
  font-weight: 700;
}