.hero{
    margin-top: 10%;
    margin-bottom: 100px;
    display: flex;
    gap: 50px;
    justify-content: space-between;
    align-items: center;
    height: 50vh;
    /* background: #c7c7c7; */
}



.hero_content {
    display: flex;
    flex-direction: column;
    width: 40%;
    /* background: #e3dddd; */
}


.hero_content h1{
    font-size: 50px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #1d1f40;

}

.hero_content p{
    color: #222222;
    line-height: 30px;
    font-size: 17px;
}

.hero .bg_hero img{
    width: 40rem;
    padding-right: 10%;
}



.gestion-mercado{
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}


.mercado_titulo{
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-bottom: 100px;

}

.mercado_titulo h1{
    color: #1d1f40;
    font-size: 30px;
}

.linea{
    height: 5px;
    flex-grow: 1;
    background: #1d1f40;
}

.mercado_content{
    display: flex;
    gap: 20px;
    justify-content: center;
}


.mercado-caja{
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 50%;
    align-items: center;
    padding: 0 60px;
}


.mercado-caja h3{
    text-align: center;
    font-weight: 500;
}

.mercado-caja img{
    width: 500px;
}

#img5{
    width: 700px;
    border: 1px solid #d2d2d2;
}






/* Mercado libre */

.mer-lider{
    margin-bottom: 100px;
}


.mer-lider h2{
    font-size: 40px;
    text-align: center; 
    margin-bottom: 30px;  
}


.mer-lider p{
    font-size: 16px;
}

.lider-content{
    margin-top: 60px;
    display: flex;
    justify-content: space-around;
}


.lider-box{
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;   
}


.lider-box h3{
    text-align: center;
}

.lider-box img{
    width: 100px;
    transition: .5s;
}


.lider-box img:hover{
    transform:translateY(-10px);
}


.mer-vendedor {
    margin-bottom: 100px;
}
.mer-titulo{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 100px;

}


.mer-linea{
    height: 5px;
    flex-grow: 1;
    background: #1d1f40;
}



/* .mer_scalones {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    }


    .mer_box1 { grid-area: 5 / 1 / 7 / 2; }
    .mer_box2 { grid-area: 4 / 2 / 7 / 3; }
    .mer_box3 { grid-area: 3 / 3 / 7 / 4; }
    .mer_box4 { grid-area: 2 / 4 / 7 / 5; }
    .mer_box5 { grid-area: 1 / 5 / 7 / 6; } */



.mer_scalones{
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-end;
    align-content: bottom;
}

    .mer_box1 { height: 10%; }
    .mer_box2 { grid-area: 4 / 2 / 7 / 3; }
    .mer_box3 { grid-area: 3 / 3 / 7 / 4; }
    .mer_box4 { grid-area: 2 / 4 / 7 / 5; }
    .mer_box5 { grid-area: 1 / 5 / 7 / 6; }
 

.mer_box{
    display: flex;
    flex-direction: column;
    /* background: #f9baba; */
    align-items: center;
    text-align: center;
}

.mer_box .barra{
    width: 100%;
    margin-top: 20px;
    background: #1d1f40;
    height: 30px;
}



    .mer_box1 .box_text { width: 180px;}

    .mer_box2 .box_text { width: 180px; padding-bottom: 70px;}

    .mer_box3 .box_text { width: 180px;padding-bottom: 100px;}

    .mer_box4 .box_text { width: 180px;padding-bottom: 150px;}

    .mer_box5 .box_text { width: 400px; padding-bottom: 100px; }



.mer_box1 img{
    width: 100px;
}

.mer_box2 img{
    width: 100px;
}


.mer_box3 img{
    width: 130px;
}


.mer_box4 img{
    width: 180px;
}

.mer_box5 img{
    width: 180px;
    margin-bottom: -20px;
    padding-left: 25px;
}


