/* Estilos para el carrusel */
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para el modal */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #E8E8E8;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 45%;
    border-radius: 25px;
    color: #2C3E50;
}

/* Botón de cerrar */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Asegurar que todas las imágenes del carrusel tengan la misma altura */
.swiper-modal .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen para que llene el espacio sin deformarse */
}

.swiper-button-next-modal,
.swiper-button-prev-modal {
    color: #000; /* Cambiar color si es necesario */
}

/* Ajustar el contenedor para que las imágenes tengan la misma altura */
.image-container {
    width: 100%;
    height: 500px; /* Ajusta esto según tu necesidad */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Eliminar padding extra */
    border: none; /* Si no quieres borde */
    background-color: transparent; /* Quita el fondo si es necesario */
    gap: 10px;
}

/* Ajustar los detalles debajo de la imagen */
#modal-details {
    padding: 20px 0; /* Ajusta el espaciado */
    text-align: left; /* Alinea el texto */
}

/* Media Queries para dispositivos pequeños */
@media (max-width: 768px) {
    /* Ajustar el tamaño del modal en pantallas más pequeñas */
    .modal-content {
        width: 70%; /* Aumenta el ancho para que ocupe más espacio */
        margin: 10% auto;
        border-radius: 15px; /* Cambiar el radio de los bordes */
    }

    /* Ajustar la imagen para que se adapte mejor a pantallas más pequeñas */
    .swiper-modal .swiper-slide img {
        height: 300px; /* Menor altura para pantallas más pequeñas */
    }

    /* Ajustar el contenedor de imágenes */
    .image-container {
        height: 300px; /* Ajustar la altura */
    }

    /* Asegurarse de que el texto del modal se ajuste bien */
    #modal-details {
        padding: 15px 0; /* Reducir el padding */
    }
}

/* Media Queries para dispositivos muy pequeños (teléfonos móviles muy pequeños) */
@media (max-width: 480px) {
    /* Ajustar el tamaño del modal para pantallas aún más pequeñas */
    .modal-content {
        width: 90%; /* Aumenta aún más el ancho */
        margin: 15% auto; /* Mayor espacio desde la parte superior */
        border-radius: 10px; /* Más redondeado */
    }

    /* Ajustar la imagen para caber mejor en pantallas aún más pequeñas */
    .swiper-modal .swiper-slide img {
        height: 200px; /* Reducir aún más la altura */
    }

    .image-container {
        height: 200px; /* Ajuste para pantallas muy pequeñas */
    }
}