/* ===========================================================
   Ajuste para las fotos cuadradas con sello de marca.
   Cargar DESPUÉS de styles.css. Para revertir: quitar el
   <link> de este archivo en index.html.
   =========================================================== */

/* Las fotos ya traen su propio fondo y sello, así que el recuadro
   ocupa todo el ancho de la tarjeta en proporción 1:1. */
.pcard--img .vial-wrap {
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 2px 0 14px;
  border-radius: 12px;
  overflow: hidden;
  /* La sombra proyectada dibujaba el contorno del cuadrado.
     Se reemplaza por una sombra suave bajo la tarjeta. */
  filter: none;
  box-shadow: 0 10px 22px -14px rgba(0,0,0,.6);
}

.pcard--img .vial-img {
  width: 100%;
  height: 100%;
  max-height: none;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}

/* El giro quedaba raro en un rectángulo opaco: solo elevación. */
.pcard--img:hover .vial-wrap { transform: translateY(-5px) rotate(0); }

/* Misma lógica en el detalle del producto. */
.detail-vial .vial-img { border-radius: 12px; }