/* ==========================================================================
   ChatISP: paginas internas

   Carregado por componentes/pagina.php depois de tokens.css e site.css, em
   TODA pagina que nao e a home. Aqui moram duas coisas, e so elas:

     1. a moldura fixa das internas: capa, trilha, indice, relacionadas e
        chamada final, cujo markup sai de componentes/pagina.php;
     2. o kit de blocos de conteudo que as paginas compoem entre si.

   O que ja existe em site.css NAO se repete aqui: .secao, .container,
   .botao, .cartao, .grade, .selo, .acordeao, .lista-marcada, .numero-etapa,
   .secao-cabecalho, .link-seta, .nota e .sobretitulo vem de la.

   Regra do projeto, sem excecao: nenhuma cor, espaco, raio, peso ou tamanho
   de fonte escrito a mao. So var(). Quatro quebras: 1200 / 980 / 680 / 380.

   Sumario
   -------
   01. Capa
   02. Trilha de navegacao
   03. Indice lateral
   04. Prosa: texto longo
   05. Blocos de conteudo
   06. Relacionadas
   07. Chamada final
   08. Movimento das internas
   09. Responsivo
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Capa: a primeira dobra de toda pagina interna

   Sempre escura, sempre encostada no cabecalho. E o equivalente interno do
   hero da home: mesma gramatica visual, um terco da altura.
   -------------------------------------------------------------------------- */
.capa {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--esp-secao-curta) var(--esp-secao);
  background: var(--base-pagina);
  /* Mesma reserva de sombra da .secao: quando a capa encosta num capitulo
     claro, a divisa e desenhada aqui, do lado escuro. */
  --divisa-topo: inset 0 0 0 0 transparent;
  --divisa-base: inset 0 0 0 0 transparent;
  box-shadow: var(--divisa-topo), var(--divisa-base);
}

.capa:has(+ .em-papel) {
  --divisa-base: inset 0 calc(var(--divisa-altura) * -1)
    calc(var(--divisa-altura) * 0.82) calc(var(--divisa-altura) * -0.72)
    var(--divisa-cor);
}

/* --- Atmosfera ----------------------------------------------------------
   Tres camadas decorativas dentro de um unico <span aria-hidden>. Ficam em
   z-index negativo para nunca disputarem clique nem leitura. */
.capa-atmosfera {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.capa-halo {
  position: absolute;
  top: calc(var(--e9) * -1);
  right: calc(var(--e7) * -1);
  width: min(720px, 72%);
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: radial-gradient(circle, var(--brilho-verde), transparent 68%);
  opacity: 0.85;
}

/* Grade tecnica, tenue. Duas listras repetidas: o desenho de fundo do
   ecossistema, o mesmo da home, em escala menor. */
.capa-grade {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--borda) 1px, transparent 1px),
    linear-gradient(90deg, var(--borda) 1px, transparent 1px);
  background-size: 72px 72px;
  /* A grade nasce no canto superior esquerdo e se apaga na diagonal: sem a
     mascara ela viraria papel milimetrado e roubaria a cena. */
  mask-image: radial-gradient(
    120% 100% at 8% 0%,
    rgba(0, 0, 0, 0.5),
    transparent 62%
  );
  opacity: 0.55;
}

/* Orbitas: dois aneis concentricos, o mesmo sistema dos cartoes sociais, e a
   unica peca da atmosfera que se move por conta propria: o halo e a grade
   sao manchas paradas e a brasa apenas desliza.

   Cada anel e um ARCO de conic-gradient, nao uma linha de cor uniforme. A
   diferenca nao e estetica, e o que faz o giro existir: uma circunferencia
   de cor unica, girada em torno do proprio centro, e identica a si mesma, e
   .mov-girar rodaria 48 graus sem que ninguem visse nada. Com o arco, o
   trecho claro percorre a volta.

   A mascara radial tira o recheio e deixa so a circunferencia de 1,5px: e
   mais barato que desenhar dois circulos e mais preciso que `border`, que
   nao aceita gradiente. */
.capa-orbita {
  position: absolute;
  top: 50%;
  right: 0;
  width: min(660px, 64%);
  aspect-ratio: 1;
  /* Sobe um pouco acima do meio: na capa dividida o painel ocupa o centro da
     coluna da direita, e o que sobra de ceu aberto e a faixa entre a trilha e
     o topo do painel. E por la que o arco passa. */
  translate: 12% -54%;
  border-radius: var(--r-full);
  background: conic-gradient(
    from 205deg,
    transparent 0 40%,
    var(--verde-linha) 58%,
    color-mix(in srgb, var(--verde-brilho) 55%, transparent) 72%,
    transparent 88%
  );
  /* `closest-side` nao e detalhe: sem ele o raio de 100% do gradiente e a
     meia-diagonal do quadrado (0,707 x lado), e nao o raio do circulo
     (0,5 x lado). O corte de 1,5px cairia fora da area pintada e o anel
     inteiro sumia, mascarado por completo e sem erro nenhum no console. */
  mask: radial-gradient(
    circle closest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 2px)
  );
}

/* O de dentro gira ao contrario: --mov-giro negativo inverte as duas pontas
   do keyframe de uma vez. Duas velocidades em sentidos opostos e o que
   transforma dois circulos em um mecanismo. */
.capa-orbita--interna {
  width: min(412px, 41%);
  --mov-giro: -15deg;
  background: conic-gradient(
    from 35deg,
    transparent 0 56%,
    var(--verde-linha) 76%,
    transparent 92%
  );
}

/* Brasa: a mancha quente que anda com o scroll. Leva .mov-parallax. */
.capa-brasa {
  position: absolute;
  bottom: calc(var(--e8) * -1);
  left: calc(var(--e7) * -1);
  width: min(560px, 60%);
  aspect-ratio: 1.4;
  border-radius: var(--r-full);
  background: radial-gradient(
    ellipse at center,
    var(--verde-vidro),
    transparent 70%
  );
  --mov-forca: 8%;
}

/* --- Corpo --------------------------------------------------------------- */

.capa-interna {
  display: grid;
  gap: var(--esp-bloco);
}

.capa-corpo {
  display: grid;
  gap: var(--esp-grid);
  align-items: center;
}

.capa--dividida .capa-corpo {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
}

.capa-texto {
  display: grid;
  justify-items: start;
  gap: var(--e5);
  max-width: 62ch;
}

.capa-sobre {
  color: var(--verde);
}

/* O sobretitulo da capa mora dentro do h1 (componentes/pagina.php), porque e
   ele que carrega a palavra-chave da pagina. Por fora nada muda: o corpo, o
   peso, a caixa alta e a entrelinha ja vem de .sobretitulo, declarados no
   proprio span, e nenhuma regra de .capa h1 alcanca o span por seletor. O que
   o h1 ainda passaria por heranca e desfeito aqui: a familia do titulo, o
   balanceamento de linhas e o italico. A margem repete o gap de .capa-texto,
   que separava os dois quando eram irmaos no grid. */
.capa h1 > .capa-sobre {
  margin-bottom: var(--e5);
  font-family: var(--fonte);
  font-style: normal;
  text-wrap: wrap;
}

/* Bloco, e nao inline: a revelacao "sobe" anda em transform, e transform
   nao vale em caixa inline. */
.capa-h1-frase {
  display: block;
}

/* A medida do titulo mora aqui, no proprio h1, e nao no .capa-texto em volta:
   `ch` e a largura do algarismo "0" NA FONTE DO ELEMENTO. No h1 de capa 1ch
   mede 28px; no .capa-texto, que esta no corpo de 16px, mede 10px. Escrito no
   container, "24ch" valia 240px, e o titulo de artigo caia em sete linhas
   dentro de uma tira de 240px no meio de um container de 1216px.

   Nas capas divididas a coluna ja e mais estreita que 24ch do titulo maior,
   entao aqui a regra e inofensiva; ela so passa a mandar quando a capa perde
   a coluna da figura e a linha inteira fica disponivel. Por isso ela vale
   para toda capa, sem :not(): duas regras concorrentes, uma com :not() e
   outra sem, tem especificidade diferente (0,3,0 contra 0,2,0) e a variante
   nunca conseguiria reajustar a propria medida. */
.capa h1 {
  margin: 0;
  max-width: 24ch;
  font-size: var(--t2);
  line-height: 1.04;
  letter-spacing: var(--tk1);
}

