/* Carrusel de productos más vendidos CYBERPUNK */
.bestsellers-section {
  background: transparent;
  position: relative;
}

.bestsellers-carousel {
  position: relative;
  margin-bottom: 2rem;
}

.bestsellers-track {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #00D4FF rgba(15, 23, 42, 0.5);
  -ms-overflow-style: auto;
}

.bestsellers-track::-webkit-scrollbar {
  height: 8px;
}

.bestsellers-track::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 10px;
}

.bestsellers-track::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #0041C2, #00D4FF);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.bestseller-card {
  flex: 0 0 auto;
  width: 260px;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(20px);
  border-radius: 1.25rem;
  box-shadow: 
    0 0 1px rgba(0, 212, 255, 0.5),
    0 10px 30px rgba(0, 0, 0, 0.5),
    inset 0 0 30px rgba(0, 212, 255, 0.05);
  border: 2px solid rgba(0, 212, 255, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 1.25rem 1rem;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bestseller-card::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 1rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.bestseller-card:hover::after {
  opacity: 1;
}

.bestseller-card:hover {
  transform: translateY(-10px) scale(1.03);
  border-color: #00D4FF;
  box-shadow: 
    0 0 30px rgba(0, 212, 255, 0.6),
    0 20px 50px rgba(0, 65, 194, 0.4),
    inset 0 0 50px rgba(0, 212, 255, 0.1);
}

.bestseller-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(255, 183, 3, 0.3);
  backdrop-filter: blur(10px);
  color: #FFD700;
  font-size: 0.85rem;
  font-weight: 900;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 2px solid #FFB703;
  box-shadow: 
    0 0 20px rgba(255, 183, 3, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bestseller-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 1.2rem;
  background: #f3f4f6;
  border-radius: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.bestseller-info {
  width: 100%;
  text-align: center;
}
.bestseller-brand {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2563eb;
  margin-bottom: 0.25rem;
  letter-spacing: 0.01em;
}
.bestseller-name {
  display: block;
  font-size: 1.08rem;
  font-weight: 500;
  color: #22223b;
  margin-bottom: 0.5rem;
}
.bestseller-prices {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.7rem;
}
.bestseller-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1e90ff;
}
.bestseller-oldprice {
  font-size: 1rem;
  color: #a0aec0;
  text-decoration: line-through;
  font-weight: 500;
}
.bestsellers-carousel .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.85);
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-radius: 9999px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: 1.5rem;
  color: #1e293b;
  transition: background 0.18s, box-shadow 0.18s;
}
.bestsellers-carousel .carousel-btn:hover {
  background: #e0f2fe;
  box-shadow: 0 4px 16px rgba(30,144,255,0.10);
}
/* Ocultar scrollbar en carrusel de marcas */
.brands-track {
  scrollbar-width: none; /* Firefox */
}
.brands-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}
/* Ocultar scrollbar en carrusel de categorías */
.categories-carousel {
  scrollbar-width: none; /* Firefox */
}
.categories-carousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* Ocultar scrollbar en carrusel de ofertas */
.offers-carousel .carousel-track {
  scrollbar-width: none; /* Firefox */
}
.offers-carousel .carousel-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}
/* Estilos para la sección de marcas en carrusel */
.brands-section {
  background: #fff;
  padding: 44px 0 32px 0;
  overflow: visible;
}
.brands-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 18px;
  overflow: visible;
}
.brands-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.brands-title {
  font-size: 2rem;
  font-weight: 800;
  color: #0041C2;
}
.brands-link {
  color: #0041C2;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.18s;
}
.brands-link:hover {
  color: #3366FF;
}
.brands-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  margin-bottom: 18px;
  overflow: visible;
}
.carousel-btn {
  background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
  color: #0041C2;
  border-radius: 14px;
  width: 56px;
  height: 56px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease;
  z-index: 2;
  box-shadow: 0 10px 26px rgba(2,6,23,0.12);
  border: none;
}
.carousel-btn:hover {
  background: linear-gradient(135deg, #0041C2 0%, #3366FF 100%);
  color: #ffffff;
  box-shadow: 0 18px 36px rgba(3,35,102,0.18);
}
.brands-track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  padding: 24px 0;
}
.brand-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0, 65, 194, 0.09);
  min-width: 180px;
  max-width: 180px;
  /* aumentar altura para evitar recorte de logos grandes */
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.18s, transform 0.18s;
  border: 2px solid #F5F8FF;
}
.brand-card:hover {
  box-shadow: 0 16px 48px rgba(0, 65, 194, 0.20);
  transform: translateY(-2px) scale(1.04);
  border-color: #0041C2;
}
.brand-img {
  /* permitir que el logo ocupe más altura sin recortar */
  max-width: 140px;
  /* altura objetivo para mostrar logos verticales/horizontales correctamente */
  max-height: 160px;
  /* preferimos que la imagen mida en altura y mantenga proporción */
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: top center;
  display: block;
}
.brands-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.brands-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #E8F0FF;
  transition: background 0.18s;
  cursor: pointer;
}
.brands-dot.active {
  background: #0041C2;
  box-shadow: 0 4px 12px rgba(0, 65, 194, 0.3);
}

/* Estilos para Deal del día */
.deal-section .deal-media img { border-radius: 8px; }
.deal-section .deal-price { font-size: 1.75rem; }
.deal-section .deal-old { font-size: 0.95rem; }
.deal-section .deal-buy { box-shadow: 0 8px 24px rgba(14,65,255,0.12); }
.deal-section .deal-add { border-color: rgba(14,65,255,0.12); }

