/* ==============================================================
   CONTATO — página contato.html: hero + card do formulário.
   Os campos do formulário em si (.form-field etc.) são um
   componente compartilhado — ficam em modulos/componentes.css,
   já que também são usados no "Vamos conversar" da home.
   ============================================================== */

.contact-page { background: #f5f5f5; }

.contact-hero { padding: 80px 0 var(--section-gap); }

.contact-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.contact-intro h1 {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
}

.contact-lead {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 48px;
}

.contact-lead .muted { color: var(--gray-06); }
.contact-lead .strong { color: var(--gray-07); font-weight: 600; }
.contact-lead .muted::after { content: " "; }

.contact-benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}

.contact-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  color: var(--gray-07);
}

.contact-benefits svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--orange);
}

.contact-direct {
  border-top: 2px solid var(--gray-04);
  padding-top: 20px;
}

.contact-direct-label {
  font-size: 14px;
  color: var(--gray-06);
  margin-bottom: 8px;
}

.contact-direct p + p { margin-top: 4px; }
.contact-direct a { font-size: 18px; font-weight: 600; color: var(--gray-07); }
.contact-direct a:hover { color: var(--orange); }

.contact-form-card {
  background: var(--white);
  border: 1px solid var(--gray-04);
  padding: 48px;
}

@media (max-width: 900px) {
  .contact-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .contact-intro h1 { font-size: 44px; }
  .contact-form-card { padding: 32px; }
}