/* ==========================================================================
   TEMA — Contábil Precisa (site de exemplo)
   Direção: limpo e confiável, com cara de software moderno. Nicho de foto
   BAIXA: quem decide quer clareza, previsibilidade e sensação de organização.
   Referência do nicho: contabilidades digitais, onde o site vende
   tranquilidade e preço transparente.
   ========================================================================== */

:root {
  --cor-fundo: #ffffff;
  --cor-superficie: #f1f7f8;
  --cor-escuro: #0c2f3f;
  --cor-texto: #12242c;
  --cor-texto-suave: #55676f;
  --cor-borda: #dde8ea;

  --cor-marca: #0c2f3f;
  --cor-marca-escura: #071e29;
  --cor-destaque: #0f6f6a;        /* verde-petróleo: 6:1 sobre branco */
  --cor-destaque-escura: #0b5450;
  --cor-destaque-clara: #6ee7d7;  /* menta, para o fundo escuro */

  --fonte-titulo: "Manrope", system-ui, sans-serif;
  --fonte-corpo: "Inter", system-ui, sans-serif;
  --peso-titulo: 700;

  --raio: 10px;
  --raio-g: 18px;
}

.marca-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cor-marca);
  white-space: nowrap;
}
.marca-nome em { font-style: normal; color: var(--cor-destaque); }
.superficie-escura .marca-nome, .rodape .marca-nome { color: #fff; }
.superficie-escura .marca-nome em, .rodape .marca-nome em { color: var(--cor-destaque-clara); }

/* Selo de destaque no herói */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  color: var(--cor-destaque);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
}

/* Números que passam sensação de organização */
.numeros { display: grid; gap: var(--e-6); }
.numero strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.numero span { color: var(--cor-texto-inverso-suave); font-size: 0.95rem; }

/* Item de serviço com marcador */
.servico-item { display: flex; gap: var(--e-4); align-items: flex-start; }
.servico-item .marcador {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: var(--cor-superficie); color: var(--cor-destaque);
  display: grid; place-items: center; font-weight: 800; font-family: var(--fonte-titulo);
}

/* Comparativo honesto (contador antigo x aqui) */
.troca { display: grid; gap: var(--e-5); }
.troca-col h3 { font-size: 1.15rem; margin-bottom: var(--e-4); }
.troca-col ul { display: grid; gap: var(--e-3); }
.troca-col li { display: flex; gap: 0.6rem; font-size: 0.96rem; color: var(--cor-texto-suave); }
.troca-col .sim { color: var(--cor-destaque); font-weight: 800; }
.troca-col .nao { color: #b4443a; font-weight: 800; }

.contato-dados { display: grid; gap: var(--e-4); }
.contato-dados div { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.contato-dados dt { font-family: var(--fonte-titulo); font-weight: 700; color: var(--cor-texto); min-width: 8rem; }
.contato-dados dd { margin: 0; color: var(--cor-texto-suave); }

@media (min-width: 760px) {
  .numeros { grid-template-columns: repeat(3, 1fr); }
  .troca { grid-template-columns: repeat(2, 1fr); gap: var(--e-8); }
}