/* Inicio Call to Action */
.callToAction h2{
    width: 100%; 
    height: auto;
    font-family: ubub;
    font-weight: 600;
    font-size: var(--subtitle);
    text-align: center;
    margin: 2em auto 1em auto;
    color: var(--color2);
}
.callToAction div a {
    width: 12em;
    height: 3em;
    background: var(--color4);
    color: var(--color2);
    text-decoration: none;
    font-family: ubub;
    font-weight: 600;
    font-size: var(--parrafos);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2em auto;
}
/* Fin Call to Action */
/* Inicio APP Esmeralda */
.appEsmeralda{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    background: var(--color3);
    margin: 3em 0;
}
.appEsmeralda h2{
    width: 100%; 
    height: auto;
    font-family: ubur;
    font-weight: 400;
    font-size: var(--subtitle);
    text-align: center;
    margin: 3em auto 1em auto;
    color: var(--color2);
}
.appEsmeralda h2 strong{
    font-family: ubub;
    font-weight: 600;
}
.appEsmeralda p{
    width: 100%; 
    height: auto;
    font-family: ubur;
    font-weight: 400;
    font-size: var(--parrafos);
    line-height: 1.5em;
    text-align: center;
    color: var(--color2);
    margin: 0 0 2em 0;
}
.descargas{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 2em;
}
.descargas picture a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}
.descargas img{
    width: 13em;
    height: auto;
}
.contApp{
    width: 100%;
    height: 100%;
    position: relative;
    margin: 2em 0;
}
.celuApp{
    width: 100%;
    height: auto;
    position: absolute;
    top: -4em;
    text-align: center;  
}
.celuApp img{
    width: 11em;
    height: auto;
}
/* Fin APP Esmeralda */
@media only screen and (min-width:481px) and (max-width:768px){
    /* Inicio APP Esmeralda */
.appEsmeralda{
    flex-direction: row;
}
.appEsmeralda h2 {
    width: 90%;
    text-align: left;
    margin: 0em auto 1em auto;
}
.appEsmeralda p {
    width: 90%;
    text-align: left;
    margin: 0 auto 2em auto;
}
.descargas {
    flex-direction: row;
    gap: 1em;
}
.descargas picture{
    margin: auto;
}
.descargas img {
    width: 10em;
}
.celuApp {
    top: -4em;
}
.celuApp img {
    width: 20em;
}
/* Fin APP Esmeralda */
}
@media only screen and (min-width:769px) and (max-width:1279px){
    /* Inicio APP Esmeralda */
.appEsmeralda{
    flex-direction: row;
    margin: 6em 0;
}
.appEsmeralda h2 {
    width: 90%;
    text-align: left;
    margin: 0em auto .5em auto;
}
.appEsmeralda p {
    width: 90%;
    text-align: left;
    margin: 0 auto 2em auto;
}
.descargas {
    flex-direction: row;
    gap: 1em;
    padding: 0 0 0 1.5em;
}
.descargas picture{
    margin: none;
}
.descargas img {
    width: 10em;
}
.celuApp {
    top: -7em;
}
.celuApp img {
    width: 22em;
}
/* Fin APP Esmeralda */
}
@media only screen and (min-width:1280px){
    /* Inicio Call to Action */
    .callToAction {
        margin: 7em 0 2em 0;
    }
    .callToAction div a:hover {
        background: var(--color2);
        color: var(--color4);
        cursor: pointer;
        transition: all .5s;
        animation: btnBorde .5s forwards ease-out;
    }
    /* Fin Call to Action */
    /* Inicio APP Esmeralda */
    .appEsmeralda{
        width: 95%;
        flex-direction: row;
        margin: 7em auto 8em auto;
    }
    .appEsmeralda h2 {
        width: 90%;
        text-align: left;
        margin: 0em auto .5em auto;
    }
    .appEsmeralda p {
        width: 90%;
        text-align: left;
        margin: 0 auto 2em auto;
    }
    .descargas {
        flex-direction: row;
        gap: 1em;
        padding: 0 0 0 5%;
    }
    .descargas picture{
        margin: none;
    }
    .descargas img {
        width: 10em;
    }
    .celuApp {
        top: -9em;
    }
    .celuApp img {
        width: 22em;
    }
    /* Fin APP Esmeralda */
}