/* ==========================================================================
   Pixify — site institucional
   --------------------------------------------------------------------------
   Identidade visual extraída de mobile/src/constants/theme.ts. Cada valor
   abaixo tem correspondente direto no aplicativo, para que quem sai do app e
   cai no site reconheça o mesmo produto:

     cor            -> lightColors / darkColors
     espaçamento    -> spacing (4 / 8 / 16 / 24 / 32 / 48)
     raio de borda  -> borderRadius (8 / 12 / 16 / 24)
     tamanho de texto -> typography (h1 28, h2 22, h3 18, body 16, caption 12)
     gradiente      -> gradients.primary (#2563EB -> #7C3AED)

   Duas divergências deliberadas em relação ao app, ambas a favor da leitura
   de documento longo em tela pequena:

     1. entrelinha maior que a do app (1.68 contra ~1.38). O app mostra listas
        curtas; aqui são 370 linhas de texto jurídico corrido;
     2. tipografia própria em vez das famílias do BRAND.md. O BRAND.md sugere
        Inter e Outfit via Google Fonts; carregar fonte de terceiro faria o
        navegador de quem lê a política de privacidade emitir requisição para
        um servidor externo — exatamente o que a política afirma não ocorrer.
        A saída não é abrir mão de tipografia: é servi-la deste domínio, em
        subconjunto próprio. Ver a seção "Tipografia própria" logo abaixo.

   Nenhum arquivo externo é referenciado: sem CDN, sem fonte remota, sem
   imagem de terceiro, sem script. O site não observa quem o lê.

   --------------------------------------------------------------------------
   Paleta: teal da marca x azul do aplicativo (issue #123)
   --------------------------------------------------------------------------
   O BRAND.md define Pixify Teal (#0E7C7B) como cor primária; o aplicativo usa
   azul (#2563EB -> #7C3AED). Não é contradição a resolver escolhendo um lado:
   o ícone publicado nas lojas já mostra os dois papéis, e o cabeçalho do
   próprio aplicativo também — losango teal ao lado do nome em azul.

   O site adota a mesma divisão:

     - TEAL é a cor do SÍMBOLO. O losango facetado é sempre teal, em qualquer
       tema, igual ao ícone de loja e ao cabeçalho do app;
     - AZUL é a cor da INTERFACE: links, ícones de seção, o fio do rótulo de
       cada seção, o halo do topo. É o que aparece em todas as capturas de
       tela desta página;
     - ROXO é a cor da ASSINATURA, e só dela. Ele existe no fio de 3px do
       gradiente no topo do cabeçalho — que é onde o app o usa — e em lugar
       nenhum mais.

   Essa terceira linha é o que mudou. O roxo já pintou uma faixa de chamada de
   600px de altura e o topo de quatro blocos de texto ao mesmo tempo; nessa
   dose ele deixava de ser assinatura e virava a segunda cor de destaque da
   página, competindo com o azul pela atenção de quem lê. Uma página com dois
   acentos não tem acento nenhum. O plano escuro da chamada final e o fio
   neutro entre os blocos ocuparam o lugar dele sem gastar cor.

   O critério é o de quem instala: a pessoa vê o site, baixa o aplicativo e
   precisa reconhecer a mesma coisa. Pintar o site de teal deixaria a
   apresentação verde-azulada e o produto azul — estranhamento na primeira
   abertura, e nenhuma tela do app para sustentar a mudança. O caminho inverso
   (repintar o app) é decisão de produto, não de site: enquanto ela não
   acontecer, o site segue o que está publicado.
   ========================================================================== */

/* ==========================================================================
   Tipografia própria
   --------------------------------------------------------------------------
   O site deixou de usar a fonte do sistema. O motivo é medido, não estético:
   um título de 80px na fonte do sistema é Segoe UI no Windows, San Francisco
   no Mac e DejaVu no Linux — três desenhos diferentes, nenhum escolhido, e o
   maior elemento da página mudando de identidade conforme o aparelho.

   O que NÃO mudou é a regra que motivou a fonte do sistema em primeiro lugar:
   nada aqui sai deste domínio. Os dois arquivos são servidos por
   `/assets/`, em subconjunto latino gerado uma vez e versionado — nenhuma
   requisição a Google Fonts, nenhum terceiro sabendo quem leu a política.

     DISPLAY  Bricolage Grotesque (Atelier Triay, SIL OFL 1.1)
              36,7 KB — eixo wght 450..800; opsz fixo em 96 e wdth em 100
              Grotesca de proporções irregulares de propósito: o `a`, o `e` e
              o `g` não concordam entre si, e é exatamente isso que a torna
              reconhecível em 80px. Só títulos e numerais.

     TEXTO    Schibsted Grotesk (Schibsted Media Group, SIL OFL 1.1)
              37,6 KB — eixo wght 400..700
              Desenhada para jornal digital: aguenta as 370 linhas de texto
              jurídico sem cansar, e os algarismos têm altura de caixa alta,
              que é o que mantém `R$ 47.067,45` legível em corpo pequeno.

   Licença integral e origem em `/assets/licenca-fontes.txt`, servida junto —
   a OFL exige que ela acompanhe o arquivo redistribuído.

   `font-display: swap` e não `optional`: o texto tem de aparecer no primeiro
   quadro, sempre. O custo do `swap` é o salto quando a fonte chega, e é ele
   que as duas famílias de reserva abaixo reduzem — elas não desenham nada,
   apenas reescalam a fonte do sistema para a altura de x e as métricas
   verticais da fonte real, de modo que a troca quase não mexa a linha.
   ========================================================================== */

@font-face {
  font-family: "Pixify Display";
  src: url("/assets/pixify-display.woff2") format("woff2");
  font-weight: 450 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pixify Texto";
  src: url("/assets/pixify-texto.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Reservas métricas. `size-adjust` casa a altura de x com a da fonte real
   (Bricolage 0,528 e Schibsted 0,527 contra 0,519 da Arial); os `override`
   devolvem a caixa de linha da fonte real depois desse reescalonamento, para
   que a altura de linha não mude junto. */
@font-face {
  font-family: "Reserva Display";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"),
    local("Segoe UI"), local("Roboto"), local("DejaVu Sans");
  size-adjust: 101.8%;
  ascent-override: 91.3%;
  descent-override: 26.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Reserva Texto";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"),
    local("Segoe UI"), local("Roboto"), local("DejaVu Sans");
  size-adjust: 101.7%;
  ascent-override: 96.0%;
  descent-override: 25.4%;
  line-gap-override: 0%;
}

:root {
  /* Paleta — modo claro (lightColors) */
  --primaria: #2563EB;
  --primaria-clara: #DBEAFE;
  --primaria-escura: #1D4ED8;
  --secundaria: #7C3AED;
  --fundo: #F8FAFC;
  --superficie: #FFFFFF;
  --superficie-sutil: #F1F5F9;
  --texto-primario: #0F172A;
  --texto-secundario: #64748B;
  --texto-terciario: #94A3B8;
  --borda: #E2E8F0;
  --borda-clara: #F1F5F9;
  --atencao: #F59E0B;
  --atencao-fundo: #FFFBEB;
  --sombra-media: 0 2px 10px rgba(15, 23, 42, 0.08);
  --sombra-alta: 0 4px 18px rgba(15, 23, 42, 0.12);
  --sombra-rolagem: rgba(15, 23, 42, 0.18);

  /* Plano escuro. Três regiões da página inicial o usam — o topo, a faixa
     entre o argumento e a prova, e a chamada final — e as três são escuras
     nos dois temas. Ele é a cor de segurança sob os fundos: se a imagem não
     chegar, o que fica é este plano, com o mesmo texto legível por cima. */
  --canvas-escuro: #0F172A;

  /* Espaçamento (spacing) */
  --esp-xs: 4px;
  --esp-sm: 8px;
  --esp-md: 16px;
  --esp-lg: 24px;
  --esp-xl: 32px;
  --esp-xxl: 48px;

  /* Raio (borderRadius) */
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 24px;

  /* Texto secundário do app (slate500) mede 4,46:1 sobre o fundo claro — passa
     raspando abaixo do mínimo AA para texto normal. Nos parágrafos longos da
     página inicial o site usa um tom mais escuro (slate600, 7,4:1) e reserva o
     original para legendas curtas sobre superfície branca. */
  --texto-secundario-forte: #475569;

  --largura-leitura: 44rem;
  --largura-ampla: 68rem;
  --gradiente-marca: linear-gradient(135deg, #2563EB, #7C3AED);
  /* O fim da pilha carrega as famílias de emoji do sistema de propósito. Os
     documentos jurídicos usam ⚠, ✅ e 🔴 no texto, e o subconjunto latino das
     duas fontes próprias não os contém — sem estes nomes, a decisão de qual
     fonte desenha o emoji fica com a heurística de fallback do navegador, que
     em alguns deles resulta no retângulo vazio. */
  --fonte: "Pixify Texto", "Reserva Texto", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --fonte-display: "Pixify Display", "Reserva Display", var(--fonte);
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Movimento — os tempos e as curvas de toda a página saem daqui. A escala
     é declarada inteira, e não só na parte hoje ocupada: é ela que define o
     que é rápido, normal e lento neste projeto, e quem for animar a próxima
     coisa escolhe um degrau em vez de inventar um número.

     Em uso hoje: `--t-rapido` no fio que acende sob o ponteiro, `--t-padrao`
     no chevron que desliza, `--t-entrada` e `--t-passo` na cascata do topo,
     `--e-entrada` na cascata e na revelação. Livres: `--t-lento` e
     `--e-saida`.

     `--t-entrada` passa dos 420ms de `--t-lento` porque entrada de página é o
     único movimento que pode durar meio segundo sem parecer lento: acontece
     uma vez, no carregamento, e não é resposta a gesto nenhum. */
  --t-rapido: 120ms;
  --t-padrao: 220ms;
  --t-lento: 420ms;
  --t-entrada: 600ms;
  --t-passo: 100ms;
  --e-entrada: cubic-bezier(.16, 1, .3, 1);
  --e-saida: cubic-bezier(.7, 0, .84, 0);

}

@media (prefers-color-scheme: dark) {
  :root {
    /* Paleta — modo escuro (darkColors) */
    --primaria: #60A5FA;
    --primaria-clara: rgba(96, 165, 250, 0.16);
    --primaria-escura: #3B82F6;
    --secundaria: #A78BFA;
    --fundo: #0F172A;
    --superficie: #1E293B;
    --superficie-sutil: #162032;
    --texto-primario: #F8FAFC;
    --texto-secundario: #94A3B8;
    --texto-terciario: rgba(255, 255, 255, 0.55);
    --borda: #334155;
    --borda-clara: rgba(255, 255, 255, 0.08);
    /* No escuro o slate400 já mede 7,9:1 sobre o fundo: não há o que reforçar. */
    --texto-secundario-forte: #94A3B8;
    --atencao: #FBBF24;
    --atencao-fundo: rgba(251, 191, 36, 0.12);
    /* darkElevation troca sombra por borda: sombra some em fundo escuro. */
    --sombra-media: none;
    --sombra-alta: none;
    --sombra-rolagem: rgba(0, 0, 0, 0.45);
    /* No escuro o fundo da página já é #0F172A: o plano precisa descer um
       degrau para continuar sendo um plano, e não a continuação da página. */
    --canvas-escuro: #060B16;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* O cabeçalho é preso: sem esta reserva, todo destino de âncora — o índice
     dos documentos, `#disponibilidade`, o link de pular para o conteúdo —
     para debaixo dele. Os `scroll-margin-top` espalhados pelos títulos
     resolviam caso a caso; isto resolve para qualquer alvo, inclusive os que
     não são título. */
  scroll-padding-top: 5rem;
  /* Evita a faixa preta que o celular mostra ao puxar a página além do fim. */
  background: var(--fundo);
}

/* Seleção de texto na cor da marca, com contraste próprio: o azul do tema em
   opacidade baixa mantém o texto legível enquanto está selecionado, o que o
   realce padrão do navegador nem sempre faz sobre fundo escuro. */
::selection {
  background: rgba(37, 99, 235, 0.22);
  color: var(--texto-primario);
}

@media (prefers-color-scheme: dark) {
  ::selection {
    background: rgba(96, 165, 250, 0.30);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  /* Coluna de altura cheia: em páginas curtas — a 404, principalmente — o
     rodapé encosta no fim da janela em vez de flutuar no meio da tela. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--texto-primario);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.68;
  /* Evita que a tipografia encolha em iPhone quando a página é aberta em
     paisagem a partir do aplicativo. */
  text-rendering: optimizeLegibility;
}

.faixa {
  width: 100%;
  max-width: var(--largura-leitura);
  margin: 0 auto;
  padding: 0 var(--esp-md);
}

@media (min-width: 40rem) {
  .faixa {
    padding: 0 var(--esp-lg);
  }
}

/* Documento jurídico é coluna estreita de leitura; apresentação de produto
   não é. A classe vem do gerador (build.py, `page_class`) e alarga cabeçalho,
   conteúdo e rodapé de uma vez só, sem duplicar a moldura. */
.pagina-inicio .faixa {
  max-width: var(--largura-ampla);
}

a {
  color: var(--primaria);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Endereços longos (URL e e-mail dentro dos documentos) não podem estourar
     a largura da tela do celular. */
  overflow-wrap: anywhere;
}

a:hover {
  color: var(--primaria-escura);
}

/* Foco visível — desenhado, e não o que o navegador dá de graça.
   O `outline-offset` afasta o anel do próprio elemento (um anel colado se lê
   como borda, não como foco), e o `box-shadow` do lado de fora é o que garante
   que o anel apareça também sobre plano escuro: o azul da marca sobre o
   #0F172A do topo mede 3,1:1 sozinho, e o vão claro em volta o destaca de
   qualquer fundo. */
:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/* Sobre os três planos escuros o anel troca para branco: azul sobre
   azul-marinho é a combinação em que um indicador de foco desaparece. */
.heroi :focus-visible,
.chamada-final :focus-visible {
  outline-color: #FFFFFF;
}

/* Pular para o conteúdo — o primeiro elemento que quem usa teclado alcança na
   página. Ele aparece uma vez a cada visita e é a primeira impressão de que
   este site foi desenhado para ser usado sem ponteiro: leva o mesmo
   acabamento das placas de documento — superfície, borda e sombra —, e não o
   retângulo cinza de sempre. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--placa);
  color: var(--texto-primario);
  border: 1px solid var(--placa-borda);
  border-radius: var(--raio-md);
  box-shadow: var(--placa-sombra-alta);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  z-index: 10;
}

.pular-para-conteudo:focus {
  left: var(--esp-md);
  top: var(--esp-sm);
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */

.cabecalho {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  /* Assinatura da marca: o gradiente primário do app (gradients.primary)
     reduzido a um fio de 3px. Presença sem ruído. */
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #2563EB, #7C3AED) 1;
  position: sticky;
  top: 0;
  z-index: 5;
}

.cabecalho .faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-sm);
  padding-top: var(--esp-sm);
  padding-bottom: var(--esp-sm);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-sm);
  color: var(--primaria);
  text-decoration: none;
  font-weight: 700;
}

.marca-simbolo {
  width: 30px;
  height: 30px;
  flex: none;
  /* O losango facetado é teal em qualquer tema — é assim no ícone da loja e no
     cabeçalho do próprio aplicativo. Ver nota sobre a paleta no topo. */
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.18));
}

