/* Mantenemos object-fit: cover para imágenes */
.card-efecto img {
  width: 100% !important;
  height: 250px !important;
  object-fit: contain !important;
  display: block;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Regla especial para los VIDEOS: evita que se recorten arriba/abajo */
.card-efecto video {
  width: 100% !important;
  height: 250px !important;
  object-fit: contain !important; /* Muestra el video completo sin recortar */
  background-color: #fffefe;      /* Fondo negro estético para rellenar los bordes */
  display: block;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.card-efecto {
  position: relative !important;
  width: 100% !important;
  margin-bottom: 20px;
  border: 2px solid rgba(0, 86, 207, 0.35) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.35s ease;
}


.card-body-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
  color: #fff;
  text-align: center;
  transform: translateY(15px);
  transition: transform 0.4s ease;
}

.card-efecto:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0, 86, 207, 0.25);
}

.card-efecto:hover img {
  transform: scale(1.03);
  opacity: 0.9;
}

.card-efecto:hover .card-body-overlay {
  transform: translateY(0);
}

/* Update dis rule fɔ mek in cover both img an video */
.card-efecto video {
  height: 250px !important;
  object-fit: contain !important;
  display: block;
  transition: transform 0.4s ease, opacity 0.4s ease;
}