/* 📦 Estilo base para las tarjetas */
.card {
  overflow: hidden;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ✨ Efecto zoom + sombra al hacer hover */
.card:hover {
  transform: scale(1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-color: #0d6efd;
}

/* 🖼 Estilo de imagen superior */
.card-img-top {
  height: 180px;
  object-fit: contain;
  background-color: #f9f9f9;
  transition: transform 0.3s ease;
}

.card:hover .card-img-top {
  transform: scale(1.05);
}

/* 👁️ Botón flotante que aparece al hacer hover */
.card .btn-ver {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.card:hover .btn-ver {
  opacity: 1;
  transform: translateY(0);
}

/* 📜 Expansión de contenido al pasar el mouse */
.card .card-body {
  max-height: 120px;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.card:hover .card-body {
  max-height: 400px;
}

/* ✨ Aparición gradual (fade-in) para animación de entrada */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 💠 Estilo para miniaturas en galería */
.galeria-miniatura {
  max-height: 120px;
  object-fit: contain;
  margin: 4px;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  padding: 4px;
}

.card-img-top {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* 🌀 Flip horizontal de imagen al hacer hover en la tarjeta */
.card:hover .card-img-top {
    transform: rotateY(360deg) scale(1.1);
    transition: all 0.3s ease-in-out;
}