/* ==========================================================================
   CONTA-BOLSAO X CONTA NOMINAL — folha exclusiva do artigo (2026-08-18)

   REVISAO DE DESIGN, nao de texto. O markup ganhou capa, badge de categoria e
   linha de autor; todo o resto do HTML e o mesmo, so mudou a pintura.

   O QUE SAIU (2026-08-18)
     - Paleta propria (--bg #f7f7ef, --ink #0b0b0b, --dark #070707). Era um
       segundo sistema de cor dentro do site: fundo mais esverdeado que o creme
       e preto puro que nenhuma outra pagina usa. Trocado pelos tokens da
       listagem (/blog/index.html:49-56), que sao os do site.
     - Coluna de leitura de 900px com h1 de ate 124px. Em 900px de medida o
       texto passava de 105 caracteres por linha; agora sao 720px, ~78ch.
     - @font-face NeueMachina apontando para space-grotesk.woff2. Era apelido
       para o MESMO arquivo que marcha-shell.css:2 e :15 ja declaram como
       "Space Grotesk". Duas familias, uma fonte. Ficou so a do shell.
     - main { overflow:hidden }. Isso criava contexto de rolagem e MATAVA o
       position:sticky do indice lateral: a nav nunca grudava. Agora e
       overflow-x:clip, o mesmo de index.html:84, que recorta sem quebrar o
       sticky.
     - Fundo de grade (linhas verticais e horizontais em main). Ruido atras de
       uma coluna de 720px; a listagem e o creme chapado.
     - Regras de .article-cta e .btn: zero ocorrencia no HTML desde que a
       secao de CTA saiu. Nao viraram orfas ao contrario (classe sem regra), so
       peso morto, e .btn e nome generico demais para ficar solto num arquivo
       que carrega junto com o shell.

   TOKENS COM PREFIXO --cn-
     body.shell-claro (marcha-shell-claro.css:22-28) declara --preto, --rosa,
     --creme, --branco e --lima. Nome repetido aqui viraria disputa boba, entao
     todo token local nasce com --cn-. Mesma decisao da listagem, que usa --bl-.

   ROSA: DOIS TOKENS, E DE PROPOSITO
     --cn-rosa-forte #E30065 e CHAPADO (badge, avatar, chip, barra). Branco
     sobre ele da 4.71, passa AA de texto pequeno.
     --cn-rosa-link  #C90057 e TEXTO rosa sobre fundo claro. O #E30065 como
     texto sobre creme da 4.34 e reprova o 4.5 de corpo — o mesmo achado que
     esta anotado em /blog/index.html:44-47. O #C90057 da 5.34 sobre creme,
     4.71 sobre --cn-caixa e 5.80 sobre branco.
     Excecao unica: o <em> do h1. La o rosa e #E30065 mesmo, porque o h1 nunca
     desce de 34px e texto grande cobra 3.0, nao 4.5.

   COMPARACAO: UM LADO NEUTRO, UM LADO ESCURO
     O artigo compara em quatro lugares (.definition-grid, .comparison,
     .truth-grid, .flow-visual). Em todos, o lado "centralizada" e claro e o
     lado "nominal" e o painel escuro com rotulo lima. Se cada bloco escolhesse
     sua propria cor, o leitor teria que reaprender a chave em cada secao.
   ========================================================================== */

.guide,
.rel-wrap {
  --cn-creme:      #FAF5EB;
  --cn-branco:     #FFFFFF;
  --cn-preto:      #1A1816;
  --cn-texto:      #3A3630;
  --cn-suave:      #6B655C;
  --cn-linha:      #E6E0D2;
  --cn-caixa:      #ECE7DD;
  --cn-rosa-forte: #E30065;
  --cn-rosa-link:  #C90057;
  --cn-lima:       #DFFF00;
  --cn-tinta-lima: #F2F5DC;
  --cn-claro:      #D9D3C8;   /* corpo sobre painel escuro, 11.89 */
}

* { box-sizing: border-box }

