/* Contenedores principales con mismo tamaño */
.video-container,
.image-container {
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* Wrappers con aspect ratio 16:9 */
.video-wrapper,
.image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Aspect ratio 16:9 */
  background-color: var(--complementary-color);
  overflow: hidden;
}

/* Imagen centrada */
.image-wrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain; /* Cambia a 'contain' para que se vea completa */
  /* object-fit: cover; */ /* Usa 'cover' si quieres que llene todo el espacio */
}

/* Video responsivo */
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Estilo del iframe para ocupar todo el contenedor */
.video-container .cont-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* Responsivo para móviles */
@media (max-width: 767px) {
  .video-container,
  .image-container {
    min-height: auto;
  }
  
  .video-wrapper,
  .image-wrapper {
    padding-bottom: 75%; /* Aspect ratio más cuadrado en móvil */
  }
}

/* Mejora en los controles del carousel */
.carousel-control-prev,
.carousel-control-next {
  width: 5%;
  opacity: 0.8;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}