* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #f4f6f8;
  margin: 0;
  color: #333;
}

/* TOP BAR */

.top-bar {
  background: linear-gradient(90deg, #4b006e, #7a4d8f);
  color: white;
  text-align: center;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

.top-bar span {
  white-space: nowrap;
}

/* HEADER */

.main-header {
  background: white;
  padding: 8px 25px;
  display: block;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-bottom: 1px solid #eee;
}

@media (max-width: 900px) {
  /* En mobile el header (logo + categorías + buscador + accesos) mide varios
     cientos de px de alto: si queda "sticky" tapa el inicio de las tarjetas
     de producto al hacer scroll. Se deja fijo en su lugar normal en pantallas
     chicas en vez de pegado arriba. */
  .main-header {
    position: static;
  }
}

.header-top {
  max-width: 1250px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.header-left-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.quick-categories {
  position: relative;
  flex-shrink: 0;
}

.category-menu-btn {
  background: #7a4d8f;
  color: white;
  border: none;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  font-size: 15px;
}

.category-dropdown {
  display: none;
  position: absolute;
  top: 52px;
  left: 0;
  background: white;
  min-width: 250px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  padding: 10px;
  z-index: 1000;
}

.category-dropdown.show {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.category-dropdown button {
  border: none;
  background: transparent;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: bold;
  color: #4b006e;
  cursor: pointer;
}

.category-dropdown button:hover {
  background: #f7f2fa;
}

.search-box {
  display: flex;
  width: 100%;
  background: #f4f6f8;
  border: 1px solid #ddd;
  border-radius: 30px;
  overflow: hidden;
}

.search-box input {
  border: none;
  background: transparent;
  padding: 13px 18px;
  width: 100%;
  font-size: 15px;
  outline: none;
  margin: 0;
}

.search-box button {
  width: 55px;
  border: none;
  background: #7a4d8f;
  color: white;
  cursor: pointer;
  font-size: 18px;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cart-shortcut,
.raffle-shortcut {
  background: #f7f2fa;
  color: #4b006e;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(0,0,0,0.07);
}

.cart-shortcut:hover,
.raffle-shortcut:hover {
  background: #7a4d8f;
  color: white;
}

#headerCartCount {
  background: #ffc107;
  color: #333;
  padding: 3px 7px;
  border-radius: 50%;
  margin-left: 4px;
  font-size: 12px;
}

.nav-right-logo img {
  width: 58px;
  height: auto;
  display: block;
}

/* BANNER */

.hero-slider {
  position: relative;
  /* Los banners (images/banners/banner*.png) son 1535x354px — se usa esa
     misma proporción acá en vez de una altura fija, para que el slider
     nunca tenga que recortar los bordes de la imagen con object-fit:cover
     (antes el alto fijo no coincidía con la proporción real del banner y
     se comían el texto de los costados). */
  aspect-ratio: 1535 / 354;
  overflow: hidden;
}

.slide {
  display: none;
  position: absolute;
  inset: 0;
}

.slide.active {
  display: block;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.65);
}

/* Banner "Regalo del Mes" del slider — hecho en CSS (no imagen fija) para
   poder editar el texto sin depender de retocar un PNG. */
.regalo-banner-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(120deg, #2f0047, #4b006e 45%, #7a4d8f 75%, #ffc107 130%);
  background-size: 200% 200%;
  animation: gift-gradient-shift 8s ease infinite;
}

.regalo-banner-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.regalo-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.8vw, 8px);
  text-align: center;
  padding: 0 16px;
}

.regalo-banner-icon {
  font-size: clamp(14px, 3vw, 30px);
  color: #ffc107;
  animation: pulse 1.8s infinite;
}

.regalo-banner-title {
  font-size: clamp(16px, 4.2vw, 44px);
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.regalo-banner-title strong {
  color: #ffc107;
}

.regalo-banner-subtitle {
  display: none;
  font-size: clamp(11px, 1.3vw, 16px);
  color: rgba(255, 255, 255, 0.9);
  max-width: 480px;
}

.regalo-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(2px, 0.6vw, 10px);
  background: white;
  color: #4b006e;
  font-weight: bold;
  font-size: clamp(9px, 1.1vw, 15px);
  padding: clamp(4px, 0.8vw, 12px) clamp(10px, 1.6vw, 22px);
  border-radius: 30px;
  text-transform: uppercase;
}

@media (min-width: 620px) {
  .regalo-banner-subtitle {
    display: block;
  }
}

/* CONTAINER */

.container {
  max-width: 1150px;
  margin: auto;
  padding: 25px;
}

h2 {
  text-align: center;
  margin-top: 35px;
  color: #4b006e;
}

/* CATEGORÍAS POPULARES */

.popular-categories-section {
  margin-top: 25px;
}

.popular-categories {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin: 25px 0;
}

.popular-category {
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
}

.popular-category img {
  width: 115px;
  height: 115px;
  object-fit: cover;
  border-radius: 50%;
  background: white;
  padding: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transition: 0.25s ease;
  animation: popular-category-float 2.6s ease-in-out infinite;
}

/* Cada ícono arranca el "flote" en un momento distinto para que no se
   muevan todos a la vez — se ve más vivo y llama más la atención. */
.popular-category:nth-child(2) img { animation-delay: 0.15s; }
.popular-category:nth-child(3) img { animation-delay: 0.3s; }
.popular-category:nth-child(4) img { animation-delay: 0.45s; }
.popular-category:nth-child(5) img { animation-delay: 0.6s; }
.popular-category:nth-child(6) img { animation-delay: 0.75s; }

@keyframes popular-category-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.03); }
}