html { background: #FAF5EB; scroll-behavior: auto }

body {
  margin: 0;
  background: #FAF5EB;
  color: #3A3630;
  font-family: "Space Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* clip e nao hidden: hidden faria de main o container de rolagem e o
   .toc sticky nunca grudaria. */
main { overflow-x: clip }

a { color: inherit }

h1, h2, h3, p { margin: 0 }


/* ============================ MOLDURA ==================================== */
/* 720 de leitura + 64 de intervalo + 256 de indice = 1040. O hero usa a mesma
   moldura e limita o conteudo a 720, entao titulo, resumo, capa e corpo
   nascem todos no mesmo eixo esquerdo. */
.guide {
  width: min(1040px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(96px, 10vw, 132px) 0 0;
}


/* ============================== HERO ===================================== */
.guide-hero {
  max-width: 720px;
  padding: 0 0 clamp(40px, 5vw, 60px);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
  color: var(--cn-suave);
  font-size: 13px;
}
.breadcrumbs a { text-decoration: none }
.breadcrumbs a:hover { color: var(--cn-rosa-link) }
.breadcrumbs > span[aria-hidden] { color: #A79F92 }

/* badge chapado, igual ao card da listagem (blog/index.html:105-111) */
.guide-cat {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--cn-rosa-forte);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.guide h1 {
  margin-top: 20px;
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.032em;
  color: var(--cn-preto);
  text-wrap: balance;
}
.guide h1 em {
  color: var(--cn-rosa-forte);
  font-style: normal;
}

.intro {
  margin-top: 22px;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--cn-suave);
}

/* autor · data · tempo, mesmo desenho da listagem */
.guide-autor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.guide-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cn-rosa-forte);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.guide-autor-nome {
  color: var(--cn-texto);
  font-size: 14px;
  font-weight: 600;
}
.guide-autor-meta { color: var(--cn-suave); font-size: 13.5px }
.guide-autor-meta span + span::before { content: '·'; margin: 0 7px }

/* capa: largura do frame de leitura, 16/9, raio 14 */
.guide-cover { margin: clamp(30px, 4vw, 42px) 0 0 }
/* height:auto e obrigatorio, nao e enfeite. O <img> traz height="900", que o
   navegador aplica como height:900px pelo origin de presentational hints. Com
   a altura definida, aspect-ratio e ignorado e a foto estica. Esta pagina nao
   carrega o guide.css, entao nao herda o .guide-shot img { height:auto } que
   salva as capas dos outros guias. */
.guide-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid var(--cn-linha);
  object-fit: cover;
  background: var(--cn-caixa);
}
.guide-cover figcaption {
  margin-top: 12px;
  color: var(--cn-suave);
  font-size: 13.5px;
  line-height: 1.5;
}


/* ========================= PAINEL DE RESUMO ============================== */
.summary-panel {
  max-width: 720px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  margin-bottom: clamp(48px, 6vw, 72px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--cn-preto);
  color: var(--cn-creme);
}
.summary-panel > div { padding: 28px }
.summary-panel > div + div { border-left: 1px solid rgba(250, 245, 235, .14) }
.summary-panel h2 {
  margin-top: 14px;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.025em;
}
.summary-copy { display: grid; gap: 16px; align-content: center }
.summary-copy p { font-size: 15.5px; line-height: 1.6; color: var(--cn-claro) }
.summary-copy strong { color: var(--cn-lima) }


/* ===================== INDICE LATERAL + CORPO ============================ */
/* O indice fica na coluna 2 e o corpo na 1, mas no HTML o <aside> vem antes:
   quem navega por teclado alcanca o sumario antes de entrar no texto longo. */
.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 256px);
  gap: 64px;
  align-items: start;
}

.toc {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 96px;
  display: grid;
  padding: 20px;
  border: 1px solid var(--cn-linha);
  border-radius: 14px;
  background: var(--cn-branco);
}
.toc > span {
  margin-bottom: 12px;
  color: var(--cn-suave);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.toc a {
  padding: 9px 0;
  border-top: 1px solid var(--cn-linha);
  text-decoration: none;
  font-size: 14px;
  color: var(--cn-texto);
}
.toc a:hover { color: var(--cn-rosa-link) }
.toc a:focus-visible { outline: 2px solid var(--cn-rosa-link); outline-offset: 3px }

.guide-body { grid-column: 1; grid-row: 1; min-width: 0 }

.guide-body > section {
  padding-bottom: clamp(44px, 5vw, 64px);
  margin-bottom: clamp(44px, 5vw, 64px);
  border-bottom: 1px solid var(--cn-linha);
  scroll-margin-top: 96px;
}
.guide-body > section:last-child { border-bottom: 0 }

.section-index,
.eyebrow,
.panel-kicker {
  display: inline-block;
  color: var(--cn-suave);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.panel-kicker { color: var(--cn-lima) }

.guide-body h2 {
  margin: 14px 0 20px;
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.028em;
  color: var(--cn-preto);
  text-wrap: balance;
}
.guide-body h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--cn-preto);
}
.guide-body p,
.guide-body li {
  font-size: 17px;
  line-height: 1.72;
  color: var(--cn-texto);
}
.guide-body p + p { margin-top: 16px }
.guide-body > section > h3 { margin-top: 34px }

