/* ================================================================
   CARD NOVA CORP — style-patch.css DEFINITIVO
   Dark suave #0F0F1A · Nebulosa espacial · Colores de marca
   Sustituye COMPLETAMENTE el style-patch.css anterior
   ================================================================ */

/* ── 1. VARIABLES DARK ──────────────────────────────────────────── */
:root {
  --bg-base: #0f0f1a;
  --bg-card: #16162a;
  --bg-card-2: #1c1c32;
  --bg-card-hover: #20203a;
  --bg-light: #0f0f1a; /* override para que todo herede dark */

  --text-primary: #f0f0ff;
  --text-secondary: rgba(220, 220, 255, 0.55);

  --accent: #00f0ff;
  --accent-hover: #00c8d4;
  --accent-gold: #ffd000;
  --accent-violet: #9b59b6;
  --danger: #ef4444;

  --border: rgba(255, 255, 255, 0.07);
  --border-accent: rgba(0, 240, 255, 0.25);
  --glow-cyan: 0 0 20px rgba(0, 240, 255, 0.35);
  --glow-gold: 0 0 20px rgba(255, 208, 0, 0.35);
}

/* ── 2. BASE ────────────────────────────────────────────────────── */
body {
  color: var(--text-primary) !important;
  background: var(--bg-base) !important;
}

/* ── 3. FONDO ESPACIAL ANIMADO ──────────────────────────────────── */
.cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-base);
  overflow: hidden;
}

/* Nebulosa base con gradientes */
.cosmic-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 80% 60% at 15% 30%,
      rgba(0, 240, 255, 0.07) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 60% 50% at 85% 20%,
      rgba(155, 89, 182, 0.09) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 70% 60% at 50% 90%,
      rgba(255, 208, 0, 0.05) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 50% 40% at 90% 70%,
      rgba(255, 45, 139, 0.06) 0%,
      transparent 55%
    );
  animation: nebulaShift 25s ease-in-out infinite alternate;
}

@keyframes nebulaShift {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  33% {
    transform: scale(1.08) rotate(1deg);
    opacity: 0.85;
  }
  66% {
    transform: scale(0.96) rotate(-1deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.05) rotate(0.5deg);
    opacity: 0.9;
  }
}

/* Estrellas CSS — patrón de puntos brillantes */
.cosmic-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      1px 1px at 15% 25%,
      rgba(255, 255, 255, 0.6) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 42% 10%,
      rgba(255, 255, 255, 0.4) 0%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 68% 38%,
      rgba(0, 240, 255, 0.7) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 85% 15%,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 28% 60%,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 55% 72%,
      rgba(155, 89, 182, 0.8) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 72% 55%,
      rgba(255, 255, 255, 0.4) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 10% 80%,
      rgba(255, 208, 0, 0.6) 0%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 90% 85%,
      rgba(0, 240, 255, 0.5) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 35% 90%,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 60% 5%,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 78% 92%,
      rgba(255, 255, 255, 0.4) 0%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 5% 50%,
      rgba(0, 240, 255, 0.4) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 95% 40%,
      rgba(155, 89, 182, 0.5) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 48% 48%,
      rgba(255, 255, 255, 0.25) 0%,
      transparent 100%
    );
  background-size: 100% 100%;
  animation: starTwinkle 8s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

/* Orbes de color */
.orb {
  display: block !important;
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}
.orb-violet {
  width: 700px;
  height: 700px;
  background: radial-gradient(
    circle,
    rgba(155, 89, 182, 0.18) 0%,
    transparent 70%
  );
  top: -15%;
  left: -10%;
  animation: orbV 28s ease-in-out infinite alternate;
  opacity: 1 !important;
}
.orb-cyan {
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(0, 240, 255, 0.14) 0%,
    transparent 70%
  );
  bottom: -10%;
  right: -8%;
  animation: orbC 22s ease-in-out infinite alternate;
  opacity: 1 !important;
}
@keyframes orbV {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(80px, 120px) scale(1.15);
  }
}
@keyframes orbC {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-70px, -90px) scale(1.1);
  }
}

/* ── 4. HEADER ──────────────────────────────────────────────────── */
.main-header {
  background: rgba(10, 10, 20, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2) !important;
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(0, 240, 255, 0.1) !important;
}
.main-header .nav-text,
.main-header .search-bar input,
.main-header .search-bar i {
  color: rgba(255, 255, 255, 0.85) !important;
}

.search-bar {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(0, 240, 255, 0.2) !important;
}
.search-bar:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}
.search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

.nav-action-btn {
  background: rgba(0, 240, 255, 0.12) !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  color: var(--accent) !important;
  text-shadow: none !important;
}
.nav-action-btn:hover {
  background: var(--accent) !important;
  color: #000 !important;
  box-shadow: var(--glow-cyan) !important;
}

/* ── 5. NAV LINKS ───────────────────────────────────────────────── */
.main-nav a {
  color: rgba(255, 255, 255, 0.75) !important;
}
.main-nav a:hover,
.main-nav a.active {
  background: rgba(0, 240, 255, 0.12) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 6px;
}

/* ── 6. MEGA-MENÚ ───────────────────────────────────────────────── */
#megamenu-backdrop {
  background: rgba(5, 5, 15, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  top: 105px;
}
.mm-inner {
  background: #080810 !important;
  border: 1px solid rgba(0, 240, 255, 0.12) !important;
  border-top: 2px solid var(--accent) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.85),
    0 0 40px rgba(0, 240, 255, 0.04) !important;
}
.mm-col {
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.mm-link {
  color: rgba(255, 255, 255, 0.5) !important;
}
.mm-link:hover {
  color: #fff !important;
}
.mm-promo {
  background: #060608 !important;
}

/* ── 7. HERO COLLAGE ────────────────────────────────────────────── */
.hero-collage {
  height: 500px;
  margin-top: 0 !important;
}
.hero-collage-slide {
  background: var(--bg-base) !important;
  /* Degradado de marca por slide via CSS var */
  background: linear-gradient(
    135deg,
    var(--grad-from, #0f0f1a) 0%,
    var(--grad-to, #1a1a2e) 100%
  ) !important;
}
.hero-collage-slide::after {
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px
  ) !important;
  background-size: 24px 24px !important;
}

/* Fusión hero→fondo en dark */
.hero-collage::after {
  z-index: 2 !important;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 60%,
    var(--bg-base) 100%
  ) !important;
}
.hc-img-wrap {
  z-index: 8 !important;
}
.hc-orb {
  z-index: 1 !important;
}

/* Texto del hero en dark */
.hc-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  text-shadow:
    0 0 40px rgba(0, 240, 255, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.5) !important;
  filter: none !important;
}
.hc-sub {
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
  background: none !important;
}
.hero-collage .btn-clean-white {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 12px rgba(0,0,0,0.3) !important;
}
.hero-collage .btn-clean-white:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}
.hero-collage .btn-clean-yellow {
  box-shadow: var(--glow-gold) !important;
}

/* Paginación hero dark */
#hero-pag,
.hero-pagination-control {
  background: rgba(15, 15, 26, 0.7) !important;
  border: 1px solid rgba(0, 240, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
}
#hero-pag button,
.hero-pagination-control button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#hero-pag button:hover {
  background: var(--accent) !important;
  color: #000 !important;
}
#hero-pag .hero-pag-counter,
.hero-pag-counter {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ── 8. TÍTULOS DE SECCIÓN ──────────────────────────────────────── */
.section-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.section-title span {
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-gold),
    var(--accent-violet),
    var(--accent)
  ) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: textGradientPulse 4s linear infinite !important;
}

/* ── 9. CATEGORÍAS ──────────────────────────────────────────────── */
.cat-section {
  background: transparent !important;
}
.cat-card {
  border: 1px solid var(--border) !important;
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    border-color 0.3s !important;
}
.cat-card:hover {
  border-color: rgba(0, 240, 255, 0.3) !important;
}

/* ── 10. PRODUCT CARDS ──────────────────────────────────────────── */
.product-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    border-color 0.3s !important;
}
.product-card:hover {
  border-color: rgba(0, 240, 255, 0.3) !important;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 240, 255, 0.12) !important;
  transform: translateY(-6px) !important;
}

