/* =====================================================================
   Manual para o paciente com lúpus — sistema visual
   Fonte de display: Fraunces (serif, ótica editorial)
   Fonte de texto:   Inter (sans, legibilidade em corpo pequeno)
   ===================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "STIX Two Text";
  src: url("fonts/stix-two-text-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* paleta */
  --plum-950: #1f1426;
  --plum-900: #2b1b33;
  --plum-700: #4b2a5e;
  --plum-500: #7a4e93;
  --plum-300: #b592c7;
  --lilac-200: #d9c7e3;
  --lilac-100: #ece2f1;
  --lilac-050: #f5f0f8;
  --cream: #fbf7f1;
  --sand: #efe6d8;
  --ink: #241a2a;
  --ink-soft: #5b4f63;
  --terracotta: #d4674a;
  --terracotta-050: #fbeee9;
  --gold: #d9a441;
  --gold-050: #fbf3e2;
  --sage: #4f8f7f;
  --sage-050: #e9f3ef;
  --white: #ffffff;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --measure: 140mm;
}

* { box-sizing: border-box; }

html { font-size: 10.5pt; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------- tipografia ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--plum-900);
  line-height: 1.15;
  margin: 0;
  hyphens: none;
  font-variation-settings: "opsz" 72, "SOFT" 30;
}

h2, h3 { max-width: var(--measure); }
h2 {
  font-size: 1.85rem;
  margin: 1.5rem 0 0.6rem;
  break-after: avoid;
  page-break-after: avoid;
  letter-spacing: -0.005em;
}
h2 .num {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum-500);
  margin-bottom: 0.45rem;
}
h3 {
  font-size: 1.25rem;
  margin: 1.35rem 0 0.4rem;
  break-after: avoid;
  page-break-after: avoid;
  font-weight: 500;
}
h4 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--plum-700);
  margin: 1rem 0 0.25rem;
  break-after: avoid;
  page-break-after: avoid;
}

p {
  margin: 0 0 0.75rem;
  max-width: var(--measure);
  orphans: 3;
  widows: 3;
}
p.lead {
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.4;
  color: var(--plum-900);
  font-weight: 400;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  max-width: var(--measure);
}
strong { font-weight: 700; color: var(--plum-900); }
em { font-style: italic; }
a { color: var(--plum-500); text-decoration: none; }

ul, ol {
  margin: 0.2rem 0 0.9rem;
  padding-left: 1.35rem;
  max-width: var(--measure);
}
li { margin: 0 0 0.3rem; padding-left: 0.15rem; }
li::marker { color: var(--plum-500); font-weight: 700; }
ul { list-style: none; padding-left: 1.2rem; }
ul > li { position: relative; }
ul > li::before {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: 0.62em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--plum-500);
}
ol > li::marker { font-family: var(--serif); font-weight: 700; }

/* lista de "o que levar" com ícones (checklist) */
ul.check { padding-left: 1.65rem; }
ul.check > li::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 0.25em;
  left: -1.65rem;
  top: 0.32em;
  background: var(--lilac-100);
  border: 1.5px solid var(--plum-300);
}

hr.sep {
  border: 0;
  height: 1px;
  background: var(--lilac-200);
  margin: 1.5rem 0;
  max-width: var(--measure);
}

/* ---------- capítulo: abertura ---------- */
.chapter {
  break-before: page;
  page-break-before: always;
}
.chapter-opener {
  break-after: page;
  page-break-after: always;
  position: relative;
  min-height: 240mm;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.chapter-opener .kicker {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum-500);
  margin-bottom: 1rem;
}
.chapter-opener .big-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 9rem;
  line-height: 0.85;
  color: var(--lilac-200);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: -0.04em;
  margin-bottom: 2.2rem;
}
.chapter-opener h1 {
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 150mm;
  color: var(--plum-900);
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.chapter-opener .intro {
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 135mm;
  margin-top: 1.2rem;
  font-variation-settings: "opsz" 24, "SOFT" 50;
}
.chapter-opener .art {
  position: absolute;
  top: 0;
  right: 0;
  width: 92mm;
  height: 92mm;
}
.chapter-opener .art svg { width: 100%; height: 100%; }

/* título colado ao primeiro bloco; seções curtas inteiras */
.keep { break-inside: avoid; page-break-inside: avoid; }
.keep > h2:first-child { margin-top: 1.5rem; }
.keep > h3:first-child { margin-top: 1.35rem; }

/* fim de capítulo: na impressão o ornamento em linha some e entra a faixa no pé da página */
body.print .chapter-end { display: none; }
.pagedjs_page.chapter-last .pagedjs_margin-bottom-left,
.pagedjs_page.chapter-last .pagedjs_margin-bottom-right { visibility: hidden; }
.chapter-last-band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 17mm;
  background: var(--lilac-050);
  border-top: 2.5px solid var(--plum-500);
  display: flex; align-items: center; gap: 4mm;
  padding: 0 40mm 0 30mm; /* fios e fólio alinhados à mancha da página da direita */
  box-sizing: border-box;
}
.chapter-last-band .rule { flex: 1; height: 1px; background: var(--plum-300); }
.chapter-last-band svg { width: 11mm; height: auto; flex: none; }
.chapter-last-band .txt { font-family: var(--sans); font-size: 7.5pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum-700); font-weight: 700; white-space: nowrap; }
.chapter-last-band .pg { font-family: var(--serif); font-size: 10pt; color: var(--plum-700); margin-left: 2mm; }
.pagedjs_left_page .chapter-last-band { flex-direction: row-reverse; padding: 0 30mm 0 40mm; }
.pagedjs_left_page .chapter-last-band .pg { margin-left: 0; margin-right: 2mm; }