.capa h1 em {
  font-style: normal;
  color: var(--verde);
}

/* Sem a coluna da figura o texto tem a largura inteira do container. Quem
   limita passa a ser cada peca por conta propria: o titulo pela regra de
   .capa h1 acima, o lead e a nota pela medida de leitura abaixo. */
.capa:not(.capa--dividida) .capa-texto {
  max-width: none;
}

.capa:not(.capa--dividida) .capa-lead,
.capa:not(.capa--dividida) .capa-nota {
  max-width: 62ch;
}

.capa-lead {
  margin: 0;
  max-width: 58ch;
  font-size: var(--c1);
  line-height: 1.65;
  color: var(--suave);
}

.capa-lead strong {
  color: var(--texto);
  font-weight: var(--p-medio);
}

.capa-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

/* --- Selos --------------------------------------------------------------
   Tres ou quatro garantias curtas, em linha. Nunca numeros inventados: o que
   entra aqui e o que a pagina cumpre no corpo. */
.capa-selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.capa-selos li {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--c4);
  line-height: 1.5;
  color: var(--suave);
}

.capa-selos .icone {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--verde);
}

.capa-nota {
  margin: 0;
  max-width: 54ch;
}

/* Uma linha so, com os campos separados por pontos medios que vem do HTML.
   Flex com wrap em vez de grid: os campos tem larguras muito diferentes
   ("6 min de leitura" contra "Equipe ChatISP") e, quando a tela aperta, o que
   se quer e que o ultimo desca sozinho, nao que os tres virem uma coluna. */
.capa-creditos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e3);
  margin: 0;
  color: var(--tenue);
  font-size: var(--c4);
  letter-spacing: var(--tk-micro);
}

/* A autoria leva a /sobre. Sublinhado fino: sem ele o link seria so a mesma
   cor do texto em volta, e ninguem saberia que da para clicar. */
.capa-creditos a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.capa-creditos a:hover {
  color: var(--texto);
}

/* --- Figura -------------------------------------------------------------
   A moldura leva .mov-parallax e a imagem dentro leva .mov-zoom: as duas
   camadas andam em velocidades diferentes e a profundidade e real. */
.capa-figura {
  margin: 0;
  display: grid;
  gap: var(--e3);
}

.capa-moldura {
  position: relative;
  /* clip, e nao hidden: `hidden` cria scrollport e as timelines de view()
     daqui para dentro passam a medir esta caixa, que nunca rola. O
     movimento congela. Nota longa em css/sec-conexoes.css. */
  overflow: hidden;
  overflow: clip;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-xl);
  background: var(--sup-1);
  box-shadow: var(--sombra-3);
}

.capa-moldura::after {
  /* Vinheta discreta: a fotografia entrega o canto inferior ao texto da
     legenda em vez de terminar num corte duro. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--base-pagina),
    transparent 46%
  );
  opacity: 0.55;
}

.capa-moldura img {
  display: block;
  width: 100%;
  height: auto;
}

.capa-figura figcaption {
  font-size: var(--c5);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--tenue);
}

/* --- Painel -------------------------------------------------------------
   Alternativa a fotografia: um cartao de vidro que a pagina preenche com o
   que quiser (uma conversa, uma tabela curta, um resumo de numeros). */
.capa-painel {
  position: relative;
  padding: var(--e5);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-xl);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
}

/* --- Variantes ----------------------------------------------------------- */

/* Paginas de apoio (404, obrigado, indices curtos). */
.capa--compacta {
  padding-block: var(--esp-secao-curta);
}

.capa--compacta h1 {
  font-size: var(--t3);
}

/* Titulo centralizado, sem coluna de apoio. */
.capa--centro .capa-texto {
  justify-items: center;
  max-width: none;
  text-align: center;
}

.capa--centro .capa-corpo {
  justify-items: center;
}

.capa--centro .capa-acoes,
.capa--centro .capa-selos {
  justify-content: center;
}

.capa--centro .capa-lead {
  margin-inline: auto;
}

/* Capa de artigo: o titulo e o unico protagonista e a linha de creditos
   fecha o bloco. Titulo de artigo e frase inteira, nao chamada de produto:
   seis caracteres a mais de medida sao a diferenca entre duas e tres linhas.

   O lead nao aparece aqui: .capa:not(.capa--dividida) .capa-lead ja fixa 62ch
   com especificidade maior, e capa de artigo nunca e dividida. */
.capa--artigo h1 {
  max-width: 30ch;
  font-size: var(--t3);
  line-height: 1.12;
}

/* --------------------------------------------------------------------------
   02. Trilha de navegacao

   Mudou para css/site.css (secao 15), porque as paginas legais tambem
   escrevem a trilha e nao carregam esta folha (componentes/legal.php).
   Aqui fica so o alvo de toque do celular, na secao responsiva.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   03. Indice lateral

   Para as paginas longas. Fica grudado enquanto a coluna de texto rola, e
   js/site.js marca [aria-current="true"] na secao visivel. Some no tablet:
   abaixo de 980 nao ha coluna sobrando e um indice fixo atrapalharia.
   -------------------------------------------------------------------------- */
.com-indice {
  display: grid;
  grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
  gap: var(--esp-grid);
  align-items: start;
}

.indice {
  position: sticky;
  top: calc(var(--e9) + var(--e5));
  display: grid;
  gap: var(--e3);
}

.indice-titulo {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--tenue);
}

.indice ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--borda);
}

.indice a {
  display: block;
  padding: var(--e2) var(--e4);
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: var(--c4);
  line-height: 1.5;
  color: var(--suave);
  transition:
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.indice a:hover {
  color: var(--texto);
  border-left-color: var(--borda-forte);
}

.indice a[aria-current="true"] {
  color: var(--verde);
  border-left-color: var(--verde);
  font-weight: var(--p-medio);
}

/* --------------------------------------------------------------------------
   04. Prosa: o corpo de texto longo

   Uma classe so, aplicada ao contêiner. Tudo que estiver dentro herda o
   ritmo: as paginas e os artigos escrevem HTML simples e nao carimbam classe
   em cada paragrafo.
   -------------------------------------------------------------------------- */
.prosa {
  max-width: 68ch;
  font-size: var(--c2);
  line-height: 1.78;
  color: var(--suave);
}

.prosa > * + * {
  margin-top: var(--e4);
}

.prosa > * {
  margin-bottom: 0;
}

.prosa h2 {
  margin-top: var(--e7);
  font-size: var(--t5);
  line-height: 1.2;
  letter-spacing: var(--tk3);
}

.prosa h3 {
  margin-top: var(--e6);
  font-size: var(--c1);
  line-height: 1.35;
  color: var(--texto);
}

.prosa h2:first-child,
.prosa h3:first-child {
  margin-top: 0;
}

.prosa p {
  margin-block: 0;
}

.prosa strong {
  color: var(--texto);
  font-weight: var(--p-medio);
}

/* Link dentro de texto corrido.
   Vale em todo bloco do kit que carrega frase inteira, nao so na .prosa. Um
   link sem sublinhado nem cor no meio de um paragrafo e invisivel para quem
   enxerga pouco e para quem so passa o olho, e .aviso, .nota e dd sao
   justamente onde moram as ressalvas que mais precisam levar a algum lugar.
   O .acordeao entrou depois: numa pagina onde cada resposta manda o leitor
   para uma pagina interna, vinte links saindo sem cor nem sublinhado nao e
   detalhe: e a pagina inteira perdendo a funcao.
   .botao e .link-seta ficam de fora: ja tem forma propria. */
:is(.prosa, .aviso, .nota, .painel, .passo-corpo, .dupla-texto, .secao-lead, .especificacoes dd, .cartao p, .acordeao) a:not(.botao):not(.link-seta) {
  color: var(--verde);
  text-decoration: underline;
  text-decoration-color: var(--verde-linha);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-1) var(--ease);
}

:is(.prosa, .aviso, .nota, .painel, .passo-corpo, .dupla-texto, .secao-lead, .especificacoes dd, .cartao p, .acordeao) a:not(.botao):not(.link-seta):hover {
  text-decoration-color: var(--verde);
}

.prosa ul,
.prosa ol {
  padding-left: var(--e5);
  display: grid;
  gap: var(--e2);
}

.prosa li::marker {
  color: var(--verde);
}