/* Textos dentro de las cards */
.card-title {
  color: var(--text-primary) !important;
}
.card-price {
  color: #fff !important;
}
.card-price.discounted {
  color: var(--accent-gold) !important;
}
.card-price-original {
  color: var(--text-secondary) !important;
}
.scarcity-text {
  color: var(--text-secondary) !important;
}
.scarcity-text span {
  color: #ff6b6b !important;
}
.scarcity-bar {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Badges */
.product-badge.hot {
  background: linear-gradient(45deg, #ff0055, #ff5400) !important;
}
.product-badge.new {
  background: linear-gradient(45deg, #00d4ff, #0055ff) !important;
}
.product-badge.rare {
  background: linear-gradient(45deg, #9b59b6, #6c3483) !important;
}
.product-badge.preorder {
  background: linear-gradient(45deg, #7ec8e3, #1a6fa8) !important;
  color: #fff !important;
}

/* Botón preventa */
.btn-preorder {
  width: 100% !important;
  padding: 0.6rem 1rem !important;
  background: linear-gradient(135deg, #0d2a3a, #1a4a6b) !important;
  border: 1px solid rgba(126, 200, 227, 0.45) !important;
  color: #7ec8e3 !important;
  font-family: "Outfit", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  transition: background 0.2s, box-shadow 0.2s !important;
}
.btn-preorder:hover {
  background: linear-gradient(135deg, #1a4a6b, #1e6090) !important;
  box-shadow: 0 0 14px rgba(126, 200, 227, 0.3) !important;
}
.preorder-row {
  flex-direction: column !important;
}

/* Botón añadir en dark */
.btn-add-cart {
  background: linear-gradient(135deg, #0a0a1a, #12122a) !important;
  border: 1px solid rgba(0, 240, 255, 0.2) !important;
  color: var(--accent) !important;
  letter-spacing: 2px;
}
.btn-add-cart i {
  color: var(--accent) !important;
}
.btn-add-cart:hover {
  background: linear-gradient(
    135deg,
    rgba(0, 240, 255, 0.15),
    rgba(0, 240, 255, 0.08)
  ) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--glow-cyan) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
.btn-add-cart::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 240, 255, 0.12),
    transparent
  ) !important;
}

/* Carrusel 3D — cards en dark se ven mejor */
.carousel-3d-item .product-card {
  box-shadow:
    0 0 30px rgba(0, 240, 255, 0.08),
    0 10px 40px rgba(0, 0, 0, 0.6) !important;
}
.carousel-3d-item:hover .product-card {
  box-shadow:
    0 0 50px rgba(0, 240, 255, 0.25),
    0 20px 60px rgba(0, 0, 0, 0.7) !important;
}

/* ── 11. CARRUSEL 3D CONTROLES ──────────────────────────────────── */
.carousel-3d-container {
  height: 640px !important;
  overflow: visible !important;
}
.carousel-3d-item {
  height: 500px !important;
  margin-top: -250px !important;
}
.carousel-3d-item .product-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.carousel-3d-item .card-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}
.carousel-3d-item .btn-add-cart {
  margin-top: auto !important;
}

/* ── 12. RESERVADO — imágenes de producto ───────────────────────── */
/* Los productos con fondo blanco se gestionan subiendo PNG sin fondo */

.cylinder-control {
  background: rgba(10, 10, 26, 0.8) !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  color: var(--accent) !important;
  box-shadow: var(--glow-cyan) !important;
}
.cylinder-control:hover {
  background: var(--accent) !important;
  color: #000 !important;
}

/* ── 12. PRODUCT GRID ───────────────────────────────────────────── */
.product-grid-style {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ── 13. OUT OF STOCK ───────────────────────────────────────────── */
.product-card.out-of-stock::after {
  background: rgba(0, 0, 0, 0.55) !important;
  border-radius: 12px;
}

/* ── 14. FOOTER ─────────────────────────────────────────────────── */
.main-footer {
  background: #07071200 !important;
  border-top: 1px solid var(--border) !important;
  position: relative;
}
.main-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.footer-brand h3 {
  color: var(--accent) !important;
}
.footer-brand p,
.footer-links a,
.footer-bottom p {
  color: rgba(255, 255, 255, 0.4) !important;
}
.footer-links h4,
.footer-social h4 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.footer-links a:hover {
  color: #fff !important;
}
.social-icons a {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
.social-icons a:hover {
  background: var(--accent) !important;
  color: #000 !important;
  border-color: var(--accent) !important;
}

/* ── 15. MODAL CONTACTO ─────────────────────────────────────────── */
.modal-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px) !important;
}
.modal-content {
  background: #13132a !important;
  border: 1px solid rgba(0, 240, 255, 0.2) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    var(--glow-cyan) !important;
}
.modal-content h2 {
  color: #fff !important;
}
.form-group label {
  color: rgba(255, 255, 255, 0.5) !important;
}
.form-group input,
.form-group textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent) !important;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}
.btn-submit {
  background: var(--accent) !important;
  color: #000 !important;
  font-weight: 800 !important;
}
.btn-submit:hover {
  background: var(--accent-gold) !important;
}
.close-modal {
  color: rgba(255, 255, 255, 0.4) !important;
}
.close-modal:hover {
  color: #fff !important;
}

/* ── 16. SECTION TRANSITION ─────────────────────────────────────── */
#section-transition {
  background: rgba(7, 7, 18, 0.96) !important;
}

/* ── 17. CATEGORY BANNER (páginas de categoría) ──────────────────── */
.category-banner {
  background-color: var(--bg-base) !important;
  border-bottom: 1px solid var(--border);
}
.category-banner h1 {
  color: #fff !important;
  text-shadow: 0 0 40px rgba(0, 240, 255, 0.3) !important;
}
.category-banner::after {
  background: linear-gradient(to top, var(--bg-base), transparent) !important;
}

/* ── 18. BOTONES HERO LIMPIO ────────────────────────────────────── */
.btn-clean-white {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.btn-clean-white:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ── 19. BG GRAFFITI TAG ────────────────────────────────────────── */
.bg-graffiti-tag {
  -webkit-text-stroke: 2px rgba(0, 240, 255, 0.1) !important;
  color: transparent !important;
}

/* ── 20. LANG FLAGS CARTAS ──────────────────────────────────────── */
.card-language {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ── 21. SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ── 22. CARRUSEL 3D — sin mask que rompe 3D ────────────────────── */
#cylinder-spin,
.carousel-3d-spin {
  transform-style: preserve-3d !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.carousel-3d-item {
  transform-style: preserve-3d !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
section:has(#cylinder-container) {
  overflow: visible !important;
  box-shadow: none !important;
}

/* ── 23. PACK OPENING ───────────────────────────────────────────── */
#pack-opener-3d-overlay {
  background: var(--bg-base);
}

/* ── 24. RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-collage {
    height: 400px;
  }
  .hc-title {
    font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
  }
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
  .btn-clean-white,
  .btn-clean-yellow {
    width: 220px;
    text-align: center;
  }
  .orb {
    filter: blur(70px);
  }
  .cosmic-bg::before {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cosmic-bg::before,
  .cosmic-bg::after,
  .orb {
    animation: none !important;
  }
}

/* ================================================================
   FIX MEGA-MENÚ — estilos de posición y visibilidad que faltaban
   ================================================================ */

/* Li padre necesita position relative para anclar el panel */
.has-megamenu {
  position: static !important;
}

/* Flecha */
.menu-arrow {
  font-size: 0.75rem;
  margin-left: 3px;
  transition: transform 0.25s ease;
  opacity: 0.5;
}
.has-megamenu.open > a .menu-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* Panel: oculto por defecto, fixed bajo el header */
.megamenu {
  position: fixed;
  left: 0;
  right: 0;
  top: 105px;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s;
  pointer-events: none;
}
.megamenu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}

/* Grid interior del panel */
.mm-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 220px;
  gap: 0;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

/* Columnas */
.mm-col {
  padding: 1.8rem 1.6rem;
}

.mm-heading {
  font-family: "Outfit", sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mm-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.38rem 0;
  text-decoration: none;
  border-radius: 4px;
  transition:
    color 0.18s,
    padding-left 0.18s;
}
.mm-link:hover {
  padding-left: 6px;
}
.mm-icon-link i {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.25);
  width: 16px;
  flex-shrink: 0;
}

/* Banderas */
.mm-lang {
  gap: 0.7rem;
}
.mm-flag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  display: inline-block;
}
.mm-flag-es {
  background: linear-gradient(
    to bottom,
    #aa151b 25%,
    #f1bf00 25%,
    #f1bf00 75%,
    #aa151b 75%
  );
}
.mm-flag-en {
  background: none;
  box-shadow: none;
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.mm-flag-en::after {
  content: '🇬🇧';
}
.mm-flag-jp {
  background: #fff;
  position: relative;
}
.mm-flag-jp::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bc002d;
}

/* Columna promo derecha */
.mm-promo {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-align: center;
}
.mm-promo img {
  width: 120px;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
  transition: transform 0.3s;
}
.mm-promo:hover img {
  transform: scale(1.06) rotate(-2deg);
}
.mm-promo-text p {
  font-family: "Outfit", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  margin: 0.3rem 0;
}
.mm-promo-tag {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  background: #00f0ff;
  color: #000;
}
.mm-promo-btn {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
}
.mm-promo-btn:hover {
  opacity: 0.7;
}

/* ── FILTER CHIPS ──────────────────────────────────────────────────── */
.filter-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding: 0 0 16px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 200, 212, 0.12);
  border: 1px solid rgba(0, 200, 212, 0.3);
  border-radius: 20px;
  padding: 4px 10px 4px 12px;
  font-size: 13px;
  color: #e0e0f0;
  gap: 6px;
}
.filter-chip .chip-remove {
  color: #00C8D4;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.filter-chip .chip-remove:hover {
  opacity: 1;
}
.chip-clear {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  color: #606080;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.chip-clear:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #a0a0c0;
}

/* ── SEARCH BAR DROPDOWN ────────────────────────────────────────────── */
.search-container {
  position: relative;
}
.search-bar {
  position: relative;
}
.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #12121f;
  border: 1px solid rgba(0, 200, 212, 0.2);
  border-radius: 12px;
  overflow: hidden;
  z-index: 1000;
  display: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.search-dropdown.open {
  display: block;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e0e0f0;
  text-decoration: none;
  transition: background 0.15s;
}
.search-result-item:last-child {
  border-bottom: none;
}
.search-result-item:hover {
  background: rgba(0, 200, 212, 0.08);
}
.search-result-item img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.search-result-info {
  flex: 1;
  min-width: 0;
}
.search-result-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-price {
  font-size: 12px;
  color: #00C8D4;
  margin-top: 2px;
}
.search-result-cat {
  font-size: 11px;
  color: #606080;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Backdrop */
#megamenu-backdrop {
  position: fixed;
  inset: 0;
  top: 105px;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#megamenu-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

/* Nav item activo con menú abierto */
.has-megamenu.open > a {
  background: rgba(0, 240, 255, 0.15) !important;
  color: var(--accent) !important;
}

/* Ocultar en móvil */
@media (max-width: 900px) {
  .megamenu {
    display: none !important;
  }
  .menu-arrow {
    display: none;
  }
}

/* ── HERO COLLAGE — estilos base que también faltaban ─────────── */
.hero-collage {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 0 !important;
}
.hero-collage-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease-in-out;
  overflow: hidden;
}
.hero-collage-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-collage-slide.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
.hero-collage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.hc-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.hc-orb-left {
  width: 500px;
  height: 500px;
  top: -20%;
  left: -10%;
  background: var(--orb-color);
}
.hc-orb-right {
  width: 400px;
  height: 400px;
  bottom: -20%;
  right: -8%;
  background: var(--orb-color);
}

.hc-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 420px;
  max-width: 90vw;
}
.hc-tag {
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.75rem, 1.8vw, 0.95rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 5px;
  margin-bottom: 0.4rem;
  -webkit-text-fill-color: unset !important;
  background: none !important;
}
.hc-img-wrap {
  position: absolute;
  pointer-events: none;
  animation: hcFloat 6s ease-in-out infinite alternate;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}
.hc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hi-box-main {
  width: 260px;
  top: 8%;
  left: 6%;
  transform: rotate(-8deg);
  animation-name: hcFloatLeft;
  animation-duration: 7s;
}
.hi-pack-1 {
  width: 130px;
  top: 5%;
  left: 24%;
  transform: rotate(10deg);
  animation-name: hcFloatUp;
  animation-duration: 5.5s;
  animation-delay: -1.5s;
}
.hi-pack-2 {
  width: 120px;
  bottom: 8%;
  left: 14%;
  transform: rotate(-14deg);
  animation-name: hcFloatDown;
  animation-duration: 6.5s;
  animation-delay: -3s;
}
.hi-box-side {
  width: 240px;
  top: 10%;
  right: 5%;
  transform: rotate(7deg);
  animation-name: hcFloatRight;
  animation-duration: 8s;
  animation-delay: -2s;
}
.hi-pack-3 {
  width: 115px;
  bottom: 10%;
  right: 18%;
  transform: rotate(15deg);
  animation-name: hcFloatUp;
  animation-duration: 5s;
  animation-delay: -4s;
}

