/* Videre · páginas das normas e referências (W19l, 04/10/2026): /normas/ e /normas/<slug>/.
   Pedido de Tiago (04/10 ~03h45): cada norma com uma página que descreve a norma; nunca link de compra.
   O HTML é gerado por scripts/normas-paginas.mjs (não editar à mão). Sem estilo inline (CSP).
   Cartão de REFERÊNCIA, não selo: sem medalha, fita, escudo, carimbo, roseta, check, cadeado nem logotipo de entidade.
   Os cartões de lista são .v-card: a camada viva (vivo-sinais.js) acende o holofote, a borda e o som deles. */

/* Tokens escuros em toda a página (as seções de texto também ficam sobre o fundo do espaço). */
.site-clean.pagina-normas main {
  --v-titulo: #FFFFFF;
  --v-texto: #E3EAF5;
  --v-suave: var(--cor-tinta-invertida-suave);
  --v-acento: var(--cor-acento-claro);
  --v-rotulo-cor: var(--cor-acento-claro);
  --v-campo: #93A7C2;
  --v-borda: #22385A;
  --v-borda-forte: #2C4A70;
  --v-pilula: #C9D6E8;
  --v-cta-cor: #FFFFFF;
  --v-cta-fundo-foco: rgba(11, 92, 232, .28);
  --v-cta-borda-foco: var(--cor-marca-clara);
  --v-foco: var(--cor-acento-claro);
  --v-realce: rgba(56, 232, 255, .55);
  --nr-ciano: #38E8FF;
  --nr-cobalto: #8FB0FF;
  --nr-vidro: linear-gradient(180deg, rgba(10, 21, 38, .92) 0%, rgba(5, 11, 22, .94) 100%);
  --nr-borda: rgba(91, 140, 255, .24);
  --nr-borda-forte: rgba(91, 140, 255, .42);
  color: var(--v-texto);
}
.site-clean.pagina-normas main :is(p, li, dd, dt) { text-align: start; text-align-last: auto; hyphens: manual; }
/* Códigos de comitê e de documento inteiros numa linha (CEE-063, CB-021, NIST AI 100-1...): o gerador os põe num span
   (revisão visual r3: "CEE- / 063" na ficha, inclusive no desktop). */
.site-clean .nr-nobr { white-space: nowrap; }

/* ---------------------------------------------------------------- Herói */
.site-clean .nr-heroi .env { padding-right: var(--margem-pagina); }
.site-clean .nr-heroi__grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
/* style.css (telas largas) põe todo .heroi--pagina > .env e toda .secao > .env com h2 direto em duas colunas
   (título à esquerda, o resto à direita). Aqui o herói tem grade própria (texto + arte) e a ficha ocupa a largura toda. */
.site-clean.pagina-normas .heroi--pagina.nr-heroi > .env.nr-heroi__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.site-clean.pagina-normas .heroi--pagina.nr-heroi > .env.nr-heroi__grade > :is(.nr-heroi__texto, .nr-heroi__visual) { grid-column: auto; grid-row: auto; }
/* Norma com "arte": null em normas.json: o herói fica só com o texto, numa coluna (revisão técnica W19m r1, B3: sem isto a
   grade 7fr/5fr deixava a segunda coluna vazia). Hoje as dez páginas têm arte; a regra só vale para esse caso. */