/* A barra verde continua sendo a borda esquerda de sempre, so que pintada
   por um ::before, porque borda nao escala e esta precisa se desenhar de cima
   para baixo quando a citacao entra (secao 08). A borda fica no lugar, com a
   mesma espessura e transparente: e ela que segura a geometria, entao o
   padding, a largura e a posicao do texto nao mudam um pixel. O ::before se
   posiciona contra a caixa de padding, e -2px o devolve exatamente para cima
   de onde a borda era pintada. */
.prosa blockquote {
  position: relative;
  margin: var(--e6) 0;
  padding-left: var(--e5);
  border-left: 2px solid transparent;
  font-size: var(--c1);
  line-height: 1.6;
  color: var(--texto);
}

.prosa blockquote::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -2px;
  width: 2px;
  background: var(--verde);
  transform-origin: center top;
}

.prosa blockquote p {
  margin: 0;
}

.prosa figure {
  margin: var(--e6) 0;
  display: grid;
  gap: var(--e3);
}

.prosa figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
}

.prosa figcaption {
  font-size: var(--c4);
  color: var(--tenue);
}

.prosa hr {
  margin-block: var(--e7);
  border: 0;
  border-top: 1px solid var(--borda);
}

.prosa code {
  padding: 0.15em 0.4em;
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  background: var(--sup-1);
  font-family: var(--mono);
  font-size: var(--corpo-mono);
  color: var(--verde);
}

/* Tabela dentro do texto corrido. O .comparativo do kit foi desenhado para a
   largura de uma secao inteira; aqui a coluna tem a medida de leitura e o que
   cabe e uma tabela enxuta, de duas ou tres colunas.

   Ela NAO rola: sem wrapper nao ha o que rolar, e um <table> nu so ganharia
   scroll virando `display: block`, o que faria a tabela encolher para o
   conteudo e largar a largura da coluna. Entao ela se ajusta: as celulas
   quebram linha. Quem precisa de tabela larga de verdade usa o .comparativo
   dentro de .tabela-rolo, que e o bloco do kit feito para isso (5.3).
   O overflow-wrap e a rede de seguranca: uma URL ou um codigo sem espaco
   numa celula estouraria a coluna inteira. */
.prosa table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--c3);
  line-height: 1.6;
  overflow-wrap: break-word;
}

.prosa thead th {
  padding: var(--e3);
  border-bottom: 1px solid var(--borda-forte);
  text-align: left;
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--tenue);
}

.prosa tbody th,
.prosa tbody td {
  padding: var(--e3);
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}

.prosa tbody th {
  text-align: left;
  font-weight: var(--p-medio);
  color: var(--texto);
}

.prosa tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

.prosa caption {
  margin-bottom: var(--e3);
  text-align: left;
  font-size: var(--c4);
  color: var(--tenue);
}

/* Um aviso ou um painel no meio do texto e uma pausa, nao mais um paragrafo:
   precisa de mais ar do que a distancia entre duas frases. */
.prosa > :is(.aviso, .painel, .painel-dados, .especificacoes, .tabela-rolo) {
  margin-block: var(--e6);
}

/* --------------------------------------------------------------------------
   05. Blocos de conteudo

   O kit com que as paginas sao montadas. Cada bloco resolve uma intencao
   editorial; nenhuma pagina precisa inventar um layout novo para dizer
   "estes sao os numeros" ou "esta e a ordem dos passos".
   -------------------------------------------------------------------------- */

/* --- 5.0 Ritmo entre blocos irmaos --------------------------------------
   Nenhum bloco do kit carrega margem propria: um bloco nao sabe, nem deve
   saber, se ha outro em cima dele. So o .secao-cabecalho tinha a sua, em
   site.css, e por isso uma secao com cabecalho + grade + aviso saia com a
   grade colada no aviso.

   A distancia e da SECAO, nao do bloco: ela mora aqui, numa unica regra de
   adjacencia entre filhos diretos do .container. Os blocos estao nomeados um
   a um de proposito. O seletor curto (`.container > * + *`) alcancaria
   tambem as secoes da home reaproveitadas nas paginas internas, que trazem
   o proprio espacamento de css/sec-*.css e levariam folga dobrada. */
.secao .container
  > :is(.painel, .painel-dados, .grade, .passos, .tabela-rolo, .comparativo,
        .citacao, .aviso, .nota, .especificacoes, .dupla, .linha-tempo,
        .fita, .prosa, .cartao-link, .acordeao)
  + :is(.painel, .painel-dados, .grade, .passos, .tabela-rolo, .comparativo,
        .citacao, .aviso, .nota, .especificacoes, .dupla, .linha-tempo,
        .fita, .prosa, .cartao-link, .acordeao) {
  margin-top: var(--esp-bloco);
}

/* --- 5.0.1 Painel -------------------------------------------------------
   A superficie generica: uma caixa com borda e fundo, para qualquer coisa
   que precise se destacar do corpo da secao sem virar cartao. Usada como
   moldura de listas, tabelas curtas e maquetes. O titulo e opcional. */
.painel {
  display: grid;
  align-content: start;
  gap: var(--e4);
  padding: var(--e6);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--sup-1);
  box-shadow: var(--sombra-1);
}

.painel-titulo {
  margin: 0;
  color: var(--verde);
  font-family: var(--fonte);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

/* Nenhuma variante clara aqui, de proposito: .painel so usa --sup-1,
   --borda, --verde e --sombra-1, e .em-papel ja reescreve os quatro.

   O MESMO VALE PARA O KIT INTEIRO, e vale dizer por que. Dez blocos
   `.em-papel X` foram apagados daqui em 20/09/2026: .painel-dados, .passo
   (circulo e fio), .tabela-rolo, .comparativo (th/td/caption e thead),
   .aviso, .midia-moldura, .marco, .fita li e .relacionada (repouso e hover).
   Todos escreviam a mao exatamente o que o token ja entrega: `background:
   var(--papel-2)` onde a base dizia `var(--sup-1)`, `border-color:
   var(--borda-clara)` onde a base dizia `var(--borda)`. Zero pixel mudou ao
   remove-los, e e esse o ponto. Eles nao eram inofensivos: cada um era uma
   segunda fonte da verdade que precisaria ser lembrada a cada mudanca na
   base, e a falta de UMA delas e um componente que so quebra no capitulo
   claro. Um componente do kit deve sair de --sup-*, --borda*, --verde e
   --sombra-*; .em-papel cuida do resto. Se precisar de variante clara, a
   pergunta certa e por que a base nao esta em token. */

/* --- 5.0b Cartao nas internas -------------------------------------------
   site.css entrega a caixa do .cartao (padding, borda, fundo) porque a home
   precisa dela. O ritmo interno de icone, titulo e texto e o mesmo em todas
   as paginas internas, entao mora aqui uma vez so, e nenhum css/pag-*.css
   precisa redescobrir. As cores saem de token: em capitulo claro o .em-papel
   reescreve --sup-2, --borda e --suave, e o cartao acompanha sozinho. */
.pagina-interna .cartao {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--e3);
}

.pagina-interna .cartao h3 {
  margin: 0;
  font-size: var(--c1);
  line-height: 1.3;
  letter-spacing: var(--tk3);
}

/* So o paragrafo NU. Ver a nota de .dupla-texto p:not([class]) em
   css/pagina.css. Seletor de elemento pesa (0,1,1) e vence calado o
   .nota e o .sobretitulo, que pesam (0,1,0). */
.pagina-interna .cartao p:not([class]) {
  margin: 0;
  font-size: var(--c3);
  line-height: 1.68;
  color: var(--suave);
}

.pagina-interna .cartao > .cartao-icone {
  margin-bottom: var(--e1);
}

/* --- 5.1 Painel de dados ------------------------------------------------
   Numeros grandes. Os que sao contaveis levam [data-contar] e js/site.js
   anima a subida quando o bloco entra. SO ENTRA AQUI NUMERO VERIFICAVEL:
   quantidade de canais, de integracoes, de dias de teste, de planos. Nunca
   percentual de produtividade, base de clientes ou disponibilidade. */
.painel-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--e5);
  padding: var(--e6);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--sup-1);
}

.dado {
  display: grid;
  gap: var(--e2);
  align-content: start;
}

.dado-numero {
  font-family: var(--fonte);
  font-size: var(--t4);
  font-weight: var(--p-max);
  line-height: 1;
  letter-spacing: var(--tk2);
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}

.dado-rotulo {
  font-size: var(--c4);
  line-height: 1.5;
  color: var(--suave);
}