.popular-category span {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  color: #4b006e;
  font-size: 14px;
  transition: color 0.25s ease;
}

.popular-category:hover img {
  animation-play-state: paused;
  transform: translateY(-10px) scale(1.08);
  box-shadow: 0 12px 26px rgba(122,77,143,0.3);
}

.popular-category:active img {
  animation-play-state: paused;
  transform: scale(0.92);
  box-shadow: 0 4px 10px rgba(122,77,143,0.25);
}

.popular-category:hover span {
  color: #7a4d8f;
}

@media (prefers-reduced-motion: reduce) {
  .popular-category img {
    animation: none;
  }
}

/* PRODUCT SECTION */

.product-section {
  background: linear-gradient(135deg, #ffffff, #f7f2fa);
  padding: 25px;
  border-radius: 18px;
  margin-top: 35px;
  box-shadow: 0 0 14px rgba(0,0,0,0.06);
}

.section-header {
  text-align: center;
  margin-bottom: 20px;
}

.section-header h2 {
  margin-bottom: 5px;
}

.section-header p {
  color: #666;
  margin-top: 0;
}

.product-carousel {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.carousel-window {
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 18px;
  transition: transform 0.4s ease;
  will-change: transform;
}

.carousel-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(122, 77, 143, 0.22);
  border-radius: 50%;
  background: #fff;
  color: #7a4d8f;
  font-size: 16px;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(122, 77, 143, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.carousel-btn:hover {
  background: linear-gradient(135deg, #7a4d8f, #4b006e);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 22px rgba(122, 77, 143, 0.35);
}

.carousel-btn:active {
  transform: scale(0.92);
  box-shadow: 0 3px 8px rgba(122, 77, 143, 0.25);
}

/* PRODUCTS */

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.product-card {
  background: white;
  padding: 15px;
  border-radius: 14px;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
  text-align: center;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* Columna flex para que el botón "Agregar al carrito" (margin-top:auto,
     ver más abajo) siempre quede pegado abajo, sin importar cuánto texto
     tenga la descripción del producto. */
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 22px rgba(0,0,0,0.14);
}

.product-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.25s ease;
}

.product-card:hover img {
  transform: scale(1.03);
}

.carousel-track .product-card img {
  height: 220px;
}

.product-card h3 {
  font-size: 17px;
  min-height: 45px;
}

.product-card p {
  font-size: 14px;
  color: #666;
}

.price {
  font-size: 20px;
  color: #4b006e;
  font-weight: bold;
}

.old-price {
  color: #888;
  text-decoration: line-through;
  font-size: 14px;
}

.stock {
  font-size: 13px;
  color: #555;
  /* Espacio mínimo antes del botón (que ahora se ancla abajo con
     margin-top:auto), para que nunca queden pegados en la tarjeta más
     alta de la fila. */
  margin-bottom: 10px;
}

.badge {
  /* Antes iba position:absolute encima de la imagen (top:12px/left:12px),
     tapando parte de la foto. Ahora es un elemento normal que empuja la
     imagen hacia abajo en vez de superponerse a ella. */
  display: inline-block;
  align-self: flex-start;
  color: white;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px;
}

.badge.offer {
  background: #dc3545;
}

.badge.today {
  background: #25D366;
}

.badge.trending {
  background: #7a4d8f;
}

.badge.best {
  background: #ffc107;
  color: #333;
}

.product-card button {
  width: 100%;
  padding: 12px;
  margin-top: auto;
  border: none;
  border-radius: 8px;
  background: #7a4d8f;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.product-card button:hover {
  background: #5f3570;
}

/* CART */

.cart-section,
.checkout-section {
  background: white;
  padding: 22px;
  border-radius: 14px;
  margin-top: 25px;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
}

.cart-count {
  display: inline-block;
  background: #ffc107;
  color: #333;
  padding: 4px 9px;
  border-radius: 50%;
  font-size: 14px;
  margin-left: 6px;
}

.cart-bounce {
  animation: cartBounce 0.4s ease;
}

@keyframes cartBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.cart-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

.cart-item button {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}

.total {
  text-align: right;
  font-size: 20px;
}

/* CHECKOUT */

input {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.file-upload {
  margin-top: 15px;
}

.file-label {
  display: block;
  width: 100%;
  background: #7a4d8f;
  color: white;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
}

.file-name {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #555;
  text-align: center;
}

.request-btn,
.whatsapp-mode {
  width: 100%;
  padding: 13px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  font-size: 16px;
}

.request-btn {
  background: #25D366;
  color: white;
}

.whatsapp-mode {
  background: #ffc107 !important;
  color: #333 !important;
}

/* MESSAGES */

.message-box {
  display: none;
  margin-top: 15px;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
}

.message-box.success {
  display: block;
  background: #d4edda;
  color: #155724;
}

.message-box.error {
  display: block;
  background: #f8d7da;
  color: #721c24;
}

/* ASISTENTE DE IA (chat flotante) */

.ai-assistant-floating-btn {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4b006e, #7a4d8f);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.2s ease;
  animation: aiAssistantPulse 2.2s infinite;
}

@keyframes aiAssistantPulse {
  0% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 0 rgba(122,77,143,0.5); }
  70% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 14px rgba(122,77,143,0); }
  100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 0 rgba(122,77,143,0); }
}

.ai-assistant-floating-btn:hover {
  transform: scale(1.06);
}

.ai-assistant-panel {
  position: fixed;
  left: 20px;
  bottom: 90px;
  width: 340px;
  max-width: calc(100vw - 40px);
  height: 480px;
  max-height: calc(100vh - 140px);
  background: white;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ai-assistant-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ai-assistant-header {
  background: linear-gradient(135deg, #4b006e, #7a4d8f);
  color: white;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.ai-assistant-header button {
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}

.ai-assistant-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f4f6f8;
}

.ai-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
}

.ai-msg-assistant {
  align-self: flex-start;
  background: white;
  color: #333;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.ai-msg-user {
  align-self: flex-end;
  background: #4b006e;
  color: white;
  border-bottom-right-radius: 4px;
}

.ai-msg-typing {
  color: #888;
  font-style: italic;
}

.ai-msg-error {
  background: #fbeae8;
  color: #c0392b;
}

.ai-assistant-input-row {
  display: flex;
  border-top: 1px solid #eee;
  padding: 10px;
  gap: 8px;
}

.ai-assistant-input-row input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 10px 14px;
  font-size: 14px;
}

.ai-assistant-input-row button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #4b006e;
  color: white;
  cursor: pointer;
  flex-shrink: 0;
}

