/* Divisão visual da página: alterna seções entre fundo escuro (original) e
   fundo claro, dando respiro e separação entre os blocos. Isolado do runtime
   original — apenas cores de superfície e leitura. */

/* Seções claras (ordem: abertura escura, depois alternando) */
#conteudo,
#resultados,
#troca,
#o-que-fica {
  background: #f8f9f2 !important;
  color: #14170c;
}

/* Títulos e textos claros originais ficam escuros nas seções claras */
#conteudo h1, #conteudo h2, #conteudo h3, #conteudo h4,
#resultados h1, #resultados h2, #resultados h3, #resultados h4,
#troca h1, #troca h2, #troca h3, #troca h4,
#o-que-fica h1, #o-que-fica h2, #o-que-fica h3, #o-que-fica h4,
#conteudo .text-branco,
#resultados .text-branco, #troca .text-branco, #o-que-fica .text-branco,
#conteudo .text-white,
#resultados .text-white, #troca .text-white, #o-que-fica .text-white {
  color: #14170c !important;
  -webkit-text-fill-color: #14170c;
}

/* Textos das seções claras: tons escuros para leitura, verde escurecido
   para manter contraste sobre o fundo claro */
#conteudo .text-dim,
#resultados .text-dim,
#troca .text-dim,
#o-que-fica .text-dim {
  color: #454c38 !important;
}

#conteudo .text-ash,
#resultados .text-ash,
#troca .text-ash,
#o-que-fica .text-ash {
  color: #5c6349 !important;
}

#conteudo .text-verde,
#resultados .text-verde,
#troca .text-verde,
#o-que-fica .text-verde {
  color: #6b9e00 !important;
}

/* Etiquetas e bordas suaves nas seções claras */
#conteudo .text-etiqueta,
#resultados .text-etiqueta,
#troca .text-etiqueta,
#o-que-fica .text-etiqueta {
  color: #6b9e00 !important;
}

#conteudo [class*="border"],
#resultados [class*="border"],
#troca [class*="border"],
#o-que-fica [class*="border"] {
  border-color: rgba(20, 23, 12, 0.14) !important;
}

/* Superfícies internas escuras viram cartões brancos suaves (sem sombra,
   para o card destacar com a própria borda) */
#conteudo [class*="bg-"],
#resultados [class*="bg-"],
#troca [class*="bg-"],
#o-que-fica [class*="bg-"] {
  background-color: #ffffff;
  box-shadow: none;
}

/* Preserva botões e destaques verdes originais dentro das seções claras */
#conteudo .bg-cta,
#resultados .bg-cta,
#troca .bg-cta,
#o-que-fica .bg-cta,
#conteudo .mvm-btn,
#resultados .mvm-btn,
#troca .mvm-btn,
#o-que-fica .mvm-btn {
  background-color: var(--color-verde, #d8fc54) !important;
  color: #14170c !important;
  box-shadow: 0 12px 32px -14px rgba(107, 158, 0, 0.55);
}

/* Imagens e vídeos não recebem fundo branco forçado */
#conteudo img,
#resultados img,
#troca img,
#o-que-fica img,
#conteudo video,
#resultados video,
#troca video,
#o-que-fica video {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Aba do painel de projeção (tres-passos) com fundo branco.
   As variáveis viradas localmente adaptam textos, linhas e cards
   do carrossel e do painel de faturamento ao fundo claro. */
#tres-passos,
#tres-passos > div {
  background: #ffffff !important;
}
#tres-passos {
  --superficie-secao: #ffffff;
  --color-ink: #0c1206;
  --color-dim: rgba(12, 18, 6, 0.62);
  --color-void: #ffffff;
}
#tres-passos .grain {
  display: none !important;
}

/* Verdes de texto escurecidos para leitura sobre o fundo branco
   (barras, gráficos e pontos de status continuam no verde-limão) */
#tres-passos .iv-showcase-label,
#tres-passos .iv-showcase h3 span,
#tres-passos .iv-revenue-eyebrow,
#tres-passos .iv-revenue-growth,
#tres-passos .iv-revenue-niche strong,
#tres-passos .iv-revenue-icon {
  color: #6b9e00 !important;
}

/* Remove somente o aparelho Claude e suas notificações nesta seção.
   Os celulares da simulação de produtos e do fluxo Pix permanecem intactos. */
#no-bolso .aparelho-bolso.nb-heroi {
  display: none !important;
}