/* ============================================================ PAPEL — a folha de impressão dos dois manuais ------------------------------------------------------------ ARQUIVO SEPARADO, e o motivo não é organização: é a PROVA DO LIVRETO na tela. Enquanto estas regras moravam num `@media print` do styles.css, não havia como mostrá-las no monitor — `@media print` não se liga por classe, e duplicar a folha para a tela seria garantir que as duas versões divergissem no primeiro ajuste. Aqui a MÍDIA vem do atributo do , e atributo se troca: O botão "Ver o livreto" (js/guia.js) troca esse `media` para `all`, e a tela passa a mostrar exatamente a folha que sai da impressora — mesma medida, mesma tipografia, mesmas quebras. Fechada a prova, o `media` volta a `print`. É o mesmo mecanismo da folha `#folhaA5` (o `@page`), pela mesma razão. Ligado por: guia-do-mobilizador.html · guia-do-mobilizador-saude.html Documentado em: docs/25 (a folha A4) · docs/27 (o livreto e a prova) ============================================================ */ /* --- IMPRESSÃO: o manual nasceu em papel; quem quiser, leva o papel de volta. ------------------------------------------------------------------------ Duas coisas mandam nesta seção, e as duas foram medidas (docs/25): 1. FOLHA CUSTA. O manual é entregue em mãos, impresso em lote — cada folha a mais é uma folha vezes o número de mobilizadores. A diagramação de TELA rendia 13 folhas, com três delas quase vazias: título de 42px, seção respirando 68px e — a maior causa — as grades de duas colunas presas atrás de `min-width:820/900px`, que uma folha A4 (718px úteis) NUNCA alcança. No papel elas caíam em coluna única. 2. O DIÁLOGO DO CHROME VEM COM "GRÁFICOS DE PLANO DE FUNDO" DESLIGADO. Medido: sem eles a capa e a mensagem final saíam com texto BRANCO EM PAPEL BRANCO — invisíveis. Então nada aqui pode depender de `background` para ser legível. O que era claro sobre cor vira escuro sobre papel; o que separava por fundo passa a separar por fio. O princípio é o mesmo do resto da base: não se reescreve a página para o papel, muda-se a MEDIDA. Os --sp-* e o rem são redefinidos uma vez, e todas as regras de tela se recalculam sozinhas. --- */ /* ---- 0. AS DUAS REGRAS DE SITE INTEIRO FICARAM NO styles.css ---- `@page{size:A4;margin:10mm}` e `.dayse-edit-ui{display:none}` valem para TODA página do site, não só para os manuais — e este arquivo só é ligado pelos dois manuais. Por isso elas continuam no `styles.css`, no único `@media print` que sobrou lá. O porquê de cada uma está lá. */ /* ---- 1. O QUE SÓ EXISTE NA TELA ---- */ body[data-page^="guia-do-mobilizador"] .site-header, body[data-page^="guia-do-mobilizador"] .guia-index, body[data-page^="guia-do-mobilizador"] .cta:not(.cta--hero), body[data-page^="guia-do-mobilizador"] .site-footer, body[data-page^="guia-do-mobilizador"] .wa-float, body[data-page^="guia-do-mobilizador"] .guia-copiar, body[data-page^="guia-do-mobilizador"] .guia-check-limpar, /* botão que leva a OUTRA página: no papel é um retângulo com um convite que ninguém pode aceitar. */ body[data-page^="guia-do-mobilizador"] .guia-nota .step-extra, /* E, desde 12/08/2026, a NOTA INTEIRA que o segurava. Esconder só o botão deixava no papel uma placa apontando para um site que quem tem o livreto na mão não tem como abrir — aviso sem ação, ocupando linha num material em que cada página custa folha. */ body[data-page^="guia-do-mobilizador"] .guia-nota--so-tela, /* A "Sua ficha" grava no aparelho e só faz sentido preenchida ali — no papel seriam cinco caixas vazias que ninguém usa. Some a SEÇÃO inteira, não só o bloco: esconder o `.guia-ficha` deixaria a casca da seção e o respiro dela. Alvo pelo `aria-labelledby`, que é estável e não depende de `:has()`. */ body[data-page^="guia-do-mobilizador"] section[aria-labelledby="ficha-title"], body[data-page^="guia-do-mobilizador"] .guia-social{display:none !important} body[data-page^="guia-do-mobilizador"] .reveal{opacity:1 !important;transform:none !important} /* ---- 2. A MEDIDA: DOIS LEVERS, E SÓ ---- `--sp-*` governa todo espaço vertical desta página e `rem` governa todo tamanho de texto. Redefinir os dois encolhe margem, padding, gap e corpo de uma vez — sem tocar em regra nenhuma de tela. O `:has()` é o único jeito de alcançar o `html` (dono do rem) sem vazar para as outras páginas, que não têm folha de impressão e imprimem a tela. Degrada bem: onde `:has()` não existe, o texto sai no tamanho de tela e o manual continua correto — só mais gordo. Safari 15.4+; já usado 2× aqui. */ html:has(body[data-page^="guia-do-mobilizador"]){font-size:12.5px} body[data-page^="guia-do-mobilizador"]{ --sp-1:2px; --sp-2:4px; --sp-3:7px; --sp-4:9px; --sp-5:11px; --sp-6:13px; --sp-7:15px; --sp-8:17px; --sp-9:19px; --sp-10:21px;--sp-11:23px;--sp-12:26px; line-height:1.35} /* ---- 3. O PAPEL SE PARECE COM A TELA ---- O diálogo do Chrome vem com "gráficos de plano de fundo" DESLIGADO. A primeira versão desta folha respondeu a isso REDESENHANDO tudo o que dependia de fundo: o disco do número virou círculo vazado, a nota virou fio, a capa virou moldura. Ficava legível, e ficava diferente do site. `print-color-adjust:exact` resolve melhor: ele manda o motor imprimir a cor de fundo **mesmo com a caixinha desmarcada** — medido, no PDF gerado com `printBackground:false`, que é exatamente o padrão do usuário. Então o manual sai igual ao site, marcando ou não. Chrome, Firefox e Safari (com o prefixo) honram. A lista é a MENOR possível, e isso importa duas vezes. Toner: cada bloco aqui é área pintada vezes a tiragem inteira. E `--papel` (#FAF7F2) é creme, não branco — forçar isto no `body` daria um banho de creme em toda folha, de graça. Aqui só entram os blocos cujo desenho **depende** do fundo. */ body[data-page^="guia-do-mobilizador"] .cta--hero, body[data-page^="guia-do-mobilizador"] .guia-final, body[data-page^="guia-do-mobilizador"] .guia-frente, body[data-page^="guia-do-mobilizador"] .step-n, body[data-page^="guia-do-mobilizador"] .step-badge, body[data-page^="guia-do-mobilizador"] .guia-check-conta, body[data-page^="guia-do-mobilizador"] .guia-nota, body[data-page^="guia-do-mobilizador"] .guia-col{ -webkit-print-color-adjust:exact;print-color-adjust:exact} /* Sombra é de tela: no papel vira uma mancha cinza sob cada caixa. */ body[data-page^="guia-do-mobilizador"] .cta--hero, body[data-page^="guia-do-mobilizador"] .guia-final{box-shadow:none} /* O azulejo do hero entra também. O argumento do toner NÃO se aplica aqui: a área já é roxo sólido, e o padrão só VARIA o tom dentro dela — em vários pontos clareando. É o traço mais reconhecível da marca; sem ele a capa impressa é uma tarja roxa qualquer. */ body[data-page^="guia-do-mobilizador"] .cta--hero::before{ -webkit-print-color-adjust:exact;print-color-adjust:exact} /* ---- 3.1 O COBOGÓ DA CAPA SAI A UM TERÇO, PARA SAIR IGUAL AO DA TELA ---- A MESMA compensação do `slides.css` §6.1, e agora ela vale para TODA saída impressa — era a última que faltava. O motivo é o mesmo: a camada do padrão (`styles.css`, .cta--hero::before) se apoia em `mix-blend-mode:lighten`, e **o `Page.printToPDF` não honra blend**. Sem o blend, os dois preenchimentos ESCUROS do `azulejo-bg.svg` (#9d9ca0 e #403b47) voltam a pintar em vez de só clarear, e a capa ganha um xadrez de blocos que na tela não existe. Não é intensidade, é DESENHO — e por isso se mede pelo DESVIO, não pela média. Medido em 13/08/2026 na faixa superior da capa (só padrão, sem texto), a 150 DPI: PDF apresentação, já com /3 .... média 66,1 · desvio 8,2 ← o padrão PDF livreto sem compensar ...... média 91,5 · desvio 24,6 PDF livreto a /2 ............... média 73,5 · desvio 12,0 PDF livreto a /3 ............... média 68,0 · desvio 8,2 ← bate PDF livreto a /4 ............... média 64,8 · desvio 6,1 (apaga demais) `calc(… / 3)` e não `.10` cravado, pela mesma razão do slides.css: `--az-hero-op` é o token que o botão "Azulejo" do modo edição sobrescreve (docs/09). Dividir preserva a escolha de quem publicar — o papel continua sendo um terço da tela, qualquer que ela seja. Fica FORA do `html.livreto` de propósito: a folha A4 solta imprime a mesma capa e tinha o mesmo defeito. Uma regra, três saídas. */ body[data-page^="guia-do-mobilizador"] .cta--hero{ --az-op:calc(var(--az-hero-op) / 3)} /* ---- 4. AS GRADES QUE A FOLHA NÃO ALCANÇAVA ---- 718px úteis não chegam aos 820/900px que a tela pede, então no papel estas três caíam em coluna única e gastavam o dobro de folha. Aqui elas são o que já são no desktop. */ body[data-page^="guia-do-mobilizador"] .guia-notas, body[data-page^="guia-do-mobilizador"] .guia-tabela, body[data-page^="guia-do-mobilizador"] .guia-lista--duas{grid-template-columns:1fr 1fr} body[data-page^="guia-do-mobilizador"] .guia-lista--duas{column-gap:var(--sp-6)} body[data-page^="guia-do-mobilizador"] .guia-colunas{grid-template-columns:1.15fr 1fr} /* Os 7 passos NÃO entram nesta lista, e é decisão: o `.manual` vira 2 colunas a partir de 760px, que a folha também não alcança — mas ali a coluna única é melhor. Em 2 colunas cada passo tem 340px e o texto vira 3 linhas; em largura inteira cada passo é UMA linha, e é assim que se lê um 1→7. */ /* e as grades automáticas ganham uma coluna: 3×200 cabe nos 694 do container */ body[data-page^="guia-do-mobilizador"] .guia-grade, body[data-page^="guia-do-mobilizador"] .guia-exemplos, body[data-page^="guia-do-mobilizador"] .guia-rotina{--min:200px} /* ---- 5. TIPOGRAFIA DE PAPEL ---- Os `clamp(...,6vw,...)` da tela resolvem contra a folha e continuam grandes demais; título de seção em papel é hierarquia, não cartaz. */ body[data-page^="guia-do-mobilizador"] .cta-title{font-size:19pt;line-height:1.05} body[data-page^="guia-do-mobilizador"] .cta-lead{font-size:9pt;max-width:none} body[data-page^="guia-do-mobilizador"] .section-title{font-size:14pt;line-height:1.05} body[data-page^="guia-do-mobilizador"] .section-sub{font-size:8.6pt} /* O `padding-top` não é enfeite: quando este título cai no TOPO de uma folha, o til do "Õ" de INFORMAÇÕES fica acima da caixa de linha e o Chrome pinta esse pedaço na folha ANTERIOR — um pingo solto no pé da página 2, medido. 3px de folga põem o acento dentro da caixa. */ body[data-page^="guia-do-mobilizador"] .guia-sub{ font-size:11pt;margin:var(--sp-6) 0 var(--sp-3);padding-top:3px} body[data-page^="guia-do-mobilizador"] .guia-fala-txt, body[data-page^="guia-do-mobilizador"] .guia-final-txt{font-size:9pt} body[data-page^="guia-do-mobilizador"] .guia-bloco-txt{font-size:8.8pt} /* ícone grande é enfeite de tela; no papel come linha de texto */ body[data-page^="guia-do-mobilizador"] .guia-item svg{width:20px;height:20px;margin-bottom:var(--sp-2)} body[data-page^="guia-do-mobilizador"] .guia-frente svg{width:20px;height:20px} body[data-page^="guia-do-mobilizador"] .guia-ficha-head svg{width:26px;height:26px} body[data-page^="guia-do-mobilizador"] .guia-final svg{width:26px;height:26px} body[data-page^="guia-do-mobilizador"] .step-badge{width:34px;height:34px;border-radius:10px} body[data-page^="guia-do-mobilizador"] .step-badge svg{width:18px;height:18px} body[data-page^="guia-do-mobilizador"] .step-n{width:18px;height:18px;font-size:.72rem;top:-7px;left:-7px} /* ---- 6. ONDE A FOLHA PODE QUEBRAR ---- A regra antiga punha `break-inside:avoid` na SEÇÃO inteira. Seção é maior que a folha: o navegador não consegue obedecer, empurra o bloco seguinte e sobra papel branco. Medido, era a causa das folhas 3, 9 e 12 (26%, 14% e 46% de ocupação). Quem não pode ser cortado é o bloco pequeno. */ body[data-page^="guia-do-mobilizador"] .apoio-sec{padding:var(--sp-6) 0;break-inside:auto} body[data-page^="guia-do-mobilizador"] .guia-notas, body[data-page^="guia-do-mobilizador"] .guia-tabela, body[data-page^="guia-do-mobilizador"] .guia-colunas, body[data-page^="guia-do-mobilizador"] .grade-auto, body[data-page^="guia-do-mobilizador"] .manual{break-inside:auto} body[data-page^="guia-do-mobilizador"] .card, body[data-page^="guia-do-mobilizador"] .guia-nota, body[data-page^="guia-do-mobilizador"] .guia-fala, body[data-page^="guia-do-mobilizador"] .guia-col, body[data-page^="guia-do-mobilizador"] .guia-final, body[data-page^="guia-do-mobilizador"] .check, body[data-page^="guia-do-mobilizador"] .step{box-shadow:none;break-inside:avoid} /* ...MENOS as duas caixas de LISTA LONGA, e é a mesma lição do §6 vista de perto: `avoid` é do bloco PEQUENO. As colunas de "O que fazer / não é" e a tabela "Pode / Não pode" chegam a 9 itens e um terço de folha; indivisíveis, elas pulavam inteiras para a folha seguinte e deixavam 39% e 27% de papel branco atrás (medido, manual da Saúde: 6 folhas a 69%). Quebrar aqui não estraga a leitura porque a quebra cai entre itens: o `break-inside:avoid` desce para o `li`, que é o bloco pequeno de verdade. (Sem ele, a quebra parte a linha no meio — `.guia-lista li` é flex, e nem `orphans` nem `widows` alcançam caixa de linha dentro de flex: docs/08 §5.) */ body[data-page^="guia-do-mobilizador"] .guia-colunas > .card, body[data-page^="guia-do-mobilizador"] .guia-col{break-inside:auto} body[data-page^="guia-do-mobilizador"] .guia-lista li{break-inside:avoid} /* Título e a linha de apoio dele são UMA coisa: `break-after` sozinho não impede a quebra DENTRO do cabeçalho, e a primeira medição saiu com o título no pé de uma folha e o subtítulo abrindo a seguinte — em 4 das 5. */ body[data-page^="guia-do-mobilizador"] .section-head{break-inside:avoid} /* e título nunca é a última coisa da folha */ body[data-page^="guia-do-mobilizador"] .section-head, body[data-page^="guia-do-mobilizador"] .guia-sub, body[data-page^="guia-do-mobilizador"] .guia-check-head, body[data-page^="guia-do-mobilizador"] .guia-col-rot, body[data-page^="guia-do-mobilizador"] .guia-bloco-rot{break-after:avoid} /* ---- 7. O RESPIRO, CALIBRADO ---- Estes valores foram apertados até o osso para caber em 4 folhas, e depois AFROUXADOS quando a "Sua ficha" saiu do papel e devolveu 250px. O que vale é a calibragem, não os números: `
` mede **3.957px** e o ponto em que vira 5 folhas está entre **4.021 e 4.141px** — medido, variante a variante. Ou seja: sobram ~65 a 185px. É por isso que a régua desta seção é a altura do `
` e não o preenchimento da última folha, que a fragmentação move de lugar a cada mudança. `node tools/medir-impressao.mjs` diz as duas. */ body[data-page^="guia-do-mobilizador"] .apoio-sec{padding:var(--sp-4) 0} body[data-page^="guia-do-mobilizador"] .cta, body[data-page^="guia-do-mobilizador"] .guia-final{padding-block:var(--sp-6)} body[data-page^="guia-do-mobilizador"] .section-head{margin-bottom:var(--sp-3)} body[data-page^="guia-do-mobilizador"] .guia-num{margin-bottom:0} body[data-page^="guia-do-mobilizador"] .guia-frentes{margin-top:var(--sp-4)} body[data-page^="guia-do-mobilizador"] .guia-frente{padding:var(--sp-3) var(--sp-2)} body[data-page^="guia-do-mobilizador"] .guia-item, body[data-page^="guia-do-mobilizador"] .guia-bloco, body[data-page^="guia-do-mobilizador"] .guia-col, body[data-page^="guia-do-mobilizador"] .guia-nota, body[data-page^="guia-do-mobilizador"] .guia-fala, body[data-page^="guia-do-mobilizador"] .guia-checklist, body[data-page^="guia-do-mobilizador"] .step{padding:var(--sp-4)} /* o item de checklist é o que mais se repete na página: 25 deles */ body[data-page^="guia-do-mobilizador"] .guia-check-itens{gap:var(--sp-1)} /* O checklist de largura inteira ("Antes de sair") tinha 694px de caixa para itens de 6 palavras — meia linha de texto e meia linha de branco, 5 vezes. Em duas colunas ele encolhe pela metade E fica mais fácil de percorrer com o dedo. Os três da "Rotina" já vivem numa grade de 3 e continuam em coluna única: ali a caixa tem 225px, onde duas colunas seriam ilegíveis. */ body[data-page^="guia-do-mobilizador"] .guia-check-itens{ grid-template-columns:1fr 1fr;column-gap:var(--sp-3)} body[data-page^="guia-do-mobilizador"] .guia-rotina .guia-check-itens{ grid-template-columns:1fr} body[data-page^="guia-do-mobilizador"] .guia-check-itens .check{padding:var(--sp-2)} body[data-page^="guia-do-mobilizador"] .guia-lista{gap:var(--sp-2)} /* `--sp-7` fixo em três margens de bloco; no papel vira o mesmo respiro dos outros */ body[data-page^="guia-do-mobilizador"] .apoio-sec .guia-nota, body[data-page^="guia-do-mobilizador"] .guia-notas, body[data-page^="guia-do-mobilizador"] .guia-nota--alerta, body[data-page^="guia-do-mobilizador"] .guia-fala{margin-top:var(--sp-4)} body[data-page^="guia-do-mobilizador"] .guia-final{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-5)} body[data-page^="guia-do-mobilizador"] .guia-final svg{width:20px;height:20px;margin-bottom:var(--sp-1)} body[data-page^="guia-do-mobilizador"] .guia-final-rot{margin-bottom:var(--sp-1)} /* ---- 8. ENTRELINHA DE PAPEL ---- A tela usa 1,45 a 1,55 porque o olho rola; o papel não rola. Aqui é 1,36 — entrelinha de livro, e o ajuste mais barato que existe: mexe em ~55% da altura do documento sem tocar no tamanho da letra. Foi por aqui que se fechou a conta das 4 folhas (a 1,3, que é o piso do confortável) e é por aqui que se devolveu respiro quando sobrou espaço. O corpo do texto nunca entrou na negociação: este manual é lido EM PÉ, NA RUA (docs/13 §2), e 8,9pt é o piso. Quem precisar de mais altura tira daqui, dos --sp-* ou de conteúdo — nunca do tamanho da letra. */ body[data-page^="guia-do-mobilizador"] .guia-item p, body[data-page^="guia-do-mobilizador"] .guia-nota p:not(.guia-nota-rot), body[data-page^="guia-do-mobilizador"] .guia-lista li, body[data-page^="guia-do-mobilizador"] .guia-bloco-txt, body[data-page^="guia-do-mobilizador"] .guia-fala-txt, body[data-page^="guia-do-mobilizador"] .guia-final-txt, body[data-page^="guia-do-mobilizador"] .section-sub, body[data-page^="guia-do-mobilizador"] .cta-lead, body[data-page^="guia-do-mobilizador"] .guia-ficha-sub, body[data-page^="guia-do-mobilizador"] .step-body p, body[data-page^="guia-do-mobilizador"] .guia-check-itens .check{line-height:1.36} /* o rótulo de bloco é Oswald caixa-alta: uma linha, sem respiro embaixo */ body[data-page^="guia-do-mobilizador"] .guia-nota-rot, body[data-page^="guia-do-mobilizador"] .guia-fala-rot, body[data-page^="guia-do-mobilizador"] .guia-bloco-rot, body[data-page^="guia-do-mobilizador"] .guia-col-rot{margin-bottom:var(--sp-2)} body[data-page^="guia-do-mobilizador"] .guia-col-rot{padding-bottom:var(--sp-2)} body[data-page^="guia-do-mobilizador"] .guia-check-head{margin-bottom:var(--sp-2)} /* ---- 9. AS CAIXINHAS VOLTAM A SER CAIXINHAS PARA CANETA ---- */ body[data-page^="guia-do-mobilizador"] .guia-check-itens .check input{ -webkit-appearance:none;appearance:none;width:11px;height:11px; border:1.5px solid var(--tinta);border-radius:2px} /* --- LIVRETO A5: o manual volta a ser o livreto que o .docx já era. ------------------------------------------------------------------------ Esta camada NÃO substitui a folha A4 acima — ela se apoia nela. O botão "Imprimir" continua entregando 4 folhas A4; o botão "Livreto A5" põe `.livreto` no , injeta `@page{size:A5}` (guia.js) e o que muda daí para baixo é o que a caixa menor exige. TRÊS COISAS MANDAM AQUI, e as três foram medidas: 1. A CAIXA. A5 com 8mm de margem dá **499×733px** contra os 718×1046 da A4 — 47% da área. Medido com `setEmulatedMedia('print')`: o
do manual geral passa de 3.945px (A4) para 5.356px (A5), o da Saúde de 4.546 para 6.071. São ~8 e ~9 páginas de miolo. Com capa, sumário, ficha, anotações e contracapa, **12 páginas = 3 folhas A4 dobradas**. 2. O MÚLTIPLO DE 4. Livreto se imprime em folha dobrada, e cada folha rende 4 páginas. 11 páginas custam as mesmas 3 folhas que 12 — a diferença é uma página em branco no meio ou uma de Anotações no fim. `node tools/medir-impressao.mjs --livreto` reclama quando não fecha. 3. TRÊS BLOCOS QUE A FOLHA A4 ESCONDE VOLTAM. O `docs/13` §1 registra que o .docx original tinha **a ficha de 5 campos na capa e a mensagem final na contracapa** — o livreto é a forma de origem do documento, e não uma invenção. A ficha saiu da A4 (docs/25) porque 250px de caixa vazia custavam meia folha num material de 4; numa página 2 que existe de qualquer jeito, ela é o que o mobilizador preenche à caneta. O índice vira sumário pelo mesmo movimento. Nada aqui redesenha bloco nenhum: as regras são caixa (uma coluna), quebra (onde a página vira) e as três páginas de moldura. --- */ /* ---- 1. O QUE VOLTA, E O QUE SÓ AGORA SAI ---- A folha A4 esconde os dois por `display:none !important`; reacender exige `!important` de volta, com a especificidade que o `.livreto` dá. */ html.livreto body[data-page^="guia-do-mobilizador"] .guia-index, html.livreto body[data-page^="guia-do-mobilizador"] section[aria-labelledby="ficha-title"]{ display:block !important} html.livreto body[data-page^="guia-do-mobilizador"] .livro-anotacoes, html.livreto body[data-page^="guia-do-mobilizador"] .livro-contracapa{display:block} /* o que é da tela e sobreviveu até aqui porque a A4 nunca imprimiu o índice. (`.guia-atalho` — a dica dos ← → — saiu da barra em 05/08/2026 e a regra que a escondia saiu com ela na vistoria do mesmo dia.) */ html.livreto body[data-page^="guia-do-mobilizador"] .guia-index .btn, html.livreto body[data-page^="guia-do-mobilizador"] .guia-index-rot, /* "fica salvo neste aparelho · nada é enviado para o servidor" descreve o comportamento DIGITAL da ficha. No papel seria uma frase falsa — e o botão de enviar para o CRM, um botão que ninguém aperta. */ html.livreto body[data-page^="guia-do-mobilizador"] .guia-ficha-sub, html.livreto body[data-page^="guia-do-mobilizador"] .guia-ficha-envio{display:none !important} /* ---- 1b. CAIXA QUE NÃO TEM FUNDO NÃO É CAIXA ---- O livreto imprime com `printBackground:false` (economia de toner, docs/25 §5.1). Só que a decisão não foi uniforme: `.guia-nota`, as duas colunas do Pode/Não pode e a mensagem final carregam `print-color-adjust:exact` e SAEM preenchidas; `.guia-bloco`, `.guia-checklist` e `.guia-item` ficam em `economy` e saem SEM fundo — mas com a borda de topo e o raio de 20px que desenham a caixa na tela. Resultado no papel, medido em 12/08/2026: um traço colorido que curva para baixo nas duas pontas e para no ar. Não é caixa nem é régua — parece rabisco, e é o que se vê em volta de "O QUE FAZER", "TODOS OS DIAS" e dos seis cartões da Seção 1. Aqui esses três viram RÉGUA: sem raio, o traço de topo é o que ele de fato é — uma linha que separa. E sem recuo lateral, o texto deles passa a começar na MESMA coluna do texto da seção, que é a outra metade da queixa (o recuo ia de 0 a 11px conforme o bloco). Quem tem fundo continua caixa redonda, porque ali a caixa existe de verdade. */ html.livreto body[data-page^="guia-do-mobilizador"] .card.guia-bloco, html.livreto body[data-page^="guia-do-mobilizador"] .card.guia-item, html.livreto body[data-page^="guia-do-mobilizador"] .guia-fala, html.livreto body[data-page^="guia-do-mobilizador"] .guia-checklist{ border-radius:0;padding-inline:0;box-shadow:none} /* O `.step` é o caso extremo do mesmo defeito: borda nos QUATRO lados, raio de 20px e fundo em `economy` — no papel, oito retângulos vazios em fila. Some com três lados e fica a mesma régua dos outros blocos; o disco do número continua sendo o que marca o passo. */ html.livreto body[data-page^="guia-do-mobilizador"] .step{ border-radius:0;border-right-width:0;border-bottom-width:0;border-left-width:0; padding-inline:0;box-shadow:none} /* ---- 2. UMA COLUNA, SEMPRE ---- A folha A4 devolve às grades as 2 colunas que a media query não alcança (docs/25 §1.1). Em 473px de container isso seria 230px por coluna: aqui todas voltam a ser uma. A conta do §1 desta seção já está medida assim. */ html.livreto body[data-page^="guia-do-mobilizador"] .guia-notas, html.livreto body[data-page^="guia-do-mobilizador"] .guia-tabela, html.livreto body[data-page^="guia-do-mobilizador"] .guia-lista--duas, html.livreto body[data-page^="guia-do-mobilizador"] .guia-colunas, html.livreto body[data-page^="guia-do-mobilizador"] .guia-check-itens{grid-template-columns:1fr} html.livreto body[data-page^="guia-do-mobilizador"] .guia-grade, html.livreto body[data-page^="guia-do-mobilizador"] .guia-exemplos, html.livreto body[data-page^="guia-do-mobilizador"] .guia-rotina{--min:400px} /* ...e grade de uma coluna só é grade no nome. Vira BLOCO, e não é preciosismo: **o Chrome não fragmenta grade de verdade**. Medido — os três checklists da "Rotina" pularam JUNTOS para a página seguinte e deixaram a anterior com 25,6% de uso, mesmo com `break-inside:auto` no contêiner e cada cartão cabendo folgado no espaço que sobrava. Em caixas de bloco o motor quebra entre os filhos, que é o que a página precisa. O `gap` morre junto com a grade; a margem entre irmãos o repõe. */ html.livreto body[data-page^="guia-do-mobilizador"] .grade-auto, html.livreto body[data-page^="guia-do-mobilizador"] .guia-notas, html.livreto body[data-page^="guia-do-mobilizador"] .guia-tabela, html.livreto body[data-page^="guia-do-mobilizador"] .guia-colunas, html.livreto body[data-page^="guia-do-mobilizador"] .guia-check-itens{display:block} html.livreto body[data-page^="guia-do-mobilizador"] .grade-auto > * + *, html.livreto body[data-page^="guia-do-mobilizador"] .guia-notas > * + *, html.livreto body[data-page^="guia-do-mobilizador"] .guia-tabela > * + *, html.livreto body[data-page^="guia-do-mobilizador"] .guia-colunas > * + *{margin-top:var(--sp-4)} html.livreto body[data-page^="guia-do-mobilizador"] .guia-check-itens > * + *{margin-top:var(--sp-1)} /* ---- 2.1 A MEDIDA DA CAIXA MENOR ---- Os `--sp-*` da folha A4 foram calibrados contra 718×1046. A página do livreto tem 47% dessa área e o MESMO respiro em pixels — que ali era 4% da altura e aqui é 6%. Não é uma opinião de gosto: é a mesma régua do `docs/25` §1.3, aplicada à caixa que mudou. Medido: sem este bloco o manual geral fecha em **13 páginas** — 4 folhas dobradas com 3 páginas em branco no fim. Com ele, 12: **3 folhas**, o caderno cheio. Uma folha por mobilizador, vezes a tiragem. O corpo do texto e a entrelinha NÃO entram nesta negociação (8,9pt e 1,36 são o piso do `docs/25` §3 e §8). Aqui só se aperta o vazio. */ html.livreto body[data-page^="guia-do-mobilizador"]{ --sp-1:2px; --sp-2:3px; --sp-3:6px; --sp-4:8px; --sp-5:9px; --sp-6:11px; --sp-7:13px; --sp-8:14px; --sp-9:16px; --sp-10:18px;--sp-11:20px;--sp-12:22px} /* ---- 3. A CAPA (página 1) ---- É o mesmo `.cta--hero` da tela, esticado para a folha inteira. O azulejo roxo já entra por `print-color-adjust:exact` na folha A4 (§3 de lá) e continua valendo — é o traço mais reconhecível da marca, e o argumento do toner não se aplica: a área já é roxo sólido. 193mm e não 194: a caixa útil da página tem 194mm, e uma capa que a preenche ao milímetro escorrega para uma segunda folha ao menor arredondamento. Um milímetro é a margem de erro; 8mm, medido, era uma tira branca visível no pé da capa. */ html.livreto body[data-page^="guia-do-mobilizador"] .cta--hero{ min-height:193mm;display:flex;align-items:center;break-after:page} /* ---- 3.0 A CAPA DE ARTE, E COMO SE TROCA [13/08/2026] ---- Os dois manuais ganharam uma capa DESENHADA (foto, faixa de cobogós, assinatura, @). Ela é o padrão; a capa gerada por HTML continua ali, a uma classe de distância. NENHUM MARKUP NOVO, e isso não é preguiça: `data-edit-key` é posicional, a capa é o PRIMEIRO filho do `
`, e inserir qualquer coisa antes dela empurraria as 164 chaves da página — inclusive a única publicada de cada manual. Trocar o FUNDO do `.cta--hero` e esconder os filhos dá o mesmo resultado por zero risco de KV. `object-fit:cover` porque a arte é 867×1132 (0,766) e a caixa útil da página é 132×193mm (0,684): sobra largura e o corte total é 10,8%. `object-position:23%` E NÃO O CENTRO, e o número saiu de medir a arte: "GUIA" .................. começa a 8,8% da largura "DO MOBILIZADOR" ........ começa a 3,0% ← é ele que manda "DO MOBILIZADOR DA SAÚDE" começa a 3,6% Centrado, o corte tira 5,4% de cada lado e **come o D do subtítulo** — foi o que a primeira prova mostrou. A 23%, o corte da esquerda cai para 2,5% e passa raspando por dentro; os 8,3% restantes saem da direita, onde há fundo e o ombro. É o enquadramento de capa de revista: o texto é intocável, a foto aceita corte. `cover` e não `contain`: medido lado a lado, `contain` deixa 10,4mm de tarja branca em cima e embaixo contra 8mm nas laterais, e moldura desigual lê como erro de impressão. É UM DE CONTEÚDO, E NÃO `background-image`. Custou uma depuração inteira: o `Page.printToPDF` **não pinta imagem raster de fundo**. Medido em 13/08/2026, imprimindo a mesma capa com um vermelho de teste por baixo: background-image WebP .... a capa sai BRANCA (o vermelho aparece) background-image PNG ..... idem background-image SVG ..... PINTA (é o que o azulejo sempre fez) de conteúdo ........ PINTA E não é o `printBackground`: com `true` continua branca. Nem o `print-color-adjust:exact`, que já vinha do §3. A regra prática que fica: **no papel, arte raster entra como ``; só SVG pode ser fundo.** COMO ESCOLHER (é a mesma chave nos três lugares — a classe `capa-gerada`): · no site ....... menu de saídas → "Capa: arte / gerada" · por URL ....... /guia-do-mobilizador?capa=gerada · no gerador .... node tools/livreto.mjs --capa-gerada */ html.livreto:not(.capa-gerada) body[data-page^="guia-do-mobilizador"] .cta--hero{ position:relative;padding:0;background:#fff} html.livreto:not(.capa-gerada) body[data-page^="guia-do-mobilizador"] .livro-capa-arte{ display:block;position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:23% center} /* o `::before` é a camada do azulejo: sobre a arte ele seria um segundo padrão por cima do que a arte já traz. */ html.livreto:not(.capa-gerada) body[data-page^="guia-do-mobilizador"] .cta-inner, html.livreto:not(.capa-gerada) body[data-page^="guia-do-mobilizador"] .cta--hero::before{ display:none} html.livreto body[data-page^="guia-do-mobilizador"] .cta-title{font-size:26pt} html.livreto body[data-page^="guia-do-mobilizador"] .cta-lead{font-size:10pt;margin-top:var(--sp-5)} html.livreto body[data-page^="guia-do-mobilizador"] .guia-frentes{margin-top:var(--sp-9)} /* `flex:1 1 160px` põe 3 cartões de 160px numa caixa de 451px e o terceiro desce sozinho — 2+1, que numa capa lê como erro de diagramação. `1 1 0` divide a linha em três partes iguais e deixa o texto quebrar. */ html.livreto body[data-page^="guia-do-mobilizador"] .guia-frente{ flex:1 1 0;min-width:0;padding:var(--sp-4) var(--sp-2)} /* A ASSINATURA COM O 40222 NO PÉ DA CAPA. Larga e centrada: numa capa de material de campanha o número é o que o eleitor precisa levar na memória, e ele não aparecia em página nenhuma do livreto a não ser na linha de 8pt da contracapa. 96mm dentro dos 130mm úteis da página A5 — sobra respiro dos dois lados e a marca não encosta na margem de dobra. A proporção é 9,49:1 (viewBox 3511,86x370), então 96mm dão ~10mm de altura. */ html.livreto body[data-page^="guia-do-mobilizador"] .livro-marca-capa{ display:block;width:96mm;height:auto;margin:var(--sp-9) auto 0} html.livreto body[data-page^="guia-do-mobilizador"] .guia-frente svg{width:24px;height:24px} /* ---- 4. SUMÁRIO + FICHA (página 2) ---- O índice é uma tira horizontal de chips com `overflow-x:auto` — numa página ela seria uma linha cortada na margem. Aqui vira lista. O rótulo "Manual" some e o lugar dele diz "Sumário", que é o que a página é: texto gerado, porque a palavra é estrutura da página impressa e não conteúdo do manual (nada de DOM novo, nada de `data-edit-key` deslocado). */ html.livreto body[data-page^="guia-do-mobilizador"] .guia-index{ border-bottom:0;padding-top:var(--sp-6)} html.livreto body[data-page^="guia-do-mobilizador"] .guia-index-inner{display:block} html.livreto body[data-page^="guia-do-mobilizador"] .guia-index-inner::before{ content:"Sumário";display:block;font-family:var(--font-titulo);text-transform:uppercase; font-size:13pt;letter-spacing:.03em;color:var(--petroleo-900); margin-bottom:var(--sp-4);padding-bottom:var(--sp-2); border-bottom:1.5px solid var(--petroleo-200)} html.livreto body[data-page^="guia-do-mobilizador"] .guia-index-links{ display:grid;grid-template-columns:1fr;gap:0;overflow:visible} html.livreto body[data-page^="guia-do-mobilizador"] .guia-index-links a{ font-size:9.5pt;padding:var(--sp-3) 0;border:0;border-bottom:1px dotted var(--petroleo-200); border-radius:0;background:none;color:var(--tinta)} /* a ficha: 5 campos, uma coluna, linha de caneta no lugar da caixa de input */ html.livreto body[data-page^="guia-do-mobilizador"] section[aria-labelledby="ficha-title"]{ padding-top:0;break-after:page} html.livreto body[data-page^="guia-do-mobilizador"] .guia-ficha-grid{ grid-template-columns:1fr;gap:var(--sp-5)} html.livreto body[data-page^="guia-do-mobilizador"] .guia-ficha .field input{ -webkit-appearance:none;appearance:none;height:26px;padding:0; border:0;border-bottom:1px solid var(--petroleo-200);border-radius:0;background:none} /* O `placeholder` imprime. "Seu nome" repete o rótulo que está logo acima, e "(61) 9 0000-0000" numa linha de caneta lê como número JÁ PREENCHIDO. */ html.livreto body[data-page^="guia-do-mobilizador"] .guia-ficha .field input::placeholder{ color:transparent} html.livreto body[data-page^="guia-do-mobilizador"] .guia-ficha-head svg{width:30px;height:30px} html.livreto body[data-page^="guia-do-mobilizador"] .guia-ficha-title{font-size:13pt} /* ---- 5. O MIOLO ---- Flui, e NENHUMA quebra é forçada aqui. A primeira versão desta folha abria o "Pode / não pode" em página nova, pelo argumento de que as duas listas se leem uma contra a outra. Medido, custava **uma página inteira**: a anterior fechava em 56% e o livreto ia a 13 páginas — 4 folhas dobradas para usar 3. E o argumento não se sustentava: em A5 as duas colunas já estão EMPILHADAS (§2), então a comparação lado a lado que a quebra protegeria não existe nesta caixa. Quebra forçada em livreto custa mais caro que em folha solta, porque o preço não é uma página — é a folha inteira que ela abre. */ html.livreto body[data-page^="guia-do-mobilizador"] .section-title{font-size:13pt} html.livreto body[data-page^="guia-do-mobilizador"] .guia-sub{font-size:10.5pt} /* O último aperto, e ele tem um alvo medido: no manual da Saúde a seção 7 precisava de 35% de página para o cabeçalho + o primeiro checklist (que é `break-inside:avoid` de propósito — separar o contador "0 de 5" dos itens que ele conta é pior que uma página a mais, docs/25 §4). Sobravam 33%. O caderno inteiro custava uma folha por causa de dois pontos percentuais. Não se toca no que se lê; tira-se da moldura das caixas. */ html.livreto body[data-page^="guia-do-mobilizador"] .apoio-sec{padding:var(--sp-3) 0} html.livreto body[data-page^="guia-do-mobilizador"] .guia-item, html.livreto body[data-page^="guia-do-mobilizador"] .guia-bloco, html.livreto body[data-page^="guia-do-mobilizador"] .guia-col, html.livreto body[data-page^="guia-do-mobilizador"] .guia-nota, html.livreto body[data-page^="guia-do-mobilizador"] .guia-fala, html.livreto body[data-page^="guia-do-mobilizador"] .guia-checklist, html.livreto body[data-page^="guia-do-mobilizador"] .step{padding:var(--sp-3)} html.livreto body[data-page^="guia-do-mobilizador"] .section-head{margin-bottom:var(--sp-2)} html.livreto body[data-page^="guia-do-mobilizador"] .guia-check-head{margin-bottom:var(--sp-1)} /* ---- 5.1 NO GUIA GERAL, CADA SEÇÃO ABRE PÁGINA [13/08/2026] ---- Relato: *"tudo fora do lugar, mensagem final no meio"*. Medido, era isso: a Seção 5 abria no PÉ da página 7 e só dois itens cabiam; a 6 abria no pé da 8; e o fecho ficava no miolo da 9, com as Anotações emendadas logo abaixo. Seção que começa no rodapé não é seção, é sobra. O CUSTO FOI MEDIDO ANTES E É REAL — e a escolha foi do dono: como estava ...................... 12 páginas · 3 folhas só evitar título órfão ........... 12 páginas · 3 folhas · NÃO resolve título grudado nos 2 primeiros ... 14 páginas · 4 folhas seção por página (esta) .......... 16 páginas · 4 folhas · fecha exato Não existe layout organizado em 3 folhas: qualquer correção real cruza para a quarta. Cruzando, esta é a que aproveita melhor — 16 é múltiplo de 4 na bicuda, sem página de enchimento, e o que sobra em cada seção vira PAUTA em vez de branco. `[id]` de propósito: a seção da FICHA não tem id e não entra: ela é a página 2, colada no sumário, e mandá-la para uma folha só dela seria gastar papel com meia página de formulário. SÓ O GUIA GERAL. O da Saúde foi conferido no mesmo dia e está organizado — as seções dele já abrem no topo com espaço sobrando. Aplicar isto lá custaria a quarta folha sem resolver nada. O PÉ DE CADA SEÇÃO FICA EM BRANCO LISO, e é escolha do dono. A primeira versão enchia essa sobra com pauta — uma coluna flex cujo `::after` recebia o que restasse, mais três caudas de altura fixa para as seções que passam de uma página. Funcionava (13 das 16 páginas fechavam até o pé) e saiu a pedido: linha de anotação em toda página deixava o livreto com cara de caderno. **As páginas de Anotações do fim (§6) continuam** — elas é que seguram o múltiplo de 4. Tirar as duas coisas devolveria 3 páginas totalmente vazias ao caderno, que foi medido antes de decidir. */ html.livreto body[data-page="guia-do-mobilizador"] .apoio-sec[id]{break-before:page} /* E nada se parte no meio: cartão, checklist e nota são unidades de leitura. `.section-head` com `break-after:avoid` cobre a seção que passa de uma página — o subtítulo interno não fica sozinho no rodapé da segunda. */ html.livreto body[data-page="guia-do-mobilizador"] .section-head{ break-after:avoid;break-inside:avoid} html.livreto body[data-page="guia-do-mobilizador"] .step, html.livreto body[data-page="guia-do-mobilizador"] .guia-checklist, html.livreto body[data-page="guia-do-mobilizador"] .guia-nota, html.livreto body[data-page="guia-do-mobilizador"] .guia-final{break-inside:avoid} /* ---- 6. ANOTAÇÕES: O BRANCO QUE SOBRA VIRA PAUTA ---- A pauta TINHA página própria (`break-before:page`), e o preço aparecia na página anterior: a mensagem final ocupava 17% da folha e os outros 83% ficavam em branco — no manual geral, mais de meia página perdida num material que custa folha vezes tiragem. Sem a quebra forçada, a pauta começa EXATAMENTE onde o texto acaba e escorre até a contracapa. O branco do fim do miolo deixa de ser desperdício e vira linha para escrever, que é o que um manual de campo pede. A ALTURA É CALIBRADA POR MANUAL, e não tem como não ser: ela precisa terminar no pé da última página antes da contracapa, e onde o miolo acaba é uma propriedade do CONTEÚDO. Curta demais deixa branco no pé; comprida demais empurra uma 13ª página e estoura o múltiplo de 4. Medida a medida, `node tools/medir-impressao.mjs --livreto [--saude]` — e ele reclama sozinho quando o caderno deixa de fechar. RECALIBRADA EM 13/08/2026, e a primeira calibragem era CURTA nos dois. Medido no PDF a 150 DPI, contando as réguas: o geral parava a 121,8mm da última página do miolo (88,2mm de branco no pé) e a Saúde a 132,6mm (77,4mm). Pior: a Saúde rendia 10 páginas, então o `livreto-impor.py` enfiava DUAS páginas totalmente vazias antes da contracapa para fechar o múltiplo de 4 — na versão dobrada elas caíam nos lados 2 e 3, e era isso que se lia como "o livreto está cheio de página em branco". O princípio agora é o do §6 levado até o fim: **se vai sobrar espaço, ele sobra como PAUTA, no fim, e não como branco.** As duas vazias da Saúde viraram duas páginas de anotação, e isso custa ZERO folha a mais — o caderno já eram 3 folhas dobradas de qualquer jeito. O PENHASCO, medido varrendo valor a valor (a varredura está no docs/27 §10): o geral vira a 13ª página em **414mm** e a Saúde em **655mm**. Os valores abaixo ficam ~9mm sob o penhasco — uma linha de pauta de folga. É de propósito: 9mm não se vê no pé da página, e sem essa folga qualquer diferença de métrica de fonte custa UMA FOLHA A MAIS por livreto, vezes a tiragem. Quem for encostar aqui: mexa de 5 em 5mm e remeça. A pauta é um gradiente repetido: se um motor ignorar `print-color-adjust`, some a pauta e fica o branco com o título — que continua servindo para a mesma coisa. É a degradação mais barata desta folha. */ html.livreto body[data-page^="guia-do-mobilizador"] .livro-anotacoes{padding-top:var(--sp-4)} html.livreto body[data-page^="guia-do-mobilizador"] .livro-pauta{ height:var(--pauta-h,190mm);margin-top:var(--sp-4); background:repeating-linear-gradient(to bottom, transparent 0,transparent 9mm,var(--petroleo-200) 9mm,var(--petroleo-200) calc(9mm + 1px)); -webkit-print-color-adjust:exact;print-color-adjust:exact} /* calibrado: ver o §6 acima e o docs/27 §10. O GERAL FOI RECALIBRADO EM 13/08/2026, junto com o §5.1: com cada seção abrindo página, o miolo passou de 12 para 16 páginas e a pauta de 404mm ficou curta — a última página de anotações vinha 90% vazia. Penhasco novo medido em 560mm (550 fecha em 16, 570 estoura para 17). A Saúde não mudou de layout e mantém a calibragem de mais cedo (penhasco 655mm). */ html.livreto body[data-page="guia-do-mobilizador"]{--pauta-h:541mm} html.livreto body[data-page="guia-do-mobilizador-saude"]{--pauta-h:644mm} /* ---- 7. CONTRACAPA (última página) ---- Clara, e é decisão de toner: a capa roxa já custa uma face inteira de tinta vezes a tiragem, e a contracapa é a outra face da MESMA folha externa — pintar as duas dobra o custo da folha mais cara do livreto. Aqui a marca entra por fio e por logotipo, que imprimem em qualquer configuração. */ html.livreto body[data-page^="guia-do-mobilizador"] .livro-contracapa{ break-before:page;min-height:186mm;display:flex;align-items:flex-end} html.livreto body[data-page^="guia-do-mobilizador"] .livro-back{ border-top:3px solid var(--petroleo-700);padding-top:var(--sp-6)} /* A MESMA MARCA DO FIM, na mesma medida da capa: 52mm eram um logotipo de rodapé, e o pedido é que a última página feche como a primeira abre. Aqui ela vem CENTRADA e o bloco de contatos acompanha — uma marca larga e centrada com o texto encostado à esquerda leria como desalinho. */ html.livreto body[data-page^="guia-do-mobilizador"] .livro-marca{ display:block;width:96mm;height:auto;margin-inline:auto} html.livreto body[data-page^="guia-do-mobilizador"] .livro-back{text-align:center} /* ---- 7.1 O QR DAS REDES, NO BRANCO DA CONTRACAPA [13/08/2026] ---- A contracapa tem `min-height:186mm` e alinha o conteúdo no PÉ — sobrava o terço de cima em branco, numa página que o mobilizador tem na mão. O QR e o @ ocupam esse espaço; nada foi empurrado, porque o bloco entra ANTES da assinatura e a página continua ancorada embaixo. ONDE ELE ENTROU NÃO É DETALHE: `data-edit-key` é posicional, e o bloco é o primeiro filho de `.livro-back` — desloca os 6 editáveis da contracapa. Medido antes (`mede-chaves`): **nenhuma chave publicada mora ali**. As duas únicas dos manuais (`2.9.0.2.1` e `2.8.0.4.1`) são o rótulo "Mensagem final", que vem antes. Custo de KV: zero. `48mm` porque um QR de 41×41 módulos a 48mm dá ~1,1mm por módulo — acima do mínimo que leitor de celular pede a um palmo de distância, com folga para papel comum. A ZONA DE SILÊNCIO branca em volta é obrigatória: o PNG foi achatado sobre BRANCO (não sobre alfa) justamente porque o `--papel` é creme e o creme comeria o quieto do código. */ html.livreto body[data-page^="guia-do-mobilizador"] .livro-qr{ margin:0 0 var(--sp-8);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)} /* `text-transform:none` desfaz o `.rotulo`, que é caixa alta: arroba de rede se lê em minúscula e "@DAYSEAMARILIO" não é o que está escrito no perfil. A classe fica porque é dela que vêm a fonte de título e o espaçamento. */ html.livreto body[data-page^="guia-do-mobilizador"] .livro-qr-rot{ margin:0;font-size:1rem;letter-spacing:.04em;text-transform:none; color:var(--petroleo-700)} html.livreto body[data-page^="guia-do-mobilizador"] .livro-qr-img{ width:48mm;height:48mm;display:block; /* o QR é tinta chapada: sem `exact` ele sai vazio na configuração padrão do Chrome, e um QR pela metade não é um QR — é uma mancha. */ -webkit-print-color-adjust:exact;print-color-adjust:exact} html.livreto body[data-page^="guia-do-mobilizador"] .livro-contatos{justify-items:center} html.livreto body[data-page^="guia-do-mobilizador"] .livro-rot{ font-size:8pt;letter-spacing:.18em;color:var(--tinta-60);margin-top:var(--sp-5)} html.livreto body[data-page^="guia-do-mobilizador"] .livro-contatos{ list-style:none;padding:0;margin-top:var(--sp-4);display:grid;gap:var(--sp-2)} html.livreto body[data-page^="guia-do-mobilizador"] .livro-contatos li{ font-size:9.5pt;line-height:1.4;color:var(--tinta)} html.livreto body[data-page^="guia-do-mobilizador"] .livro-contatos b{ color:var(--petroleo-900);font-weight:700} html.livreto body[data-page^="guia-do-mobilizador"] .livro-contracapa .social{ justify-content:center;gap:var(--sp-2);margin-top:var(--sp-5)} html.livreto body[data-page^="guia-do-mobilizador"] .livro-contracapa .social a{ width:26px;height:26px;background:none;border:1px solid var(--petroleo-200);color:var(--petroleo-800)} html.livreto body[data-page^="guia-do-mobilizador"] .livro-pe{ font-size:8pt;color:var(--tinta-60);margin-top:var(--sp-5); border-top:1px solid var(--petroleo-100);padding-top:var(--sp-3)} /* O aviso de cópia velha. Menor que tudo e no fim de tudo: ele não disputa com o conteúdo da contracapa — só precisa estar lá quando alguém desconfiar de que o papel na mão não bate mais com o manual. */ html.livreto body[data-page^="guia-do-mobilizador"] .livro-aviso{ font-size:7pt;line-height:1.35;color:var(--tinta-60);margin-top:var(--sp-2)} html.livreto body[data-page^="guia-do-mobilizador"] .livro-aviso b{color:var(--tinta)} /* ---- 8. A ÚLTIMA PÁGINA DO MIOLO NÃO É A CONTRACAPA ---- A mensagem final fecha o miolo, onde ela está na DOM. Nada a move: mover nó no `beforeprint` seria a única forma de trocar a ordem, e a ordem que está no HTML já é a do livreto (capa · sumário · ficha · 7 seções). */ html.livreto body[data-page^="guia-do-mobilizador"] .guia-final{break-inside:avoid}