/* =====================================================================
   VentasFF SaaS - Tema base (defaults = paleta dorada)
   Las variables de marca (--accent*, --font-*) se sobreescriben por tienda
   con un <style> inline generado por Branding::cssVars() en partials/head.php.
   ===================================================================== */

:root {
  /* Marca (sobreescribible por tenant) */
  --accent: #d4af37;
  --accent-dark: #b8860b;
  --accent-light: #f1c40f;
  --accent-rgb: 212, 175, 55;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Orbitron', sans-serif;
  --font-accent: 'Rajdhani', sans-serif;

  /* Tema */
  --bg-black: #000000;
  --bg-deep: #0a0a0a;
  --bg-card: #0c0c0e;
  --bg-card-2: #18181b;
  --border-red: rgba(var(--accent-rgb), 0.3);
  --border-red-strong: rgba(var(--accent-rgb), 0.55);
  /* Alias históricos (los nombres "red" vienen del primer clon) */
  --red-600: var(--accent-dark);
  --red-500: var(--accent);
  --red-400: var(--accent-light);
  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --text-faded: #71717a;
  --ok: #22c55e;
  --bad: #ef4444;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-black);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* === Fondo: radial rojo + grid lines === */
.bg-fx {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bg-fx .radial {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb),0.25) 0%, rgba(0,0,0,0) 60%);
}
.bg-fx .grid {
  position: absolute; inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(var(--accent-rgb),0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),0.45) 1px, transparent 1px);
  background-size: 42px 42px;
}
.bg-fx .vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.8) 100%);
}

.layout { position: relative; z-index: 1; }

/* === Header === */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border-red);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header .container {
  max-width: 1180px; margin: 0 auto;
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.brand-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--red-600), var(--red-500));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}
.brand-icon svg { width: 22px; height: 22px; color: #fff; }
.brand-logo {
  height: 50px; width: auto; max-width: 180px;
  border-radius: 10px; object-fit: contain; display: block;
}
/* Solo logo (sin nombre): un poco más grande para que respire. */
.brand.logo-only .brand-logo { height: 60px; max-width: 240px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  color: var(--red-500);
  letter-spacing: 0.5px;
}
.brand-sub {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: 3px;
}

.region-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid var(--border-red-strong);
  color: var(--red-500);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.region-badge svg { color: var(--red-500); }

/* === Hero === */
.hero {
  padding: 60px 18px 30px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.hero .eyebrow {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 6px;
  color: var(--red-500);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 48px);
  margin: 0 0 14px;
  background: linear-gradient(180deg, #fff 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 1px;
}
.hero p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 620px;
  margin: 0 auto;
}

/* === Trust bar === */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 20px 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.trust-item {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid var(--border-red);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}
.trust-item svg { width: 16px; height: 16px; flex: none; color: var(--red-500); }

/* === Section títulos === */
.section {
  max-width: 1180px;
  margin: 30px auto;
  padding: 0 18px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  text-align: center;
  margin: 30px 0 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.section-title .accent { color: var(--red-500); }

/* === Carrusel banners === */
.banners-section { padding: 0; max-width: none; margin: 18px 0 0; }
.banners-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 22vw;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.banners-carousel::-webkit-scrollbar { display: none; }
.banner-slide {
  flex: 0 0 56vw;
  max-width: 680px;
  scroll-snap-align: center;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: transform .35s ease, opacity .35s ease;
  transform: scale(0.9);
  opacity: 0.5;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
  border: 1px solid var(--border-red);
}
.banner-slide a, .banner-slide img {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.banner-slide img {
  object-fit: cover;
  aspect-ratio: 3.4 / 1;
}
/* Slide enfocado: detección por proximidad al centro vía scroll-snap-align + JS mismo */
.banner-slide:hover { transform: scale(0.96); opacity: 0.85; }
/* Truco: el snap-align center hace que el slide enfocado ocupe centro; aplicamos focus via :focus-within o JS */
.banners-carousel .banner-slide.is-active,
.banner-slide:focus-within {
  transform: scale(1);
  opacity: 1;
}

.banners-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 6px;
}
.banner-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(var(--accent-rgb),0.3);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, width .2s ease;
}
.banner-dot.active {
  background: var(--red-500);
  width: 22px;
}

@media (max-width: 1100px) {
  .banners-carousel { padding: 8px 14vw; }
  .banner-slide { flex-basis: 68vw; }
}
@media (max-width: 700px) {
  .banners-carousel { padding: 6px 6vw; gap: 8px; }
  .banner-slide { flex-basis: 86vw; border-radius: 12px; }
  .banner-slide img { aspect-ratio: 3 / 1; }
}

/* === Grid paquetes === */
/* Pestañas de juego (solo con más de un juego). Free Fire activa al entrar. */
.juego-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 16px; }
.juego-tab { border: 1px solid var(--border-red); background: transparent; color: var(--text-muted); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.juego-tab.is-active { color: var(--accent); border-color: var(--accent); }

.paquetes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.paquete-card {
  position: relative;
  background: linear-gradient(180deg, rgba(12,12,14,.62), rgba(24,24,27,.5));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-red);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.paquete-card:hover {
  transform: translateY(-4px);
  border-color: var(--red-500);
  box-shadow: 0 14px 36px rgba(var(--accent-rgb), 0.35);
}
.paquete-card::before {
  content: '';
  position: absolute;
  top: -40%; left: -40%;
  width: 180%; height: 60%;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb),0.18), transparent 70%);
  pointer-events: none;
}
/* Cinta diagonal en la esquina: la tarjeta ya recorta lo que sobresale
   (overflow:hidden), así que basta con sacarla por los lados y girarla. */
.paquete-badge {
  position: absolute;
  top: 16px; right: -38px;
  width: 140px;
  padding: 4px 0;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--red-600), var(--red-500));
  color: #fff;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.paquete-card .diamantes-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  color: var(--red-500);
  filter: drop-shadow(0 2px 10px rgba(245,197,24,0.55));
}
.paquete-card .diamantes-icon svg { width: 100%; height: 100%; }

