/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 */

/* ===== NEXUS STORE – Diseño ===== */
:root { 
  --nx-blue: #8b5cf6; 
  --nx-violet: #6366f1; 
  --nx-cyan: #8b5cf6; 
}

/* ==========================================
   5. NOMBRE DE LA TIENDA Y LOGO
   ========================================== */
.sa-navbar-logo, .sa-navbar-logo span {
  font-family: var(--ff-heading) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.sa-navbar-logo img, .sa-navbar-logo svg, .sa-navbar-logo-image, .sa-navbar-logo-icon {
  height: 32px !important;
  width: auto !important;
  transform: translateY(-1px) !important;
}

/* ==========================================
   6. INSIGNIA COMPACTA CON BORDE FINO Y PUNTO
   ========================================== */
.hero-eyebrow, .sa-hero-eyebrow, .sa-section-eyebrow {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 4px 16px 4px 26px !important;
  background: rgba(139, 92, 246, 0.03) !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  border-radius: 50px !important;
  color: #8b5cf6 !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.05em !important;
  overflow: hidden !important;
  box-shadow: 0 0 6px rgba(139, 92, 246, 0.15) !important;
  animation: brilloGlow 3s infinite alternate ease-in-out !important;
}

.hero-eyebrow::after, .sa-hero-eyebrow::after, .sa-section-eyebrow::after {
  content: '' !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  background-color: #8b5cf6 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px #8b5cf6 !important;
  animation: parpadeoPunto 1.4s infinite ease-in-out !important;
}

.hero-eyebrow::before, .sa-hero-eyebrow::before, .sa-section-eyebrow::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -150% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 92, 246, 0.2) 30%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(139, 92, 246, 0.2) 70%,
    transparent
  ) !important;
  transform: skewX(-20deg) !important;
  pointer-events: none !important;
  animation: barridoRapido 4.5s infinite ease-in-out !important;
}

@keyframes parpadeoPunto {
  0%, 100% {
    opacity: 0.4;
    transform: translateY(-50%) scale(0.85);
    box-shadow: 0 0 3px rgba(139, 92, 246, 0.5);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
    box-shadow: 0 0 8px rgba(139, 92, 246, 1);
  }
}

@keyframes barridoRapido {
  0% { left: -150%; }
  30% { left: 150%; }
  100% { left: 150%; }
}

@keyframes brilloGlow {
  0%, 100% {
    border-color: rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.2) !important;
  }
}

/* ==========================================
   7. ESTILO EXACTO CONTADORES CIAN NEÓN
   ========================================== */
.hero-stats .stat-num {
  font-family: var(--ff-heading) !important;
  color: #8b5cf6 !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}

.hero-stats .stat-label {
  color: #64748b !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.hero-stats {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  width: 100% !important;
}

/* ==========================================
   8. ESTILOS DE FONDO Y ESTRUCTURA GLOBAL
   ========================================== */
body, #app, main, section, .sa-hero, .sa-features, .sa-products, .bg-background {
  background-color: transparent !important;
}

body {
  background-color: #07090e !important;
  position: relative !important;
  overflow-x: hidden !important;
}

body::before, body::after, .sa-hero::before, .sa-hero::after, .sa-navbar::before, .sa-navbar::after, header::before, header::after, [class*="grid"]::before, [class*="grid"]::after, [class*="bg-grid"], [class*="dot"], [class*="pattern"], .bg-grid-dots {
  display: none !important;
  background-image: none !important;
}

/* Iluminación / Focos de luz ambient */
body::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-image: 
    radial-gradient(circle 800px at 15% 0%, rgba(139, 92, 246, 0.15), transparent 70%),
    radial-gradient(circle 800px at 85% 20%, rgba(99, 102, 241, 0.15), transparent 75%),
    radial-gradient(circle 600px at 30% 85%, rgba(139, 92, 246, 0.10), transparent 70%) !important;
}

/* ==========================================
   9. CORRECCIÓN DE MENÚS DESPLEGABLES (OPACOS)
   ========================================== */
div[x-show="menuOpen"],
div[role="menu"],
.dropdown-menu {
  background-color: #0c0f17 !important;
  background: #0c0f17 !important;
  opacity: 1 !important;
}

/* ==========================================
   10. BOTONES NEÓN CON BRILLO
   ========================================== */
.sa-hero a[href*="product"],
.sa-hero button:first-of-type,
.btn-primary,
.sa-btn--primary,
.sa-add-to-cart {
  background: rgba(99, 102, 241, 0.10) !important; color: #c7d2fe !important;
  color: #c7d2fe !important;
  font-weight: 700 !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
  box-shadow: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease !important;
}

.sa-hero a[href*="product"]:hover,
.sa-hero button:first-of-type:hover,
.btn-primary:hover,
.sa-btn--primary:hover,
.sa-add-to-cart:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4) !important;
}

/* Botón Discord/Secundario - Color gris como los otros */
button:not([class*="primary"]):not([class*="accent"]),
.sa-hero button:last-of-type,
button[class*="secondary"],
button[class*="discord"],
a[href*="discord"]:not([class*="accent"]),
button:last-child:not([class*="accent"]):not([class*="primary"]) {
  background: rgba(99, 102, 241, 0.10) !important;
  background-color: rgba(99, 102, 241, 0.10) !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
  border-radius: 999px !important;
  color: #c7d2fe !important;
  font-weight: 700 !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease !important;
  box-shadow: none !important;
}

