/* ============================================================
   LGPD de Todos - páginas legais (aviso de privacidade, cookies)
   ------------------------------------------------------------
   As duas páginas usavam blocos <style> idênticos copiados uma na
   outra. Qualquer ajuste precisava ser feito duas vezes, e foi por
   isso que uma delas ficou dizendo coisa diferente da outra.
   Agora o estilo mora aqui, num lugar só.

   Vale lembrar por que estas páginas existem: elas são a vitrine
   do que a gente vende. Precisam ser corretas por dentro e legíveis
   por fora, sem juridiquês na cara de quem lê.
   ============================================================ */

/* Altura do cabeçalho do site: 90px do .header-inner mais 1px de borda.
   O mesmo número está no titulo-fixo.js. Se um dia o cabeçalho mudar de
   altura, os dois mudam juntos, senão sobra fresta ou um cobre o outro. */
:root{--topo-site:91px}

.legal-wrap{max-width:760px;margin:0 auto;padding:40px 24px 96px}

/* O PÉ DO BLOG É MENOR, e os 96px acima continuam valendo para as páginas
   legais. Pego pelo Edu em 03/09/2026: no fim do artigo sobrava um vazio
   grande antes da faixa azul.
   Os 96px são decisão deliberada das quatro páginas legais, que terminam
   todas no bloco de contato e precisam parar no mesmo lugar (ver a regra do
   .legal-cta.cta-fim, que abre mão da margem só para isso bater). O blog
   nunca entrou nessa conta: ele termina na assinatura, que é uma linha de
   texto miúdo, e ali 96px de branco mais os 30 de recheio do rodapé viravam
   mais de 120px de nada.
   56 mantém o fim arejado sem parecer página inacabada, e conversa com os
   40 do topo. Vale para o índice também, que é `.legal-wrap artigo`.
   AJUSTADO DE 56 PARA 40 no mesmo dia, a pedido do Edu: 56 ainda deixava
   vazio demais depois da assinatura, que é uma linha de texto miúdo. */
.legal-wrap.artigo{padding-bottom:40px}

/* RODAPÉ DO DOCUMENTO (.footer-doc)
   O rodapé é do site inteiro e nasce com a largura da home, que é bem
   maior que a coluna de texto daqui. Resultado: o texto acabava numa
   margem e o rodapé começava noutra, e a página parecia dois pedaços
   colados.
   Aqui ele herda a MESMA medida do .legal-wrap (760px de largura e
   24px de recuo), então o "Q" de "Quem somos" cai exatamente embaixo
   do primeiro caractere do último parágrafo. Se um dia o .legal-wrap
   mudar de largura, este bloco muda junto, senão o desalinhamento
   volta pela porta dos fundos.
   Tudo encosta à esquerda de propósito: a coluna de texto tem uma
   borda só, e o rodapé é a última linha dela, não um bloco separado
   centralizado por conta própria. */
/* PADDING EM LONGHAND, DE PROPÓSITO. Escrever `padding:0 24px` aqui
   parecia inofensivo e apagou o respiro do rodapé inteiro: como esta
   regra tem especificidade maior (0,2,0) que `.footer-links{padding:18px
   0 0}`, `.footer-id{padding:14px 0 0}` e `.footer-bottom{padding-top:
   18px}`, o atalho zerava o padding de cima das três linhas de uma vez.
   Foi isso que deixou o rodapé espremido, e não o alinhamento. Mexendo
   só na esquerda e na direita, cada linha mantém o espaço vertical que
   ela mesma define. Atalho de CSS sobrescreve o que você nem citou. */
.footer-doc .container{max-width:760px;padding-left:24px;padding-right:24px}

/* A FILA DE LINKS É A EXCEÇÃO, e ela precisa estar NESTE arquivo.

   O `styles.css` já declara `max-width:none` na `.footer-links.fl-fila`,
   justamente para os cinco links caberem numa linha só. Não adiantava: a
   regra acima tem a MESMA especificidade (0,2,0) e o `legal.css` é
   carregado depois do `styles.css` em todas as páginas. Empate de
   especificidade se decide pela ordem, e a ordem aqui é entre arquivos,
   que é o pior lugar para procurar. O sintoma era um link sozinho
   caindo para a segunda linha do rodapé.

   Com `.container.fl-fila` a especificidade sobe para (0,3,0) e a
   exceção vence sem depender de ordem nenhuma.

   Por que a exceção é legítima: os 760px existem para o rodapé terminar
   na mesma margem em que o texto termina, e isso vale para as linhas de
   texto. A fila de links não é texto corrido, é navegação, e para ela
   quebrar um rótulo no meio custa mais do que passar alguns pixels da
   margem. Decidido com o Edu em 28/08/2026. */
.footer-doc .container.fl-fila{max-width:none}


/* O recuo de cima NÃO mora aqui: ele é `.site-footer.footer-simples`, no
   styles.css, porque o quem-somos.html também precisa dele e não carrega
   este arquivo. Aqui só se decide largura. */

/* AQUI SÓ SE MEXE NA LARGURA. As duas últimas linhas (identificação e
   copyright) continuam centralizadas, exatamente como na home: elas são
   a assinatura do site inteiro, e não parte da coluna de leitura. Quem
   se alinha à borda do texto é a fila de links, que é navegação.

   Cheguei a alinhá-las à esquerda junto com os links e ficou errado: as
   três linhas viraram um bloco só encostado numa borda, e a assinatura
   perdeu o ar de fecho.

   E NÃO acrescentar aqui regra para .footer-doc .footer-bottom. Quem
   manda naquela linha é .footer-bottom.fb-doc, no styles.css, com a
   MESMA especificidade (0,2,0); como este arquivo carrega depois, o que
   estivesse escrito aqui venceria em silêncio. Já aconteceu uma vez.
   Empate de especificidade se decide pela ordem dos arquivos, e ordem de
   arquivo não é lugar de guardar decisão de layout. */

/* ============================================================
   TÍTULO FIXO AO ROLAR
   Mesmo padrão das telas do app: a faixa que fica parada sobre o
   conteúdo leva linha navy de 2px e nenhuma sombra. Moldura da
   página (a barra branca do logo) continua com 1px cinza, e é essa
   diferença que diz o que é moldura e o que ficou grudado.
   Quem decide a hora de aparecer é o assets/js/titulo-fixo.js.
   ============================================================ */
/* O FUNDO vai de ponta a ponta, senão o texto da página aparece rolando
   por trás da faixa. A LINHA, não: ela tem a largura da coluna de texto,
   para casar com a formatação da página em vez de cortar a tela inteira.
   Por isso a borda mora no elemento de dentro, e não na faixa.
   Mesma solução do título fixo dos artigos da Central de ajuda. */
.titulo-fixo{position:fixed;left:0;right:0;top:var(--topo-site);z-index:40;
  background:var(--branco-95);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease}
.titulo-fixo.vendo{opacity:1;transform:none;pointer-events:auto}

/* Mesma largura e mesmo recuo do .legal-wrap: 760 com 24 de cada lado
   deixa a linha exatamente sobre os 712 do texto. */
.titulo-fixo-in{max-width:760px;margin:0 auto;padding:0 24px}
.titulo-fixo-txt{display:block;padding:11px 0;
  border-bottom:2px solid var(--azul);
  font-size:16px;font-weight:700;line-height:1.3;color:var(--azul);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ONDE A ÂNCORA PARA. Quem pula pelo sumário precisa parar ABAIXO das
   duas barras, senão o título do item fica escondido atrás delas:
   91px do cabeçalho + 45px da faixa + respiro = 150.

   ESTA É A ÚNICA REGRA DE scroll-margin-top DO ARQUIVO, e tem que
   continuar sendo. Existiram outras duas, dentro das regras de
   tipografia do h2 e do h3, com o mesmo peso de especificidade e mais
   abaixo no arquivo: elas venciam em silêncio e o título parava a 24px
   do topo, atrás de tudo. Se a altura do cabeçalho ou da faixa mudar,
   é este número que muda, e só ele. */
.legal-wrap h2,.legal-wrap h3{scroll-margin-top:150px}

/* ============================================================
   O SUMÁRIO PENDURADO NA FAIXA (.tf-bt e .tf-painel)
   Montado pelo assets/js/titulo-fixo.js, clonando o índice que já
   está na página. Aqui só o desenho.

   A faixa continua com UMA linha de altura: o botão fica na mesma
   linha do título, à direita, e o painel abre por cima do texto, em
   position:absolute. Se o botão empurrasse a faixa para baixo, ela
   mudaria de altura ao aparecer e a página inteira pularia, a mesma
   armadilha do cabeçalho que treme, que já custou uma rodada no app.
   ============================================================ */
.titulo-fixo-in.tf-com-indice{position:relative;display:flex;align-items:center;gap:16px}
/* O BOTÃO NASCE ESCONDIDO. A faixa entra assim que o título sai da tela,
   mas o menu só entra depois que o sumário em caixa passa: enquanto a
   caixa está visível, ela já é o índice, e mostrar os dois é repetir o
   mesmo na mesma tela. Quem liga a classe é o titulo-fixo.js, num
   segundo gatilho.
   display:none, e não visibility: escondido com espaço reservado, o
   título ficaria com uma lacuna do tamanho do botão à direita.

   A REGRA VALE SÓ PARA O BOTÃO. O painel é controlado pelo atributo
   `hidden`, que o JS liga e desliga; dar um `display:block` a ele aqui
   passaria por cima do `hidden` e o menu ficaria aberto para sempre.
   Quando o botão some, o JS já fecha o painel antes. */
.tf-com-indice .tf-bt{display:none}
.tf-com-indice.mostra-menu .tf-bt{display:inline-flex}
/* O título encolhe, o botão nunca: em tela estreita quem perde letra é
   o título, com reticências, e não o atalho. */
.tf-com-indice .titulo-fixo-txt{flex:1 1 auto;min-width:0}
.tf-bt{flex:none;display:inline-flex;align-items:center;gap:6px;
  align-self:stretch;margin:0;padding:0 0 0 16px;
  background:none;border:0;border-bottom:2px solid var(--azul);
  font-family:inherit;font-size:14px;font-weight:600;color:var(--tinta-72);
  cursor:pointer;transition:color .18s ease}
.tf-bt:hover{color:var(--azul)}
.tf-bt svg{width:var(--ic-botao);height:var(--ic-botao);transition:transform .18s ease}
.tf-com-indice.aberto .tf-bt{color:var(--azul)}
.tf-com-indice.aberto .tf-bt svg{transform:rotate(180deg)}

.tf-painel{position:absolute;top:100%;right:24px;z-index:2;
  min-width:280px;max-width:min(420px,calc(100vw - 48px));
  background:var(--branco);border:1px solid var(--tinta-15);
  border-radius:0 0 var(--radius) var(--radius);border-top:0;
  box-shadow:0 14px 32px rgba(10,37,64,.13);
  padding:14px 18px;max-height:min(60vh,420px);overflow-y:auto}
/* Uma coluna, sempre: o índice em caixa usa duas, mas aqui a largura é
   de menu e duas colunas viraria um paredão ilegível. */
.tf-painel .legal-indice{columns:1;font-size:14px}
.tf-painel .legal-indice li{margin-bottom:2px}
.tf-painel .legal-indice a{display:block;padding:7px 10px;border-radius:var(--radius-sm)}
.tf-painel .legal-indice a:hover{background:var(--azul-suave);color:var(--azul);text-decoration:none}

@media (max-width:640px){
  /* Em tela estreita o rótulo do botão sai e fica só a seta: o título da
     seção é que precisa do espaço. */
  .tf-bt span{display:none}
  .tf-bt{padding-left:10px}
  .tf-painel{right:20px;left:20px;min-width:0;max-width:none}
}

@media (max-width:640px){
  /* Acompanha o recuo do .legal-wrap no celular, que cai de 24 para 20. */
  .titulo-fixo-in{padding:0 20px}
  .titulo-fixo-txt{padding:10px 0;font-size:15px}
}
/* A faixa some na impressão, junto com o resto da moldura de tela.
   A regra mora no bloco @media print lá do fim do arquivo, com as outras,
   para não ficarem dois blocos de impressão soltos brigando pelo mesmo
   assunto. */

/* O "‹ Voltar ao início" solto que vivia aqui foi embora em 26/08/2026.
   Ele violava o padrão de navegação em dois pontos de uma vez: ficava no
   meio do conteúdo, e não na barra do topo depois do logo, e era atalho
   fixo para a home disfarçado de Voltar. Quem chegasse na Política de
   Cookies vindo do Aviso clicava e perdia o Aviso.
   O botão de verdade agora está no cabeçalho, com o comportamento em
   assets/js/voltar.js. */

.legal-wrap h1{font-size:32px;line-height:1.2;margin:0 0 8px}

/* O TRAÇO VERDE QUE DIZ "ISTO É EDITORIAL, NÃO É NORMA".

   O Edu levantou, em 28/08/2026, trocar a cor dominante do blog para
   verde, para separar visualmente o artigo da documentação e das páginas
   legais. Não trocamos a paleta, por dois motivos:

     o verde JÁ é a assinatura do blog. O `.artigo-resposta`, com a barra
     verde à esquerda, aparece 34 vezes nos cinco artigos e nenhuma vez
     no Aviso, na Política ou no Quem somos;

     e o verde já significa outra coisa aqui: conclusão, resumo, recibo
     (ver `.legal-resumo` e `.dir-recibo`). Pintar o blog inteiro de
     verde faria a cor significar duas coisas ao mesmo tempo, e a que
     perderia é a que estava trabalhando.

   Ficou o mínimo: um traço acima do título, presente SÓ no blog. Ele
   resolve a preocupação de verdade que estava embaixo do pedido, que não
   é estética: um artigo nosso não pode ser confundido com um documento
   normativo nosso. Meio segundo de leitura e a pessoa sabe o gênero do
   texto.

   A classe `artigo` vai no <main>, ao lado de `legal-wrap`, e é o único
   lugar que separa blog de página legal no CSS. Se um dia o blog ganhar
   mais alguma marca própria, ela pendura aqui. */
.legal-wrap.artigo h1::before{
  content:"";display:block;width:56px;height:4px;border-radius:2px;
  background:var(--verde);margin:0 0 16px;
}
.legal-wrap .data{color:var(--tinta-65);font-size:14px;margin:0 0 6px}

/* A LINHA DE IDENTIFICAÇÃO DO ARTIGO  ·  .artigo-meta
   ------------------------------------------------------------
   Data, quem assina e tempo de leitura numa linha só, com ícone antes
   de cada item. Entrou em 31/08/2026, no lugar de duas linhas: a `.data`
   e uma `.artigo-assina` que gastava duas linhas de prosa para dizer
   quem escreveu e onde estava a metodologia.

   POR QUE MUDOU. Entre o título e o primeiro conteúdo de verdade havia
   cinco blocos empilhados, e este era o que menos entregava por pixel
   ocupado. O FATO da autoria continua no topo, e isso não é opcional:
   num texto que afirma o que a lei exige, quem lê tem direito de saber
   quem está afirmando. O que saiu do topo foi a EXPLICAÇÃO, que desceu
   para o fim junto das Fontes, ver .artigo-assina-fim.

   DATA ABSOLUTA, NUNCA RELATIVA. O modelo que inspirou esta linha usava
   "2 dias atrás". Não serve para nós: conteúdo jurídico envelhece por
   evento, e importa saber se o texto é anterior a um enunciado da ANPD
   ou a uma lei nova. Data relativa perde o sentido quando alguém
   compartilha o link meses depois.

   TUDO EM CINZA, inclusive o link de quem assina. É credencial, não
   manchete: se competir de peso com o título, o artigo passa a falar da
   gente em vez de falar do assunto. O azul só aparece no hover. */
.legal-wrap .artigo-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
  color:var(--tinta-65);font-size:14px;margin:0 0 24px;
}
/* O nowrap é o comportamento desejado, e não remendo: a linha pode
   quebrar ENTRE os itens, nunca dentro de um. Sem ele "30 de agosto de
   2026" parte no meio e a linha vira três blocos tortos. */
