/* ============================================================================
   meuprimeirocarrohibrido — site público
   ----------------------------------------------------------------------------
   CSS escrito à mão, sem framework (PLAN.md §7). A ordem do arquivo é:
   tokens → reset → tipografia → layout → componentes → conteúdo → responsivo.

   Duas regras que valem pro arquivo inteiro:

   1. **Nenhuma cor literal fora do bloco :root.** Tudo é custom property, e é
      isso que faz o tema claro caber em um bloco só lá embaixo — o dia em que
      ele existir, nada aqui precisa mudar.
   2. **O amarelo é raro.** Ele marca ação e perigo, nada mais. Um amarelo que
      aparece em tudo deixa de significar "olha aqui".
   ========================================================================== */

:root {
  /* Paleta da marca, tirada do logo do canal — PLAN.md §7. */
  --navy-900: #0A1730;
  --navy-800: #101F3D;
  --navy-700: #1B2C4F;
  --blue-500: #3E8FE0;
  --blue-400: #5BA7F0;
  --yellow-400: #F5C518;
  --text-100: #F2F5FA;
  --text-300: #A9B6CC;
  --danger: #E5484D;

  /* Papéis semânticos: os componentes usam ESTES, nunca a paleta direto. */
  --fundo: var(--navy-900);
  --fundo-elevado: var(--navy-800);
  --fundo-sutil: #0D1B36;
  --borda: var(--navy-700);
  --borda-forte: #263A63;
  --tinta: var(--text-100);
  --tinta-fraca: var(--text-300);
  --acento: var(--blue-500);
  --acento-hover: var(--blue-400);
  --acao: var(--yellow-400);
  --acao-tinta: #17233d;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sombra-2: 0 10px 30px -12px rgba(0, 0, 0, .65);
  --sombra-3: 0 24px 60px -24px rgba(0, 0, 0, .8);

  --raio-1: 8px;
  --raio-2: 14px;
  --raio-3: 22px;

  --wrap: 1180px;
  /* Medida de leitura confortável — o guia é texto longo lido no celular. */
  --medida: 68ch;

  --fonte-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
}

/* --------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* A barra lateral é sticky e as âncoras do índice pulam pro meio do texto;
   sem isso o título alvo encosta na borda de cima da janela. */
:target { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Halo azul discreto atrás do topo: dá profundidade sem custar um asset. */
  background-image:
    radial-gradient(1100px 520px at 78% -180px, rgba(62, 143, 224, .16), transparent 70%),
    radial-gradient(700px 380px at 8% -140px, rgba(62, 143, 224, .08), transparent 70%);
  background-repeat: no-repeat;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-hover); }

:focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--acao); color: var(--acao-tinta);
  padding: .7rem 1.1rem; border-radius: 0 0 var(--raio-1) 0; font-weight: 700;
}
.pular:focus { left: 0; }

/* ----------------------------------------------------------- tipografia */

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

.olho {
  font-family: var(--fonte-titulo);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 .75rem;
}

.link-forte { font-weight: 700; }

.vazio {
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-2);
  padding: 1.6rem 1.5rem;
  color: var(--tinta-fraca);
  background: rgba(255, 255, 255, .015);
  margin: 0;
}

/* --------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.secao { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.secao--faixa {
  background: linear-gradient(180deg, transparent, rgba(16, 31, 61, .75) 18%, rgba(16, 31, 61, .75) 82%, transparent);
  border-block: 1px solid var(--borda);
}

.secao__cabeca { margin-bottom: 1.9rem; }
.secao__titulo { font-size: clamp(1.5rem, 3.2vw, 2rem); }
.secao__sub { color: var(--tinta-fraca); margin: .55rem 0 0; max-width: 60ch; }
.secao__mais { margin: 1.8rem 0 0; }

/* --------------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .78rem 1.35rem;
  border-radius: 999px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .96rem;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

/* O único uso "gratuito" do amarelo, e mesmo assim é a ação principal da página. */
.btn--primario { background: var(--acao); color: var(--acao-tinta); }
.btn--primario:hover { background: #ffd53d; color: var(--acao-tinta); }

.btn--fantasma { border-color: var(--borda-forte); color: var(--tinta); background: rgba(255, 255, 255, .03); }
.btn--fantasma:hover { border-color: var(--acento); color: var(--tinta); }

.btn--yt {
  padding: .5rem 1rem;
  font-size: .88rem;
  border-color: var(--borda-forte);
  color: var(--tinta);
  background: rgba(255, 255, 255, .03);
}
.btn--yt:hover { border-color: var(--acento); color: var(--tinta); }

/* ----------------------------------------------------------------- topo */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 23, 48, .82);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--borda);
}