.icon-inline { display: inline-block; vertical-align: -3px; }
/* Iconos de icono(): asientan con la línea base del texto que acompañan. */
svg.ico { vertical-align: -.14em; }
.eyebrow svg { vertical-align: -2px; margin: 0 4px; }
.paquete-badge svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 4px; }
.btn svg { width: 16px; height: 16px; }
/* Los botones de navegación del encabezado llevan el icono más grande: es lo
   primero que se mira y a 14px se perdía junto al texto en mayúsculas. */
.btn svg.ico-nav { width: 19px; height: 19px; }
.paquete-card .diamantes-cant {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  color: #fff;
  margin-bottom: 2px;
}
.paquete-card .diamantes-label {
  font-family: var(--font-accent);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.paquete-card .precio {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--red-500);
  margin: 6px 0 14px;
}

/* === Botones === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--red-600), var(--red-500));
  color: #fff;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 11px 22px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.35);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.5); }
.btn:active { transform: translateY(0); }
.btn.btn-outline {
  background: transparent;
  border: 1px solid var(--border-red-strong);
  color: var(--text);
  box-shadow: none;
}
.btn.btn-outline:hover { background: rgba(var(--accent-rgb), 0.1); border-color: var(--red-500); }
.btn.btn-block { width: 100%; }
.btn.btn-lg { padding: 14px 28px; font-size: 15px; }

/* === Steps === */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 20px 0;
}
.step {
  /* Traslúcida: deja ver el fondo de la tienda en vez de taparlo con una
     caja opaca. Solo aquí y en los paquetes; el checkout y las cuentas
     siguen con fondo sólido, que ahí manda la legibilidad. */
  background: rgba(12, 12, 14, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-red);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
}
.step-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  color: transparent;
  -webkit-text-stroke: 2px var(--red-500);
  line-height: 1;
  margin-bottom: 10px;
}
.step h3 {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8px;
}
.step p { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 0; }

/* === Checkout form === */
.checkout-wrap {
  max-width: 760px;
  margin: 30px auto;
  padding: 0 18px;
}
.checkout-card {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-card-2));
  border: 1px solid var(--border-red);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
.checkout-card h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 0;
  color: #fff;
  font-size: 17px;
}
.checkout-card .precio-tag {
  display: inline-block;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid var(--border-red-strong);
  color: var(--red-500);
  font-family: var(--font-display);
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 18px;
  margin: 8px 0 22px;
}

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.form-control {
  width: 100%;
  background: #07070a;
  border: 1px solid #27272a;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}
textarea.form-control { min-height: 110px; resize: vertical; }
small.hint { color: var(--text-faded); font-size: 12px; display: block; margin-top: 6px; }

/* Selector de idioma del pie: enlaces planos */
.idioma-menu { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.idioma-menu a { font-size: 12px; color: var(--text-faded); text-decoration: none; padding: 4px 10px; border: 1px solid transparent; border-radius: 999px; }
.idioma-menu a:hover { color: var(--text); }
.idioma-menu a.is-active { color: var(--text); border-color: var(--border-red); background: rgba(var(--accent-rgb), .08); }

/* === Checkout por pasos === */
/* En pantallas estrechas nada fuerza el ancho: un ítem de rejilla o flex nace
   con min-width:auto (el ancho intrínseco del input) y se sale de la tarjeta. */
.checkout-card > form, .ck-paso, .ck-paso .form-group, .input-with-action, .promo-ticket, #nickname-zone, #saldo-zone, .codigo-estado { min-width: 0; max-width: 100%; }
.input-with-action .form-control, .promo-input { min-width: 0; width: 100%; }
.btn-verify { flex: 0 0 auto; }
.ck-paso { padding: 22px 0 6px; border-top: 1px solid var(--border-red); }
.ck-paso:first-of-type { border-top: 0; padding-top: 6px; }
.ck-paso-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ck-paso-cab .ck-paso-n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 14px;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18);
}
.ck-paso-cab h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); }
.ck-paso-cab > div > span { display: block; font-size: 12px; color: var(--text-faded); margin-top: 2px; }
.ck-paso .form-group:last-child { margin-bottom: 0; }
.ck-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .ck-2col { grid-template-columns: 1fr; gap: 0; } }

/* === Input con botón verificar === */
.input-with-action {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.input-with-action .form-control { flex: 1; }
.btn-verify {
  background: linear-gradient(135deg, var(--red-600), var(--red-500));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 18px;
  cursor: pointer;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
  transition: filter .15s ease, transform .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  white-space: nowrap;
}
.btn-verify:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.btn-verify:disabled { opacity: 0.7; cursor: not-allowed; }
.btn-verify .verify-spinner { width: 18px; height: 18px; }
.spin { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .input-with-action { flex-direction: column; }
  .btn-verify { padding: 11px 18px; min-width: 0; }
}

/* === Métodos pago grid ===
   La tarjeta es la imagen. Cada método se reconoce por su logotipo (o el
   QR de la tienda), así que la imagen llena la tarjeta entera y el nombre
   va encima, en una franja al pie, sin robarle sitio. Proporción fija para
   que logos de anchos dispares (1:1, 2:1) formen una rejilla pareja; la
   imagen se ve completa (contain), nunca recortada. */
.metodos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.metodo-card {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #07070a;
  border: 2px solid #27272a;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
  user-select: none;
}
.metodo-card:hover { border-color: var(--border-red-strong); transform: translateY(-2px); }
.metodo-card.active {
  border-color: var(--red-500);
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.25);
}
/* Marca de elegido: un punto en la esquina, que el borde solo no siempre se nota. */
.metodo-card.active::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--red-500);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3);
}
.metodo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Aire arriba y a los lados; abajo más, que ahí va el nombre. */
  padding: 10px 10px 30px;
  display: block;
}
/* Sin logotipo: icono grande y centrado, que la tarjeta no quede vacía. */
.metodo-card .icon {
  position: absolute;
  inset: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.metodo-card .icon svg { width: 40px; height: 40px; color: var(--red-500); }
.metodo-card .nombre {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 8px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 100%);
  color: #fff;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .metodos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* === Ficha del método elegido ===
   Cabecera, imagen e instrucciones, cada cosa en su franja. Antes iba todo
   suelto dentro de un .alert y la imagen quedaba flotando entre el nombre y
   el texto, sin sitio propio. */
.metodo-ficha {
  margin-top: 16px;
  border: 1px solid var(--border-red);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}
.metodo-ficha-cab {
  padding: 12px 16px;
  background: rgba(var(--accent-rgb), .10);
  border-bottom: 1px solid var(--border-red);
  font-family: var(--font-accent);
  font-weight: 700; font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent);
}
.metodo-ficha-texto {
  padding: 14px 16px;
  white-space: pre-wrap;
  font-size: 13.5px; line-height: 1.65;
  color: var(--text-muted);
}