.guide-body a {
  color: var(--cn-rosa-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.guide-body a:hover { color: var(--cn-preto) }
.guide-body a:focus-visible { outline: 2px solid var(--cn-rosa-link); outline-offset: 3px }


/* ================== 01. AS DUAS ARQUITETURAS (2 colunas) ================= */
.definition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.definition-grid article {
  padding: 24px;
  border: 1px solid var(--cn-linha);
  border-radius: 14px;
  background: var(--cn-branco);
}
.definition-grid span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--cn-suave);
}
.definition-grid h3 { margin: 12px 0 10px; font-size: 24px; letter-spacing: -.02em }
.definition-grid p { font-size: 15px; line-height: 1.6 }
/* lado nominal: escuro, a mesma chave usada em .comparison e .flow-visual */
.definition-grid article.accent {
  border-color: var(--cn-preto);
  background: var(--cn-preto);
  color: var(--cn-creme);
}
.definition-grid .accent span { color: var(--cn-lima) }
.definition-grid .accent h3 { color: var(--cn-creme) }
.definition-grid .accent p { color: var(--cn-claro) }


/* ============================== CALLOUT ================================== */
.callout {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: 12px;
  border-left: 4px solid var(--cn-rosa-forte);
  background: var(--cn-caixa);
}
.callout strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cn-rosa-link);
}
.callout p { font-size: 15.5px; line-height: 1.6 }
/* a barra do aviso e preta, nao lima: lima sobre creme da 1.1 e some. */
.callout.warning {
  border-left-color: var(--cn-preto);
  background: var(--cn-tinta-lima);
}
.callout.warning strong { color: var(--cn-preto) }


/* ====================== 02. LINHA DO TEMPO DA NORMA ====================== */
.regulation-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}
.regulation-strip article {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--cn-linha);
  border-radius: 12px;
  background: var(--cn-branco);
}
.regulation-strip strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--cn-preto);
}
.regulation-strip span { font-size: 13.5px; line-height: 1.45; color: var(--cn-suave) }


/* ===================== 02. O QUE A NORMA DIZ E NAO DIZ =================== */
.truth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 26px;
}
.truth-grid article {
  padding: 22px;
  border: 1px solid var(--cn-linha);
  border-radius: 14px;
  background: var(--cn-branco);
}
.truth-label {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--cn-lima);
  color: var(--cn-preto);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
/* .yes repete o padrao de .truth-label de proposito: sem regra propria a classe
   fica orfa na varredura e o proximo leitor nao sabe se ela faz algo. */
.truth-label.yes { background: var(--cn-lima); color: var(--cn-preto) }
.truth-label.no { background: var(--cn-rosa-forte); color: #fff }
.truth-grid ul { margin: 16px 0 0; padding-left: 18px }
.truth-grid li { font-size: 15px; line-height: 1.55 }
.truth-grid li + li { margin-top: 10px }
.truth-grid li::marker { color: var(--cn-rosa-link) }


/* ================== 03. TABELA DE DUAS VIAS (comparacao) ================= */
/* Os role="table"/"row"/"cell" no HTML sao explicitos, entao a semantica nao
   depende do display: da para reempilhar no celular sem perder a tabela. */
.comparison {
  margin-top: 28px;
  border: 1px solid var(--cn-linha);
  border-radius: 14px;
  overflow: hidden;
  background: var(--cn-branco);
}
.comparison > div { display: grid; grid-template-columns: 148px 1fr 1fr }
.comparison > div + div { border-top: 1px solid var(--cn-linha) }
.comparison > div > * { padding: 16px 18px }
.comparison > div > * + * { border-left: 1px solid var(--cn-linha) }
/* coluna 3 = o modelo individualizado, tingida de creme para ler de duas vias */
.comparison > div > *:nth-child(3) { background: var(--cn-creme) }
.comparison-head {
  background: var(--cn-preto);
  color: var(--cn-creme);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.comparison-head > * + * { border-left-color: rgba(250, 245, 235, .16) }
.comparison-head > *:nth-child(3) { background: transparent; color: var(--cn-lima) }
.comparison strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cn-preto);
}
.comparison span { font-size: 14.5px; line-height: 1.5; color: var(--cn-texto) }
.comparison-head span { color: inherit; font-size: inherit; line-height: 1.4 }