.topo__linha {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
  min-height: 66px;
  padding-block: .55rem;
}

/* O logotipo carrega o nome do canal; ao lado dele fica só a linha fina, e
   separada por um filete pra não parecer legenda da imagem. */
.marca { display: flex; align-items: center; gap: .75rem; color: var(--tinta); }
.marca:hover { color: var(--tinta); }
.marca__simbolo { flex: 0 0 auto; width: 46px; height: 46px; }
.marca__tag {
  font-size: .78rem;
  line-height: 1.25;
  color: var(--tinta-fraca);
  max-width: 15ch;
  padding-left: .75rem;
  border-left: 1px solid var(--borda-forte);
}

.menu { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.menu__item {
  padding: .45rem .8rem;
  border-radius: 999px;
  color: var(--tinta-fraca);
  font-weight: 600;
  font-size: .93rem;
}
.menu__item:hover { color: var(--tinta); background: rgba(255, 255, 255, .05); }
.menu__item--atual { color: var(--tinta); background: rgba(62, 143, 224, .14); }

/* ----------------------------------------------------------------- hero */

.hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2rem, 5vw, 3rem); }

.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}

.hero__titulo {
  font-size: clamp(2.1rem, 6.2vw, 3.6rem);
  max-width: 16ch;
}

.hero__lead {
  color: var(--tinta-fraca);
  font-size: clamp(1.02rem, 2.2vw, 1.15rem);
  max-width: 52ch;
  margin: 1.1rem 0 0;
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }

/* O brilho atrás do logotipo é um RADIAL no container, não uma sombra no
   <img>. Uma drop-shadow segue o recorte do PNG — e o recorte deste logotipo é
   quase um quadrado (o selo redondo mais a placa do nome embaixo), então
   qualquer sombra desenha uma mancha retangular de cantos duros atrás dele.
   Um círculo desfocado por baixo nunca tem canto pra endurecer. */
/* Crédito do autor do guia. Fica logo abaixo do lead da capa, discreto mas
   legível — é um combinado com o autor, não uma nota de rodapé escondida. */
.capa__credito {
  margin-top: 1.1rem;
  padding-left: .9rem;
  border-left: 2px solid var(--acento);
  color: var(--tinta-fraca);
  font-size: .92rem;
  max-width: 60ch;
}
.capa__credito strong { color: var(--tinta); font-weight: 600; }

.hero__marca {
  display: flex;
  justify-content: center;
  position: relative;
  isolation: isolate;
  /* Encolhe até o logotipo: o brilho abaixo se posiciona pelo container, e num
     container de largura total ele descolaria da imagem no layout empilhado. */
  width: fit-content;
  margin-inline: auto;
}
.hero__marca::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 50% auto auto 50%;
  width: min(360px, 115%);
  aspect-ratio: 1;
  transform: translate(-50%, -46%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 143, 224, .28) 0%, rgba(62, 143, 224, .10) 45%, transparent 70%);
  pointer-events: none;
}
.hero__marca img {
  width: min(300px, 100%);
  height: auto;
}

/* ------------------------------------------------------- cards de capítulo */

.cap-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.cap-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  color: var(--tinta);
  box-shadow: var(--sombra-1);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.cap-card:hover {
  color: var(--tinta);
  border-color: var(--acento);
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
}

.cap-card__num {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(62, 143, 224, .13);
  border: 1px solid rgba(62, 143, 224, .3);
  color: var(--acento);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.02rem;
}

.cap-card__corpo { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cap-card__titulo { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -.015em; }
.cap-card__sub { color: var(--tinta-fraca); font-size: .88rem; }
.cap-card__seta { margin-left: auto; color: var(--tinta-fraca); transition: transform .16s ease, color .16s ease; }
.cap-card:hover .cap-card__seta { color: var(--acento); transform: translateX(3px); }

/* --------------------------------------------------------------- vídeos */

.videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.1rem;
}