.ai-assistant-input-row button:hover {
  background: #7a4d8f;
}

@media (max-width: 900px) {
  .ai-assistant-floating-btn {
    left: 12px;
    bottom: 12px;
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .ai-assistant-panel {
    left: 12px;
    bottom: 74px;
    width: calc(100vw - 24px);
  }
}

/* FLOATING WHATSAPP */

.whatsapp-floating-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: white;
  border-radius: 50%;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 1000;
  animation: whatsappPulse 2.2s infinite;
}

.whatsapp-floating-btn:hover {
  background: #1ebe5d;
  color: white;
}

@keyframes whatsappPulse {
  0% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 0 rgba(37,211,102,0.5); }
  70% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 0 rgba(37,211,102,0); }
}

@media (max-width: 900px) {
  .whatsapp-floating-btn {
    right: 12px;
    bottom: 12px;
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}

/* FLOATING RAFFLE */

.raffle-floating-btn {
  position: fixed;
  right: 20px;
  /* Se apila arriba de la burbuja de WhatsApp, que ocupa esa misma esquina. */
  bottom: 90px;
  background: linear-gradient(45deg, #7a4d8f, #ffc107);
  color: white;
  padding: 14px 18px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 15px rgba(0,0,0,0.25);
  animation: pulse 1.5s infinite;
  z-index: 999;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .header-top {
    flex-direction: column;
  }

  .header-left-group {
    width: 100%;
  }

  .header-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .popular-categories {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 520px) {
  .top-bar {
    font-size: 12px;
    gap: 8px;
  }

  .header-left-group {
    flex-direction: column;
  }

  .quick-categories,
  .search-box {
    width: 100%;
  }

  .category-menu-btn {
    width: 100%;
  }


  .container {
    padding: 12px;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .popular-categories {
    grid-template-columns: repeat(2, 1fr);
  }

  .popular-category img {
    width: 95px;
    height: 95px;
  }

  .product-section {
    padding: 15px;
  }

  .carousel-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .cart-item {
    flex-direction: column;
  }

  .raffle-floating-btn {
    right: 12px;
    bottom: 74px;
    font-size: 14px;
  }
}
.store-logo {
  height: 100px;
  width: 240px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-logo img {
  height: 150px;
  width: auto;
  display: block;
  transform: scale(1.25);
}
/* TODOS LOS PRODUCTOS */

.all-products-section {
  background: linear-gradient(135deg, #ffffff, #f4f6f8);
}

/* Este carrusel usaba antes una grilla fija de 4 columnas x 2 filas que
   nunca se adaptaba al ancho de pantalla (a diferencia de los demás
   carruseles, que sí reducen cuántos productos muestran en mobile/tablet)
   — por eso en celular se veían las tarjetas cortadas/amontonadas. Ahora
   usa exactamente el mismo carrusel de una fila que el resto (ver
   getVisibleCount() en script.js), sin reglas propias. */
/* FOOTER */

.main-footer {
  margin-top: 50px;
  background: linear-gradient(135deg, #3d004f, #6b2f7a);
  color: white;
  padding-top: 40px;
}

.footer-content {
  max-width: 1200px;
  margin: auto;
  padding: 0 25px 35px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
}

.footer-column h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
}

.footer-column p,
.footer-column a {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.7;
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
}

.footer-column a:hover {
  color: #ffc107;
}

.footer-store-logo {
  width: 220px;
  max-width: 100%;
  margin-bottom: 15px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center;
  padding: 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}
.footer-bottom a {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  font-family: inherit;
}

.footer-bottom a:hover {
  opacity: 0.8;
}

/* RESPONSIVE FOOTER */

@media (max-width: 900px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-store-logo {
    margin: auto auto 15px;
  }
}
/* FOOTER SOCIAL */

.footer-social-section {
  text-align: center;
  padding-bottom: 25px;
}

.footer-social-section h3 {
  margin-bottom: 18px;
  color: white;
}

.footer-social-icons {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.footer-social-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.25s ease;
  backdrop-filter: blur(6px);
}

.footer-social-circle:hover {
  transform: translateY(-5px) scale(1.08);
  background: rgba(255,255,255,0.22);
}

.footer-social-circle img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
i {
  margin-right: 6px;
}

.search-box button i,
.footer-social-circle i {
  margin-right: 0;
}
/* CATÁLOGO DIGITAL */

.catalog-section {
  margin-top: 40px;
  padding: 30px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff, #f7f2fa);
  box-shadow: 0 0 18px rgba(0,0,0,0.08);
}

.catalog-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  perspective: 1800px;
}

.catalog-book {
  width: 1050px;
  max-width: 100%;
  height: 720px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #eee;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,0.22);
  position: relative;
}

.catalog-page {
  background: white;
  padding: 34px;
  position: relative;
  overflow: hidden;
}

.catalog-page-left {
  border-right: 1px solid #ddd;
  background: linear-gradient(135deg, #fff, #f9f4fc);
}

.catalog-page-right {
  background: linear-gradient(135deg, #fff, #f6f6f6);
}

.catalog-page-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.catalog-category-title {
  font-size: 26px;
  color: #4b006e;
  margin-bottom: 8px;
}

.catalog-category-subtitle {
  color: #666;
  margin-bottom: 18px;
}

.catalog-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.catalog-product {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  text-align: center;
}

.catalog-product img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
}

.catalog-product h4 {
  font-size: 16px;
  margin: 8px 0 4px;
  color: #333;
}

.catalog-product .catalog-price {
  color: #4b006e;
  font-weight: bold;
}

.catalog-cover {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.catalog-cover h3 {
  font-size: 34px;
  color: #4b006e;
  margin-bottom: 10px;
}

.catalog-cover p {
  color: #666;
  font-size: 16px;
}

.catalog-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #7a4d8f;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: 0.25s;
  flex-shrink: 0;
}

.catalog-nav-btn:hover {
  background: #5f3570;
  transform: scale(1.08);
}

.catalog-controls {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
  color: #4b006e;
}

.catalog-flip-next {
  animation: flipNext 0.55s ease;
}

.catalog-flip-prev {
  animation: flipPrev 0.55s ease;
}

@keyframes flipNext {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-8deg) scale(0.98);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes flipPrev {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(8deg) scale(0.98);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@media (max-width: 900px) {
  .catalog-book {
    height: auto;
    grid-template-columns: 1fr;
  }

  .catalog-page-left {
    border-right: none;
    border-bottom: 1px solid #ddd;
  }

  .catalog-wrapper {
    gap: 8px;
  }

  .catalog-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .catalog-section {
    padding: 16px;
  }

  .catalog-wrapper {
    align-items: stretch;
  }

  .catalog-nav-btn {
    width: 38px;
    height: 38px;
  }

  .catalog-page {
    padding: 18px;
  }

  .catalog-products-grid {
    grid-template-columns: 1fr;
  }

  .catalog-product img {
    height: 150px;
  }
}
/* CATÁLOGO DIGITAL NUEVA PÁGINA */

.catalog-page-main {
  max-width: 1200px;
  margin: auto;
  padding: 35px 25px;
}

.catalog-hero {
  text-align: center;
  margin-bottom: 30px;
}

.catalog-hero h1 {
  color: #4b006e;
  font-size: 36px;
  margin-bottom: 8px;
}

.catalog-hero p {
  color: #666;
}

.digital-catalog-section {
  background: linear-gradient(135deg, #ffffff, #f7f2fa);
  padding: 30px;
  border-radius: 24px;
  box-shadow: 0 0 18px rgba(0,0,0,0.08);
}

.catalog-book-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  perspective: 1800px;
}

.single-product-book {
  position: relative;
  width: 900px;
  max-width: 100%;
  min-height: 620px;
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(0,0,0,0.22);
  transform-style: preserve-3d;
}

.single-product-page {
  min-height: 620px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.04) 0%, transparent 6%, transparent 94%, rgba(0,0,0,0.04) 100%),
    white;
}

.single-product-content {
  position: relative;
  /* Antes era CSS Grid (grid-template-columns:1fr 1fr) — en algunas
     páginas de producto, combinado con el transform-style:preserve-3d/
     perspective del volteo, Chrome partía mal las dos columnas (una mucho
     más angosta que la otra), corriendo el texto sobre la página de la
     imagen. Flexbox con flex:1 1 0 en ambos lados no tiene ese problema. */
  display: flex;
  /* La clase compartida .catalog-page-content (también usada por la página
     divisoria) pone flex-direction:column por defecto — acá se necesita en
     fila, lado a lado, así que se pisa explícito. */
  flex-direction: row;
  min-height: 620px;
}

/* Ojo: mismo nivel de especificidad (una sola clase) que los overrides de
   .single-product-image-area/.single-product-info-area en las media
   queries de abajo — con ">" acá le hubieran ganado sin importar el ancho
   de pantalla. */
.single-product-image-area,
.single-product-info-area {
  flex: 1 1 0;
  /* Sin esto, un nombre de producto muy largo empuja el ancho mínimo de su
     lado (los flex items no se encogen por debajo del contenido por
     defecto), robándole espacio al otro lado en vez de repartirse 50/50. */
  min-width: 0;
}

/* Sombra al centro imitando el pliegue/lomo de una revista abierta —
   la imagen queda como "página izquierda" y la info como "página derecha". */
@media (min-width: 901px) {
  .single-product-content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 46px;
    margin-left: -23px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.10), transparent);
    pointer-events: none;
    z-index: 1;
  }
}

.single-product-image-area {
  position: relative;
  overflow: hidden;
  background: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  /* Ancho forzado en vez de confiar en el stretch por defecto de la celda
     de grid: en algunas páginas de producto, combinado con el
     transform-style:preserve-3d/perspective del volteo, Chrome calculaba
     esta celda más ancha que su propio contenedor (el nombre del producto
     terminaba empujado/tapado). Con width:100% fijo ya no depende de ese
     cálculo. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.single-product-image-area img {
  width: 100%;
  max-height: 520px;
  /* Sin esto, algunos navegadores móviles no dejan que una imagen dentro
     de un contenedor flex se encoja por debajo de su tamaño natural,
     ignorando el max-height y desbordándose sobre el texto de abajo. */
  min-height: 0;
  min-width: 0;
  object-fit: contain;
  border-radius: 18px;
}

.single-product-info-area {
  padding: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.catalog-category {
  color: #7a4d8f;
  font-weight: bold;
  margin-bottom: 10px;
}

.single-product-info-area h2 {
  text-align: left;
  margin: 0 0 15px;
  font-size: 34px;
  color: #4b006e;
  /* Nombres de producto con texto largo sin espacios (ej. "USB/SD/FM/AUX")
     se trataban como una sola palabra gigante que no podía partir en
     varias líneas, desbordando la caja. Esto le permite cortar si hace
     falta. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.catalog-description {
  color: #555;
  line-height: 1.6;
  margin-bottom: 22px;
}

.catalog-price-area {
  margin-bottom: 12px;
}

.catalog-old-price {
  display: block;
  color: #888;
  text-decoration: line-through;
  font-size: 18px;
}

.catalog-current-price {
  display: block;
  color: #4b006e;
  font-size: 34px;
  font-weight: bold;
}

.catalog-stock {
  color: #555;
  margin-bottom: 25px;
}

.catalog-whatsapp-btn {
  display: inline-block;
  text-align: center;
  background: #25D366;
  color: white;
  padding: 14px 18px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: bold;
}

.catalog-whatsapp-btn:hover {
  background: #1ebe5d;
}

.catalog-offer-badge {
  position: absolute;
  top: 25px;
  left: 25px;
  background: #dc3545;
  color: white;
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: bold;
}

/* Galería de fotos del catálogo: flechas y puntitos superpuestos sobre la
   imagen (no ocupan espacio propio), para poder recorrer todas las fotos
   del producto sin cambiar el tamaño fijo de la página. */
.catalog-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}

.catalog-gallery-arrow:hover {
  background: rgba(0, 0, 0, 0.65);
}

.catalog-gallery-prev {
  left: 10px;
}

.catalog-gallery-next {
  right: 10px;
}

.catalog-gallery-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 6px;
}

.catalog-gallery-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.catalog-gallery-dot.active {
  background: #7a4d8f;
}

.catalog-page-btn {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  border: none;
  background: #7a4d8f;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: 0.25s;
}

.catalog-page-btn:hover {
  background: #5f3570;
  transform: scale(1.08);
}

.catalog-bottom-controls {
  text-align: center;
  margin-top: 18px;
  color: #4b006e;
  font-weight: bold;
}

.catalog-loading {
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b006e;
  font-weight: bold;
  font-size: 20px;
}

/* Página divisoria entre categorías del catálogo: anuncia la sección que
   empieza, para reforzar la sensación de "revista con secciones". */
.catalog-divider-page {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  background: linear-gradient(135deg, #4b006e 0%, #7a4d8f 65%, #a9729c 100%);
  color: white;
}

.catalog-divider-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 520px;
}

.catalog-divider-logo {
  width: 110px;
  height: auto;
  margin-bottom: 10px;
  /* El logo original es un trazo oscuro sobre fondo transparente; se
     recolorea a blanco para que se lea bien sobre el degradado morado. */
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.catalog-divider-eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  font-weight: bold;
  opacity: 0.8;
}

.catalog-divider-title {
  margin: 6px 0;
  font-size: 46px;
  font-weight: 800;
  color: white;
}

.catalog-divider-count {
  font-size: 15px;
  opacity: 0.85;
}

/*
  Efecto de "pasar la hoja": al navegar (clic en flechas o arrastrando con
  el mouse/dedo), se clona la página actual en una capa que queda encima y
  gira en 3D sobre su propio eje (como si se levantara del lomo del libro)
  hasta desaparecer de canto, dejando ver la página nueva que ya estaba
  puesta debajo. El giro y la sombra los controla directamente catalogo.js
  (applyFlipProgress) vía transform + la variable --flip-shadow, tanto para
  el volteo animado de los botones como para el progreso en vivo del
  arrastre — por eso acá no hace falta ningún @keyframes.
*/
.catalog-flip-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: white;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  will-change: transform;
}

.catalog-flip-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.35), transparent 45%, transparent 55%, rgba(0,0,0,0.35));
  opacity: var(--flip-shadow, 0);
}