/* ==================== 03. FLUXO ANTES / INDIVIDUALIZADO ================== */
.flow-visual {
  display: grid;
  grid-template-columns: 1fr 52px 1.15fr;
  align-items: stretch;
  margin-top: 30px;
}
.flow-side {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--cn-linha);
  border-radius: 14px;
  text-align: center;
  background: var(--cn-branco);
}
.flow-side > span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-align: left;
  color: var(--cn-suave);
}
.flow-clients { display: flex; justify-content: center; gap: 10px; margin-top: 8px }
.flow-clients i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cn-preto);
  color: var(--cn-creme);
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
}
.flow-side > b {
  padding: 24px 12px;
  border-radius: 12px;
  background: var(--cn-caixa);
  color: var(--cn-preto);
  font-size: 12px;
  letter-spacing: .1em;
}
.flow-side small { font-size: 13px; line-height: 1.45; color: var(--cn-suave) }
/* idem .truth-label.yes: o lado legado ja e o padrao, mas a classe existe no
   markup e precisa de regra propria para nao contar como orfa. */
.flow-side.legacy { background: var(--cn-branco) }
.flow-side.nominal {
  border-color: var(--cn-preto);
  background: var(--cn-preto);
  color: var(--cn-creme);
}
.flow-side.nominal > span { color: var(--cn-lima) }
.flow-side.nominal .flow-clients i { background: var(--cn-rosa-forte); color: #fff }
.nominal-accounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.nominal-accounts b {
  padding: 18px 4px;
  border: 1px solid rgba(250, 245, 235, .26);
  border-radius: 10px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--cn-lima);
}
.flow-side.nominal small { color: var(--cn-claro) }
.flow-arrow {
  display: grid;
  place-items: center;
  font-size: 28px;
  color: var(--cn-rosa-link);
}


/* ======================= 04. PONTOS DE ATENCAO ========================== */
.risk-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0 0;
}
.risk-cards article {
  padding: 22px;
  border: 1px solid var(--cn-linha);
  border-radius: 14px;
  background: var(--cn-branco);
}
.risk-cards span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--cn-rosa-link);
}
.risk-cards h3 { margin: 12px 0 8px }
.risk-cards p { font-size: 15px; line-height: 1.6 }

.audience-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cn-linha);
}
.audience-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--cn-linha);
  font-size: 16px;
  line-height: 1.55;
}
.audience-list strong { color: var(--cn-preto) }


/* ============================ 05. MIGRACAO =============================== */
.migration-steps {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cn-linha);
}
.migration-steps li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--cn-linha);
}
.migration-steps li > span {
  font-size: 20px;
  font-weight: 700;
  color: var(--cn-rosa-link);
}
.migration-steps h3 { margin-bottom: 6px }
.migration-steps p { font-size: 15.5px; line-height: 1.6 }

.decision-box {
  margin-top: 30px;
  padding: 28px;
  border-radius: 14px;
  background: var(--cn-preto);
  color: var(--cn-creme);
}
.decision-box > span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--cn-lima);
}
.decision-box blockquote {
  margin: 16px 0 0;
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.02em;
}


/* ============================ 06. A MARCHA ============================== */
.guide-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.guide-benefits article {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--cn-linha);
  border-radius: 14px;
  background: var(--cn-branco);
}
.guide-benefits strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--cn-preto);
}
.guide-benefits span { font-size: 13.5px; line-height: 1.5; color: var(--cn-suave) }

.legal-note {
  margin-top: 22px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--cn-suave) !important;
}


/* ============================== 07. FAQ ================================= */
.guide-faq details {
  border-bottom: 1px solid var(--cn-linha);
  padding: 18px 0;
}
.guide-faq details:first-of-type { border-top: 1px solid var(--cn-linha) }
.guide-faq summary {
  position: relative;
  padding-right: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cn-preto);
}
.guide-faq summary::-webkit-details-marker { display: none }
.guide-faq summary:hover { color: var(--cn-rosa-link) }
.guide-faq summary:focus-visible { outline: 2px solid var(--cn-rosa-link); outline-offset: 4px }
.guide-faq summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cn-rosa-link);
  font-size: 22px;
  line-height: 1;
}
.guide-faq details[open] summary::after { content: "\00d7" }
.guide-faq details p { margin-top: 12px; font-size: 15.5px; line-height: 1.65 }