.video { display: flex; flex-direction: column; gap: .7rem; color: var(--tinta); }
.video:hover { color: var(--tinta); }

.video__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--raio-2);
  border: 1px solid var(--borda);
  background: var(--fundo-sutil);
}
.video__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.video:hover .video__thumb img { transform: scale(1.04); }

.video__play {
  position: absolute; inset: auto auto 10px 10px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10, 23, 48, .82);
  border: 1px solid var(--borda-forte);
  color: var(--tinta);
  font-size: .72rem;
  padding-left: 2px;
}

.video__titulo { font-size: .93rem; font-weight: 600; line-height: 1.35; }

/* ----------------------------------------------------------- CTA insta */

.cta-insta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: clamp(1.5rem, 4vw, 2.3rem);
  border-radius: var(--raio-3);
  border: 1px solid var(--borda);
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(62, 143, 224, .22), transparent 65%),
    var(--fundo-elevado);
}
.cta-insta__titulo { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.cta-insta p { color: var(--tinta-fraca); margin: .4rem 0 0; }

/* -------------------------------------------------------------- produtos */

.produtos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}
.produtos-grade--duas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.produto {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  overflow: hidden;
  color: var(--tinta);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.produto:hover { color: var(--tinta); border-color: var(--acento); transform: translateY(-2px); box-shadow: var(--sombra-2); }

.produto__foto {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--fundo-sutil);
  border-bottom: 1px solid var(--borda);
}
/* Foto absoluta: sem isso a imagem retrato estoura o aspect-ratio
   e cada card da fileira fica com altura diferente. */
.produto__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  padding: .8rem;
}
.produto__sem-foto { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; opacity: .35; }

.produto__loja {
  position: absolute; top: 8px; left: 8px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .22rem .5rem;
  border-radius: 999px;
  background: rgba(10, 23, 48, .85);
  border: 1px solid var(--borda-forte);
  color: var(--tinta-fraca);
}

.produto__corpo { display: flex; flex-direction: column; gap: .4rem; padding: .95rem 1rem 1.05rem; flex: 1; }
.produto__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.produto__desc {
  color: var(--tinta-fraca); font-size: .85rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.produto__pe { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .6rem; }
.produto__preco { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; }
.produto__cta { color: var(--acento); font-size: .84rem; font-weight: 700; }

/* Cards do fim do capítulo: mesma largura da grade, 20% mais baixos.
   4/3 * 0.8 → altura da foto = 60% da largura = 5/3. Título em 2 linhas
   reserva espaço, então os dois cards da fileira ficam com altura idêntica. */
.produtos-grade--duas .produto__foto { aspect-ratio: 5 / 3; }
.produtos-grade--duas .produto__corpo { padding: .76rem .8rem .84rem; }
.produtos-grade--duas .produto__titulo {
  -webkit-line-clamp: 2;
  min-height: calc(1.3em * 2);
}
.produtos-grade--duas .produto__desc { -webkit-line-clamp: 1; }

/* -------------------------------------------------------------- anúncios */

.anuncio {
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--fundo-elevado);
  padding: .9rem;
}
.anuncio--inline { margin: 2rem 0; }

.anuncio__rotulo {
  display: block;
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-bottom: .6rem;
}

