/*======================================
=              NOSOTROS
======================================*/

.nosotros{
    background:#ffffff;
    padding-top:100px;
    padding-bottom:150px;	
}

.nosotros__contenido{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;

}

/*======================================
=              IMAGEN
======================================*/

.nosotros__imagen{

    position:relative;

    display:flex;

    justify-content:center;

}

.nosotros__imagen img{

    width:90%;
    border-radius:20px;
    box-shadow:var(--sombra-suave);

}

/*======================================
=            BADGE
======================================*/

.nosotros__badge{

    position:absolute;
    bottom:25px;
    right:-20px;
    width:190px;
	padding:25px;
    background:#fff;

    border-radius:18px;

    padding:20px;

    text-align:center;

    box-shadow:var(--sombra-suave);

}

.nosotros__badge-numero{

    font-size:3rem;
    line-height:1;
    color:var(--color-secundario);
    font-weight:800;

}

.nosotros__badge-texto{

    margin-top:12px;

    font-size:1.1rem;

    line-height:1.5;

}

/*======================================
=            INFORMACIÓN
======================================*/

.nosotros__info h3{

    font-size:2rem;

    color:var(--color-primario);

    margin-bottom:25px;

}

.nosotros__info p{

    margin-bottom:35px;

    color:var(--color-texto-secundario);

}

/*======================================
=            BENEFICIOS
======================================*/

.nosotros__beneficios{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-bottom:40px;

}

.beneficio{

    display:flex;

    align-items:center;

    gap:15px;

    background:#F8F9FA;

    padding:18px;

    border-radius:12px;

    border-left:4px solid var(--color-secundario);

}

.beneficio span{

    color:var(--color-secundario);

    font-size:1.4rem;

}

.beneficio p{

    margin:0;

    font-weight:600;

}








/*======================================
=      RESPONSIVE NOSOTROS
======================================*/

/*======================================
TABLETS
======================================*/

@media (max-width:1024px){

    .nosotros{

        padding-top:80px;
        padding-bottom:100px;

    }

    .nosotros__contenido{

        gap:45px;

    }

    .nosotros__imagen img{

        width:100%;

    }

    .nosotros__badge{

        width:170px;
        right:-10px;
        bottom:15px;

    }

    .nosotros__badge-numero{

        font-size:2.5rem;

    }

    .nosotros__info h3{

        font-size:1.8rem;

    }

}


/*======================================
CELULARES
======================================*/

@media (max-width:768px){

    .nosotros{

        padding-top:70px;
        padding-bottom:80px;

    }

    .nosotros__contenido{

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

    }

    .nosotros__imagen{

        order:1;

    }

    .nosotros__info{

        order:2;
        text-align:center;

    }

    .nosotros__imagen img{

        width:100%;
        max-width:500px;

    }

    .nosotros__badge{

        width:160px;
        right:0;
        bottom:10px;

    }

    .nosotros__beneficios{

        grid-template-columns:1fr;

    }

}


/*======================================
CELULARES PEQUEÑOS
======================================*/

@media (max-width:480px){

    .nosotros{

        padding-top:60px;
        padding-bottom:70px;

    }

    .nosotros__info h3{

        font-size:1.6rem;

    }

    .nosotros__badge{

        position:relative;

        right:auto;
        bottom:auto;

        margin:25px auto 0;

        width:170px;

    }

    .nosotros__badge-numero{

        font-size:2.2rem;

    }

    .beneficio{

        flex-direction:column;
        text-align:center;
        gap:10px;

    }

}