/* ===========================================================================
   /anuncie-seu-imovel  —  "Cadastre seu imóvel"
   MEDIDA NA REFERÊNCIA DA PORTO (anuncie-seu-imovel.php, 2026-09-11) em
   1440 / 991 / 767 / 375.
   ---------------------------------------------------------------------------
   ⚠ O QUE ESTAVA NESTE ARQUIVO ERA DA INOVA/ICASA: cartão com raio 8 e borda
   rosa, título coral (#ff5652), campos de 47px com borda de 2px e cinco seções
   separadas por fio. A página da Porto não tem cartão nenhum — o formulário
   fica solto sobre o fundo — e são OITO campos em DUAS seções. Ver BRIEFING.md.

   A faixa de migalhas é o componente compartilhado (style.css), igual às
   outras internas; nada dela mora aqui.
   ======================================================================== */

/* A área do formulário (`.ltn__appointment-area`): nenhum respiro em cima — a
   classe `pt-115---` do HTML dela é inválida e não pinta nada — e 120 embaixo. */
.anuncie {
    padding: 0 0 120px;
    /* Contexto herdado da referência: 16/1.8, virando 14/1.8 abaixo de 992.
       Nenhum texto desta página herda (título e campos têm corpo próprio), mas
       o degrau é o do site no ar — mesma nota da .cartao-contato. */
    font-size: 16px;
    line-height: 1.8;
}

/* ⚠ SEM O `gap` DO COMPONENTE. `.form-lead` (style.css) é uma coluna flex com
   `gap: var(--gap)` = 16, e aqui o formulário da referência é bloco comum, sem
   espaço nenhum entre as partes. Os 16 entravam TRÊS vezes — entre as duas
   seções, antes do desafio e antes do botão — empurrando a página 48 para
   baixo. */
.anuncie-form {
    display: block;
}

/* --- Seções ---------------------------------------------------------------
   <fieldset>/<legend> no lugar do <h6> solto da referência. O reset abaixo é o
   que faz o par se comportar como um título de bloco comum. */
.anuncie-form__secao {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.anuncie-form__titulo {
    display: block;
    float: none;
    width: 100%;
    margin: 0 0 15px;
    padding: 0;
    font-family: var(--fonte-display);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-escura);
}

/* --- Grade ----------------------------------------------------------------
   O grid de lá é `row`/`col-md-*`: 15px de respiro em cada coluna e a linha
   recuada -15 para o primeiro campo encostar na borda do container. */
.anuncie-form__grade {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -15px;
}

.anuncie-form__campo {
    position: relative;
    padding-inline: 15px;
    /* O item de lá mede 90: campo de 60 + 30 de margem. */
    margin-bottom: 30px;
}

.anuncie-form__campo--12 { width: 100%; }
.anuncie-form__campo--6  { width: 50%; }

/* --- Campos --------------------------------------------------------------- */
.anuncie-form input {
    width: 100%;
    height: 60px;
    /* O respiro da direita é 40 por causa do ícone, que fica a 20 da borda. */
    padding: 1px 40px 1px 11px;
    border: 1px solid #e4ecf2;
    border-radius: 0;
    background: var(--cor-branco);
    font-family: var(--fonte-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--cor-texto);
}

.anuncie-form input:focus {
    border-color: var(--cor-primaria);
    outline: none;
}

/* ⚠ O MESMO LÁPIS EM TODOS OS CAMPOS. Na referência todo item leva
   `input-item-textarea ltn__custom-icon`, então nenhum campo tem o ícone
   próprio dele — é o lápis (f303) em todos, 16px, #11509d, centrado na altura
   e a 20 da borda direita do campo. Como a coluna tem 15 de respiro, aqui são
   35 até a borda da coluna. */
.anuncie-form__icone {
    position: absolute;
    top: 30px;
    right: 35px;
    transform: translateY(-50%);
    display: block;
    width: 16px;
    height: 16px;
    color: var(--cor-primaria);
    pointer-events: none;
}

.anuncie-form__icone svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Desafio e botão ------------------------------------------------------
   ⚠ 24 EMBAIXO, não 48: lá o bloco é `mb-4`. Na /contato é `mb-5`. A caixa é
   78, que é a do reCAPTCHA de lá — o Turnstile desenha menos (ver contato.css). */
.anuncie-form__turnstile {
    min-height: 78px;
    margin-bottom: 24px;
}

.anuncie-form__botao {
    display: inline-block;
    padding: 17px 40px;
    border: 1px solid #198754;
    border-radius: 0;
    background: #198754;
    color: var(--cor-branco);
    font-family: var(--fonte-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
    cursor: pointer;
}

.anuncie-form__botao:hover {
    background: #157347;
    border-color: #146c43;
}

/* ===========================================================================
   RESPONSIVO — os degraus são os mesmos do site no ar, medidos.
   ======================================================================== */

@media (max-width: 991.98px) {
    .anuncie {
        font-size: 14px;
    }

    .anuncie-form__titulo {
        font-size: 15px;
    }

    .anuncie-form__botao {
        padding: 15px 30px;
    }
}

@media (max-width: 767.98px) {
    .anuncie-form__titulo {
        font-size: 14px;
    }

    /* `col-md-6` some abaixo de 768: cada campo passa a ocupar a linha. */
    .anuncie-form__campo--6 {
        width: 100%;
    }

    .anuncie-form__botao {
        padding: 12px 30px;
        font-size: 14px;
    }
}