/* Central de Faturas — rascunho institucional.
   Sem framework e sem build: rascunho que exige ferramenta para ser visto
   não é revisado por quem decide.

   IDENTIDADE: manual da marca Multipagamentos SA, V01 · abril 2025
   (manual da marca V01, abril 2025). Decisão de identidade de 17/09/2026,
   que substitui a proposta azul do GUIA-CRF-DirecaoDeArte e a decisão de
   reunião de 16/09 (azul e branco, roxo descartado).

   O manual define QUATRO cores e DUAS fontes, nada mais. Todo neutro abaixo é
   DERIVADO delas por color-mix — nenhum cinza foi inventado, porque inventar
   cor fora do manual é exatamente o que o manual proíbe. */

:root {
  /* as quatro cores do manual, literais */
  --marca-preto:       #0e0f0f;   /* CMYK 80 60 70 90 · RGB 14 15 15   */
  --marca-branco:      #ffffff;   /* CMYK 0 0 0 0     · RGB 255 255 255 */
  --marca-roxo:        #7d59fa;   /* CMYK 74 70 0 0   · RGB 125 90 250  */
  --marca-roxo-escuro: #564f9c;   /* CMYK 78 74 0 0   · RGB 86 80 157   */

  /* derivados */
  --tinta:        var(--marca-preto);
  --tinta-suave:  color-mix(in srgb, var(--marca-preto) 62%, var(--marca-branco));
  --papel:        color-mix(in srgb, var(--marca-roxo) 3%, var(--marca-branco));
  --papel-alto:   var(--marca-branco);
  --linha:        color-mix(in srgb, var(--marca-roxo) 18%, var(--marca-branco));

  /* HIERARQUIA DAS DUAS CORES. Medido, não estimado:
       #7d59fa sobre branco  4,49:1 — falha texto normal, PASSA grande/gráfico
       #564f9c sobre branco  7,01:1 — passa tudo
       #0e0f0f sobre #7d59fa 4,28:1 — falha normal, passa grande/gráfico
       #564f9c sobre preto   2,74:1 — falha até gráfico
     #7d59fa é um meio-tom: reprova 4,5:1 contra branco E contra preto, logo
     nunca carrega texto pequeno. Fora disso é legal em tudo — e é a cor que
     a marca usa como CAMPO: na página 4 do manual ela ocupa 28,3% da área,
     contra 12,3% do #564f9c, empatada com o preto e o branco.

     Por isso: #7d59fa governa superfície, tipo grande (>=18,66px bold ou
     24px) e gráfico. #564f9c é a exceção, não a regra — entra só onde o tipo
     é pequeno sobre branco, que é exatamente o papel de uma cor secundária.
     No tema escuro ele nem serve: 2,74:1. Lá o acento já é o #7d59fa. */
  --acento:       var(--marca-roxo-escuro);
  --acento-claro: color-mix(in srgb, var(--marca-roxo) 10%, var(--marca-branco));
  /* o roxo da marca sobre preto dá 4,28:1 e sobre o papel escuro 3,64:1 —
     reprova texto pequeno nos dois. Clareado a 80% passa: 5,94:1 sobre
     preto e 5,05:1 sobre o papel escuro. Derivado do manual por color-mix,
     como todo neutro aqui: nenhuma quinta cor foi inventada. */
  --roxo-em-escuro: color-mix(in srgb, var(--marca-roxo) 80%, var(--marca-branco));
  /* o roxo da marca com branco por cima dá 4,486:1 e reprova texto pequeno
     por 0,014. Dois lugares põem rótulo de 11,5px em branco sobre ele: a ficha
     no instante da transferência e a carga da chamada. 2% do secundário leva a
     4,524:1, e a distância do roxo original é de 3 em 765 na soma dos canais:
     invisível a olho, decisiva na medida. */
  --roxo-rotulo: color-mix(in srgb, var(--marca-roxo) 98%, var(--marca-roxo-escuro));

  /* Âmbar DELIBERADAMENTE fora do manual: marca estado não publicável, e
     precisa destoar da marca para isso. Sai junto com a tarja na publicação. */
  --aviso:        #8a5a00;
  --aviso-fundo:  #fff4d6;

  /* CICLO DOS NÚMEROS. Era 6s com passo de 0,25s: contava 1,25s e ficava
     4,75s imóvel, 79% do tempo. Medido que o relógio da animação acompanha o
     de parede com razão 1,000, então não havia travamento: a página lia como
     parada porque estava. 4s com passo de 0,36s conta 1,8s e descansa 2,2s.
     Os dois percentuais ficam EXATOS aqui (0,36/4 = 9% e 2,2/4 = 55%), o que
     elimina de quebra o resíduo de 20ns nas fronteiras. */
  --ciclo-odo:    4s;

  --vao-secao:    clamp(2rem, 4.5vw, 3rem);
  --vao-continua: clamp(.9rem, 2vw, 1.15rem);

  --max:          68rem;
  --gutter:       1rem;

  /* ESCALAS. Antes: 11 raios, 24 tamanhos de fonte e 14 espaçamentos
     diferentes — nove tamanhos entre .66 e .95rem, com diferenças de 0,32px
     que ninguém vê e que fazem a página parecer não resolvida. */
  --r-xs:   .25rem;   /* selos, etiquetas, marcadores          */
  --r-sm:   .45rem;   /* linhas de lista, campos, blocos        */
  --r-md:   .7rem;    /* cartões e painéis                      */
  --r-lg:   1.5rem;   /* o celular, único objeto que imita peça */
  --r-pill: 999px;    /* fichas e etiquetas: pílula de verdade  */

  --t-xs:   .72rem;   /* rótulo em caixa alta, micro, KPI       */
  --t-sm:   .82rem;   /* detalhe, legenda, vencimento           */
  --t-md:   .92rem;   /* corpo secundário                       */
  --t-base: 1rem;
  /* 1,2rem = 19,2px. Era 1,15rem = 18,40px, 0,26px abaixo do limiar de
     texto grande em bold (18,66px) — e o rótulo do botão depende dele
     para o branco sobre #7d59fa valer 3:1 em vez de 4,5:1. rem é da RAIZ
     (16px): o body em 17px não entra nessa conta. */
  --t-lg:   1.2rem;

  --e-2xs: .3rem; --e-xs:  .5rem;  --e-sm: .8rem;  --e-md: 1.2rem;
  --e-lg:  1.6rem; --e-xl: 2.5rem; --e-2xl: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta:        var(--marca-branco);
    --tinta-suave:  color-mix(in srgb, var(--marca-branco) 68%, var(--marca-preto));
    --papel:        var(--marca-preto);
    --papel-alto:   color-mix(in srgb, var(--marca-branco) 7%, var(--marca-preto));
    --linha:        color-mix(in srgb, var(--marca-branco) 16%, var(--marca-preto));
    --acento:       var(--roxo-em-escuro);
    --acento-claro: color-mix(in srgb, var(--marca-roxo) 18%, var(--marca-preto));
    --aviso:        #f0c14b;
    --aviso-fundo:  #2e2410;
  }
}
:root[data-theme="dark"] {
  --tinta:        var(--marca-branco);
  --tinta-suave:  color-mix(in srgb, var(--marca-branco) 68%, var(--marca-preto));
  --papel:        var(--marca-preto);
  --papel-alto:   color-mix(in srgb, var(--marca-branco) 7%, var(--marca-preto));
  --linha:        color-mix(in srgb, var(--marca-branco) 16%, var(--marca-preto));
  --acento:       var(--roxo-em-escuro);
  --acento-claro: color-mix(in srgb, var(--marca-roxo) 18%, var(--marca-preto));
  --aviso:        #f0c14b;
  --aviso-fundo:  #2e2410;
}

* { box-sizing: border-box; }

/* ── MARCA D'ÁGUA ──
   Fixa: a página rola e o símbolo fica. Sangra pela direita e sai do eixo de
   propósito, porque marca centrada e simétrica é defeito de template. Só o
   símbolo, nunca a assinatura: assinatura a 5% é logo ilegível, e o manual
   proíbe descaracterizar. Fica atrás de tudo e não recebe ponteiro. Os
   cartões têm fundo opaco, então ela aparece só nos respiros. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("simbolo-multipagamentos.png");
  background-repeat: no-repeat;
  /* nada de vh aqui: no Safari do iOS o vh muda quando a barra de endereço
     recolhe, e cada mudança redimensiona uma camada fixa do tamanho da
     viewport no meio do gesto de rolagem. vw e rem não têm esse problema. */
  background-position: right -9vw top 8rem;
  background-size: auto clamp(14rem, 46vw, 34rem);
  opacity: .05;
}

html { -webkit-text-size-adjust: 100%; }

/* o fundo mora no html e o body fica transparente: o pseudo da marca d'água
   vive em z-index -1, e com a cor no body ele ficaria ATRÁS dela. */