.dado-rotulo strong {
  display: block;
  color: var(--texto);
  font-weight: var(--p-forte);
}

/* --- 5.2 Passos ---------------------------------------------------------
   Sequencia ordenada. O fio vertical liga um passo ao outro e para no
   ultimo, entao a lista tem fim visivel. */
.passos {
  display: grid;
  gap: var(--e6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passo {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e4);
  counter-increment: passo;
}

.passo::before {
  content: counter(passo, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-full);
  background: var(--sup-1);
  font-family: var(--fonte);
  font-size: var(--c4);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-micro);
  color: var(--verde);
}

/* Fio de ligacao. Desenhado do circulo para baixo, exceto no ultimo item. */
.passo:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px;
  left: 22px;
  bottom: calc(var(--e6) * -1);
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--borda-forte),
    transparent
  );
}

.passo-corpo {
  display: grid;
  align-content: start;
  gap: var(--e2);
  padding-top: var(--e2);
}

.passo-corpo h3 {
  margin: 0;
  font-size: var(--c1);
  line-height: 1.3;
  letter-spacing: var(--tk3);
  color: var(--texto);
}

.passo-corpo p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--c3);
  line-height: 1.7;
  color: var(--suave);
}

/* O .passo-corpo e grade: o que for pilula, botao ou link-seta esticaria pela
   largura toda da coluna e viraria uma barra. Texto continua largo; o que tem
   forma propria para de esticar. */
.passo-corpo > :is(.link-seta, .botao, .fita, .selo, .painel-titulo) {
  justify-self: start;
}

/* Duas colunas. Quatro passos curtos empilhados deixam metade da secao
   larga vazia; em 2x2 a sequencia continua legivel pela numeracao. O fio
   sai fora: ligando itens que nao sao vizinhos, ele mentiria sobre a
   ordem de leitura. */
.passos--duplo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-bloco) var(--esp-grid);
}

.passos--duplo .passo:not(:last-child)::after {
  content: none;
}

/* Contagem impar: o ultimo passo cairia sozinho na coluna da esquerda, com
   meia secao vazia ao lado. Atravessando as duas colunas ele vira o degrau
   final da escada, que e o que ele e de qualquer forma. */
.passos--duplo .passo:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}


/* Variante horizontal: quatro etapas curtas lado a lado. */
.passos--linha {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--esp-grid);
}

.passos--linha .passo {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e3);
}

.passos--linha .passo:not(:last-child)::after {
  display: none;
}

.passos--linha .passo-corpo {
  padding-top: 0;
}

/* --- 5.3 Comparativo ----------------------------------------------------
   Tabela de verdade, com <caption> e cabecalhos de linha. No celular ela
   rola na horizontal em vez de espremer as colunas. */
.tabela-rolo {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  /* A tabela e um container rolavel, e um container rolavel precisa ser
     alcancavel pelo teclado: sem foco, quem nao usa mouse nunca chega na
     metade direita (WCAG 2.1.1, nivel A). Isto nao se resolve em CSS. Quem
     resolve e o markup, e por isso todo .tabela-rolo do site leva
     tabindex="0" role="region" aria-label="...". O anel de foco vem de
     [tabindex]:focus-visible, em site.css. */
  -webkit-overflow-scrolling: touch;
  /* O `overflow-x: auto` corta o DESENHO da tabela, mas nao impede que a
     largura do conteudo (o `min-width: 520px` da .comparativo logo abaixo)
     entre na largura rolavel da PAGINA. No celular isso virava arrasto
     lateral do site inteiro: 149px em /ixc, 122px em /api, 111px em
     /para-a-gestao e 31px em /campanhas, medidos a 390px de viewport.
     `contain: paint` fecha a caixa de verdade. E seguro porque nada aqui
     dentro precisa pintar fora dela: o que passaria da borda ja estava
     sendo cortado pelo overflow. */
  contain: paint;
}

.comparativo {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--c3);
  line-height: 1.6;
}

.comparativo caption {
  padding: var(--e4) var(--e5);
  text-align: left;
  font-size: var(--c4);
  color: var(--tenue);
  border-bottom: 1px solid var(--borda);
}

.comparativo th,
.comparativo td {
  padding: var(--e3) var(--e5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borda);
}

.comparativo thead th {
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--texto);
  background: var(--sup-1);
  white-space: nowrap;
}

.comparativo tbody th {
  font-weight: var(--p-medio);
  color: var(--texto);
}

.comparativo td {
  color: var(--suave);
}

.comparativo tr:last-child th,
.comparativo tr:last-child td {
  border-bottom: 0;
}

/* Marcas de presenca. O "sim" e verde, o "nao" e apenas tenue: nenhuma
   coluna e pintada de vermelho, porque nenhuma opcao aqui esta errada. */
.marca-sim,
.marca-nao {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  font-size: var(--c5);
  line-height: 1;
}

.marca-sim {
  background: var(--verde-vidro);
  color: var(--verde);
}

.marca-nao {
  border: 1px solid var(--borda-forte);
  color: var(--tenue);
}

/* --- 5.4 Citacao em destaque -------------------------------------------
   Para uma frase do produto ou uma definicao. NAO e depoimento de cliente:
   o site nao publica depoimento sem evidencia. */
.citacao {
  position: relative;
  max-width: 34ch;
  margin: 0;
  padding-left: var(--e6);
  font-size: var(--t5);
  line-height: 1.28;
  letter-spacing: var(--tk3);
}

.citacao::before {
  content: "";
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0;
  width: 2px;
  background: var(--verde);
}

.citacao em {
  font-style: normal;
  color: var(--verde);
}

.citacao-fonte {
  display: block;
  margin-top: var(--e4);
  font-size: var(--c4);
  font-weight: var(--p-normal);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--tenue);
}

/* --- 5.5 Aviso ----------------------------------------------------------
   Caixa de ressalva. E o lugar onde as condicoes reais do produto aparecem
   sem virar letra miuda: dependencia de servico contratado, limites de
   plano, o que a Meta cobra. */
.aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-left: 2px solid var(--verde);
  border-radius: var(--r-md);
  background: var(--sup-1);
}

.aviso .icone {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--verde);
}

/* O aviso e uma grade de duas colunas, icone e texto. O icone ocupa a
   primeira celula; tudo o que vier depois dele pertence a coluna do texto,
   inclusive o segundo paragrafo, que senao cairia embaixo do icone. */
.aviso > :not(.icone) {
  grid-column: 2;
}

.aviso p {
  margin: 0;
  font-size: var(--c3);
  line-height: 1.7;
  color: var(--suave);
}

.aviso p + p {
  margin-top: var(--e3);
}

.aviso strong {
  color: var(--texto);
  font-weight: var(--p-medio);
}

/* --- 5.6 Especificacoes -------------------------------------------------
   Lista de definicao em duas colunas. Para requisitos, limites e campos:
   coisas que se consultam, nao que se leem de ponta a ponta. */
.especificacoes {
  display: grid;
  gap: 0;
  margin: 0;
  /* Consulta de CONTAINER, e nao de viewport, porque este bloco aparece em
     dois contextos de largura muito diferente: sozinho no container (~970px)
     e como coluna estreita de .dupla--texto-maior (~370px em tela de 1024).
     Uma media query nao sabe distinguir os dois, e foi exatamente isso que
     quebrou em 1024px, logo ACIMA do breakpoint de 980 em que a .dupla ainda
     nao empilhou. Ver a regra de empilhamento logo abaixo. */
  container-type: inline-size;
  container-name: especificacoes;
}

/* A borda de baixo continua declarada, e transparente: e ela que ocupa o
   1px de ALTURA que a divisoria sempre ocupou. Sem isso a lista inteira
   encolhe um pixel por linha, 7px medidos numa lista de oito. O ::after e
   posicionado contra a caixa de padding, e o -1px o devolve para cima da
   borda, no mesmo lugar em que ela era pintada. */
.especificacoes div {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--e3) var(--e5);
  padding-block: var(--e4);
  border-bottom: 1px solid transparent;
}

/* A divisoria e um ::after de 1px, e nao a propria borda, porque borda nao
   escala: assim a linha pode se desenhar da esquerda conforme a linha entra
   (secao 08). Parada, e pixel a pixel a mesma coisa que a borda era. A cor
   sai de --borda, que .em-papel ja reescreve, e por isso nao ha variante
   clara aqui. */
