/* AJUSTES DA V6.6 NA HOMOLOGAÇÃO (26/10/2026) — escrito à mão, NÃO sai do porte (scripts/portar-site-html.mjs só o liga no
   index.html, depois do site-app.css). Só CSS: o texto e o HTML do Paulo ficam como vieram. Os dois defeitos estão no
   arquivo original (reproduzidos nele sem porte):

   1. MARGEM — `.essential-content{padding:54px 0 88px}` zera o recuo lateral que a classe .wrap dá ao mesmo elemento; os
      blocos de Produtos, Empresa, Perguntas e Começar encostavam na borda (x=0 no celular e no desktop até ~1180px).
   2. TEMA ESCURO — o texto vira claro, mas o fundo de várias caixas continua claro (cabeçalho das páginas internas, faixa
      "Comece numa área", cartões, acordeões, fluxo de Como funciona): contraste ~1,1:1. Os títulos dos blocos internos
      ficavam azul-marinho sobre o fundo escuro. As cores abaixo são as da própria paleta escura do Paulo. */

/* 1. Margem */
.essential-content.wrap { padding-left: 28px; padding-right: 28px; }
@media (max-width: 650px) { .essential-content.wrap { padding-left: 20px; padding-right: 20px; } }

/* Tema claro: o body do pacote não define fundo e herda a tela do navegador — escura no modo escuro forçado de alguns
   navegadores, com os textos azul-marinho por cima. O desenho claro assume branco. */
html:not([data-theme="dark"]) body { background: #fff; }

/* 2. Tema escuro: caixas que ficavam claras */
html[data-theme="dark"] .page .pagehead { background: #101d31; border-color: #243a58; } /* vence o `.page:not(…) .pagehead` claro */
html[data-theme="dark"] .banner { background: #152640; border: 1px solid #2a4162; }
html[data-theme="dark"] .essential-grid > article,
html[data-theme="dark"] .essential-faq-highlight,
html[data-theme="dark"] details.essential-accordion,
html[data-theme="dark"] details.flow-detail,
html[data-theme="dark"] .process-flow > div { background: #152640; border-color: #2a4162; box-shadow: none; }
html[data-theme="dark"] .process-flow > .flow-human,
html[data-theme="dark"] .human-note { background: #10303a; border-color: #1f5560; }

/* 2. Tema escuro: textos escuros sobre fundo escuro */
html[data-theme="dark"] .essential-content h2,
html[data-theme="dark"] .essential-deeper h2 { color: #e8f3ff; }
html[data-theme="dark"] .essential-content .eyebrow,
html[data-theme="dark"] .essential-grid > article > b,
html[data-theme="dark"] .essential-grid > article > a,
html[data-theme="dark"] .essential-grid .step { color: #57dfe1; }
html[data-theme="dark"] .flowline > div > span,
html[data-theme="dark"] .flowline > i,
html[data-theme="dark"] .v54-explore-grid a em { color: #8cc8f5; }
html[data-theme="dark"] .v53-note { color: #a9bbd0; }

/* 2. Tema escuro: títulos e rótulos das caixas que agora são escuras (eram azul-marinho para a caixa clara) */
html[data-theme="dark"] .essential-grid h3,
html[data-theme="dark"] .essential-faq-highlight h3,
html[data-theme="dark"] .essential-accordion > summary,
html[data-theme="dark"] .essential-accordion > summary strong,
html[data-theme="dark"] .flow-detail > summary,
html[data-theme="dark"] .process-flow > div strong { color: #e8f3ff; }
html[data-theme="dark"] .essential-accordion > summary small,
html[data-theme="dark"] .flow-detail > summary span,
html[data-theme="dark"] .process-flow > div small { color: #a9bbd0; }

/* Botão "Institucional" (portal interno, 27/10/2026): no cabeçalho a partir de 651px; no celular, como item do menu
   (o cabeçalho já tem tema, Entrar e Menu e estouraria os 375px). */
.links .inst-menu { display: none; }
@media (max-width: 650px) {
  .topbtns .inst-top { display: none; }
  .links .inst-menu { display: block; }
}