/* ============================================================
   Conec.ve — estilos personalizados (complementan a Tailwind)
   ============================================================ */

:root {
  --neon: #39FF14;
  --neon-soft: #22DD66;
  --neon-glow: rgba(57, 255, 20, 0.5);
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

/* ───── Mobile UX helpers ───── */
@keyframes mobile-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (max-width: 768px) {
  /* Modal estilo bottom-sheet con animación slide-up */
  .modal-sheet { animation: mobile-sheet-up 0.28s cubic-bezier(0.32, 0.72, 0, 1); }

  /* Barra fija al fondo (botón "Agregar al carrito", "Continuar", etc.) — respeta safe-area iOS */
  .mobile-sticky-bar {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, #0a0a0a 80%, transparent);
    padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom)) 1rem;
    margin: 0 -1rem -1rem -1rem;
    border-top: 1px solid #262626;
    backdrop-filter: blur(8px);
    z-index: 5;
  }

  /* Chip de total flotante en tope (carrito mobile) */
  .mobile-total-chip {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(8px);
    padding: 0.625rem 1rem;
    border-bottom: 1px solid rgba(57, 255, 20, 0.2);
    margin: 0 -1rem 1rem -1rem;
  }

  /* Steps compactos: ocultar texto, dejar solo números/iconos en mobile */
  .step-pill .step-label { display: none; }
  .step-pill { padding: 0.5rem 0.625rem !important; }
  .step-pill.active .step-label { display: inline; }
}

/* Touch targets mínimos 44px en mobile (Apple HIG) */
@media (max-width: 768px) {
  .input { min-height: 44px; }
  .btn-primary, .btn-secondary { min-height: 48px; padding-top: 0.75rem; padding-bottom: 0.75rem; }
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #0a0a0a;
  color: #fff;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(57, 255, 20, 0.06), transparent 40%),
    radial-gradient(circle at 85% 50%, rgba(57, 255, 20, 0.04), transparent 40%);
  background-attachment: scroll; /* "fixed" rompe iOS Safari — usar scroll */
}

/* ───── Logo mark ───── */
.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--neon), var(--neon-soft));
  color: #0a0a0a;
  font-weight: 900;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px var(--neon-glow);
}

.glow-text {
  text-shadow: 0 0 8px var(--neon-glow), 0 0 18px rgba(57, 255, 20, 0.25);
}

.text-neon { color: var(--neon); }
.bg-neon { background-color: var(--neon); }
.border-neon { border-color: var(--neon); }
.shadow-neon { box-shadow: 0 0 20px var(--neon-glow); }

/* ───── Botones ───── */
.btn-primary {
  background: var(--neon);
  color: #0a0a0a;
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
  box-shadow: 0 0 0 var(--neon-glow);
}
.btn-primary:hover {
  box-shadow: 0 0 24px var(--neon-glow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 0.625rem;
  border: 1px solid #404040;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
}
.btn-secondary:hover {
  border-color: var(--neon);
  color: var(--neon);
}

/* ===== comprar.html — flujo de compra rápida en una sola vista ===== */

/* Tarjetas de variante — Gaming Pro */
.variante-card {
  background: linear-gradient(145deg, rgba(18,18,18,0.95), rgba(12,12,12,0.98));
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 1rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  overflow: hidden;
}
.variante-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 0%, rgba(56,189,248,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.variante-card:hover:not(.agotada) {
  border-color: rgba(57,255,20,0.35);
  background: linear-gradient(145deg, rgba(22,22,22,0.98), rgba(15,15,15,1));
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.variante-card.selected {
  border-color: var(--neon);
  background: linear-gradient(145deg, rgba(57,255,20,0.07), rgba(57,255,20,0.03));
  box-shadow: 0 0 0 1px rgba(57,255,20,0.3), 0 0 20px rgba(57,255,20,0.15), 0 4px 24px rgba(0,0,0,0.5);
}
.variante-card.selected::before {
  background: radial-gradient(ellipse at 80% 0%, rgba(57,255,20,0.08) 0%, transparent 60%);
}
.variante-card.agotada {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Gem icon en variante */
.gem-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(56,189,248,0.12);
  border: 1px solid rgba(56,189,248,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.375rem;
  flex-shrink: 0;
}
.variante-card.selected .gem-wrap {
  background: rgba(57,255,20,0.12);
  border-color: rgba(57,255,20,0.3);
}
.gem-wrap svg { color: #38bdf8; width: 16px; height: 16px; }
.variante-card.selected .gem-wrap svg { color: var(--neon); }

/* Badge "popular" */
.badge-popular {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  line-height: 1.4;
}

/* Sticky bottom bar — comprar.html
   position:sticky para que quede pegado al fondo del viewport mientras hay
   contenido debajo, pero se "estacione" arriba del footer al final del scroll
   (en lugar de tapar el footer como hace position:fixed). */
.sticky-buy-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin: 1.5rem -1rem 0 -1rem;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(57, 255, 20, 0.3);
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)) 1rem;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
}
.sticky-buy-inner {
  max-width: 42rem;
  margin: 0 auto;
}
.sticky-buy-bar #cp-btn-comprar {
  min-height: 52px;
}
@media (max-width: 480px) {
  .sticky-buy-bar { padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom)) 0.75rem; }
  .sticky-buy-bar #cp-btn-comprar { min-height: 48px; }
}

