/* =====================================================================
   contato.css — "Fale com a gente" (/pt/fale-com-a-gente/ e /en/contact-us/).

   Header, rodapé, botões e tokens vêm de base.css. Os campos seguem o
   formulário do /demo/ (mesmo fundo, borda, raio e foco), para os dois
   formulários do site parecerem da mesma família.
   ===================================================================== */

.contato { padding: 88px 0 120px; }
.contato__grid {
  max-width: var(--content); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px;
  align-items: start;
}

/* ---------- Coluna de texto ---------- */
.contato__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; position: sticky; top: 112px; }
/* Pílula lima com texto escuro: em fundo claro a lima não tem contraste para
   ser cor de texto (regra da marca), então ela preenche a forma. */
.contato__eyebrow {
  display: inline-block; padding: 7px 16px; border-radius: var(--pill);
  background: var(--lima); color: var(--heading);
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.contato__intro h1 {
  font-size: clamp(38px, 5.2vw, 60px); line-height: 1.06;
  letter-spacing: -.025em; color: #171717;
}
.contato__sub { font-size: 18px; line-height: 1.5; color: var(--body); max-width: 420px; }

.contato__alt {
  margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--lima-border);
  display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 420px;
}
.contato__alt p { font-size: 15px; line-height: 1.5; color: var(--body); }
.contato__alt a {
  color: var(--heading); font-family: var(--font-display); font-weight: 500;
  border-bottom: 1.5px solid var(--lima-border); padding-bottom: 1px;
  transition: border-color var(--t);
}
.contato__alt a:hover { border-color: var(--heading); }

/* ---------- Cartão do formulário ---------- */
.formcard {
  background: var(--surface); border-radius: var(--radius-xl);
  padding: 48px 40px;
}
/* Só e-mail e telefone dividem linha. Imobiliária e contratos ficam em linha
   cheia: lado a lado, "Número de contratos sob gestão" quebrava em duas linhas
   e desalinhava o par. */
.formcard__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.field__label { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--heading); }
.field__label .req { color: var(--body); font-weight: 400; }
.field input {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 16px;
  background: var(--offwhite-100); color: var(--heading);
  border: 1px solid var(--lima-border); border-radius: var(--radius-card);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
  appearance: none; -webkit-appearance: none;
}
.field input::placeholder { color: var(--muted); }
.field input:hover { border-color: var(--muted); }
.field input:focus {
  outline: none; background: var(--white);
  border-color: var(--heading); box-shadow: 0 0 0 3px rgba(2,21,43,.12);
}

/* Consentimentos (LGPD) */
.consent { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.consent__row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--body); cursor: pointer; }
.consent__row input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--navy); }
.consent__row a { color: var(--navy); text-decoration: underline; }

.formcard__foot { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

.form-error {
  display: none; font-size: 14px; line-height: 1.45; color: var(--navy); font-weight: 500;
  background: var(--offwhite-100); border: 1px solid var(--lima-border);
  border-radius: var(--radius-card); padding: 12px 14px;
}
.form-error.is-visible { display: block; }
.form-error a { text-decoration: underline; }

/* ---------- Confirmação ---------- */
.sent { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sent[hidden] { display: none; }
.sent__title { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 500; color: var(--heading); }
.sent__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 1px #c8de5c; flex: none; }
.sent p { font-size: 16px; color: var(--body); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .contato { padding: 48px 0 80px; }
  .contato__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .contato__intro { position: static; }
}
@media (max-width: 560px) {
  .formcard { padding: 32px 20px; border-radius: var(--radius-lg); }
  .formcard__row { grid-template-columns: 1fr; }
}