precisa corresponder a EXATAMENTE uma página física impressa. A numeração "05 / 12" do rodapé é calculada em sections.php contando seções, não páginas físicas do PDF. Por isso .page usa altura fixa (297mm) e overflow:hidden em vez de height:auto/overflow:visible: se uma seção crescer além de 297mm, ela viraria 2 páginas físicas e todos os números do rodapé ficariam errados a partir dali (e o próprio rodapé, que é position:absolute dentro de .page, pararia de colar no fim real da página impressa). Se algum texto ficar comprovadamente maior que a página, encurte o texto ou reduza a fonte daquela seção — não solte a altura da .page. @page zera a margem do navegador. Sem isso, o navegador soma a própria margem ao padding de 26mm/20mm da .page e o conteúdo transborda, gerando páginas em branco entre as seções. No Chrome: Ctrl+P → Destino "Salvar como PDF" → Mais configurações → Margens: Nenhuma → Gráficos de plano de fundo: ligado ============================================================== */ @page{ size:A4; margin:0 } @media print{ body{background:#fff} .page{margin:0;box-shadow:none;width:210mm;height:297mm;min-height:297mm; page-break-after:always;break-after:page;overflow:hidden;padding:26mm 20mm} .page:last-child{page-break-after:auto;break-after:auto} /* Evitar cortes de elementos importantes */ .chartbox,.callout,.profile-card,.idx,.quote,.bar,.grid2,.grid4,.mapa-box,.cerebro-box{break-inside:avoid} h3.sec,.talent-grid,table.data{break-inside:avoid} .graf-linha{break-inside:avoid} /* Gráficos grandes (mapa de talento e cérebro) ampliados para a impressão, mas com teto de largura — sem o teto, o cérebro (SVG quadrado) viraria ~660mm de altura e estouraria a página. Com o talento e as competências agora em páginas próprias, esses tamanhos dão folga e centralizam bem. */ /* mapa no tamanho do navegador (~120mm): com a interpretação e a grade das 13 zonas na mesma página, isso garante folga e evita corte, mesmo em avaliados com texto de interpretação mais longo. */ .mapa-box{max-width:120mm;margin:12px auto 16px;height:auto} .cerebro-box{max-width:120mm;margin:16px auto;height:auto} .chartbox{padding:18px;margin:14px 0} /* radar em página própria: pode ser grande e legível, só centralizado. (Radar e dicionário agora ficam em páginas separadas na impressão.) */ .radar-box{max-width:150mm;margin-left:auto;margin-right:auto} /* SVG e imagens escalarem corretamente */ svg{max-width:100%;height:auto;display:block} img{max-width:100%;height:auto} /* Tabelas em tamanho web (sem compactação) */ table.data{font-size:13.5px;margin:14px 0} table.data td{padding:10px} table.data th{padding:10px} /* Melhor spacing entre seções */ .bar{margin-bottom:18px;margin-top:20px;page-break-before:avoid} /* Grades DISC (Os 4 fatores) - SEMPRE 4 COLUNAS */ .grid4{display:grid;grid-template-columns:repeat(4,1fr) !important;gap:16px !important;break-inside:avoid} .grid4 .profile-card{break-inside:avoid} /* Espaçamento antes de quebra */ h2,h3{page-break-after:avoid;margin-top:14px} /* Evitar viúvas e órfãs em parágrafos */ p{orphans:3;widows:3} /* Cards de perfil com espaço */ .profile-card{margin-bottom:10px;page-break-inside:avoid} } /* Container de rolagem para tabelas largas (só rola se não couber; em telas grandes é invisível e não muda nada). */ .tabela-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ---- tela pequena / celular ---- IMPORTANTE: usar "screen and" para estas regras NÃO valerem na impressão. Sem isso, como a página A4 tem largura ~793px (< 820px), o navegador aplicaria as regras de celular também no PDF — quebrando os cards (2x2), a capa (layout mobile) e as tabelas. Na impressão vale só o @media print. */ @media screen and (max-width:820px){ .page{width:auto;min-height:auto;padding:22px} .grid2,.graf-linha{grid-template-columns:1fr} /* os 4 cards DISC empilham em 2x2 em vez de 4 colunas espremidas */ .grid4{grid-template-columns:repeat(2,1fr) !important;gap:12px !important} .dict{columns:1} .cl-mid h1{font-size:38px} .talent-grid{grid-template-columns:repeat(2,1fr)} .pmark{position:static;margin-top:24px} /* títulos de seção proporcionais à tela */ .bar{padding:13px 18px} .bar h2{font-size:22px} h3.sec{font-size:16px} .fim-titulo{font-size:28px} /* a tabela larga (6 colunas) rola de lado dentro do container, sem espremer o texto nem estourar a página */ .tabela-scroll table.data{min-width:520px} /* CAPA no mobile: a arte (capa.png) tem conteúdo só até ~66% da altura; o terço de baixo é vazio. No A4 a caixa de dados cabe nesse vazio, mas na largura de um celular ela subiria e cobriria o título. Então, no mobile, saímos do overlay (flex-end) para FLUXO NORMAL: a arte ocupa o topo e a caixa vem logo abaixo. O padding-top reserva a altura do conteúdo da arte (≈ 66,4% × proporção 1,415 ≈ 94vw). Se um dia a capa.png for trocada por outra com proporção/margem diferente, reveja este 94vw. */ .cover-img{display:block;min-height:auto;padding:94vw 0 26px; background-size:100% auto;background-position:top center} .cover-img .cl-card{margin:0 16px;width:auto;max-width:none} .cover-img .cl-foot{margin:16px 16px 0;text-align:center} .cover-img .pmark{margin:20px 16px 0} } /* ---- celular estreito (só tela, nunca impressão) ---- */ @media screen and (max-width:430px){ .idx{grid-template-columns:96px 1fr;gap:12px} .idx-chip{padding:10px 6px} .idx-chip .abbr{font-size:22px} }