.catalog-flip-layer.flip-next {
  transform-origin: right center;
}

.catalog-flip-layer.flip-prev {
  transform-origin: left center;
}

.single-product-book {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.single-product-book.dragging {
  cursor: grabbing;
}

/* RESPONSIVE CATALOGO
   En desktop cada página crece con su contenido (min-height nada más pone
   un piso). En móvil/tablet eso se invierte: TODAS las páginas del catálogo
   (producto o divisoria) miden exactamente lo mismo, como en una revista
   impresa — el "libro" pasa a tener una altura fija y, dentro de la página
   de producto, solo la descripción se desplaza internamente si no entra
   completa. Así ninguna página queda más alta o más angosta que otra sin
   importar cuánto texto tenga, y no se pierde información: se puede hacer
   scroll a la descripción en vez de cortarla. */

@media (max-width: 900px) {
  /* Antes las flechas iban al lado del libro dentro de un flex-row, lo que
     le robaba ~90px de ancho al libro en pantallas angostas y lo dejaba
     como una franja muy angosta y alta. Ahora flotan encima del borde del
     libro, así la página siempre usa el ancho completo disponible. */
  .catalog-book-wrapper {
    position: relative;
    gap: 0;
  }

  .catalog-page-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }

  #catalogPrev {
    left: 8px;
  }

  #catalogNext {
    right: 8px;
  }

  .single-product-book,
  .single-product-page {
    height: 580px;
    min-height: 580px;
  }

  .single-product-content {
    /* Antes era CSS Grid (grid-template-columns/rows) — en algunas páginas
       de producto, combinado con el transform-style:preserve-3d/perspective
       del volteo, Chrome calculaba mal el ancho de la celda (más ancha que
       el propio libro), lo que hacía que la imagen se corriera sobre el
       nombre del producto. Flexbox en columna no tiene ese problema. */
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .single-product-image-area {
    /* Reemplaza por completo el flex:1 1 0 de la regla de escritorio — acá
       el alto es fijo (no reparte espacio como en la fila de dos columnas). */
    flex: 0 0 190px;
    padding: 14px;
  }

  .single-product-image-area img {
    max-height: 100%;
  }

  .single-product-info-area {
    flex: 1 1 auto;
    padding: 14px 24px 18px;
    text-align: center;
    justify-content: flex-start;
    min-height: 0;
  }

  .single-product-info-area h2 {
    text-align: center;
    font-size: 22px;
    margin: 0 0 6px;
  }

  .catalog-description {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 10px;
    font-size: 14px;
  }

  .catalog-price-area {
    margin-bottom: 6px;
  }

  .catalog-stock {
    margin-bottom: 12px;
    font-size: 13px;
  }

  /* La página divisoria usa el mismo contenedor de altura fija de arriba
     (.single-product-page) — acá solo se le pide que lo llene por completo
     en vez de fijar su propio número, para que quede igual de alta. */
  .catalog-divider-page {
    min-height: 100%;
    height: 100%;
    padding: 30px;
  }

  .catalog-divider-title {
    font-size: 30px;
  }
}