.artigo-meta .am-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.artigo-meta svg{width:15px;height:15px;flex:none;opacity:.85}
.artigo-meta a{color:inherit;text-decoration:none}
.artigo-meta a:hover{color:var(--azul);text-decoration:underline}

/* A assinatura completa, agora no fim do artigo.
   Mora colada nas Fontes de propósito: as duas respondem à mesma
   pergunta, que é "posso confiar nisto", e ela vem depois da leitura,
   que é quando a pergunta aparece. Sem borda própria, porque a do
   .blog-fontes logo acima já abre o bloco. */
/* 18px E NÃO 10, desde 03/09/2026. A ideia de "colada nas Fontes" continua
   valendo, mas 10px grudava mesmo: as duas linhas liam como um parágrafo só,
   e são duas informações diferentes (de onde veio a lei, e quem assina).
   18 separa sem desmanchar o par. */
.legal-wrap .artigo-assina-fim{
  color:var(--tinta-65);font-size:13.5px;line-height:1.6;margin:18px 0 0;
  padding-bottom:22px;border-bottom:1px solid var(--tinta-15);
}
/* A LINHA É border-bottom DAQUI, e não border-top do pedido, e o motivo é
   mecânico: no resto da página cada bloco de fecho abre com a própria linha
   em cima, mas o pedido é um retângulo azul com fundo e cantos arredondados.
   Uma borda no topo dele seria desenhada na aresta do retângulo, colada no
   azul, e leria como contorno da caixa em vez de separador. Pendurada aqui,
   ela fica no branco, com respiro dos dois lados: 22px acima, vindos deste
   recheio, e os 36px da margem do pedido abaixo.
   Pedida pelo Edu em 03/09/2026, e faz sentido: sem ela o retângulo azul
   nascia colado no texto miúdo, sendo o único bloco de fecho sem abertura. */
.legal-wrap .artigo-assina-fim a{color:var(--azul);font-weight:600;text-decoration:none}
.legal-wrap .artigo-assina-fim a:hover{text-decoration:underline}

/* SEM scroll-margin-top AQUI. Quem manda na parada da âncora é a regra
   lá de cima, junto da faixa fixa, porque o número depende da altura das
   barras e não da tipografia. Havia um `scroll-margin-top:24px` nesta
   linha e outro no h3: mesma especificidade da regra de cima e mais
   abaixo no arquivo, então ganhavam em silêncio, e quem clicava no
   sumário via o título parar atrás do cabeçalho. */
.legal-wrap h2{font-size:21px;line-height:1.3;margin:40px 0 10px}
/* SUBTÍTULO NUMERADO (7.1, 8.2). Só existe onde a seção tem dois ou mais
   assuntos de verdade; numerar 3.1 sem 3.2 é decoração.
   Fica na cor da marca e com respiro maior que o parágrafo, para o olho
   parar nele ao escanear. Não descemos a a) e i) aqui: isso é convenção
   de contrato, feita para citar cláusula em disputa, e na web o mesmo
   trabalho é feito pelo sumário, pela busca do navegador e pelo link
   direto. Nos .docx do acervo o padrão continua sendo o outro. */
.legal-wrap h3{font-size:17px;font-weight:700;line-height:1.35;
  margin:30px 0 8px;color:var(--azul)}
.legal-wrap p{color:var(--tinta-72);line-height:1.72;margin:0 0 14px}
.legal-wrap li{color:var(--tinta-72);line-height:1.72;margin-bottom:7px}
.legal-wrap ul{margin:0 0 16px;padding-left:22px}
/* O :not(.btn) não é firula. Sem ele, ".legal-wrap a" tem especificidade
   maior que ".btn-primary" (uma classe mais um elemento contra uma classe
   só) e pinta o texto do botão de azul EM CIMA do fundo azul. O botão
   vira um retângulo cego, e foi exatamente o que aconteceu. */
.legal-wrap a:not(.btn){color:var(--azul)}
.legal-wrap strong{color:var(--tinta)}

/* Resumo do topo. Existe porque quase ninguém lê um aviso inteiro, e
   quem lê só o começo merece sair sabendo o essencial. O conteúdo
   completo continua abaixo, nada aqui substitui o resto. */
.legal-resumo{background:var(--tinta-04);border:1px solid var(--tinta-15);
  border-top:3px solid var(--verde);border-radius:var(--radius);padding:22px 24px 8px;margin:0 0 34px}
.legal-resumo h2{margin:0 0 14px;font-size:17px;color:var(--azul)}
.legal-resumo ul{list-style:none;padding:0;margin:0}
.legal-resumo li{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;color:var(--tinta)}
.legal-resumo li svg{flex:none;width:var(--ic-texto);height:var(--ic-texto);margin-top:3px;color:var(--verde)}

/* A REGRA DAS TRÊS CAIXAS DE RESUMO
   Toda linha leva o ícone do PRÓPRIO ASSUNTO, nunca um tique repetido.
   Forma e cor fazem trabalhos diferentes, e é isso que evita ícone
   decorativo:
     - a FORMA diz do que a linha trata, e é o que deixa achar o assunto
       de relance numa caixa que ninguém lê inteira;
     - a COR diz o que aquela linha é. Verde = é compromisso NOSSO, e isso
       existe em duas páginas apenas, o Aviso de Privacidade e a Política de
       Cookies. Azul = todo o resto: resumo de assunto no blog, opção na
       página de direitos, apresentação no quem-somos.
       A definição do azul foi ampliada em 21/09/2026; antes dizia "opções
       que a pessoa vai escolher", o que descrevia uma das quatro páginas
       azuis. Ver o comentário do `.artigo .legal-resumo li svg`.
   Tique verde ficou fora das três: em compromisso ele era redundante com
   a cor e cegava a forma, e em opção era pior, porque sugeria que a
   pessoa já tinha pedido. Nenhum ícone se repete dentro da mesma caixa;
   entre caixas, só o escudo, que guarda a mesma ideia nas duas. */
/* VERDE É PROMESSA, E SÓ.  ·  21/09/2026
   A regra logo acima diz que a COR informa o que a linha é: verde quando é
   compromisso nosso, azul quando não é. Medido em 21/09/2026, ela descrevia
   3 dos 52 usos da caixa. Os outros 49 herdaram a cor sem o significado, e o
   caso maior eram os 48 artigos do blog, que usavam verde para resumir a LEI.
   Resumir a lei não é promessa nossa: "dado pessoal é qualquer informação
   sobre uma pessoa identificável" é o que a LGPD diz, não algo que a gente
   garante. E cor que aparece em tudo para de dizer alguma coisa: o verde
   perdia a força justamente no Aviso, que é onde ela precisa ter, porque a
   pessoa já o tinha visto em quarenta e oito artigos antes.

   Separar saiu de graça: os artigos já carregam `.artigo` no <main> e as
   páginas legais não. Nenhum arquivo precisou ser editado, e o build não
   mudou.

   A DEFINIÇÃO DO AZUL FICOU MAIS SIMPLES, e agora vale para 52 de 52. Antes
   era "está disponível, opções que a pessoa vai escolher", o que nunca
   descreveu a quem-somos.html, azul desde sempre sem ser sobre escolha.
   Agora: verde é compromisso nosso, azul é todo o resto, seja resumo de
   assunto, opção ou apresentação. Verde sobrou em duas páginas, o Aviso de
   Privacidade e a Política de Cookies, que são as duas em que a promessa
   tem peso jurídico. */
.artigo .legal-resumo li svg{color:var(--azul)}
.legal-resumo.res-opcoes li svg{color:var(--azul)}
.legal-resumo .res-nota{margin:4px 0 0;font-size:13.5px;color:var(--tinta-65);line-height:1.6}

/* SUMÁRIO
   Vem logo depois do resumo, e por isso não pode ter o mesmo peso dele:
   o resumo é conteúdo e leva bloco preenchido com acento verde; o sumário
   é navegação e leva caixa branca com borda fina. Duas caixas iguais
   empilhadas brigam entre si e a pessoa não sabe onde olhar primeiro. */
.legal-sumario{border:1px solid var(--tinta-15);border-radius:var(--radius);
  padding:20px 24px 12px;margin:0 0 36px;background:var(--branco)}
.legal-sumario h2{margin:0 0 14px;font-size:15px;color:var(--tinta-65);font-weight:700}

.legal-indice{margin:0;padding:0;list-style:none;
  columns:2;column-gap:28px;font-size:14.5px}
.legal-indice li{margin-bottom:9px;break-inside:avoid}
.legal-indice a{color:var(--tinta-72);text-decoration:none}
.legal-indice a:hover{color:var(--azul);text-decoration:underline}

/* ============================================================
   TABELA, no padrão fechado do projeto
   ------------------------------------------------------------
   Espelha o .art-tab da Central de ajuda, regra por regra. A
   primeira versão daqui inventou um formato próprio e errava em
   seis pontos de uma vez: grade fechada com linha vertical em toda
   célula, sem moldura arredondada, fundo do cabeçalho diferente,
   célula colada no topo em vez de centrada, sem rolagem no celular
   e com a primeira coluna em <strong> escrito à mão.

   O que manda aqui:
     moldura   uma borda só, por fora, com canto de 8; dentro, apenas
               linhas horizontais. Grade fechada pesa e a tabela vira
               planilha.
     cabeçalho fundo #EEF2F5 e texto da marca.
     primeira  coluna é o rótulo da linha: negrito e cor da marca vêm
     coluna    do CSS, nunca de um <strong> no HTML.
     cabeçalho SEMPRE centralizado, sem exceção. Ele é rótulo do
               conjunto e não segue o alinhamento da coluna.
     alinhamento do corpo: CENTRALIZADO, e só sai do centro a coluna
               cuja maior célula passa de 24 caracteres, porque aí ela
               virou frase. Cada coluna decide sozinha; a exceção é a
               tabela de comparação, onde as colunas comparadas andam
               juntas.

               A referência da lei (o <span class="lei">) NÃO conta
               nessa medida. Ela é nota de rodapé da célula, menor e mais
               clara, em linha própria. Contando, "Execução do contrato"
               virava 30 caracteres por causa de um "Art. 7º, V" e jogava
               a coluna inteira para a esquerda.

               E se a célula não couber em 24 caracteres, a primeira
               pergunta não é sobre alinhamento: é se aquilo ali é valor
               ou virou parágrafo. "Até 30 dias para apagar de vez" era
               parágrafo; o valor é "Até 30 dias" e o resto é motivo, que
               tem coluna própria.
     celular   rolagem lateral em vez de espremer as colunas.
   ============================================================ */
/* A LEGENDA FICA EMBAIXO, DENTRO DA MOLDURA.

   Ela não estava no CSS: os artigos usavam <caption> e o navegador
   desenhava do jeito dele, centralizado por cima, com a fonte da tabela.
   Legenda por cima compete com o cabeçalho; embaixo ela é o que é, uma
   nota sobre a tabela que a pessoa acabou de ler.

   POR QUE NÃO COPIEI O `.art-tab caption` DO APP: lá o padding é
   `8px 2px 0`, que funciona porque naquela tela a legenda respira no
   espaço abaixo. Aqui, com a moldura de borda e canto arredondado, esse
   mesmo valor produziu três defeitos de uma vez, e o Edu pegou os três
   olhando o artigo de cookies em 28/08/2026:

     1. começava a 2px da borda, enquanto o texto das células começa a
        14px, então a legenda ficava fora do prumo da primeira coluna;
     2. sem padding embaixo, encostava na borda inferior;
     3. sem separação da última linha, lia como mais uma linha da tabela,
        já que as linhas do corpo se separam por `border-top` e a legenda
        não tinha nenhum.

   Os 14px laterais são os mesmos do <td>, de propósito: a legenda
   começa exatamente onde começa o texto da primeira coluna. */
.legal-tab caption{caption-side:bottom;text-align:left;font-size:12.5px;
  line-height:1.5;color:var(--tinta-65);padding:10px 14px 12px;
  border-top:1px solid var(--tinta-08);background:var(--fundo-pagina)}

