/* Anatomia da fraude no e-commerce: sistema visual do ebook.
   Direção: prancha técnica. Papel claro, tinta grafite, rótulos em mono como
   numa ficha de análise. As três cores têm significado fixo, as três saídas
   da análise: liberar (verde), verificar (âmbar), não liberar (vermelho).
   Nenhuma cor aparece só como enfeite. Leitura longa em serifada (Source
   Serif 4), interface em IBM Plex Sans, rótulos e números em IBM Plex Mono. */

:root {
  --paper: #F3F1EC;
  --surface: #FBFAF7;
  --sunk: #E9E6DF;
  --ink: #1C1E21;
  --ink-2: #3D4248;
  --muted: #6A6F75;
  --line: #DAD6CD;
  --line-2: #C4BFB4;
  --grid: rgba(28, 30, 33, .045);
  --ok: #2B6A4C;      --ok-bg: #E1EEE6;
  --wait: #8A5A00;    --wait-bg: #F5EAD2;
  --stop: #A8261B;    --stop-bg: #F6E1DE;
  --link: #A8261B;
  --shadow: 0 1px 2px rgba(20, 22, 25, .06), 0 8px 28px rgba(20, 22, 25, .06);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --col: 42rem;
  --wide: 62rem;
  --top: 3.5rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15171A; --surface: #1C1F23; --sunk: #23272C; --ink: #E7E5E0; --ink-2: #C9C7C1;
    --muted: #9A9EA4; --line: #2E3237; --line-2: #3D4248; --grid: rgba(231, 229, 224, .04);
    --ok: #7FC4A0; --ok-bg: #1D3128; --wait: #E2B45E; --wait-bg: #352B17;
    --stop: #F08C80; --stop-bg: #3A201D; --link: #F08C80;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #15171A; --surface: #1C1F23; --sunk: #23272C; --ink: #E7E5E0; --ink-2: #C9C7C1;
  --muted: #9A9EA4; --line: #2E3237; --line-2: #3D4248; --grid: rgba(231, 229, 224, .04);
  --ok: #7FC4A0; --ok-bg: #1D3128; --wait: #E2B45E; --wait-bg: #352B17;
  --stop: #F08C80; --stop-bg: #3A201D; --link: #F08C80;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.25);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 1rem); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.72 var(--serif); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  hyphens: manual; overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--stop-bg); }

/* Barra do topo */
.bar {
  position: sticky; top: 0; z-index: 20; height: var(--top);
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar .in {
  max-width: var(--wide); margin: 0 auto; height: 100%;
  padding: 0 max(1rem, env(safe-area-inset-right, 0px)) 0 max(1rem, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; gap: 1rem;
}
.brand { font: 600 .9rem/1.2 var(--sans); color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: .55rem; min-width: 0; }
.brand .mk { width: 1.35rem; height: 1.35rem; flex: none; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar nav { margin-left: auto; display: flex; gap: .25rem; align-items: center; }
.bar nav a, .bar button {
  font: 500 .82rem/1 var(--sans); color: var(--ink-2); text-decoration: none;
  padding: .5rem .65rem; border-radius: 6px; border: 0; background: none; cursor: pointer;
}
.bar nav a:hover, .bar button:hover { background: var(--sunk); color: var(--ink); }
.bar button svg { width: 1rem; height: 1rem; display: block; }
@media (max-width: 520px) { .bar nav a.opt { display: none; } }

/* Coluna de leitura */
.wrap { max-width: var(--wide); margin: 0 auto; padding-inline: 1.25rem; padding-block: 0 4rem; }
.page { max-width: var(--col); margin: 0 auto; }
.page > * + * { margin-top: 1.1em; }
p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--sans); color: var(--ink); text-wrap: balance; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 1.55rem; line-height: 1.25; font-weight: 600; margin-top: 2.6em !important; padding-top: 1.1em; border-top: 1px solid var(--line); }
h2 .num { display: block; font: 500 .74rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .7em; }
h3 { font-size: 1.15rem; line-height: 1.35; font-weight: 600; margin-top: 1.9em !important; }
h4 { font-size: .98rem; font-weight: 600; }
strong { font-weight: 650; }
ul, ol { padding-left: 1.3em; margin: 0; }
li + li { margin-top: .35em; }
.small { font-size: .9rem; color: var(--muted); }
.mono { font-family: var(--mono); }

/* Abertura do capítulo */
.hero { padding: 3.2rem 0 1.4rem; }
.eyebrow { font: 500 .76rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.hero h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3rem); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; }
.lead { font-size: 1.22rem; line-height: 1.55; color: var(--ink-2); margin-top: 1.1rem !important; }
.meta { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 1.4rem 0 0; }
.meta li { margin: 0; font: 500 .78rem/1 var(--mono); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .7rem; }

/* A anatomia: a linha da operação com os pontos de controle */
.anat { margin: 2rem 0 0; padding: 1.4rem 1.2rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 18px 18px; }
.anat figcaption { font: 500 .74rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; }
.anat ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); position: relative; }
.anat ol::before { content: ""; position: absolute; left: 5%; right: 5%; top: .95rem; height: 2px; background: var(--line-2); }
.anat li { margin: 0; text-align: center; position: relative; padding: 0 .15rem; }
.anat .pt { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: 0 auto .55rem; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line-2); font: 600 .74rem/1 var(--mono); color: var(--muted); position: relative; }
.anat .nm { font: 500 .78rem/1.25 var(--sans); color: var(--ink-2); display: block; }
.anat li.on .pt { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.anat li.on .nm { color: var(--ink); font-weight: 600; }
.anat .leg { font: 400 .82rem/1.5 var(--sans); color: var(--muted); margin-top: 1.1rem; }


/* Objetivos e decisões */
.goals { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem 1.35rem; }
.goals h3 { margin: 0 0 .6rem !important; font-size: .82rem; font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.goals ul { font-family: var(--sans); font-size: .98rem; line-height: 1.55; }

/* As três saídas */
.saidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1.4rem !important; }
.saida { border-radius: 10px; padding: 1rem 1.05rem; border: 1px solid; font-family: var(--sans); }
.saida b { display: block; font: 600 .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .55rem; }
.saida h4 { font-size: 1.05rem; margin-bottom: .35rem; }
.saida p { font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.saida.ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .saida.ok b { color: var(--ok); }
.saida.wait { background: var(--wait-bg); border-color: color-mix(in srgb, var(--wait) 35%, transparent); } .saida.wait b { color: var(--wait); }
.saida.stop { background: var(--stop-bg); border-color: color-mix(in srgb, var(--stop) 35%, transparent); } .saida.stop b { color: var(--stop); }
@media (max-width: 640px) { .saidas { grid-template-columns: 1fr; } }

/* Fluxo em passos */
.fluxo { list-style: none; padding: 0; counter-reset: p; margin-top: 1.4rem !important; }
.fluxo > li { counter-increment: p; position: relative; padding: 0 0 1.3rem 3.1rem; margin: 0; }
.fluxo > li::before { content: counter(p); position: absolute; left: 0; top: .05rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font: 600 .82rem/1 var(--mono); background: var(--ink); color: var(--paper); }
.fluxo > li::after { content: ""; position: absolute; left: .95rem; top: 2.25rem; bottom: .15rem; width: 2px; background: var(--line-2); }
.fluxo > li:last-child::after { display: none; }
.fluxo h4 { font-size: 1.05rem; margin-bottom: .3rem; }
.fluxo .quem { font: 500 .74rem/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: .45rem; }

/* Quadros */
.box { border-radius: 10px; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); }
.box > * + * { margin-top: .7em; }
.box .tag { font: 600 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.box.regra { border-left: 0; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.box.regra .tag { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.box.regra p { font: 500 1.05rem/1.55 var(--sans); }
.box.alerta { background: var(--stop-bg); border-color: color-mix(in srgb, var(--stop) 30%, transparent); }
.box.alerta .tag { color: var(--stop); }
.box ul { font-size: .98rem; }

/* Duas histórias lado a lado */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pair > div { border-radius: 10px; padding: 1rem 1.1rem; border: 1px solid var(--line); background: var(--surface); }
.pair h4 { font: 600 .74rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .5rem; }
.pair .a h4 { color: var(--ok); } .pair .b h4 { color: var(--stop); }
.pair p, .pair li { font-size: .95rem; line-height: 1.55; }
@media (max-width: 640px) { .pair { grid-template-columns: 1fr; } }

/* Tabelas: no celular viram cartões, nunca rolam na horizontal */
.tbl { width: 100%; border-collapse: collapse; font: 400 .9rem/1.5 var(--sans); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: .7rem .8rem; border-top: 1px solid var(--line); }
.tbl thead th { border-top: 0; background: var(--sunk); font: 600 .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.tbl td:first-child { font-weight: 600; color: var(--ink); }
.page > .tbl, .tblw { margin-top: 1.4rem !important; }
@media (max-width: 720px) {
  .tbl.stack, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display: block; width: 100%; }
  .tbl.stack thead { display: none; }
  .tbl.stack tr { border-top: 1px solid var(--line); padding: .5rem 0; }
  .tbl.stack tr:first-child { border-top: 0; }
  .tbl.stack td { border: 0; padding: .3rem .9rem; }
  .tbl.stack td[data-l]::before { content: attr(data-l); display: block; font: 600 .68rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .15rem; }
}

/* Mensagens prontas */
.msg { font: 400 .95rem/1.55 var(--sans); background: var(--surface); border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; padding: .9rem 1.05rem; position: relative; }
.msg .canal { display: block; font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .5rem; }
.nao { color: var(--stop); } .sim { color: var(--ok); }

/* Caso */
.caso { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--surface); }
.caso header { padding: .8rem 1.1rem; background: var(--sunk); display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; justify-content: space-between; }
.caso header h4 { font-size: 1rem; }
.caso header span { font: 500 .72rem/1 var(--mono); color: var(--muted); }
.caso .bd { padding: 1rem 1.1rem; font-size: 1rem; }
.caso .bd > * + * { margin-top: .8em; }
.caso dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; font: 400 .9rem/1.45 var(--sans); }
.caso dt { font: 500 .78rem/1.45 var(--mono); color: var(--muted); }
.caso dd { margin: 0; }
@media (max-width: 520px) { .caso dl { grid-template-columns: 1fr; gap: 0; } .caso dd { margin-bottom: .45rem; } }
.desfecho { display: inline-block; font: 600 .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; padding: .4rem .6rem; border-radius: 5px; }
.desfecho.ok { background: var(--ok-bg); color: var(--ok); }
.desfecho.stop { background: var(--stop-bg); color: var(--stop); }
.composto { font: 400 .8rem/1.4 var(--sans); color: var(--muted); }

/* Lista de verificação */
.check { list-style: none; padding: 0; font-family: var(--sans); font-size: .98rem; }
.check li { position: relative; padding-left: 1.8rem; }
.check li::before { content: ""; position: absolute; left: 0; top: .28rem; width: 1rem; height: 1rem; border: 1.5px solid var(--line-2); border-radius: 3px; background: var(--surface); }

/* Materiais (links) */
.mats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.2rem !important; }
.mat { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; font-family: var(--sans); }
.mat:hover { border-color: var(--ink-2); }
.mat b { font: 600 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); display: block; margin-bottom: .5rem; }
.mat strong { display: block; font-size: 1.02rem; }
.mat span { display: block; font-size: .86rem; color: var(--muted); line-height: 1.45; margin-top: .3rem; }
@media (max-width: 600px) { .mats { grid-template-columns: 1fr; } }

