/* Header fixo (96px): âncoras (#slug do sumário, etc.) param ABAIXO da barra,
   não atrás dela. Sem isso o alvo rola para y=0 e o topo do título fica coberto. */
html { scroll-padding-top: calc(var(--vp-header-h) + 12px); }

/* site.css — camada do site SOBRE o design system (carregado após styles.css).
   A contenção de largura e o colapso de grades no mobile agora são do próprio
   design system (.vp-site @1440px + .vp-split/.vp-article--* que colapsam em
   ≤1024px). Aqui ficam só componentes de conteúdo que o DS não define e a troca
   de logo por tema. Sem !important; ganha por ordem de carga. */

/* E2 — blocos de artigo (citação e código) fora do vocabulário base do DS. */
.vp-quote {
  margin: 1.5em 0;
  padding-left: var(--vp-space-6);
  border-left: 3px solid var(--vp-accent);
  font: var(--vp-weight-display-md) var(--vp-text-title) / var(--vp-leading-heading) var(--vp-font-display);
  color: var(--vp-fg);
}
.vp-quote__autor {
  display: block;
  margin-top: 0.6em;
  font: var(--vp-weight-body) var(--vp-text-ui) / 1.4 var(--vp-font-body);
  color: var(--vp-fg-subtle);
}
.vp-code {
  display: block;
  margin: 1.5em 0;
  padding: var(--vp-space-5);
  overflow-x: auto;
  background: var(--vp-bg-elev);
  border: var(--vp-border-hair);
  border-radius: var(--vp-radius-md);
  font: 14px / 1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--vp-fg);
}

/* E8 — títulos das páginas de erro (404/500) com a fonte da marca. */
.vp-empty__title {
  margin: 0;
  font: var(--vp-weight-display) var(--vp-text-hero-sm) / var(--vp-leading-hero) var(--vp-font-display);
  color: var(--vp-fg);
}
.vp-empty__lead {
  margin: 0;
  font: var(--vp-weight-body) var(--vp-text-lead) / var(--vp-leading-body) var(--vp-font-body);
  color: var(--vp-fg-muted);
}

/* H2 — logo troca conforme o tema (branco no escuro, escuro no claro). */
.vp-logo__light { display: none; }
:root[data-theme="light"] .vp-logo__dark { display: none; }
:root[data-theme="light"] .vp-logo__light { display: inline; }

/* Artigo sem capa: o herói vira só o conteúdo (título+byline sobre o fundo escuro),
   sem forçar a altura da capa (evita um bloco escuro vazio). */
.vp-hero--no-cover { min-height: 0; }
.vp-hero--no-cover .vp-hero__content { justify-content: flex-start; }

/* Crédito discreto "assinado por i9media" no rodapé (site assinado pela agência).
   O logo herda a cor do texto do rodapé (currentColor → adapta ao tema); o pingo
   usa o laranja da marca via token (nada de cor literal, pra passar o guard). */
.i9-credit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  font-family: inherit;
  font-size: var(--vp-text-ui);
  line-height: 1;
  opacity: .72;
  transition: opacity .15s ease;
}
.i9-credit:hover, .i9-credit:focus-visible { opacity: 1; }
.i9-credit__label { opacity: .7; }
.i9-credit__mark { height: 16px; width: auto; display: block; overflow: visible; }
.i9-credit__spark { fill: var(--vp-accent); }

/* Banner de consentimento do pozza-marketing — a caixa, o texto e os botões vêm do DS pelas classes
   da config (vp-consent, vp-consent__text, vp-consent__actions, vp-btn vp-btn--ghost vp-btn--sm em
   TODOS os botões: Recusar tão visível quanto Aceitar). Aqui só o que o DS não tem: o ponto laranja
   do título, as opções do "Configurar" e a quebra dos botões em tela estreita. Nunca `display:` no
   seletor base de algo togglado por [hidden] (venceria o hidden): só em :not([hidden]). */
.pozza-consent__titulo::after { content: "."; color: var(--vp-accent); }
.pozza-consent .vp-consent__actions { flex: 0 1 auto; flex-wrap: wrap; }
.pozza-consent__options:not([hidden]) {
  display: flex; flex-wrap: wrap; gap: var(--vp-space-3) var(--vp-space-6);
  flex-basis: 100%; padding-block: var(--vp-space-3); border-block: var(--vp-border-hair);
}
.pozza-consent__option {
  display: flex; align-items: center; gap: var(--vp-space-3); cursor: pointer;
  font: var(--vp-weight-body) var(--vp-text-body-sm) / 1.5 var(--vp-font-body); color: var(--vp-fg);
}
.pozza-consent__option input { width: 18px; height: 18px; margin: 0; accent-color: var(--vp-accent); flex: none; }
.pozza-consent__option input:disabled { cursor: not-allowed; }
.pozza-consent__option small { color: var(--vp-fg-muted); font-size: inherit; }

/* Anúncios reservados do pozza-marketing (pm-ad*). O pacote emite as classes vp-ad* do design system
   via adsense.formatos; aqui só o que o markup do pacote (invólucro + rótulo) precisa para ficar igual
   ao de antes: rótulo "Publicidade" no estilo .vp-ad-wrap .vp-caption e coluna centrada. O display do
   invólucro vem inline do pacote (block/inline-block) — !important para manter a coluna flex. */
.pm-ad-wrap { display: flex !important; flex-direction: column; gap: var(--vp-space-2); align-items: center; }
.pm-ad-wrap--sidebar { align-items: flex-start; }
.pm-ad-label { font: var(--vp-weight-body) var(--vp-text-label-sm) / 1.5 var(--vp-font-body); color: var(--vp-fg-faint); text-transform: uppercase; letter-spacing: var(--vp-tracking-label); }
.vp-bio__ad .pm-ad-label { color: var(--vp-fg-faint); }
.pm-ad { max-width: 100%; box-sizing: border-box; }
/* Célula da faixa de temas: preenche a célula da grade (altura reservada = a dos temas) e o rótulo
   fica no centro da caixa, como antes. */
.pm-ad-wrap--celula { position: relative; justify-content: stretch; align-items: stretch; background: var(--vp-bg-hatch); min-height: var(--vp-topic-min-h); }
.pm-ad-wrap--celula .pm-ad { height: auto !important; flex: 1; }
.pm-ad-wrap--celula .pm-ad-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--vp-fg-disabled); pointer-events: none; }
.pm-ad-wrap--leaderboard { width: 100%; min-width: 0; }