/*
 * «Míralo de cerca»: el carrusel de fotos del producto, debajo de las reseñas.
 *
 * Lo monta `assets/js/carrusel-fotos-producto.js`. La cabecera, la pista y las
 * flechas son las de «El catálogo» (`carrusel-productos-2026-09-10.css`); aquí
 * solo se dibuja la tarjeta, que es una foto sola y más grande, porque lo que
 * tiene que hacer es enseñar el producto y no llevar a otro.
 */
.gp-preview-product-page .gp-fotos-carrusel {
  --gp-fotos-line: #e5e7eb;
  --gp-fotos-soft: #f7f8fa;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.gp-preview-product-page .gp-fotos-card {
  aspect-ratio: 1 / 1;
  background: var(--gp-fotos-soft);
  border: 1px solid var(--gp-fotos-line);
  border-radius: 18px;
  flex: 0 0 min(24rem, 38%);
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
}

.gp-preview-product-page .gp-fotos-card img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 900px) {
  .gp-preview-product-page .gp-fotos-card {
    flex-basis: 55%;
  }
}

@media (max-width: 560px) {
  .gp-preview-product-page .gp-fotos-card {
    flex-basis: 84%;
  }
}