.legal-tab-wrap{margin:6px 0 22px;overflow:hidden;border-radius:8px;border:1px solid var(--tinta-15)}
.legal-tab-rolo{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal-tab{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
/* O CABEÇALHO É SEMPRE CENTRALIZADO. NÃO MEXER.
   Decidido pelo Edu em 26/08/2026, e RESTAURADO em 28/08/2026 depois de
   eu ter proposto o contrário e quebrado o padrão do site inteiro.

   A REGRA, INTEIRA, PARA NÃO SER LIDA PELA METADE:

     centralizar é o padrão de TUDO nesta tabela;
     alinhar à esquerda é a EXCEÇÃO, e ela vale só para célula de corpo
     com muito texto (a régua dos 24 caracteres);
     o cabeçalho NUNCA entra nessa exceção, porque ele é rótulo do
     conjunto e não mais um valor da lista.

   POR QUE EU ERREI: olhei uma tabela de artigo, vi três cabeçalhos
   centralizados sobre colunas à esquerda, e concluí que o cabeçalho
   deveria seguir a coluna. Isso inverte a regra: transforma a exceção
   (texto longo) em padrão e o padrão (centro) em exceção. O sintoma que
   eu vi era real; o diagnóstico é que estava errado, e a prova é que a
   correção exigiria mexer em todas as tabelas do site para acomodar o
   caso de uma.

   Se um dia isso parecer errado de novo, a pergunta certa não é sobre o
   cabeçalho. É se aquela célula de corpo ainda é um valor ou já virou
   parágrafo, que é onde mora o problema de verdade. */
.legal-tab th{background:var(--fundo-destaque);color:var(--azul);font-weight:700;
  padding:12px 14px;border-bottom:1.5px solid var(--tinta-15);text-align:center}
.legal-tab td{padding:13px 14px;border-top:1px solid var(--tinta-08);
  text-align:left;vertical-align:middle;color:var(--tinta-72)}
.legal-tab td.c{text-align:center}

/* AS COLUNAS CURTAS NÃO PODEM SER ESMAGADAS
   A tabela nunca teve largura de coluna definida, e o navegador então
   reparte o espaço sozinho: ele dá quase tudo para a coluna de texto
   corrido e comprime as outras até o limite da palavra mais larga. Foi
   assim que "São Paulo, Brasil" virou três linhas de uma palavra cada,
   numa tabela que tinha folga de sobra ao lado.

   Em vez de fixar porcentagem por tabela (são seis, com formatos
   diferentes, e toda tabela nova precisaria de mais uma regra), a
   correção é dizer o mínimo: cabeçalho e célula curta não quebram. Com
   isso o navegador reserva a largura natural da frase e o texto corrido
   fica com a sobra, que é a repartição que a gente queria desde o
   começo.

   A referência da lei continua quebrando, porque ela já tem linha
   própria (`.legal-tab .lei` é bloco e white-space:normal) e é o único
   conteúdo longo que aparece dentro de célula curta.

   Só a partir de 640px: numa tela de celular, travar a quebra
   empurraria toda tabela para a rolagem lateral do `.legal-tab-rolo`.
   Lá é melhor quebrar feio do que rolar. */
@media (min-width:640px){
  .legal-tab th,
  .legal-tab td.c{white-space:nowrap}
  .legal-tab .lei{white-space:normal}
}
.legal-tab td:first-child{font-weight:700;color:var(--azul)}
.legal-tab td strong{color:var(--tinta)}

/* A referência da lei. Ela existe para quem quiser conferir, e some para quem
   não quiser: fica menor e mais clara que o texto, nunca no meio da frase.
   Dentro da tabela ganha linha própria; no meio do parágrafo continua na linha. */
.legal-wrap .lei{font-size:12.5px;color:var(--tinta-65);white-space:nowrap}
.legal-tab .lei{display:block;margin-top:5px;white-space:normal}

/* Bloco de contato do fim da página. */
.legal-contato{background:var(--azul);color:var(--branco);border-radius:var(--radius);padding:24px 26px;margin:36px 0 0}
.legal-contato h2{margin:0 0 8px;color:var(--branco);font-size:19px}
.legal-contato p{color:var(--branco-95);margin:0 0 10px}
.legal-contato p:last-child{margin-bottom:0}

/* ============================================================
   BLOCO DE CONTATO EM LINHA (.lc-grade)
   DUAS LINHAS: em cima o ícone, o título e a ação; embaixo, na
   largura inteira, o subtexto, separado por uma linha horizontal.

   O DESENHO ANTERIOR punha o subtexto AO LADO do título, separado
   por uma barrinha vertical. Ele foi refeito em 02/09/2026, por
   pedido do Edu, depois de a coluna do subtexto aparecer com 109px
   e o texto sair uma palavra por linha. A barrinha não se perdeu,
   ela deitou: continua existindo a divisão entre "o que é isto" e
   "o que você faz", agora na horizontal.

   O GANHO É MEDIDO. A coluna do subtexto saiu de 109px para 664px,
   e o bloco da mediana encolheu de 359px para 166px de altura. Nos
   cinco artigos de extremos, as alturas ficaram entre 164 e 187,
   ou seja, a forma agora é a mesma independente do tamanho do texto,
   que era o que o desenho antigo não conseguia entregar.

   É uma classe à parte, e não o .legal-contato inteiro, porque a
   página de direitos usa o mesmo bloco com dois parágrafos e sem
   botão. Virar grade lá dentro quebraria aquele.
   ============================================================ */
/* TRÊS COLUNAS NA PRIMEIRA LINHA, E O TEXTO OCUPA AS TRÊS NA SEGUNDA.
     auto no ícone          -> o quadrado de 38px, e nada além disso
     max-content no título  -> o que ele pedir, até o teto de 26ch
     minmax(0,1fr) no resto -> a sobra, e é onde o botão se encosta na
                               borda direita pelo justify-self:end
   O 0 do minmax é o que impede o botão de estourar a caixa em tela
   média, e continua valendo aqui. */
.legal-contato.lc-grade{display:grid;column-gap:18px;row-gap:14px;align-items:center;
  grid-template-columns:auto max-content minmax(0,1fr);
  grid-template-areas:"ico tit bt" "txt txt txt";padding:22px 24px}
.lc-ico{grid-area:ico;width:var(--cx-cartao);height:var(--cx-cartao);border-radius:var(--cx-raio);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--cx-fundo-azul);color:var(--branco)}
.lc-ico svg{width:var(--ic-texto);height:var(--ic-texto);display:block}
/* A QUEBRA DO TÍTULO É DO NAVEGADOR, E NÃO MAIS ESCRITA À MÃO.
   Até 02/09/2026 cada título trazia um <br> no HTML, porque numa linha
   só ele comia 230px e espremia o subtexto ao lado. Com o subtexto na
   linha de baixo esse motivo acabou, e o <br> passou a atrapalhar: ele
   deixava "E no seu site?" quebrado em duas linhas sem necessidade.

   Agora quem decide é o text-wrap:balance, que distribui as palavras
   igualmente entre as linhas em vez de encher a primeira e largar uma
   sobra na segunda. Foi pedido do Edu, com essas palavras: distribuir o
   texto de forma uniforme.

   O TETO DE 26ch É O QUE SEGURA O BOTÃO NO LUGAR. Sem ele, um título
   longo estica a coluna max-content e empurra o botão para fora da
   borda. Com ele, os 30 títulos do blog caem em uma ou duas linhas. */
.legal-contato.lc-grade h2{grid-area:tit;margin:0;font-size:18px;line-height:1.32;
  max-width:26ch;text-wrap:balance}

/* O NEGRITO DENTRO DO BLOCO ESCURO herda a cor do bloco.
   Sem isto vale ".legal-wrap strong", que pinta de azul-marinho escuro:
   ótimo no texto da página, e quase invisível sobre o fundo azul. O nome
   do Encarregado ficou ilegível assim, com contraste de 1,4 para 1 onde a
   norma pede 4,5. */
.legal-contato strong{color:inherit}
/* O SUBTEXTO OCUPA A LINHA INTEIRA, e a divisória é a borda de cima.
   Era flex, para centrar o texto na altura da barrinha vertical, e o
   flex trazia uma armadilha: cada filho virava um item da linha, então
   um <strong> no meio do parágrafo o quebrava em três colunas lado a
   lado, o que aconteceu na página de direitos, onde o nome do
   Encarregado é negrito. Voltando a display:block a armadilha
   desaparece. O <span> que embrulha o conteúdo continua no HTML e é
   inofensivo; não vale mexer em 33 páginas para tirar. */
.legal-contato.lc-grade .lc-txt{grid-area:txt;align-self:start;margin:0;
  display:block;font-size:14.5px;line-height:1.55;
  border-top:1px solid var(--branco-12);padding-top:15px}
.legal-contato.lc-grade .lc-txt > span{display:block}
/* O botão fica na ponta direita da primeira linha, na altura do título.
   O text-wrap:balance vale para ele pela mesma razão do título: rótulo
   que quebra deixa as duas linhas com o mesmo peso, em vez de uma cheia
   e uma sobrando. Alinhado à esquerda para que, quando quebrar, as duas
   linhas comecem no mesmo ponto e o ícone fique centrado contra elas. */
.legal-contato.lc-grade .lc-bt{grid-area:bt;justify-self:end;align-self:center;
  text-align:left;line-height:1.3;text-wrap:balance}

/* Em tela estreita nem título e botão cabem lado a lado: o botão desce
   para depois do subtexto e a primeira linha fica só com o ícone e o
   título. A divisória horizontal continua onde estava, entre o título e
   o subtexto, então a leitura em duas partes se mantém.

   A MEDIDA ABAIXO PERGUNTA PELA JANELA, E NÃO PELA LARGURA DO BLOCO.
   Isso já produziu um defeito: o desenho antigo, de quatro colunas,
   entrava acima de 900px de janela dentro de um bloco de 712px, e a
   coluna do subtexto colapsava para 109px. O desenho de hoje não corre
   esse risco, porque a primeira linha precisa de cerca de 578px e o
   bloco tem 712 em qualquer janela a partir de 808. Se um dia a largura
   do artigo mudar, é esta conta que precisa ser refeita.

   O PONTO DE QUEBRA ERA 700px E ESTAVA MENTINDO (corrigido em 31/08/2026).
   Quatro colunas numa faixa de 710px não cabem: medindo as caixas do
   artigo de pessoa idosa nessa largura, o título ficava com 205px e o
   subtexto com 208px, ou seja, o texto de 25 palavras caía em SETE linhas
   numa coluna mais estreita que o título ao lado. O bloco ficava mais alto
   do que largo, que é exatamente o problema que este desenho existe para
   resolver.

   900px é onde ele passa a funcionar de verdade, medido e não chutado:
     760px de página -> subtexto com 208px, 7 linhas
     840px           -> 288px, 4 linhas
     880px           -> 328px, 3 linhas
   O `.legal-wrap` hoje tem 760px de máximo, então na prática o bloco
   empilha em todo lugar. As quatro colunas voltam sozinhas se a largura
   do artigo subir (tarefa da largura de página x largura de prosa), e é
   por isso que elas ficam aqui em vez de serem apagadas. */
@media (max-width:900px){
  .legal-contato.lc-grade{grid-template-columns:auto 1fr;
    grid-template-areas:"ico tit" "txt txt" "bt bt";row-gap:14px}
  .legal-contato.lc-grade .lc-txt{border-left:0;padding-left:0;display:block}
  .legal-contato.lc-grade .lc-bt{justify-self:start}
}
/* Mesma armadilha do .legal-wrap a, e aqui ao contrário: sem o :not(.btn)
   o texto do .btn-claro ficava branco sobre fundo branco. */
.legal-contato a:not(.btn){color:var(--branco);font-weight:600}

/* Botão dentro do bloco escuro. O .btn-primary é azul-marinho e sumiria
   no fundo, então aqui ele inverte: fundo branco, letra da marca. */
.btn-claro{display:inline-block;background:var(--branco);color:var(--azul);border:1.5px solid var(--branco);
  border-radius:var(--radius-sm);padding:12px 22px;font-weight:700;font-size:15px;text-decoration:none}
.btn-claro:hover{background:var(--branco-95);text-decoration:none}

/* Botão com ícone. O display vai aqui e não no .btn, que é do site inteiro:
   mexer nele mudaria todo botão da home sem necessidade.
   O ícone segue o padrão do projeto (contorno, viewBox 24, traço 1.8,
   currentColor), então ele acompanha a cor do texto do botão sozinho. */
.btn-ico{display:inline-flex;align-items:center;gap:9px}
.btn-ico svg{width:17px;height:17px;flex:none}

/* Chamada no meio do texto, para a porta não depender de a pessoa
   reparar num link dentro do parágrafo. */
.legal-cta{margin:22px 0 26px}

/* CHAMADA DE FECHO (.cta-fim)
   Quando o botão é a última coisa da página, e não uma porta no meio do
   caminho, ele muda de comportamento: centraliza, porque é o fim da
   leitura e não tem texto ao lado para acompanhar a margem, e perde a
   margem de baixo.
   Perder essa margem é o que deixa o espaçamento UNIFORME entre as
   quatro páginas: as outras terminam no bloco de contato, que encosta
   nos 96px de `padding-bottom` do .legal-wrap. Com margem própria aqui,
   esta página tinha 26px a mais que as outras antes do rodapé. */
.legal-cta.cta-fim{margin:34px 0 0;text-align:center}

/* Aviso curto no meio do texto, para o que a pessoa não pode deixar passar.
   Chamava-se .legal-nota e colidia com uma classe de mesmo nome no
   styles.css, usada na home, que tem `strong{display:block}` para servir
   de título. O resultado é que o negrito no meio da frase quebrava linha
   sozinho e o ponto final ficava órfão na linha seguinte. Nome próprio
   resolve, e mexer no styles.css estragaria a home. */
/* Botão que se comporta como palavra: é um <button> porque a ação é
   abrir um painel e não navegar, mas dentro de uma frase ele tem que ser
   indistinguível do texto ao redor, menos pelo sublinhado.
   `font:inherit` é o que apaga a cara de botão do navegador; sem ele o
   trecho sai em outra fonte e outro tamanho no meio do parágrafo.
   Na impressão vira texto comum: sublinhado em papel promete um clique
   que não existe. */
.legal-linkbt{font:inherit;color:var(--azul);font-weight:700;background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.legal-linkbt:hover{color:var(--azul-escuro)}
.legal-linkbt:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:3px}
@media print{.legal-linkbt{text-decoration:none;color:inherit}}

/* ---------- ÍNDICE DO BLOG ----------
   Lista de artigos, no mesmo miolo de 760px das páginas legais: o blog não
   é uma seção à parte do site, é a mesma sala com outro conteúdo.
   Separador por borda embaixo, e não cartão: cartão pediria imagem de capa,
   e a gente não tem nem vai inventar banco de imagem para isso. */
/* ETIQUETA DE FORÇA NORMATIVA.
   Nasceu de uma revisão externa em 28/08/2026, e virou assinatura
   editorial: em tema jurídico, o defeito mais comum e mais caro é
   apresentar recomendação como se fosse obrigação. A etiqueta obriga quem
   escreve a decidir em qual das três caixas a frase cabe, e obriga quem lê
   a ver a diferença sem precisar confiar na nossa palavra.

   ATUALIZADO EM 23/09/2026 (Edu): a etiqueta entrou na régua da pílula que
   não se clica, a mesma do app e do back. Contorno e ponto na cor, e a cor diz
   o que o trecho é para a empresa: azul é a lei ou a fonte (Obrigação, a
   citação, a orientação da ANPD); âmbar é o que depende (Nossa recomendação,
   Recomendação da ANPD, Ainda cabe recurso); verde é o que conta a favor
   (Flexibilização, Conta a seu favor); vermelho é o que joga contra (Erro
   comum). Recomendação continua separada de obrigação, agora pela cor. As
   cores ficam no bloco "A PÍLULA QUE NÃO SE CLICA", no fim desta folha. */
.selo-norma{display:inline-flex;align-items:center;justify-content:center;
  height:var(--pil-rotulo);font-size:10px;font-weight:600;line-height:1;
  padding:0 8px;border-radius:999px;vertical-align:2px;margin-right:7px;
  letter-spacing:.2px;white-space:nowrap}

/* A ETIQUETA SOBE PARA UMA FAIXA ACIMA DA CAIXA, NUNCA NO MEIO DO TEXTO.
   (decidido pelo Edu em 28/08/2026, olhando o artigo de cookies)

   Antes a pílula era inline e podia cair em qualquer ponto do parágrafo.
   Duas coisas quebravam:

   1. LEITURA. A pílula tem borda, peso 700 e caixa própria. No meio de
      uma frase ela funciona como um pedágio: o olho para, decodifica a
      etiqueta e volta. Uma vez tudo bem; espalhadas, o parágrafo vira
      uma sequência de solavancos.

   2. PREVISIBILIDADE. Com a etiqueta solta no texto, quem lê não sabe
      onde procurar a força normativa daquele trecho. Na faixa, ela está
      sempre no mesmo lugar: antes de entrar na caixa, a pessoa já sabe
      se aquilo é a lei falando ou a gente.

   A faixa fica DENTRO da caixa, como primeira linha dela (o Edu pediu
   assim, e está certo: por fora ela parecia uma legenda solta, sem dono).
   Ela vem ANTES do ícone no HTML, de propósito. O ícone flutua à
   esquerda; se a faixa viesse depois, o ícone subiria para o lado da
   pílula e a frase perderia quem a apresenta. Vindo antes, a faixa ocupa
   a linha inteira e o ícone continua abrindo o texto, como sempre.

   A REGRA QUE MANTÉM ISSO HONESTO: a faixa pode listar mais de uma
   etiqueta quando a caixa realmente mistura, mas aí a PROSA precisa
   marcar onde ela vira opinião nossa ("isso é implementação nossa, e não
   texto da ANPD"). A faixa resume, o texto atribui. Sem essa frase, duas
   etiquetas no topo escondem justamente a distinção que elas existem
   para fazer, e aí é caso de partir em duas caixas. */
/* ETIQUETA E ÍCONE NÃO CONVIVEM NA MESMA CAIXA (Edu, 28/08/2026).

   Os dois fazem o mesmo trabalho: dizer, antes do texto, que tipo de
   caixa é aquela. Juntos viram duas apresentações da mesma coisa, e o
   ícone perde, porque a etiqueta é explícita e ele é interpretação.

   A regra, e ela vale SÓ nos artigos do blog:
     caixa COM etiqueta  ->  sem ícone (a .lo-ico sai junto com o <svg>)
     caixa SEM etiqueta  ->  com ícone, que ali é o único marcador

   Nas páginas legais do site (Aviso, Cookies, Direitos, Quem somos) nada
   muda: lá não existe etiqueta de força normativa, e o ícone continua
   sozinho no papel dele. */
/* O RESPIRO ABAIXO DA PÍLULA (Edu, 28/08/2026: "está muito colada na
   linha"). Eram 11px e ficou apertado, porque a pílula tem borda e o
   texto começa em negrito: as duas coisas pesam, e coladas competem.

   Os 15px não são gosto, são a conta: a caixa tem 14px de padding em
   cima, então com 15 aqui a etiqueta fica com folga parecida acima e
   abaixo dela, em vez de parecer empurrada contra o texto. */
.selo-faixa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 15px}
.selo-faixa .selo-norma{margin-right:0}
/* Em papel a etiqueta perde a cor de fundo e viraria caixa vazia. */
@media print{.selo-norma{border:0;padding:0;font-weight:600;color:inherit;background:none}
  .selo-norma::after{content:":"}}