/* Lista de variantes con scroll cuando hay muchas opciones */
.variantes-scroll {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(57, 255, 20, 0.4) transparent;
  /* Indicador visual: gradient fade abajo para sugerir scroll */
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.variantes-scroll::-webkit-scrollbar { width: 6px; }
.variantes-scroll::-webkit-scrollbar-track { background: transparent; }
.variantes-scroll::-webkit-scrollbar-thumb {
  background: rgba(57, 255, 20, 0.3);
  border-radius: 3px;
}
@media (max-width: 640px) {
  .variantes-scroll { max-height: 240px; }
}

/* ===== Stepper visual de 3 pasos (confirmacion.html) ===== */
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
.step-circle {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #525252;
  font-weight: 900;
  font-size: 0.875rem;
  display: grid;
  place-items: center;
  border: 2px solid #262626;
  transition: all 0.25s;
}
.step-label {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #525252;
  transition: color 0.2s;
}
.step-bar {
  flex: 1;
  height: 2px;
  background: #262626;
  margin: 0 0.5rem;
  margin-bottom: 0.875rem;
  align-self: center;
  border-radius: 1px;
  transition: background 0.3s;
}

/* Estado: paso activo */
.step-item.step-active .step-circle {
  background: var(--neon);
  color: #0a0a0a;
  border-color: var(--neon);
  box-shadow: 0 0 16px var(--neon-glow);
}
.step-item.step-active .step-label {
  color: var(--neon);
}

/* Estado: paso completado */
.step-item.step-done .step-circle {
  background: rgba(57, 255, 20, 0.15);
  color: var(--neon);
  border-color: var(--neon);
}
.step-item.step-done .step-circle::before {
  content: '✓';
  position: absolute;
}
.step-item.step-done .step-circle { font-size: 0; position: relative; }
.step-item.step-done .step-circle::before { font-size: 1.125rem; }
.step-item.step-done .step-label {
  color: var(--neon);
  opacity: 0.7;
}

/* Header de cada sección de paso */
.step-section {
  animation: step-fade 0.3s ease-out;
}
@keyframes step-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step-header {
  margin-bottom: 1rem;
}
.step-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--neon);
  background: rgba(57, 255, 20, 0.1);
  border: 1px solid rgba(57, 255, 20, 0.4);
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.step-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

/* Visual feedback: pago-row marcado como copiado (check verde a la izquierda) */
[data-pago-row].pago-row-copied {
  background: rgba(57, 255, 20, 0.05);
  border-color: rgba(57, 255, 20, 0.3);
  position: relative;
}
[data-pago-row].pago-row-copied::before {
  content: '✓';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--neon);
  color: #0a0a0a;
  font-weight: 900;
  font-size: 0.625rem;
  display: grid;
  place-items: center;
  box-shadow: 0 0 8px var(--neon-glow);
}

@media (max-width: 640px) {
  .step-circle { width: 32px; height: 32px; font-size: 0.75rem; }
  .step-label  { font-size: 0.5625rem; }
  .step-title  { font-size: 1.0625rem; }
  .step-bar    { margin: 0 0.25rem; margin-bottom: 0.875rem; }
}