/* fim de capítulo (versão web, em linha) */
.chapter-end {
  display: flex; align-items: center; gap: 4mm;
  max-width: var(--measure);
  margin: 1.4rem 0 0;
  break-inside: avoid; page-break-inside: avoid;
}
.chapter-end span { flex: 1; height: 2px; background: var(--plum-500); border-radius: 2px; }
.chapter-end svg { width: 11mm; height: auto; flex: none; }

/* ---------- caixas ---------- */
.box {
  break-inside: avoid;
  page-break-inside: avoid;
  border-radius: 10px;
  padding: 1rem 1.15rem 0.85rem 1.15rem;
  margin: 1.1rem 0 1.2rem;
  max-width: var(--measure);
  background: var(--lilac-050);
  border-left: 5px solid var(--plum-500);
}
.box > :last-child { margin-bottom: 0; }
.box .label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-700);
  margin-bottom: 0.45rem;
}
.box .label svg { width: 1.05rem; height: 1.05rem; flex: none; }
.box p, .box ul, .box ol { max-width: none; }
.box p { margin-bottom: 0.5rem; }

.box.important { background: var(--terracotta-050); border-left-color: var(--terracotta); }
.box.important .label { color: #a6432a; }
.box.tip { background: var(--gold-050); border-left-color: var(--gold); }
.box.tip .label { color: #8a6314; }
.box.remember { background: var(--lilac-050); border-left-color: var(--plum-500); }
.box.quote {
  background: transparent;
  border: 0;
  border-left: 5px solid var(--lilac-200);
  padding: 0.2rem 0 0.2rem 1.15rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--plum-900);
  font-variation-settings: "opsz" 24, "SOFT" 50;
}

/* ---------- destaque com ícone (spot) ---------- */
.spot {
  display: grid;
  grid-template-columns: 22mm 1fr;
  gap: 5mm;
  align-items: start;
  margin: 1.2rem 0;
  max-width: var(--measure);
  break-inside: avoid;
  page-break-inside: avoid;
}
.spot .icon { width: 22mm; height: 22mm; }
.spot .icon svg { width: 100%; height: 100%; }
.spot h3, .spot h4, .spot .keep > h3:first-child { margin-top: 0.1rem; }
.spot > div > :last-child, .spot > div > .keep:last-child > :last-child { margin-bottom: 0; }

/* ---------- tabela ---------- */
table {
  border-collapse: collapse;
  width: 100%;
  max-width: var(--measure);
  margin: 0.8rem 0 1.2rem;
  font-size: 0.92rem;
  break-inside: avoid;
  page-break-inside: avoid;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--lilac-200);
}
th {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum-700);
  background: var(--lilac-050);
  border-bottom: 2px solid var(--plum-300);
}
td:first-child { font-weight: 700; color: var(--plum-900); white-space: nowrap; }
td.tel { white-space: nowrap; }

/* ---------- contato / cartão ---------- */
.card {
  break-inside: avoid;
  page-break-inside: avoid;
  border: 1.5px solid var(--lilac-200);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin: 1rem 0 1.2rem;
  max-width: var(--measure);
  background: var(--white);
}
.card h4 { margin: 0 0 0.7rem; padding-bottom: 0.5rem; border-bottom: 1.5px solid var(--lilac-200); }
.card dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.9rem; }
.card dt { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum-500); font-weight: 700; padding-top: 0.15rem; }
.card dd { margin: 0; }

/* ---------- cabeçalho de organização (logo + apresentação) ---------- */
.org-header {
  display: grid;
  grid-template-columns: 38mm 1fr;
  gap: 7mm;
  align-items: center;
  margin: 0 0 1rem;
  max-width: var(--measure);
  break-inside: avoid;
  page-break-inside: avoid;
}
.org-header .org-logo {
  width: 38mm; height: 38mm;
  border-radius: 14px;
  background: var(--lilac-050);
  display: flex; align-items: center; justify-content: center;
  padding: 4mm;
}
.org-header .org-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.org-header .lead { margin: 0; }
.logo-placeholder {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plum-300);
  text-align: center; border: 1px dashed var(--plum-300); border-radius: 8px; padding: 0.5rem; width: 100%;
}