.anuncio__link { display: flex; gap: .9rem; align-items: center; color: var(--tinta); }
.anuncio__link:hover { color: var(--tinta); }
.anuncio__foto {
  flex: 0 0 auto;
  width: 82px; height: 82px;
  object-fit: contain;
  background: var(--fundo-sutil);
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  padding: .35rem;
}
.anuncio__corpo { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.anuncio__titulo {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .93rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.anuncio__preco { font-weight: 700; }
.anuncio__cta { color: var(--acento); font-size: .82rem; font-weight: 700; }

.anuncio--sidebar .anuncio__link { flex-direction: column; align-items: flex-start; }
.anuncio--sidebar .anuncio__foto { width: 100%; height: 130px; }

/* -------------------------------------------------------- capa de página */

.capa { padding-block: clamp(2.5rem, 7vw, 4rem) 0; }
.capa__titulo { font-size: clamp(1.9rem, 5vw, 2.9rem); max-width: 20ch; }
.capa__lead { color: var(--tinta-fraca); max-width: var(--medida); margin: 1.1rem 0 0; }
.capa__meta { color: var(--tinta-fraca); font-size: .86rem; margin-top: 1rem; }

.sumario { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

/* ----------------------------------------------------------- o capítulo */

.rascunho {
  background: var(--acao);
  color: var(--acao-tinta);
  font-weight: 600;
  text-align: center;
  padding: .8rem 1rem;
  border-bottom: 2px solid #c79f0a;
}

/* Mais estreito que o .wrap das outras páginas: com a coluna de texto travada
   em 68ch, o 1180 deixaria uma faixa morta à direita e o conjunto pareceria
   encostado na esquerda. */
.cap-layout {
  max-width: 1040px;
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.2rem);
  align-items: start;
  padding-block: clamp(2rem, 5vw, 3.2rem);
}

.cap-lateral { position: sticky; top: 86px; display: grid; gap: 1.2rem; }

.indice {
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--fundo-elevado);
  padding: 1.1rem 1rem;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.indice__titulo {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-fraca); margin: 0 0 .8rem;
}
.indice__lista { list-style: none; margin: 0; padding: 0; counter-reset: cap; display: grid; gap: .18rem; }
.indice__lista > li { counter-increment: cap; }

.indice__cap {
  display: block;
  padding: .42rem .55rem .42rem 2rem;
  border-radius: var(--raio-1);
  color: var(--tinta-fraca);
  font-size: .89rem;
  line-height: 1.35;
  position: relative;
}
.indice__cap::before {
  content: counter(cap, decimal-leading-zero);
  position: absolute; left: .55rem;
  font-family: var(--fonte-mono);
  font-size: .74rem;
  opacity: .6;
}
.indice__cap:hover { color: var(--tinta); background: rgba(255, 255, 255, .04); }
.indice__cap--atual {
  color: var(--tinta);
  font-weight: 700;
  background: rgba(62, 143, 224, .14);
  box-shadow: inset 2px 0 0 var(--acento);
}

.indice__secoes {
  list-style: none;
  margin: .3rem 0 .55rem;
  padding: 0 0 0 1.15rem;
  border-left: 1px solid var(--borda-forte);
  display: grid;
  gap: .08rem;
}
.indice__secao a { display: block; padding: .22rem .4rem; border-radius: 6px; color: var(--tinta-fraca); font-size: .83rem; line-height: 1.35; }
.indice__secao a:hover { color: var(--tinta); background: rgba(255, 255, 255, .04); }
.indice__secao--n3 a { padding-left: 1rem; font-size: .79rem; opacity: .85; }

.cap-artigo { min-width: 0; }
.cap-cabeca { padding-bottom: 1.6rem; border-bottom: 1px solid var(--borda); margin-bottom: 2rem; }
.cap-titulo { font-size: clamp(2rem, 5vw, 2.85rem); }
.cap-sub { color: var(--tinta-fraca); margin: .8rem 0 0; max-width: var(--medida); font-size: 1.05rem; }

/* ------------------------------------------------------- prosa (blocos) */

.prosa { max-width: var(--medida); }
.prosa--sozinha { margin-inline: auto; }

.bloco-p { margin: 0 0 1.15rem; }
.bloco-p a, .prosa a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* overflow-wrap: anywhere porque o conteúdo é caminho de arquivo e número de
   firmware — strings longas sem espaço, que no celular esticariam a coluna
   inteira e dariam scroll horizontal na página. */
.prosa code {
  font-family: var(--fonte-mono);
  font-size: .88em;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--borda);
  border-radius: 5px;
  padding: .08em .35em;
  overflow-wrap: anywhere;
}
.prosa mark { background: rgba(245, 197, 24, .22); color: inherit; padding: 0 .2em; border-radius: 3px; }

.bloco-h { margin: 2.6rem 0 1rem; position: relative; }
.bloco-h--2 { font-size: clamp(1.4rem, 3.4vw, 1.75rem); }
.bloco-h--3 { font-size: clamp(1.14rem, 2.6vw, 1.3rem); color: var(--tinta); }