html { background: var(--papel); }
body {
  margin: 0;
  background: transparent;
  color: var(--tinta);
  /* manual §Tipografia: Sora é a principal; Arial é a auxiliar declarada
     para quando Sora não for possível — por isso ela, e não outra, é o fallback */
  font-family: 'Sora', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ── tarja de rascunho e marcador de pendência ──
   SEM USO NO HTML DESDE 18/09/2026, e de propósito não foram apagados.
   Os avisos saíram da página por decisão, e podem voltar. O âmbar aqui é
   deliberadamente fora do
   manual da marca, porque estado não publicável PRECISA destoar da marca.
   Apagar estas duas regras obrigaria quem recolocasse o aviso a redescobrir
   essa escolha, e provavelmente a inventar um cinza qualquer. */
/* ── tarja de rascunho: deploy acidental tem que ser constrangedor ── */
.rascunho {
  background: var(--aviso-fundo);
  color: var(--aviso);
  border-bottom: 1px solid color-mix(in srgb, var(--aviso) 35%, transparent);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  padding: .55rem var(--gutter);
}

.limite { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ── cabeçalho ── */
header.topo { border-bottom: 1px solid var(--linha); background: var(--papel-alto); }
/* duas linhas POR DECISÃO, não por acidente. A conta, refeita depois de duas
   medidas erradas: a caixa de CONTEÚDO do .limite tem 1056px, não os 1088 da
   caixa de borda — o padding lateral de 1rem de cada lado sai da conta. A
   trava de co-marca ocupa 322, os seis itens 729 e o vão entre eles 19, o que
   dá 1070. Faltam 14px. Dá para forçar a uma linha encolhendo a assinatura,
   mas aí a trava e o menu ficam encostados, e duas linhas leem melhor. */
.topo .limite {
  display: flex; align-items: center; justify-content: space-between;
  column-gap: var(--e-md); row-gap: .55rem; flex-wrap: wrap; padding-block: .9rem;
}
/* trava co-marca: assinatura da Multipagamentos, barra fina, nome do produto.
   O nome vai no --acento (#564f9c, 7,01:1) e não no roxo principal, que a
   16px daria 4,49:1 e reprovaria. No tema escuro o acento já é clareado. */
.marca { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; min-width: 0; }
.marca-multi { height: 1.35rem; width: auto; display: block; }
.marca-barra { width: 1px; height: 1.3rem; background: var(--linha); flex: none; }
.marca-produto { font-weight: 700; letter-spacing: -.015em; font-size: var(--t-base); color: var(--acento); white-space: nowrap; }
/* --t-sm e vão menor porque agora são SEIS itens. ATENÇÃO: isto já esteve em
   duas regras `nav.menu a` separadas, e a segunda anulava o font-size da
   primeira por vir depois com a mesma especificidade. O menu renderizava a
   --t-md sem ninguém notar, e a medida de 810px que motivou o cabeçalho de
   duas linhas foi tirada assim. Uma regra só, para não repetir.
   O alvo de toque não encolhe: padding-block fica. */
nav.menu { display: flex; gap: var(--e-sm); flex-wrap: wrap; align-items: center; }
nav.menu a.externo { color: var(--tinta); font-weight: 600; }
nav.menu a {
  color: var(--tinta-suave); text-decoration: none; font-size: var(--t-sm);
  /* .6rem em cima e embaixo leva o alvo de toque a ~44px. Era .2rem, ~24px:
     apertado no polegar, e pior desde que o menu passou a ter cinco itens. */
  padding-block: .6rem; border-bottom: 2px solid transparent;
}
nav.menu a:hover { color: var(--tinta); }
nav.menu a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--marca-roxo); }

/* atalho de teclado: a tarja, a marca e cinco itens de menu vêm antes do conteúdo
   em toda página — é bloco a pular (WCAG 2.4.1). Fica fora da tela até receber
   foco; não usa display:none, que o tiraria da ordem de tabulação. */
.pular {
  position: absolute; left: .5rem; top: .5rem; z-index: 10;
  transform: translateY(-250%);
  background: var(--papel-alto); color: var(--tinta);
  border: 1px solid var(--acento); border-radius: var(--r-sm);
  padding: .6rem .9rem; font-size: var(--t-md); font-weight: 700; text-decoration: none;
}
.pular:focus { transform: translateY(0); }

/* foco visível: as âncoras deste site perdem o sublinhado, e o realce padrão do
   navegador é o único sinal que sobra para quem navega por teclado.
   (Esta regra já foi removida uma vez por um script de limpeza de CSS morto:
   o seletor citava `.porta`, que morreu, e levou o `a:focus-visible` junto.) */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ── blocos ── */
/* RITMO ENTRE BLOCOS. Medido antes: os seis vãos eram 144px iguais e somavam
   864px, 18,1% do rolo. O defeito não era só o tamanho: vão idêntico em toda
   parte não diz o que continua e o que muda de assunto, e a página lê como
   lajes soltas.

   Dois degraus agora. O normal separa assunto; `.continua` encosta o bloco
   que é desdobramento do anterior, e nele o filete some — filete anuncia
   troca de assunto, e onde não há troca ele mente. */
section { padding-block: var(--vao-secao); }
section + section { border-top: 1px solid var(--linha); }
section.continua { padding-top: var(--vao-continua); border-top: none; }

.hero h1 {
  font-size: clamp(1.85rem, 5.2vw, 3rem);
  line-height: 1.12; letter-spacing: -.025em; margin: 0 0 1rem;
  max-width: 20ch; font-weight: 700;
}
.hero p.linha-fina {
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  color: var(--tinta-suave); max-width: 58ch; margin: 0;
}

h2 {
  font-size: clamp(1.25rem, 3vw, 1.6rem); letter-spacing: -.015em;
  margin: 0 0 1.5rem; font-weight: 700;
}
h3 { font-size: var(--t-base); margin: 0 0 .45rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1rem; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

.sobrelinha {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--acento); font-weight: 700; margin: 0 0 .7rem;
}

/* ── grades ── */
/* `min(Xrem, 100%)` e não `Xrem` puro: com o mínimo fixo a coluna nunca
   encolhe abaixo dele e estoura a viewport. Medido no QA: a 360px o painel do
   cockpit ficava 352px rígido e vazava 8px; a 320px o vazamento era 48px. */
.grade { display: grid; gap: var(--e-lg); grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); }
.cartao {
  background: var(--papel-alto); border: 1px solid var(--linha);
  border-radius: var(--r-md); padding: 1.4rem;
}
.cartao p { color: var(--tinta-suave); font-size: var(--t-md); margin: 0; }

/* ── passos numerados ── */
ol.passos { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: var(--e-lg); }
ol.passos li { counter-increment: p; display: grid; grid-template-columns: 2.1rem 1fr; gap: var(--e-md); align-items: start; }
ol.passos li::before {
  content: counter(p); grid-row: span 2;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--acento-claro); color: var(--acento);
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-md);
  border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent);
}
ol.passos p { color: var(--tinta-suave); font-size: var(--t-md); }

/* ── lista de garantias ── */
ul.garantias { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-md); }
ul.garantias li { padding-left: 1.6rem; position: relative; max-width: 64ch; }
ul.garantias li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--marca-roxo);
}
ul.garantias strong { display: block; }

/* ausências: o mesmo layout, marcador vazado. Lista de "o que ainda não existe"
   com o ponto cheio das garantias é lida como funcionalidade por quem passa o olho. */
ul.ausencias li::before { background: none; border: 1.5px solid var(--tinta-suave); }
ul.garantias span { color: var(--tinta-suave); font-size: var(--t-md); }

/* ── rodapé ── */
footer {
  border-top: 1px solid var(--linha); background: var(--papel-alto);
  padding-block: 2.5rem; color: var(--tinta-suave); font-size: var(--t-sm);
}
footer .limite { display: grid; gap: var(--e-md); }
footer a { color: var(--tinta-suave); }
footer .nota { max-width: 62ch; }

/* a trava de co-marca tem 322px rígidos e a 320 de viewport sobram 288.
   Medido: 18px de vazamento nas três páginas. Abaixo de 24rem a assinatura
   encolhe e o nome do produto pode quebrar em duas linhas. */
@media (max-width: 24rem) {
  .marca { gap: .45rem; }
  .marca-multi { height: 1.1rem; }
  .marca-barra { height: 1rem; }
  .marca-produto { white-space: normal; font-size: var(--t-md); }
}

@media (max-width: 40rem) {
  /* Sora é mais larga que a fonte do sistema: com os mesmos valores, o menu de
     cinco itens passou de duas para três linhas a 375px. O padding-block fica
     intocado — o alvo de toque não encolhe com a fonte. */
  nav.menu { gap: var(--e-sm); width: 100%; }
  nav.menu a { font-size: var(--t-sm); }
}

/* ════════════════════════════════════════════════════════════════════
   BLOCOS DA HOME — estrutura do wireframe "Home.dc.html" do canvas
   "Wireframe CRF — Site e Portal", na paleta do manual da marca.
   Nenhuma cor nova: tudo sai dos quatro tokens ou de color-mix deles.
   ════════════════════════════════════════════════════════════════════ */