/* Panel de la imagen: franja propia y centrada, separada del texto. */
.metodo-media {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--border-red);
  background: rgba(0, 0, 0, .28);
}
.metodo-media img {
  display: block;
  max-width: 100%; max-height: 230px;
  object-fit: contain;
  border-radius: 10px;
  cursor: zoom-in;
}
/* Un QR va sobre blanco o la cámara no lo lee, pero ese fondo se lo tragaría
   un logotipo que ya es blanco. Lo pone el JS solo cuando la imagen es
   cuadrada y de buena resolución, que es la forma de un QR. */
.metodo-media img.es-qr {
  background: #fff;
  padding: 12px;
  max-height: 260px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.metodo-media-pista {
  font-size: 12px; font-weight: 600;
  color: var(--accent); cursor: zoom-in;
  letter-spacing: .3px;
}

/* Modo compacto: la imagen se pone en fila con su enlace, para que la ficha no
   crezca cuando la imagen es solo un logotipo. */
.metodo-media.es-compacta {
  flex-direction: row; justify-content: center; gap: 14px;
  padding: 14px 16px;
}
.metodo-media.es-compacta img { max-height: 64px; max-width: 120px; }
.metodo-media.es-compacta img.es-qr { padding: 5px; box-shadow: none; }

/* === Alerts === */
.alert {
  padding: 12px 16px;
  border-radius: 10px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.5;
}
.alert-ok { background: rgba(34,197,94,.12); color: #86efac; border: 1px solid #22c55e; }
.alert-bad { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid #ef4444; }
.alert-warn { background: rgba(245,158,11,.12); color: #fcd34d; border: 1px solid #f59e0b; }
.alert-info { background: rgba(var(--accent-rgb),.08); color: #fde68a; border: 1px solid var(--border-red-strong); }

/* === Reseñas === */
.resenas-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.stat-media { display: flex; align-items: center; gap: 10px; }
.stat-media .num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  color: var(--red-500);
  line-height: 1;
}
.stat-stars { color: #fbbf24; font-size: 20px; letter-spacing: 2px; }
.stat-total { color: var(--text-muted); font-size: 14px; }
.stat-total strong { color: #fff; }

.resenas-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 4px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--red-600) transparent;
}
.resenas-carousel::-webkit-scrollbar { height: 8px; }
.resenas-carousel::-webkit-scrollbar-thumb { background: var(--red-600); border-radius: 999px; }
.resenas-carousel::-webkit-scrollbar-track { background: transparent; }

.resena-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-red);
  border-left: 4px solid var(--red-500);
  border-radius: 10px;
  padding: 16px;
}
.resena-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.resena-card .estrellas { color: #fbbf24; font-size: 14px; }
.resena-fecha { color: var(--text-faded); font-size: 11px; white-space: nowrap; }
.resena-card .comentario {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  /* Tope de altura: clamp a 5 líneas con elipsis */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.resena-card .nombre {
  font-family: var(--font-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--red-500);
  margin-top: 12px;
  font-size: 13px;
}

/* === Footer === */
.site-footer {
  margin-top: 60px;
  border-top: 1px solid var(--border-red);
  padding: 30px 18px;
  text-align: center;
  color: var(--text-faded);
  font-size: 13px;
  font-family: var(--font-accent);
  letter-spacing: 1px;
}

/* === Confirmación === */
.confirm-card {
  max-width: 560px;
  margin: 60px auto;
  background: var(--bg-card);
  border: 1px solid var(--border-red);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 14px 38px rgba(0,0,0,0.6);
}
.confirm-card .icon {
  margin: 0 auto 14px;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 16px currentColor);
}
.confirm-card .icon svg { width: 56px; height: 56px; }
.confirm-card h2 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 6px 0 14px;
}
.pin-display {
  background: #000;
  border: 2px dashed var(--red-500);
  color: var(--red-500);
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  padding: 18px;
  border-radius: 10px;
  font-size: 22px;
  letter-spacing: 3px;
  margin: 18px 0;
  word-break: break-all;
}

/* === Selector de divisa (desplegable flotante) === */
/* Un carril con todas las monedas se hacía una tira interminable. El
   desplegable ocupa un botón y enseña la bandera de la moneda activa. Va a la
   derecha: la izquierda es del botón de WhatsApp. */
.divisa-menu {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
}
.divisa-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.9);
  border: 1px solid var(--border-red);
  border-radius: 999px;
  padding: 12px 16px 12px 18px;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-accent); font-weight: 700;
  font-size: 16px; letter-spacing: 1.2px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.55);
  transition: border-color .15s, background .15s;
}
.divisa-trigger:hover { border-color: var(--accent); }
.divisa-actual { display: inline-flex; align-items: center; gap: 9px; }
/* En el botón la bandera va más grande que en la lista: es lo que se ve desde
   lejos. */
