/* AI Creator S5 · base comum a todas as páginas.
   Ordem de carga: ds/styles.css (legado km-*) → brand/brand.css → css/base.css → CSS da página.
   Dono: fase 1. Congelado na fase 2: materia.css e paginas.css sobrescrevem, não editam aqui.
   1 tokens do AiCreatorOS DS · 2 reset e utilidades · 3 primitivas do kit (kick, sec-head, btn, ico)
   4 movimento do kit · 5 sistema de hover assinatura · 6 biblioteca SVG · 7 cabeçalho · 8 rodapé (igual à S3) · 9 responsivo */

/* 1 · tokens (AiCreatorOS DS: tokens/colors.css, layout.css, typography.css) */
:root {
  --ink: #1D1D1B; --ink-2: #2C2C29; --ink-line: #45433E;
  --paper: #F4F1E9; --page: #F7F4EE; --card: #FFFDFA; --soft: #E8E4DB; --soft-lite: #EDE9E1;
  --line: #CBC6BB; --line-2: #E3DED3; --ctl: #807B70; --muted: #5A5952; --inv-muted: #CBC6BB;
  --orange: #F05A37; --lime: #D8F35A; --mark-mid: #8D8B86; --on-orange: #FFFFFF;
  --surface-ink: var(--ink); --text-inv: var(--paper);
  --veil-ink: rgba(29,29,27,.96); --veil-ink-mid: rgba(29,29,27,.84); --veil-ink-soft: rgba(29,29,27,.06);
  /* aliases do legado apontam para os tokens do DS */
  --surface-bg: var(--page); --surface-alt: var(--paper); --surface-card: var(--card);
  --surface-sunken: var(--soft); --surface-hover: var(--soft);
  --text-primary: var(--ink); --text-secondary: var(--muted); --border-subtle: var(--line); --border-control: var(--ctl);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px; --s-20: 80px; --s-24: 96px;
  --r: 24px; --r2: 12px; --r-media: 16px; --r-menu: 10px; --r-ctl: 8px; --r-ctl-sm: 6px; --r-pill: 999px;
  --h-control-sm: 28px; --h-control: 32px; --h-control-lg: 40px; --h-badge: 22px; --h-top: 76px;
  --gap-inline: 6px; --gap-item: 8px; --gap-group: 16px; --gap-block: 24px; --gap-section: 48px;
  --fs-mono: 11px; --fs-meta: 13px; --fs-ui: 14px; --fs-body: 17px; --fs-lead: 21px; --fs-h3: 30px; --fs-h2: 40px; --fs-display: 56px;
  --ease: cubic-bezier(.2,.6,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --ease-back: cubic-bezier(.34,1.56,.64,1);
  --dur-press: .1s; --dur-fast: .15s; --dur-slow: .3s; --dur-image: .4s; --dur-enter: .48s; --dur-draw: .8s; --dur-hero: 1.4s; --stagger: 40ms;
  /* hover assinatura: um tempo só para varredura, traço e seta */
  --dur-hv: .42s;

  /* coluna: conteúdo em até 1440 centrado; fundo de seção de ponta a ponta */
  --s3-width: 1440px; --s3-gutter: 40px;
  --s3-radius-lg: 24px; --s3-radius-md: 16px; --s3-radius-sm: 10px;
  --article-width: calc(var(--s3-width) - (2 * var(--s3-gutter)));
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #F1EDE4; --paper: #252422; --page: #161614; --card: #1E1D1B; --soft: #2D2C29; --soft-lite: #2D2C29;
  --line: #46433F; --line-2: #302F2C; --ctl: #8A857B; --muted: #ABA69B; --m3: var(--ink);
  --text-inv: #F1EDE4; --surface-ink: #0E0E0D;
}

/* 2 · reset e utilidades */
html { background: var(--page); scroll-padding-top: 96px; }
body { background: var(--page); color: var(--ink); }
.page { min-height: 100dvh; overflow: clip; }
[hidden] { display: none !important; }
main:focus { outline: none; }
::selection { background: color-mix(in srgb, var(--orange) 26%, var(--card)); color: var(--ink); }
a, button, input { transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease); }
:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; box-shadow: none; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 50; min-height: 40px; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--ink); color: var(--page); }
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--s3-width); margin-inline: auto; padding-inline: var(--s3-gutter); }
.t-micro, .km-kicker { font-size: 11px; letter-spacing: .06em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* utilidades de página compartilhadas por matéria, guia e páginas simples */
.wrap--hero { padding-top: 64px; }
.wrap--section { padding-top: 56px; }
.wrap--last { padding-block: 56px 96px; }
.pagehead { max-width: 960px; display: grid; gap: 24px; }
.pagehead .t-display { font-size: clamp(48px, 6vw, 84px); }
.pagehead__lead { max-width: 680px; }
.crumbs { margin-bottom: 28px; display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 11px; }
/* área de toque de 40 px por padding com margem negativa: o visual e o fluxo não mudam */
.crumbs a { display: inline-block; padding: 13px 6px; margin: -13px -6px; color: var(--muted); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }

/* campo de código do material: guia, guias e 404 */
.codeform { display: none; width: 100%; max-width: 520px; gap: 12px; }
.js .codeform { display: grid; }
.codeform__row { display: flex; gap: 12px; }
.codeform__input { width: 100%; height: 40px; min-width: 0; padding: 0 12px; border: 1px solid var(--ctl); border-radius: var(--r-ctl); background: var(--card); color: var(--ink); font: 500 16px/1 var(--mono); }
.codeform__go { flex: none; }
@media (max-width: 560px) { .codeform__row { flex-wrap: wrap; } .codeform__go { width: 100%; } }

/* 3 · primitivas do kit (kit-v9/kit.css, copiadas sem mudar medida) */
.mono { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.muted { color: var(--muted); }
.kick { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.kick::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; align-self: center; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 24px; }
.sec-head > div:first-child { display: grid; justify-items: start; gap: 10px; min-width: 0; }
.sec-head h2 { font: 500 clamp(34px, 3vw, 46px)/1 var(--sans); letter-spacing: -.04em; color: var(--ink); }
.sec-head h2 em { font: italic 400 1.1em/1 var(--serif); letter-spacing: -.01em; color: var(--orange); }
.sec-head p { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 80ch; }
.ink-band .sec-head h2 { color: var(--paper); }
.ink-band .sec-head p, .ink-band .mono.muted { color: var(--inv-muted); }
.btn { --h: var(--h-control); display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-inline); height: var(--h); padding: 0 calc(var(--h) * .4); border-radius: var(--r-ctl); font: 500 14px/1 var(--sans); letter-spacing: -.005em; white-space: nowrap; border: 1px solid transparent; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-press), filter var(--dur-fast); }
.btn .ui-icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-lg { --h: var(--h-control-lg); font-size: 15px; }
.btn-lg .ui-icon { width: 18px; height: 18px; }
.btn-primary { background: var(--orange); color: #fff; font-weight: 600; border-color: var(--orange); }
.btn-primary:hover { color: #fff; filter: brightness(.92); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ctl); }
.btn-line:hover { background: var(--soft); }
.ink-band .btn-primary:focus-visible, .ink-band .btn-line:focus-visible { outline-color: var(--paper); }
.ink-band .btn-line { color: var(--paper); border-color: var(--ink-line); }
.ink-band .btn-line:hover { background: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--gap-item); align-items: center; }
.chip { height: var(--h-control-sm); padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-inline); border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: 500 13px/1 var(--sans); white-space: nowrap; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-press); }
.chip { position: relative; }
.chip::before { content: ""; position: absolute; inset: -6px -4px; }  /* toque de 40 px sobre o chip de 28 */
.chip:hover { border-color: var(--ctl); color: var(--ink); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); }
.ico { --h: var(--h-control); display: inline-grid; place-items: center; width: var(--h); height: var(--h); border-radius: 50%; border: 1px solid var(--ctl); color: var(--ink); background: transparent; flex: none; padding: 0; }
.ico .ui-icon { width: 16px; height: 16px; }
.ico:hover { background: var(--soft); }
.ico:active { transform: translateY(1px); }
.ico-lg { --h: var(--h-control-lg); }
.ico-lg .ui-icon { width: 18px; height: 18px; }