@keyframes hcFloatLeft {
  0% {
    transform: rotate(-8deg) translateY(0);
  }
  100% {
    transform: rotate(-5deg) translateY(-18px);
  }
}
@keyframes hcFloatRight {
  0% {
    transform: rotate(7deg) translateY(0);
  }
  100% {
    transform: rotate(4deg) translateY(-15px);
  }
}
@keyframes hcFloatUp {
  0% {
    transform: rotate(10deg) translateY(0);
  }
  100% {
    transform: rotate(10deg) translateY(-12px);
  }
}
@keyframes hcFloatDown {
  0% {
    transform: rotate(-14deg) translateY(0);
  }
  100% {
    transform: rotate(-11deg) translateY(12px);
  }
}

#hero-pag {
  position: absolute !important;
  bottom: 1.5rem !important;
  right: 2rem !important;
  z-index: 20 !important;
}

/* ── CATEGORÍAS — estilos base ───────────────────────────────── */
.cat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}
.cat-card {
  flex: 0 0 calc(20% - 0.96rem);
  min-width: 150px;
  height: 200px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  background: #111;
}
.cat-card:hover {
  transform: translateY(-6px) scale(1.02);
}
.cat-bg-img {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 55%;
  height: 130%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.22;
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.cat-card:hover .cat-bg-img {
  opacity: 0.35;
  transform: translateY(-50%) scale(1.05) rotate(3deg);
}
.cat-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cat-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s;
  border-radius: 16px;
}
.cat-card:hover .cat-glow {
  opacity: 1;
}
.cat-body {
  position: relative;
  z-index: 3;
  padding: 1.4rem 1.6rem;
  width: 100%;
}
.cat-badge {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  background: #ffd000;
  color: #000;
  margin-bottom: 0.6rem;
}
/* ── RIBBON "PRÓXIMAMENTE" esquina top-right ── */
.cat-badge--soon {
  position: absolute !important;
  top: 22px !important;
  right: -36px !important;
  width: 148px !important;
  background: linear-gradient(135deg, #ff4a00, #b83000) !important;
  color: #fff !important;
  text-align: center !important;
  padding: 6px 0 !important;
  font-family: "Outfit", sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  transform: rotate(45deg) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.55) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: block !important;
}
.cat-icon {
  display: block;
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
  line-height: 1;
}
.cat-body h3 {
  font-family: "Outfit", sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.25rem;
  line-height: 1.1;
}
.cat-body p {
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.cat-pokemon {
  background: linear-gradient(135deg, #1a1400 0%, #2e2200 60%, #3d2e00 100%);
}
.cat-onepiece {
  background: linear-gradient(135deg, #1a0800 0%, #2e1000 60%, #401500 100%);
}
.cat-lol {
  background: linear-gradient(135deg, #100020 0%, #1e0038 60%, #2a0050 100%);
}
.cat-sobres {
  background: linear-gradient(135deg, #1a0010 0%, #2d001e 60%, #3d0028 100%);
}
.cat-accesorios {
  background: linear-gradient(135deg, #001a0e 0%, #002d18 60%, #003d22 100%);
}
/* Flesh and Blood — rojo sangre oscuro, único */
.cat-fab {
  background: linear-gradient(135deg, #1a0000 0%, #350000 60%, #500a00 100%);
}
/* Magic: The Gathering — azul profundo */
.cat-mtg {
  background: linear-gradient(135deg, #001a2e 0%, #002d4a 60%, #003d5c 100%);
}
/* Coming soon — overlay oscuro en vez de opacity para que ribbon sea 100% visible */
.cat-coming-soon {
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.35);
}
.cat-coming-soon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
}
/* ribbon por encima del overlay */
.cat-badge--soon { z-index: 5 !important; }

.cat-pokemon .cat-icon {
  color: #ffd000;
}
.cat-pokemon .cat-glow {
  background: radial-gradient(
    ellipse at 0% 100%,
    rgba(255, 208, 0, 0.22) 0%,
    transparent 65%
  );
  box-shadow: inset 0 0 0 1.5px rgba(255, 208, 0, 0.32);
  border-radius: 16px;
}
.cat-onepiece .cat-icon {
  color: #ff6a00;
}
.cat-onepiece .cat-glow {
  background: radial-gradient(
    ellipse at 0% 100%,
    rgba(255, 106, 0, 0.22) 0%,
    transparent 65%
  );
  box-shadow: inset 0 0 0 1.5px rgba(255, 106, 0, 0.32);
  border-radius: 16px;
}
.cat-lol .cat-icon {
  color: #9b59b6;
}
.cat-lol .cat-glow {
  background: radial-gradient(
    ellipse at 0% 100%,
    rgba(155, 89, 182, 0.25) 0%,
    transparent 65%
  );
  box-shadow: inset 0 0 0 1.5px rgba(155, 89, 182, 0.35);
  border-radius: 16px;
}
.cat-sobres .cat-icon {
  color: #ff2d8b;
}
.cat-sobres .cat-glow {
  background: radial-gradient(
    ellipse at 0% 100%,
    rgba(255, 45, 139, 0.2) 0%,
    transparent 65%
  );
  box-shadow: inset 0 0 0 1.5px rgba(255, 45, 139, 0.3);
  border-radius: 16px;
}
.cat-accesorios.cat-icon {
  color: #00ff88;
}
.cat-accesorios .cat-glow {
  background: radial-gradient(
    ellipse at 0% 100%,
    rgba(0, 255, 136, 0.18) 0%,
    transparent 65%
  );
  box-shadow: inset 0 0 0 1.5px rgba(0, 255, 136, 0.25);
  border-radius: 16px;
}
.cat-pokemon:hover {
  box-shadow: 0 20px 50px rgba(255, 208, 0, 0.22);
}
.cat-onepiece:hover {
  box-shadow: 0 20px 50px rgba(255, 106, 0, 0.22);
}
.cat-lol:hover {
  box-shadow: 0 20px 50px rgba(155, 89, 182, 0.2);
}
.cat-sobres:hover {
  box-shadow: 0 20px 50px rgba(255, 45, 139, 0.2);
}
.cat-accesorios:hover {
  box-shadow: 0 20px 50px rgba(0, 255, 136, 0.18);
}
.cat-onepiece .cat-badge {
  background: #ff4500;
  color: #fff;
}
.cat-fab .cat-icon {
  color: #cc2200;
}
.cat-fab .cat-glow {
  background: radial-gradient(ellipse at 0% 100%, rgba(200,0,0,0.3) 0%, transparent 65%);
  box-shadow: inset 0 0 0 1.5px rgba(200,0,0,0.35);
  border-radius: 16px;
}
.cat-fab:hover {
  box-shadow: 0 20px 50px rgba(200,0,0,0.25);
}
.cat-mtg .cat-icon {
  color: #00f0ff;
}
.cat-mtg .cat-glow {
  background: radial-gradient(ellipse at 0% 100%, rgba(0,240,255,0.2) 0%, transparent 65%);
  box-shadow: inset 0 0 0 1.5px rgba(0,240,255,0.3);
  border-radius: 16px;
}
.cat-mtg:hover {
  box-shadow: 0 20px 50px rgba(0,240,255,0.2);
}

@media (max-width: 1024px) {
  .cat-card {
    flex: 0 0 calc(33.33% - 0.8rem);
    height: 180px;
  }
}
@media (max-width: 600px) {
  .cat-card {
    flex: 0 0 calc(50% - 0.4rem);
    height: 160px;
  }
  .cat-grid {
    gap: 0.8rem;
  }
  .hi-pack-1,
  .hi-pack-2,
  .hi-pack-3 {
    display: none;
  }
  .hi-box-main {
    width: 140px;
    left: 2%;
    top: 15%;
  }
  .hi-box-side {
    width: 130px;
    right: 2%;
    top: 20%;
  }
  .hc-content {
    width: 58vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hc-img-wrap {
    animation: none !important;
  }
}

/* ================================================================
   FIX FONDO UNIFORME + TÍTULOS HERO
   ================================================================ */

/* Todas las secciones: fondo completamente transparente
   para que se vea el cosmic-bg uniforme sin bandas */
section,
#app-root > section,
#app-root > div,
.cat-section,
.carousel-section {
  background: transparent !important;
  box-shadow: none !important;
}

/* El hero collage también transparente — el cosmic-bg es el fondo */
.hero-collage-slide {
  /* Solo el gradiente de acento muy sutil, sin cambiar el fondo base */
  background: transparent !important;
}

/* Orbe del hero slide — más suave para no crear "mancha" */
.hc-orb-left,
.hc-orb-right {
  opacity: 0.5 !important;
  filter: blur(120px) !important;
}

/* La fusión inferior del hero: del transparente al color base */
.hero-collage::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 65%,
    #0f0f1a 100%
  ) !important;
}

/* ── TÍTULOS DEL HERO — grandes, bold, italic ─────────────────── */
.hc-title {
  font-family: "Outfit", sans-serif !important;
  font-size: clamp(3rem, 7vw, 5.5rem) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
  margin-bottom: 0.5rem !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  /* Sombra glow de acento */
  text-shadow:
    0 0 60px rgba(0, 240, 255, 0.18),
    0 4px 24px rgba(0, 0, 0, 0.6) !important;
  filter: none !important;
}

/* Tag superior más visible */
.hc-tag {
  font-size: clamp(0.7rem, 1.5vw, 0.85rem) !important;
  letter-spacing: 6px !important;
  margin-bottom: 0.8rem !important;
  text-shadow: 0 0 20px currentColor !important;
}

/* Subtítulo más limpio */
.hc-sub {
  font-size: clamp(0.85rem, 1.8vw, 1rem) !important;
  letter-spacing: 2px !important;
  margin-bottom: 2rem !important;
  text-transform: uppercase !important;
}

/* El content-box más ancho para que el título no corte */
.hc-content {
  width: 560px !important;
  max-width: 85vw !important;
}

/* Botones del hero más compactos y alineados */
.hc-content .hero-actions {
  gap: 1rem !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}
.hc-content .btn-clean-white,
.hc-content .btn-clean-yellow {
  padding: 0.85rem 2rem !important;
  font-size: 0.9rem !important;
  letter-spacing: 1.5px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

/* ================================================================
   FIX HERO HEIGHT + HOMOGENEIDAD ENTRE SECCIONES
   ================================================================ */

/* El hero necesita altura explícita en el contenedor padre
   porque las slides son absolute y no crean altura */
.hero-collage {
  height: 520px !important;
  min-height: 520px !important;
  display: block !important;
}

/* Slides inactivas: completamente invisibles, sin ocupar espacio visual */
.hero-collage-slide:not(.active) {
  opacity: 0 !important;
  pointer-events: none !important;
  /* Evitar que textos se superpongan entre slides */
  visibility: hidden !important;
}
.hero-collage-slide.active {
  visibility: visible !important;
}

/* Eliminar CUALQUIER cambio de fondo entre secciones */
* {
  box-shadow: none !important;
}
/* Restaurar solo los box-shadow de UI que sí necesitamos */
.product-card:hover {
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 240, 255, 0.12) !important;
}
.main-header {
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(0, 240, 255, 0.1) !important;
}
.cat-pokemon:hover {
  box-shadow: 0 20px 50px rgba(255, 208, 0, 0.22) !important;
}
.cat-onepiece:hover {
  box-shadow: 0 20px 50px rgba(255, 106, 0, 0.22) !important;
}
.cat-lol:hover {
  box-shadow: 0 20px 50px rgba(155, 89, 182, 0.2) !important;
}
.cat-sobres:hover {
  box-shadow: 0 20px 50px rgba(255, 45, 139, 0.2) !important;
}
.cat-accesorios:hover {
  box-shadow: 0 20px 50px rgba(0, 255, 136, 0.18) !important;
}
.btn-add-cart:hover {
  box-shadow:
    0 0 18px rgba(0, 240, 255, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
.nav-action-btn:hover {
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35) !important;
}
.cylinder-control {
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2) !important;
}
.pack3d-cta {
  box-shadow: 0 0 12px rgba(255, 208, 0, 0.25) !important;
}
.modal-content {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
}

/* Separación entre secciones: solo padding, sin color */
.cat-section {
  padding: 2.5rem 0 3rem !important;
}
section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.container {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

@media (max-width: 768px) {
  .hero-collage {
    height: 420px !important;
    min-height: 420px !important;
  }
}

/* ================================================================
   NOVA REDESIGN — Header premium + Hero títulos épicos
   ================================================================ */

/* ── HEADER: más oscuro, más premium ──────────────────────────── */
.main-header {
  background: rgba(6, 6, 14, 0.95) !important;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(0, 240, 255, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* Línea de acento cyan muy sutil bajo el header */
.main-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 240, 255, 0.4) 20%,
    rgba(155, 89, 182, 0.4) 50%,
    rgba(255, 208, 0, 0.4) 80%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── LOGO: más grande, efecto sello/emblem ────────────────────── */
.header-logo-img {
  height: 52px !important;
  filter: brightness(1) contrast(1) saturate(1.3)
    drop-shadow(0 0 12px rgba(0, 240, 255, 0.5)) !important;
  mix-blend-mode: normal !important;
  transition:
    filter 0.3s,
    transform 0.3s !important;
}
.header-logo-img:hover {
  filter: brightness(1.1) contrast(1) saturate(1.5)
    drop-shadow(0 0 20px rgba(0, 240, 255, 0.8)) !important;
  transform: scale(1.06) !important;
}
/* Badge/sello alrededor del logo */
.logo a {
  display: flex !important;
  align-items: center !important;
  padding: 4px 10px 4px 4px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 240, 255, 0.15) !important;
  background: rgba(0, 240, 255, 0.04) !important;
  transition:
    border-color 0.3s,
    background 0.3s !important;
}
.logo a:hover {
  border-color: rgba(0, 240, 255, 0.4) !important;
  background: rgba(0, 240, 255, 0.08) !important;
}

/* ── BARRA DE BÚSQUEDA: sin borde blanco, integrada ──────────── */
.search-bar {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  transition:
    border-color 0.3s,
    background 0.3s !important;
}
.search-bar:focus-within {
  border-color: rgba(0, 240, 255, 0.35) !important;
  background: rgba(0, 240, 255, 0.05) !important;
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.06) !important;
}
.search-bar input {
  color: rgba(255, 255, 255, 0.8) !important;
}
.search-bar i {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* ── NAV LINKS: más carácter ──────────────────────────────────── */
.main-nav a {
  font-size: 0.82rem !important;
  letter-spacing: 0.5px !important;
  border-radius: 8px !important;
  transition:
    background 0.2s,
    color 0.2s !important;
}
.main-nav a:hover,
.main-nav a.active {
  background: rgba(0, 240, 255, 0.1) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.1) !important;
}
/* Flecha del mega-menú */
.menu-arrow {
  color: rgba(255, 255, 255, 0.3) !important;
}
.has-megamenu.open > a .menu-arrow {
  color: var(--accent) !important;
}

/* ── HERO TÍTULO: épico, galáctico ───────────────────────────── */
.hc-title {
  font-size: clamp(3.5rem, 8vw, 6.5rem) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  line-height: 0.95 !important;
  letter-spacing: -2px !important;
  /* Gradiente blanco→cyan muy sutil para dar dimensión */
  background: linear-gradient(
    175deg,
    #ffffff 0%,
    #e0f8ff 40%,
    #b0f0ff 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
  text-shadow: none !important;
  /* Glow que hace que parezca que emite luz */
  position: relative;
}

/* Pseudo-glow detrás del texto via drop-shadow en el wrapper */
.hc-content {
  width: 600px !important;
  max-width: 88vw !important;
  filter: drop-shadow(0 0 40px rgba(0, 240, 255, 0.15)) !important;
}

/* Tag: más pequeño, capslock, espaciado */
.hc-tag {
  font-size: 0.7rem !important;
  letter-spacing: 8px !important;
  opacity: 0.85 !important;
  text-shadow: 0 0 30px currentColor !important;
}

/* Subtítulo */
.hc-sub {
  font-size: 0.85rem !important;
  letter-spacing: 3px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important;
  text-transform: uppercase !important;
  margin-bottom: 2.2rem !important;
}

/* Botones hero con más carácter */
.hc-content .btn-clean-white {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  border-radius: 6px !important;
}
.hc-content .btn-clean-yellow {
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 30px rgba(255, 208, 0, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
.hc-content .btn-clean-yellow:hover {
  box-shadow:
    0 0 50px rgba(255, 208, 0, 0.65),
    0 4px 20px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-3px) !important;
}

/* ── HERO HEIGHT ajustada para el título grande ───────────────── */
.hero-collage {
  height: 560px !important;
  min-height: 560px !important;
}

@media (max-width: 768px) {
  .hero-collage {
    height: 440px !important;
    min-height: 440px !important;
  }
  .hc-title {
    font-size: clamp(2.5rem, 10vw, 4rem) !important;
    letter-spacing: -1px !important;
  }
  .header-logo-img {
    height: 40px !important;
  }
}

/* ================================================================
   FIX LOGO — sin fondo, integrado en el header
   ================================================================ */

/* Quitar el badge/sello que añadimos antes */
.logo a {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.logo a:hover {
  border: none !important;
  background: transparent !important;
}

/* mix-blend-mode: screen elimina el fondo negro de la imagen
   dejando solo las letras de colores visibles */
.header-logo-img {
  height: 48px !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.1) saturate(1.2)
    drop-shadow(0 0 8px rgba(0, 240, 255, 0.3)) !important;
  background: transparent !important;
  transition:
    filter 0.3s,
    transform 0.3s !important;
}
.header-logo-img:hover {
  filter: brightness(1.2) saturate(1.4)
    drop-shadow(0 0 16px rgba(0, 240, 255, 0.55)) !important;
  transform: scale(1.04) !important;
}

/* ================================================================
   FIX FINAL — título sin corte + tag visible + logo + búsqueda
   ================================================================ */

/* Título: reducir para que no se corte, mantener impacto */
.hc-title {
  font-size: clamp(2.8rem, 5.5vw, 4.8rem) !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Content más ancho para que quepan títulos largos */
.hc-content {
  width: 700px !important;
  max-width: 60vw !important;
}

/* Tag ("POKÉMON TCG", "ONE PIECE TCG") — más grande y visible */
.hc-tag {
  font-size: clamp(0.75rem, 1.4vw, 1rem) !important;
  letter-spacing: 6px !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  margin-bottom: 1rem !important;
}

/* ── LOGO completamente integrado — sin ningún borde ni fondo ── */
.logo a {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.logo a:hover {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}
.header-logo-img {
  height: 44px !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.15) saturate(1.3) !important;
  background: transparent !important;
  transition:
    filter 0.3s,
    transform 0.3s !important;
}
.header-logo-img:hover {
  filter: brightness(1.3) saturate(1.5)
    drop-shadow(0 0 12px rgba(0, 240, 255, 0.5)) !important;
  transform: scale(1.05) !important;
}

/* ── BARRA DE BÚSQUEDA — sin línea blanca, totalmente integrada */
.search-container {
  flex: 2;
  display: flex;
  justify-content: center;
}
.search-bar {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50px !important;
  height: 38px !important;
  max-width: 480px !important;
}
.search-bar:focus-within {
  background: rgba(0, 240, 255, 0.06) !important;
  border-color: rgba(0, 240, 255, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.05) !important;
}
.search-bar i {
  color: rgba(255, 255, 255, 0.2) !important;
}
.search-bar input {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.88rem !important;
}
.search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.22) !important;
}

@media (max-width: 768px) {
  .hc-content {
    width: 80vw !important;
    max-width: 80vw !important;
  }
  .hc-title {
    font-size: clamp(2rem, 8vw, 3.2rem) !important;
  }
}

/* Ocultar graffiti tag de fondo — interfiere con el dark mode */
.bg-graffiti-tag {
  display: none !important;
}

/* ================================================================
   ANIMACIÓN HERO CAROUSEL — cinematográfica tipo CardZone
   ================================================================ */

/* Las slides preparan GPU para la animación */
.hero-collage-slide {
  will-change: opacity, transform !important;
  transition: none !important; /* JS controla todo */
}

/* Slide inactiva oculta pero lista */
.hero-collage-slide:not(.active) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(0) scale(1) !important;
}

/* Las imágenes del collage tienen su transform base definido
   para que JS pueda añadir/quitar el offset sin romperlo */
.hi-box-main {
  transform: rotate(-8deg) !important;
}
.hi-pack-1 {
  transform: rotate(10deg) !important;
}
.hi-pack-2 {
  transform: rotate(-14deg) !important;
}
.hi-box-side {
  transform: rotate(7deg) !important;
}
.hi-pack-3 {
  transform: rotate(15deg) !important;
}

/* ================================================================
   HERO BANNER — imagen real de fondo + Ken Burns + transición suave
   ================================================================ */

.hero-banner {
  position: relative;
  width: 100%;
  height: 560px;
  overflow: hidden;
  margin-top: 0 !important;
}

/* Cada slide */
.hb-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.hb-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hb-bg {
  position: absolute;
  inset: 0;
  background-size: cover; /* sobreescrito por inline style por slide */
  background-position: center; /* sobreescrito por inline style por slide */
  background-repeat: no-repeat;
  animation: kenBurns 18s ease-in-out infinite alternate;
  will-change: transform;
}
.hb-slide.active .hb-bg {
  animation: kenBurns 18s ease-in-out infinite alternate;
}

@keyframes kenBurns {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  50% {
    transform: scale(1.015) translate(-0.3%, 0.2%);
  }
  100% {
    transform: scale(1.02) translate(0.2%, -0.2%);
  }
}

/* Overlay: oscurece para legibilidad del texto */
.hb-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(8, 8, 18, 0.75) 0%,
      rgba(8, 8, 18, 0.3) 50%,
      rgba(8, 8, 18, 0.55) 100%
    ),
    linear-gradient(to top, rgba(8, 8, 18, 0.8) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(8, 8, 18, 0.4) 0%, transparent 30%);
}

/* Contenido centrado */
.hb-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 700px;
  max-width: 88vw;
  text-align: center;
}

.hb-tag {
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.7rem, 1.3vw, 0.9rem);
  font-weight: 900;
  letter-spacing: 7px;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  display: block;
  text-shadow: 0 0 25px currentColor;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s ease 0.1s,
    transform 0.6s ease 0.1s;
}
.hb-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(3rem, 6vw, 5.5rem) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  line-height: 0.95 !important;
  letter-spacing: -1px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  text-shadow:
    0 0 4px rgba(0,0,0,0.95),
    1px 1px 0px rgba(0,0,0,0.9),
    -1px -1px 0px rgba(0,0,0,0.9),
    1px -1px 0px rgba(0,0,0,0.9),
    -1px 1px 0px rgba(0,0,0,0.9),
    0 3px 10px rgba(0,0,0,0.7),
    0 6px 24px rgba(0,0,0,0.45) !important;
  margin-bottom: 0.7rem !important;
  filter: none !important;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease 0.2s,
    transform 0.7s ease 0.2s;
}
.hb-sub {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2.2rem;
  display: block;
  text-shadow:
    0 0 3px rgba(0,0,0,0.95),
    1px 1px 3px rgba(0,0,0,0.85),
    0 2px 8px rgba(0,0,0,0.65) !important;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s ease 0.35s,
    transform 0.6s ease 0.35s;
}
.hb-content .hero-actions {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s ease 0.5s,
    transform 0.6s ease 0.5s;
  justify-content: center;
}