@media (max-width: 520px) {
  .catalog-page-main {
    padding: 18px 12px;
  }

  .digital-catalog-section {
    padding: 15px;
  }

  .catalog-page-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 14px;
  }

  #catalogPrev {
    left: 4px;
  }

  #catalogNext {
    right: 4px;
  }

  .single-product-book,
  .single-product-page {
    height: 520px;
    min-height: 520px;
  }

  .single-product-image-area {
    /* flex-basis (no "height") es lo que realmente manda el alto acá,
       porque el eje principal del flex-column es vertical. */
    flex-basis: 150px;
  }

  .single-product-info-area {
    padding: 12px 18px 14px;
  }

  .single-product-info-area h2 {
    font-size: 20px;
  }

  .catalog-description {
    font-size: 13px;
  }

  .catalog-divider-logo {
    width: 70px;
  }

  .catalog-divider-title {
    font-size: 24px;
  }

  .catalog-current-price {
    font-size: 26px;
  }
}
.category-dropdown.show {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* CATEGORY DROPDOWN LINKS */

.category-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #4b006e;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: bold;
  transition: 0.2s;
}

.category-link:hover {
  background: #f7f2fa;
  color: #7a4d8f;
}

.category-link i {
  width: 18px;
  text-align: center;
}
/* PROMO BANNERS */

