/* ============================================================
   product-gallery.css — Mini carrusel por card de producto
   ============================================================ */

.product__gallery {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── SLIDES CONTAINER ─────────────────────────────────────── */

.product__slides {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface-raised);
  overflow: hidden;
  cursor: pointer;
}

/* Gradiente de ambiente por producto */
.product--gold   .product__slides { background: radial-gradient(circle at 50% 70%, var(--accent-tertiary-soft) 0%, transparent 60%), var(--surface-raised); }
.product--launch .product__slides { background: radial-gradient(circle at 50% 70%, var(--accent-primary-soft)   0%, transparent 60%), var(--surface-raised); }
.product--new    .product__slides { background: radial-gradient(circle at 50% 70%, var(--accent-primary-soft)   0%, transparent 55%), var(--surface-raised); }

/* ── SLIDE individual ─────────────────────────────────────── */

.product__slide {
  position: absolute;
  inset: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
  padding: var(--s-4);
}

.product__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ── IMAGEN DEL PRODUCTO ──────────────────────────────────── */

.product__img {
  max-height: 82%;
  max-width: 68%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 32px rgba(26, 23, 20, 0.10));
  transition: transform var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 2;
  display: block;
  margin: auto;
  opacity: 0;
}

.product__img.is-loaded { opacity: 1; }

/* Botella — proporción 1:3.2, muy alta y angosta */
.product--gold .product__img {
  max-height: 88%;
  max-width: 42%;
}

/* Latas — proporción ~1:2.2, más anchas */
.product--launch .product__img,
.product--new    .product__img {
  max-height: 82%;
  max-width: 62%;
}

/* Hover — solo slide activo */
.product:hover .product__slide.is-active .product__img {
  transform: translateY(-6px);
  filter: drop-shadow(0 16px 40px rgba(26, 23, 20, 0.16));
}

/* Slides inactivos — sin transform ni transición */
.product__slide:not(.is-active) .product__img {
  transform: none !important;
  transition: none !important;
}

/* ── BADGE CATADOR ────────────────────────────────────────── */

.product__badge {
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  width: clamp(44px, 5vw, 62px);
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 2px 6px rgba(26, 23, 20, 0.18));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.product__badge.is-loaded { opacity: 1; }

/* ── CAPTION ──────────────────────────────────────────────── */

.product__caption {
  position: absolute;
  bottom: var(--s-3);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--s-4);
  z-index: 4;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  letter-spacing: var(--ls-mono);
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

.product__caption.is-hidden {
  opacity: 0;
}

/* ── SLIDE LEGAL ──────────────────────────────────────────── */

.product__slide--legal {
  flex-direction: column;
  gap: var(--s-3);
  background: var(--surface);
  padding: var(--s-5);
}

.product__disclaimer {
  max-width: 88%;
  max-height: 72%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.product__disclaimer-label {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  text-align: center;
}

/* ── CONTROLES ────────────────────────────────────────────── */

.product__gallery-controls {
  position: absolute;
  bottom: var(--s-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  z-index: 5;
}

.product__gallery-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--a-paper-72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-circle);
  font-size: 17px;
  line-height: 1;
  color: var(--text-primary);
  border: var(--border-hairline);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.product__gallery-btn:hover {
  background: var(--surface);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* ── DOTS ─────────────────────────────────────────────────── */

.product__gallery-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.product__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--r-circle);
  background: var(--a-ink-24);
  transition: width var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-radius var(--dur-fast) var(--ease-out);
  cursor: pointer;
}

.product__dot.is-active {
  background: var(--accent-primary);
  width: 14px;
  border-radius: 3px;
}