/* ==========================================================================
   PONTE COM O CSS DE ORIGEM
   O conteúdo clonado traz `style=` inline referenciando variáveis da folha
   do loomty.com que não existem aqui. Variável indefinida invalida a
   declaração inteira, e a propriedade cai para o valor herdado — no caso de
   `color`, isso significava herdar o #fafafa do body (o site é escuro por
   padrão) e sumir no fundo branco do documento. Cada uma é apontada para o
   token equivalente do projeto, então o inline resolve com a nossa paleta.
   ========================================================================== */
.legal-body, .docs-body {
  --font-mono: var(--mono);
  --font-title: var(--display);
  --black: var(--ink);
  --white: var(--paper);
  --gray-600: var(--text-grey);
  --rule: #eaeaea;
  --e: var(--blue-deep);   /* usado para colorir link */
  --s: var(--green);       /* idem */

  /* a tinta padrão do documento. Sem isto, todo elemento clonado que não
     declare cor própria herda o #fafafa do body e fica branco no branco —
     era o caso dos <h4> das seções e das células das tabelas simples. */
  color: var(--ink);
}

/* ==========================================================================
   DOCUMENTOS LEGAIS — Privacidade · Termos · LGPD
   Reprodução do layout de loomty.com/privacidade, /termos e /lgpd.

   Todos os valores aqui foram lidos do CSS computado das páginas no ar, não
   estimados de screenshot. Onde o original usa uma cor literal que já existe
   como token do projeto, o token entra no lugar — a medida é a mesma, a
   procedência é a nossa.

   Anatomia: herói escuro (eyebrow com fio + título + lede + faixa de meta)
   seguido de um grid de duas colunas — sumário fixo à esquerda, documento à
   direita. Sem scrollspy: o sumário é âncora pura, como no original.
   ========================================================================== */

/* ---------- herói ---------- */
.legal-hero {
  position: relative;
  background: var(--ink);
  padding: 160px var(--gutter) 100px;
  display: flex;
  justify-content: center;
}
.legal-hero-wrap { width: 1180px; max-width: 100%; }

.legal-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
/* fio de 36px que abre a linha — some no mobile junto com o respiro */
.legal-eyebrow .line { width: 36px; height: 1px; background: rgba(255, 255, 255, .3); flex: none; }
.legal-eyebrow .mono {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}

.legal-title {
  max-width: 920px;
  margin-bottom: 28px;
  font-family: var(--display);
  font-size: 54.4px;
  line-height: 50.048px;
  letter-spacing: -.816px;
  color: var(--paper-fa);
}
.legal-title .em { color: var(--orange); }

