/* =========================================================
   ZATRISH · base compartilhada (todas as páginas)
   Tokens de cor (claro/escuro), fundo quadriculado, cabeçalho, rodapé
   ========================================================= */
:root {
  --fundo: #FFFFFF;
  --tinta: #000000;
  --cinza: #5E5E5E;
  --painel: #F4F4F2;
  --linha: rgba(0, 0, 0, .16);
  --linha-forte: rgba(0, 0, 0, .32);
  --grade: rgba(0, 0, 0, .055);
  --curva: cubic-bezier(.22, .8, .24, 1);
  --alt-topo: 64px;
  color-scheme: light;
  font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-optical-sizing: auto;
}
:root[data-tema="escuro"] {
  --fundo: #0B0B0B;
  --tinta: #FFFFFF;
  --cinza: #A9A9A9;
  --painel: #161616;
  --linha: rgba(255, 255, 255, .16);
  --linha-forte: rgba(255, 255, 255, .38);
  --grade: rgba(255, 255, 255, .06);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--fundo);
  background-image:
    linear-gradient(var(--grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center top;
  color: var(--tinta);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .45s ease, color .45s ease;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.cx { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  height: var(--alt-topo);
  background: color-mix(in srgb, var(--fundo) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .45s;
}
.topo.rolou { border-bottom-color: var(--linha); }
.topo .cx { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { font-weight: 700; letter-spacing: -.01em; font-size: 1.0625rem; text-decoration: none; }
.menu { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); }
.menu a.item { font-size: .9375rem; font-weight: 500; text-decoration: none; position: relative; padding: 4px 0; }
.menu a.item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--tinta);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--curva);
}
.menu a.item:hover::after, .menu a.item[aria-current="page"]::after { transform: scaleX(1); }
.menu .item.em-breve { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 500; padding: 4px 0; opacity: .6; cursor: default; user-select: none; }
.menu .item.em-breve small { font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border: 1px dashed currentColor; border-radius: 999px; padding: 1px 7px; line-height: 1.5; }
.menu a.item.cta { border: 1.5px solid var(--tinta); border-radius: 999px; padding: 7px 15px; transition: background-color .3s, color .3s; }
.menu a.item.cta::after { display: none; }
.menu a.item.cta:hover { background: var(--tinta); color: var(--fundo); }
.tema {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: .875rem; font-weight: 600;
  color: var(--fundo); background: var(--tinta);
  border: 0; border-radius: 999px; padding: 8px 15px; cursor: pointer;
  transition: transform .25s var(--curva);
}
.tema:hover { transform: scale(1.05); }
@media (max-width: 560px) { .menu .item.opcional { display: none; } .tema .tema-texto { display: none; } .tema { padding: 9px 12px; } }

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); margin-top: clamp(60px, 9vw, 120px); padding: 40px 0 56px; }
.rodape .cx { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; color: var(--cinza); font-size: .9375rem; }
.rodape strong { color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- estilos de texto aplicados pela plataforma (Textos do site) ---------- */
.z-traco { color: transparent; -webkit-text-stroke: 1.5px var(--tinta); }
.sem-traco { color: var(--tinta); -webkit-text-stroke: 0; }
[class^="z-mk"], [class*=" z-mk"] { padding: 0 .14em; border-radius: .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; -webkit-text-stroke: 0; }
.z-mk1 { background: #FFE45C; color: #000; }
.z-mk2 { background: var(--tinta); color: var(--fundo); }
.z-mk3 { background: rgba(128, 128, 128, .28); }
.z-mk4 { background: #5BE584; color: #000; }
.z-mk5 { background: #2F6BFF; color: #fff; }
.z-mk6 { background: #8B4DFF; color: #fff; }
.z-mk7 { background: #FF7EC8; color: #000; }
.z-mk8 { background: #F0262F; color: #fff; }
.z-mk9 { background: #FF9A3D; color: #000; }
.z-mk10 { background: #43E0D6; color: #000; }

/* ---------- Só no celular: títulos e subtítulos centralizados ---------- */
@media (max-width: 560px) {
  html body .hero-texto, html body .fazemos-topo, html body .ph-texto, html body .blog-cab, html body .pv-cab,
  html body .pv-todas-topo, html body .pv-crit-intro, html body .pv-final-caixa, html body .rg-chamada,
  html body .diag-pagina .tela { text-align: center; }
  html body .hero-texto > p, html body .fazemos-topo > p, html body .ph-texto > p, html body .blog-cab > p, html body .pv-cab > p,
  html body .pv-final-caixa > p, html body .rg-chamada > p, html body .diag-pagina .tela > p { margin-left: auto; margin-right: auto; }
  html body .ph-criterios, html body .pv-fatos, html body .pv-chips, html body .pv-todas-topo .pv-chips, html body .hero .acoes,
  html body .ph-acoes, html body .pv-final-botoes { justify-content: center; }
  html body .blog-home-topo { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  html body .diag-pagina .tela .acoes { justify-content: center; }
}