.marca-nome {
  font-family: var(--fonte-display);
  font-size: 21px;
  font-weight: 600;
  font-variation-settings: "wght" 680;
  letter-spacing: -0.004em;
  color: var(--primaria);
}

.navegacao ul,
.rodape ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-md);
  margin: 0;
  padding: 0;
}

/* Navegação — dois links, e o acabamento que dois links merecem.
   Era texto puro com um sublinhado de 2px na página atual. Agora cada item
   tem área própria: um recuo que o torna alvo de toque de 40px de altura e um
   fundo que aparece sob o ponteiro. A página atual perdeu o sublinhado e
   ganhou o fundo permanente — o sublinhado competia com o fio de assinatura
   logo acima e com a barra de progresso de leitura que corre na mesma faixa. */
.navegacao ul {
  gap: 4px;
}

.navegacao a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--texto-secundario);
  transition:
    color var(--t-rapido) linear,
    background-color var(--t-rapido) linear;
}

.navegacao a:hover {
  color: var(--primaria-escura);
  background: var(--superficie-sutil);
}

.navegacao a[aria-current="page"] {
  color: var(--primaria-escura);
  background: var(--primaria-clara);
}

@media (prefers-color-scheme: dark) {
  .navegacao a:hover {
    color: var(--primaria);
    background: rgba(255, 255, 255, 0.06);
  }

  /* Um degrau acima na escala do azul, e por medida: sobre o fundo da própria
     pastilha — `--primaria-clara`, que no escuro é o azul a 16% —, o
     `--primaria` mede 4,34:1 em 14px. Abaixo do mínimo AA. O tom mais claro
     mede 6,1:1 e continua sendo o azul da interface. É o mesmo ajuste já
     aplicado ao número dos passos na página de exclusão. */
  .navegacao a[aria-current="page"] {
    color: #93C5FD;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navegacao a {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Conteúdo
   -------------------------------------------------------------------------- */

.conteudo {
  display: block;
  flex: 1 0 auto;
}

.documento {
  width: 100%;
  max-width: var(--largura-leitura);
  margin: 0 auto;
  padding: var(--esp-lg) var(--esp-md) var(--esp-xxl);
}

@media (min-width: 40rem) {
  .documento {
    padding: var(--esp-xl) var(--esp-lg) var(--esp-xxl);
  }
}

/* Os títulos do documento jurídico também usam a fonte de display, e por um
   motivo prático além do visual: num texto de 370 linhas em que quase tudo é
   parágrafo corrido, o título precisa se distinguir por DESENHO e não só por
   tamanho. Quem procura a cláusula 10.5 acha o título antes de ler a linha. */
.documento h1 {
  font-family: var(--fonte-display);
  font-size: 32px;
  line-height: 1.16;
  font-weight: 600;
  font-variation-settings: "wght" 640;
  letter-spacing: -0.012em;
  margin: 0 0 var(--esp-md);
}

.documento h2 {
  font-family: var(--fonte-display);
  font-size: 23px;
  line-height: 1.24;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  letter-spacing: -0.006em;
  margin: var(--esp-xl) 0 var(--esp-sm);
  padding-top: var(--esp-sm);
  border-top: 1px solid var(--borda-clara);
  scroll-margin-top: 5rem;
}

.documento h3 {
  font-family: var(--fonte-display);
  font-size: 18px;
  line-height: 1.32;
  font-weight: 600;
  font-variation-settings: "wght" 560;
  margin: var(--esp-lg) 0 var(--esp-xs);
  color: var(--texto-primario);
  scroll-margin-top: 5rem;
}

.documento p {
  margin: 0 0 var(--esp-md);
}

.documento ul,
.documento ol {
  margin: 0 0 var(--esp-md);
  padding-left: var(--esp-lg);
}

.documento li {
  margin-bottom: var(--esp-sm);
}

.documento li::marker {
  color: var(--texto-terciario);
}

.documento hr {
  border: 0;
  border-top: 1px solid var(--borda);
  margin: var(--esp-xl) 0;
}

.documento strong {
  font-weight: 700;
  color: var(--texto-primario);
}

.documento code {
  font-family: var(--fonte-mono);
  font-size: 0.875em;
  background: var(--superficie-sutil);
  border: 1px solid var(--borda-clara);
  border-radius: var(--raio-sm);
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

/* Citação em bloco — nos documentos jurídicos ela carrega os avisos que o
   leitor precisa ver primeiro. Recebe destaque âmbar (colors.warning). */
.documento blockquote {
  margin: 0 0 var(--esp-md);
  padding: var(--esp-md);
  background: var(--atencao-fundo);
  border: 1px solid var(--borda-clara);
  border-left: 4px solid var(--atencao);
  border-radius: var(--raio-md);
}

.documento blockquote > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Tabelas — a parte mais frágil em tela pequena
   -------------------------------------------------------------------------- */

.tabela-rolagem {
  /* A tabela rola dentro da própria caixa em vez de estourar a largura da
     página. É o que impede o efeito "documento quebrado" no celular, que é
     onde o revisor da loja abre o link. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 var(--esp-md);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  background: var(--superficie);
  box-shadow: var(--sombra-media);

  /* Sombra nas bordas quando ainda há coluna fora da tela, feita só com
     gradiente: sem ela, quem abre no celular não descobre que a tabela
     continua para o lado e conclui que falta informação no documento.
     Os dois primeiros gradientes acompanham a rolagem (background-attachment
     local) e cobrem a sombra quando a ponta é alcançada. */
  background-image:
    linear-gradient(to right, var(--superficie) 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--superficie) 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, var(--sombra-rolagem), rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--sombra-rolagem), rgba(255, 255, 255, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.tabela-rolagem:focus-visible {
  outline: 2px solid var(--primaria);
}

.documento table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 14px;
  line-height: 1.55;
}

.documento thead th {
  background: var(--superficie-sutil);
  font-weight: 600;
  color: var(--texto-primario);
  white-space: nowrap;
}

.documento th,
.documento td {
  padding: var(--esp-sm) var(--esp-md);
  border-bottom: 1px solid var(--borda-clara);
  vertical-align: top;
}

.documento tbody tr:last-child td {
  border-bottom: 0;
}

.alinha-left {
  text-align: left;
}

.alinha-center {
  text-align: center;
}

.alinha-right {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Sumário
   -------------------------------------------------------------------------- */

.sumario {
  margin: 0 0 var(--esp-lg);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-media);
}

.sumario summary {
  cursor: pointer;
  padding: var(--esp-md);
  font-weight: 600;
  font-size: 14px;
  color: var(--texto-primario);
  border-radius: var(--raio-md);
}

.sumario ol {
  margin: 0;
  padding: 0 var(--esp-lg) var(--esp-md) calc(var(--esp-lg) + var(--esp-md));
  font-size: 14px;
}

.sumario li {
  margin-bottom: var(--esp-xs);
}

.sumario a {
  text-decoration: none;
}

.sumario a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Exclusão de conta — página própria, em coluna de leitura
   --------------------------------------------------------------------------
   Herda a tipografia e a largura de `.documento`: quem chega aqui vem para
   ler uma instrução até o fim, não para percorrer uma vitrine. O que muda são
   quatro blocos, e nenhum deles introduz cor nova — todos usam variáveis já
   presentes no site:

     .passos        numeração visível, porque a ordem dos passos importa;
     .momentos      os dois instantes da exclusão, que não podem ser lidos
                    como um só;
     .canal-espera  mesma linguagem do selo "Em breve" das lojas: caixa
                    tracejada declarando que ali ainda não há endereço;
     .aviso         mesmo destaque âmbar das citações dos documentos, para o
                    que não é recuperável.
   ========================================================================== */

.pagina-exclusao .abertura {
  font-size: 17px;
  color: var(--texto-secundario-forte);
}

/* Passos numerados ---------------------------------------------------------
   A numeração é desenhada em vez de deixada no ::marker porque ela precisa
   ficar do lado de fora do texto e alinhada com a primeira linha mesmo quando
   o passo ocupa três linhas em 320px. */
.passos {
  counter-reset: passo;
  list-style: none;
  margin: 0 0 var(--esp-lg);
  padding: 0;
}

.passos > li {
  counter-increment: passo;
  position: relative;
  min-height: 32px;
  margin: 0 0 var(--esp-md);
  padding: 4px 0 0 44px;
}

.passos > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primaria-clara);
  /* Mesmo par de cores dos ícones de benefício da página inicial: azul escuro
     sobre o azul claro no tema claro, azul claro no escuro (ver nota lá). */
  color: var(--primaria-escura);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (prefers-color-scheme: dark) {
  .passos > li::before {
    /* O azul da interface no escuro (#60A5FA) mede 4,33:1 contra o círculo —
       abaixo do mínimo AA para texto normal, e o número tem 14px. Um passo
       acima na escala do azul resolve sem sair da paleta: 6,1:1. */
    color: #93C5FD;
  }
}

/* Os dois momentos da exclusão --------------------------------------------
   Lista ordenada porque a sequência é o conteúdo: desativar e apagar são
   coisas distintas, separadas por 30 dias, e o erro de leitura mais provável
   é tomá-las por uma só. */
.momentos {
  list-style: none;
  margin: 0 0 var(--esp-lg);
  padding: 0;
  display: grid;
  gap: var(--esp-md);
}

@media (min-width: 40rem) {
  .momentos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.momentos > li {
  padding: var(--esp-md);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--primaria);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-media);
}

.momento-prazo {
  display: block;
  margin-bottom: var(--esp-xs);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primaria-escura);
}

@media (prefers-color-scheme: dark) {
  .momento-prazo {
    color: var(--primaria);
  }
}

.momento-titulo {
  display: block;
  margin-bottom: var(--esp-sm);
  font-family: var(--fonte-display);
  font-size: 18px;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  line-height: 1.28;
  color: var(--texto-primario);
}

.momento-texto {
  display: block;
  font-size: 15px;
  color: var(--texto-secundario-forte);
}

/* Canal ainda inexistente --------------------------------------------------
   Borda tracejada e rótulo de estado, exatamente como os selos das lojas na
   página inicial: é o vocabulário que este site já usa para "existe o lugar,
   ainda não existe o conteúdo". */
.canal-espera {
  display: block;
  margin: 0 0 var(--esp-md);
  padding: var(--esp-md);
  background: var(--superficie);
  border: 1px dashed var(--borda);
  border-radius: var(--raio-md);
}

.canal-estado {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-secundario-forte);
}

.canal-nome {
  display: block;
  margin-bottom: var(--esp-sm);
  font-family: var(--fonte-display);
  font-size: 18px;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  color: var(--texto-primario);
}