/* Cuando el slide está activo: revelar elementos con stagger */
.hb-slide.active .hb-tag,
.hb-slide.active .hb-title,
.hb-slide.active .hb-sub,
.hb-slide.active .hb-content .hero-actions {
  opacity: 1;
  transform: translateY(0);
}

/* Botones */
.hb-content .btn-clean-white {
  background: rgba(0, 0, 0, 0.42) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 18px rgba(0,0,0,0.55) !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  border-radius: 6px !important;
  padding: 0.9rem 2.2rem !important;
}
.hb-content .btn-clean-white:hover {
  background: rgba(0, 0, 0, 0.58) !important;
  transform: translateY(-3px) !important;
}
.hb-content .btn-clean-yellow {
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  border-radius: 6px !important;
  padding: 0.9rem 2.2rem !important;
  box-shadow: 0 0 30px rgba(255, 208, 0, 0.4) !important;
}
.hb-content .btn-clean-yellow:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 0 50px rgba(255, 208, 0, 0.65) !important;
}

/* Paginación */
#hero-pag {
  position: absolute !important;
  bottom: 2rem !important;
  right: 2.5rem !important;
  z-index: 10 !important;
  background: rgba(8, 8, 20, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Responsive mobile hero — sustituido por fix definitivo al final del archivo */

@media (prefers-reduced-motion: reduce) {
  .hb-bg {
    animation: none !important;
  }
}

/* Quitar línea separadora del header */
.main-header {
  border-bottom: none !important;
}
.main-header::after {
  display: none !important;
}

/* ── HEADER LIMPIO — sin línea separadora interior ────────────── */

/* Quitar la línea entre header-top y header-bottom */
.header-top {
  border-bottom: none !important;
}

/* Reducir alturas para que todo sea más compacto y limpio */
.header-top {
  height: 48px !important;
  padding: 0 2rem !important;
}
.header-bottom {
  height: 44px !important;
  padding: 0 2rem !important;
}

/* Logo más grande */
.header-logo-img {
  height: 58px !important;
}

/* Barra de búsqueda más integrada — sin borde visible */
.search-bar {
  background: rgba(255, 255, 255, 0.06) !important;
  border: none !important;
  border-radius: 8px !important;
}
.search-bar:focus-within {
  border: none !important;
  background: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.25) !important;
}