.especificacoes div::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--borda);
  transform-origin: left center;
}

.especificacoes div:first-child {
  padding-top: 0;
}

.especificacoes div:last-child {
  border-bottom: 0;
}

.especificacoes div:last-child::after {
  content: none;
}

.especificacoes dt {
  font-size: var(--c4);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--texto);
}

.especificacoes dd {
  margin: 0;
  font-size: var(--c3);
  line-height: 1.7;
  color: var(--suave);
}

/* Quando o proprio bloco e estreito, o rotulo deixa de ser coluna e vira
   linha de cima. Com os 200px fixos do rotulo, um bloco de 371px deixava 147px
   para o valor: 18 caracteres por linha, e um <code> de "Authorization: Bearer"
   (175px, nowrap por pag-api.css:50) vazava 28px, que subiam pela arvore e
   apareciam como 3px de rolagem horizontal na PAGINA inteira.

   520px e o ponto em que o valor ainda recebe ~300px, que e onde a prosa
   desta lista volta a passar de 26 caracteres por linha. */
@container especificacoes (max-width: 520px) {
  .especificacoes div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e2);
  }
}

/* --- 5.7 Bloco dividido -------------------------------------------------
   Texto de um lado, apoio do outro. E o layout mais usado do site inteiro;
   [data-lado="fim"] inverte a ordem visual sem mexer na do documento. */
.dupla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--esp-grid);
  align-items: center;
}

.dupla--texto-maior {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.dupla--apoio-maior {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.dupla--topo {
  align-items: start;
}

.dupla > [data-lado="fim"] {
  order: 1;
}

.dupla-texto {
  display: grid;
  justify-items: start;
  gap: var(--e4);
  max-width: 56ch;
}

.dupla-texto h2 {
  margin: 0;
  font-size: var(--t4);
  line-height: 1.1;
  letter-spacing: var(--tk2);
}

.dupla-texto h3 {
  margin: 0;
  font-size: var(--c1);
  line-height: 1.3;
  color: var(--texto);
}

/* So o paragrafo NU. O seletor era `.dupla-texto p`, que pesa (0,1,1) e por
   isso vencia calado .sobretitulo e .nota, ambos (0,1,0): um <p class="nota">
   dentro de uma dupla saia em --c2 no lugar de --c4, e um <p class="sobretitulo">
   perdia o caixa-alta inteiro. Ninguem ve esse tipo de erro: o texto so fica
   um pouco errado. O :not([class]) devolve a regra ao seu escopo real: quem
   traz classe propria esta pedindo outra forma, e ganha. */
.dupla-texto p:not([class]) {
  margin: 0;
  font-size: var(--c2);
  line-height: 1.75;
  color: var(--suave);
}

/* --- 5.8 Midia: saiu daqui ---------------------------------------------
   Havia aqui um .midia: <figure> com moldura, legenda e ganchos de
   movimento (.mov-parallax na moldura, .mov-zoom na imagem). Componente
   inteiro, bem desenhado, e sem um unico consumidor em PHP desde que
   nasceu. Saiu em 20/09/2026.

   Nao saiu por falta de vontade de usar imagem nas internas. Saiu por falta
   de imagem para usar. O site tem sete fotografias, e as sete ja estao na
   home: tres no slider da abertura e quatro como fundo de secao. Todas sao
   compostas com os 48% da esquerda vazios, para a tipografia entrar por
   cima; recortadas para uma figura de corpo de texto, viram foto generica.
   E este projeto ja tem a resposta para foto generica escrita em
   pag-noticias.css, na coluna do destaque: "o site nao tem banco de imagem
   editorial e uma foto generica seria pior que nenhuma".

   Para voltar, o que precisa existir nao e esta regra. E o assunto: captura
   real do painel, diagrama de topologia, foto feita para a pagina. No dia em
   que existir, vale reconstruir com um cuidado que a versao antiga nao
   tinha: a moldura levava `overflow: hidden`, e isso CONGELA a timeline de
   view() da imagem dentro dela (armadilha 2 do SITE.md). O certo e
   `overflow: clip`. Do contrario o .mov-zoom prometido no comentario nunca
   teria acontecido.
   ------------------------------------------------------------------------ */

/* --- 5.9 Linha do tempo -------------------------------------------------
   Marcos em sequencia. Difere de .passos por ser horizontal e por cada
   marco ter uma etiqueta propria (mes, fase, versao). */
.linha-tempo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--esp-grid);
  margin: 0;
  padding: 0;
  list-style: none;
}

.marco {
  display: grid;
  gap: var(--e3);
  align-content: start;
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
}

.marco::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: calc(var(--e5) * -1 - 5px);
  border-radius: var(--r-full);
  background: var(--verde);
  box-shadow: 0 0 0 4px var(--verde-vidro);
}

.marco-etiqueta {
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--verde);
}

.marco h3 {
  margin: 0;
  font-size: var(--c2);
  line-height: 1.3;
  color: var(--texto);
}

.marco p {
  margin: 0;
  font-size: var(--c4);
  line-height: 1.65;
  color: var(--suave);
}

/* --- 5.10 Fita de itens -------------------------------------------------
   Tira horizontal de nomes curtos (ERPs, canais, formatos). Estatica: nada
   aqui desliza sozinho. O movimento, quando existe, e .mov-deriva ligado ao
   scroll, que para quando a pagina para. */
.fita {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fita li {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-full);
  font-size: var(--c4);
  line-height: 1.4;
  color: var(--suave);
}

.fita .icone {
  width: 15px;
  height: 15px;
  color: var(--verde);
}

/* --- 5.11 Cartao de recurso --------------------------------------------
   Extensao do .cartao de site.css para quando o cartao vira link de navegacao
   com seta no canto. */
.cartao-link {
  position: relative;
  display: grid;
  gap: var(--e3);
  align-content: start;
  padding-right: var(--e6);
}

.cartao-link .cartao-seta {
  position: absolute;
  top: var(--e5);
  right: var(--e5);
  font-style: normal;
  font-size: var(--c3);
  color: var(--tenue);
  transition:
    color var(--dur-1) var(--ease),
    translate var(--dur-2) var(--ease-solto);
}

.cartao-link:hover .cartao-seta {
  color: var(--verde);
  translate: 2px -2px;
}

/* --------------------------------------------------------------------------
   06. Relacionadas

   Markup em componentes/pagina.php (blocoRelacionadas). Sempre o penultimo
   bloco da pagina, logo antes da chamada final.
   -------------------------------------------------------------------------- */
.bloco-relacionadas .sobretitulo {
  display: block;
  margin: 0 0 var(--e5);
  color: var(--tenue);
}

/* Piso de 300px, e nao os 240px que a medida do cartao sugeriria: a
   `.relacionada` reserva uma calha a direita para a seta, entao o texto recebe
   ~74px a menos que o cartao. Com 240 cabiam tres colunas em 820px e o resumo
   ficava com 175px, cinco linhas de 20 caracteres. Com 300 sao duas colunas
   ali, e as quatro de sempre voltam a partir de ~1300px. */
.relacionadas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--e4);
}

.relacionada {
  position: relative;
  display: grid;
  gap: var(--e3);
  align-content: start;
  padding: var(--e5);
  padding-right: var(--e7);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--sup-1);
  transition:
    border-color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    translate var(--dur-2) var(--ease-solto);
}

.relacionada:hover {
  border-color: var(--borda-forte);
  background: var(--sup-2);
  translate: 0 -3px;
}

.relacionada strong {
  font-family: var(--fonte);
  font-size: var(--c2);
  font-weight: var(--p-forte);
  line-height: 1.3;
  letter-spacing: var(--tk3);
  color: var(--texto);
}

.relacionada p {
  margin: 0;
  font-size: var(--c4);
  line-height: 1.6;
  color: var(--suave);
}

.relacionada-seta {
  position: absolute;
  top: var(--e5);
  right: var(--e5);
  font-size: var(--c3);
  color: var(--tenue);
  transition:
    color var(--dur-1) var(--ease),
    translate var(--dur-2) var(--ease-solto);
}

.relacionada:hover .relacionada-seta {
  color: var(--verde);
  translate: 2px -2px;
}