.promo-strip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 35px;
  margin-bottom: 35px;
}

.promo-strip img {
  width: 100%;
  /* images/promos/promo-audio.png es 1774x887px (~2:1) — antes tenía un alto
     fijo de 750px que no coincidía con esa proporción: en mobile quedaba
     estirada verticalmente y ocupaba casi toda la pantalla con una imagen
     distorsionada. Con aspect-ratio se mantiene siempre la proporción real. */
  aspect-ratio: 1774 / 887;
  object-fit: cover;
  display: block;
}
.promo-video-strip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 35px;
  margin-bottom: 50px;
  overflow: hidden;
}

.promo-video-strip video {
  width: 100%;
  display: block;
}
.cart-toast {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #111;
  color: white;
  padding: 14px 18px;
  border-radius: 14px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.cart-toast.show {
  opacity: 1;
  transform: translateY(0);
}
/* CARRITO PAGE */

.cart-page-main {
  max-width: 1150px;
  margin: auto;
  padding: 30px 20px;
}

.cart-page-hero {
  text-align: center;
  margin-bottom: 25px;
}

.cart-page-layout {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr;
  gap: 25px;
  align-items: start;
}

.cart-products-box,
.cart-summary-box {
  background: white;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.cart-page-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 15px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.cart-page-item:last-child {
  border-bottom: none;
}

.cart-page-item img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 14px;
  background: #f4f6f8;
}

.cart-page-item h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #4b006e;
}