/* A FRASE-RESPOSTA que abre o artigo e cada seção. Ela é o pedaço que um
   buscador ou uma resposta de IA arranca da página, então precisa se
   sustentar sozinha, fora do contexto.
   Um fio à esquerda e nada mais: nem caixa nem fundo. Caixa faria parecer
   um aviso à parte, e isso é o texto principal, só que a parte dele que
   responde. Quem lê corrido nem repara; quem varre a página lê só isso. */
.artigo-resposta{border-left:3px solid var(--verde);padding-left:16px;
  font-size:16.5px;line-height:1.7;color:var(--tinta);margin:0 0 20px}
.artigo-resposta strong{color:var(--tinta)}

/* `.legal-wrap .blog-lista` e não `.blog-lista`, e o motivo é cascata.
   O `.legal-wrap ul` logo acima declara `padding-left:22px` para as
   listas com marcador do texto, e ele tem especificidade (0,1,1) contra
   (0,1,0) desta regra: o `padding:0` daqui PERDIA, e a lista de cards
   carregava um recuo de 22px pensado para bullet.

   O defeito é antigo e ninguém tinha visto, porque com a coluna estreita
   os 22px passavam por margem. Ficou evidente em 31/08/2026, quando os
   cards passaram a ocupar a largura da página e ficaram visivelmente
   deslocados em relação aos títulos de grupo. É a mesma família de
   problema que o testes/cascata-css.js vigia. */
.legal-wrap .blog-lista{list-style:none;padding:0;margin:26px 0 0}
/* O ÍCONE DO ASSUNTO, NA FRENTE DE CADA ARTIGO.

   O problema que ele resolve: o índice era uma parede de texto, cinco
   blocos de título mais resumo com o mesmo peso, e o olho não tinha onde
   se apoiar para escolher.

   POR QUE ÍCONE E NÃO MINIATURA (o Edu propôs imagem, em 28/08/2026, e a
   gente decidiu junto por aqui):

     a imagem que teríamos hoje seria de banco, e cairia no clichê que o
     próprio levantamento de SEO mandou não copiar. Num blog que promete
     texto sem enfeite, a primeira coisa na tela não pode ser enfeite;

     miniatura genérica não informa. Ocuparia um terço da linha para
     dizer menos do que o título já diz;

     e índice com miniatura vira revista, e revista puxa título de
     revista. O formato acaba mandando na escrita.

   O ícone marca o ASSUNTO, então ele carrega informação de verdade:
   biscoito é cookies, prancheta é questionário, loja é pequena empresa.
   Segue o padrão do projeto (traço 1.8, 24x24, cantos round, sem
   preenchimento), no mesmo distintivo arredondado do bloco de contato.

   Onde imagem faz sentido é DENTRO do artigo, como diagrama original, e
   isso continua no backlog. */
/* CADA ARTIGO NUM RETÂNGULO, pedido do Edu em 31/08/2026.
   Antes os cards eram separados por um filete embaixo de cada um. Agora
   cada um é uma caixa fechada, o que combina com o card inteiro ter
   virado área de clique: a moldura desenha ONDE se pode clicar, coisa
   que uma linha divisória não fazia.

   O AZUL DA BORDA É O BOTÃO DE AJUSTE deste bloco. Navy cheio em 28
   retângulos empilhados vira uma parede escura, e o `--tinta-15` que
   estava aqui antes é cinza e não leria como azul. O valor é o nosso
   navy diluído em branco, e a régua é esta:
     .35 -> #ABBBC7, sai mais cinza do que azul (foi a primeira tentativa)
     .50 -> #879EAF, lê como azul e não pesa   <- em uso
     .65 -> #638196, azul sem dúvida, começa a encorpar
   Um número só, e ele só existe nesta linha.

   NO HOVER A BORDA FECHA PARA O NAVY CHEIO. É o segundo sinal de que o
   card responde ao clique, junto com o sublinhado do título e a seta do
   "Ler o artigo" que já andavam. Sem pintar fundo: a lista tem 28
   itens, e fundo trocando de cor a cada passada de mouse vira festa. */
/* SEM GRADE AQUI, e a mudança é de 31/08/2026, junto com o pedido do
   Edu de o subtexto começar embaixo do ícone.

   O card era uma grade de duas colunas com o ícone esticado por todas
   as linhas. Para o resumo passar a começar na margem eu tentei
   `grid-column:1 / -1` nele, e a grade desandou: título saindo uma
   palavra por linha. Item que atravessa colunas entra no cálculo de
   largura das colunas intrínsecas, e declarar a primeira em 40px não
   resolveu.

   Em vez de insistir, o card passou a ter a MESMA estrutura do
   cabeçalho do grupo, logo acima da lista: o ícone mora DENTRO do
   título (lá o .bg-ico está dentro do <h2>, aqui o .bi-ico está dentro
   do <a>), e o que vem depois é irmão, em fluxo normal, começando na
   margem. Uma forma só para a mesma ideia na mesma página, e sem
   depender de grade para nada. */
.blog-item{
  padding:18px 20px;margin:0 0 14px;position:relative;
  border:1px solid var(--azul-fio);border-radius:var(--radius);
  background:var(--branco);transition:border-color .15s ease}
.blog-item:hover{border-color:var(--azul)}
/* No celular a coluna já é estreita e a moldura come largura útil dos
   dois lados. Aperta o recuo horizontal, mantém o vertical. */
@media (max-width:640px){
  .blog-item{padding:16px 14px}
}

/* O CARD INTEIRO CLICA, E CONTINUA SENDO UM LINK SÓ
   ------------------------------------------------------------
   Decidido com o Edu em 31/08/2026, junto com o "Ler o artigo". Antes
   só o texto do título clicava, que num card de três linhas é um alvo
   pequeno, principalmente no celular.

   A saída NÃO foi embrulhar o card no <a>: isso faria o leitor de tela
   anunciar título, resumo e data como se fossem o texto do link. Nem
   foi acrescentar um segundo link, que apontaria duas vezes para o
   mesmo artigo. O que se estica é o link que já existe, por um
   pseudo-elemento transparente que cobre o card. Resultado: um link, o
   título como texto dele, e a área de toque do card inteiro. O
   `:hover` do <a> passa a valer de qualquer ponto, então o sublinhado
   do título e a seta reagem ao card todo.

   O `inset:0` para na borda de baixo, porque o padding de 22px é do
   card e a margem de 22px é o vão entre cards. O vão continua morto,
   que é o certo: clicar no espaço entre dois cards não pode abrir
   nenhum dos dois.

   O PREÇO, e o Edu aceitou sabendo: o texto de dentro do card deixa de
   ser selecionável, porque a camada transparente fica na frente. Se um
   dia isso incomodar, a volta é o segundo link escondido do leitor de
   tela, que era a outra opção em cima da mesa. */
.blog-item > a::after{content:"";position:absolute;inset:0;z-index:1}
/* O ÍCONE OCUPA SÓ A LINHA DO TÍTULO (ajuste do Edu em 31/08/2026: "o
   subtexto começa abaixo dos ícones").

   É a mesma regra que já valia no cabeçalho do grupo, logo acima desta
   lista: lá o `.bg-ico` fica dentro do <h2> e a `.bg-sub` começa na
   margem, embaixo dele. O card fazia diferente, com o ícone esticado
   pelas três linhas e o resumo recuado para a direita, alinhado ao
   título. Duas formas para a mesma ideia na mesma página.

   Ganha-se largura de leitura de quebra: o resumo deixa de perder os
   56px do ícone mais o vão, o que no celular vale várias linhas.

   Antes era `grid-row:1 / span 3`, e o comentário aqui explicava por que
   não usar "1 / -1" em LINHA (sem grid-template-rows declarado, -1
   resolve para o fim da grade explícita, que é a linha 1, e o ícone
   encolheria). Em COLUNA o caso é outro: a grade tem duas colunas
   declaradas em grid-template-columns, então `1 / -1` no resumo e no
   rodapé atravessa as duas como se espera. */
/* O ÍCONE CENTRA NO TÍTULO INTEIRO, e não na primeira linha dele.

   Duas correções seguidas do Edu, em 31/08/2026, e a segunda desfez uma
   decisão minha. Vale guardar as duas porque o caso é sutil:

   1. "o título não está devidamente alinhado com o ícone". Era
      `align-items:flex-start`, que encosta os dois TOPOS, e topo com
      topo não é alinhamento quando as alturas diferem: o quadro tem
      40px e uma linha de título tem 21 x 1.35 = 28,35px. Corrigi com
      uma margem negativa que centrava o quadro na PRIMEIRA linha, e
      argumentei que era o certo, porque com título de duas linhas o
      ícone fica onde a leitura começa;
   2. "com uma linha está alinhado, com duas está desalinhado". O
      argumento era bonito e o resultado, não. Com uma linha, centrar na
      primeira linha é a mesma coisa que centrar no título todo, e fica
      certo; com duas, o quadro sobe e desequilibra o card. Como o
      título aqui tem uma ou duas linhas e o ícone é um quadro grande ao
      lado de um bloco curto, o olho compara o quadro com o BLOCO, não
      com a primeira linha.

   Então: `align-items:center` no link e NENHUMA margem no ícone. Os dois
   andam juntos, e é por isso que a margem não voltou: com `center`, quem
   é centralizado é a caixa de margem, então qualquer margem aqui
   desloca o quadro de novo e reabre o problema 1. */
.bi-ico{width:var(--cx-cartao);height:var(--cx-cartao);border-radius:var(--cx-raio);
  flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--azul-suave);color:var(--azul)}
.bi-ico svg{width:var(--ic-texto);height:var(--ic-texto);display:block}
/* O link é a linha do ícone mais o título. O resumo e o rodapé são
   irmãos dele e nascem na margem, embaixo do ícone.
   `center` e não `flex-start`: ver a conversa inteira no comentário do
   .bi-ico. Mudar isto aqui sem ler aquilo devolve o desalinhamento. */
.blog-item > a{display:flex;align-items:center;gap:16px}

/* ============================================================
   IMAGEM DENTRO DO ARTIGO  ·  .artigo-figura
   ------------------------------------------------------------
   Entrou em 31/08/2026, na mesma conversa em que a capa foi para o
   card. O lugar foi escolhido e está explicado no HTML do artigo: ela
   abre o CORPO, depois do sumário, e não a página.

   `figure` com margem zerada: o `.legal-wrap` já dá o ritmo vertical, e
   a margem que o navegador põe por padrão em `figure` (40px nas
   laterais!) empurraria a imagem para dentro da coluna, desalinhada de
   todo o resto do texto.

   `width:100%` mais `height:auto` com as medidas declaradas no HTML: a
   proporção fica reservada antes de a imagem chegar, então o texto
   abaixo não pula quando ela carrega. É o mesmo cuidado da capa do
   card, e aqui pesa mais, porque no meio do artigo o salto acontece
   embaixo dos olhos de quem já está lendo. */
.artigo-figura{margin:26px 0 22px}
.artigo-figura img{display:block;width:100%;height:auto;
  border-radius:var(--radius)}

/* LEGENDA (.af-legenda), e ela tem uma regra de conteúdo.
   Nasceu em 31/08/2026 num caso só, a tela de autodeclaração de idade do
   ECA Digital, e o Edu pediu para valer em toda figura no mesmo dia.

   A REGRA QUE FAZ ELA VALER A PENA: a legenda diz o que a imagem NÃO
   diz sozinha. Ela aponta para dentro da foto e nomeia o que está ali:
   quais daqueles papéis são dado sensível, o que naquela mesa dispensa
   autorização, qual palavra do bilhete é a que pesa. Legenda que repete
   o título ou descreve a cena ("mulher usando um notebook") é ruído, e
   ruído em toda página vira mobília que ninguém lê.

   A barrinha à esquerda é a mesma da citação de norma, e é de propósito:
   avisa que aquele texto comenta a imagem em vez de continuar o
   parágrafo. E o alt de figura com legenda NÃO é vazio: quem usa leitor
   de tela precisa saber o que a foto mostra para a legenda ter sujeito.

   .af-erro marcava a figura que ilustra o que a lei PROÍBE, e NENHUM artigo
   usa mais desde 03/09/2026. A única era a do ECA Digital, uma tela pedindo
   dia, mês e ano, e ela foi aposentada por decisão do Edu: o recurso cobrava
   quatro exceções (posição fora do padrão, proibição de prévia própria, um
   teste dedicado e uma abertura que contrariava o ângulo do texto) e ele
   notou a inconsistência varrendo o índice.
   A classe não tem regra de estilo própria, e por isso não sobra CSS morto
   aqui. Se o recurso voltar um dia, valem de novo as duas regras: a figura
   fica colada no trecho que ela contradiz, e NUNCA vira a prévia, porque a
   prévia viaja sem a legenda. O testes/blog.js reprova se alguém trouxer a
   classe de volta sem decidir. */
.artigo-figura.af-legenda img{border-bottom-left-radius:0;border-bottom-right-radius:0}
.artigo-figura figcaption{font-size:14px;line-height:1.6;color:var(--tinta-65);
  margin:0;padding:12px 16px;background:var(--tinta-04);
  border-left:3px solid var(--verde);
  border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}