/* superfície de tinta de ponta a ponta (uma por seção). No escuro a faixa sobe para --soft (#2D2C29 sobre a página #161614,
   1,3:1) com fio --line em cima e embaixo: o mesmo sentido em todas as páginas, sem sombra. */
.ink-band { --m3: #F4F1E9; background: #1D1D1B; color: #F4F1E9; --paper: #F4F1E9; --ink-2: #2C2C29; --ink-line: #45433E; }
:root[data-theme="dark"] .ink-band { background: var(--soft); border-block: 1px solid var(--line); --ink-2: #3A3935; --ink-line: #5A5952; }

/* 4 · movimento do kit (data-reveal, data-split, data-draw, data-stagger, data-count).
   O estado de entrada só existe com html.js-anim (JS ligado e sem reduced-motion). */
@keyframes rv-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes rv-scale { from { opacity: 0; transform: scale(.96); } }
@keyframes rv-fade { from { opacity: 0; } }
@keyframes rv-mask { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rv-word { from { opacity: 0; transform: translateY(112%); } }
@keyframes rv-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.js-anim [data-reveal]:not(.is-in) { opacity: 0; }
.js-anim [data-reveal].is-in { animation: rv-up var(--dur-enter) var(--ease-out) calc(var(--si, 0) * var(--stagger)) backwards; }
.js-anim [data-reveal="scale"].is-in { animation-name: rv-scale; }
.js-anim [data-reveal="fade"].is-in { animation-name: rv-fade; }
.js-anim [data-reveal="mask"].is-in { animation-name: rv-mask; }
.split-w { display: inline-block; clip-path: inset(-.4em -.3em -.16em -.3em); }
.split-i { display: inline-block; }
.js-anim [data-split]:not(.is-in) .split-i { opacity: 0; }
.js-anim [data-split].is-in .split-i { animation: rv-word var(--dur-draw) var(--ease-out) calc((var(--si, 0) + var(--wi, 0) * 2) * var(--stagger)) backwards; }
.js-anim [data-draw]:not(.is-in) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-anim [data-draw].is-in { animation: rv-draw var(--dur-draw) var(--ease-in-out) calc(var(--si, 0) * var(--stagger)) backwards; }

/* 5 · hover assinatura: "luz e grão".
   Gatilho: .hv (linha, card, destaque). Dentro de toda .capa o build põe .luz e .grao (constante LUZ no build.py):
   .luz   luz quente (creme e laranja do DS) que segue o cursor e clareia a imagem embaixo dele (mix-blend-mode: screen)
   .grao  grão de filme (feTurbulence) que tremula em passos; forte sob a luz, leve no resto (máscara radial)
   O js/base.js escreve --mx/--my (px) na .capa com um pointermove delegado e rAF. Sem JS ou no foco: luz no centro.
   Acende em 200 ms, apaga em 300 ms. Ícone se redesenha e a seta (.hv-go) avança 2 px em .hv, .nav-link, .btn, .ico, .text-link.
   Só com (hover: hover); :focus-visible dá o mesmo estado com a luz fixa; reduced-motion deixa a luz parada e o grão sem tremor. */
@keyframes hv-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes hv-grao { 0% { transform: translate(0, 0); } 20% { transform: translate(-37px, 22px); } 40% { transform: translate(19px, -41px); } 60% { transform: translate(-23px, -13px); } 80% { transform: translate(43px, 31px); } }
.capa { --mx: 50%; --my: 50%; position: relative; overflow: hidden; isolation: isolate; background: var(--soft); }
.capa__img, .capa__svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.capa > .luz, .capa > .grao { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.capa > .luz { mix-blend-mode: screen; background: radial-gradient(ellipse 55% 75% at var(--mx) var(--my), rgba(255,236,208,.6) 0%, rgba(240,90,55,.26) 38%, rgba(240,90,55,0) 72%); }
.capa > .grao { z-index: 2; overflow: hidden; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at var(--mx) var(--my), #000 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.14) 100%);
          mask-image: radial-gradient(ellipse 55% 75% at var(--mx) var(--my), #000 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.14) 100%); }
.capa > .grao::before { content: ""; position: absolute; inset: -60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .78 2.4 0 0 0 -1.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 160px 160px; }
.trace { display: block; width: 100%; height: 1px; overflow: visible; }
.trace line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.trace line + line { stroke: var(--orange); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-hv) var(--ease-in-out); }
.hv :is(h2, h3, strong):not(.cp-row__t, .ar-row__t, .gu-row__t) { transition: color var(--dur-slow) var(--ease); }

@media (hover: hover) {
  .hv:hover .capa > :is(.luz, .grao) { opacity: 1; transition-duration: .2s; }
  .hv:hover .capa--row > .grao { opacity: .7; }
  .hv:hover .capa > .grao::before { animation: hv-grao .6s steps(1) infinite; }
  .hv:hover :is(h2, h3, strong):not(.cp-row__t, .ar-row__t, .gu-row__t) { color: color-mix(in srgb, var(--ink) 82%, var(--orange)); }
  :is(.hv, .nav-link, .btn, .ico, .text-link):hover .ui-icon { animation: hv-draw var(--dur-hv) var(--ease-out) both; }
  :is(.hv, .btn, .text-link):hover .hv-go .ui-icon, .btn:hover .ui-icon { transform: translateX(2px); }
}
.hv:focus-visible .capa { --mx: 50% !important; --my: 50% !important; }
.hv:focus-visible .capa > :is(.luz, .grao) { opacity: 1; transition-duration: .2s; }
.hv:focus-visible .capa--row > .grao { opacity: .7; }
.hv:focus-visible .capa > .grao::before { animation: hv-grao .6s steps(1) infinite; }
.hv:focus-visible :is(h2, h3, strong):not(.cp-row__t, .ar-row__t, .gu-row__t) { color: color-mix(in srgb, var(--ink) 82%, var(--orange)); }
:is(.hv, .nav-link, .btn, .ico, .text-link):focus-visible .ui-icon { animation: hv-draw var(--dur-hv) var(--ease-out) both; }
.hv:focus-visible .hv-go .ui-icon { transform: translateX(2px); }
/* linhas de publicação (capa, leia também, arquivo, guias) e manchete do destaque.
   A luz da miniatura fica presa dentro dela (com o cursor no texto, encosta na borda mais próxima) e a régua laranja
   se traça na linha. O desenho das letras não muda no hover. */
.capa--row > .luz { background: radial-gradient(ellipse 70% 90% at clamp(15%, var(--mx), 85%) clamp(20%, var(--my), 80%), rgba(255,236,208,.6) 0%, rgba(240,90,55,.26) 38%, rgba(240,90,55,0) 72%); }
.capa--row > .grao { -webkit-mask-image: radial-gradient(ellipse 70% 90% at clamp(15%, var(--mx), 85%) clamp(20%, var(--my), 80%), #000 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.14) 100%);
                             mask-image: radial-gradient(ellipse 70% 90% at clamp(15%, var(--mx), 85%) clamp(20%, var(--my), 80%), #000 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.14) 100%); }
@media (hover: hover) { .hv:hover > .trace line + line { stroke-dashoffset: 0; } }
.hv:focus-visible > .trace line + line { stroke-dashoffset: 0; }
/* sinal do título: seta laranja entra deslizando ao fim da última linha (opacidade e translate, 150 ms). Ocupa largura zero
   (margem negativa), então a quebra de linha do título é a mesma com ou sem ela. Cor e peso das letras ficam como estão. */
:is(.cp-row__t, .ar-row__t, .gu-row__t, .h-pauta__title a)::after { content: ""; display: inline-block; width: .6em; height: .6em; margin: 0 -.8em 0 .2em; vertical-align: -.02em; background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: translateX(-.35em); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) {
  .hv:hover :is(.cp-row__t, .ar-row__t, .gu-row__t)::after, .h-pauta__title a:hover::after, .h-pauta__in:has(.h-pauta__fig:hover) .h-pauta__title a::after { opacity: 1; transform: none; }
}
.hv:focus-visible :is(.cp-row__t, .ar-row__t, .gu-row__t)::after, .h-pauta__title a:focus-visible::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { :is(.cp-row__t, .ar-row__t, .gu-row__t, .h-pauta__title a)::after { transform: none; } }

/* link de texto: traço laranja que cresce da esquerda (transform, não sublinhado) */
.text-link { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--ink); font-size: 14px; font-weight: 500; }
.text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-hv) var(--ease-out); }
.text-link .ui-icon { width: 16px; height: 16px; }
@media (hover: hover) { .text-link:hover::after { transform: scaleX(1); } }
.text-link:focus-visible::after { transform: scaleX(1); }

/* peças de leitura comuns (referência de matéria do Kelvi, handoff/ref/materia-referencia-kelvi.webp). Fase 2 compõe com elas. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.card.is-soft { background: var(--soft); border-color: var(--soft); }
.pad { padding: 24px; }
/* ficha: rótulo à esquerda, valor à direita, divisória tracejada; data e minutos em .mono no dd */
.ficha { margin: 0; display: grid; }
.ficha > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 48px; padding-block: 12px; border-bottom: 1px dashed var(--line); }
.ficha dt { font-size: 15px; color: var(--muted); }
.ficha dd { margin: 0; text-align: right; font-size: 15px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.ficha dd.mono { font-size: 13px; text-transform: none; letter-spacing: .02em; }
/* barra de leitura: js/base.js escreve --lido (0 a 1) e o texto de [data-lido] em todo .read-bar */
.read-bar { display: grid; gap: 10px; }
.read-bar__track { height: 4px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.read-bar__track > i { display: block; height: 100%; background: var(--orange); transform: scaleX(var(--lido, 0)); transform-origin: left; }
.read-bar__legend { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* link sublinhado de fonte e sumário: fio em line que vira laranja; seta (.hv-go) redesenha e avança */
/* padding vertical em elemento inline aumenta o toque (≥ 40 px) sem mexer na altura da linha */
.lnk-u { padding-block: 12px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.lnk-u:focus-visible { text-decoration-color: var(--orange); }
@media (hover: hover) {
  .lnk-u:hover, .hv:hover .lnk-u { text-decoration-color: var(--orange); }
  .hv:hover .hv-go .ui-icon, .lnk-u:hover .ui-icon { animation: hv-draw var(--dur-hv) var(--ease-out) both; }
}
/* fio laranja curto que fecha um destaque */
.fio-o { display: block; width: 64px; height: 2px; border: 0; margin: 0; background: var(--orange); }

/* selo de confirmação dos leaks (build.py selo_html): o nível se lê pela forma do marcador, não só pela cor:
   cheio = confirmado, metade = sinal forte, vazado = especulação. Texto em tinta (AA nos dois temas). */
.selo { display: inline-flex; align-items: center; gap: var(--gap-inline); width: max-content; height: var(--h-badge); padding-inline: 8px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink); font: 500 var(--fs-mono)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.selo__m { position: relative; flex: none; width: 10px; height: 10px; border: 1.5px solid var(--orange); border-radius: 50%; overflow: hidden; }
.selo__m::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--selo-fill, 0%); background: var(--orange); }
.selo--confirmado { --selo-fill: 100%; }
.selo--sinal-forte { --selo-fill: 50%; }
.ink-band .selo { color: var(--paper); border-color: var(--ink-line); }

/* 6 · biblioteca SVG: contêiner fora do fluxo, sem display:none (padrões continuam pintando) */
.svg-lib { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.g-canto { position: absolute; width: 16px; height: 16px; color: var(--orange); pointer-events: none; }
.g-canto--tr { transform: scaleX(-1); }
.g-canto--bl { transform: scaleY(-1); }
.g-canto--br { transform: scale(-1, -1); }

/* 7 · cabeçalho */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--page); border-bottom: 1px solid var(--line); }
.site-header__inner { height: var(--h-top); max-width: var(--s3-width); margin-inline: auto; padding-inline: var(--s3-gutter); display: flex; align-items: center; gap: 20px; }
.site-header .brand { flex: none; min-height: 40px; color: var(--ink); --mark-word: var(--ink); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav-link { height: var(--h-control-lg); display: inline-flex; align-items: center; gap: 8px; padding-inline: 12px; border: 1px solid transparent; border-radius: var(--r-ctl); color: var(--muted); font: 500 14px/1 var(--sans); white-space: nowrap; }
.nav-link .ui-icon { width: 16px; height: 16px; flex: none; }
.nav-link:hover { color: var(--ink); background: var(--soft); }
.nav-link:hover .ui-icon { color: var(--orange); }
.nav-link:active { transform: translateY(1px); }
.nav-link[aria-current="page"] { color: var(--ink); background: var(--soft-lite); border-color: var(--line); }
.nav-link[aria-current="page"] .ui-icon { color: var(--orange); }
.header-tools { display: flex; align-items: center; gap: 8px; }
.menu-toggle { display: none; }
.menu-toggle__close, .menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }
.theme-switch__icon--sun { display: none; }
[data-theme="dark"] .theme-switch__icon--sun { display: block; }
[data-theme="dark"] .theme-switch__icon--moon { display: none; }
.reading-progress { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; }

/* 8 · rodapé: cópia exata da S3 (mesma estrutura, conteúdo e visual). Não mudar sem captura lado a lado. */
.site-footer { position: relative; isolation: isolate; min-height: 460px; overflow: hidden; background: #1D1D1B; color: #F4F1E9; }
.footer-landscape { position: absolute; inset: 0; z-index: -2; background: #1D1D1B; }
.footer-landscape picture { display: contents; }
.footer-landscape img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(29,29,27,.96), rgba(29,29,27,.3)); }
.site-footer__inner { max-width: var(--s3-width); margin-inline: auto; padding: 40px var(--s3-gutter) 0; display: grid; grid-template-columns: minmax(0,1fr) 140px 140px; gap: 48px; }
.site-footer__brand { max-width: 360px; display: grid; align-content: start; gap: 16px; }
.site-footer__pitch { color: #CBC6BB; font-size: 14px; line-height: 1.55; }
.site-footer__col { display: grid; align-content: start; gap: 8px; }
.site-footer__ck { margin-bottom: 8px; color: #CBC6BB; }
.site-footer__link { width: max-content; color: #F4F1E9; font-size: 14px; }
.site-footer__link:hover { text-decoration: underline; text-decoration-color: #F05A37; text-underline-offset: 4px; }
.footer-signature { max-width: var(--s3-width); margin: 48px auto 0; padding: 0 var(--s3-gutter) 28px; color: #F4F1E9; font: 600 clamp(72px, 12vw, 164px)/.84 var(--sans); letter-spacing: -.065em; }
.footer-signature em { margin-left: .05em; color: #F05A37; font: italic 700 1.08em/.8 var(--serif); letter-spacing: -.01em; }
.footer-signature > span { display: block; margin-top: 20px; color: #CBC6BB; font: 500 10px/1.4 var(--mono); letter-spacing: .06em; }
.site-footer ::selection { background: var(--lime); color: #1D1D1B; }

/* 9 · responsivo */
/* cabeçalho numa linha só: até 860 a nav perde os ícones; até 720 vira menu (botão + painel sob o cabeçalho).
   Sem JS o painel não existe: a nav desce para uma segunda linha que rola na horizontal. */
/* com a aba Leaks a nav tem 6 itens: entre 861 e 959 os ícones não cabem com o respiro de 40 px */
@media (min-width: 861px) and (max-width: 959px) {
  .site-nav .nav-link { padding-inline: 10px; }
  .site-nav .nav-link .ui-icon { display: none; }
}
@media (max-width: 860px) {
  :root { --s3-gutter: 24px; --h-top: 64px; }
  .site-header__inner { height: calc(var(--h-top) - 1px); gap: 12px; }
  .site-nav .nav-link { padding-inline: 10px; }
  .site-nav .nav-link .ui-icon { display: none; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .footer-signature { font-size: 14vw; }
}
@media (max-width: 720px) {
  .site-header .brand { margin-right: auto; }
  .js .menu-toggle { display: inline-grid; }
  .js .site-nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0; margin: 0; padding: 8px var(--s3-gutter) 16px; flex-direction: column; align-items: stretch; gap: 4px; background: var(--page); border-bottom: 1px solid var(--line); }
  .js .site-nav:not(.is-open) { display: none; }
  .js .site-nav .nav-link { height: 48px; gap: 12px; padding-inline: 12px; font-size: 16px; }
  .js .site-nav .nav-link .ui-icon { display: block; width: 18px; height: 18px; }
  html:not(.js) .site-header__inner { height: auto; padding-block: 12px 4px; flex-wrap: wrap; }
  html:not(.js) .site-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
}
@media (max-width: 560px) {
  :root { --s3-gutter: 16px; }
  .site-header__inner { gap: 8px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand__mark { width: 32px; height: 13px; }
  .site-header .brand__name { font-size: 21px; }
  .chips { row-gap: 12px; }
  .wrap--hero { padding-top: 40px; }
  .wrap--section { padding-top: 40px; }
  .wrap--last { padding-block: 40px 64px; }
  .site-footer { min-height: 500px; }
  .site-footer__inner { padding-top: 32px; }
  .footer-signature { margin-top: 48px; font-size: 15vw; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-hv: 1ms; --dur-press: 1ms; --dur-fast: 1ms; --dur-slow: 1ms; --dur-image: 1ms; }
  :is(.hv, .nav-link, .btn, .ico, .text-link) .ui-icon { animation: none !important; }
  .capa > .grao::before { animation: none !important; }
}