/*GENERALES*/

/*importacion de tipografia o las tipografias desde google fonts SIEMPRE HAY QUE PONER ESTO AL PRIMCIPIO*/
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

html{
    scroll-behavior: smooth;
}

body{
	background-color: #D9D9D9;
}

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: #000000;
	font-size: 64px !important;
	text-align: center;

}
.p {
	font-size: 32px;
	font-family: "Libre Franklin", sans-serif !important;
	font-optical-sizing: auto !important;
	font-weight: weight !important;
	font-style: normal !important;
	color: #000000 !important;
}

/* FOOTER */
.footer{
    background-color: #0A4C6A;
    color: white;
    text-align: center;
    padding: 30px 20px;
    margin-top: 50px;
}

.footer p{
    margin: 8px 0;
    font-size: 1rem;
}

/*quienes somos*/
.pregunta{
	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;
	margin-left: -120px;
	margin-right: -120px;

	border-bottom: solid #005380 1px;
	
}

.pregunta::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*/
.pregunta h2{
    position: relative;
    z-index: 1;
}

.quienes-somos{
	position: relative;
	background-color: #D9D9D9;
	color: black;
	min-height: 100vh; /*significa que la altura mínima del elemento será igual al 100% de la altura visible de la ventana del navegador.*/
	text-align: center;

}

.quienes-somos p{
	color: #000000;
	font-size: 32px;
	font-family: "Libre Franklin", sans-serif;
	font-optical-sizing: auto;
	font-weight: weight;
	font-style: normal;
	padding-top:50px;
	margin-bottom: -100px;
}

.quienes-somos h2{
	font-size: 64px;

}

.quienes-somos img{
    margin-bottom: 200px !important;
}

/* NUEVOS ESTILOS PARA LA IMAGEN RESPONSIVA */


.informacion{
	position: relative;
	z-index: 1;
	background: white;
	color: black;
	min-height: 100vh;
	padding-top: 50px;
}



/*SECCION DE INFORMCACION*/
/*para que el texto quede por encima de la imagen*/
.informacion h2{
    position: relative;
    z-index: 1;
	color: white;
}

.informacion p{
    position: relative;
    z-index: 1;
	color: white;
	font-size: 20px;
	
}

.informacion{
	padding-bottom: 50px;
	text-align: center;
	background-color: #D9D9D9;
}
/*historia*/
.historia{
	margin-bottom: 30px;
	padding-bottom: 50px;
	padding-top:50px;
	border: #000000 solid;
	border-radius: 20px;
	color: #000000;
	background-image: url(../img/fondo-2.jpg);
	background-size: cover;
    /*el primer numero contro la posicion horizontal y la segunda la posiscion vertical*/
    background-position: 10% -50px;
    background-repeat: no-repeat;
    background-attachment: fixed;/*hace que la imagen de fondo se quede fija en la pantalla, aunque hagas scroll.*/
	overflow: hidden; /*Recorta TODO lo que se salga del contenedor Hace que la imagen respete el border-radius*/
}

.historia::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 blanca semitransparente*/
    background: rgba(49, 46, 46, 0.116);
    backdrop-filter: blur(5px);
	/*desenfoca lo que está detrás*/
    -webkit-backdrop-filter: blur(1px);
    z-index: 0; /*posiciona todo al fondo*/
}

.img-historia img{
	/*imagen responsiva*/
	width:100%;
    max-width:550px;
    height:auto;
    display:block;
    margin:auto;

	
	padding-bottom: 0px;
	margin-top: 55px;
	border: #000000 solid;
	border-radius: 20px;
}


/*mision*/
.mision{
	margin-left: 15px;
	margin-bottom: 30px;
	border: #000000 solid;
	border-radius: 20px;
	color: #000000;
	background-image: url(../img/fondo-2.jpg);
	background-size: cover;
    /*el primer numero contro la posicion horizontal y la segunda la posiscion vertical*/
    background-position: 10% -400px;
    background-repeat: no-repeat;
    background-attachment: fixed;/*hace que la imagen de fondo se quede fija en la pantalla, aunque hagas scroll.*/
	overflow: hidden; /*Recorta TODO lo que se salga del contenedor Hace que la imagen respete el border-radius*/
}