.box_text{
    border: 1px solid #1d1f40;
    width: 100%;
    flex-grow: 1;
    padding: 10px 0px;
}


.box_text h4{
    font-size: 20px;
}

.box_text p{
    font-size: 16px;
}

.box_text span{
    font-size: 12px;
}  

.beneficios{
    padding: 20px 30px 20px 50px;
}

.beneficios p{
    font-size: 12px;
    text-align: left;
    margin-bottom: 5px;

}



@media (max-width:1580px) {
    .hero{
        margin-top: 15%;
        margin-bottom: 160px;

    }

    .hero_content h1{
        font-size: 40px;
    }

    .hero_content p{
        font-size: 16px;
    }
    
    .mercado_titulo{
        margin-bottom: 40px;
    }

    .mercado-caja img{
        width: 500px;
    }

    #img5{
        width: 650px;
    }


}



@media (max-width:480px){

    .hero {
        margin-top: 15%;
        margin-bottom: 160px;
        margin-top: 30%;
        margin-bottom: 70px;
        flex-direction: column;
        height: auto;
    }


    .hero_content {
        width: 100%;
        padding: 0 50px;
    }

    .hero_content h1 {
        font-size: 40px;
        font-size: 30px;
    }

    .hero_content p {
        font-size: 16px;
        font-size: 13px;
    }
    .mercado_titulo {
        padding: 0 60px;
    }

    .mercado-caja img {
        width: 500px;
        width: 300px;
    }
    #img5 {
        width: 650px;
        width: 425px;
    }


    .hero .bg_hero img {
        width: 40rem;
        padding-right: 10%;
        width: 25rem;
        padding-right: 5%;
        align-items: center;
    }


    .hero_content h1 {
        margin-bottom: 30px;
        margin-bottom: 15px;
    }
    .mercado_titulo h1 {
        font-size: 30px;
        font-size: 20px;
    }
    .mercado_content {
        flex-direction: column;
    }

    .mercado-caja {
        width: 50%;
        width: 100%;
    }
    .mercado-caja h3 {
        font-size: 16px;
    }
    .mer-lider h2 {
        font-size: 40px;
        font-size: 30px;
        font-weight: 600;
    }
    .mer-lider p {
        font-size: 16px;
        font-size: 13px;
        padding: 0 60px;
        text-align: justify;
    }

    .lider-content {
        margin-top: 60px;
        margin-top: 50px;
        flex-direction: column;
        gap: 20px;
    }
    .lider-box img {
        width: 100px;
        width: 70px;
    }
    .mer-titulo {
        padding: 0 30px;
    }
    .mer_scalones {
        flex-direction: column;
        align-items: stretch;
    }

    .mer_box .barra {
        width: 100%;
        width: 230px;
    }
    .mer_box1 .box_text {
        width: 180px;
        width: 230px;
    }
    .mer_box2 .box_text {
        width: 180px;
        padding-bottom: 70px;
        width: 230px;
        padding-bottom: 40px;
    }
    .mer_box3 .box_text {
        width: 180px;
        padding-bottom: 100px;
        width: 230px;
        padding-bottom: 60px;
    }
    .mer_box4 .box_text {
        width: 180px;
        padding-bottom: 150px;
        width: 230px;
        padding-bottom: 60px;
    }
    .mer_box {
        padding: 20px 0px;
    }
    .mer_box5 .box_text {
        padding-bottom: 100px;
        padding-bottom: 30px;
    }
    .mer_box2 img {
        width: 100px;
        width: 80px;
    }
    .mer_box3 img {
        width: 130px;
        width: 110px;
    }

    .mer_box4 img {
        width: 180px;
        width: 140px;
    }
    .mer_box5 img {
        width: 180px;
        width: 160px;
    }

    .mer-titulo > h2:nth-child(2) {
        font-size: 20px;
    }

    .mercado_titulo {
            padding: 0 60px;
    }

    .mer_box5 .barra{
        width: 400px;
    }



}