/* ── LOGO NUEVO — ya sin fondo, no necesita mix-blend-mode ─────── */
.header-logo-img {
  height: 62px !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.3)) !important;
  object-fit: contain !important;
  transition:
    filter 0.3s,
    transform 0.3s !important;
}
.header-logo-img:hover {
  filter: drop-shadow(0 0 18px rgba(0, 240, 255, 0.6))
    drop-shadow(0 0 8px rgba(255, 0, 220, 0.4)) !important;
  transform: scale(1.25) !important;
}

/* ── LOGO — más grande y más abajo ─────────────────────────────── */
.header-logo-img {
  height: 80px !important;
  margin-top: 30px !important;
}
.logo {
  align-items: flex-start !important;
  padding-top: 4px !important;
}

/* ── BOTÓN AÑADIR — rediseño premium ───────────────────────────── */
.btn-add-cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  margin-top: 0.9rem !important;
  padding: 0.65rem 0 !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 5 !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease !important;

  /* Gradiente de fondo tipo TCG — cyan a violet */
  background: linear-gradient(
    135deg,
    #00c8d4 0%,
    #0099a8 40%,
    #6b3fa0 100%
  ) !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 15px rgba(0, 200, 212, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Línea brillante — animation en hover para que no se quede pegada */
.btn-add-cart::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -75% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  ) !important;
  transform: skewX(-20deg) !important;
  transition: none !important;
}
.btn-add-cart:hover::before {
  animation: shimmerSlide 0.55s ease forwards !important;
}
@keyframes shimmerSlide {
  from {
    left: -75%;
  }
  to {
    left: 140%;
  }
}

/* Borde superior sutil tipo holográfico */
.btn-add-cart::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  ) !important;
}

.btn-add-cart:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 8px 25px rgba(0, 200, 212, 0.5),
    0 4px 12px rgba(107, 63, 160, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(
    135deg,
    #00e0ee 0%,
    #00aabb 40%,
    #7b4fb0 100%
  ) !important;
}

.btn-add-cart:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(0, 200, 212, 0.3) !important;
}

/* Icono del carrito */
.btn-add-cart i {
  font-size: 1rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  flex-shrink: 0 !important;
}

/* Estado añadido — flash verde */
.product-card.added-to-cart .btn-add-cart {
  background: linear-gradient(135deg, #00c853, #00a844) !important;
  box-shadow: 0 4px 20px rgba(0, 200, 83, 0.5) !important;
}

/* Versión en el carrusel 3D — ligeramente más compacta */
.carousel-3d-item .btn-add-cart {
  font-size: 0.72rem !important;
  padding: 0.55rem 0 !important;
  letter-spacing: 1.5px !important;
}

/* ================================================================
   PROD SLIDER — estilos completos
   ================================================================ */
.prod-slider-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1rem 0 2rem;
}

.prod-slider-track {
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 24px;
  will-change: transform;
  padding: 1rem 3rem;
  cursor: grab;
  user-select: none;
}
.prod-slider-track:active {
  cursor: grabbing;
}

.prod-slider-item {
  flex: 0 0 280px !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
}

/* Botones prev/next */
.prod-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: rgba(6, 6, 14, 0.9);
  color: var(--accent);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  opacity: 0;
}
.prod-slider-wrap:hover .prod-slider-btn {
  opacity: 1;
}
.prod-slider-btn:hover {
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}
.prod-slider-prev {
  left: 0.5rem;
}
.prod-slider-next {
  right: 0.5rem;
}

/* Fades laterales */
.prod-slider-wrap::before,
.prod-slider-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 5;
  pointer-events: none;
}
.prod-slider-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-base), transparent);
}
.prod-slider-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-base), transparent);
}

@media (max-width: 640px) {
  .prod-slider-item {
    flex: 0 0 80vw !important;
    width: 80vw !important;
    min-width: unset !important;
    max-width: unset !important;
  }
  .prod-slider-track {
    padding: 1rem;
    gap: 16px;
  }
}

/* ── SELECTOR DE CANTIDAD EN TARJETA ───────────────────────────── */
.add-to-cart-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.qty-selector {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.qty-sel-btn {
  width: 28px;
  height: 36px;
  background: transparent;
  border: none;
  color: #00f0ff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-sel-btn:hover {
  background: rgba(0, 240, 255, 0.12);
}

.qty-sel-input {
  width: 34px;
  height: 36px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(0, 240, 255, 0.15);
  border-right: 1px solid rgba(0, 240, 255, 0.15);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  appearance: textfield;
}
.qty-sel-input::-webkit-inner-spin-button,
.qty-sel-input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.btn-add-cart {
  flex: 1;
  margin-top: 0 !important;
}

/* ── BADGE DEL CARRITO ──────────────────────────────────────────── */
#btn-open-cart {
  position: relative !important;
  overflow: visible !important;
}
#cart-badge {
  position: absolute !important;
  bottom: -8px !important;
  right: -8px !important;
  min-width: 20px !important;
  height: 20px !important;
  background: #ff1fcc !important;
  color: #fff !important;
  font-family: "Outfit", sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  border-radius: 50px !important;
  padding: 0 5px !important;
  display: none !important;
  line-height: 1 !important;
  box-shadow:
    0 0 10px rgba(255, 31, 204, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.5) !important;
  border: 2px solid #06060e !important;
  z-index: 999 !important;
  pointer-events: none !important;
}
#cart-badge.visible {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* badge visible cuando tiene clase 'visible' */
#cart-badge.visible {
  display: flex !important;
}
@keyframes badgePop {
  0% {
    transform: scale(0.5);
  }
  60% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}