.canal-nota {
  display: block;
  font-size: 15px;
  color: var(--texto-secundario-forte);
}

/* Aviso do que não é recuperável ------------------------------------------
   Mesma composição da citação em bloco dos documentos, com uma diferença: no
   tema claro a faixa lateral usa um âmbar mais fechado. O âmbar da paleta
   (#F59E0B) mede 2,05:1 contra o fundo da página — suficiente enquanto é
   ornamento ao lado de um texto que já diz "atenção", insuficiente para uma
   faixa que aqui carrega o único aviso irreversível da página. O tom fechado
   mede 4,8:1 e continua sendo âmbar. */
.aviso {
  padding: var(--esp-md);
  background: var(--atencao-fundo);
  border: 1px solid var(--borda-clara);
  border-left: 4px solid #B45309;
  border-radius: var(--raio-md);
  color: var(--texto-primario);
}

@media (prefers-color-scheme: dark) {
  .aviso {
    /* No escuro o âmbar da paleta já mede 10,7:1 contra o fundo. */
    border-left-color: var(--atencao);
  }
}

/* ==========================================================================
   Página inicial — apresentação do produto
   --------------------------------------------------------------------------
   A composição desta página segue três decisões, e todo o resto decorre
   delas:

     1. o que separa uma seção da outra é ESPAÇO, não moldura. Não há cartão
        com borda e sombra, não há faixa colorida entre blocos e não há linha
        divisória entre seções. Caixa em volta de texto é vocabulário de painel
        administrativo; aqui o vazio faz o trabalho que a borda fazia;
     2. uma ideia por vez. Os quatro problemas, as três telas e os quatro
        pontos de franqueza deixaram de ser grade de itens simultâneos e
        viraram momentos da rolagem: cada um ocupa a largura inteira e termina
        antes do próximo começar;
     3. o produto é o argumento. As capturas cresceram de 232 para 320px e
        passaram a dividir a linha com o texto que as explica, em vez de
        aparecerem em miniatura lado a lado.

   A hierarquia é feita por tamanho, peso e espaço — nunca por caixa, borda ou
   cor de fundo. É por isso que a escala de título vai a 92px: em uma página
   sem moldura, o título é a única coisa que anuncia começo de assunto.
   ========================================================================== */

:root {
  /* Ritmo vertical. A escala anterior tinha três degraus e um deles — o de
     seção — valia para tudo: a distância entre a chamada final e o que vinha
     antes era a mesma distância entre dois parágrafos de uma lista. Ritmo
     constante é o que faz uma página longa ler como planilha.

     A escala tem cinco degraus, e cada um SIGNIFICA uma coisa. A regra de uso
     é a da proximidade: quanto mais próximos dois elementos, mais eles são um
     só assunto.

       --ar-junto     mesmo elemento (rótulo e o título que ele anuncia)
       --ar-item      itens de um mesmo grupo
       --ar-bloco     dois momentos dentro da mesma seção
       --ar-secao     entre duas seções
       --ar-respiro   antes do que muda o assunto da página

     `--ar-respiro` aparece três vezes na página inteira: antes do manifesto,
     antes da prova e antes da chamada final. Se aparecesse mais, deixaria de
     significar alguma coisa.

     Todos os valores são múltiplos de 8, que é a escala do projeto (a de 4px
     do app dobrada), com uma exceção: `--ar-junto` usa o degrau de 4 do app,
     porque aproximar é medida fina. */
  --ar-junto: 12px;
  --ar-item: 28px;
  --ar-bloco: 48px;
  --ar-secao: 80px;
  --ar-respiro: 104px;

  /* Medida de leitura. Não é largura de coluna: é o teto de caracteres por
     linha que mantém o parágrafo confortável (45 a 75). */
  --medida: 34rem;
  --medida-larga: 44rem;

  /* Fio de separação. Existe onde a ausência total de marca deixaria dois
     assuntos colados; é um traço, não uma borda de caixa. */
  --fio: rgba(15, 23, 42, 0.10);
  --fio-forte: rgba(15, 23, 42, 0.16);

  /* Superfície elevada — usada em UMA seção só (o diferencial honesto) e nas
     placas dos documentos. A página não tem caixa em lugar nenhum; é por isso
     que a caixa, onde aparece, é sinal e não moldura. */
  --placa: #FFFFFF;
  --placa-borda: rgba(15, 23, 42, 0.09);
  --placa-luz: rgba(255, 255, 255, 0);
  --placa-sombra:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px -16px rgba(15, 23, 42, 0.18);
  --placa-sombra-alta:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 2px 6px rgba(15, 23, 42, 0.04),
    0 20px 48px -24px rgba(15, 23, 42, 0.28);
}

@media (min-width: 48rem) {
  :root {
    --ar-item: 32px;
    --ar-bloco: 64px;
    --ar-secao: 104px;
    --ar-respiro: 152px;
  }
}

@media (min-width: 64rem) {
  :root {
    --ar-junto: 16px;
    --ar-item: 40px;
    --ar-bloco: 72px;
    --ar-secao: 112px;
    --ar-respiro: 184px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --fio-forte: rgba(255, 255, 255, 0.16);
    --placa: #17233A;
    --placa-borda: rgba(255, 255, 255, 0.10);
    /* No escuro a sombra não separa nada: quem eleva a placa é a luz de 1px na
       aresta de cima, que é como uma superfície real recebe luz vinda de cima. */
    --placa-luz: rgba(255, 255, 255, 0.07);
    --placa-sombra: 0 1px 0 var(--placa-luz) inset;
    --placa-sombra-alta:
      0 1px 0 rgba(255, 255, 255, 0.10) inset,
      0 24px 48px -24px rgba(0, 0, 0, 0.6);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --fio: rgba(255, 255, 255, 0.10);
  }
}

/* A página de produto respira mais que a de documento: a faixa é mais larga e
   a margem lateral cresce com a tela em vez de ficar presa em 24px. */
.pagina-inicio .faixa {
  max-width: 74rem;
  padding: 0 20px;
}

@media (min-width: 40rem) {
  .pagina-inicio .faixa {
    padding: 0 32px;
  }
}

@media (min-width: 64rem) {
  .pagina-inicio .faixa {
    padding: 0 48px;
  }
}

/* Grade de doze colunas — a régua comum de toda a página inicial.
   --------------------------------------------------------------------------
   Ela não existe para alinhar tudo na mesma linha: existe para que cada seção
   possa ocupar uma faixa DIFERENTE da mesma régua sem que a página se
   desmonte. É o que permite ao manifesto descer em escada, ao diferencial
   virar mosaico e à prova sangrar para fora, tudo apoiado no mesmo eixo.

   Fica na `.faixa` e não em cada bloco porque a faixa é o que já centraliza e
   já define o recuo lateral: duplicar isso em cinco seletores é como as
   grades se perdem. */
.pagina-inicio .secao > .faixa {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-content: start;
}

@media (min-width: 64rem) {
  .pagina-inicio .secao > .faixa {
    column-gap: 32px;
  }
}

/* Em tela estreita não há doze colunas a distribuir: tudo ocupa a largura, e
   quem posiciona é a ordem. Declarar `grid-column: 1 / -1` aqui evita ter de
   repetir a exceção em cada bloco lá embaixo. */
.pagina-inicio .secao > .faixa > * {
  grid-column: 1 / -1;
}

.secao {
  padding: var(--ar-secao) 0;
}

/* Respiro grande. Não é decoração: marca as três viradas de assunto da página
   — o manifesto, o diferencial e a chamada final. Ver a nota da escala. */
.secao-respiro {
  padding-top: var(--ar-respiro);
}

/* E o inverso: onde o assunto CONTINUA no bloco seguinte, a distância encolhe.
   O manifesto termina em "decisão financeira tomada no escuro" e a faixa de
   losangos logo abaixo é a resposta desenhada dessa frase — as duas são um
   pensamento só, e 112px entre elas as separava como se fossem seções
   diferentes.

   É a mesma regra da proximidade que aproxima o rótulo do título, aplicada na
   escala da página: distância pequena = mesmo assunto. */
.secao-continua {
  padding-bottom: var(--ar-bloco);
}

/* Respiro grande DEPOIS. A chamada final tem plano próprio e não pode carregar
   o respiro no próprio recuo — o plano escuro começaria 184px antes do texto e
   pareceria uma faixa vazia. A distância fica no bloco de cima. */
.secao-respiro-fim {
  padding-bottom: var(--ar-respiro);
}

/* O canvas alternado ficou reservado a uma única seção — a das capturas. Com
   ele em toda seção par, a troca de cor virava o divisor de tudo e a página
   voltava a ser lista de blocos; usado uma vez só, ele destaca exatamente o
   trecho em que o produto aparece. */
.secao-alternada {
  background: var(--superficie-sutil);
  /* Fio de aresta: um plano que troca de cor sem marcar onde começa parece
     mancha de renderização. Um fio de 1px transforma a troca em decisão. */
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}

/* Rótulo de seção — o único lugar da página em que o azul da marca aparece
   como sinal, e não como link. O fio antes do texto substitui o peso que a
   caixa alta sozinha não dá em 13px.

   A margem caiu de 24px para `--ar-junto`: o rótulo e o título que ele anuncia
   são o mesmo elemento, e 24px os separava tanto quanto o título se separava
   do parágrafo. Aproximar é o que faz a distância significar. */
.secao-rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--ar-junto);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-secundario-forte);
  /* Compensa a caixa alta: em versalete o olho vê a linha começar deslocada
     para dentro, porque não há descendente nem ascendente puxando a mancha. */
  text-indent: 0.02em;
}

.secao-rotulo::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: none;
  border-radius: 2px;
  background: var(--primaria);
}

/* --------------------------------------------------------------------------
   Escala de título
   --------------------------------------------------------------------------
   O `letter-spacing` dos títulos grandes passou de -0,032em para -0,014em, e é
   uma correção, não um gosto. O tracking muito fechado é o traço mais copiado
   dos últimos anos e o que mais rápido faz uma página parecer um modelo: em
   58px ele cola as hastes e o título perde a arquitetura. Aberto, o mesmo
   título ganha a qualidade que as tipografias de display existem para dar.

   `font-variation-settings` em vez de `font-weight` nos títulos: a escala de
   peso da Bricolage é contínua, e 620 é o degrau em que o título tem presença
   sem virar cartaz. É um valor que não existe em fonte estática — é o tipo de
   ajuste que ninguém identifica e todo mundo sente.
   -------------------------------------------------------------------------- */

.pagina-inicio h2 {
  margin: 0 0 var(--esp-lg);
  max-width: 20ch;
  font-family: var(--fonte-display);
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.02;
  font-weight: 600;
  font-variation-settings: "wght" 620;
  letter-spacing: -0.014em;
  color: var(--texto-primario);
  text-wrap: balance;
  scroll-margin-top: 5rem;
}

.pagina-inicio h3 {
  margin: 0 0 var(--esp-md);
  font-family: var(--fonte-display);
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.16;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  letter-spacing: -0.008em;
  color: var(--texto-primario);
  text-wrap: balance;
}

/* Texto de apoio do título. É maior que o corpo de propósito: em uma página
   sem caixa, o degrau entre título e corpo precisa de um passo intermediário,
   senão a queda de 62px para 17px lê como buraco. */
.secao-resumo {
  margin: 0 0 var(--esp-lg);
  max-width: var(--medida-larga);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.62;
  letter-spacing: -0.005em;
  color: var(--texto-secundario-forte);
  text-wrap: pretty;
}

/* O bloco de título guarda distância do que vem abaixo: é o respiro que separa
   "começou um assunto" de "aqui está o assunto". A margem fica no que vem
   depois, e não no título: assim ela vale para a lista, a galeria ou a grade de
   documentos — o que quer que a seção traga — sem inflar o vão entre o título e
   o seu próprio parágrafo de apoio. */
.secao > .faixa > * + .cartoes-beneficio,
.secao > .faixa > * + .galeria,
.secao > .faixa > * + .lista-franqueza,
.secao > .faixa > * + .cartoes {
  margin-top: var(--ar-bloco);
}

