:root{
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --ink:#0b1b2b;
  --muted:#5b6670;
  --line: rgba(0,0,0,.14);
  --card: rgba(0,0,0,.02);
  --radius: 16px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:var(--sans); color:#111; background:#fff; }
a{ color:inherit; text-decoration:none; }
main{ max-width: 940px; margin: 0 auto; padding: 28px 18px 40px; }
h1{ font-size: 34px; margin: 6px 0 10px; color:var(--ink); font-family:var(--serif); }
h2{ font-size: 24px; margin: 18px 0 8px; color:var(--ink); font-family:var(--serif); }
h3{ font-size: 18px; margin: 14px 0 6px; color:var(--ink); }
p{ line-height:1.72; margin: 10px 0; }
ul,ol{ line-height:1.72; }
.topbar{ position: sticky; top:0; background:#fff; border-bottom:1px solid var(--line); z-index:50; }
.topbar .inner{ max-width: 1100px; margin:0 auto; padding: 12px 14px; display:flex; gap:12px; align-items:center; justify-content:space-between; }
.brand .title{ font-weight:700; font-size:14px; color:var(--ink); }
.brand .sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.navbtns{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.btn, button{
  border:1px solid var(--line);
  background:#fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-family:var(--sans);
  font-size: 12.5px;
  cursor:pointer;
}
button:hover,.btn:hover{ background: rgba(0,0,0,.03); }
select{
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px;
  font-size:12.5px;
  background:#fff;
}
.box, .callout, .nota, .regional, .exemplo, .glossario, .questoes, .caso, .checklist, .passos, .tabela{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px;
  margin: 16px 0;
  background: var(--card);
}
.boxtitle{ font-weight:700; margin-bottom:8px; color:var(--ink); }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.muted{ color:var(--muted); }
.sep{ border:none; border-top:1px solid var(--line); margin: 18px 0; }
.pagebreak{ break-before: page; page-break-before: always; }
table{ width:100%; border-collapse: collapse; }
th,td{ border:1px solid var(--line); padding: 8px; text-align:left; vertical-align:top; }
th{ background: rgba(0,0,0,.03); }
@media (max-width: 760px){
  .grid2{ grid-template-columns: 1fr; }
  h1{ font-size: 28px; }
}
@media print{
  .noprint{ display:none !important; }
  main{ max-width:none !important; padding: 0 0; }
  .pagebreak{ break-before: page; page-break-before: always; }
}

/* ===== Padrão editorial acadêmico (impressão/PDF) ===== */
@page {
  size: A4 portrait;
  margin: 22mm 18mm 22mm 18mm;
}

@media print{
  html, body{ background:#fff !important; }
  body{
    font-family: ui-serif, Georgia, "Times New Roman", Times, serif !important;
    font-size: 13.5pt !important;
    line-height: 1.85 !important;
    color:#000 !important;
  }
  main{ max-width: none !important; padding: 0 !important; }

  /* quebras de página previsíveis */
  h1{
    break-before: page;
    page-break-before: always;
    margin-top: 0;
  }
  main > h1:first-of-type{
    break-before: auto !important;
    page-break-before: auto !important;
  }

  /* Evita que tabelas/quadros “grudem” e dá aparência de livro */
  .box, .callout, .nota, .regional, .exemplo, .glossario, .questoes, .caso, .checklist, .passos, .tabela{
    background: transparent !important;
    border-color: rgba(0,0,0,.22) !important;
    padding: 10pt 10pt !important;
    margin: 12pt 0 !important;
  }
  p{ margin: 10pt 0 !important; }
  h2{ margin: 14pt 0 8pt !important; }
  h3{ margin: 12pt 0 6pt !important; }
  table{ font-size: 12.2pt !important; }
  th, td{ padding: 7pt !important; }

  img{ break-inside: avoid; page-break-inside: avoid; }

  .pagebreak{
    break-before: page !important;
    page-break-before: always !important;
  }
}