/* ══════════════════════════════════════════════════════════════════════════
   contact.css — página de contato: coluna de informações + cartão de formulário.
   Reaproveita .field/.input/.select/.textarea/.btn da base. Só tokens.
   ══════════════════════════════════════════════════════════════════════════ */

.contact-grid { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-10); }
}

/* ── Coluna de informações ──────────────────────────────────────────────── */
.info-col { display: flex; flex-direction: column; gap: var(--sp-4); }
.info-card {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-xs);
}
.info-icon {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--glow-50); color: var(--green-800);
}
.info-card h3 { font-size: var(--fs-h4); color: var(--ink); margin-bottom: var(--sp-1); }
.info-card p { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; }
.info-card a {
  color: var(--green-800); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--lime-300); text-underline-offset: 3px;
}
.info-card a:hover { color: var(--forest); }

/* ── Cartão do formulário ───────────────────────────────────────────────── */
.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--sp-8); box-shadow: var(--sh-md);
}
.form-card h2 { font-size: var(--fs-h3); color: var(--ink); }
.form-lead { color: var(--ink-3); font-size: var(--fs-sm); margin-top: var(--sp-2); margin-bottom: var(--sp-6); }

.contact-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.field-row { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }
.contact-form .btn { margin-top: var(--sp-1); }

/* ── Mensagem de sucesso (trocada por JS) ───────────────────────────────── */
.success-msg { display: none; text-align: center; padding: var(--sp-8) var(--sp-2); }
.success-icon {
  width: 64px; height: 64px; margin: 0 auto var(--sp-5);
  display: grid; place-items: center;
  border-radius: 50%; background: var(--glow-50); color: var(--green-800);
}
.success-msg h3 { font-size: var(--fs-h3); color: var(--ink); margin-bottom: var(--sp-3); }
.success-msg p { color: var(--ink-3); max-width: 44ch; margin-inline: auto; line-height: 1.6; }