.banner-proy {
    background-image: url(../img/banners/proyecto.jpg);
    height: 276px;
}
.banner-serv {
    background-image: url(../img/banners/servicio.jpg);
    height: 276px;
}
.banner-proy h3 {
    font-size: 30px;
    color: var(--colorBlanco);
}
.callout-1 {
    padding: 55px 0 80px;
}
.callout-1 .proyecto {
    margin-bottom: 50px;
}
.callout-2 {
    background-color: var(--colorPlomo);
    padding: 40px 0 70px;
}
.callout-2 h1 {
    font-size: 38px;
}
.callout-2 p {
    font-size: 15px;
}
.callout-2 .detalle > p {
    padding-bottom: 20px;
}
.callout-2 .cuadro {
    font-size: 16px;
    line-height: 1;
    background-color: var(--color3);
    color: var(--colorBlanco);
    display: block;
    width: 210px;
    padding: 10px 20px;
    margin-bottom: 15px;
}
.callout-2 .descri > p {
    color: #666;
    padding: 14px 0;
}
.callout-2 .descri > p strong {
    color: #333;
}
.callout-2 .descri > p + p {
    border-top: 1px solid #CECECE;
}
.callout-3 {
    padding: 50px 0 80px;
}
.callout-3 h5 {
    font-size: 36px;
}
.callout-3 h1 {
    font-size: 38px;
}
.callout-3 p.titulo {
    font-size: 17px;
}
.callout-3 .detalle > p {
    font-size: 15px;
    padding-bottom: 20px;
}
.callout-3 .detalle > ul {
    list-style: disc;
    font-size: 15px;
    padding-left: 20px;
}
.callout-3 .detalle > ul li {
    padding-bottom: 4px;
}
.callout-3 .flex-servicio > a {
    background-color: var(--color4);
    color: var(--color2);
    padding: 15px;
    font-size: 15px;
    line-height: 1.1;
}
.callout-3 .flex-servicio > a:hover,
.callout-3 .flex-servicio > a.active {
    background-color: var(--color2);
    color: var(--color4);
}

@media screen and (max-width: 980px){
    .banner-serv,
    .banner-proy {
        height: 140px;
    }
    .callout-3 h1,
    .callout-2 h1 {
        font-size: 30px;
    }
}