/* Fontes */
.fontes { font: 400 .86rem/1.55 var(--sans); color: var(--ink-2); }
.fontes li + li { margin-top: .5em; }
.revisao { font: 500 .74rem/1.4 var(--mono); color: var(--muted); }

/* Navegação entre capítulos */
.pn { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem !important; padding-top: 1.4rem; border-top: 1px solid var(--line); font-family: var(--sans); }
.pn a { text-decoration: none; color: var(--ink); font-size: .95rem; }
.pn small { display: block; font: 500 .7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }

/* Sumário lateral do capítulo */
.toc { display: none; }
@media (min-width: 1180px) {
  .with-toc { display: grid; grid-template-columns: 1fr var(--col) 1fr; }
  .with-toc .page { grid-column: 2; }
  .toc { display: block; grid-column: 3; position: sticky; top: calc(var(--top) + 2rem); align-self: start; margin-left: 2.5rem; max-width: 15rem; font-family: var(--sans); }
  .toc b { font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: block; margin-bottom: .8rem; }
  .toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
  .toc li { margin: 0; }
  .toc a { display: block; padding: .3rem 0 .3rem .9rem; margin-left: -1px; border-left: 2px solid transparent; font-size: .82rem; line-height: 1.35; color: var(--muted); text-decoration: none; }
  .toc a:hover { color: var(--ink); }
  .toc a.on { color: var(--ink); border-left-color: var(--ink); font-weight: 600; }
}

