/* ===========================================================================
   contato.css — páginas de captação de lead
   ---------------------------------------------------------------------------
     /contato             pages/contato.php          — MEDIDA na referência:
                          título miúdo + um cartão largo com o formulário e
                          três cartões de canal embaixo. NÃO tem mais duas
                          colunas, nem hero, nem mapa (a referência não tem)
     /anuncie-seu-imovel  pages/anuncie.php          — ainda no arranjo da
     /solicite-um-imovel  pages/solicite-imovel.php     Imofar: duas colunas
                          com `.pagina-hero` e `.contato-grid`, esperando
                          medição

   O formulário em si é componente do style.css (`.form-lead`); aqui fica o
   arranjo de cada página. As três de baixo ainda usam `.contato-grid` e
   `.contato-form` — não apagar junto com a faxina de /contato.
   =========================================================================== */

/* --- Duas colunas: conteúdo | formulário --------------------------------- */
.contato-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: var(--gap-lg);
    align-items: start;
}

/* ===========================================================================
   CANAIS DE CONTATO (/contato)
   =========================================================================== */
/* ===========================================================================
   /contato — MEDIDO NA REFERÊNCIA (fale-conosco.php, 2026-08-21, viewport 1440)
   ---------------------------------------------------------------------------
     faixa do formulário .. padding-top 50
     título (h1) .......... 20px/500 #4f4f4f, à esquerda, 15px até o cartão
     cartão ............... 1320x540: fundo #fefefe, raio 20, borda 1px
                            #cfcfcf e borda de CIMA de 5px amarela
     campos ............... recuados 46px de cada lado dentro do cartão
                            (30 do padding + 16 da coluna do Bootstrap dela),
                            47px de altura, borda 1px #dedede, raio 4,
                            respiro 1px 15px, 17px entre linhas e 30 entre
                            e-mail e telefone
     ícone no campo ....... amarelo, encostado 20px na direita
     textarea ............. 150px de altura, respiro 15px 20px, ícone a 25px
                            do topo
     botão ................ 134x51, raio 10, 14px/600 MAIÚSCULAS, 24px depois
                            do último campo
     faixa dos cartões .... padding-top 40; três cartões de 410 com 30px entre
                            eles e 15px de recuo nas pontas
     cartão de canal ...... mesmo cartão branco; ícone de 48px na tinta forte,
                            título 20px/700 AMARELO com 15px embaixo, texto
                            16px/400 #282828, tudo centrado
   =========================================================================== */
.contato-mensagem {
    padding-top: 50px;
}

/* Título miúdo das páginas internas já medidas (/contato e /anuncie-seu-imovel
   — nas duas a referência usa a mesma `.title-content`).
   MEDIDO: o texto começa em x=75 com o container em 60 — os 15px são o respiro
   da coluna do Bootstrap dela. Os três cartões de canal têm o mesmo recuo; o
   cartão do formulário da /contato, não (encosta no container). */
.pagina-titulo-mini {
    margin: 0 0 15px;
    padding-left: 15px;
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
    color: #4f4f4f;
}

/* O cartão branco é o mesmo componente do formulário e dos três canais — na
   referência os dois são `.property-details-background`. */
.cartao-contato {
    padding: 30px;
    background: var(--cor-fundo-alt);
    border: 1px solid #cfcfcf;
    border-top: 5px solid var(--cor-primaria);
    border-radius: 20px;
}

/* --- Formulário ----------------------------------------------------------- */
/* MEDIDO: os campos ficam 46px dentro do cartão — 30 do respiro dele mais 16
   da coluna do Bootstrap que envolve cada campo na referência. Os cartões de
   canal não têm esse segundo recuo (lá o conteúdo é filho direto). */
.cartao-contato .form-lead {
    padding-inline: 16px;
}

.cartao-contato .form-lead__campos {
    gap: 0 30px;   /* MEDIDO: 30px entre e-mail e telefone; a vertical vem da margem do campo */
}

.cartao-contato .campo {
    margin-bottom: 17px;
}

.cartao-contato .campo input,
.cartao-contato .campo textarea {
    padding: 1px 15px;
    border-color: #dedede;
    border-radius: 4px;
    background: var(--cor-fundo-alt);
    color: var(--cor-escura);
    font-size: var(--fs-base);
}

.cartao-contato .campo input {
    height: 47px;
}

.cartao-contato .campo textarea {
    height: 150px;   /* MEDIDO — sem isto o `rows` do componente dá 152 */
    min-height: 150px;
    padding: 15px 20px;
    resize: vertical;
}

/* MEDIDO: 134x51 com respiro 14px 40px, raio 10, rótulo 14px/600 em
   maiúsculas. É o único botão do site com esse raio — o "SAIBA MAIS" da home
   tem 24 e os demais 5/10/13. */
.cartao-contato .form-lead__acoes {
    margin-top: 24px;
}

.cartao-contato .form-lead__acoes .btn {
    /* O componente manda o botão esticar (`flex: 1; min-width: 200px`) porque
       nas outras páginas ele ocupa a coluna. Aqui é o botão medido: 134x51,
       encostado à esquerda. */
    flex: 0 0 auto;
    min-width: 0;
    padding: 14px 40px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    text-transform: uppercase;
}

