/* ===========================================================================
   contato.css — páginas de captação de lead
   ---------------------------------------------------------------------------
   Serve DUAS rotas, porque o layout é o mesmo (cabeçalho + duas colunas, o
   formulário sempre na direita):

     /contato             pages/contato.php   — canais diretos | formulário
     /anuncie-seu-imovel  pages/anuncie.php   — como funciona  | formulário

   O formulário em si é componente do style.css (`.form-lead`); aqui fica só o
   arranjo da página e os blocos que são dela. O cabeçalho das duas é o
   componente compartilhado `.pagina-hero` (ver style.css), não algo daqui.
   =========================================================================== */

/* --- 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-canais {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.canal {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: var(--gap);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-branco);
    transition: border-color var(--transicao), transform var(--transicao);
}

a.canal:hover {
    border-color: var(--cor-escura);
    transform: translateY(-2px);
}

.canal__icone {
    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);
}

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

.canal__dados {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.canal__dados strong {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

.canal__dados span {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--cor-escura);
    overflow-wrap: anywhere;
}

/* WhatsApp é o canal que resolve na hora: fundo verde e texto branco. */
.canal--destaque {
    background: var(--cor-whatsapp);
    border-color: var(--cor-whatsapp);
}

.canal--destaque .canal__icone { background: rgba(255, 255, 255, .25); color: var(--cor-branco); }
.canal--destaque .canal__dados strong { color: rgba(255, 255, 255, .85); }
.canal--destaque .canal__dados span { color: var(--cor-branco); }
.canal--destaque:hover { border-color: var(--cor-whatsapp); }

/* Horário não é link: não levanta no hover. */
.canal--estatico { background: var(--cor-fundo-alt); }
.canal--estatico .canal__icone { background: var(--cor-branco); }
.canal--estatico .canal__dados span { font-size: var(--fs-sm); font-weight: 500; color: var(--cor-texto); }

.contato-creci {
    margin: var(--gap-xs) 0 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

.contato-mapa {
    width: 100%;
    height: 340px;
    margin-top: var(--gap-lg);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
}

/* ===========================================================================
   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; }
    .contato-mapa { height: 260px; }
}

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