/* ============================================================
   A CAPA DO CARD  ·  .bi-capa, e só nos cards com .tem-capa
   ------------------------------------------------------------
   HISTÓRICO, porque isto reverte uma decisão registrada. Em 28/08/2026
   o Edu propôs imagem no card e a gente decidiu junto por ícone, com
   três motivos escritos no comentário do .bi-ico: a imagem seria de
   banco, miniatura genérica não informa, e índice com miniatura vira
   revista (e revista puxa título de revista). Em 31/08 ele voltou ao
   assunto com uma imagem feita para o artigo e decidiu seguir: "todo
   blog usa imagem, pessoas leem imagem também". Dois dos três motivos
   deixaram de valer, porque a imagem é específica e informa; o terceiro
   continua de pé e é risco assumido. Registrado para a discussão não
   recomeçar do zero daqui a três meses.

   POSIÇÃO ABSOLUTA, E NÃO UMA COLUNA NA GRADE. O card não é grade (ver
   o comentário logo acima), e transformá-lo em grade de novo para
   caber a capa traria de volta o problema do resumo atravessando
   colunas. Absoluta resolve com um elemento e nenhuma mudança de
   estrutura: ela ocupa a faixa da direita de cima a baixo, e o
   `padding-right` do card abre o lugar dela.

   O PADDING SÓ VALE COM `.tem-capa`. Sem isso os 27 cards ainda sem
   imagem ficariam com um vão vazio à direita, que é pior do que não ter
   capa nenhuma. A classe anda junto com a `<img>`, e o teste cobra as
   duas: uma sem a outra é card torto.

   `object-fit:cover` porque a altura do card varia com o resumo (duas a
   quatro linhas) e a imagem precisa preencher sem distorcer. A origem é
   quadrada e recortada no assunto, então sobra material dos dois lados. */
/* A CAPA RESPEITA O RECUO DO CARD, como todo o resto que mora dentro
   dele. A primeira versão a colava nas bordas (`top/right/bottom:0`) e
   ela encostava na moldura azul, destoando do título, do resumo e do
   rodapé, que têm 18px em cima e embaixo e 20px nas laterais. O Edu
   pegou por print: "dá um respiro nas bordas igual está todo o resto
   dentro do retângulo".

   Os números não são soltos, são o recuo do próprio card repetido:
   18px em cima e embaixo, 20px à direita. E o `padding-right` que abre
   o lugar dela é a soma explícita do que existe naquela faixa: o recuo
   do card, a largura da imagem e o vão entre ela e o texto.

   O canto arredondado deixou de ser só o par da direita: solta no meio
   do card, ela precisa dos quatro, no raio pequeno dos elementos
   internos, e não no raio grande da moldura. */
.blog-item.tem-capa{padding-right:calc(20px + 190px + 20px)}
/* A ALTURA É CALCULADA, e não `auto` com `bottom`. Elemento substituído
   (<img>) tem proporção própria: com `height:auto` ele resolve a altura
   pela razão da imagem e o `bottom` é ignorado por sobre-restrição. O
   resultado era um quadrado de 190px no topo, com sobra embaixo em card
   de resumo longo. `calc(100% - 36px)` é a altura do card menos os dois
   recuos de 18px, e o `object-fit:cover` recorta o que não couber. O
   `bottom` fica declarado porque documenta a intenção, mesmo sem mandar
   na conta. */
.bi-capa{position:absolute;top:18px;right:20px;bottom:18px;width:190px;
  height:calc(100% - 36px);
  object-fit:cover;border-radius:var(--radius-sm);display:block}

@media (max-width:640px){
  /* No celular não sobra largura para faixa lateral: 190px de imagem
     deixariam o título saindo uma palavra por linha. A capa volta ao
     fluxo e vira uma faixa em cima, que é onde ela nasce no HTML.

     DE PROPÓSITO SEM SANGRIA. A versão anterior puxava a imagem para
     fora do recuo do card com margem negativa, para ela encostar nas
     bordas. Ficou fora, e o motivo é honesto: neste ambiente não há como
     ver o resultado, porque o WeasyPrint IGNORA media query de largura
     (verificado em 31/08/2026: ele renderiza o estado desktop em
     qualquer largura de página). Truque que eu não consigo conferir não
     entra; imagem dentro do recuo, com canto arredondado, resolve o
     mesmo problema sem depender de sorte.

     O `padding-right` volta ao normal do card, senão sobra o vão que
     existia para a faixa lateral. */
  .blog-item.tem-capa{padding-right:14px}
  .bi-capa{position:static;width:100%;height:150px;
    border-radius:var(--radius-sm);margin:0 0 14px}
}
/* A CATEGORIA SAIU DO CARD EM 30/08/2026 e virou título de grupo.

   O que existia aqui era a .blog-cat, um chapéu de editorial em cima do
   título de cada card. A decisão e o motivo estão no comentário do
   próprio index.html; em resumo: com 22 artigos, repetir a mesma palavra
   em cada card parou de informar e passou a ocupar espaço, e a lista
   deixou de caber na tela, que era a condição escrita para não agrupar.

   O QUE FOI PRESERVADO DAQUELA DECISÃO, porque continua valendo:
   nenhuma cor por categoria. Colorir "Quando algo acontecer" de vermelho
   seria semáforo, e semáforo no projeto é privilégio do diagnóstico de
   risco. Os quatro grupos usam a mesma tinta.

   A regra "categoria não é link para página própria" também sobreviveu:
   os atalhos abaixo são âncoras desta mesma página. Nenhuma URL nova. */
/* O último não tem mais filete para apagar, mas continua sem a margem
   de baixo: quem fecha o espaçamento do grupo é o .blog-grupo. */
.blog-item:last-child{margin-bottom:0}
.blog-item a{text-decoration:none}
.blog-item h3{margin:0;font-size:21px;line-height:1.35;color:var(--azul);font-weight:700}
.blog-item a:hover h3{text-decoration:underline}

/* O FILTRO E OS GRUPOS DA LISTA.

   AS PÍLULAS SÃO AS DA CENTRAL DE AJUDA. Os valores abaixo são cópia da
   .zt-aba do app/demo.html: borda de 1px em tinta-15, fundo branco,
   raio 999, 7px por 14px, 12.5px/600, e a ATIVA preenchida de navy com
   texto branco. Se um dia a do app mudar, esta muda junto, senão o
   mesmo controle passa a ter dois desenhos no mesmo produto.
   O estado ativo preenchido não é enfeite: sem ele as pílulas ficam
   todas iguais e nenhuma parece selecionada, que foi o defeito da
   primeira tentativa desta barra, em 30/08/2026.

   FIXA AO ROLAR, como a .zt-fixo do app: mesma ideia de sticky com
   fundo branco e linha navy embaixo. O topo é 136px, que é a altura do
   cabeçalho (91) mais a da faixa de título (45); é o mesmo par de
   números que produz o 150 do scroll-margin-top, e se um deles mudar,
   os dois lugares mudam juntos.

   SEM scroll-margin-top NOS TÍTULOS DE GRUPO. Uma versão anterior tinha
   e estava errada: .legal-wrap h2 já define 150px, e o bloco do título
   fixo avisa que aquela é a ÚNICA regra de scroll-margin do arquivo.
   Uma segunda com a mesma especificidade venceria em silêncio. */
/* UMA LINHA SÓ, por decisão do Edu em 30/08/2026. A .zt-abas do app
   quebra em várias linhas (flex-wrap:wrap); aqui a fila é única.
   Como quatro pílulas não cabem na largura do celular, a saída é rolar
   na horizontal em vez de quebrar: nowrap mais overflow-x. A barra de
   rolagem fica escondida porque ela apareceria por cima da última
   pílula em alguns sistemas, e o gesto de arrastar já é conhecido.
   flex:none e nowrap nas pílulas: sem isso o flex encolhe cada uma até
   o texto quebrar no meio da palavra, que é pior do que rolar. */
/* O 136 continua sendo o padrão (91 do cabeçalho + 45 da faixa), e
   vale para qualquer página com a faixa flutuante. No índice do blog a
   faixa foi desligada e quem gruda é a linha do título, então lá o
   valor vem de `--topo-abas`, medido pelo blog-busca.js. O fallback é
   o 136 de sempre, para a barra nunca ficar sem topo se o script não
   rodar. */
/* O RESPIRO EM CIMA VEIO DA CENTRAL, em 03/09/2026, pelo mesmo motivo que a
   medida da pílula veio de lá: esta barra imita a `.dc-tabs`, então copia a
   medida em vez de inventar uma.
   O QUE ESTAVA ERRADO: aqui eram 10 de margem mais 12 de recheio, 22 no
   total, contra 6 da Central (`margin:0` na .dc-tabs e o
   `.view-head.fixa + .dc-tabs{padding-top:6px}`). Com o cabeçalho encolhido
   isso somava 8 de recheio dele mais os 22, e sobrava um vão medido em 24px
   no print do Edu, bem no alto, que é onde mais custa.
   POR QUE NÃO USEI O SELETOR DE IRMÃO ADJACENTE como a Central faz: entre a
   `.blog-cabeca` e esta barra existe o contador de resultados da busca
   (`.bb-conta`), então não são irmãs imediatas e o `+` não alcança. O valor
   entra direto, e este comentário é que guarda a origem dele.
   O recheio de BAIXO fica em 10 de propósito: o vão embaixo das pílulas foi
   medido em 13px e está certo. Mexer nele seria consertar o que não quebrou. */
