/* ==========================================================================
   ELECTROTAK — Mini galería en las tarjetas del catálogo
   Puntos indicadores (máx. 5 visibles, se desplazan) + flechas para cambiar
   de foto sin abrir la ficha. Solo se activa en productos con 2 o más fotos.
   ========================================================================== */

.card-gal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 4 / 3;
  pointer-events: none;
  z-index: 12;
}

.card-gal-arrow {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 9999px;
  border: 1px solid var(--gris-borde, #F0F1F0);
  background-color: rgba(255, 255, 255, 0.94);
  color: var(--negro, #0A0A0A);
  box-shadow: 0 2px 8px rgba(24, 26, 24, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.18s ease, transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.card-gal-prev { left: 8px; }
.card-gal-next { right: 8px; }

.card-gal-arrow:hover {
  background-color: var(--blanco, #FFFFFF);
  border-color: var(--negro, #0A0A0A);
}

.card-gal-arrow:active {
  transform: scale(0.92);
}

/* Puntos */
.card-gal-dots {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  overflow: hidden;
  padding: 4px 6px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.78);
}

.card-gal-track {
  display: flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.25s ease;
}

.card-gal-dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: rgba(10, 10, 10, 0.24);
  transition: background-color 0.2s ease, transform 0.2s ease, flex-basis 0.2s ease, width 0.2s ease;
}

.card-gal-dot.is-active {
  flex-basis: 14px;
  width: 14px;
  background-color: var(--negro, #0A0A0A);
}

.card-gal-dot.is-small {
  transform: scale(0.6);
}

.card-gal-dot.is-tiny {
  transform: scale(0.35);
}

/* Imagen: cambio suave */
.product-card.has-card-gal .product-img-stage img {
  transition: transform 0.25s ease, opacity 0.15s ease;
}

.product-card.has-card-gal .product-img-stage img.is-switching {
  opacity: 0.35;
}

/* Deslizar con el dedo sin bloquear el scroll vertical */
.product-card.has-card-gal .product-img-stage {
  touch-action: pan-y;
}

/* Escritorio con ratón: flechas solo al pasar por la tarjeta */
@media (hover: hover) and (pointer: fine) {
  .card-gal-arrow {
    opacity: 0;
  }
  .product-card:hover .card-gal-arrow,
  .card-gal-arrow:focus-visible {
    opacity: 1;
  }
}

/* Pantallas táctiles: flechas siempre visibles, algo más pequeñas */
@media (hover: none), (pointer: coarse) {
  .card-gal-arrow {
    width: 28px;
    height: 28px;
    margin-top: -14px;
    font-size: 0.8rem;
    opacity: 0.92;
  }
}

.card-gal-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}