/* ===========================================================================
   /anuncie-seu-imovel e /solicite-um-imovel
   ---------------------------------------------------------------------------
   MEDIDO NA REFERÊNCIA (anuncie-seu-imovel.php e solicite-seu-imovel.php): as
   duas são o cartão e os campos da /contato com outro enquadramento —

     faixa .... padding-top 50 nas duas
     título ... 39px até o cartão, e não 24 como na /contato: nestas duas o
                título mora numa coluna com `mb-4` que soma respiro
     cartão ... /solicite: 1320, encostado no container, igual à /contato
                /anuncie:  1290, 15px dentro do container de cada lado, porque
                lá ele fica num `.container > .row > .col-lg-12`

   E há uma diferença de campo entre elas: a /solicite tem o ícone amarelo na
   direita (mesma marcação da /contato) e a /anuncie NÃO — lá a referência usa
   `.input-item` sem a classe `ltn__custom-icon` (conferido: `content: none`).
   Quem manda nisso é o `sem_rotulos` do partials/form-contato.php contra o
   form-anuncie.php, não o CSS.
   =========================================================================== */
.anuncie,
.solicite {
    padding-top: 50px;
}

.anuncie .pagina-titulo-mini,
.solicite .pagina-titulo-mini {
    margin-bottom: 39px;
}

.anuncie .cartao-contato {
    margin-inline: 15px;
}

/* --- Três cartões de canal ------------------------------------------------ */
.contato-canais {
    padding-top: 40px;
}

/* MEDIDO: cartões de 410 com 30 entre eles, e 15px de recuo nas pontas — na
   referência isso vem do respiro das colunas do Bootstrap, aqui é explícito. */
.contato-canais__grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    padding-inline: 15px;
}

.contato-canal {
    text-align: center;
}

.contato-canal__icone {
    display: block;
    /* Sem zerar a linha, a caixa do <span> sai 8px mais alta que o glifo e o
       cartão fecha 207 em vez dos 199 medidos. */
    line-height: 0;
    color: var(--cor-escura);
}

.contato-canal__icone svg {
    display: block;
    width: auto;
    height: 48px;   /* MEDIDO: é o `fa-3x` da referência */
    margin: 0 auto;
}

.contato-canal__titulo {
    margin: 0 0 15px;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    color: var(--cor-primaria);
}

.contato-canal__texto {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 24px;
    color: var(--cor-escura);
    overflow-wrap: anywhere;
}

.contato-canal__texto a:hover {
    text-decoration: underline;
}

/* ===========================================================================
   CARTÃO DO FORMULÁRIO (as duas páginas)
   =========================================================================== */
.contato-form {
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-branco);
    box-shadow: var(--sombra);
}

.contato-form__titulo { margin: 0 0 .25rem; font-size: var(--fs-xl); }

.contato-form__texto {
    margin: 0 0 var(--gap);
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
}

/* ===========================================================================
   ETAPAS (/anuncie-seu-imovel)
   =========================================================================== */
.etapas {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

/* Cartão no mesmo molde de `.canal` (canais de contato, acima): borda,
   fundo branco e um badge quadrado à esquerda — assim as duas colunas da
   página falam a mesma língua visual, em vez de uma lista nua ao lado de
   um formulário em card. */
.etapa {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    padding: var(--gap);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-branco);
}

/* Badge quadrado igual ao `.canal__icone`, com o número da etapa em um
   selo circular no canto — o ícone identifica a ação, o número mantém a
   sequência real (fala → avalia → divulga → fecha) sem duplicar marcador. */
.etapa__badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--raio-sm);
    background: var(--cor-fundo-alt);
    color: var(--cor-escura);
}

.etapa__badge svg { width: 20px; height: 20px; }

.etapa__numero {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--cor-branco);
    border-radius: 50%;
    background: var(--cor-escura);
    font-family: var(--fonte-display);
    font-size: .6rem;
    font-weight: 800;
    color: var(--cor-branco);
}

.etapa__titulo {
    margin: 0 0 .25rem;
    font-size: var(--fs-lg);
}

.etapa__texto {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
}

/* O CTA de WhatsApp é ação, não mais um cartão da lista: respiro maior. */
.etapas > .btn { margin-top: var(--gap-sm); }

/* ===========================================================================
   RESPONSIVO
   =========================================================================== */
@media (max-width: 991px) {
    /* O formulário vai para cima: é o objetivo da página. */
    .contato-grid { grid-template-columns: 1fr; }
    .contato-form { order: -1; }

    /* Os três cartões empilham — na referência são `col-lg-4`, que vira coluna
       inteira abaixo de 992, e é aí que ela liga o `gap: 30px`. */
    .contato-canais__grade { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .form-lead__campos { grid-template-columns: 1fr; }
    .form-lead__acoes .btn { width: 100%; flex: none; }

    /* Cartão estreito: o respiro de 30px come metade da largura útil. */
    .cartao-contato { padding: 20px; }
    .cartao-contato .form-lead { padding-inline: 0; }
}