.mision::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 blanca semitransparente*/
    background: rgba(49, 46, 46, 0.116);
    backdrop-filter: blur(5px);
	/*desenfoca lo que está detrás*/
    -webkit-backdrop-filter: blur(1px);
    z-index: 0; /*posiciona todo al fondo*/
}

.img-mision img{
	width: 400px;
	margin-top: 70px;
	border: #000000 solid;
	border-radius: 20px;
}

/*vision*/

.vision{
	margin-bottom: 30px;
	padding-bottom: 50px;
	padding-top:50px;
	border: #000000 solid;
	border-radius: 20px;
	color: #000000;
	background-image: url(../img/fondo-2.jpg);
	background-size: cover;
    /*el primer numero contro la posicion horizontal y la segunda la posiscion vertical*/
    background-position: 10% -450px;
    background-repeat: no-repeat;
    background-attachment: fixed;/*hace que la imagen de fondo se quede fija en la pantalla, aunque hagas scroll.*/
	overflow: hidden; /*Recorta TODO lo que se salga del contenedor Hace que la imagen respete el border-radius*/
}

.vision::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 blanca semitransparente*/
    background: rgba(49, 46, 46, 0.116);
    backdrop-filter: blur(5px);
	/*desenfoca lo que está detrás*/
    -webkit-backdrop-filter: blur(1px);
    z-index: 0; /*posiciona todo al fondo*/
}

.img-vision img{
	width: 450px;
	padding-bottom: 0px;
	margin-top: 50px;
	border: #000000 solid;
	border-radius: 20px;
}
/*SECCION CONTACTOS*/

.contacto{
	background-color: #D9D9D9;
	padding-top: 50px;
}
 /*titulo*/
.titulo-contacto{
	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;
	margin-left: -200px;
	margin-right: -200px;

	border-bottom: solid #005380 1px;

	text-align: center;
	
}

.titulo-contacto::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*/
.titulo-contacto h2{
    position: relative;
    z-index: 1;
}

/*secciones*/

.datos{
	margin-top: 50px;
	padding-top:30px;
}

.ubicacion{
	margin-top: 72px;
}

.datos ul{
    margin-top: -18px !important;
}

.datos-lista{
	border: #005380 solid;
	border-radius: 20px;
	list-style: none;
}

.contacto span{
    display: inline; /*el lugar de que esten en fila los pone en linea*/
    color: black;
	font-size:25px;
}
.contacto i{
    font-size: 30px;/*tamaño de los iconos*/
    color: #5CB8F3;
}




/*MEDIA QUERIES */

/* 1. PANTALLAS GRANDES / LAPTOPS DE ALTA RESOLUCIÓN (Hasta 1400px) 
   Aquí ajustamos elementos que empiezan a verse demasiado estirados en laptops grandes. */
@media (max-width: 1400px) {
    .informacion{
		margin-top:-190px;
	}
    
    .mision {
        margin-right: 0px; /* Reducimos el margen derecho para que no se desfase */
        padding: 40px;     /* Reducimos ligeramente el espacio interno */
    }

    /* Controlamos que las imágenes de misión y visión mantengan un tamaño máximo elegante */

    .img-mision img {
        width: 100%;
        max-width: 500px;
        margin-top: 35px;
    }

    .img-vision img {
        width: 100%;
        max-width: 480px;
        margin-top: 25px;
    }

    /* Ajustamos el espaciado interno de la lista de contacto */
    .datos-lista {
        padding-top: 40px;
        padding-bottom: 55px;
    }

    .datos{
        margin-top: 73px;
    }
}

