/*==================================================
        RESPONSIVE - RED EMPRENDER EDUCATIVO
==================================================*/

/*==================================================
    1400px
==================================================*/

@media (max-width:1400px){

.container{
    width:90%;
    max-width:1200px;
}

.hero-info h1{
    font-size:56px;
}

.section-title{
    font-size:44px;
}

}

/*==================================================
    1200px
==================================================*/

@media (max-width:1200px){

.hero-nosotros-grid,
.historia-grid,
.red-grid{

    grid-template-columns:1fr;
    gap:50px;

}

.hero-info,
.historia-content,
.red-content{

    text-align:center;

}

.hero-image{

    order:-1;

}

}

/*==================================================
    992px
==================================================*/

@media (max-width:992px){

.section-title{

    font-size:40px;

}

.hero-info h1{

    font-size:46px;

}

.mv-grid{

    grid-template-columns:1fr;

}

.valores-grid{

    grid-template-columns:repeat(2,1fr);

}

.aliados-grid{

    grid-template-columns:repeat(2,1fr);

}

.red-stats{

    grid-template-columns:repeat(2,1fr);

}

.rede-linea::before{

    left:30px;

}

.rede-item{

    width:100%;
    margin-left:0;
    padding-left:90px;
    padding-right:0;

}

.rede-item.right{

    margin-left:0;

}

.rede-item.left .rede-card::before,
.rede-item.right .rede-card::before{

    left:-72px;

}

}

/*==================================================
    768px
==================================================*/

@media (max-width:768px){

.hero-nosotros{

    padding:130px 0 80px;

}

.hero-info h1{

    font-size:38px;

}

.hero-info p{

    font-size:18px;

}

.section-title{

    font-size:34px;

}

.historia-content h2,
.red-content h2{

    font-size:36px;

}

.valores-grid,
.aliados-grid,
.red-stats{

    grid-template-columns:1fr;

}

.cta-box h2{

    font-size:36px;

}

.cta-box p{

    font-size:18px;

}

.cta-buttons{

    flex-direction:column;
    align-items:center;

}

}

/*==================================================
    576px
==================================================*/

@media (max-width:576px){

.container{

    width:92%;

}

.hero-info h1{

    font-size:32px;

}

.hero-tag{

    font-size:14px;

}

.section-tag{

    font-size:14px;

}

.mv-card,
.valor-card,
.rede-card,
.aliado-card{

    padding:28px;

}

.historia-badge{

    position:relative;
    left:0;
    bottom:0;
    margin-top:20px;

}

}

/*==================================================
    430px
==================================================*/

@media (max-width:430px){

.hero-info h1{

    font-size:28px;

}

.section-title{

    font-size:30px;

}

.cta-box h2{

    font-size:30px;

}

}

/*==================================================
    360px
==================================================*/

@media (max-width:360px){

.hero-info h1{

    font-size:24px;

}

.hero-info p{

    font-size:16px;

}

.section-title{

    font-size:26px;

}

}