/* Página de apresentação */
.capa { padding: 4rem 0 2.5rem; max-width: var(--wide); margin: 0 auto; }
.capa .eyebrow { margin-bottom: 1.4rem; }
.capa h1 { font-size: clamp(2.4rem, 1.3rem + 4.6vw, 4.4rem); line-height: 1.02; font-weight: 600; letter-spacing: -.03em; max-width: 14ch; }
.capa .lead { max-width: 36rem; font-size: 1.28rem; }
.autor { margin-top: 1.6rem !important; font: 500 .92rem/1.4 var(--sans); color: var(--ink-2); }
.autor span { color: var(--muted); font-weight: 400; }
.sec { max-width: var(--wide); margin: 0 auto; padding-top: 2.6rem; }
.sec > h2 { margin-top: 0 !important; }
.sec > .intro { max-width: var(--col); margin-top: .9rem; color: var(--ink-2); }
.promessa { margin-top: 2rem !important; max-width: var(--col); font: 500 1.15rem/1.55 var(--sans); padding-left: 1.1rem; border-left: 3px solid var(--ink); }

.parte { margin-top: 2rem; }
.parte > h3 { font: 600 .76rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .9rem !important; }
.caps { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.caps li { margin: 0; border-bottom: 1px solid var(--line); }
.caps .cp { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .95rem .2rem; text-decoration: none; color: var(--ink); align-items: baseline; }
.caps a.cp:hover { background: var(--surface); }
.caps .n { font: 600 .9rem/1.3 var(--mono); color: var(--muted); }
.caps .t { font: 600 1.05rem/1.35 var(--sans); }
.caps .d { grid-column: 2; font: 400 .9rem/1.5 var(--sans); color: var(--muted); }
.caps .st { font: 500 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.caps a.cp .st { color: var(--ok); }
@media (max-width: 560px) { .caps .cp { grid-template-columns: 2.2rem minmax(0, 1fr); } .caps .st { grid-column: 2; grid-row: 3; } }

.sit { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.sit li { margin: 0; }
.sit .s { display: block; height: 100%; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; font-family: var(--sans); }
.sit a.s:hover { border-color: var(--ink-2); }
.sit q { display: block; font: 500 .98rem/1.45 var(--sans); quotes: "“" "”"; }
.sit span { display: block; font: 500 .72rem/1.3 var(--mono); color: var(--muted); margin-top: .5rem; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 640px) { .sit { grid-template-columns: 1fr; } }

.foot { max-width: var(--wide); margin: 4rem auto 0; padding: 1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font: 400 .82rem/1.5 var(--sans); color: var(--muted); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.foot a { color: var(--muted); }

/* Materiais: folha A4 */
.folha { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 2rem 2.2rem; box-shadow: var(--shadow); font-family: var(--sans); font-size: .95rem; line-height: 1.5; max-width: 52rem; margin: 2rem auto 0; }
.folha > * + * { margin-top: 1rem; }
.folha .topo { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; border-bottom: 2px solid var(--ink); padding-bottom: .8rem; }
.folha .topo h1 { font-size: 1.55rem; line-height: 1.15; }
.folha .topo p { font: 500 .72rem/1.4 var(--mono); color: var(--muted); text-align: right; flex: none; }
.folha .quem { font-size: .9rem; color: var(--ink-2); }
.folha h2 { font-size: .78rem; font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); margin-top: 1.3rem !important; padding: 0 0 .35rem; border-top: 0; border-bottom: 1px solid var(--line-2); }
.campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem .9rem; }
.campos div { border-bottom: 1px solid var(--line-2); padding: 1.3rem 0 .2rem; font: 500 .7rem/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.campos .w2 { grid-column: span 2; } .campos .w4 { grid-column: 1 / -1; }
.ck { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.ck li { margin: 0; padding-left: 1.6rem; position: relative; }
.ck li::before { content: ""; position: absolute; left: 0; top: .2rem; width: .95rem; height: .95rem; border: 1.5px solid var(--ink-2); border-radius: 2px; }
.ck.cols { grid-template-columns: 1fr 1fr; gap: .3rem 1.2rem; }
.linhas div { border-bottom: 1px solid var(--line-2); height: 1.7rem; }
.decide { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.decide div { border: 1.5px solid; border-radius: 6px; padding: .6rem .7rem; font-size: .85rem; }
.decide b { display: block; font: 600 .72rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
.decide .ok { border-color: var(--ok); } .decide .ok b { color: var(--ok); }
.decide .wait { border-color: var(--wait); } .decide .wait b { color: var(--wait); }
.decide .stop { border-color: var(--stop); } .decide .stop b { color: var(--stop); }
.folha .regra { background: var(--ink); color: var(--paper); padding: .7rem .9rem; border-radius: 5px; font-weight: 500; }
.folha .pe { font: 400 .74rem/1.4 var(--mono); color: var(--muted); border-top: 1px solid var(--line); padding-top: .6rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.acoes { max-width: 52rem; margin: 2rem auto 0; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; font-family: var(--sans); }
.btn { font: 600 .88rem/1 var(--sans); padding: .75rem 1rem; border-radius: 7px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; text-decoration: none; }
.btn.sec2 { background: transparent; color: var(--ink); border-color: var(--line-2); }
@media (max-width: 640px) {
  .folha { padding: 1.3rem 1.1rem; }
  .campos { grid-template-columns: 1fr 1fr; }
  .ck.cols, .decide { grid-template-columns: 1fr; }
  .folha .topo { flex-direction: column; } .folha .topo p { text-align: left; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  :root { --paper: #fff; --surface: #fff; }
  body { background: #fff; font-size: 10.5pt; }
  .bar, .acoes, .foot, .noprint { display: none !important; }
  .wrap { padding: 0; }
  .folha { box-shadow: none; border: 0; padding: 0; margin: 0; max-width: none; font-size: 9.6pt; }
  .folha h2 { break-after: avoid; }
  .ck li, .campos div { break-inside: avoid; }
}

/* Capítulo com sumário lateral: a página ganha largura para a coluna do sumário não espremer */
.wrap:has(.with-toc) { max-width: 82rem; }
@media (min-width: 1180px) { .with-toc { grid-template-columns: minmax(0, 1fr) var(--col) minmax(14rem, 1fr); } }
/* Anatomia: rótulos nunca quebram no meio da palavra; em espaço estreito vira 5 x 2 e, no celular, lista */
.anat { container-type: inline-size; }
.anat .nm { overflow-wrap: normal; word-break: keep-all; }
@container (max-width: 720px) {
  .anat ol { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 1.1rem; }
  .anat ol::before { display: none; }
}
@container (max-width: 480px) {
  .anat ol { grid-template-columns: 1fr; row-gap: .5rem; }
  .anat ol::before { display: block; left: .95rem; right: auto; top: .5rem; bottom: .5rem; width: 2px; height: auto; }
  .anat li { display: flex; align-items: center; gap: .75rem; text-align: left; padding: 0; }
  .anat .pt { margin: 0; flex: none; }
}
.meta li { line-height: 1.35; }

/* Impressão compacta: cada material cabe numa folha A4 */
@media print {
  @page { size: A4; margin: 10mm 11mm; }
  .folha { font-size: 8.6pt; line-height: 1.35; }
  .folha > * + * { margin-top: .45rem; }
  .folha .topo { padding-bottom: .4rem; }
  .folha .topo h1 { font-size: 15pt; }
  .folha h2 { margin-top: .65rem !important; padding-bottom: .2rem; font-size: 7.4pt; }
  .folha .regra { padding: .4rem .6rem; }
  .campos { gap: .2rem .7rem; }
  .campos div { padding-top: .95rem; font-size: 6.6pt; }
  .ck { gap: .12rem; }
  .ck li::before { width: .8rem; height: .8rem; top: .1rem; }
  .ck li { padding-left: 1.25rem; }
  .decide div { padding: .35rem .5rem; font-size: 7.8pt; }
  .msg { padding: .45rem .65rem; font-size: 8.4pt; border-radius: 6px; }
  .msg .canal { margin-bottom: .2rem; }
  .folha .tbl { font-size: 7.8pt; }
  .folha .tbl th, .folha .tbl td { padding: .3rem .5rem; }
  .folha .pe { padding-top: .3rem; }
}

/* Ilustrações: prancha técnica sobre o papel do livro */
.ilu { margin: 1.4rem 0 0; }
.ilu img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: #F3F1EC; }
.capa .ilu { max-width: var(--wide); margin-top: 2rem; }
:root[data-theme="dark"] .ilu img { filter: brightness(.88); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ilu img { filter: brightness(.88); } }

/* ---- Ajuste visual (12/11): livro, não painel ---- */
/* Ilustração impressa no papel: sem moldura, o creme do desenho se funde ao fundo */
.ilu img { border: 0; border-radius: 0; background: transparent; mix-blend-mode: multiply; }
.ilu { margin-inline: -1rem; }
:root[data-theme="dark"] .ilu img { filter: invert(.9) hue-rotate(180deg); mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ilu img { filter: invert(.9) hue-rotate(180deg); mix-blend-mode: screen; } }

/* Capa: texto e prancha lado a lado */
.capa { display: grid; gap: 1.5rem 3rem; padding-top: 3.2rem; }
.capa .ilu { margin: 0; max-width: none; }
.capa-acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.capa .autor { font: 500 .78rem/1.4 var(--mono); color: var(--muted); letter-spacing: .04em; margin-top: 1.4rem !important; }
@media (min-width: 1000px) {
  .capa { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; min-height: calc(88vh - var(--top)); }
  .capa h1 { font-size: clamp(2.6rem, 1rem + 3.4vw, 4rem); }
  .capa .promessa, .capa .anat { grid-column: 1 / -1; }
}

/* Abertura do capítulo: número grande, título, prancha; o resto respira */
.capnum { font: 600 clamp(4.5rem, 3rem + 6vw, 7.5rem)/.9 var(--sans); letter-spacing: -.05em; color: var(--line-2); margin: 0 0 .6rem; }
.hero .eyebrow { margin-bottom: .5rem; }
.hero .meta li { background: transparent; border-color: var(--line); }
.page > .anat { background: transparent; background-image: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 1rem 0; }
.page > .anat figcaption { margin-bottom: .8rem; }
.goals { background: transparent; border: 0; border-left: 3px solid var(--ink); border-radius: 0; padding: .2rem 0 .2rem 1.1rem; }
.goals h3 { font: 600 .95rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.ilu img { max-height: 30rem; width: auto; max-width: 100%; margin-inline: auto; }
.capa .ilu img { max-height: 32rem; }
.page .ilu img { max-height: 21rem; }
.meta { gap: 0; }
.meta li { border: 0; background: transparent; padding: 0; font: 500 .8rem/1.6 var(--mono); color: var(--muted); }
.meta li + li::before { content: "·"; margin: 0 .6rem; color: var(--line-2); }
:root[data-theme="dark"] .ilu img { filter: invert(1) hue-rotate(180deg) brightness(.85); mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ilu img { filter: invert(1) hue-rotate(180deg) brightness(.85); mix-blend-mode: screen; } }
.page .acoes { margin: 2.5rem 0 0; max-width: none; }
@media print { .toc, .pn, .ilu { display: none !important; } .with-toc { display: block; } .page { max-width: none; } h2 { break-after: avoid; } .tbl tr, .msg, .box { break-inside: avoid; } }

/* Texto copiável: de onde vem cada regra (direito do consumidor, escolha da loja, contrato) */
.tag-lei, .tag-loja, .tag-contrato { display: inline-block; font: 600 .66rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: .28rem .45rem; border-radius: 4px; margin-right: .45rem; vertical-align: .1em; }
.tag-lei { background: var(--ok-bg); color: var(--ok); }
.tag-loja { background: var(--sunk); color: var(--ink-2); }
.tag-contrato { background: var(--wait-bg); color: var(--wait); }

/* ---- SEO e AEO (12/11): trilha, "Em resumo" e perguntas da capa ---- */
/* Trilha até a Biblioteca do site: discreta, em mono, acima da abertura */
.trilha { font: 500 .74rem/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); padding-top: 1.4rem; }
.trilha a { color: var(--muted); text-decoration: none; }
.trilha a:hover { color: var(--ink); text-decoration: underline; }
.trilha i { font-style: normal; margin: 0 .35rem; color: var(--line-2); }
.trilha [aria-current] { color: var(--ink-2); }
.page > .trilha + .hero { padding-top: 1.6rem; }
.wrap > .trilha + .capa { padding-top: 1.6rem; }

/* Em resumo: a resposta curta do capítulo, logo depois da abertura */
.resumo { border-left: 3px solid var(--line-2); padding: .15rem 0 .15rem 1.1rem; font: 400 1rem/1.6 var(--sans); color: var(--ink-2); }
.resumo .tag { font: 600 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .55rem; }

/* Capa: o que este ebook responde */
.pergs { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; border-top: 1px solid var(--line); }
.pergs li { margin: 0; border-bottom: 1px solid var(--line); }
.pergs a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem .1rem; text-decoration: none; color: var(--ink); font: 500 .98rem/1.45 var(--sans); }
.pergs a:hover .q { text-decoration: underline; text-underline-offset: .18em; }
.pergs .c { flex: none; font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
@media (max-width: 640px) { .pergs { grid-template-columns: 1fr; } }
@media print { .trilha, .resumo { display: none !important; } }