.sa-hero button:last-of-type:hover,
button[class*="secondary"]:hover,
button[class*="discord"]:hover,
a[href*="discord"]:not([class*="accent"]):hover,
button:last-child:not([class*="accent"]):not([class*="primary"]):hover {
  background: rgba(99, 102, 241, 0.10) !important;
  background-color: rgba(99, 102, 241, 0.10) !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* ==========================================
   11. TARJETAS DE PRODUCTO (LIMPIAS)
   ========================================== */
.sa-product-card, 
[class*="product-card"] {
  background-color: #121622 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease !important;
}

.sa-product-card:hover,
[class*="product-card"]:hover {
  box-shadow: none !important;
  transform: translateY(-3px) !important;
}

.sa-product-card *,
[class*="product-card"] * {
  box-shadow: none !important;
  outline: none !important;
}

.sa-product-card h3,
.sa-product-card span,
.sa-product-card p,
.sa-product-card div:not(.sa-product-card),
[class*="product-card"] h3,
[class*="product-card"] span,
[class*="product-card"] p {
  border: none !important;
  background-color: transparent !important;
}

/* Números de estadísticas en degradado */
.sa-hero-stats-count,
.sa-hero [class*="stat"] span {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ==========================================
   BARRA ESTILO RESELLME (floating-pill)
   ========================================== */
.sa-navbar--floating-pill > div {
  padding: 0.5rem 3rem 0 !important;
}
.sa-navbar--floating-pill .rounded-full {
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.sa-navbar--floating-pill .h-14 {
  justify-content: flex-start !important;
  gap: 1.5rem !important;
  padding: 0 !important;
}

.sa-navbar--floating-pill .h-14 > div:nth-child(2) {
  position: static !important;
  transform: none !important;
  left: auto !important;
  gap: 0.25rem !important;
}

.sa-navbar--floating-pill .h-14 > div:last-child {
  margin-left: auto !important;
}

/* ===== FUENTE NAVBAR: SYNE (un poco más pequeña) ===== */
.sa-navbar-link {
  font-family: 'Syne', var(--ff-heading), sans-serif !important;
  font-size: 0.64rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: #8a94a6 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 0.5rem 0.9rem !important;
}
.sa-navbar-link:hover {
  color: #fff !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.sa-navbar-link[class*="text-t-primary bg-t-primary/5"] {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
}

.sa-navbar-cart {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 0.5rem 0.75rem !important;
}
/* ===== BARRA CENTRADA ===== */

/* Contenedor centrado con ancho máximo */
.sa-navbar--floating-pill > div {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0.5rem 1.5rem 0 !important;
}

/* Todo el grupo (logo + enlaces + iconos) centrado */
.sa-navbar--floating-pill .h-14 {
  justify-content: center !important;
  gap: 1.25rem !important;
}

/* Iconos pegados a los enlaces, ya no empujados al borde */
.sa-navbar--floating-pill .h-14 > div:last-child {
  margin-left: 0 !important;
  gap: 0.35rem !important;
}

/* ===== TODA LA WEB REDONDEADA ===== */

/* Botones, enlaces-botón y etiquetas: píldora */
button,
[type="button"],
[type="submit"],
.rounded-btn,
.rounded-badge,
[class*="rounded-btn"],
[class*="rounded-badge"],
.btn-primary,
.sa-btn--primary,
.sa-add-to-cart,
.sa-navbar-link,
.sa-navbar-cart,
.input-stepper,
.input-stepper button {
  border-radius: 999px !important;
}

/* Campos de texto, selectores y desplegables: píldora (sin tocar el padding, para que se vean los iconos) */
input:not([type="checkbox"]):not([type="radio"]),
select,
.rounded-input,
[class*="rounded-input"] {
  border-radius: 999px !important;
}

textarea {
  border-radius: 20px !important;
}

/* Tarjetas, paneles, menús y modales: muy redondeados (no píldora) */
.rounded-card,
[class*="rounded-card"],
.sa-product-card,
[class*="product-card"],
.shadow-modal,
.shadow-card {
  border-radius: 22px !important;
}

/* Imágenes dentro de tarjetas */
.sa-product-card img,
[class*="product-card"] img {
  border-radius: 18px !important;
}

/* ==========================================================
   PERSONALIDAD: dashboard, carrito y productos
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */

/* 1. Tarjetas y paneles: fondo transparente bonito, bordes limpios */
.rounded-card,
[class*="rounded-card"],
.shadow-card,
.sa-product-card,
[class*="product-card"] {
  background: linear-gradient(135deg, rgba(20, 25, 35, 0.4) 0%, rgba(15, 20, 30, 0.3) 100%) !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  /* sin transición de border-color: así el borde aparece/desaparece de golpe y no se anima hacia blanco (destello) */
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.rounded-card:hover,
.shadow-card:hover,
.sa-product-card:hover,
[class*="product-card"]:hover {
  border: none !important;
  box-shadow: none !important;
}

/* Tarjetas de producto: sin borde ni en reposo ni al pasar el ratón */
.sa-product-card,
[class*="product-card"] {
  border: none !important;
}

/* 2. Iconos redondos de las tarjetas: ficha con tinte y borde */
:is(.rounded-card, .shadow-card) :is(.size-8, .size-9, .size-10, .size-11, .size-12).rounded-full {
  background: rgba(139, 92, 246, 0.10) !important;
  border: 1px solid rgba(139, 92, 246, 0.28) !important;
  color: #8b5cf6 !important;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.12) !important;
}

/* 3. Botones principales: degradado con resplandor */
button.bg-accent-500,
a.bg-accent-500,
.bg-accent-500[class*="rounded-btn"] {
  background: rgba(99, 102, 241, 0.10) !important; color: #c7d2fe !important;
  color: #c7d2fe !important;
  font-weight: 700 !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
  box-shadow: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
button.bg-accent-500:hover,
a.bg-accent-500:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 34px -6px rgba(139, 92, 246, 0.7) !important;
}

/* 4. Carrito lateral: panel con degradado, borde luminoso y sombra */
.fixed[class*="right-0"][class*="inset-y-0"],
.fixed[class*="right-0"][class*="h-full"],
.fixed[class*="right-0"][class*="top-0"] {
  background:
    linear-gradient(160deg, rgba(139, 92, 246, 0.10) 0%, rgba(99, 102, 241, 0.07) 35%, #090c13 75%) !important;
  border-left: 1px solid rgba(139, 92, 246, 0.22) !important;
  box-shadow: -24px 0 60px -20px rgba(139, 92, 246, 0.18) !important;
}

/* 5. Etiquetas pequeñas en mayúsculas con carácter (SALDO, PEDIDOS...) */
.uppercase {
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
}

/* 6. Enlaces de acento en cian */
.text-accent-500 {
  color: #8b5cf6 !important;
}
/* ===== MENÚ DESPLEGABLE DE CUENTA ===== */
div[role="menu"],
.dropdown-menu,
div[x-show="menuOpen"] {
  background: rgba(12, 15, 23, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 0.5rem !important;
  overflow: hidden !important;
}

div[role="menu"] a,
div[role="menu"] button,
.dropdown-menu a,
.dropdown-menu button,
div[x-show="menuOpen"] a,
div[x-show="menuOpen"] button {
  border-radius: 12px !important;
  transition: background 0.2s, color 0.2s !important;
}

div[role="menu"] a:hover,
div[role="menu"] button:hover,
.dropdown-menu a:hover,
.dropdown-menu button:hover,
div[x-show="menuOpen"] a:hover,
div[x-show="menuOpen"] button:hover {
  background: rgba(139, 92, 246, 0.08) !important;
  color: #8b5cf6 !important;
}
/* ===== CUADROS Y MENÚS EMERGENTES ===== */
.shadow-modal {
  background: #0c0f17 !important;
  background-color: #0c0f17 !important;
  opacity: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.06), 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}
/* ===== CARRUSEL DE PRODUCTOS: flechas fuera y sin tarjeta cortada ===== */

/* Espacio a los lados para las flechas */
.sa-products--carousel .splide {
  padding-left: 3.5rem !important;
  padding-right: 3.5rem !important;
}

/* Recorta justo en el borde: ya no se asoma la tarjeta siguiente */
.sa-products--carousel .splide .splide__track {
  clip-path: inset(-3rem 0 -3rem 0) !important;
}

/* Flechas fuera de las tarjetas, una a cada lado */
.sa-products--carousel .splide__arrow {
  width: 2.5rem !important;
  height: 2.5rem !important;
  background: rgba(12, 15, 23, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.06) !important;
  opacity: 1 !important;
}
.sa-products--carousel .splide__arrow:disabled {
  opacity: 0.35 !important;
}
.sa-products--carousel .splide__arrow svg {
  fill: #ffffff !important;
}
.sa-products--carousel .splide__arrow--prev {
  left: 0 !important;
}
.sa-products--carousel .splide__arrow--next {
  right: 0 !important;
}

/* Móvil: menos espacio lateral */
@media (max-width: 640px) {
  .sa-products--carousel .splide {
    padding-left: 2.75rem !important;
    padding-right: 2.75rem !important;
  }
  .sa-products--carousel .splide__arrow {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
}

/* ===== CARRUSEL: tarjetas con su ancho original, flechas en el margen ===== */
@media (min-width: 1280px) {
  .sa-products--carousel .splide {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .sa-products--carousel .splide__arrow--prev {
    left: -3.5rem !important;
  }
  .sa-products--carousel .splide__arrow--next {
    right: -3.5rem !important;
  }
}

/* ===== CATEGORÍAS: efecto al pasar el ratón ===== */

.sa-categories-items {
  perspective: 1000px;
}

.sa-categories-item {
  position: relative !important;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.45s ease,
              border-color 0.3s ease !important;
}

/* Al pasar el ratón: se levanta, se inclina un poco */
.sa-categories-item:hover {
  transform: translateY(-8px) rotateX(5deg) rotateY(-6deg) scale(1.02) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

/* Imagen: zoom suave dentro de la tarjeta */
.sa-categories-item img {
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.sa-categories-item:hover img {
  transform: scale(1.1);
}

/* Destello diagonal que cruza la tarjeta */
.sa-categories-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.10),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.8s ease;
}
.sa-categories-item:hover::after {
  left: 130%;
}

/* Título y flecha en cian, la flecha avanza */
.sa-categories-item h3 {
  transition: color 0.3s ease;
}
.sa-categories-item:hover h3 {
  color: #8b5cf6 !important;
}
.sa-categories-item h3 + svg {
  transition: transform 0.3s ease, color 0.3s ease !important;
}
.sa-categories-item:hover h3 + svg {
  transform: translateX(6px) !important;
  color: #8b5cf6 !important;
}

/* Respeta a quien tiene las animaciones desactivadas */
@media (prefers-reduced-motion: reduce) {
  .sa-categories-item,
  .sa-categories-item img,
  .sa-categories-item::after {
    transition: none !important;
  }
  .sa-categories-item:hover,
  .sa-categories-item:hover img {
    transform: none !important;
  }
}
/* ===== CATEGORÍAS: imagen grande con el nombre encima ===== */

.sa-categories-item {
  border-radius: 22px !important;
  border: none !important;
}

/* La imagen ocupa toda la tarjeta, sin línea separadora */
.sa-categories-item > div:first-child {
  border: none !important;
}
.sa-categories-item img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

/* El nombre va encima de la imagen, sobre un degradado oscuro */
.sa-categories-item > div:last-child {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 2.5rem 1.25rem 1.1rem !important;
  background: linear-gradient(
    to top,
    rgba(7, 9, 14, 0.95) 0%,
    rgba(7, 9, 14, 0.65) 55%,
    transparent 100%
  ) !important;
}
.sa-categories-item h3 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* La flecha pasa a ser un botón redondo */
.sa-categories-item h3 + svg {
  width: 2.25rem !important;
  height: 2.25rem !important;
  padding: 0.6rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  flex-shrink: 0 !important;
}
.sa-categories-item:hover h3 + svg {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* ==========================================================
   RESEÑAS: veredicto, pestañas por estrellas y tarjetas
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
/* Barra de pestañas */
.sa-fb-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 0 0 1.75rem;
}
/* Línea fina y sutil que se desvanece en los extremos */
.sa-fb-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.14) 85%, transparent 100%);
  pointer-events: none;
}
.sa-fb-tabs { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.sa-fb-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: -1px;
  padding: 0.8rem 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Syne', var(--ff-heading), sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a94a6;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.sa-fb-tab b { font-weight: 600; color: #64748b; }
.sa-fb-tab .star { color: #fbbf24; }
.sa-fb-tab:hover { color: #fff; }
.sa-fb-tab.is-active {
  color: #fff;
}
.sa-fb-tab.is-active b { color: #8b5cf6; }

.sa-fb-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  padding-bottom: 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sa-fb-visible { color: #8b5cf6; font-weight: 600; }
.sa-fb-sort { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.sa-fb-sortlink { color: #64748b; transition: color 0.2s ease; }
.sa-fb-sortlink:hover { color: #fff; }
.sa-fb-sortlink.is-active { color: #fff; }

/* Tarjetas en columnas */
.sa-fb-list { column-count: 1; column-gap: 1rem; }
@media (min-width: 700px)  { .sa-fb-list { column-count: 2; } }
@media (min-width: 1024px) { .sa-fb-list { column-count: 3; } }

.sa-fb-card {
  display: block;
  break-inside: avoid;
  margin: 0 0 1rem;
  padding: 1.15rem 1.25rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(20, 25, 35, 0.35) 0%, rgba(15, 20, 30, 0.25) 100%);
  border: none;
  box-shadow: none;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.sa-fb-card:hover {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  transform: translateY(-2px);
}
.sa-fb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.sa-fb-card-stars { color: #fbbf24; font-size: 0.9rem; letter-spacing: 0.08em; filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.3)); }
.sa-fb-card-stars .off { color: rgba(255, 255, 255, 0.18); }
.sa-fb-time { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #8a94a6; }
.sa-fb-msg { margin: 0; font-size: 0.95rem; line-height: 1.55; color: #e6eaf2; overflow-wrap: anywhere; }
.sa-fb-img { width: 5rem; height: 5rem; margin-top: 0.8rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); object-fit: cover; }
.sa-fb-reply { margin-top: 0.9rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border-left: 2px solid #8b5cf6; }
.sa-fb-reply p { margin: 0; font-size: 0.85rem; color: #b6bfce; overflow-wrap: anywhere; }
.sa-fb-reply span { display: block; margin-top: 0.4rem; font-size: 0.68rem; color: #8a94a6; text-align: right; }
.sa-fb-foot { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.sa-fb-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.3);
}
.sa-fb-user { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.85rem; font-weight: 600; color: #fff; }
.sa-fb-user svg { width: 0.9rem; height: 0.9rem; color: #8b5cf6; }
.sa-fb-prod { margin: 0.15rem 0 0; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8a94a6; overflow-wrap: anywhere; }

/* ==========================================================
   BOLETÍN: línea separada del botón y campo sin contorno
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
#nx-news-form {
  padding-bottom: 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
#nx-news-form .nx-news-input {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
#nx-news-form button[type="submit"] {
  box-shadow: 0 6px 18px -8px rgba(139, 92, 246, 0.45) !important;
}

/* ==========================================================
   IMÁGENES DE PRODUCTO: sin zoom ni clic
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
.zoomable,
.sa-product-gallery img,
.sa-product-gallery .splide__slide img {
  pointer-events: none !important;
  cursor: default !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

/* ==========================================================
   FIX: línea azul bajo la imagen de la tarjeta de producto
   [class*="product-card"] también atrapaba el contenedor de la imagen
   (aspect-product-card-image) y le ponía borde, fondo y sombra propios.
   Se anulan ahí, pero la imagen conserva sus esquinas redondeadas.
   ========================================================== */
[class*="product-card"] [class*="product-card"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* La imagen en sí: sin borde ni sombra, pero NO transparent para que
   el fondo oscuro del contenedor (.sa-product-card-media) se vea */
[class*="product-card"] .aspect-product-card-image,
.sa-products-item .aspect-product-card-image {
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}
[class*="product-card"] [class*="border-b"],
[class*="product-card"] [class*="border-t"] {
  border-color: transparent !important;
}

/* FIX: línea vertical a los lados de la tarjeta.
   No era un borde: era el resplandor (sombra) de la tarjeta cortado en seco
   por el carrusel. Se deja más margen lateral para que se desvanezca entero. */
.sa-products--carousel .splide .splide__track {
  clip-path: inset(-3rem -1.5rem -3rem -1.5rem) !important;
}

/* ==========================================================
   FIX: página de Productos — el producto se subía y tapaba los filtros
   Los filtros tenían "sticky" (se quedaban fijos arriba) pero la rejilla
   de 2 columnas no existe en built.css, así que el producto pasaba por
   encima al hacer scroll/zoom. Se mantienen los filtros en su sitio de
   siempre (encima de los productos) y sin quedarse fijos.
   También se ocultan los números 01 y 02 de los títulos de filtro.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
.sa-page-products aside {
  position: static !important;
}
.sa-page-products aside p > span.text-accent-500 {
  display: none !important;
}

/* ===== PRECIO DE LAS TARJETAS: misma fuente y color que la página del producto ===== */
body .sa-product-card .sa-product-card-price,
body .sa-product-card .sa-product-card-price span,
body .sa-product-card .sa-product-card-price.text-accent-500,
body .sa-products .sa-product-card .sa-product-card-price,
body .sa-products .sa-product-card .sa-product-card-price span {
  font-family: var(--ff-heading) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

/* ===== BOTÓN "AÑADIR AL CARRITO": quitar el fondo detrás del precio ===== */
.sa-product-form .sa-add-to-cart span.rounded-md {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ===== QUITAR "MÁXIMO X EN STOCK" bajo la cantidad ===== */
.sa-product-form p[x-show*="999999"] {
  display: none !important;
}

/* ===== FILTRO DE PRECIO: quitar la línea vertical ===== */
.sa-page-products aside a.border-l-2 {
  border-left: 0 !important;
  border-color: transparent !important;
  padding-left: 0 !important;
}

/* ===== FONDO MÁS LIMPIO: base oscura neutra y un solo brillo muy suave ===== */
body {
  background-color: #0a0c12 !important;
}
body::after {
  background-image:
    radial-gradient(circle 900px at 50% -10%, rgba(139, 92, 246, 0.06), transparent 70%) !important;
  /* Para un fondo totalmente liso, cambia la línea de arriba por: background-image: none !important; */
}


/* ==========================================================
   FONDO ANIMADO: luces que se mueven, rejilla de puntos y partículas
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */

/* Base: el color de fondo pasa a la página entera, para que las capas se vean detrás del contenido */
html {
  background-color: #070a10 !important;
}
body {
  background-color: transparent !important;
}

/* Capa 1: luces cian y violeta que se desplazan muy despacio */
body::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  top: -25% !important;
  left: -25% !important;
  right: -25% !important;
  bottom: -25% !important;
  width: auto !important;
  height: auto !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle at 22% 28%, rgba(139, 92, 246, 0.26), transparent 38%),
    radial-gradient(circle at 78% 24%, rgba(99, 102, 241, 0.26), transparent 40%) !important;
  animation: nx-luz-a 14s ease-in-out infinite alternate !important;
  will-change: transform;
}

/* Capa 2: otras dos luces que se mueven al revés */
body::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  top: -25% !important;
  left: -25% !important;
  right: -25% !important;
  bottom: -25% !important;
  width: auto !important;
  height: auto !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle at 72% 78%, rgba(139, 92, 246, 0.24), transparent 40%),
    radial-gradient(circle at 26% 82%, rgba(139, 92, 246, 0.14), transparent 36%) !important;
  animation: nx-luz-b 18s ease-in-out infinite alternate !important;
  will-change: transform;
}

/* Capa 3: rejilla de puntos fina, más visible arriba y que se difumina hacia abajo */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.3px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 15%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 70% at 50% 15%, #000 0%, transparent 100%);
  /* rejilla estática: la animación de background-position repintaba la capa en cada frame */
}

/* Capa 4: partículas que suben despacio y parpadean */
html::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    32.7vw 15.1vh 0px 0 rgba(139, 92, 246,.75),
    81.5vw 9.4vh 0px 1px rgba(99, 102, 241,.65),
    4.7vw 43.4vh 0px 0 rgba(99, 102, 241,.65),
    9.9vw 42.5vh 0px 1px rgba(99, 102, 241,.65),
    62.8vw 58.3vh 0px 0 rgba(139, 92, 246,.7),
    5.9vw 22.1vh 0px 1px rgba(255,255,255,.55),
    42.1vw 54.1vh 1px 0 rgba(99, 102, 241,.65),
    11.1vw 57.1vh 0px 1px rgba(255,255,255,.55),
    10.5vw 71.2vh 0px 0 rgba(99, 102, 241,.65),
    49.6vw 53.2vh 1px 1px rgba(139, 92, 246,.7),
    58.4vw 45.3vh 1px 0 rgba(99, 102, 241,.65),
    78.8vw 69.9vh 0px 1px rgba(139, 92, 246,.75),
    57.3vw 52.5vh 1px 0 rgba(139, 92, 246,.7),
    29.2vw 98.0vh 0px 1px rgba(139, 92, 246,.7),
    17.2vw 34.2vh 2px 0 rgba(139, 92, 246,.7),
    4.8vw 66.8vh 1px 1px rgba(255,255,255,.55),
    69.1vw 59.4vh 2px 0 rgba(139, 92, 246,.75),
    83.3vw 94.5vh 2px 1px rgba(139, 92, 246,.75),
    6.9vw 70.1vh 2px 0 rgba(255,255,255,.55),
    71.2vw 88.7vh 1px 1px rgba(139, 92, 246,.75),
    93.2vw 35.5vh 0px 0 rgba(139, 92, 246,.7),
    6.8vw 76.8vh 0px 1px rgba(99, 102, 241,.65),
    40.0vw 91.7vh 2px 0 rgba(139, 92, 246,.75),
    17.3vw 40.2vh 1px 1px rgba(99, 102, 241,.65),
    81.3vw 86.4vh 1px 0 rgba(139, 92, 246,.7),
    97.7vw 68.3vh 2px 1px rgba(99, 102, 241,.65),
    15.8vw 17.6vh 0px 0 rgba(99, 102, 241,.65),
    2.2vw 83.1vh 0px 1px rgba(255,255,255,.55),
    28.6vw 14.6vh 1px 0 rgba(255,255,255,.55),
    94.4vw 69.0vh 0px 1px rgba(139, 92, 246,.7),
    89.2vw 78.0vh 2px 0 rgba(139, 92, 246,.7),
    40.1vw 10.4vh 2px 1px rgba(139, 92, 246,.75),
    19.7vw 98.5vh 2px 0 rgba(99, 102, 241,.65),
    11.8vw 60.1vh 0px 1px rgba(139, 92, 246,.75),
    32.7vw 115.1vh 0px 0 rgba(139, 92, 246,.75),
    81.5vw 109.4vh 0px 1px rgba(99, 102, 241,.65),
    4.7vw 143.4vh 0px 0 rgba(99, 102, 241,.65),
    9.9vw 142.5vh 0px 1px rgba(99, 102, 241,.65),
    62.8vw 158.3vh 0px 0 rgba(139, 92, 246,.7),
    5.9vw 122.1vh 0px 1px rgba(255,255,255,.55),
    42.1vw 154.1vh 1px 0 rgba(99, 102, 241,.65),
    11.1vw 157.1vh 0px 1px rgba(255,255,255,.55),
    10.5vw 171.2vh 0px 0 rgba(99, 102, 241,.65),
    49.6vw 153.2vh 1px 1px rgba(139, 92, 246,.7),
    58.4vw 145.3vh 1px 0 rgba(99, 102, 241,.65),
    78.8vw 169.9vh 0px 1px rgba(139, 92, 246,.75),
    57.3vw 152.5vh 1px 0 rgba(139, 92, 246,.7),
    29.2vw 198.0vh 0px 1px rgba(139, 92, 246,.7),
    17.2vw 134.2vh 2px 0 rgba(139, 92, 246,.7),
    4.8vw 166.8vh 1px 1px rgba(255,255,255,.55),
    69.1vw 159.4vh 2px 0 rgba(139, 92, 246,.75),
    83.3vw 194.5vh 2px 1px rgba(139, 92, 246,.75),
    6.9vw 170.1vh 2px 0 rgba(255,255,255,.55),
    71.2vw 188.7vh 1px 1px rgba(139, 92, 246,.75),
    93.2vw 135.5vh 0px 0 rgba(139, 92, 246,.7),
    6.8vw 176.8vh 0px 1px rgba(99, 102, 241,.65),
    40.0vw 191.7vh 2px 0 rgba(139, 92, 246,.75),
    17.3vw 140.2vh 1px 1px rgba(99, 102, 241,.65),
    81.3vw 186.4vh 1px 0 rgba(139, 92, 246,.7),
    97.7vw 168.3vh 2px 1px rgba(99, 102, 241,.65),
    15.8vw 117.6vh 0px 0 rgba(99, 102, 241,.65),
    2.2vw 183.1vh 0px 1px rgba(255,255,255,.55),
    28.6vw 114.6vh 1px 0 rgba(255,255,255,.55),
    94.4vw 169.0vh 0px 1px rgba(139, 92, 246,.7),
    89.2vw 178.0vh 2px 0 rgba(139, 92, 246,.7),
    40.1vw 110.4vh 2px 1px rgba(139, 92, 246,.75),
    19.7vw 198.5vh 2px 0 rgba(99, 102, 241,.65),
    11.8vw 160.1vh 0px 1px rgba(139, 92, 246,.75);
  animation: nx-subir 70s linear infinite, nx-parpadeo 4s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes nx-luz-a {
  0%   { transform: translate3d(-9%, -6%, 0) scale(1); }
  100% { transform: translate3d(10%, 8%, 0) scale(1.22); }
}
@keyframes nx-luz-b {
  0%   { transform: translate3d(9%, 7%, 0) rotate(0deg) scale(1.15); }
  100% { transform: translate3d(-10%, -8%, 0) rotate(14deg) scale(1); }
}
@keyframes nx-rejilla {
  from { background-position: 0 0; }
  to   { background-position: 30px 30px; }
}
@keyframes nx-subir {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -100vh, 0); }
}
@keyframes nx-parpadeo {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* En móvil: sin partículas, para que vaya fluido */
@media (max-width: 768px) {
  html::after { display: none; }
}

/* (Sin regla de "reducir movimiento": el fondo se anima siempre, aunque el sistema tenga las animaciones desactivadas) */


/* ==========================================================
   FONDO: meteoritos (estrellas fugaces que cruzan de vez en cuando)
   Necesita el bloque <div class="nx-bg"> que va en el layout master.njk
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
.nx-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.nx-star {
  position: absolute;
  width: 180px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95));
  box-shadow: 0 0 12px 1px rgba(139, 92, 246, 0.6);
  opacity: 0;
  transform: rotate(32deg);
  animation: nx-estrella var(--dur, 14s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes nx-estrella {
  0%   { opacity: 0; transform: rotate(32deg) translateX(0); }
  3%   { opacity: 1; }
  11%  { opacity: 1; }
  14%  { opacity: 0; transform: rotate(32deg) translateX(var(--dist, 900px)); }
  100% { opacity: 0; transform: rotate(32deg) translateX(var(--dist, 900px)); }
}

/* ==========================================================
   FIX: quitar fondo azul de las cards de categorías
   El color viene de bg-surface (#0D1017). Se sobreescribe
   directamente con !important para ganar a built.css
   ========================================================== */
.sa-categories-item.bg-surface,
.sa-categories .sa-categories-item,
a.sa-categories-item {
  background-color: transparent !important;
  background: transparent !important;
}

/* ==========================================================
   BOTONES: sin borde ni resplandor cian
   Quita el borde/halo cian de todos los botones con degradado
   (principales, "Añadir al carrito", Discord, boletín, etc.),
   también al pasar el ratón y al hacer clic.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
:is(
  .btn-primary,
  .sa-btn--primary,
  .sa-add-to-cart,
  .sa-hero a[href*="product"],
  .sa-hero button:first-of-type,
  button.bg-accent-500,
  a.bg-accent-500,
  .bg-accent-500[class*="rounded-btn"],
  #nx-news-form button[type="submit"]
),
:is(
  .btn-primary,
  .sa-btn--primary,
  .sa-add-to-cart,
  .sa-hero a[href*="product"],
  .sa-hero button:first-of-type,
  button.bg-accent-500,
  a.bg-accent-500,
  .bg-accent-500[class*="rounded-btn"],
  #nx-news-form button[type="submit"]
):is(:hover, :focus, :focus-visible, :active) {
  border: 1px solid rgba(129, 140, 248, 0.7) !important;
  outline: 0 !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-shadow: 0 0 #0000 !important;
}

/* ==========================================================
   BOTÓN DISCORD (ficha de producto): estilo oscuro con borde suave
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
a.sa-pp-faq-discord.rounded-btn {
  background: rgba(99, 102, 241, 0.10) !important;
  background-image: none !important;
  color: #c7d2fe !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
a.sa-pp-faq-discord.rounded-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}

/* ==========================================================
   BOTÓN DISCORD (inicio): sin píldora, solo icono + nombre en color Discord
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
html body section.sa-hero .sa-buttons a.sa-btn[href*="discord"],
html body section.sa-hero .sa-hero-actions a[href*="discord"] {
  background: rgba(99, 102, 241, 0.10) !important;
  background-color: rgba(99, 102, 241, 0.10) !important;
  background-image: none !important;
  color: #c7d2fe !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body section.sa-hero .sa-buttons a.sa-btn[href*="discord"]:hover,
html body section.sa-hero .sa-hero-actions a[href*="discord"]:hover {
  background: rgba(99, 102, 241, 0.10) !important;
  background-color: rgba(99, 102, 241, 0.10) !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
  color: #c7d2fe !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
  text-shadow: none !important;
}
html body section.sa-hero .sa-buttons a.sa-btn[href*="discord"],
html body section.sa-hero .sa-hero-actions a[href*="discord"] {
  transition: transform 0.2s ease, text-shadow 0.2s ease !important;
}
html body section.sa-hero .sa-hero-actions a[href*="discord"]:focus,
html body section.sa-hero .sa-hero-actions a[href*="discord"]:focus-visible,
html body section.sa-hero .sa-hero-actions a[href*="discord"]:active {
  outline: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background: rgba(99, 102, 241, 0.10) !important;
}

/* ==========================================================
   REACCIÓN RÁPIDA AL PASAR EL RATÓN (toda la web)
   Antes las tarjetas, botones y enlaces tardaban entre 0.3 y 0.8 s en
   reaccionar. Ahora responden casi al instante (0.12 s).
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
a,
button,
[role="button"],
label,
summary,
select,
input,
textarea,
.sa-product-card,
[class*="product-card"],
.rounded-card,
[class*="rounded-card"],
.shadow-card,
.sa-categories-item,
a.sa-categories-item,
.sa-categories-item h3,
.sa-categories-item h3 + svg,
.sa-navbar-link,
.sa-navbar-cart,
.sa-fb-card,
.sa-fb-tab,
.sa-fb-sortlink,
.sa-products--carousel .splide__arrow,
div[role="menu"] a,
div[role="menu"] button,
.dropdown-menu a,
.dropdown-menu button {
  transition-duration: 0.12s !important;
  transition-delay: 0s !important;
  transition-timing-function: ease-out !important;
}

/* Imagen de las categorías y destello: un pelín más largos, pero ya no se sienten lentos */
.sa-categories-item img {
  transition-duration: 0.25s !important;
}
.sa-categories-item::after {
  transition-duration: 0.4s !important;
}

/* Rejilla de puntos del fondo: queda fija.
   Moverla obligaba al navegador a repintar toda la pantalla en cada
   fotograma y eso hacía que la web respondiera más tarde al ratón. */
html::before {
  animation: none !important;
}

/* ==========================================================
   CARTELES / TARJETAS: fondo cristal con degradado teal → violeta, a juego con la web
   (categorías, productos, reseñas y paneles en general)
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
.rounded-card,
[class*="rounded-card"],
.shadow-card,
.sa-product-card,
[class*="product-card"],
.sa-fb-card {
  background: rgba(11, 15, 30, 0.84) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}

/* Categorías: hay reglas anteriores más específicas que las dejaban transparentes */
html body a.sa-categories-item.sa-categories-item.sa-categories-item,
html body .sa-categories-item.sa-categories-item.sa-categories-item {
  background: rgba(11, 15, 30, 0.84) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}

/* ==========================================================
   TARJETA DE PRODUCTO: misma tarjeta de siempre, muy redondeada (tipo píldora)
   Esquinas grandes y el texto con más margen para que no toque la curva.
   El resto (colores, línea, stock y precio) queda como estaba.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
.sa-product-card--flat-divider {
  border-radius: 44px !important;
}

/* La imagen sigue la curva de la tarjeta, sin esquinas propias */
.sa-product-card--flat-divider .sa-product-card-media,
.sa-product-card--flat-divider .sa-product-card-media img {
  border-radius: 0 !important;
}

/* Texto con más margen a los lados y abajo */
.sa-product-card--flat-divider > div:last-child:not(:first-child) {
  padding: 1rem 1.6rem 1.25rem !important;
}

/* ==========================================================
   SIN BORDE DE COLOR AL PASAR EL RATÓN (tarjetas de nexus.css)
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
.prod-card:hover,
.cat-chip:hover,
.faq-item:hover,
.why-card:hover {
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

/* ==========================================================
   REACCIÓN AL PASAR EL RATÓN EN TARJETAS (sin bordes, brillos ni colores)
   Todas las tarjetas se levantan un poco. Nada más.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
html body .rounded-card:not(.shadow-modal),
html body [class*="rounded-card"]:not(.shadow-modal),
html body .shadow-card:not(.shadow-modal),
html body .sa-faq-card {
  transition: transform 0.2s ease !important;
}
html body .rounded-card:not(.shadow-modal):hover,
html body [class*="rounded-card"]:not(.shadow-modal):hover,
html body .shadow-card:not(.shadow-modal):hover,
html body .sa-faq-card:hover {
  transform: translateY(-4px) !important;
  filter: none !important;
}

/* ==========================================================
   MENÚ DE LOS 3 PUNTOS (cuenta): mismo fondo que el resto de tarjetas
   Antes lo pisaba la regla sólida de .shadow-modal / div[x-show="menuOpen"].
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
html body div[x-show="menuOpen"].shadow-modal,
html body div[x-show="menuOpen"] {
  background: linear-gradient(145deg, #16161f 0%, #0b0f1e 50%, #1a1234 100%) !important;
  background-color: #0b0f1e !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
}


/* ==========================================================
   FONDO: MÁS PUNTOS Y MÁS VISIBLES (versión ligera)
   Dos capas sobre .nx-bg: unos suben, otros titilan.
   Sin desenfoque en los puntos para que no cueste rendimiento.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
.nx-bg::before,
.nx-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}
.nx-bg::before {
  will-change: transform;
  box-shadow:
    45.3vw 56.0vh 0 0 rgba(255,255,255,.85),
    45.3vw 156.0vh 0 0 rgba(255,255,255,.85),
    45.3vw 85.5vh 0 0 rgba(99, 102, 241,.9),
    45.3vw 185.5vh 0 0 rgba(99, 102, 241,.9),
    19.1vw 51.2vh 0 0 rgba(99, 102, 241,.9),
    19.1vw 151.2vh 0 0 rgba(99, 102, 241,.9),
    10.2vw 30.3vh 0 0 rgba(139, 92, 246,.95),
    10.2vw 130.3vh 0 0 rgba(139, 92, 246,.95),
    53.8vw 89.0vh 0 0 rgba(139, 92, 246,.95),
    53.8vw 189.0vh 0 0 rgba(139, 92, 246,.95),
    59.4vw 39.6vh 0 0 rgba(255,255,255,.85),
    59.4vw 139.6vh 0 0 rgba(255,255,255,.85),
    65.1vw 61.6vh 0 0 rgba(99, 102, 241,.9),
    65.1vw 161.6vh 0 0 rgba(99, 102, 241,.9),
    62.1vw 83.2vh 0 0 rgba(139, 92, 246,.95),
    62.1vw 183.2vh 0 0 rgba(139, 92, 246,.95),
    6.8vw 19.0vh 0 0 rgba(99, 102, 241,.9),
    6.8vw 119.0vh 0 0 rgba(99, 102, 241,.9),
    59.8vw 77.8vh 0 0 rgba(139, 92, 246,.9),
    59.8vw 177.8vh 0 0 rgba(139, 92, 246,.9),
    44.2vw 84.2vh 0 0 rgba(99, 102, 241,.9),
    44.2vw 184.2vh 0 0 rgba(99, 102, 241,.9),
    63.7vw 50.0vh 0 0 rgba(139, 92, 246,.95),
    63.7vw 150.0vh 0 0 rgba(139, 92, 246,.95),
    45.8vw 27.8vh 0 0 rgba(139, 92, 246,.95),
    45.8vw 127.8vh 0 0 rgba(139, 92, 246,.95),
    70.4vw 31.5vh 0 0 rgba(99, 102, 241,.9),
    70.4vw 131.5vh 0 0 rgba(99, 102, 241,.9),
    51.3vw 3.0vh 0 0 rgba(139, 92, 246,.95),
    51.3vw 103.0vh 0 0 rgba(139, 92, 246,.95),
    40.2vw 84.7vh 0 0 rgba(255,255,255,.85),
    40.2vw 184.7vh 0 0 rgba(255,255,255,.85),
    7.5vw 1.7vh 0 0 rgba(139, 92, 246,.95),
    7.5vw 101.7vh 0 0 rgba(139, 92, 246,.95),
    21.9vw 92.7vh 0 0 rgba(139, 92, 246,.95),
    21.9vw 192.7vh 0 0 rgba(139, 92, 246,.95),
    47.1vw 98.0vh 0 0 rgba(255,255,255,.85),
    47.1vw 198.0vh 0 0 rgba(255,255,255,.85),
    42.1vw 56.6vh 0 0 rgba(99, 102, 241,.9),
    42.1vw 156.6vh 0 0 rgba(99, 102, 241,.9),
    77.3vw 27.0vh 0 0 rgba(139, 92, 246,.95),
    77.3vw 127.0vh 0 0 rgba(139, 92, 246,.95),
    31.5vw 1.5vh 0 0 rgba(255,255,255,.85),
    31.5vw 101.5vh 0 0 rgba(255,255,255,.85),
    75.3vw 11.8vh 0 0 rgba(99, 102, 241,.9),
    75.3vw 111.8vh 0 0 rgba(99, 102, 241,.9),
    70.3vw 1.1vh 0 0 rgba(255,255,255,.85),
    70.3vw 101.1vh 0 0 rgba(255,255,255,.85),
    79.1vw 17.8vh 0 0 rgba(99, 102, 241,.9),
    79.1vw 117.8vh 0 0 rgba(99, 102, 241,.9),
    44.8vw 19.1vh 0 0 rgba(99, 102, 241,.9),
    44.8vw 119.1vh 0 0 rgba(99, 102, 241,.9),
    42.1vw 38.4vh 0 0 rgba(255,255,255,.85),
    42.1vw 138.4vh 0 0 rgba(255,255,255,.85),
    42.2vw 21.3vh 0 0 rgba(139, 92, 246,.9),
    42.2vw 121.3vh 0 0 rgba(139, 92, 246,.9),
    85.7vw 97.5vh 0 0 rgba(139, 92, 246,.9),
    85.7vw 197.5vh 0 0 rgba(139, 92, 246,.9),
    98.8vw 2.0vh 0 0 rgba(99, 102, 241,.9),
    98.8vw 102.0vh 0 0 rgba(99, 102, 241,.9),
    39.6vw 85.4vh 0 0 rgba(139, 92, 246,.95),
    39.6vw 185.4vh 0 0 rgba(139, 92, 246,.95),
    5.1vw 14.6vh 0 0 rgba(255,255,255,.85),
    5.1vw 114.6vh 0 0 rgba(255,255,255,.85),
    26.3vw 77.3vh 0 0 rgba(139, 92, 246,.9),
    26.3vw 177.3vh 0 0 rgba(139, 92, 246,.9),
    82.4vw 38.6vh 0 0 rgba(139, 92, 246,.95),
    82.4vw 138.6vh 0 0 rgba(139, 92, 246,.95),
    9.8vw 58.3vh 0 0 rgba(99, 102, 241,.9),
    9.8vw 158.3vh 0 0 rgba(99, 102, 241,.9),
    2.5vw 36.9vh 0 0 rgba(255,255,255,.85),
    2.5vw 136.9vh 0 0 rgba(255,255,255,.85),
    13.5vw 58.7vh 0 0 rgba(99, 102, 241,.9),
    13.5vw 158.7vh 0 0 rgba(99, 102, 241,.9),
    85.9vw 18.3vh 0 0 rgba(99, 102, 241,.9),
    85.9vw 118.3vh 0 0 rgba(99, 102, 241,.9),
    31.5vw 22.8vh 0 0 rgba(99, 102, 241,.9),
    31.5vw 122.8vh 0 0 rgba(99, 102, 241,.9),
    72.1vw 15.8vh 0 0 rgba(99, 102, 241,.9),
    72.1vw 115.8vh 0 0 rgba(99, 102, 241,.9),
    68.3vw 38.8vh 0 0 rgba(255,255,255,.85),
    68.3vw 138.8vh 0 0 rgba(255,255,255,.85),
    60.1vw 42.1vh 0 0 rgba(139, 92, 246,.95),
    60.1vw 142.1vh 0 0 rgba(139, 92, 246,.95),
    11.7vw 51.2vh 0 0 rgba(139, 92, 246,.9),
    11.7vw 151.2vh 0 0 rgba(139, 92, 246,.9),
    24.4vw 70.5vh 0 0 rgba(139, 92, 246,.9),
    24.4vw 170.5vh 0 0 rgba(139, 92, 246,.9),
    42.2vw 90.5vh 0 0 rgba(255,255,255,.85),
    42.2vw 190.5vh 0 0 rgba(255,255,255,.85);
  animation: nx-subir 38s linear infinite;
}
.nx-bg::after {
  width: 2px;
  height: 2px;
  box-shadow:
    29.8vw 17.5vh 0 0 rgba(139, 92, 246,.95),
    13.4vw 47.9vh 0 0 rgba(139, 92, 246,.95),
    28.5vw 91.7vh 0 0 rgba(99, 102, 241,.9),
    74.4vw 6.9vh 0 0 rgba(255,255,255,.85),
    44.7vw 6.0vh 0 0 rgba(99, 102, 241,.9),
    28.6vw 53.1vh 0 0 rgba(99, 102, 241,.9),
    10.0vw 13.8vh 0 0 rgba(255,255,255,.85),
    97.1vw 65.7vh 0 0 rgba(99, 102, 241,.9),
    58.8vw 92.4vh 0 0 rgba(255,255,255,.85),
    90.2vw 70.1vh 0 0 rgba(139, 92, 246,.95),
    3.1vw 63.6vh 0 0 rgba(255,255,255,.85),
    7.6vw 31.1vh 0 0 rgba(99, 102, 241,.9),
    98.9vw 7.5vh 0 0 rgba(139, 92, 246,.9),
    73.2vw 90.0vh 0 0 rgba(99, 102, 241,.9),
    78.7vw 91.5vh 0 0 rgba(139, 92, 246,.9),
    9.3vw 47.3vh 0 0 rgba(139, 92, 246,.95),
    86.4vw 41.7vh 0 0 rgba(139, 92, 246,.95),
    85.6vw 57.3vh 0 0 rgba(255,255,255,.85),
    38.2vw 1.2vh 0 0 rgba(139, 92, 246,.95),
    8.9vw 63.9vh 0 0 rgba(139, 92, 246,.9),
    87.2vw 72.8vh 0 0 rgba(255,255,255,.85),
    92.6vw 69.4vh 0 0 rgba(255,255,255,.85),
    44.2vw 83.8vh 0 0 rgba(139, 92, 246,.95),
    51.8vw 51.5vh 0 0 rgba(139, 92, 246,.9),
    59.9vw 48.1vh 0 0 rgba(99, 102, 241,.9),
    94.8vw 11.3vh 0 0 rgba(255,255,255,.85),
    26.1vw 1.1vh 0 0 rgba(139, 92, 246,.9),
    15.0vw 61.2vh 0 0 rgba(99, 102, 241,.9),
    74.9vw 34.3vh 0 0 rgba(255,255,255,.85),
    49.8vw 24.1vh 0 0 rgba(255,255,255,.85);
  animation: nx-titilar 2.6s ease-in-out infinite alternate;
}
@keyframes nx-titilar {
  0%   { opacity: 0.2; }
  100% { opacity: 1; }
}

/* ==========================================================
   RENDIMIENTO: quita lo que más hace ir lenta la web
   - Desenfoque (backdrop-filter) en tarjetas, menús y barra: recalcular un
     desenfoque sobre un fondo que se mueve, en decenas de tarjetas, es lo más caro.
     Se sustituye por el mismo degradado pero más opaco (se ve casi igual).
   - Capa vieja de partículas (html::after): ya la cubren las nuevas.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
html body .rounded-card,
html body [class*="rounded-card"],
html body .shadow-card,
html body .sa-product-card,
html body [class*="product-card"],
html body .sa-fb-card,
html body a.sa-categories-item.sa-categories-item.sa-categories-item,
html body .sa-categories-item.sa-categories-item.sa-categories-item {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(145deg, rgba(18, 18, 24, 0.93) 0%, rgba(11, 15, 30, 0.95) 50%, rgba(26, 18, 52, 0.93) 100%) !important;
}
html body .dropdown-menu,
html body div[role="menu"],
html body a.sa-pp-faq-discord.rounded-btn,
html body nav,
html body .modal-overlay {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body nav { background: transparent !important; background-color: transparent !important; border-bottom: none !important; box-shadow: none !important; }
html body .modal-overlay { background: rgba(0, 0, 0, 0.8) !important; }

html::after { display: none !important; }

@media (max-width: 768px) {
  body::after { display: none !important; }
  .nx-bg::before { display: none; }
}

/* ==========================================================
   BARRA DE SCROLL: fina y con los colores de la tienda
   (para quitarlo, borra este bloque)
   ========================================================== */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.7);
  background-clip: padding-box;
}

/* ==========================================================
   TARJETAS DE PRODUCTO — diseño "catálogo" a juego con los filtros
   Imagen arriba, línea fina, etiquetas mono, chip del tipo, "entrega instantánea",
   destello de color y línea de acento que se abre al pasar el ratón.
   Afecta a todas las tarjetas de la web.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
html body .sa-product-card {
  position: relative !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
html body .sa-product-card:hover { border-color: rgba(255, 255, 255, 0.22) !important; }
html body .sa-product-card.sa-product-card--flat-divider {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border-radius: 16px !important;
}
.sa-products-item,
.sa-page-products-item { height: 100%; }

.sa-product-card--flat-divider::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 36%;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent);
  z-index: 5;
  pointer-events: none;
  opacity: 0.85;
  transition: width 0.45s ease !important;
}
.sa-product-card--flat-divider:hover::before { width: 100%; }

.sa-product-card--flat-divider::after {
  content: "";
  position: absolute;
  right: -30%; bottom: -35%;
  width: 90%; height: 80%;
  background: radial-gradient(closest-side, rgba(99, 102, 241, 0.22), transparent);
  pointer-events: none;
  z-index: 0;
}

html body .sa-product-card--flat-divider .sa-pc-media { position: relative; z-index: 1; }
html body .sa-product-card--flat-divider .sa-pc-media img {
  border-radius: 0 !important;
  transition: transform 0.5s ease !important;
}
html body .sa-product-card--flat-divider:hover .sa-pc-media img { transform: scale(1.05) !important; }
.sa-product-card--flat-divider .sa-product-card-media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

html body .sa-product-card .sa-pc-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.15rem 1.4rem 1.2rem !important;
}
html body .sa-product-card div.sa-pc-head.sa-pc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
html body .sa-product-card h3.sa-product-card-title.sa-product-card-title {
  font-family: var(--ff-heading) !important;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  min-width: 0;
  background: transparent !important;
  border-radius: 0 !important;
}

html body .sa-product-card span.sa-pc-tag.sa-pc-tag {
  flex: none;
  padding: 0.18rem 0.6rem;
  border-radius: 999px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.08) !important;
  border: 1px solid rgba(139, 92, 246, 0.38) !important;
}

html body .sa-product-card div.sa-pc-foot.sa-pc-foot {
  position: relative;
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.sa-product-card .sa-pc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem 0.75rem;
}
.sa-product-card .sa-pc-row--price { align-items: baseline; }
html body .sa-product-card span.sa-pc-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
html body .sa-product-card .sa-product-card-price,
html body .sa-product-card .sa-product-card-price span {
  font-size: 1.2rem !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
html body .sa-product-card span.sa-pc-instant.sa-pc-instant {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.sa-pc-instant svg { width: 0.75rem; height: 0.75rem; color: #facc15; flex: none; }

html body .sa-product-card p.sa-product-card-stock.sa-product-card-stock {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.sa-product-card .sa-product-card-stock::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.sa-product-card .sa-product-card-stock:has(.text-success)::before { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.sa-product-card .sa-product-card-stock:has(.text-error)::before { background: #ef4444; }
.sa-product-card .sa-product-card-stock:has(svg)::before { display: none; }

/* ==========================================================
   VENTANA "ELIGE TU PLAN" (productos con variantes)
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
.sa-vm-panel {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, #16161f 0%, #0b0f1e 55%, #1a1234 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  color: #fff;
}
.sa-vm-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sa-vm-thumb { width: 2.6rem; height: 2.6rem; border-radius: 12px; object-fit: cover; border: 1px solid rgba(255,255,255,.12); }
.sa-vm-title { font-family: var(--ff-heading); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-vm-count {
  flex: none;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #8b5cf6; background: rgba(139, 92, 246,.08); border: 1px solid rgba(139, 92, 246,.38);
}
.sa-vm-close {
  margin-left: auto; flex: none;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8);
  transition: background .2s ease, color .2s ease;
}
.sa-vm-close:hover { background: rgba(255,255,255,.08); color: #fff; }
.sa-vm-close svg { width: 1rem; height: 1rem; }

.sa-vm-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .sa-vm-grid { grid-template-columns: 0.9fr 1.1fr; } }
.sa-vm-left { padding: 1.3rem; display: flex; flex-direction: column; gap: 0.35rem; }
@media (min-width: 768px) { .sa-vm-left { border-right: 1px solid rgba(255,255,255,.10); } }
.sa-vm-img { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.10); margin-bottom: 0.7rem; }
.sa-vm-img img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.sa-vm-plan { font-family: var(--ff-heading); font-size: 1.15rem; font-weight: 700; }
.sa-vm-stock {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #22c55e;
}
.sa-vm-price { font-family: var(--ff-heading); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.3rem 0 0.6rem; }
.sa-vm-add {
  padding: 0.8rem 1rem; border-radius: 999px; font-weight: 600; color: #fff;
  background: rgba(99, 102, 241, 0.10); border: 1px solid rgba(129, 140, 248, 0.45); color: #c7d2fe;
  transition: filter .2s ease, opacity .2s ease;
}
.sa-vm-add:hover { filter: brightness(1.1); }
.sa-vm-add:disabled { opacity: .45; cursor: not-allowed; }
.sa-vm-view {
  text-align: center; padding: 0.75rem 1rem; border-radius: 999px; font-weight: 600; font-size: .92rem;
  border: 1px solid rgba(255,255,255,.18); color: #fff; margin-top: .5rem;
  transition: background .2s ease;
}
.sa-vm-view:hover { background: rgba(255,255,255,.07); }

.sa-vm-right { padding: 1.3rem; display: flex; flex-direction: column; gap: 0.8rem; }
.sa-vm-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.sa-vm-list { display: flex; flex-direction: column; gap: 0.6rem; }
.sa-vm-opt {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left;
  padding: 0.85rem 1rem; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
  transition: border-color .2s ease, background .2s ease;
}
.sa-vm-opt:hover:not(:disabled) { border-color: rgba(255,255,255,.28); }
.sa-vm-opt.is-on { border-color: #8b5cf6; background: rgba(139, 92, 246,.07); }
.sa-vm-opt:disabled { opacity: .45; cursor: not-allowed; }
.sa-vm-radio { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); position: relative; }
.sa-vm-opt.is-on .sa-vm-radio { border-color: #8b5cf6; }
.sa-vm-opt.is-on .sa-vm-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.sa-vm-opt-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.sa-vm-opt-name { font-weight: 600; font-size: .95rem; }
.sa-vm-opt-stock { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.sa-vm-opt-price { font-family: var(--ff-heading); font-weight: 700; font-size: 1.05rem; flex: none; }
.sa-vm-note {
  margin-top: auto; padding: 0.8rem 1rem; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);
  font-size: .8rem; color: rgba(255,255,255,.6);
}

/* ==========================================================
   PÁGINA DE PRODUCTO: la imagen llega a la misma altura que el panel de compra
   y el panel queda más compacto y cuidado.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
@media (min-width: 1024px) {
  html body .sa-pp-row {
    display: grid !important;
    grid-template-columns: 62fr 38fr;
    gap: 2rem;
    align-items: stretch !important;
  }
  html body .sa-pp-row > div { width: auto !important; min-width: 0; }
  html body .sa-pp-row > div:first-child { display: flex; flex-direction: column; }
  html body .sa-pp-media { flex: 1 1 auto; display: flex; min-height: 0; }
  html body .sa-pp-media > * { flex: 1 1 auto; min-width: 0; }
  html body .sa-pp-media .splide,
  html body .sa-pp-media .splide__track,
  html body .sa-pp-media .splide__list,
  html body .sa-pp-media .splide__slide,
  html body .sa-pp-media img {
    height: 100% !important;
    aspect-ratio: auto !important;
  }
  html body .sa-pp-media img { object-fit: cover !important; width: 100% !important; }
}

/* Panel de compra */
html body .sa-pp-buybox {
  padding: 1.1rem 1.3rem !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: linear-gradient(145deg, rgba(18, 18, 24, 0.92), rgba(11, 15, 30, 0.96) 55%, rgba(26, 18, 52, 0.92)) !important;
}
.sa-pp-buybox .sa-page-product-price { font-size: 2.1rem !important; letter-spacing: -0.02em; }
.sa-pp-buybox .sa-product-form .mb-4.pb-4 { margin-bottom: 0.9rem !important; padding-bottom: 0.9rem !important; }

/* Variantes: más compactas, la elegida con borde cian y brillo suave */
.sa-pp-buybox .sa-product-form button[class*="justify-between"] {
  padding: 0.6rem 1rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}
.sa-pp-buybox .sa-product-form button[class*="justify-between"]:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.28) !important; }
.sa-pp-buybox .sa-product-form button[class*="justify-between"].border-accent-500 {
  border-color: #8b5cf6 !important;
  background: rgba(139, 92, 246, 0.07) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.10) !important;
}
.sa-pp-buybox .sa-product-form button[class*="justify-between"] .font-medium { font-family: var(--ff-heading); }

/* Panel más ajustado para que coincida con la altura de la imagen sin recortarla */
.sa-pp-buybox .sa-product-form .mb-4.pb-4 { margin-bottom: 0.75rem !important; padding-bottom: 0.75rem !important; }
.sa-pp-buybox .sa-product-form button[class*="justify-between"] { padding: 0.5rem 0.9rem !important; }
.sa-pp-buybox .sa-product-form .space-y-2 > * + *,
.sa-pp-buybox .sa-product-form .gap-2 { gap: 0.45rem; }

/* ==========================================================
   ARREGLOS (productos con variantes)
   1) Ventana "Elige tu plan": la regla global de "button:not([class*=primary])"
      (sección "Botón Discord/Secundario") les quitaba fondo, borde y color a
      TODOS los botones del modal. Aquí se les devuelve el estilo.
   2) Página de producto: la imagen ya no se estira con la altura del panel de
      compra, así que se ve igual con o sin variantes.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */

/* --- 1) Modal "Elige tu plan" --- */
html body .sa-vm-panel .sa-vm-left .sa-vm-add {
  background: rgba(99, 102, 241, 0.10) !important; color: #c7d2fe !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html body .sa-vm-panel .sa-vm-left .sa-vm-add:hover:not(:disabled) {
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4) !important;
  filter: brightness(1.08);
}
html body .sa-vm-panel .sa-vm-left .sa-vm-add:disabled { opacity: .45 !important; cursor: not-allowed; }

html body .sa-vm-panel .sa-vm-list .sa-vm-opt {
  color: #ffffff !important;
  font-weight: inherit !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
}
html body .sa-vm-panel .sa-vm-list .sa-vm-opt:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}
html body .sa-vm-panel .sa-vm-list .sa-vm-opt.is-on {
  background: rgba(139, 92, 246, 0.07) !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.10) !important;
}
html body .sa-vm-panel .sa-vm-list .sa-vm-opt .sa-vm-opt-name { font-weight: 600; }

html body .sa-vm-panel .sa-vm-head .sa-vm-close {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-radius: 50% !important;
}
html body .sa-vm-panel .sa-vm-head .sa-vm-close:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* --- 2) Imagen de la página de producto: misma proporción con o sin variantes --- */
@media (min-width: 1024px) {
  html body .sa-pp-row { align-items: start !important; }
  html body .sa-pp-row > div:first-child { display: block; }
  html body .sa-pp-media { display: block; flex: none; }
  html body .sa-pp-media > * { flex: none; }

  /* Una sola imagen */
  html body .sa-pp-media > img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
  }
  /* Galería con carrusel (miniaturas abajo o al lado) */
  html body .sa-pp-media .splide.main { height: auto !important; aspect-ratio: auto !important; }
  html body .sa-pp-media .splide.main .splide__track {
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
  }
  html body .sa-pp-media .splide.main .splide__list,
  html body .sa-pp-media .splide.main .splide__slide {
    height: 100% !important;
    aspect-ratio: auto !important;
  }
  html body .sa-pp-media .splide.main .splide__slide img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }
}

/* ==========================================================
   FIX: Fondo oscuro en contenedor de imagen de tarjeta
   Evita que imágenes con fondo blanco (ej. Discord Nitro Boost)
   rompan la estética oscura de las tarjetas.
   ========================================================== */
.sa-product-card-media {
  background-color: #07090e !important;
}

.sa-product-card-media img.object-product-image,
.sa-product-card-media img.object-group-image,
.sa-product-card-media img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Forzar las variables CSS en caso de que el panel las cambie */
:root {
  --product-image-fit: cover !important;
}


/* ==========================================================
   ESTILO "MARBLE" EN TARJETAS Y CUADROS, CON LOS COLORES DE SIEMPRE
   Forma de las capturas (borde fino, esquinas de 16px, imagen con margen,
   títulos en serif) pero con el fondo azul→violeta y los acentos cian/violeta
   originales de la tienda. Va al final para ganar a las reglas anteriores.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */

:root {
  --mb-radius: 16px;
  --mb-serif: 'Playfair Display', Georgia, serif;
  --mb-card-bg: linear-gradient(145deg, rgba(18, 18, 24, 0.93) 0%, rgba(11, 15, 30, 0.95) 50%, rgba(26, 18, 52, 0.93) 100%);
  --mb-border: rgba(255, 255, 255, 0.10);
  --mb-border-hover: rgba(255, 255, 255, 0.22);
  --mb-violet: rgba(99, 102, 241, 0.16);
  --mb-violet-line: rgba(129, 140, 248, 0.50);
  --mb-violet-icon: #a5b4fc;
}

/* ---------- Tarjetas y paneles ---------- */
html body .rounded-card:not(.shadow-modal),
html body [class*="rounded-card"]:not(.shadow-modal),
html body .shadow-card:not(.shadow-modal),
html body .sa-fb-card,
html body .sa-faq-card,
html body .sa-product-card,
html body .sa-product-card.sa-product-card--flat-divider,
html body a.sa-categories-item.sa-categories-item.sa-categories-item,
html body .sa-categories-item.sa-categories-item.sa-categories-item {
  background: var(--mb-card-bg) !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-radius) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body .rounded-card:not(.shadow-modal):hover,
html body [class*="rounded-card"]:not(.shadow-modal):hover,
html body .shadow-card:not(.shadow-modal):hover,
html body .sa-fb-card:hover,
html body .sa-faq-card:hover,
html body .sa-product-card:hover,
html body a.sa-categories-item.sa-categories-item.sa-categories-item:hover {
  border-color: var(--mb-border-hover) !important;
  transform: translateY(-2px) !important;
}

/* ---------- Producto: imagen con margen y esquinas propias ---------- */
html body .sa-product-card--flat-divider .sa-pc-media {
  margin: 0.6rem 0.6rem 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
html body .sa-product-card--flat-divider .sa-pc-media img { border-radius: 12px !important; }
html body .sa-product-card--flat-divider .sa-product-card-media::after { display: none !important; }

/* Títulos de las tarjetas en serif */
html body .sa-product-card h3.sa-product-card-title.sa-product-card-title,
html body .sa-categories-item h3 {
  font-family: var(--mb-serif) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* ---------- Cuadrito del icono (violeta de la tienda) ---------- */
html body .rounded-card :is(.size-8, .size-9, .size-10, .size-11, .size-12) {
  background: var(--mb-violet) !important;
  border: 1px solid var(--mb-violet-line) !important;
  border-radius: 12px !important;
  color: var(--mb-violet-icon) !important;
}
html body .rounded-card :is(.size-8, .size-9, .size-10, .size-11, .size-12) :is(svg, i) {
  color: var(--mb-violet-icon) !important;
}

/* ---------- Categorías: tarjeta con el mismo fondo y el nuevo icono ---------- */
html body a.sa-cat-tile.sa-cat-tile {
  background: var(--mb-card-bg) !important;
  border: 1px solid var(--mb-border) !important;
  box-shadow: none !important;
}
html body a.sa-cat-tile.sa-cat-tile:hover {
  border-color: var(--mb-border-hover) !important;
  transform: translateY(-2px) !important;
}
html body .sa-cat-tile .sa-cat-icon {
  width: 2.75rem !important;
  height: 2.75rem !important;
  background: var(--mb-violet) !important;
  border: 1px solid var(--mb-violet-line) !important;
  border-radius: 12px !important;
  color: var(--mb-violet-icon) !important;
  box-shadow: 0 0 14px -4px rgba(99, 102, 241, 0.55), inset 0 0 10px rgba(99, 102, 241, 0.18) !important;
}
html body .sa-cat-tile .sa-cat-icon svg {
  width: 1.3rem !important;
  height: 1.3rem !important;
  stroke-width: 1.8 !important;
}
html body .sa-cat-tile .sa-cat-icon svg,
html body .sa-cat-tile .sa-cat-icon svg * { stroke: var(--mb-violet-icon) !important; }
html body .sa-cat-tile > span.min-w-0 > span:first-child {
  font-family: var(--mb-serif) !important;
  font-weight: 600 !important;
}


/* ==========================================================
   PANEL DE CLIENTE MÁS BONITO (dashboard)
   Cabecera con avatar, tarjetas de estadísticas con icono en degradado
   y tarjeta de último pedido. Colores teal + índigo de la tienda.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
.sa-dash-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  background:
    radial-gradient(circle 220px at 0% 0%, rgba(139, 92, 246, 0.14), transparent 70%),
    radial-gradient(circle 260px at 100% 100%, rgba(99, 102, 241, 0.18), transparent 70%),
    linear-gradient(145deg, rgba(18, 18, 24, 0.93), rgba(11, 15, 30, 0.95) 55%, rgba(26, 18, 52, 0.93));
}
.sa-dash-hero-user { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.sa-dash-avatar {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: 16px;
  font-size: 1.35rem; font-weight: 700; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #6366f1);
  box-shadow: 0 8px 22px -8px rgba(139, 92, 246, 0.55);
}
.sa-dash-hero-title { font-family: var(--ff-heading); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.sa-dash-hero-sub { margin-top: 0.15rem; font-size: 0.85rem; color: #8b93a7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-dash-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sa-dash-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 700;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.sa-dash-btn:hover { transform: translateY(-2px); }
.sa-dash-btn--primary { color: #c7d2fe; background: rgba(99, 102, 241, 0.10); border: 1px solid rgba(129, 140, 248, 0.45); box-shadow: none; }
.sa-dash-btn--ghost { color: #c7d2fe; border: 1px solid rgba(129, 140, 248, 0.45); background: rgba(99, 102, 241, 0.10); }
.sa-dash-btn--ghost:hover { border-color: rgba(129, 140, 248, 0.8); }

/* Tarjetas de estadísticas */
.sa-page-customer-dashboard-item { position: relative; overflow: hidden; padding: 1.15rem 1.25rem !important; }
.sa-page-customer-dashboard-item::after {
  content: ""; position: absolute; right: -2.5rem; top: -2.5rem;
  width: 7rem; height: 7rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(99, 102, 241, 0.22), transparent);
  pointer-events: none;
}
html body .sa-page-customer-dashboard-item > span.size-9,
html body .sa-page-customer-dashboard-item .flex > span.size-9 {
  width: 2.5rem !important; height: 2.5rem !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(99, 102, 241, 0.28)) !important;
  border: 1px solid rgba(129, 140, 248, 0.40) !important;
  box-shadow: 0 0 14px -4px rgba(99, 102, 241, 0.55);
}
.sa-page-customer-dashboard-item > p.text-2xl,
.sa-page-customer-dashboard-item p.text-2xl {
  font-family: var(--ff-heading);
  font-size: 1.7rem; font-weight: 700; letter-spacing: -0.01em;
}

/* Último pedido */
.sa-page-customer-dashboard .rounded-card.mt-grid-gap { margin-top: 1.25rem; overflow: hidden; }
.sa-page-customer-dashboard .rounded-card.mt-grid-gap > div:first-child { background: rgba(255, 255, 255, 0.02); }


/* ==========================================================
   SOPORTE: apartado propio dentro del panel de cliente (menú lateral)
   Se abre desde "Soporte" en el menú y lleva al ticket de Discord.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
.sa-support-h1 { font-family: var(--ff-heading); font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.sa-support-sub { margin-top: 0.25rem; font-size: 0.9rem; color: #8b93a7; }

.sa-support-card {
  max-width: 44rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  background:
    radial-gradient(circle 240px at 100% 100%, rgba(99, 102, 241, 0.16), transparent 70%),
    linear-gradient(145deg, rgba(18, 18, 24, 0.93), rgba(11, 15, 30, 0.95) 55%, rgba(26, 18, 52, 0.93));
}
.sa-support-card-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.sa-support-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 14px; color: #a5b4fc;
  background: rgba(99, 102, 241, 0.16);
  border: 1px solid rgba(129, 140, 248, 0.5);
  box-shadow: 0 0 16px -4px rgba(99, 102, 241, 0.6);
}
.sa-support-card-title { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.sa-support-card-sub { margin-top: 0.1rem; font-size: 0.8rem; color: #8b93a7; }

.sa-support-note {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.85rem 1rem; margin-bottom: 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(139, 92, 246, 0.32);
  background: rgba(139, 92, 246, 0.07);
  color: #ffffff; font-size: 0.85rem; line-height: 1.5;
}
.sa-support-note svg { margin-top: 0.15rem; color: #8b5cf6; }

.sa-support-steps { margin: 0 0 1.4rem; padding: 0; list-style: none; display: grid; gap: 0.85rem; }
.sa-support-steps li { display: flex; align-items: flex-start; gap: 0.8rem; }
.sa-support-steps li > span {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; color: #FFFFFF;
  background: linear-gradient(135deg, #8b5cf6, #818cf8);
}
.sa-support-steps strong { display: block; font-size: 0.9rem; font-weight: 600; }
.sa-support-steps small { display: block; margin-top: 0.1rem; font-size: 0.8rem; color: #8b93a7; }

.sa-support-label { margin-bottom: 0.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: #8b93a7; }
.sa-support-email {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1rem; margin-bottom: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #c4cbd9; font-size: 0.88rem;
}
.sa-support-cta { padding: 0.75rem 1.4rem; }

/* Menú lateral: "Soporte" se ve activo cuando estás en ese apartado */
html[data-cust-view="soporte"] a.sa-customer-sidebar-link[aria-current="page"] {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #8b93a7 !important;
}
html[data-cust-view="soporte"] a.sa-customer-sidebar-link[href*="#soporte"] {
  background: rgba(139, 92, 246, 0.10) !important;
  border: 1px solid rgba(139, 92, 246, 0.40) !important;
  border-color: rgba(139, 92, 246, 0.40) !important;
  color: #8b5cf6 !important;
}


/* ==========================================================
   ICONOS UNIFICADOS: mismo cuadrito para todos (como el de la cartera)
   Fondo violeta suave, borde fino, icono lavanda y SIN resplandor alrededor.
   Afecta a: soporte, categorías, estadísticas del panel e iconos de tarjetas.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
html body .sa-support-icon,
html body .sa-cat-tile .sa-cat-icon,
html body .sa-page-customer-dashboard-item > span.size-9,
html body .sa-page-customer-dashboard-item .flex > span.size-9,
html body .rounded-card :is(.size-8, .size-9, .size-10, .size-11, .size-12) {
  background: rgba(99, 102, 241, 0.16) !important;
  background-image: none !important;
  border: 1px solid rgba(129, 140, 248, 0.50) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #a5b4fc !important;
}
html body .sa-support-icon svg,
html body .sa-cat-tile .sa-cat-icon svg,
html body .sa-cat-tile .sa-cat-icon svg *,
html body .sa-page-customer-dashboard-item span.size-9 svg {
  color: #a5b4fc !important;
  stroke: #a5b4fc !important;
}


/* ==========================================================
   ICONOS DE TODA LA WEB: un solo estilo (el de la cartera)
   Cualquier cuadrito con icono o inicial (menú de la cuenta, avatar "N",
   categorías, características, pasos, estadísticas, soporte...) queda igual:
   fondo violeta suave, borde fino, icono lavanda, sin resplandor.
   Va al final y con prioridad alta para ganar a las reglas viejas teal.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
html body :is(span, div, a)[class*="bg-accent-500/10"][class*="text-accent-500"]:is([class*="size-8"], [class*="size-9"], [class*="size-10"], [class*="size-11"], [class*="size-12"], [class*="size-14"], [class*="size-20"]):not(#x),
html body :is(.rounded-card, .shadow-card) :is(.size-8, .size-9, .size-10, .size-11, .size-12).rounded-full:not(#x),
html body :is(.rounded-card, .shadow-card) :is(.size-8, .size-9, .size-10, .size-11, .size-12):not(#x),
html body .sa-page-customer-dashboard-item span.size-9:not(#x),
html body .sa-cat-tile .sa-cat-icon:not(#x),
html body .sa-support-icon:not(#x),
html body .sa-dash-avatar:not(#x) {
  background: rgba(99, 102, 241, 0.16) !important;
  background-image: none !important;
  border: 1px solid rgba(129, 140, 248, 0.50) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #a5b4fc !important;
}
html body :is(span, div, a)[class*="bg-accent-500/10"][class*="text-accent-500"]:is([class*="size-14"], [class*="size-20"]):not(#x) {
  border-radius: 14px !important;
}
html body :is(.rounded-card, .shadow-card) :is(.size-8, .size-9, .size-10, .size-11, .size-12):not(#x) :is(svg, i, path),
html body .sa-cat-tile .sa-cat-icon:not(#x) :is(svg, path),
html body .sa-support-icon:not(#x) :is(svg, path) {
  color: #a5b4fc !important;
  stroke: currentColor;
}


/* ==========================================================
   PEDIDOS MÁS BONITOS (lista de pedidos y último pedido del panel)
   Cada pedido es su propia tarjeta con icono, código en chip,
   estado con punto de color y botones en píldora. Sin línea lateral.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
/* Lista: de un bloque con rayas a tarjetas separadas */
html body .sa-page-customer-invoices-items {
  display: grid;
  gap: 0.9rem;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html body .sa-page-customer-invoices-items > * { border: none !important; }
html body .sa-page-customer-invoices-item {
  padding: 1.1rem 1.25rem !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle 160px at 100% 0%, rgba(99, 102, 241, 0.14), transparent 70%),
    linear-gradient(145deg, rgba(18, 18, 24, 0.93), rgba(11, 15, 30, 0.95) 55%, rgba(26, 18, 52, 0.93)) !important;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
html body .sa-page-customer-invoices-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22) !important;
}
html body .sa-page-customer-invoices-title {
  font-family: var(--ff-heading);
  font-size: 1.02rem;
  font-weight: 700;
}

/* Código del pedido como chip */
html body .sa-page-customer-invoices-item p.text-xs > a:first-child {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  margin-right: 0.15rem;
  border-radius: 999px;
  border: 1px solid rgba(129, 140, 248, 0.40);
  background: rgba(99, 102, 241, 0.12);
  color: #a5b4fc !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
}

/* Estado con punto de color */
html body .sa-page-customer-invoices-badge {
  gap: 0.4rem;
  padding: 0.3rem 0.8rem !important;
  border-radius: 999px !important;
  font-weight: 600;
}
html body .sa-page-customer-invoices-badge::before {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

/* Botones en píldora */
html body .sa-page-customer-invoices-actions > :is(a, button) {
  border-radius: 999px !important;
  padding: 0.4rem 0.95rem !important;
  font-weight: 600;
}
html body .sa-page-customer-invoices-actions > a:first-child {
  color: #c7d2fe !important;
  border-color: rgba(129, 140, 248, 0.45) !important;
  background: rgba(99, 102, 241, 0.10) !important;
}

/* Último pedido del panel */
.sa-page-customer-dashboard .rounded-card.mt-grid-gap > div:last-child { border-left: none !important; padding: 1.1rem 1.25rem !important; }
.sa-page-customer-dashboard .rounded-card.mt-grid-gap > div:last-child p.font-medium {
  font-family: var(--ff-heading);
  font-size: 1.02rem;
  font-weight: 700;
}
.sa-page-customer-dashboard .rounded-card.mt-grid-gap a[href*="http"].inline-flex {
  border-radius: 999px !important;
  padding: 0.4rem 0.95rem !important;
  font-weight: 600;
}


/* ==========================================================
   PEDIDOS: quita el marco que rodeaba toda la lista
   Una regla general de tarjetas (más fuerte) volvía a pintar borde y fondo
   en el contenedor, y se veían dos líneas verticales a los lados.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
html body .sa-page-customer-invoices-items.sa-page-customer-invoices-items:not(.shadow-modal):not(#x),
html body .sa-page-customer-invoices-items.rounded-card:not(.shadow-modal):hover {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
html body .sa-page-customer-invoices-items > .sa-page-customer-invoices-item { margin: 0 !important; }

/* Categorías (tiles): texto más pequeño para que quepan nombres largos como "Tools and others" */
.sa-categories .sa-cat-tile .font-semibold {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* FAQ: la tarjeta de "¿Aún tienes dudas?" anidada no debe tener fondo, borde ni elevación propios (evita el doble fondo al pasar el ratón) */
html body .sa-faq-card .sa-faq-support-card,
html body .sa-faq-card .sa-faq-support-card:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ===== PAGINACIÓN (productos y listados) ===== */
.sa-pg {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 2rem;
}
.sa-pg-info { margin: 0; font-size: 0.875rem; color: rgb(var(--cl-t-muted)); }
.sa-pg-info strong { font-weight: 600; color: rgb(var(--cl-t-primary)); }

.sa-pg-group {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-input, 12px);
  background: rgba(var(--cl-surface), 0.6);
  box-shadow: var(--shadow-card);
}
.sa-pg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.4rem; padding: 0 0.7rem;
  border-radius: 9px;
  font-size: 0.9rem; font-weight: 600; line-height: 1;
  color: rgb(var(--cl-t-primary));
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  font-variant-numeric: tabular-nums;
}
.sa-pg-btn svg { width: 1rem; height: 1rem; }
a.sa-pg-btn:hover {
  background: rgba(var(--cl-accent), 0.12);
  border-color: rgba(var(--cl-accent), 0.35);
  color: rgb(var(--cl-accent));
}
.sa-pg-btn.is-active {
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.10); border-color: rgba(129, 140, 248, 0.45);
  box-shadow: none;
  cursor: default;
}
.sa-pg-btn.is-disabled { color: rgb(var(--cl-t-muted)); opacity: .35; cursor: default; }
.sa-pg-nav { min-width: 2.4rem; padding: 0; }

@media (max-width: 639px) {
  .sa-pg { flex-direction: column; align-items: stretch; text-align: center; }
  .sa-pg-group { justify-content: center; }
}

/* ===== ÚLTIMO AJUSTE: mismo estilo que "Recargar" en todos los botones principales ===== */
html body .bg-accent-500[class*="rounded-btn"],
html body a.bg-accent-500,
html body button.bg-accent-500,
html body .sa-btn--primary,
html body .sa-add-to-cart,
html body .sa-dash-btn--primary,
html body .sa-vm-add,
html body .sa-faq-support-card-link,
html body .sa-hero-actions a.sa-btn--primary {
  background: rgba(99, 102, 241, 0.10) !important;
  background-image: none !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
  border-radius: 999px !important;
  color: #c7d2fe !important;
  box-shadow: none !important;
}
html body .bg-accent-500[class*="rounded-btn"]:hover,
html body .sa-btn--primary:hover,
html body .sa-add-to-cart:hover,
html body .sa-faq-support-card-link:hover {
  background: rgba(99, 102, 241, 0.18) !important;
  border-color: rgba(129, 140, 248, 0.7) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Barra superior: botón Discord con el mismo estilo que el resto */
html body header a[href*="discord"],
html body nav a[href*="discord"],
html body .sa-navbar a[href*="discord"],
html body .sa-navbar button[class*="discord"] {
  background: rgba(99, 102, 241, 0.10) !important;
  background-image: none !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
  border-radius: 999px !important;
  color: #c7d2fe !important;
  box-shadow: none !important;
}
html body header a[href*="discord"]:hover,
html body nav a[href*="discord"]:hover,
html body .sa-navbar a[href*="discord"]:hover {
  background: rgba(99, 102, 241, 0.18) !important;
  border-color: rgba(129, 140, 248, 0.7) !important;
  color: #ffffff !important;
}

/* Borde de respaldo con outline (otras reglas no lo sobrescriben) para los botones principales */
html body [class*="bg-accent-500"][class*="rounded-btn"],
html body [class*="sa-btn--primary"],
html body [class*="sa-faq-support-card-link"],
html body [class*="sa-dash-btn--primary"],
html body [class*="sa-add-to-cart"],
html body [class*="sa-vm-add"],
html body button[class*="bg-accent"],
html body a[class*="bg-accent-500"] {
  outline: 1px solid rgba(129, 140, 248, 0.45) !important;
  outline-offset: -1px !important;
}

/* Barra superior: Discord con el mismo fondo y borde que "Explorar productos", texto blanco */
html body header a[href*="discord"],
html body nav a[href*="discord"],
html body .sa-navbar a[href*="discord"] {
  background: rgba(99, 102, 241, 0.10) !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
  color: #ffffff !important;
}

/* Barra superior: Discord igual que el resto de enlaces de la barra (sin fondo ni borde) */
html body header a[href*="discord"],
html body nav a[href*="discord"],
html body .sa-navbar a[href*="discord"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: #8a94a6 !important;
}
html body header a[href*="discord"]:hover,
html body nav a[href*="discord"]:hover,
html body .sa-navbar a[href*="discord"]:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Carrito: "Eliminar" y "Vaciar carrito" son enlaces de texto, sin píldora ni borde */
html body button[class*="hover:text-error"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.25rem 0 !important;
  min-width: 0 !important;
  color: #8a94a6 !important;
  font-weight: 500 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body button[class*="hover:text-error"]:hover {
  color: #f87171 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Refuerzo (más específico que la regla general de botones grises): Eliminar y Vaciar carrito como texto */
html body div button[class*="hover:text-error"][class*="text-t-muted"][type="button"],
html body button[class*="hover:text-error"][class*="text-t-muted"][type="button"]:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.25rem 0 !important;
  min-width: 0 !important;
  width: auto !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body div button[class*="hover:text-error"][class*="text-t-muted"][type="button"] {
  color: #8a94a6 !important;
  font-weight: 500 !important;
}
html body div button[class*="hover:text-error"][class*="text-t-muted"][type="button"]:hover {
  color: #f87171 !important;
}

/* Pie: botón de Discord sin fondo ni borde */
html body footer a[href*="discord"].sa-footer-discord {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #8a94a6 !important;
}
html body footer a[href*="discord"].sa-footer-discord:hover {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
}

/* ===== HERO: collage de productos a la derecha (variante split-media) ===== */
.sa-hero-collage {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 14px; align-items: start;
}
.sa-hc-card {
  display: block; background: none; border: 0; border-radius: 0;
  box-shadow: none; overflow: visible;
  transition: transform .35s ease;
}
.sa-hc-card img {
  display: block; width: 100%; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: center;
  border-radius: 16px; background: none; border: 0;
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.75), 0 0 36px -14px rgba(139, 92, 246, 0.35);
}
.sa-hc-card:nth-child(2) { margin-top: 36px; }
.sa-hc-card:nth-child(3) { margin-top: 12px; }
.sa-hc-card:nth-child(5) { margin-top: 28px; }
.sa-hc-card:nth-child(6) { margin-top: 10px; }
.sa-hc-card:hover { transform: translateY(-6px); }
@media (max-width: 1023px) {
  .sa-hc-card:nth-child(n) { margin-top: 0; }
  .sa-hc-card:nth-child(2n) { margin-top: 24px; }
}

/* Tablas con desplazamiento horizontal (p. ej. Saldo > Historial): sin barra ni flechas, se desplaza con el dedo o el trackpad */
html body .overflow-x-auto {
  scrollbar-width: none !important;
}
html body .overflow-x-auto::-webkit-scrollbar,
html body .overflow-x-auto::-webkit-scrollbar-button,
html body .overflow-x-auto::-webkit-scrollbar-track,
html body .overflow-x-auto::-webkit-scrollbar-thumb {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Tablas del historial: que quepan en el panel. El texto largo (ID, factura) se corta con "…" y el importe se ve entero */
html body .overflow-x-auto > table {
  width: 100%;
  font-size: 0.78rem;
}
html body .overflow-x-auto > table th,
html body .overflow-x-auto > table td {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
html body .overflow-x-auto > table td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body .overflow-x-auto > table td:last-child,
html body .overflow-x-auto > table th:last-child {
  max-width: none;
  white-space: nowrap;
  text-align: right;
}

/* Columna ID de las tablas: letra más pequeña para que se vea más del identificador */
html body .overflow-x-auto > table td:first-child,
html body .overflow-x-auto > table th:first-child {
  font-size: 0.66rem !important;
  letter-spacing: -0.01em;
  padding-right: 0.25rem !important;
}

/* Tablas con scroll: se ven enteras alejando la vista (zoom 80%), sin cortar texto y sin barra */
html body .overflow-x-auto > table {
  zoom: 0.8;
  width: 100% !important;
}
html body .overflow-x-auto > table td {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
html body .overflow-x-auto > table td:first-child,
html body .overflow-x-auto > table th:first-child {
  font-size: inherit !important;
}

/* Menú lateral: el enlace activo de Soporte lleva borde como el resto */
html body a.sa-customer-sidebar-link[href*="#soporte"][class*="bg-accent-500"] {
  border: 1px solid rgba(139, 92, 246, 0.40) !important;
}

/* ===== SALDO: tarjetas con tono cálido (naranja) ===== */
html body .sa-page-customer-balance-price {
  color: #fff7ed !important;
}

/* ===== Paleta cálida (naranja) en toda la web ===== */
/* Pedidos y Reseller conservan el violeta en los elementos que dependen del color de acento */
.sa-keep-violet {
  --cl-accent: 139, 92, 246;
}
.sa-keep-violet .text-accent-500,
.sa-keep-violet .bg-accent-500 {
  color: rgb(139, 92, 246);
}

/* Saldo: tarjetas sin el borde y brillo morados (solo borde normal del tema) */

/* Saldo: tarjeta de saldo disponible en tono cálido (naranja) */

/* Saldo: el botón "Recargar indicando un importe" es toda la tarjeta, sin píldora ni fondo propio */
html body .sa-page-customer-balance button.sa-bal-link {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: rgb(var(--cl-t-primary)) !important;
  font-weight: 400 !important;
}

/* Saldo: la tarjeta de recarga usa la misma paleta cálida que la de saldo */

/* Saldo: la tarjeta de recarga vuelve a la paleta normal del tema (violeta) */

/* Saldo: la tarjeta de saldo también en violeta, como el resto de tarjetas */

/* Saldo: mismas tarjetas que el menú lateral y el resto de la cuenta (fondo violeta translúcido) */

/* Saldo: tarjetas con el mismo fondo que el menú lateral (regla final) */
html body .sa-page-customer-balance .grid > .rounded-card,
html body .sa-page-customer-balance .grid > .rounded-card:first-child,
html body .sa-page-customer-balance .grid > .rounded-card:not(:first-child) {
  background: var(--mb-card-bg) !important;
  border: 1px solid var(--mb-border) !important;
  box-shadow: none !important;
}

/* Filtros de reseñas: sin fondo ni pastilla (la regla general de botones los pisaba) */
.sa-fb-tabs .sa-fb-tab.sa-fb-tab {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.8rem 0 !important;
  color: #8a94a6 !important;
}
.sa-fb-tabs .sa-fb-tab.sa-fb-tab:hover { color: #fff !important; }
.sa-fb-tabs .sa-fb-tab.sa-fb-tab.is-active { color: #fff !important; }
.sa-fb-tabs .sa-fb-tab.sa-fb-tab b { color: #64748b !important; }
.sa-fb-tabs .sa-fb-tab.sa-fb-tab.is-active b { color: #8b5cf6 !important; }

/* Filtros de reseñas: quitar cualquier aro, pastilla o adorno que quede (incluido el último botón, 1★) */
.sa-fb-tabs .sa-fb-tab.sa-fb-tab,
.sa-fb-tabs .sa-fb-tab.sa-fb-tab:last-child,
.sa-fb-tabs .sa-fb-tab.sa-fb-tab:last-of-type {
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
}
.sa-fb-tabs .sa-fb-tab.sa-fb-tab::before,
.sa-fb-tabs .sa-fb-tab.sa-fb-tab::after,
.sa-fb-tabs .sa-fb-tab.sa-fb-tab:last-child::before,
.sa-fb-tabs .sa-fb-tab.sa-fb-tab:last-child::after {
  content: none !important;
  display: none !important;
}

/* Filtros de reseñas en hover/foco: sin borde, fondo ni adornos (la regla de hover de botones los pisaba) */
.sa-fb-tabs .sa-fb-tab.sa-fb-tab.sa-fb-tab:hover,
.sa-fb-tabs .sa-fb-tab.sa-fb-tab.sa-fb-tab:focus,
.sa-fb-tabs .sa-fb-tab.sa-fb-tab.sa-fb-tab:focus-visible,
.sa-fb-tabs .sa-fb-tab.sa-fb-tab.sa-fb-tab:active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
}
.sa-fb-tabs .sa-fb-tab.sa-fb-tab.sa-fb-tab:hover::before,
.sa-fb-tabs .sa-fb-tab.sa-fb-tab.sa-fb-tab:hover::after {
  content: none !important;
  display: none !important;
}

/* ===== Sección "Por qué Nexus Store": cian → violeta de la tienda ===== */
.nx-bn .nx-bn-eyebrow { color: #8b5cf6; }
.nx-bn .nx-bn-title span,
.nx-bn .nx-bn-num {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nx-bn .nx-bn-dot { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.nx-bn .nx-bn-line { background: linear-gradient(90deg, #8b5cf6, #6366f1); }

/* ===== FLUIDEZ: halos de luz del fondo sin desenfoque en tiempo real =====
   Antes: radial-gradient + filter: blur(90/120px) animado (recalculo en cada fotograma).
   Ahora: el mismo halo con más paradas de color, así el borde se funde sin filtro. */
html body .hero-bg-glow {
  filter: none;
  background: radial-gradient(circle,
    rgba(var(--cl-accent), .28) 0%,
    rgba(var(--cl-accent), .17) 28%,
    rgba(var(--cl-accent), .07) 48%,
    transparent 68%);
}
html body .pfx-glows-corners:after,
html body .pfx-glows:before,
html body .pfx-glows-ambient:before {
  filter: none;
  background: radial-gradient(circle,
    rgba(var(--cl-accent), calc(var(--pfx-glow-a, .1))) 0%,
    rgba(var(--cl-accent), calc(var(--pfx-glow-a, .1) * .6)) 28%,
    rgba(var(--cl-accent), calc(var(--pfx-glow-a, .1) * .22)) 48%,
    transparent 68%);
}

/* ===== FAQ de la ficha de producto: círculos cian → violeta de la tienda ===== */
html body .sa-page-product-faq .sa-pp-faq-badge {
  background: rgba(139, 92, 246, .10);
  border: 1px solid rgba(139, 92, 246, .28);
}

/* ==========================================================
   FIX MÓVIL: evitar scroll lateral y zoom por desbordamiento
   html y body deben cortar el eje X (en iOS/Safari no basta con body).
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
html {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  max-width: 100%;
}

/* ==========================================================
   MENÚ LATERAL (móvil y tablet): panel que entra desde la derecha
   ========================================================== */
.nx-drawer-backdrop,
.nx-drawer {
  position: fixed;
  z-index: 60;
}
.nx-drawer-backdrop {
  inset: 0;
  background: rgba(3, 4, 8, 0.62);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nx-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.nx-drawer {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 380px);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(120% 45% at 100% 0%, rgba(139, 92, 246, 0.22), transparent 70%),
    rgba(var(--cl-background), 1);
  border-left: 1px solid rgba(139, 92, 246, 0.25);
  box-shadow: -30px 0 70px rgba(0, 0, 0, 0.45);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.24, 1), visibility 0s linear 0.38s;
}
.nx-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.24, 1), visibility 0s;
}
@media (min-width: 1024px) {
  .nx-drawer,
  .nx-drawer-backdrop {
    display: none;
  }
}

.nx-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nx-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px !important;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.08);
  color: rgb(var(--cl-t-primary));
  flex-shrink: 0;
}

/* Buscador del menú */
.nx-drawer-search {
  position: relative;
  margin: 1rem 1.25rem 0.5rem;
}
.nx-drawer-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(var(--cl-t-muted));
  pointer-events: none;
}
.nx-search-input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 1rem 0 2.75rem;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgb(var(--cl-t-primary));
  font-size: 16px; /* evita el zoom automático en iPhone */
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nx-search-input::placeholder {
  color: rgb(var(--cl-t-muted));
}
.nx-search-input:focus {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

/* Enlaces del menú: filas grandes con flecha */
.nx-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.75rem;
}
.nx-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  font-family: var(--ff-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: rgb(var(--cl-t-primary));
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nx-drawer-link svg {
  color: rgb(var(--cl-t-muted));
  transition: transform 0.2s ease, color 0.2s ease;
}
.nx-drawer-link:hover,
.nx-drawer-link:focus-visible {
  background: rgba(139, 92, 246, 0.1);
  color: #a78bfa;
  outline: none;
}
.nx-drawer-link:hover svg {
  transform: translateX(3px);
  color: #a78bfa;
}

/* Pie del menú: cuenta, idioma y moneda */
.nx-drawer-foot {
  margin-top: auto;
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nx-drawer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 1rem;
  border-radius: 999px !important;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(99, 102, 241, 0.12));
  color: rgb(var(--cl-t-primary));
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.nx-drawer-locale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Panel de resultados en vivo (buscador del menú, de la portada y de productos) */
.nx-ls-host {
  position: relative;
}
.nx-ls-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgb(var(--cl-surface-raised));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.nx-ls-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  color: rgb(var(--cl-t-primary));
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.nx-ls-item.is-active,
.nx-ls-item:hover {
  background: rgba(139, 92, 246, 0.14);
}
.nx-ls-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.nx-ls-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nx-ls-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}
.nx-ls-price {
  flex-shrink: 0;
  font-size: 13px;
  color: rgb(var(--cl-t-muted));
  white-space: nowrap;
}
.nx-ls-empty {
  padding: 14px 12px;
  text-align: center;
  font-size: 13px;
  color: rgb(var(--cl-t-muted));
}
.nx-ls-all {
  display: block;
  margin-top: 4px;
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #a78bfa;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
}
.nx-ls-all:hover {
  text-decoration: underline;
}

/* ==========================================================
   CUENTA DE CLIENTE (todas sus páginas): menú arriba en pestañas y una sola columna
   ========================================================== */
.grid:has(> .sa-customer-sidebar) { grid-template-columns: minmax(0, 1fr) !important; }
.sa-customer-sidebar > aside { display: none !important; }
.sa-customer-sidebar > div.lg\:hidden {
  display: flex !important;
  margin: 0 0 1.5rem;
}
.sa-customer-sidebar nav { padding: 0.25rem 0; }

/* Menú de cuenta en móvil/tablet: los tres puntos a la izquierda del todo */
.sa-customer-sidebar > div.lg\:hidden > :not(nav) { order: -1; flex-shrink: 0; }
.sa-customer-sidebar > div.lg\:hidden > nav { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Último pedido del panel: mismo fondo en degradado que las tarjetas de arriba */
html body .sa-page-customer-dashboard .rounded-card.mt-grid-gap {
  background: linear-gradient(145deg, rgba(18, 18, 24, 0.93) 0%, rgba(11, 15, 30, 0.95) 50%, rgba(26, 18, 52, 0.93)) !important;
}
html body .sa-page-customer-dashboard .rounded-card.mt-grid-gap > div:first-child { background: transparent !important; }

/* Saldo: sin el enlace "Recargar" dentro de la tarjeta (el botón de la cabecera se queda) */
html body .sa-page-customer-dashboard-item a[href*="/customer/balance"] { display: none !important; }

/* ==========================================================
   CUADROS EMERGENTES (login con correo, tickets, etc.): fondo sólido
   Igual que las tarjetas pero sin transparencia, para que no se vea
   lo de detrás. El menú de los 3 puntos queda fuera (sin fondo).
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
html body .rounded-card.shadow-modal:not([x-show="menuOpen"]):not(#x) {
  background: linear-gradient(145deg, #12121a 0%, #0b0f1e 50%, #1a1234 100%) !important;
  background-color: #0b0f1e !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ==========================================================
   LOGIN: oculta el aviso de verificación ("Verifying… / Verified")
   La verificación sigue funcionando por detrás, solo no se ve.
   (para quitarlo, borra todo desde aquí hasta el final)
   ========================================================== */
html body .sa-customer-login-modal div:has(> altcha-widget),
html body .sa-customer-login-modal altcha-widget {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}