.divisa-trigger .divisa-flag { width: 26px; height: 17px; }
.divisa-chevron { width: 17px; height: 17px; color: var(--accent); transition: transform .18s ease; }
.divisa-trigger[aria-expanded="true"] .divisa-chevron { transform: rotate(180deg); }

/* Se abre hacia arriba: anclado abajo a la derecha, hacia abajo no hay sitio. */
.divisa-panel {
  position: absolute; right: 0; bottom: calc(100% + 6px);
  min-width: 230px; max-height: min(56vh, 400px);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  background: rgba(0,0,0,0.96);
  border: 1px solid var(--border-red);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
}
/* Imprescindible: el display:flex de arriba le gana al display:none que el
   navegador aplica a [hidden], y el panel se quedaría abierto para siempre. */
.divisa-panel[hidden] { display: none; }
.divisa-panel::-webkit-scrollbar { width: 8px; }
.divisa-panel::-webkit-scrollbar-thumb { background: var(--border-red-strong); border-radius: 4px; }
.divisa-panel button {
  display: flex; align-items: center; gap: 11px;
  background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--text-muted); cursor: pointer; text-align: left;
  font-family: var(--font-accent); font-weight: 700;
  font-size: 15px; letter-spacing: 1px;
  padding: 12px 16px;
  transition: background .12s, color .12s;
}
.divisa-panel button:last-child { border-bottom: none; }
.divisa-panel button:hover { background: rgba(var(--accent-rgb), 0.12); color: #fff; }
.divisa-panel button.active { background: linear-gradient(135deg, var(--red-600), var(--red-500)); color: #000; }
/* El símbolo a la derecha: ayuda a reconocer la moneda sin leer el código. */
.divisa-simbolo { margin-left: auto; color: var(--text-faded); font-weight: 600; letter-spacing: 0; }
.divisa-panel button:hover .divisa-simbolo { color: rgba(255,255,255,0.75); }
.divisa-panel button.active .divisa-simbolo { color: rgba(0,0,0,0.6); }
.divisa-cod { line-height: 1; }

/* Bandera dibujada del país de la moneda, USD incluido: con todas iguales la
   lista se lee de un vistazo. */
.divisa-flag {
  display: inline-flex; width: 22px; height: 15px; flex-shrink: 0;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
.divisa-flag svg { width: 100%; height: 100%; display: block; }
.aviso-usd {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* === Marketplace de cuentas === */
.cuentas-filtros {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 22px; justify-content: center;
}
.cuentas-filtros .form-control { width: auto; min-width: 160px; }

.cuentas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.cuenta-card {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-card-2));
  border: 1px solid var(--border-red);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cuenta-card:hover { transform: translateY(-4px); border-color: var(--red-500); box-shadow: 0 14px 36px rgba(var(--accent-rgb),0.3); }
.cuenta-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: linear-gradient(135deg, var(--red-600), var(--red-500));
  color: #000; font-family: var(--font-accent); font-weight: 700;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.cuenta-img { aspect-ratio: 16/10; background: #07070a; overflow: hidden; }
.cuenta-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cuenta-noimg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: var(--text-faded);
  font-family: var(--font-accent); letter-spacing: 2px; text-transform: uppercase;
}
.cuenta-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cuenta-titulo { color: #fff; font-weight: 600; font-size: 15px; line-height: 1.3; }
.cuenta-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: var(--text-muted); font-size: 12px; }
.cuenta-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cuenta-precio {
  margin-top: auto; font-family: var(--font-display); font-weight: 800;
  font-size: 20px; color: var(--red-500);
}

/* Detalle de cuenta */
.cuenta-detalle {
  max-width: 1080px; margin: 24px auto; padding: 0 18px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px;
}
.cuenta-galeria img#img-principal {
  width: 100%; border-radius: var(--radius); border: 1px solid var(--border-red);
  aspect-ratio: 16/10; object-fit: contain; background: #000; cursor: zoom-in;
}
.cuenta-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cuenta-thumbs img {
  width: 70px; height: 50px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border-red); cursor: pointer; transition: border-color .15s;
}
.cuenta-thumbs img:hover { border-color: var(--red-500); }
.cuenta-thumbs img.active { border-color: var(--red-500); box-shadow: 0 0 0 2px var(--red-500); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.92); backdrop-filter: blur(4px);
  cursor: zoom-out; padding: 20px;
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; }
.lightbox .lb-close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none; color: #fff; font-size: 34px; line-height: 1;
  cursor: pointer; font-family: sans-serif;
}
.cuenta-info h1 { font-family: var(--font-display); font-size: 24px; margin: 0 0 8px; color: #fff; }
.cuenta-precio-lg { font-family: var(--font-display); font-weight: 900; font-size: 30px; color: var(--red-500); margin-bottom: 16px; }
.cuenta-specs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px;
}
.cuenta-specs > div {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.cuenta-specs span { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.cuenta-specs strong { color: #fff; font-size: 15px; }
.cuenta-desc { color: var(--text); line-height: 1.6; font-size: 14px; margin-bottom: 16px; white-space: pre-wrap; }
.cuenta-sub { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: 2px; color: var(--red-500); font-size: 14px; margin: 18px 0 8px; }
.cuenta-form { margin-top: 22px; background: var(--bg-card); border: 1px solid var(--border-red); border-radius: var(--radius); padding: 20px; }

/* === Responsive === */
@media (max-width: 760px) {
  .cuenta-detalle { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .site-header .container { padding: 10px 14px; }
  .brand-icon { width: 36px; height: 36px; }
  .brand-name { font-size: 15px; }
  .hero { padding: 40px 18px 20px; }
  .hero .eyebrow { font-size: 11px; letter-spacing: 4px; }
  /* Sellos de confianza: en fila libre, cada píldora se ajusta a su texto y
     "Entrega Instantánea" sale del doble de ancha que "Soporte 24/7". Con la
     rejilla, todas miden lo mismo caiga el texto en una línea o en dos. */
  .trust-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 14px;
  }
  .trust-bar.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .trust-item {
    flex-direction: column;
    gap: 5px;
    padding: 10px 6px;
    border-radius: 14px;
    font-size: 10.5px;
    letter-spacing: .5px;
    line-height: 1.25;
    min-height: 100%;
  }
  .trust-item svg { width: 18px; height: 18px; }

  .section-title { font-size: 18px; }

  /* Catálogo compacto en móvil: nueve tarjetas grandes son nueve pantallas
     de scroll, y quien busca un paquete concreto se cansa antes de llegar.
     Así entra entero de un vistazo. */
  .paquetes-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .paquete-card { padding: 13px 8px 11px; border-radius: 14px; }
  .paquete-card .diamantes-icon {
    width: 20px; height: 20px;
    margin: 0 auto 5px;
    filter: none;
  }
  .paquete-card .diamantes-cant { font-size: 17px; }
  .paquete-card .diamantes-label { font-size: 8.5px; letter-spacing: 1px; margin-bottom: 0; }
  .paquete-card .precio { font-size: 15px; margin: 6px 0 0; }

  /* El botón se retira y su enlace cubre la tarjeta: el área táctil crece. */
  .paquete-card .btn {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 0;
  }

  /* La cinta se encoge con la tarjeta: a tamaño de escritorio taparía media
     tarjeta en una rejilla de tres por fila. */
  .paquete-badge {
    top: 9px; right: -26px;
    width: 92px;
    padding: 2px 0;
    font-size: 7px;
    letter-spacing: .5px;
  }
  .paquete-badge svg { display: none; }
  .checkout-card { padding: 20px 18px; }
  .cuenta-specs { grid-template-columns: 1fr 1fr; }
}

/* === Documentos legales === */
.legal-wrap { max-width: 880px; margin: 40px auto 70px; padding: 0 22px; }
.legal-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(var(--accent-rgb),.08); border:1px solid var(--border-red); color:var(--accent); padding:6px 14px; border-radius:999px; font-size:11px; letter-spacing:2px; text-transform:uppercase; font-weight:700; margin-bottom:16px; }
.legal-wrap h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(24px,4vw,34px); text-transform:uppercase; letter-spacing:-0.5px; margin:0 0 8px; }
.legal-sub { color:var(--text-faded); font-size:13px; padding-bottom:22px; margin-bottom:10px; border-bottom:1px solid var(--border-red); }
.legal-wrap h2 { font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff; margin:34px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border-red); }
.legal-wrap p { color:var(--text-muted); line-height:1.75; margin:0 0 14px; }
.legal-wrap ul { margin:8px 0 16px 22px; color:var(--text-muted); line-height:1.7; }
.legal-wrap ul li { margin-bottom:7px; }
.legal-wrap strong { color:var(--text); }
.legal-wrap a { color:var(--accent); }
.legal-wrap code { font-family:monospace; font-size:.92em; color:var(--accent-light); }
.legal-note { background:rgba(255,193,7,.06); border:1px solid rgba(255,193,7,.28); border-left:3px solid #ffc107; border-radius:12px; padding:14px 18px; margin:18px 0; }
.legal-note p { margin:0; color:#ffe08a; }
.legal-info { background:rgba(var(--accent-rgb),.07); border:1px solid var(--border-red); border-left:3px solid var(--accent); border-radius:12px; padding:14px 18px; margin:18px 0; }
.legal-info p { margin:0; color:#fde68a; }
.legal-contact { background:var(--bg-card); border:1px solid var(--border-red); border-radius:var(--radius); padding:20px; margin-top:34px; }
.legal-contact h3 { margin:0 0 10px; color:#fff; font-size:15px; }
.legal-contact .row { color:var(--text-muted); font-size:14px; margin-top:6px; }
.legal-contact .row a { color:var(--accent); }

/* === Footer profesional === */
.footer-pro { margin-top:80px; border-top:1px solid var(--border-red); background:rgba(0,0,0,.5); }
.footer-pro .fp-grid { max-width:1200px; margin:0 auto; padding:44px 22px 24px; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px; }
.footer-pro .fp-brand strong { display:block; font-family:var(--font-display); font-size:17px; color:var(--accent); letter-spacing:1px; margin-bottom:10px; }
.footer-pro .fp-brand p { color:var(--text-muted); font-size:13px; line-height:1.6; max-width:340px; margin:0 0 12px; }
.footer-pro .fp-empresa { color:var(--text-faded); font-size:12px; line-height:1.6; }
.footer-pro h4 { color:#fff; font-size:13px; letter-spacing:1px; text-transform:uppercase; margin:0 0 14px; font-weight:700; }
.footer-pro ul { list-style:none; margin:0; padding:0; }
.footer-pro ul li { margin-bottom:9px; }
.footer-pro ul a { color:var(--text-muted); text-decoration:none; font-size:13px; transition:color .15s; }
.footer-pro ul a:hover { color:#fff; }
.footer-pro .fp-bottom { border-top:1px solid var(--border-red); padding:16px 22px 22px; text-align:center; color:var(--text-faded); font-size:12px; max-width:1200px; margin:0 auto; }
.footer-pro .fp-pay { margin-top:8px; font-size:11px; }
.footer-pro .fp-disclaimer { margin-top:10px; font-size:11px; line-height:1.5; opacity:.75; }
@media (max-width:980px){ .footer-pro .fp-grid { grid-template-columns:1fr 1fr; gap:26px; } }
@media (max-width:600px){ .footer-pro .fp-grid { grid-template-columns:1fr; gap:24px; } }

/* === Llamada a reseña en la confirmación === */
.resena-cta { margin-top:26px; padding-top:22px; border-top:1px solid var(--border-red); }
.resena-cta p { color:var(--text-muted); font-size:14px; margin:0 0 12px; }

/* Espera de un pedido aún sin entregar */
.pedido-espera { margin-top:22px; padding-top:18px; border-top:1px solid var(--border-red); }
.pedido-espera-nota { color:var(--text-faded); font-size:12.5px; margin:10px 0 0; line-height:1.5; }

/* === Botón flotante de WhatsApp === */
.wa-float {
  position: fixed; left: 16px; bottom: 16px; z-index: 70;
  display: inline-flex; align-items: center; gap: 9px;
  background: #25D366; color: #fff; text-decoration: none;
  padding: 12px 18px 12px 14px; border-radius: 999px;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
  transition: transform .16s, box-shadow .16s;
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,211,102,.6); }
.wa-float svg { width: 24px; height: 24px; flex-shrink: 0; }
@media (max-width: 560px) {
  .wa-float { padding: 13px; }
  .wa-float span { display: none; }
}

/* === Ruleta de premios === */
.ruleta-wrap { max-width: 520px; margin: 40px auto; padding: 0 16px; }
.ruleta-card {
  position: relative; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border-red);
  border-radius: 18px; padding: 28px 22px; text-align: center;
}
/* Halo detras de la rueda: da fondo a la escena sin depender de que la tienda
   tenga imagen de fondo puesta. */
.ruleta-card::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: -120px; height: 300px;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), .16), transparent 70%);
  pointer-events: none;
}
.ruleta-card > * { position: relative; }
.ruleta-card h2 {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 2px; font-size: 19px; margin: 0 0 20px;
}
.ruleta-card .form-group { text-align: left; }