/* ===== Reviews cards (home) ===== */
.review-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: #0f0f0f;
  border: 1px solid #262626;
  border-radius: 1rem;
  padding: 1.25rem;
  position: relative;
  transition: all 0.2s;
}
.review-card:hover {
  border-color: rgba(57, 255, 20, 0.4);
  transform: translateY(-2px);
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #0a0a0a;
  font-weight: 900;
  font-size: 1rem;
  flex-shrink: 0;
}
.review-badge {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  background: rgba(234, 179, 8, 0.15);
  color: #FFD700;
  border: 1px solid rgba(234, 179, 8, 0.4);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

/* ===== Animaciones genéricas reutilizables ===== */
@keyframes venta-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes venta-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, -10px); }
}

/* ===== Páginas con sticky-buy-bar (comprar.html) =====
   Los botones flotantes deben quedar BIEN arriba del bar sticky.
   El bar tiene altura ~110px + safe-area iOS, así que damos margen generoso. */
body.has-buy-bar .floating-wa {
  bottom: 9rem !important;
  right: 1.25rem !important;
  z-index: 50 !important;     /* arriba del sticky-buy-bar (z:40) */
}
body.has-buy-bar #top-reopen {
  bottom: 13rem !important;
  right: 1.25rem !important;
  z-index: 50 !important;
}
body.has-buy-bar #ruleta-launcher {
  bottom: 16.5rem !important;
  right: 1.25rem !important;
}
@media (min-width: 768px) {
  /* En desktop hay espacio sobrado, vuelven a posición normal */
  body.has-buy-bar .floating-wa { bottom: 1.5rem !important; }
  body.has-buy-bar #top-reopen { bottom: 5.5rem !important; }
  body.has-buy-bar #ruleta-launcher { bottom: 7rem !important; }
}

/* ===== Top del mes (widget flotante en comprar.html) ===== */

/* Desktop: panel flotante chiquito en esquina inferior derecha */
#top-widget {
  position: fixed;
  z-index: 40;
  right: 1.5rem;
  bottom: 7rem;
  width: 280px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}