/* --------------------------------------------------------------------------
   Topo
   --------------------------------------------------------------------------
   O halo de gradiente saiu e entrou a imagem: um fundo poligonal em
   azul-marinho profundo, com o brilho na borda. É plano escuro NOS DOIS
   TEMAS, e essa é a decisão que sustenta o resto — não é o tema do sistema
   que decide se a imagem existe.

   Por que não deixá-la só no escuro: quem chega no claro é a maioria, e no
   claro não veria nada. E porque a página já abria e fechava com essa
   estrutura antes da imagem: a chamada final é escura nos dois temas desde o
   desenho anterior. O topo passa a fazer o mesmo, e a página ganha moldura —
   abre escuro, lê claro, fecha escuro. Duas trocas de plano, nas duas pontas,
   é ritmo; uma troca a cada seção seria zebra.

   Três camadas, de cima para baixo:

     1. véu. Escurece o lado do texto e some antes de chegar ao brilho. Não é
        ele que garante o contraste — a imagem já sai do conversor com teto de
        luminância: o ponto mais claro dela mede 6,9:1 contra o branco no
        arquivo e 6,1:1 na tela, depois do grão. O véu é margem, para o caso
        de a imagem faltar de ponta a ponta;
     2. a imagem, ancorada à direita: é de lá que vem o brilho depois do
        espelhamento, e é lá que está a captura do aplicativo. Em tela
        estreita o topo fica alto e magro, `cover` amplia a imagem a 2560px e
        a janela de 375px mostra uma fatia só — ancorada em 96% ela cai sobre
        o brilho; a 72%, sobre o meio escuro, e o topo do celular ficava
        preto;
     3. o plano escuro, que é o que sobra se a imagem não carregar. O texto
        continua branco sobre #0F172A — 15,9:1 — e nada quebra.

   O texto do topo é invertido redefinindo os tokens no próprio bloco: cada
   filho já lê `--texto-primario`, `--texto-secundario-forte`, `--fio` e
   `--atencao`, então nenhum seletor novo é preciso. `color` é redeclarado
   porque a herança leva o valor computado no `body`, não a variável.
   -------------------------------------------------------------------------- */

.heroi {
  position: relative;
  z-index: 0;

  --texto-primario: #FFFFFF;
  --texto-secundario-forte: rgba(255, 255, 255, 0.86);
  --texto-terciario: rgba(255, 255, 255, 0.46);
  --atencao: #FBBF24;
  --fio: rgba(255, 255, 255, 0.18);
  /* A moldura tracejada dos selos, medida contra o ponto mais claro do fundo
     do topo — o mesmo critério da chamada final. Ver
     `docs/contraste-dos-fundos.md`. */
  --fio-selo: rgba(255, 255, 255, 0.42);

  color: var(--texto-primario);
  background:
    linear-gradient(
      180deg,
      rgba(6, 11, 22, 0.76) 0%,
      rgba(6, 11, 22, 0.54) 48%,
      rgba(6, 11, 22, 0.74) 100%
    ),
    url("/assets/fundo-topo.webp") 96% top / cover no-repeat,
    var(--canvas-escuro);
  overflow: hidden;
  overflow: clip;
}

/* A partir de 64rem o topo tem duas colunas: o texto à esquerda, a captura à
   direita. O véu deixa de ser vertical e vira diagonal — pesa sobre a coluna
   de texto e se dissolve antes da coluna da captura, que é onde o brilho da
   imagem tem de chegar inteiro para iluminar o aparelho. */
@media (min-width: 64rem) {
  .heroi {
    background:
      linear-gradient(
        94deg,
        rgba(6, 11, 22, 0.80) 0%,
        rgba(6, 11, 22, 0.52) 38%,
        rgba(6, 11, 22, 0) 64%
      ),
      url("/assets/fundo-topo.webp") right top / cover no-repeat,
      var(--canvas-escuro);
  }
}

/* Grão — o mesmo ladrilho PNG de 64x64 em paleta de dois bits que já servia
   aos dois temas, embutido no CSS e decodificado uma vez. Não é `feTurbulence`:
   um filtro SVG de ruído é recalculado a cada repintura da área que cobre, e a
   área aqui é o topo inteiro. `z-index: -1` o mantém atrás de todo o conteúdo,
   de modo que ele nunca é pintado sobre texto e não altera contraste algum. */
.heroi::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* O topo é escuro nos dois temas: fundo escuro engole grão escuro, e o
     ladrilho precisa desta presença a mais para continuar existindo. Era
     0,05 quando o topo ainda era claro no tema claro. */
  opacity: 0.07;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAADFBMVEUAAAAAAAD///8AAADFTF0nAAAAA3RSTlMA//9EUNYhAAADd0lEQVR42gXBUWhbVQCA4f+cnFxPoran4XbclTrPDVkNBYcIgoLMk7u72uVBsikyBGs6okxQXxTZXtxJiNL2QeLwYWMgaSmy+SQ+iLAxiuKeRIovorjajSEVB3azsKxLU7+PstQiliSFGii5py3H5HHx5wyDwbee+qd3VzLrg+h18e8Gb1Wure3bfOQgc64rUpRwpk6KFSSjdm4ag3LBSC0EODkNNRdFRqMxkEPGSb2cBspT71oFVd1uiWV7YtSWSgoDXqsULEEkcxWZSs5+1k9pYT9aGLrwBn262pUK2Aa2JbQCVF1iqUQmlAlaQyMnEdhjtNqRaUknr9+jsutvHuBqf3NrbeYk5qzBU8kxXzdKWATm8JXec8kSv1M8dDl+EfwEplMZmZd1HdisEMW17IPmGSn3zaBPO34QwdDt2czX8i5sT0UrtwbywYev2O6jyt3fHoyvrz8PMVHSngApQwOFRO5O976Xr9EZnH1pK6i/n0DKFNaA3uNzqlkgJ5ZsU0idN850jPOZcf/38PnMhZ/+6x8Yvthr30blj8hW09SEDc7Nx1bgPUWZmNik6V69DCiaVkWyo0N1JFcbEZkBP74XbD0Z1Zfdy5vfnV7NOJ4O7k+td++t3Z1cUVe3ZGr/iIa9872hd+T25mMhDp9qhe3KY85pYoinwTcoV4seiRWWDYb+eag/+sSKPbWx+g2Cqg7aWGhakAsw8XnsDzfsPCA7TtMSoLxU0ukE3S0hRK3tRDSRE0fJYcjog78eiHfDd5/6+Uavz3RESxToNLI2sEz5kA5yzprFKpfqhQUXRKQwgsnbTg1dxexPjFhaa30B/uYgvx0WXu0q1Hy5XYi+FEjmYRYUptTCLOdFuFhrpZDoYDbrThwNCpRhOULFnbReqhBqRTeQoHwZz7kORivjy8jYlM0v7ZN3YrXTf2b1N8NeijrEWppCuxSd6ffvHAp3t/5i47bieq+Pxo9a6y/WGRs7n3UW+ybYkCAquUuAhawXwk4YzX7zsRRzkofV44uTk6d2mju9BwN3Ch2VaVDJqjRPRTqJLhhLR+VTrUNnUJiyKGDourdFURdzJ/BigrAI4fFJsVAygiTNzokse6vaHteFckoVpdFNgcm15ixGXpPjz6pzZ16Qm/fW+/vVB7I3uAU3PmlIJ9auXE7HmZUgQcsxob9acvp/D40HlHlXWKsAAAAASUVORK5CYII=");
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

/* O seletor é duplo de propósito. A grade do topo também é `.faixa`, e
   `.pagina-inicio .faixa` — que fixa o recuo lateral da página inicial — usa
   a forma abreviada `padding`, que zera os quatro lados. Com um seletor de
   classe só, este bloco perdia por especificidade e o respiro acima do selo e
   abaixo da captura não existia: o selo encostava no cabeçalho e o aparelho
   encostava no fim do topo. */
.pagina-inicio .heroi-grade {
  position: relative;
  display: grid;
  gap: var(--esp-xl);
  padding-top: 56px;
  padding-bottom: var(--ar-secao);
}

@media (min-width: 40rem) {
  .pagina-inicio .heroi-grade {
    padding-top: 72px;
  }
}

/* --------------------------------------------------------------------------
   O topo em tela larga — e a primeira dobra do notebook
   --------------------------------------------------------------------------
   O desenho anterior punha o bloco das lojas a 896px do alto da página. Em um
   notebook de 768px de altura útil ele simplesmente não existia: quem abria o
   site via o título, meia frase de resumo e mais nada — justo os dois selos
   que dizem em que pé está a publicação.

   O que foi refeito, com a altura medida a cada passo:

     - o teto do título caiu de 92px para 72px. Noventa e dois era o número de
       um título que ocupava três linhas; em duas linhas, 72px tem a mesma
       presença e devolve 90px de altura;
     - o recuo de topo caiu de 104px para 76px, e o vão entre o resumo e as
       lojas de 32px para `--ar-item`. São dois elementos do mesmo assunto —
       "o que é" e "onde conseguir" —, e estavam separados como se fossem
       seções diferentes;
     - a nota das lojas saiu de baixo dos selos e foi para a coluna da direita,
       ao lado deles. Ela explica os selos: ao lado deles é onde ela explica.

   Resultado medido: o topo do bloco de lojas passou de 896px para 620px em
   1440x900 e continua dentro da dobra em 1366x768, que é a tela de notebook
   mais comum. A verificação está em `docs/composicao-da-home.md`.

   `display: contents` no invólucro de texto é o que torna isso possível sem
   tocar no HTML: os filhos passam a ser itens diretos da grade e cada um
   escolhe a sua célula. O invólucro não tem papel semântico nenhum (é uma
   `div` de agrupamento visual), então nada se perde para o leitor de tela.
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
  .heroi-texto {
    display: contents;
  }

  .pagina-inicio .heroi-grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
    padding-top: 60px;
    /* Zero: a captura é quem fecha o topo, e ela encosta na aresta de baixo
       de propósito (ver `.heroi-arte`). */
    padding-bottom: 0;
  }

  .selo-espera {
    grid-column: 1 / 8;
    grid-row: 1;
  }

  .heroi h1 {
    grid-column: 1 / 12;
    grid-row: 2;
  }

  .heroi-resumo {
    grid-column: 1 / 7;
    grid-row: 3;
  }

  .heroi-texto .lojas {
    grid-column: 1 / 5;
    grid-row: 4;
    align-self: start;
  }

  /* A nota deixa de empurrar o topo para baixo e passa a ficar ao lado do que
     ela explica. `align-self: end` alinha a última linha dela com a base dos
     selos, e não o topo do parágrafo com o topo deles: é o alinhamento óptico
     — o olho compara as bases, não as caixas. */
  .lojas-nota {
    grid-column: 5 / 8;
    grid-row: 4;
    align-self: end;
    padding-bottom: 2px;
  }

  .heroi-arte {
    grid-column: 8 / -1;
    grid-row: 3 / span 3;
  }
}

/* Em 80rem a coluna da captura ganha um pouco mais de largura: acima dessa
   marca sobra faixa, e é ela que separa uma composição de uma tabela. */
@media (min-width: 80rem) {
  .heroi-resumo {
    grid-column: 1 / 7;
  }

  .heroi-arte {
    grid-column: 8 / 13;
    margin-bottom: -136px;
  }
}