.ruleta-escena { position: relative; width: 100%; max-width: 340px; margin: 0 auto 18px; }
.ruleta-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* La aguja queda fuera del grupo que gira: si girase con la rueda no marcaria
   ninguna casilla. El triangulo ya se dibuja apuntando hacia abajo, hacia la
   casilla ganadora, asi que aqui NO lleva rotacion. */
.ruleta-aguja {
  position: absolute; top: -14px; left: 50%; z-index: 3;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.75));
}
.aguja-cuerpo { fill: var(--accent); stroke: var(--bg-card); stroke-width: 2.5; stroke-linejoin: round; }
.aguja-brillo { fill: #fff; opacity: .32; }

#ruleta-giro { transform-origin: 160px 160px; }
.sec { stroke: rgba(0, 0, 0, .55); stroke-width: 1.5; }
.sec-premio { filter: drop-shadow(0 0 7px rgba(var(--accent-rgb), .6)); }

.aro { fill: var(--bg-card); stroke: url(#rAro); stroke-width: 17; }
.aro-borde { fill: none; stroke: rgba(0, 0, 0, .5); stroke-width: 3; }
.brillo { pointer-events: none; }

/* Bombillas del aro, en dos turnos alternos: una sola cadencia para todas
   parpadea como un error, en dos turnos parece una feria. */
.luz { fill: var(--accent-light); animation: ruleta-luz 1.1s ease-in-out infinite; }
.luz-alt { animation-delay: .55s; }
@keyframes ruleta-luz { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

.eje { fill: var(--bg-card); stroke: url(#rAro); stroke-width: 4; }
.eje-gema {
  fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Un icono por casilla: con doce casillas no cabe una palabra legible, y el
   dibujo se entiende incluso mientras la rueda gira. */
.ico-sec {
  fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.ico-paquete { stroke: #0c0c0e; stroke-width: 1.5; opacity: .8; }
.ico-tirada  { stroke: var(--accent); opacity: .8; }
/* La cara triste pesa más que la equis: es la casilla que estuvo a punto. */
.ico-casi    { stroke: var(--accent-light); opacity: .75; }
.ico-nada    { stroke: var(--text-faded); opacity: .5; }

.sec-txt {
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  fill: var(--text-muted); text-anchor: middle; pointer-events: none;
  letter-spacing: .3px;
}
.sec-txt-premio { fill: #0c0c0e; font-size: 13px; letter-spacing: 0; }

.ruleta-msg { min-height: 30px; margin-bottom: 14px; }
.ruleta-msg .alert { margin: 0; }

/* Aviso de tirada ganada, en la confirmacion del pedido */
.ruleta-cta { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border-red); }
.ruleta-cta p { color: var(--text-muted); font-size: 14px; margin: 0 0 12px; }

@media (prefers-reduced-motion: reduce) {
  #ruleta-giro { transition: none !important; }
  .luz { animation: none; }
}

/* Referidos en la cabecera clasica: boton lleno con brillo, el reclamo del menu. */
.btn-referidos {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #0c0c0e; border-color: transparent;
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), .35);
}
.btn-referidos:hover { box-shadow: 0 10px 28px rgba(var(--accent-rgb), .5); }
.btn-referidos .ico-nav { color: #0c0c0e; }

/* Cabecera clasica: la ruleta convive con el boton de seccion. En movil se
   queda solo el icono, que dos etiquetas no caben al lado de la marca. */
.header-acciones { display: flex; align-items: center; gap: 10px; }
@media (max-width: 560px) {
  .btn-ruleta span { display: none; }
  .btn-ruleta { padding-left: 12px; padding-right: 12px; }
}

/* === Banda de la ruleta en la portada ===
   Solo el bloque; el marco lo pone cada plantilla con su propia <section>, que
   es lo que evita que rompa el ritmo visual de los cuatro temas. */
.ruleta-banda {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px;
  max-width: 720px; margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-red);
  border-radius: 16px;
  padding: 16px 20px;
}
.ruleta-banda::before {
  content: ""; position: absolute; left: -10%; top: -140%; width: 55%; height: 300%;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), .18), transparent 70%);
  pointer-events: none;
}
.ruleta-banda > * { position: relative; }

.ruleta-banda-rueda { flex: none; width: 74px; height: 74px; }
.ruleta-banda-rueda svg { width: 100%; height: auto; display: block; }
.rb-aro { fill: none; stroke: var(--accent); stroke-width: 4; opacity: .85; }
.rb-eje { fill: var(--bg-card); stroke: var(--accent); stroke-width: 2.5; }
.rb-gema {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.rb-aguja { fill: var(--accent-light); }

.ruleta-banda-txt { flex: 1; min-width: 0; }
.ruleta-banda-txt h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px; letter-spacing: 1px; text-transform: uppercase;
  margin: 0 0 4px; color: var(--text);
}
.ruleta-banda-txt p { margin: 0; font-size: 13px; color: var(--text-muted); }
.ruleta-banda-btn { flex: none; }

@media (max-width: 560px) {
  .ruleta-banda { flex-direction: column; text-align: center; gap: 12px; padding: 18px 16px; }
  .ruleta-banda-btn { width: 100%; justify-content: center; }
}

/* === Referidos ===
   Una columna y pocas cajas. Sin entrar: qué se gana, tres pasos en una fila
   y el campo del ID. Dentro: cabecera con saldo, el código como ticket con
   los botones de compartir, tres cifras en una tira y la lista de jugadores
   que trajo; lo demás plegado con <details>. */
.ref-wrap { max-width: 620px; margin: 24px auto 48px; padding: 0 16px; }
.ref-wrap > * { min-width: 0; max-width: 100%; }
.ref-card { background: var(--bg-card); border: 1px solid var(--border-red); border-radius: 16px; padding: 20px 18px; margin-top: 14px; }
.ref-centro { text-align: center; }
.ref-card h3 { font-family: var(--font-display); font-size: 19px; margin: 0 0 6px; color: var(--text); }
.ref-card p { color: var(--text-muted); font-size: 14px; margin: 0 0 14px; }

/* Cabecera del programa */
.ref-hero { text-align: center; padding: 6px 0 4px; }
.ref-hero h1 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 2px; font-size: 24px; margin: 0 0 8px; color: var(--text); }
.ref-hero p { color: var(--text-muted); font-size: 15px; max-width: 460px; margin: 0 auto; }
.ref-hero p b { color: var(--accent); }
.ref-pasos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: paso; }
.ref-paso {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px;
  border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-red); text-align: center;
}
.ref-paso::before { counter-increment: paso; content: counter(paso); font-family: var(--font-display); font-weight: 800; font-size: 11px; color: var(--accent); }
.ref-paso svg { width: 22px; height: 22px; color: var(--accent); }
.ref-paso b { color: var(--text); font-size: 13px; }

/* Formularios: el del ID con el botón dentro (como el checkout), el de la solicitud apilado */
.ref-form label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 8px; color: var(--text); }
.ref-form label + label, .ref-form .form-control + label { margin-top: 12px; }
.ref-form small { display: block; margin-top: 8px; color: var(--text-faded); font-size: 12px; }
.ref-form .form-control { width: 100%; }
.ref-form .btn { width: 100%; margin-top: 14px; }
.ref-izq { text-align: left; }
.ref-aviso { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.ref-aviso.ok { background: rgba(var(--accent-rgb), .10); border: 1px solid rgba(var(--accent-rgb), .35); }
.ref-aviso.bad { background: rgba(255, 80, 80, .10); border: 1px solid rgba(255, 80, 80, .35); }
.ref-ok-ico { width: 40px; height: 40px; color: var(--accent); margin: 0 auto 8px; display: block; }

/* Cabecera del creador */
.ref-top { display: flex; align-items: center; gap: 12px; padding: 4px 2px 14px; }
.ref-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #0c0c0e; font-family: var(--font-display); font-weight: 800; font-size: 18px;
}
.ref-top-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ref-top-nick { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-top-id { font-size: 12px; color: var(--text-muted); }
.ref-top-saldo { flex: none; text-align: right; }
.ref-top-saldo-v { display: block; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--accent); line-height: 1; }
.ref-top-saldo-l { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }

/* Código como ticket + botones */
.ref-ticket {
  display: flex; align-items: center; gap: 10px;
  border: 1px dashed rgba(var(--accent-rgb), .6); border-radius: 12px;
  padding: 8px 8px 8px 14px; background: rgba(var(--accent-rgb), .06);
}
.ref-ticket .promo-ico { width: 20px; height: 20px; }
.ref-ticket-cod { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: 3px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-ticket .promo-btn { min-width: 84px; }
.ref-share-hint { color: var(--text-muted); font-size: 12px; margin: 10px 0 0 !important; text-align: center; }
.ref-share-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ref-share-btns .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; white-space: nowrap; }
.ref-share-btns .btn[hidden] { display: none; }
.ref-btn-wa { background: #25d366 !important; color: #062b14 !important; border-color: transparent !important; }
.ref-btn-wa:hover { filter: brightness(1.08); }
.ref-share-btns .btn.is-ok, .ref-ticket .promo-btn.is-ok { background: var(--ok) !important; color: #fff !important; border-color: transparent !important; }

/* Tres cifras en una tira */
.ref-kpis { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bg-card); border: 1px solid var(--border-red); border-radius: 14px; }
.ref-kpi { padding: 12px 6px; text-align: center; border-left: 1px solid var(--border-red); min-width: 0; }
.ref-kpi:first-child { border-left: 0; }
.ref-kpi b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text); }
.ref-kpi span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }

/* Listas: filas separadas por línea, sin cajas */
.ref-sec { margin-top: 22px; }
.ref-sec-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ref-sec-cab h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1.5px; font-size: 15px; margin: 0; color: var(--text); }
.ref-sec-cab span { font-size: 12px; color: var(--text-faded); white-space: nowrap; }
.ref-filas { list-style: none; margin: 0; padding: 0; }
.ref-fila { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-red); }
.ref-fila:first-child { border-top: 0; }
.ref-fila .ref-avatar { width: 34px; height: 34px; font-size: 14px; }
.ref-fila-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ref-fila-t { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-fila-t small { color: var(--text-faded); font-weight: 400; margin-left: 4px; }
.ref-fila-s { font-size: 12px; color: var(--text-muted); }
.ref-fila-r { flex: none; font-size: 12px; color: var(--text-faded); }
.ref-hist-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb), .14); color: var(--accent); }
.ref-hist-ico svg { width: 18px; height: 18px; }
.ref-estado { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; background: rgba(var(--accent-rgb), .12); color: var(--text-muted); }
.ref-estado.completado { background: rgba(34,197,94,.15); color: #22c55e; }
.ref-estado.pendiente { background: rgba(251,191,36,.15); color: #fbbf24; }
.ref-vacio { text-align: center; padding: 16px 0 6px; color: var(--text-muted); font-size: 14px; margin: 0; }
.ref-vacio a { color: var(--accent); }
.ref-nota { color: var(--text-faded); font-size: 12px; margin: 16px 0 0; text-align: center; }

/* Plegables: Mis recargas, entrar con otro ID */
.ref-mas { margin-top: 14px; }
.ref-mas > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px; color: var(--text);
  padding: 12px 0; border-top: 1px solid var(--border-red); border-bottom: 1px solid var(--border-red);
}
.ref-mas > summary::-webkit-details-marker { display: none; }
.ref-mas > summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 18px; line-height: 1; }
.ref-mas[open] > summary::after { content: "−"; }
.ref-mas > summary span { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--text-faded); }
.ref-mas > .ref-form { padding: 14px 0 4px; }