/* O "#" só aparece no hover: dá pra copiar o link da seção sem poluir a leitura. */
.bloco-h__link {
  position: absolute;
  left: -1.35rem;
  color: var(--acento);
  opacity: 0;
  transition: opacity .15s ease;
  text-decoration: none;
}
.bloco-h:hover .bloco-h__link { opacity: .7; }

.bloco-lista { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.bloco-lista li { margin-bottom: .45rem; }
.bloco-lista li::marker { color: var(--acento); }

.bloco-code {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--fundo-sutil);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-1);
  overflow-x: auto;
  font-family: var(--fonte-mono);
  font-size: .87rem;
  line-height: 1.6;
}
.bloco-code code { background: none; border: 0; padding: 0; }

/* Prints da multimídia em moldura arredondada: são telas escuras, e sem a
   borda elas "vazam" no fundo da página (PLAN.md §7). */
.figura { margin: 1.8rem 0; }
.figura img {
  width: 100%;
  border-radius: var(--raio-2);
  border: 1px solid var(--borda-forte);
  background: var(--fundo-sutil);
  box-shadow: var(--sombra-2);
}
.figura figcaption { color: var(--tinta-fraca); font-size: .85rem; margin-top: .6rem; text-align: center; }
.figura--inline { max-width: 380px; margin-inline: auto; }

/* -------------------------------------------------------------- passos */

.passo {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 1rem;
  margin: 0 0 1.4rem;
  padding: 1.1rem 1.2rem;
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
}

.passo__num {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--acento);
  color: #06101f;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
}

.passo__corpo { min-width: 0; }
.passo__texto { margin: .35rem 0 0; }
.passo__figura { margin: 1rem 0 0; }
.passo__figura img { width: 100%; border-radius: var(--raio-1); border: 1px solid var(--borda-forte); }
.passo__figura figcaption { color: var(--tinta-fraca); font-size: .82rem; margin-top: .45rem; }

/* -------------------------------------------------------------- avisos */

.aviso {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .9rem;
  margin: 1.8rem 0;
  padding: 1.05rem 1.15rem;
  border-radius: var(--raio-2);
  border: 1px solid var(--cor-aviso, var(--borda));
  background: var(--fundo-aviso, var(--fundo-elevado));
}
.aviso p { margin: .2rem 0 0; }

.aviso__icone {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cor-aviso, var(--acento));
  color: #0b1526;
  font-weight: 700;
}
.aviso__rotulo {
  font-family: var(--fonte-titulo);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cor-aviso, var(--acento));
}

/* Amarelo em "aviso", vermelho em "perigo", azul em "dica" — o amarelo aqui é
   exatamente o uso que o PLAN.md reserva pra ele. */
.aviso--aviso  { --cor-aviso: var(--acao);     --fundo-aviso: rgba(245, 197, 24, .07); }
.aviso--perigo { --cor-aviso: var(--danger);   --fundo-aviso: rgba(229, 72, 77, .09); }
.aviso--dica   { --cor-aviso: var(--acento);   --fundo-aviso: rgba(62, 143, 224, .08); }
.aviso--perigo .aviso__icone { color: #fff; }

/* ------------------------------------------------------ tabela de versões */

.tabela-wrap { overflow-x: auto; margin: 1.8rem 0; }

.tabela-versoes {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  overflow: hidden;
}
.tabela-versoes th {
  text-align: left;
  font-family: var(--fonte-titulo);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  background: var(--fundo-sutil);
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--borda);
}
.tabela-versoes td { padding: .7rem .9rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela-versoes tr:last-child td { border-bottom: 0; }
.tabela-versoes tbody tr:nth-child(even) { background: rgba(255, 255, 255, .015); }

/* ------------------------------------------------ anúncios do fim + paginação */

.cap-anuncios { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--borda); }
.cap-anuncios__titulo { font-size: 1.15rem; margin-bottom: 1.1rem; }

