@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/*-------- GLOBAL ---------*/

.bg-blueG {
    background-color: #ddede7;
}

.bg-blue{
    background-color: #3ad0de;
}

.bg-red {
    background-color: #ee5863;
}

.text-colorSectionO-T{
    color: #2e2e2e;
}

.text-redP {
    color: #ddede7;
}

.font18{
    font-size: 18px;
}

.lineH{
    line-height: 1.6;
}

*{
    padding: 0;
    box-sizing: border-box;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}


.main{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0rem;
}

.containerContent{
    width: 80%;
    max-width: 1000px;
}

.sectionOne{
    display: grid;
}





/*------- SECTION ONE -------*/


.sectionsInfoOne{
    display: flex;
    justify-content: center;
    grid-row: 1/2;
    width: 100%;
}

.containerSectionsImgOne{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1/3;
    grid-row: 2/3;
}




/*------- SECTION TWO -------*/

.sectionTwo{
    display: grid;
    background-image: url('../assets/svg/MATERIALES_txt.svg');
    background-repeat: no-repeat;
}




/*------- SECTION TREE -------*/

.sectionTree{
    display: grid;
    grid-template: 1fr 1fr / 58% 1fr;
}

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

.imgTree{
    width: 100%;
}

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




/*------- SECTION FOUR -------*/

.sectionFour{
    display: grid;
}

.sectionsInfoFour{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    grid-column: 1/3;
    grid-row: 1/2;
}

.containerDivInfoFour{
    padding: 1rem;
    width: 20rem;
}

.containerSectionsImgFour{
    grid-column: 1/3;
    grid-row: 2/3;
}

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

/*------ SECTION BUTTON DOWNLOAD -------*/

.buttonDownload{
    padding: 1rem 1rem;
    background-color: #f7f7f7;
    margin: 1rem 2rem 0 0;
    transition: .3s;
    color: #747474;
    outline: none;
    cursor: pointer;
    border: 0;
    font-weight: 500;
}

.buttonDownload:hover{
    background-color: #ececec;
}


@media (min-width: 360px) {

    /*------- SECTION ONE -------*/

    .sectionOne{
        grid-template: 1fr 10rem / 1fr 1fr;
        padding-top: 1rem;
    }

    .sectionsInfoOne{
        grid-column: 1/3;
    }

    .containerDivInfoOne{
        width: 14rem;
    }

    .ImgOne{
        width: 71%;
    }

    /*------- SECTION TWO -------*/

    .sectionTwo{
        grid-template: 1fr 17rem / 60% 1fr;
    }

    .sectionsInfoTwo{
        grid-column: 1/3;
        grid-row: 2/3;
        padding: 1rem;
    }

    .containerSectionsImgTwo{
        grid-column: 1/3;
        grid-row: 1/2;
    }

    /*------- SECTION TREE -------*/

    .containerSectionsImgTree{
        grid-column: 1/3;
        grid-row: 2/3;
    }

    .sectionsInfoTree{
        grid-column: 1/3;
        grid-row: 1/2;
        padding: 1rem;
    }

    /*------- SECTION FOUR -------*/

    .sectionFour{
        grid-template: 1fr 14rem / repeat(2, 1fr);
        padding-top: 4rem;
    }

    .imgFour1{
        width: 95%;
    }

    .imgFour2{
        width: 100%;
    }
}





@media (min-width: 820px) {

    /*------- SECTION ONE -------*/

    .sectionOne{
        grid-template: 1fr 19rem / 1fr 1fr;
        padding-top: 3rem;
        padding-bottom: 7rem;
    }

    .sectionsInfoOne{
        justify-content: flex-end;
        grid-column: 1/2;
    }

    .containerSectionsImgOne{
        margin-top: 4rem;
        padding-top: 4rem;
    }

    .ImgOne{
        width: 27rem;
    }

    /*------- SECTION TWO -------*/

    .sectionTwo {
        grid-template: 40rem 19rem / 60% 1fr;
    }

    .sectionsInfoTwo{
        grid-column: 2/3;
        grid-row: 2/3;
    }

    .containerSectionsImgTwo {
        grid-column: 1/3;
        grid-row: 1/2;
    }

    .ImgTwo{
        width: 38rem;
    }

    /*------- SECTION TREE -------*/

    .containerSectionsImgTree{
        grid-column: 1/2;
        grid-row: 1/3;
    }

    .sectionsInfoTree{
        grid-column: 2/3;
        grid-row: 1/3;
    }

    /*------- SECTION FOUR -------*/
    .sectionFour{
        grid-template: 1fr 1fr / repeat(2, 1fr);
        padding-top: 0;
    }

    .imgFour1 {
        width: 24rem;
    }

    .imgFour2{
        width: 26rem;
    }
}





@media (min-width: 1000px) {

    /*------- SECTION ONE -------*/

    .sectionOne{
        padding: 3rem 0;
    }

    .sectionsInfoOne{
        padding-right: 3rem;
    }

    .containerDivInfoOne{
        width: 21rem;
    }

    .ImgOne{
        width: 43rem;
    }

    /*------- SECTION TWO -------*/

    .sectionTwo {
        grid-template: 1fr 34rem / 60% 1fr;
    }

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

    .containerSectionsImgTwo{
        grid-column: 1/2;
        grid-row: 2/3;
    }

    .ImgTwo{
        width: 28rem;
    }

    /*------- SECTION TREE -------*/

    .sectionTree{
        height: 40rem;
    }

    /*------- SECTION FOUR -------*/

    .containerDivInfoFour {
        width: 28rem;
    }
}