@media (max-width: 480px) {
  .ref-pasos { grid-template-columns: 1fr; gap: 6px; }
  .ref-paso { flex-direction: row; text-align: left; padding: 9px 12px; gap: 10px; }
  .ref-ticket-cod { font-size: 20px; letter-spacing: 2px; }
  .ref-share-btns { grid-template-columns: 1fr; }
  .ref-kpi b { font-size: 17px; }
}
/* Banda de referidos en la portada, misma familia que la de la ruleta. */
.ref-banda {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px;
  max-width: 720px; margin: 14px auto 0;
  background: var(--bg-card); border: 1px solid var(--border-red); border-radius: 16px;
  padding: 16px 20px;
}
.ref-banda::before {
  content: ""; position: absolute; right: -10%; top: -140%; width: 55%; height: 300%;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), .18), transparent 70%);
  pointer-events: none;
}
.ref-banda > * { position: relative; }
.ref-banda-ico { flex: none; width: 58px; height: 58px; color: var(--accent); }
.ref-banda-ico svg { width: 100%; height: 100%; display: block; }
.ref-banda-txt { flex: 1; min-width: 0; }
.ref-banda-txt h3 {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  letter-spacing: 1px; text-transform: uppercase; margin: 0 0 4px; color: var(--text);
}
.ref-banda-txt p { margin: 0; font-size: 13px; color: var(--text-muted); }
.ref-banda-btn { flex: none; }
@media (max-width: 560px) {
  .ref-banda { flex-direction: column; text-align: center; gap: 12px; padding: 18px 16px; }
  .ref-banda-btn { width: 100%; justify-content: center; }
}

/* Saldo de referidos en el checkout */
.saldo-ref {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 10px; padding: 10px 12px; font-size: 14px; cursor: pointer;
  /* Es una casilla, no una etiqueta de campo: sin mayúsculas ni tracking. */
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text);
}
.saldo-ref input { width: 18px; height: 18px; accent-color: var(--accent); }
.saldo-ref small { display: block; color: var(--text-muted); font-size: 12px; }
.saldo-ref.bienvenida { cursor: default; }
/* Estado del código promocional bajo el campo, y botón «Quitar» */
.codigo-estado { margin-top: 8px; font-size: 13px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.04); color: var(--text-muted); }
.codigo-estado.ok { background: rgba(var(--accent-rgb), .10); border: 1px solid rgba(var(--accent-rgb), .35); color: var(--text); }
.codigo-estado.bad { background: rgba(255, 80, 80, .10); border: 1px solid rgba(255, 80, 80, .35); color: var(--text); }
.btn-verify.btn-quitar { background: #555; }
/* Campo con el botón dentro (ID de jugador): es un .form-control convertido en
   flex, así toma el aspecto del input de cada plantilla sin más reglas. */
.form-control.campo-accion { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; min-width: 0; }
.form-control.campo-accion:focus-within { border-color: var(--red-500); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25); }
.campo-accion-input { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; outline: none; color: inherit; font-family: inherit; font-size: 14px; padding: 8px 0; }
.campo-accion-input::placeholder { color: var(--text-faded); }
.campo-accion .promo-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; }
.campo-accion .promo-btn:disabled { opacity: .7; cursor: not-allowed; }
/* Código promocional como ticket: borde discontinuo, etiqueta y botón dentro */
.promo-ticket {
  display: flex; align-items: center; gap: 10px;
  border: 1px dashed rgba(var(--accent-rgb), .55); border-radius: 12px;
  padding: 6px 6px 6px 14px; background: rgba(var(--accent-rgb), .04);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.promo-ticket:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); }
.promo-ticket.aplicado { border-style: solid; border-color: rgba(var(--accent-rgb), .7); background: rgba(var(--accent-rgb), .10); }
.promo-ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--red-500); opacity: .85; }
.promo-input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--text); font-family: inherit; font-size: 14px; padding: 10px 0;
  letter-spacing: 1px; text-transform: uppercase;
}
.promo-input::placeholder { text-transform: none; letter-spacing: 0; color: var(--text-faded); }
.promo-input:read-only { font-weight: 700; }
.promo-btn {
  flex: 0 0 auto; background: transparent; border: 1px solid rgba(var(--accent-rgb), .55);
  color: var(--red-500); border-radius: 8px; padding: 8px 14px; cursor: pointer;
  font-family: var(--font-accent); font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
}
.promo-btn:hover { background: rgba(var(--accent-rgb), .15); }
.promo-btn.btn-quitar { color: var(--text-muted); border-color: rgba(255,255,255,.2); }
.promo-btn.btn-quitar:hover { background: rgba(255,255,255,.06); }
.saldo-ref-ico { font-size: 20px; line-height: 1; }