.blog-filtro{position:sticky;top:var(--topo-abas,136px);z-index:9;display:flex;flex-wrap:nowrap;gap:8px;
  margin:0;padding:6px 0 10px;background:var(--branco);border-bottom:2px solid var(--azul);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.blog-filtro::-webkit-scrollbar{display:none}
.blog-filtro[hidden]{display:none}
/* MEDIDA COPIADA DA `.dc-tabs button` DO APP, que é a barra de abas da
   Central de ajuda. Estava com a medida da `.zt-aba`, que é a pílula da
   trilha do diagnóstico: existem DUAS pílulas no app e o blog tinha
   pegado a maior, ficando 2px mais alta e 3px mais larga de cada lado
   que a barra que ela imita. Pego pelo Edu em 01/09/2026.
   `line-height` explícito porque <button> não herda a do corpo: sem
   dizer, o valor vem do navegador e a altura passa a depender dele. */
/* Aba do blog: e BOTAO, e desde 07/09/2026 se anuncia como tal. Tinha letra
   cinza e fio cinza claro, do tempo em que parecia etiqueta; agora usa o fio
   e o veu do botao neutro, na medida da pilula normal. */
.bf-aba{flex:none;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--azul-fio);background:var(--branco);border-radius:999px;
  height:var(--pil-acao);padding:0 13px;font-size:12px;font-weight:600;color:var(--azul);
  cursor:pointer;font-family:inherit;line-height:1;
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.bf-aba:hover{background:var(--azul-suave);border-color:var(--azul)}
.bf-aba.ativa{background:var(--azul);color:var(--branco);border-color:var(--azul)}
/* BUSCA DO ÍNDICE  ·  .blog-busca
   Mesmo desenho do campo da Central de ajuda (.busca-campo no app):
   lupa fixa à esquerda, botão de limpar à direita, campo com recuo dos
   dois lados para o texto não passar por baixo dos ícones.

   Ela fica ACIMA da barra de abas e NÃO é sticky. A barra gruda porque
   quem filtra por momento troca de aba várias vezes; quem busca digita
   uma vez e lê o resultado. Campo grudado no alto seria uma segunda
   coisa fixa disputando a mesma faixa de tela com o cabeçalho e a
   barra, e no celular sobraria pouca altura para os cards.

   `[hidden]` nas três peças: elas nascem escondidas no HTML e quem
   mostra é o JS, pela mesma razão do filtro. Sem script, a página
   continua inteira e o Ctrl+F do navegador continua achando tudo. */
/* A LINHA DO TÍTULO GRUDA, e leva a busca junto (01/09/2026).
   O campo tem que continuar à mão enquanto a pessoa desce os 29 cards.
   Colocar só o campo como sticky não funciona: sticky respeita o pai, e
   um pai curto solta o filho quase na hora. Então quem gruda é a LINHA.

   O h1 vai junto, e isso é de propósito: ele passa a rotular a barra
   grudada. Em troca, a faixa flutuante do titulo-fixo.js é desligada
   nesta página, senão seriam dois "Blog" um em cima do outro.

   `--topo-abas` é lido pela barra de abas logo abaixo. Ele é escrito
   pelo blog-busca.js com a altura MEDIDA desta linha, porque ela muda
   de altura conforme a largura da tela e um número fixo aqui
   envelheceria calado, que é o defeito que o comentário do 136px já
   descreve no filtro. */
/* A RECEITA É A DA CENTRAL DE AJUDA (.view-head.fixa no app), e as
   quatro partes dela importam juntas:

   1. flex com o título à esquerda e a busca à direita, alinhados pela
      base (align-items:flex-end), que é como o campo fica na linha do
      título em vez de flutuar no meio dela;
   2. ::before sangrando 24px para cada lado. O `.legal-wrap` tem 24px
      de padding, e sem o sangramento o conteúdo aparece rolando pelas
      frestas laterais por baixo da barra;
   3. ENCOLHE AO ROLAR: some o subtítulo e o h1 diminui. É o que impede
      a barra de comer um terço da tela num índice de 29 cards, e é a
      parte que faltava na primeira versão desta página;
   4. sem borda embaixo, porque a barra de abas logo abaixo já tem a
      linha azul. Duas linhas azuis empilhadas viram moldura.

   O gatilho de encolher é uma marca invisível de 1px ACIMA do
   cabeçalho (#vh-marca, que já existia aqui para a faixa flutuante), e
   NÃO a posição do próprio cabeçalho. O motivo está escrito no app e
   vale repetir: encolher muda a altura da página, que muda a rolagem;
   comparar com a própria altura cria laço e a tela treme. A marca não
   se move quando o cabeçalho encolhe, então não há realimentação. */
/* MENOS RESPIRO NO ALTO, SÓ NO ÍNDICE (01/09/2026).
   Os 40px de `.legal-wrap` foram pensados para o artigo, que é um
   documento e começa com o título respirando. Aqui embaixo do respiro
   vem uma barra que gruda no cabeçalho do site assim que a pessoa
   rola: os 40px viram espaço morto entre duas coisas fixas, e ele
   aparece justamente na primeira tela.
   Fica valendo 40 em todo o resto: isto é regra do índice, não do
   arquivo. */
.blog-indice{padding-top:18px}
.blog-indice.artigo h1::before{margin-bottom:12px}
@media (max-width:640px){ .blog-indice{padding-top:14px} }

/* PARADO NÃO TEM RECHEIO, GRUDADO TEM.
   O respiro em cima e embaixo existe para a barra não encostar no
   cabeçalho do site quando ela para lá em cima. Enquanto ela é só o
   título da página, esse recheio é espaço sobrando, e sobrando bem no
   alto, que é onde mais custa.
   O estado "grudado" já tem nome aqui: é a classe `encolhida`, que o
   script liga quando a marca de 1px passa por baixo do cabeçalho.
   Então o recheio mora nela.

   TENTAMOS TIRAR O ENCOLHIMENTO em 03/09/2026 e o Edu mandou voltar: sem
   ele o título fica grande e a barrinha verde continua ocupando a barra
   grudada. Fica registrado para não relitigar. */
/* GRADE, E NÃO FLEX, DESDE 03/09/2026.
   O que estava errado: era flex com align-items:flex-end e o título vinha
   embrulhado num div. Alinhar pelo FIM desse embrulho põe a barra na altura
   da ÚLTIMA linha dele, o subtítulo, e não na do "Blog". Medido na página no
   ar a 1280 de largura: o centro da barra caía 44px abaixo do centro do h1 e
   a 6px do centro do subtítulo.
   Com grade os três viram irmãos: h1 e busca dividem a primeira linha e se
   centram um pelo outro, o subtítulo fica na segunda e ocupa a largura toda.
   Isso resolve o encolhimento de brinde: quando o h1 vai para 19px e o
   subtítulo some, a barra continua centrada no que sobrou, sem número mágico
   e sem depender de quantas linhas o título tem. */
.blog-indice .blog-cabeca{position:sticky;top:var(--topo-site);z-index:20;
  background:var(--branco);display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:20px;row-gap:0;padding:0;margin:0 0 18px}
.blog-indice .blog-cabeca::before{content:"";position:absolute;left:-24px;right:-24px;
  top:0;bottom:0;background:var(--branco);z-index:-1}
.blog-indice .blog-cabeca h1{grid-column:1;grid-row:1;margin:0;
  transition:font-size .15s ease}
.blog-indice .blog-cabeca .blog-busca{grid-column:2;grid-row:1;
  width:340px;max-width:100%;margin:0}
/* Encolhida: o mesmo par de números da Central (19px no h1), para quem já
   usou o app reconhecer o gesto. */
.blog-indice .blog-cabeca.encolhida{padding:10px 0 8px;margin-bottom:0}
.blog-indice .blog-cabeca.encolhida h1{font-size:19px}
/* A barrinha verde é o acento do título DA PÁGINA. Numa barra compacta
   e grudada ela gasta uma fileira inteira sem informar nada, então sai. */
.blog-indice .blog-cabeca.encolhida h1::before{display:none}
@media (prefers-reduced-motion: reduce){
  .blog-indice .blog-cabeca h1{transition:none}
}
/* No celular o campo cai para baixo do título e ocupa a linha inteira.
   Encolhido, sobra título pequeno em cima e campo embaixo, que é o
   mínimo aceitável de barra grudada num telefone. */
@media (max-width:640px){
  /* Uma coluna só, e a ORDEM MUDA de propósito: título, subtítulo, campo.
     Na grade de duas colunas a busca divide a primeira linha com o h1; aqui
     ela vai para a terceira, senão o campo se enfiaria entre o título e o
     subtítulo, que é a ordem do HTML e não a de leitura. */
  .blog-indice .blog-cabeca{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .blog-indice .blog-cabeca h1{grid-column:1;grid-row:1}
  .blog-indice .blog-cabeca .blog-busca{grid-column:1;grid-row:2;width:100%}
}

.blog-busca{position:relative;max-width:420px;margin:24px 0 0}
.blog-busca[hidden]{display:none}
.bb-lupa{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  display:flex;color:var(--tinta-65);pointer-events:none}
.bb-campo{width:100%;box-sizing:border-box;font-family:inherit;font-size:14.5px;
  color:var(--tinta);border:1.5px solid var(--tinta-15);border-radius:var(--radius-sm);
  padding:10px 36px 10px 38px;transition:border-color .15s ease}
.bb-campo:focus{outline:none;border-color:var(--azul)}
/* O X só existe quando há o que limpar: botão que não faz nada é ruído,
   e aqui ele ficaria em cima do texto do placeholder. */
.bb-limpar{position:absolute;right:7px;top:50%;transform:translateY(-50%);
  border:0;background:none;padding:5px;display:flex;color:var(--tinta-65);
  cursor:pointer;border-radius:6px;transition:color .15s ease}
.bb-limpar:hover{color:var(--azul)}
.bb-limpar[hidden]{display:none}
/* A contagem responde "a busca funcionou?" antes de a pessoa varrer a
   lista com os olhos. Ela vive fora do campo para não empurrar o
   layout quando aparece e some. */
.bb-conta{margin:10px 0 0;font-size:13px;color:var(--tinta-65)}
.bb-conta[hidden]{display:none}
.bb-conta b{color:var(--tinta);font-weight:600}
/* Zero resultado precisa de saída, senão a pessoa fica com a lista
   vazia e o campo cheio, sem saber que o culpado é o termo. */
.bb-vazio{margin:20px 0 0;padding:18px 20px;background:var(--tinta-04);
  border-left:3px solid var(--azul);border-radius:var(--radius)}
.bb-vazio[hidden]{display:none}
.bb-vazio p{margin:0;font-size:14.5px;color:var(--tinta-72)}
.bb-vazio button{margin-top:10px;border:1px solid var(--azul-fio);background:var(--branco);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;height:var(--pil-acao);padding:0 13px;font-size:12px;line-height:1;font-weight:600;
  color:var(--azul);cursor:pointer;font-family:inherit;
  transition:border-color .15s ease,background .15s ease}
.bb-vazio button:hover{background:var(--azul-suave);border-color:var(--azul)}
/* Card que não casou com o termo. Classe própria em vez de [hidden]
   porque o filtro por momento já usa [hidden] nos GRUPOS, e misturar
   os dois faria um esconder o que o outro quer mostrar. */
.blog-item.bb-fora{display:none}

.blog-grupo{margin:34px 0 0}
.blog-grupo[hidden]{display:none}
/* FILTRADO, O TÍTULO DO GRUPO SAI DA TELA.

   Com filtro ligado sobra um grupo só, e a pílula ativa, preenchida de
   navy logo acima, já diz o nome dele. Repetir a mesma expressão dois
   centímetros abaixo é dizer duas vezes, que é o mesmo defeito da
   etiqueta no card e o motivo de a gente não ter tag. O Edu pegou isso
   num print em 30/08/2026.

   A redundância é CONDICIONAL, e a solução também: sem filtro, quem
   rola a lista inteira precisa dos títulos, que são os separadores
   entre os quatro momentos. Por isso a regra vive na classe `filtrado`,
   ligada pelo blog-filtro.js, e não no CSS do grupo.

   `.sr-only` e não `display:none`: a <section> é rotulada pelo id do
   h2 (aria-labelledby), então apagar o elemento tiraria o nome da
   seção de quem usa leitor de tela. Some da vista, continua no
   documento. A .sr-only já existe no styles.css, não é utilitário novo.

   A LINHA DE DESCRIÇÃO CONTINUA. Ela não repete a pílula: diz em que
   situação a pessoa está ("para o dia em que alguém pede, cobra ou
   reclama"), que é justamente o que o nome do momento não conta. */
.filtrado .bg-tit{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0}
.filtrado .bg-sub{margin-top:0}
.bg-tit{display:flex;align-items:center;gap:10px;margin:0;font-size:19px;
  line-height:1.3;color:var(--azul)}
.bg-ico{display:flex;align-items:center;justify-content:center;flex:none;width:var(--cx-denso);height:var(--cx-denso);border-radius:var(--cx-raio);
  width:30px;height:30px;border-radius:8px;background:var(--azul-suave);color:var(--azul)}
.bg-ico svg{width:var(--ic-botao);height:var(--ic-botao);display:block}
.bg-sub{margin:6px 0 0;font-size:14px;color:var(--tinta-65);line-height:1.45}
.blog-grupo .blog-lista{margin-top:18px}
@media (max-width:600px){
  .bg-tit{font-size:17px}
}
/* `.legal-wrap .blog-resumo` e não `.blog-resumo`, pelo mesmo motivo da
   `.blog-lista` mais acima: o `.legal-wrap p{margin:0 0 14px}` tem
   especificidade (0,1,1) e vencia esta regra (0,1,0). Os dois parágrafos
   do card NUNCA usaram a própria margem; usavam a dos parágrafos do
   texto corrido. O sintoma foi o Edu ver "espaço demais no rodapé" do
   card em 31/08/2026: eram os 14px de baixo do .legal-wrap p sobrando
   depois da linha de data, medidos em 13,9px na caixa renderizada. */
.legal-wrap .blog-resumo{margin:8px 0 0;color:var(--tinta-72)}
/* A data e o tempo de leitura vêm DEPOIS do resumo, e não antes do título:
   quem decide se lê decide pelo assunto, não pela data. Data em cima
   empurra o título para baixo e faz o olho começar pelo que menos importa. */
/* O rodapé do card: quando de um lado, "Ler o artigo" do outro.
   Na MESMA linha da data, de propósito: o convite a clicar não precisa
   de linha própria, e o card não cresce 28 vezes por causa dele. Em
   tela estreita o flex-wrap põe um embaixo do outro sozinho. */
.legal-wrap .blog-meta{margin:8px 0 0;font-size:13px;color:var(--tinta-65);
  display:flex;justify-content:space-between;align-items:baseline;
  gap:4px 16px;flex-wrap:wrap}
/* Marcado com aria-hidden no HTML: quem usa leitor de tela já tem o
   link do título, e "Ler o artigo" repetido 28 vezes só atrapalharia.
   Isto aqui é sinal visual, e não um segundo caminho. */
.bm-ler{display:inline-flex;align-items:center;gap:6px;
  color:var(--azul);font-weight:600;white-space:nowrap}
.bm-ler svg{width:15px;height:15px;flex:none;transition:transform .15s ease}
/* A seta anda quando o card inteiro é apontado, porque o :hover do <a>
   agora vale de qualquer ponto dele. É o que conta para a pessoa que o
   card todo responde ao clique, e não só o título. */
.blog-item > a:hover ~ .blog-meta .bm-ler svg{transform:translateX(3px)}
/* As fontes fecham o artigo. Ficam menores, mas não escondidas: é delas que
   vem a diferença entre o nosso texto e um resumo de internet. */
/* `.legal-wrap` NO PREFIXO, e é conserto de bug, não gosto. Esta regra é a
   quinta do arquivo a ser escrita, parecer valer e perder na cascata: as
   Fontes são um <p>, e `.legal-wrap p{margin:0 0 14px}` (classe + elemento)
   ganha de `.blog-fontes` (classe). Resultado medido na página no ar em
   03/09/2026: a margem de topo computava 0px, e o bloco subia colado nos
   cartões do "Continue lendo", com 16px em vez de 34.
   O `.legal-contato` escapa disso por ser <div>, e por isso mantinha os 36px
   dele. Era só aqui. */
.legal-wrap .blog-fontes{margin:34px 0 0;padding-top:16px;
  border-top:1px solid var(--tinta-15);
  font-size:13.5px;color:var(--tinta-65);line-height:1.7}
.blog-fontes a{color:var(--azul)}

/* ============================================================
   COMPARTILHAR, no fim do artigo
   ------------------------------------------------------------
   MOLDURA EMPRESTADA do .blog-fontes: mesma margem de 34px, mesmo
   filete de 1px em cima. Os dois são rodapé de artigo, e inventar um
   segundo jeito de separar bloco no fim da página só daria duas
   réguas para manter.

   ALINHADO À ESQUERDA, e não centralizado como no exemplo que serviu
   de referência. O artigo inteiro é uma coluna de texto alinhada à
   esquerda; uma fila centralizada no meio dela lê como peça solta.

   QUIETO POR PADRÃO. Os ícones nascem em cinza e só ganham cor no
   hover, porque logo abaixo vem o retângulo azul do convite, que é a
   nossa pergunta de verdade. Cinco marcas coloridas ali brigariam com
   ele e ainda trariam o arco-íris das cores de terceiro para dentro da
   nossa paleta.

   DOIS TAMANHOS DE ÍCONE, de propósito. As quatro marcas são glifos
   preenchidos e pesam mais no mesmo tamanho; o nosso, de copiar, é
   traço de 1.8. Os 18px contra 21px igualam o peso visual, não a
   caixa. Sem isso o último ícone parece menor do que os outros quatro.

   O AVISO DO COPIAR nasce vazio e só recebe texto DEPOIS que o
   navegador confirma a cópia, nunca no clique (regra do projeto: não
   se afirma sucesso antes da confirmação). É um aria-live, então quem
   usa leitor de tela ouve a confirmação sem precisar procurar.
   ============================================================ */
.blog-share{display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  margin:34px 0 0;padding-top:18px;border-top:1px solid var(--tinta-15)}
.bs-rot{font-size:13.5px;font-weight:600;color:var(--tinta-65);margin-right:10px}
.bs-bt{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;color:var(--tinta-65);
  background:none;border:0;padding:0;cursor:pointer;
  transition:color .15s ease,background-color .15s ease}
.bs-bt svg{width:18px;height:18px;display:block}
.bs-copiar svg{width:21px;height:21px}
.bs-bt:hover{color:var(--azul);background:var(--azul-suave)}
.bs-bt:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
/* Verde é a cor de "isto está garantido" nas caixas de resumo, e é
   exatamente isso que a palavra diz aqui. */
.bs-aviso{font-size:13px;font-weight:600;color:var(--verde);margin-left:6px}
.bs-aviso.bs-falhou{color:var(--tinta-65)}

/* ============================================================
   A MESMA BARRA, EM PÉ, NA MARGEM  ·  a partir de 1040px
   ------------------------------------------------------------
   Pedido do Edu em 31/08/2026: "isso dá para virar um botão
   flutuante?". Virou régua lateral, e não botão de canto.

   É O MESMO ELEMENTO, REPOSICIONADO. Não existe uma segunda barra
   escondida esperando o desktop: o `position:fixed` tira a de sempre do
   fluxo e a leva para a margem. Duas marcações para o mesmo recurso
   seriam duas portas (ver feedback-sem-cards-repetidos), dois conjuntos
   de links para o leitor de tela repetir, e dois lugares para o
   testes/compartilhar.js ter que conferir.

   A CONTA DO `left`. A coluna do artigo tem 760px e é centralizada,
   então a borda dela fica em `50% - 380px`. A régua tem 38px e guarda
   28px de respiro do texto: `380 + 28 + 38 = 446`. Em 1040px de janela
   isso deixa a régua começando a 74px da borda, e ela nunca encosta na
   coluna. Abaixo de 1040px a barra volta a ser a linha horizontal do
   fim do artigo, porque no celular não existe margem para ocupar.

   NASCE VISÍVEL, E O JS SÓ ESCONDE. É o contrário do que parece
   natural, e é de propósito: se o padrão fosse escondido, um erro no
   script ou um navegador sem IntersectionObserver deixariam o desktop
   SEM compartilhamento nenhum, já que a barra de baixo não existe mais
   nessa largura. Do jeito que está, o pior caso é a régua ficar sempre
   à vista, que é feio e não quebra nada.

   `screen and`: sem isso a régua tentaria existir na impressão, onde
   posição fixa vira carimbo repetido em toda página. */
@media screen and (min-width:1040px){
  .legal-wrap.artigo .blog-share{
    position:fixed;top:50%;transform:translateY(-50%);
    left:calc(50% - 446px);width:38px;z-index:30;
    flex-direction:column;flex-wrap:nowrap;align-items:center;gap:2px;
    margin:0;padding:0;border-top:0;
    transition:opacity .18s ease,visibility .18s ease;
  }
  /* No topo da página e junto do rodapé a régua sai: em cima ela seria
     um convite a compartilhar o que a pessoa ainda não leu, e embaixo
     ela flutuaria por cima do rodapé escuro, em cinza claro. */
  .legal-wrap.artigo .blog-share.bs-oculta{opacity:0;visibility:hidden}

  /* O rótulo continua no HTML para o leitor de tela: em pé, "Compartilhe"
     não cabe em 38px, e girar o texto deixaria a régua com duas
     linguagens de leitura na mesma coluna. */
  .legal-wrap.artigo .blog-share .bs-rot{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;
  }
  /* O recado do "copiar" desce para baixo da régua, centrado, sem
     quebrar linha. Ele avança para os dois lados dentro da margem
     vazia e ainda sobra folga até a coluna de texto. */
  .legal-wrap.artigo .blog-share .bs-aviso{
    position:absolute;top:100%;left:50%;transform:translateX(-50%);
    margin:8px 0 0;font-size:12px;white-space:nowrap;text-align:center;
  }
}

.legal-obs{border-left:3px solid var(--azul);background:var(--azul-suave);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:14px 18px;margin:0 0 18px}
.legal-obs p{margin:0;color:var(--tinta)}
.legal-obs strong{display:inline}
/* CAIXA DE OBSERVAÇÃO COM ÍCONE.
   O ícone é AZUL, e não verde: verde, nas caixas de resumo, quer dizer
   "isto está garantido", e estas caixas não garantem nada, elas avisam.
   Azul é a cor da própria borda da caixa.

   FLUTUA, e não é coluna de flex. Com flex, o texto vira um bloco só e
   TODAS as linhas ficam recuadas, penduradas num desenho de 20px. Com
   `float`, o ícone só empurra a primeira linha; da segunda em diante o
   texto volta para a margem da caixa, junto com todo o resto da página.
   Como o ícone tem uma linha de altura, é exatamente uma linha afetada.

   O :after limpa o float. Sem ele, uma caixa cuja frase caiba em menos
   de uma linha deixaria o ícone escapar para fora do retângulo. */
.legal-obs.lo-ico:after{content:"";display:block;clear:both}
.legal-obs.lo-ico > svg{float:left;width:var(--ic-texto);height:var(--ic-texto);margin:3px 11px 0 0;color:var(--azul)}

/* ============================================================
   CANAL DE DIREITOS (direitos.html)
   O formulário mora AQUI, e não numa tela do app. Cheguei a mandar a
   pessoa para o app/titular-portal.html para não ter duas
   implementações, e apliquei a regra larga demais: o que não pode
   duplicar é a validação e a geração do protocolo, e isso vive na
   função titular_pedido_criar, no Postgres. Duas telas finas sobre uma
   função validada são duas portas para o mesmo cofre.
   E trocar lgpddetodos.com.br/direitos.html por /app/titular-portal.html
   no meio de um pedido de direito parece outro produto, justamente para
   quem já costuma chegar irritado.

   Campo grande e rótulo em cima: é gente com pressa, muitas vezes no
   celular. Nada de rótulo dentro do campo, que some ao digitar e leva
   embora a referência do que estava sendo respondido.
   ============================================================ */
.dir-form{border:1px solid var(--tinta-15);border-radius:var(--radius);
  padding:26px 28px 28px;margin:30px 0 34px;background:var(--branco)}
.dir-form h2{margin:0 0 4px;font-size:20px}
.dir-form .dir-sub{margin:0 0 22px;font-size:14.5px;color:var(--tinta-65)}

.dir-campo{margin:0 0 20px}
.dir-campo label{display:block;font-size:14.5px;font-weight:600;color:var(--tinta);margin-bottom:6px}
/* DUAS POSIÇÕES, DOIS SENTIDOS. É a regra deste formulário:
     ACIMA do campo (.dir-motivo) = por que a gente pede isso;
     ABAIXO do campo (.dir-ajuda)  = cuidado ao preencher.
   A ordem de leitura fica natural: o rótulo diz o quê, a linha de cima
   diz para quê, a pessoa preenche, e o que vem depois só existe para
   quem já está preenchendo. */
.dir-motivo{font-size:13.5px;color:var(--tinta-65);margin:0 0 8px;line-height:1.6}

/* NÃO VOLTAR COM ETIQUETA DE "OBRIGATÓRIO" / "OPCIONAL".
   Chegou a existir aqui um marcador ao lado do rótulo, no estilo da
   etiqueta `.req` do app. O Edu reprovou em 26/08/2026, e o motivo é
   bom: é uma palavra solta jogada, que informa a REGRA e esconde a
   RAZÃO. Num formulário de privacidade a razão é o que importa, porque
   cada campo exigido é dado pedido de alguém que veio exercer um
   direito (Art. 6º, III).
   No lugar dela, cada campo explica em uma linha para que serve, e a
   obrigatoriedade sai da própria frase ("sem isso não dá para
   responder", "pode deixar em branco"). Quem lê entende a regra e o
   porquê de uma vez, em vez de decorar um código de etiquetas. */
.dir-porque{margin:0 0 24px}
.dir-campo input,.dir-campo select,.dir-campo textarea{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:15.5px;color:var(--tinta);
  background:var(--branco);border:1.5px solid var(--tinta-15);border-radius:var(--radius-sm);
  padding:12px 14px;line-height:1.5}
.dir-campo textarea{resize:vertical;min-height:110px}
.dir-campo input:focus,.dir-campo select:focus,.dir-campo textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-suave)}
/* Campo travado enquanto o canal não está no ar. Fica legível de propósito:
   o objetivo desse estado é dar para CONFERIR o formulário, não escondê-lo. */