/* Móvil: bottom-sheet con backdrop full-screen */
@media (max-width: 767px) {
  #top-widget:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 100 !important;  /* arriba del sticky-buy-bar (z:40), botón WA (z:50) y todo lo demás */
    background: rgba(0, 0, 0, 0.78) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    padding: 0 !important;
    filter: none !important;
    animation: top-overlay-in 0.25s ease-out;
  }
  #top-widget #top-card {
    width: 100%;
    max-width: 480px;
    border-radius: 1.25rem 1.25rem 0 0;
    margin-bottom: 0;
    animation: top-sheet-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 80vh;
    overflow-y: auto;
  }
  /* Drag handle visible al tope del card en móvil */
  #top-widget #top-card::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.2);
    margin: 0.625rem auto 0.25rem;
  }
}
@keyframes top-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes top-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.top-tab {
  background: transparent;
  color: #737373;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.top-tab:hover { color: #d4d4d4; background: rgba(255,255,255,0.04); }
.top-tab-active {
  background: rgba(57, 255, 20, 0.12);
  color: var(--neon);
  border-color: rgba(57, 255, 20, 0.35);
}

.top-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  background: rgba(23, 23, 23, 0.55);
  border-radius: 0.625rem;
  border: 1px solid #262626;
}
.top-medal {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 0.75rem;
  color: #0a0a0a;
  flex-shrink: 0;
}
.top-medal-1 { background: linear-gradient(135deg, #FFD700, #FFB300); box-shadow: 0 0 10px rgba(255,193,7,0.5); }
.top-medal-2 { background: linear-gradient(135deg, #E5E5E5, #9E9E9E); }
.top-medal-3 { background: linear-gradient(135deg, #CD7F32, #8B5A2B); }

.top-name {
  font-family: 'Inter', monospace;
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
  letter-spacing: 0.04em;
}
.top-cedula {
  font-size: 0.65rem;
  color: #737373;
  font-family: monospace;
}
.top-value {
  margin-left: auto;
  font-weight: 800;
  color: #FFB347;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Hace que el widget desaparezca cuando hay poco espacio (mobile pequeño en landscape) */
@media (max-height: 600px) {
  #top-widget { display: none !important; }
}

/* Botón secundario "agregar al carrito" del modal de productos */
.btn-add-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 48px;
  border-radius: 0.625rem;
  border: 1px solid rgba(57, 255, 20, 0.4);
  background: rgba(57, 255, 20, 0.08);
  color: var(--neon);
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-add-cart:hover {
  background: rgba(57, 255, 20, 0.16);
  border-color: var(--neon);
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.3);
}
.btn-add-cart:active { transform: scale(0.96); }

/* ───── Nav ───── */
.nav-link {
  color: #a3a3a3;
  position: relative;
  transition: color 0.2s;
}
.nav-link:hover { color: #fff; }
.nav-link.active { color: var(--neon); }
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon-glow);
}

/* ───── Tarjeta de producto ───── */
.product-card {
  background: #0f0f0f;
  border: 1px solid #262626;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  border-color: var(--neon);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(57, 255, 20, 0.12);
}

.product-cover {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.75rem;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.product-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 50%),
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

/* ───── Categoría chip ───── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(57, 255, 20, 0.12);
  color: var(--neon);
  border: 1px solid rgba(57, 255, 20, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chip-tipo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: #d4d4d4;
  border: 1px solid #262626;
}

/* ───── Animations ───── */
@keyframes slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-slide-in { animation: slide-in 0.25s ease-out; }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 12px var(--neon-glow); }
  50% { box-shadow: 0 0 28px var(--neon-glow); }
}
.pulse-glow { animation: pulse-glow 2.4s ease-in-out infinite; }

/* ───── Hero ───── */
.hero-bg {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(57, 255, 20, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(34, 221, 102, 0.10), transparent 70%);
}

.hero-grid {
  background-image:
    linear-gradient(rgba(57, 255, 20, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 255, 20, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, #000 30%, transparent 80%);
}

/* ───── Inputs ───── */
.input {
  width: 100%;
  background: #0f0f0f;
  border: 1px solid #262626;
  border-radius: 0.625rem;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.input:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.15);
}
.input::placeholder { color: #525252; }

label.field {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #d4d4d4;
  margin-bottom: 0.375rem;
}

/* ───── Selects ───── */
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

/* ───── Tarjeta método de pago — Pro ───── */
.pago-card {
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 0.875rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: all 0.18s;
  background: linear-gradient(135deg, rgba(16,16,16,0.95), rgba(11,11,11,0.98));
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.pago-card:hover:not([data-disabled]) {
  border-color: rgba(255,255,255,0.15);
  background: linear-gradient(135deg, rgba(20,20,20,0.98), rgba(14,14,14,1));
}
.pago-card.selected {
  border-color: var(--neon);
  background: linear-gradient(135deg, rgba(57,255,20,0.06), rgba(57,255,20,0.02));
  box-shadow: 0 0 0 1px rgba(57,255,20,0.25), 0 0 16px rgba(57,255,20,0.1);
}
.pago-card.selected .pago-radio { background: var(--neon); border-color: var(--neon); }

/* Icon circle en método de pago */
.pago-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Player card verificado */
.player-card-verified {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(57,255,20,0.06), rgba(57,255,20,0.02));
  border: 1.5px solid rgba(57,255,20,0.35);
  box-shadow: 0 0 16px rgba(57,255,20,0.08);
}
.pago-card.selected .pago-radio::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #0a0a0a;
}

.pago-radio {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #525252;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

/* ───── Scrollbar (ver bloque mejorado al final del archivo) ───── */

/* ───── Avatar usuario ───── */
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--neon), var(--neon-soft));
  color: #0a0a0a;
  font-weight: 800;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid #0a0a0a;
  box-shadow: 0 0 0 1px var(--neon);
}

/* ───── Cuenta layout (sidebar) ───── */
.cuenta-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (max-width: 768px) {
  .cuenta-layout { grid-template-columns: 1fr; }
}

.cuenta-sidebar {
  background: #0f0f0f;
  border: 1px solid #262626;
  border-radius: 1rem;
  padding: 0.5rem;
  height: fit-content;
}

.cuenta-side-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #d4d4d4;
  transition: all 0.15s;
  text-decoration: none;
}
.cuenta-side-link:hover { background: rgba(57, 255, 20, 0.06); color: var(--neon); }
.cuenta-side-link.active {
  background: rgba(57, 255, 20, 0.1);
  color: var(--neon);
  border-left: 3px solid var(--neon);
  padding-left: calc(0.875rem - 3px);
}

.cuenta-content {
  background: #0f0f0f;
  border: 1px solid #262626;
  border-radius: 1rem;
  padding: 2rem;
  min-height: 400px;
}

/* ───── Header: dropdowns y búsqueda ───── */
.dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #d4d4d4;
  transition: all 0.15s;
  cursor: pointer;
  background: transparent;
  border: none;
}
.dropdown-btn:hover { color: var(--neon); background: rgba(57, 255, 20, 0.06); }

.dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: #0f0f0f;
  border: 1px solid #262626;
  border-radius: 0.75rem;
  padding: 0.375rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(57, 255, 20, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 50;
}
.dropdown-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #e5e5e5;
  transition: all 0.1s;
  white-space: nowrap;
}
.dropdown-item:hover { background: rgba(57, 255, 20, 0.08); color: var(--neon); }

.dropdown-menu-2col {
  min-width: 380px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.125rem;
}
.dropdown-menu-3col {
  min-width: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.125rem;
}

.search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #262626;
  border-radius: 0.625rem;
  padding: 0.625rem 1rem 0.625rem 2.5rem;
  color: #fff;
  font-size: 0.875rem;
  transition: all 0.15s;
}
.search-input:focus {
  outline: none;
  border-color: var(--neon);
  background: rgba(57, 255, 20, 0.04);
  box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.1);
}
.search-input::placeholder { color: #737373; }

/* ───── Carrusel hero ───── */
.hero-carousel {
  position: relative;
  padding: 1.5rem 0 2rem;
  overflow: hidden;
}

.carousel-viewport {
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 var(--slide-w, 78%);
  padding: 0 0.5rem;
  transition: opacity 0.5s, transform 0.5s;
  opacity: 0.35;
  transform: scale(0.92);
}
.carousel-slide.active {
  opacity: 1;
  transform: scale(1);
}

.banner-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  cursor: pointer;
  transition: box-shadow 0.3s;
  display: block;
}
.carousel-slide.active .banner-card {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(57, 255, 20, 0.1);
}

.banner-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 50%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.45));
  z-index: 1;
}

.banner-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2.5rem;
  z-index: 2;
}

.banner-pre {
  font-size: clamp(1rem, 2.2vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--neon);
  text-shadow: 0 0 24px rgba(57, 255, 20, 0.6);
  margin-bottom: 0.25rem;
  line-height: 1;
}

.banner-title {
  font-size: clamp(2.25rem, 7vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.banner-subtitle {
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  margin-top: 0.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.banner-badge {
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  color: #0a0a0a;
  font-weight: 800;
  font-size: 0.7rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  letter-spacing: 0.05em;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
  font-size: 1.25rem;
}
.carousel-arrow:hover {
  background: var(--neon);
  color: #0a0a0a;
  border-color: var(--neon);
  box-shadow: 0 0 20px var(--neon-glow);
}
.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #404040;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  padding: 0;
}
.carousel-dot.active {
  width: 28px;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon-glow);
}

@media (max-width: 768px) {
  .carousel-slide { --slide-w: 90%; }
  .banner-content { padding: 1.5rem; }
  .banner-badge { bottom: 0.875rem; right: 1rem; padding: 0.375rem 0.625rem; font-size: 0.625rem; }
  .carousel-arrow { width: 36px; height: 36px; }
}

/* ───── Slider horizontal de productos (estilo vegastore) ───── */
.h-slider-section {
  margin: 2.5rem 0;
}

.h-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0 0.5rem;
}
.h-slider-header h2 {
  color: var(--neon);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(57, 255, 20, 0.4);
}
.h-slider-header a {
  color: #a3a3a3;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s;
}
.h-slider-header a:hover { color: var(--neon); }

.h-slider-wrapper {
  position: relative;
}

.h-slider {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0.5rem;
  padding: 0.25rem 0.5rem 1rem;
  scrollbar-width: none;
}
.h-slider::-webkit-scrollbar { display: none; }