.heroi h1 {
  margin: 0 0 var(--esp-lg);
  font-family: var(--fonte-display);
  /* O teto caiu de 92px para 72px, e não é recuo: 92px punha o título em três
     linhas e empurrava os selos das lojas para fora da primeira dobra em
     notebook. Em duas linhas, 72px ocupa a mesma mancha e devolve a dobra.

     O `letter-spacing` abriu de -0,038em para -0,012em pelo mesmo motivo que
     abriu nos h2: em título grande, o tracking apertado cola as hastes e o
     que deveria parecer desenhado passa a parecer comprimido. O piso de 38px
     é o que ainda cabe em 320px com a palavra mais larga desta copy
     ("dinheiro"). */
  font-size: clamp(38px, 6.4vw, 72px);
  line-height: 1.03;
  font-weight: 600;
  font-variation-settings: "wght" 640;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

@media (min-width: 64rem) {
  .heroi h1 {
    margin-bottom: var(--ar-item);
    /* `balance` distribui as linhas em massa igual, o que num título de duas
       linhas deixa a segunda quase do tamanho da primeira e some com a
       silhueta. Aqui a quebra é composição: a primeira linha é longa, a
       segunda curta, e o degrau entre as duas é o que dá forma ao bloco. */
    text-wrap: pretty;
    /* 24 caracteres é o que põe esta copy em duas linhas de tamanho desigual.
       Foi medido nesta frase, e é por isso que está em `ch` e não em `rem`:
       se o texto mudar, a medida acompanha a fonte em vez de brigar com ela. */
    max-width: 24ch;
    margin-bottom: 32px;
  }
}

.heroi-resumo {
  margin: 0 0 32px;
  max-width: var(--medida);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.62;
  letter-spacing: -0.005em;
  color: var(--texto-secundario-forte);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Selo de estado
   --------------------------------------------------------------------------
   Não é botão e não leva a lugar nenhum, porque não existe destino: o
   aplicativo ainda não foi publicado.

   O que ganhou foi acabamento. Era um retângulo arredondado com um fio de 1px
   — a forma que todo projeto tem por padrão. Agora tem superfície (um véu
   claro sobre o plano escuro), a luz de 1px na aresta de cima que uma
   superfície real recebe de uma luz vinda de cima, e um halo em volta do
   ponto de estado. Três camadas de 1px que ninguém nota separadamente e que
   juntas são a diferença entre um contorno e um objeto.
   -------------------------------------------------------------------------- */

.selo-espera {
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-self: start;
  gap: 9px;
  margin: 0 0 var(--esp-lg);
  padding: 7px 15px 7px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--fio);
  border-radius: 9999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 1px 2px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.004em;
  color: var(--texto-secundario-forte);
}

.selo-ponto {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--atencao);
  /* Halo. O ponto tem 7px: sem ele, some contra a superfície do selo em
     qualquer tela que não seja a de quem desenhou. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--atencao) 22%, transparent);
}

/* Título da lista de lojas: existe para o leitor de tela e para a estrutura de
   cabeçalhos; visualmente o selo acima já cumpre o papel. */
.rotulo-lojas {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lojas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 var(--esp-lg);
  padding: 0;
}

/* --------------------------------------------------------------------------
   Selo de loja — o lugar reservado que ainda não é botão
   --------------------------------------------------------------------------
   O aplicativo não foi publicado: aqui não existe endereço para levar a
   lugar nenhum, e inventar um botão morto seria mentir sobre o estado do
   produto. O que existe é a MOLDURA do que vai chegar — e ela precisa parecer
   desenhada, não esquecida.

   Era um retângulo com fio tracejado de 1px e mais nada, na cor do texto
   terciário: em tela grande, dois contornos vazios perdidos no plano escuro.
   O que mudou:

     - superfície. Um véu de 5% sobre o plano dá corpo ao selo sem fechá-lo,
       e é o que o separa do fundo antes mesmo de a borda ser vista;
     - luz de aresta. `inset 0 1px 0` na cor da luz — a mesma linha de 1px que
       o aparelho e as placas recebem. É o que faz a página inteira parecer
       iluminada da mesma direção;
     - o tracejado ficou, porque é ele que diz "ainda não". Mas passou a ser
       um traço curto e regular (`2px 3px`), e não o padrão do navegador, que
       muda de proporção conforme o perímetro do elemento;
     - o nome da loja subiu para a fonte de display. É a única palavra desta
       região que interessa a quem procura onde baixar.

   A área é de 60px de altura por 148px mínimos: quando o endereço existir,
   o selo vira `<a>` e já está no tamanho de alvo de toque (44px).
   -------------------------------------------------------------------------- */

.loja {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 60px;
  min-width: 148px;
  justify-content: center;
  padding: 9px 20px 10px 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed var(--fio-selo, var(--texto-terciario));
  border-radius: var(--raio-md);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.loja-estado {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--texto-secundario-forte);
}

.loja-nome {
  font-family: var(--fonte-display);
  font-size: 17px;
  font-weight: 600;
  font-variation-settings: "wght" 620;
  letter-spacing: -0.004em;
  color: var(--texto-primario);
}

.lojas-nota {
  margin: 0;
  max-width: 30rem;
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--texto-secundario-forte);
}

/* --------------------------------------------------------------------------
   Moldura de aparelho
   --------------------------------------------------------------------------
   Uma sombra só, e funda. É a única sombra que sobrou na página inteira: as
   dos cartões saíram junto com os cartões, e esta ficou porque não decora
   nada — é o que apoia o aparelho sobre a página em vez de deixá-lo colado
   nela.
   -------------------------------------------------------------------------- */

.heroi-arte {
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   A captura que atravessa a aresta
   --------------------------------------------------------------------------
   A partir de 64rem o aparelho deixa de ser um objeto contido dentro do topo
   e passa a ATRAVESSAR a aresta de baixo dele: cresce, desce e é cortado pelo
   fim do bloco escuro.

   É a única coisa desta página que não respeita a moldura em que está, e é
   deliberado. Toda seção terminando exatamente onde começa a próxima é o que
   faz uma página longa parecer uma pilha de blocos; um elemento cruzando a
   junta é o que diz que existe composição por trás — e a captura é o único
   elemento que pode fazer isso sem prejuízo, porque a parte cortada é a base
   da lista de contas, onde não há nada que precise ser lido.

   O `sticky` saiu junto. Ele existia para a captura acompanhar a rolagem do
   texto ao lado; com o aparelho ancorado à aresta, deslizar significaria
   descolar dela — que é justamente o efeito que se quis.
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
  .heroi-arte {
    align-self: end;
    justify-content: center;
    /* O excesso fica fora do bloco e o `overflow: clip` do topo o remove.

       Cento e vinte pixels, e não sessenta: um corte pequeno é ambíguo — lê
       como imagem que não coube. O corte tem de ser grande o bastante para
       ser evidentemente uma decisão. O que fica de fora é a metade de baixo
       da lista de contas, cujo conteúdo já se repete na captura de
       transações, mais adiante na página. */
    margin-bottom: -120px;
  }
}

.aparelho {
  position: relative;
  margin: 0;
  padding: 10px;
  max-width: 300px;
  width: 100%;
  background: linear-gradient(158deg, #3B4A63, #0B1220 62%);
  border-radius: 42px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 32px 64px -28px rgba(15, 23, 42, 0.45);
}

.aparelho-menor {
  max-width: 268px;
  padding: 9px;
  border-radius: 38px;
}

.aparelho picture,
.aparelho img {
  display: block;
}

.aparelho img {
  width: 100%;
  height: auto;
  border-radius: 33px;
  background: var(--superficie);
}

.aparelho-menor img {
  border-radius: 30px;
}

/* Em tablet a captura empilhada ainda é o argumento da seção: 268px numa tela
   de 768px a devolviam à condição de miniatura. */
@media (min-width: 48rem) {
  .aparelho-menor {
    max-width: 320px;
  }
}

@media (min-width: 64rem) {
  .aparelho {
    max-width: 356px;
  }

  .aparelho-menor {
    max-width: 336px;
  }
}

@media (prefers-color-scheme: dark) {
  /* No escuro a sombra desaparece contra o fundo: o contorno é o que separa a
     moldura do aparelho da página. */
  .aparelho {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.12),
      0 1px 0 rgba(255, 255, 255, 0.10) inset,
      0 32px 64px -28px rgba(0, 0, 0, 0.7);
  }
}

/* --------------------------------------------------------------------------
   Os quatro problemas
   --------------------------------------------------------------------------
   Eram quatro cartões brancos em 2x2, com borda, sombra e um ícone dentro de
   um quadrado azul-claro — a composição exata de um painel administrativo.
   Agora são quatro momentos empilhados, separados por um fio e por muito
   espaço: em 1440px cada um ocupa a largura inteira, e quem rola termina de
   ler um antes de o próximo aparecer.

   O ícone perdeu a caixa e cresceu de 22 para 40px. Sem fundo atrás, ele para
   de ser um selo e volta a ser o que é: um traço que ilustra o assunto.
   -------------------------------------------------------------------------- */

.cartoes-beneficio,
.galeria,
.lista-franqueza,
.cartoes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cartoes-beneficio {
  display: grid;
  counter-reset: problema;
}

.cartoes-beneficio > li {
  counter-increment: problema;
  display: grid;
  gap: 14px;
  padding: var(--ar-bloco) 0;
  /* A sangria do algarismo é do bloco, não da faixa: sem ela o número sairia
     pela borda esquerda da página em telas estreitas. */
  padding-left: 22px;
}

.cartoes-beneficio > li:first-child {
  padding-top: 0;
}

.cartoes-beneficio > li:last-child {
  padding-bottom: 0;
}

.cartoes-beneficio > li + li {
  border-top: 1px solid var(--fio);
}

/* --------------------------------------------------------------------------
   Duas colunas em degrau
   --------------------------------------------------------------------------
   A pilha de quatro momentos de largura inteira foi testada e reprovada aqui
   mesmo: 1.100px de rolagem para dizer quatro coisas, e o mesmo esqueleto
   quatro vezes seguidas. Espelhar dois deles foi pior — o olho passava a ler
   parágrafo, título, ícone, na ordem inversa da leitura.

   O que ficou é uma grade de duas colunas em DEGRAU: a coluna da direita
   começa 72px abaixo da esquerda. É a diferença entre uma grade e uma
   composição — em linha reta, quatro blocos iguais lado a lado formam uma
   tabela; deslocados, formam um percurso, e o olho desce em zigue-zague em
   vez de varrer da esquerda para a direita.

   Não há fio nenhum aqui, e é deliberado: o separador desta seção é o
   algarismo. Cada uma das outras seções da página resolve a separação de um
   jeito diferente — fio, plano, aresta, placa —, e é essa diferença que
   impede a página de ser lida como um mesmo bloco repetido sete vezes.
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .cartoes-beneficio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    row-gap: 0;
    align-items: start;
  }

  .cartoes-beneficio > li,
  .cartoes-beneficio > li:first-child,
  .cartoes-beneficio > li:last-child {
    padding: 0 0 var(--ar-bloco);
    padding-left: 26px;
  }

  /* Os dois últimos ocupam a linha de baixo da grade: o recuo deles somava ao
     recuo da seção e abria um vão de 184px depois do texto, que lia como
     bloco faltando. */
  .cartoes-beneficio > li:nth-last-child(-n + 2) {
    padding-bottom: 0;
  }

  .cartoes-beneficio > li + li {
    border-top: 0;
  }

  /* O degrau. Fica no recuo, e não em `transform`, porque `transform` não
     ocupa espaço: a coluna desceria e deixaria um vão do mesmo tamanho no
     fim da seção. */
  .cartoes-beneficio > li:nth-child(even) {
    padding-top: 72px;
  }
}

@media (min-width: 64rem) {
  .cartoes-beneficio {
    column-gap: 88px;
  }

  .cartoes-beneficio > li:nth-child(even) {
    padding-top: 96px;
  }
}

.cartoes-beneficio h3 {
  margin: 0;
  max-width: 22ch;
}

.cartoes-beneficio p {
  margin: 0;
  max-width: var(--medida);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.64;
  color: var(--texto-secundario-forte);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   A marca do problema: o algarismo por baixo, o traço por cima
   --------------------------------------------------------------------------
   Era um ícone de 48px solto na coluna. Agora são duas camadas na mesma
   célula: o número do problema em tipografia de display, grande e quase
   apagado, e o ícone de traço por cima dele.

   O número não é conteúdo — é escala. Ele existe para dar à coluna da marca um
   peso que um traço de 48px não tem, e para que a lista seja lida como
   sequência sem que uma palavra tenha sido acrescentada ao texto. A barra e as
   aspas vazias em `content` são a forma de dizer isso ao leitor de tela: o
   algarismo é desenho, e não deve ser anunciado no meio da leitura. Onde a
   sintaxe não for suportada, o leitor anuncia o número — redundante, nunca
   errado.
   -------------------------------------------------------------------------- */

.beneficio-icone {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  color: var(--primaria);
}

/* O algarismo do problema — desenho, não conteúdo.
   Fica na sangria à esquerda do bloco, atrás do ícone, em opacidade baixa: é
   ele que dá à coluna o peso que um traço de 34px não tem, e é ele que faz a
   lista ser lida como sequência sem que uma palavra tenha sido acrescentada
   ao texto.

   A barra e as aspas vazias em `content` dizem ao leitor de tela que isto é
   ornamento e não deve ser anunciado no meio da leitura. Onde a sintaxe não
   for suportada, o leitor anuncia o número — redundante, nunca errado. */
.beneficio-icone::before {
  content: counter(problema) / "";
  position: absolute;
  left: -0.52em;
  top: 50%;
  transform: translateY(-58%);
  font-family: var(--fonte-display);
  font-size: 88px;
  font-weight: 600;
  font-variation-settings: "wght" 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--texto-primario);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 64rem) {
  .beneficio-icone {
    width: 38px;
    height: 38px;
  }

  .beneficio-icone::before {
    font-size: 124px;
  }
}

.beneficio-icone svg {
  position: relative;
  width: 100%;
  height: 100%;
  /* O traço vem do atributo do SVG em 1.5; a propriedade CSS vence o atributo
     e afina para 1.25, que é o peso que corresponde a um ícone de 44px. */
  stroke-width: 1.25;
}

/* ==========================================================================
   O manifesto — a seção que não se parece com nenhuma outra
   --------------------------------------------------------------------------
   É a única seção da página sem imagem, sem lista e sem ícone: um título e
   dois parágrafos. Justamente por isso ela é o lugar certo para a composição
   mais silenciosa e mais deslocada da página.

   Três coisas a distinguem de tudo o que vem antes e depois:

     1. o eixo muda. Todas as outras seções encostam o conteúdo na primeira
        coluna da grade; esta desce em ESCADA — o rótulo na coluna 2, o título
        na 2, o primeiro parágrafo na 4, o segundo na 5. Quem rola sente que a
        página pisou de lado, mesmo sem saber por quê;
     2. o primeiro parágrafo é um LEAD: 24px, na fonte de display, com a cor
        do texto principal. Não é destaque decorativo — é a frase que carrega
        a virada do argumento, e ela ganha o corpo que o texto lhe dá;
     3. um filete vertical acompanha o segundo parágrafo à esquerda. É a única
        marca vertical da página inteira, e ela existe para dizer que os dois
        parágrafos são um pensamento só, e não dois blocos empilhados.

   O respiro acima é `--ar-respiro`, o maior da escala, porque é aqui que a
   página muda de assunto: sai de "o que o produto faz" e entra em "por que
   isso importa". Distância grande antes do que muda o assunto — é a regra
   inteira, aplicada onde ela vale.

   O alvo é o `aria-labelledby` porque ele já identifica a seção no HTML: não
   pede classe nova e não toca no texto.
   ========================================================================== */