/* ---------- QR ---------- */
.qr {
  display: grid;
  grid-template-columns: 34mm 1fr;
  gap: 6mm;
  align-items: center;
  max-width: var(--measure);
  margin: 1rem 0 1.3rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--cream);
  break-inside: avoid;
  page-break-inside: avoid;
}
.qr .code { width: 34mm; height: 34mm; background: white; border-radius: 6px; padding: 2mm; color: var(--plum-950); }
.qr .code svg { width: 100%; height: 100%; display: block; }
.qr h4 { margin: 0 0 0.25rem; }
.qr h4.with-ico { display: block; }
.qr h4.with-ico svg { display: inline-block; width: 1.15rem; height: 1.15rem; color: var(--plum-500); vertical-align: -0.22em; margin-right: 0.35rem; }
.qr p { margin: 0 0 0.3rem; max-width: none; }
.qr .url { font-size: 0.8rem; color: var(--plum-500); word-break: normal; overflow-wrap: anywhere; }
/* dois QR Codes lado a lado (site + Instagram) */
.qr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; max-width: var(--measure); margin: 1rem 0 1.3rem; break-inside: avoid; page-break-inside: avoid; }
.qr-duo .qr { margin: 0; max-width: none; grid-template-columns: 24mm 1fr; gap: 3.5mm; align-items: start; padding: 3.5mm; }
.qr-duo .qr .code { width: 24mm; height: 24mm; padding: 1.4mm; }
.qr-duo .qr h4 { font-size: 0.86rem; line-height: 1.25; }
.qr-duo .qr p { font-size: 0.78rem; line-height: 1.4; }
.qr-duo .qr .url { font-size: 0.74rem; }

/* ---------- fluxo (caminho) ---------- */
.flow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0.8rem 0 1.2rem;
  max-width: var(--measure);
  break-inside: avoid;
  page-break-inside: avoid;
}
.flow .step {
  background: var(--lilac-100);
  color: var(--plum-900);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.flow .arrow { color: var(--plum-300); font-weight: 700; }
.flow .pair { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }

/* ---------- capa e páginas especiais ---------- */
.cover {
  page: cover;
  break-after: page;
  page-break-after: always;
  position: relative;
  height: 297mm;
  width: 210mm;
  margin: -20mm -18mm 0 -22mm; /* compensa margens da página */
  background: var(--plum-900);
  color: var(--white);
  overflow: hidden;
}
.cover .art { position: absolute; inset: 0; }
.cover .art svg { width: 100%; height: 100%; display: block; }
.cover .text { position: absolute; left: 20mm; right: 20mm; top: 34mm; text-align: center; }
.cover .kicker {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lilac-200);
  margin-bottom: 1.4rem;
}
.cover h1 {
  color: var(--white);
  font-size: 5.3rem;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  max-width: none;
  text-wrap: wrap;
}
.cover h1 em { font-style: italic; font-weight: 300; color: var(--lilac-200); }
.cover .sub {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--lilac-200);
  max-width: 150mm;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.35;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  text-wrap: wrap;
}
.cover .meta { position: static; }
.cover .author {
  position: absolute; left: 20mm; bottom: 20mm; right: 20mm; text-align: center;
  font-size: 0.9rem; color: var(--lilac-200); line-height: 1.5;
}
.cover .author strong { color: var(--white); font-family: var(--serif); font-weight: 400; display: block; font-size: 2.2rem; line-height: 1.1; letter-spacing: -0.01em; font-variation-settings: "opsz" 72, "SOFT" 100; }
.cover .author .cred { display: block; margin-top: 2.5mm; font-family: var(--sans); font-size: 0.95rem; color: var(--lilac-200); letter-spacing: 0.02em; }
.cover .edition { position: absolute; right: 20mm; bottom: 28mm; text-align: right; font-size: 0.8rem; color: var(--plum-300); letter-spacing: 0.12em; text-transform: uppercase; }

.front-matter { break-after: page; page-break-after: always; }
.front-matter.title-page { min-height: 246mm; display: flex; flex-direction: column; justify-content: space-between; }
.title-page h1 { font-size: 2.5rem; font-weight: 500; line-height: 1.08; max-width: 150mm; }
.title-page .sub { font-family: var(--serif); font-size: 1.15rem; color: var(--ink-soft); margin-top: 0.8rem; max-width: 140mm; }
.tp-panel {
  background: var(--lilac-050);
  border-radius: 18px;
  padding: 9mm 9mm 8mm;
  margin: 8mm 0 6mm;
}
.tp-panel-title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--plum-500); margin-bottom: 5mm; }
.chapter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5mm 5mm; }
.chapter-grid a {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--white); border-radius: 12px; padding: 4mm 4mm 3.5mm;
  color: var(--plum-900); min-height: 42mm;
}
.chapter-grid .art { width: 20mm; height: 20mm; display: block; margin-bottom: 2.5mm; }
.chapter-grid .art svg { width: 100%; height: 100%; display: block; }
.chapter-grid .n { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; color: var(--plum-500); }
.chapter-grid .t { font-family: var(--serif); font-size: 0.92rem; line-height: 1.2; font-weight: 500; margin-top: 0.15rem; text-wrap: balance; }
.tp-quote {
  background: var(--plum-700); color: var(--lilac-100); border-radius: 12px;
  padding: 4mm 5mm; font-family: var(--serif); font-size: 1rem; line-height: 1.3;
  display: flex; align-items: center; min-height: 42mm;
  font-variation-settings: "opsz" 24, "SOFT" 60;
}
.tp-foot { display: flex; justify-content: space-between; align-items: flex-end; }
.title-page .author { font-size: 0.95rem; }
.title-page .author strong { display: block; font-size: 1.1rem; }
.tp-dots { display: flex; gap: 3mm; }
.tp-dots i { width: 5mm; height: 5mm; border-radius: 50%; display: block; }
.tp-dots i:nth-child(1) { background: var(--plum-700); }
.tp-dots i:nth-child(2) { background: var(--plum-300); }
.tp-dots i:nth-child(3) { background: var(--terracotta); }
.tp-dots i:nth-child(4) { background: var(--gold); }