/* ============================== FONTES ================================== */
.sources ol { margin: 0; padding-left: 20px }
.sources li { font-size: 15.5px; line-height: 1.55 }
.sources li + li { margin-top: 10px }
.sources li::marker { color: var(--cn-suave) }
.sources > p { margin-top: 20px }
.sources small { font-size: 13px; line-height: 1.55; color: var(--cn-suave) }


/* ========================= OUTROS GUIAS (rodape) ======================== */
.rel-wrap {
  width: min(1040px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) 0 clamp(64px, 8vw, 96px);
  border-top: 1px solid var(--cn-linha);
}
.rel-wrap > h2 {
  margin: 12px 0 26px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -.028em;
  color: var(--cn-preto);
}
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.rel-grid a {
  display: block;
  padding: 22px;
  border: 1px solid var(--cn-linha);
  border-radius: 14px;
  background: var(--cn-branco);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.rel-grid a:hover { border-color: var(--cn-rosa-forte); transform: translateY(-2px) }
.rel-grid a:focus-visible { outline: 2px solid var(--cn-rosa-link); outline-offset: 4px }
.rel-grid span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--cn-suave);
}
.rel-grid strong {
  display: block;
  margin: 10px 0 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--cn-preto);
}
.rel-grid small { font-size: 13.5px; line-height: 1.5; color: var(--cn-suave) }


/* ============================ RESPONSIVO ================================ */
/* 1090 e nao 1000: abaixo de 1088px de viewport a moldura ja nao cabe nos 1040
   e a coluna de texto encolhe abaixo dos 720, enquanto o hero continua em 720.
   O texto do titulo passava a comecar num eixo e o corpo em outro. Aqui o
   trilho lateral sai antes de a conta apertar, e hero, indice e corpo voltam a
   dividir a mesma medida. */
@media (max-width: 1090px) {
  .guide { width: min(720px, calc(100% - 40px)); padding-top: clamp(84px, 12vw, 108px) }
  .guide-layout { grid-template-columns: 1fr }
  /* o indice deixa de ser trilho e vira caixa acima do texto. Continua
     visivel: esconder sumario no celular e regressao, nao adaptacao. */
  .toc {
    grid-column: 1;
    grid-row: auto;
    position: static;
    margin-bottom: 34px;
  }
  .guide-body { grid-column: 1; grid-row: auto }
  .rel-wrap { width: min(720px, calc(100% - 40px)) }
  .rel-grid { grid-template-columns: 1fr }
}

@media (max-width: 700px) {
  .summary-panel { grid-template-columns: 1fr }
  .summary-panel > div + div {
    border-left: 0;
    border-top: 1px solid rgba(250, 245, 235, .14);
  }
  .definition-grid,
  .truth-grid,
  .risk-cards,
  .guide-benefits,
  .regulation-strip { grid-template-columns: 1fr }
  .flow-visual { grid-template-columns: 1fr }
  .flow-arrow { height: 54px; transform: rotate(90deg) }
  .callout { grid-template-columns: 1fr; gap: 10px }
}

@media (max-width: 640px) {
  .guide { width: calc(100% - 32px) }
  .rel-wrap { width: calc(100% - 32px) }
  .guide-body p, .guide-body li { font-size: 16px }
  .intro { font-size: 17px }
  .guide-faq summary { font-size: 16px }
  .migration-steps li { grid-template-columns: 40px 1fr; gap: 12px }

  /* tabela empilhada: cada linha vira um cartao com o rotulo da coluna vindo
     do CSS, entao o HTML nao repete texto. O cabecalho nao some do DOM (isso
     tiraria os columnheader da arvore de acessibilidade), so encolhe. */
  .comparison { border-radius: 12px }
  .comparison-head {
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }
  /* seletor completo de proposito: .comparison-head > * daria 0,1,0 e perderia
     para o .comparison > div > * (0,1,1) que poe o padding la em cima. */
  .comparison > .comparison-head > * { padding: 0; border: 0 }
  .comparison > div { grid-template-columns: 1fr }
  .comparison > div > * + * { border-left: 0; border-top: 1px solid var(--cn-linha) }
  .comparison > div > *:nth-child(1) {
    background: var(--cn-caixa);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .comparison > div:not(.comparison-head) > span::before {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cn-suave);
  }
  .comparison > div:not(.comparison-head) > span:nth-child(2)::before {
    content: "Estrutura centralizada";
  }
  .comparison > div:not(.comparison-head) > span:nth-child(3)::before {
    content: "Estrutura nominal";
    color: var(--cn-rosa-link);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rel-grid a { transition: none }
  .rel-grid a:hover { transform: none }
}