.background,
.background__copy {
	position: absolute; /*con position: fixed; hace que la imagen quede pegada a la ventana del navegador y no forme parte del flujo normal de la página. por eso se cambio a position: absolute;*/
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../img/nuevas.jpg) !important;
	background-position: 50% 0%;
	background-size: cover;
	z-index: 1;

	/*Efecto que hace que la imagen se desbanesca*/
	-webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,0));
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,0));
}

.respuestas{
	position: relative;
    overflow: hidden;

    background-image: url("../img/image.jpg");
    background-size: cover;
    background-position: 10% 10%;
    background-repeat: no-repeat;
    background-attachment: fixed;

	margin: 0px;
	padding-top: 30px;
	padding-bottom: 30px;
	
	border-bottom: solid #005380 1px;
	text-align: center;
}

.respuestas::before{ 
	/*creamos esta pseudo elemento paro poder agregar la capa que dara el efecto de cristal a mi elemnto*/
    content: ""; /**/
	/*estira el elemnto que acabamos de crear para cubrir todo*/
    position: absolute; 
    inset: 0;
	/*da una capa semitransparente*/
    background: rgba(0, 0, 0, 0.397);
    backdrop-filter: blur(3px);
	/*desenfoca lo que está detrás*/
    -webkit-backdrop-filter: blur(1px);
    z-index: 0; /*posiciona todo al fondo*/

}

/*para que el texto quede por encima de la imagen*/
.respuestas h2{
	color: #000000 !important;
    position: relative;
    z-index: 1;
}

/*SECCION NUEVAS*/
/*la seccion completa de las tarjetas*/
.glide__main{
	margin-top: 40px;
	text-align: center;
}


.glide__slide h2{
	font-size: 30px !important;

}
.glide__slide p{
  	font-size: 20px !important;
}

a{
	font-family: "Libre Franklin", sans-serif !important;
	font-optical-sizing: auto !important;
	font-weight: weight !important;
	font-style: normal !important;
	color: #ffffff !important;
}

/*unicamente la seccion de las tarjetas*/
.glide__container{
	margin-left: 50px;
	color:black;
	background-color: #D9D9D9;
	margin-bottom: -30px;
}

.tarjetas p{
	color: #000000;
}
.gglide__slide h2{
	font-family: "Bricolage Grotesque", sans-serif !important;
	font-optical-sizing: auto !important;
	font-weight: weight !important;
	font-style: normal !important;
	font-variation-settings:
 	"wdth" 100 !important;
	color: #005380;

}

.respuestas::before{ 
	/*creamos esta pseudo elemento paro poder agregar la capa que dara el efecto de cristal a mi elemnto*/
    content: ""; /**/
	/*estira el elemnto que acabamos de crear para cubrir todo*/
    position: absolute; 
    inset: 0;
	/*da una capa semitransparente*/
    background: rgba(0, 0, 0, 0.397);
    backdrop-filter: blur(3px);
	/*desenfoca lo que está detrás*/
    -webkit-backdrop-filter: blur(1px);
    z-index: 0; /*posiciona todo al fondo*/

}

/*para que el texto quede por encima de la imagen*/
.respuestas h2{
	color: #000000 !important;
    position: relative;
    z-index: 1;
}

.glide__bullets{
	margin-right: -75px;

}

.respuestas{
    margin-bottom: 30px;
}
/*MEDIA QUERIES */
   /*Forzamos a que los párrafos dentro de la sección de nuevas estén justificados 
   para que no se vean desordenados o con bordes irregulares. */
.glide__container p, 
.respuestas p {
    text-align: justify !important;
    text-justify: inter-word; /* Distribuye el espacio de forma limpia entre palabras */
}

/* 2. TABLETS EN VERTICAL (Hasta 992px) */
@media (max-width: 992px) {
    .respuestas h2 {
        font-size: 36px !important;
    }
    
    .glide__container h2 {
        font-size: 24px !important;
    }
}

/* 3. TABLETS PEQUEÑAS / MÓVILES GRANDES (Hasta 768px) */
@media (max-width: 768px) {
	/*ajusta la imagen principal*/
	.background,
	.background__copy{
		background-position: 90% 0%;;
	}
    /* Quitamos los márgenes fijos desbordados de la caja  */
    .glide__container {
        margin-top: -5px !important;
        margin-left: 25px !important;
        padding: 20px !important; /* Espacio interno para leer en pantallas táctiles */
        width: 100% !important; /* Forzamos a que use el 100% del ancho de la columna Bootstrap */
    }

    /* Rediseño de títulos en el carrusel/desplazamiento */
    .glide__slide h2 {
        font-size: 22px !important;
    }

    .glide__slide p {
        font-size: 14px !important;
    }

    .glide__main {
        margin-top: 30px !important;
    }

    /* Ajustamos la botonera de navegación inferior para que no cause scroll horizontal */
    .glide__bullet {
        margin-top: 10px;
        margin-left: 25px !important;
        display: flex !important;
        justify-content: center !important; /* Centra los botones en la pantalla */
        flex-wrap: wrap !important; /* Si los botones no caben en una línea, bajan ordenadamente */
        gap: 8px !important;
    }

    .glide__bullets p {
        font-size: 11px !important;
    }

    .respuestas h2 {
        font-size: 28px !important;
    }
}

/* 4. MÓVILES ESTÁNDAR Y PANTALLAS PEQUEÑAS (Hasta 576px)*/
@media (max-width: 576px) {
    .respuestas {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .respuestas h2 {
        font-size: 24px !important;
    }

    .glide__container {
        margin-bottom: 5px !important;
    }

	.glide__main{
		margin-left: 10px !important;
	}

    .glide__bullets p {
        font-size: 10.5px !important;
    }

	.glide__bullet {
        margin-top: 10px;
        margin-left: 10px !important;
        
	}

    
}

/* 5. MÓVILES ULTRA ESTRECHOS (Hasta 400px - Vista de image_d6e36c.png) */
@media (max-width: 400px) {

    .glide__main{
		margin-left: 10px !important;
	}

    .glide__container {
        margin-left: 10px !important;
        margin-top: 10px;
        margin-left: 10px !important;
    }

    .respuestas h2 {
        font-size: 20px !important;
    }

    .glide__bullet {
        min-width: 70px !important;/*el ancho mínimo del elemento será de 75 píxeles.*/
    }

	.glide__slide p{
		font-size: 10px !important;
	}

	.glide__slide h2{
		font-size: 10px !important;
	}

    .respuestas{
        margin-bottom: 20px;
    }
}