.badge-pop {
  animation: badgePop 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* ── FIX SHIMMER nav-action-btn — quitar el efecto que se queda pegado ── */
.nav-action-btn {
  overflow: hidden !important;
}
.nav-action-btn::before {
  transition: none !important;
  left: -100% !important;
  display: none !important;
}
.nav-action-btn:hover::before {
  display: none !important;
}

/* ── HEADER ICON BUTTONS ────────────────────────────────────────── */
.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.hdr-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.hdr-icon-btn:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.35);
  color: #00f0ff;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
  transform: translateY(-1px);
}
/* Quitar el shimmer heredado del nav-action-btn */
.hdr-icon-btn::before {
  display: none !important;
}

/* Badge del carrito */
#cart-badge {
  position: absolute !important;
  bottom: -6px !important;
  right: -6px !important;
  min-width: 18px !important;
  height: 18px !important;
  background: #ff1fcc !important;
  color: #fff !important;
  font-family: "Outfit", sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 900 !important;
  border-radius: 50px !important;
  padding: 0 4px !important;
  display: none !important;
  line-height: 1 !important;
  box-shadow: 0 0 8px rgba(255, 31, 204, 0.9) !important;
  border: 2px solid #06060e !important;
  z-index: 999 !important;
  pointer-events: none !important;
}
#cart-badge.visible {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ══════════════════════════════════════════════════════════════════
   HERO BANNER — imagen de producto flotante en todos los slides
   ══════════════════════════════════════════════════════════════════ */
.hb-product-img {
  position: absolute;
  right: 3%;
  bottom: 10%;
  height: 82%;
  max-width: 38%;
  object-fit: contain;
  z-index: 2;
  filter:
    drop-shadow(-18px 0 40px rgba(0,0,0,0.55))
    drop-shadow(0 25px 35px rgba(0,0,0,0.6));
  animation: productFloat 4.5s ease-in-out infinite;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 0.3s;
}
.hb-slide.active .hb-product-img {
  opacity: 1;
}

@keyframes productFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

/* Contenido centrado, producto a la derecha */
.hb-content {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 580px !important;
  text-align: center !important;
}

.hb-product-img {
  right: 4% !important;
  max-width: 30% !important;
  height: 80% !important;
}

/* Subtítulo — borde negro sutil para legibilidad en cualquier banner */
.hb-sub {
  text-shadow:
    0 1px 4px rgba(0,0,0,0.95),
    0 0 14px rgba(0,0,0,0.75) !important;
}

/* bloques de centrado mobile reemplazados — ver fix definitivo al final del archivo */
.hb-content .hero-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.2rem !important;
  flex-wrap: wrap !important;
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT CARDS 2.0 — Premium FOMO design
   ══════════════════════════════════════════════════════════════════ */
.product-card {
  background: linear-gradient(155deg, #1c1c35 0%, #13132a 55%, #0e0e20 100%) !important;
  border: 1px solid rgba(0,240,255,0.07) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease, border-color 0.25s ease !important;
}
.product-card:hover {
  transform: translateY(-14px) !important;
  border-color: rgba(0,240,255,0.28) !important;
  box-shadow:
    0 0 0 1px rgba(0,240,255,0.18),
    0 0 35px rgba(0,240,255,0.12),
    0 0 80px rgba(155,89,182,0.07),
    0 30px 70px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* Shimmer sweep on hover */
.product-card::before {
  content: '' !important; display: block !important;
  position: absolute !important; top: 0 !important; left: -120% !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%) !important;
  transform: skewX(-15deg) !important;
  transition: left 0.75s ease !important;
  pointer-events: none !important; z-index: 5 !important;
  opacity: 1 !important; animation: none !important; border-radius: 0 !important;
}
.product-card:hover::before { left: 160% !important; }

/* Imagen — cuadrada con padding, contain para transparentes */
.card-image-wrapper {
  aspect-ratio: 1 / 1 !important;
  padding: 1.1rem 1.1rem 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.card-image-wrapper img {
  object-fit: contain !important;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.65)) !important;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), filter 0.4s ease !important;
}
.product-card:hover .card-image-wrapper img {
  transform: scale(1.07) translateY(-4px) !important;
  filter: drop-shadow(0 14px 28px rgba(0,240,255,0.18)) drop-shadow(0 6px 12px rgba(0,0,0,0.7)) !important;
}

/* Info */
.card-info { padding: 0.8rem 1.2rem 1.2rem !important; }
.card-title { color: rgba(255,255,255,0.92) !important; font-size: 0.9rem !important; }

/* Precio dorado */
.card-price {
  color: #FFD000 !important;
  font-size: 1.5rem !important; font-weight: 900 !important;
  text-shadow: 0 0 22px rgba(255,208,0,0.45) !important;
}
.card-price.discounted { color: #ff4466 !important; text-shadow: 0 0 22px rgba(255,50,80,0.45) !important; }
.card-price-original { color: rgba(255,255,255,0.28) !important; }

/* Scarcity pulsante */
.scarcity-container {
  background: rgba(255,50,50,0.05) !important;
  border: 1px solid rgba(255,60,0,0.13) !important;
  border-radius: 8px !important;
}
.scarcity-fill { animation: scarcityGlow 2.5s ease-in-out infinite !important; }
@keyframes scarcityGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,208,0,0.55); }
  50%       { box-shadow: 0 0 14px rgba(255,60,0,0.85); }
}

/* Badges con pulso */
.product-badge.hot  { animation: badgeHot  2.5s ease-in-out infinite !important; }
.product-badge.new  { animation: badgeNew  2.5s ease-in-out infinite !important; }
.product-badge.rare { animation: badgeRare 2.5s ease-in-out infinite !important; }
@keyframes badgeHot  { 0%,100%{box-shadow:0 0 0 0 rgba(255,100,0,0.6);}  50%{box-shadow:0 0 0 6px rgba(255,100,0,0);} }
@keyframes badgeNew  { 0%,100%{box-shadow:0 0 0 0 rgba(0,200,130,0.6);} 50%{box-shadow:0 0 0 6px rgba(0,200,130,0);} }
@keyframes badgeRare { 0%,100%{box-shadow:0 0 0 0 rgba(155,89,182,0.6);}50%{box-shadow:0 0 0 6px rgba(155,89,182,0);} }

/* AGOTADO */
.out-of-stock-overlay {
  background: rgba(0,0,0,0.8) !important;
  backdrop-filter: blur(5px) !important;
  font-size: 1rem !important; letter-spacing: 7px !important;
  color: rgba(255,255,255,0.45) !important; border: none !important;
}
/* AGOTADO TEMPORALMENTE — soft-delete desde la app */
.out-of-stock-overlay.agotado-temp {
  background: rgba(15,5,30,0.88) !important;
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.75rem !important;
  letter-spacing: 3px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  border: 1px solid rgba(155,89,182,0.35) !important;
  border-radius: 4px !important;
  padding: 0.5rem 1rem !important;
}
.out-of-stock-overlay.agotado-temp small {
  display: block !important;
  font-size: 0.65rem !important;
  letter-spacing: 1px !important;
  color: rgba(155,89,182,0.9) !important;
  margin-top: 2px !important;
}

/* Botón añadir */
.btn-add-cart {
  background: linear-gradient(135deg,rgba(0,240,255,0.08),rgba(155,89,182,0.08)) !important;
  border: 1px solid rgba(0,240,255,0.25) !important;
  transition: all 0.25s ease !important;
}
.btn-add-cart:hover {
  background: linear-gradient(135deg,rgba(0,240,255,0.2),rgba(155,89,182,0.15)) !important;
  border-color: rgba(0,240,255,0.5) !important;
  box-shadow: 0 0 20px rgba(0,240,255,0.2) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════════════
   HERO BANNER — Logo del set (sustituye al título de texto)
   ══════════════════════════════════════════════════════════════════ */
/* ── Tag de categoría encima del logo — oculto ── */
.hb-tag {
  display: none !important;
}

.hb-logo {
  display: block;
  max-height: 220px;
  max-width: 88%;
  width: auto;
  margin: 0 auto 1.6rem;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: drop-shadow(0 6px 32px rgba(0,0,0,0.6));
  opacity: 0;
  transform: translateY(18px) scale(0.95);
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}
.hb-slide.active .hb-logo {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Logos con fondo de color (OP-17): screen lo borra */
.hb-logo.blend-screen {
  mix-blend-mode: screen;
}

/* Logos oscuros sobre fondo claro (MTG): invertir para que sean blancos */
.hb-logo.blend-invert {
  filter: invert(1) brightness(1.3) drop-shadow(0 4px 28px rgba(212,175,55,0.5));
}

/* Subtítulo — centrado, sin raya lateral */
.hb-sub {
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.65 !important;
  margin-bottom: 2.2rem !important;
  padding: 0.4rem 0 !important;
  border-left: none !important;
  background: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ================================================================
   CARD NOVA CORP — AMBIENTE VISUAL (ambient.js companion styles)
   Fondo vivo · Holo foil · Glow por categoría
   ================================================================ */

/* ── FONDO VIVO — orbes animados ────────────────────────────────── */
#bg-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#bg-ambient::before {
  content: '';
  position: absolute;
  width: 72vw;
  height: 72vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,240,255,0.048) 0%, transparent 68%);
  top: -28%;
  left: -18%;
  filter: blur(70px);
  animation: orbDrift1 30s ease-in-out infinite;
  will-change: transform;
}
#bg-ambient::after {
  content: '';
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155,89,182,0.055) 0%, transparent 68%);
  bottom: -22%;
  right: -12%;
  filter: blur(80px);
  animation: orbDrift2 38s ease-in-out infinite;
  will-change: transform;
}

@keyframes orbDrift1 {
  0%,100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(7vw, 10vh) scale(1.07); }
  55%      { transform: translate(13vw, 3vh) scale(0.94); }
  80%      { transform: translate(4vw, 14vh) scale(1.04); }
}
@keyframes orbDrift2 {
  0%,100% { transform: translate(0, 0) scale(1); }
  30%      { transform: translate(-9vw, -7vh) scale(1.09); }
  60%      { transform: translate(-5vw, -13vh) scale(0.92); }
  80%      { transform: translate(-11vw, -4vh) scale(1.06); }
}