/* 2. LAPTOPS ESTÁNDAR / TABLETS EN HORIZONTAL (Hasta 1200px) */
@media (max-width: 1200px) {
    .mision {
        margin-right: 0px;
        background-position: center center; /* Centramos el fondo para que no se corte la imagen trasera */
    }

    .informacion{
		margin-top:-150px;
	}

    /* Hacemos las imágenes un poco más pequeñas para que quepan bien al lado del texto */
    .img-mision img {
        max-width: 420px;
        margin-top: 40px;
    }

    .img-vision img {
        max-width: 400px;
        margin-top: 35px;
    }

    /* Evitamos que la caja azul de contactos se encime con el footer */
    .datos-lista {
        margin-bottom: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

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

    /* Achicamos un poco la letra de los datos (Instagram, correo) para que no rompa la línea */
    .contacto span {
        font-size: 22px;
    }

    .datos{
        margin-top: 90px !important;
    }
} 

/* 3. TABLETS EN VERTICAL (Hasta 992px)
   Las imágenes y textos ya no caben de lado a lado,
   por lo que empezamos a apilarlos uno debajo del otro. */
@media (max-width: 992px) {
    /* Los títulos originales de 64px son gigantes para una tablet; los bajamos a 48px */
    h2, .quienes-somos h2, .titulo-contacto h2 {
        font-size: 48px !important;
    }

    .informacion{
		margin-top:-300px !important;
	}

    /* Los textos de los párrafos bajan de 32px a 24px para mejorar la lectura */
    .p, .quienes-somos p {
        font-size: 24px !important;
    }

    /* CORRECCIÓN CRÍTICA: Forzamos a las imágenes de historia, misión y visión a ser 
       completamente responsivas. Se centran automáticamente y se posicionan abajo del texto. */
    .img-mision img, .img-vision img {
        width: 100% !important;
        max-width: 450px !important; /* Impide que la imagen crezca de más */
        height: auto !important;
        margin: 20px auto 0 auto !important; /* El 'auto' izquierdo/derecho las centra perfectamente */
        display: block;
    }

    .informacion p{
        font-size: 15px;
    }

    .img-historia img{
        width: 100% !important;
        max-width: 450px !important; /* Impide que la imagen crezca de más */
        height: auto !important;
        margin: 35px auto 0 auto !important; /* El 'auto' izquierdo/derecho las centra perfectamente */
        display: block;
    }

    /* Centramos los fondos y eliminamos los márgenes laterales para que los contenedores
       ocupen todo el ancho de la columna de Bootstrap sin desbordarse */
    .historia, .mision, .vision {
        background-position: center center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 40px 20px !important; /* Espaciado */
    }

    .quienes-somos img{
        width: 1000px;
        padding-bottom: 100px !important;
    }
    

    .datos-lista {
        margin-top: -42px !important;
    }
}

/* 4. TABLETS PEQUEÑAS / MÓVILES GRANDES (Hasta 768px) */
@media (max-width: 768px) {
    body {
        /* Bloquea por completo cualquier desbordamiento hacia los lados. */
        overflow-x: hidden; 
    }

    /* Bajamos los títulos a 38px para que quepan en una sola línea o dos como máximo */
    h2, .quienes-somos h2, .titulo-contacto h2 {
        font-size: 38px !important;
    }

    /* NOTA IMPORTANTE: El efecto 'background-attachment: fixed' (paralaje) falla, 
       hace parpadeos o ralentiza la navegación en la mayoría de celulares (iOS/Android). 
       Aquí lo desactivamos pasando a 'scroll' para que el fondo se mueva de una manera que no paresca un error */
    .pregunta, .historia, .mision, .vision, .titulo-contacto {
        background-attachment: scroll !important;
    }

    .img-historia{
        height: auto !important;
        margin: -50px -700px 15px 0px !important; /* El 'auto' izquierdo/derecho las centra perfectamente */
        display: block;
    }

    .img-mision{
        height: auto !important;
        margin: -35px 0px 15px 0px !important; /* El 'auto' izquierdo/derecho las centra perfectamente */
        display: block;
    }

    .img-vision{
        height: auto !important;
        margin: -35px 0px -5px 0px !important; /* El 'auto' izquierdo/derecho las centra perfectamente */
        display: block;
    }

    /* Quitamos la altura forzada de 100vh en 'quiénes somos'. En móvil el contenido 
       debe empujar la altura para que no se encime con la imagen de abajo. */
    .quienes-somos {
        min-height: auto !important;
        padding-bottom: 40px !important;
    }

    .quienes-somos p {
        padding-top: 20px !important;
        margin-bottom: 30px !important;
    }

    .quienes-somos img{
        width: 750px;
        padding-bottom: 50px !important;
    }

    /* Ajuste texto de contacto */
    .contacto span {
        font-size: 25px;
    }

    .contacto i{
        padding-top: 20px !important;
    }

   .datos{
    margin-top: 20px !important;
    margin-left: 10px;
    margin-right: 10px;
    }
}

/* 5. MÓVILES ESTÁNDAR (Hasta 576px) */
@media (max-width: 576px) {
    /* Títulos a un tamaño ideal para teléfono (32px) */
    h2, .quienes-somos h2, .titulo-contacto h2 {
        font-size: 32px !important;
    }

    
    /* Pasamos las letras grandes a 17px. Un tamaño estilizado, legible y profesional. */
    .quienes-somos p, .p {
        font-size: 17px !important; 
        padding-top: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 15px !important;
        line-height: 1.6; /* Aumentamos el interlineado para que el párrafo no se vea amontonado */
    }

    .quienes-somos img{
        width: 550px;
        padding-bottom: 50px !important;
    }

    .informacion p {
        font-size: 15px !important;
        padding: 0 10px;
    }

    .img-historia{
        height: auto !important;
        margin: -50px -530px 15px 0px !important; /* El 'auto' izquierdo/derecho las centra perfectamente */
        display: block;
    }

    .img-mision{
        height: auto !important;
        margin: -35px 0px 15px 0px !important; /* El 'auto' izquierdo/derecho las centra perfectamente */
        display: block;
    }

    .img-vision{
        height: auto !important;
        margin: -35px 0px -5px 0px !important; 
        display: block;
    }

    /* REDISEÑO DE LA LISTA DE CONTACTOS EN MÓVIL:
       Como los textos son largos (ej: aenaa.info@gmail.com), los centramos y acomodamos
       poniendo el icono arriba y el texto abajo para que no rompan la estructura. */
    .datos-lista {
        margin-top: -100px !important;
        padding: -200px 10px !important;
    }

    .datos-lista li {
        text-align: center;
        margin-bottom: 20px; /* Separación entre cada contacto */
        padding-right:30px !important;
    }

    .contacto span {
        font-size: 20px !important;
        display: block !important; /* Obliga al texto a ponerse abajo del icono */
        word-break: break-all;     /* PROPIEDAD: Si el correo es muy largo, lo corta automáticamente en lugar de romper el recuadro con borde azul. */
    }
}

/* 6. PANTALLAS ULTRA PEQUEÑAS (Hasta 400px)*/
@media (max-width: 400px) {
    /* Títulos compactos para evitar saltos de línea raros e incómodos */
    h2, .quienes-somos h2, .titulo-contacto h2 {
        font-size: 26px !important;
    }

    /* Ajustamos el texto al mínimo recomendado para web móvil (15px) */
    .quienes-somos p, .p {
        font-size: 15px !important;
    }

    .quienes-somos img{
        width: 400px;
        padding-bottom: 60px !important;
    }

    .informacion{
        margin-top: -60px;
    }

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

    /* Reducimos el padding de las cajas para aprovechar cada milímetro de pantalla */
    .historia, .mision, .vision {
        padding: 30px 15px !important;
    }

    .contacto li{
        padding-right: 30px !important;
    }

    .img-historia{
        height: auto !important;
        margin: -50px 0px 15px 0px !important; /* El 'auto' izquierdo/derecho las centra perfectamente */
        display: block;
    }

    .contacto span{
        font-size: 15px !important;
    }

    .contacto{
        margin-top: -50px;
        margin-right: 15px;
        margin-left: -5px;
    }

    .ubicacion{
        margin-top: 25px;
        margin-left: 10px;
    }
    /* Hacemos las letras de los créditos del footer un poco más pequeñas */
    .footer p {
        font-size: 0.85rem !important;
    }
}