/* ============================================================
   SETTINGS STORE — Design tokens & core styles
   Paleta: negro profundo + azul eléctrico + glassmorphism
   ============================================================ */

:root { 
  /* Le decimos al navegador que este sitio es oscuro por diseño, para
     que Chrome/Edge no intenten "auto-oscurecer" u invertir colores de
     texto (lo que puede volver algunas letras negras sobre fondo oscuro). */
  color-scheme: dark;

  /* Colores base */
  --c-bg: #03060f;
  --c-bg-alt: #070c1a;
  --c-card: #0a0f1e;
  --c-blue: #0095ff;
  --c-blue-glow: #4de3fc;
  --c-blue-deep: #005acc;
  --c-celeste: #4de3fc;
  --c-white: #ffffff;
  --c-gray: #1a1f2b;
  --c-gray-soft: #8b95a7;

  /* Tipografía */
  --f-display: 'Orbitron', sans-serif;
  --f-body: 'Inter', sans-serif;

  /* Layout */
  --radius: 14px;
  --border-glow: 1px solid rgba(77, 227, 252, 0.4);
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 24px rgba(77, 227, 252, 0.28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--c-bg);
  color: var(--c-white);
  font-family: var(--f-body);
  overflow-x: hidden;
}

h1, h2, h3, .font-display {
  font-family: var(--f-display);
}

::selection { background: var(--c-blue); color: var(--c-bg); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-blue-deep); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-blue); }

/* Focus visibility (accesibilidad) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-blue-glow);
  outline-offset: 2px;
}

/* ============ Glassmorphism ============ */
.glass {
  background: rgba(13, 17, 23, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--border-glow);
}

.glass-strong {
  background: rgba(10, 14, 20, 0.75);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: var(--border-glow);
}

/* ============ Glow utilities ============ */
.glow-border {
  border: 1px solid rgba(77, 227, 252, 0.45);
  box-shadow: 0 0 0 1px rgba(77, 227, 252, 0.1), var(--shadow-glow);
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.glow-border:hover {
  border-color: var(--c-blue-glow);
  box-shadow: 0 0 0 1px rgba(77, 227, 252, 0.3), 0 0 36px rgba(77, 227, 252, 0.4);
}

.text-glow { text-shadow: 0 0 18px rgba(0, 149, 255, 0.55); }

/* ============ Signature element: faceted "gem-cut" card ============
   Una esquina biselada evoca el corte de un diamante — identidad
   propia de la tienda, no un rounded-card genérico. */
.gem-card {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  border-radius: 4px;
}
.gem-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  background: linear-gradient(135deg, rgba(77,227,252,.55), rgba(0,149,255,0) 40%, rgba(0,149,255,0) 60%, rgba(77,227,252,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Hero canvas de partículas */
#particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-gradient {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(0, 149, 255, 0.16), transparent 70%),
    radial-gradient(40% 40% at 85% 20%, rgba(77, 227, 252, 0.10), transparent 70%),
    linear-gradient(180deg, #03060f 0%, #050a15 60%, #03060f 100%);
}

/* Fondo global: imagen borrosa fija detrás de todo el contenido, con
   una capa oscura encima para mantener la legibilidad del texto. */
.site-bg {
  position: fixed;
  inset: -60px;
  background: url('bg-blur.jpg') center/cover no-repeat;
  filter: blur(45px) saturate(1.15) brightness(0.6);
  z-index: -2;
  pointer-events: none;
}
.site-bg-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,6,15,.55) 0%, rgba(3,6,15,.82) 55%, rgba(3,6,15,.92) 100%);
  z-index: -1;
  pointer-events: none;
}

/* Botones */
.btn-primary {
  background: linear-gradient(135deg, #5EE7FF, #12ADD9);
  color: #04141c;
  font-weight: 600;
  box-shadow: 0 0 26px rgba(77, 227, 252, 0.5);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(77, 227, 252, 0.7); filter: brightness(1.08); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--c-white);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.btn-ghost:hover { border-color: var(--c-blue); background: rgba(0,149,255,0.08); transform: translateY(-2px); }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #0a0f1e 25%, #131a2c 37%, #0a0f1e 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Toast "Copiado" */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 20px);
  background: rgba(13,17,23,.95);
  border: 1px solid rgba(77,227,252,.5);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: 0 0 24px rgba(0,149,255,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Diamond pulse (loader / decorativo) */
.diamond-pulse {
  width: 14px; height: 14px;
  background: var(--c-blue-glow);
  clip-path: polygon(50% 0%, 100% 35%, 50% 100%, 0% 35%);
  animation: pulse-glow 1.8s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: .4; filter: drop-shadow(0 0 2px var(--c-blue-glow)); }
  50% { opacity: 1; filter: drop-shadow(0 0 10px var(--c-blue-glow)); }
}

/* ============ Barra de navegación rápida (móvil) ============
   Va entre el banner y el título de "Recargas", no dentro del header:
   los 6 accesos entran en 2 filas, sin necesidad de desplazarse. */
.mobile-quicknav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 10px;
}
.mobile-quicknav__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7px 4px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--c-gray-soft);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.mobile-quicknav__pill:hover,
.mobile-quicknav__pill:active {
  color: var(--c-white);
  border-color: rgba(77, 227, 252, .5);
  background: rgba(77, 227, 252, .08);
}