/* --- 6.1 Cartao de artigo -----------------------------------------------
   A unidade de listagem de um texto do blog. Mora aqui, e nao em
   pag-noticias.css, porque deixou de ser coisa de /noticias/: aparece no
   indice do blog, no pe de cada artigo ("Da mesma prateleira") e no bloco
   "Leia tambem" de toda pagina do produto que tenha artigo falando dela.
   Tres lugares, uma folha. E esta folha e a que todos eles ja carregam.

   Nao e o mesmo cartao que .relacionada: aquele aponta para uma pagina do
   produto e mostra icone; este mostra eixo, data e tempo de leitura, que e
   justamente o que diz "isto e um texto, vai levar seis minutos". A
   diferenca visual e a informacao, nao o enfeite.

   E um <a>, entao o estado de foco importa. --sup-2 e --borda ja sao
   reescritos por .em-papel, entao o cartao funciona nos dois capitulos sem
   variante clara nenhuma.

   Flex em coluna, e nao grid: os cartoes de uma fileira tem a mesma altura
   (a grade estica) mas titulos de uma, duas ou tres linhas, e a data precisa
   ficar no pe de todos. Em coluna flex isso e uma linha, `margin-top: auto`
   no ultimo filho, e funciona sem que esta folha precise saber quantos
   filhos o cartao tem. Em grid seria preciso fixar as faixas
   (`auto auto 1fr auto`), o que amarra o CSS a ordem exata do HTML em tres
   arquivos diferentes. */
/* A grade que leva cartoes de artigo pede coluna mais larga que as outras.

   .grade--3 abre uma coluna a cada 280px, medida pensada num cartao de
   produto: rotulo curto, titulo de duas palavras. O cartao de artigo tem
   32px de padding de cada lado, entao 280px de coluna viram 216px de texto.
   E o titulo dele e uma frase editorial inteira ("Da conversa ao ticket:
   como nao perder um pedido no meio do dia"). A 980px de viewport cabiam
   exatamente tres colunas de 281px, por um pixel, e o titulo saia em quatro
   linhas de dezesseis caracteres: uma tira, nao um titulo.

   340px e a largura em que o mesmo titulo cai em duas linhas confortaveis.
   O efeito e so a 980px e arredores: a 1280px tres colunas de 340px ainda
   cabem folgadas (1132 de 1216), entao o desktop nao muda em nada. O que
   muda e o tablet, que era exatamente onde apertava.

   Escrito com :has e nao com uma classe nova porque a largura minima e uma
   propriedade DO CARTAO, nao da pagina: quem escreve um bloco novo de
   artigos usa .grade--3 como sempre e recebe a medida certa sem saber que
   ela existe. */
.grade:has(> .cartao-artigo) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.cartao-artigo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e6);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--sup-2);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease);
}

.cartao-artigo:hover {
  transform: translateY(-3px);
  border-color: var(--verde-linha);
  background: var(--sup-3);
}

.cartao-artigo:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
}

.cartao-artigo-eixo {
  color: var(--verde);
  font-family: var(--fonte);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

.cartao-artigo h3 {
  margin: 0;
  font-size: var(--c1);
  line-height: 1.32;
  letter-spacing: var(--tk3);
  color: var(--texto);
}

.cartao-artigo p {
  margin: 0;
  font-size: var(--c3);
  line-height: 1.68;
  color: var(--suave);
}

/* Data e tempo de leitura, encostados no pe do cartao mesmo quando os
   resumos tem alturas diferentes. */
/* Data numa ponta, tempo de leitura na outra, com o filete por cima. Eram os
   dois colados e separados por um ponto medio, e o ponto era o problema: numa
   coluna estreita, como tres cartoes a 980px, a linha quebrava e o
   "·" ia abrir a segunda linha, parecendo marcador de lista solto. Com as
   pontas opostas nao ha separador para sobrar, e quando a quebra acontece
   cada campo fica numa linha sua, inteiro. */
.cartao-artigo-pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e1) var(--e3);
  margin-top: auto;
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
}

/* --- 6.2 Leia tambem ----------------------------------------------------
   Markup em componentes/pagina.php (blocoLeiaTambem). Mesmo desenho de
   cabecalho do bloco de relacionadas: sao dois blocos irmaos no pe da
   pagina, e um deles mudar de forma so chamaria atencao para si. */
.bloco-leitura .sobretitulo {
  display: block;
  margin: 0 0 var(--e5);
  color: var(--tenue);
}

/* --------------------------------------------------------------------------
   07. Chamada final

   Ultimo bloco de toda pagina interna, escuro, encostado no rodape. A juncao
   e continua porque as duas superficies sao --base-pagina; por isso nenhuma
   divisa e desenhada aqui.
   -------------------------------------------------------------------------- */
.chamada-final {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--base-pagina);
}

.chamada-atmosfera {
  position: absolute;
  inset: auto -10% -40% 30%;
  z-index: -1;
  aspect-ratio: 2.4;
  border-radius: var(--r-full);
  background: radial-gradient(
    ellipse at center,
    var(--brilho-verde),
    transparent 68%
  );
  pointer-events: none;
  --mov-forca: 6%;
}

.chamada-interna {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--esp-grid);
  align-items: center;
}

.chamada-texto {
  display: grid;
  justify-items: start;
  gap: var(--e4);
}

.chamada-texto h2 {
  margin: 0;
  max-width: 18ch;
  font-size: var(--t3);
  line-height: 1.06;
  letter-spacing: var(--tk2);
}

.chamada-texto h2 em {
  font-style: normal;
  color: var(--verde);
}

.chamada-texto p {
  margin: 0;
  max-width: 54ch;
  font-size: var(--c2);
  line-height: 1.75;
  color: var(--suave);
}

.chamada-acao {
  display: grid;
  justify-items: start;
  gap: var(--e4);
  padding: var(--e6);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-xl);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
}

.chamada-acao .nota {
  margin: 0;
  max-width: 40ch;
}

