, com medidas diferentes entre si. */ .doc-topo { border-bottom: 1px solid var(--cor-borda); background: var(--cor-superficie); padding: var(--e-3) var(--e-5); } .doc-topo a { font-size: var(--t-sm); text-decoration: none; } .doc { /* 68ch é o limite em que a linha ainda se lê sem o olho se perder na volta. Sem isso, num monitor largo o parágrafo atravessava a tela inteira. */ max-width: 68ch; margin: 0 auto; padding: var(--e-7) var(--e-4) var(--e-8); } .doc h1 { font-size: clamp(1.9rem, 3vw + 1rem, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--e-3); } .doc .doc-resumo { font-size: var(--t-lg); color: var(--cor-texto-suave); margin: 0 0 var(--e-2); text-wrap: pretty; } .doc .doc-data { font-family: var(--fonte-dados); font-size: var(--t-xs); color: var(--cor-texto-suave); padding-bottom: var(--e-5); border-bottom: 1px solid var(--cor-borda); margin: 0 0 var(--e-6); } .doc h2 { font-size: var(--t-xl); margin: var(--e-7) 0 var(--e-3); scroll-margin-top: var(--e-5); } .doc h3 { font-size: var(--t-base); margin: var(--e-5) 0 var(--e-2); } .doc p, .doc li { text-wrap: pretty; } .doc p { margin: 0 0 var(--e-3); } .doc ul, .doc ol { margin: 0 0 var(--e-4); padding-left: var(--e-5); } .doc li { margin-bottom: var(--e-2); } /* Sumário: documento longo sem índice obriga a rolar procurando. */ .doc-indice { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-3); padding: var(--e-4) var(--e-5); margin-bottom: var(--e-6); } .doc-indice h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-texto-suave); margin: 0 0 var(--e-3); } .doc-indice ol { margin: 0; padding-left: var(--e-4); font-size: var(--t-sm); } .doc-indice li { margin-bottom: var(--e-1); } /* Destaque para o que a pessoa não pode deixar de ler. */ .doc-nota { background: var(--ameixa-suave); border-left: 3px solid var(--cor-acao); border-radius: 0 var(--raio-2) var(--raio-2) 0; padding: var(--e-4) var(--e-5); margin: var(--e-5) 0; } .doc-nota p:last-child { margin-bottom: 0; } /* Tabela que rola sozinha em tela estreita — o corpo da página nunca rola de lado. */ .doc-tabela { overflow-x: auto; margin: 0 0 var(--e-5); } .doc-tabela table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--t-sm); } .doc-tabela th, .doc-tabela td { padding: var(--e-3); text-align: left; border-bottom: 1px solid var(--cor-borda); } .doc-tabela thead th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--cor-texto-suave); background: var(--cor-superficie); } .doc-rodape { margin-top: var(--e-8); padding-top: var(--e-5); border-top: 1px solid var(--cor-borda); font-size: var(--t-sm); color: var(--cor-texto-suave); } .doc-rodape a { margin-right: var(--e-4); }