.site-clean.pagina-normas .heroi--pagina.nr-heroi > .env.nr-heroi__grade:not(.nr-heroi__grade--arte) { grid-template-columns: minmax(0, 1fr); }
.site-clean.pagina-normas .nr-ficha-secao > .env { display: block; }
.site-clean .nr-heroi__texto { min-width: 0; }
.site-clean .nr-heroi__texto > * { margin: 0; }
.site-clean .nr-heroi__texto > * + * { margin-top: var(--esp-4, 1rem); }
.site-clean .nr-trilha {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  color: var(--v-suave);
  font: 500 var(--t-mini, .75rem)/1.4 var(--fonte-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-clean .nr-trilha a { color: var(--nr-ciano); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.site-clean .nr-trilha a:hover { color: #FFFFFF; }
.site-clean .nr-trilha [aria-current] { color: #FFFFFF; }
/* Separador e página atual juntos (revisão visual r4: a 320 px o "/" ficava solto no fim da 1ª linha). */
.site-clean .nr-trilha__atual { display: inline-flex; gap: .5rem; align-items: center; white-space: nowrap; }
.site-clean .nr-heroi .nr-heroi__texto > .versalete { display: flex; gap: .6rem; align-items: center; margin-top: clamp(1.25rem, 3vw, 2rem); }
.site-clean .nr-heroi .nr-heroi__texto > .versalete::before { flex: none; width: 1.75rem; height: 1px; background: currentColor; content: ""; }

.site-clean .nr-heroi h1.nr-titulo {
  max-width: none;
  margin-top: var(--esp-3, .75rem);
  margin-bottom: 0;
  color: #FFFFFF;
  font-family: var(--fonte-titulo);
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  line-height: 1;
}
.site-clean .nr-titulo__prefixo {
  display: block;
  margin-bottom: .6rem;
  color: var(--nr-cobalto);
  font: 500 clamp(.8rem, .7rem + .3vw, 1rem)/1.3 var(--fonte-mono);
  letter-spacing: .14em;
}
.site-clean .nr-titulo__codigo { white-space: nowrap; }
/* Sigla sem número de norma (NIST AI RMF 1.0, LGPD, RIPD): pode quebrar entre palavras (a versão vem presa por &nbsp;) e
   a fonte acompanha a largura, para "NIST AI RMF 1.0" caber a 320 px e na coluna do herói a 1024 px (revisão visual r1). */
.site-clean .nr-titulo--texto .nr-titulo__codigo { white-space: normal; }
.site-clean .nr-heroi h1.nr-titulo--texto { font-size: min(clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem), 13vw); overflow-wrap: break-word; }
.site-clean .nr-titulo__ano { color: var(--nr-cobalto); font-weight: 500; white-space: nowrap; }
.site-clean .nr-heroi .nr-nome {
  max-width: 30ch;
  color: #FFFFFF;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.site-clean .nr-heroi .nr-lead { max-width: 52ch; color: var(--cor-tinta-invertida-suave); }

.site-clean .nr-heroi__visual { display: flex; justify-content: center; min-width: 0; }
/* A arte (com alfa) acende sobre um halo cobalto, sem moldura. */
.site-clean .nr-heroi__arte {
  display: block;
  width: min(100%, 25rem);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(11, 92, 232, .3) 0%, rgba(11, 92, 232, .08) 62%, rgba(11, 92, 232, 0) 100%);
}
.site-clean .nr-heroi__arte img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 28px rgba(56, 232, 255, .18)); }

/* As cinco referências do método usam a mesma arte de vidro (W19m, aprovada por Tiago em 04/10 ~22h); o antigo motivo em
   CSS (ladrilho com glifo) saiu. A diferença entre norma e referência fica no texto ("De acordo com" x "Referência do método"). */

/* ---------------------------------------------------------------- Ficha */
.site-clean .nr-ficha-secao { padding-block: clamp(1rem, 3vw, 2rem); }
.site-clean .nr-ficha__titulo {
  display: flex;
  gap: .6rem;
  align-items: center;
  margin: 0 0 var(--esp-4, 1rem);
  color: var(--nr-ciano);
  font: 500 var(--t-mini, .75rem)/1.4 var(--fonte-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-clean .nr-ficha__titulo::before { flex: none; width: 1.75rem; height: 1px; background: currentColor; content: ""; }
.site-clean .nr-ficha {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--nr-borda);
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(11, 92, 232, .14) 0%, rgba(11, 92, 232, 0) 60%),
    var(--nr-vidro);
  box-shadow: inset 0 1px 0 rgba(246, 248, 252, .06), 0 24px 60px rgba(0, 0, 0, .35);
}
.site-clean .nr-ficha__item { min-width: 0; padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.75rem); border-top: 1px solid var(--nr-borda); }
.site-clean .nr-ficha__item:first-child { border-top: 0; }
.site-clean .nr-ficha dt {
  margin: 0 0 .45rem;
  color: var(--v-campo);
  font: 500 var(--t-mini, .75rem)/1.3 var(--fonte-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-clean .nr-ficha dd { margin: 0; color: var(--v-texto); font-size: var(--t-menor, .9375rem); line-height: 1.6; }
.site-clean .nr-ficha dd strong { color: #FFFFFF; }
.site-clean .nr-ficha__item--largo dd { color: #FFFFFF; font-size: var(--t-base, 1rem); font-weight: 500; }
@media (min-width: 720px) {
  .site-clean .nr-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-clean .nr-ficha__item { border-left: 1px solid var(--nr-borda); }
  .site-clean .nr-ficha__item:nth-child(even) { border-left: 0; }
  .site-clean .nr-ficha__item--largo { grid-column: 1 / -1; border-left: 0; }
  .site-clean .nr-ficha__item:nth-child(2) { border-top: 1px solid var(--nr-borda); }
  .site-clean .nr-ficha__item:last-child:nth-child(even) { grid-column: 1 / -1; }
}
/* W19o (Tiago, 06/10: "as fichas das normas... sem qualidade... efeito de luz e bordas"): a ficha ganha a
   moldura dos painéis nobres do site (F11 do futuro.css, a mesma do bloco do Método): cantoneiras ciano com
   brilho, borda acesa, vidro com luz no canto, fio de luz no topo e halo. Divisórias em degradê, rótulo com
   ponto aceso e faixa do nome oficial. Só CSS, só nas páginas de norma; cores forçadas e impressão abaixo. */
.site-clean.tema-escuro .nr-ficha {
  --fx-canto: linear-gradient(#38E8FF, #38E8FF);
  --fx-canto-luz: linear-gradient(rgba(56, 232, 255, .18), rgba(56, 232, 255, .18));
  --nr-fio: linear-gradient(90deg, rgba(91, 140, 255, 0) 0%, rgba(91, 140, 255, .34) 18%, rgba(56, 232, 255, .30) 50%, rgba(91, 140, 255, .34) 82%, rgba(91, 140, 255, 0) 100%);
  border-color: rgba(91, 140, 255, .38);
  background:
    var(--fx-canto), var(--fx-canto), var(--fx-canto), var(--fx-canto),
    var(--fx-canto), var(--fx-canto), var(--fx-canto), var(--fx-canto),
    var(--fx-canto-luz), var(--fx-canto-luz), var(--fx-canto-luz), var(--fx-canto-luz),
    radial-gradient(60% 140% at 0% 0%, rgba(56, 232, 255, .11) 0%, rgba(56, 232, 255, 0) 62%),
    radial-gradient(55% 120% at 100% 100%, rgba(11, 92, 232, .16) 0%, rgba(11, 92, 232, 0) 66%),
    var(--fx-vidro, var(--nr-vidro));
  background-position:
    10px 10px, 10px 10px, calc(100% - 10px) 10px, calc(100% - 10px) 10px,
    10px calc(100% - 10px), 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
    8px 8px, 8px 8px, calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px),
    0 0, 0 0, 0 0;
  background-size:
    18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px,
    22px 6px, 6px 22px, 22px 6px, 6px 22px,
    auto, auto, auto;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(234, 253, 255, .10),
    inset 0 0 48px rgba(56, 232, 255, .045),
    0 0 0 1px rgba(56, 232, 255, .05),
    0 0 34px rgba(56, 232, 255, .10),
    0 24px 60px rgba(0, 0, 0, .42);
  transition: border-color .25s ease-out, box-shadow .25s ease-out;
}
/* Fio de luz no topo da moldura. */
.site-clean.tema-escuro .nr-ficha::before {
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, rgba(56, 232, 255, 0), rgba(56, 232, 255, .85) 30%, #EAFDFF 50%, rgba(56, 232, 255, .85) 70%, rgba(56, 232, 255, 0));
  box-shadow: 0 0 10px rgba(56, 232, 255, .55), 0 0 2px rgba(214, 251, 255, .8);
  pointer-events: none;
  content: "";
}
/* Divisórias em degradê no lugar da linha chapada; o recuo deixa as cantoneiras livres. */
.site-clean.tema-escuro .nr-ficha__item { position: relative; border-top: 0; border-left: 0; }
.site-clean.tema-escuro .nr-ficha__item:not(:first-child)::before {
  position: absolute;
  top: 0;
  right: clamp(1.1rem, 2.4vw, 1.75rem);
  left: clamp(1.1rem, 2.4vw, 1.75rem);
  height: 1px;
  background: var(--nr-fio);
  content: "";
}
/* Faixa do nome oficial: luz rasante da esquerda. */
.site-clean.tema-escuro .nr-ficha__item--largo:first-child {
  padding-block: clamp(1.25rem, 2.4vw, 1.7rem);
  background: linear-gradient(90deg, rgba(56, 232, 255, .07) 0%, rgba(56, 232, 255, .02) 45%, rgba(56, 232, 255, 0) 75%);
}
.site-clean.tema-escuro .nr-ficha__item--largo:first-child dd { font-size: var(--t-maior, 1.0625rem); letter-spacing: -.005em; }
/* Rótulo com ponto aceso, como os rótulos dos painéis. */
.site-clean.tema-escuro .nr-ficha dt { display: flex; gap: .55rem; align-items: center; color: #9FB8D8; }
.site-clean.tema-escuro .nr-ficha dt::before {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38E8FF;
  box-shadow: 0 0 6px rgba(56, 232, 255, .8);
  content: "";
}
.site-clean.tema-escuro .nr-ficha dd strong { color: #38E8FF; font-weight: 600; }
@media (min-width: 720px) {
  /* Divisória vertical em degradê entre as duas colunas. */
  .site-clean.tema-escuro .nr-ficha__item--largo:first-child ~ .nr-ficha__item:nth-child(even):not(:last-child)::after {
    position: absolute;
    top: 18%;
    right: 0;
    bottom: 18%;
    width: 1px;
    background: linear-gradient(180deg, rgba(91, 140, 255, 0), rgba(91, 140, 255, .34) 30%, rgba(56, 232, 255, .30) 50%, rgba(91, 140, 255, .34) 70%, rgba(91, 140, 255, 0));
    content: "";
  }
  .site-clean.tema-escuro .nr-ficha__item:nth-child(2) { border-top: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .site-clean.tema-escuro .nr-ficha:hover {
    border-color: rgba(56, 232, 255, .55);
    box-shadow:
      inset 0 1px 0 rgba(234, 253, 255, .14),
      inset 0 0 56px rgba(56, 232, 255, .07),
      0 0 0 1px rgba(56, 232, 255, .22),
      0 0 44px rgba(56, 232, 255, .18),
      0 24px 60px rgba(0, 0, 0, .42);
  }
}
@media (prefers-reduced-motion: reduce) { .site-clean.tema-escuro .nr-ficha { transition: none; } }

/* ---------------------------------------------------------------- Texto */
.site-clean .nr-texto { padding-top: clamp(2rem, 4vw, 3.5rem); }
.site-clean .nr-texto__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.site-clean .nr-texto__corpo { min-width: 0; }
.site-clean .nr-texto__corpo > h2 {
  max-width: 30ch;
  margin: clamp(2.25rem, 4vw, 3rem) 0 var(--esp-4, 1rem);
  color: #FFFFFF;
  font-size: clamp(1.45rem, 1.2rem + .9vw, 2rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.site-clean .nr-texto__corpo > h2:first-child { margin-top: 0; }
/* Sem palavra sozinha na última linha (revisão visual r1: 376 casos em 56 combinações): títulos equilibrados e texto
   corrido com text-wrap: pretty. Navegador sem suporte ignora as duas regras. */
.site-clean.pagina-normas main :is(p, dd) { text-wrap: pretty; }
/* Blocos curtos (duas ou três linhas): balance, que o pretty não alcança em texto tão curto. */
/* Destaques e temas: no desktop, o balance estreitava as linhas a 55-65% da caixa e deixava a direita vazia (revisão visual
   r2); ali vale o pretty. Abaixo de 720 px, com duas a quatro linhas, o pretty deixava palavra sozinha (medido): balance. */
.site-clean.pagina-normas main :is(h1, h2, .nr-nome, .nr-heroi .nr-lead) { text-wrap: balance; }
.site-clean.pagina-normas main :is(.nr-destaques__texto, .nr-temas__texto) { text-wrap: pretty; }
@media (max-width: 719px) {
  .site-clean.pagina-normas main :is(.nr-destaques__texto, .nr-temas__texto) { text-wrap: balance; }
}
.site-clean .nr-texto__corpo > p { max-width: 68ch; margin: 0; color: var(--v-texto); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.75; }
.site-clean .nr-texto__corpo > p + p { margin-top: var(--esp-4, 1rem); }

/* "Por que importa": três destaques num painel de vidro escuro, com fio ciano no topo e numeração em cobalto-ciano.
   Sem imagem, sem ícone de selo; o painel é leitura, não link. */
.site-clean .nr-destaques {
  position: relative;
  max-width: 68ch;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); /* mesmo "ch" dos parágrafos: o painel alinha com a medida do texto */
  padding: clamp(1.25rem, 2.6vw, 1.85rem) clamp(1.15rem, 2.6vw, 1.85rem);
  overflow: hidden;
  border: 1px solid var(--nr-borda-forte);
  border-radius: 18px;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(11, 92, 232, .24) 0%, rgba(11, 92, 232, 0) 62%),
    radial-gradient(60% 70% at 100% 100%, rgba(56, 232, 255, .07) 0%, rgba(56, 232, 255, 0) 70%),
    var(--nr-vidro);
  box-shadow: inset 0 1px 0 rgba(246, 248, 252, .07), 0 24px 60px rgba(0, 0, 0, .38);
}
.site-clean .nr-destaques::before {
  position: absolute;
  top: 0;
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, rgba(56, 232, 255, 0), rgba(56, 232, 255, .8) 50%, rgba(56, 232, 255, 0));
  content: "";
}
.site-clean .nr-destaques__rotulo {
  display: flex;
  gap: .6rem;
  align-items: center;
  margin: 0 0 clamp(.9rem, 2vw, 1.25rem);
  color: var(--nr-ciano);
  font: 500 var(--t-mini, .75rem)/1.4 var(--fonte-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-clean .nr-destaques__rotulo::before { flex: none; width: 1.75rem; height: 1px; background: currentColor; content: ""; }
.site-clean .nr-destaques__lista { display: grid; max-width: none; margin: 0; padding: 0; list-style: none; }
.site-clean .nr-destaques__lista > li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: clamp(.75rem, 1.6vw, 1.1rem);
  align-items: baseline;
  min-width: 0;
  margin: 0;
  padding: clamp(.85rem, 1.6vw, 1.05rem) 0;
  border-top: 1px solid var(--nr-borda);
}
.site-clean .nr-destaques__lista > li:first-child { padding-top: 0; border-top: 0; }
.site-clean .nr-destaques__lista > li:last-child { padding-bottom: 0; }
.site-clean .nr-destaques__num {
  color: var(--nr-ciano);
  font: 650 clamp(1.25rem, 1.1rem + .45vw, 1.6rem)/1 var(--fonte-titulo);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-shadow: 0 0 18px rgba(56, 232, 255, .35);
}
.site-clean .nr-destaques__texto { min-width: 0; color: #FFFFFF; font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); font-weight: 500; line-height: 1.55; }
/* Celular: a coluna do número (2.5rem) e o espaço deixavam ~190 px de texto a 320 e 390 px (8 linhas no destaque 01 da
   ISO 31000; revisão visual r2). Número mais estreito e espaço menor. */
@media (max-width: 479px) {
  .site-clean .nr-destaques__lista > li { grid-template-columns: 1.75rem minmax(0, 1fr); gap: .6rem; }
  .site-clean .nr-destaques__num { font-size: 1.15rem; }
}

/* "O que diz o texto oficial" (LGPD, ANPD e NIST): parágrafos num painel discreto, com fio ciano à esquerda, na medida
   do texto. É leitura, não link. */
.site-clean .nr-oficial {
  max-width: 68ch;
  margin: 0;
  padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid var(--nr-borda);
  border-left: 2px solid rgba(56, 232, 255, .6);
  border-radius: 4px 14px 14px 4px;
  background: linear-gradient(90deg, rgba(11, 92, 232, .14) 0%, rgba(11, 92, 232, 0) 70%), rgba(5, 11, 22, .55);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
}
.site-clean .nr-oficial > p { max-width: none; margin: 0; color: var(--v-texto); font-size: inherit; line-height: 1.75; }
.site-clean .nr-oficial > p + p { margin-top: .85rem; }
/* "Temas centrais" (T27, direção B "trilha de luz"; Tiago 04/10 ~14h15: "os cards dos temas centrais... não estão
   com a nossa qualidade"). Uma .v-trilha: fio de luz vertical ligando nós numerados; de cada nó sai um ramal curto
   até a estação de vidro com a frase. A camada viva (vivo-sinais.js, trilhas()) corre o pulso no fio e acende o nó
   quando ele chega, nos modos dela (completo, leve, calmo a 0,45×, quieto parado). O número é o span aria-hidden
   (a lista ordenada já numera para o leitor de tela), em Public Sans 650 ciano com o brilho do número do "Em destaque";
   o ::before da etapa é só o anel. Mesma medida do painel
   "Em destaque" (68ch), coluna única em toda largura: cada tema cabe em uma ou duas linhas e a leitura desce
   reto ao lado do cartão "Como a Videre usa". A estação é caixa de leitura, não link: não acende o holofote. */
.site-clean.pagina-normas main ol.nr-temas.v-trilha {
  --nr-no: 2.875rem;
  --nr-ramal: 1rem;
  --nr-no-topo: .125rem;
  max-width: 68ch;
  margin: 0;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); /* mesmo "ch" do painel "Em destaque" */
}
.site-clean.pagina-normas.tema-escuro main ol.nr-temas.v-trilha > li {
  padding: 0 0 .875rem calc(var(--nr-no) + var(--nr-ramal));
  color: var(--v-texto);
}
.site-clean.pagina-normas.tema-escuro main ol.nr-temas.v-trilha > li:last-child { padding-bottom: 0; }
/* Nó: anel aceso com halo (o algarismo é o span, por cima). */
.site-clean.pagina-normas.tema-escuro main ol.nr-temas.v-trilha > li::before {
  top: var(--nr-no-topo);
  width: var(--nr-no);
  height: var(--nr-no);
  box-sizing: border-box;
  border: 1.5px solid rgba(56, 232, 255, .72);
  background: radial-gradient(circle, #0B1830 52%, #020611 100%);
  box-shadow: 0 0 0 4px rgba(56, 232, 255, .05), 0 0 16px rgba(56, 232, 255, .32), inset 0 0 10px rgba(56, 232, 255, .16);
  content: "";
  transition: border-color .25s ease-out, box-shadow .25s ease-out;
}
/* Fio entre os nós (a camada viva mede o eixo daqui). */
.site-clean.pagina-normas.tema-escuro main ol.nr-temas.v-trilha > li:not(:last-child)::after {
  top: calc(var(--nr-no-topo) + var(--nr-no) + .2rem);
  bottom: calc(.2rem - var(--nr-no-topo));
  left: calc(var(--nr-no) / 2 - 1px);
  width: 2px;
  background: linear-gradient(180deg, rgba(56, 232, 255, .8), rgba(91, 140, 255, .32));
  box-shadow: 0 0 8px rgba(56, 232, 255, .4);
}
.site-clean .nr-temas__num {
  position: absolute;
  z-index: 1;
  top: var(--nr-no-topo);
  left: 0;
  display: grid;
  place-items: center;
  width: var(--nr-no);
  height: var(--nr-no);
  color: var(--nr-ciano);
  font: 650 1.0625rem/1 var(--fonte-titulo);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-shadow: 0 0 18px rgba(56, 232, 255, .35); /* o mesmo brilho do número do "Em destaque" */
  pointer-events: none;
}
/* Estação: vidro escuro com luz entrando pelo lado do ramal e filete de luz no topo, que esmaece para a direita. */
.site-clean .nr-temas__texto {
  position: relative;
  display: block;
  min-width: 0;
  min-height: calc(var(--nr-no) + 2 * var(--nr-no-topo));
  padding: .7rem 1.1rem;
  border: 1px solid var(--nr-borda);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(56, 232, 255, .55) 0%, rgba(91, 140, 255, .22) 45%, rgba(91, 140, 255, 0) 85%) top left / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(11, 92, 232, .28) 0%, rgba(11, 92, 232, .08) 30%, rgba(11, 92, 232, 0) 55%),
    linear-gradient(180deg, rgba(12, 25, 45, .86) 0%, rgba(6, 13, 26, .9) 100%);
  box-shadow: inset 0 1px 0 rgba(246, 248, 252, .05), 0 12px 30px rgba(0, 0, 0, .28);
  color: #F4F7FC;
  font-weight: 500;
  line-height: 1.55;
  text-wrap: pretty;
  transition: border-color .25s ease-out, box-shadow .25s ease-out;
}
/* Ramal: do nó até a estação, com o ponto de chegada aceso na borda. */
.site-clean .nr-temas__texto::before {
  position: absolute;
  top: calc(var(--nr-no-topo) + var(--nr-no) / 2 - .5px - 1px);
  left: calc(-1 * var(--nr-ramal) - 1px);
  width: var(--nr-ramal);
  height: 1px;
  background: linear-gradient(90deg, rgba(56, 232, 255, .55), rgba(56, 232, 255, .9));
  content: "";
}
.site-clean .nr-temas__texto::after {
  position: absolute;
  top: calc(var(--nr-no-topo) + var(--nr-no) / 2 - 2.5px - 1px);
  left: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9FF5FF;
  box-shadow: 0 0 8px rgba(56, 232, 255, .9);
  content: "";
}
@media (hover: hover) and (pointer: fine) {
  .site-clean.pagina-normas.tema-escuro main ol.nr-temas.v-trilha > li:hover::before {
    border-color: #9FF5FF;
    box-shadow: 0 0 0 4px rgba(56, 232, 255, .1), 0 0 22px rgba(56, 232, 255, .55), inset 0 0 12px rgba(56, 232, 255, .3);
  }
  .site-clean .nr-temas > li:hover .nr-temas__texto {
    border-color: var(--v-realce);
    box-shadow: inset 0 1px 0 rgba(246, 248, 252, .08), 0 0 0 1px rgba(56, 232, 255, .12), 0 12px 34px rgba(11, 92, 232, .28);
  }
}
/* Até 400 px: nó e ramal menores, para a frase não cair abaixo de ~25 caracteres por linha. */
@media (max-width: 400px) {
  .site-clean.pagina-normas main ol.nr-temas.v-trilha { --nr-no: 2.25rem; --nr-ramal: .6rem; --nr-no-topo: .2rem; }
  .site-clean .nr-temas__num { font-size: .9375rem; }
  .site-clean .nr-temas__texto { padding: .6rem .8rem; }
}

/* "Como a Videre usa": cartão ao lado do texto, preso ao rolar no desktop. */
.site-clean .nr-uso { gap: 1rem; }
.site-clean .nr-uso h2 { color: #FFFFFF; font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.site-clean .nr-uso .nr-uso__texto { color: var(--v-texto); line-height: 1.65; }
.site-clean .nr-uso .nr-uso__ressalva { padding-top: .9rem; border-top: 1px solid var(--v-borda); color: var(--v-suave); font-size: var(--t-menor, .9375rem); line-height: 1.55; }
@media (min-width: 1024px) {
  .site-clean .nr-texto__grade { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .site-clean .nr-uso { position: sticky; top: 7rem; }
}
/* O painel "Como a Videre usa" é leitura e fica preso ao rolar: acende e soa como as outras caixas (regra de Tiago de
   29/09), mas não sobe no hover nem no foco do link (revisão visual r2). */
.site-clean.pagina-normas main .nr-uso.v-card:is(:hover, :focus-within) { transform: none; }

/* ---------------------------------------------------------------- Listas (índice e relacionadas) */
.site-clean .nr-grupo__cabeca { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.site-clean .nr-grupo__cabeca h2 { color: #FFFFFF; }
.site-clean .nr-grupo__cabeca > p { color: var(--v-texto); }
.site-clean .nr-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.25rem);
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-clean .nr-lista > li { display: flex; min-width: 0; margin: 0; }
@media (min-width: 640px) {
  .site-clean .nr-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Lista ímpar em duas colunas: o último cartão fica com a largura de uma coluna, centrado (revisão visual r5: nas duas
   colunas, ele ficava largo, com a descrição numa linha só e muito vazio, destoando do 4 + 3 centrado do desktop). */
@media (min-width: 640px) and (max-width: 1023px) {
  .site-clean .nr-lista > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - clamp(.9rem, 1.6vw, 1.25rem)) / 2); }
}
@media (min-width: 1024px) {
  .site-clean .nr-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Cinco itens: 3 + 2 centrado (grade de seis, cada item ocupa duas), sem buraco no fim da linha. */
  .site-clean .nr-lista:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .site-clean .nr-lista:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
  .site-clean .nr-lista:has(> li:nth-child(5):last-child) > li:nth-child(4) { grid-column: 2 / span 2; }
  /* Quatro itens: 2 + 2. */
  .site-clean .nr-lista:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Dois itens: duas colunas (numa grade de três, sobrava um terço vazio à direita na ISO 31073; revisão visual r3). */
  .site-clean .nr-lista:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Sete itens, nunca 3 + 3 + 1 com o último sozinho (ISO 31000; revisão visual r3). De 1024 a 1279 px, 3 + 2 + 2 (grade de
   seis: os três primeiros ocupam duas, os outros quatro ocupam três); em quatro colunas, a 1024 px, cada cartão ficava com
   ~218 px e a pílula e o "NIST AI RMF 1.0" quebravam. A partir de 1280 px, 4 + 3 centrado (grade de oito). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-clean .nr-lista:has(> li:nth-child(7):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .site-clean .nr-lista:has(> li:nth-child(7):last-child) > li { grid-column: span 2; }
  .site-clean .nr-lista:has(> li:nth-child(7):last-child) > li:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 1280px) {
  .site-clean .nr-lista:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-clean .nr-lista:has(> li:nth-child(7):last-child) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .site-clean .nr-lista:has(> li:nth-child(7):last-child) > li { grid-column: span 2; }
  .site-clean .nr-lista:has(> li:nth-child(7):last-child) > li:nth-child(5) { grid-column: 2 / span 2; }
}

.site-clean a.nr-item {
  flex: 1;
  gap: .55rem;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  border-color: var(--nr-borda);
  color: var(--v-texto);
  text-decoration: none;
}
/* A borda acende no hover e no foco. O seletor é mais forte que o do .v-card escuro do futuro.css (que fixava a borda),
   para os três cartões de norma (nr-item, metodo-ref e norma-cartao) reagirem igual (revisão visual r1). */
.site-clean.tema-escuro main a.nr-item.v-card:is(:hover, :focus-visible) { border-color: var(--v-realce); }
.site-clean a.nr-item:focus-visible { outline: 3px solid var(--v-foco); outline-offset: 3px; }
/* Sobe 2 px só com ponteiro fino que paira e com o site em movimento (nunca pausado nem calmo), como os outros cartões. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.vivo-calmo, .vivo-quieto, .vivo-parado) .site-clean a.nr-item:hover { transform: translateY(-2px); }
}
html:is(.vivo-calmo, .vivo-quieto, .vivo-parado) .site-clean a.nr-item { transition: none; }
.site-clean .nr-item__arte {
  display: block;
  flex: none;
  width: 7.5rem;
  aspect-ratio: 1;
  margin: -.25rem 0 .25rem -.5rem;
  background: radial-gradient(closest-side, rgba(11, 92, 232, .22) 0%, rgba(11, 92, 232, .06) 62%, rgba(11, 92, 232, 0) 100%);
}
.site-clean .nr-item__arte img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-clean .nr-item__tipo {
  align-self: flex-start;
  padding: .3rem .65rem;
  border: 1px solid var(--v-borda-forte);
  border-radius: 999px;
  color: var(--v-pilula);
  font: 500 var(--t-mini, .75rem)/1.2 var(--fonte-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-clean .nr-item .nr-item__sigla {
  max-width: none;
  margin: .35rem 0 0;
  color: #FFFFFF;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.site-clean .nr-item__sigla__prefixo {
  display: block;
  margin-bottom: .35rem;
  color: var(--v-suave);
  font: 500 var(--t-mini, .75rem)/1.3 var(--fonte-mono);
  letter-spacing: .1em;
}
.site-clean .nr-item__sigla__ano { color: var(--nr-cobalto); font-weight: 500; }
/* Sem linha de prefixo (NIST AI RMF 1.0, LGPD, RIPD): a altura dela fica reservada, para o código, o nome e o texto
   começarem na mesma altura dos vizinhos ABNT da mesma linha (revisão visual r1). */
/* Só com duas colunas ou mais (a partir de 640 px): numa coluna só, não há vizinho para alinhar e a linha vazia virava um
   vão entre a pílula e o código (revisão visual r2). */
@media (min-width: 640px) {
  .site-clean .nr-item__sigla--texto::before {
    display: block;
    margin-bottom: .35rem;
    font: 500 var(--t-mini, .75rem)/1.3 var(--fonte-mono);
    content: "\00a0";
  }
}
.site-clean .nr-item__nome { color: #FFFFFF; font-weight: 600; line-height: 1.35; text-wrap: balance; }
/* Texto de cartão (duas ou três linhas): balance; com pretty, "antissuborno." ficava sozinha a 1024 e a 320 px (medido). */
.site-clean .nr-item__texto { color: var(--v-suave); font-size: var(--t-menor, .9375rem); line-height: 1.55; text-wrap: balance; }
@media (min-width: 640px) {
  .site-clean .nr-item__nome { min-height: calc(2 * 1.35em); }
}
/* Com duas colunas ou mais, os cartões da mesma fileira dividem as linhas (subgrade): pílula, código, nome, descrição e
   ação começam na mesma altura, mesmo quando um nome quebra em três linhas (revisão visual r6, R6-1: no "Veja também" de
   4 colunas, de 1280 a ~1435 px, o RIPD ia a três linhas e a descrição descia ~25 px em relação às vizinhas). Cada filho
   tem linha fixa, contada do fim: com ou sem arte na lista, ninguém troca de linha. O gap da lista separa as fileiras;
   dentro do cartão vale o gap próprio (o mesmo .55rem do flex). Sem subgrade, fica o flex de antes. */
@media (min-width: 640px) {
  @supports (grid-template-rows: subgrid) {
    .site-clean .nr-lista { --nr-linhas: 5; }
    .site-clean .nr-lista:has(.nr-item__arte) { --nr-linhas: 6; }
    .site-clean .nr-lista > li { display: grid; grid-row: span var(--nr-linhas); grid-template-rows: subgrid; row-gap: 0; }
    .site-clean .nr-lista > li > a.nr-item { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: .55rem; align-content: start; }
    .site-clean a.nr-item > .nr-item__arte { grid-row: -7 / -6; }
    .site-clean a.nr-item > .nr-item__tipo { grid-row: -6 / -5; justify-self: start; }
    .site-clean a.nr-item > .nr-item__sigla { grid-row: -5 / -4; }
    .site-clean a.nr-item > .nr-item__nome { grid-row: -4 / -3; }
    .site-clean a.nr-item > .nr-item__texto { grid-row: -3 / -2; }
    .site-clean a.nr-item > .nr-item__ir { grid-row: -2 / -1; align-self: end; }
  }
}
.site-clean .nr-item__ir {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--nr-borda);
  color: var(--nr-ciano);
  font-size: .95rem;
  font-weight: 600;
}
/* Texto de ação igual no hover e no foco, como nos outros cartões de norma (revisão visual r3). */
.site-clean a.nr-item:is(:hover, :focus-visible) .nr-item__ir { color: #FFFFFF; }

.site-clean .nr-grupo--metodo { padding-top: clamp(1rem, 3vw, 2rem); }
.site-clean .nr-grupo__ressalva { max-width: 68ch; margin: 1.25rem 0 0; color: var(--v-texto); font-size: var(--t-base, 1rem); line-height: 1.55; }
/* Nota do asterisco de "De acordo com*" (revisão jurídica do Escritório, 05/10/2026): letra menor, cor de leitura (AA). */
.site-clean .nr-grupo__nota { max-width: 68ch; margin: .5rem 0 0; color: var(--v-texto); font-size: var(--t-menor, .875rem); line-height: 1.5; }
.site-clean .nr-voltar { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.site-clean .nr-heroi--indice h1 { max-width: 22ch; }
/* Índice: o herói não tem arte; sem o respiro do herói das páginas, o primeiro grupo sobe (revisão visual r2: ~200 px vazios
   antes de "De acordo com"). */
.site-clean .heroi--pagina.nr-heroi--indice { padding-bottom: clamp(1rem, 2.5vw, 2rem); }
.site-clean .nr-heroi--indice + .nr-grupo { padding-top: clamp(1.5rem, 3.5vw, 3rem); }

/* ---------------------------------------------------------------- Telas menores */
@media (max-width: 860px) {
  .site-clean .nr-heroi__grade,
  .site-clean.pagina-normas .heroi--pagina.nr-heroi > .env.nr-heroi__grade { grid-template-columns: minmax(0, 1fr); }
  .site-clean .nr-heroi__arte { width: min(68vw, 18rem); }
}
@media (max-width: 639px) {
  .site-clean .nr-item__arte { width: 5.5rem; }
  /* Celular: arte menor, para "O que é" não começar a ~1.500 px do topo (revisão visual r2). O sizes do gerador
     usa o mesmo limite. */
  .site-clean .nr-heroi__arte { width: min(52vw, 12rem); }
}
@media (prefers-reduced-motion: reduce) {
  .site-clean a.nr-item, .site-clean a.nr-item:hover { transform: none; transition: none; }
}
/* Quieto (pausa do visitante): nenhuma transição, nem no hover. */
html:is(.vivo-quieto, .vivo-parado) .site-clean.pagina-normas.tema-escuro main ol.nr-temas.v-trilha > li::before,
html:is(.vivo-quieto, .vivo-parado) .site-clean .nr-temas__texto { transition: none; }
/* Trilho parado dos Temas: luz uniforme do 01 ao último nó. O degradê comum do componente (forte até ~45% e apagado no fim)
   lia, com 6 nós, como "progresso até a etapa 3" (revisão visual r6, R6-2). Só na trilha
   vertical das normas: a horizontal de /metodologia/ fica como está. */
html:is(.vivo-quieto, .vivo-parado) .site-clean.pagina-normas main ol.nr-temas.v-trilha vs-trilho::before {
  background-image: linear-gradient(180deg, var(--vs-p-fixo-2) 0%, var(--vs-p-fixo-2) 100%);
}
@media (prefers-contrast: more) {
  .site-clean.pagina-normas.tema-escuro main ol.nr-temas.v-trilha > li::before { box-shadow: none; }
  .site-clean .nr-temas__texto { border-color: #3A6BB0; box-shadow: none; }
  .site-clean .nr-temas__num { text-shadow: none; }
}
@media (forced-colors: active) {
  .site-clean :is(.nr-ficha, .nr-temas__texto, a.nr-item, .nr-destaques, .nr-oficial) { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .site-clean.pagina-normas.tema-escuro main ol.nr-temas.v-trilha > li::before { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .site-clean.pagina-normas.tema-escuro main ol.nr-temas.v-trilha > li:not(:last-child)::after,
  .site-clean .nr-temas__texto::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .site-clean .nr-temas__texto::after { display: none; }
  .site-clean .nr-temas__num { text-shadow: none; }
  .site-clean .nr-destaques__lista > li { border-color: CanvasText; }
  .site-clean .nr-destaques__num { text-shadow: none; }
  .site-clean :is(.nr-heroi__arte, .nr-item__arte) { background: none; }
  .site-clean .nr-destaques::before { display: none; }
  .site-clean .nr-ficha__titulo::before,
  .site-clean .nr-destaques__rotulo::before { background: CanvasText; }
  .site-clean .nr-ficha::before, .site-clean .nr-ficha__item::after { display: none; }
  .site-clean .nr-ficha__item:not(:first-child)::before, .site-clean .nr-ficha dt::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .site-clean .nr-ficha__item--largo:first-child { background: none; }
  .site-clean.tema-escuro main a.nr-item.v-card:is(:hover, :focus-visible) { border-color: Highlight; }
}
@media print {
  .site-clean :is(.nr-ficha, .nr-temas__texto, a.nr-item, .nr-destaques, .nr-oficial) { border-color: #000; background: none; box-shadow: none; color: #000; }
  .site-clean .nr-ficha::before, .site-clean .nr-ficha__item::after, .site-clean .nr-ficha dt::before { display: none; }
  .site-clean .nr-ficha__item:not(:first-child)::before { background: #999; }
  .site-clean .nr-ficha__item--largo:first-child { background: none; }
  /* Anel, fio e ramal seguem o contrato de impressão do futuro.css (pseudo-elementos sem pintura, filete #999). */
  .site-clean .nr-temas > li { break-inside: avoid; }
  .site-clean .nr-destaques__num { text-shadow: none; }
  .site-clean.pagina-normas main :is(h1, h2, h3, p, dd, dt, li, span) { color: #000; }
  .site-clean .nr-uso { position: static; }
}