/* Tercer orbe — dorado tenue en la esquina inferior izquierda */
#bg-ambient-gold {
  position: fixed;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,208,0,0.028) 0%, transparent 70%);
  bottom: -15%;
  left: -5%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
  animation: orbDrift3 45s ease-in-out infinite;
  will-change: transform;
}
@keyframes orbDrift3 {
  0%,100% { transform: translate(0,0); }
  40%      { transform: translate(6vw, -8vh); }
  70%      { transform: translate(-4vw, -15vh); }
}

/* ── EFECTO HOLO FOIL EN PRODUCT CARDS ─────────────────────────── */
.product-card {
  --holo-x: 50%;
  --holo-y: 50%;
  /* Fondo con gradiente sutil en lugar de plano */
  background: linear-gradient(145deg, #1c1c30 0%, #16162a 55%, #111128 100%) !important;
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--holo-x) var(--holo-y),
    rgba(255,255,255,0.10) 0%,
    rgba(0,240,255,0.07) 22%,
    rgba(155,89,182,0.05) 46%,
    rgba(255,45,139,0.04) 65%,
    transparent 85%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 5;
}
.product-card.holo-on::before {
  opacity: 1;
}

/* Borde sutil animado en hover (reemplaza al genérico) */
.product-card:hover {
  border-color: rgba(0,240,255,0.28) !important;
  box-shadow:
    0 12px 48px rgba(0,0,0,0.55),
    0 0 22px rgba(0,240,255,0.10) !important;
  transform: translateY(-6px) !important;
}

/* ── GLOW POR CATEGORÍA ─────────────────────────────────────────── */
.product-card[data-category="pokemon"]:hover {
  border-color: rgba(0,230,255,0.5) !important;
  box-shadow:
    0 12px 48px rgba(0,0,0,0.55),
    0 0 32px rgba(0,230,255,0.22) !important;
}
.product-card[data-category="one-piece"]:hover {
  border-color: rgba(255,75,0,0.5) !important;
  box-shadow:
    0 12px 48px rgba(0,0,0,0.55),
    0 0 32px rgba(255,75,0,0.22) !important;
}
.product-card[data-category="league-of-legends"]:hover {
  border-color: rgba(155,89,182,0.55) !important;
  box-shadow:
    0 12px 48px rgba(0,0,0,0.55),
    0 0 32px rgba(155,89,182,0.25) !important;
}
.product-card[data-category="flesh-and-blood"]:hover {
  border-color: rgba(200,20,0,0.55) !important;
  box-shadow:
    0 12px 48px rgba(0,0,0,0.55),
    0 0 32px rgba(200,20,0,0.25) !important;
}
.product-card[data-category="magic-the-gathering"]:hover {
  border-color: rgba(212,175,55,0.5) !important;
  box-shadow:
    0 12px 48px rgba(0,0,0,0.55),
    0 0 32px rgba(212,175,55,0.22) !important;
}

/* ── TÍTULO OP-17 CUSTOM (tipografía One Piece bold-italic) ─────── */
.hb-title-op17 {
  display: block !important;
  font-family: "Outfit", sans-serif !important;
  font-size: clamp(1.8rem, 3.8vw, 3.2rem) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  text-transform: capitalize !important;
  line-height: 1.08 !important;
  letter-spacing: 1px !important;
  color: #dd9f62 !important;
  -webkit-text-fill-color: #dd9f62 !important;
  background: none !important;
  -webkit-text-stroke: 1.5px #3D1A00 !important;
  paint-order: stroke fill !important;
  text-shadow:
    -1px -1px 0px rgba(255,255,255,0.65),
    -1px -2px 1px rgba(255,255,255,0.3),
    1px 1px 0px rgba(0,0,0,0.95),
    2px 2px 5px rgba(0,0,0,0.85),
    5px 5px 12px rgba(0,0,0,0.6),
    8px 8px 20px rgba(0,0,0,0.3) !important;
  filter: none !important;
  margin-bottom: 1.6rem !important;
  white-space: nowrap;
}
/* La animación de entrada usa la clase del slide activo */
.hb-slide.active .hb-title-op17 {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Tamaño logo hero */
.hb-logo {
  max-height: 210px !important;
}

/* ════════════════════════════════════════════════════════════════
   NOVA EXPLOSION — fondo + cards Prisma Oscuro
   Solo se tocan: fondo global y background/borde de product-card
   Estructura, botones, tags y FOMO se mantienen intactos
   ════════════════════════════════════════════════════════════════ */

/* ── 1. BASE MÁS OSCURA ─────────────────────────────────────── */
:root {
  --bg-base: #05030d !important;
  --bg-card: rgba(4, 2, 14, 0.88) !important;
}

/* ── 2. NOVA EXPLOSION en el fondo fijo ─────────────────────── */
.cosmic-bg::before {
  background:
    /* core — destello blanco central */
    radial-gradient(ellipse 20% 20% at 50% 50%,
      rgba(255,255,255,0.08) 0%, transparent 100%),
    /* 8 rayos de los colores del logo */
    conic-gradient(from 0deg at 50% 50%,
      transparent            0deg,
      rgba(0,240,255,0.13)   8deg,  transparent 22deg,
      transparent           40deg,
      rgba(255,208,0,0.11)  48deg,  transparent 62deg,
      transparent           85deg,
      rgba(255,45,139,0.12) 93deg,  transparent 107deg,
      transparent          130deg,
      rgba(155,89,182,0.11)138deg,  transparent 152deg,
      transparent          175deg,
      rgba(0,240,255,0.11) 183deg,  transparent 197deg,
      transparent          220deg,
      rgba(255,208,0,0.09) 228deg,  transparent 242deg,
      transparent          265deg,
      rgba(255,45,139,0.10)273deg,  transparent 287deg,
      transparent          310deg,
      rgba(155,89,182,0.10)318deg,  transparent 332deg,
      transparent          360deg),
    /* halo difuso exterior */
    radial-gradient(ellipse 110% 90% at 50% 50%,
      transparent 30%,
      rgba(0,240,255,0.05) 52%,
      rgba(155,89,182,0.07) 68%,
      rgba(255,45,139,0.04) 83%,
      transparent 100%),
    /* viñeta borde para que el centro brille más */
    radial-gradient(ellipse 130% 110% at 50% 50%,
      transparent 48%, rgba(2,1,10,0.65) 100%) !important;
}

/* ── 3. PRODUCT CARDS — fondo original + borde TCG ──────────── */

/* Fondo: igual que antes (--bg-card #16162a), sin tocar botones ni textos */
.product-card {
  background: var(--bg-card) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* Borde siempre visible, color exacto de cada TCG en la web */
/* Pokémon — amarillo */
.product-card[data-category="pokemon"] {
  border-color: rgba(255,208,0,0.35) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5),
              inset 0 0 40px rgba(255,208,0,0.04) !important;
}
/* One Piece — naranja */
.product-card[data-category="one-piece"] {
  border-color: rgba(255,101,0,0.35) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5),
              inset 0 0 40px rgba(255,101,0,0.04) !important;
}
/* League of Legends — morado */
.product-card[data-category="league-of-legends"] {
  border-color: rgba(155,89,182,0.35) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5),
              inset 0 0 40px rgba(155,89,182,0.04) !important;
}
/* Flesh and Blood — rojo */
.product-card[data-category="flesh-and-blood"] {
  border-color: rgba(200,20,0,0.35) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5),
              inset 0 0 40px rgba(200,20,0,0.04) !important;
}
/* Magic: The Gathering — azul */
.product-card[data-category="magic-the-gathering"] {
  border-color: rgba(0,128,255,0.35) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5),
              inset 0 0 40px rgba(0,128,255,0.04) !important;
}

/* Hover — borde + glow más intenso, mismo color */
.product-card[data-category="pokemon"]:hover {
  border-color: rgba(255,208,0,0.75) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,0.7),
              0 0 36px rgba(255,208,0,0.20) !important;
}
.product-card[data-category="one-piece"]:hover {
  border-color: rgba(255,101,0,0.75) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,0.7),
              0 0 36px rgba(255,101,0,0.20) !important;
}
.product-card[data-category="league-of-legends"]:hover {
  border-color: rgba(155,89,182,0.75) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,0.7),
              0 0 36px rgba(155,89,182,0.22) !important;
}
.product-card[data-category="flesh-and-blood"]:hover {
  border-color: rgba(200,20,0,0.75) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,0.7),
              0 0 36px rgba(200,20,0,0.22) !important;
}
.product-card[data-category="magic-the-gathering"]:hover {
  border-color: rgba(0,128,255,0.75) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,0.7),
              0 0 36px rgba(0,128,255,0.20) !important;
}