/* ── cabeçalho de três grupos: âncoras · destinos · ações ── */
/* `.grupo`, `.destinos` e `.divisor` saíram com o menu de três blocos.
   Conferido token a token: `grupo` só existe hoje em `.lateral-grupo`, do
   Portal, que é outra classe e continua viva. */

/* ── botões ── */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  /* o roxo da marca, e não o secundário: branco sobre ele dá 4,49:1, que
     reprova texto normal e PASSA texto grande (3:1). O rótulo vai a
     rótulo precisa ficar acima do limiar de texto grande em bold, 18,66px.

     O `max()` é trava, não estilo: --t-lg é compartilhado com mais quatro
     regras, e quem baixasse o token por motivo tipográfico derrubaria em
     silêncio o CTA principal do limiar de 3:1 para o de 4,5:1. 1.167rem =
     18,672px é o piso; acima disso o token manda. */
  background: var(--marca-roxo); color: var(--marca-branco);
  text-decoration: none; font-weight: 700; font-size: max(1.167rem, var(--t-lg));
  padding: .8rem 1.5rem; border-radius: var(--r-sm); border: 1px solid transparent;
  min-height: 2.75rem;
}
.botao:hover { background: var(--marca-roxo-escuro); }
.botao.vazado {
  background: transparent; color: var(--tinta); border-color: var(--tinta);
}
.botao.vazado:hover { border-color: var(--marca-roxo); color: var(--acento); background: transparent; }
.botao.claro { background: var(--marca-branco); color: var(--marca-preto); }
.botao.claro:hover { background: var(--acento-claro); }
.botoes { display: flex; gap: var(--e-md); flex-wrap: wrap; margin-top: 1.75rem; }

/* ── hero com a assinatura da rede ── */
/* o hero é texto ao lado do motion no computador, empilhado no celular.
   Mobile-first: empilhado é o padrão, lado a lado só com largura para os dois. */
.hero-grade { display: grid; gap: var(--e-xl); }
.hero-texto { min-width: 0; }

/* ── bloco do dado de mercado ── */
.dado {
  display: flex; gap: var(--e-xl); align-items: flex-start;
  background: var(--papel-alto); border: 1px solid var(--linha);
  border-radius: var(--r-md); padding: 2.25rem 2.5rem;
}
/* o número era clamp(1,9 a 2,6rem) com a justificativa de que competia com o
   contador do hero. Não competia: a 1280x900 o hero ocupa a primeira tela
   inteira e os dois NUNCA aparecem juntos. Agora é escala de display, e o
   movimento é o mesmo odômetro da cena — o motivo do produto virou sistema,
   em vez de um gráfico com cara de padrão de ferramenta. */
.dado .numero {
  margin: 0 0 .2rem; font-size: clamp(3.4rem, 9vw, 6rem); font-weight: 800;
  line-height: .9; letter-spacing: -.045em; color: var(--marca-roxo); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dado .mais { font-size: .55em; vertical-align: .32em; letter-spacing: 0; }
/* largura fixa porque as casas se sobrepõem em absolute; tabular-nums garante
   que 000 e 300 ocupem exatamente o mesmo avanço */
/* 1,95em e não 1,86em: medido, a caixa ficava 3,18px mais estreita que "300"
   e o dígito vazava dela. Três casas em tabular-nums com letter-spacing -.045em. */
/* sem altura declarada: com `inline-grid` ela é intrínseca. A `height: .9em`
   que morava aqui vinha de quando as casas eram `absolute`, e deixava folga
   exatamente zero — qualquer mudança de métrica da fonte cortaria o dígito. */
.dado .escala {
  display: block; font-size: var(--t-md); font-weight: 600; letter-spacing: 0;
  color: var(--tinta-suave); white-space: normal; max-width: 12ch;
}
.dado-legenda {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 700; letter-spacing: -.015em;
  line-height: 1.28; margin-bottom: .8rem; max-width: 34ch;
}
.dado-nota { font-size: var(--t-md); color: var(--tinta-suave); }

/* ODÔMETRO DO DADO. Ciclo de 6s: conta em 1,25s e descansa 4,75s em 300.
   Sem timeline de rolagem de propósito — `animation-timeline: view()` ainda não
   existe no Firefox, e o fallback dele dispara a contagem no carregamento, onde
   ninguém vê. Ciclo curto resolve sem JS: quem para na seção pega a contagem. */
/* ════════════════════════════════════════════════════════════════════
   ODÔMETRO — componente compartilhado. Sempre SEIS casas.

   As seis ocupam a MESMA célula de grade, então a caixa mede a mais larga
   sozinha. A primeira versão era inline-block com as casas em `absolute` e
   largura em `em`, o que obrigava a adivinhar: medido, ficou 3,18px mais
   estreita que "300" e o dígito vazava. Com grade não há o que adivinhar, e
   "000" e "1.240" convivem na mesma caixa.

   ESPECIFICIDADE, a armadilha desta seção: `.odo > span` é (0,1,1). Os delays
   usam `:nth-child`, que sobe para (0,2,1) e vence. Declarar delay numa classe
   solta (0,1,0) faz o atalho `animation` acima zerar nome E delay das seis —
   foi exatamente o que aconteceu antes, e o número não aparecia.

   Base = QUADRO FINAL: a última casa fica visível com movimento desligado.
   ════════════════════════════════════════════════════════════════════ */
.odo { display: inline-grid; vertical-align: baseline; font-variant-numeric: tabular-nums; }
.odo > span { grid-area: 1 / 1; opacity: 0; animation: odo-passa var(--ciclo-odo, 4s) steps(1) infinite; }
.odo > span:nth-child(2) { animation-delay: .36s }
.odo > span:nth-child(3) { animation-delay: .72s }
.odo > span:nth-child(4) { animation-delay: 1.08s }
.odo > span:nth-child(5) { animation-delay: 1.44s }
.odo > span:last-child { animation: odo-fim var(--ciclo-odo, 4s) steps(1) infinite; animation-delay: 1.8s }
/* exatos, não arredondados: 250/6000 e 4750/6000. Com 4.167% e 79.17% as
   casas se sobrepunham por 0,02ms e 0,2ms — invisível, mas é a mesma classe
   de defeito que no hero custou 40ms. Percentual de animação é conta, não
   estimativa. */
@keyframes odo-passa { 0% { opacity: 1 } 9%,100% { opacity: 0 } }
@keyframes odo-fim   { 0% { opacity: 1 } 55%,100% { opacity: 0 } }

/* marcação de pendência: âmbar, deliberadamente fora da marca, como a tarja */
.pendente {
  font-size: var(--t-xs); font-weight: 700; color: var(--aviso);
  background: var(--aviso-fundo); border-radius: var(--r-xs);
  padding: .45rem .7rem; display: inline-block; margin-top: .9rem;
}

/* ── dois públicos, lado a lado ── */
.publicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--e-lg); }
/* os dois cartões desalinhavam por dentro: `.cartao p` zera a margem, então
   texto, etiquetas e CTA ficavam encostados, e como só o primeiro cartão tem
   etiquetas os dois CTAs paravam em alturas diferentes. Coluna flex com vão
   único resolve o espaçamento, e `margin-top:auto` na esteira empurra as duas
   para a base — é a esteira que passa a alinhar os cartões. */
.publicos .cartao { display: flex; flex-direction: column; gap: var(--e-sm); padding: 1.75rem; }
.publicos .cartao > * { margin: 0 }
.publicos .cartao h2 { font-size: var(--t-lg); }
/* `margin-top:auto` AQUI, com 3 classes (0,3,0), porque o `> * { margin: 0 }`
   acima tem 0,2,0 e engolia o auto declarado em `.esteira` (0,1,0) — medido:
   os dois CTAs ficavam 17px fora, apesar dos cartões terem a mesma altura.
   Ancorando no CTA, o bloco CTA + esteira + nota desce junto e os dois
   cartões passam a ter o mesmo rodapé. */
.publicos .cartao .cta { margin-top: auto }
/* `.cartao p` (0,1,1) vence `.pendente` (0,1,0) em cor e corpo: sem isto o
   âmbar de pendência virava cinza de cartão justo onde ele precisa destoar. */
.publicos .cartao .pendente { font-size: var(--t-xs); color: var(--aviso); }

/* ── ESTEIRA DE MARCAS DE ESPÉCIME ──
   O pedido era logo de parceiro. Marca de empresa real está fora por duas
   razões independentes: desenhar identidade de terceiro é falsificação, e a
   página de Confiança promete que instituição só aparece com autorização
   assinada. O que passa aqui é marca ESQUEMÁTICA de segmento, construída com
   as formas que a cena já usa — a barra de 2px para quem emite (o dado
   saindo), o quadrado cheio para quem recebe (o destino). Ícone de biblioteca
   em círculo colorido está na blacklist da direção de arte.

   WCAG 2.2.2 pede mecanismo de pausa para movimento que dura mais de 5s. Sem
   JS o que dá é pausar em hover e em foco, e parar de vez em reduced-motion.
   Isso MITIGA e não resolve: em toque não existe hover. Decisão pendente. */
