/* ============================================================
   style.css
   Clase 7: pequeños detalles de diseño extra sobre Bootstrap.
   No reemplaza a Bootstrap, solo lo complementa.
   ============================================================ */

/* Efecto sutil al pasar el mouse sobre una tarjeta de producto */
.card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

/* Pequeña animación al aparecer un producto nuevo en la lista
   de selección (clase 4 / 6) */
#lista-seleccion li {
  animation: aparecer 0.2s ease;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   Ajuste del tamaño de las imágenes de los productos.
   object-fit: contain -> muestra el producto completo sin recortarlo,
   pero limitado a una altura fija para que la tarjeta no sea gigante.
   ============================================================ */
.card-img-top {
  height: 220px;              /* altura fija en navegador de escritorio */
  object-fit: contain;       /* la imagen entra completa, sin recortarse */
  background-color: #ffffff; /* fondo blanco uniforme detrás de la imagen */
  padding: 0.5rem;
}

/* Tablets */
@media (max-width: 991.98px) {
  .card-img-top {
    height: 200px;
  }
}

/* Celulares: contenedores más compactos e imagen más chica */
@media (max-width: 575.98px) {
  .card-img-top {
    height: 170px;
    padding: 0.4rem;
  }

  .card-body {
    padding: 0.75rem;
  }

  .card-title {
    font-size: 1rem;
  }

  .card-text {
    font-size: 0.875rem;
  }
}