.legal-sub {
  max-width: 680px;
  margin-bottom: 36px;
  font-size: 16px;
  line-height: 26.4px;
  color: rgba(255, 255, 255, .6);
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.legal-meta-i .mono {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}
.legal-meta-i .val { font-size: 14px; line-height: 20.3px; color: var(--paper-fa); }

/* ---------- corpo: sumário fixo + documento ---------- */
.legal-body {
  background: var(--paper);
  padding: 88px var(--gutter) 120px;
  display: flex;
  justify-content: center;
}
.legal-body-wrap {
  width: 1180px;
  max-width: 100%;
  display: grid;
  grid-template-columns: 260px minmax(0, 840px);
  gap: 80px;
  align-items: start;
}

/* os 96px repetem a régua de âncora do resto do site: 73 da topbar + respiro */
.toc { position: sticky; top: 96px; }
.toc-head {
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid #eaeaea;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: var(--text-grey-a3);
}
.toc-list a {
  display: block;
  padding: 8px 0 8px 12px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 21px;
  color: var(--text-grey);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}
.toc-list a:hover { color: var(--ink); border-left-color: var(--orange); }
.toc-count {
  margin-right: 8px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 1.32px;
  color: var(--text-grey-a3);
}

/* ---------- documento ---------- */
.legal-content { max-width: 780px; }
.legal-content section {
  padding-bottom: 48px;
  border-bottom: 1px solid #eaeaea;
  /* mesma régua de parada das âncoras do site */
  scroll-margin-top: 96px;
}
.legal-content section + section { padding-top: 48px; }
.legal-content section:last-child { border-bottom: 0; }

.sec-num {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: var(--orange);
}
/* tamanho padronizado com .chap-h de spec-tecnica.html — o mesmo papel
   (título de cada bloco de conteúdo), então o mesmo tamanho, sem variar
   por breakpoint (ver §1024px abaixo: a versão antiga também reduzia em
   celular, essa não precisa mais). */
.sec-h {
  margin-bottom: 22px;
  font-family: var(--display);
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -.32px;
  color: var(--ink);
}
.sec-sub,
.legal-content p {
  max-width: 720px;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 27.2px;
  color: #292929;
}
.legal-content h4 {
  margin: 28px 0 14px;
  font-family: var(--display);
  font-size: 19.2px;
  color: var(--ink);
}
.legal-content strong { font-weight: 700; color: var(--ink); }
.legal-content a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

/* ---------- listas ----------
   o marcador é um traço de 10×1px no acento, não um ponto: o mesmo sinal
   gráfico que a marca usa nos eyebrows */
.legal-content ul { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 22px; }
.legal-content li { position: relative; padding-left: 28px; font-size: 16px; line-height: 27.2px; color: #292929; }
.legal-content li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 10px;
  height: 1px;
  background: var(--orange);
}

/* ---------- definições ---------- */
.def { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 16px 0; }
.legal-content dt {
  padding-top: 2px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 17.6px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink);
}
.legal-content dd { font-size: 14px; line-height: 23.1px; color: #292929; }

/* ---------- chips ---------- */
.chip {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 17.6px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  background: #ebf2ff;
  color: var(--blue-deep);
}
.chip.c { background: #f5eeff; color: var(--purple); }
.chip.e { background: #ebf2ff; color: var(--blue-deep); }
.chip.s { background: #eaf9f0; color: var(--green); }

/* ---------- tabelas ---------- */
.data-table {
  width: 100%;
  margin: 16px 0 28px;
  border-collapse: collapse;
  border-radius: var(--radius-8);
  overflow: hidden;
  font-size: 14px;
}
.data-table th {
  padding: 14px 18px;
  border-bottom: 1px solid #d4d4d4;
  text-align: left;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--text-grey-a3);
}
.data-table td {
  padding: 18px;
  border-bottom: 1px solid #eaeaea;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--ink);
  vertical-align: top;
}
.data-table tr:last-child td { border-bottom: 0; }

/* ---------- destaques ----------
   a cor do traço lateral é o que classifica: azul informa, laranja alerta,
   verde confirma. O fundo é sempre o mesmo, para o bloco não virar semáforo */
.callout {
  margin: 24px 0 28px;
  padding: 22px 26px;
  border-left: 3px solid var(--blue-deep);
  border-radius: var(--radius-8);
  background: var(--paper-f5);
}
.callout .mono {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.callout p:last-child { margin-bottom: 0; }
.callout.warn { border-left-color: var(--orange); }
.callout.warn .mono { color: var(--orange); }
.callout.info { border-left-color: var(--blue-deep); }
.callout.success { border-left-color: var(--green); }
.callout.success .mono { color: var(--green); }

/* ==========================================================================
   LGPD — blocos que só existem naquela página
   ========================================================================== */
.rights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 20px 0 28px; }
.right-card {
  padding: 20px 22px;
  border-radius: var(--radius-8);
  background: var(--paper-f5);
  transition: background-color .25s ease, transform .25s ease;
}
.right-card:hover { background: var(--paper-f2); transform: translateY(-3px); }
.right-card .num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.76px;
  color: var(--orange);
}
.right-card strong { display: block; margin-bottom: 6px; font-size: 15px; color: var(--ink); }
/* o título de cada direito é um <h5> no HTML, não um <strong> — a regra
   acima nunca pegava nele, e ele caía no bold serifado padrão do navegador.
   Mesma medida de .legal-content h4 (o "E-mail ao DPO" / "Pela Iara" da
   seção de canais): 19.2px em Tanker, sem peso declarado — só existe um; */
.right-card h5 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 19.2px;
  color: var(--ink);
}
.right-card p { margin: 0; font-size: 14px; line-height: 22.4px; color: #292929; }

.timeline { margin: 20px 0 28px; }
.tl-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #eaeaea;
}
.tl-row:last-child { border-bottom: 0; }
.tl-when {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--orange);
}
.tl-what { font-size: 14px; line-height: 23.1px; color: #292929; }

.channel-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 20px 0 28px; }
.channel {
  padding: 20px 22px;
  border-radius: var(--radius-8);
  background: var(--paper-f5);
}
.channel.primary { background: var(--ink); }
.channel.primary strong,
.channel.primary p { color: var(--paper-fa); }
.channel .tag {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: var(--text-grey-a3);
}
.channel.primary .tag { color: rgba(255, 255, 255, .45); }
.channel strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--ink); }
.channel p { margin: 0; font-size: 14px; line-height: 22.4px; color: #292929; }

/* ==========================================================================
   RESPONSIVO
   O sumário fixo é a primeira coisa a cair: abaixo de 1024 ele vira uma
   lista comum acima do documento, porque uma coluna de 260px comeria mais
   da metade da largura útil.
   ========================================================================== */
@media (max-width: 1024px) {
  .legal-hero { padding: 120px 24px 72px; }
  .legal-title { font-size: 42px; line-height: 40px; }
  .legal-body { padding: 56px 24px 88px; }
  .legal-body-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .toc { position: static; }
  .toc-list { display: flex; flex-wrap: wrap; gap: 0 8px; }
  .toc-list li { flex: 1 1 240px; }
  .rights-grid, .channel-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .legal-title { font-size: 34px; line-height: 33px; }
  .legal-meta { gap: 24px; }
  .def, .tl-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }

  /* As três tabelas da /privacidade tinham `display:block; overflow-x:auto`
     para rolar no telefone. Rolava, mas com dois defeitos: uma <table> em
     `display:block` sai da árvore de acessibilidade COMO TABELA (o leitor
     de tela para de anunciar linha e coluna), e, presa em 100% da caixa, a
     terceira coluna era espremida até cortar palavra no meio — "Gera…",
     "Infer…" — sem nenhuma pista de que dava para arrastar.

     O wrapper .tbl-scroll (responsive.css) já existe no HTML exatamente
     para rolar sem pagar esse preço; ele só estava inerte, porque a tabela
     cabia nele. Com o min-width a tabela volta a ser tabela, fica mais
     larga que o wrapper, e quem rola é o wrapper. 520px é o ponto em que as
     três colunas cabem sem quebrar palavra. */
  .data-table { min-width: 520px; }
}

