/* Asegura que los ítems del carrusel que no están activos no se muestren */
#carouselExampleSlidesOnly .carousel-item:not(.active) {
    display: none !important; /* Forzar que los ítems inactivos no se muestren */
}

/* Resto del CSS que te di para el tamaño */
#carouselExampleSlidesOnly .carousel-inner {
    height: 200px; /* <--- ¡AJUSTA ESTA ALTURA SEGÚN TUS NECESIDADES! */
    overflow: hidden;
    position: relative; /* Asegura un contexto de posicionamiento para los items */
}

#carouselExampleSlidesOnly .carousel-item {
    height: 100%;
    width: 100%; /* Asegura que el item ocupe todo el ancho del inner */
    position: absolute; /* Posiciona los items absolutamente dentro del inner */
    top: 0;
    left: 0;
    /* transition: transform 0.6s ease-in-out;  Bootstrap ya lo maneja con sus clases de animación */

    /* Flexbox para centrar la imagen dentro del item */
    display: flex;
    justify-content: center;
    align-items: center;
}

#carouselExampleSlidesOnly .carousel-item img {
    width: auto;
    height: 100%;
    object-fit: contain; /* O 'cover', dependiendo de lo que prefieras */
    object-position: center;
}

/* Contenedor del mapa de Google para hacerlo responsivo */
#map-responsive-container {
    position: relative; /* Esencial para que el iframe posicionado de forma absoluta se refiera a este contenedor */
    width: 100%; /* El contenedor ocupará todo el ancho disponible */

    /* El truco del padding-bottom para mantener la proporción de aspecto.
       Calcula esto como (height / width) * 100%.
       Para 450px de alto y 600px de ancho: (450 / 600) * 100% = 0.75 * 100% = 75% */
    padding-bottom: 75%; /* Esto crea el espacio vertical para el iframe */

    height: 0; /* Necesario para que padding-bottom funcione como altura */
    overflow: hidden; /* Oculta cualquier cosa que se salga del contenedor */
    background-color: #eee; /* Opcional: un color de fondo mientras carga el mapa */
}

/* El iframe dentro del contenedor responsivo */
#map-responsive-container iframe {
    position: absolute; /* Posiciona el iframe de forma absoluta dentro de su contenedor relativo */
    top: 0;
    left: 0;
    width: 100%; /* El iframe ocupa el 100% del ancho del contenedor */
    height: 100%; /* El iframe ocupa el 100% de la altura del contenedor (definida por padding-bottom) */
    border: none; /* Asegura que no tenga borde si el style="border:0;" no funciona */
}

/* Puedes agregar un ancho máximo al contenedor padre si es necesario */
.right-map {
    max-width: 100%; /* Asegura que no se desborde */
    /* Otros estilos de tu .col-lg-6 si tienes */
}

.mi-imagen {
    width: 550px;   /* Tamaño por defecto (pantallas grandes) */
    height: auto;   /* Para que no se deforme */
  }
  
  @media (max-width: 992px) {  /* Tablets y pantallas medianas */
    .mi-imagen {
      width: 400px;
    }
  }
  
  @media (max-width: 576px) {  /* Celulares */
    .mi-imagen {
      width: 320px;
    }
  }