.imprint { font-size: 0.86rem; color: var(--ink-soft); min-height: 240mm; display: flex; flex-direction: column; justify-content: flex-end; }
.imprint h4 { margin-top: 1.2rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.imprint p { margin-bottom: 0.3rem; max-width: 130mm; }
.imprint .collab-credit { margin-top: 0.5rem; }
.imprint .catalog {
  border: 1px solid var(--plum-300);
  padding: 0.8rem 1rem 0.7rem;
  max-width: 128mm;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 1rem 0 1.5rem;
  color: var(--ink);
}
.imprint .catalog-title { text-align: center; font-weight: 600; margin-bottom: 0.7rem; }
.imprint .catalog-body { display: grid; grid-template-columns: 14mm 1fr; gap: 3mm; }
.imprint .catalog .cutter { font-weight: 600; }
.imprint .catalog-foot { display: flex; justify-content: space-between; margin-top: 0.7rem; padding-top: 0.5rem; border-top: 1px solid var(--lilac-200); }
/* logos da ficha: a caixa tem a altura do logo mais alto (nada invade o texto de cima) e a linha cabe na coluna de 140 mm */
.imprint .logos { display: flex; gap: 8mm; align-items: center; margin: 1rem 0 1.4rem; }
.imprint .logos .logo { height: 15mm; display: flex; align-items: center; }
.imprint .logos .logo svg { height: 9mm; width: auto; }
.imprint .logos .logo img { height: 15mm; width: auto; }
.imprint .logos .logo img[src*="anplupus-horizontal"] { height: 7mm; }

/* sumário */
.toc { break-after: page; page-break-after: always; }
.toc h1 { font-size: 2.6rem; font-weight: 500; margin-bottom: 1.4rem; }
.toc ol { list-style: none; padding: 0; margin: 0; max-width: 150mm; }
.toc li { margin: 0; }
.toc li.l1 { margin-top: 0.85rem; }
.toc li.l1.front > a { font-size: 1.05rem; color: var(--ink-soft); }
.toc li.l1 > a {
  display: grid;
  grid-template-columns: 2.4rem 1fr 2.2rem;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--plum-900);
  font-weight: 500;
  padding: 0.3rem 0 0.28rem;
  border-bottom: 1px solid var(--lilac-200);
}
.toc li.l1 > a .n { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--plum-500); }
.toc li.l2 > a {
  display: grid;
  grid-template-columns: 2.4rem 1fr 2.2rem;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-soft);
  padding: 0.09rem 0;
}
.toc .tt { text-wrap: balance; }
.toc li.roman > a::after { content: attr(data-pg); }
.toc a::after { content: target-counter(attr(href url), page); font-family: var(--sans); font-size: 0.85rem; color: var(--plum-500); font-variant-numeric: tabular-nums; text-align: right; }

/* prefácio */
/* prefácio: perfil editorial em duas colunas, uma página */
.preface { font-size: 0.88rem; line-height: 1.43; }
.preface-title { font-size: 2.3rem; font-weight: 500; line-height: 1.06; margin-bottom: 0.9rem; max-width: 160mm; }
.preface-grid { display: grid; grid-template-columns: 50mm 1fr; gap: 9mm; align-items: start; }
.preface-side { background: var(--lilac-050); border-radius: 16px; padding: 4mm; }
.portrait { width: 42mm; height: 54mm; border-radius: 12px; overflow: hidden; background: var(--lilac-100); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum-300); }
.preface-side .who { font-size: 0.7rem; line-height: 1.4; color: var(--ink-soft); margin: 3.5mm 0 0; white-space: nowrap; }
.preface-side .who strong { display: block; font-family: var(--serif); font-size: 0.98rem; line-height: 1.2; color: var(--plum-900); font-weight: 500; margin-bottom: 0.25rem; white-space: normal; }
.preface-side .pull {
  margin-top: 4mm; background: var(--plum-700); color: var(--lilac-100); border-radius: 10px;
  padding: 3.5mm 4mm; font-family: var(--serif); font-size: 0.98rem; line-height: 1.3;
  font-variation-settings: "opsz" 24, "SOFT" 60;
}
.preface-body p { max-width: none; margin-bottom: 0.55rem; }
.preface-body p.lead { font-size: 1.1rem; line-height: 1.35; margin-bottom: 0.7rem; }
.preface .signature { margin-top: 0.6rem; font-family: var(--serif); font-size: 0.98rem; break-inside: avoid; page-break-inside: avoid; }
.preface .signature strong { display: block; font-size: 1.2rem; font-weight: 500; color: var(--plum-900); }