.secao[aria-labelledby="verdade"] .secao-resumo {
  max-width: 40rem;
}

.secao[aria-labelledby="verdade"] h2 + .secao-resumo {
  font-family: var(--fonte-display);
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.36;
  font-weight: 500;
  font-variation-settings: "wght" 490;
  letter-spacing: -0.006em;
  color: var(--texto-primario);
  margin-bottom: var(--ar-item);
}

.secao[aria-labelledby="verdade"] .secao-resumo + .secao-resumo {
  margin-bottom: 0;
  padding-left: 22px;
  border-left: 2px solid var(--fio-forte);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.68;
}

@media (min-width: 64rem) {
  .secao[aria-labelledby="verdade"] .secao-rotulo,
  .secao[aria-labelledby="verdade"] h2 {
    grid-column: 2 / 9;
  }

  .secao[aria-labelledby="verdade"] h2 {
    max-width: none;
    margin-bottom: var(--ar-bloco);
  }

  .secao[aria-labelledby="verdade"] h2 + .secao-resumo {
    grid-column: 4 / 11;
  }

  .secao[aria-labelledby="verdade"] .secao-resumo + .secao-resumo {
    grid-column: 5 / 11;
    padding-left: 28px;
  }
}

/* --------------------------------------------------------------------------
   Faixa entre o argumento e a prova
   --------------------------------------------------------------------------
   Losangos espalhados à esquerda, em grade à direita, um deles aceso em
   âmbar. Entra depois do parágrafo que termina em "decisão financeira tomada
   no escuro" e antes das capturas: é a virada do texto, desenhada.

   Não é seção — é um corte de respiro, e a altura é o que garante isso. Uma
   faixa de 200px lê como divisor; a mesma imagem em 600px viraria um banner
   e a página passaria a ter três seções escuras em vez de duas pontas
   escuras e um sinal no meio.

   A composição é `screen` sobre o plano: a arte foi achatada em preto no
   conversor, e em `screen` o preto é neutro — some no plano e só os losangos
   somam luz. O losango âmbar é o `--atencao` da paleta, a mesma cor do ponto
   do selo lá em cima.

   `background-size: 100% auto` mostra a largura inteira da arte, que é o
   único eixo que importa: a leitura é da esquerda para a direita, do
   espalhado ao organizado. A altura é maior que a faixa e sobra dos dois
   lados — daí a máscara vertical: sem ela, a fileira de cima e a de baixo
   seriam cortadas por uma reta no meio de cada losango, que é o desenho de
   quem não olhou. Com ela, as fileiras se dissolvem no plano.
   -------------------------------------------------------------------------- */

.transicao-caos-ordem {
  position: relative;
  height: 116px;
  background: var(--canvas-escuro);
  overflow: hidden;
}

.transicao-caos-ordem::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/caos-ordem.webp") center / 100% auto no-repeat;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(
    180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(
    180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

@media (min-width: 40rem) {
  .transicao-caos-ordem {
    height: 168px;
  }
}

@media (min-width: 64rem) {
  .transicao-caos-ordem {
    height: 224px;
  }
}

/* --------------------------------------------------------------------------
   Galeria de telas — o produto em tamanho de argumento
   --------------------------------------------------------------------------
   Eram três capturas de 232px lado a lado, com a legenda centrada embaixo:
   três miniaturas que a pessoa via ao mesmo tempo e não olhava nenhuma. Agora
   são três momentos, um por vez, com a captura em 320px dividindo a linha com
   o texto que a explica — e o lado alterna, para que a rolagem tenha ritmo em
   vez de repetição.

   O trilho horizontal com encaixe saiu junto. Ele existia para caber três
   miniaturas em tela de celular; com uma captura por vez, empilhar é melhor:
   a imagem fica grande, ninguém precisa descobrir que há mais para o lado e
   não há gesto horizontal disputando com a rolagem da página.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   A prova — o único trecho da página com o eixo no centro
   --------------------------------------------------------------------------
   Toda seção desta página encosta o título na coluna da esquerda. Esta não:
   aqui o bloco de título fica CENTRADO, e é a terceira composição diferente
   em três seções seguidas. Não é variedade pela variedade — é o que impede
   que a segunda metade da página seja lida como repetição da primeira.

   O motivo de ser justo aqui: esta seção é a prova, e prova se apresenta de
   frente. As três capturas descem em escada logo abaixo, e o eixo central do
   título é o que dá a elas um ponto de partida comum.
   -------------------------------------------------------------------------- */

.secao-prova .secao-rotulo {
  justify-content: center;
}

.secao-prova h2 {
  max-width: 18ch;
  margin-inline: auto;
  text-align: center;
}

.secao-prova .secao-resumo {
  margin-inline: auto;
  max-width: 42rem;
  text-align: center;
}

@media (min-width: 64rem) {
  .secao-prova h2,
  .secao-prova .secao-resumo,
  .secao-prova .secao-rotulo {
    grid-column: 2 / 12;
  }
}

.galeria {
  display: grid;
  gap: var(--ar-bloco);
}

.galeria figure {
  margin: 0;
  display: grid;
  gap: var(--esp-xl);
  justify-items: center;
  text-align: center;
}

.galeria figcaption {
  max-width: 25rem;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.64;
  color: var(--texto-secundario-forte);
  text-wrap: pretty;
}

.galeria figcaption strong {
  display: block;
  margin-bottom: var(--ar-junto);
  font-family: var(--fonte-display);
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.16;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  letter-spacing: -0.008em;
  color: var(--texto-primario);
}

@media (min-width: 60rem) {
  /* O par captura + legenda vive num bloco de 62rem centrado na faixa, e não
     esticado nos 74rem dela: espalhado, o vão entre a imagem e o texto ficava
     maior que o próprio texto. */
  .galeria figure {
    max-width: 52rem;
    margin-inline: auto;
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    column-gap: 56px;
    align-items: center;
    justify-items: start;
    text-align: left;
  }

  /* Ímpar traz a captura à esquerda, par à direita. A troca é de posição, não
     de alinhamento: o texto continua à esquerda nos dois casos, porque
     parágrafo alinhado à direita se lê pior e o efeito não vale o custo. */
  .galeria > li:nth-child(even) figure {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  }

  .galeria > li:nth-child(even) .aparelho {
    order: 2;
  }

  /* No bloco invertido a legenda encosta na captura, e não na borda esquerda
     da faixa: solta no início de uma coluna de 1fr, ela ficava a 200px do que
     explica e o par deixava de se ler como par. */
  .galeria > li:nth-child(even) figcaption {
    justify-self: end;
  }

  /* O deslocamento lateral. Três pares alternando lado, todos no mesmo eixo
     vertical, ainda formam três linhas de uma tabela; empurrados 40px para
     fora — o ímpar para a esquerda, o par para a direita — eles passam a
     descer em diagonal, e a seção ganha um percurso em vez de uma pilha.

     Sai em telas menores que 60rem, onde não há folga lateral para gastar. */
  .galeria > li:nth-child(odd) figure {
    margin-left: 0;
    margin-right: auto;
    transform: translateX(-24px);
  }

  .galeria > li:nth-child(even) figure {
    margin-left: auto;
    margin-right: 0;
    transform: translateX(24px);
  }
}

@media (min-width: 60rem) and (prefers-reduced-motion: reduce) {
  /* `transform` aqui é posição, não movimento — nada anima. Fica declarado
     mesmo assim: quem pede movimento reduzido costuma pedir também menos
     deslocamento visual, e o desenho não perde nada em linha reta. */
  .galeria > li:nth-child(odd) figure,
  .galeria > li:nth-child(even) figure {
    transform: none;
  }
}

/* ==========================================================================
   Diferencial honesto — o mosaico, e a única caixa da página
   --------------------------------------------------------------------------
   Eram quatro blocos iguais em duas colunas, separados por um fio de 1px: a
   quarta grade regular de uma página que já tinha três. A esta altura da
   rolagem, mais uma delas é o momento em que quem lê para de ler.

   O que ficou é um MOSAICO de larguras desiguais, apoiado na régua de doze
   colunas:

     "Você digita"                7 colunas
     "Relatório completo"         5 colunas
     "Privacidade"                5 colunas
     "Sair é uma tela"            7 colunas

   Sete e cinco, depois cinco e sete: o peso troca de lado sem que nenhum
   bloco saia do eixo. É a única seção da página em que dois itens vizinhos
   não têm a mesma largura, e é isso que a distingue.

   E é a única seção com CAIXA. A página inteira separa assunto com espaço —
   essa foi e continua sendo a decisão de fundo. Justamente por isso a caixa,
   onde aparece uma única vez, é sinal: aqui estão as quatro afirmações que o
   produto assume por escrito, e elas ganham superfície própria.

   A superfície tem três camadas de 1px, e nenhuma delas é sombra pesada:
   fundo, borda e a luz na aresta de cima. É como uma placa recebe luz de uma
   fonte que vem de cima — a mesma direção do aparelho no topo e dos selos.
   ========================================================================== */

.lista-franqueza {
  display: grid;
  row-gap: var(--esp-lg);
}

@media (min-width: 48rem) {
  .lista-franqueza {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--esp-lg);
    row-gap: var(--esp-lg);
  }

  .lista-franqueza > li:nth-child(1) {
    grid-column: 1 / 8;
  }

  .lista-franqueza > li:nth-child(2) {
    grid-column: 8 / -1;
  }

  .lista-franqueza > li:nth-child(3) {
    grid-column: 1 / 6;
  }

  .lista-franqueza > li:nth-child(4) {
    grid-column: 6 / -1;
  }
}

.lista-franqueza > li {
  padding: var(--esp-lg);
  background: var(--placa);
  border: 1px solid var(--placa-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--placa-sombra);
}

@media (min-width: 48rem) {
  .lista-franqueza > li {
    padding: 32px;
  }
}

@media (min-width: 64rem) {
  .lista-franqueza > li {
    padding: 40px 40px 38px;
  }
}

.lista-franqueza h3 {
  margin-bottom: var(--ar-junto);
  max-width: 24ch;
}