/* ════════════════════════════════════════════════════════════════
   TABLET RESPONSIVE — fixes 769px–1024px (solo nav)
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {

  /* ── HERO BANNER ─────────────────────────────────────────────── */
  .hero-banner {
    height: 460px !important;
    min-height: 460px !important;
  }

  /* Contenido: izquierda, no centrado, más estrecho */
  .hb-content {
    left: 4% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: 52% !important;
    text-align: left !important;
    width: auto !important;
  }

  /* Logo del set más pequeño */
  .hb-logo {
    max-height: 90px !important;
    margin-bottom: 0.7rem !important;
  }

  /* Título */
  .hb-title {
    font-size: clamp(1.8rem, 4.5vw, 2.8rem) !important;
    margin-bottom: 0.4rem !important;
  }

  /* Subtítulo */
  .hb-sub {
    font-size: 0.75rem !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 1.2rem !important;
  }

  /* Botones más compactos */
  .hb-content .btn-clean-white,
  .hb-content .btn-clean-yellow {
    padding: 0.65rem 1.4rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 1.5px !important;
  }

  /* Alineación botones a la izquierda */
  .hb-content .hero-actions {
    justify-content: flex-start !important;
  }

  /* Imagen producto: derecha, tamaño reducido */
  .hb-product-img {
    right: 2% !important;
    height: 78% !important;
    max-width: 38% !important;
  }

  /* OP-17 título */
  .hb-title-op17 {
    font-size: clamp(1.4rem, 3.5vw, 2.2rem) !important;
    white-space: normal !important;
  }

  /* Nav: evitar que "FLESH & BLOOD" etc. partan en 2 líneas */
  .main-nav a,
  .nav-text {
    white-space: nowrap !important;
  }

  /* Nav: fuente y gap reducidos para que entren todos los items */
  .main-nav ul {
    gap: 0 !important;
  }
  .main-nav a {
    font-size: 0.72rem !important;
    padding: 0.3rem 0.55rem !important;
    letter-spacing: 0 !important;
  }

  /* MTG icon: tamaño intermedio + recortar whitespace SVG */
  .nav-icon-wrapper img[alt="MTG"] {
    width: 28px !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  /* Prod slider: menos padding lateral */
  .prod-slider-track {
    padding: 1rem 1.5rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — fixes completos ≤768px / ≤480px
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── HEADER: reset total y layout limpio ─────────────────────── */
  .main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
  }

  .header-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    min-height: 46px !important;
    padding: 0.3rem 0.75rem !important;
    gap: 0.5rem !important;
    overflow: visible !important;
  }

  /* Logo: pequeño y pegado al flujo normal */
  .logo {
    flex: 0 0 auto !important;
    align-items: center !important;
    padding-top: 0 !important;
  }
  .header-logo-img {
    height: 34px !important;
    width: auto !important;
    margin-top: 0 !important;
    object-fit: contain !important;
  }

  /* Búsqueda: ocultar en mobile, no hay espacio */
  .search-container {
    display: none !important;
  }

  /* Botones de acción: a la derecha */
  .header-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.15rem !important;
  }
  .hdr-icon-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 1.05rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Nav: scroll horizontal sin scrollbar */
  .header-bottom {
    height: auto !important;
    min-height: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
  }
  .header-bottom::-webkit-scrollbar { display: none !important; }

  .main-nav {
    width: 100% !important;
  }
  .main-nav ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0.2rem 0.4rem !important;
    width: max-content !important;
    align-items: center !important;
  }
  .main-nav a {
    font-size: 0.66rem !important;
    padding: 0.3rem 0.45rem !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
  }
  .nav-text {
    white-space: nowrap !important;
  }
  /* Icono MTG más pequeño en nav mobile + recortar whitespace SVG */
  .nav-icon-wrapper img[alt="MTG"] {
    width: 22px !important;
    margin-left: -5px !important;
    margin-right: -5px !important;
  }
  .menu-arrow { display: none !important; }

  /* ── HERO BANNER — height y layout reemplazados al final del archivo ── */

  /* Título OP-17: permitir wrap en mobile */
  .hb-title-op17 {
    white-space: normal !important;
    font-size: clamp(1.5rem, 6.5vw, 2.2rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0.7rem !important;
  }

  /* Título genérico hero */
  .hb-title {
    font-size: clamp(1.8rem, 8vw, 3rem) !important;
    letter-spacing: -0.5px !important;
  }

  /* Tag */
  .hb-tag {
    font-size: 0.62rem !important;
    letter-spacing: 4px !important;
    margin-bottom: 0.5rem !important;
  }

  /* Subtítulo */
  .hb-sub {
    font-size: 0.7rem !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 1rem !important;
  }

  /* Logo hero banner — más espacio debajo para separar de botones */
  .hb-logo {
    max-height: 110px !important;
    margin-bottom: 1.4rem !important;
  }

  /* Botones en columna centrados */
  .hb-content .hero-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  .hb-content .btn-clean-white,
  .hb-content .btn-clean-yellow {
    width: 190px !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.5px !important;
  }

  /* Paginación: flechas laterales en mobile */
  #hero-pag {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 0.5rem !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    pointer-events: none !important;
  }
  /* Ocultar el contador */
  #hero-counter {
    display: none !important;
  }
  /* Flechas circulares compactas */
  #hero-prev,
  #hero-next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: all !important;
    padding: 0 !important;
  }

  /* ── HERO COLLAGE ────────────────────────────────────────────── */
  .hero-collage {
    height: 380px !important;
    min-height: 380px !important;
  }
  .hc-content {
    width: 86vw !important;
    max-width: 86vw !important;
  }
  .hc-title {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
    letter-spacing: -1px !important;
  }

  /* ── CATEGORÍAS ──────────────────────────────────────────────── */
  .cat-card {
    flex: 0 0 calc(50% - 0.5rem) !important;
    height: 140px !important;
  }
  .cat-grid { gap: 0.75rem !important; }

  /* Body: padding reducido */
  .cat-body {
    padding: 0.75rem 0.9rem !important;
  }
  /* Título: más pequeño, sin letra-spacing */
  .cat-body h3 {
    font-size: 0.95rem !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    margin-bottom: 0.15rem !important;
  }
  /* Subtítulo: fuente más pequeña */
  .cat-body p {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
  }
  /* Ocultar badge e icono grande — ganan espacio para el texto */
  .cat-badge { display: none !important; }
  .cat-icon  { display: none !important; }

  /* ── PRODUCT GRID ────────────────────────────────────────────── */
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    padding: 0.75rem !important;
  }

  /* ── BOTONES AÑADIR — columna en tarjetas mobile ─────────────── */
  .add-to-cart-row {
    flex-direction: column !important;
    gap: 0.4rem !important;
    margin-top: 0.6rem !important;
  }
  .qty-selector {
    width: 100% !important;
    justify-content: center !important;
  }
  .qty-sel-btn {
    flex: 1 !important;
    width: auto !important;
  }
  .qty-sel-input {
    flex: 0 0 40px !important;
    width: 40px !important;
  }
  .btn-add-cart {
    width: 100% !important;
    font-size: 0.72rem !important;
    padding: 0.5rem 0 !important;
    letter-spacing: 1.5px !important;
    margin-top: 0 !important;
  }

  /* ── PROD SLIDER ─────────────────────────────────────────────── */
  .prod-slider-item {
    flex: 0 0 210px !important;
    width: 210px !important;
  }
  .prod-slider-track {
    padding: 0.5rem 0.75rem !important;
    gap: 14px !important;
  }

  /* ── FOOTER ──────────────────────────────────────────────────── */
  .footer-content {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }
  .social-icons { justify-content: center !important; }
}

/* ── Pantallas muy pequeñas ≤480px ────────────────────────────── */
@media (max-width: 480px) {

  .header-logo-img { height: 28px !important; }

  .hero-banner {
    height: 340px !important;
    min-height: 340px !important;
  }
  .hb-title-op17 {
    font-size: clamp(1.25rem, 6vw, 1.8rem) !important;
  }
  .hb-sub { display: none !important; }

  .hb-content .btn-clean-white,
  .hb-content .btn-clean-yellow {
    width: 160px !important;
    font-size: 0.7rem !important;
    padding: 0.6rem 0.8rem !important;
  }

  .product-grid {
    grid-template-columns: 1fr !important;
    padding: 0.5rem !important;
  }
  .cat-card { height: 130px !important; }
}


/* ── MTG nav icon desktop: recortar whitespace interno del SVG ── */
@media (min-width: 1025px) {
  .nav-icon-wrapper img[alt="MTG"] {
    width: 72px !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   HERO TABLET — 768px a 1024px
   El layout desktop centra el contenido en toda la página y choca
   con el producto. Aquí lo desplazamos a la mitad izquierda con
   el logo/título centrado dentro de esa mitad.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Contenido: ocupa la mitad izquierda, texto centrado dentro */
  .hb-content {
    left: 0 !important;
    width: 50% !important;
    max-width: 50% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
  }

  /* Logo centrado dentro de su bloque */
  .hb-logo {
    margin: 0 auto 1rem auto !important;
    max-height: 100px !important;
  }

  /* Título razonable para tablet */
  .hb-title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  }

  /* Subtítulo visible */
  .hb-sub {
    display: block !important;
    white-space: normal !important;
    font-size: 0.8rem !important;
    margin-bottom: 1rem !important;
  }

  /* Botones centrados, en columna con ancho fijo */
  .hb-content .hero-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.6rem !important;
  }
  .hb-content .btn-clean-white,
  .hb-content .btn-clean-yellow {
    width: 200px !important;
    text-align: center !important;
  }

  /* Producto: derecha, bien separado del contenido */
  .hb-product-img {
    max-width: 38% !important;
    right: 3% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   HERO MOBILE — layout vertical: texto arriba, producto abajo
   Breakpoint: max-width:767px (768px = iPad → usa desktop CSS)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Hero con altura suficiente para el layout apilado */
  .hero-banner {
    height: 400px !important;
    min-height: 400px !important;
  }

  /* ── REVEAL: hijos siempre visibles en mobile ────────────────
     El slide padre controla la visibilidad con su propia opacity.
     Los hijos no necesitan su propio reveal animado en mobile.
  ──────────────────────────────────────────────────────────── */
  .hb-slide .hb-logo,
  .hb-slide .hb-title,
  .hb-slide .hb-sub,
  .hb-slide .hb-content .hero-actions {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
  }

  /* ── CONTENIDO: zona superior centrada ───────────────────────*/
  .hb-content {
    position: absolute !important;
    top: 1.4rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 88% !important;
    max-width: 88% !important;
    text-align: center !important;
  }

  /* Logo centrado */
  .hb-logo {
    max-height: 68px !important;
    margin: 0 auto 0.5rem auto !important;
    display: block !important;
  }

  /* Tag oculto */
  .hb-tag { display: none !important; }

  /* Título compacto */
  .hb-title {
    font-size: clamp(1.5rem, 7vw, 2.4rem) !important;
    margin-bottom: 0.3rem !important;
    line-height: 1.15 !important;
  }

  /* Subtítulo: oculto para ganar espacio vertical */
  .hb-sub { display: none !important; }

  /* Botones en fila centrada */
  .hb-content .hero-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-top: 0.6rem !important;
  }
  .hb-content .btn-clean-white,
  .hb-content .btn-clean-yellow {
    width: auto !important;
    padding: 0.5rem 1.1rem !important;
    font-size: 0.68rem !important;
    text-align: center !important;
  }

  /* ── PRODUCTO: justo debajo del contenido, centrado ─────────*/
  .hb-product-img {
    position: absolute !important;
    top: 46% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    height: 44% !important;
    width: auto !important;
    max-width: 46% !important;
    opacity: 1 !important;
    animation: none !important;
    display: block !important;
  }

  /* ── Flechas de navegación en los laterales ──────────────────*/
  #hero-pag {
    top: 50% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 0.4rem !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    pointer-events: none !important;
  }
  #hero-counter { display: none !important; }
  #hero-prev, #hero-next {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: all !important;
    padding: 0 !important;
  }
}