/* Compensa la altura real del header fijo (que en móvil incluye la
   barra rápida de arriba) para que nunca tape el contenido de abajo
   (por ejemplo el banner) ni al saltar directo a una sección con un
   ancla (#...). El valor exacto de --header-h lo calcula app.js según
   el alto real del header en cada momento (cambia entre pantallas). */
.hero-offset {
  padding-top: var(--header-h, 76px);
  transition: padding-top .15s ease;
}
#diamantes, #extra, #comunidad, #como-comprar, #pagos, #contacto, #inicio {
  scroll-margin-top: var(--header-h, 76px);
}

/* Sección "Cómo comprar" — línea conectora */
.step-line {
  background: linear-gradient(180deg, rgba(0,149,255,.6), rgba(0,149,255,0));
}
@media (min-width: 768px) {
  .step-line-h { background: linear-gradient(90deg, rgba(0,149,255,.6), rgba(0,149,255,0)); }
}

/* ============ Sección "Cómo comprar" — fondo celeste ============
   Antes era negro (#05070a), igual al resto de las franjas del
   sitio. Ahora tiene un fondo celeste propio (mismo tono que el
   acento de marca --c-celeste) para diferenciarse visualmente del
   resto de las secciones. */
.section-celeste {
  background:
    radial-gradient(65% 70% at 50% 0%, rgba(77, 227, 252, 0.30), transparent 65%),
    linear-gradient(180deg, #0d3a57 0%, #0a2c44 45%, #071f33 100%);
}
.section-celeste .glass {
  background: rgba(13, 40, 60, 0.55);
}

/* ============ Botones grandes del hub (página de inicio) ============
   Reemplazan la grilla de productos en "/": llevan a /diamantes/ y
   /extra/. */
.hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  transition: transform .3s ease, box-shadow .35s ease, border-color .35s ease;
}
.hub-card:hover { transform: translateY(-4px); }
.hub-card__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  filter: drop-shadow(0 0 14px rgba(77, 227, 252, 0.5));
}
.hub-card__title {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.hub-card__desc {
  font-size: 0.9rem;
  color: var(--c-gray-soft);
  margin-bottom: 24px;
}

/* Botón "ir a la otra sección" al final de cada grilla de productos */
.cross-link-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* Copiar botón feedback */
.copy-btn.copied { border-color: #4de3fc; color: #4de3fc; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Rendimiento en móvil: el desenfoque de vidrio (backdrop-filter) es lo
   más pesado para el GPU de celulares de gama media/baja. Se reduce la
   intensidad del blur y se evita re-renderizarlo en cada scroll. */
@media (max-width: 767px) {
  .glass {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .glass-strong {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .gem-card, .glow-border {
    transition-duration: .2s;
  }
}

/* Todo lo que anima usa transform/opacity (acelerado por GPU) en vez de
   propiedades que disparan layout, para que el scroll y las entradas
   se sientan fluidas incluso en equipos modestos. */
[data-aos] {
  will-change: transform, opacity;
}


/* ============ Fondo del Hero: logo agrandado + degradado ============
   Usa el mismo logo del header (SETTINGS.logoUrl). Cuando reemplaces
   logo.svg por tu logo real, este fondo se actualiza solo. Si
   además cargás BANNER.imageUrl (config.js), esa foto se dibuja
   encima, con el mismo degradado. */
.hero-logo-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-logo-bg img {
  width: min(140vw, 1100px);
  max-width: none;
  height: auto;
  opacity: 0.16;
  filter: blur(1px) saturate(1.3);
  transform: scale(1.1);
}
.hero-logo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 50% 40%, rgba(3,6,15,0) 0%, rgba(3,6,15,.55) 65%, rgba(3,6,15,.95) 100%),
    linear-gradient(180deg, rgba(3,6,15,.25) 0%, rgba(3,6,15,.55) 55%, #03060f 100%);
}

/* Ícono de diamante por defecto en las tarjetas de producto */
.diamond-icon { filter: drop-shadow(0 0 10px rgba(77, 227, 252, 0.45)); }

/* Etiqueta de descuento sobre la tarjeta de producto */
.discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: linear-gradient(135deg, #ff3d63, #d6003f);
  color: #fff;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(214, 0, 63, 0.55);
}

/* ============ Tarjeta de producto (estilo "packs de diamantes") ============
   Título grande del pack, línea de detalle (diamantes + bono), línea de
   "máximo por compra" y botón de comprar a todo lo ancho, similar al
   layout de referencia (Pinxtore). */
.pack-card {
  display: flex;
  flex-direction: column;
}
.pack-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: radial-gradient(80% 80% at 50% 30%, rgba(0,149,255,0.10), transparent 70%), var(--c-bg-alt);
}
.pack-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pack-card__body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pack-card__title {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.15;
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--c-white);
  letter-spacing: 0.01em;
  margin: 0 0 10px;
}
.pack-card__detail {
  font-size: 0.85rem;
  color: #c7d0dd;
  margin: 0 0 4px;
}
.pack-card__max {
  font-size: 0.78rem;
  color: var(--c-gray-soft);
  margin: 0 0 14px;
}
.pack-card__price-row {
  margin-bottom: 14px;
}
.pack-card__price-label {
  font-size: 0.78rem;
  color: var(--c-gray-soft);
  margin-right: 6px;
}
.pack-card__price {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--c-blue-glow);
}
.pack-card__price--strike {
  font-size: 0.8rem;
  color: var(--c-gray-soft);
  text-decoration: line-through;
  margin-right: 8px;
}
.pack-card__buy {
  width: 100%;
  text-align: center;
  margin-top: auto;
}
.pack-card__buy:disabled,
.pack-card__buy[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
  box-shadow: none !important;
  transform: none !important;
}

