.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 45px;
  justify-items: center;
  margin-top: 30px;
  margin-bottom: 0px;
}

/* =========================
   IMÁGENES
========================= */
.imagen {
  width: 780px;
  height: 680px;
  object-fit: cover; /* las imágenes se recortan */
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
  margin-bottom: 70px;
}

/* =========================
   VIDEO (SIN RECORTE)
========================= */
video.imagen {
  width: 780px;
  height: 680px;
  object-fit: contain; /* 👈 evita recorte */
  background: black; /* relleno si sobran espacios */
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  margin-bottom: 70px;
}

/* =========================
   EFECTO HOVER
========================= */
.imagen:hover,
video.imagen:hover {
  transform: scale(1.03);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
  .galeria {
    grid-template-columns: 1fr;
  }

  .imagen,
  video.imagen {
    width: 90%;
    height: auto;
  }
}