/* --------------------------------------------------------------------------
   08. Movimento das internas

   As 25 paginas institucionais tinham exatamente TRES elementos animados por
   rolagem, e os tres eram cromo compartilhado: a atmosfera da capa, a da
   chamada final e a do rodape. O CORPO da pagina, onde o visitante passa o
   tempo todo, nao se mexia em nenhuma delas.

   Censo de 20/09/2026, contado no navegador com getAnimations() e filtrando
   quem tem timeline propria (view()), nao a do documento:

     home ............... 36
     interna do produto . 15  (era 3)
     indice /noticias/ .. 20  (era 3)
     artigo ............. 12  (era 3)
     legal ..............  1  (o parallax do rodape, e so)

   A legal continua com um, e esta certa assim: ela nao tem capa, nem grade,
   nem passos: nao ha o que mover num documento juridico alem do rodape que
   ela compartilha com o resto do site.

   A regra desta secao e uma so: NADA MUDA COM A PAGINA PARADA. Todo gesto
   daqui e invisivel num print e existe apenas durante a rolagem. Nenhum
   acrescenta uma linha, um brilho ou um deslocamento ao estado final. Sem
   view(), com prefers-reduced-motion ou com a pausa global ligada, a pagina
   fica exatamente como estava antes desta secao existir.

   Por que estrutural aqui, e nao por classe .mov-* no PHP como no resto do
   site: sao gestos do KIT, nao decisoes de uma pagina. Presos ao seletor,
   valem nas 25 de uma vez e ninguem esquece de aplicar na proxima. Os
   @keyframes sao os da secao 17 de css/site.css, sem excecao: o vocabulario
   continua fechado, so muda quem o chama. Consequencia a lembrar: um
   css/pag-*.css que pendure uma classe .mov-* nestes mesmos elementos vai
   disputar `animation-name` com as regras daqui e uma das duas some calada.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* --- 8.1 Profundidade do bloco dividido ------------------------------
       .dupla e o layout mais usado do site: texto de um lado, apoio do
       outro. Parados, os dois lados sobem juntos e a composicao e chapada.
       Com o apoio andando 1,1% mais devagar, as duas colunas passam a ter
       distancias diferentes do leitor, que e o mesmo truque do palco da
       secao de rede na home, na menor dose que ainda se percebe. Forca
       baixa de proposito: sao blocos altos ao lado de texto corrido, e
       qualquer coisa acima de ~2% le como desalinhamento, nao profundidade.

       `translate` nao briga com o data-revelar="escala" que o apoio ja
       costuma ter: aquele anima `transform`. Ver a nota da secao 17. */
    .pagina-interna .dupla > :not(.dupla-texto) {
      --mov-forca: 1.1%;
      animation: mov-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* --- 8.2 O fio dos passos se desenha ---------------------------------
       O fio que liga um passo ao seguinte ja existia, pronto, do primeiro
       quadro. Desenhado de cima para baixo no ritmo da leitura, ele passa a
       dizer o que a lista diz: isto tem ordem, e a ordem e esta. Ancorado no
       proprio passo, entao cada um desenha na sua vez, de graca.

       So a variante vertical: .passos--duplo e .passos--linha ja anulam o
       fio (`content: none` / `display: none`), e o seletor herda isso. */
    .passo:not(:last-child)::after {
      transform-origin: center top;
      scale: 1 0;
      animation: passo-fio linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 30%;
    }

    @keyframes passo-fio {
      to {
        scale: 1 1;
      }
    }

    /* --- 8.3 A lista de especificacoes se escreve ------------------------
       Cada divisoria corre da esquerda quando a sua linha entra. Como a
       ancora e a propria linha, a cascata sai na ordem de leitura sem
       nenhum atraso escrito. E o gesto de .mov-fio (secao 17), aplicado a
       um componente que nao tinha como receber a classe: a divisoria e um
       pseudo-elemento. */
    .especificacoes div::after {
      animation: mov-fio linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 25%;
    }

    /* --- 8.4 As relacionadas chegam em cascata ---------------------------
       Ultimo bloco antes da chamada final, e ate aqui os quatro cartoes
       apareciam no mesmo instante. .mov-empurrar existia na secao 17 desde
       o inicio e nunca tinha sido usado, apesar de descrito para exatamente
       este caso: "blocos que se revezam dentro de uma grade e nao devem
       chegar todos ao mesmo tempo". O atraso vem da faixa, nao de
       animation-delay: timeline de scroll ignora delay. */
    .relacionadas-grade > .relacionada {
      --mov-empurra: 28px;
      animation: mov-empurrar linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    .relacionadas-grade > .relacionada:nth-child(2) {
      animation-range: entry 16% cover 34%;
    }

    .relacionadas-grade > .relacionada:nth-child(3) {
      animation-range: entry 22% cover 38%;
    }

    .relacionadas-grade > .relacionada:nth-child(4) {
      animation-range: entry 28% cover 42%;
    }

    /* --- 8.5 A regua do indice acompanha a leitura -----------------------
       O indice lateral ja dizia ONDE o leitor esta (js/site.js marca
       [aria-current] no titulo visivel). Nao dizia QUANTO falta, e num texto
       de dez minutos essa e a pergunta que faz alguem continuar ou desistir.
       O trilho de 1px que o indice ja tinha passa a ser preenchido de verde
       na medida em que a prosa rola: o leitor ve a barra crescer com o
       proprio esforco.

       A ancora e a PROSA, nao o indice. O indice e sticky: preso a si mesmo
       ele quase nao rola, e a barra andaria um centimetro na vida. Como os
       dois sao irmaos dentro de .com-indice, `view-timeline-name` na prosa
       sozinho nao bastaria: uma timeline nomeada so e visivel para os
       DESCENDENTES de quem a declara. `timeline-scope` no pai comum e
       exatamente a peca que falta: eleva o nome ate .com-indice e o indice,
       que e irmao, passa a enxerga-lo.

       A fase e `contain`, nao `cover`: num bloco mais alto que a janela,
       `contain` vale do instante em que a prosa preenche a tela ate o
       instante em que a ultima linha chega ao rodape da janela. Ou seja, o
       periodo de leitura, exatamente. Com `cover` a barra ja comecaria cheia
       de titulo e terminaria depois do fim do texto.

       Se `timeline-scope` faltar, o nome nao resolve, a timeline fica inativa
       e a barra simplesmente nao existe, que e o estado de repouso. Mesma
       coisa com prefers-reduced-motion, que nem chega a criar o ::after.
       Nada some da pagina nos dois casos: o trilho cinza e do indice, nao
       desta secao. */
    .com-indice {
      timeline-scope: --leitura;
    }

    .prosa {
      view-timeline-name: --leitura;
    }

    .indice ol {
      position: relative;
    }

    .indice ol::after {
      content: "";
      position: absolute;
      inset: 0 auto 0 -1px;
      width: 1px;
      background: var(--verde);
      transform-origin: center top;
      scale: 1 0;
      animation: indice-leitura linear both;
      animation-timeline: --leitura;
      animation-range: contain 0% contain 100%;
    }

    @keyframes indice-leitura {
      to {
        scale: 1 1;
      }
    }

    /* --- 8.6 A citacao se marca ------------------------------------------
       Cada artigo tem exatamente uma <blockquote>, e ela e o ponto em que o
       texto para de explicar e afirma. A barra verde ja marcava isso parada;
       desenhada de cima para baixo no instante em que a frase entra, ela vira
       o gesto de virar a pagina e sublinhar.

       Um so por artigo, de proposito. O mesmo desenho repetido em cada
       paragrafo viraria tique; numa frase a cada dez minutos de leitura, e
       enfase. A faixa termina em `cover`, e nao dentro de `entry`: a citacao
       tem umas cem linhas de altura, e uma faixa inteira dentro de `entry`
       daria setenta pixels de rolagem: a barra piscaria em vez de correr
       (armadilha 3 do SITE.md). */
    .prosa blockquote::before {
      scale: 1 0;
      animation: citacao-fio linear both;
      animation-timeline: view();
      animation-range: entry 45% cover 32%;
    }

    @keyframes citacao-fio {
      to {
        scale: 1 1;
      }
    }

    /* --- 8.7 Os cartoes de artigo sobem em cascata -----------------------
       Vale nos tres lugares em que o cartao aparece: as quatro grades de
       /noticias/, o "Da mesma prateleira" no pe do artigo e o "Leia tambem"
       das paginas do produto. E o mesmo cartao (6.1), entao e o mesmo gesto.
       Por isso a regra mora aqui, e nao na folha do blog.

       O atraso segue a COLUNA (3n+1, 3n+2, 3n+3), nao a ordem da lista:
       assim a onda corre da esquerda para a direita dentro de cada fileira,
       que e a direcao em que a pessoa le.

       Isso vale enquanto a grade tem tres colunas. Abaixo de ~1130px ela cai
       para duas (6.1) e os ciclos deixam de coincidir: a primeira fileira sai
       10%/16%, a segunda 22%/10%, e a onda da segunda corre ao contrario.
       Fica assim de proposito: corrigir exigiria uma media query com a
       largura de quebra escrita a mao, e essa largura nao existe como numero:
       ela sai de `auto-fit` comparando 340px com o gap, que e um clamp. Um
       numero chutado aqui desalinha no dia em que o gap mudar. O erro real
       sao 12% de faixa num deslocamento de 28px, durante a rolagem, em uma
       fileira: invisivel. A regra errada seria visivel para sempre.

       `translate`, e nao `transform`: [data-revelar] ja usa `transform`
       neste mesmo elemento, e :hover tambem. As tres coisas convivem porque
       cada uma escreve numa propriedade diferente. */
    .grade > .cartao-artigo {
      --mov-empurra: 28px;
      animation: mov-empurrar linear both;
      animation-timeline: view();
    }

    .grade > .cartao-artigo:nth-child(3n + 1) {
      animation-range: entry 10% cover 30%;
    }

    .grade > .cartao-artigo:nth-child(3n + 2) {
      animation-range: entry 16% cover 34%;
    }

    .grade > .cartao-artigo:nth-child(3n + 3) {
      animation-range: entry 22% cover 38%;
    }
  }
}

/* --------------------------------------------------------------------------
   09. Responsivo: 1200 / 980 / 680 / 380
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .com-indice {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  }

  .capa--dividida .capa-corpo {
    gap: var(--esp-bloco);
  }
}

@media (max-width: 980px) {
  /* Uma coluna so. A figura da capa desce para baixo do texto, e o indice
     lateral sai de cena: sem coluna sobrando ele viraria estorvo. */
  .capa--dividida .capa-corpo,
  .dupla,
  .dupla--texto-maior,
  .dupla--apoio-maior,
  .chamada-interna {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Com uma coluna so, a ordem do documento volta a mandar: o texto vem
     primeiro em todos os blocos. */
  .dupla > [data-lado="fim"] {
    order: 0;
  }

  .com-indice {
    grid-template-columns: minmax(0, 1fr);
  }

  .indice {
    display: none;
  }

  /* Sem override de medida: a do titulo esta em `ch`, entao ela encolhe
     sozinha junto com o corpo da fonte. */
  .capa h1 {
    font-size: var(--t3);
  }

  .chamada-texto h2 {
    max-width: 24ch;
  }

  .especificacoes div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e2);
  }
}