.esteira {
  overflow: hidden; padding-top: 1.1rem;
  border-top: 1px solid var(--linha);
  /* a máscara existe para o item não ser cortado em seco na borda */
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.esteira .fita { display: flex; width: max-content; animation: esteira-corre 26s linear infinite; }
.esteira:hover .fita, .esteira:focus-within .fita { animation-play-state: paused }
@keyframes esteira-corre { from { transform: translateX(0) } to { transform: translateX(-50%) } }
/* o espaço vai em margin e não em gap: com gap o último item de cada cópia
   fica sem o espaçamento, e aí -50% não cai no encaixe e a volta pula */
.esteira .esp {
  display: inline-flex; align-items: center; gap: .5rem; margin-right: var(--e-md);
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-suave); white-space: nowrap;
}
/* badge de monograma + assinatura: é assim que placeholder de logo se parece,
   e a tipografia da marca faz o trabalho gráfico — sem ícone de biblioteca.
   Quem EMITE leva o badge vazado (o dado sai); quem RECEBE leva o badge cheio
   (é o destino), na mesma lógica da barra e do quadrado da cena. */
.esteira .esp b {
  display: grid; place-items: center; flex: none;
  min-width: 1.55rem; height: 1.55rem; padding-inline: .28rem;
  border-radius: var(--r-xs); font-size: var(--t-xs); font-weight: 800; letter-spacing: 0;
}
.esteira.emite .esp b {
  background: var(--acento-claro); color: var(--acento);
  border: 1px solid color-mix(in srgb, var(--acento) 26%, transparent);
}
/* fundo no roxo secundário, não no principal: branco sobre o principal dá
   4,49:1 e este rótulo tem 11,5px. Sobre o secundário, 7,01:1. */
.esteira.recebe .esp b { background: var(--marca-roxo-escuro); color: var(--marca-branco); }
@media (prefers-reduced-motion: reduce) {
  .esteira .fita { animation: none }
}
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-xs); }
.etiquetas span {
  font-size: var(--t-xs); font-weight: 700; padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--acento-claro); color: var(--tinta);
}
a.seta { color: var(--acento); font-weight: 700; font-size: var(--t-md); text-decoration: none; }
a.seta:hover { text-decoration: underline; }
.nota-secao { margin-top: 1.75rem; }

/* ════════════════════════════════════════════════════════════════════
   COMO FUNCIONA — três passos ao lado da peça da chamada.

   Aqui havia um despejo de JSON de nove linhas. Saiu por contradizer a
   própria manchete: a seção afirma "uma integração rápida" e o bloco mostrava
   `identificador_fatura_emissor` e uma string Pix de trinta caracteres.
   Parecia difícil. Ocupava 432px de 1056 (41% da seção) para o conteúdo que
   menos carregava peso, e reprovava no teste da direção de arte: um POST com
   corpo JSON existiria para qualquer produto, logo é template, não assinatura.

   No lugar, as DUAS coisas que só este produto promete: os dois códigos viajam
   numa chamada só, e reenviar não duplica. A forma é a ficha da cena, para a
   página ler como um sistema só. A referência completa vive no Portal, que é
   onde o integrador está: a home fala com quem decide.
   ════════════════════════════════════════════════════════════════════ */
.como-grade { display: grid; gap: var(--e-xl); align-items: start; }
.chamada {
  background: var(--papel-alto); border: 1px solid var(--linha);
  border-radius: var(--r-md); padding: 1.5rem; display: grid; gap: .9rem;
}
.chamada > * { margin: 0 }
.chamada-rotulo {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.chamada-linha {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-md); color: var(--tinta);
}
.chamada-linha b { color: var(--acento); font-weight: 700; }
/* a ficha da cena, reusada: as duas cargas lado a lado dizem "mesma chamada" */
.chamada-carga { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.chamada-carga .cg {
  font-size: var(--t-xs); font-weight: 700; padding: .3rem .75rem;
  border: 1px solid var(--linha); border-radius: var(--r-pill);
  background: var(--papel); color: var(--tinta-suave);
  animation: carga-acende var(--ciclo-odo, 4s) ease-in-out infinite;
}
.chamada-carga i { font-style: normal; font-weight: 800; color: var(--tinta-suave); }
/* acendem JUNTAS, sem escalonar: escalonado leria como duas chamadas */
@keyframes carga-acende {
  0%,40%   { border-color: var(--linha); background: var(--papel); color: var(--tinta-suave) }
  50%,58%  { border-color: var(--roxo-rotulo); background: var(--roxo-rotulo); color: var(--marca-branco) }
  70%,100% { border-color: var(--linha); background: var(--papel); color: var(--tinta-suave) }
}
.chamada-saida {
  display: grid; gap: .3rem; font-size: var(--t-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.chamada-saida span { display: flex; gap: .7rem; align-items: baseline; }
.chamada-saida em {
  font-style: normal; font-family: 'Sora', Arial, sans-serif; font-weight: 700;
  font-size: var(--t-xs); color: var(--tinta-suave); min-width: 4.3rem; flex: none;
}
.chamada-nota { font-size: var(--t-sm); color: var(--tinta-suave); }


/* ── os dois painéis de aplicação real ── */
.paineis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: var(--e-lg); }
.paineis .sub { color: var(--tinta-suave); font-size: var(--t-md); margin-bottom: 1.4rem; }

/* ── KPIs do emissor ── */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-sm); }
.kpi-bloco, .kpis > div { background: var(--acento-claro); border-radius: var(--r-sm); padding: 1rem; }
.kpi-bloco { margin-top: .8rem; }
.kpi-rotulo {
  margin: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.kpi-valor { margin: .25rem 0 0; font-size: var(--t-lg); font-weight: 800; color: var(--acento); }

/* ════════════════════════════════════════════════════════════════════
   COCKPIT DO EMISSOR — o painel de operação.

   Só entra métrica que a plataforma REGISTRA. Três coisas ficaram de fora
   por não existirem no esquema nem no contrato, e não por opção estética:

   · custo de arrecadação — não há campo de custo em lugar nenhum;
   · "erro de entrega" — na data desta seção não havia entrega ativa. O que
     existia era RECUSA NO ENVIO: crf:1101, 1102, 1203;
   · "lidas por N instituições" — o marcador de leitura fica com o cliente
     por decisão de 17/09, então este lado não sabe quem leu.

   O que sobra tem lastro: DistribuicaoPorBanco dá a rosca e a divisão por
   meio (envia_codigo_barras / envia_codigo_pix), e a confirmação de pagamento
   traz o trilho por onde a cobrança foi paga.

   Nenhum gráfico com cara de padrão de ferramenta: rampa monocromática
   derivada do roxo por color-mix, rótulo direto no dado e nenhuma legenda
   de fábrica. O ciclo é o do odômetro (--ciclo-odo, 6s no fallback), para
   os números, a rosca, as fatias e as colunas subirem juntos.
   ════════════════════════════════════════════════════════════════════ */

/* o subtítulo pertence ao h2, então recolhe a margem de baixo dele */
.sub-secao { font-size: var(--t-lg); color: var(--tinta-suave); max-width: 64ch; margin: 0 0 1.9rem; }
/* o recuo só vale colado a um h2: declarado no seletor de irmão, e não
   escondido numa margem negativa que quebra a classe em qualquer outro lugar */
h2 + .sub-secao { margin-top: -1rem; }

.paineis .painel { display: flex; flex-direction: column; gap: var(--e-md); padding: 1.75rem; }
.painel > * { margin: 0 }
.painel-titulo {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acento);
}
.painel-nota { font-size: var(--t-sm); color: var(--tinta-suave); }

/* ── a rosca ── */
/* @property é o que permite interpolar um ângulo. Sem suporte, a declaração
   cai e o anel fica no valor inicial: 360deg, que é o quadro final. */
@property --varredura { syntax: "<angle>"; inherits: false; initial-value: 360deg; }

.rosca-bloco {
  display: flex; gap: var(--e-lg); align-items: center; flex-wrap: wrap;
  /* a rampa fica AQUI e não na .rosca porque a chave é irmã dela e precisa
     herdar as mesmas cinco cores */
  --c1: var(--marca-roxo);
  --c2: color-mix(in srgb, var(--marca-roxo) 74%, var(--papel-alto));
  --c3: color-mix(in srgb, var(--marca-roxo) 54%, var(--papel-alto));
  --c4: color-mix(in srgb, var(--marca-roxo) 36%, var(--papel-alto));
  --c5: color-mix(in srgb, var(--marca-roxo) 20%, var(--papel-alto));
}
.rosca { position: relative; width: 9.5rem; height: 9.5rem; flex: none; }
/* a máscara vive no ANEL e não na .rosca: em cima da .rosca ela varreria o
   miolo também, e o número apareceria cortado no meio da varredura */