.lista-franqueza p {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(15.5px, 1.35vw, 17px);
  line-height: 1.66;
  color: var(--texto-secundario-forte);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Chamada final
   --------------------------------------------------------------------------
   Era uma faixa de gradiente azul-para-roxo ocupando a tela inteira — o ponto
   mais saturado da página, e o único lugar em que o roxo aparecia como
   superfície. Agora é um plano escuro com um halo do azul da marca vindo de
   cima: a mesma pausa na rolagem, sem gastar a segunda cor.

   A paleta ficou com um acento só. O roxo não sumiu do site: ele continua no
   fio de assinatura do cabeçalho, que é onde a marca o usa. O que mudou é que
   ele deixou de pintar uma faixa de 600px de altura.

   O halo agora é imagem, e não gradiente. O original nasceu com a luz no topo
   ao centro — o mesmo lugar de onde o gradiente vinha —, então a troca é de
   material, não de composição: o que muda é que a luz passa a ter grão, e a
   borda dela deixa de ser matemática.

   Duas camadas de imagem, com papéis diferentes:

     - a TEXTURA fica no `background` do bloco, em `screen`: linhas diagonais
       de luminância uniforme em 0,008, que dão superfície ao plano. Sem ela,
       800px de altura de cor chapada é o único lugar da página em que se vê
       banda de gradiente;
     - o HALO fica em uma camada própria, `::before`, e não no `background`.
       O motivo é `cover`: a imagem é 3:1 e o bloco é 1,7:1, então `cover`
       ampliava a imagem em 1,6x e preenchia o bloco inteiro com o miolo do
       halo — um azul médio chapado, que é justamente a faixa saturada que o
       desenho anterior tinha acabado de tirar. Em camada própria ela entra
       pela largura (`100% auto`), ocupa o terço de cima, e a máscara vertical
       dissolve a borda de baixo antes que ela vire uma linha.

   A cor sólida permanece como rede: é o que aparece se as imagens não
   carregarem, e é o plano que o desenho já tinha. Medições em
   `docs/contraste-dos-fundos.md`.
   -------------------------------------------------------------------------- */

.chamada-final {
  position: relative;
  /* Sem isto o `mix-blend-mode` do halo procuraria o backdrop fora do bloco e
     misturaria com a seção de cima. */
  isolation: isolate;
  /* O respiro grande fica no bloco de cima, e não aqui: quem muda de assunto
     é a chegada da chamada, e a distância tem de estar antes dela. */
  background:
    url("/assets/textura-plano.webp") center / cover no-repeat,
    var(--canvas-escuro);
  background-blend-mode: screen;
  color: #FFFFFF;
  padding: var(--ar-secao) 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   O halo, reduzido — e por quê
   --------------------------------------------------------------------------
   Duas revisões seguidas apontaram a mesma coisa: com o halo ocupando 66% da
   altura em `screen` cheio, a faixa final ficou mais AZUL e menos sóbria que
   o plano liso que ela substituiu. Foram olhos diferentes chegando à mesma
   conclusão, e o julgamento aqui é que eles têm razão.

   O que se perdeu não foi a imagem, foi a dose. Uma faixa de fechamento tem
   de ser o ponto mais calmo da página — é onde a leitura termina —, e um azul
   médio cobrindo dois terços dela é a coisa mais saturada da rolagem inteira,
   competindo com a única cor de acento que o site tem.

   Três medidas, e nenhuma delas joga o material fora:

     1. a camada caiu de 66% para 46% da altura. A luz volta a ser um halo
        vindo de cima, e não um fundo;
     2. `opacity: 0.62`. Em `screen`, opacidade é literalmente quanta luz a
        camada soma: 0,62 é o ponto em que o grão da imagem continua visível e
        o azul deixa de dominar;
     3. `saturate(0.7)`. O que sobra do halo é luz, não cor — que é o papel
        que ele tinha quando era gradiente.

   O que se ganhou de volta em troca: um fio de luz de 1px na aresta de cima
   do bloco, no gradiente da marca, em opacidade baixa. Uma linha de 1px
   fazendo o trabalho que 500px de azul faziam mal.
   -------------------------------------------------------------------------- */

.chamada-final::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* A camada tem a altura da luz, e a imagem preenche a camada exatamente
     (`100% 100%`). É o que evita a costura: com `auto` na altura, a imagem
     acabava em 480px de um bloco de 834px e o `screen` parava ali, deixando
     um degrau horizontal no meio do plano. Esticar não custa nada aqui —
     é um halo difuso, não tem forma a preservar — e em tela estreita é o que
     faz a luz descer em vez de virar uma tira de 125px no topo. */
  inset: 0 0 auto 0;
  height: 46%;
  opacity: 0.62;
  pointer-events: none;
  background: url("/assets/fundo-chamada.webp") center top / 100% 100% no-repeat;
  filter: saturate(0.7);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}

/* O fio de luz na aresta de cima. É o gradiente da marca — o mesmo do
   cabeçalho —, e é a única coisa da chamada final que tem cor saturada. Uma
   linha de 1px pode ser saturada; um plano de 500px não. */
.chamada-final::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(37, 99, 235, 0) 0%,
    rgba(96, 165, 250, 0.55) 22%,
    rgba(167, 139, 250, 0.55) 78%,
    rgba(124, 58, 237, 0) 100%
  );
}

.chamada-final .faixa {
  display: grid;
  justify-items: center;
}

.chamada-final h2 {
  max-width: 17ch;
  color: #FFFFFF;
  margin-bottom: var(--esp-xl);
  text-align: center;
}

.chamada-resumo {
  margin: 0 auto;
  max-width: var(--medida-larga);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.62;
  letter-spacing: -0.011em;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}

.chamada-resumo + .chamada-resumo {
  margin-top: var(--esp-lg);
  font-size: clamp(15px, 1.4vw, 17px);
  color: rgba(255, 255, 255, 0.72);
}

.lojas-invertidas {
  justify-content: center;
  margin: var(--ar-item) 0 0;
}

/* A moldura tracejada mede 3,2:1 contra o ponto mais claro do plano — acima
   do mínimo de 3:1 para elemento gráfico. Era 0,32 quando o plano era cor
   chapada; com a luz da imagem por baixo, 0,32 caía para 2,4:1. */
.lojas-invertidas .loja {
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  text-align: left;
}

.lojas-invertidas .loja-estado {
  color: rgba(255, 255, 255, 0.76);
}

.lojas-invertidas .loja-nome {
  color: #FFFFFF;
}

/* ==========================================================================
   Documentos — as três únicas coisas clicáveis da página
   --------------------------------------------------------------------------
   E é por isso que elas ganharam o acabamento que ganharam.

   Antes: um fio de 1px no topo, o título em azul e um chevron. No repouso,
   três linhas de texto indistinguíveis do resto da página; ao ponteiro, o fio
   trocava de cor. Quem chega ao site para exercer um direito — ler a política,
   apagar a conta — precisava adivinhar que aquilo era um destino.

   Agora são PLACAS, com os seis estados desenhados:

     repouso    superfície, borda de 1px e a luz na aresta de cima
     ponteiro   sobe 2px, a sombra abre, a borda pega a cor da marca e o
                chevron desliza 5px
     pressão    volta a 1px de altura — o objeto cede sob o dedo, que é o que
                um objeto real faz
     foco       anel duplo: 2px na cor da marca e 4px do fundo por fora, de
                modo que ele apareça sobre plano claro E sobre plano escuro
     visitado   sem tratamento próprio, de propósito: documento jurídico é
                para ser lido de novo, e marcá-lo como "já visto" convida a
                não reler
     toque      a placa inteira é o alvo, com 44px de sobra em qualquer lado

   A elevação é a mesma das placas do diferencial e sobe um degrau no ponteiro.
   Duas sombras, nenhuma delas escura: uma de contato, curta e quase invisível,
   e uma de distância, longa e muito aberta. Sombra pesada é o que faz um
   cartão parecer adesivo colado na tela.

   O chevron continua desenhado com duas bordas giradas, e não escrito em
   `content`: uma seta em texto seria lida em voz alta pelo leitor de tela no
   meio do nome do documento.
   ========================================================================== */

.secao-documentos .cartoes {
  display: grid;
  row-gap: var(--esp-lg);
}

@media (min-width: 40rem) {
  .secao-documentos .cartoes {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--esp-lg);
  }
}

/* Terceiro item de uma grade de duas colunas: ocupa a linha inteira em vez de
   ficar órfão ao lado de um vazio do mesmo tamanho. Quem precisa de limite de
   medida é o texto, não o bloco. */
@media (min-width: 40rem) {
  .cartao-largo {
    grid-column: 1 / -1;
  }

  .secao-documentos .cartao-largo .cartao-descricao {
    max-width: var(--medida-larga);
  }
}

.cartoes a {
  position: relative;
  display: block;
  height: 100%;
  padding: 26px 26px 28px;
  background: var(--placa);
  border: 1px solid var(--placa-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--placa-sombra);
  text-decoration: none;
  color: var(--texto-primario);
  transition:
    transform var(--t-padrao) var(--e-entrada),
    box-shadow var(--t-padrao) var(--e-entrada),
    border-color var(--t-rapido) linear;
}

@media (min-width: 64rem) {
  .cartoes a {
    padding: 32px 32px 34px;
  }
}

.cartoes a:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primaria) 42%, var(--placa-borda));
  box-shadow: var(--placa-sombra-alta);
}

/* A pressão desfaz a elevação. Sem isto, clicar não devolve resposta nenhuma
   e a placa parece travada. */
.cartoes a:active {
  transform: translateY(0);
  box-shadow: var(--placa-sombra);
  transition-duration: var(--t-rapido);
}

/* Anel duplo. O externo é da cor do fundo da seção: é ele que garante que o
   anel apareça mesmo quando a placa encosta em outra placa, e que continue
   visível se a seção mudar de plano. */
.cartoes a:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 3px;
  box-shadow:
    var(--placa-sombra-alta),
    0 0 0 6px var(--fundo);
}

.cartao-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--ar-junto);
  font-family: var(--fonte-display);
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.18;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  letter-spacing: -0.008em;
  color: var(--primaria-escura);
}

@media (prefers-color-scheme: dark) {
  .cartao-titulo {
    color: var(--primaria);
  }
}

.cartao-titulo::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-padrao) var(--e-entrada);
}

.cartoes a:hover .cartao-titulo::after,
.cartoes a:focus-visible .cartao-titulo::after {
  transform: translateX(5px) rotate(45deg);
}

.cartao-descricao {
  display: block;
  max-width: var(--medida);
  font-size: clamp(15px, 1.35vw, 16.5px);
  line-height: 1.64;
  color: var(--texto-secundario-forte);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .cartoes a,
  .cartao-titulo::after {
    transition: none;
  }

  /* Sem transição, o salto de 2px vira um piscar: no modo de movimento
     reduzido quem responde ao ponteiro é a borda e a sombra, que não se
     movem. */
  .cartoes a:hover {
    transform: none;
  }

  .cartoes a:hover .cartao-titulo::after,
  .cartoes a:focus-visible .cartao-titulo::after {
    transform: rotate(45deg);
  }
}

/* --------------------------------------------------------------------------
   Cabeçalho e rodapé — a moldura acompanha o resto
   -------------------------------------------------------------------------- */

.pagina-inicio .cabecalho {
  background: var(--fundo);
  border-bottom-color: var(--fio);
}

.pagina-inicio .cabecalho .faixa {
  padding-top: 14px;
  padding-bottom: 14px;
}

.rodape {
  background: var(--fundo);
  border-top: 1px solid var(--fio);
  padding: var(--ar-bloco) 0 var(--esp-xxl);
  font-size: 15px;
  color: var(--texto-secundario-forte);
}

.faixa-rodape p {
  margin: 0 0 var(--esp-md);
}

.rodape-marca {
  font-family: var(--fonte-display);
  font-size: 18px;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  letter-spacing: -0.006em;
  color: var(--texto-primario);
}

.rodape ul {
  gap: var(--esp-lg);
  margin-bottom: var(--esp-lg);
}

.rodape a {
  color: var(--texto-secundario-forte);
  text-decoration: none;
}

.rodape a:hover {
  color: var(--primaria);
  text-decoration: underline;
}

.rodape-nota,
.rodape-ano {
  font-size: 13px;
  color: var(--texto-secundario-forte);
}

.rodape-ano {
  margin-bottom: 0;
}

/* ==========================================================================
   Camada de movimento
   --------------------------------------------------------------------------
   Toda em CSS. Nenhum efeito depende de script: o rodapé promete que esta
   página não executa código no navegador de quem lê, e é essa promessa que
   sustenta o argumento de privacidade do produto.

   Quatro regras governam tudo o que vem abaixo:

     1. o conteúdo é visível por padrão. Toda entrada usa `animation-fill-mode:
        backwards`, que aplica o quadro inicial apenas durante o atraso. Se a
        animação não rodar — falta de suporte, preferência do sistema, erro de
        rede no meio do CSS —, o que sobra é a página estática e inteira;
     2. só `opacity` e `transform` entram nos quadros-chave. As duas são
        resolvidas pelo compositor, sem recalcular layout: nada aqui empurra um
        pixel do que já foi desenhado;
     3. `prefers-reduced-motion: reduce` desliga tudo. Os blocos vivem dentro
        de `no-preference`, então a preferência não precisa desfazer efeito
        algum — ele nunca chega a existir;
     4. o que depende de recurso recente vive dentro de `@supports`. Quem não
        tem o recurso recebe a página como ela era: nada pisca, nada some.

   O deslocamento de entrada caiu de 14 para 10px. Numa página que agora
   separa assunto com espaço, um salto visível na revelação faria o espaço
   parecer erro de carregamento em vez de composição.
   ========================================================================== */

@keyframes surge-de-baixo {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}

@keyframes avanca-leitura {
  to {
    transform: scaleX(1);
  }
}

/* A assinatura da marca cedendo a linha à barra de progresso. Ver item 3. */
@keyframes recua-trilha {
  to {
    opacity: 0.55;
  }
}

@keyframes recua-trilha-escuro {
  to {
    opacity: 0.6;
  }
}

@keyframes condensa-cabecalho {
  to {
    background-color: var(--cabecalho-rolado);
    box-shadow: 0 8px 24px -16px var(--sombra-cabecalho);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
  }
}

@keyframes condensa-marca {
  to {
    transform: scale(0.9);
  }
}