/* página bônus: por que a borboleta */
.bonus { break-before: page; page-break-before: always; }
.bonus-art { width: 62mm; margin: 0 auto 6mm; }
.bonus-art svg { width: 100%; height: auto; display: block; }
.bonus h1 { font-size: 2.6rem; font-weight: 500; margin-bottom: 1.4rem; }
.bonus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9mm; align-items: start; }
.bonus-col h4 { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--plum-500); margin: 0 0 0.6rem; padding-bottom: 0.4rem; border-bottom: 1.5px solid var(--lilac-200); }
.bonus-col p { max-width: none; font-size: 0.95rem; }
.bonus-col.manifesto { background: var(--lilac-050); border-radius: 14px; padding: 6mm 6mm 5mm; }
.bonus-col:not(.manifesto) { padding-top: 6mm; } /* rótulos e fios das duas colunas na mesma altura */
.bonus-col.manifesto p { font-family: var(--serif); font-size: 1.02rem; line-height: 1.45; color: var(--plum-900); font-variation-settings: "opsz" 24, "SOFT" 50; }
.bonus-col.manifesto .signature { margin-top: 1rem; font-family: var(--serif); font-size: 0.95rem; color: var(--ink-soft); }
.bonus-col.manifesto .signature strong { display: block; font-size: 1.05rem; color: var(--plum-900); font-weight: 500; }
@media screen and (max-width: 640px) { .bonus-grid { grid-template-columns: 1fr; } }

/* contracapa */
.back-cover {
  page: cover;
  break-before: page;
  page-break-before: always;
  height: 297mm; width: 210mm;
  margin: -20mm -18mm 0 -22mm;
  background: var(--plum-900);
  color: var(--lilac-200);
  position: relative;
}
.back-cover .inner { position: absolute; left: 22mm; right: 22mm; bottom: 26mm; }
.back-cover .mark { position: absolute; left: 0; right: 0; top: 78mm; display: flex; justify-content: center; }
.back-cover .mark svg { width: 62mm; height: auto; }
.back-cover .quote { font-family: var(--serif); font-size: 1.7rem; line-height: 1.3; color: var(--white); max-width: 150mm; font-variation-settings: "opsz" 72, "SOFT" 80; margin-bottom: 2.5rem; }
.back-cover .support-label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--plum-300); margin-bottom: 0.8rem; }
.back-cover .logos { display: flex; gap: 14mm; align-items: center; }
.back-cover .logos { align-items: center; gap: 8mm; justify-content: space-between; max-width: 166mm; }
.back-cover .logos .logo { height: 12mm; display: flex; align-items: center; }
.back-cover .logos .logo svg { height: 100%; width: auto; }
.back-cover .logos .logo img { height: 20mm; width: auto; }
.back-cover .logos .logo img[src*="anplupus-horizontal"] { height: 8.5mm; }
.back-cover .collab { margin-bottom: 2rem; }
.back-cover .collab-list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 10mm; font-size: 0.86rem; line-height: 1.45; color: var(--lilac-100); max-width: 166mm; }
.back-cover .collab-list li::before { content: none; }
.back-cover .collab-list li { break-inside: avoid; margin-bottom: 0.3rem; }
.back-cover .collab-list strong { color: var(--white); font-weight: 600; }
.back-cover .collab:has(.collab-list:empty) { display: none; }
.refs h1 { font-size: 2.3rem; }
.refs-list { padding-left: 1.6rem; max-width: var(--measure); font-size: 0.9rem; line-height: 1.5; }
.refs-list li { margin-bottom: 0.7rem; padding-left: 0.3rem; }
.refs-list li::marker { font-family: var(--sans); font-weight: 700; color: var(--plum-500); }
.back-cover .logos .placeholder { border: 1px dashed var(--plum-300); border-radius: 6px; padding: 0 6mm; font-size: 0.75rem; color: var(--plum-300); height: 16mm; display: flex; align-items: center; }

/* =====================================================================
   IMPRESSÃO — A4, Paged.js
   ===================================================================== */
@page {
  size: A4;
  margin: 20mm 18mm 22mm 22mm;


  @bottom-left {
    content: string(chapter-title);
    font-family: "Inter", sans-serif;
    font-size: 7.5pt;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7a4e93;
    vertical-align: top;
    padding-top: 6mm;
  }
  @bottom-right {
    content: counter(page);
    font-family: "Fraunces", serif;
    font-size: 10pt;
    color: #4b2a5e;
    vertical-align: top;
    padding-top: 5.5mm;
  }
}
/* livreto: a mancha de 140 mm fica com 30 mm de lombada e 40 mm de borda externa nas duas páginas do par;
   fólio na borda externa e título corrido na interna, alinhados às bordas do texto */