.rosca .anel {
  position: absolute; inset: 0; border-radius: 50%; --varredura: 360deg;
  background: conic-gradient(var(--c1) 0 34%, var(--c2) 0 58%,
                             var(--c3) 0 76%, var(--c4) 0 90%, var(--c5) 0 100%);
  mask-image: conic-gradient(#000 var(--varredura), transparent 0);
  animation: rosca-varre var(--ciclo-odo, 4s) cubic-bezier(.2,.75,.25,1) infinite;
}
@keyframes rosca-varre { 0% { --varredura: 0deg } 30%,100% { --varredura: 360deg } }
.rosca .miolo {
  position: absolute; inset: 23%; border-radius: 50%; background: var(--papel-alto);
  display: grid; place-content: center; text-align: center;
}
.rosca .miolo .odo { font-size: 1.75rem; font-weight: 800; color: var(--acento); line-height: 1; }
.rosca .miolo em {
  font-style: normal; display: block; font-size: var(--t-xs);
  font-weight: 700; color: var(--tinta-suave); margin-top: .15rem;
}
/* `flex: 1 1 11rem` e não `flex: 1`: com base zero a chave encolhia até 54px ao
   lado da rosca e os itens dela, que têm 110px de conteúdo mínimo, vazavam.
   Medido a 320px: 12px para fora, o último overflow do site. Com base de 11rem
   ela quebra para a linha de baixo em vez de espremer. */
.chave { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2xs); min-width: 0; flex: 1 1 11rem; }
.chave li { display: flex; align-items: center; gap: .55rem; font-size: var(--t-sm); }
.chave li span { color: var(--tinta-suave); flex: 1; }
.chave li b { font-weight: 800; font-variant-numeric: tabular-nums; }
.chave i { width: .55rem; height: .55rem; border-radius: var(--r-xs); flex: none; display: block; }
.chave i.c1 { background: var(--c1) } .chave i.c2 { background: var(--c2) }
.chave i.c3 { background: var(--c3) } .chave i.c4 { background: var(--c4) }
.chave i.c5 { background: var(--c5) }

/* ── as duas fatias: o que foi ofertado contra o que foi pago ── */
.par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--e-md); }
.medida { display: grid; gap: .45rem; }
.fatia {
  height: .55rem; border-radius: var(--r-pill); overflow: hidden;
  background: color-mix(in srgb, var(--marca-roxo) 26%, var(--papel-alto));
}
.fatia i {
  display: block; height: 100%; width: var(--conv); border-radius: var(--r-pill);
  background: var(--marca-roxo); transform-origin: left;
  animation: fatia-cresce var(--ciclo-odo, 4s) cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes fatia-cresce { 0% { transform: scaleX(0) } 30%,100% { transform: scaleX(1) } }
/* o valor vem escrito ao lado do quadrado: cor sozinha não comunica estado */
.chave-linha { display: flex; gap: var(--e-md); flex-wrap: wrap; font-size: var(--t-xs); font-weight: 700; color: var(--tinta-suave); }
.chave-linha span { display: inline-flex; align-items: center; gap: .35rem; }
.chave-linha i { width: .5rem; height: .5rem; border-radius: var(--r-xs); flex: none; display: block; }
.chave-linha i.conv { background: var(--marca-roxo); }
.chave-linha i.pix { background: color-mix(in srgb, var(--marca-roxo) 26%, var(--papel-alto)); }

.kpis .kpi-valor { display: flex; align-items: baseline; gap: .08em; }
.kpis .kpi-valor b { font-size: .68em; font-weight: 800; }
/* num cockpit o número é o que se lê primeiro; --t-lg (19,2px) o deixava do
   tamanho do corpo. #564f9c sobre o fundo de acento dá 6,16:1 em qualquer
   corpo, então subir não custa contraste. */
.painel .kpis .kpi-valor { font-size: 1.7rem; line-height: 1.1; margin-top: .35rem; }

/* ── as colunas do volume mensal ── */
.painel-numero { display: flex; align-items: baseline; gap: .65rem; flex-wrap: wrap; }
.painel-numero .odo {
  font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800;
  letter-spacing: -.035em; color: var(--marca-roxo); line-height: 1;
}
.painel-numero em { font-style: normal; font-size: var(--t-sm); font-weight: 600; color: var(--tinta-suave); }
.colunas { display: flex; align-items: flex-end; gap: var(--e-xs); height: 10.5rem; margin-top: auto; }
.colunas .col {
  flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: .4rem;
}
.colunas .col i {
  display: block; width: 100%; max-width: 2.6rem; height: var(--h);
  background: color-mix(in srgb, var(--marca-roxo) 42%, var(--papel-alto));
  border-radius: var(--r-xs) var(--r-xs) 0 0; transform-origin: bottom;
  animation: col-cresce var(--ciclo-odo, 4s) cubic-bezier(.2,.8,.2,1) infinite;
}
/* (0,3,1) para vencer `.colunas .col i` (0,2,1) — o atalho `animation` acima
   zeraria o delay se a regra fosse mais fraca. Mesma armadilha do odômetro. */
.colunas .col:nth-child(2) i { animation-delay: 0.06s }
.colunas .col:nth-child(3) i { animation-delay: 0.12s }
.colunas .col:nth-child(4) i { animation-delay: 0.18s }
.colunas .col:nth-child(5) i { animation-delay: 0.24s }
.colunas .col:nth-child(6) i { animation-delay: 0.30s }
.colunas .col:nth-child(7) i { animation-delay: 0.36s }
.colunas .col:nth-child(8) i { animation-delay: 0.42s }
.colunas .col.atual i { background: var(--marca-roxo); }
.colunas .col em { font-style: normal; font-size: var(--t-xs); font-weight: 700; color: var(--tinta-suave); }
.colunas .col.atual em { color: var(--acento); }
@keyframes col-cresce { 0% { transform: scaleY(0) } 34%,100% { transform: scaleY(1) } }
/* as barras de "custo médio de arrecadação, antes e depois" saíram daqui:
   a plataforma não registra custo em lugar nenhum do esquema nem do contrato,
   e gráfico de um dado que o sistema não tem é afirmação, não visualização.
   Conferido: `.barras` e `.barra` não têm mais nenhum uso nos três HTML. */

/* ── convite do Portal: o único bloco em fundo de marca ──
   o manual diz que a aplicação ideal é sobre fundo escuro */
.convite { background: var(--marca-preto); border-top: none; }
.convite .limite { display: flex; align-items: center; justify-content: space-between; gap: var(--e-xl); flex-wrap: wrap; }
.convite h2, .convite p { color: var(--marca-branco); }
.convite h2 { margin-bottom: .6rem; }
.convite p:not(.sobrelinha) { color: color-mix(in srgb, var(--marca-branco) 78%, var(--marca-preto)); }
.convite .sobrelinha { color: var(--roxo-em-escuro); }

/* ── RODAPÉ ── os mesmos destinos do topo, em corpo menor: quem chegou ao
   fim da página não deve ter que voltar ao topo para navegar. */
.rodape-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-lg); flex-wrap: wrap;
  padding-bottom: var(--e-md); border-bottom: 1px solid var(--linha);
}
.rodape-marca .marca-multi { height: 1.15rem; }
.rodape-nav { display: flex; gap: var(--e-md); flex-wrap: wrap; }
.rodape-nav a { font-size: var(--t-xs); font-weight: 700; text-decoration: none; letter-spacing: .02em; }
.rodape-nav a:hover { color: var(--tinta); text-decoration: underline; }
/* sem limite de medida: com 92ch o parágrafo resolvia para 787px e deixava
   301px de sobra num contêiner de 1088. Texto legal em corpo 11,5px é letra
   miúda e ocupa a linha inteira; medida confortável de leitura vale para
   texto corrido, não para cláusula. */
.nota.legal { font-size: var(--t-xs); max-width: none; line-height: 1.7; }

@media (max-width: 52rem) {
  .hero-grade { grid-template-columns: 1fr; }
  .dado { flex-direction: column; gap: var(--e-md); }
}
@media (max-width: 40rem) {
}

/* ════════════════════════════════════════════════════════════════════
   PORTAL DO DESENVOLVEDOR e CONFIANÇA — estrutura de PortalDev.dc.html
   e Transparencia.dc.html do canvas.
   ════════════════════════════════════════════════════════════════════ */

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── portal: lateral fixa + conteúdo ── */
.portal { display: grid; grid-template-columns: 17rem 1fr; align-items: start; }
.lateral {
  border-right: 1px solid var(--linha); background: var(--papel-alto);
  padding: 2rem 1.5rem; position: sticky; top: 0;
}
.lateral-titulo { font-weight: 700; font-size: var(--t-base); margin-bottom: 1.5rem; }
.lateral nav { display: grid; gap: .1rem; } /* exceção deliberada: pilha densa */
.lateral-grupo {
  margin: 1.1rem 0 .3rem; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave);
}
.lateral nav a, .lateral-inativo {
  font-size: var(--t-md); padding: .55rem .7rem; border-radius: var(--r-sm);
  text-decoration: none; display: block;
}
.lateral nav a { color: var(--tinta); }
.lateral nav a:hover { background: var(--acento-claro); color: var(--acento); }
.lateral-inativo { color: var(--tinta-suave); text-decoration: line-through; }
.portal-conteudo { min-width: 0; }
.portal-conteudo .limite { margin-inline: 0; padding-inline: clamp(1rem, 4vw, 3rem); }