/* ==========================================================================
   SPEC TÉCNICA — esqueleto próprio (docs-*)
   Documento operacional para parceiros B2B: capítulos e módulos, cada módulo
   marcado com a letra RIASEC do domínio a que pertence. Os seis acentos são
   os mesmos tokens do produto — nenhuma cor nova entra aqui.
   ========================================================================== */
.docs-hero {
  position: relative;
  background: var(--ink);
  padding: 160px var(--gutter) 100px;
  display: flex;
  justify-content: center;
}
.docs-hero-wrap { width: 1180px; max-width: 100%; }
.doc-crumbs {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.43px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}
.doc-title {
  max-width: 920px;
  margin-bottom: 28px;
  font-family: var(--display);
  font-size: 38.318px;
  line-height: 37.55px;
  letter-spacing: -.4598px;
  color: var(--paper-fa);
}
.doc-title .em { color: var(--orange); }
.doc-sub { max-width: 680px; margin-bottom: 36px; font-size: 16px; line-height: 26.4px; color: rgba(255, 255, 255, .6); }
.doc-meta { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); }
.doc-meta .k {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.43px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}
.doc-meta .v { display: block; font-family: var(--mono); font-weight: 700; font-size: 14px; line-height: 20.3px; letter-spacing: .28px; color: var(--paper-fa); }
/* nota do herói: faixa translúcida com o canto esquerdo reto, para ela ler
   como anotação presa à margem e não como cartão solto */
.docs-hero-note {
  max-width: 780px;
  margin-top: 32px;
  padding: 18px 22px;
  border-left: 3px solid rgba(255, 255, 255, .18);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, .06);
  font-size: 15px;
  line-height: 24.75px;
  color: rgba(255, 255, 255, .68);
}

.docs-body { background: var(--paper); padding: 0 var(--gutter) 120px; display: flex; justify-content: center; }
.docs-wrap {
  width: 1180px;
  max-width: 100%;
  padding-top: 80px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.docs-side { position: sticky; top: 96px; padding: 24px 0; }
.docs-side a {
  display: flex;
  gap: 10px;
  padding: 7px 0 7px 14px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--text-grey);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}
.docs-side a:hover { color: var(--ink); border-left-color: var(--orange); }
.docs-side .idx {
  flex: none;
  padding-top: 2px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 1.32px;
  color: var(--text-grey-a3);
}