/* --------------------------------------------------------------------------
   ITEM 1 — entrada em cascata no topo
   --------------------------------------------------------------------------
   Título, parágrafo, bloco de disponibilidade e captura, nesta ordem, 100 ms
   entre cada um. O selo de espera sobe junto com o título porque está colado
   nele: separá-los faria a linha de cima chegar sozinha e o título parecer
   atrasado.

   Não há tela de espera nem bloqueio de pintura. O CSS não adia nada: o
   navegador desenha a página no primeiro quadro e a animação apenas conduz os
   600 ms seguintes.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .selo-espera,
  .heroi h1,
  .heroi-resumo,
  .heroi-texto .lojas,
  .lojas-nota,
  .heroi-arte {
    animation: surge-de-baixo var(--t-entrada) var(--e-entrada) backwards;
  }

  .heroi-resumo {
    animation-delay: var(--t-passo);
  }

  .heroi-texto .lojas,
  .lojas-nota {
    animation-delay: calc(var(--t-passo) * 2);
  }

  .heroi-arte {
    animation-delay: calc(var(--t-passo) * 3);
  }
}

/* --------------------------------------------------------------------------
   ITEM 2 — revelação ao entrar na tela
   --------------------------------------------------------------------------
   O escalonamento é feito por `animation-range`, e não por `animation-delay`.
   Não é preferência: numa linha do tempo de progresso o atraso em
   milissegundos é ignorado pela especificação, porque não existe tempo —
   existe posição de rolagem.

   A cascata vale só onde há itens lado a lado: nas duas grades de duas colunas
   ela é o que faz a segunda coluna chegar depois da primeira. Nos momentos
   empilhados — problemas e capturas — não há cascata a fazer, porque cada um
   entra sozinho na tela; ali o escalonamento só atrasaria a leitura.

   O bloco inteiro está dentro de `@supports`: sem linha do tempo de rolagem, a
   regra não existe e o conteúdo fica onde sempre esteve, opaco e imóvel.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cartoes-beneficio > li,
    .galeria > li,
    .lista-franqueza > li,
    .secao-documentos .cartoes > li {
      animation-name: surge-de-baixo;
      animation-duration: auto;
      animation-timing-function: var(--e-entrada);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 4% entry 38%;
    }

    .lista-franqueza > li:nth-child(2),
    .secao-documentos .cartoes > li:nth-child(2) {
      animation-range: entry 12% entry 46%;
    }

    .lista-franqueza > li:nth-child(3),
    .secao-documentos .cartoes > li:nth-child(3) {
      animation-range: entry 8% entry 42%;
    }

    .lista-franqueza > li:nth-child(4) {
      animation-range: entry 16% entry 50%;
    }
  }
}

/* --------------------------------------------------------------------------
   ITEM 3 — barra de progresso de leitura
   --------------------------------------------------------------------------
   Fio de 3px no topo do cabeçalho, no gradiente da marca, ligado à rolagem da
   página. Nasce como pseudo-elemento do cabeçalho, e não como elemento novo,
   por dois motivos: não pede uma linha de HTML e não precisa de `position:
   fixed`, que criaria um bloco de contenção capaz de quebrar o `sticky` da
   captura.

   A barra ocupa a MESMA linha da assinatura da marca, e essa é a decisão que
   importa aqui. Na base do cabeçalho, o resultado medido na tela era um
   cabeçalho ensanduichado por dois fios de 3px do mesmo gradiente — o de cima
   cheio, o de baixo parando no meio. Quem não sabe o que é uma barra de
   progresso lê aquilo como fio quebrado, não como indicação de leitura.

   Fundidos, os dois viram uma coisa só: a assinatura ocupa o lugar de sempre e
   o progresso a preenche por cima. Uma linha, duas funções, nada competindo.

   A trilha não nasce esmaecida — ela RECUA. Nos mesmos 96px em que o cabeçalho
   condensa, a assinatura cai para 55% de opacidade e cede a linha ao
   progresso. Quem chega à página vê a marca inteira; quem já está lendo vê
   quanto falta.

   São três camadas na mesma faixa de 3px: a borda reserva o espaço, `::before`
   pinta a assinatura, `::after` pinta o progresso por cima — nesta ordem, que é
   a ordem natural de pintura dos pseudo-elementos. `top: -3px` alcança a faixa
   da borda, porque `position: absolute` mede a partir da caixa de preenchimento
   e a borda fica exatamente esses 3px acima.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* A borda deixa de pintar e passa a apenas reservar os 3px: quem pinta a
       assinatura, daqui em diante, é o `::before`, que sabe recuar. */
    .cabecalho {
      border-image: none;
    }

    .cabecalho::before,
    .cabecalho::after {
      content: "";
      position: absolute;
      inset: -3px 0 auto 0;
      height: 3px;
      background: var(--gradiente-marca);
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
    }

    /* Trilha: a assinatura da marca, que recua nos primeiros 96px. */
    .cabecalho::before {
      animation-name: recua-trilha;
      animation-range: 0 96px;
    }

    /* Progresso: acompanha a rolagem inteira da página. */
    .cabecalho::after {
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation-name: avanca-leitura;
    }
  }

  /* No escuro o gradiente da marca perde presença contra o fundo quase preto
     do cabeçalho: a trilha recua menos, para continuar sendo uma linha e não
     uma sombra. */
  @media (prefers-reduced-motion: no-preference) and (prefers-color-scheme: dark) {
    .cabecalho::before {
      animation-name: recua-trilha-escuro;
    }
  }
}

/* --------------------------------------------------------------------------
   ITEM 4 — cabeçalho que condensa ao rolar
   --------------------------------------------------------------------------
   Nos primeiros 96px de rolagem o cabeçalho troca o fundo opaco por um fundo
   translúcido com desfoque, ganha sombra rasa e a marca recolhe para 90%.

   O que ele NÃO faz é encolher a própria altura, e isso é deliberado. Um
   cabeçalho `sticky` ocupa espaço no fluxo: reduzir o seu preenchimento
   empurra a página inteira para cima a cada quadro dos primeiros 96px —
   deslocamento de layout real e recálculo em toda a árvore enquanto dura. A
   condensação aqui é composta: a altura de layout é a mesma antes e depois.

   O fundo translúcido usa o tom da própria página, e não branco: com o
   cabeçalho passando a acompanhar o fundo em repouso, um branco a 90% ao
   rolar faria a faixa clarear em vez de condensar.

   As cores do texto do cabeçalho mudam junto, e o motivo é medido. Com o fundo
   a 88% e a moldura escura de uma captura passando por trás, o cinza de
   navegação de repouso cai para 3,88:1 e o azul da marca para 4,22:1 — os dois
   abaixo do mínimo AA. Um tom acima em cada um resolve: a navegação vai para
   5,06:1 e a marca para 5,75:1, ambos no pior fundo possível. No tema escuro
   nada precisa mudar: o pior caso já é 5,35:1.
   -------------------------------------------------------------------------- */

:root {
  --cabecalho-rolado: rgba(248, 250, 252, 0.88);
  --sombra-cabecalho: rgba(15, 23, 42, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cabecalho-rolado: rgba(15, 23, 42, 0.88);
    --sombra-cabecalho: rgba(0, 0, 0, 0.75);
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cabecalho {
      animation-name: condensa-cabecalho;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 96px;
    }

    .marca {
      transform-origin: left center;
      animation-name: condensa-marca;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 96px;
    }

    .navegacao a {
      color: var(--texto-secundario-forte);
    }

    .marca,
    .marca-nome {
      color: var(--primaria-escura);
    }
  }

  @media (prefers-reduced-motion: no-preference) and (prefers-color-scheme: dark) {
    /* No escuro os tons de repouso já passam sobre o fundo a 88%: escurecer
       aqui só reduziria o contraste. */
    .navegacao a {
      color: var(--texto-secundario);
    }

    .marca,
    .marca-nome {
      color: var(--primaria);
    }
  }
}

/* --------------------------------------------------------------------------
   ITEM 7 — transição entre páginas
   --------------------------------------------------------------------------
   Vale para as cinco páginas do site, porque todas carregam esta mesma folha.
   Sem suporte, a navegação acontece como sempre aconteceu: o navegador troca o
   documento e pronto. Não há estado intermediário para dar errado.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* --------------------------------------------------------------------------
   ITEM 8 — números de largura fixa
   --------------------------------------------------------------------------
   Nas tabelas dos documentos jurídicos os prazos aparecem em coluna, um
   embaixo do outro: com dígitos de largura variável as unidades desalinham e a
   coluna parece tremida. `tabular-nums` iguala a largura de todo dígito.

   Fica restrito à tabela e às células alinhadas à direita de propósito. Em
   texto corrido o dígito de largura fixa abre buracos no meio da frase.
   -------------------------------------------------------------------------- */

.documento table,
.alinha-right {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Impressão — o revisor da loja e o jurídico costumam salvar em PDF
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Alto contraste do sistema
   --------------------------------------------------------------------------
   Quando a pessoa liga o modo de alto contraste, quem escolhe as cores é o
   sistema — e o navegador desenha uma placa opaca atrás de todo texto que
   estiver sobre imagem de fundo, para garantir a leitura. Com os três planos
   escuros da página inicial, o resultado eram blocos brancos recortados no
   meio de um fundo escuro que continuava lá: legível, e feio.

   O fundo sai. Sobra o par Canvas/CanvasText que a pessoa configurou, que é
   exatamente o que ela pediu ao ligar o modo. A faixa entre o argumento e a
   prova some junto: sem a arte ela é uma barra de cor, e cor não é o que essa
   pessoa está vendo.
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .heroi,
  .chamada-final,
  .chamada-final::before {
    background-image: none;
  }

  .heroi {
    --texto-primario: CanvasText;
    --texto-secundario-forte: CanvasText;
    --texto-terciario: CanvasText;
    --fio: CanvasText;
  }

  .chamada-final {
    color: CanvasText;
  }

  .heroi::after,
  .chamada-final::after,
  .transicao-caos-ordem {
    display: none;
  }

  /* No modo de alto contraste o sistema já desenha borda em tudo o que tem
     superfície. A da placa vira uma segunda borda por dentro da do sistema —
     duas linhas onde o desenho pediu uma. */
  .lista-franqueza > li,
  .cartoes a {
    box-shadow: none;
  }
}

@media print {
  /* O papel não rola. Sem esta regra, todo elemento preso a uma linha do tempo
     de rolagem seria impresso no seu quadro inicial — isto é, transparente — e
     o PDF que o revisor da loja arquiva sairia com metade da página em branco. */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .cabecalho,
  .rodape,
  .sumario,
  .pular-para-conteudo {
    display: none;
  }

  body {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
  }

  .documento {
    max-width: none;
    padding: 0;
  }

  .tabela-rolagem {
    overflow: visible;
    box-shadow: none;
  }

  .documento table {
    min-width: 0;
  }

  a {
    color: #000000;
  }

  /* A página inicial impressa não gasta tinta com fundo: vira documento. Os
     tokens invertidos do topo voltam ao valor de papel na mesma regra — sem
     isso, o nome de cada loja sairia em branco sobre branco. */
  .heroi,
  .secao-alternada,
  .chamada-final {
    background: none;
    color: #000000;
  }

  .heroi {
    --texto-primario: #000000;
    --texto-secundario-forte: #000000;
    --texto-terciario: #666666;
    --fio: #999999;
  }

  /* `background: none` acima não alcança pseudo-elemento: sem estas linhas o
     grão do topo, o halo da chamada final e o fio de luz da aresta iriam para
     o papel.

     A ausência do halo era um defeito real e não teórico: `mix-blend-mode:
     screen` sobre fundo branco clareia tudo o que estiver por baixo, e o
     título e os dois parágrafos da chamada final saíam apagados na folha —
     justamente a página que o revisor da loja e o jurídico arquivam em PDF. */
  .heroi::after,
  .chamada-final::before,
  .chamada-final::after {
    display: none;
  }

  /* As placas viram texto no papel: superfície e sombra gastam tinta e não
     dizem nada em uma folha. Fica a regra de 1px, que é o que separa um bloco
     do outro quando não há cor. */
  .lista-franqueza > li,
  .cartoes a {
    background: none;
    border: 0;
    border-top: 1px solid #999999;
    border-radius: 0;
    box-shadow: none;
    padding: 8pt 0 0;
  }

  .cartao-titulo,
  .lista-franqueza h3,
  .galeria figcaption strong {
    color: #000000;
  }

  /* O chevron indica um destino que não existe no papel. */
  .cartao-titulo::after {
    display: none;
  }

  /* O algarismo do problema é ornamento de tela: em 8% de opacidade ele sai
     como uma mancha cinza atrás do ícone. */
  .beneficio-icone::before {
    display: none;
  }

  /* O deslocamento lateral da prova não tem para onde ir numa folha. */
  .galeria > li:nth-child(odd) figure,
  .galeria > li:nth-child(even) figure {
    transform: none;
    margin-inline: 0;
  }

  /* A faixa entre o argumento e a prova é sinal, não conteúdo: no papel ela
     seria uma tarja escura de 200px sem nada dentro. */
  .transicao-caos-ordem {
    display: none;
  }

  .secao,
  .chamada-final {
    padding: 24pt 0;
  }

  /* O segundo parágrafo precisa do seletor de irmão adjacente e não de
     `.chamada-resumo` só: na tela ele é branco a 72% por uma regra de
     especificidade maior, e sem repetir a mesma forma aqui ele saía branco
     sobre branco no papel — invisível. */
  .chamada-final h2,
  .chamada-resumo,
  .chamada-resumo + .chamada-resumo,
  .lojas-invertidas .loja-nome,
  .lojas-invertidas .loja-estado {
    color: #000000;
  }

  /* Os selos sem a moldura viram duas palavras soltas no pé da folha. */
  .loja,
  .lojas-invertidas .loja {
    background: none;
    border: 1px dashed #999999;
    box-shadow: none;
  }

  .selo-espera {
    background: none;
    border: 1px solid #999999;
    box-shadow: none;
  }

  .aparelho {
    background: none;
    box-shadow: none;
    padding: 0;
  }
}