.h-slider .game-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
}

.h-slider-arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s;
  font-size: 1.25rem;
  opacity: 0;
}
.h-slider-wrapper:hover .h-slider-arrow { opacity: 1; }
.h-slider-arrow:hover {
  background: var(--neon);
  color: #0a0a0a;
  border-color: var(--neon);
  box-shadow: 0 0 16px var(--neon-glow);
}
.h-slider-arrow.prev { left: -8px; }
.h-slider-arrow.next { right: -8px; }

/* ───── Game card (estilo vegastore con thumbnail grande) ───── */
.game-card {
  display: block;
  background: #0f0f0f;
  border: 1px solid #262626;
  border-radius: 0.875rem;
  overflow: hidden;
  transition: all 0.2s;
}
.game-card:hover {
  border-color: var(--neon);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(57, 255, 20, 0.12);
}

.game-card-cover {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  text-align: center;
  padding: 0.5rem;
}
.game-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.game-card-name {
  padding: 0.75rem 0.875rem 0.875rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  color: #fff;
  position: relative;
}
.game-card-name::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity: 0.6;
}

/* ───── Banner promocional grande (tipo "GIFT CARDS ROBLOX") ───── */
.promo-banner {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 16 / 4;
  display: block;
  margin: 2.5rem 0;
}
.promo-banner-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4rem;
  z-index: 2;
}
.promo-banner h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.promo-banner h2 .highlight {
  color: var(--neon);
  text-shadow: 0 0 24px rgba(57, 255, 20, 0.6);
}
.promo-banner .promo-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.95);
  color: #0a0a0a;
  font-weight: 800;
  font-size: 0.7rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.4rem;
  letter-spacing: 0.06em;
  margin-top: 0.75rem;
  align-self: flex-start;
}

/* ───── "Más vendidos" - 3 cards anchas ───── */
.bestseller-card {
  display: block;
  background: #0f0f0f;
  border: 1px solid #262626;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.2s;
}
.bestseller-card:hover {
  border-color: var(--neon);
  box-shadow: 0 8px 32px rgba(57, 255, 20, 0.1);
}
.bestseller-cover {
  aspect-ratio: 4 / 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  position: relative;
}
.bestseller-cover img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.bestseller-body {
  padding: 1rem;
}
.bestseller-tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
}
.bestseller-tags .ventas-badge {
  color: #a3a3a3;
}
.bestseller-tags .cat-badge {
  background: rgba(57, 255, 20, 0.15);
  color: var(--neon);
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 700;
}
.bestseller-body p {
  font-size: 0.8rem;
  color: #a3a3a3;
  line-height: 1.5;
  margin: 0.5rem 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bestseller-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid #262626;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--neon);
}

/* ───── Utility para copiar al portapapeles ───── */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.4rem 0.75rem;
  min-height: 32px;
  border-radius: 0.5rem;
  background: rgba(57, 255, 20, 0.12);
  color: var(--neon);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(57, 255, 20, 0.3);
  cursor: pointer;
  transition: all 0.15s;
}
.copy-btn:hover { background: rgba(57, 255, 20, 0.2); }
.copy-btn.copied { background: var(--neon); color: #0a0a0a; }
@media (max-width: 640px) {
  .copy-btn { min-height: 36px; padding: 0.5rem 0.75rem; }
}

/* ───── Chatwoot: ocultar el botón launcher por completo ───── */
/* Solo usamos WhatsApp como canal de contacto visible al cliente */
.woot-widget-bubble,
.woot--bubble-holder,
.woot-widget-bubble--hidden,
#cw-widget-trigger,
[class*="woot-widget-bubble"] { display: none !important; }

/* Botón flotante de chat en vivo */
/* Animación de pulso para el botón de WhatsApp */
@keyframes wa-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.7), 0 4px 20px rgba(0,0,0,.4); }
  60%  { box-shadow: 0 0 0 14px rgba(37,211,102,0), 0 4px 20px rgba(0,0,0,.4); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0), 0 4px 20px rgba(0,0,0,.4); }
}
.floating-wa { animation: wa-ring 2.2s ease-out infinite; }

