/* ═══════════════════════════════════════════════════════════
   presenca — landing v2 · SUPLEMENTO
   Carregado DEPOIS de global.css + home.css (design system real).
   Só adiciona o que o DS não cobre: oferta DMAIC, antes/depois,
   estados do formulário e placeholder de case sem screenshot.
   Fontes: Syne (display) + Instrument Sans (body) — via home.css.
   ═══════════════════════════════════════════════════════════ */

/* ── CONTRASTE TEXT-SAFE (ADR-016) ──
   O DS usa #ff6c2f/#167c72 vivos, que falham AA quando viram TEXTO.
   Aqui defino variantes escuras só p/ texto/ícone e escureço o botão,
   preservando a linguagem visual. Escopado ao index.html (só style.css). */
:root {
  --accent-warm-text: #b83f08;   /* laranja p/ texto — 4.95:1 no cream */
  --accent-cool-text: #137066;   /* teal p/ texto — 5.25:1 no cream */
}
.btn-primary {
  background: linear-gradient(135deg, #c1440a 0%, #a3380a 100%);  /* branco 5.12:1 */
}
.btn-primary:hover {
  background: linear-gradient(135deg, #ab3a0a 0%, #8f300a 100%);
}
.solucao-num { background: linear-gradient(135deg, #c1440a, #a3380a); }  /* nº branco AA */
.process-step.dmaic { color: var(--accent-warm-text); }
.faq-item summary::after { color: var(--accent-warm-text); }
.hero-list li::before { color: var(--accent-warm-text); }

/* hero title: capa o Syne gigante p/ palavras longas (ex.: "concorrência")
   não estourarem o .hero-copy (que tem overflow:hidden e cortaria o texto) */
.hero-title { font-size: clamp(2.4rem, 5.5vw, 4.6rem); overflow-wrap: break-word; }

/* fix overflow horizontal no mobile: o .hero-grid (1.1fr/0.9fr, sem minmax0)
   sofre "grid blowout" — min-width:auto deixa um filho largo esticar a coluna.
   min-width:0 nos filhos + preço que quebra resolvem. */
.hero-grid > * { min-width: 0; }
.offer-price { flex-wrap: wrap; }

/* ── HERO: painel de oferta (dark) ── */
.offer-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  line-height: 1;
}
.offer-price strong { font-size: 2.6rem; color: #fff; }
.offer-price span { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); }

/* Degrau de entrada (R$ 97) — secundário ao preço principal, mesma família. */
.offer-alt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-display);
  line-height: 1.2;
}
.offer-alt strong { font-size: 1.25rem; color: rgba(255, 255, 255, 0.92); }
.offer-alt span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); }

/* Letra miúda sob cada botão de pagamento. */
.pay-hint {
  margin: 6px 0 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
  opacity: 0.75;
}
.pay-hint:last-child { margin-bottom: 0; }

/* ── DIAGNÓSTICO: letra DMAIC dentro do .process-step ── */
.process-step.dmaic { font-size: 1.5rem; }

/* caixa de benefícios (dark, na seção diagnóstico) */
.beneficios-box {
  margin-top: 24px;
  padding: 32px;
  border-radius: var(--page-radius);
  background: linear-gradient(145deg, #0d1a17, #0e2e28);
  color: #fff;
}
.beneficios-box h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 18px;
}
.beneficios-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.beneficios-list li {
  position: relative;
  padding-left: 30px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.5;
}
.beneficios-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #5eead4;
  font-weight: 700;
}

/* ── TRANSFORMAÇÃO: antes / depois ── */
.antes-depois {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: 40px;
}
.ad-col { padding: 30px; }
.ad-col h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 18px;
}
.ad-antes h3  { color: var(--page-muted); }
.ad-depois {
  background: rgba(22, 124, 114, 0.06);
  border-color: rgba(22, 124, 114, 0.3);
}
.ad-depois h3 { color: var(--accent-cool); }
.ad-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ad-col li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.45; }
.ad-mark { flex-shrink: 0; font-weight: 800; }
.ad-antes .ad-mark  { color: #c0392b; }
.ad-depois .ad-mark { color: #16a34a; }
.ad-seta { display: none; font-family: var(--font-display); font-size: 2rem; color: var(--accent-warm); text-align: center; }

/* ── CASES: placeholder p/ card sem screenshot ── */
.case-thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 210px;
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: #fff;
  flex-shrink: 0;
}
.ph-carcara { background: linear-gradient(145deg, #0c3d6b, #0891b2); }
.ph-sigma   { background: linear-gradient(145deg, #0f0802, #b84510); color: #ffd0b8; }

/* ── FORMULÁRIO: estados de validação ── */
.field .error-msg {
  color: #c0392b;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 1rem;
}
.field input.invalid,
.field select.invalid {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.05);
}
.field-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.field-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent-warm);
  cursor: pointer;
}
.field-check label {
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  line-height: 1.5;
}
.form-success,
.form-error {
  padding: 22px;
  border-radius: 18px;
  text-align: center;
}
.form-success {
  background: rgba(22, 124, 114, 0.1);
  border: 1px solid rgba(22, 124, 114, 0.4);
  color: #0a5c52;
}
.form-error {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.4);
  color: #9a2e22;
}
.form-success h3,
.form-error h3 { font-family: var(--font-display); margin: 0 0 8px; font-size: 1.1rem; }
.form-error p { margin: 0 0 14px; }

/* link alternativo (WhatsApp) na tela de pagamento */
.wpp-alt {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.86rem;
  color: var(--page-muted);
  text-decoration: underline;
}
.wpp-alt:hover { color: var(--accent-warm-text); }
.form-success .btn-primary { margin-top: 4px; }

/* botão WhatsApp verde (contraste AA) */
.btn-wpp-green {
  background: #0f7a35;
  color: #fff;
  border: 0;
}
.btn-wpp-green:hover { background: #0c6b2e; color: #fff; }

/* ── responsivo ── */
@media (min-width: 768px) {
  .beneficios-list { grid-template-columns: 1fr 1fr; }
  .antes-depois { grid-template-columns: 1fr auto 1fr; }
  .ad-seta { display: block; }
}