/*variables*/
:root{
    --texto-rosado: #B7156D;
    --texto-negro: #000000;
}
/*fonts*/
@font-face {
    font-family: Univia Pro;
    src: url('../../public/fonts/UniviaProRegular.otf');
}
/*reglas generales*/
*{
    box-sizing: border-box;
    font-family: Univia Pro;
}
/*banner*/
.banner-compromiso{
    width: 100%;
    height: 21em;
    display: flex;
    flex-direction: column;
}
.banner-compromiso__titulo {
    padding-top: 0.4em;
    position: absolute;
    font-size: 4.5rem;
    z-index: 2;
    letter-spacing: 5px;
    padding-left: 1.5em;
    color: var(--texto-blanco);
    width: 14em;
}
.banner-compromiso__imagen{
    width: 100%;
    height: 100%;
}
/*contenedor global*/
.contenedor-compromiso{
    /*background: lightblue;*/
    padding: 10em 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
/*misión*/
.contenedor-mision{
    width: 80%;
    /*background: purple;*/
    margin: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 10em;
    flex-wrap: wrap;
}
.texto-mision{
    width: 80%;
    height: auto;
    /*background: blue;*/
    margin: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 5em;
}
.texto-mision h2{
    font-size: 2.25rem;
    letter-spacing: 1rem;
    color: var(--texto-rosado);    
}
.texto-mision p{
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: var(--texto-negro);
}
.imagen-mision{
    width: 90%;
    height: auto;  
    display: flex;
    flex-direction: column;
}
.imagen-mision img{
     width: 100%;
     height: 100%;
}
/*visión*/
.contenedor-vision{
    width: 80%;
    /*background: purple;*/
    margin: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 10em;
    flex-wrap: wrap;
}
.texto-vision{
    width: 80%;
    height: auto;
    /*background: blue;*/
    margin: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 5em;
}
.texto-vision h2{
    font-size: 2.25rem;
    letter-spacing: 1rem;
    color: var(--texto-rosado);
}
.texto-vision p{
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: var(--texto-negro);
}
.imagen-vision{
    width: 90%;
    height: auto;   
    display: flex;
    flex-direction: column;
    align-self: flex-end;
}
.imagen-vision img{
     width: 100%;
     height: 100%;
}
/*donativos*/
.contenedor-donativos{
    width: 80%;
    /*background: purple;*/
    margin: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 10em;
    flex-wrap: wrap;
}
.texto-donativos{
    width: 80%;
    height: auto;
   /* background: blue;*/
    margin: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 5em;
}
.texto-donativos h2{
    font-size: 2.25rem;
    letter-spacing: 1rem;
    color: var(--texto-rosado);
}
.texto-donativos p{
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: var(--texto-negro);
}
.imagen_donativos{
    width: 100%;
    height: auto;
}
.imagen_donativos img{
     width: 100%;
     height: 100%;
}
.uldon{
    padding-bottom: 5em;
}
.eslogan {
    width: 80%;
    /*background: purple;*/
    margin: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}
.eslogan p{
   font-size: 1.5rem;
   letter-spacing: 2px;
   color: var(--texto-rosado);   
}
/*responsive*/
@media screen and (max-width: 1240px){
    /*banner*/
    .banner-compromiso{
        height: 19em;
    }
    .banner-compromiso__titulo {
        margin-top: 0.6em;
    }
}
@media screen and (max-width: 1024px){
    /*banner*/
    .banner-compromiso__titulo {
        margin-top: -0.1em;
        width: 9em;
    }
    .contenedor-compromiso {
        padding: 5em 0;
    }
    .contenedor-mision,
    .contenedor-vision,
    .contenedor-donativos {
        margin-bottom: 5em;
    }
    .uldon {
        padding-bottom: 3em;
    }
    /*misión*/
    .texto-mision{
        width: 100%;
        margin-bottom: 3em;
    }
    .imagen-mision{
        width: 100%;
    }
    /*visión*/
    .texto-vision{
        width: 100%;
        margin-bottom: 3em;
    }
    .imagen-vision{
        width: 100%;
    }
    .texto-donativos{
        width: 100%;
        margin-bottom: 3em;
    }
    /*eslogan*/
    .eslogan p{
        text-align: center; 
    }
}
@media screen and (max-width: 820px){
    /*banner*/
    .banner-compromiso{
        height: 17em;
    }
    .banner-compromiso__titulo {
        padding-left: 1em;
        margin-top: -0.4em;
    }
}
@media screen and (max-width: 760px){
    /*banner*/
    .banner-compromiso__titulo {
        font-size: 4rem;
        letter-spacing: 0.2rem;
        margin-top: -0.1em;
        width: 8.5em;
    }
    .texto-mision h2{
        font-size: 2rem;
    }
    .texto-vision h2{
        font-size: 2rem;
    }
    .texto-donativos h2{
        font-size: 2rem;
    }
}
@media screen and (max-width: 600px){
    .banner-compromiso{
        width: 100%;
        height: 14em;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    .banner-compromiso__titulo {        
        padding: 0;     
        text-align: center;
        margin: 0;
    }
}
@media screen and (max-width: 540px){
    /*banner*/
    .banner-compromiso__titulo {        
        width: 7em;
        font-size: 3.5rem; 
        letter-spacing: 0;
    }
    .texto-mision p{
        font-size: 1.2rem;
    }
    .texto-vision p{
        font-size: 1.2rem;
    }
    .texto-donativos p{
        font-size: 1.2rem;
    }
    .eslogan p{
        font-size: 1.2rem; 
    }
}
@media screen and (max-width: 496px){
    .texto-mision h2{
       letter-spacing: 0.3em;
    }
    .texto-vision h2{
       letter-spacing: 0.3em;
    }
    .texto-donativos h2{
        letter-spacing: 0.3em;
    }
}
@media screen and (max-width: 420px){
    /*banner*/
    .banner-compromiso__titulo {
        font-size: 3rem;        
    }
    .texto-mision p{
        font-size: 1rem;
    }
    .texto-vision p{
        font-size: 1rem;
    }
    .texto-donativos p{
        font-size: 1rem;
    }
    .eslogan p{
        font-size: 1rem; 
    }
}
@media screen and (max-width: 345px){
    /*banner*/
    .banner-compromiso__titulo {
        font-size: 2.8rem;        
    }
}