@page :left {
  margin-left: 40mm;
  margin-right: 30mm;
  @bottom-left {
    content: counter(page);
    font-family: "Fraunces", serif;
    font-size: 10pt;
    letter-spacing: 0;
    text-transform: none;
    color: #4b2a5e;
    vertical-align: top;
    padding-top: 5.5mm;
  }
  @bottom-right {
    content: string(chapter-title);
    font-family: "Inter", sans-serif;
    font-size: 7.5pt;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7a4e93;
    text-align: right;
    vertical-align: top;
    padding-top: 6mm;
  }
}
@page :right {
  margin-left: 30mm;
  margin-right: 40mm;
}
@page cover {
  margin: 0;
  @top-left { content: none; }
  @top-right { content: none; }
  @bottom-left { content: none; }
  @bottom-right { content: none; }
}
@page :blank {
  @top-left { content: none; }
  @top-right { content: none; }
  @bottom-left { content: none; }
  @bottom-right { content: none; }
}
@page front {
  @top-left { content: none; }
  @top-right { content: none; }
  @bottom-left { content: none; }
  @bottom-right { content: counter(page, lower-roman); }
}
@page front:left {
  margin-left: 18mm;
  margin-right: 22mm;
  @bottom-left { content: counter(page, lower-roman); }
  @bottom-right { content: none; }
}
/* pré-textuais (folha de rosto, ficha, sumário, prefácio) usam a largura toda: 22 mm de lombada, 18 mm fora */
@page front:right {
  margin-left: 22mm;
  margin-right: 18mm;
}
/* "Por que a borboleta?" (3ª capa) é uma página de composição, em duas colunas: também usa a largura toda */
@page especial:right { margin-left: 22mm; margin-right: 18mm; }
@page especial:left { margin-left: 18mm; margin-right: 22mm; }
@page cover:left { margin: 0; }
@page cover:right { margin: 0; }


.chapter h1, .bonus h1 { string-set: chapter-title content(text); }
.front-matter, .toc { page: front; }
#borboleta { page: especial; }
.cover, .back-cover { page: cover; }
.cover { margin: 0; }
.back-cover { margin: 0; }

/* =====================================================================
   WEB — leitura em tela
   ===================================================================== */
