#heroCarousel .carousel-item {
    height: 80vh; /* Ajusta la altura al 80% de la pantalla */
    min-height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Capa oscura para que el texto resalte */
#heroCarousel .carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Sombra sobre la imagen */
}

#heroCarousel .carousel-caption {
    z-index: 2;
    bottom: 20%;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

#heroCarousel .carousel-caption h2 {
    color: #fff;
}

.carousel-caption h2, .carousel-caption p {
    text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.8);
    color: #ffffff !important;
}

/* Hacer las flechas un poco más visibles */
.carousel-control-prev-icon, .carousel-control-next-icon {
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
    width: 3rem;
    height: 3rem;
}

/* Ajuste de transparencia compatible con todos los navegadores */
.glide__arrows .glide__arrow {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease;

    /* Primero la versión para Safari/iOS */
    -webkit-backdrop-filter: blur(2px); 
    /* Luego la versión estándar para Chrome, Firefox y Edge */
    backdrop-filter: blur(2px); 
}

/* Efecto al pasar el mouse */
.glide__arrows .glide__arrow:hover {
    background-color: rgba(255, 255, 255, 0.7) !important;
    color: rgba(0, 0, 0, 0.8) !important;
}

/* Forzar que el texto y botones del carrusel se vean en celulares */
@media (max-width: 767px) {
    .glide__content, 
    .glide__slide .content,
    .slider-content { 
        display: block !important; /* Cambia 'none' por 'block' */
        text-align: center;
        padding: 20px;
    }

    .glide__slide h1, 
    .glide__slide h2,
    .slider-content h1 {
        font-size: 24px !important; /* Achicamos un poco el título para que quepa */
        margin-bottom: 10px;
        display: block !important;
    }

    .glide__slide p,
    .slider-content p {
        font-size: 14px !important;
        display: block !important; /* Asegura que el párrafo se vea */
        margin-bottom: 20px;
    }

    .glide__slide .button,
    .slider-content .btn {
        display: inline-block !important; /* Hace que el botón vuelva a aparecer */
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}