/* ════════════════════════════════════════════════════════════════════
   FILTRO POR PERFIL — a fatia de Portal do que a SPEC-CRF-002 §3.1
   chamava de "documentação filtrada por perfil".

   Sem JS, como o resto do site: as três opções são âncoras comuns e
   `:target` combinado com `:has()` decide o que esconder. O critério de
   classificação não é editorial — é o escopo que cada operação exige no
   contrato, `emissor:*` contra `banco:*`.

   O PADRÃO É TUDO VISÍVEL, e isso é decisão de segurança, não de gosto:
   se `:has()` não existir no navegador, nenhuma regra casa e a página fica
   idêntica ao que era. Documentação de contrato que esconde metade por
   falha de suporte é pior que documentação sem filtro.

   LIMITE DECLARADO: sem JS não há como pôr `aria-current` na opção ativa.
   O que indica o estado é cor, peso e a própria URL. Quem chega por link
   com o fragmento já cai filtrado, o que é a vantagem de usar `:target`.
   ════════════════════════════════════════════════════════════════════ */
/* altura zero: o alvo fica logo acima da barra, então acionar o filtro não
   arrasta a página para outro lugar. `scroll-margin-top` porque sem ela a
   barra encostava no topo exato da viewport — medido em -0,4px, colada. */
.alvo { display: block; height: 0; overflow: hidden; scroll-margin-top: 2rem; }
/* A SEÇÃO é que gruda, não a barra. `position: sticky` é limitado pelo bloco
   pai: na barra, ela descolaria assim que a seção curta saísse da tela, e o
   estado do filtro voltaria a sumir. A seção é filha direta de <main>, então o
   limite passa a ser a página inteira. Medido antes: com filtro ligado e a
   página no fim, o indicador estava 4946px acima. */
#referencia {
  position: sticky; top: 0; z-index: 3;
  padding-block: .55rem; border-top: none;
  background: var(--papel); border-bottom: 1px solid var(--linha);
}
.perfil { display: flex; align-items: center; gap: var(--e-xs); flex-wrap: wrap; }
.perfil-rotulo {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suave); margin-right: .4rem;
}
/* 2,75rem de alvo de toque, a mesma régua do botão e do menu */
.perfil-op {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: var(--t-sm); font-weight: 700; text-decoration: none;
  color: var(--tinta-suave); background: transparent;
  border: 1px solid var(--linha); border-radius: var(--r-pill); padding: .4rem 1rem;
}
.perfil-op:hover { border-color: var(--marca-roxo); color: var(--acento); }
.perfil-nota { font-size: var(--t-sm); color: var(--tinta-suave); margin-top: .8rem; }
.perfil-nota code {
  color: var(--acento); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95em;
}
/* "Tudo" ativo por padrão; os outros dois assumem quando são alvo */
.op-tudo { border-color: var(--acento); color: var(--acento); background: var(--acento-claro); }
body:has(#perfil-emissor:target) .op-tudo,
body:has(#perfil-banco:target) .op-tudo {
  border-color: var(--linha); color: var(--tinta-suave); background: transparent;
}
body:has(#perfil-emissor:target) .op-emissor,
body:has(#perfil-banco:target) .op-banco {
  border-color: var(--acento); color: var(--acento); background: var(--acento-claro);
}
body:has(#perfil-emissor:target) [data-perfil="banco"] { display: none }
body:has(#perfil-banco:target) [data-perfil="emissor"] { display: none }

/* ── formulário ── */
.formulario {
  max-width: 34rem; background: var(--papel-alto); border: 1px solid var(--linha);
  border-radius: var(--r-md); padding: 2rem;
}
.formulario label { display: block; font-size: var(--t-sm); font-weight: 700; margin-bottom: .35rem; }
.formulario input, .formulario select {
  width: 100%; padding: .7rem .8rem; font-size: var(--t-md); font-family: inherit;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--r-sm);
}
/* desativado por cor, como o botão. A opacidade .55 multiplicava o
   placeholder até 2,06:1 — medido no QA, nos dois temas. */
.formulario input:disabled, .formulario select:disabled {
  cursor: not-allowed; opacity: 1;
  background: color-mix(in srgb, var(--linha) 40%, var(--papel));
  color: var(--tinta-suave);
}
/* `opacity: 1` explicito porque o Firefox aplica opacidade padrão ao
   placeholder, e a cor bruta já dava 4,44:1 — abaixo de 4,5 mesmo sem a
   opacidade do desativado. Vai reprovar quando o formulário for habilitado,
   não só agora. */
.formulario ::placeholder { color: var(--tinta-suave); opacity: 1; }
.formulario .rodape-form { font-size: var(--t-sm); color: var(--tinta-suave); margin-bottom: 0; }
.formulario .aceite label { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; }
.formulario .aceite input { width: auto; margin-top: .2rem; }
button.botao { font-family: inherit; cursor: pointer; }
/* desativado por COR, não por opacidade sobre o roxo. Medido no QA: branco
   sobre --tinta-suave dá 2,12:1 no tema escuro, contra os 3:1 que 19,2px bold
   exige. A WCAG isenta componente inativo, mas isenção não é legibilidade —
   usado hoje só durante o envio em si (achado 24/09/2026: o cadastro
   automático existe desde então, este estado não é mais permanente). */
button.botao:disabled {
  cursor: not-allowed; opacity: 1;
  background: var(--papel-alto); color: var(--tinta-suave); border-color: var(--linha);
}

/* ── resultado do cadastro de sandbox: mesma paleta de --aviso/--acento já
   usada em .selo, sem cor nova só para isto ── */
.resultado-cadastro { margin-top: 1.5rem; padding: 1.2rem; border-radius: var(--r-sm); }
.resultado-cadastro.erro { background: var(--aviso-fundo); color: var(--aviso); }
.resultado-cadastro.sucesso { background: var(--acento-claro); color: var(--tinta); }
.resultado-cadastro label { display: block; font-size: var(--t-sm); font-weight: 700; margin-bottom: .35rem; }
.resultado-cadastro input {
  width: 100%; padding: .7rem .8rem; font-size: var(--t-md); font-family: inherit;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--r-sm); cursor: text;
}

/* ── listas de endpoint e de erro ── */
.endpoints { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-sm); }
.endpoints li {
  display: grid; gap: var(--e-2xs); padding: .9rem 1.1rem;
  background: var(--papel-alto); border: 1px solid var(--linha); border-radius: var(--r-sm);
}
.endpoints code {
  font-size: var(--t-sm); font-weight: 700; color: var(--acento);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.endpoints span { font-size: var(--t-md); color: var(--tinta-suave); }

/* ── selos de status: o rótulo diz o estado, a cor só reforça ── */
.selo {
  display: inline-block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .25rem .6rem; border-radius: var(--r-xs); margin-top: .9rem;
}
.selo.ok { background: var(--acento-claro); color: var(--acento); }
.selo.pend { background: var(--aviso-fundo); color: var(--aviso); }

/* ── tabela de política de dados ── */
.tabela-rolo { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--r-md); }
.politica { width: 100%; border-collapse: collapse; background: var(--papel-alto); min-width: 44rem; }
.politica th, .politica td {
  text-align: left; vertical-align: top; padding: 1rem 1.2rem;
  border-top: 1px solid var(--linha); font-size: var(--t-md);
}
.politica thead th {
  border-top: none; background: var(--acento-claro); font-size: var(--t-xs);
  letter-spacing: .04em; text-transform: uppercase;
}
.politica tbody th { font-weight: 700; width: 12rem; }
.politica td { color: var(--tinta-suave); }
.politica td strong { color: var(--tinta); }

/* ── A TABELA VIRA BLOCOS ONDE NÃO CABE ──────────────────────────────────
   Medido em 375px: a tabela mede 704px (min-width 44rem) dentro de um
   container de 341px com overflow-x. A rolagem FUNCIONA — a página não
   estoura — mas nada indica que ela existe, e a coluna que fica fora da
   vista é justamente "Retenção", que é o que um compliance abre a página
   para ler. Rolagem lateral sem affordance é o mesmo que conteúdo ausente.

   Não resolvo com sombra de rolagem porque isso ensina o gesto e mantém a
   leitura ruim: comparar cinco linhas de três colunas rolando de lado é
   pior do que ler cinco blocos. O cabeçalho vira rótulo de cada campo, via
   `data-rotulo`, e some da tela sem sair do documento (`.sr` já é o padrão
   desta folha para isso).

   O corte é 46rem porque é onde a tabela de 44rem deixa de caber com as
   margens da página. */
@media (max-width: 46rem) {
  .tabela-rolo { overflow-x: visible; border: 0; border-radius: 0; }
  .politica { min-width: 0; display: block; background: none; }
  .politica thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .politica tbody, .politica tr, .politica th, .politica td { display: block; width: auto; }
  .politica tr {
    background: var(--papel-alto); border: 1px solid var(--linha);
    border-radius: var(--r-md); padding: 1rem 1.1rem; margin-bottom: .75rem;
  }
  .politica th, .politica td { border: 0; padding: 0; }
  .politica tbody th {
    width: auto; font-size: var(--t-md); margin-bottom: .6rem;
    padding-bottom: .5rem; border-bottom: 1px solid var(--linha);
  }
  .politica td + td { margin-top: .85rem; }
  .politica td::before {
    content: attr(data-rotulo); display: block;
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--acento); margin-bottom: .2rem;
  }
}