/* Selector de cantidad (Tokens, Cajas, etc.) */
.qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.qty-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(0, 149, 255, 0.4);
  background: rgba(0, 149, 255, 0.08);
  color: var(--c-white);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.qty-btn:hover:not(:disabled) { background: rgba(0, 149, 255, 0.2); }
.qty-btn:active:not(:disabled) { transform: scale(0.94); }
.qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qty-value {
  flex: 1;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-white);
}

/* Insignia "Sin stock" sobre la tarjeta */
.stock-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(20, 22, 28, 0.9);
  color: #ff5d6c;
  border: 1px solid rgba(255, 93, 108, 0.5);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.pack-card--oos .pack-card__media { filter: grayscale(0.6) brightness(0.6); }

@media (max-width: 639px) {
  .qty-btn { width: 30px; height: 30px; font-size: 1rem; }
  .qty-value { font-size: 0.95rem; }
  .qty-row { gap: 8px; margin-bottom: 10px; }
}

/* En pantallas angostas mostramos 2 productos por fila: achicamos
   tipografía y paddings para que la tarjeta no se sienta apretada. */
@media (max-width: 639px) {
  .pack-card__body { padding: 12px 12px 14px; }
  .pack-card__title { font-size: 1rem; margin-bottom: 6px; }
  .pack-card__detail { font-size: 0.72rem; margin-bottom: 2px; }
  .pack-card__max { font-size: 0.66rem; margin-bottom: 10px; }
  .pack-card__price-row { margin-bottom: 10px; }
  .pack-card__price { font-size: 0.95rem; }
  .pack-card__price--strike { font-size: 0.68rem; }
  .pack-card__buy { padding-top: 10px; padding-bottom: 10px; font-size: 0.8rem; }
}

/* ============ Modales (checkout / pop-up de grupo) ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 4, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modal-fade-in .2s ease;
}
.modal-overlay[hidden] { display: none; }
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: rgba(10, 14, 20, 0.92);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gray-soft);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  transition: color .2s ease, border-color .2s ease;
}
.modal-close:hover { color: #fff; border-color: var(--c-blue); }

.modal-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
}
.modal-input:focus {
  outline: none;
  border-color: var(--c-blue-glow);
  box-shadow: 0 0 0 3px rgba(77, 227, 252, 0.15);
}
.modal-input::placeholder { color: rgba(255,255,255,0.3); }

/* Responsive tweaks puntuales que Tailwind no resuelve limpio */
@media (max-width: 375px) {
  .hero-title { font-size: 2.1rem !important; }
}

/* ============ Banner de cookies ============ */
#cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  max-width: 720px;
  margin: 0 auto;
}
.cookie-banner-inner {
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  box-shadow: var(--shadow-soft);
}
.cookie-banner-inner p {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--c-gray-soft);
}
.cookie-banner-inner a {
  color: var(--c-blue-glow);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-btn-ghost, .cookie-btn-solid {
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.cookie-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--c-white);
}
.cookie-btn-ghost:hover { border-color: var(--c-blue); }
.cookie-btn-solid {
  background: var(--c-blue);
  border: 1px solid var(--c-blue);
  color: #001018;
}
.cookie-btn-solid:hover { background: var(--c-blue-glow); border-color: var(--c-blue-glow); transform: translateY(-1px); }

@media (max-width: 480px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: flex-end; }
}

/* ============ Pantalla de mantenimiento ============
   Se activa/desactiva desde admin.html → pestaña "Mantenimiento".
   Es una capa fija que tapa todo el sitio; el contenido de abajo
   sigue existiendo pero queda inaccesible mientras esté activa. */
#maintenance-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(80% 80% at 50% 30%, rgba(0,149,255,0.10), transparent 70%), var(--c-bg);
}
.maintenance-card {
  max-width: 440px;
  width: 100%;
  text-align: center;
  padding: 44px 32px;
  border-radius: var(--radius);
}
.maintenance-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto 22px;
  display: block;
}
.maintenance-card h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-white);
  margin-bottom: 12px;
}
.maintenance-card p {
  color: var(--c-gray-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-line;
}
body.maintenance-active {
  overflow: hidden;
}