.cart-page-item p {
  margin: 3px 0;
  color: #555;
  font-size: 14px;
}

.remove-cart-item {
  background: #f8d7da;
  color: #721c24;
  border: none;
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

.remove-cart-item:hover {
  background: #dc3545;
  color: white;
}

.cart-summary-box {
  position: sticky;
  top: 125px;
}

.cart-summary-box p {
  font-size: 20px;
  color: #4b006e;
}

.clear-cart-btn {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  background: #f8d7da;
  color: #721c24;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

.clear-cart-btn:hover {
  background: #dc3545;
  color: white;
}

@media (max-width: 900px) {
  .cart-page-layout {
    grid-template-columns: 1fr;
  }

  .cart-summary-box {
    position: static;
  }
}

@media (max-width: 520px) {
  .cart-page-item {
    grid-template-columns: 70px 1fr;
  }

  .cart-page-item img {
    width: 70px;
    height: 70px;
  }

  .remove-cart-item {
    grid-column: 1 / -1;
    width: 100%;
  }
}
/* PÁGINA BUSCAR PRODUCTOS */

.products-page-main {
  max-width: 1250px;
  margin: auto;
  padding: 35px 25px;
}

.products-hero {
  text-align: center;
  margin-bottom: 30px;
}

.products-hero h1 {
  color: #4b006e;
  font-size: 36px;
  margin-bottom: 8px;
}

.products-hero p {
  color: #666;
}

/* LAYOUT */

.products-filter-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 25px;
  align-items: start;
}

/* FILTROS */

.products-filters {
  background: white;
  padding: 22px;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  position: sticky;
  top: 125px;
}

.products-filters h2 {
  margin-top: 0;
  margin-bottom: 18px;
  text-align: left;
  color: #4b006e;
}

.products-filters label {
  display: block;
  margin-top: 14px;
  margin-bottom: 6px;
  font-weight: bold;
  color: #4b006e;
  font-size: 14px;
}

.products-filters input,
.products-filters select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #f8f8f8;
  font-size: 14px;
  outline: none;
}

.products-filters input:focus,
.products-filters select:focus {
  border-color: #7a4d8f;
  background: white;
}

/* RESULTADOS */

.products-results {
  background: white;
  padding: 22px;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.products-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.products-results-header h2 {
  margin: 0;
  color: #4b006e;
  text-align: left;
}

#productsCount {
  background: #f7f2fa;
  color: #4b006e;
  padding: 8px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
}

/* GRID PRODUCTOS FILTRADOS */

.filtered-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* REUTILIZA PRODUCT CARD */

.filtered-products-grid .product-card {
  min-height: 100%;
}

.filtered-products-grid .product-card img {
  height: 190px;
}

/* BOTÓN LIMPIAR FILTROS */

.products-filters .clear-cart-btn {
  margin-top: 20px;
}

/* SIN RESULTADOS */

.no-products-found {
  text-align: center;
  padding: 35px;
  color: #666;
  background: #f8f8f8;
  border-radius: 14px;
  grid-column: 1 / -1;
}

.no-products-found i {
  font-size: 34px;
  color: #7a4d8f;
  display: block;
  margin-bottom: 10px;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .products-filter-layout {
    grid-template-columns: 1fr;
  }

  .products-filters {
    position: static;
  }

  .filtered-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .products-page-main {
    padding: 20px 12px;
  }

  .products-hero h1 {
    font-size: 28px;
  }

  .products-results-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .filtered-products-grid {
    grid-template-columns: 1fr;
  }

  .filtered-products-grid .product-card img {
    height: 220px;
  }
}
/* GALERÍA EN CARRITO */

.cart-product-gallery {
  width: 110px;
}

.cart-product-main-image {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 14px;
  background: #f4f6f8;
  display: block;
}

.cart-image-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
}

.cart-thumb-btn {
  border: 2px solid transparent;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
}

.cart-thumb-btn.active {
  border-color: #7a4d8f;
}

.cart-thumb-btn img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.cart-page-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 15px;
  align-items: center;
}

@media (max-width: 520px) {
  .cart-page-item {
    grid-template-columns: 1fr;
  }

  .cart-product-gallery {
    width: 100%;
  }

  .cart-product-main-image {
    width: 100%;
    height: 220px;
  }
}

/* ===== Modal de vista rápida de producto ===== */

.qv-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.qv-overlay.open {
  display: flex;
}