/* ── estado vazio honesto ── */
.vazio {
  border: 1px dashed var(--linha); border-radius: var(--r-md); padding: 2.5rem;
  text-align: center; background: var(--papel-alto); margin-top: 1.75rem;
}
.vazio p, .vazio h3 { margin-inline: auto; }
.vazio h3 { font-size: var(--t-lg); margin-bottom: .6rem; }

/* ── documentos que ainda não existem ── */
.documentos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-sm); }
.documentos li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-md);
  padding: 1.1rem 1.3rem; background: var(--papel-alto);
  border: 1px solid var(--linha); border-radius: var(--r-sm);
}
.documentos span { font-weight: 700; }
.documentos em {
  font-style: normal; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--aviso); background: var(--aviso-fundo);
  padding: .25rem .6rem; border-radius: var(--r-xs);
}

/* ── caminho para produção ── */
.convite-coluna { display: grid; gap: var(--e-lg); justify-items: start; }
.botao.claro-vazado { background: transparent; color: var(--marca-branco); border-color: var(--marca-branco); }
.botao.claro-vazado:hover { background: color-mix(in srgb, var(--marca-branco) 12%, transparent); color: var(--marca-branco); }
.etapas {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--e-md);
}
.etapas li {
  background: color-mix(in srgb, var(--marca-branco) 10%, var(--marca-preto));
  border-radius: var(--r-sm); padding: 1.1rem; color: var(--marca-branco);
  font-size: var(--t-md); font-weight: 700; display: grid; gap: var(--e-xs);
}
.etapas span { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; color: var(--roxo-em-escuro); }

@media (max-width: 60rem) {
  .portal { grid-template-columns: 1fr; }
  .lateral { position: static; border-right: none; border-bottom: 1px solid var(--linha); }
  .lateral nav { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
  .lateral-grupo { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════════
   A CENA — hero aprovado em 17/09. Quinze ações, ou uma.

   A fricção não é um caminho longo: é o mesmo trabalho multiplicado por
   conta. O contador conta as FICHAS QUE ESTÃO NA TELA — quinze fichas,
   quinze no contador. Não é número decorativo.

   Tudo escopado sob .cena de propósito: `.sobrelinha` e `.nota` já
   existem no site com outro papel.

   Base = QUADRO FINAL. Desligar animação deixa a comparação legível.
   ════════════════════════════════════════════════════════════════════ */

.cena {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  --ciclo: 7s;
  /* o vão governa o gap E o alcance do feixe: separados, o feixe fica curto
     quando a tela cresce e deixa de tocar o celular */
  --vao: clamp(1.75rem, 3.5vw, 2.75rem);
}
/* padrão: fichas em cima, celular embaixo. `auto auto` entra na media query
   de min-width — com 1fr a coluna esquerda esticava e deixava 400px de ar
   morto entre as fichas e o celular. */
.cena .palco {
  display: grid; grid-template-columns: 1fr;
  justify-content: start; gap: var(--vao); align-items: start;
}
.cena .coluna { position: relative; }

.cena .cena-rotulo {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0 0 .5rem;
}
.cena .cena-rotulo.acento { color: var(--acento); }

/* ── o contador ── */
.cena .contador { display: flex; align-items: baseline; gap: var(--e-sm); margin: 0 0 .25rem; }
.cena .roda {
  position: relative; display: block; width: 2.6em; height: 1em;
  font-size: clamp(2.5rem, 5.5vw, 3.4rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1; color: var(--tinta-suave);
}
.cena .roda span { position: absolute; inset: 0; opacity: 0; }
.cena .um {
  font-size: clamp(2.5rem, 5.5vw, 3.4rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1; color: var(--marca-roxo);
}
.cena .residuo {
  font-size: var(--t-md); font-weight: 600; color: var(--tinta-suave);
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}
.cena .unidade { font-size: var(--t-sm); font-weight: 600; color: var(--tinta-suave); margin: 0 0 1.4rem; }
.cena .unidade.acento { color: var(--acento); }

/* ── a repetição: cinco vezes o mesmo trabalho ── */
.cena .repeticoes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-xs); }
.cena .repeticao { display: flex; align-items: center; gap: var(--e-xs); }
.cena .cena-conta { width: 5rem; font-size: var(--t-sm); font-weight: 700; flex: none; }
/* o rótulo aparece só na primeira linha; as outras quatro são a mesma FORMA,
   vazia. A repetição fica mais forte sem obrigar a reler quinze palavras.
   Largura fixa por coluna para as cinco linhas alinharem. */
.cena .ficha {
  font-size: var(--t-xs); font-weight: 600; color: var(--tinta-suave);
  border: 1px solid var(--linha); border-radius: var(--r-pill); padding: .26rem 0;
  background: var(--papel-alto); flex: none; text-align: center;
  min-height: 1.55rem;
}
.cena .f1 { width: 3.5rem } .cena .f2 { width: 3rem } .cena .f3 { width: 4.1rem }

/* ── o celular: entrou, tocou em Contas, estão lá ── */
/* empilhado: acompanha a largura disponível. Lado a lado: largura FIXA —
   `width:100%` dentro de coluna `auto` do grid é circular e estoura a cena. */
.cena .celular {
  width: 100%; max-width: 17.5rem; border: 2px solid var(--tinta); border-radius: var(--r-lg);
  overflow: hidden; background: var(--papel-alto); flex: none;
}
.cena .celular .aba {
  display: flex; gap: var(--e-md); margin: 0; padding: .9rem 1.1rem .5rem;
  font-size: var(--t-xs); color: var(--tinta-suave); border-bottom: 1px solid var(--linha);
}
.cena .celular .aba b { color: var(--tinta); padding-bottom: .35rem; position: relative; }
.cena .celular .aba b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--marca-roxo); transform: scaleX(1); transform-origin: left;
}
.cena .celular ul { list-style: none; margin: 0; padding: .7rem; display: grid; gap: var(--e-xs); }
.cena .celular li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-xs);
  padding: .55rem .6rem; border-radius: var(--r-sm); background: var(--acento-claro);
}
.cena .celular li span { display: grid; }
.cena .celular li b { font-size: var(--t-sm); }
.cena .celular li em { font-style: normal; font-size: var(--t-xs); color: var(--tinta-suave); }
.cena .celular .acao {
  /* fixo no roxo secundário, e não em --acento: branco sobre ele dá 7,01:1
     nos dois temas. Com o acento do tema escuro cairia para 3,23:1. */
  margin: .3rem .7rem .9rem; background: var(--marca-roxo-escuro); color: var(--marca-branco);
  text-align: center; font-size: var(--t-sm); font-weight: 700; padding: .7rem; border-radius: var(--r-sm);
}

/* legenda do CELULAR, não da cena: centrada nele e com a largura dele, como
   legenda de figura. Acende no mesmo instante em que a lista chega (52 a 58%),
   e o brilho é transitório de propósito: marca o momento, não decora. */
.cena .cena-fecho {
  margin: 1.1rem 0 0; max-width: 17.5rem; text-align: center;
  font-size: var(--t-md); font-weight: 700; color: var(--tinta);
  animation: cena-acender-fecho var(--ciclo) both infinite;
}
@keyframes cena-acender-fecho {
  0%,52%   { opacity: 0; color: var(--tinta-suave); text-shadow: none }
  58%      { opacity: 1; color: var(--acento);
             text-shadow: 0 0 16px color-mix(in srgb, var(--marca-roxo) 40%, transparent) }
  74%,100% { opacity: 1; color: var(--tinta); text-shadow: none }
}

/* ── ENTRADA: escalonada por linha. Cada uma custa tempo, e o tempo é o argumento ── */
.cena .repeticao { animation: cena-entrar-linha var(--ciclo) both infinite; }
.cena .r1 { animation-delay: .1s } .cena .r2 { animation-delay: .6s }
.cena .r3 { animation-delay: 1.1s } .cena .r4 { animation-delay: 1.6s }
.cena .r5 { animation-delay: 2.1s }
@keyframes cena-entrar-linha {
  0%   { opacity: 0; transform: translateY(6px) }
  4%,100% { opacity: 1; transform: none }
}

/* ── COLAPSO: no CONTÊINER, sem delay. A fila contrai como um gesto só.
      Se ficar na animação de entrada, que tem delay por linha, as linhas
      saem uma a uma e lê como esvaziamento em vez de transferência. ── */
