.compbem-title { font: 600 18.01px montserrat; letter-spacing: 3.18px; color: var(--cinza); }
.whats-btn { display: flex; max-width: 240px; background: var(--zap); color: var(--branco); align-items: center; font: 500 12.02px montserrat; justify-content: center; height: 40px; gap: 7px; margin: 75px auto; }

.servico-bg { padding: 80px 0 90px; }
.servico .top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 65px; }
.servico .top .title { display: flex; flex-direction: column; font: 34.62px / 1.3 titillium; color: var(--preto); }
.servico .top .text { font: 15px / 2 montserrat; margin-top: 50px; }
.servico .top .img { display: flex; align-items: center; justify-content: center; }
.servico .top .img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.uso .sob-title {font: 34.69px / 1.2 titillium; color: var(--preto); text-align: center; max-width: 700px; margin: 0 auto 20px;}
.uso .title,
.uso .text { text-align: center; }
.uso .title { font: 42.69px / 1 titillium; color: var(--preto); }
.uso .text { font: 15px / 2 montserrat; margin-top: 30px; }

.diferenciais-sob-title { text-align: center; font: 700 34.69px / 1.2 titillium; color: var(--preto); margin: 45px auto 20px; max-width: 700px;}

.diferenciais { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; margin: 90px 0 0; width: 100%; }
.diferenciais .diferencial { display: flex; flex-direction: column; align-items: center; padding: 60px 100px; box-sizing: border-box; justify-content: center; }
.diferencial .title-diferencial { text-align: center; font: 700 25.02px / 1 titillium; color: var(--preto); margin: 15px 0; }
.diferencial .text-diferencial { text-align: center; font: 15.17px / 1.3 montserrat; color: var(--preto); }
.diferencial:nth-child(odd) .title-diferencial { color: var(--branco); }
.diferencial:nth-child(odd) .text-diferencial { color: var(--branco); }
.diferencial:nth-child(odd):not(:nth-child(5)) { background: var(--cor2); }
.diferencial:nth-child(odd) { background: var(--cor1); }
.como-funciona-bg { padding: 90px 0; box-shadow: 2px 0px 9px 0 rgba(0, 0, 0, 0.18); }
.como-funciona { display: grid; grid-template-columns: repeat(2, 1fr); gap: 75px; }
.como-funciona .left .title{ font: 49.62px / 1 titillium; display: flex; flex-direction: column;  }
.como-funciona .left .text { font: 15px / 2 montserrat; color: var(--preto); margin-top: 30px; }
.como-funciona .whats-btn { margin: 50px 0 0; }
.como-funciona .img { display: flex; align-items: center; justify-content: center; background: var(--cinza); aspect-ratio: 9 / 16;; max-width: 427px; margin: 0 auto;}
.como-funciona .img iframe { width: 100%; height: 100%;}

@media(max-width: 1250px){
    .servico-bg { padding: 45px 0; }
    .diferenciais { grid-template-columns: repeat(2, 1fr); }
    .diferenciais .diferencial:nth-child(3) { order: 4 !important; }
    .diferenciais .diferencial:nth-child(4) { order: 3 !important; }
    .como-funciona { gap: 40px; }
    .como-funciona .whats-btn { margin-top: 20px; }
    .como-funciona .left .title { font-size: 42px; }
    .compbem-title { font-size: 15px; }
    .servico-bg:has(.como-funciona-bg) { padding: 50px 0 0; }
}

@media(max-width: 990px){
    .servico-bg {padding: 25px 0;}
    .servico .top { display: flex; flex-direction: column-reverse; }
    .diferenciais .diferencial { padding: 50px; }
    .diferencial .title-diferencial { font-size: 22px; }
    .diferencial .text-diferencial { font-size: 14px; margin-top: 15px; }
    .whats-btn { margin: 30px auto; }
    .uso .title,
    .servico .top .title { font-size: clamp(32px, 3.5vw, 40px); }
    .servico .top .text { margin-top: 20px; }
    .como-funciona { display: flex; flex-direction: column-reverse; }
    .como-funciona .left .title { font-size: clamp(30px, 3.2vw, 38px); }
}

@media(max-width: 550px) {
    .diferenciais { grid-template-columns: 1fr;  margin: 30px 0 0; }
    .diferenciais .diferencial:nth-child(3) { order: 3 !important; }
    .diferenciais .diferencial:nth-child(4) { order: 4 !important; }
}