.glide {
            width: 100%;
            margin: 0 auto 50px;
        }

        /* Centrar los slides dentro del carrusel */
        .glide__slides {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .glide__slide {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        /* Ajustar el tamaño de las imágenes */
        .glide__slide img, .glide__slide video {
            max-width: 90%;
            min-width: 90%; 
            border-radius: 10px;
            height: auto;
        }

        .glide__slide a {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Centrar las flechas de navegación */
        .glide__arrows {
            position: absolute;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between; /* Espaciado uniforme */
            pointer-events: none; /* Evita problemas con clics en móviles */
        }

        .glide__arrow {
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px 15px;
            font-size: 20px;
            cursor: pointer;
            border-radius: 50%;
            pointer-events: all; /* Habilita clics */
        }

        /* Hacer las flechas más visibles en hover */
        .glide__arrow:hover {
            background: rgba(0, 0, 0, 0.8);
        }

        .banner-text-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: white;
            padding: 75px;
            z-index: 2;
            display: flex;
            pointer-events: none; /* permite hacer clic a través si hay un enlace debajo */
            align-items: center;
        }
        
        .banner-text-overlay .text-container {
            padding: 20px;
            border-radius: 12px;
            max-width: 100%;
        }

        /* Estilos base para el texto enriquecido del banner */
        .banner-text-overlay .text-container {
            font-family: sans-serif;
            line-height: 1.4;
        }

        /* Tamaños responsivos para Quill (desktop por defecto) */
        .banner-text-overlay .ql-size-huge {
            font-size: clamp(2rem, 5vw, 4rem); /* desde 32px hasta 64px aprox */
            font-weight: bold;
        }

        .banner-text-overlay .ql-size-large {
            font-size: clamp(1.2rem, 3vw, 2rem); /* desde 19px hasta 32px aprox */
        }

        /* Si se usan elementos normales como <p>, <h1>, etc. */
        .banner-text-overlay .text-container p {
            margin: 10px 0;
            font-size: clamp(1rem, 2.5vw, 1.5rem); /* tamaño base */
        }

        .banner-text-overlay .text-container h1,
        .banner-text-overlay .text-container h2 {
            margin: 10px 0;
            font-weight: bold;
            font-size: clamp(1.8rem, 4vw, 3rem);
        }

        .banner-text-overlay .ql-align-center {
            text-align: center;
        }
        
        .banner-text-overlay .ql-align-right {
            text-align: right;
        }
        
        .banner-text-overlay .ql-align-left {
            text-align: left;
        }
        
        .banner-text-overlay .ql-align-justify {
            text-align: justify;
        }

        @media (max-width: 767px) {
            .glide__slide img {
                max-width: 90%;
                min-width: 90%; 
            }

            .glide__arrow {
                padding: 3px 10px;
            }

            .banner-text-overlay {
                padding: 20px;
            }

            .banner-text-overlay .text-container {
                padding: 10px;
                line-height: 1.2;
            }
        
            .banner-text-overlay .ql-size-huge {
                font-size: clamp(1.2rem, 5.5vw, 2rem);
                line-height: 1.1;
            }
        
            .banner-text-overlay .ql-size-large {
                font-size: clamp(1rem, 4vw, 1.5rem);
                line-height: 1.2;
            }
        
            .banner-text-overlay .text-container p {
                font-size: clamp(1rem, 3.5vw, 1.3rem);
                line-height: 1.2;
                margin: 6px 0;
            }
        
            .banner-text-overlay .text-container h1,
            .banner-text-overlay .text-container h2 {
                font-size: clamp(1rem, 4.5vw, 1.5rem);
                line-height: 1.1;
                margin: 8px 0;
            }
        }