/* ================================================================
   FIX 2 — Gallery hint: dots indicadores de múltiples opciones
   Agrega este CSS donde tengas los estilos de .vo-card
   ================================================================ */

/* Contenedor de dots — centrado sobre la imagen, parte inferior */
.vo-card-gallery-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 9px;
  border-radius: 999px;
  pointer-events: none;          /* no intercepta el click de la tarjeta */
  transition: opacity .2s;
}

/* Dot base — pequeño, semitransparente */
.vo-gallery-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background .2s, transform .25s;
  flex-shrink: 0;
}

/* Dot activo — blanco sólido, ligeramente más grande */
.vo-gallery-dot.active {
  background: #ffffff;
  transform: scale(1.4);
  animation: vo-dot-pulse 2.2s ease-in-out infinite;
}

/* Pulso suave en el dot activo para llamar la atención */
@keyframes vo-dot-pulse {
  0%, 100% { transform: scale(1.4); opacity: 1; }
  50%       { transform: scale(1.1); opacity: 0.75; }
}

/* Cuando la tarjeta recibe hover, los dots inactivos se iluminan */
.vo-card:hover .vo-gallery-dot:not(.active) {
  background: rgba(255, 255, 255, 0.70);
}

/* Contador "+N" cuando hay más de 4 opciones */
.vo-gallery-more {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
  padding-left: 2px;
  letter-spacing: .2px;
}

/* ================================================================
   Badge -10% online — esquina superior derecha de la imagen
   ================================================================ */
.vo-badge-descuento-web {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: linear-gradient(135deg, #f8bd23, #ff6a00);
  color: #0f1723;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .3px;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255,106,0,.35);
  pointer-events: none;
  animation: web-badge-pop 0.4s cubic-bezier(.4,0,.2,1) both;
}
@keyframes web-badge-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Etiqueta "-10% web" debajo del precio */
.vo-card-price-web {
  color: #f8bd23;
  font-weight: 700;
  font-size: 9px;
}

/* ================================================================
   Badges de categoría (.vo-card-badge variants)
   ================================================================ */
.vo-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.vo-badge-best-seller { background:rgba(251,191,36,.25); color:#fbbf24; border:1px solid rgba(251,191,36,.4); }
.vo-badge-nuevo       { background:rgba(96,165,250,.22);  color:#93c5fd; border:1px solid rgba(96,165,250,.4); }
.vo-badge-premium     { background:rgba(192,132,252,.22); color:#d8b4fe; border:1px solid rgba(192,132,252,.4); }
.vo-badge-trending    { background:rgba(251,146,60,.22);  color:#fdba74; border:1px solid rgba(251,146,60,.4); }