/* =====================================================================
   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 === */
.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; }
.metodo-card .icon svg { width: 24px; height: 24px; margin: 0 auto; display: block; color: var(--red-500); }
.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: 20px;
}
.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; }

/* === 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 === */
.metodos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.metodo-card {
  background: #07070a;
  border: 2px solid #27272a;
  border-radius: 12px;
  padding: 14px 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
  user-select: none;
}
.metodo-card:hover { border-color: var(--border-red-strong); }
.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);
}
.metodo-card .icon { font-size: 24px; margin-bottom: 6px; }
.metodo-card img { max-width: 70px; max-height: 38px; margin-bottom: 6px; }
.metodo-card .nombre {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
}

/* === 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 (flotante) === */
.divisa-switch {
  position: fixed;
  right: 14px; bottom: 14px;
  z-index: 60;
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,0.85);
  border: 1px solid var(--border-red);
  border-radius: 999px;
  padding: 4px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  /* Flotando junto al borde: una tienda con diez monedas se salía de la
     pantalla y los últimos botones quedaban fuera, inalcanzables. */
  max-width: calc(100vw - 28px);
}
.divisa-switch button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.divisa-switch button.active {
  background: linear-gradient(135deg, var(--red-600), var(--red-500));
  color: #000;
}

/* En el footer o junto a los paquetes: deja de flotar y se integra. */
.divisa-switch.divisa-inline {
  position: static;
  display: flex;
  box-shadow: none;
  backdrop-filter: none;
  background: rgba(255,255,255,.03);
  /* Ancho justo para centrarse cuando caben, y tope al ancho disponible
     cuando no. Con `justify-content: center` el navegador impide llegar al
     primer botón al desplazar; con `fit-content` + `margin auto` no pasa. */
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.divisa-switch button { display: inline-flex; align-items: center; gap: 6px; }

/* Carril deslizable: los botones no se encogen ni se parten en varias
   líneas, se desliza el conjunto. La barra de scroll se oculta porque el
   degradado del borde ya avisa de que queda moneda por ver. */
.divisa-switch {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.divisa-switch::-webkit-scrollbar { display: none; }
.divisa-switch button {
  flex: 0 0 auto;
  scroll-snap-align: center;
  white-space: nowrap;
}
/* La clase la pone divisa.js solo cuando el contenido desborda de verdad. */
.divisa-switch.es-desliza {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

/* Bandera dibujada del país de la moneda. USD no lleva: no es "la moneda de
   Estados Unidos" para quien compra, es en la que se le cobra. */
.divisa-flag {
  display: inline-flex;
  width: 15px; height: 10px;
  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; }

/* Barra sobre la lista de paquetes. En bloque, no en flex: un hijo que se
   desplaza necesita mandar sobre su propio ancho, y dentro de un flex el
   navegador se lo recorta. */
.divisa-barra {
  display: block;
  margin: -8px 0 20px;
}
.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 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; }
}