/* ============================================================
   contato.css — página de Solicitar Proposta
   Header (hero .sec-dark) + seção do formulário (.sec-light).
   Tudo lê os tokens contextuais --c-* -> adapta ao tema da seção.
   ============================================================ */

/* --- layout de duas colunas: apoio à esquerda, formulário à direita --- */
.contact-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.contact-aside .lead { margin-top: 16px; }
.contact-aside .svc-check { margin-top: 24px; }
.contact-aside a { color: var(--c-accent); text-decoration: none; }
.contact-aside a:hover { text-decoration: underline; }

/* --- lista de canais (checkmark igual às páginas de serviço) --- */
/* --- cartão do formulário --- */
.form-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--c-shadow);
}

.req-note { font-size: 12px; color: var(--c-faint); margin: 0 0 16px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 12px; color: var(--c-muted); letter-spacing: .2px; }

.form-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--c-line2);
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease, box-shadow .2s ease;
}

.form-input::placeholder { color: var(--c-faint); }

.form-input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(4, 107, 210, .18);
}

.form-textarea { min-height: 140px; resize: vertical; }

.form-full { grid-column: 1 / -1; }

.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* garante que nada estoure a largura no mobile */
img, svg, video { max-width: 100%; height: auto; }
.form-card, .form-grid, .form-input, .form-textarea { max-width: 100%; }

/* --- responsivo --- */
@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-full { grid-column: auto; }
}