body.qv-lock-scroll {
  overflow: hidden;
}

.qv-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 780px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 30px;
}

.qv-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #555;
}

.qv-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
}

.qv-main-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.qv-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.qv-thumb {
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  background: none;
}

.qv-thumb img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.qv-thumb.active {
  border-color: #4b006e;
}

.qv-badge {
  display: inline-block;
  background: #dc3545;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.qv-name {
  margin: 0 0 10px;
}

.qv-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.qv-old-price {
  text-decoration: line-through;
  color: #999;
  font-size: 15px;
}

.qv-price {
  font-size: 24px;
  font-weight: bold;
  color: #4b006e;
}

.qv-stock {
  color: #555;
  font-size: 14px;
  margin: 0 0 12px;
}

.qv-description {
  color: #333;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .qv-body {
    grid-template-columns: 1fr;
  }

  .qv-modal {
    padding: 22px;
  }
}

/* ===== Ícono de "ver video" en las tarjetas de producto + reproductor ===== */

.product-image-wrap {
  position: relative;
}

/* El doble selector sube la especificidad a propósito: hay una regla
   genérica ".product-card button" (para "Agregar al carrito") que si no,
   le gana a esta y le pisa el color/borde/tamaño. */
.product-video-badge.product-video-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4b006e;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  font-size: 18px;
  /* Empuja el ícono un toque a la derecha para que el triángulo del "play"
     quede ópticamente centrado (si no, se ve corrido a la izquierda). */
  padding-left: 3px;
  cursor: pointer;
  opacity: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.product-video-badge.product-video-badge:hover {
  background: #7a4d8f;
  transform: translate(-50%, -50%) scale(1.1);
}

/* En mouse/desktop el botón queda oculto hasta que pasás sobre la imagen
   (como pediste); en celular/tablet (sin hover real) se deja siempre
   visible, porque si no, no habría forma de descubrirlo ni de usarlo. */
@media (hover: hover) and (pointer: fine) {
  .product-video-badge.product-video-badge {
    opacity: 0;
  }

  .product-image-wrap:hover .product-video-badge.product-video-badge {
    opacity: 1;
  }
}

/* El video se puede abrir DESDE adentro del modal de "vista rápida" (ambos
   comparten la clase .qv-overlay con el mismo z-index) — sin esto, cuál
   queda arriba depende del orden en que el navegador creó cada modal por
   primera vez, no de cuál abriste después, y a veces el video terminaba
   quedando tapado. Con un z-index más alto, el video siempre gana. */
.video-modal-overlay {
  z-index: 1001;
}

.video-modal-box {
  background: #000;
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.video-modal-player {
  display: block;
  width: 100%;
  max-height: 80vh;
}

/* REGALO DEL MES */

.gift-of-month-hero {
  position: relative;
  overflow: hidden;
  margin: 40px auto;
  max-width: 640px;
  padding: 50px 30px 40px;
  border-radius: 28px;
  text-align: center;
  color: white;
  background: linear-gradient(135deg, #4b006e, #7a4d8f 45%, #ffc107 120%);
  background-size: 200% 200%;
  animation: gift-gradient-shift 8s ease infinite;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.25);
}

@keyframes gift-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gift-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.gift-confetti-piece {
  position: absolute;
  top: -20px;
  width: 16px;
  height: 16px;
  background-image: url('images/favicon-48.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.9;
  animation-name: gift-confetti-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes gift-confetti-fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(420px) rotate(360deg); opacity: 0; }
}

.gift-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 8px 18px;
  border-radius: 30px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
  animation: pulse 1.8s infinite;
}

.gift-image-wrap {
  position: relative;
  z-index: 1;
  width: 220px;
  height: 220px;
  margin: 30px auto 20px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gift-float 3.5s ease-in-out infinite;
}

.gift-image-wrap::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.7);
  animation: gift-glow-pulse 2.2s ease-out infinite;
}

.gift-image-wrap img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

@keyframes gift-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes gift-glow-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); opacity: 1; }
  100% { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); opacity: 0; }
}

.gift-name {
  position: relative;
  z-index: 1;
  font-size: 30px;
  margin: 10px 0;
  color: white;
}

.gift-description {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.9);
  max-width: 440px;
  margin: 0 auto 28px;
  line-height: 1.5;
}

.gift-whatsapp-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: white;
  padding: 14px 26px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: 0.25s;
}

.gift-whatsapp-btn:hover {
  background: #1ebe5d;
  transform: scale(1.05);
  color: white;
}

.gift-empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #4b006e;
}

.gift-empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #7a4d8f;
}

.gift-empty-state h2 {
  margin: 10px 0;
}

@media (max-width: 520px) {
  .gift-of-month-hero {
    margin: 20px 12px;
    padding: 36px 18px 30px;
  }

  .gift-image-wrap {
    width: 160px;
    height: 160px;
  }

  .gift-name {
    font-size: 24px;
  }
}

.video-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Navegación entre videos cuando el producto tiene más de uno — ocultas
   por JS (display:none) si solo hay un video. */
.video-modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.video-modal-arrow:hover {
  background: rgba(0, 0, 0, 0.7);
}

.video-modal-prev {
  left: 10px;
}

.video-modal-next {
  right: 10px;
}

.video-modal-counter {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
}