.dir-campo input:disabled,.dir-campo select:disabled,.dir-campo textarea:disabled{
  background:var(--tinta-04);color:var(--tinta-65);cursor:not-allowed}
.dir-form .btn:disabled{opacity:.5;cursor:not-allowed}
.dir-form .dir-indisp{margin:0 0 24px}
/* O textarea entrou aqui quando a descrição passou a ser exigida no
   "Outro assunto": sem ele, o campo era apontado pela mensagem de erro e
   não acendia junto, e a pessoa procurava qual era. */
.dir-campo input.erro,.dir-campo select.erro,.dir-campo textarea.erro{border-color:var(--vermelho)}
.dir-ajuda{font-size:13.5px;color:var(--tinta-65);margin:7px 0 0;line-height:1.6}

/* CONTADOR DE CARACTERES
   Fica na mesma linha da ajuda, encostado à direita, e some quando a
   pessoa está longe do limite. Ele não é um medidor: é um aviso, e só
   tem razão de existir quando o maxlength está prestes a cortar texto
   sem avisar. align-items:baseline alinha o contador pela linha do
   texto da ajuda, não pelo topo do bloco, que pode ter duas linhas. */
.dir-rodape-campo{display:flex;gap:18px;align-items:baseline;justify-content:space-between}
.dir-rodape-campo .dir-ajuda{flex:1 1 auto}
.dir-conta{flex:none;font-size:13px;color:var(--tinta-65);
  font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:7px}
.dir-conta.no-limite{color:var(--vermelho);font-weight:600}

/* Recado que aparece quando a pessoa diz que os dados foram cadastrados
   por uma empresa cliente: ali quem responde é ela, e é melhor dizer
   isso antes de a pessoa escrever, não depois. */
.dir-nota{border-left:3px solid var(--azul);background:var(--azul-suave);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:12px 16px;margin:10px 0 0}
.dir-nota p{margin:0;font-size:14px;line-height:1.6;color:var(--tinta)}

/* O campo que só robô enxerga. Fora da tela, e NÃO display:none: parte
   dos robôs ignora o que está escondido assim, e a armadilha não pegaria. */
.dir-armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.dir-acoes{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:26px}
.dir-estado{font-size:14.5px;color:var(--tinta-72)}
.dir-estado.erro{color:var(--vermelho);font-weight:600}

/* RECIBO. Não é só o número: é o comprovante. Traz o que foi pedido, para
   qual e-mail vai a resposta e a data limite calculada, que transforma
   "respondemos em 15 dias" em compromisso datado. */
.dir-recibo{border:1px solid var(--tinta-15);border-top:3px solid var(--verde);
  border-radius:var(--radius);padding:28px 30px;margin:30px 0 34px;background:var(--tinta-04)}
.dir-recibo h2{margin:0 0 10px;font-size:21px}
.dir-recibo p{margin:0 0 14px}
.dir-recibo-erro{border-top-color:var(--vermelho)}
.dir-prot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0}
.dir-prot-num{font-size:28px;font-weight:800;letter-spacing:1.4px;color:var(--azul)}
.dir-copiar{font-family:inherit;font-size:13.5px;font-weight:700;color:var(--azul);
  background:var(--branco);border:1.5px solid var(--tinta-15);border-radius:8px;padding:8px 14px;cursor:pointer}
.dir-copiar:hover{border-color:var(--azul)}
.dir-linhas{width:100%;border-collapse:collapse;margin:6px 0 0;font-size:14.5px}
.dir-linhas th{text-align:left;font-weight:600;color:var(--tinta-65);
  padding:7px 14px 7px 0;vertical-align:top;white-space:nowrap;width:1%}
.dir-linhas td{padding:7px 0;color:var(--tinta);vertical-align:top}

.dir-indisp{border:1px solid var(--tinta-15);border-top:3px solid var(--azul);
  border-radius:var(--radius);padding:24px 26px;margin:30px 0 34px;background:var(--tinta-04)}
.dir-indisp p{margin:0 0 14px;color:var(--tinta-72);line-height:1.7}
.dir-indisp p:last-child{margin-bottom:0}

@media (max-width:640px){
  .dir-form{padding:20px 18px 22px}
  .dir-recibo{padding:22px 18px}
  .dir-prot-num{font-size:24px}
}

@media (max-width:640px){
  .legal-wrap{padding:28px 20px 72px}
  /* Mesma proporção do desktop: as legais mantêm 72, o blog encolhe.
     Precisa dos dois seletores porque `.legal-wrap.artigo` lá de cima tem
     peso de duas classes e passaria por cima da regra de celular. */
  .legal-wrap.artigo{padding-bottom:32px}
  .legal-wrap h1{font-size:26px}
  .legal-indice{columns:1}
  .legal-tab{font-size:13.5px}
  .legal-tab th,.legal-tab td{padding:9px 10px}
}

/* ============================================================
   BARRA DE PROGRESSO DE LEITURA  ·  .barra-leitura
   ------------------------------------------------------------
   Segunda tentativa, em 31/08/2026. A primeira preenchia de verde o
   filete de 2px que já existia embaixo do título fixo, para não criar
   elemento novo. O Edu viu na tela e reprovou, com razão: "é muito fina
   e não dá nem para perceber direito". O erro foi meu, e vale ficar
   escrito para não se repetir em outro lugar: eu escolhi a peça pelo
   custo (já existia) e não pela função. Linha de 2px é DIVISÓRIA. Ela
   pode até mudar de cor, mas ninguém a lê como medidor, porque não é
   isso que ela parece. Reaproveitar só vale quando a peça reaproveitada
   já tem a forma da função nova.

   AGORA É O QUE O EDU PEDIU: faixa presa na base da tela, mais grossa,
   enchendo de branco para verde.

   ELA TEM A LARGURA DO TEXTO, E NÃO DA JANELA (ajuste do Edu, ainda em
   31/08/2026: "prefiro que ela exista apenas dentro da margem do
   texto"). De ponta a ponta a barra virava moldura do navegador; na
   largura da coluna ela mede o ARTIGO, que é a mesma lógica que já vale
   para o filete da faixa do título. São os 712px do miolo do
   `.legal-wrap`, e o `min()` cuida das telas menores que isso.

   E ELA FLUTUA, não encosta na borda (mesmo pedido: "está totalmente
   colada, quero um espaço em branco para ficar mais fácil de
   visualizar"). O respiro embaixo separa a barra do fim da tela e do
   fim do navegador, e é o que a faz ser lida como um objeto da página
   em vez de um risco na moldura. O `env(safe-area-inset-bottom)` soma o
   vão do indicador de toque nos celulares que têm um.

   COMO ELA FLUTUA, O CONTORNO PASSOU A SER ANEL, e não mais um fio só
   em cima: peça solta no meio do branco precisa de borda nos quatro
   lados para a trilha vazia aparecer. `box-shadow` em vez de `border`
   para o anel não roubar altura do miolo de 6px.

   6px É O NÚMERO da grossura, e é o que provavelmente ainda vai querer
   ajuste: três vezes a linha de 2px que foi reprovada, grosso o
   bastante para ser percebido de canto de olho e fino o bastante para
   não virar rodapé.

   `scaleX` em vez de `width` pelo mesmo motivo de sempre: só o
   compositor trabalha, sem recalcular layout a cada pixel de rolagem.

   O ELEMENTO É CRIADO PELO JS, e aqui a regra se inverte em relação à
   régua de compartilhar: lá o padrão tinha que ser visível, porque sem
   script o desktop ficaria sem compartilhamento nenhum. Aqui, sem
   script não existe progresso para mostrar, e uma trilha vazia parada
   na base da tela seria uma promessa que ninguém cumpre. Então sem JS
   não nasce barra. */
/* A FAIXA QUE ESCONDE O TEXTO POR TRÁS (terceiro ajuste do Edu:
   "está aparecendo texto no espacinho dela na borda inferior").

   Era defeito de origem da barra flutuante, e não de ajuste fino:
   elemento com `position:fixed` não reserva espaço, então o texto passa
   POR TRÁS dele o tempo todo e reaparece no vão de respiro, cortado ao
   meio. Aumentar o respiro só aumentava a área de texto picado.

   O conserto é a barra deixar de ser só a pílula e passar a ser uma
   faixa: um contêiner de largura inteira, opaco, que mascara a tira de
   baixo da tela, com a pílula centralizada dentro dele. Como o fundo é
   branco igual ao da página, a faixa é invisível enquanto não há nada
   por trás, e some com o texto quando há. O que se vê continua sendo só
   a pílula na largura da coluna, que era o que ele aprovou.

   O DEGRADÊ NO TOPO evita a linha de corte: sem ele o texto entra por
   baixo de uma borda dura e parece cortado a faca. Com os 14px de
   transição ele dissolve, e a faixa parece parte do papel.

   `pointer-events:none` NÃO É DETALHE. Sem isso a faixa invisível vira
   uma tira de uns 40px na base da tela que engole cliques do que estiver
   embaixo dela, e ali costuma estar o fim do artigo. A pílula não
   precisa de clique, então a faixa inteira deixa o mouse passar. */