@media screen {
  html { scroll-padding-top: 68px; } /* âncoras do sumário não somem atrás da barra fixa */
  body.web nav.webnav a { position: relative; }
  body.web nav.webnav a:not(.dl)::after { content: ""; position: absolute; inset: -12px -8px; }
  body.web { background: var(--cream); }
  body.web .page-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px 80px;
  }
  body.web .back-cover {
    margin: 0 0 40px;
    height: auto;
    width: auto;
    min-height: 760px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  /* capa na tela: a mesma composição da impressa, em proporção A4, inteira na primeira dobra.
     As medidas vêm da impressa convertidas para a largura da capa (1rem impresso = 1.764cqi). */
  body.web .cover {
    container-type: inline-size;
    width: min(100%, 660px, calc((100svh - 120px) * 210 / 297));
    height: auto;
    aspect-ratio: 210 / 297;
    margin: 36px auto 64px;
    border-radius: 6px 14px 14px 6px;
    box-shadow: 0 1px 2px rgba(43,27,51,.12), 0 24px 60px -18px rgba(43,27,51,.45);
  }
  body.web .cover::before {
    content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 2.6%;
    background: linear-gradient(to right, rgba(0,0,0,.28), rgba(255,255,255,.08) 55%, transparent);
    pointer-events: none;
  }
  body.web .cover .art { inset: 0; }
  body.web .cover .text { left: 9.52cqi; right: 9.52cqi; top: 16.19cqi; padding: 0; max-width: none; }
  body.web .cover .kicker { font-size: max(1.41cqi, 10px); margin-bottom: 2.47cqi; }
  body.web .cover h1 { font-size: 9.35cqi; }
  body.web .cover .sub { font-size: max(2.38cqi, 14px); margin-top: 2.47cqi; max-width: 76cqi; }
  body.web .cover .meta { position: static; margin: 0; padding: 0; background: none; }
  body.web .cover .author { left: 9.52cqi; right: 9.52cqi; bottom: 9.52cqi; }
  body.web .cover .author strong { font-size: 3.88cqi; }
  body.web .cover .author .cred { font-size: max(1.68cqi, 11.5px); margin-top: 1.19cqi; }
  body.web .back-cover { border-radius: 24px; min-height: 380px; margin-top: 60px; }
  body.web .back-cover .inner { position: relative; left: 0; right: 0; bottom: 0; padding: 48px 32px; }
  body.web .back-cover .mark { position: relative; top: 0; padding-top: 40px; }
  body.web .chapter-opener { min-height: 0; padding-top: 48px; }
  body.web .chapter-opener .art { position: relative; width: 220px; height: 220px; margin-bottom: 24px; }
  body.web .front-matter, body.web .toc { padding-top: 32px; }
  body.web .front-matter.title-page, body.web .imprint { min-height: 0; }
  body.web .toc a::after { display: none; }
  body.web .toc a:hover { color: var(--plum-500); }
  body.web section.chapter { padding-top: 24px; }
  body.web nav.webnav {
    position: sticky; top: 0; z-index: 10;
    background: rgba(251,247,241,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--lilac-200);
    padding: 10px 24px;
    font-size: 0.85rem;
    display: flex; gap: 18px; align-items: center; justify-content: space-between;
  }
  body.web nav.webnav a { color: var(--plum-700); font-weight: 600; }
  body.web nav.webnav .dl { background: var(--plum-700); color: white; padding: 6px 14px; border-radius: 999px; }
  body.web p, body.web ul, body.web ol { max-width: 68ch; }
  body.web .box, body.web .card, body.web .qr, body.web table, body.web .spot, body.web .flow { max-width: none; }
}
@media screen and (max-width: 640px) {
  .chapter-grid { grid-template-columns: repeat(2, 1fr); }
  .preface-grid { grid-template-columns: 1fr; }
  .preface-side { display: grid; grid-template-columns: 42mm 1fr; gap: 12px; align-items: center; }
  .preface-side .pull { grid-column: 1 / -1; }
  .tp-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  html { font-size: 16px; }
  /* no celular a capa ocupa a largura toda e fica mais alta que o A4; a arte se ancora embaixo */
  body.web .cover {
    width: auto; aspect-ratio: auto; height: max(600px, calc(100svh - 56px));
    margin: 0 -24px 40px; border-radius: 0 0 22px 22px; box-shadow: none;
  }
  body.web .cover::before { display: none; }
  body.web .cover .text { left: 24px; right: 24px; top: 44px; }
  body.web .cover .kicker { font-size: 10.5px; letter-spacing: .2em; line-height: 1.7; margin-bottom: 18px; }
  body.web .cover .kicker .sep { display: block; height: 0; overflow: hidden; }
  body.web .cover h1 { font-size: 10.2cqi; }
  body.web .cover .sub { font-size: 16px; margin-top: 16px; max-width: 300px; text-wrap: balance; }
  body.web .cover .sub br { display: none; }
  body.web .cover .author { left: 24px; right: 24px; bottom: 30px; }
  body.web .cover .author strong { font-size: 25px; }
  body.web .cover .author .cred { font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
  body.web .cover .author .cred .sep { display: block; height: 0; overflow: hidden; }
  /* o recorte mais alto da arte esconderia o sol; no celular ele é redesenhado no canto, como na impressa */
  body.web .cover .art circle[cx="197"] { display: none; }
  body.web .cover .art::after {
    content: ""; position: absolute; box-sizing: border-box;
    width: 29.5cqi; height: 29.5cqi; right: -8.6cqi; top: -7.1cqi; border-radius: 50%;
    border: .6cqi solid rgba(217,164,65,.55);
    background: radial-gradient(closest-side, rgba(217,164,65,.9) 0 38.7%, rgba(217,164,65,.18) 39.5% 67.7%, transparent 68.5%);
  }
  body.web nav.webnav .dl { margin-left: auto; }
  body.web .spot > div, body.web .card dd { min-width: 0; overflow-wrap: anywhere; }
  body.web .flow .pair { white-space: normal; flex-wrap: wrap; }
  body.web .refs h1, body.web .bonus h1 { font-size: 1.9rem; }
  body.web .org-header { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  body.web .org-header .org-logo { width: 96px; height: 96px; padding: 10px; }
  body.web .preface-side { grid-template-columns: 112px minmax(0, 1fr); }
  body.web .preface-side .portrait { width: 100%; height: auto; aspect-ratio: 42 / 54; }
  body.web .card dl { grid-template-columns: 1fr; row-gap: 2px; }
  body.web .card dt { margin-top: 10px; }
  body.web .card dt:first-child { margin-top: 0; }
  body.web .spot h2 { font-size: 1.3rem; }
  body.web .imprint .sep { display: block; height: 0; overflow: hidden; }
  body.web .back-cover .collab-list li { display: block; }
  body.web .back-cover .collab-list li::after { content: none; }
  body.web .cover .art circle[cy="108"] { display: none; }
  body.web .preface-side > * { min-width: 0; }
  body.web nav.webnav { padding: 10px 16px; gap: 12px; }
  body.web nav.webnav a { white-space: nowrap; }
  body.web nav.webnav a[href="#sumario"] { display: none; }
  body.web .imprint .logos, body.web .back-cover .logos { flex-wrap: wrap; gap: 16px 28px; justify-content: center; }
  body.web .chapter-opener h1 { font-size: 2.2rem; }
  body.web .chapter-opener .big-num { font-size: 5rem; }
  body.web h2 { font-size: 1.5rem; }
  body.web .spot { grid-template-columns: 56px 1fr; gap: 12px; }
  body.web .spot .icon { width: 56px; height: 56px; }
  body.web .qr { grid-template-columns: 1fr; }
  body.web .qr-duo { grid-template-columns: 1fr; }
  /* a única tabela (unidades da Farmácia de Alto Custo) vira lista no celular, sem rolagem escondida */
  body.web table { display: block; overflow: visible; } body.web thead { display: none; }
  body.web tbody, body.web tr, body.web td { display: block; }
  body.web tr { padding: 10px 0; border-bottom: 1px solid var(--lilac-200); } body.web td { padding: 1px 0; border: 0; }
  body.web td:first-child { font-weight: 700; }
  body.web td.tel:nth-child(3)::before { content: "Telefone: "; color: var(--plum-500); font-weight: 600; }
  body.web td.tel:nth-child(4)::before { content: "WhatsApp: "; color: var(--plum-500); font-weight: 600; }
  body.web td:first-child { white-space: normal; }
}
@media screen and (max-width: 400px) {
  body.web .refs h1, body.web .bonus h1 { font-size: 1.5rem; }
  body.web .tp-panel { padding-left: 14px; padding-right: 14px; }
  body.web .chapter-grid { gap: 10px; }
  body.web .chapter-grid a { padding: 12px 10px 10px; }
  body.web .chapter-grid .t { font-size: .84rem; overflow-wrap: break-word; }
  body.web .back-cover .inner { padding-left: 18px; padding-right: 18px; }
  body.web .back-cover .collab-list { font-size: .78rem; }
}

/* ---------- acabamento tipográfico (auditoria) ---------- */
p, li, dd, td { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
.nw { white-space: nowrap; }
ul.keep-head { margin-bottom: 0; }
ul.cont { margin-top: 0; }

/* ---------- livreto: guardas (2ª e 3ª capa) e páginas de anotações ---------- */
.guarda { page: cover; break-before: page; break-after: page; height: 297mm; width: 210mm; background: var(--plum-900); }
.back-cover { break-before: left; page-break-before: left; }
body.web .guarda { display: none; }

/* contracapa: tudo centralizado, no mesmo eixo da borboleta */
.back-cover .inner { text-align: center; }
.back-cover .quote { margin-left: auto; margin-right: auto; }
.back-cover .logos { justify-content: center; gap: 12mm; margin-left: auto; margin-right: auto; }
.back-cover .collab-list { columns: auto; display: block; text-align: center; max-width: 150mm; margin: 0 auto; line-height: 1.7; }
.back-cover .collab-list li { display: inline; white-space: normal; margin: 0; padding: 0; }
.back-cover .collab-list li:not(:last-child)::after { content: "  ·  "; color: var(--plum-300); }

/* logos de apoio da contracapa: caixa com a altura do logo mais alto, nada invade o rótulo */
.back-cover .logos .logo { height: 20mm; }
.back-cover .logos .logo svg { height: 11mm; }
/* ISBN na 4ª capa (Lei 10.753/2003): selo branco centralizado no pé, a 90% do tamanho nominal do EAN-13 */
.back-cover .inner { bottom: 52mm; }
.back-cover .isbn { position: absolute; left: 50%; bottom: 16mm; width: 35.9mm; transform: translateX(-50%); line-height: 0; }
.back-cover .isbn svg { width: 100%; height: auto; display: block; }
body.web .back-cover .isbn { display: none; }

/* ---------- auditoria pós-ISBN ---------- */
/* sumário: número da seção na linha de base do título */
.toc li.l2 > a { align-items: baseline; }
/* caixa que termina em lista: mesmo respiro no pé das outras */
.box > ul:last-child > li:last-child { margin-bottom: 0; }
/* aberturas de capítulo, referências e bônus: só o fólio no rodapé (o título já está na página) */
.pagedjs_right_page.chapter-first .pagedjs_margin-bottom-left,
.pagedjs_left_page.chapter-first .pagedjs_margin-bottom-right { visibility: hidden; }
/* aberturas na mancha de 140 mm: o título encolhe na mesma proporção (150 → 140 mm) e mantém as quebras de antes */
body.print .chapter-opener h1 { font-size: 2.95rem; max-width: none; }
/* contracapa: logos num eixo só, com o do meio sobre a linha central (a de "Apoio" e do ISBN) */
body.print .back-cover .logos { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8mm; }
body.print .back-cover .logos .logo:first-child { justify-self: end; margin-right: -3.6mm; }
body.print .back-cover .logos .logo:last-child { justify-self: start; }
body.print .back-cover .logos .logo:first-child svg { height: 10mm; }
/* colaboradores: quebra escolhida, sem o "·" pendurado no fim da linha (só no papel; na tela a largura muda) */
body.print .back-cover .collab-list li.fim::after { content: "\A"; white-space: pre; }
/* versão digital: endereços, e-mails e telefones clicáveis, discretos no papel e sublinhados na tela */
.card dd a, .qr .url a, td.tel a, a[href^="tel:"] { color: inherit; text-decoration: none; }
body.web .card dd a, body.web .qr .url a, body.web a[href^="tel:"] { text-decoration: underline; text-decoration-color: var(--lilac-200); text-underline-offset: 2px; }
/* URL dos QR Codes: no papel, quebra só depois da barra (nunca no hífen) */
body.print .url-seg { white-space: nowrap; }
.qr-link { display: block; color: inherit; line-height: 0; }
.qr-link svg { width: 100%; height: 100%; }