/* Estilos para sección 'Por qué elegirnos' */
.feature-card { border: 1px solid #eef3fb; }
.feature-card .icon { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.feature-card h3 { color: #0f172a; }
.feature-card p { color: #475569; }
.feature-card:hover { transform: translateY(-6px); }

/* Footer personalizado: fondo rojo con textura tenue */
.site-footer {
  background-color: #6b1313 !important; /* fondo base */
  /* patrón SVG repetible (data URI): hexágonos formados por líneas (percent-encoded) */
  /* wireframe hexagon pattern: each hexagon is drawn using stroke lines */
    /* Patrón hexágonos rellenos de líneas paralelas, alternando orientación */
    /* Fondo más llamativo: gradiente + patrón SVG + overlay de brillo */
    /* Default: patrón SVG (ruta relativa al propio CSS file), más overlay para profundidad */
    background-image:
      radial-gradient(circle at 10% 20%, rgba(255,255,255,0.03), transparent 18%),
      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08)),
      url("Background.svg");
    background-repeat: repeat;
    /* sizes correspond to each background layer above */
    background-size: 240px 240px, cover, 160px 160px;
    background-blend-mode: screen, overlay, normal;
    box-shadow: inset 0 10px 40px rgba(0,0,0,0.30);
    border-top: 4px solid rgba(255,255,255,0.03);
  color: #ffffff !important;
  position: relative;
  z-index: 20;
}
/* Variantes para comparar visualmente */
.site-footer.footer-variant-soft {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.02), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06)),
    url("Background.svg");
  background-size: 300px 300px, cover, 200px 200px;
  box-shadow: inset 0 8px 30px rgba(0,0,0,0.22);
}
.site-footer.footer-variant-medium {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.03), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08)),
    url("Background.svg");
  background-size: 240px 240px, cover, 160px 160px;
  box-shadow: inset 0 10px 40px rgba(0,0,0,0.30);
}
.site-footer.footer-variant-intense {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.04), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12)),
    url("Background.svg");
  background-size: 200px 200px, cover, 140px 140px;
  box-shadow: inset 0 14px 50px rgba(0,0,0,0.36);
}
.site-footer h3, .site-footer h4 { color: #ffffff !important; }
.site-footer p, .site-footer li, .site-footer a { color: rgba(255,255,255,0.95) !important; }
.site-footer a:hover { color: #ffffff !important; text-decoration: underline; }
.site-footer .border-t { border-color: rgba(255,255,255,0.06) !important; }
.site-footer * { color: rgba(255,255,255,0.95) !important; }
@media (max-width: 900px) {
  .brands-track {
    gap: 12px;
  }
  .brand-card {
    min-width: 140px;
    max-width: 140px;
    /* versión mobile con más espacio vertical para logos */
    height: 160px;
  }
  .brand-img {
    max-width: 110px;
    max-height: 110px;
    height: 100%;
    width: auto;
  }
}

/* Estilos del buscador mejorado (glass + CTA + sugerencias) */
.search-shell { width: 100%; }
.search-bar { height: 56px; display: flex; align-items: center; }
/* Mejorar visibilidad de los botones principales de la barra de búsqueda */
.search-bar .btn-cta,
.search-bar .btn-search {
  background: linear-gradient(135deg, #0041C2, #3366FF);
  border: 2px solid #0041C2;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(0, 65, 194, 0.25);
  transition: transform .12s ease, box-shadow .12s ease;
  outline: none;
}
.search-bar .btn-cta:hover,
.search-bar .btn-search:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 32px rgba(0, 65, 194, 0.35);
  background: linear-gradient(135deg, #002B85, #0041C2);
}
.search-bar #searchCategory,
.search-bar .btn-category {
  background: #fff;
  color: #0041C2;
  border: 2px solid #0041C2;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(0, 65, 194, 0.10);
  transition: background .12s, color .12s, box-shadow .12s;
}
.search-bar #searchCategory:hover,
.search-bar .btn-category:hover {
  background: #0041C2;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 65, 194, 0.20);
}
.search-bar #infoBtn,
.search-bar .btn-info {
  background: rgba(227, 24, 55, 0.1);
  color: #E31837;
  border: 2px solid #E31837;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(227, 24, 55, 0.10);
  transition: background .12s, color .12s, box-shadow .12s;
}
.search-bar #infoBtn:hover,
.search-bar .btn-info:hover {
  background: #E31837;
  color: #fff;
  box-shadow: 0 8px 18px rgba(227, 24, 55, 0.20);
}
.search-shell #searchSuggestions { max-height: 280px; }
.search-shell #searchSuggestions ul li { padding: 10px 14px; cursor: pointer; }
.search-shell #searchSuggestions ul li:hover { background: #f8fafc; }
.search-shell .highlight { background: rgba(37,99,235,0.06); }

/* mobile: mantener la barra de búsqueda visible en tamaños pequeños
   y ajustar el CTA para que sea legible y usable en móviles. */
@media (max-width: 767px) {
  .search-shell { display: block; padding: 0 12px; }
  .search-bar { height: 48px; }
  .search-bar .btn-cta { padding: 10px 18px; font-size: 16px; }
  .search-bar #searchCategory, .search-bar #infoBtn { padding: 10px 16px; font-size: 15px; }
  /* permitir que el contenido interior tenga algo de espacio para no quedar cortado */
  .search-bar { overflow: visible; }
}

/* Info popover (botón Info junto al buscador) */
#infoBtn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.04); }
#infoPopover { font-size: 0.95rem; }
#infoPopover .info-link { text-decoration: none; }
#infoPopover .info-link:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  #infoPopover { right: 8px; left: auto; width: 88vw; max-width: 420px; }
}