.barra-leitura{position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding:0 24px calc(18px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0, var(--branco) 14px);
  pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
/* SOME NO RODAPÉ. Dois motivos, e o segundo é o que decide: a faixa é
   branca e o rodapé é navy, então ali ela vira uma tarja clara por cima
   do escuro; e, mais importante, quando o rodapé aparece o artigo já
   acabou, e barra de progresso depois do fim do texto não informa mais
   nada. É a mesma regra que já valia para a régua de compartilhar, e eu
   simplesmente não a apliquei aqui na primeira vez. */
.barra-leitura.bl-oculta{opacity:0;visibility:hidden}
.bl-trilha{max-width:712px;margin:0 auto;
  height:6px;border-radius:999px;overflow:hidden;
  background:var(--branco);box-shadow:0 0 0 1px var(--tinta-15)}
.bl-cheio{display:block;height:100%;background:var(--verde);
  transform:scaleX(var(--lido,0));transform-origin:left center}

/* NA LARGURA DO DESKTOP ELA VIRA UMA RÉGUA VERTICAL, na margem oposta à
   de compartilhar. O motivo é o mesmo que levou a régua de compartilhar
   para a lateral: na margem não existe texto para cobrir. A faixa de
   baixo é fixa, então o conteúdo passa por baixo dela, e era isso que
   incomodava.

   POR QUE 1040px, e não outro valor: é exatamente o ponto em que a régua
   de compartilhar aparece. Abaixo disso não há margem para nenhuma das
   duas, e a barra continua horizontal no rodapé. Ou seja, o celular
   segue com a faixa, e essa é a limitação assumida desta escolha.

   O ALINHAMENTO ESPELHA A OUTRA RÉGUA: ela ocupa uma pista de 38px que
   começa a 446px do centro, à esquerda. Os 430px daqui põem a barrinha
   de 6px no meio da pista equivalente, à direita.

   O JS NÃO MUDA. Ele só escreve a fração em --lido; quem decide se isso
   vira escala horizontal ou vertical é o CSS. */
@media screen and (min-width:1040px){
  .barra-leitura{left:auto;right:calc(50% - 430px);bottom:auto;top:50%;
    transform:translateY(-50%);padding:0;background:none;width:6px}
  /* A TRILHA PRECISA DE FUNDO CINZA AQUI, e na horizontal não precisava.
     Lá ela ficava sobre a faixa branca e o anel de 1px bastava para dar
     contorno. Na margem, trilha branca sobre página branca some, e o que
     sobra é um risco verde flutuando: a pessoa vê o quanto leu e perde
     o quanto falta, que é metade da informação. */
  /* ALTURA IGUAL À DA RÉGUA DE COMPARTILHAR, e escrita como a conta dela
     em vez de um número solto: cinco botões de 38px e quatro vãos de 2px.
     As duas ficam centradas em top:50%, então altura igual basta para
     alinhar topo e base. Se um botão entrar ou sair da régua, esta conta
     precisa mudar junto, e é por isso que ela está escrita assim. */
  .bl-trilha{max-width:none;width:6px;margin:0;
    height:calc(5 * 38px + 4 * 2px);
    background:var(--tinta-08);box-shadow:none}
  .bl-cheio{transform:scaleY(var(--lido,0));transform-origin:center top}
}
@media (max-width:640px){
  /* Acompanha o recuo do .legal-wrap no celular, que cai de 24 para 20,
     e encosta um pouco mais embaixo porque a tela é curta. */
  .barra-leitura{padding:0 20px calc(14px + env(safe-area-inset-bottom, 0px))}
}

/* ============================================================
   A LISTA DE ARTIGOS É MAIS LARGA QUE O TEXTO  ·  .pagina-lista
   ------------------------------------------------------------
   O Edu reparou que o conteúdo começava alinhado com o "S" de
   "DE TODOS" e queria alinhar com o "D". A causa: o cabeçalho usa
   1120px e a coluna usava 760px, sobrando 180px de cada lado.

   TENTAMOS OS 1120px E ELE REPROVOU NA TELA, com razão: o resumo passou
   a rodar em ~130 caracteres, a data e o "Ler o artigo" ficaram
   separados por quase 900px de vazio, e o card virou uma caixa larga e
   baixa. A lição, que vale para o projeto inteiro: quando a página é
   larga e o conteúdo é uma LISTA DE CARDS, a resposta certa é quebrar em
   COLUNAS, não esticar cada card. Esticar não usa o espaço, dilui.

   Ficou um meio-termo, `--lista` (860px), escolha dele contra a minha
   recomendação de duas colunas. Fecha um terço do vão e mantém o resumo
   por volta de 100 caracteres.

   TRÊS PEÇAS ANDAM JUNTAS, e esquecer uma deixa a página remendada: a
   coluna, a faixa fixa do título e o rodapé. Se as três não tiverem a
   mesma medida, o título fixo aparece recuado em relação aos cards e o
   rodapé começa numa margem diferente.

   SÓ A LISTA. Dentro dos artigos a prosa não acompanha: lá a largura tem
   custo medido de leitura (712px já dão 94 caracteres por linha, e o
   critério 1.4.8 da WCAG fixa 80). Card é varredura, prosa é leitura. */
body.pagina-lista .legal-wrap{max-width:var(--lista)}
body.pagina-lista .titulo-fixo-in{max-width:var(--lista)}
body.pagina-lista .footer-doc .container{max-width:var(--lista)}
/* A ABERTURA ACOMPANHA A LISTA, e isto foi uma correção de rota.

   A primeira versão capava o h1 e os parágrafos de abertura em
   `--leitura`, com o argumento de que prosa é prosa. Na tela não
   funcionou: os cards têm 812px e o texto ficava em 640, e os 172px de
   diferença faziam a abertura parecer cortada, como se faltasse alguma
   coisa à direita. O Edu pegou por print.

   O argumento da leitura continua valendo, mas ele vale para TEXTO
   LONGO. Aqui são cinco linhas de apresentação que ninguém lê em
   sequência por dez minutos; o custo de alongar é pequeno e o de
   parecer inacabado é maior. Nos artigos a conta é outra, e lá a prosa
   não acompanha.

   Para voltar atrás, é só devolver o `max-width:var(--leitura)` nestes
   dois seletores. */

/* Aviso de privacidade é do tipo de página que as pessoas imprimem
   ou salvam em PDF, em geral para juntar a um processo de compra. */
@media print{
  .site-header,.titulo-fixo,.legal-sumario{display:none}
  /* Progresso de leitura no papel não quer dizer nada: a folha já mostra
     quanto falta, e a barra viraria um risco verde em toda página. */
  .barra-leitura{display:none}
  /* Figura e legenda não se separam na virada de página: a legenda do ECA
     Digital diz que a tela ACIMA dela é o exemplo errado, e sozinha na
     página seguinte ela perde o sujeito. */
  .artigo-figura{break-inside:avoid;page-break-inside:avoid}
  .legal-wrap{max-width:none;padding:0}
  /* No papel o bloco volta a ser empilhado: a barrinha divisória depende de
     cor clara sobre fundo escuro, e o fundo escuro sai na impressão. */
  .legal-contato.lc-grade{display:block}
  .legal-contato.lc-grade .lc-txt{border-left:0;padding-left:0;display:block;margin:8px 0 12px}
  .lc-ico{display:none}
  .legal-contato{background:none;color:var(--tinta);border:1px solid var(--tinta-15)}
  .legal-contato h2,.legal-contato p,.legal-contato a{color:var(--tinta)}
  /* No papel o botão perde o fundo branco e sumiria. Vira contorno, e
     o endereço aparece ao lado, porque quem imprime não pode clicar.

     O ENDEREÇO É ESCOLHIDO PELO DESTINO DO PRÓPRIO BOTÃO. Antes a regra
     colava "/direitos.html" em QUALQUER .legal-cta, e funcionava só
     porque existia um botão só. Quando o quem-somos ganhou o "Começar
     grátis", que vai para o login, a versão impressa passou a mandar a
     pessoa para o endereço errado. Botão novo com destino novo precisa
     de uma linha aqui, senão imprime sem endereço nenhum. */
  .btn-claro,.legal-cta .btn{background:none;border:1px solid var(--azul);color:var(--azul)}
  .legal-cta .btn:after,.btn-claro:after{font-weight:400;font-size:12px}
  .legal-cta .btn[href*="direitos.html"]:after,
  .btn-claro[href*="direitos.html"]:after{content:" (lgpddetodos.com.br/direitos.html)"}
  .legal-cta .btn[href*="login.html"]:after{content:" (lgpddetodos.com.br/app/login.html)"}
  .legal-tab{page-break-inside:auto}
  .legal-tab tr{page-break-inside:avoid}
}


/* ============================================================
   CONTINUE LENDO  ·  a malha interna entre os artigos
   ------------------------------------------------------------
   Três cartões no fim do artigo, DEPOIS do bloco de conversão.
   A ordem é a decisão: o pedido único fica em cima e a navegação
   embaixo, para nenhum dos dois disputar com o outro.

   POR QUE CARTÃO E NÃO LISTA DE LINKS. A lista de links azuis
   sublinhados some no fim de uma página que já tem fontes,
   assinatura e compartilhar, todos em texto. O cartão separa a
   navegação do texto corrido sem precisar de mais uma cor.

   A ETIQUETA DO GRUPO É TEXTO. Ela repete o vocabulário da Central
   de ajuda e nunca vira link nem filtro, pela mesma regra do card
   do índice: quem clica no cartão quer o artigo, não a categoria.

   TRÊS COLUNAS SÓ A PARTIR DE 900px, pela mesma medida do
   .lc-grade: abaixo disso a coluna fica estreita demais e o título
   do artigo, que é frase inteira e não rótulo, cai em cinco ou seis
   linhas. Empilhado é melhor que espremido.
   ============================================================ */
/* 25 DE RECHEIO EM CIMA, e o número saiu de medição, não de gosto. O Edu
   pegou em 03/09/2026 que o espaço acima do "Continue lendo" não batia com o
   de baixo dos cartões. Os dois vãos são feitos de coisas diferentes: em
   cima é o recheio deste bloco, embaixo é a margem do bloco seguinte, que é
   o de Fontes, com 34px.
   Medido na página no ar: com 20 de recheio o vão de cima dava 21px de caixa,
   contra 34 embaixo. Com 25 ele chega a 26 de caixa, e como o título ainda
   tem a entrelinha por cima, os dois ficam visualmente iguais.
   SE MEXER NA FONTE OU NO LINE-HEIGHT do .bc-tit, remedir: a entrelinha entra
   nessa conta. */
.blog-continue{margin:34px 0 0;padding-top:25px;border-top:1px solid var(--tinta-15)}
/* ESPECIFICIDADE, E NÃO GOSTO. O `.bc-tit` sozinho tem peso de uma classe e
   PERDE para `.legal-wrap h2` (linha 287), que é classe mais elemento e manda
   `margin:40px 0 10px` com fonte 21px. Resultado medido na página no ar em
   03/09/2026: entre a linha do bloco e o título havia 61px, que são os 20 de
   recheio daqui mais os 40 de margem que vinham de lá. O `.bc-tit` parecia
   mandar e não mandava.
   Prefixar com `.blog-continue` empata em elementos e ganha em classes. */
.blog-continue .bc-tit{margin:0 0 12px;font-size:17px;line-height:1.3;color:var(--azul)}
/* `.blog-continue` NO PREFIXO, e pelo mesmo motivo do .bc-tit logo acima:
   `.bc-lista{padding:0}` tem peso de uma classe e PERDE para
   `.legal-wrap ul{padding-left:22px}` (linha 299), que é classe mais
   elemento. Os cartões nasciam 22px à direita das linhas que fecham o
   bloco em cima e embaixo, e foi isso que o Edu viu em 03/09/2026. */
.blog-continue .bc-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
/* ÍCONE NO LUGAR DA ETIQUETA, decisão do Edu em 03/09/2026. A etiqueta dizia
   o grupo ("Comece por aqui"), e isso era informação sobre a nossa arrumação
   interna, não sobre o texto de destino. O ícone é o MESMO do card daquele
   artigo no índice, então quem já viu a lista reconhece para onde vai antes
   de ler o título. Vem do índice por script, nunca escolhido à mão, e o
   teste continue-lendo.js confere que ele bate com o destino.

   FLUTUA, e não é coluna de flex. É a mesma regra do `.legal-obs.lo-ico`:
   com flex o texto vira um bloco só e TODAS as linhas ficam penduradas à
   direita do desenho; com `float` o ícone empurra só a primeira linha e da
   segunda em diante a frase volta para a margem do cartão. Aqui isso pesa
   mais do que lá, porque o título tem três ou quatro linhas e a coluna é
   estreita: recuar todas custa quase um caractere por linha.
   Eu tinha feito com flex e o Edu pegou no mesmo dia. */
/* A ALTURA TOTAL DO ÍCONE TEM QUE CABER NUMA LINHA DO TÍTULO, e essa é a
   única regra que importa aqui. A linha tem 15,5px por 1.35, ou seja 20,9px.
   Na primeira versão o ícone somava 21px (19 do desenho mais 2 de margem) e
   sobrava 0,075px para dentro da SEGUNDA linha. Isso basta: o navegador
   encurta toda linha que o flutuante toque, então a segunda linha recuava
   junto e só a terceira voltava para a margem. Pego pelo Edu em 03/09/2026,
   e medido com Range.getClientRects antes de consertar.
   Agora são 19px no total, com 1,9px de folga. A altura é declarada AQUI, e
   não herdada do svg, para o conserto não depender do tamanho do desenho:
   trocar o ícone não pode reabrir isto. Se um dia a fonte ou o line-height
   mudarem, refazer a conta. */
/* contido-por: .bc-lista a */
.bc-ico{float:left;display:flex;align-items:center;height:18px;
  color:var(--tinta-65);margin:1px 9px 0 0;transition:color .15s ease}
.bc-ico svg{width:18px;height:18px;display:block}
.bc-lista a:hover .bc-ico{color:var(--azul)}
/* Limpa o float, senão um título de uma linha só deixaria o ícone escapar
   para fora do retângulo. Mesmo cuidado do `.legal-obs.lo-ico:after`. */
.bc-lista a:after{content:"";display:block;clear:both}
.bc-lista a{display:block;padding:13px 15px;border:1px solid var(--tinta-15);
  border-radius:var(--radius);text-decoration:none;height:100%;
  transition:border-color .15s ease,background-color .15s ease}
.bc-lista a:hover{border-color:var(--azul);background:var(--azul-suave);text-decoration:none}
.bc-lista a:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.bc-nome{display:block;font-size:15.5px;font-weight:600;line-height:1.35;color:var(--azul)}
@media (min-width:900px){
  .bc-lista{grid-template-columns:repeat(3,1fr)}
}
/* No papel a malha não serve para nada: são três links que ninguém
   clica, ocupando um terço da última folha. Sai inteira, pela mesma
   razão que já tira o sumário daqui de cima: navegação impressa é
   tinta gasta. O compartilhar continua, porque ali o que sobra no
   papel são os nomes das redes, e não um destino clicável. */
@media print{
  .blog-continue{display:none}
}

/* A PÍLULA QUE NÃO SE CLICA · 23/09/2026 (Edu)
   Duas formas e quatro cores, só da paleta. CLASSIFICAR: fundo branco, contorno
   e ponto na cor. SITUAÇÃO: fundo claro, contorno na cor e ícone. Azul é regra ou
   informação, verde é a seu favor, âmbar é depende, vermelho é contra você; na
   situação, azul é novo, verde é feito ou para você, âmbar é em curso ou
   esperando, vermelho é agir. O testes/pilula-cor.js confere este bloco. */
.selo-norma,.selo-norma.sn-obr{background:var(--branco);color:var(--azul);border:1px solid var(--azul);gap:4px}
.selo-norma::before,.selo-norma.sn-obr::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--azul);-webkit-mask:none;mask:none}
.selo-norma.sn-boa,.selo-norma.sn-depende{background:var(--branco);color:var(--ambar-texto);border:1px solid var(--ambar);gap:4px}
.selo-norma.sn-boa::before,.selo-norma.sn-depende::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--ambar);-webkit-mask:none;mask:none}
.selo-norma.sn-favor{background:var(--branco);color:var(--verde-texto);border:1px solid var(--verde);gap:4px}
.selo-norma.sn-favor::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--verde);-webkit-mask:none;mask:none}
.selo-norma.sn-contra{background:var(--branco);color:var(--vermelho-texto);border:1px solid var(--vermelho);gap:4px}
.selo-norma.sn-contra::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--vermelho);-webkit-mask:none;mask:none}
/* Em papel a etiqueta volta a ser texto corrido, como antes da cor. */
@media print{.selo-norma,.selo-norma[class]{border:0;padding:0;font-weight:600;color:inherit;background:none}
  .selo-norma::before{display:none}}