/* =============================================================
   COMO VAMOS AJUDAR VOCÊ (SERVIÇOS DO index.php DO SITE ANTIGO, TEMA QUARTER "feature-item-6"):
   115PX EM CIMA E 90PX EMBAIXO, SELO + <h1> E TRÊS CARTÕES (3 / 2 / 1 POR LINHA). O MESMO COMPONENTE NA HOME (TAMBÉM NOS
   ÍNDICES) E NA ÁREA DO CLIENTE.
   ============================================================= */
.ajuda {
    padding: 115px 0 90px;
    background: #fff;
}

/* .container DO BOOTSTRAP COM O responsive.css DO ANTIGO (1200PX A PARTIR DE 1200) */
.ajuda__container,
.destaques-simao__container {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.secao-titulo {
    margin-bottom: 50px;
    text-align: center;
}

/* SELO: TEXTO VERMELHO EM CÁPSULA VERMELHA A 10% */
.secao-titulo__selo {
    display: inline-block;
    margin: 0 0 15px;
    padding: 5px 20px;
    background: rgba(223, 2, 9, .1);
    border-radius: 25px;
    color: var(--cor-site-1);
    font-family: var(--fonte);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.secao-titulo__texto {
    margin: 0 0 15px;
    color: var(--cor-titulo);
    font-family: 'Poppins', sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.3;
}

.ajuda__grade {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -15px;
}

.ajuda__coluna {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
}

/* CARTÃO: BORDA CLARA, SOMBRA; A LINHA VERMELHA DE 4PX CRESCE EMBAIXO NO MARCADO E NO HOVER */
.ajuda-cartao {
    position: relative;
    margin-bottom: 30px;
    padding: 40px 30px 35px;
    background: #fff;
    border: 1px solid #f6f6f6;
    box-shadow: 0 16px 32px 0 rgba(7, 28, 31, .1);
    text-align: center;
    transition: all .3s ease 0s;
}

.ajuda-cartao::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--cor-site-1);
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease 0s;
}

.ajuda-cartao.ativo::before,
.ajuda-cartao:hover::before {
    width: 100%;
    opacity: 1;
    visibility: visible;
}

.ajuda-cartao__icone {
    margin-bottom: 20px;
    line-height: 1;
}

.ajuda-cartao__icone img {
    max-width: 100%;
    height: auto;
}

/* SEM JS: O QUADRO VAZIO SAI E FICA O GIF DO <noscript> (COM JS, O home.js TROCA PELO GIF DEPOIS DO load). */
@media (scripting: none) {
    .ajuda-cartao__icone img[data-foto-src] {
        display: none;
    }
}

.ajuda-cartao__info h3 {
    margin: 0 0 15px;
    color: var(--cor-titulo);
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.ajuda-cartao__info p {
    margin: 0;
    color: var(--cor-paragrafo);
    font-size: 14px;
    line-height: 1.8;
    hyphens: auto;
}

.ajuda-cartao__info p + p {
    margin-top: 15px;
}

/* "IMOVEIS PARA COMPRAR →": VERDE-ACINZENTADO; VERMELHO NO MARCADO E NO HOVER */
.ajuda-cartao__link {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    color: #8cb2b2;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
    transition: all .3s ease 0s;
}

.ajuda-cartao__link svg {
    align-self: center;
    width: 14px;
    height: 7px;
    margin-left: 1px;
}

.ajuda-cartao.ativo .ajuda-cartao__link,
.ajuda-cartao:hover .ajuda-cartao__link {
    color: var(--cor-site-1);
}

@media (min-width: 576px) {
    .ajuda__container,
    .destaques-simao__container {
        max-width: 540px;
    }

    .ajuda__coluna {
        flex-basis: 50%;
        max-width: 50%;
    }
}

@media (min-width: 768px) {
    .ajuda__container,
    .destaques-simao__container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .ajuda__container,
    .destaques-simao__container {
        max-width: 960px;
    }

    .ajuda__coluna {
        flex-basis: 33.333333%;
        max-width: 33.333333%;
    }
}

@media (min-width: 1200px) {
    .ajuda__container,
    .destaques-simao__container {
        max-width: 1200px;
    }
}

/* TAMANHOS DO ANTIGO POR LARGURA: TÍTULO (.section-title), SELO (h6) E NOME DO CARTÃO (h3) */
@media (min-width: 992px) and (max-width: 1199px) {
    .ajuda-cartao__info h3 {
        font-size: 22px;
    }
}

@media (max-width: 1199px) {
    .secao-titulo__texto {
        font-size: 30px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .secao-titulo__selo {
        font-size: 15px;
    }

    .ajuda-cartao__info h3 {
        font-size: 20px;
    }
}

@media (max-width: 991px) {
    .secao-titulo__texto {
        font-size: 26px;
    }
}

@media (max-width: 767px) {
    .secao-titulo__selo {
        font-size: 14px;
    }

    .secao-titulo__texto {
        font-size: 30px;
    }

    .ajuda-cartao__info h3 {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .secao-titulo__texto {
        font-size: 24px;
    }
}