/* ===========================================================================
   contato.css — A PÁGINA /contato DA BUSCA
   ---------------------------------------------------------------------------
   ⚠ ESTE ARQUIVO TINHA 941 LINHAS E FICOU COM ~230 (2026-09-22). O que saiu
   era TUDO da base, de onde esta pasta foi copiada, e nenhuma linha disso
   tinha markup no site desde que cada página foi replicada:

     .contato-*, .cartao-contato ... o desenho da /contato DELA (408 linhas).
                                     A nossa /contato é o bloco FALE CONOSCO
                                     abaixo, medido no site no ar da Busca.
     .cartao-contato (encomenda) ... a /imovel-sob-encomenda passou para o
                                     `.form-cartao` em 2026-09-22 (ver 8p).
     .trabalhe-form__*  ............ a /trabalhe-conosco carrega trabalhe.css,
                                     e estas duas regras não existem lá.
     .depo-*  ...................... foram para `css/depoimento.css`, quando a
                                     /enviar-depoimento entrou no padrão do
                                     site (ver 8z).

   ⚠ `.contato-form__titulo` TAMBÉM SAIU. A `/ficha-locatario` usa essa classe,
   mas carrega `ficha-locatario.css`, que tem a regra dela própria — esta aqui
   era uma SEGUNDA cópia, que nunca chegava na tela de ninguém. Conferido antes
   de apagar.

   O QUE SOBROU é só o desenho da nossa /contato, medido no site no ar.
   =========================================================================== */

/* ===========================================================================
   FALE CONOSCO — O DESENHO DA BUSCA (pages/contato.php)
   ---------------------------------------------------------------------------
   MEDIDO em 2026-09-22, nos três prints do Sami.

   ⚠ TUDO O QUE ESTÁ ACIMA NESTE ARQUIVO É DA base e continua servindo
   `/imovel-sob-encomenda` e `/enviar-depoimento`, que ainda não foram
   replicadas. Quando as duas saírem, o arquivo fica só com este bloco.

   RÉGUA MEDIDA (topo do cabeçalho = 0):

      120     topo da caixa cinza da migalha
      184,8   topo do <h1>, À ESQUERDA (30px, cravado num <style> da página)
      247,2   topo do MAPA — largura CHEIA, sangrando o container, 750 de altura
      289,6   topo do cartão do formulário (`top: 200px` do `#section-body`)
      971,2   borda esquerda do cartão; ele mede 360 (coluna de 1/3 com
              deslocamento de 2/3, dentro do container de 1170)
   =========================================================================== */

/* O TÍTULO À ESQUERDA — nas outras internas o mesmo componente é centrado. */
.fale__titulo {
    text-align: left;
}

/* O MAPA SANGRA. O `<div class="full-width">` do legado é filho direto do
   `#section-body`, fora de qualquer container: ele ocupa a janela inteira.

   ⚠ AQUI O MAPA É CAMADA DE FUNDO, E NÃO UM <iframe> DE ALTURA FIXA. No site
   no ar o iframe tem `height="750"` e o cartão, absoluto por cima, cabe
   sobrando. No nosso ele é MAIS ALTO — o desafio da Cloudflare, que lá não
   existe, acrescenta ~80px —, e com altura cravada o cartão ESCAPAVA pelo pé
   do mapa: metade dele ficava sobre o branco da página (print do Sami,
   2026-09-22).

   Com o iframe esticado por `inset: 0` e a altura vindo do conteúdo, o mapa
   cresce junto com o cartão e nunca acaba antes dele. Os 750 viram PISO
   (`min-height`), que é a medida do site no ar quando o cartão é menor. */
.fale-mapa {
    position: relative;
    width: 100%;
    /* 750 é o atributo `height` do <iframe> de lá — aqui vira o mínimo. */
    min-height: 750px;
}