.chap { padding: 64px 0 32px; scroll-margin-top: 96px; }
.chap-num {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.43px;
  text-transform: uppercase;
  color: var(--orange);
}
.chap-h { margin-bottom: 10px; font-family: var(--display); font-size: 32px; line-height: 32px; letter-spacing: -.32px; color: var(--ink); }
.chap-sub { max-width: 640px; font-size: 15px; line-height: 24.75px; color: var(--text-grey); }

.mod-sec { padding: 56px 0; border-bottom: 1px solid #eaeaea; scroll-margin-top: 96px; }
.mod-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 8px; }
.mod-id {
  padding: 5px 10px;
  border-radius: 4px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.43px;
  text-transform: uppercase;
  background: var(--paper-f5);
  color: var(--ink);
}
.mod-amb {
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.43px;
  text-transform: uppercase;
  color: var(--text-grey);
}
.mod-title { margin-bottom: 10px; font-family: var(--display); font-size: 20.8px; line-height: 22.46px; letter-spacing: -.1664px; color: var(--ink); }
.mod-purpose { max-width: 720px; margin-bottom: 24px; font-size: 16px; line-height: 27.2px; color: var(--ink); }
.mod-sec p { max-width: 720px; margin-bottom: 18px; font-size: 16px; line-height: 27.2px; color: #292929; }
.mod-sec .tag {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 18.15px;
  letter-spacing: 1.43px;
  text-transform: uppercase;
  color: var(--green);
}

/* a letra RIASEC do módulo decide o acento da etiqueta */
.mod-sec.c-r .mod-id { background: #fff0ee; color: var(--orange); }
.mod-sec.c-i .mod-id { background: #fff8ec; color: var(--amber); }
.mod-sec.c-a .mod-id { background: #f5fde8; color: var(--olive); }
.mod-sec.c-s .mod-id { background: #eaf9f0; color: var(--green); }
.mod-sec.c-e .mod-id { background: #ebf2ff; color: var(--blue-deep); }
.mod-sec.c-c .mod-id { background: #f5eeff; color: var(--purple); }

/* ---------- diagramas de estado ----------
   O .fsm NÃO é uma caixa de texto: é um <svg> com <g class="node"> contendo
   <rect> e <text>, arestas em <path class="edge"> e setas por <marker>. Tratar
   .node como elemento HTML (inline-block, background, padding) não pinta nada
   dentro do SVG — os rects caem no preto padrão e os textos escapam da caixa.
   Aqui as propriedades são as de SVG: fill, stroke, text-anchor. */
.fsm {
  margin-top: 8px;
  padding: 18px;
  border-radius: var(--radius-8);
  background: var(--paper-f5);
}
/* o viewBox tem largura fixa (720/160): deixar o svg fluido e a altura
   automática é o que faz o desenho reduzir junto com a coluna em vez de
   estourar ou recortar */
.fsm svg { display: block; width: 100%; height: auto; }

.fsm .node rect { fill: var(--ink); stroke: var(--ink); stroke-width: 1.5; }
.fsm .node text {
  fill: var(--paper-fa);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .88px;
  text-anchor: middle;
}
/* terminais e erro invertem: fundo claro, contorno e texto na cor do estado */
.fsm .node.end rect { fill: #eaf9f0; stroke: var(--green); }
.fsm .node.end text { fill: var(--green); }
.fsm .node.err rect { fill: #fff0ee; stroke: var(--orange); }
.fsm .node.err text { fill: var(--orange); }

.fsm .edge { fill: none; stroke: var(--text-grey); stroke-width: 1.4; }
.fsm .arrow { fill: var(--text-grey); stroke: none; }
.fsm .edge-lbl {
  fill: var(--text-grey);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .88px;
  text-transform: uppercase;
  text-anchor: middle;
}

/* ---------- tabela enxuta da spec ----------
   sem moldura nem fundo: só filete embaixo de cada linha. É outro componente
   que o .data-table dos documentos legais, e sem estilo próprio o texto
   herdava um cinza clarinho e sumia no branco */
.tbl { width: 100%; margin: 6px 0; border-collapse: collapse; font-size: 14px; }
.tbl th {
  padding: 10px 12px 10px 0;
  text-align: left;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--text-grey);
}
.tbl td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid #eaeaea;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  vertical-align: top;
}
.tbl tr:last-child td { border-bottom: 0; }
/* .y marca a coluna de confirmação */
.tbl .y { font-weight: 700; color: var(--green); }

/* ---------- invariantes ---------- */
.note {
  display: flex;
  gap: 12px;
  margin: 20px 0 12px;
  padding: 14px 18px;
  border-left: 3px solid var(--orange);
  border-radius: 0 6px 6px 0;
  background: #fff0ee;
  font-size: 14px;
  color: #292929;
}
.note .tag { flex: none; color: var(--orange); }
.note div { margin: 0; }

.final-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* medida única de botão (--btn-*, em styles.css): antes era 13/18 de padding
   e peso 800, o que dava uma caixa mais baixa e mais escura que a do resto */
.final-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--radius-8);
  font-family: var(--sans);
  font-weight: var(--btn-fw);
  font-size: var(--btn-fs);
  letter-spacing: var(--btn-ls);
  text-transform: uppercase;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper-fa);
  transition: transform .18s ease, background-color .18s ease;
}
.final-btn:hover { transform: translateY(-1px); background: #000; }
.final-btn.iara { background: var(--orange); }
.final-btn.iara:hover { background: #b32d00; }

@media (max-width: 1024px) {
  .docs-hero { padding: 120px 24px 72px; }
  .doc-title { font-size: 30px; line-height: 30px; }
  .docs-body { padding: 0 24px 88px; }
  .docs-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 48px; }
  .docs-side { position: static; }
  .docs-side ul { display: flex; flex-wrap: wrap; gap: 0 8px; }
  .docs-side li { flex: 1 1 240px; }
  .chap { padding: 40px 0 24px; }
  .mod-sec { padding: 36px 0; }
  .fsm { overflow-x: auto; }
}

/* índice lateral da spec: grupos separados por rótulo mono, links com o mesmo
   traço de acento do sumário legal */
.docs-main { padding: 32px 0 80px; }
.docs-side h4 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.43px;
  text-transform: uppercase;
  color: var(--text-grey-a3);
}
.docs-side h4 + nav { margin-bottom: 22px; }
.docs-side nav { display: flex; flex-direction: column; }
.doc-crumbs a { color: rgba(255, 255, 255, .58); text-decoration: none; }
.doc-crumbs a:hover { color: var(--paper-fa); }
.docs-hero-note .tag { color: #00bb60; }
.docs-hero-note strong { color: var(--paper-fa); }

/* pares chave/valor do vocabulário canônico */
.sg { margin-top: 12px; }
.sg-k {
  padding: 14px 0 4px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.43px;
  text-transform: uppercase;
  color: var(--text-grey);
}
.sg-v { padding-bottom: 14px; font-size: 15px; line-height: 24.75px; color: var(--ink); }

/* ---------- seção corrente no sumário ----------
   O traço lateral no acento é o mesmo sinal do hover; o que separa "estou
   aqui" de "posso ir aqui" é o peso e a tinta cheia do rótulo. Dois sinais
   diferentes na mesma família, em vez de duas cores disputando. */
.toc-list a.is-lendo,
.docs-side a.is-lendo {
  border-left-color: var(--orange);
  color: var(--ink);
  font-weight: 700;
}
.toc-list a.is-lendo .toc-count,
.docs-side a.is-lendo .idx { color: var(--orange); }

/* ---------- legibilidade dos rótulos secundários ----------
   O original usa #a3a3a3 em rótulos de 11px sobre branco: 2,52:1 de
   contraste, abaixo do piso de 3:1 para qualquer texto e menos da metade dos
   4,5:1 exigidos em corpo pequeno. Aqui eles sobem para #6b6b6b (5,7:1), que
   continua sendo o cinza secundário do sistema — a hierarquia é mantida, a
   leitura deixa de depender da luz do ambiente. É a única divergência
   deliberada em relação ao documento clonado. */
.toc-head,
.toc-count,
.data-table th,
.docs-side h4,
.docs-side .idx { color: var(--text-grey); }

/* ---------- modal de contato ----------
   Os links "Contato" destas páginas apontavam para contato.html com
   navegação de página cheia. Aqui eles abrem, num iframe, só o modal de
   e-mail que já existe em contato.html (#modalEmail) — em modo embutido
   (?embed=1) aquela página esconde nav/hero/footer e deixa o próprio modal
   (com seu scrim e diálogo) de pé, já aberto. O iframe em si fica
   transparente e cobre a tela inteira só para hospedar esse overlay; quem
   dá a moldura visual é o modal de dentro, não este host. */
.contato-modal-frame {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}