/* floating-chat desactivado — se dejó la función vacía en JS */
.floating-chat { display: none !important; }

/* Placeholder para evitar errores si algo lo referencia */
@media (max-width: 640px) {
  .floating-chat { display: none !important; }
}

/* Ajuste cuando hay barra de compra sticky */
body.has-buy-bar .floating-chat { display: none !important; }
@media (max-width: 640px) {
  body.has-buy-bar .floating-chat { display: none !important; }
}
/* Desktop: placeholder */
@media (min-width: 768px) {
  body:has(#top-reopen) .floating-chat {
    display: none !important;
  }
}
/* TOP DEL MES abierto:
   - Móvil: el overlay tapa la pantalla completa → ocultar el botón de chat
   - Desktop con buy-bar: reposicionar entre la barra de compra y el panel */
@media (max-width: 767px) {
  body:has(#top-widget:not(.hidden)) .floating-chat {
    display: none !important;
  }
}
@media (min-width: 768px) {
  body.has-buy-bar:has(#top-widget:not(.hidden)) .floating-chat {
    bottom: 4.25rem; /* entre barra de compra (~4rem) y borde del panel (~7rem) */
  }
}

/* ===== Sorteo de Diamantes ===== */

.sorteo-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  background: linear-gradient(90deg, #0d1f0d 0%, #0f0f0f 100%);
  border-top: 1.5px solid rgba(57,255,20,0.35);
  font-size: 0.8rem;
  color: #d4d4d4;
  animation: sorteo-slide-up 0.4s ease-out;
}
.sorteo-banner-icon { font-size: 1rem; flex-shrink: 0; }
.sorteo-banner strong { color: var(--neon); font-weight: 800; }
.sorteo-banner-close {
  margin-left: auto;
  background: none;
  border: none;
  color: #737373;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.1rem 0.4rem;
  flex-shrink: 0;
}
.sorteo-banner-close:hover { color: #fff; }

@keyframes sorteo-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Toast de ganador */
.sorteo-toast {
  position: fixed;
  bottom: 4rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 60;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  pointer-events: none;
}
.sorteo-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.sorteo-toast-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #0f0f0f;
  border: 1.5px solid rgba(57,255,20,0.5);
  border-radius: 1rem;
  padding: 0.75rem 1.1rem;
  box-shadow: 0 4px 32px rgba(57,255,20,0.15);
  white-space: nowrap;
}
.sorteo-toast-icon { font-size: 1.4rem; }
.sorteo-toast-title { font-weight: 800; font-size: 0.85rem; color: var(--neon); }
.sorteo-toast-sub   { font-size: 0.75rem; color: #a3a3a3; }
.sorteo-toast-close {
  background: none; border: none; color: #525252;
  cursor: pointer; font-size: 0.8rem; padding: 0 0.2rem; margin-left: 0.5rem;
}
.sorteo-toast-close:hover { color: #fff; }

/* Si hay sorteo-banner, subir todos los flotantes un poco */
body:has(.sorteo-banner) .floating-wa   { bottom: 3.5rem; }
body:has(.sorteo-banner) .floating-chat { bottom: 8.5rem; }
body:has(.sorteo-banner) #ruleta-launcher { bottom: 11.5rem; }
body:has(.sorteo-banner) .floating-whatsapp { bottom: 3.5rem; }
@media (max-width: 640px) {
  .sorteo-banner { font-size: 0.72rem; padding: 0.5rem 0.75rem; }
}

/* ============================================================
   MEJORAS ESTÉTICAS v2
   ============================================================ */

/* ── 8. Scrollbar personalizado (neón delgado) ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(57,255,20,.3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon); }
* { scrollbar-width: thin; scrollbar-color: rgba(57,255,20,.3) transparent; }

/* ── 2. Skeleton loading ── */
@keyframes skeleton-wave {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton-card {
  background: linear-gradient(90deg, #111 25%, #1c1c1c 50%, #111 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.6s ease-in-out infinite;
  border-radius: 0.875rem;
  border: 1px solid #1a1a1a;
  flex-shrink: 0;
}

/* ── 3. Glow mejorado en game-card al hover ── */
.game-card {
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.game-card:hover {
  border-color: var(--neon) !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 0 0 1px var(--neon),
              0 10px 30px rgba(57,255,20,.22),
              0 0 60px rgba(57,255,20,.07);
}
.game-card-cover {
  transition: transform 0.3s;
}
.game-card:hover .game-card-cover {
  transform: scale(1.04);
}

.bestseller-card {
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.bestseller-card:hover {
  border-color: var(--neon) !important;
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--neon),
              0 12px 35px rgba(57,255,20,.18);
}

/* ── 6. Badge "🔥 MÁS VENDIDO" con shimmer animado ── */
@keyframes badge-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes badge-pulse-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,120,0,.5); }
  50%       { box-shadow: 0 0 14px rgba(255,120,0,.9), 0 0 28px rgba(255,120,0,.3); }
}
.badge-mas-vendido {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #ff6b00 0%, #ffb700 40%, #ff6b00 100%);
  background-size: 200% 100%;
  animation: badge-shimmer 2.2s linear infinite,
             badge-pulse-glow 2s ease-in-out infinite;
}

/* ── 9. Partículas: canvas detrás de todo (solo desktop) ── */
#particles-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 767px) {
  #particles-canvas { display: none; } /* off en mobile: performance + iOS Safari z-index bug */
}

/* ══════════════════════════════════════════════════════════════
   MOBILE POLISH — mejoras responsive para móvil/tablet/iPhone
   ══════════════════════════════════════════════════════════════ */

/* ── iOS Safe-Area: botones flotantes y banners fijos no quedan
      debajo de la home bar (iPhone X, 11, 12, 13, 14, 15...) ── */
.floating-wa {
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
body:has(.sorteo-banner) .floating-wa {
  bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
}
/* En móvil: sube el WA por encima del buy-bar; en desktop queda en 1.5rem (regla de arriba gana) */
@media (max-width: 767px) {
  body.has-buy-bar .floating-wa {
    bottom: calc(9rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  #ruleta-launcher {
    bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }
  body:has(.sorteo-banner) #ruleta-launcher {
    bottom: calc(11.5rem + env(safe-area-inset-bottom, 0px));
  }
}
.sorteo-banner {
  padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
}

/* ── Flechas del slider: visibles en touch (no existe hover en mobile) ── */
@media (max-width: 767px) {
  .h-slider-arrow       { opacity: 0.6 !important; }
  .h-slider-arrow.prev  { left: 2px; }
  .h-slider-arrow.next  { right: 2px; }
}

/* ── Skeleton cards: tamaño correcto (igual que las game-cards reales) ── */
.h-slider .skeleton-card {
  flex: 0 0 200px;
  height: 242px;
}

/* ── Trust badges: gap reducido en pantallas pequeñas ── */
@media (max-width: 480px) {
  .trust-badges-row { column-gap: 1rem !important; }
}

/* ── Banner hero: aspect-ratio más alto en móvil muy pequeño ── */
@media (max-width: 380px) {
  .banner-card    { aspect-ratio: 16 / 9; }
  .banner-content { padding: 1rem 1.25rem; }
}

/* ── Cuenta: padding interno más compacto en mobile ── */
@media (max-width: 640px) {
  .cuenta-content { padding: 1.125rem; }
}

/* ── Cards de variante en comprar.html: 2 columnas en mobile pequeño ── */
@media (max-width: 380px) {
  .variante-card { padding: 0.625rem; min-height: 76px; }
}

/* ── Toast: ancho completo en mobile muy pequeño ── */
@media (max-width: 420px) {
  .sorteo-toast-inner { white-space: normal; max-width: calc(100vw - 2rem); }
}

/* ── Toast de venta-en-vivo: posición correcta en todos los escenarios ──
   El CSS con ID-selector (#venta-toast) sobreescribe las clases Tailwind.
   Mobile sin banner  → pegado abajo izq, respeta home-bar iPhone
   Mobile con banner  → sube por encima del sorteo-banner (~2.5rem)
   Desktop sin banner → 1.5rem (igual que antes)
   Desktop con banner → 3.5rem (sobre el banner) */
#venta-toast {
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
body:has(.sorteo-banner) #venta-toast {
  bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
  #venta-toast { bottom: 1.5rem; }
  body:has(.sorteo-banner) #venta-toast { bottom: 3.5rem; }
}