.fale-mapa__quadro {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* O CONTAINER FICA NO FLUXO e é ele que dá altura ao bloco: é a inversão do
   `.contact-form-wrap` do legado, que é absoluto a 200px do topo do
   `#section-body` — 42px depois de o mapa começar. Os mesmos 42 aparecem aqui
   como respiro, em cima e embaixo, para o cartão nunca encostar na borda. */
.fale-mapa__container {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding-top: 42px;
    padding-bottom: 42px;
    pointer-events: none;
}

/* O CARTÃO — `.contact-form.white-block`: branco com 25 de respiro, numa
   coluna de 1/3 (360 de conteúdo dentro do container de 1170).
   `pointer-events` volta ao normal aqui: o resto da faixa deixa o mouse chegar
   ao mapa, que é arrastável. */
.fale-cartao {
    width: 360px;
    max-width: 100%;
    padding: 25px;
    background: var(--cor-branco);
    pointer-events: auto;
}

/* MEDIDO no print: 24px, preto, com 20 de margem embaixo. É um `<h3>` lá, e
   como toda a marcação de título do tema ele herda a fonte do corpo — ver a
   nota do @font-face no style.css. */
.fale-cartao__titulo {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: normal;
    color: #000;
}

.fale-form__campo {
    margin-bottom: 15px;
}

.fale-form__desafio {
    margin-bottom: 15px;
}

/* ⚠ O ÚNICO BOTÃO ESCURO DO SITE: o `.btn-secondary` do tema pinta #2e3e49, e
   o `.btn-long` dá 55px de respiro de cada lado. Os outros botões da Busca são
   o azul #3333FF. */
.fale-form__botao {
    padding: 11px 55px;
    border: 0;
    border-radius: 4px;
    background: #2e3e49;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857143;
    color: var(--cor-branco);
    cursor: pointer;
    transition: background-color var(--transicao);
}

.fale-form__botao:hover {
    background: #1f2b33;
}

/* --- Os três canais, abaixo do mapa ----------------------------------------
   O `.shadow-lg.p-3.mb-5.bg-white.rounded` do Bootstrap 4 com três `.address`
   dentro. MEDIDO: sombra `0 1rem 3rem` a 17,5%, respiro de 10 (o `.p-3` com o
   rem de 10px deste legado) e 30 de margem embaixo; cada canal com 60 de
   respiro em cima e 18 de respiro próprio.
   --------------------------------------------------------------------------- */

.fale-canais {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 15px 0 30px;
    padding: 10px;
    border-radius: 4px;
    background: var(--cor-branco);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .175);
}

.fale-canal {
    padding: 18px 0;
    margin-top: 60px;
    text-align: center;
}

/* O ÍCONE com o risco embaixo: caixa de 66px, glifo de 30, risco de 2px em
   #2e3e49 a 20px do glifo e 15 até o texto. */
.fale-canal__icone {
    display: inline-block;
    width: 66px;
    margin: 0 auto 15px;
    padding-bottom: 20px;
    border-bottom: 2px solid #2e3e49;
    color: #2e3e49;
}

.fale-canal__icone svg {
    width: 30px;
    height: 30px;
}

.fale-canal__texto {
    display: block;
    font-size: 18px;
    font-weight: 300;
    color: #727272;
}

a.fale-canal__texto:hover {
    color: #2e3e49;
}

/* --- Responsivo ------------------------------------------------------------
   ⚠ ABAIXO DE 992 O CARTÃO SAI DE CIMA DO MAPA. Na largura de coluna do
   Bootstrap 3 ele viraria linha inteira sobre o mapa e taparia o endereço —
   que é a única coisa que o mapa tem para mostrar. Fica abaixo dele.
   --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    /* O CARTÃO SAI DE CIMA DO MAPA: o mapa volta a ser um bloco de 400px e o
       cartão vem depois dele, no fluxo. */
    .fale-mapa {
        min-height: 0;
    }

    .fale-mapa__quadro {
        position: static;
        height: 400px;
    }

    .fale-mapa__container {
        display: block;
        padding-top: 0;
        padding-bottom: 0;
        pointer-events: auto;
    }

    .fale-cartao {
        width: 100%;
        margin-top: 30px;
        border: 1px solid #e5e5e5;
    }

    .fale-canais {
        grid-template-columns: 1fr;
    }

    /* MEDIDO no `<style>` da página: 30 de respiro abaixo de 600. */
    .fale-canal {
        margin-top: 30px;
    }
}

@media (max-width: 600px) {
    .fale__titulo {
        font-size: 25px;
    }
}