/* ============================================
   PROVITA ANESTESIA — PAGES
   Estilos compartilhados entre páginas:
   cabeçalhos de seção, CTA faixa e outros
   componentes de seção reutilizáveis.
   Mobile-first. Só variáveis de tokens.css.
   ============================================ */

/* ── CABEÇALHO DE SEÇÃO (reutilizável em todas as páginas) ── */
.secao__cabecalho {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--esp-xl);
}

.secao__sobretitulo {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-caption);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cor-verde-agua);
  margin-bottom: var(--esp-xs);
}

.secao__titulo {
  font-size: var(--fs-h2);
  color: var(--cor-azul-profundo);
  margin-bottom: var(--esp-sm);
}

.secao__intro {
  color: var(--cor-texto-suave);
  font-size: 1.0625rem;
  margin-inline: auto;
}

/* ── CTA FAIXA — componente global (Home + Atuação + outras páginas) ── */
.cta-faixa {
  background: var(--cor-azul-profundo);
  color: var(--cor-branco);
  padding-block: var(--esp-2xl);
}

.cta-faixa__interno {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-md);
}

.cta-faixa__titulo {
  font-size: var(--fs-h2);
  color: var(--cor-branco);
  line-height: 1.15;
}

.cta-faixa__texto {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 60ch;
}

.cta-faixa__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.cta-faixa__acoes .botao { width: 100%; justify-content: center; }

@media (min-width: 480px) {
  .cta-faixa__acoes { flex-direction: row; }
  .cta-faixa__acoes .botao { width: auto; }
}

/* ── FORMULÁRIOS — estilos globais (Parcerias + Contato) ──
   Excepção: #c0392b é cor funcional de alerta, não da marca. */
.formulario { max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--esp-md); }

.campo { display: flex; flex-direction: column; gap: var(--esp-xs); }

.campo label { font-weight: var(--peso-medio); font-size: var(--fs-caption); color: var(--cor-azul-profundo); letter-spacing: 0.04em; }

.campo input,
.campo select,
.campo textarea {
  padding: 0.8rem 1rem; border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md); background: var(--cor-branco);
  font-size: 1rem; color: var(--cor-texto); transition: var(--transicao); width: 100%;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--cor-verde-agua); outline: none;
  box-shadow: 0 0 0 3px rgba(95, 183, 168, 0.2);
}

.campo textarea { min-height: 120px; resize: vertical; }
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: #c0392b; }

.form-mensagem { font-size: 0.9375rem; font-weight: var(--peso-medio); }
.form-mensagem--sucesso { color: var(--cor-acento-escuro); }
.form-mensagem--erro    { color: #c0392b; }