@media (max-width: 680px) {
  .capa {
    padding-block: var(--e6) var(--esp-secao-curta);
  }

  .cartao-artigo {
    padding: var(--e5);
  }

  .capa h1,
  .capa--artigo h1 {
    font-size: var(--t4);
  }

  .capa--compacta h1 {
    font-size: var(--t5);
  }

  .capa-texto {
    max-width: none;
  }

  /* Area de toque: cada acao da capa vale a largura toda e 46px de altura. */
  .capa-acoes {
    width: 100%;
  }

  .capa-acoes .botao {
    flex: 1 1 100%;
    justify-content: center;
  }

  .capa-grade {
    background-size: 54px 54px;
  }

  .painel-dados,
  .chamada-acao,
  .capa-painel {
    padding: var(--e5);
  }

  .citacao {
    font-size: var(--t6);
    max-width: none;
  }

  .prosa h2 {
    font-size: var(--t6);
  }

  .indice a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .passo {
    gap: var(--e3);
  }

  /* Duas colunas de passo nao cabem num celular: o numero, o fio e o texto
     dividiriam menos de 160px cada. Volta a ser a escada vertical que a
     variante simples ja e. A regra do ultimo passo impar perde o efeito
     sozinha, porque `1 / -1` numa coluna so ja e a coluna toda. */
  .passos--duplo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-bloco);
  }

  .relacionada {
    padding-right: var(--e6);
  }
}

/* A tabela empilha em 980, e nao em 680 como o resto desta folha. E o unico
   bloco com breakpoint proprio aqui, de proposito: os outros ajustes acima sao
   de espacamento, e espacamento aguenta ficar apertado mais um degrau. Uma
   celula de tabela nao: ela some. Entre 680 e 980 a tabela ainda era tabela, e
   a largura natural de quatro colunas (780px em /integracoes) mal passava do
   container (730px em 768), entao o navegador espremia em vez de rolar: 22
   celulas de 167px a 229px em 768 e 820, medidas em 21/09/2026. 980 e onde a
   .dupla tambem empilha; e o ponto em que a pagina deixa de ter duas colunas de
   qualquer coisa. */
@media (max-width: 980px) {
  /* --- Tabela empilhada em cartoes -------------------------------------
     Ate aqui a tabela rolava na horizontal com `min-width: 520px`, e essa
     era a resposta errada para tres problemas de uma vez, todos medidos a
     390px de viewport:

       1. A metade direita so existia para quem arrastasse. Ninguem arrasta
          uma tabela dentro de uma pagina que ja rola na vertical.
       2. As colunas caiam para 182px, e uma frase de 14px ali quebra a cada
          quinze caracteres. Foram 80 celulas nessa condicao em 16 paginas.
       3. A altura de uma LINHA e a da celula mais alta dela, e a mais alta
          costumava estar fora da tela. Numa tabela de quatro colunas, a
          primeira aparecia com tres linhas de texto e 130px de vazio logo
          abaixo, sem nada na tela que explicasse por que.

     Empilhada, cada <tr> vira um cartao: o cabecalho de linha e o titulo e
     cada celula traz o proprio rotulo de coluna, que o PHP escreve em
     data-col. A tabela inteira cabe na largura, nao ha arrasto, nao ha vazio
     e nenhuma informacao fica escondida.

     O <thead> sai com `display: none`, e nao escondido visualmente: com as
     celulas empilhadas o navegador ja nao entrega a tabela como tabela para
     a tecnologia assistiva, entao uma lista de cabecalhos invisiveis viraria
     um bloco solto de palavras antes do conteudo. Quem le a pagina, com os
     olhos ou com leitor de tela, recebe a mesma coisa: rotulo, valor,
     rotulo, valor. O texto de ::before entra na arvore de acessibilidade, e
     e por ele que a relacao coluna/valor continua declarada (WCAG 1.3.1).

     Tabela SEM data-col cai aqui tambem, e continua correta: sem cabecalho
     de coluna para mostrar, o ::before fica vazio e a celula vira so o
     valor, embaixo do cabecalho de linha. */
  .tabela-rolo {
    border: 0;
    border-radius: 0;
  }

  .comparativo {
    display: block;
    min-width: 0;
  }

  /* `display: block`, e nao so o padding: um <caption> nasce
     `display: table-caption`, e quando a <table> em volta deixa de ser tabela
     ele gera uma caixa de tabela anonima so para si, que encolhe ate o
     conteudo. A legenda saia com 55px de largura, quebrando a cada duas
     palavras, ao lado de 335px vazios. */
  .comparativo caption {
    display: block;
    padding: 0 0 var(--e4);
    border-bottom: 0;
  }

  .prosa caption {
    display: block;
  }

  .comparativo thead {
    display: none;
  }

  .comparativo tbody {
    display: grid;
    gap: var(--e4);
  }

  .comparativo tr {
    display: grid;
    gap: var(--e4);
    padding: var(--e5);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
    background: var(--sup-1);
  }

  .comparativo th,
  .comparativo td,
  .comparativo tr:last-child th,
  .comparativo tr:last-child td {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  /* O cabecalho de linha e o titulo do cartao: sobe de corpo e ganha o fio
     que separava as linhas da tabela, agora separando titulo de conteudo. */
  .comparativo tbody th {
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--borda);
    font-size: var(--c2);
    line-height: 1.35;
  }

  .comparativo td::before {
    content: attr(data-col);
    display: block;
    margin-bottom: var(--e1);
    font-size: var(--c5);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk-largo);
    text-transform: uppercase;
    color: var(--tenue);
  }

  /* As marcas de presenca sao um simbolo de 20px: ao lado do rotulo, e nao
     embaixo dele, senao cada "sim" ocupa duas linhas de cartao.

     Encostadas na borda direita, e nao logo apos o rotulo: os nomes de coluna
     tem comprimentos diferentes ("IXC" e "GESPROV"), e coladas no texto as
     marcas saiam em escada. Na ponta elas formam uma coluna, e o cartao volta
     a ser o que a tabela era: uma lista onde se corre o olho por uma coluna
     so. */
  .comparativo td:has(> .marca-sim, > .marca-nao) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
  }

  .comparativo td:has(> .marca-sim, > .marca-nao)::before {
    margin-bottom: 0;
  }

  /* Mesma ideia nas tabelas dos artigos, que nao tem .tabela-rolo em volta
     nem min-width: elas nao arrastavam, mas espremiam do mesmo jeito. */
  .prosa table {
    display: block;
  }

  .prosa thead {
    display: none;
  }

  .prosa tbody {
    display: grid;
    gap: var(--e4);
  }

  .prosa tbody tr {
    display: grid;
    gap: var(--e3);
    padding: var(--e5);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
    background: var(--sup-1);
  }

  /* O :last-child entra na lista porque a regra original de .prosa tira a
     borda da ultima LINHA da tabela. Empilhada, essa linha e um cartao
     como os outros: o titulo dele precisa do mesmo fio. */
  .prosa tbody th,
  .prosa tbody td,
  .prosa tbody tr:last-child :is(th, td) {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .prosa tbody th,
  .prosa tbody tr:last-child th {
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--borda);
    color: var(--texto);
  }

  .prosa tbody td::before {
    content: attr(data-col);
    display: block;
    margin-bottom: var(--e1);
    font-size: var(--c5);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk-largo);
    text-transform: uppercase;
    color: var(--tenue);
  }
}

@media (max-width: 380px) {
  /* Numa tela de 320px o cartao tem 292px, e os 24px de folga de cada lado
     custam um terco da largura do titulo. Com --e4 o h3 recebe 260px em vez de
     242, que e a diferenca entre quatro linhas de 17 caracteres e tres de 21. */
  .cartao-artigo {
    padding: var(--e4);
  }

  .painel-dados {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e4);
  }

  .dado-numero {
    font-size: var(--t5);
  }

  /* Abaixo de 380 o circulo numerado empurraria o texto para tres palavras
     por linha. O numero sobe para cima do passo. */
  .passo {
    grid-template-columns: minmax(0, 1fr);
  }

  .passo:not(:last-child)::after {
    display: none;
  }
}