* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

button {
    cursor: pointer;
}

.bttnPrincipal {
    padding: 15px 50px;
    background-color: #FC7E00;
    color: #fff;
    border: none;
    border-radius: 40px;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
}

.bttnPrincipal:hover {
    background-color: #E26B04
}

.bttnSecundario {
    padding: 15px 32px;
    background-color: transparent;
    color: #000;
    border: solid 1px #004BC2;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    color: #002643;
}

.bttnSecundario:hover {
    background-color: #EFF3FF
}

/* HERO */
.hero {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 60px;
    width: 100%;
    padding: 140px 90px 90px;
}

.heroText {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    position: relative;
    gap: 20px;
    align-self: center;
}

.heroText h1 {
    color: #002643;
    font-family: 'Montserrat', sans-serif;
    font-size: 46px;
    font-style: normal;
    font-weight: 500;
    line-height: 111.9%;
}

.heroText .volanta {
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;
    line-height: 19.58px;
    text-align: left;
    color: #004BC2;
    text-transform: uppercase;
}

.heroText h1 span {
    font-weight: 500;
}

.br {
    display: block;
}

.heroTextBttns {
    margin-top: 20px;
    display: flex;
    gap: 20px;
}

.heroImg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.heroImg {
    min-height: 400px;
}

/*****************************************/

.integraciones {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    place-content: center;
    padding-bottom: 90px;
}


/*************************/

.reasonsContainer {
    background-color: #E5EDF8;
    border-radius: 10px;
    margin: 0 auto;
    padding: 80px 90px;
    position: relative;
    z-index: 1;
}

.reasonsContainer h2 {
    font-family: 'Montserrat';
    font-size: 35px;
    font-weight: 700;
    line-height: 39.16px;
    text-align: center;
    color: #001F4B;
}

.reasonsArticle {
    display: grid;
    grid-template-columns: .3fr 1fr;
    margin-top: 40px;
    gap: 60px;
}

#reasonsList li {
    padding: 20px 0;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    color: #001F4B;
    border-bottom: 1px solid #001F4B;
    list-style-image: url(../images/arrow.svg);
    list-style-position: inside;
}

#reasonsContent article {
    display: none;
    
    flex-direction: column;
    padding-top: 20px;
}

#reasonsContent article h3 {
    font-family: Montserrat;
    font-size: 25px;
    font-weight: 600;
    line-height: 28px;
    text-align: left;
    color: #004DBC;
    margin-bottom: 20px;
}


#reasonsContent article p {
    font-family: Roboto;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
    color: #092646;
    hyphens: auto;
}

#reasonsContent article img {
    max-width: 100%;
}

/************************/
.versus {
    background-color: #001F4B;
    margin-top: -300px;
    padding: 400px 0 0px;
    background-image: url(../images/bkg/Vector.svg), url(../images/bkg/Capa\ 1.svg);
    background-repeat: no-repeat;
    background-position: 100% 20%, 0% 80%;
}

.versusItems {
    display: grid;
    grid-template-columns: .8fr 1fr;
    gap: 50px;
    padding: 0 90px;
    color: white;
}

.versusItems h2 {
    font-family: Montserrat;
    font-size: 45px;
    font-weight: 700;
    line-height: 50.35px;
}

.versusItems p {
    font-family: Roboto;
    font-size: 19px;
    font-weight: 400;
    line-height: 26px;
    margin-top: 30px;
    hyphens: auto;
}

.versusItemsAnchors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-columns: auto auto;
    gap: 30px;
}

.versusItemsAnchors a {
    padding: 40px 20px;
    border: solid 1px white;
    border-radius: 10px;
    display: flex;
    place-content: center;
}



.cta {
    font-family: Montserrat;
    font-size: 28px;
    font-weight: 700;
    line-height: 39.16px;
    text-align: center;
    color: white;
    padding: 150px 90px 150px;
}

.cta .heroTextBttns {
    width: fit-content;
    margin: 60px auto 0;
}

.cta .heroTextBttns  .bttnSecundario {
    color: white;
}

.cta .heroTextBttns  .bttnSecundario:hover {
    color: #002643;
}


@media (max-width:1000px) {
    .hero {
        grid-template-columns: 100%;
        gap: 0px;
        padding: 100px 30px 0;
    }

    .heroText h1 {
        font-size: 30px;
        line-height: normal;
    }

    .heroImg {
        display: none;
    }

    .heroTextBttns {
        flex-direction: column;
    }

    .integraciones{
        padding: 60px 30px;
       display: grid;
       grid-template-columns: 1fr 1fr;
    }

    .reasonsContainer {
        padding: 80px 30px;
    }

    .reasonsArticle {
        grid-template-columns: 100%;
    }

    #reasonsContent article p {
        margin: 20px 0;
    }

    .versusItems {
        grid-template-columns: 100%;
        padding: 0 30px;
    }

    .h2 {
        font-size: 30px;
        line-height: normal;
    }

    .versusItemsAnchors {
        grid-template-columns: 100%;
    }

    .versusItemsAnchors a {
        padding: 20px;
    }

    .cta {
        padding: 90px 30px;
    }
}






@media (min-width:1209px) {
    .containerLayout {
        margin: 0 auto;
        max-width: 1366px
    }
}


/* MEDIA QUERY - GENERAL Zoom */
@media (min-width: 768px) and (max-width: 1800px) {

    nav,
    footer {
        zoom: .85;
    }

    .box-menu button {
        line-height: 1.19;
    }
}