.paginacao {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
.paginacao__item {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--fundo-elevado);
  color: var(--tinta);
  transition: border-color .16s ease;
}
.paginacao__item:hover { color: var(--tinta); border-color: var(--acento); }
.paginacao__item--prox { text-align: right; }
.paginacao__rotulo { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); font-weight: 700; }
.paginacao__titulo { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -.015em; }

.sobre-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0; }

/* --------------------------------------------------------------- rodapé */

.rodape {
  margin-top: clamp(3rem, 8vw, 5rem);
  border-top: 1px solid var(--borda);
  background: var(--fundo-elevado);
  padding-top: clamp(2.2rem, 5vw, 3rem);
}

.rodape__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  padding-bottom: 2.2rem;
}
.rodape__logo { width: 76px; height: 76px; margin-bottom: .9rem; }
.rodape__bloco p { color: var(--tinta-fraca); font-size: .9rem; margin: 0; max-width: 42ch; }
.rodape__titulo { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: .8rem; }
.rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .92rem; }

.rodape__base { border-top: 1px solid var(--borda); padding-block: 1.4rem 2rem; }
.aviso-afiliado {
  margin: 0 0 .7rem;
  font-size: .88rem;
  color: var(--tinta-fraca);
  border-left: 3px solid var(--acao);
  padding-left: .85rem;
}
.aviso-afiliado strong { color: var(--tinta); }
.rodape__copy { margin: 0; font-size: .82rem; color: var(--tinta-fraca); }

/* ----------------------------------------------------------- responsivo */

@media (max-width: 980px) {
  .hero__grade { grid-template-columns: 1fr; }
  .hero__marca { order: -1; justify-content: flex-start; margin-inline: 0; }
  .hero__marca img { width: 150px; }

  /* A barra lateral vira um bloco no topo do capítulo: no celular ela não pode
     roubar a largura do texto, que é o conteúdo real da página. */
  .cap-layout { grid-template-columns: 1fr; }
  .cap-lateral { position: static; }
  .indice { max-height: none; }
  .indice__lista { grid-template-columns: 1fr; }
  .anuncio--sidebar .anuncio__link { flex-direction: row; align-items: center; }
  .anuncio--sidebar .anuncio__foto { width: 82px; height: 82px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  .topo__linha { flex-wrap: wrap; gap: .6rem; }
  .marca__tag { display: none; }
  .menu { width: 100%; overflow-x: auto; padding-bottom: .3rem; flex-wrap: nowrap; }

  .paginacao { grid-template-columns: 1fr; }
  .paginacao__item--prox { text-align: left; }

  .bloco-h__link { display: none; }

  .passo { grid-template-columns: 34px minmax(0, 1fr); gap: .8rem; padding: 1rem; }
  .passo__num { width: 34px; height: 34px; font-size: .92rem; }

  /* Tabela vira pilha de cartões; o data-label do renderer vira o rótulo. */
  .tabela-versoes thead { display: none; }
  .tabela-versoes, .tabela-versoes tbody, .tabela-versoes tr, .tabela-versoes td { display: block; width: 100%; }
  .tabela-versoes tr { border-bottom: 1px solid var(--borda); padding: .5rem 0; }
  .tabela-versoes td { border: 0; padding: .3rem .9rem; }
  .tabela-versoes td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--tinta-fraca);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
}

/* ------------------------------------------------------------ impressão */

@media print {
  .topo, .rodape, .cap-lateral, .anuncio, .cap-anuncios, .paginacao, .pular { display: none !important; }
  body { background: #fff; color: #000; }
  .prosa { max-width: none; }
}

/* ========================================================================
   Tema claro — ainda não ligado em lugar nenhum, mas é UM bloco, e é essa a
   promessa do PLAN.md §7: nada acima precisa mudar pra ele existir. Basta um
   `data-tema="claro"` no <html> (ou trocar por prefers-color-scheme).
   ====================================================================== */

:root[data-tema="claro"] {
  --fundo: #F7F9FC;
  --fundo-elevado: #FFFFFF;
  --fundo-sutil: #EDF2F9;
  --borda: #DCE4F0;
  --borda-forte: #C4D0E3;
  --tinta: #0A1730;
  --tinta-fraca: #56658A;
  --acento: #1F6FC4;
  --acento-hover: #17538F;
  color-scheme: light;
}