.cena .repeticoes { animation: cena-colapsar var(--ciclo) both infinite; }
@keyframes cena-colapsar {
  0%,53% { transform: none; opacity: 1 }
  58%    { transform: translateX(84px) scale(.94); opacity: .12 }
  64%,100% { transform: none; opacity: 1 }
}

/* ATENÇÃO: os delays das fichas declaram DOIS valores (entrada, transferência).
   Valor único se repete ciclicamente para as duas animações e escalonaria a
   transferência — o mesmo defeito das linhas, em outra forma. */
.cena .ficha {
  animation: cena-entrar-ficha var(--ciclo) both infinite,
             cena-transferir var(--ciclo) ease-in-out infinite;
}
.cena .r1 .f1{animation-delay:.22s,0s} .cena .r1 .f2{animation-delay:.34s,0s} .cena .r1 .f3{animation-delay:.46s,0s}
.cena .r2 .f1{animation-delay:.72s,0s} .cena .r2 .f2{animation-delay:.84s,0s} .cena .r2 .f3{animation-delay:.96s,0s}
.cena .r3 .f1{animation-delay:1.22s,0s} .cena .r3 .f2{animation-delay:1.34s,0s} .cena .r3 .f3{animation-delay:1.46s,0s}
.cena .r4 .f1{animation-delay:1.72s,0s} .cena .r4 .f2{animation-delay:1.84s,0s} .cena .r4 .f3{animation-delay:1.96s,0s}
.cena .r5 .f1{animation-delay:2.22s,0s} .cena .r5 .f2{animation-delay:2.34s,0s} .cena .r5 .f3{animation-delay:2.46s,0s}
@keyframes cena-entrar-ficha { 0% { opacity: 0 } 3%,100% { opacity: 1 } }

/* o contador snapa: passo é discreto, não se interpola */
.cena .roda span { animation: cena-mostrar var(--ciclo) steps(1) infinite; }
.cena .roda .v00 { animation-delay: 0s; animation-name: cena-mostrar-primeira }
.cena .roda .v03 { animation-delay: .46s }
.cena .roda .v06 { animation-delay: .96s }
.cena .roda .v09 { animation-delay: 1.46s }
.cena .roda .v12 { animation-delay: 1.96s }
/* 7.142857% = 500ms de 7000. Era 7.15% (500,5ms), e o meio milissegundo a
   mais empilhava duas casas. A PRIMEIRA casa é caso à parte: a segunda entra
   aos 460ms porque o contador sobe junto com a última ficha da linha, então a
   janela dela é 460/7000 e não 500/7000. Com 7.15% para todas, "00" e "03"
   ficavam sobrepostos por 40ms, dois a três quadros de glifo duplicado. */
@keyframes cena-mostrar { 0% { opacity: 1 } 7.142857%,100% { opacity: 0 } }
@keyframes cena-mostrar-primeira { 0% { opacity: 1 } 6.571429%,100% { opacity: 0 } }
.cena .roda .v15 { animation: cena-mostrar-fim var(--ciclo) steps(1) infinite; animation-delay: 2.46s }
/* 64.857143% = 4540ms, de 2460 até os 7000 exatos. Era 64.8% (4536ms), e os
   4ms que faltavam eram um vão com NENHUMA casa visível na virada do ciclo. */
@keyframes cena-mostrar-fim { 0% { opacity: 1 } 64.857143%,100% { opacity: 0 } }

/* ═══ O INSTANTE DA TRANSFERÊNCIA ═══
   Luz com função, nunca brilho. A ficha vira roxa (o trabalho deixou de ser
   da pessoa), o feixe atravessa (existe um caminho, percorrido uma vez), a
   linha pousa (isto acabou de chegar) e a aba se sublinha (ele tocou ali).
   A cor vem ANTES da partida: primeiro o reconhecimento, depois a saída. */
@keyframes cena-transferir {
  0%,48%  { color: var(--tinta-suave); border-color: var(--linha); background: var(--papel-alto) }
  51%,55% { color: var(--marca-branco); border-color: var(--roxo-rotulo); background: var(--roxo-rotulo) }
  61%,100%{ color: var(--tinta-suave); border-color: var(--linha); background: var(--papel-alto) }
}

.cena .feixe {
  position: absolute; right: calc(-1 * var(--vao)); width: var(--vao); top: 64%; height: 2px;
  background: var(--marca-roxo); transform: scaleX(0); transform-origin: left;
  opacity: 0; border-radius: 2px;
  animation: cena-atravessar var(--ciclo) both infinite;
}
@keyframes cena-atravessar {
  0%,52% { transform: scaleX(0); opacity: 0 }
  57%    { transform: scaleX(1); opacity: 1 }
  62%    { transform: scaleX(1); opacity: 1 }
  68%,100% { transform: scaleX(1); opacity: 0 }
}

/* a lista aparece INTEIRA: chegar em fila seria entrega, estar lá é presença */
.cena .lista-app { animation: cena-aparecer-lista var(--ciclo) both infinite; }
@keyframes cena-aparecer-lista { 0%,52% { opacity: 0 } 58%,100% { opacity: 1 } }
.cena .residuo { animation: cena-aparecer-residuo var(--ciclo) both infinite; }
@keyframes cena-aparecer-residuo { 0%,50% { opacity: 0 } 58%,100% { opacity: 1 } }

.cena .celular li { animation: cena-pousar var(--ciclo) ease-out both infinite; }
@keyframes cena-pousar {
  0%,55% { background: var(--acento-claro); transform: none }
  59%    { background: color-mix(in srgb, var(--marca-roxo) 34%, var(--papel-alto)); transform: translateY(-2px) }
  70%,100% { background: var(--acento-claro); transform: none }
}
.cena .celular .aba b::after { animation: cena-sublinhar var(--ciclo) ease-out both infinite; }
@keyframes cena-sublinhar { 0%,54% { transform: scaleX(0) } 62%,100% { transform: scaleX(1) } }

@media (prefers-reduced-motion: reduce) {
  .cena .feixe { display: none }
  .cena *, .cena { animation: none !important }
  .odo > span, .rosca .anel, .fatia i, .colunas .col i,
  .chamada-carga .cg { animation: none !important }
  /* o comentário da cena promete que a base é o quadro final, e as casas do
     contador quebravam essa promessa: a base delas é opacity 0 e quem mostra a
     última é só a animação. Com movimento desligado os DOIS contadores ficavam
     invisíveis. A última casa passa a valer por regra, não por animação. */
  .cena .roda .v15, .odo > span:last-child { opacity: 1 }
}
/* ── lado a lado só quando há largura para os dois ── */
@media (min-width: 62rem) {
  /* `1fr auto`, e não `24rem 1fr`: a cena mede o próprio conteúdo e encosta na
     borda direita da grade (1168px em 1280), em vez de sobrar folga. O h1 ganha
     a largura que sobrava. Medido: antes o celular parava em 1104. */
  /* `start`, não `center`: centrar dois blocos de alturas diferentes faz nada
     alinhar com nada — medido, o texto começava 29px abaixo da cena. */
  .hero-grade { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2xl); align-items: start }
  /* a margem de respiro da cena existe para o EMPILHADO, onde ela separa os
     CTAs da cena. Lado a lado ela desalinha as duas colunas em 64px. */
  .cena { margin-top: 0 }
  .hero-texto h1 { max-width: none }
  /* `1fr auto` no palco: a folga interna (19px medidos em 1280) é absorvida
     pela coluna das fichas, que são alinhadas à esquerda e não se movem, e o
     celular encosta na borda direita da grade. Com `auto auto` a folga ficava
     atrás dele e ele parava antes. */
  .cena .palco { grid-template-columns: 1fr auto }
  /* `margin-left:auto` encosta o celular à direita da coluna. A coluna não é
     medida por ele: é medida pelo texto "passo, no aplicativo que o pagador já
     usa", que é mais largo. Sem isto o celular fica 19px antes da borda da
     grade — medido, não estimado. */
  .cena .celular { width: 16rem; max-width: none; margin-left: auto }
  /* a legenda acompanha a largura e a borda do celular: é legenda dele */
  .cena .cena-fecho { width: 16rem; max-width: none; margin-left: auto }
  /* os passos à esquerda, o espécime de código à direita */
  .como-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem) }
}
/* sem as duas colunas internas não existe vão, e sem vão não há o que atravessar */
@media (max-width: 61.99rem) {
  .cena .feixe { display: none }
}

/* ════════════════════════════════════════════════════════════════════
   REFERÊNCIA DA API (referencia-da-api.html)
   O Redoc traz o próprio layout e a própria tipografia; o que fica aqui é só
   a moldura — largura total, fora do `.limite`, porque a referência é uma
   grade de duas colunas e espremê-la na medida de texto do site quebra o
   painel direito. Altura mínima evita o salto entre a página pronta e o
   momento em que o contrato termina de montar.
   ════════════════════════════════════════════════════════════════════ */
.contrato-redoc { min-height: 60vh; margin-top: 2rem; }
.contrato-redoc .limite { padding-block: 2rem; }