/* base: reset mínimo, tipografia, layout, foco, movimento */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--qmq-bg);
  color: var(--qmq-ink);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
/* textura leve de impressão (grão), só no fundo claro; não interfere no contraste do texto */
@media (max-width: 719px) { body::after { display: none; } }
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
[data-tema="escuro"] body::after, body[data-tema="escuro"]::after { opacity: .05; }
main { flex: 1 0 auto; position: relative; z-index: 1; }
header, footer { position: relative; z-index: 2; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
/* REGRA (13/10/2026, pedido do Glauber): título nunca hifeniza nem parte palavra no meio. O tamanho é que cede.
   Medido por site/_aceitacao/medir-tela.js em toda página, em 375 e 950. */
h1, h2, h3, h4, .display, .diagrama-titulo, .card-titulo, .marca, .etiqueta, .chip, .btn { hyphens: manual !important; -webkit-hyphens: manual !important; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
h1, .display, h2.display {
  font-family: var(--f-display); font-weight: 900; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: .98;
}
h1 { font-size: var(--t-display); max-width: 14ch; }
h2 { font-family: var(--f-display); font-weight: 900; font-stretch: 112%; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; font-size: var(--t-h2); }
h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: var(--t-h3); letter-spacing: -0.01em; line-height: 1.15; }
h4 { font-size: var(--t-corpo); font-weight: 700; }
p, ul, ol, table, figure, blockquote { margin: 0 0 var(--e-4); }
ul, ol { padding-left: 1.2em; }
li + li { margin-top: var(--e-1); }
strong, b { font-weight: 700; }
small, .apoio { font-size: var(--t-apoio); color: var(--qmq-ink-2); line-height: 1.45; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--qmq-municipio); }
[data-tema="escuro"] a:hover { color: var(--qmq-acao); }
code, kbd { font-family: ui-monospace, Menlo, monospace; font-size: .95em; }
hr { border: 0; border-top: 1px solid var(--qmq-line-2); margin: var(--e-8) 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--e-3) var(--e-3); border-bottom: 1px solid var(--qmq-line-2); vertical-align: top; }
th { font-weight: 700; border-bottom: 2px solid var(--qmq-line); }
td.num, th.num { text-align: right; }
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* foco visível, 3px em ocre, em tudo que recebe teclado */
:focus-visible { outline: 3px solid var(--qmq-acao); outline-offset: 2px; }
[data-tema="escuro"] :focus-visible { outline-color: var(--qmq-acao); }
.pular {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--qmq-acao); color: var(--qmq-acao-ink); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-pilula); font-weight: 700; text-decoration: none;
}
.pular:focus { top: var(--e-3); }

/* texto corrido justificado (pedido do Glauber, 13/10/2026), com hifenização em pt-BR para não abrir
   espaços largos entre palavras no celular. Vale só para parágrafos de leitura; interface fica à esquerda. */
.justificado, .justificado p, .justificado li, .lead, .texto-corrido p, .texto-corrido li {
  text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3;
}
.justificado h1, .justificado h2, .justificado h3, .justificado h4, .justificado .etiqueta, .justificado figcaption, .justificado .fonte,
.justificado th, .justificado td, .justificado .btn, .justificado .atalho, .justificado dt, .justificado .chip, .justificado .apoio {
  text-align: left; hyphens: manual; -webkit-hyphens: manual;
}
th, td { overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; min-width: 6.5em; }

/* layout */
.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.leitura { max-width: var(--largura-leitura); }
.secao { padding-top: var(--e-11); padding-bottom: var(--e-11); }
@media (min-width: 1080px) { .secao { padding-top: var(--e-14); padding-bottom: var(--e-14); } }
.secao-escura { background: #1B1917; color: #FBF7F0; }
.pilha { display: flex; flex-direction: column; gap: var(--e-4); }
.linha { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.entre { justify-content: space-between; }
.grade-auto { display: grid; gap: var(--e-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .grade-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); } }
@media (min-width: 1080px) { .grade-auto { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }

/* reveal on scroll: só com movimento permitido; uma vez por visita */
@media (prefers-reduced-motion: no-preference) {
  .revela { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva); }
  .revela.visto { opacity: 1; transform: none; }
  .revela-grupo > * { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva); }
  .revela-grupo.visto > * { opacity: 1; transform: none; }
  .revela-grupo.visto > :nth-child(2) { transition-delay: 60ms; }
  .revela-grupo.visto > :nth-child(3) { transition-delay: 120ms; }
  .revela-grupo.visto > :nth-child(4) { transition-delay: 180ms; }
  .revela-grupo.visto > :nth-child(5) { transition-delay: 240ms; }
  .revela-grupo.visto > :nth-child(6) { transition-delay: 300ms; }
  .revela-grupo.visto > :nth-child(7) { transition-delay: 360ms; }
  .revela-grupo.visto > :nth-child(8) { transition-delay: 420ms; }
  .revela-grupo.visto > :nth-child(n+9) { transition-delay: 480ms; }
}

/* espaço para a barra inferior do celular */
@media (max-width: 719px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } }

@media print {
  body::after, .barra-inferior, .cabecalho, .rodape { display: none !important; }
  body { background: #fff; color: #000; }
}