/* ============================================================
   OpenFluxo — regra de contraste
   Carregado por ÚLTIMO em todas as páginas.

   Fundo claro  → texto escuro
   Fundo escuro → texto branco
   ============================================================ */

:root {
  --tinta: #1a1a2e;        /* texto principal sobre fundo claro */
  --tinta-suave: #4a4858;  /* texto secundário sobre fundo claro */
}

/* ---------- Página: fundo branco com partículas ---------- */
html, body { background: #ffffff !important; }
body { color: var(--tinta) !important; }
#particles-js { background: #ffffff !important; }

/* ---------- Conteúdo sobre fundo claro: sempre escuro ---------- */
main h1, main h2, main h3, main h4, main h5, main h6,
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6,
.prova-faixa li,
footer h4, footer strong {
  color: var(--tinta) !important;
}

main p, section p, article p,
main li, section li, article li,
section blockquote, section figcaption,
section label, section td, section th,
section dt, section dd,
footer p, footer li {
  color: var(--tinta-suave) !important;
}

/* textos secundários que já usavam cinza continuam legíveis */
.hero-sub, .intro, .cta-reassure, .meios, .atualizado,
.servico p, .solucao p, .trava p, .recurso p, .modelo p, .motivo p,
.principio p, .frente p, .passos li p, .faq-resposta,
.numeros .rotulo, .numeros .nota, .destaque p, .blog-card p,
.leituras .fonte, .depoimento .autor > span > span,
.linha-tempo p, .lideranca p, .canal p, .quem li {
  color: var(--tinta-suave) !important;
}

/* links comuns em conteúdo claro */
section a:not([class]), article a:not([class]), footer a {
  color: var(--tinta) !important;
}
section a:not([class]):hover, article a:not([class]):hover, footer a:hover {
  color: #7C3AED !important;
}

/* ---------- Elementos de destaque em roxo (fundo claro) ---------- */
.hero-kicker, .rotulo, .passos li::before, .linha-tempo .quando,
.lideranca .cargo, .blog-card-badge, .depoimento .servico,
.meta-artigo .cat, .modelo .num, .solucao .saiba, .blog-read-more,
.trava h3, .motivo h3 i, .principio h3 i, .recurso i, .servico h3 i {
  color: #7C3AED !important;
}
.trava h3 { color: var(--tinta) !important; }

/* ---------- Superfícies escuras: sempre texto branco ---------- */

/* cabeçalho */
header, header * { color: #ffffff; }
header .nav-links a { color: #f5f5f5 !important; }
header .nav-links a:hover,
header .nav-links a.active { color: #c4b5fd !important; }
header .hamburger,
header .hamburger i { color: #ffffff !important; }
header .hamburger span { background: #ffffff !important; }

/* menu mobile aberto (overlay escuro) */
@media (max-width: 768px) {
  nav .nav-links a { color: #ffffff !important; }
}

/* botões com fundo colorido */
.btn-wa, .btn-wa *,
.cookie-aceitar,
.category-btn.active,
.lideranca .retrato,
.depoimento .autor .inicial,
.play .tag {
  color: #ffffff !important;
}

/* botão secundário continua escuro sobre branco */
.btn-ghost, .btn-ghost * { color: var(--tinta) !important; }
.btn-ghost:hover { color: #7C3AED !important; }

/* barra fixa e banner de cookies são brancos */
.cta-fixo .cta-fixo-texto strong,
.cookie-texto strong { color: var(--tinta) !important; }
.cta-fixo .cta-fixo-texto,
.cookie-texto p { color: var(--tinta-suave) !important; }
.cookie-recusar { color: var(--tinta) !important; }

/* números com gradiente continuam em gradiente */
.numeros .valor, .destaque b {
  -webkit-text-fill-color: transparent !important;
}

/* ---------- Superfícies que precisam de fundo sólido ---------- */
.secao, .passos, .faq-conv, .cta-fim, .numeros, .depoimentos,
.hero-conv, .artigo, .legal, .util {
  background-color: transparent;
}
.trava, .servico, .solucao, .recurso, .modelo, .quem > div,
.frente, .canal, .blog-card, .depoimento, .destaque,
.faq-item, .integra div, .setores span {
  background-color: #ffffff;
}

/* ---------- Legibilidade geral ---------- */
section h1, section h2 { letter-spacing: -0.01em; }

/* ---------- Menu no computador: cabe em uma linha em 1280px+ ---------- */
@media (min-width: 769px) {
  header .nav-links { gap: 1.35rem !important; }
  header .nav-links a { font-size: .88rem !important; white-space: nowrap; letter-spacing: .4px !important; }
}
@media (min-width: 769px) and (max-width: 1499px) {
  header .nav-buttons { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  header .nav-links { gap: .9rem !important; }
  header .nav-links a { font-size: .78rem !important; }
  header .logo-text { display: none !important; }
}

/* ---------- Alinhamento: título acompanha o texto que vem logo abaixo ---------- */
section h2 { text-align: left; }
section h2:not(.cta-fim h2):not(.faq-conv h2):not(.centro h2):not(.estrutura h2) { margin-left: 0; }
.cta-fim h2, .faq-conv h2, .centro h2, .estrutura h2 { text-align: center; }

/* ---------- Logo: símbolo oficial, sem o quadrado preto ---------- */
.logo img { width: 46px !important; height: auto !important; margin-right: 4px !important; border-radius: 0 !important; }
header .logo img { filter: drop-shadow(0 2px 8px rgba(6,182,212,.35)) !important; }
footer .logo img { filter: none !important; }
/* nome no cabeçalho escuro: degradê claro da marca, para ter contraste */
header .logo-text {
  background: linear-gradient(90deg, #c4b5fd 0%, #93c5fd 50%, #67e8f9 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ---------- Tabelas: rolagem própria em telas estreitas ---------- */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 1.25rem 0; }
.tabela-rolagem > table { margin: 0; min-width: 100%; }
.tabela-rolagem:focus-visible { outline: 3px solid #06B6D4; outline-offset: 2px; }
@media (max-width: 480px) { .tabela-rolagem table { font-size: .9rem; } .tabela-rolagem th, .tabela-rolagem td { padding: .6rem .65rem; } }

/* ícone do Instagram no rodapé */
.ig-rodape { width: 1em; height: 1em; fill: currentColor; vertical-align: -.14em; margin-right: .15em; }