/* Base, layout e componentes do site. Cores somente por token (tokens.css).
   Transparência sai de color-mix sobre o token — nunca de um rgb() escrito à mão,
   que duplicaria o valor da cor e sairia do lugar na primeira troca de paleta. */

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

html { scroll-behavior: smooth; }

/* Âncora não pode parar embaixo do cabeçalho fixo */
[id] { scroll-margin-top: calc(var(--altura-cabecalho) + var(--espaco-3)); }

::selection {
    background-color: var(--cor-menta);
    color: var(--cor-tinta);
}

/* Coluna de altura mínima da janela, para o rodapé encostar embaixo em página
   curta. Sem isto, `/entrar` e as outras telas de formulário deixam o rodapé
   parado no meio, com vazio abaixo — parece página que não terminou de carregar,
   e acontece justamente onde a pessoa decide se cria conta. */

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* O CHÃO DESCE PARA `--cor-noite` — onda 3, 29/09/2026. Na onda 1 ele
       tinha descido para `--cor-fundo`, quatro pontos abaixo do navy oficial;
       agora desce mais um degrau e fica azulado, para a luz fria da página ter
       contra o que brilhar. O navy continua sendo `--cor-navy-superficie` em
       cartão, faixa e tabela. Um token, e voltar atrás é trocar esta linha. */
    background-color: var(--cor-noite);
    /* O CONE DE LUZ NO TOPO — onda 3, no lugar da aurora da onda 2. Os dois
       brilhos de menta e violeta viram um só, azul-gelo, descendo do meio da
       barra: é a mesma luz que a home tem atrás do aparelho, e toda página abre
       debaixo dela. Sem repetição, a rolagem o deixa para trás. */
    background-image:
        radial-gradient(70rem 40rem at 50% -16rem, color-mix(in srgb, var(--cor-luz-media) 18%, transparent), transparent 70%);
    background-repeat: no-repeat;
    color: var(--cor-branco-gelo);
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-corpo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* O conteúdo ocupa a sobra; o rodapé fica no fim. O `min-width: 0` evita que
   um filho largo — a tabela de planos — estique a coluna e reintroduza rolagem
   horizontal. */

/* O cabeçalho é fixo desde a onda 3, e o `main` devolve a altura dele: sem
   isto, o topo de toda página nasceria debaixo da barra. A home é a única que
   sobe por baixo dela, de propósito, e desfaz isto no próprio herói. */
main {
    flex: 1;
    min-width: 0;
    padding-top: var(--altura-cabecalho);
}

/* O TÍTULO PERDE PESO E GANHA APERTO — onda 3, 29/09/2026. A Poppins a 500,
   com a letra mais junta, dá ao título o desenho de marca em vez do de
   cartaz: a 700 ele gritava ao lado de um corpo que agora é mais claro. */
h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: var(--cor-branco-gelo);
}

h1 { font-size: var(--tamanho-destaque); }
h2 { font-size: var(--tamanho-tela); }
h3 { font-size: var(--tamanho-secao); }

/* Título grande em Poppins pede a letra um pouco mais junta: com o espaço de
   fábrica, a 52 px, as palavras parecem soltas umas das outras. */
h1, h2 { letter-spacing: -0.04em; }
h3 { letter-spacing: -0.02em; }

p { margin: 0; }

a {
    color: var(--cor-menta);
    text-decoration: none;
}

a:hover { color: var(--cor-gradiente-topo); }

:focus-visible {
    outline: 2px solid var(--cor-menta);
    outline-offset: 3px;
}

/* PULAR PARA O CONTEÚDO.

   Escondido por deslocamento, e nunca por `display: none` nem
   `visibility: hidden`: qualquer um dos dois o tiraria da ordem de
   tabulação, matando o atalho justamente para quem ele existe.

   `z-index` acima do 50 do cabeçalho, que é fixo e passaria por cima. */

.pular-para-conteudo {
    position: fixed;
    left: var(--espaco-2);
    top: var(--espaco-2);
    z-index: 60;
    padding: var(--espaco-1) var(--espaco-2);
    border-radius: var(--raio-pilula);
    background-color: var(--cor-branco-gelo);
    color: var(--cor-noite);
    font-family: var(--fonte-titulo);
    font-weight: 500;
    text-decoration: none;
    transform: translateY(calc(-100% - var(--espaco-3)));
}

.pular-para-conteudo:focus {
    transform: none;
}

.pular-para-conteudo:hover {
    color: var(--cor-noite);
}

/* O cabeçalho grudento cobriria o topo do conteúdo depois do salto. */

main {
    scroll-margin-top: 5rem;
}

.conteudo {
    width: 100%;
    max-width: var(--largura-conteudo);
    margin-inline: auto;
    padding-inline: var(--espaco-3);
}

.secao {
    padding-block: var(--espaco-12);
}

.secao--superficie {
    background-color: var(--cor-navy-superficie);
    /* O filete de luz no topo da faixa: a troca de chão para superfície ganha
       uma linha de sinal, em vez de acontecer calada. */
    background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cor-sinal) 30%, transparent) 50%, transparent);
    background-size: 100% 1px;
    background-repeat: no-repeat;
}

/* A GRADE DO HERÓI EM TODA PÁGINA — onda 2, 28/09/2026. A primeira seção de
   cada página ganha a mesma grade de 48 px da home, esmaecendo a partir do
   topo. A home já tem a dela no `.abertura`, e fica de fora. */
main > .secao:first-child:not(.abertura) {
    position: relative;
    isolation: isolate;
}

main > .secao:first-child:not(.abertura)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent) 1px, transparent 1px);
    background-size: var(--espaco-6) var(--espaco-6);
    mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent 80%);
    pointer-events: none;
}

/* RITMO VERTICAL — três alturas, e não uma.

   Até 02/09/2026 toda seção media 96px em cima e embaixo. Uma seção que só
   tinha o cabeçalho de abertura somava 96 de fundo + 48 da margem do próprio
   cabeçalho + 96 do topo da seguinte: 240px de nada entre o subtítulo e o
   primeiro assunto, medidos em /o-aplicativo. Espaçamento único é a
   assinatura de site montado por gerador — tudo pesa igual, então nada pesa.

   Abertura: a seção que só apresenta a página. Fecha mais perto, e o
   cabeçalho perde a margem de fundo QUANDO é o último filho — um cabeçalho
   seguido de conteúdo na mesma seção continua com a margem dele.

   Apertada: a seção que vem logo depois de uma abertura, e é continuação
   dela. As duas juntas dão 96px, o mesmo respiro de uma seção só.

   Respirada: só para a virada de assunto — a única que merece mais ar. */

/* O TOPO DA ABERTURA CEDE 32 PX EM 21/09/2026, e é a mesma razão que já
   justificava o fundo mais curto: abertura fecha mais perto. Só que o topo
   dela não encosta no nada, encosta no cabeçalho, que é fixo e tem 65 px. Os
   96 originais vinham da régua de uma seção do meio da página, onde acima há
   conteúdo. Aqui acima há barra. */
.secao--abertura {
    padding-top: var(--espaco-8);
    padding-bottom: var(--espaco-6);
}

/* No celular o herói começa mais perto do cabeçalho: os 64 px de cima eram um
   vão antes do selo, e empurravam o botão para o fim da primeira tela. */
@media (max-width: 40rem) {
    .secao--abertura { padding-top: var(--espaco-4); }
}

/* Com o cabeçalho fixo, a abertura que abre a página sobe por baixo dele e
   leva o fundo junto. Sem isto, o fundo começava onde o cabeçalho acaba, e a
   borda dele aparecia como uma costura no topo de toda página ainda não
   portada. O padding devolve a distância, e o texto fica onde estava. */
main > .abertura:first-of-type {
    margin-top: calc(-1 * var(--altura-cabecalho));
    padding-top: calc(var(--altura-cabecalho) + var(--espaco-8));
}

@media (max-width: 40rem) {
    main > .abertura:first-of-type { padding-top: calc(var(--altura-cabecalho) + var(--espaco-4)); }
}

.secao--abertura > .conteudo > .cabecalho-secao:last-child {
    margin-bottom: 0;
}

.secao--apertada {
    padding-top: var(--espaco-6);
}

.secao--respirada {
    padding-block: calc(var(--espaco-12) + var(--espaco-4));
}

.texto-secundario {
    color: var(--cor-cinza-nevoa);
}

.legenda {
    font-size: var(--tamanho-legenda);
    color: var(--cor-cinza-nevoa);
}

/* LEGENDA PRECISA DE VÃO, e ela aparece depois de tudo: parágrafo, formulário,
   tabela, lista, vídeo. Colada no que comenta, ela parece a última linha
   daquilo em vez de um comentário sobre aquilo. O seletor é a adjacência, e não
   a classe: legenda que abre um bloco não ganha vão nenhum, porque não há de
   que se afastar. */
* + .legenda {
    margin-top: var(--espaco-1);
}

/* Depois de caixa com borda, o dobro. Oito pixels contra uma régua de um pixel
   continuam parecendo encostados: a borda ocupa visualmente o espaço do vão. */
.tabela-envoltorio + .legenda,
form + .legenda,
.cartao + .legenda {
    margin-top: var(--espaco-2);
}

/* Botões — §4 */

/* O BOTÃO VIRA PÍLULA — onda 1 da revisão de 18/09/2026.

   Três mudanças, e nenhuma é enfeite. O raio vai de 8 px para pílula, que é o
   que separa o botão do cartão e do campo num site em que tudo tem o mesmo
   canto de 8. A altura vai de 40 para 48 px, que é o alvo de toque confortável
   no celular, onde metade das visitas acontece. E o peso vai de 500 para 700,
   porque o rótulo do botão é a única frase da página que precisa ser lida
   antes de ser procurada.

   O `min-height` de 48 vale também para o botão da barra, que é o mesmo
   `.botao` e continua cabendo nos 64 px do cabeçalho.

   O RÓTULO VOLTA AO SEGOE, A 600 — onda 3, 29/09/2026. Com o título da página
   em Poppins 500, o botão em Poppins 700 era o texto mais pesado da tela e
   brigava com ele; em Segoe seminegrito ele continua sendo lido antes de ser
   procurado, sem gritar. */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-1);
    min-height: 48px;
    padding-inline: var(--espaco-3);
    border-radius: var(--raio-pilula);
    border: 1px solid transparent;
    font-family: var(--fonte-corpo);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 220ms ease, border-color 180ms ease;
}

.botao:hover { transform: translateY(-2px); }

.botao:active { transform: none; }

/* A MARGEM NEGATIVA CANCELA O `gap` PARA ESTE FILHO — 15/09/2026.

   O complemento do rótulo vem com um espaço que não quebra dentro dele, porque
   o espaço entre "Baixar" e "grátis" é texto: é ele que o leitor de tela
   anuncia e é ele que vai junto quando alguém copia. Só que um <span> dentro de
   um flex vira filho, e filho recebe o `gap` de 8 px do `.botao`. Os dois
   somados davam 13 px de buraco no meio do rótulo, contra os 5 px dos botões
   que dizem tudo num texto só.

   Tirar o `gap` do `.botao` não serve: ele é o que separa ícone de rótulo nos
   outros botões. Desligá-lo aqui, e só aqui, é o que sobra. Os dois valores
   saem do mesmo token, então eles não se desencontram. */

.botao__complemento {
    margin-inline-start: calc(var(--espaco-1) * -1);
}

/* O rótulo curto do botão de download só existe no cabeçalho do telefone
   (BotaoDeDownload), e em todo o resto fica fora da tela e da leitura. */
.botao__rotulo-curto { display: none; }

/* O BOTÃO PRINCIPAL FICA BRANCO — onda 3, 29/09/2026, decisão do dono.

   Revoga a regra da onda 2, de que a menta era a cor da ação. Num chão quase
   preto o branco é o que mais se destaca sem precisar de cor, e a luz fria em
   volta dele é a mesma do resto da página. A menta sai do botão e fica com o
   que confirma: o ponto do selo, o visto, o passo registrado.

   O BRILHO FICA EM REPOUSO, pela razão de antes: quem decide se clica não
   passou o mouse ainda, e no celular não passa nunca. */
.botao--primario {
    background-color: var(--cor-branco-gelo);
    color: var(--cor-noite);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cor-branco-gelo) 60%, transparent),
        0 10px 36px -10px color-mix(in srgb, var(--cor-luz) 75%, transparent);
}

.botao--primario:hover {
    background-color: var(--cor-branco-gelo);
    color: var(--cor-noite);
    box-shadow:
        0 0 0 1px var(--cor-branco-gelo),
        0 16px 48px -10px color-mix(in srgb, var(--cor-luz) 95%, transparent);
}

/* O SECUNDÁRIO DEIXA DE SER MENTA — onda 1 da revisão de 18/09/2026.

   Dois botões de menta lado a lado é o desenho que faz os dois perderem: a
   página inteira usa menta para "clique aqui", e quando o caminho secundário
   também é menta, não sobra nada dizendo qual é o principal. Medido no olho em
   cinco páginas, `/precos`, `/baixar`, a home, `/o-aplicativo` e a chamada
   final: em todas as duas ações competiam.

   Contorno neutro e texto branco resolvem sem esconder o botão: ele continua
   sendo um controle óbvio, e a menta volta a significar uma coisa só. */
.botao--secundario {
    /* VIDRO — onda 2, 28/09/2026, e mais claro na onda 3: o fundo desce de
       cima para baixo, como vidro pegando luz, com o brilho de dentro. */
    background-color: transparent;
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--cor-branco-gelo) 7%, transparent), color-mix(in srgb, var(--cor-branco-gelo) 2%, transparent));
    border-color: var(--borda-vidro-forte);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 4px 10px color-mix(in srgb, var(--cor-branco-gelo) 10%, transparent);
    color: var(--cor-branco-gelo);
}

.botao--secundario:hover {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--cor-branco-gelo) 12%, transparent), color-mix(in srgb, var(--cor-branco-gelo) 4%, transparent));
    border-color: color-mix(in srgb, var(--cor-branco-gelo) 34%, transparent);
    color: var(--cor-branco-gelo);
}

/* Botão desabilitado continua legível: o cinza do navegador some no fundo
   escuro, e um botão que sumiu não explica por que não dá para clicar. Quem
   desabilita sempre escreve ao lado o motivo.

   E NÃO BRILHA NEM SOBE, desde a onda 3 (30/09/2026): o brilho do primário e
   o salto do cursor dizem "clique aqui", e é justamente o que ele não aceita.
   Hoje o único é o de enviar convite em /equipe, com os assentos cheios. */

.botao:disabled,
.botao[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Dois caminhos lado a lado, sem hierarquia de hero. Quebra em coluna no
   celular pela mesma razão de sempre: botão espremido não se acerta. */

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
}

/* DOIS CAMINHOS, CADA UM COM A SUA LINHA — /baixar, 18/09/2026.

   Não é `.acoes`: ali os botões são irmãos numa fileira, e aqui cada um leva
   junto a frase que diz para quem ele serve. Empilhado e não em duas colunas
   porque a coluna desta página tem 34 rem: lado a lado, "Baixar o instalador ·
   86 MB" não caberia em 260 px e o rótulo quebraria no meio.

   `justify-items: start` mantém o botão do tamanho do texto. Botão esticado na
   largura da coluna vira barra, e barra não se lê como escolha.

   O NOME NÃO É `.escolha`, e a primeira versão foi: esta folha já tem
   `.escolha` e `.escolhas` em dois lugares, a ficha de opção única do painel
   de administração e a de vestir faixa. As duas vêm depois na folha, então
   venciam as minhas, e a página saiu com os dois botões em colunas espremidas
   e o texto de cada um ao lado dele numa tira de 60 px. Numa folha de 3.900
   linhas, nome novo se confere antes de escrever. */
.baixada {
    display: grid;
    gap: var(--espaco-3);
    margin-top: var(--espaco-3);
}

.baixada__opcao {
    display: grid;
    gap: var(--espaco-1);
    justify-items: start;
    align-content: start;
}

.baixada__nota {
    max-width: 44ch;
}

/* Cabeçalho e rodapé */

/* O CABEÇALHO FICA FIXO E GANHA VIDRO — onda 3, 29/09/2026.

   Fixo, e não mais grudento: o herói da home sobe por baixo dele, e a luz de
   cima passa pela barra em vez de parar nela. Quem devolve a altura da barra
   às outras páginas é o `main`, com o mesmo token.

   O VIDRO É O PADRÃO, e a transparência é o enfeite. Sem script a barra é
   sempre vidro, e o que rola por baixo dela nunca atrapalha a leitura do
   menu; com script, o animacoes.js tira o vidro enquanto a página está no
   topo, que é quando não há nada passando por baixo (AGENTS.md §Movimento:
   JavaScript é decorativo, nunca funcional).

   O FILETE DE ESPECTRO DO TOPO SAIU junto (`.faixa-marca`, da onda 2): com a
   barra fixa por cima ele ficava escondido, e a luz de cima faz o papel dele. */
.cabecalho {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: 50;
    border-bottom: 1px solid var(--borda-vidro);
    background-color: color-mix(in srgb, var(--cor-noite) 72%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
}

/* A transição só vale depois que o animacoes.js fez a primeira troca. */
.cabecalho--pronto { transition: background-color 400ms ease, border-color 400ms ease; }

.cabecalho--no-topo {
    border-bottom-color: transparent;
    background-color: transparent;
    backdrop-filter: none;
}

.cabecalho__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-3);
    min-height: var(--altura-cabecalho);
}

/* Logo oficial do kit, sem recorte nem recoloração — §5 do DESIGN-SYSTEM.md.
   Toda a página tem fundo navy, logo a variante correta é a `escuro-pt`. Ele
   desce de 44 para 32 px de altura: com a navegação no meio da barra, o logo
   deixa de ser o maior peso dela. */
.cabecalho__logo {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.cabecalho__logo img {
    display: block;
    height: 32px;
    width: auto;
}

/* A navegação no meio, em pílulas que acendem no passar do mouse. */
.cabecalho__nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* `nowrap` para o item da barra não partir em duas linhas. Ele não impede a
   barra de faltar espaço; impede que a falta apareça como "O / aplicativo",
   que é o sintoma de um estrago em outro lugar disfarçado de item de menu. */
.cabecalho__nav a,
.cabecalho__entrar {
    padding: var(--espaco-1) 14px;
    border-radius: var(--raio-pilula);
    color: var(--cor-corpo);
    font-size: 0.9375rem;
    white-space: nowrap;
    transition: color 180ms ease, background-color 180ms ease;
}

.cabecalho__nav a:hover,
.cabecalho__entrar:hover {
    color: var(--cor-branco-gelo);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 5%, transparent);
}

.cabecalho__acoes {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
}

/* Sair é um formulário para ser POST, mas na barra ocupa o lugar de um botão */
.cabecalho__saida {
    display: inline-flex;
    margin: 0;
}

/* O botão da barra é o `.botao` de sempre, mais baixo: 40 px, e não 48. A
   área de toque do telefone continua de 44 no Menu ao lado. */
.cabecalho .botao {
    min-height: 40px;
    padding-inline: 18px;
    font-size: 0.875rem;
}

/* Menu do celular — some no desktop, onde a barra cabe inteira. */

.menu-movel {
    display: none;
    position: relative;
}

/* O MENU ACOMPANHA O BOTÃO — onda 1 de 18/09/2026. Duas coisas: a pílula, para
   ele e o "Baixar" ao lado não se lerem como controles de sistemas diferentes,
   e a altura de 44 px, que é o alvo de toque mínimo. Ele tinha 6 px de recuo
   vertical, o que dava cerca de 34: abaixo do alvo, e é o único controle de
   navegação que existe no celular. Na onda 3 ele veste o mesmo vidro do
   botão secundário. */
.menu-movel__botao {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--espaco-2);
    border-radius: var(--raio-pilula);
    border: 1px solid var(--borda-vidro-forte);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--cor-branco-gelo) 7%, transparent), color-mix(in srgb, var(--cor-branco-gelo) 2%, transparent));
    color: var(--cor-branco-gelo);
    font-size: 0.875rem;
    font-weight: 600;
    user-select: none;
}

/* O triângulo padrão do <summary>, que o Safari desenha por conta própria. */
.menu-movel__botao::-webkit-details-marker { display: none; }

.menu-movel[open] .menu-movel__botao {
    border-color: color-mix(in srgb, var(--cor-menta) 55%, transparent);
    color: var(--cor-menta);
}

/* A lista abre POR CIMA da página, e não empurrando-a: o cabeçalho é fixo, e
   um menu que empurrasse o conteúdo moveria a página inteira sob o dedo.
   Ancorada no próprio Menu, à direita, ela cresce para a esquerda. */

/* Declarar `display` num filho de <details> ANULA o fechamento nativo: o
   navegador esconde os filhos do <details> fechado por display, e uma regra do
   autor vence a dele. Sem as duas linhas abaixo o painel fica desenhado mesmo
   fechado — media 375 px e a página rolava 35 px para o lado. */

.menu-movel__lista { display: none; }

.menu-movel[open] .menu-movel__lista {
    position: absolute;
    right: 0;
    top: calc(100% + var(--espaco-1));
    display: grid;
    gap: 4px;
    min-width: 14rem;
    padding: var(--espaco-1);
    border-radius: var(--raio-modal);
    border: 1px solid var(--borda-vidro-forte);
    background: var(--material-cartao);
    box-shadow: var(--sombra-funda);
}

.menu-movel__lista a {
    padding: 12px 14px;
    border-radius: var(--raio-cartao);
    color: var(--cor-corpo);
    text-decoration: none;
}

.menu-movel__lista a:hover {
    color: var(--cor-branco-gelo);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 5%, transparent);
}

/* O RODAPÉ POUSA NUM ARCO DE LUZ — onda 3, 29/09/2026. O horizonte que fecha
   toda página: um círculo enorme, só a borda de cima à vista, com a luz
   subindo dele. É pseudoelemento, e não conteúdo, e o `overflow` corta o que
   passa das beiradas. Os 240 px embaixo são o palco do arco. */
.rodape {
    position: relative;
    overflow: hidden;
    padding-block: var(--espaco-6) 240px;
    color: var(--cor-corpo);
}

.rodape::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -800px;
    width: 1800px;
    height: 1000px;
    translate: -50% 0;
    border-radius: 50%;
    border-top: 1px solid color-mix(in srgb, var(--cor-luz-gelo) 90%, transparent);
    background: radial-gradient(50% 50% at 50% 50%, transparent 60%, color-mix(in srgb, var(--cor-luz-media) 20%, transparent));
    box-shadow:
        0 -30px 80px -10px color-mix(in srgb, var(--cor-luz) 70%, transparent),
        0 -100px 200px -20px color-mix(in srgb, var(--cor-luz-media) 45%, transparent),
        inset 0 30px 80px -20px color-mix(in srgb, var(--cor-luz) 50%, transparent);
    pointer-events: none;
}

.rodape > .conteudo {
    position: relative;
    z-index: 1;
}

/* OS VÍNCULOS DO RODAPÉ NO TOM DO CORPO, e brancos no passar do mouse. A
   menta é o "clique aqui" do site, e no rodapé ela gritava mais que a chamada
   logo acima (onda 2); na onda 3 nem o branco fica em repouso. */
.rodape a {
    color: var(--cor-corpo);
    transition: color 180ms ease;
}

.rodape a:hover { color: var(--cor-branco-gelo); }

.rodape__logo {
    display: block;
    height: 30px;
    width: auto;
}

/* Quatro colunas que viram duas no tablete e uma no celular, sozinhas. A
   primeira é mais larga porque leva a marca e as duas frases; as outras três
   são listas curtas. */

.rodape__colunas {
    display: grid;
    gap: var(--espaco-6) var(--espaco-4);
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    align-items: start;
}

.rodape__colunas > :first-child .legenda { max-width: 34ch; }

@media (max-width: 60rem) {
    .rodape__colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rodape__colunas > :first-child { grid-column: 1 / -1; }
}

/* NO TELEFONE, DUAS COLUNAS, E "FALAR COM A GENTE" NA LINHA PRÓPRIA. Ela leva
   dois e-mails longos, e meia tela os cortava; "O produto" e "Legal" ficam lado
   a lado. */
@media (max-width: 40rem) {
    .rodape { padding-bottom: 232px; }
    .rodape::after { width: 1000px; bottom: -820px; }
    .rodape__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rodape__colunas > :nth-child(3) { grid-column: 1 / -1; order: 3; }
}

.rodape__grupo {
    display: grid;
    gap: 12px;
    align-content: start;
    font-size: 0.9375rem;
}

/* O TÍTULO DE COLUNA é etiqueta: ninguém lê "O PRODUTO", as pessoas usam a
   palavra para achar o grupo de links embaixo. Na onda 3 ele volta à Poppins,
   em caixa alta, e fica branco: é o único branco em repouso do rodapé, e é o
   que separa os grupos. */
.rodape__titulo {
    margin-bottom: var(--espaco-1);
    font-family: var(--fonte-titulo);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cor-branco-gelo);
}

/* A identificação da empresa fecha o rodapé, separada por um filete: ela é
   dado cadastral, e não navegação — misturá-la com os links faria o leitor
   procurar link onde há CNPJ. */

.rodape__identificacao {
    margin-top: var(--espaco-8);
    padding-top: var(--espaco-3);
    border-top: 1px solid var(--borda-vidro);
    color: var(--cor-cinza-fraco);
}

/* O HERÓI ANTIGO SAIU NA ONDA 3 (29/09/2026): `.hero`, `.hero__selo` e o
   `.destaque-espectro` eram só da home, que ganhou o `.heroi` no fim da folha.
   Ficou o `.hero__acoes`, que as chamadas das outras páginas usam. */

.hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
    margin-top: var(--espaco-1);
}

/* Abertura: brilho ambiente, azul-gelo desde a onda 3. Toda cor sai de token, diluída por
   color-mix — nenhum hex novo. A menta só ilumina o navy, nunca o substitui
   como fundo (§1, regra de dominância). */

.abertura {
    position: relative;
    isolation: isolate;
    background-image:
        radial-gradient(58% 62% at 82% 10%, color-mix(in srgb, var(--cor-luz-media) 16%, transparent), transparent 72%),
        radial-gradient(42% 48% at 2% 2%, color-mix(in srgb, var(--cor-luz) 8%, transparent), transparent 70%);
}

/* Grade de fundo em pseudoelemento, para a máscara desvanecer só a grade e
   nunca o conteúdo. O passo é o da grade de 8 px (48 px = 6 unidades). */

.abertura::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent) 1px, transparent 1px);
    background-size: var(--espaco-6) var(--espaco-6);
    mask-image: radial-gradient(75% 90% at 60% 8%, black, transparent 82%);
}

/* A GRADE DA ABERTURA ANTIGA (`.abertura__grade`), a de duas colunas com o
   sumário ou a imagem ao lado do título, saiu em 30/09/2026 com o porte das
   páginas legais, as últimas que a usavam: as páginas portadas abrem na
   `.abertura-pagina`, centrada, e o índice desceu para o lado do texto. */

/* A moldura da `.vitrine` (fundo, borda, sombra e recorte) saiu na onda 3,
   quando /o-aplicativo, a única página que a usa, foi portada: quem emoldura a
   captura agora é a `.tela-em-vidro`, no bloco das páginas internas, no fim da
   folha. Ficam aqui as duas regras de sempre, a margem e a imagem. */


/* A INCLINAÇÃO 3D SAIU EM 15/09/2026, junto com o reel.

   A vitrine ficava com `rotateX(4deg) rotateY(-8deg)` e se endireitava sob o
   mouse. Aquilo é o gesto de maquete flutuando no espaço, e ele tem um custo
   que só aparece contando as camadas: o conteúdo já é a captura de uma janela,
   dentro de um cartão com borda e sombra, e a inclinação era a terceira moldura
   em cima das outras duas. Era o "janela dentro de outra janela" que o dono
   reprovou em 09/09/2026, reaparecendo pelo CSS em vez de pelo vídeo.

   Uma captura de tela não precisa fingir que é um objeto. O que ela precisa é
   de uma borda que diga onde ela começa, que é o que sobrou aqui. */

/* A vitrine é um <figure> desde que passou a carregar a captura real: o
   `margin: 0` derruba a margem que o navegador dá a toda figura, e a imagem
   preenche a moldura de borda a borda, como a tela numa moldura de verdade. */

figure.vitrine { margin: 0; }

/* A SANGRIA ATÉ A BORDA FOI FEITA E DESFEITA EM 15/09/2026.

   Ela nasceu de um problema real: a 484 px de coluna, uma captura de 1531 px
   aparece a 0,32x, e os títulos dos passos viram textura. A saída tentada foi
   tirar a imagem do container e esticá-la até o fim da tela, primeiro parando
   na beirada, depois passando 200 px dela e com o arquivo cortado para os
   cortes feios ficarem fora de vista.

   O DONO REPROVOU AS DUAS VERSÕES, a segunda com o quadro desenhado na tela:
   a imagem tem que ficar alinhada com a grade da página, e não encostada nela,
   e menor. É decisão de composição, e é dele. A coluna volta a ser a coluna, e
   a moldura volta a acabar onde acaba o conteúdo, na mesma linha em que acaba
   o botão do cabeçalho.

   O QUE SOBROU DA IDEIA é o corte do arquivo na linha 982, que fica. Antes o
   quadro mostrava o rodapé do aplicativo cortado no meio de «Salvar
   apresentação», porque a captura de origem acabava ali; agora ele acaba num
   vão entre cartões, e a moldura fecha em fundo liso.

   A LEGIBILIDADE CONTINUA EM 0,32x, e continua sendo dívida escrita. O jeito
   de pagá-la não é imagem maior, é captura mais fechada: um recorte que mostre
   dois passos e nada mais, na largura da coluna, se lê. Isso depende de uma
   captura nova do aplicativo, e não de CSS.

   `figure.vitrine { margin: 0 }` mora logo acima e é o que faz a imagem
   preencher a moldura de borda a borda. Se um dia voltar a existir uma regra
   de desktop para esta figura, ela precisa do `figure.` no seletor: a classe
   sozinha perde em especificidade para aquela linha, e o resultado é a moldura
   mudar sem a margem mudar junto. */

.vitrine__tela {
    display: block;
    width: 100%;
    height: auto;
}

/* A CENA DESENHADA EM CSS SAIU EM 18/09/2026, com a home que a exibia.

   Eram cerca de 195 linhas: a barra do console (`.vitrine__barra`, `__ponto`,
   `__tempo`, `__caso`), a tela sob teste desenhada campo a campo (`.cena` e as
   sete classes dela, com botão, cursor e legenda automática), o corpo com os
   passos e as etiquetas de saída (`.vitrine__corpo`, `__passo`, `__numero`,
   `__rotulo`, `__saidas`, `__etiqueta`) e o laço `pulso-gravacao`.

   Ela já não era usada por marcação nenhuma desde que o herói passou a exibir
   a captura real, e a home nova trouxe o `.console`, que faz o mesmo trabalho
   com a tela de verdade em vez de um desenho. Duas maneiras de dizer a mesma
   coisa é uma a mais, e a que sobrou é a que mostra o produto.

   Sobraram `.vitrine` e `.vitrine__tela`, que continuam servindo a moldura da
   captura em /o-aplicativo. */

/* NO CELULAR A VITRINE FICA, com outra imagem.

   Até 02/09/2026 ela sumia abaixo de 40rem, e quem chegava do anúncio pelo
   telefone via só texto na primeira dobra. Sumia com razão: uma captura de
   1560px numa coluna de 327 era ilegível. A resposta não é esconder, é
   trocar a imagem — o <picture> do hero serve um recorte em pé da mesma
   captura, com a barra flutuante e o cronômetro em tamanho de leitura.

   Sem a inclinação 3D aqui: ela endireita sob o mouse, e no telefone não há
   mouse — ficaria torta para sempre. */

@media (max-width: 40rem) {
    /* O RESPIRO DO HERÓI CEDIA NO TELEFONE desde 15/09/2026: `--espaco-12` são
       96 px, e numa tela de 780 eram 12% do que a pessoa tem, gastos antes de
       qualquer conteúdo. A regra baixava para 48.

       ELA SAIU EM 21/09/2026, porque virou o contrário do que dizia. O recuo
       do `.hero` no desktop passou a ser 32 e 24, e esta regra o LEVANTARIA
       para 48 no telefone, que é justamente a tela onde ele mais incomoda.
       Quem corta o ar da primeira dobra agora corta para todo mundo. */
}

/* A espinha numerada das seções da home.

   Duas funções, e a segunda é a que importa: ela diz onde uma seção começa —
   e, num rolar rápido, o número dá a sensação de percurso que uma sequência de
   títulos soltos não dá. A primeira é dar nome ao assunto em duas palavras,
   antes do título, que é frase.

   Não numera o hero nem o fechamento: abertura e chamada não são etapa. */

/* O ORDINAL VIRA MONO E TROCA A MENTA PELO CIANO — onda 1 de 18/09/2026.

   Mono porque "01 / NO DIA A DIA" é rótulo de instrumento, não frase: é a
   mesma família que carrega 1,3 MB, 3,2% e SHA-256, e ver as três coisas na
   mesma letra é o que faz a página ler como painel em vez de folheto.

   Ciano porque a menta ficou reservada para ação. O ordinal não é clicável, e
   pintá-lo da cor do botão ensinava o olho a procurar clique onde não há. */
/* O ORDINAL DA SEÇÃO, em mono e menta desde a onda 3 (30/09/2026). As
   aberturas portadas trocaram o ordinal pelo selo, e sobrou a numeração dos
   passos de /depois-de-baixar, que é o único lugar que o usa. O traço de sinal
   na frente dele, e dos dois lados no cabeçalho centrado, saiu junto: no
   cartão o número já está na margem, e o traço empurrava o texto para dentro. */
.secao__ordem {
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-menta);
}

/* OS QUATRO FATOS DE /BAIXAR, na coluna do texto da porta, antes do
   formulário: são o que a pessoa lê antes de decidir preencher.

   Nasceram como a faixa de confiança da home, fina, entre a dobra e a
   primeira seção, e a home deixou de ter a faixa com o desenho novo dela: o
   contêiner `.faixa-confianca` saiu da folha com o porte de /baixar. Desde a
   onda 3 (30/09/2026) cada fato é uma ficha de vidro, em duas colunas até
   520 px, e numa coluna só no telefone. */
.faixa-confianca__itens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 520px;
    margin: var(--espaco-4) 0 0;
    padding: 0;
    list-style: none;
}

.faixa-confianca__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-cartao);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-branco-gelo) 5%, transparent),
        color-mix(in srgb, var(--cor-branco-gelo) 1.5%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cor-branco-gelo);
}

@media (max-width: 40rem) {
    .faixa-confianca__itens { grid-template-columns: minmax(0, 1fr); }
}
/* O guia de uso — sete tópicos, um embaixo do outro.

   Sem abas e sem sanfona: quem chega aqui por busca quer achar a resposta com
   Ctrl+F e ler, e conteúdo atrás de clique não é encontrado nem pelo leitor nem
   pelo buscador. A numeração é o que dá a sensação de percurso sem esconder
   nada. */

/* O índice: sete portas, na primeira tela. Grade que se acomoda sozinha em uma,
   duas ou três colunas conforme a largura. */

/* FLEX, E NÃO GRADE DE TRILHAS IGUAIS. Com sete tópicos em três colunas, o
   sétimo ficava sozinho numa linha de 1120px, e a linha órfã lia como erro de
   montagem. Em flex cada atalho ocupa o que o texto mede e a última linha
   fecha com o que couber. */
.guia__indice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-1);
}

/* O ATALHO CRESCE PARA A FILA FECHAR, e o rótulo fica no meio do que ele
   ganhou — 15/09/2026.

   Só o `flex: 1 1 auto` estava aqui, e o espaço que cada atalho ganhava caía
   todo do lado direito, porque sem `justify-content` o conteúdo encosta no
   começo. Em /perguntas, com três rótulos curtos, dava 17 px de folga à
   esquerda do texto contra 61 à direita nos três, e o recuo simétrico de 16 px
   que eles têm sumia na leitura. Centrado, a sobra se reparte e o atalho
   parece uma aba em vez de um retângulo com o texto empurrado para um canto. */

.guia__indice .guia__atalho {
    flex: 1 1 auto;
    justify-content: center;
}

/* O SUMÁRIO DE COLUNA (`.guia__sumario`, `__sumario-rotulo` e
   `.guia__indice--coluna`), que ficava ao lado da abertura, saiu em
   30/09/2026 com o porte das páginas legais: nos guias e nos documentos o
   índice mora no cartão preso ao lado do texto (`.guia-layout`). */

/* O ATALHO DO ÍNDICE VIRA PÍLULA — 18/09/2026, a mesma passada que o botão e
   o alternador receberam. Três páginas dependem destas regras, /como-usar,
   /evidencia-de-teste e /perguntas, e nas três o índice é a primeira coisa
   que a pessoa usa: ele é controle, e controle nesta casa tem canto de
   pílula.

   O acender no `hover` passou a ser o do cartão, subindo e com a borda em
   menta: um índice que responde é um índice que a pessoa descobre que pode
   clicar. */
.guia__atalho {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-2);
    padding: var(--espaco-2) var(--espaco-3);
    border-radius: var(--raio-pilula);
    border: 1px solid var(--cor-toggle-desligado);
    background-color: var(--cor-navy-superficie);
    color: var(--cor-branco-gelo);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 380ms cubic-bezier(.2, .7, .3, 1), transform 380ms cubic-bezier(.2, .7, .3, 1), background-color 380ms ease;
}

.guia__atalho:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--cor-menta) 48%, transparent);
}

.guia__atalho:hover {
    border-color: color-mix(in srgb, var(--cor-menta) 55%, transparent);
    background-color: color-mix(in srgb, var(--cor-menta) 8%, transparent);
}

/* Mono, e ciano: é um ordinal, e ordinal nesta casa pertence à mesma família
   que "01 / O CAMINHO", "1,3 MB" e "SHA-256". A menta ficou reservada para
   ação, e o número do índice não é o que se clica, é o que se conta. */
.guia__atalho-ordem {
    flex: none;
    font-family: var(--fonte-mono);
    font-size: var(--tamanho-legenda);
    letter-spacing: 0.12em;
    color: var(--cor-sinal);
}

.guia {
    display: grid;
    gap: var(--espaco-8);
    margin-top: var(--espaco-8);
}

/* Cada tópico: o número num trilho à esquerda e o conteúdo à direita.

   O trilho existe para o número poder ser grande sem empurrar o texto — ele
   marca onde um tópico começa quando se rola rápido, que é como um guia é
   usado. E o esqueleto é o mesmo para os sete, com imagem ou sem: dois deles
   não têm tela, e um layout que dependesse da imagem quebraria neles. */

.guia__topico {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    column-gap: var(--espaco-4);
    row-gap: var(--espaco-2);
    padding-top: var(--espaco-6);
    border-top: 1px solid var(--cor-toggle-desligado);
}

.guia__topico:first-child {
    padding-top: 0;
    border-top: 0;
}

/* O NÚMERO DO TÓPICO VIRA MARCADOR DE INSTRUMENTO — 18/09/2026.

   Ele era Poppins em menta a 45%, e a 45% um número de 32 px não é discreto,
   é apagado: pesava o suficiente para ocupar uma coluna de 4,5 rem e pouco
   demais para servir de marco ao rolar. Mono e ciano por inteiro, com um
   filete vertical do lado, ele volta a ser o que a coluna dele promete, que é
   dizer onde cada tópico começa. */
.guia__ordem {
    grid-column: 1;
    grid-row: 1 / -1;
    padding-inline-start: var(--espaco-2);
    border-inline-start: 2px solid var(--cor-sinal);
    font-family: var(--fonte-mono);
    font-size: var(--tamanho-secao);
    line-height: 1.2;
    letter-spacing: 0.08em;
    color: var(--cor-sinal);
}

.guia__topico > :not(.guia__ordem) { grid-column: 2; }

/* O texto para na medida de leitura; a imagem não. Parágrafo largo demais
   cansa, e tela estreita demais não se lê — cada um na largura que pede. */

.guia__topico > p,
.guia__passos {
    max-width: 60ch;
}

.guia__titulo {
    font-size: var(--tamanho-secao);
    scroll-margin-top: calc(var(--altura-cabecalho) + var(--espaco-6));
}

@media (max-width: 40rem) {
    .guia__topico {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .guia__ordem { grid-row: auto; }

    .guia__topico > :not(.guia__ordem) { grid-column: 1; }
}

/* Lista ordenada de verdade, com o número do navegador: é um procedimento, e
   um leitor de tela precisa anunciar "item 2 de 4". */

.guia__passos {
    display: grid;
    gap: var(--espaco-1);
    margin: 0;
    padding-left: var(--espaco-3);
    color: var(--cor-cinza-nevoa);
}

.guia__passos li { padding-left: var(--espaco-1); }

.guia__nota { margin-top: var(--espaco-1); }

.guia__figura { margin: var(--espaco-2) 0 0; }

.guia__tela {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--raio-cartao);
    border: 1px solid var(--cor-toggle-desligado);
}

/* O <picture> NAO PODE VIRAR UMA CAIXA.

   Ele foi acrescentado em 03/09/2026 para servir AVIF e WebP, e quebrou o
   layout na hora: `.entrega__tela` e `.mostra__tela` dizem `width: 100%`, e
   com o <picture> no meio a porcentagem passou a medir contra uma caixa
   embutida em vez do papel — a imagem transbordou para a direita e sobrou uma
   faixa vazia à esquerda. Visto em producao, na secao do relatorio.

   `display: contents` faz o <picture> nao gerar caixa nenhuma: a <img> volta a
   ser, para o layout, filha direta de quem sempre foi. Toda regra escrita
   antes do <picture> continua valendo, sem uma linha alterada. */

picture {
    display: contents;
}

/* Mostra do produto — fileiras alternadas de tela e texto. Tela grande e
   legível, tudo visível só rolando a página: conteúdo escondido atrás de
   clique é conteúdo que a maioria nunca vê. */

.mostras {
    display: grid;
    gap: var(--espaco-8);
}

.mostra {
    display: grid;
    gap: var(--espaco-4) var(--espaco-8);
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    align-items: center;
}

.mostra--invertida .mostra__midia { order: 2; }

/* A MOLDURA DAS CAPTURAS SOLTAS (.quadro), a das páginas ainda não portadas.
   Até a onda 3 ela vestia também as fileiras (.mostra__midia), com o mesmo
   tratamento de propósito; desde o porte de /o-aplicativo e /como-usar, quem
   emoldura as fileiras é a `.tela-em-vidro`, e a figura da fileira ficou só
   com o que a posiciona, logo abaixo.

   TRÊS COISAS QUE A MOLDURA ANTIGA NÃO TINHA. Um passe-partout de 6px, que
   faz a captura parecer montada num quadro em vez de colada na página; um fio
   de luz no topo, que é como vidro pega a luz e o que dá volume à peça sem
   pesar; e uma sombra mais alta e mais aberta que a padrão, porque a padrão
   foi desenhada para cartão de texto, e captura de tela é um objeto maior,
   que precisa de mais chão embaixo.

   O raio de dentro desconta o passe-partout: sem isso o canto da imagem
   sobra fora da curva da moldura, e o encaixe fica torto. */
/* A MOLDURA VESTE O <picture>, e não a <figure>, na família solta: a figura
   carrega também a legenda, e legenda dentro da moldura vira barra de status
   da própria captura, confundindo o que é documento com o que é interface. */
.quadro {
    margin: 0;
}

.quadro picture {
    display: block;
}

.mostra__midia {
    position: relative;
    margin: 0;
}

.quadro picture {
    position: relative;
    margin: 0;
    padding: 6px;
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cor-branco-gelo) 7%, var(--cor-navy-superficie)),
        var(--cor-navy-superficie) 60%);
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-modal);
    box-shadow: 0 16px 40px rgb(0 0 0 / 42%);
}

.quadro picture::before {
    content: "";
    position: absolute;
    inset: 0 12% auto;
    block-size: 1px;
    background-image: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--cor-branco-gelo) 30%, transparent),
        transparent);
}

.mostra__tela,
.quadro__tela {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--raio-modal) - 6px);
}

/* CAPTURA FORA DE UMA FILEIRA .mostra: o visual ela divide com
   `.mostra__midia`, logo acima, e a classe separada é herança de um problema
   que deixou de existir.

   Até 15/09/2026, `.mostra__midia` nascia com opacidade zero e quem a revelava
   era o animacoes.js, que a procurava DENTRO de um `.mostra`. Figura solta com
   aquela classe nunca era encontrada e ficava invisível para sempre, com o
   espaço reservado e nada dentro: foi o que aconteceu na seção da galeria em
   05/09/2026, e `.quadro` nasceu para não cair nessa armadilha.

   A armadilha foi embora com o Anime.js: nada mais esconde nada, e uma figura
   solta com `.mostra__midia` hoje só ganharia uma entrada animada a mais. As
   duas classes seguem separadas porque o visual delas difere, e não mais
   porque uma delas some. */

.quadro__legenda {
    margin-top: var(--espaco-2);
    font-size: var(--tamanho-legenda);
    color: var(--cor-cinza-nevoa);
}

.mostra__texto {
    display: grid;
    gap: var(--espaco-2);
    align-content: center;
}

.mostra__rotulo {
    color: var(--cor-menta);
    font-family: var(--fonte-titulo);
    font-weight: 500;
    font-size: var(--tamanho-legenda);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Na home a mostra mora dentro de uma seção que já tem h2, então o título
   do bloco é h3 — mas com o tamanho de título de tela: no /o-aplicativo os
   mesmos blocos usam h2, e o leitor não deve notar a diferença de nível. */

.mostra__texto h3 {
    font-size: var(--tamanho-tela);
}

/* Mesmo desenho da lista dos cartões de plano: marca em menta, texto névoa.

   **O item não é grade, e não pode voltar a ser.** Com
   `grid-template-columns: 1rem 1fr` o `::before` ocupa a primeira célula e o
   texto solto ocupa a segunda, o que funciona enquanto o `li` só tiver texto.
   Basta um elemento em linha dentro dele para quebrar: o `<strong>` vira uma
   célula própria e a auto-alocação joga o resto da frase na coluna de 1 rem.
   Foi o que aconteceu em /o-aplicativo, medido em 28/08/2026: a frase saiu
   partida em três caixas e o trecho ", sobre os pixels e não numa camada por
   cima" caiu numa coluna de 16 px, uma letra por linha, 12 linhas para o que
   cabia em 4. Recuo pendurado dá o mesmo desenho e deixa a frase ser frase. */

.lista-marcada {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--espaco-1);
}

.lista-marcada__item {
    position: relative;
    padding-left: calc(1rem + var(--espaco-1));
    color: var(--cor-cinza-nevoa);
}

/* MARCADOR NEUTRO, E NÃO UM ✓. O certinho diz "confirmado", e estas listas
   carregam mudança de versão e instrução de instalação: marcar correção de
   bug com sinal de aprovado esvazia o símbolo onde ele valeria alguma coisa.
   Um quadrado pequeno separa item sem afirmar nada. */
.lista-marcada__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 2px;
    background-color: var(--cor-menta);
}

/* AS NOVIDADES (`.novidades`, `.novidade` e as partes dela) moram no bloco
   de /novidades, no fim da folha, desde a onda 3 (30/09/2026): a linha do
   tempo com um cartão por versão. */

/* Par de telas de apoio no fim da mostra — menores, lado a lado */

.dupla {
    display: grid;
    gap: var(--espaco-3);
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.dupla__cartao {
    background-color: var(--cor-navy-superficie);
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-cartao);
    overflow: hidden;
    display: grid;
    align-content: start;
}

.dupla__tela {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
    border-bottom: 1px solid var(--cor-toggle-desligado);
    background-color: var(--cor-navy);
}

.dupla__texto {
    padding: var(--espaco-3);
    display: grid;
    gap: var(--espaco-1);
}

.dupla__titulo {
    font-size: var(--tamanho-secao);
}

@media (max-width: 60rem) {
    .mostra {
        grid-template-columns: 1fr;
    }

    /* No empilhado, a tela vem sempre primeiro e o texto explica embaixo */
    .mostra--invertida .mostra__midia { order: 0; }
}

/* Grades de cartões.

   A largura mínima da coluna sai de `--coluna-minima` para que cada bloco a
   ajuste ao que carrega. Rótulo curto cabe em coluna estreita; parágrafo não,
   e a mesma grade servindo aos dois entrega um dos dois errado. O
   `min(…, 100%)` existe para o celular: sem ele uma mínima de 23 rem fica mais
   larga que o conteúdo disponível e a página passa a rolar para o lado. */

.grade {
    display: grid;
    gap: var(--espaco-3);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--coluna-minima, 15rem), 100%), 1fr));
}

/* Em 1120 px de conteúdo isto dá duas colunas de 548 px, perto de 70
   caracteres por linha, que é a medida em que se lê um parágrafo. Com a mínima
   padrão o mesmo parágrafo cai em coluna de 250 px e 34 caracteres: vira fita,
   e a página parece quebrada mesmo com o texto certo. */

.colunas-largas { --coluna-minima: 23rem; }

/* Seis cartões de parágrafo curto: a 15 rem cabiam quatro por fileira, e a
   segunda ficava com dois e um buraco. A 18 rem são três e três no computador,
   dois, dois e dois no tablet, e um por vez no celular: fileira nenhuma órfã. */
.colunas-medias { --coluna-minima: 18rem; }

/* O MATERIAL DO CARTÃO — onda 3, 29/09/2026: vidro. A borda em degradê da
   onda 2 vira um fio de branco a 10%, e o cartão pega luz por dentro: um
   brilho azul subindo do pé e um fio claro na borda de cima. É o mesmo
   material em toda página.

   O CARTÃO NÃO SOBE MAIS NO PASSAR DO MOUSE. A borda acende e a luz do cursor
   segue a mão; nos cartões da home ele ainda inclina (`data-inclina`). O
   deslocamento de 7 px da onda 1 saiu porque a entrada ao rolar anima
   `translate`, e um terceiro movimento no mesmo cartão brigaria com os dois.

   `isolation` e `overflow` são da luz que segue o cursor, no fim da folha. */
.cartao {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--borda-vidro);
    background: var(--material-cartao);
    box-shadow:
        inset 0 -4px 100px 20px color-mix(in srgb, var(--cor-luz-media) 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 7%, transparent);
    border-radius: var(--raio-modal);
    padding: var(--espaco-3);
    display: grid;
    gap: var(--espaco-1);
    align-content: start;
    transition: border-color 400ms ease;
}

.cartao:hover { border-color: var(--borda-vidro-forte); }

.cartao__titulo {
    font-family: var(--fonte-titulo);
    font-weight: 500;
    font-size: var(--tamanho-secao);
}

.cabecalho-secao {
    display: grid;
    gap: var(--espaco-2);
    max-width: 42rem;
    margin-bottom: var(--espaco-6);
}

.cabecalho-secao--centrado {
    margin-inline: auto;
    text-align: center;
}

/* MEDIDA DE LEITURA PARA PARÁGRAFO SOLTO NA COLUNA CHEIA — 16/09/2026.

   A coluna de conteúdo tem 1072 px, e prosa nela sai com cerca de 130
   caracteres por linha: o olho volta do fim de uma linha e reencontra a errada.
   42 rem é a medida que o `.cabecalho-secao` logo acima já usa, e é a mesma
   largura das colunas de texto das fileiras de produto, que ficam em 672. Foi
   assim que a varredura achou os três parágrafos do /o-aplicativo: eles tinham
   1072 ao lado de vizinhos com 672, e o degrau denunciou a falta de medida.

   É PARA PARÁGRAFO SOLTO, e não para tudo. Texto dentro de componente que já
   tem largura própria, como o acordeão das garantias, segue a do componente. */

.medida-de-leitura {
    max-width: 42rem;
}

/* Faixa do diferencial, em /precos. Desde a onda 3 cada razão é um cartão
   com o ícone numa bolha, e as quatro vão em duas colunas ou em uma: nunca em
   três, que deixaria a quarta sozinha numa linha. Por isso o número fixo, e
   não a `--coluna-minima`. */

.diferencial {
    display: grid;
    gap: var(--espaco-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* `align-content: start` NÃO É ENFEITE, é o que tira a escada — 15/09/2026.

   As quatro colunas viram a mesma altura porque o grid de fora as estica, e um
   grid esticado com linhas automáticas reparte a sobra entre as linhas. O
   ícone, que é a primeira, fica preso no topo; o título e o parágrafo descem
   cada um o seu tanto. Medido em 1920: os quatro títulos começavam em 158, 169,
   152 e 135, e os quatro parágrafos em 222, 239, 205 e 171, uma escada de 68 px
   entre a coluna mais alta e a mais baixa, com o vão entre ícone e título
   variando de 25 a 58.

   Com `start`, a sobra fica toda embaixo, que é onde ninguém repara, e as
   quatro colunas começam na mesma linha. O `.cartao` já traz o `start`; ele
   fica escrito aqui porque é esta regra que não pode perdê-lo.

   O FILETE DE MARCA À ESQUERDA SAIU NA ONDA 3: ele morava no `::before`, que
   em todo cartão é a luz do cursor, e os dois no mesmo pseudoelemento se
   misturavam. */

.diferencial__item {
    align-content: start;
    gap: 0;
    padding: var(--espaco-3);
}

.diferencial__item .bolha { margin-bottom: var(--espaco-4); }

.diferencial__titulo {
    margin-bottom: var(--espaco-1);
    font-family: var(--fonte-titulo);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--cor-branco-gelo);
}

.diferencial__item .texto-secundario {
    font-size: 0.9375rem;
    color: var(--cor-corpo);
}

/* Fluxo em quatro etapas — trilho segmentado, uma faixa por etapa, para não
   sobrar ponta solta quando a grade quebra em mais de uma linha. */

.etapas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--espaco-3);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.etapa {
    position: relative;
    display: grid;
    gap: var(--espaco-1);
    align-content: start;
    padding-top: var(--espaco-6);
}

.etapa::before {
    content: "";
    position: absolute;
    top: calc(var(--espaco-2) - 1px);
    left: 0;
    right: 0;
    height: 2px;
    border-radius: var(--raio-pilula);
    background-color: var(--cor-toggle-desligado);
}

.etapa__numero {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: var(--espaco-4);
    height: var(--espaco-4);
    border-radius: var(--raio-pilula);
    background: var(--gradiente-marca);
    color: var(--cor-navy);
    font-family: var(--fonte-titulo);
    font-weight: 700;
}

.etapa__titulo {
    font-family: var(--fonte-titulo);
    font-weight: 500;
    color: var(--cor-branco-gelo);
}

/* Alternador mensal/anual — §4 (toggle) */

.ciclo-entrada {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ciclo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    margin-bottom: var(--espaco-6);
    flex-wrap: wrap;
}

/* O INTERRUPTOR VIRA UM PAR DE PÍLULAS — onda 2 de 18/09/2026.

   O desenho anterior era "Mensal [interruptor] Anual", e ele obriga a decodificar
   antes de ler: quem chega na página precisa olhar para que lado o botão
   está e traduzir isso em qual dos dois preços está na tela. Interruptor é a
   forma certa para ligar e desligar UMA coisa; para escolher entre DUAS, o
   que responde na hora é ver qual das duas está acesa.

   Continua sendo a mesma caixa de seleção escondida e o mesmo `:checked ~`,
   sem uma linha de JavaScript, e os dois preços seguem na marcação o tempo
   todo. O que mudou é só o que se vê.

   A PÍLULA ACESA ANDA — onda 3, 29/09/2026. Ela é uma só, branca, e desliza
   até o período que está valendo, por transformação. A cor do texto de cada
   face troca na hora, sem transição: continua sendo ela a resposta ao
   clique, e o deslizar é só o caminho até ela. */

.ciclo__rotulo {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    border-radius: var(--raio-pilula);
    border: 1px solid var(--borda-vidro-forte);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
    box-shadow: inset 0 4px 8px color-mix(in srgb, var(--cor-branco-gelo) 8%, transparent);
    cursor: pointer;
}

.ciclo__rotulo::before {
    content: "";
    position: absolute;
    inset-block: 4px;
    inset-inline-start: 4px;
    inline-size: calc(50% - 4px);
    border-radius: var(--raio-pilula);
    background-color: var(--cor-branco-gelo);
    box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--cor-luz) 80%, transparent);
    transition: transform 300ms cubic-bezier(.25, 1, .5, 1);
}

.ciclo__face {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 36px;
    padding-inline: var(--espaco-3);
    border-radius: var(--raio-pilula);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--cor-corpo);
}

/* A face acesa é a que está valendo. Mensal é o estado de repouso, então ela
   nasce acesa e cede o lugar quando a caixa é marcada. */
.ciclo__face--mensal { color: var(--cor-noite); }

.ciclo-entrada:checked ~ .ciclo .ciclo__rotulo::before { transform: translateX(100%); }
.ciclo-entrada:checked ~ .ciclo .ciclo__face--mensal { color: var(--cor-corpo); }
.ciclo-entrada:checked ~ .ciclo .ciclo__face--anual { color: var(--cor-noite); }

.ciclo-entrada:focus-visible ~ .ciclo .ciclo__rotulo {
    outline: 2px solid var(--cor-menta);
    outline-offset: 3px;
}

.ciclo__economia {
    padding: 6px 12px;
    border-radius: var(--raio-pilula);
    border: 1px solid color-mix(in srgb, var(--cor-menta) 25%, transparent);
    background-color: color-mix(in srgb, var(--cor-menta) 8%, transparent);
    color: var(--cor-menta);
    font-size: var(--tamanho-legenda);
    font-weight: 500;
}

/* Cartões de plano */

.planos {
    display: grid;
    gap: var(--espaco-3);
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    align-items: start;
}

/* O PLANO É CARTÃO DE VIDRO — onda 3, 29/09/2026. O CartaoDePlano passou a
   carregar a classe `.cartao`, e com ela o material, a borda e a luz do
   cursor que todo cartão tem; o que é só do plano mora aqui. O espaço entre
   as partes é margem de cada uma, e não `gap`, para as cinco faixas do
   `subgrid` logo abaixo continuarem casando entre os três cartões. */
.plano {
    position: relative;
    padding: var(--espaco-4);
    border-radius: var(--raio-vidro);
    display: grid;
    gap: 0;
}

.plano__precos {
    display: grid;
    align-content: start;
    margin-top: var(--espaco-3);
}

/* OS TRÊS CARTÕES SE ALINHAM LINHA A LINHA — 15/09/2026.

   Medido em 1920, antes: «Baixar agora» e «Assinar o Pro» começavam em y=902 e
   o botão do Time em y=959, empurrado pela linha do mínimo, que só ele tem. E,
   como `.planos` tinha `align-items: start`, os três cartões acabavam em alturas
   diferentes: o Gratuito fechava 220 px acima do Pro.

   `subgrid` resolve os dois de uma vez. Os cinco filhos de cada cartão passam a
   ocupar as mesmas cinco faixas do `.planos`, e cada faixa fica com a altura do
   maior conteúdo dela nos três: nome com nome, resumo com resumo, preço com
   preço, botão com botão, lista com lista. Nenhuma altura fixa, nenhum número
   mágico, e quando o texto de um plano mudar os três continuam alinhados.

   O `@supports` NÃO É CERIMÔNIA: sem ele, um navegador sem `subgrid` leria o
   `grid-row: span 5` e empilharia os cartões em cinco faixas de verdade, o que
   é pior que o desalinhamento que isto conserta. Fora do suporte, tudo continua
   como estava.

   EMPILHADO NÃO ALINHA NADA, e é o certo: numa coluna só, cada cartão cai na
   sua própria faixa de cinco, e alinhar cartões que ninguém vê lado a lado
   custaria buraco embaixo do que tem menos texto. */

@supports (grid-template-rows: subgrid) {
    .planos {
        grid-template-rows: repeat(5, auto);
        align-items: stretch;
    }

    .plano {
        grid-row: span 5;
        grid-template-rows: subgrid;
        row-gap: 0;
    }
}

/* O PLANO EM DESTAQUE COM ARO DE LUZ — onda 3, 29/09/2026. O aro de espectro
   da onda 2 vira gelo descendo para o azul e fechando em menta, com um brilho
   por cima do cartão. Parado, e de propósito: girar a cor da borda seria
   animar fundo, e o movimento daqui só anima opacidade e transformação
   (AGENTS.md §Movimento). */
.plano--destacado,
.plano--destacado:hover {
    border-color: transparent;
    background:
        linear-gradient(180deg,
            var(--cor-navy-cartao),
            color-mix(in srgb, var(--cor-navy-cartao) 55%, var(--cor-noite)) 60%,
            color-mix(in srgb, var(--cor-navy-superficie) 60%, var(--cor-noite))) padding-box,
        linear-gradient(160deg,
            color-mix(in srgb, var(--cor-luz-gelo) 90%, transparent),
            color-mix(in srgb, var(--cor-luz-media) 50%, transparent) 35%,
            color-mix(in srgb, var(--cor-branco-gelo) 8%, transparent) 60%,
            color-mix(in srgb, var(--cor-menta) 60%, transparent)) border-box;
    box-shadow:
        inset 0 -4px 120px 20px color-mix(in srgb, var(--cor-luz-media) 16%, transparent),
        0 30px 90px -30px color-mix(in srgb, var(--cor-luz-media) 60%, transparent);
}

/* O brilho de cima. É o `::after`, porque o `::before` de todo cartão é a
   luz que segue o cursor. */
.plano--destacado::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -140px;
    inline-size: 120%;
    block-size: 260px;
    translate: -50% 0;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--cor-luz) 35%, transparent), transparent);
    pointer-events: none;
}

.plano__selo {
    position: absolute;
    top: var(--espaco-4);
    right: var(--espaco-4);
    padding: 4px 12px;
    border-radius: var(--raio-pilula);
    background: linear-gradient(95deg, var(--cor-luz-gelo), var(--cor-menta));
    color: var(--cor-noite);
    font-size: 0.75rem;
    font-weight: 600;
}

.plano__nome {
    font-family: var(--fonte-titulo);
    font-weight: 500;
    font-size: 1.375rem;
    line-height: 1.6;
    letter-spacing: -0.03em;
}

.plano > .texto-secundario {
    margin-top: 12px;
    font-size: 0.9375rem;
    color: var(--cor-corpo);
}

/* O PREÇO EM TRÊS TAMANHOS — onda 3: o símbolo pequeno e alto, o inteiro
   grande, os centavos no meio. Linha de texto, e não flex: o preço é uma
   frase, "R$ 34,00/mês", e é ela inteira que o leitor de tela lê, com o espaço
   depois do R$ (AGENTS.md §Convenções: frase não vira grade nem flex). */
.plano__valor {
    font-family: var(--fonte-titulo);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--cor-branco-gelo);
}

.plano__moeda {
    position: relative;
    top: var(--espaco-1);
    vertical-align: top;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--cor-corpo);
}

.plano__inteiro,
.plano__valor--gratis { font-size: 3.5rem; }

.plano__centavos { font-size: 1.5rem; }

.plano__unidade {
    margin-left: 6px;
    font-family: var(--fonte-corpo);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--cor-cinza-fraco);
}

.plano__preco--anual { display: none; }

.ciclo-entrada:checked ~ .planos .plano__preco--mensal { display: none; }
.ciclo-entrada:checked ~ .planos .plano__preco--anual { display: block; }

.plano__equivalencia {
    margin-top: 10px;
    font-size: 0.875rem;
    color: var(--cor-cinza-fraco);
}

.plano__equivalencia strong {
    font-weight: 600;
    color: var(--cor-corpo);
}

.plano > .botao {
    width: 100%;
    margin-top: var(--espaco-3);
    align-self: start;
}

/* `align-content: start` PELO MESMO MOTIVO DA SEÇÃO 08 da página inicial: com
   os cartões alinhados, a faixa da lista passou a ter a altura da maior das
   três, e um grid esticado reparte a sobra entre as suas linhas. O Gratuito,
   que tem cinco itens contra os dez do Pro, saía com 104 px entre um item e
   outro em vez dos 8 do token. A sobra vai toda para o fim do cartão. */

.plano__lista {
    list-style: none;
    margin: var(--espaco-3) 0 0;
    padding: var(--espaco-3) 0 0;
    border-top: 1px solid var(--borda-vidro);
    display: grid;
    align-content: start;
    gap: 12px;
}

/* Aqui a grade se sustenta porque a marca é um `<span>` de verdade: são dois
   filhos, duas células, nenhuma sobra. Vale a mesma ressalva da
   `.lista-marcada__item` — pôr um `<strong>` no meio do texto cria uma terceira
   célula e joga o resto da frase na coluna de 1 rem. */

.plano__item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    font-size: 0.9375rem;
    color: var(--cor-corpo);
}

.plano__marca {
    color: var(--cor-menta);
    font-weight: 600;
    line-height: 1.6;
}

/* Tabelas */

.tabela-envoltorio {
    overflow-x: auto;
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-cartao);
}

/* NO TELEFONE A TABELA DE COMPARAÇÃO ROLAVA E NÃO DIZIA, E PERDIA O RÓTULO NO
   CAMINHO — 15/09/2026.

   Ela tem 640 px de largura mínima, porque quarenta linhas em quatro colunas
   não cabem em menos, e a 390 px sobram 327: a primeira vista mostrava a
   coluna «Recurso» e um pedaço de «Gratuito», com os valores cortados no meio
   («sem limit», «seu disc»). As colunas Pro e Time ficavam fora, e nada na
   página dizia que bastava arrastar.

   DUAS COISAS CONSERTAM ISSO, e nenhuma delas é JavaScript.

   A PRIMEIRA COLUNA FICA PRESA. Sem isso, rolar para ver o Pro custa o nome da
   linha, e «✓ · — · —» sem o rótulo ao lado não quer dizer nada. Presa, ela
   fica onde está e os planos passam por baixo dela.

   A BEIRADA ACENDE SÓ QUANDO HÁ MAIS PARA O LADO. São quatro fundos no mesmo
   elemento: dois degradês com `background-attachment: local`, que andam junto
   com o conteúdo, e dois brilhos com `scroll`, que ficam parados. Quando há
   conteúdo escondido de um lado, o degradê daquele lado saiu de vista e o
   brilho aparece; ao chegar ao fim, o degradê volta por cima e o brilho some.
   É o comportamento de uma barra de rolagem, desenhado com fundo.

   O BRILHO É CLARO, E NÃO SOMBRA PRETA, que é a receita que se vê por aí. Numa
   página que já é quase preta, 55% de preto sobre o navy dá 4,7,13 contra
   10,15,30: medi, e a diferença não aparece na foto nem no olho. Branco a 16%
   dá 49,53,65, que se vê sem virar moldura.

   E É DEGRADÊ RETO, e não radial como manda a receita original. Radial com
   `farthest-side` numa tabela de 5.500 px de altura põe a força do brilho no
   meio vertical e quase nada nas pontas: medido, a beirada acendia 3 pontos de
   cor na linha que eu estava olhando. Reto, a faixa tem a mesma força da
   primeira à última linha, que é o que uma beirada precisa ter.

   O TETO DE 55REM é onde a tabela passa a caber inteira: acima disso não há o
   que rolar, e uma coluna presa que não precisa ficar presa só cria uma borda
   a mais no meio da tabela. */

@media (max-width: 55rem) {
    .tabela-envoltorio {
        background-image:
            linear-gradient(to right, var(--cor-navy) 40%, transparent),
            linear-gradient(to left, var(--cor-navy) 40%, transparent),
            linear-gradient(to right, color-mix(in srgb, var(--cor-branco-gelo) 16%, transparent), transparent),
            linear-gradient(to left, color-mix(in srgb, var(--cor-branco-gelo) 16%, transparent), transparent);
        background-position: 0 0, 100% 0, 0 0, 100% 0;
        background-size: 40px 100%, 40px 100%, 16px 100%, 16px 100%;
        background-repeat: no-repeat;
        background-attachment: local, local, scroll, scroll;
    }

    /* A COLUNA PRESA PRECISA CABER NUMA MÃO. Do jeito que a tabela se
       distribuía sozinha, o «Recurso» ficava com 248 dos 325 px da tela e
       sobravam 77 para o valor: presa, ela escondia justamente o que a pessoa
       rolou para ver. Com 9,5 rem declarados ela fica em 186, as três colunas
       de plano passam de 128 para 151, e a faixa que sobra, 139, mostra uma
       coluna de plano quase inteira de cada vez. O recuo lateral cai de 24 para
       16 pelo mesmo motivo, e a tabela fica 15% mais alta, que é o preço de
       nomes de recurso quebrando em mais linhas. */
    .tabela--comparacao th,
    .tabela--comparacao td {
        padding-inline: var(--espaco-2);
    }

    .tabela--comparacao thead th:first-child,
    .tabela--comparacao th[scope="row"] {
        position: sticky;
        left: 0;
        z-index: 1;
        width: 9.5rem;
        background-color: var(--cor-navy);
        border-right: 1px solid var(--cor-toggle-desligado);
    }

    .tabela--comparacao .tabela__rotulo {
        position: sticky;
        left: var(--espaco-2);
        display: inline-block;
    }

    /* AS CATEGORIAS FECHAM NO TELEFONE — 16/09/2026.

       Medida antes: a página de preços tinha 12.235 px de altura em 390, e
       metade disso era esta tabela. Quarenta linhas de comparação viram uma
       parede que se rola sem ler, e o que a pessoa quer saber é quase sempre de
       uma categoria só.

       O ALVO DO TOQUE É O RÓTULO, e não a linha inteira, e isso é limite do
       truque: quem fica preso na beirada quando a tabela rola precisa ser um
       bloco do tamanho do texto. Um rótulo do tamanho da linha tem 640 px e
       nunca sai da tela, então nada ficaria preso. Os 8 px de recuo no bloco,
       com margem negativa igual, dão 36 px de altura de alvo sem mexer na altura
       da linha.

       `:has()` É QUEM FECHA, e se ele faltar nada fecha: sem suporte, a tabela
       aparece inteira, que é exatamente o estado de antes desta regra. É a mesma
       exigência da regra de padrão visível que o AGENTS.md registra. */

    .tabela__grupo:has(.tabela__chave:not(:checked)) > tr:not(.tabela__categoria) {
        display: none;
    }

    .tabela--comparacao .tabela__rotulo {
        margin-block: calc(var(--espaco-1) * -1);
        padding-block: var(--espaco-1);
        padding-inline-end: var(--espaco-2);
        cursor: pointer;
    }

    .tabela--comparacao .tabela__rotulo::after {
        content: "+";
        margin-inline-start: var(--espaco-1);
    }

    .tabela__grupo:has(.tabela__chave:checked) .tabela__rotulo::after {
        content: "–";
    }

    /* O foco desenha no rótulo, porque a caixa de marcar é invisível: sem isto,
       quem navega pelo teclado avança pelas categorias sem ver onde está. */
    .tabela__chave:focus-visible + .tabela__rotulo {
        outline: 2px solid var(--cor-menta);
        outline-offset: 2px;
    }
}

/* A CHAVE DA CATEGORIA fica escondida e continua alcançável pelo teclado, como
   o alternador mensal/anual: `opacity: 0` e não `display: none`, que a tiraria
   da ordem de tabulação. No desktop ela não faz nada, porque a regra que esconde
   linhas só existe abaixo de 55 rem. */

.tabela__chave {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tabela {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    font-size: var(--tamanho-corpo);
}

.tabela th,
.tabela td {
    padding: var(--espaco-2) var(--espaco-3);
    text-align: left;
    border-bottom: 1px solid var(--cor-toggle-desligado);
}

.tabela thead th {
    font-family: var(--fonte-titulo);
    font-weight: 500;
    color: var(--cor-branco-gelo);
    background-color: var(--cor-navy-superficie);
    position: sticky;
    top: 0;
}

/* Coluna de resposta curta — ✓, —, "3", "básico" — é estreita e centrada, e
   isso vale **só na comparação de planos**. Como regra de toda `.tabela`, ela
   vazava para as outras duas: em O aplicativo, a coluna de descrição recebia
   8 rem, o texto descia numa tira de três palavras e a primeira coluna
   abocanhava o resto da largura, com um vão no meio da tabela. */

.tabela--comparacao td:not(:first-child),
.tabela--comparacao th:not(:first-child) {
    text-align: center;
    width: 8rem;
}

/* Termo e descrição: duas colunas cabem em qualquer tela, então o piso de
   40 rem — que existe para as tabelas de três e quatro colunas — aqui só
   produziria rolagem lateral no celular. A coluna do termo encolhe até o
   conteúdo, e o nome do arquivo não quebra no meio. */

.tabela--descricao {
    min-width: 0;
}

.tabela--descricao th[scope="row"] {
    width: 1%;
    white-space: nowrap;
}

/* O RECADO PARA QUEM ABRIU A PÁGINA DE DOWNLOAD NO CELULAR.

   Some em tela larga, e some de verdade, com `display: none`: num computador
   ele não é só ruído, é uma instrução errada, e lido em voz alta por quem já
   está na máquina certa só confundiria.

   MEDIA QUERY, E NÃO SCRIPT. A largura é o único sinal de aparelho que se pode
   ler sem JavaScript, e errar para o lado de mostrar o recado a um monitor
   estreito custa três linhas de texto; errar para o outro lado custa a visita
   inteira. */
.recado-do-celular {
    display: none;
}

@media (max-width: 48rem) {
    .recado-do-celular {
        display: block;
        margin-block-end: var(--espaco-3);
        padding: var(--espaco-2) var(--espaco-3);
        border-inline-start: 3px solid var(--cor-menta);
        border-radius: var(--raio-controle);
        background-color: var(--cor-navy-superficie);
        font-size: var(--tamanho-legenda);
        color: var(--cor-cinza-nevoa);
    }

    .recado-do-celular strong {
        color: var(--cor-branco-gelo);
    }
}

/* A TABELA DOS SETE DIAS, na administração. Quatro colunas curtas, três delas
   números: o piso de 40 rem das tabelas de venda produziria rolagem lateral
   dentro do cartão para uma tabela que cabe em 24. Os números vão à direita e
   com algarismo de largura fixa, que é o que deixa a coluna se comparar
   sozinha, de cima a baixo. */

.tabela--dias {
    min-width: 0;
}

.tabela--dias th:not(:first-child),
.tabela--dias td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Mono nos números, e não só nos cabeçalhos: aqui a coluna se lê de cima a
   baixo, e é a monoespaçada que mantém unidade, dezena e centena na mesma
   vertical. É a mesma letra da corrente lá em cima e da faísca. */
.tabela--dias tbody td,
.tabela--dias tfoot td {
    font-family: var(--fonte-mono);
}

/* HOJE ESTÁ PELA METADE, e a tabela precisa dizer isso. O dia corrente é o
   único que ainda vai crescer: quem abre a tela às nove da manhã vê a primeira
   linha menor que todas as outras e conclui que caiu. Desde a onda 3 a linha
   inteira acende em menta e a marca é uma pílula da mesma cor, e ela é texto
   além de cor: distinção que depende de cor sozinha some para quem não a
   enxerga. */
.dia--hoje th[scope="row"] {
    color: var(--cor-branco-gelo);
}

.dia--hoje > * { background-color: color-mix(in srgb, var(--cor-menta) 5%, transparent); }

/* A DATA NÃO QUEBRA, E A MARCA QUEBRA. A coluna do dia é a que cede primeiro
   num telefone, e com a marca dentro dela a data virava "21/09," numa linha e
   "dom" na seguinte: data partida no meio não se lê como data. Quem tem de
   ceder é a marca, que é uma frase e sobrevive a duas linhas.

   O rodapé fica de fora do `nowrap` de propósito: "Soma dos sete dias" numa
   linha só pediria 135 px de coluna, e seria a linha do total ditando a
   largura das sete linhas que importam. */
.tabela--dias th[scope="row"] {
    white-space: nowrap;
}

/* Com `tfoot th` só, esta regra PERDE para a de cima: `[scope="row"]` pesa
   como classe, e `.tabela--dias th[scope="row"]` soma duas contra uma. O
   rodapé ficava sem quebra, "Soma dos sete dias" pedia 151 px numa linha e a
   coluna do dia inteira nascia desse tamanho. */
.tabela--dias tfoot th[scope="row"] {
    white-space: normal;
}

/* A PÍLULA AO LADO DA DATA, na tela larga. No telefone ela desce para baixo
   da data e perde a moldura (na regra de tela estreita, no fim do painel): é
   ela que quebra, e moldura redonda em volta de três linhas vira bolha. */
.dia__marca {
    display: inline-block;
    margin-left: 10px;
    padding: 2px var(--espaco-1);
    border: 1px solid color-mix(in srgb, var(--cor-menta) 35%, transparent);
    border-radius: var(--raio-pilula);
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    white-space: normal;
    color: var(--cor-menta);
}

/* A SOMA DA SEMANA FECHA A TABELA, separada por uma régua mais clara que as
   outras: ela não é mais um dia, é o que os sete dizem juntos. Sem a régua ela
   lê como um oitavo dia com um nome estranho.

   A ÚLTIMA LINHA DO CORPO PERDE A BORDA INTEIRA, e não só a dos `td`. A regra
   de `.tabela` tira a borda de baixo do último `td` porque ali a tabela acaba;
   esta passou a ter rodapé, e o `th` da linha guardava a borda dele: sobrava um
   traço de uma célula só, e logo abaixo o do rodapé. Uma régua, e não uma e
   meia. */
.tabela--dias tbody tr:last-child th,
.tabela--dias tbody tr:last-child td {
    border-bottom: none;
}

.tabela--dias tfoot th,
.tabela--dias tfoot td {
    border-bottom: none;
    border-top: 1px solid var(--borda-vidro-forte);
    font-weight: 600;
    color: var(--cor-branco-gelo);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
}

.tabela--dias tbody th[scope="row"] {
    font-weight: 500;
    color: var(--cor-branco-gelo);
}

.tabela--dias tbody td { color: var(--cor-corpo); }

.tabela--dias tbody tr:not(.dia--hoje):hover > * {
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 2%, transparent);
}

/* O VIDRO DA TABELA NA ADMINISTRAÇÃO, desde a onda 3 (30/09/2026): a caixa e
   o cabeçalho em mono das tabelas da minha conta. Sob `.painel`, porque
   `.tabela` e `.tabela-envoltorio` servem também a /precos, a /o-aplicativo e
   à área do cliente. */
.painel .tabela-envoltorio {
    border-color: var(--borda-vidro);
    border-radius: var(--raio-modal);
}

.painel .tabela { font-size: 0.875rem; }

.painel .tabela th,
.painel .tabela td {
    padding: 12px 18px;
    border-bottom-color: var(--borda-vidro);
}

.painel .tabela thead th {
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 2.5%, transparent);
}

/* A CATEGORIA É UM RÓTULO EM MONO, na luz, e sem a faixa de menta desde a
   onda 3: a menta da tabela passou a ser só do que o plano tem, e uma faixa
   verde a cada grupo competia com os vistos. O recuo lateral fica com a regra
   da tabela, que no telefone o baixa para 16 junto com o rótulo preso. */
.tabela__categoria td {
    padding-block: var(--espaco-4) var(--espaco-1);
    font-family: var(--fonte-mono);
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-luz);
    border-bottom-color: var(--borda-vidro);
}

.tabela__recurso {
    color: var(--cor-cinza-nevoa);
}

/* O TRAÇO DE «NÃO TEM» ESTAVA DA COR DAS LINHAS DA TABELA — 15/09/2026.

   `--cor-toggle-desligado` é a cor de borda e de divisória, e sobre o navy ela
   dá 1,45:1 de contraste: o traço sumia no fundo enquanto o visto verde ao
   lado, a 11,5:1, saltava. O olho lia a tabela como uma lista de coisas que
   têm, com buracos, em vez de uma comparação com dois estados.

   `--cor-cinza-nevoa` dá 7,83:1, passa o AA para texto normal com folga, e
   continua mais quieta que a menta, que é o que a hierarquia pede: o que a
   tabela quer destacar é o que o plano tem, não o que falta. */

/* `position: relative` NOS DOIS, e é o que segura o rótulo oculto dentro da
   tabela — 15/09/2026.

   O nome «Incluído» e «Não incluído» vai num `.visualmente-oculto`, que é
   absoluto de 1 px. Absoluto se posiciona contra o ancestral posicionado mais
   próximo, e dentro da tabela não havia nenhum: os rótulos iam parar contra o
   documento, na coordenada que a célula teria se a tabela não rolasse, e
   escapavam do `overflow` do envoltório. O sintoma foi a página inteira de
   /precos passar a rolar 226 px para o lado no telefone, medido logo depois de
   eu escrever os rótulos. Com a célula posicionada, o recorte de 1 px mora
   dentro dela e some junto com o resto quando a tabela rola. */

.tabela__sim,
.tabela__nao {
    position: relative;
}

.tabela__sim { color: var(--cor-menta); }

/* O VISTO GANHA UM CÍRCULO, e o da coluna do Pro sai cheio (onda 3). O traço
   de «não tem» continua no névoa, pelo contraste medido logo acima: a
   proposta o apagava para 25% de branco, que devolveria o problema de
   15/09/2026.

   SÓ NA COMPARAÇÃO DE /PRECOS (30/09/2026), onde o visto é um `<span>` com o
   símbolo dentro. A primeira versão desta regra valia para todo
   `.tabela__sim`, e /minha-conta usa a classe na própria célula da situação
   do pagamento: a célula virava `inline-grid` com o canto a 50%, uma elipse
   em volta de «Paga», e a coluna deixava de ser coluna. Medido. */
.tabela--comparacao .tabela__sim {
    display: inline-grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    border: 1px solid color-mix(in srgb, var(--cor-menta) 35%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--cor-menta) 10%, transparent);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--cor-menta);
}

.tabela__nao { color: var(--cor-cinza-nevoa); }

.tabela tbody tr:last-child td { border-bottom: none; }

/* Perguntas frequentes */

.perguntas {
    display: grid;
    gap: var(--espaco-2);
    max-width: 46rem;
}

.pergunta {
    background-color: var(--cor-navy-superficie);
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-cartao);
    padding: var(--espaco-3);
    transition: border-color 160ms ease;
}

.pergunta:hover,
.pergunta[open] {
    border-color: color-mix(in srgb, var(--cor-menta) 45%, transparent);
}

/* O TÍTULO É O ALVO DE TOQUE, e por isso ele engole o respiro do cartão.

   Medido em 02/09/2026, a 375 px: pergunta de uma linha dava um alvo de
   22,4 px de altura, abaixo dos 24×24 que a WCAG 2.2 pede (SC 2.5.8). As de
   duas linhas passavam com 44,8 px, mas por acidente do texto — não por
   desenho, e o texto muda.

   A margem negativa cancela o padding: o alvo se estica até a borda do
   cartão sem crescer um pixel na página, e o topo inteiro do cartão fica
   clicável, que é o que se espera de uma sanfona. */

.pergunta__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-2);
    margin: calc(var(--espaco-3) * -1);
    padding: var(--espaco-3);
    font-family: var(--fonte-titulo);
    font-weight: 500;
    color: var(--cor-branco-gelo);
    cursor: pointer;
    list-style: none;
}

.pergunta__titulo::-webkit-details-marker { display: none; }

/* Sem `float`: dentro de um flex, o pseudoelemento já é o segundo item e o
   `space-between` o joga para a direita sozinho. */

.pergunta__titulo::after {
    content: "+";
    color: var(--cor-menta);
}

/* O contorno do foco desenharia 3 px para fora do cartão agora que o alvo
   encosta na borda. Aqui ele desenha por dentro. */

.pergunta__titulo:focus-visible { outline-offset: -2px; }

.pergunta[open] .pergunta__titulo::after { content: "–"; }

.pergunta__resposta {
    margin-top: var(--espaco-2);
    color: var(--cor-cinza-nevoa);
}

/* Chamada final */

.chamada {
    display: grid;
    gap: var(--espaco-2);
    justify-items: center;
    text-align: center;
    padding: var(--espaco-6) var(--espaco-3);
    /* AURORA DE DUAS CORES E ARO DE ESPECTRO — onda 2, 28/09/2026: a menta
       acende de um canto, o profundo do outro, e a borda é o espectro. A mira
       de captura em volta vem da classe `.mira`, no fim da folha. */
    border: 1px solid transparent;
    border-radius: var(--raio-modal);
    background:
        radial-gradient(60% 120% at 20% 0%, color-mix(in srgb, var(--cor-menta) 16%, transparent), transparent 60%) padding-box,
        radial-gradient(50% 120% at 85% 100%, color-mix(in srgb, var(--cor-profundo) 18%, transparent), transparent 60%) padding-box,
        linear-gradient(var(--cor-navy-superficie), var(--cor-navy-superficie)) padding-box,
        var(--gradiente-espectro) border-box;
}

/* NO CELULAR OS DOIS BOTÕES CAÍAM PARA A ESQUERDA — 15/09/2026.

   `justify-items: center` centra a caixa dos botões, e não os botões dentro
   dela. Enquanto os dois cabem numa linha isso dá no mesmo; quando a linha
   quebra, a caixa fica com a largura do botão mais largo e o outro encosta na
   esquerda dela. Medido em 390: título e parágrafo centrados em x=188, e os
   dois botões começando os dois em x=49, com 149 e 228 de largura.

   `justify-content` age sobre cada linha do flex, então centra também a que
   sobrou sozinha. No desktop não muda nada: lá as duas cabem na mesma linha. */

.chamada .hero__acoes {
    justify-content: center;
}

/* AS DUAS PROMESSAS COMERCIAIS, a oferta do teste e o prazo para desistir,
   têm uma forma só: desde a onda 3, a pílula de vidro. A oferta leva a menta;
   o prazo fica no vidro. */
.garantia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-1) 12px;
    max-width: 47.5rem;
    margin: var(--espaco-4) auto 0;
    padding: var(--espaco-2) var(--espaco-3);
    border: 1px solid var(--borda-vidro-forte);
    border-radius: var(--raio-pilula);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent),
        color-mix(in srgb, var(--cor-branco-gelo) 1.5%, transparent));
    box-shadow: inset 0 4px 10px color-mix(in srgb, var(--cor-branco-gelo) 10%, transparent);
    color: var(--cor-branco-gelo);
    font-size: 0.9375rem;
    text-align: center;
}

.garantia strong { font-weight: 600; }
.garantia .texto-secundario { color: var(--cor-corpo); }
.garantia .garantia__icone { inline-size: 18px; block-size: 18px; color: var(--cor-menta); }
/* O prazo é uma frase só, e a 47,5 rem ela quebrava em duas por poucos pixels
   (a proposta a mostra numa linha): um pouco mais de largura, e não menos
   recuo. */
.garantia--prazo { max-width: 50rem; padding: var(--espaco-3) var(--espaco-4); border-radius: var(--raio-vidro); }

/* A OFERTA DO TESTE, no cabeçalho da página de preços.

   Mesma barra da garantia — as duas são promessas comerciais, e uma forma
   só para as duas é o que faz a página parecer desenhada em vez de montada.

   `fit-content` é a diferença que importa: a garantia lá embaixo ocupa a
   largura toda porque fecha uma seção; aqui a barra mora entre um título e
   um seletor centralizados, e esticada até as bordas do contêiner (1100px
   no desktop) virava uma régua com duas linhas de texto miúdo dentro. Com
   a largura do próprio texto, ela se lê como um selo.

   Desde a onda 3 o cabeçalho da página é bloco, e não grade: a distância
   até o parágrafo vem da margem de cima da própria `.garantia`.

   No celular as duas frases quebram em duas linhas, e um vão vertical largo
   deixaria a barra oca: entre linhas, 8px bastam para ler as duas como uma
   coisa só, e é o que o `gap` da `.garantia` já dá. */

.garantia--oferta {
    width: fit-content;
    max-width: 100%;
    border-color: color-mix(in srgb, var(--cor-menta) 40%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-menta) 10%, transparent),
        color-mix(in srgb, var(--cor-menta) 3%, transparent));
    box-shadow: 0 0 40px -12px color-mix(in srgb, var(--cor-menta) 50%, transparent);
}

.garantia--oferta strong { color: color-mix(in srgb, var(--cor-menta) 55%, var(--cor-branco-gelo)); }

/* Formulários — §4. Rótulo sempre visível: placeholder como rótulo some
   quando o campo é preenchido, e some de vez para leitor de tela. */

.conteudo--estreito { max-width: 34rem; }

/* Nas telas de coluna estreita o `h1` volta ao "título de tela" do
   DESIGN-SYSTEM (§2). O `--tamanho-destaque` nasceu para o hero da página
   inicial; aplicado numa coluna de 34 rem ele estoura — "Confirmar seu e-mail"
   chegava a quebrar no hífen, virando "Confirmar seu e-" e "mail". */

.conteudo--estreito h1 { font-size: var(--tamanho-tela); }

/* E O h2 DESCE JUNTO, senão os dois empatam — 21/09/2026.

   A linha acima baixa o h1 para 32, e o h2 global já é 32: numa coluna
   estreita os dois níveis saíam do mesmo tamanho e a hierarquia deixava de
   existir. Medido em /perfil e em /assinar, onde "Assinar" e "Você já tem um
   plano vigente" tinham exatamente a mesma altura de letra.

   É a mesma régua que o `.documento` logo abaixo já aplicava pelo mesmo
   motivo, e faltava no lado do formulário.

   O `:not([class])` protege quem tem tamanho próprio: `.cartao__titulo` já
   define o dele, e `.estado-da-tela__marca` é uma etiqueta em mono de 13 px
   que em /perfil é o h2 do painel. Os dois passariam a brigar com esta regra
   se ela valesse para todo h2. */
.conteudo--estreito h2:not([class]) { font-size: var(--tamanho-secao); }

/* O DOCUMENTO LONGO EM PROSA (termos, privacidade e segurança) tem o desenho
   no bloco das páginas legais, no fim da folha, desde 30/09/2026: o cartão, a
   medida de leitura de 70 caracteres, o filete entre as seções e o respiro do
   aviso de texto fora de vigor. A coluna estreita de antes
   (`.conteudo--documento`, 44 rem) e a grade do `.documento` saíram com o
   porte. Aqui fica o que vale para ele em qualquer desenho. */

/* ENDEREÇO E ROTA NÃO TÊM ONDE QUEBRAR, e a /seguranca é feita deles (25/09/2026).

   `release-assets.githubusercontent.com` e a rota da API do GitHub são uma
   palavra só para o navegador, mais larga que os 327 px que sobram no
   telefone, e sem ponto de quebra a página inteira passaria a rolar para o
   lado. `anywhere`, e não `break-word`: só ele entra na conta da largura
   mínima, que é o que uma grade usa para dimensionar a coluna.

   A família mono vem nomeada para o código usar a mesma mono da casa, a do
   ordinal e das medidas, e não a genérica que o navegador escolheria. */
.documento code {
    font-family: var(--fonte-mono);
    overflow-wrap: anywhere;
}

.documento h3 { overflow-wrap: anywhere; }

.formulario {
    display: grid;
    gap: var(--espaco-3);
}

/* A TELA DE CONTA GANHOU UMA SEGUNDA COLUNA em 18/09/2026 (/entrar e
   /criar-conta), com o apoio ao lado do formulário, e as duas eram as únicas a
   usar a grade dela (`.tela-de-conta`, `.tela-de-conta__forma`). Na onda 3
   (30/09/2026) as duas passaram à porta, e o apoio mora no bloco das telas de
   conta, no fim da folha, com as regras que eram daqui. A razão da coluna
   continua a mesma: nenhuma frase dela é nova, e ela responde as dúvidas que
   aparecem exatamente ali, antes de a pessoa sair para procurar. */

.campo {
    display: grid;
    gap: var(--espaco-1);
}

.campo__rotulo {
    font-family: var(--fonte-titulo);
    font-weight: 500;
    color: var(--cor-branco-gelo);
}

.campo__entrada {
    width: 100%;
    min-height: 40px;
    padding: 0 var(--espaco-2);
    border-radius: var(--raio-controle);
    border: 1px solid var(--cor-toggle-desligado);
    background-color: var(--cor-navy-superficie);
    color: var(--cor-branco-gelo);
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-corpo);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.campo__entrada:hover { border-color: color-mix(in srgb, var(--cor-menta) 45%, transparent); }

.campo__entrada:focus {
    outline: none;
    border-color: var(--cor-menta);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-menta) 22%, transparent);
}

/* O TEXTO DE AJUDA PRECISA DE RESPIRO. A grade do campo dá o mesmo vão de 8 px
   ao rótulo, ao controle e à ajuda — e com o mesmo vão dos três a ajuda parece
   colada no controle, como se fosse parte dele. Ela é comentário sobre o
   controle, e comentário fica um pouco mais longe. Vale em toda tela com
   formulário, que é onde isto aparecia. */
.campo__ajuda {
    margin-top: var(--espaco-1);
    font-size: var(--tamanho-legenda);
    line-height: 1.55;
    color: var(--cor-cinza-nevoa);
}

/* Campo de quantidade — os assentos do Time.

   O seletor nativo do navegador (as setinhas de girar) não se estiliza: ele
   desenha um bloco claro na borda do campo, que sobre o tema escuro aparece
   como um retângulo branco fora de lugar. Some daqui; o número é curto e se
   digita, e a largura passa a caber o que se digita em vez de atravessar a
   coluna inteira. */

.campo__quantidade {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
}

.campo__quantidade .campo__entrada {
    width: 6rem;
    text-align: center;
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-secao);
    appearance: textfield;
    -moz-appearance: textfield;
}

.campo__quantidade .campo__entrada::-webkit-outer-spin-button,
.campo__quantidade .campo__entrada::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.campo__unidade {
    color: var(--cor-cinza-nevoa);
    font-size: var(--tamanho-corpo);
}

/* Escolha entre opções que se excluem, como o período de cobrança. São rádios
   de verdade, e não botões com aparência de rádio: a tela precisa funcionar com
   script bloqueado, e o navegador já faz isto sozinho.

   O fieldset não vira grade de propósito. O <legend> entra no fluxo da grade em
   parte dos navegadores e sai do lugar; o espaçamento fica nas opções. */

.escolha {
    margin: 0;
    padding: 0;
    border: none;
}

.escolha > legend {
    padding: 0;
}

.escolha__opcao {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-2);
    margin-top: var(--espaco-2);
    padding: var(--espaco-2);
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-controle);
    background-color: var(--cor-navy-superficie);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.escolha__opcao:hover { border-color: color-mix(in srgb, var(--cor-menta) 45%, transparent); }

/* A opção marcada se destaca pela borda inteira, e não só pelo ponto do rádio:
   num cartão deste tamanho o ponto é pequeno demais para ser o único sinal.
   Sem suporte a :has(), o ponto continua lá e a escolha continua legível. */

.escolha__opcao:has(input:checked) {
    border-color: var(--cor-menta);
}

.escolha__opcao:has(input:focus-visible) {
    border-color: var(--cor-menta);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-menta) 22%, transparent);
}

.escolha__opcao input {
    /* Alinha com a primeira linha do texto, que é maior que o controle. */
    margin-top: 4px;
    accent-color: var(--cor-menta);
}

/* Grade aqui é seguro: os dois filhos são blocos próprios, e não uma frase com
   marcação no meio dela (§Convenções). */

.escolha__texto {
    display: grid;
    gap: var(--espaco-1);
}

.escolha__titulo {
    font-family: var(--fonte-titulo);
    font-weight: 500;
    color: var(--cor-branco-gelo);
}

/* Olho de revelar a senha. O botão é criado pelo animacoes.js e a classe
   `campo--com-olho` também: sem script, nada disso existe e o campo fica com o
   padding normal, em vez de reservar espaço para um botão que não veio. */

/* O envoltório existe só para o botão ter contra o que se alinhar: o `.campo`
   é a etiqueta inteira, com rótulo em cima e ajuda embaixo, e ancorar nele
   obrigava a adivinhar a altura do rótulo em pixels. Ancorado aqui, o botão
   centraliza no campo sozinho — inclusive quando o rótulo quebra em duas
   linhas, que era onde o valor fixo errava. */

.campo__envoltorio {
    position: relative;
    display: grid;
}

.campo--com-olho .campo__entrada {
    padding-right: 5.5rem;
}

.campo__olho {
    position: absolute;
    right: var(--espaco-1);
    top: 50%;
    transform: translateY(-50%);
    height: 28px;
    padding-inline: var(--espaco-2);
    border: none;
    border-radius: var(--raio-controle);
    background-color: transparent;
    color: var(--cor-cinza-nevoa);
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-legenda);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
}

.campo__olho:hover {
    color: var(--cor-menta);
    background-color: color-mix(in srgb, var(--cor-menta) 10%, transparent);
}

/* A folga de 3px do contorno padrão vazaria para fora da borda do campo, e o
   foco pareceria um defeito de alinhamento. Aqui ele encosta no botão. */

.campo__olho:focus-visible {
    outline-offset: 0;
}

/* Aviso — a cor não é o único sinal (§7): o texto sozinho diz o que houve,
   para quem não distingue vermelho de verde e para quem lê por áudio. */

.aviso {
    margin: 0;
    padding: var(--espaco-2);
    border-radius: var(--raio-controle);
    border: 1px solid currentcolor;
    font-size: var(--tamanho-corpo);
}

.aviso--erro {
    background-color: color-mix(in srgb, var(--cor-erro) 12%, transparent);
    color: var(--cor-erro);
}

.aviso--certo {
    background-color: color-mix(in srgb, var(--cor-menta) 12%, transparent);
    color: var(--cor-menta);
}

/* O ValidationSummary é uma <ul>, e o marcador precisa de recuo próprio */

ul.aviso { padding-left: var(--espaco-4); }

.lista-simples {
    display: grid;
    gap: var(--espaco-1);
    margin: 0;
    padding-left: var(--espaco-2);
}

/* Utilitários de espaçamento — só a grade de 8 px, nada de estilo solto na marcação */

.espaco-acima-3 { margin-top: var(--espaco-3); }
.espaco-acima-6 { margin-top: var(--espaco-6); }

/* Presente para quem lê por áudio, invisível na tela. É a receita do recorte,
   e não display:none, porque display:none some também do leitor de tela — o
   que deixaria a coluna de ações da tabela sem nome nenhum. */

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Quem pede menos movimento não recebe nenhum */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .botao:hover,
    .cartao:hover {
        transform: none;
    }
}
.centrado { text-align: center; }

/* A BARRA CABE OU NÃO CABE, e o número mudou na onda 3.

   A régua de antes (871 px, medida em 16/09/2026 item a item) era de uma barra
   com os links à direita. Na onda 3 os links vão para o meio, em pílulas, e a
   conta refeita dá: logo 154, os quatro links 425, "Entrar" 77, a ação 182 e
   os dois vãos de 24, mais 48 de recuo do contêiner: cerca de 950 px com
   "Criar conta e baixar" inteiro, e 870 com o complemento fora.

   Por isso dois cortes, e nessa ordem. Abaixo de 60 rem o complemento sai do
   botão, e a barra cabe até 56 rem com "Criar conta"; abaixo de 56 rem os
   links vão para o Menu, que existe justamente para isso. Não há meio-termo
   que preserve os links abaixo de 56 rem: o que não cabe é o conjunto.

   SEPARADO do bloco de 40rem de propósito. Lá embaixo moram as cedidas do
   TELEFONE PEQUENO, calibradas em 360 px. São duas perguntas diferentes na
   mesma folha, e têm dois números. */

@media (max-width: 60rem) {
    .cabecalho .botao__complemento { display: none; }
}

@media (max-width: 56rem) {
    .cabecalho__nav { display: none; }
    .menu-movel { display: block; }
}

@media (max-width: 40rem) {
    .secao { padding-block: var(--espaco-8); }

    /* O CABEÇALHO EM 360 PX, corrigido em 15/09/2026 e refeito na onda 3.

       Nenhum link de texto na barra do celular: eles todos estão no Menu, e
       cada um que ficasse aqui empurraria o botão para fora da tela. Sobra o
       que é ação — Baixar, ou Sair — e o próprio Menu. O nome de quem entrou
       também sai, porque a Minha conta está no Menu.

       O RÓTULO DE QUEM NÃO ENTROU TROCA DE VEZ: "Criar conta" pede 129 px onde
       sobram 86, e o botão diz "Baixar" (BotaoDeDownload). O recuo interno cai
       para 14 e a ação não quebra nunca: `nowrap` garante o resultado em vez
       de torcer por ele. A altura não muda, então a área de toque continua a
       mesma. */
    .cabecalho__entrar { display: none; }

    .cabecalho__barra,
    .cabecalho__acoes { gap: var(--espaco-1); }

    .cabecalho .botao {
        white-space: nowrap;
        padding-inline: 14px;
    }

    .cabecalho .botao__rotulo-curto { display: inline; }
    .cabecalho .botao__rotulo-longo { display: none; }

    /* O logo do kit, a 32 px de altura, tem 154 de largura: metade de uma tela
       de 360 com o botão e o Menu ao lado. A 26 ele tem 125, e o conjunto cabe
       com o respiro de 24 dos dois lados. */
    .cabecalho__logo img { height: 26px; }
}

/* Abaixo de 320 px nem o logo reduzido cabe com o respiro de 24 px de cada
   lado. A margem cede antes do conteúdo: é o que mantém a navegação dentro da
   tela em aparelho pequeno, em vez de deixá-la sair pela direita. */

@media (max-width: 20rem) {
    .conteudo { padding-inline: var(--espaco-2); }
    .cabecalho__logo img { height: 22px; }

    /* Em 320 px o botão Menu passava 6 px da tela com o respiro normal. O
       respiro dele cede, e não a área de toque: a altura fica igual. */
    .menu-movel__botao { padding-inline: var(--espaco-1); }
}

/* MOVIMENTO, SEM BIBLIOTECA E SEM ESCONDER — reescrito em 15/09/2026.

   Até esta data, quem escondia era o script: o animacoes.js punha a classe
   `com-movimento` no documento, o CSS zerava a opacidade dos alvos, e o
   Anime.js os revelava um a um. Eram 115 KB de biblioteca para duas entradas
   em fade, e o arranjo tinha um defeito estrutural: alvo escondido cuja
   revelação falhasse ficava invisível para sempre. Aconteceu duas vezes, com a
   figura da galeria em 05/09 e com o herói inteiro, que piscava meio segundo
   depois de já ter aparecido.

   AGORA NADA ESCONDE NADA. O elemento nasce visível na marcação, e a animação
   apenas o traz de onde ele já estaria: se o navegador não souber animar, ele
   já está no lugar certo, pronto e legível. É a mesma inversão da barra de
   download, e é a ordem que torna a falha inofensiva.

   `animation-timeline: view()` faz o trabalho que o observador fazia: o
   navegador liga o progresso da animação à posição do elemento na janela, sem
   uma linha de JavaScript e sem baixar nada. `entry 0%` a `entry 45%` é o
   trecho em que ele está entrando pela borda de baixo.

   O `@supports` COM O PADRÃO VISÍVEL é a defesa, e a ordem importa: onde
   `view()` não existir, nada deste bloco se aplica e as imagens simplesmente
   estão lá. Escrito ao contrário, navegador sem suporte ficaria com a página
   vazia — que é exatamente o defeito que esta reescrita veio apagar.

   SÓ IMAGEM ABAIXO DA DOBRA entra animada, e a lista é curta de propósito:
   texto corrido aparece como texto, e nada acima da dobra anima entrada. */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .mostra__midia {
            animation: entrada-ao-rolar linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 45%;
        }

        @keyframes entrada-ao-rolar {
            from {
                opacity: 0;
                transform: translateY(24px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    }
}

/* ============================================================
   AS GARANTIAS VERIFICÁVEIS, UMA POR VEZ
   ============================================================

   Sete blocos de título e parágrafo, todos abertos, viravam um paredão de
   texto no meio da home — logo depois de outra seção de cartões. Quem rola
   rápido não lia nenhum.

   `<details>` nativo: abre e fecha sem uma linha de JavaScript, responde ao
   teclado e ao leitor de tela sem ARIA nenhum, e o Ctrl+F do navegador
   encontra o texto fechado e abre o bloco sozinho.

   O nome não é `.garantia` porque essa classe já é o aviso de /precos. */

.verificaveis {
    display: grid;
    gap: var(--espaco-2);
    margin-top: var(--espaco-6);
}

.verificavel {
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-cartao);
    background: var(--cor-navy-superficie);
}

.verificavel__titulo {
    display: flex;
    gap: var(--espaco-3);
    align-items: baseline;
    padding: var(--espaco-3) var(--espaco-4);
    font-weight: 600;
    color: var(--cor-branco-gelo);
    cursor: pointer;

    /* O triângulo padrão do navegador sai, e entra um sinal nosso, alinhado
       com o resto da página. `list-style` cobre Firefox e Chrome; o
       ::-webkit-details-marker cobre o Safari, que ignora os dois. */
    list-style: none;
}

.verificavel__titulo::-webkit-details-marker {
    display: none;
}

/* O sinal vem ANTES do texto, e não depois, para os sete ficarem numa coluna
   só — com ele no fim, cada um pararia num lugar diferente. */
.verificavel__titulo::before {
    content: "+";
    flex: none;
    width: 1ch;
    font-size: var(--tamanho-tela);
    line-height: 1;
    color: var(--cor-menta);
}

.verificavel[open] .verificavel__titulo::before {
    content: "−";
}

.verificavel__titulo:hover {
    color: var(--cor-menta);
}

/* O foco fica no bloco inteiro, e não só na linha do título: é o que o
   teclado seleciona, e a moldura precisa cercar o que vai abrir. */
.verificavel__titulo:focus-visible {
    outline: 2px solid var(--cor-menta);
    outline-offset: -2px;
    border-radius: var(--raio-cartao);
}

.verificavel__corpo {
    /* Recuo à esquerda do tamanho do sinal mais o vão, para o texto começar
       alinhado com o título, e não embaixo do "+". */
    margin: 0;
    padding: 0 var(--espaco-4) var(--espaco-4) calc(var(--espaco-4) + 1ch + var(--espaco-3));
}

/* ============================================================
   A MONTAGEM DO FLUXO
   ============================================================

   Largura de vídeo, e não largura de seção: em 16:9 ocupando a coluna inteira,
   o bloco passava de 700px de altura e virava um buraco no meio da página,
   chamando mais atenção do que a seção toda.

   A proporção vai declarada aqui, e não deixada para o arquivo: sem ela o
   espaço é zero até o cartaz baixar, e a página desce de uma vez quando ele
   chega — que é exatamente o que o CLS mede. Com `preload="none"`, o cartaz só
   vem quando alguém rola até aqui. */

/* `margin-inline`, e NUNCA `margin: 0 auto`: o atalho zera também o topo, e
   como esta regra vem depois no arquivo ela vencia o `.espaco-acima-6` do
   elemento — o vídeo subia e cobria a legenda da figura acima. Visto em
   produção em 03/09/2026. */
.demonstracao {
    max-width: 44rem;
    margin-inline: auto;
}

.demonstracao__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-cartao);
    background-color: var(--cor-navy-superficie);
}

/* ============================================================
   COMANDO PARA COPIAR
   ============================================================

   `Get-FileHash` numa linha de texto corrido quebraria no meio numa tela
   estreita, e comando colado pela metade é o pior resultado possível de uma
   página que existe para dar segurança. Rola na horizontal em vez de
   quebrar. */

.bloco-comando {
    overflow-x: auto;
    margin: 0;
    padding: var(--espaco-3) var(--espaco-4);
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-cartao);
    background: var(--cor-navy-superficie);
    color: var(--cor-branco-gelo);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--tamanho-corpo);
    line-height: 1.6;
}

.bloco-comando code {
    white-space: pre;
}

/* O MODELO PARA COPIAR QUEBRA A LINHA, e o comando continua sem quebrar. O
   que se cola do modelo é texto para preencher, e não uma linha que o
   terminal executa: rolando para o lado, a 375 px, a caixa mostrava 29 dos
   91 caracteres da linha mais longa. A quebra é só de tela, e copiar leva as
   linhas como estão no modelo. Medido em 29/09/2026. */
.bloco-comando--texto code {
    white-space: pre-wrap;
}

/* ============================================================
   O PAINEL DA ADMINISTRAÇÃO
   ============================================================

   ISTO NÃO É PÁGINA DE VENDA, e o ritmo tem de ser outro. O resto do site abre
   com título de 52 px e respira 96 px entre seções: cadência de quem está
   sendo convencido, rola uma vez e decide. Quem abre a administração já
   decidiu — vem trabalhar, volta várias vezes ao dia e quer ver o número sem
   rolar. Daí título de tela, seções de 48 px e navegação em fita.

   Tudo aqui mora sob `.painel`, e por isso nada disto vaza para as páginas de
   fora: a densidade que serve a um painel estragaria a leitura de uma página
   que precisa convencer. */

.painel {
    /* Duas colunas em 1120 px, e não três: as listas de origem e de página
       ficam lado a lado, e cada uma com largura para o endereço inteiro. */
    --coluna-minima: 26rem;
}

/* O cabeçalho e a fita, coladas numa régua que atravessa a tela inteira: é ela
   que separa "onde estou" de "o que estou vendo". Régua da largura do conteúdo
   pararia no meio do caminho, e o painel pareceria uma caixa solta na página.

   NA ONDA 3 (30/09/2026) O TOPO GANHOU O CHÃO DAS PORTAS: sobe por baixo do
   cabeçalho do site, com a grade que apaga nas bordas, a luz de cima e um
   filete de luz sobre a régua, onde a fita encosta. O recorte é dele, e a
   grade e o filete não passam da largura da tela. */
.painel__topo {
    position: relative;
    isolation: isolate;
    margin-top: calc(-1 * var(--altura-cabecalho));
    padding-top: calc(var(--altura-cabecalho) + var(--espaco-8));
    overflow: hidden;
    border-bottom: 1px solid var(--borda-vidro);
    background:
        radial-gradient(55% 130% at 50% -30%, color-mix(in srgb, var(--cor-luz-media) 24%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--cor-luz-funda) 16%, var(--cor-noite)), var(--cor-noite));
}

.painel__topo::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--cor-branco-gelo) 3.5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cor-branco-gelo) 3.5%, transparent) 1px, transparent 1px);
    background-size: var(--espaco-8) var(--espaco-8);
    background-position: center top;
    mask-image: radial-gradient(60% 90% at 50% 0%, black 20%, transparent 75%);
    pointer-events: none;
}

.painel__topo::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: -1px;
    inline-size: min(900px, 90%);
    block-size: 1px;
    translate: -50% 0;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--cor-luz) 70%, transparent),
        color-mix(in srgb, var(--cor-menta) 60%, transparent),
        transparent);
    pointer-events: none;
}

/* "Administração" vira a pílula das portas, com o ponto de menta. */
.painel__ordem {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    margin: 0;
    padding: 6px 14px;
    border: 1px solid var(--borda-vidro-forte);
    border-radius: var(--raio-pilula);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-noite) 10%, transparent),
        color-mix(in srgb, var(--cor-noite) 40%, transparent));
    box-shadow: inset 0 4px 8px color-mix(in srgb, var(--cor-branco-gelo) 12%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-branco-gelo);
}

.painel__ordem::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--cor-menta);
    box-shadow: 0 0 10px var(--cor-menta);
}

.painel__titulo {
    margin: var(--espaco-2) 0 0;
    font-size: clamp(2.1rem, 4.2vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.painel__resumo {
    /* 68 caracteres é onde a linha ainda se lê sem o olho perder o começo da
       seguinte. Sem o teto, o resumo atravessa 1120 px inteiros. */
    max-width: 68ch;
    margin: 12px 0 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--cor-corpo);
}

/* ------------------------------------------------------------
   A FITA DOS MÓDULOS

   Quatro endereços de verdade, e não abas em JavaScript: cada módulo sobrevive
   ao F5, entra no histórico e funciona sem script — a mesma régua do resto do
   site.

   FITA, e não parede de cartões. Até 03/09/2026 cada módulo era um cartão com
   nome de 32 px e uma nota embaixo: os quatro juntos ocupavam um terço da tela
   e pesavam mais que o conteúdo que anunciavam — quem chegava para ver os
   números via primeiro o menu. Menu é mobília: precisa estar à mão e não
   precisa ser lido duas vezes. */

.modulos {
    display: flex;
    gap: var(--espaco-3);
    margin-top: var(--espaco-4);

    /* A marca do módulo aberto encosta na régua do cabeçalho em vez de flutuar
       um pixel acima dela. */
    margin-bottom: -1px;

    /* Em tela estreita a fita corre para o lado; quebrar em duas linhas
       empurraria o conteúdo para baixo e desmancharia a régua. */
    overflow-x: auto;
    scrollbar-width: none;
}

.modulos::-webkit-scrollbar {
    display: none;
}

.modulo {
    flex: none;
    padding-bottom: var(--espaco-2);
    border-bottom: 2px solid transparent;
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-corpo);
    color: var(--cor-cinza-nevoa);
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease, border-color 160ms ease;
}

.modulo:hover {
    color: var(--cor-branco-gelo);
    border-bottom-color: var(--cor-toggle-desligado);
}

/* O módulo aberto fica marcado pela COR E PELO TRAÇO, e não só pela cor:
   distinção que depende de uma cor sozinha some para quem não a enxerga. O
   `aria-current` na marcação diz a mesma coisa para quem lê por áudio. */
.modulo--atual,
.modulo--atual:hover {
    color: var(--cor-menta);
    border-bottom-color: var(--cor-menta);
}

/* NA ADMINISTRAÇÃO, desde a onda 3, a fita encosta na régua do topo e o
   aberto acende por baixo, com o traço de menta de /equipe: cor e traço, como
   antes. Sob `.painel`, porque a fita de /equipe tem o desenho dela. */
.painel .modulos {
    gap: 4px;
    margin-block: 36px 0;
}

.painel .modulo {
    position: relative;
    padding: 14px var(--espaco-2) var(--espaco-2);
    border-bottom: 0;
    font-family: var(--fonte-corpo);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cor-cinza-fraco);
}

.painel .modulo:hover,
.painel .modulo--atual { color: var(--cor-branco-gelo); }

.painel .modulo::after {
    content: "";
    position: absolute;
    inset-inline: 12px;
    inset-block-end: 0;
    block-size: 2px;
    border-radius: 2px;
    background: var(--cor-menta);
    box-shadow: 0 0 14px color-mix(in srgb, var(--cor-menta) 80%, transparent);
    opacity: 0;
}

.painel .modulo--atual::after { opacity: 1; }

.painel .modulo:focus-visible {
    outline: 2px solid var(--cor-menta);
    outline-offset: -2px;
    border-radius: var(--raio-controle);
}

.painel__corpo {
    padding-block: var(--espaco-6) 128px;
}

/* O QUE VEM DEPOIS DA FITA PRECISA DE VÃO. No painel da administração a fita
   fecha o cabeçalho e o conteúdo vem noutra seção, com folga própria; nas
   páginas da equipe ela está no meio do fluxo, e o que vem em seguida encostava
   nela — um aviso colado no traço da aba parece parte da aba. O seletor é a
   adjacência, então lá, onde nada segue a fita, ele não casa com nada. */
.modulos + * {
    margin-top: var(--espaco-4);
}

/* Cada assunto é um cartão desde a onda 3, e o cartão já separa: os 48 px de
   quando eles eram só um título e uma régua viraram 24. */
.painel__blocos {
    display: grid;
    gap: var(--espaco-3);
    align-content: start;
}

/* ------------------------------------------------------------
   UM ASSUNTO DO PAINEL

   NUM CARTÃO DE VIDRO desde a onda 3 (30/09/2026), o material dos cartões da
   área do cliente. O estado, mais abaixo, veste o mesmo cartão. */

.grupo {
    position: relative;
    display: grid;
    gap: 20px;
    align-content: start;
    padding: 28px var(--espaco-4) 30px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-vidro);
    background: var(--material-cartao);
    box-shadow:
        inset 0 -4px 100px 20px color-mix(in srgb, var(--cor-luz-media) 8%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 7%, transparent);
}

/* Nome à esquerda, recorte à direita, e uma régua embaixo: o recorte é o que
   responde "de quando são estes números", que é a primeira pergunta de quem
   compara duas linhas. Longe do título, ela vira nota de rodapé e não é lida. */
.grupo__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-1) var(--espaco-2);
    padding-bottom: var(--espaco-2);
    border-bottom: 1px solid var(--borda-vidro);
}

.grupo__nome {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
}

.grupo__janela {
    margin: 0;
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--cor-cinza-fraco);
}

/* LINHA DE LEITURA, e não largura de tela. Fora do painel todo texto corre
   dentro de `conteudo--estreito`; aqui o conteúdo é largo por causa das
   barras, e o parágrafo herdava os 1120 px — 130 caracteres por linha, em que
   o olho volta e não acha o começo da seguinte. O aviso vazio fica de fora:
   ele é uma caixa, e não um parágrafo. */
.grupo > p:not(.vazio) {
    max-width: 68ch;
}

.painel .texto-secundario {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--cor-corpo);
}

.painel .texto-secundario + .texto-secundario { margin-top: -8px; }

/* Campo com 1120 px de largura promete um texto longo, e o que se digita ali
   é um e-mail. A largura do campo é parte do enunciado da pergunta. */
.painel .formulario {
    max-width: 34rem;
}

/* O botão do formulário é ação, e não barra: fica do tamanho do rótulo. */
.painel .formulario .botao {
    width: auto;
    min-height: 48px;
    padding-inline: var(--espaco-3);
}

.painel .formulario .acoes { margin-top: 4px; }

.painel .acoes { gap: 12px; }

/* ------------------------------------------------------------
   O FUNIL, EM CORRENTE — 21/09/2026

   Até esta data o funil era a mesma barra deitada dos rankings logo abaixo, e
   ela não sobrevive ao próprio funil: a barra é desenhada contra o maior do
   grupo, e num funil o maior é quase sempre o primeiro. Com 898 na home e 68
   na página de download, a segunda barra nascia com 7% da largura e a terceira
   com 2% — três traços que não se comparam entre si, ocupando a coluna mais
   larga da tela. A barra some justamente onde a queda é grande, que é onde se
   quer olhar.

   A CORRENTE PÕE A QUEDA NO VÃO ENTRE DOIS PASSOS, que é onde ela acontece. Os
   passos correm da esquerda para a direita como o funil corre, o número fica
   grande e em mono, e entre um e outro não existe mais nada além da razão que
   os liga. Antes ela era texto cinza na quarta coluna, a meia tela de distância
   dos dois números que relaciona.

   EM TELA ESTREITA A CORRENTE EMPILHA e a queda volta ao fluxo, acima do passo
   que ela introduz. É por isso que ela vem primeiro na marcação: em tela larga
   sai do fluxo e o `.corrente__valor` passa a ser o primeiro em fluxo, que é
   o que ancora a queda na altura do número. */

.corrente {
    /* O vão onde a queda mora. Vira coluna em tela larga e some em tela
       estreita, e por isso é variável: os dois estados leem o mesmo número. */
    --vao-da-queda: 56px;

    /* O tamanho do número, num lugar só: a queda e o fio que liga dois passos
       se alinham pelo meio dele, e o número muda com a largura da tela. */
    --tamanho-do-numero: clamp(2rem, 3vw, 2.5rem);

    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* `align-content: start` porque a corrente é grade esticada: sem ele a sobra
   de altura de uma coluna alta se reparte entre as linhas das colunas baixas, e
   o número, o nome e a nota descem uma escada cada um. É o mesmo defeito que as
   Convenções registram em «Grade que é esticada».

   CADA PASSO NUM CARTÃO DE VIDRO MIÚDO, desde a onda 3, dentro do cartão do
   assunto. */
.corrente__elo {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 20px 20px 18px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-branco-gelo) 4.5%, transparent),
        color-mix(in srgb, var(--cor-branco-gelo) 1.2%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
}

/* MONO, E DO TAMANHO DE UM TÍTULO DE TELA. O número é o conteúdo desta página,
   e não o rótulo dele. Em mono ele também alinha com os outros da fileira, que
   é o que deixa a corrente ler como uma régua em vez de quatro frases. */
.corrente__valor {
    margin: 2px 0 0;
    font-family: var(--fonte-mono);
    font-size: var(--tamanho-do-numero);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--cor-branco-gelo);
}

.corrente__nome {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cor-corpo);
}

.corrente__nota {
    margin: 0;
    font-size: 0.78125rem;
    line-height: 1.5;
    color: var(--cor-cinza-fraco);
}

/* EM LUZ, E NÃO EM CINZA: a queda é a única coisa desta corrente que responde
   "está mudando?", e ela é a razão de a corrente existir. Cinza a devolveria à
   condição de nota de rodapé, que era o estado anterior. Desde a onda 3 ela é
   uma pílula, que se lê como marca, e não como número a mais. */
.corrente__passagem {
    justify-self: start;
    margin: 0;
    padding: 2px var(--espaco-1);
    border: 1px solid color-mix(in srgb, var(--cor-luz) 30%, transparent);
    border-radius: var(--raio-pilula);
    background-color: var(--cor-navy);
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--cor-luz);
}

.corrente__legenda {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--cor-cinza-fraco);
}

/* A legenda da corrente é miúda, e 96 caracteres dela ocupam o que 68 do
   corpo ocupam: a linha de leitura, medida em pixels, é a mesma. */
.grupo > p.corrente__legenda {
    max-width: 96ch;
}

/* A FAÍSCA: os sete dias, embaixo do total.

   `preserveAspectRatio="none"` estica a caixa nos dois eixos, e é por isso que
   aqui só há retângulo: texto e traço distorceriam, preenchimento não. A
   geometria sai em inteiro do C# — atributo de SVG lê número no formato
   invariante, e a cultura desta tela é pt-BR.

   O TRILHO AJUDA O DIA ZERADO A EXISTIR: sem ele, um domingo sem acesso é
   ausência de barra, e com ele é um vão na fileira. Ele é andaime, e não dado,
   e fica apagado de propósito: nenhum ajuste de opacidade o faria passar o
   mínimo de 3:1 de elemento gráfico sem que ele virasse a coisa mais clara do
   gráfico e fosse lido como o dado. Quem carrega o valor é a barra, contra o
   trilho; e o número exato de cada dia está na tabela logo abaixo, em texto.

   NA LUZ, E NÃO NO CIANO, desde a onda 3: é a cor dos números do painel. As
   razões de contraste abaixo são as desta paleta, medidas nos pixels da
   réplica, com o trilho a 6% do branco-gelo.

   44 PX DE ALTURA, E NÃO 28. Em 28 a barra mais alta ficava mais larga que
   alta e a série inteira lia como uma fileira de traços: a diferença entre um
   dia de 40 e um de 180 cabia em quinze pixels. A altura é o eixo que carrega
   a informação aqui, e ela precisa de amplitude para carregar. */
.faisca {
    display: block;
    inline-size: 100%;
    block-size: 44px;
    margin-block-start: var(--espaco-1);
}

.faisca__trilho {
    fill: color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
}

.faisca__barra {
    fill: var(--cor-luz);
}

/* HOJE ESTÁ PELA METADE, e a última barra é a única que ainda vai crescer. Sem
   a distinção a faísca termina em queda toda manhã, e a queda é só o relógio.
   A tabela abaixo diz o mesmo com palavras, que é o que sustenta a diferença
   para quem não separa as duas cores.

   A BARRA DE HOJE É DADO, e precisa se destacar do leito como qualquer outra,
   com o mínimo de 3:1 de elemento gráfico, e ficar longe das cheias para se
   ver que ela é outra coisa. Medido nos pixels da réplica em 30/09/2026: a
   cheia fica a 9,06:1 do trilho, a de hoje a 3,33:1, e as duas a 2,72:1 uma
   da outra; o trilho fica a 1,12:1 do fundo do passo, que é andaime. */
.faisca__barra--hoje {
    fill: color-mix(in srgb, var(--cor-luz) 50%, transparent);
}

@media (min-width: 60rem) {
    .corrente {
        /* Coluna automática, e não `auto-fit`: `auto-fit` quebraria a corrente
           de cinco passos em quatro mais um, e o passo órfão na segunda linha
           deixaria de ter um vão à esquerda para a queda morar. Uma corrente é
           uma fileira ou é uma pilha, e não há terceiro estado. */
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        column-gap: var(--vao-da-queda);
    }

    /* A queda sai do fluxo e vai para o meio do vão à esquerda do próprio
       passo, centrada na altura do número, sobre um fio que liga os dois. A
       altura sai da conta, e não de um número fixo: o valor começa a 22 px do
       topo do cartão (20 de recuo e 2 de margem) e, com `line-height: 1`, a
       caixa dele tem exatamente o tamanho da letra. A queda fica na linha do
       número mesmo quando o nome do passo ao lado quebra em duas, e em
       qualquer largura. */
    .corrente__passagem {
        position: absolute;
        z-index: 1;
        inset-block-start: calc(22px + var(--tamanho-do-numero) / 2);
        inset-inline-start: calc(var(--vao-da-queda) / -2);
        translate: -50% -50%;
    }

    .corrente__elo:not(:first-child)::before {
        content: "";
        position: absolute;
        inset-inline-end: 100%;
        inset-block-start: calc(22px + var(--tamanho-do-numero) / 2);
        inline-size: calc(var(--vao-da-queda) + 1px);
        block-size: 1px;
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--cor-branco-gelo) 12%, transparent),
            color-mix(in srgb, var(--cor-luz) 55%, transparent));
    }
}

/* "EM USO" É A MÉTRICA-NORTE, e a corrente dela tem um passo só: o número
   grande de um lado, o que ele quer dizer do outro, e o cartão aceso em
   menta. */
.grupo:has(.corrente__elo:only-child) {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    column-gap: var(--espaco-4);
    border-color: color-mix(in srgb, var(--cor-menta) 30%, transparent);
    background:
        radial-gradient(50% 130% at 0% 0%, color-mix(in srgb, var(--cor-menta) 12%, transparent), transparent 60%),
        var(--material-cartao);
}

.grupo:has(.corrente__elo:only-child) > .grupo__cabecalho { grid-column: 1 / -1; }

.grupo:has(.corrente__elo:only-child) > .corrente__legenda {
    align-self: center;
    font-size: 0.875rem;
    color: var(--cor-corpo);
}

.corrente__elo:only-child {
    --tamanho-do-numero: clamp(3rem, 6vw, 4.25rem);

    padding: var(--espaco-3) var(--espaco-3) 22px;
    border-color: color-mix(in srgb, var(--cor-menta) 35%, transparent);
    background: color-mix(in srgb, var(--cor-menta) 5%, transparent);
}

.corrente__elo:only-child .corrente__valor {
    text-shadow: 0 0 40px color-mix(in srgb, var(--cor-menta) 45%, transparent);
}

/* ------------------------------------------------------------
   OS RANKINGS, EM BARRA

   Nome, barra, valor e participação — nesta ordem e em colunas alinhadas. Aqui
   a barra funciona, e é o inverso do que acontecia no funil: os vizinhos de um
   ranking são da mesma ordem de grandeza, e é entre eles que a comparação de
   comprimento decide alguma coisa. */

/* Cada ranking é um cartão, e na grade de duas colunas os cartões ficam do
   tamanho do que têm: uma lista de cinco não se estica até a de dez. */
.painel .grade { align-items: start; }

.degraus {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* QUEM ENCOLHE É O RÓTULO, e não a barra. Com folga na coluna do nome, um nome
   curto como "direto" deixava 300 px de vazio antes de uma barra de 144 — e a
   barra é justamente a parte que se compara. Os três rankings moram numa grade
   de duas colunas, então a largura de que se dispõe aqui é metade do painel.

   TRÊS COLUNAS, E A PARTICIPAÇÃO EMPILHADA SOB O VALOR. Em coluna própria ela
   custava 104 px à barra, que caía para 108 e voltava a ser o pedaço mais
   estreito da linha — o mesmo defeito acima, pelo outro lado. Empilhada, ela
   cabe na largura que o número já ocupava. */
.degrau {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) 5.5rem;
    align-items: center;
    gap: var(--espaco-1) var(--espaco-2);
}

.degrau__medida {
    display: grid;
    justify-items: end;
}

/* Todo nome cede com reticências, e não só o endereço: numa coluna que
   encolhe, "google.com" quebrado em duas linhas deixaria a barra boiando, o
   mesmo defeito do caminho logo abaixo. */
.degrau__nome {
    overflow: hidden;
    font-size: 0.875rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--cor-branco-gelo);
}

/* Aviso com mais de um fato: título, frase e lista. Parágrafo único com
   quatro fatos emendados por vírgula esconde o mais importante no meio, e quem
   lê um aviso passa o olho em vez de ler. */
.aviso__titulo {
    margin: 0 0 var(--espaco-1);
    font-family: var(--fonte-titulo);
    color: var(--cor-branco-gelo);
}

.aviso__lista {
    margin: var(--espaco-2) 0 0;
    padding-left: var(--espaco-3);
    display: grid;
    gap: var(--espaco-1);
}

/* Endereço não é frase: monoespaçado, para o olho descer a coluna sem se
   perder entre um caminho e outro, e em gelo, para se ver que é caminho. Um
   ponto abaixo do nome porque toda monoespaçada parece maior que a de texto
   no mesmo tamanho.

   CORTADO COM RETICÊNCIAS, e não quebrado: quebrando em qualquer ponto,
   `/baixar/CaptureHub.zip` virava duas linhas partidas no meio do nome do
   arquivo, e a linha inteira crescia junto — a barra ao lado ficava boiando.
   O caminho completo continua a um passe de mouse, no `title`. */
.degrau__nome--endereco {
    font-family: var(--fonte-mono);
    font-size: 0.8125rem;
    color: var(--cor-luz-gelo);
}

/* A BARRA DEIXOU DE SER `<meter>` EM 21/09/2026, E A RAZÃO É QUE ELA NUNCA
   VESTIU A PALETA.

   `meter` é o elemento certo no papel, uma medida dentro de uma faixa
   conhecida, e a receita que estava aqui é a que se conhece: `appearance:
   none` para tirar o desenho de fábrica, mais um pseudo-elemento por motor,
   porque não existe um que valha nos dois. O que a tela mostrava, em produção
   e na réplica medida no mesmo dia, era o desenho de fábrica: verde-limão
   sobre cinza-claro, duas cores que não existem em lugar nenhum deste site.
   O `appearance: none` chegava computado no elemento e o navegador pintava o
   widget dele assim mesmo.

   SVG DESENHA O QUE SE PEDE, em qualquer motor, e não depende de pseudo-
   elemento de fabricante nenhum. É o mesmo recurso que a faísca usa duas
   seções acima: uma forma de desenhar barra neste módulo, e não duas. A
   geometria sai em inteiro do C#, e nenhum `style` entra na marcação, que era
   a exigência de origem.

   A semântica que se perde era `aria-hidden` desde o primeiro dia, porque o
   número ao lado já diz o valor.

   AS PONTAS DO VALOR FICARAM RETAS. `preserveAspectRatio="none"` estica os
   dois eixos, e raio esticado vira elipse. Reta também é mais honesta num
   gráfico: a curva arredonda justamente o ponto onde o valor termina.

   O LEITO É QUE ARREDONDA, desde a onda 3, e pelo CSS da caixa, que recorta o
   SVG sem esticar raio nenhum: por dentro os retângulos continuam retos, e a
   barra termina reta onde o valor termina, menos a do primeiro colocado, que
   enche o leito até a ponta. */
.trilha {
    display: block;
    inline-size: 100%;
    block-size: var(--espaco-1);
    border-radius: var(--raio-pilula);
    overflow: hidden;
}

.trilha__leito {
    fill: color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
}

.trilha__cheio {
    fill: var(--cor-menta);
}

/* Branco, e não menta: a menta já está na barra ao lado. Repetida no número,
   ela deixaria de destacar o que quer que seja.

   MONO, desde 21/09/2026, pela mesma razão do número da corrente: coluna de
   números se desce com o olho, e a monoespaçada é o que mantém a unidade,
   a dezena e a centena na mesma vertical de cima a baixo. */
.degrau__valor {
    display: block;
    font-family: var(--fonte-mono);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--cor-branco-gelo);
}

/* A PARTICIPAÇÃO, e não a razão para a linha de cima: ranking não é sequência,
   e dizer que uma origem é "60% da anterior" não responde a pergunta nenhuma.
   Quanto ela vale do total, sim: a barra ao lado é relativa ao PRIMEIRO
   colocado, e uma barra de 60% da maior pode ser 8% do todo. */
.degrau__razao {
    display: block;
    font-family: var(--fonte-mono);
    font-size: 0.71875rem;
    font-variant-numeric: tabular-nums;
    color: var(--cor-cinza-fraco);
    white-space: nowrap;
}

/* ------------------------------------------------------------
   O QUE ESTÁ VALENDO AGORA

   Primeiro bloco das telas que têm um interruptor. Antes de trocar de faixa ou
   de ligar a demonstração, a pergunta é "como está?" — e ela merece o tamanho
   de um título, não uma linha de texto no meio de um parágrafo. */

/* Texto à esquerda, interruptor à direita, e o cartão aceso na cor do estado,
   que diz o estado sem depender de ler. Empilhado e alinhado à esquerda, o
   bloco ocupava 1120 px para mostrar uma palavra e deixava metade da largura
   vazia, e por isso o interruptor continua ao lado na onda 3, que trocou a
   tarja da borda esquerda pelo cartão de vidro inteiro aceso. */
.estado {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espaco-1) var(--espaco-4);
    padding: 28px var(--espaco-4) 30px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-vidro);
    background: var(--material-cartao);
    box-shadow:
        inset 0 -4px 100px 20px color-mix(in srgb, var(--cor-luz-media) 8%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 7%, transparent);
}

.estado__rotulo,
.estado__valor,
.estado__nota {
    grid-column: 1;
}

/* O botão atravessa as três linhas do texto e fica no meio delas.

   `span 3`, E NÃO `1 / -1`, desde 30/09/2026: `-1` é a última linha da grade
   EXPLÍCITA, e esta não declara linha nenhuma, então `1 / -1` ocupava só a
   primeira, e o botão ficava no alto, ao lado do rótulo. As três linhas são
   rótulo, valor e nota. */
.estado form {
    grid-column: 2;
    grid-row: 1 / span 3;
}

.estado__rotulo {
    margin: 0;
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
}

.estado__valor {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.04em;
    color: var(--cor-branco-gelo);
}

.estado__nota {
    max-width: 68ch;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--cor-corpo);
}

/* Vestida, a faixa é o que manda no aplicativo — acima da assinatura e do
   teste. O cartão aceso evita a demonstração feita a tarde inteira sem
   perceber que o perfil está fantasiado. */
.estado--marcado {
    border-color: color-mix(in srgb, var(--cor-menta) 45%, transparent);
    background:
        radial-gradient(55% 150% at 0% 0%, color-mix(in srgb, var(--cor-menta) 14%, transparent), transparent 60%),
        var(--material-cartao);
}

.estado--marcado .estado__valor {
    color: var(--cor-menta);
}

/* Ligado, o modo demonstração desfaz a garantia mais medida do produto. O
   bloco passa para a cor de aviso — a mesma que o aplicativo usa quando algo
   saiu do combinado — para que ninguém saia da tela sem ter visto. */
.estado--aceso {
    border-color: color-mix(in srgb, var(--cor-aviso) 45%, transparent);
    background:
        radial-gradient(55% 150% at 0% 0%, color-mix(in srgb, var(--cor-aviso) 12%, transparent), transparent 60%),
        var(--material-cartao);
}

.estado--aceso .estado__valor {
    color: color-mix(in srgb, var(--cor-aviso) 70%, var(--cor-branco-gelo));
}

/* ------------------------------------------------------------
   ESCOLHA ÚNICA, À VISTA

   Quatro faixas, trocadas várias vezes numa demonstração. Numa lista suspensa
   isso custava três atos — abrir, procurar, escolher — e escondia as opções e
   a que está vestida. Em fichas, custa dois e mostra tudo.

   A FICHA MORA DENTRO DE `.escolhas`, e o seletor diz isso (30/09/2026). Com
   `.escolha` sozinho, a regra pegava também o `fieldset.escolha` do período
   em /assinar, que é outra peça com o mesmo nome: o fieldset virava uma
   ficha de duas colunas, com borda de menta, e as duas opções saíam lado a
   lado, em vez de uma embaixo da outra. */

/* Cinco fichas numa fileira, desde a onda 3: 12,5 rem cabem cinco vezes no
   cartão, e a quinta não desce sozinha para a linha de baixo. */
.escolhas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr));
    gap: 12px;
    align-content: start;
}

/* O RÁDIO MORA NA QUINA DA FICHA, fora do fluxo, como o do período de
   /assinar: o nome e a nota ficam numa coluna só, alinhados entre as fichas. */
.escolhas > .escolha {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;

    /* As fichas têm alturas iguais, mas notas de tamanhos diferentes. Sem
       isto, a de uma linha centraliza o conteúdo e o nome dela desce alguns
       pixels — quatro nomes que deviam formar uma linha ficam em degrau. */
    align-content: start;
    gap: 4px;
    padding: 18px 18px 18px 52px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 2.5%, transparent);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.escolhas > .escolha:hover {
    border-color: color-mix(in srgb, var(--cor-branco-gelo) 22%, transparent);
}

/* A ficha inteira acende quando o rádio dentro dela está marcado, e é o `:has`
   que permite dizer isso sem uma linha de script. */
.escolhas > .escolha:has(:checked) {
    border-color: color-mix(in srgb, var(--cor-menta) 50%, transparent);
    background-color: color-mix(in srgb, var(--cor-menta) 6%, transparent);
}

/* O foco aparece na FICHA, e não no rádio: o rádio tem 20 px e fica na quina,
   e quem anda de teclado precisa enxergar onde está sem procurar. */
.escolhas > .escolha:has(:focus-visible) {
    outline: 2px solid var(--cor-menta);
    outline-offset: 2px;
}

/* O rádio continua rádio, com teclado e leitor de tela de fábrica; só o
   desenho é da casa, e em alto contraste volta o nativo. */
.escolha__marca {
    appearance: none;
    position: absolute;
    inset-inline-start: 18px;
    inset-block-start: 20px;
    inline-size: 20px;
    block-size: 20px;
    margin: 0;
    border: 1px solid var(--borda-vidro-forte);
    border-radius: 50%;
    background: color-mix(in srgb, var(--cor-noite) 60%, transparent);
    cursor: pointer;
}

.escolha__marca:checked {
    border-color: var(--cor-menta);
    box-shadow:
        inset 0 0 0 4px var(--cor-navy),
        inset 0 0 0 10px var(--cor-menta),
        0 0 12px color-mix(in srgb, var(--cor-menta) 50%, transparent);
}

@media (forced-colors: active) {
    .escolha__marca { appearance: auto; }
}

.escolha__nome {
    font-family: var(--fonte-corpo);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cor-branco-gelo);
}

.escolha__nota {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cor-cinza-fraco);
}

/* O botão precisa de um respiro depois das fichas: encostado nelas, parece
   fazer parte da última em vez de valer para a escolha inteira. */
.escolhas + .acoes {
    margin-top: var(--espaco-3);
}

/* ------------------------------------------------------------
   QUEM ADMINISTRA */

/* Cada conta numa ficha, desde a onda 3, com o endereço em mono e o selo de
   quem entrou pela hospedagem na ponta, em luz. */
.pessoas {
    display: grid;
    gap: var(--espaco-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pessoa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-1) 12px;
    padding: 14px var(--espaco-2);
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-cartao);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 2.5%, transparent);
}

.pessoa__email {
    font-family: var(--fonte-mono);
    font-size: 0.875rem;
    color: var(--cor-branco-gelo);
    overflow-wrap: anywhere;
}

.pessoa__selo {
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--cor-luz) 30%, transparent);
    border-radius: var(--raio-pilula);
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--cor-luz);
}

/* ------------------------------------------------------------
   NADA AINDA

   Cabeçalho de tabela com nada embaixo parece defeito, e foi assim que a tela
   apareceu no primeiro dia — sem visita registrada, ela mostrava duas colunas
   vazias e nenhuma explicação. Contorno tracejado diz "está certo, ainda não
   há". */

.vazio {
    margin: 0;
    padding: var(--espaco-3);
    border: 1px dashed var(--borda-vidro-forte);
    border-radius: var(--raio-cartao);
    font-size: 0.875rem;
    color: var(--cor-cinza-fraco);
    text-align: center;
}

/* OS PASSOS DE "PARA VALER NA MÁQUINA" vestem a caixa de /confirmar, desde a
   onda 3, lado a lado dentro do cartão na tela larga. */
.grupo .etapas {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

@media (min-width: 47.5625rem) {
    .grupo .etapas {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

@media (max-width: 47.5rem) {
    .grupo:has(.corrente__elo:only-child) { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   EM TELA ESTREITA

   As três colunas do degrau viram fitas de três caracteres num celular. O nome
   e a medida ficam na linha de cima, e a barra desce para a de baixo, inteira.
   A ordem de leitura continua a mesma.

   A CORRENTE JÁ EMPILHA SOZINHA, e por isso não aparece aqui: ela é fileira só
   acima de 60 rem, e abaixo disso é uma pilha por natureza, com a queda de
   volta ao fluxo, acima do passo que ela introduz. */

@media (max-width: 40rem) {
    .painel__topo {
        padding-top: calc(var(--altura-cabecalho) + var(--espaco-4));
    }

    .painel__corpo {
        padding-block: var(--espaco-4) var(--espaco-12);
    }

    .grupo,
    .estado {
        padding: 22px 18px var(--espaco-3);
    }

    .degrau {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 6px;
    }

    .degrau .trilha {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .dia__marca {
        display: block;
        margin: 4px 0 0;
        padding: 0;
        border: 0;
    }

    /* A TABELA DOS DIAS ESTREITA O AR EM VEZ DE ROLAR PARA O LADO, que é a
       intenção do `min-width: 0` lá em cima. São quatro células por linha, e
       24 px de recuo de cada lado somam 192 px: mais da metade de um telefone
       de 375, gastos antes do primeiro algarismo.

       AS COLUNAS DE NÚMERO PERDEM O RECUO DE ENTRADA, e não o de saída. Elas
       são alinhadas à direita: o recuo da esquerda cai atrás do número e não
       separa nada, enquanto o da direita é o que segura o algarismo longe da
       borda do cartão. Zerar os dois encostaria o último número no traço. */
    .painel .tabela--dias th,
    .painel .tabela--dias td {
        padding-inline: var(--espaco-1);
    }

    .painel .tabela--dias th:not(:first-child),
    .painel .tabela--dias td:not(:first-child) {
        padding-inline-start: 0;
    }

    /* O ESPACEJAMENTO DO CABEÇALHO É REFINAMENTO DE TELA LARGA. Ele abre a
       maiúscula da mono e custa um pixel por caractere: em 1120 px isso é
       desenho, e num telefone é a diferença entre a tabela caber e rolar. */
    .painel .tabela--dias thead th {
        letter-spacing: normal;
    }

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

    .estado form {
        grid-column: 1;
        grid-row: auto;
        margin-top: var(--espaco-2);
    }
}

/* Caixa de seleção com o texto ao lado, alinhados pelo meio. O rótulo envolve
   a caixa, então clicar no texto marca — que é o alvo grande, e o que a mão
   acerta. */
.opcao {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
    cursor: pointer;
}

.opcao__marca {
    inline-size: 1rem;
    block-size: 1rem;
    margin: 0;
    accent-color: var(--cor-menta);
}

/* A CAIXA DE SELEÇÃO NO TEMA — 28/09/2026. O `accent-color` só pinta a caixa
   marcada; desmarcada, o navegador desenha um quadrado branco, que era a coisa
   mais clara do formulário escuro e a primeira que o olho achava. Desenhada
   aqui, ela tem a cor do campo e o visto em menta. O rádio fica nativo, porque
   o `accent-color` já o resolve. Em alto contraste do Windows volta a nativa. */
.opcao__marca[type="checkbox"] {
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border: 1.5px solid color-mix(in srgb, var(--cor-cinza-nevoa) 55%, transparent);
    border-radius: 5px;
    background-color: var(--cor-navy-superficie);
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.opcao__marca[type="checkbox"]::after {
    content: "";
    inline-size: 0.55rem;
    block-size: 0.3rem;
    border-inline-start: 2px solid var(--cor-tinta);
    border-block-end: 2px solid var(--cor-tinta);
    transform: translateY(-1px) rotate(-45deg) scale(0);
    transition: transform 160ms ease;
}

.opcao__marca[type="checkbox"]:hover { border-color: var(--cor-menta); }

.opcao__marca[type="checkbox"]:checked {
    border-color: var(--cor-menta);
    background-color: var(--cor-menta);
}

.opcao__marca[type="checkbox"]:checked::after {
    transform: translateY(-1px) rotate(-45deg) scale(1);
}

@media (forced-colors: active) {
    .opcao__marca[type="checkbox"] { appearance: auto; }
    .opcao__marca[type="checkbox"]::after { content: none; }
}

.opcao__texto {
    font-size: var(--tamanho-corpo);
    color: var(--cor-branco-gelo);
}

/* A CAIXA QUE CARREGA UMA FRASE — as novidades por e-mail, 28/09/2026.

   A `.opcao` centra a marca na altura do texto, o que serve ao rótulo de uma
   linha do seletor de cor. Com uma frase que quebra em duas, a caixa ficava no
   meio delas, longe da primeira palavra: aqui ela sobe para a primeira linha.
   A frase continua inteira num `<span>` só, e é ele o item do flex. */
.opcao--frase { align-items: start; }

.opcao--frase .opcao__marca {
    flex: none;
    margin-block-start: 0.25em;
}

.opcao--frase .opcao__texto {
    font-size: var(--tamanho-legenda);
    line-height: 1.6;
    color: var(--cor-cinza-nevoa);
}

/* O TOUR DE ABAS SAIU EM 15/09/2026, e com ele cerca de 170 linhas de CSS.

   Eram seis radios, um menu de rotulos, seis paineis e vinte e quatro
   seletores de `:checked ~` para decidir qual aparecia. Tudo isso existia para
   mostrar uma demonstracao e esconder cinco, contra a regra da propria casa:
   "conteudo atras de clique e conteudo que a maioria nunca ve, e as telas do
   aplicativo sao o argumento de venda" (AGENTS §Movimento).

   As seis viraram fileiras alternadas, que e a forma que a regra prescreve, e
   reusam `.mostra` inteiro: nenhuma classe nova nasceu para isto. Foi o que
   permitiu apagar o bloco sem substituir por outro do mesmo tamanho. */

/* OS ÍCONES DA CASA. As formas moram em <symbol> na página; cor e traço
   moram aqui, herdados pelo <use>: os símbolos ficam limpos e um ajuste de
   espessura vale para os quinze de uma vez. */
.icones-definicoes {
    display: none;
}

.icone {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.faixa-confianca__item .icone {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
    color: var(--cor-luz);
}


.icone--diferencial {
    inline-size: 1.35rem;
    block-size: 1.35rem;
    color: var(--cor-menta);
    margin-bottom: var(--espaco-1);
}

/* O SUBLINHADO QUE DESLIZA nos links de texto corrido. Botões ficam de
   fora: link de prosa se sublinha, botão não. O link com seta da home também
   fica, porque ele já tem o fio dele.

   BRANCO, COM O FIO À VISTA — onda 3, 29/09/2026. O link de prosa era menta,
   a cor que o botão largou; agora é branco, com um fio claro sempre embaixo e
   a menta deslizando por cima no passar do mouse. A menta continua dizendo
   "aqui", só que no gesto, e não em repouso. O item de lista dos documentos
   legais entra junto: a lista das páginas com anúncio, em /privacidade, é
   feita de links. E o do apoio das portas da conta, onde o link da segurança
   mora dentro de um item. */
p a:not(.botao):not(.link-seta),
.legenda a:not(.link-seta),
.texto-secundario a:not(.link-seta),
.guia-layout .documento li a,
.porta .tela-de-conta__item a {
    color: var(--cor-branco-gelo);
    background-image:
        linear-gradient(var(--cor-menta), var(--cor-menta)),
        linear-gradient(color-mix(in srgb, var(--cor-branco-gelo) 30%, transparent), color-mix(in srgb, var(--cor-branco-gelo) 30%, transparent));
    background-repeat: no-repeat;
    background-position: 0 100%, 0 100%;
    background-size: 0% 1px, 100% 1px;
    transition: background-size 200ms ease, color 160ms ease;
}

p a:not(.botao):not(.link-seta):hover,
.legenda a:not(.link-seta):hover,
.texto-secundario a:not(.link-seta):hover,
.guia-layout .documento li a:hover,
.porta .tela-de-conta__item a:hover {
    color: var(--cor-branco-gelo);
    background-size: 100% 1px, 100% 1px;
}

/* A BANDA DE MEDIDAS VIROU CARTÃO na onda 3 (29/09/2026), decisão do dono:
   o FaixaDeMedidas veste `.numeros` e `.numero`, que moram no bloco da home
   no fim da folha, e a /o-aplicativo herda o mesmo desenho. */
/* A FAIXA DE AFIRMAÇÃO: a única quebra de ritmo da home. Centrada de
   propósito numa página toda alinhada à esquerda, porque é uma frase dita,
   não uma seção lida; o brilho radial é o mesmo vocabulário da chamada
   final. */
.afirmacao {
    padding-block: var(--espaco-12);
    background-image: radial-gradient(60% 130% at 50% 0%, color-mix(in srgb, var(--cor-menta) 7%, transparent), transparent 70%);
    text-align: center;
}

.afirmacao__frase {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: clamp(2.2rem, 6vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--cor-branco-gelo);
}

.afirmacao__ponto {
    color: var(--cor-menta);
}

.afirmacao__apoio {
    margin: var(--espaco-3) auto 0;
    max-width: 36rem;
    color: var(--cor-cinza-nevoa);
}

/* O AVISO DE COOKIES.

   A marcação inteira nasce no consentimento.js, e este bloco só a veste. Fica
   preso ao rodapé da janela porque a escolha precisa alcançar quem chega por
   anúncio em qualquer página, e não só na home.

   FITA, E NÃO CARTÃO. Até 11/09/2026 era um cartão de 544 por 224 px que
   seguia a rolagem: num notebook de 900 px de altura, um quarto da leitura
   ocupado por uma decisão que ninguém chegou aqui para tomar. Agora o texto e
   os dois botões dividem a mesma linha e a altura cai para cerca de 72 px. O
   que ele diz continua o mesmo, e a recusa continua na frente. */
/* O AVISO É UMA FITA PRESA AO RODAPÉ, EM TODA LARGURA — 15/09/2026.

   Ele era um cartão flutuante, com 24 px de recuo de cada lado e do fundo, e
   flutuar custava a mesma coisa nas duas pontas. No telefone tirava 48 px de
   largura de um texto que quebrava em cinco linhas, e a altura resultante
   cobria 83% da imagem do produto. No desktop, pousava no meio do conteúdo:
   medido em 1920, ele tapava o título da seção 01.

   Presa embaixo, ela ocupa a faixa que já era dela, o rodapé da tela, e para de
   pousar por cima do que a pessoa está lendo. O arredondamento e a borda
   lateral saem pelo mesmo motivo da imagem que sangra: moldura que encosta nas
   duas beiradas não delimita mais nada.

   O CONTEÚDO NÃO ATRAVESSA JUNTO. A faixa é do tamanho da janela e o que ela
   carrega é do tamanho da página, num `.conteudo` por dentro — mesmo arranjo do
   cabeçalho. Sem ele, numa tela de 1920 a frase ficaria na beirada esquerda e
   os botões na direita, com um metro de nada no meio.

   A ESCOLHA CONTINUA À VISTA DE CARA, e isso não é detalhe de layout: adiar o
   aviso para depois da primeira rolagem deixaria a primeira tela intacta e a
   pergunta escondida de quem não rola. A LGPD pede o contrário. */

/* A FITA ENCOLHE DE 81 PARA 57 PX — 21/09/2026.

   Medida em produção, ela tinha 81 px e começava em 863 numa janela de 944: a
   abertura tinha acabado de ser apertada para caber a banda das quatro
   medidas, e a fita cobria de volta a nota que fecha a banda. Interrupção
   exigida por lei continua sendo interrupção, e o tamanho dela não é neutro.

   A ALTURA ERA TODA DOS BOTÕES: 16 de recuo, 48 de botão, 16 de recuo, para
   uma frase de uma linha só. O recuo cai pela metade, porque o botão já
   carrega o recuo dele por dentro e 16 px em volta de um alvo de 48 é ar
   contado duas vezes. */
.aviso-de-cookies {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 60;
    padding-block: var(--espaco-1);
    border-block-start: 1px solid color-mix(in srgb, var(--cor-menta) 22%, transparent);
    background-color: var(--cor-navy-superficie);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 35%);
}

.aviso-de-cookies__interno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-2) var(--espaco-4);
}

/* Encolhe até 22rem e aí empurra os botões para a linha de baixo, em vez de
   espremer a frase em cinco linhas de duas palavras. */
.aviso-de-cookies__texto {
    flex: 1 1 22rem;
    margin: 0;
    font-size: var(--tamanho-legenda);
    line-height: 1.5;
    color: var(--cor-cinza-nevoa);
}

/* O link mora dentro da frase: uma linha a menos, e ele deixa de ser um
   terceiro alvo disputando atenção com os dois botões. */
.aviso-de-cookies__link {
    color: var(--cor-menta);
}

/* Os dois botões com o mesmo tamanho: recusar espremido ao lado de um aceitar
   grande é escolha só na aparência. Aqui o tamanho é imposto, porque em fila
   cada um ficaria com a largura da sua palavra. */
.aviso-de-cookies__acoes {
    display: flex;
    flex: 0 0 auto;
    gap: var(--espaco-2);
}

.aviso-de-cookies__acoes .botao {
    min-inline-size: 7rem;
}

/* O BOTÃO CEDE 8 PX, E SÓ ONDE ISSO NÃO É REQUISITO DE ACESSIBILIDADE.

   Os 48 px do `.botao` existem por causa do alvo de toque, e num telefone eles
   ficam. `pointer: fine` é mouse, trackpad ou caneta: ali a precisão é de
   pixels e 40 px continuam sendo um alvo folgado. É a única parte desta fita
   que se podia encurtar sem tirar nada de ninguém.

   Junto com o recuo pela metade, a fita sai de 81 para 57 px e passa a começar
   abaixo da nota das medidas, em vez de por cima dela. */
@media (pointer: fine) {
    .aviso-de-cookies__acoes .botao {
        min-height: 40px;
    }
}

/* Em tela estreita a fita vira duas linhas, e os botões dividem a largura
   inteira: alvo de toque antes de economia de pixel. */
@media (max-width: 40rem) {
    .aviso-de-cookies__acoes {
        flex: 1 1 100%;
    }

    .aviso-de-cookies__acoes .botao {
        flex: 1;
        min-inline-size: 0;
    }
}

/* ============================================================
   O BLOCO DE ANÚNCIO, NO FIM DO CONTEÚDO
   ============================================================

   Desde 28/09/2026, um só, depois do <main>, nas páginas de
   AnunciosDoAdSense.Paginas. Ver BlocoDeAnuncio.razor.

   NASCE SEM ALTURA E SEM RÓTULO, e só ganha os dois quando o Google marca o
   bloco como preenchido. Sem aceite no aviso de cookies nenhum anúncio é
   pedido, e o fim da página não pode virar um vão com «Publicidade» em cima
   de nada. Esconder o bloco inteiro não serve: o Google mede a largura dele
   para escolher o tamanho do anúncio, e bloco escondido tem largura zero. */

.anuncio__bloco { display: block; }

.anuncio__rotulo {
    display: none;
    margin: 0 0 var(--espaco-2);
    font-family: var(--fonte-mono);
    font-size: 0.625rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
}

.anuncio:has(.anuncio__bloco[data-ad-status="filled"]) {
    padding-block: var(--espaco-6);
    border-block-start: 1px solid var(--cor-toggle-desligado);
}

.anuncio:has(.anuncio__bloco[data-ad-status="filled"]) .anuncio__rotulo { display: block; }

/* O que o Google não conseguiu preencher sai da página. O `!important` vence a
   altura que o próprio script escreve no bloco, que é a recomendação dele. */
.anuncio__bloco[data-ad-status="unfilled"] { display: none !important; }

/* O POSICIONAMENTO DO QUADRO DO ANÚNCIO, que o Google tenta escrever como
   atributo `style` e a CSP barra. Medido em 28/09/2026: o script faz
   `setAttribute('style', 'left:0;position:absolute;top:0;border:0;…')` no
   iframe, e sem isso o quadro cai no fluxo com a borda padrão do navegador.
   A regra é a dele, copiada para a folha nossa; largura e altura vêm dos
   atributos do próprio iframe. O erro continua no console a cada anúncio, e
   é o preço de não abrir `style-src` para estilo inline. */
.anuncio__bloco iframe {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    border: 0;
}

/* ============================================================
   A BARRA FIXA DE DOWNLOAD, SÓ NO CELULAR
   ============================================================

   Existe por causa do comprimento: a página inicial tem 13.534 px no celular,
   cerca de dezesseis telas, e tinha dois pontos de ação, o herói e a chamada
   final. Quem se convencia no meio precisava rolar de volta três mil pixels.
   Medido em 15/09/2026.

   NASCE ESCONDIDA NO DESKTOP, e não o contrário: lá o cabeçalho é fixo e já
   carrega a mesma ação. */

.barra-de-download { display: none; }

@media (max-width: 40rem) {
    .barra-de-download {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--espaco-2);
        padding: var(--espaco-1) var(--espaco-3);
        /* O respiro da barra de gestos do telefone. Sem isto, num aparelho sem
           botão físico o botão encosta na área que o sistema reserva. */
        padding-block-end: max(var(--espaco-1), env(safe-area-inset-bottom));
        border-block-start: 1px solid var(--borda-vidro);
        /* QUASE OPACA, e não translúcida: texto do site passando por baixo de
           um botão é o tipo de vidro que fica bonito na captura e ilegível no
           aparelho de verdade. A onda 3 põe o desfoque e a noite a 92%, que é
           vidro no desenho e parede na leitura. */
        background-color: color-mix(in srgb, var(--cor-noite) 92%, transparent);
        backdrop-filter: blur(16px);
        box-shadow: 0 -4px 16px color-mix(in srgb, var(--cor-tinta) 35%, transparent);
    }

    .barra-de-download__texto {
        margin: 0;
        font-size: var(--tamanho-legenda);
        color: var(--cor-cinza-nevoa);
    }

    .barra-de-download .botao { white-space: nowrap; }

    /* "E BAIXAR" SAI DA BARRA, como o "grátis" sai do cabeçalho — 28/09/2026.
       Quem não entrou lê "Criar conta e baixar" no resto do site; aqui fica o
       que a pessoa faz no clique seguinte. Medido: em 360 px a barra continua
       com 65 px de altura, a mesma de "Baixar grátis", e em 320 ela desce de
       79 para 65, porque "Criar conta" é mais curto. */
    .barra-de-download .botao__complemento { display: none; }

    /* O RODAPÉ PRECISA CABER ACIMA DELA. Sem este respiro, a barra tapa a
       última linha de toda página, que no rodapé é a identificação da empresa
       que o Decreto 7.962 manda exibir. */
    body { padding-block-end: var(--altura-barra-download); }

    /* O AVISO DE COOKIES VIRA FITA PRESA AO RODAPÉ — 15/09/2026.

       Ele era um cartão flutuante, com 24 px de recuo de cada lado e 24 do
       fundo, e no telefone isso custava caro duas vezes. O recuo lateral tirava
       48 px de largura de um texto que já quebrava em cinco linhas, e a altura
       resultante, 188 px, cobria 83% da imagem do produto na primeira tela: a
       coisa que a página tem para mostrar ficava atrás da pergunta sobre
       cookie.

       De ponta a ponta e colado embaixo, o texto ganha os 48 px de volta, e o
       aviso ocupa a faixa que já era dele — o rodapé da tela — em vez de flutuar
       no meio do conteúdo. O arredondamento e a borda lateral saem pelo mesmo
       motivo da imagem que sangra: moldura que encosta nas duas beiradas não
       delimita mais nada.

       A ESCOLHA CONTINUA À VISTA DE CARA, e isso não é detalhe de layout: adiar
       o aviso para depois da primeira rolagem deixaria a primeira tela intacta
       e a pergunta escondida de quem não rola. A LGPD pede o contrário. */
    /* No telefone a fita já é o padrão; o que muda aqui é só o `.conteudo` de
       dentro apertar o recuo lateral, para a frase ganhar os pixels que o
       recuo de 24 tirava dela. */
    .aviso-de-cookies__interno {
        padding-inline: var(--espaco-2);
    }

    /* UMA FITA POR VEZ NO RODAPÉ. Enquanto a pergunta de cookie está na tela,
       a barra de download some: duas fitas empilhadas embaixo seriam duas
       chamadas disputando o mesmo polegar, e a de cookie é a que exige
       resposta. Respondida, ela se remove do documento e a de baixar reaparece
       sozinha, sem ninguém coordenar nada.

       `:has()` e não uma classe posta por script: o aviso já nasce do
       JavaScript, e fazer ele também avisar a barra seria acoplar os dois por
       fora do CSS. */
    body:has(.aviso-de-cookies) .barra-de-download {
        display: none;
    }
}

/* A REVELAÇÃO POR ROLAGEM, onde o navegador souber fazer.

   Na primeira tela o herói já tem "Baixar grátis" em tamanho grande, e um
   segundo botão idêntico 400 px abaixo é a mesma oferta duas vezes. A barra
   entra depois que o herói sai, que é quando ela passa a servir para alguma
   coisa.

   `@supports` COM O PADRÃO VISÍVEL, e a ordem é a defesa: onde
   `animation-timeline` não existir, nada deste bloco se aplica e a barra fica
   sempre à vista, que é o pior caso aceitável. Se o padrão fosse escondido, o
   navegador sem suporte ficaria sem barra nenhuma e o recurso morreria calado
   — mesmo erro que o herói cometia ao esconder esperando o script.

   É CSS e não JavaScript de propósito: a §Movimento manda nada funcional
   depender de script, e baixar é a ação principal do site. */

@supports (animation-timeline: scroll()) {
    @media (max-width: 40rem) and (prefers-reduced-motion: no-preference) {
        .barra-de-download {
            animation: barra-de-download-entra linear both;
            animation-timeline: scroll(root block);
            /* Até 420 px de rolagem, que é onde os botões do herói saem da
               tela num aparelho de 812 px de altura. */
            animation-range: 0 420px;
        }

        @keyframes barra-de-download-entra {
            0%, 70% {
                opacity: 0;
                transform: translateY(100%);
                pointer-events: none;
            }

            100% {
                opacity: 1;
                transform: translateY(0);
                pointer-events: auto;
            }
        }
    }
}

/* ============================================================
   A FAIXA DE PREÇO DA PÁGINA INICIAL
   ============================================================

   Três colunas de números, e não três cartões: a comparação inteira continua
   sendo de /precos, e repetir o cartão de lá aqui faria a home carregar a
   página de preços dentro dela. O que se quer aqui é a ordem de grandeza, que
   é o que resolve a objeção de quem chega por anúncio.

   SEM BORDA E SEM PREENCHIMENTO, de propósito. A home já tem seis cartões numa
   seção e mais seis noutra; um sétimo bloco encaixotado não acrescentaria
   hierarquia, acrescentaria ruído. O que separa as colunas é o filete, que é
   a menor marca que ainda separa. */

.faixa-de-preco {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espaco-4);
}

.faixa-de-preco__item + .faixa-de-preco__item {
    padding-inline-start: var(--espaco-4);
    border-inline-start: 1px solid var(--cor-toggle-desligado);
}

.faixa-de-preco__nome {
    margin: 0 0 var(--espaco-1);
    font-family: var(--fonte-titulo);
    font-size: var(--tamanho-legenda);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-cinza-nevoa);
}

.faixa-de-preco__valor {
    margin: 0 0 var(--espaco-1);
    font-family: var(--fonte-titulo);
    /* Do tamanho de um título de seção, e não do número gigante das medidas:
       lá o número É o argumento, aqui ele é a resposta a uma dúvida. */
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--cor-branco-gelo);
    /* Os três valores se lêem em coluna, e algarismo de largura variável faz
       as vírgulas não baterem uma embaixo da outra. */
    font-variant-numeric: tabular-nums;
}

.faixa-de-preco .legenda { margin: 0; }

/* EM COLUNA NO CELULAR, e com o filete virando linha de cima: em 360 px, três
   colunas de preço dariam 104 px cada, e "R$ 29,90/mês" não cabe em 104. */

@media (max-width: 40rem) {
    .faixa-de-preco { grid-template-columns: 1fr; gap: var(--espaco-3); }

    .faixa-de-preco__item + .faixa-de-preco__item {
        padding-inline-start: 0;
        padding-block-start: var(--espaco-3);
        border-inline-start: 0;
        border-block-start: 1px solid var(--cor-toggle-desligado);
    }
}

/* O HERÓI DO CELULAR TROCAVA O CONSOLE PELO RECORTE DO RELATÓRIO até a onda
   3 (`.prova-no-celular`), e isso saiu com a home antiga: a demonstração nova
   cabe no telefone. A regra que tirava a vitrine de /o-aplicativo do celular
   saiu com o porte daquela página: na proposta aprovada ela aparece. */

/* A CENOGRAFIA DA HOME "SALA DE CONTROLE" SAIU NA ONDA 3 (29/09/2026): o
   console, as fichas que flutuavam, a onda, o papel, a ponte e as duas
   varreduras eram só da home, e a home nova mora no fim da folha. Ficou o laço
   do ponto que respira, que o painel de estado logo abaixo usa. */
@keyframes respira-o-selo {
    0%, 100% { opacity: .5; }
    50% { opacity: .95; }
}

/* O PAINEL DE ESTADO, para as telas de fluxo — 18/09/2026.

   São cinco: /confirme-seu-email, /confirmar, /esqueci-a-senha,
   /redefinir-senha e /erro. Todas eram um bloco pequeno de texto flutuando no
   meio de uma página escura de 1120 px, com o rodapé logo abaixo, e todas
   diziam coisas muito diferentes com exatamente o mesmo peso visual: "senha
   trocada" e "este link não vale mais" eram tipograficamente a mesma tela.

   ELAS NÃO PEDEM A COLUNA DE APOIO do /entrar, e essa foi a primeira ideia
   descartada. Aquela coluna existe porque ali a pessoa está decidindo se
   confia; aqui ela só quer saber o que aconteceu. Argumento de venda ao lado
   de "este link venceu" é ruído.

   O QUE ELAS PEDEM É UM ESTADO LEGÍVEL, que é literalmente o que são: cada
   uma reporta uma situação. O painel dá moldura ao recado e uma marca em mono
   dizendo qual é a situação, com a cor carregando o sentido: ciano para o que
   está em curso, menta para o que deu certo, vermelho para o que não vale
   mais. É o mesmo vocabulário do console da home, onde o ponto e o rótulo em
   mono também dizem o estado do que está acontecendo.

   A MARCA DESCREVE, E NÃO PROMETE: "link enviado", "e-mail confirmado", "link
   expirado". Nenhuma delas é informação nova, é o nome do que a tela já diz
   no título. */
.estado-da-tela {
    display: grid;
    gap: var(--espaco-3);
    padding: var(--espaco-6) var(--espaco-4);
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-modal);
    background-color: var(--cor-navy-superficie);
}

/* O `.cabecalho-secao` carrega 48 px de margem para separar cabeçalho de
   conteúdo de seção. Dentro do painel ele não separa nada: quem espaça aqui é
   o `gap` da grade. */
.estado-da-tela .cabecalho-secao { margin-bottom: 0; }

/* A MARCA E O PONTO SERVEM A DOIS TAMANHOS. Além do painel de página das
   telas de fluxo, o cartão do plano em /minha-conta precisa da mesma linha:
   é o mesmo trabalho, dizer em que estado a coisa está, num recorte menor.
   Dois nomes e uma regra só, porque duas regras iguais é a que um dia diverge. */
/* O PESO É EXPLÍCITO PARA A MARCA PARAR DE DEPENDER DA TAG — 21/09/2026.

   Ela nasceu sempre dentro de um `<p>` e herdava o peso do corpo. Em /perfil
   ela virou o `<h2>` do painel, porque quem nomeia aquele bloco é ela e não
   fazia sentido ter um título repetindo o que ela já diz; como `h2`, o peso
   700 da regra de títulos entrava e a mesma marca ficava mais pesada numa
   página que nas outras. Declarado aqui, o elemento deixa de importar. */
.estado-da-tela__marca,
.cartao__marca {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
    font-family: var(--fonte-mono);
    font-size: var(--tamanho-legenda);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
}

.estado-da-tela__ponto,
.cartao__ponto {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--cor-cinza-fraco);
}

/* EM CURSO: alguma coisa foi disparada e a pessoa está esperando. O ponto
   respira, porque é o único dos três estados que ainda não terminou. */
.estado-da-tela--espera .estado-da-tela__marca { color: var(--cor-sinal); }

.estado-da-tela--espera .estado-da-tela__ponto {
    background-color: var(--cor-sinal);
    animation: respira-o-selo 3.4s ease-in-out infinite;
}

/* DEU CERTO. */
.estado-da-tela--pronto .estado-da-tela__marca { color: var(--cor-menta); }
.estado-da-tela--pronto .estado-da-tela__ponto { background-color: var(--cor-menta); }

/* NÃO VALE MAIS: link vencido, já usado, ou a página que não carregou. O
   vermelho é o mesmo da gravação e o mesmo da linha barrada do desenho do ADR
   0009, que é onde ele já significa "por aqui não". */
.estado-da-tela--parado .estado-da-tela__marca { color: var(--cor-gravacao); }
.estado-da-tela--parado .estado-da-tela__ponto { background-color: var(--cor-gravacao); }

@media (prefers-reduced-motion: reduce) {
    .estado-da-tela__ponto { animation: none; }
}

/* Botão solto dentro do painel de estado não estica na coluna inteira: a
   grade estica todo filho, e um botão de 34 rem vira barra, que não se lê como
   ação. O texto continua ocupando a coluna toda, que é o que texto pede.

   FILHO DIRETO, e é o que a regra tem de mais importante: o `>` deixa de fora
   o botão de enviar que mora dentro do `.formulario`, e aquele continua
   ocupando a largura do campo acima dele, como em /entrar e /criar-conta.
   Sem o `>`, as telas de formulário deste grupo passariam a ter um botão de
   enviar diferente do resto do site. */
.estado-da-tela > .botao { justify-self: start; }

/* O CARTÃO QUE CARREGA ESTADO, em /minha-conta.

   A página tinha quatro blocos de peso igual: plano, dispositivos, equipe e
   as duas tabelas. O que a pessoa abre a página para saber é o primeiro, e ele
   competia visualmente com o histórico de pagamento.

   O filete à esquerda e a marca em mono dão ao cartão do plano o peso que o
   assunto tem. A menta só aparece quando existe assinatura de verdade: sem
   ela, o filete fica neutro, porque plano gratuito não é um estado a
   comemorar nem a corrigir. */
.cartao--estado {
    border-inline-start: 2px solid color-mix(in srgb, var(--cor-cinza-nevoa) 30%, transparent);
}

.cartao--estado.cartao--vigente { border-inline-start-color: var(--cor-menta); }

.cartao--vigente .cartao__marca { color: var(--cor-menta); }
.cartao--vigente .cartao__ponto { background-color: var(--cor-menta); }

/* Cabeçalho de coluna em mono, nas tabelas que são registro: as máquinas
   vinculadas e os pagamentos. Ali a coluna é rótulo de instrumento, como o da
   faixa de medidas.

   MODIFICADOR, e não `.tabela` inteira: a comparação de planos em /precos usa
   a mesma tabela, e lá os cabeçalhos são "Gratuito", "Pro" e "Time", que são
   nomes e não rótulos. */
.tabela--registro thead th {
    font-family: var(--fonte-mono);
    font-size: var(--tamanho-legenda);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
}

/* O CÓDIGO DO VÍNCULO EM MONO, em /vincular. É a única coisa que se digita no
   site caractere a caractere, copiada de uma tela para outra, e monoespaçada é
   a diferença entre conferir e adivinhar: em proporcional, o 0 e o O, o 1 e o
   l ocupam larguras diferentes e a pessoa lê a forma em vez da letra.

   O TAMANHO E O ESPAÇAMENTO RECUARAM em 18/09/2026, depois de o dono ver o
   texto passar da borda direita do campo. A primeira versão subia a letra para
   18 px e abria 0,18 em entre caracteres, e isso levava o código de nove
   caracteres a 124 px: cabe na coluna de 34 rem que eu medi, e não coube na
   tela dele.

   NÃO CONSEGUI REPRODUZIR o estouro, porque /vincular pede sessão e eu não
   entro com senha. O que dava para fazer sem adivinhar era tirar o exagero:
   16 px é o tamanho dos outros campos do site, então o código deixa de ser o
   único que cresce, e 0,12 em continua separando caractere de caractere sem
   custar os 22 px que a versão anterior gastava. O mono, que é o que faz o
   trabalho, fica.

   A ALTURA SOBE PARA 48 px, junto com o botão da revisão desta semana: o campo
   tinha 40 e a letra maior ficava apertada entre as bordas. */
.campo__entrada--codigo {
    min-height: 48px;
    font-family: var(--fonte-mono);
    font-size: var(--tamanho-corpo);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* A leitura do cartão: dois números que respondem a pergunta do bloco inteiro,
   no mesmo desenho da faixa de medidas, em tamanho de cartão. */
.cartao__leitura {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.cartao__leitura-de {
    margin-inline-start: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cor-cinza-fraco);
}

/* ============================================================
   ONDA 2 DA REVISÃO VISUAL: OS ELEMENTOS GRÁFICOS, 28/09/2026
   ============================================================

   A onda 2 trouxe seis elementos gráficos tirados do produto: a mira, o
   trilho do caminho, o clique que vira passo, o radar do "fica aqui", a
   varredura nas telas e a luz que segue o cursor.

   A ONDA 3 (29/09/2026) LEVOU QUATRO COM A HOME ANTIGA. A mira, o clique e o
   radar voltaram na home nova com outro desenho, no bloco dela
   (`.demo__canto`, `.demo__clique`, `.orbe__anel`), e o trilho saiu junto
   com as fileiras numeradas: o caminho virou bento. Ficou aqui a luz do
   cursor, em todo cartão; a varredura saiu com o porte de /como-usar, a
   última página que a tinha, porque nas fileiras quem emoldura a tela passou
   a ser o vidro. */

/* A LUZ QUE SEGUE O CURSOR nos cartões. Quem a posiciona é o animacoes.js, que
   só escreve onde o cursor está, em duas variáveis; quem a desenha e a acende
   é esta regra. Sem script, sem mouse ou com menos movimento, as variáveis não
   existem, a luz fica fora do cartão, e nada muda. Ela anda por `transform` e
   acende por opacidade. */
.cartao::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 22rem;
    block-size: 22rem;
    margin: -11rem 0 0 -11rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--cor-luz) 14%, transparent), transparent);
    transform: translate(var(--luz-x, -100vw), var(--luz-y, -100vh));
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}

.cartao:hover::before { opacity: 1; }

/* A VARREDURA NAS TELAS DO CAMINHO SAIU EM 29/09/2026, com o porte de
   /como-usar, a última página que a tinha. Era uma linha de sinal passando uma
   vez pela captura no ritmo da rolagem, e dependia do passe-partout da moldura
   antiga, que as fileiras também perderam: no vidro não havia onde ela
   correr. */

/* O FORMULÁRIO EM PAINEL (`.formulario--painel`) das três portas da conta,
   /baixar, /criar-conta e /entrar, saiu da folha com o porte de /baixar, a
   última delas: na onda 3 quem faz o painel é o cartão da porta em volta do
   formulário (`.painel-conta`). */

/* ==========================================================================
   A HOME DA ONDA 3, NO ESTILO AURION — 29/09/2026
   ==========================================================================

   A página inicial vista pelo dono lado a lado com a do ar e aprovada como
   "pronta para o site". A ordem das seções é a mesma da "Sala de Controle" de
   18/09 (o produto ligado, o caminho, as medidas, a prova, o desenho do ADR
   0009, o preço, o público e a chamada); o que muda é a roupa e o herói, que
   deixa de ser uma captura parada e passa a ser o produto trabalhando.

   A LINGUAGEM É LUZ, E NÃO COR. Chão quase preto, texto branco, e a
   profundidade vindo de brilhos azul-gelo por trás das peças: o aparelho do
   herói, os números, o plano em destaque, o arco do fim. A menta fica com o
   que confirma.

   TODO O MOVIMENTO DAQUI É DECORATIVO (AGENTS.md §Movimento). Anima
   opacidade e transformação e nada mais, nada nasce escondido esperando
   script, e o bloco de `prefers-reduced-motion` no fim desliga os laços. O
   único trecho com JavaScript é a demonstração do herói, e ela nasce no
   estado final: sem script, os três passos já estão escritos no painel.
   ========================================================================== */

/* ---------------------------------------------------------------- tipografia */

/* O título do herói, o maior da casa, com a luz descendo sobre ele: branco em
   cima, o névoa clareado embaixo. Parado, porque é o elemento de maior pintura
   e ele não anima (§Movimento). */
.titulo-1 {
    font-size: clamp(2.3rem, 5.4vw, 4.25rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
    background: linear-gradient(180deg, var(--cor-branco-gelo) 55%, color-mix(in srgb, var(--cor-branco-gelo) 60%, var(--cor-cinza-nevoa)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-wrap: balance;
}

/* O fim da frase em gelo que chega à menta: a promessa, no herói e no título
   do "100% locais". */
.titulo-1 em,
.titulo-2 em {
    font-style: normal;
    background: linear-gradient(95deg, var(--cor-luz-gelo) 0%, var(--cor-luz) 40%, var(--cor-menta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Em alto contraste do Windows o degradê some, e o texto volta a ter cor. */
@media (forced-colors: active) {
    .titulo-1,
    .titulo-1 em,
    .titulo-2 em {
        background: none;
        color: CanvasText;
    }
}

.titulo-2 {
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.titulo-3 {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

.texto-grande {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.65;
    color: var(--cor-corpo);
    text-wrap: pretty;
}

.rotulo-mono {
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
}

/* O link com seta, para o "ver mais" de cada seção: branco, sublinhado claro,
   e a seta se afasta no passar do mouse. */
.link-seta {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    padding-bottom: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--cor-branco-gelo) 25%, transparent);
    color: var(--cor-branco-gelo);
    font-weight: 500;
    transition: gap 300ms cubic-bezier(.25, 1, .5, 1), border-color 300ms ease;
}

.link-seta:hover {
    gap: 12px;
    border-color: var(--cor-menta);
    color: var(--cor-branco-gelo);
}

.link-seta .icone { inline-size: 1rem; block-size: 1rem; stroke-width: 2; }

/* ---------------------------------------------------------------- o selo */

/* O SELO DE SEÇÃO: a pílula de vidro entre dois fios de luz, cada um
   terminando num losango. Substitui o ordinal em mono ("01 / O caminho") na
   home: a numeração dizia percurso, e o selo diz assunto. As outras páginas
   continuam com o `.secao__ordem` até serem portadas. */
.selo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: var(--espaco-4);
}

.selo__linha {
    position: relative;
    inline-size: clamp(48px, 10vw, 128px);
    block-size: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cor-branco-gelo) 85%, transparent));
}

.selo__linha::after {
    content: "";
    position: absolute;
    right: -3px;
    top: 50%;
    inline-size: 7px;
    block-size: 7px;
    background: var(--cor-branco-gelo);
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--cor-luz) 90%, transparent);
}

.selo__linha--dir { transform: scaleX(-1); }

.selo__pilula {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    padding: 10px 20px;
    border-radius: var(--raio-pilula);
    border: 1px solid var(--borda-vidro-forte);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-noite) 10%, transparent), color-mix(in srgb, var(--cor-noite) 40%, transparent));
    box-shadow: inset 0 4px 8px color-mix(in srgb, var(--cor-branco-gelo) 20%, transparent);
    color: var(--cor-branco-gelo);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* A poça de luz embaixo da pílula. */
.selo__pilula::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    inline-size: 70%;
    block-size: 14px;
    translate: -50% 0;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--cor-luz) 55%, transparent), transparent);
    filter: blur(4px);
    pointer-events: none;
}

.selo__ponto {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--cor-menta);
    box-shadow: 0 0 10px var(--cor-menta);
}

/* O cabeçalho de seção da home: centrado, título grande e a frase de apoio em
   medida de leitura. */
.cabecalho-secao--palco {
    display: block;
    max-width: 55rem;
    margin: 0 auto var(--espaco-8);
    text-align: center;
}

.cabecalho-secao--palco .texto-grande {
    max-width: 39rem;
    margin: 20px auto 0;
}

/* A seção da home respira mais que as das outras páginas: 144 px, e não 96.
   Cada uma aqui é uma cena inteira, com luz própria, e colada na outra as
   luzes se somariam. */
.secao--palco {
    position: relative;
    padding-block: calc(var(--espaco-12) + var(--espaco-6));
}

/* O vidro por onde passa o cursor ganha inclinação, até 2 graus, além da luz
   que já o segue: o animacoes.js escreve as duas variáveis, e sem ele o
   cartão fica reto. Só nos cartões que pedem (`data-inclina`). */
.cartao[data-inclina] {
    transform: perspective(1000px) rotateX(var(--inclina-x, 0deg)) rotateY(var(--inclina-y, 0deg));
    transition: transform 500ms cubic-bezier(.25, 1, .5, 1), border-color 400ms ease;
}

/* ---------------------------------------------------------------- o herói */

/* O HERÓI SOBE POR BAIXO DO CABEÇALHO, e desfaz o recuo que o `main` dá a
   todas as outras seções. A `.abertura-pagina` das páginas portadas faz o
   mesmo. A luz de cima atravessa
   a barra, que nasce transparente aqui. */
.heroi {
    position: relative;
    margin-top: calc(-1 * var(--altura-cabecalho));
    padding: 168px 0 112px;
    overflow: hidden;
}

/* A grade de fundo, apagando nas bordas. */
.heroi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    block-size: 1100px;
    background-image:
        linear-gradient(color-mix(in srgb, var(--cor-branco-gelo) 3.5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cor-branco-gelo) 3.5%, transparent) 1px, transparent 1px);
    background-size: var(--espaco-8) var(--espaco-8);
    background-position: center top;
    mask-image: radial-gradient(60% 55% at 50% 30%, black 20%, transparent 75%);
    pointer-events: none;
}

/* O cone de luz que desce do topo. */
.heroi::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -260px;
    inline-size: 1100px;
    block-size: 760px;
    translate: -50% 0;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--cor-luz-media) 22%, transparent), color-mix(in srgb, var(--cor-luz-funda) 8%, transparent) 55%, transparent);
    pointer-events: none;
}

.heroi__texto {
    position: relative;
    z-index: 3;
    text-align: center;
}

.heroi__texto .texto-grande {
    max-width: 39rem;
    margin: var(--espaco-3) auto 0;
}

.heroi__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

/* As duas garantias do plano gratuito, cada uma com o seu visto: eram uma
   legenda só, "Não pede cartão. O plano gratuito não expira.", e as duas
   frases são as mesmas. */
.heroi__garantia {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espaco-1) 20px;
    margin-top: 20px;
    font-size: 0.875rem;
    color: var(--cor-cinza-fraco);
}

.heroi__garantia span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.heroi__garantia .icone { inline-size: 1rem; block-size: 1rem; color: var(--cor-menta); stroke-width: 2.2; }

/* A ENTRADA DO HERÓI, em escada. O h1 não entra: ele é o maior texto da
   primeira tela, e animar a entrada dele atrasa o LCP (§Movimento). Os
   atrasos são classe, porque a CSP barra estilo inline. Só opacidade e
   deslocamento: o desfoque da proposta saiu, porque animar `filter` não é
   opacidade nem transformação. */
.entra { animation: entra 1s cubic-bezier(.22, 1, .36, 1) both; }
.entra--1 { animation-delay: 80ms; }
.entra--2 { animation-delay: 170ms; }
.entra--3 { animation-delay: 260ms; }
.entra--4 { animation-delay: 350ms; }

@keyframes entra {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

/* ---- o palco: o aparelho, as duas luzes e as fichas */

.palco {
    position: relative;
    z-index: 2;
    width: min(1140px, 100% - 2 * var(--espaco-3));
    margin: 88px auto 0;
    animation: sobe 1.2s cubic-bezier(.22, 1, .36, 1) both;
}

/* Sobe sem aparecer: a captura do herói é o candidato a LCP, e ela nasce
   visível. O que se move é a moldura, por transformação. */
@keyframes sobe {
    from { transform: translateY(48px) scale(0.97); }
    to { transform: none; }
}

.palco__luz {
    position: absolute;
    z-index: 0;
    top: 6%;
    inline-size: 62%;
    block-size: 78%;
    border-radius: 50%;
    background: var(--brilho-luz);
    filter: blur(22px);
    opacity: 0.95;
    animation: respira 6s ease-in-out 1.6s infinite;
    pointer-events: none;
}

.palco__luz--esq { left: -31%; }
.palco__luz--dir { right: -31%; animation-delay: 4.6s; }

.palco__nevoa {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 30%;
    inline-size: 150%;
    block-size: 90%;
    translate: -50% 0;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--cor-luz-media) 35%, transparent), color-mix(in srgb, var(--cor-luz-funda) 18%, transparent) 50%, transparent);
    filter: blur(30px);
    pointer-events: none;
}

@keyframes respira {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* O APARELHO: uma tela de vidro, e não uma janela de sistema. Não é a
   "janela dentro da janela" reprovada em 09/09/2026: aquela era a captura de
   uma janela emoldurada numa segunda janela desenhada; aqui a moldura é o
   próprio vidro da peça, sem barra de título, sem botões de fechar, e o que
   está dentro é o produto funcionando, não um retrato dele. */
.aparelho {
    position: relative;
    z-index: 2;
    padding: 14px;
    border-radius: 32px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-luz) 28%, transparent),
        color-mix(in srgb, var(--cor-navy-elevado) 18%, transparent) 20%,
        color-mix(in srgb, var(--cor-navy-cartao) 90%, transparent) 100%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 55%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--cor-branco-gelo) 12%, transparent),
        0 0 0 1px color-mix(in srgb, var(--cor-luz) 15%, transparent),
        0 50px 120px -30px color-mix(in srgb, var(--cor-tinta) 90%, transparent),
        0 0 80px -10px color-mix(in srgb, var(--cor-luz) 35%, transparent);
}

.aparelho__tela {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--cor-branco-gelo) 12%, transparent);
    background-color: color-mix(in srgb, var(--cor-navy-superficie) 70%, var(--cor-noite));
}

/* A barra de estado da gravação: o ponto que pulsa, a sessão e o monitor. */
.aparelho__barra {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    padding: 0 18px;
    border-bottom: 1px solid var(--borda-vidro);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-navy-cartao) 70%, var(--cor-noite)), color-mix(in srgb, var(--cor-navy-superficie) 80%, var(--cor-noite)));
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    color: var(--cor-cinza-fraco);
}

.aparelho__gravando {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    color: var(--cor-branco-gelo);
    letter-spacing: 0.04em;
}

.aparelho__divisa {
    inline-size: 1px;
    block-size: 16px;
    background: var(--borda-vidro-forte);
}

.aparelho__sessao {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cor-corpo);
    font-family: var(--fonte-corpo);
    font-size: 0.8125rem;
}

.aparelho__monitor { margin-left: auto; white-space: nowrap; }

/* O PONTO QUE GRAVA pulsa por um anel, e não por sombra: o anel é um
   pseudoelemento que cresce e apaga, e sombra animada seria pintura, não
   transformação. */
.ponto-gravando {
    position: relative;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--cor-gravacao);
}

.ponto-gravando::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--cor-gravacao) 60%, transparent);
    animation: pulsa 1.8s ease-out infinite;
}

@keyframes pulsa {
    from { transform: scale(1); opacity: 1; }
    70%, to { transform: scale(2.4); opacity: 0; }
}

/* ---- a demonstração dentro do aparelho

   A janela gravada dentro da mira de captura, o cursor fazendo os três
   cliques do fluxo, e cada clique virando um passo escrito no painel ao lado.
   Sem JavaScript, ou com menos movimento, ela fica no estado final: os três
   passos à vista, o último marcado.

   AS POSIÇÕES SÃO AS DA CAPTURA, em porcentagem do recorte: o campo do cupom,
   «Aplicar cupom» e «Finalizar pedido», medidos em gravacao.png (1560 × 940).
   Captura nova no herói pede as medidas de novo, nos `data-` de cada passo e
   nas três amostras ampliadas logo abaixo. */
.demo {
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(290px, 1fr);
    background-color: color-mix(in srgb, var(--cor-noite) 70%, var(--cor-navy-superficie));
}

.demo__palco {
    position: relative;
    display: grid;
    place-items: center;
    padding: 52px 44px 48px;
    border-right: 1px solid var(--borda-vidro);
    background:
        radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--cor-luz-media) 16%, transparent), transparent 72%),
        radial-gradient(color-mix(in srgb, var(--cor-branco-gelo) 7%, transparent) 1px, transparent 1.3px) 0 0 / 18px 18px,
        color-mix(in srgb, var(--cor-noite) 80%, var(--cor-navy-superficie));
}

.demo__regiao { position: relative; width: 100%; }

.demo__captura {
    position: relative;
    margin: 0;
    aspect-ratio: 1464 / 729;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--cor-branco-gelo);
    box-shadow:
        0 0 0 1px var(--borda-vidro),
        0 30px 60px -24px color-mix(in srgb, var(--cor-tinta) 90%, transparent);
}

/* O recorte tira a moldura da janela e a barra antiga: sobra a página. */
.demo__captura img {
    position: absolute;
    left: -3.279%;
    top: -9.739%;
    width: 106.557%;
    max-width: none;
    height: auto;
}

/* A MIRA DE CAPTURA, os quatro cantos do logo em volta da região gravada. */
.demo__canto {
    position: absolute;
    z-index: 2;
    inline-size: 26px;
    block-size: 26px;
    border: 3px solid var(--cor-menta);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cor-menta) 55%, transparent));
}

.demo__canto--1 { top: -11px; left: -11px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.demo__canto--2 { top: -11px; right: -11px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.demo__canto--3 { bottom: -11px; left: -11px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.demo__canto--4 { bottom: -11px; right: -11px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }

.demo__rotulo {
    position: absolute;
    left: 0;
    top: -36px;
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--cor-menta);
    white-space: nowrap;
}

/* O ALVO, O CLIQUE E O CURSOR ANDAM POR TRANSFORMAÇÃO. Cada um mora numa
   camada do tamanho da região inteira (`inset: 0`), e é a camada que se
   desloca: `translate` em porcentagem mede a própria caixa, e como a caixa é
   a região, 30% é 30% da captura. Andar por `left` e `top`, como a proposta
   fazia, seria animar posição, e o §Movimento só deixa opacidade e
   transformação. As variáveis nascem no ponto final do fluxo, «Finalizar
   pedido», que é onde tudo fica sem script. */
.demo__camada {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: translate(var(--x, 70.7%), var(--y, 86.28%));
}

.demo__camada--cursor {
    z-index: 3;
    transition: transform 950ms cubic-bezier(.22, 1, .36, 1);
}

.demo__camada--alvo {
    z-index: 2;
    transform: translate(var(--al, 61.13%), var(--at, 83.26%));
}

.demo__camada--clique { z-index: 2; }

/* O tamanho do alvo não anima: ele só muda enquanto está apagado, entre um
   passo e outro, e acende já no lugar. */
.demo__alvo {
    position: absolute;
    left: 0;
    top: 0;
    inline-size: var(--aw, 19.06%);
    block-size: var(--ah, 5.9%);
    border: 2px solid var(--cor-menta);
    border-radius: 6px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-menta) 18%, transparent), 0 0 22px color-mix(in srgb, var(--cor-menta) 50%, transparent);
    opacity: 0;
    transition: opacity 350ms ease;
}

.demo__alvo.aceso { opacity: 1; }

.demo__cursor {
    position: absolute;
    left: 0;
    top: 0;
    inline-size: 26px;
    block-size: 26px;
    margin: -3px 0 0 -5px;
    fill: var(--cor-branco-gelo);
    stroke: var(--cor-noite);
    stroke-width: 1.4;
    stroke-linejoin: round;
    filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--cor-tinta) 45%, transparent));
    opacity: 0;
    transition: transform 150ms ease, opacity 400ms ease;
}

.demo--ao-vivo .demo__cursor { opacity: 1; }
.demo__cursor.aperta { transform: scale(0.82); }

.demo__clique {
    position: absolute;
    left: 0;
    top: 0;
}

.demo__clique::before,
.demo__clique::after {
    content: "";
    position: absolute;
    left: -30px;
    top: -30px;
    inline-size: 60px;
    block-size: 60px;
    border-radius: 50%;
    border: 2px solid var(--cor-menta);
    opacity: 0;
}

.demo__clique.clicou::before { animation: onda-do-clique 0.9s cubic-bezier(.22, 1, .36, 1); }
.demo__clique.clicou::after { animation: onda-do-clique 0.9s cubic-bezier(.22, 1, .36, 1) 0.12s; border-width: 1px; }

@keyframes onda-do-clique {
    0% { transform: scale(0.15); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* A barra flutuante do CaptureHub no canto da região, com o relógio. */
.demo__flutuante {
    position: absolute;
    z-index: 4;
    right: 4%;
    bottom: -20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 8px;
    border-radius: var(--raio-pilula);
    border: 1px solid var(--borda-vidro-forte);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-navy-cartao) 70%, var(--cor-noite)), color-mix(in srgb, var(--cor-navy-superficie) 70%, var(--cor-noite)));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 15%, transparent), 0 16px 34px -10px color-mix(in srgb, var(--cor-tinta) 90%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--cor-branco-gelo);
}

.demo__flutuante img { inline-size: 24px; block-size: 24px; border-radius: 7px; }

/* ---- o painel de passos */

.demo__passos {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px 18px 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-navy-cartao) 60%, var(--cor-noite)), color-mix(in srgb, var(--cor-navy-superficie) 70%, var(--cor-noite)));
}

.demo__cabeca {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--espaco-2);
}

.demo__ponto {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--cor-menta);
    box-shadow: 0 0 10px var(--cor-menta);
}

.demo__titulo {
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--cor-branco-gelo);
}

.demo__contagem {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--raio-pilula);
    border: 1px solid var(--borda-vidro);
    background: color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--cor-corpo);
}

.demo__lista {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.demo__passo {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 9px;
    border-radius: 14px;
    border: 1px solid var(--borda-vidro);
    background: color-mix(in srgb, var(--cor-branco-gelo) 3.5%, transparent);
    transition: border-color 400ms ease, box-shadow 400ms ease, background-color 400ms ease;
}

.demo__passo > * { transition: opacity 500ms cubic-bezier(.22, 1, .36, 1), transform 500ms cubic-bezier(.22, 1, .36, 1); }

.demo__passo.atual {
    border-color: color-mix(in srgb, var(--cor-menta) 55%, transparent);
    background: color-mix(in srgb, var(--cor-menta) 5%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor-menta) 20%, transparent), 0 0 30px -8px color-mix(in srgb, var(--cor-menta) 50%, transparent);
}

/* O ponto da ação, ampliado, como o aplicativo mostra ao lado de cada passo:
   a mesma captura do herói como fundo, deslocada até o alvo. */
.demo__zoom {
    position: relative;
    inline-size: 92px;
    block-size: 58px;
    border-radius: var(--raio-controle);
    border: 1px solid color-mix(in srgb, var(--cor-branco-gelo) 14%, transparent);
    background: url("../produto/gravacao.webp") no-repeat var(--bx) var(--by) / 936px auto, var(--cor-branco-gelo);
}

.demo__zoom::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    inline-size: 18px;
    block-size: 18px;
    translate: -50% -50%;
    border-radius: 50%;
    border: 2px solid var(--cor-menta);
    box-shadow: 0 0 10px color-mix(in srgb, var(--cor-menta) 70%, transparent);
}

.demo__zoom--1 { --bx: -270px; --by: -358px; }
.demo__zoom--2 { --bx: -433px; --by: -358px; }
.demo__zoom--3 { --bx: -603px; --by: -391px; }

.demo__texto { display: grid; gap: 3px; min-width: 0; }

.demo__meta {
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--cor-cinza-fraco);
}

.demo__passo.atual .demo__meta { color: var(--cor-menta); }

.demo__acao {
    font-size: 0.84375rem;
    line-height: 1.35;
    color: var(--cor-branco-gelo);
}

/* Ao vivo: o passo que ainda não aconteceu é só o lugar dele. */
.demo--ao-vivo .demo__passo:not(.registrado) {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--cor-branco-gelo) 16%, transparent);
    background: transparent;
}

.demo--ao-vivo .demo__passo:not(.registrado) > * { opacity: 0; transform: translateY(6px); }

/* O texto de espera é enfeite, e mora no CSS: só o script põe a classe. */
.demo__passo.proximo::after {
    content: "Aguardando a próxima ação";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    color: var(--cor-cinza-fraco);
    animation: aguarda 1.6s ease-in-out infinite;
}

@keyframes aguarda {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

.demo--reiniciando .demo__passo > *,
.demo--reiniciando .demo__alvo { opacity: 0 !important; }

.demo__saidas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: var(--espaco-2);
}

.demo__saidas-rotulo {
    inline-size: 100%;
    margin-bottom: 2px;
    font-family: var(--fonte-mono);
    font-size: 0.65625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
}

.demo__saida {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--raio-pilula);
    border: 1px solid var(--borda-vidro);
    background: color-mix(in srgb, var(--cor-branco-gelo) 4%, transparent);
    font-size: 0.75rem;
    color: var(--cor-branco-gelo);
    transition: border-color 500ms ease, box-shadow 500ms ease;
}

.demo__saida .icone { inline-size: 13px; block-size: 13px; color: var(--cor-luz); }

.demo--encerrou .demo__saida {
    border-color: color-mix(in srgb, var(--cor-luz) 45%, transparent);
    box-shadow: 0 0 16px -4px color-mix(in srgb, var(--cor-luz) 70%, transparent);
}

/* ---- as fichas que flutuam em volta do aparelho */

.ficha {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    border-radius: var(--raio-pilula);
    border: 1px solid var(--borda-vidro-forte);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-navy-cartao) 85%, transparent), color-mix(in srgb, var(--cor-navy-superficie) 85%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 20%, transparent), 0 20px 40px -12px color-mix(in srgb, var(--cor-tinta) 80%, transparent);
    backdrop-filter: blur(12px);
    font-size: 0.875rem;
    color: var(--cor-branco-gelo);
    white-space: nowrap;
}

.ficha__icone {
    display: grid;
    place-items: center;
    inline-size: 26px;
    block-size: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cor-menta) 14%, transparent);
    color: var(--cor-menta);
}

.ficha__icone .icone { inline-size: 14px; block-size: 14px; stroke-width: 2.4; }

.ficha--capitulo { left: -4%; top: 58%; animation: flutua 8s ease-in-out 1s infinite; }
.ficha--hash { right: 12%; top: -22px; animation: flutua 9s ease-in-out 0.5s infinite; }

@keyframes flutua {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* O chão do herói: o degradê que o funde com a seção de baixo. */
.heroi__chao {
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    block-size: 132px;
    background: linear-gradient(180deg, transparent, var(--cor-noite) 75%);
    pointer-events: none;
}

/* ---------------------------------------------------------------- a faixa */

/* A FAIXA QUE ROLA, com o que o aplicativo faz. É texto, e não tela de
   produto, e por isso ela pode andar: o §Movimento proíbe carrossel de tela, e
   aqui nada fica escondido, as mesmas frases estão na página inteira. Para no
   passar do mouse, e com menos movimento fica parada. A segunda volta existe
   para o trilho não ter emenda, e sai do leitor de tela. */
.faixa {
    position: relative;
    z-index: 4;
    padding: 56px 0 var(--espaco-3);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

.faixa__trilho {
    display: flex;
    gap: var(--espaco-2);
    inline-size: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: rola 48s linear infinite;
}

.faixa:hover .faixa__trilho { animation-play-state: paused; }

@keyframes rola {
    to { transform: translateX(calc(-50% - var(--espaco-1))); }
}

.faixa__item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 26px;
    border-radius: var(--raio-pilula);
    border: 1px solid var(--borda-vidro-forte);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-noite) 4%, transparent), color-mix(in srgb, var(--cor-noite) 16%, transparent));
    box-shadow: inset 0 4px 8px color-mix(in srgb, var(--cor-branco-gelo) 16%, transparent);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--cor-branco-gelo);
    white-space: nowrap;
}

.faixa__item .icone { inline-size: 22px; block-size: 22px; color: var(--cor-luz); }

/* ---------------------------------------------------------------- o caminho */

/* O BENTO DAS QUATRO ETAPAS. As quatro visíveis ao mesmo tempo, em cartões
   de tamanhos alternados, e nenhuma atrás de clique: é a regra do
   §Movimento, que já foi quebrada uma vez por abas. */
.bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.bento__item--largo { grid-column: span 2; }

.passo {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 520px;
    padding: 0;
    border-radius: var(--raio-vidro);
}

/* A mídia de cada etapa é uma cena montada com recortes da captura real e a
   interface do aplicativo desenhada por cima, na mesma linguagem do herói. */
.passo__midia {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 330px;
    padding: 36px 30px var(--espaco-2);
    overflow: hidden;
}

.passo__midia::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -120px;
    inline-size: 80%;
    block-size: 260px;
    translate: -50% 0;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--cor-luz-media) 35%, transparent), transparent);
    pointer-events: none;
}

.passo__texto {
    position: relative;
    padding: 0 var(--espaco-4) var(--espaco-4);
}

.passo__topo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.passo__numero {
    padding: 4px 10px;
    border-radius: var(--raio-pilula);
    border: 1px solid color-mix(in srgb, var(--cor-menta) 30%, transparent);
    background: color-mix(in srgb, var(--cor-menta) 6%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    color: var(--cor-menta);
}

.passo__texto p { max-width: 54ch; color: var(--cor-corpo); }
.passo__texto p + p { margin-top: 10px; }

.cena { position: relative; width: 100%; }

/* O RECORTE mostra só uma região da captura, sem gerar arquivo novo: a imagem
   inteira dentro de uma caixa de proporção própria, deslocada até a região. */
.recorte {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--proporcao);
    background-color: var(--cor-branco-gelo);
}

.recorte img {
    position: absolute;
    left: var(--esquerda);
    top: var(--topo);
    width: var(--largura);
    max-width: none;
    height: auto;
}

/* x 300 a 1250, y 150 a 760 da gravação: a página, sem a barra flutuante. */
.recorte--pagina { --proporcao: 950 / 610; --largura: 164.21%; --esquerda: -31.58%; --topo: -24.59%; }

/* x 600 a 900, y 596 a 696: o botão «Aplicar cupom». */
.recorte--botao { --proporcao: 3 / 1; --largura: 520%; --esquerda: -200%; --topo: -596%; }

/* ---- gravar: o player com a linha do tempo e os capítulos */

.cena--gravar {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--espaco-2);
    align-items: stretch;
}

.player {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--borda-vidro-forte);
    background-color: color-mix(in srgb, var(--cor-navy-superficie) 70%, var(--cor-noite));
    box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--cor-tinta) 90%, transparent);
    transition: transform 600ms cubic-bezier(.25, 1, .5, 1);
}

.passo:hover .player { transform: translateY(-4px); }

.player__tela { position: relative; }

.player__selo {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 4px 9px;
    border-radius: var(--raio-pilula);
    border: 1px solid color-mix(in srgb, var(--cor-branco-gelo) 16%, transparent);
    background: color-mix(in srgb, var(--cor-noite) 80%, transparent);
    backdrop-filter: blur(6px);
    font-family: var(--fonte-mono);
    font-size: 0.65625rem;
    color: var(--cor-branco-gelo);
}

.player__controles {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--borda-vidro);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-navy-cartao) 60%, var(--cor-noite)), color-mix(in srgb, var(--cor-navy-superficie) 70%, var(--cor-noite)));
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--cor-corpo);
}

.player__tocar { inline-size: 14px; block-size: 14px; fill: var(--cor-branco-gelo); stroke: var(--cor-branco-gelo); }
.player__tempo--total { color: var(--cor-cinza-fraco); }

.linha {
    position: relative;
    flex: 1;
    block-size: 4px;
    border-radius: var(--raio-pilula);
    background: color-mix(in srgb, var(--cor-branco-gelo) 12%, transparent);
}

.linha__feito {
    position: absolute;
    inset: 0 auto 0 0;
    inline-size: 40.7%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cor-luz-media), var(--cor-luz));
}

/* 00:36 a 00:47 de 01:48: o trecho que vira GIF. */
.linha__trecho {
    position: absolute;
    left: 33.3%;
    inline-size: 10.2%;
    top: -5px;
    bottom: -5px;
    border-radius: 4px;
    border: 1.5px solid var(--cor-menta);
    background: color-mix(in srgb, var(--cor-menta) 16%, transparent);
}

.linha__trecho span {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    translate: -50% 0;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--cor-menta);
    font-size: 0.59375rem;
    font-weight: 600;
    color: var(--cor-tinta);
}

.linha__marca {
    position: absolute;
    top: 50%;
    inline-size: 8px;
    block-size: 8px;
    background: var(--cor-branco-gelo);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 8px color-mix(in srgb, var(--cor-luz) 90%, transparent);
}

.linha__marca--1 { left: 16.7%; }
.linha__marca--2 { left: 38%; }

.linha__cabeca {
    position: absolute;
    left: 40.7%;
    top: 50%;
    inline-size: 12px;
    block-size: 12px;
    border-radius: 50%;
    background: var(--cor-branco-gelo);
    translate: -50% -50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-luz) 35%, transparent);
}

.capitulos {
    display: flex;
    flex-direction: column;
    padding: var(--espaco-2) 14px 14px;
    border-radius: 14px;
    border: 1px solid var(--borda-vidro);
    background: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
}

.capitulos__titulo {
    margin-bottom: 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cor-branco-gelo);
}

.capitulos__lista {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.capitulos__lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--espaco-1) 10px;
    border-radius: 10px;
    font-size: 0.8125rem;
    color: var(--cor-corpo);
}

.capitulos__lista li span {
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--cor-cinza-fraco);
}

.capitulos__lista .capitulos__ativo {
    background: color-mix(in srgb, var(--cor-luz) 8%, transparent);
    box-shadow: inset 2px 0 0 var(--cor-luz);
    color: var(--cor-branco-gelo);
}

.capitulos__lista .capitulos__ativo span { color: var(--cor-luz); }

.capitulos__gif {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--borda-vidro);
    font-size: 0.75rem;
    color: var(--cor-menta);
}

.capitulos__gif .icone { inline-size: 14px; block-size: 14px; }

/* ---- registrar: o clique ampliado e o passo que ele vira */

.cena--registrar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lupa { position: relative; width: 100%; }

.lupa .recorte {
    border-radius: 12px;
    border: 1px solid var(--borda-vidro-forte);
    box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--cor-tinta) 90%, transparent);
}

.lupa__alvo {
    position: absolute;
    left: 42.5%;
    top: 27%;
    inline-size: 47.2%;
    block-size: 47%;
    border: 2px solid var(--cor-menta);
    border-radius: 10px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-menta) 18%, transparent), 0 0 24px color-mix(in srgb, var(--cor-menta) 50%, transparent);
}

.lupa__cursor {
    position: absolute;
    left: 71%;
    top: 54%;
    inline-size: 26px;
    block-size: 26px;
    fill: var(--cor-branco-gelo);
    stroke: var(--cor-noite);
    stroke-width: 1.4;
    stroke-linejoin: round;
    filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--cor-tinta) 45%, transparent));
    transition: transform 400ms cubic-bezier(.25, 1, .5, 1);
}

.passo:hover .lupa__cursor { transform: scale(0.85); }

.lupa__rotulo {
    position: absolute;
    left: 12px;
    top: -11px;
    padding: 3px 9px;
    border-radius: var(--raio-pilula);
    border: 1px solid color-mix(in srgb, var(--cor-menta) 35%, transparent);
    background-color: var(--cor-navy-superficie);
    font-family: var(--fonte-mono);
    font-size: 0.65625rem;
    color: var(--cor-menta);
}

/* O fio que desce do clique até o passo escrito: o clique vira texto. */
.vira {
    position: relative;
    inline-size: 1px;
    block-size: 34px;
    margin: 4px 0 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-menta) 20%, transparent), color-mix(in srgb, var(--cor-luz) 90%, transparent));
}

.vira::after {
    content: "";
    position: absolute;
    left: -3px;
    bottom: -3px;
    inline-size: 7px;
    block-size: 7px;
    background: var(--cor-branco-gelo);
    transform: rotate(45deg);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--cor-luz) 90%, transparent);
}

.passo-escrito {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--cor-menta) 50%, transparent);
    background: color-mix(in srgb, var(--cor-menta) 6%, transparent);
    box-shadow: 0 0 34px -10px color-mix(in srgb, var(--cor-menta) 60%, transparent);
}

.passo-escrito__num {
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--cor-menta) 40%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    color: var(--cor-menta);
}

.passo-escrito__texto { display: grid; gap: 2px; min-width: 0; }

.passo-escrito__meta {
    font-family: var(--fonte-mono);
    font-size: 0.65625rem;
    color: var(--cor-cinza-fraco);
}

.passo-escrito__acao { font-size: 0.875rem; line-height: 1.35; color: var(--cor-branco-gelo); }
.passo-escrito__ok { inline-size: 18px; block-size: 18px; color: var(--cor-menta); stroke-width: 2.4; }

/* A coordenada riscada: o que o passo NÃO diz. É frase, com o rótulo "não"
   em linha, e não flex (AGENTS.md §Convenções). */
.nao-isto {
    margin-top: 14px;
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    color: var(--cor-cinza-fraco);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--cor-gravacao) 75%, transparent);
}

.nao-isto span {
    display: inline-block;
    margin-right: var(--espaco-1);
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--cor-gravacao) 12%, transparent);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: color-mix(in srgb, var(--cor-gravacao) 70%, var(--cor-branco-gelo));
}

/* ---- revisar: a lista com um passo oculto e outro em edição */

.revisao {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--borda-vidro-forte);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-navy-cartao) 70%, var(--cor-noite)), color-mix(in srgb, var(--cor-navy-superficie) 70%, var(--cor-noite)));
    box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--cor-tinta) 90%, transparent);
}

.revisao__topo {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
    margin-bottom: 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cor-branco-gelo);
}

.revisao__ponto {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--cor-menta);
    box-shadow: 0 0 8px var(--cor-menta);
}

.revisao__conta {
    margin-left: auto;
    padding: 2px var(--espaco-1);
    border-radius: var(--raio-pilula);
    background: color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--cor-corpo);
}

.revisao__lista {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.revisao__lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--espaco-1);
    align-items: center;
    padding: var(--espaco-1) 10px;
    border-radius: 10px;
    border: 1px solid var(--borda-vidro);
    background: color-mix(in srgb, var(--cor-branco-gelo) 3.5%, transparent);
    font-size: 0.78125rem;
    color: var(--cor-branco-gelo);
}

.revisao__n {
    font-family: var(--fonte-mono);
    font-size: 0.65625rem;
    color: var(--cor-cinza-fraco);
}

.revisao__t {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.revisao__lista .icone { inline-size: 15px; block-size: 15px; color: var(--cor-cinza-fraco); }

.revisao__lista .revisao__oculto { opacity: 0.55; }

.revisao__oculto .revisao__t {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--cor-branco-gelo) 40%, transparent);
}

.revisao__chip {
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--cor-aviso) 14%, transparent);
    font-size: 0.625rem;
    color: var(--cor-aviso);
}

.revisao__lista .revisao__editando {
    border-color: color-mix(in srgb, var(--cor-menta) 55%, transparent);
    background: color-mix(in srgb, var(--cor-menta) 5%, transparent);
}

.revisao__editando .revisao__t { white-space: normal; }
.revisao__lista .revisao__editando .icone { color: var(--cor-menta); }

.revisao__caret {
    display: inline-block;
    inline-size: 1.5px;
    block-size: 1em;
    margin-left: 2px;
    vertical-align: -2px;
    background: var(--cor-menta);
    animation: pisca 1s steps(1) infinite;
}

@keyframes pisca { 50% { opacity: 0; } }

.revisao__rodape {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--borda-vidro);
    font-size: 0.71875rem;
    color: var(--cor-cinza-fraco);
}

/* As três amostras de tema: claro, azul e o da marca. */
.revisao__amostra { inline-size: 16px; block-size: 16px; border-radius: 50%; }
.revisao__amostra--1 { background: var(--cor-branco-gelo); }
.revisao__amostra--2 { background: linear-gradient(135deg, var(--cor-luz-funda), var(--cor-luz-media)); }
.revisao__amostra--3 { background: linear-gradient(135deg, var(--cor-navy-superficie), var(--cor-menta)); }
.revisao__amostra--ativa { box-shadow: 0 0 0 2px var(--cor-navy-superficie), 0 0 0 3.5px var(--cor-menta); }

.revisao__gerar {
    margin-left: auto;
    padding: 5px 10px;
    border-radius: var(--raio-pilula);
    border: 1px solid var(--borda-vidro-forte);
    background: color-mix(in srgb, var(--cor-branco-gelo) 5%, transparent);
    font-size: 0.71875rem;
    color: var(--cor-branco-gelo);
}

/* ---- publicar: as duas saídas da mesma gravação, lado a lado */

.cena--publicar {
    block-size: 300px;
    perspective: 1400px;
}

.doc {
    position: absolute;
    margin: 0;
    transition: transform 800ms cubic-bezier(.25, 1, .5, 1);
}

.doc img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--cor-branco-gelo) 25%, transparent);
    box-shadow:
        0 30px 60px -20px color-mix(in srgb, var(--cor-tinta) 90%, transparent),
        0 0 50px -10px color-mix(in srgb, var(--cor-luz) 35%, transparent);
}

.doc--slide {
    left: 3%;
    top: 0;
    inline-size: 58%;
    transform: rotateY(14deg) rotateZ(-2deg);
    transform-origin: left center;
}

.doc--relatorio {
    right: 2%;
    top: 76px;
    z-index: 2;
    inline-size: 50%;
    transform: rotateY(-12deg) rotateZ(1.5deg);
    transform-origin: right center;
}

.passo:hover .doc--slide { transform: rotateY(8deg) rotateZ(-3deg) translateX(-10px); }
.passo:hover .doc--relatorio { transform: rotateY(-6deg) rotateZ(2deg) translateX(10px); }

.doc__rotulo {
    position: absolute;
    left: 14px;
    bottom: -14px;
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    padding: 6px 12px;
    border-radius: var(--raio-pilula);
    border: 1px solid var(--borda-vidro-forte);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-navy-cartao) 96%, transparent), color-mix(in srgb, var(--cor-navy-superficie) 96%, transparent));
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--cor-tinta) 90%, transparent);
    font-size: 0.75rem;
    color: var(--cor-branco-gelo);
    white-space: nowrap;
}

.doc__rotulo .icone { inline-size: 14px; block-size: 14px; color: var(--cor-luz); }

.doc--relatorio .doc__rotulo { left: auto; right: 14px; }

/* ---------------------------------------------------------------- os números */

/* AS MEDIDAS EM CARTÃO, decisão do dono em 29/09/2026: a faixa de quatro
   números vira quatro cartões de vidro, cada um com o número grande, o rótulo
   e a frase do que ele quer dizer, entre duas luzes. É o FaixaDeMedidas, e a
   /o-aplicativo herda o mesmo desenho: um componente, uma forma. */
/* Posicionada por conta própria: as luzes são absolutas, e sem ancestral
   posicionado elas se ancoram no documento e o recorte não as alcança. Na home
   o secao--palco já posicionava; em /o-aplicativo a página rolava 470 px para
   o lado no telefone. */
.numeros { position: relative; overflow: hidden; }

.numeros__luz {
    position: absolute;
    top: 50%;
    translate: 0 -30%;
    inline-size: 720px;
    block-size: 520px;
    border-radius: 50%;
    background: var(--brilho-luz);
    filter: blur(30px);
    opacity: 0.8;
    pointer-events: none;
}

.numeros__luz--esq { left: -470px; }
.numeros__luz--dir { right: -470px; }

.numeros__grade {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
}

.numero {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 300px;
    padding: 28px;
    border-radius: var(--raio-vidro);
}

/* O valor em cima e o rótulo embaixo, e no documento é ao contrário: `dt`
   antes de `dd` é o que o HTML pede, e a ordem visual sai do `order`. */
.numero__valor {
    order: -1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: clamp(2.6rem, 4.4vw, 3.6rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--cor-branco-gelo);
}

.numero__unidade {
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--cor-luz);
}

.numero__valor--texto {
    font-size: clamp(2.2rem, 3.6vw, 3rem);
    white-space: nowrap;
}

.numero__rotulo {
    margin-top: auto;
    padding-top: 40px;
    font-family: var(--fonte-titulo);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--cor-branco-gelo);
}

.numero__frase {
    margin: var(--espaco-1) 0 0;
    font-size: 0.9375rem;
    color: var(--cor-corpo);
}

.numeros__nota {
    margin-top: var(--espaco-4);
    text-align: center;
    font-size: 0.875rem;
    color: var(--cor-cinza-fraco);
}

/* ---------------------------------------------------------------- a prova */

.prova {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--espaco-2);
    padding: var(--espaco-2);
    border-radius: var(--raio-vidro);
}

/* O PAPEL SOBRE O ARCO DE LUZ: o relatório de verdade, inclinado, pousado
   num horizonte, com os marcadores do editor apontando o que a lista ao lado
   explica. Continua sendo o único fundo claro da página, e de propósito: num
   produto cujo resultado é um documento, o documento em papel é o maior
   argumento que a página tem. */
.prova__papel {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 460px;
    padding: 48px 36px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--borda-vidro);
    background:
        radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--cor-luz-media) 45%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--cor-navy-superficie) 80%, var(--cor-navy-cartao)), color-mix(in srgb, var(--cor-luz-funda) 30%, var(--cor-noite)));
}

.prova__papel::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -40%;
    inline-size: 90%;
    block-size: 70%;
    translate: -50% 0;
    border-radius: 50%;
    border-top: 2px solid color-mix(in srgb, var(--cor-luz-gelo) 90%, transparent);
    box-shadow:
        0 -24px 70px -6px color-mix(in srgb, var(--cor-luz) 75%, transparent),
        inset 0 30px 60px -20px color-mix(in srgb, var(--cor-luz) 45%, transparent);
    pointer-events: none;
}

.papel {
    position: relative;
    margin: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background-color: var(--cor-branco-gelo);
    box-shadow:
        0 40px 80px -30px color-mix(in srgb, var(--cor-tinta) 90%, transparent),
        0 0 0 1px color-mix(in srgb, var(--cor-branco-gelo) 40%, transparent),
        0 0 60px -10px color-mix(in srgb, var(--cor-luz) 45%, transparent);
    transform: perspective(1200px) rotateX(6deg) rotateY(-8deg);
    transition: transform 800ms cubic-bezier(.25, 1, .5, 1);
}

.prova:hover .papel { transform: perspective(1200px) rotateX(0) rotateY(0); }

.papel img { display: block; width: 100%; height: auto; }

.papel__selo {
    right: 20px;
    bottom: 20px;
    z-index: 2;
}

/* OS MARCADORES DO EDITOR, numerados, cada um apontando para o item da lista
   de mesmo número. O pulso é um anel que cresce e apaga, e não sombra. */
.pino {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: var(--cor-menta);
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--cor-tinta) 60%, transparent);
    translate: -50% -50%;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cor-tinta);
}

.pino::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--cor-menta) 55%, transparent);
    animation: pulsa 2.4s ease-out infinite;
}

.pino--1 { left: 3.6%; top: 37.7%; }
.pino--2 { left: 22.5%; top: 56%; }
.pino--2::after { animation-delay: 0.8s; }

.pino--solto {
    position: relative;
    inline-size: 24px;
    block-size: 24px;
    translate: none;
    font-size: 0.75rem;
}

.pino--solto::after { animation-delay: 1.6s; }

.prova__texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--espaco-4) var(--espaco-4) var(--espaco-4) var(--espaco-3);
}

.prova__lista {
    display: grid;
    gap: 22px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.prova__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--espaco-2);
}

.prova__item h3 {
    margin-bottom: 4px;
    font-size: 1.0625rem;
    line-height: 1.6;
    letter-spacing: -0.02em;
}

.prova__item p { font-size: 0.9375rem; color: var(--cor-corpo); }

.prova__link {
    margin-top: var(--espaco-4);
    font-size: 0.9375rem;
    color: var(--cor-corpo);
}

/* A bolha: o ícone ou o número numa pastilha de vidro redonda. */
.bolha {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    border: 1px solid var(--borda-vidro-forte);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-branco-gelo) 8%, transparent), color-mix(in srgb, var(--cor-branco-gelo) 1%, transparent));
    box-shadow: inset 0 4px 8px color-mix(in srgb, var(--cor-branco-gelo) 16%, transparent);
    color: var(--cor-luz);
}

.bolha .icone { inline-size: 18px; block-size: 18px; }

.bolha--numero {
    border-color: color-mix(in srgb, var(--cor-menta) 40%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.9375rem;
    color: var(--cor-menta);
}

/* ---------------------------------------------------------------- o local */

/* A FIGURA DO ADR 0009, redesenhada: a máquina de um lado, a nuvem do
   outro, e no meio o orbe do CaptureHub com a cruz de luz, e embaixo dele o
   que não atravessa. O que atravessa não se lista aqui: a caixa da nuvem
   remete à /seguranca, onde isso está endereço por endereço (AGENTS
   §Segurança). As duas caixas contam a história em texto, e o orbe sai do
   leitor de tela: lido em ordem, sem a figura, o sentido continua completo. */
.local {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr);
    align-items: center;
}

/* Bloco, e não a grade do `.cartao`: cada peça do lado já traz a margem
   dela, e o vão da grade somaria às margens. */
.lado {
    display: block;
    padding: var(--espaco-4);
    border-radius: var(--raio-vidro);
}

.lado__cabeca {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--espaco-3);
}

.lado__cabeca h3 { font-size: 1.25rem; line-height: 1.6; letter-spacing: -0.03em; }

.lado__selo {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: var(--raio-pilula);
    border: 1px solid color-mix(in srgb, var(--cor-menta) 30%, transparent);
    background: color-mix(in srgb, var(--cor-menta) 6%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cor-menta);
}

.fichas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fichas li {
    padding: var(--espaco-1) 14px;
    border-radius: var(--raio-pilula);
    border: 1px solid var(--borda-vidro);
    background: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
    font-size: 0.875rem;
    color: var(--cor-branco-gelo);
}

.lado__nota {
    margin-top: 20px;
    font-size: 0.875rem;
    color: var(--cor-cinza-fraco);
}

/* TRÊS FAIXAS PARA DOIS FILHOS, desde 30/09/2026, quando o rótulo de cima
   («atravessa conta · assinatura · licença») saiu com a remissão à
   /seguranca. Sem ele o orbe subia metade do rótulo e do vão, 54 px medidos a
   1440, e a cruz de luz passava a tocar os cartões acima do meio deles. A
   primeira faixa fica vazia e, numa grade de altura automática, as duas de
   `1fr` medem o rótulo de baixo: o orbe volta ao meio, e a ponte guarda a
   altura que tinha. Na coluna única a faixa vazia sai: ver o bloco estreito. */
.ponte {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
    gap: var(--espaco-8);
    padding: var(--espaco-3) 0;
    text-align: center;
}

.ponte > .orbe { grid-row: 2; }
.ponte > .ponte__rotulo--nao { grid-row: 3; }

.ponte__rotulo {
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
}

.ponte__rotulo strong {
    display: block;
    margin-top: 4px;
    font-family: var(--fonte-corpo);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--cor-branco-gelo);
}

.ponte__rotulo--nao strong {
    color: var(--cor-cinza-fraco);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--cor-gravacao) 70%, transparent);
}

.orbe {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 108px;
    block-size: 108px;
}

/* A cruz de luz, com um losango em cada ponta. */
.orbe__raio {
    position: absolute;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cor-branco-gelo) 90%, transparent));
}

.orbe__raio--esq,
.orbe__raio--dir { top: 50%; inline-size: 150px; block-size: 1px; }
.orbe__raio--esq { right: 100%; }
.orbe__raio--dir { left: 100%; transform: scaleX(-1); }

.orbe__raio--cima,
.orbe__raio--baixo {
    left: 50%;
    inline-size: 1px;
    block-size: 44px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cor-branco-gelo) 90%, transparent));
}

.orbe__raio--cima { bottom: 100%; }
.orbe__raio--baixo { top: 100%; transform: scaleY(-1); }

.orbe__raio::after {
    content: "";
    position: absolute;
    inline-size: 7px;
    block-size: 7px;
    background: var(--cor-branco-gelo);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--cor-luz) 90%, transparent);
    transform: rotate(45deg);
}

.orbe__raio--esq::after,
.orbe__raio--dir::after { right: -3px; top: -3px; }
.orbe__raio--cima::after,
.orbe__raio--baixo::after { left: -3px; bottom: -3px; }

/* O pulso que percorre o raio: é o que atravessa. Quais são, endereço por
   endereço, a /seguranca diz, e só ela (AGENTS, §Segurança). */
.orbe__raio--dir::before,
.orbe__raio--esq::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    inline-size: 28px;
    block-size: 5px;
    border-radius: var(--raio-pilula);
    background: var(--cor-menta);
    box-shadow: 0 0 12px var(--cor-menta);
    animation: atravessa 3.2s ease-in-out infinite;
}

.orbe__raio--esq::before { animation-delay: 1.6s; }

@keyframes atravessa {
    0% { transform: translateX(0); opacity: 0; }
    15%, 85% { opacity: 1; }
    100% { transform: translateX(122px); opacity: 0; }
}

.orbe__anel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--cor-luz) 35%, transparent);
    animation: radar 3.6s cubic-bezier(.22, 1, .36, 1) infinite;
}

.orbe__anel:nth-child(2) { animation-delay: 1.2s; }
.orbe__anel:nth-child(3) { animation-delay: 2.4s; }

@keyframes radar {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(2.3); opacity: 0; }
}

.orbe__nucleo {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    border: 1px solid var(--borda-vidro-forte);
    background: radial-gradient(circle at 50% 30%, var(--cor-navy-elevado), var(--cor-navy-superficie) 70%);
    box-shadow:
        inset 0 6px 14px color-mix(in srgb, var(--cor-branco-gelo) 20%, transparent),
        0 0 50px color-mix(in srgb, var(--cor-luz-media) 45%, transparent);
}

.orbe__nucleo img { inline-size: 56px; block-size: 56px; border-radius: 14px; }

.local__link {
    margin-top: var(--espaco-6);
    text-align: center;
    font-size: 0.9375rem;
    color: var(--cor-corpo);
}

/* ---------------------------------------------------------------- o preço */

.precos__rodape {
    margin-top: 36px;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--cor-cinza-fraco);
}

/* ---------------------------------------------------------------- o público */

/* SEIS CARTÕES EM TRÊS COLUNAS DESENCONTRADAS: a do meio desce 64 px. O
   desencontro é o que tira a cara de tabela de seis caixas iguais, e em uma
   coluna só ele some. */
.publicos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.publicos__coluna {
    display: grid;
    gap: 20px;
    align-content: start;
}

.publicos__coluna:nth-child(2) { margin-top: var(--espaco-8); }

/* Bloco pelo mesmo motivo do `.lado`: o espaço vem da margem de cada peça. */
.publico {
    display: block;
    padding: 28px;
    border-radius: var(--raio-vidro);
    background:
        radial-gradient(90% 55% at 50% 118%, color-mix(in srgb, var(--cor-luz-media) 28%, transparent), transparent 70%),
        var(--material-cartao);
}

.publico .bolha { inline-size: 52px; block-size: 52px; margin-bottom: var(--espaco-6); }
.publico .bolha .icone { inline-size: 22px; block-size: 22px; }

.publico h3 {
    margin-bottom: var(--espaco-1);
    font-size: 1.25rem;
    line-height: 1.6;
    letter-spacing: -0.03em;
}

.publico p { color: var(--cor-corpo); }

/* A legenda de cada público é frase, com o visto pendurado por fora, e não
   flex: frase não vira grade nem flex (AGENTS.md §Convenções). */
.publico__legenda {
    position: relative;
    margin-top: 20px;
    padding-top: 18px;
    padding-left: var(--espaco-3);
    border-top: 1px solid var(--borda-vidro);
    font-size: 0.875rem;
    color: var(--cor-cinza-fraco);
}

.publico__legenda .icone {
    position: absolute;
    left: 0;
    top: 21px;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--cor-menta);
    stroke-width: 2.2;
}

/* ---------------------------------------------------------------- a chamada */

/* A CHAMADA FINAL SOBRE O ARCO. O nome não é `.chamada`, que é o componente
   de chamada de /perguntas e das outras páginas: é o fecho da home, com o
   editor inclinado pousando no horizonte de luz. */
.chamada-final {
    position: relative;
    padding-top: calc(var(--espaco-12) + var(--espaco-6));
    overflow: hidden;
    text-align: center;
}

.chamada-final__texto {
    position: relative;
    z-index: 3;
    /* 760 px de texto: o `.conteudo` põe o recuo por dentro da largura. */
    max-width: calc(47.5rem + 2 * var(--espaco-3));
}

.chamada-final__texto .texto-grande { max-width: 35rem; margin: 20px auto 0; }

.chamada-final__versao {
    margin-top: 18px;
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    color: var(--cor-cinza-fraco);
}

.arco {
    position: relative;
    block-size: 640px;
    margin-top: 40px;
    perspective: 1600px;
    perspective-origin: 50% 0;
}

.arco__anel {
    position: absolute;
    left: 50%;
    top: 150px;
    inline-size: 1500px;
    block-size: 1500px;
    translate: -50% 0;
    border-radius: 50%;
    border-top: 2px solid color-mix(in srgb, var(--cor-luz-gelo) 95%, transparent);
    box-shadow:
        0 -24px 60px -8px color-mix(in srgb, var(--cor-luz) 75%, transparent),
        0 -80px 160px -20px color-mix(in srgb, var(--cor-luz-media) 55%, transparent),
        inset 0 40px 90px -30px color-mix(in srgb, var(--cor-luz) 55%, transparent);
    background: radial-gradient(closest-side, var(--cor-noite) 94%, transparent);
}

.arco__halo {
    position: absolute;
    left: 50%;
    top: 40px;
    inline-size: 1300px;
    block-size: 480px;
    translate: -50% 0;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--cor-luz-media) 30%, transparent), transparent);
    filter: blur(20px);
}

.arco__tela {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 210px;
    inline-size: min(820px, 88%);
    translate: -50% 0;
    padding: 10px;
    border-radius: var(--raio-vidro);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-luz) 30%, transparent), color-mix(in srgb, var(--cor-navy-cartao) 90%, transparent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 60%, transparent),
        0 40px 100px -20px color-mix(in srgb, var(--cor-tinta) 90%, transparent),
        0 0 60px -10px color-mix(in srgb, var(--cor-luz) 50%, transparent);
    rotate: x 22deg;
    transform-origin: 50% 100%;
    mask-image: linear-gradient(180deg, black 30%, transparent 74%);
}

.arco__tela img { display: block; width: 100%; height: auto; border-radius: var(--raio-modal); }

/* O arco é de ponta a ponta; sem o max, em tela larga a ficha fugia da coluna. */
.arco__ficha { right: max(10%, calc(50% - 580px)); top: 190px; z-index: 3; }

.arco__chao {
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    block-size: 380px;
    background: linear-gradient(180deg,
        transparent,
        color-mix(in srgb, var(--cor-noite) 55%, transparent) 40%,
        color-mix(in srgb, var(--cor-noite) 88%, transparent) 70%,
        var(--cor-noite) 96%);
}

/* ---------------------------------------------------------------- a entrada ao rolar */

/* Nada nasce escondido: sem suporte a `animation-timeline`, o elemento já está
   no lugar. Com suporte, ele vem de 28 px abaixo enquanto entra na tela. Anima
   `translate`, e não `transform`, porque o transform do cartão é a inclinação
   da luz do cursor, e os dois não podem brigar. O `@supports` com o padrão
   visível é a defesa (§Movimento). */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        [data-revelar] {
            animation: revela linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        [data-revelar-grupo] > [data-revelar]:nth-child(2) { animation-range: entry 8% entry 63%; }
        [data-revelar-grupo] > [data-revelar]:nth-child(3) { animation-range: entry 16% entry 71%; }
        [data-revelar-grupo] > [data-revelar]:nth-child(4) { animation-range: entry 24% entry 79%; }
    }
}

@keyframes revela {
    from { opacity: 0; translate: 0 28px; }
    to { opacity: 1; translate: 0 0; }
}

/* ---------------------------------------------------------------- estreito */

@media (max-width: 67.5rem) {
    .ficha--capitulo { left: 1%; top: 66%; }
    .numeros__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .local { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-3); }

    /* NA COLUNA ÚNICA A FAIXA VAZIA SAI, desde 30/09/2026. Ela existe para o
       orbe ficar na altura do meio dos cartões do lado, e empilhado não há
       cartão do lado: sobravam 180 px de fundo entre a máquina e o orbe,
       contra 64 entre o orbe e o rótulo. Sem ela, o respiro de cima decide.
       Com 48, o vão caía a 72 e o brilho do orbe chegava a uns 25 px do
       cartão: o vazio só trocava de lado. Com 64, ficam 88, e o anel do
       radar, que no maior tamanho passa 70 px do orbe e já chega apagado,
       para a 18 px do cartão. Medido em 375 e em 1000. */
    .ponte { grid-template-rows: none; padding: var(--espaco-8) 0 var(--espaco-6); }

    .ponte > .orbe,
    .ponte > .ponte__rotulo--nao { grid-row: auto; }

    .orbe__raio--esq,
    .orbe__raio--dir { display: none; }
}

@media (max-width: 53.75rem) {
    .secao--palco { padding-block: var(--espaco-12); }
    .demo { grid-template-columns: minmax(0, 1fr); }
    .demo__palco { padding: 44px var(--espaco-3) 40px; border-right: 0; border-bottom: 1px solid var(--borda-vidro); }
    .bento { grid-template-columns: minmax(0, 1fr); }
    .bento__item--largo { grid-column: auto; }
    .passo { min-height: 0; }
    .passo__midia { min-height: 0; padding: var(--espaco-4) 22px 12px; }
    .cena--gravar { grid-template-columns: minmax(0, 1fr); }
    .cena--publicar { block-size: 280px; }
    .prova { grid-template-columns: minmax(0, 1fr); }
    .prova__papel { min-height: 0; padding: 40px 20px; }
    .prova__texto { padding: var(--espaco-2) 12px 20px; }
    .publicos { grid-template-columns: minmax(0, 1fr); }
    .publicos__coluna:nth-child(2) { margin-top: 0; }
    .publico .bolha { margin-bottom: 28px; }
    .arco { block-size: 460px; }
    .arco__anel { inline-size: 900px; block-size: 900px; top: 120px; }
    .arco__tela { top: 160px; }
    .arco__ficha { display: none; }
}

@media (max-width: 40rem) {
    .heroi { padding-top: 124px; }
    .heroi__acoes .botao { width: 100%; }
    .palco { margin-top: var(--espaco-8); width: calc(100% - 2 * 20px); }
    .palco__luz { inline-size: 90%; left: -55%; }
    .palco__luz--dir { left: auto; right: -55%; }
    .aparelho { padding: 6px; border-radius: 18px; }
    .aparelho__tela { border-radius: 13px; }
    .aparelho__barra { min-height: 34px; padding: 0 12px; gap: 10px; font-size: 0.625rem; }
    .aparelho__monitor { display: none; }
    .demo__palco { padding: 38px var(--espaco-2) 34px; }
    .demo__canto { inline-size: 16px; block-size: 16px; border-width: 2px; }
    .demo__canto--1,
    .demo__canto--2 { top: -7px; }
    .demo__canto--3,
    .demo__canto--4 { bottom: -7px; }
    .demo__canto--1,
    .demo__canto--3 { left: -7px; }
    .demo__canto--2,
    .demo__canto--4 { right: -7px; }
    .demo__rotulo { top: -26px; font-size: 0.59375rem; }
    .demo__cursor { inline-size: 18px; block-size: 18px; }
    .demo__flutuante { bottom: -16px; gap: 6px; padding: 4px 10px 4px 5px; font-size: 0.625rem; }
    .demo__flutuante img { inline-size: 18px; block-size: 18px; }
    .demo__passos { padding: var(--espaco-2) 12px 14px; }
    .demo__passo { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 7px; }
    .demo__zoom { inline-size: 72px; block-size: 48px; }
    .demo__zoom--1 { --bx: -280px; --by: -363px; }
    .demo__zoom--2 { --bx: -443px; --by: -363px; }
    .demo__zoom--3 { --bx: -613px; --by: -396px; }
    .demo__acao { font-size: 0.78125rem; }
    .ficha { gap: var(--espaco-1); padding: 7px 12px 7px var(--espaco-1); font-size: 0.75rem; }
    .ficha__icone { inline-size: 20px; block-size: 20px; }
    .ficha--capitulo,
    .ficha--hash { display: none; }
    .faixa { padding-top: 40px; }
    .faixa__item { padding: 14px 20px; font-size: 0.875rem; }
    .numeros__grade { grid-template-columns: minmax(0, 1fr); }
    .numero { min-height: 0; }
    .numero__rotulo { padding-top: 28px; }
    .selo__linha { inline-size: 32px; }
    .passo__texto { padding: 0 22px var(--espaco-3); }
    .passo__midia { padding: 28px var(--espaco-2) 10px; }
    .cena--publicar { block-size: 200px; }
    .doc--relatorio { top: 56px; }
    .doc__rotulo { left: var(--espaco-1); bottom: -12px; padding: 4px 9px; font-size: 0.65625rem; }
    .doc--relatorio .doc__rotulo { left: auto; right: var(--espaco-1); }
    .doc__extra { display: none; }
    .revisao__lista li { font-size: 0.75rem; }
    .pino { inline-size: 22px; block-size: 22px; font-size: 0.6875rem; }
    .lado,
    .publico { padding: var(--espaco-3); }
}

/* Quem pede menos movimento não recebe nenhum laço. O bloco geral lá em cima
   reduz toda animação a uma passada instantânea; estes laços são infinitos e
   decorativos, e ficam parados de vez. */
@media (prefers-reduced-motion: reduce) {
    .entra,
    .palco,
    .palco__luz,
    .ponto-gravando::after,
    .ficha,
    .faixa__trilho,
    .revisao__caret,
    .pino::after,
    .orbe__raio::before,
    .orbe__anel,
    .demo__passo.proximo::after {
        animation: none;
    }

    [data-revelar] { animation: none; }
}

/* ============================================================
   AS PÁGINAS INTERNAS DA ONDA 3, 29/09/2026
   ============================================================

   O que as páginas portadas dividem e a home não usa: a abertura com a grade
   e a luz de cima, o título de página, a captura em moldura de vidro e o
   cartão de chamada com a mira. /o-aplicativo é a primeira; as próximas
   entram aqui, e o que for de uma página só fica no bloco dela, logo abaixo.

   A PROSA DAS PÁGINAS PORTADAS É MAIS CLARA que a das outras: o corpo, e não o
   névoa, porque o chão desceu para a noite. A regra mora em cada bloco, e não
   no `.texto-secundario`, para as páginas ainda não portadas não mudarem de
   cor pela metade. */

/* A ABERTURA SOBE POR BAIXO DO CABEÇALHO, como o herói da home, e leva a
   grade e a luz junto; o padding devolve a altura da barra e mais 88 px. Ela
   não é `.abertura`, e por isso a regra da costura (`main > .abertura`) não a
   alcança: são dois jeitos de resolver a mesma coisa, e este é o que fica
   quando a última página for portada. */
.abertura-pagina {
    position: relative;
    isolation: isolate;
    margin-top: calc(-1 * var(--altura-cabecalho));
    padding: calc(var(--altura-cabecalho) + 88px) 0 var(--espaco-12);
    overflow: hidden;
}

.abertura-pagina::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    block-size: 900px;
    background-image:
        linear-gradient(color-mix(in srgb, var(--cor-branco-gelo) 3.5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cor-branco-gelo) 3.5%, transparent) 1px, transparent 1px);
    background-size: var(--espaco-8) var(--espaco-8);
    background-position: center top;
    mask-image: radial-gradient(60% 55% at 50% 22%, black 20%, transparent 75%);
    pointer-events: none;
}

.abertura-pagina::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -260px;
    inline-size: 1100px;
    block-size: 760px;
    translate: -50% 0;
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--cor-luz-media) 22%, transparent),
        color-mix(in srgb, var(--cor-luz-funda) 8%, transparent) 55%,
        transparent);
    pointer-events: none;
}

/* NA ABERTURA NADA ENTRA AO ROLAR: ela é a primeira tela, e o que está nela
   nasceria pela metade, com a parte de baixo ainda entrando. Os cartões de
   plano trazem `data-revelar` do componente, e em /precos eles moram aqui. */
.abertura-pagina [data-revelar] { animation: none; }

.titulo-pagina {
    font-size: clamp(2.3rem, 5vw, 4rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

/* O selo encostado à esquerda, para a abertura em duas colunas: um fio só,
   saindo da pílula. */
.selo--esquerda { justify-content: flex-start; }

.abertura-dupla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--espaco-8);
    align-items: center;
}

.abertura-dupla__texto .texto-secundario {
    margin-top: var(--espaco-3);
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--cor-corpo);
}

.abertura-dupla__texto .legenda { margin-top: var(--espaco-2); max-width: 46em; }

/* A luz atrás da captura: a mesma família do palco da home, mais baixa. */
.vitrine__luz {
    position: absolute;
    z-index: -1;
    top: 5%;
    inline-size: 60%;
    block-size: 90%;
    border-radius: 50%;
    background: var(--brilho-luz);
    filter: blur(24px);
    opacity: 0.75;
    pointer-events: none;
}

.vitrine__luz--esq { left: -30%; }
.vitrine__luz--dir { right: -30%; }

.vitrine {
    position: relative;
    isolation: isolate;
}

/* A MOLDURA DE VIDRO das capturas: o vidro do aparelho da home, mais fino.
   Não é janela: sem barra de título e sem botões, só a borda que diz onde a
   captura começa, com a luz pegando em cima. */
.tela-em-vidro {
    position: relative;
    padding: var(--espaco-1);
    border-radius: var(--raio-vidro);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-luz) 22%, transparent),
        color-mix(in srgb, var(--cor-navy-elevado) 12%, transparent) 25%,
        color-mix(in srgb, var(--cor-navy-cartao) 85%, transparent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 45%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--cor-branco-gelo) 10%, transparent),
        0 40px 90px -30px color-mix(in srgb, var(--cor-tinta) 90%, transparent),
        0 0 70px -20px color-mix(in srgb, var(--cor-luz) 35%, transparent);
}

.tela-em-vidro picture { display: block; }

.tela-em-vidro img,
.tela-em-vidro video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--raio-modal);
    background-color: color-mix(in srgb, var(--cor-navy-superficie) 70%, var(--cor-noite));
}

/* O CARTÃO DE CHAMADA, com a mira de captura nos quatro cantos: os cantos do
   logo. Ele não tem a luz do cursor, e é o único cartão sem ela: a borda dele
   já é luz, e sem o recorte, que a mira pede, a luz vazaria para fora. */
.chamada-cartao {
    max-width: 55rem;
    margin: 0 auto;
    padding: var(--espaco-8) 40px;
    justify-items: center;
    text-align: center;
    overflow: visible;
    border-color: transparent;
    background:
        radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--cor-luz-media) 28%, transparent), transparent 70%) padding-box,
        linear-gradient(180deg, var(--cor-navy-cartao), color-mix(in srgb, var(--cor-navy-superficie) 60%, var(--cor-noite))) padding-box,
        linear-gradient(160deg,
            color-mix(in srgb, var(--cor-luz-gelo) 70%, transparent),
            color-mix(in srgb, var(--cor-luz-media) 35%, transparent) 35%,
            color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent) 65%,
            color-mix(in srgb, var(--cor-menta) 50%, transparent)) border-box;
}

.chamada-cartao:hover { border-color: transparent; }
.chamada-cartao::before { content: none; }

.chamada-cartao .texto-grande { max-width: 35rem; margin-top: var(--espaco-2); }
.chamada-cartao .heroi__acoes { margin-top: var(--espaco-4); }
.chamada-cartao .legenda { margin-top: var(--espaco-2); }

/* O parágrafo da chamada que leva link fica `.texto-secundario`, que é quem
   veste o link de prosa, com a medida e o corpo do `.texto-grande`. */
.chamada-cartao > .texto-secundario {
    max-width: 35rem;
    margin-top: var(--espaco-2);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--cor-corpo);
}

.mira__canto {
    position: absolute;
    inline-size: 32px;
    block-size: 32px;
    border: 3px solid var(--cor-menta);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cor-menta) 50%, transparent));
}

.mira__canto--1 { top: -12px; left: -12px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.mira__canto--2 { top: -12px; right: -12px; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.mira__canto--3 { bottom: -12px; left: -12px; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.mira__canto--4 { bottom: -12px; right: -12px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }

/* A seção que vem colada na de cima, como as medidas logo depois da
   abertura: o respiro de seção inteira dos dois lados somava 192 px. */
.secao--emendada { padding-top: 0; }

/* A prosa das páginas portadas: o corpo, e o negrito em gelo. */
.mostras--vidro .texto-secundario,
.saidas .texto-secundario,
.duplas .texto-secundario,
.documentos__topo .texto-secundario,
.decisao .texto-secundario,
.nada-sai .texto-secundario { color: var(--cor-corpo); }

.abertura-dupla__texto strong,
.mostras--vidro strong,
.saidas strong,
.duplas strong,
.documentos__topo strong,
.decisao strong,
.nada-sai strong {
    font-weight: 600;
    color: var(--cor-branco-gelo);
}

/* ---------------------------------------------------------------- /o-aplicativo */

/* AS FILEIRAS COM A TELA PRESA. A captura acompanha a leitura: a "Gravar" tem
   seis parágrafos, e a tela fica à vista até o último. `sticky` pede que
   nenhum ancestral recorte com `hidden`; quem segura a luz dentro da página é
   o `clip` da seção, que não cria rolagem. Quem emoldura a tela é o vidro. */
.secao--recortada { overflow-x: clip; }

.mostras--vidro { gap: 120px; }

.mostras--vidro .mostra {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--espaco-8);
    align-items: start;
}

.mostras--vidro .mostra__midia {
    position: sticky;
    top: calc(var(--altura-cabecalho) + 40px);
    isolation: isolate;
}

.mostras--vidro .mostra__midia .vitrine__luz { inline-size: 70%; block-size: 80%; opacity: 0.45; }

.mostras--vidro .mostra__texto { align-content: start; }

.mostras--vidro .mostra__rotulo,
.demos .mostra__rotulo {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    padding: 6px 14px;
    border-radius: var(--raio-pilula);
    border: 1px solid color-mix(in srgb, var(--cor-menta) 30%, transparent);
    background: color-mix(in srgb, var(--cor-menta) 6%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    font-weight: 400;
}

.mostras--vidro .mostra__rotulo::before,
.demos .mostra__rotulo::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--cor-menta);
    box-shadow: 0 0 8px var(--cor-menta);
}

.mostras--vidro .mostra__texto h2 {
    margin-top: var(--espaco-1);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.mostras--vidro .mostra__texto .texto-secundario { line-height: 1.7; }

.mostras--vidro .mostra__texto .legenda {
    margin-top: var(--espaco-1);
    padding: var(--espaco-2);
    border-radius: var(--raio-cartao);
    border: 1px solid var(--borda-vidro);
    background: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
}

/* Os dois documentos: o topo centrado, e em seguida os arquivos e a cadeia
   de prova lado a lado. */
.documentos__topo {
    max-width: 51.25rem;
    margin: 0 auto var(--espaco-8);
    text-align: center;
}

.documentos__topo .texto-secundario {
    margin-top: var(--espaco-2);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.documentos__topo .titulo-2 + .texto-secundario { margin-top: var(--espaco-3); }

.saidas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-3);
    align-items: start;
}

.saidas .cartao,
.duplas .cartao {
    gap: var(--espaco-2);
    padding: var(--espaco-4);
}

.saidas__arquivos h2 {
    font-size: 1.75rem;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

.saidas .texto-secundario,
.duplas .texto-secundario {
    font-size: 0.9375rem;
    line-height: 1.7;
}

:is(.saidas, .guia-layout, .abertura-pagina, .novidades, .etapas-pagina) code {
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--cor-menta) 20%, transparent);
    background: color-mix(in srgb, var(--cor-menta) 8%, transparent);
    color: var(--cor-menta);
    font-family: var(--fonte-mono);
    font-size: 0.9em;
}

.saidas__cadeia .texto-secundario + .texto-secundario {
    padding-top: var(--espaco-2);
    border-top: 1px solid var(--borda-vidro);
}

/* A TABELA DOS ARQUIVOS VIRA UMA LISTA DE ARQUIVOS na tela, com a extensão em
   mono, e continua tabela para o leitor de tela: o cabeçalho sai da vista e
   fica na árvore. O cartão é posicionado, e é ele que ancora o cabeçalho
   escondido (§Convenções, o `.visualmente-oculto` que fugia da tabela). */
/* Sem a beirada de rolagem que o envoltório ganha no telefone: aqui a tabela
   de duas colunas cabe em qualquer tela e não rola, e a sombra de navy sobre
   o cartão desenhava uma faixa escura atrás das fileiras. */
:is(.saidas, .guia-layout) .tabela-envoltorio {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
}

:is(.saidas, .guia-layout) .tabela {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 var(--espaco-1);
}

:is(.saidas, .guia-layout) .tabela thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

:is(.saidas, .guia-layout) .tabela th,
:is(.saidas, .guia-layout) .tabela td {
    padding: var(--espaco-2);
    vertical-align: middle;
    font-size: 0.9375rem;
    background: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
    border-top: 1px solid var(--borda-vidro);
    border-bottom: 1px solid var(--borda-vidro);
}

:is(.saidas, .guia-layout) .tabela th[scope="row"] {
    border-left: 1px solid var(--borda-vidro);
    border-radius: var(--raio-cartao) 0 0 var(--raio-cartao);
    font-family: var(--fonte-mono);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--cor-menta);
}

:is(.saidas, .guia-layout) .tabela td {
    border-right: 1px solid var(--borda-vidro);
    border-radius: 0 var(--raio-cartao) var(--raio-cartao) 0;
    color: var(--cor-corpo);
}

/* A `.tabela` tira a linha de baixo da última fileira, porque lá ela encosta
   na borda do envoltório; aqui cada fileira é uma caixa, e a última precisa
   fechar como as outras. */
:is(.saidas, .guia-layout) .tabela tbody tr:last-child td { border-bottom: 1px solid var(--borda-vidro); }

.duplas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-3);
    margin-top: var(--espaco-3);
}

.duplas h3 {
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

/* A galeria solta, no vidro: a moldura antiga do `.quadro picture` sai, e a
   legenda fica fora do vidro, embaixo, porque legenda dentro da moldura vira
   barra de status da própria captura.

   A FIGURA TEM A LARGURA DA CAPTURA, e não a da coluna: os 699 px do arquivo
   e os 8 px do vidro de cada lado. A captura sai de um vídeo 1280x720 e não
   tem pixel a mais para dar; esticada na coluna inteira, 1.144 px a 1392, ela
   ficaria 1,6 vez maior que o arquivo, e borrada. Captura nova pede a medida
   nova (ver o comentário da figura em /o-aplicativo). A legenda quebra dentro
   da mesma largura, centrada embaixo da imagem, e não da coluna. */
.quadro--vidro {
    max-width: calc(699px + 2 * var(--espaco-1));
    margin: 56px auto 0;
}

.quadro--vidro picture {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.quadro--vidro picture::before { content: none; }

.quadro--vidro .quadro__legenda {
    margin-top: var(--espaco-2);
    text-align: center;
    color: var(--cor-cinza-fraco);
}

/* AS OITO DECISÕES EM CARTÕES NUMERADOS. O número é um contador no `::after`,
   e não no `::before`, que em todo cartão é a luz do cursor. */
.decisoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-3);
    counter-reset: decisao;
}

.decisao {
    padding: var(--espaco-4) var(--espaco-4) var(--espaco-4) 88px;
    counter-increment: decisao;
}

.decisao::after {
    content: counter(decisao, decimal-leading-zero);
    position: absolute;
    top: var(--espaco-4);
    left: var(--espaco-4);
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--cor-luz) 35%, transparent);
    background: color-mix(in srgb, var(--cor-luz) 6%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.8125rem;
    color: var(--cor-luz);
}

.decisao__titulo {
    font-family: var(--fonte-titulo);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--cor-branco-gelo);
}

.decisao .texto-secundario {
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* Nada sai: o orbe da home em cima do título, e a prosa em medida de leitura. */
.nada-sai {
    max-width: 51.25rem;
    margin: 0 auto;
    text-align: center;
}

.nada-sai .orbe { margin: 0 auto var(--espaco-12); }

.nada-sai .texto-secundario {
    margin-top: var(--espaco-3);
    font-size: 1.0625rem;
    line-height: 1.75;
    text-align: left;
}

.nada-sai .legenda {
    margin-top: var(--espaco-4);
    line-height: 1.7;
    text-align: left;
}

@media (max-width: 67.5rem) {
    .abertura-dupla { grid-template-columns: minmax(0, 1fr); gap: 56px; }
    .mostras--vidro .mostra { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-4); }
    .mostras--vidro .mostra--invertida .mostra__midia { order: 0; }
    .mostras--vidro .mostra__midia { position: relative; top: auto; }
    .saidas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 53.75rem) {
    .duplas,
    .decisoes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
    .abertura-pagina { padding: calc(var(--altura-cabecalho) + 56px) 0 72px; }
    .mostras--vidro { gap: 80px; }
    .tela-em-vidro { padding: 6px; border-radius: var(--raio-modal); }
    .tela-em-vidro img { border-radius: 10px; }
    .chamada-cartao { padding: var(--espaco-6) 20px; }
    .saidas .cartao,
    .duplas .cartao { padding: var(--espaco-3) 20px; }
    .decisao { padding: 80px var(--espaco-3) var(--espaco-3); }
    .decisao::after { top: var(--espaco-3); left: var(--espaco-3); }
}

/* ---------------------------------------------------------------- /precos */

/* A ABERTURA DE /precos leva os planos dentro dela, e duas luzes ficam dos
   lados, na altura dos cartões, como o palco da home. */
.abertura-pagina--precos { padding-bottom: 120px; }

.precos__luz {
    position: absolute;
    z-index: -1;
    top: 52%;
    inline-size: 720px;
    block-size: 560px;
    border-radius: 50%;
    background: var(--brilho-luz);
    filter: blur(30px);
    opacity: 0.65;
    pointer-events: none;
}

.precos__luz--esq { left: -520px; }
.precos__luz--dir { right: -520px; }

.precos__cabeca { margin-bottom: 72px; }

/* O título de /precos é uma frase inteira, e no tamanho do `.titulo-pagina`
   ela quebraria em quatro linhas: um degrau abaixo. */
.titulo-precos {
    font-size: clamp(2.1rem, 4.2vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

/* O que não se cobra: a tabela que não existe ao lado das quatro razões. */
.sem-cota {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--espaco-3);
}

.tabela-fantasma {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: var(--espaco-4);
}

.tabela-fantasma__rotulo {
    margin-bottom: var(--espaco-1);
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
}

.tabela-fantasma__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--espaco-2);
    border: 1px dashed color-mix(in srgb, var(--cor-branco-gelo) 14%, transparent);
    border-radius: var(--raio-cartao);
    background: color-mix(in srgb, var(--cor-branco-gelo) 2%, transparent);
}

.tabela-fantasma__nome {
    color: var(--cor-cinza-fraco);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--cor-gravacao) 75%, transparent);
    text-decoration-thickness: 1.5px;
}

.tabela-fantasma__fora {
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--cor-menta) 30%, transparent);
    border-radius: var(--raio-pilula);
    background: color-mix(in srgb, var(--cor-menta) 6%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--cor-menta);
}

/* A COMPARAÇÃO EM VIDRO. Em qualquer largura o envoltório é um cartão no navy,
   que é a cor das beiradas de rolagem e da coluna presa do telefone: com o
   fundo transparente, as duas pintavam faixas de navy sobre a noite. */
.tabela-envoltorio--comparacao {
    border-color: var(--borda-vidro);
    border-radius: var(--raio-vidro);
    background-color: var(--cor-navy);
}

.tabela--comparacao {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375rem;
}

.tabela--comparacao th,
.tabela--comparacao td {
    vertical-align: middle;
    border-bottom-color: color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
}

/* A `.tabela` tira a linha de baixo da última fileira de cada `<tbody>`, e
   aqui há um por categoria: sem isto, o fim de cada grupo perdia a linha nas
   células e a mantinha no nome, uma régua pela metade. Só a última fileira da
   tabela fica sem ela, porque ali encosta a borda do cartão. */
.tabela--comparacao tbody tr:last-child td {
    border-bottom: 1px solid color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
}

.tabela--comparacao tbody:last-child tr:last-child > * { border-bottom: none; }

.tabela--comparacao th[scope="row"] {
    font-weight: 400;
    color: var(--cor-corpo);
}

.tabela--comparacao thead th {
    padding-block: var(--espaco-3);
    font-size: 1.125rem;
    background-color: color-mix(in srgb, var(--cor-navy-cartao) 70%, var(--cor-navy));
    border-bottom-color: var(--borda-vidro-forte);
}

.tabela--comparacao thead th:first-child {
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
}

/* A COLUNA DO PRO LEVA A LUZ, como o cartão dele, e é a única com o visto
   cheio. É a terceira porque a marcação escreve Gratuito, Pro e Time nessa
   ordem (`DesenharCelula` em Precos.razor). */
.tabela--comparacao thead th:nth-child(3) {
    color: color-mix(in srgb, var(--cor-menta) 55%, var(--cor-branco-gelo));
}

.tabela--comparacao td:nth-child(3) {
    background-color: color-mix(in srgb, var(--cor-luz-media) 6%, transparent);
}

.tabela--comparacao td:nth-child(3) .tabela__sim {
    border-color: var(--cor-menta);
    background: var(--cor-menta);
    box-shadow: 0 0 14px -2px color-mix(in srgb, var(--cor-menta) 60%, transparent);
    color: var(--cor-noite);
}

.tabela--comparacao td .texto-secundario {
    font-size: 0.875rem;
    color: var(--cor-corpo);
}

/* Acima de 55 rem a tabela cabe inteira e o envoltório deixa de rolar de
   lado; é isso que faz o `sticky` da cabeça valer contra a página, e não
   contra o envoltório. Ela acompanha a rolagem logo abaixo do cabeçalho fixo,
   e o nome do plano fica à vista nas 63 linhas. */
@media (min-width: 55.0625rem) {
    .tabela-envoltorio--comparacao {
        overflow: visible;
        background-image: linear-gradient(180deg,
            color-mix(in srgb, var(--cor-navy-elevado) 45%, var(--cor-navy-cartao)),
            var(--cor-navy-cartao) 30%,
            var(--cor-navy));
        box-shadow:
            inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 7%, transparent),
            0 40px 100px -40px color-mix(in srgb, var(--cor-tinta) 90%, transparent);
    }

    .tabela--comparacao thead th {
        top: var(--altura-cabecalho);
        z-index: 2;
        background-color: color-mix(in srgb, var(--cor-navy-cartao) 94%, transparent);
        backdrop-filter: blur(12px);
    }

    /* Sem o recorte do envoltório, os cantos são das células. */
    .tabela--comparacao thead th:first-child { border-top-left-radius: var(--raio-vidro); }
    .tabela--comparacao thead th:last-child { border-top-right-radius: var(--raio-vidro); }
    .tabela--comparacao tbody:last-child tr:last-child > :first-child { border-bottom-left-radius: var(--raio-vidro); }
    .tabela--comparacao tbody:last-child tr:last-child > :last-child { border-bottom-right-radius: var(--raio-vidro); }

    /* As colunas de plano na largura da proposta. Os 8 rem da `.tabela`
       são do telefone, onde cada pixel da coluna presa conta; aqui sobram. */
    .tabela--comparacao td:not(:first-child),
    .tabela--comparacao th:not(:first-child) { width: 11rem; }

    /* A fileira sob o mouse acende. Só aqui: no telefone não há mouse, e o
       fundo translúcido deixaria ver através da coluna presa. */
    .tabela--comparacao tbody tr:not(.tabela__categoria):hover > * {
        background-color: color-mix(in srgb, var(--cor-branco-gelo) 2.5%, transparent);
    }
}

/* A dúvida e a chamada fecham a mesma seção que a garantia. */
.precos__duvida {
    margin-top: var(--espaco-4);
    text-align: center;
    font-size: 0.9375rem;
    color: var(--cor-corpo);
}

.precos__duvida + .chamada-cartao { margin-top: 120px; }

@media (max-width: 67.5rem) {
    .sem-cota { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 55rem) {
    /* O "Recurso" preso à esquerda pega a cor das outras células da cabeça, e
       não o navy da coluna de baixo. */
    .tabela--comparacao thead th:first-child {
        background-color: color-mix(in srgb, var(--cor-navy-cartao) 70%, var(--cor-navy));
    }
}

@media (max-width: 40rem) {
    .abertura-pagina--precos { padding-bottom: var(--espaco-12); }
    .garantia { border-radius: var(--raio-vidro); }
    .diferencial { grid-template-columns: minmax(0, 1fr); }
    .diferencial__item .bolha { margin-bottom: var(--espaco-2); }
    .tabela-fantasma { padding: var(--espaco-3) 20px; }
}

/* ---------------------------------------------------------------- /como-usar */

.cabecalho-secao--palco .texto-grande + .texto-grande { margin-top: var(--espaco-2); }

/* A abertura que só tem o cabeçalho acaba nele: os 64 px de baixo do
   `--palco` são para separar o cabeçalho do conteúdo da seção, e aqui a seção
   acaba junto. Em /precos os planos vêm depois, e a regra não se aplica. */
.abertura-pagina > .conteudo > .cabecalho-secao--palco:last-child { margin-bottom: 0; }

/* O GUIA EM DUAS COLUNAS: o índice preso de um lado e os tópicos em cartão do
   outro. Mora sob `.guia-layout` porque as mesmas classes `.guia__*` servem a
   /perguntas, aos três guias e às páginas legais, que ainda não foram
   portadas; quando forem, é este o esqueleto delas, como na proposta. */
.secao--guia { padding-top: var(--espaco-2); }

.guia-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--espaco-8);
    align-items: start;
}

.guia-layout .guia__indice {
    position: sticky;
    top: calc(var(--altura-cabecalho) + var(--espaco-4));
    display: grid;
    gap: 4px;
    padding: var(--espaco-2);
}

.guia-layout .guia__indice-titulo {
    padding: var(--espaco-1) var(--espaco-1) 12px;
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
}

/* O atalho deixa de ser pílula: dentro do cartão do índice ele é uma linha,
   com o número num círculo. O que acende é o tópico que está sendo lido
   (`--atual`, escrito pelo animacoes.js), e no passar do mouse só o fundo. */
.guia-layout .guia__atalho {
    display: grid;
    /* `auto`, e não 32 px: o atalho de /perguntas não tem número, e com a
       coluna fixa o rótulo cairia nela, numa fita de 32 px. Com número, a
       coluna mede o círculo, que tem 32. */
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 0;
    border-radius: var(--raio-cartao);
    background: none;
    color: var(--cor-corpo);
    font-size: 0.9375rem;
    font-weight: 400;
    transition: background-color 200ms ease, color 200ms ease;
}

.guia-layout .guia__atalho:hover {
    transform: none;
    color: var(--cor-branco-gelo);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 4%, transparent);
}

.guia-layout .guia__atalho-ordem {
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid var(--borda-vidro-forte);
    border-radius: 50%;
    font-size: 0.75rem;
    letter-spacing: 0;
    color: var(--cor-cinza-fraco);
}

.guia-layout .guia__atalho--atual {
    color: var(--cor-branco-gelo);
    background-color: color-mix(in srgb, var(--cor-menta) 6%, transparent);
}

.guia-layout .guia__atalho--atual .guia__atalho-ordem {
    border-color: var(--cor-menta);
    background: var(--cor-menta);
    box-shadow: 0 0 16px color-mix(in srgb, var(--cor-menta) 50%, transparent);
    color: var(--cor-noite);
}

/* Cada tópico é um cartão, e o número deixa de ser trilho: sem a coluna de
   4,5 rem, o texto ganha a largura do cartão. O primeiro tópico perdia a
   borda de cima pela regra antiga (`:first-child`), que existia para a linha
   entre tópicos e aqui arrancaria um lado do cartão. */
.guia-layout .guia {
    gap: var(--espaco-4);
    margin-top: 0;
}

.guia-layout .guia__topico,
.guia-layout .guia__topico:first-child {
    display: block;
    padding: 40px;
    border-top: 1px solid var(--borda-vidro);
    scroll-margin-top: calc(var(--altura-cabecalho) + var(--espaco-4));
}

.guia-layout .guia__ordem {
    padding: 0;
    border: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--cor-menta);
}

.guia-layout .guia__titulo {
    margin-top: var(--espaco-1);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.25;
    letter-spacing: -0.04em;
}

/* Sem a medida de 60ch da regra antiga, que valia para todo parágrafo filho
   do tópico e estreitava também o aviso: no cartão, texto e caixas vão até a
   borda, como os passos. */
.guia-layout .guia__topico > p { max-width: none; }

.guia-layout .guia__topico > .texto-secundario {
    max-width: none;
    margin-top: var(--espaco-2);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--cor-corpo);
}

/* O NÚMERO DO PASSO É DESENHO sobre o contador da própria lista
   (`list-item`), e a lista continua lista: o `role="list"` da marcação é o que
   o Safari pede para não tirar a semântica de quem perde o marcador. */
.guia-layout .guia__passos {
    max-width: none;
    margin: var(--espaco-3) 0 0;
    padding: 0;
    list-style: none;
    color: var(--cor-corpo);
}

.guia-layout .guia__passos li {
    position: relative;
    padding: 12px var(--espaco-2) 12px 56px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-cartao);
    background: color-mix(in srgb, var(--cor-branco-gelo) 2.5%, transparent);
    font-size: 0.9375rem;
}

.guia-layout .guia__passos li::before {
    content: counter(list-item);
    position: absolute;
    top: 50%;
    left: var(--espaco-2);
    translate: 0 -50%;
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border: 1px solid color-mix(in srgb, var(--cor-menta) 40%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--cor-menta) 6%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    color: var(--cor-menta);
}

/* O aviso de plano pago, em âmbar, que é a cor de aviso da casa. */
.guia-layout .guia__nota {
    margin-top: var(--espaco-2);
    padding: var(--espaco-2);
    border-color: color-mix(in srgb, var(--cor-aviso) 35%, transparent);
    border-radius: var(--raio-cartao);
    background: color-mix(in srgb, var(--cor-aviso) 7%, transparent);
    color: color-mix(in srgb, var(--cor-aviso) 45%, var(--cor-branco-gelo));
    font-size: 0.875rem;
}

.guia-layout .guia__figura { margin: var(--espaco-4) 0 0; }
.guia-layout .guia__tela { border: 0; }

/* OS SEIS VÍDEOS EM GRADE DE CARTÕES, dois por linha, cada um no vidro. */
.demos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-3);
}

.demos .mostra {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--espaco-2) var(--espaco-2) var(--espaco-4);
}

.demos .mostra__texto {
    align-content: start;
    padding: var(--espaco-3) var(--espaco-1) 0;
}

.demos .mostra__texto h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.03em;
}

.demos .mostra__texto .texto-secundario {
    font-size: 0.9375rem;
    color: var(--cor-corpo);
}

@media (max-width: 67.5rem) {
    .guia-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espaco-4);
    }

    /* O índice vira uma faixa de atalhos que rola de lado, acima dos tópicos.
       A barra de rolagem nativa sai: a faixa rola pelo dedo, e a beirada que
       apaga à direita é o que diz que há mais. */
    .guia-layout .guia__indice {
        position: static;
        display: flex;
        flex-wrap: nowrap;
        gap: var(--espaco-1);
        overflow-x: auto;
        padding: var(--espaco-1);
        mask-image: linear-gradient(90deg, black 85%, transparent);
        scrollbar-width: none;
    }

    .guia-layout .guia__indice::-webkit-scrollbar { display: none; }
    .guia-layout .guia__indice-titulo { display: none; }

    .guia-layout .guia__atalho {
        flex: none;
        grid-template-columns: auto auto;
        white-space: nowrap;
    }

    .guia-layout .guia__atalho-ordem { inline-size: 28px; block-size: 28px; }
}

@media (max-width: 53.75rem) {
    .demos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
    .guia-layout .guia__topico,
    .guia-layout .guia__topico:first-child { padding: var(--espaco-3) 20px; }

    .guia-layout .guia__passos li { padding-left: 52px; }
}

/* ---------------------------------------------------------------- /perguntas */

/* As perguntas em grupos no esqueleto de consulta: cada grupo com o título e a
   lista em sanfona. A sanfona mora sob `.guia-layout`, como o resto do
   esqueleto: o `.pergunta` serve também às perguntas dos guias, que ainda não
   foram portados. */
.perguntas-grupo + .perguntas-grupo { margin-top: 56px; }

.perguntas-grupo > h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.25;
    letter-spacing: -0.04em;
    scroll-margin-top: calc(var(--altura-cabecalho) + var(--espaco-4));
}

.guia-layout .perguntas {
    max-width: none;
    gap: 12px;
}

.guia-layout .pergunta {
    padding: 0;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
    background: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
    transition: border-color 300ms ease;
}

.guia-layout .pergunta:hover { border-color: var(--borda-vidro-forte); }

.guia-layout .pergunta[open] {
    border-color: color-mix(in srgb, var(--cor-luz) 30%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-luz-media) 8%, transparent),
        color-mix(in srgb, var(--cor-branco-gelo) 2%, transparent));
}

/* O título continua sendo o alvo do toque inteiro (a regra de 02/09/2026, mais
   acima), agora sem a margem negativa: o cartão não tem mais recuo para ele
   engolir, e o recuo mora no próprio título. */
.guia-layout .pergunta__titulo {
    margin: 0;
    padding: var(--espaco-2) 20px;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}

.guia-layout .pergunta__titulo:focus-visible { border-radius: var(--raio-modal); }

/* O MAIS QUE VIRA MENOS, desenhado: dois traços no fundo de um círculo. Só o
   giro anima; o traço de pé some de uma vez, porque animar o tamanho do fundo
   não é opacidade nem transformação (§Movimento). */
.guia-layout .pergunta__titulo::after {
    content: "";
    flex: none;
    inline-size: 28px;
    block-size: 28px;
    border: 1px solid var(--borda-vidro-forte);
    border-radius: 50%;
    background:
        linear-gradient(var(--cor-corpo), var(--cor-corpo)) center / 11px 1.5px no-repeat,
        linear-gradient(var(--cor-corpo), var(--cor-corpo)) center / 1.5px 11px no-repeat;
    transition: transform 350ms cubic-bezier(.22, 1, .36, 1);
}

.guia-layout .pergunta[open] .pergunta__titulo::after {
    content: "";
    transform: rotate(180deg);
    border-color: color-mix(in srgb, var(--cor-menta) 50%, transparent);
    background-size: 11px 1.5px, 1.5px 0;
}

.guia-layout .pergunta__resposta {
    margin: 0;
    padding: 0 20px 20px;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--cor-corpo);
}

/* ---------------------------------------------------------------- os guias */

/* OS TRÊS GUIAS (/evidencia-de-teste, /gravador-de-passos e
   /modelo-de-bug-report) usam o esqueleto de /como-usar e têm peças que só
   eles têm: a lista marcada, as etapas em trilho, o bloco para copiar, a
   tabela de campos e o bloco de download dentro de um tópico. Tudo sob
   `.guia-layout`, porque as mesmas classes servem a /baixar, /confirmar e à
   administração, que ainda não foram portadas; o trilho das etapas e o bloco
   para copiar servem também a /depois-de-baixar (`.etapas-pagina`). A tabela
   de campos veste a mesma lista de /o-aplicativo
   (`:is(.saidas, .guia-layout) .tabela`, mais acima). */

/* O índice longo não passa do fim da janela: preso a 112 px do topo, ele
   rola dentro do cartão em vez de sair por baixo. É o caso das páginas legais,
   com dez seções; nos guias ele cabe. */
@media (min-width: 67.5625rem) {
    .guia-layout .guia__indice {
        max-block-size: calc(100vh - var(--altura-cabecalho) - 64px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--cor-branco-gelo) 15%, transparent) transparent;
    }
}

.guia-layout .guia__topico strong {
    font-weight: 600;
    color: var(--cor-branco-gelo);
}

/* A subdivisão dentro de um tópico, um degrau abaixo do título dele. */
.guia-layout h3.guia__titulo {
    margin-top: var(--espaco-4);
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.guia-layout .guia__topico > .legenda { margin-top: var(--espaco-2); }

.guia-layout .guia__topico > .tabela-envoltorio,
.guia-layout .guia__topico > .lista-marcada { margin-top: var(--espaco-3); }

/* O espaçamento que a marcação pede continua valendo dentro do cartão: as
   regras do tópico acima dariam 16 px a quem pediu 24. */
.guia-layout .guia__topico > .espaco-acima-3 { margin-top: var(--espaco-3); }

/* Na tabela de campos, o nome do campo é frase curta e quebra linha: sem
   quebra, «Resultado esperado e obtido» espremia a descrição ao lado. */
.guia-layout .tabela th[scope="row"] {
    inline-size: 9rem;
    white-space: normal;
}

/* O BLOCO DE DOWNLOAD DENTRO DE UM TÓPICO (o modelo em Word do guia de
   evidência): vidro com a luz no canto, e não o aro da chamada antiga. */
.guia-layout .guia__topico .chamada {
    padding: var(--espaco-4) var(--espaco-3);
    border: 1px solid color-mix(in srgb, var(--cor-luz) 30%, transparent);
    border-radius: var(--raio-modal);
    background:
        radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--cor-luz-media) 18%, transparent), transparent 60%),
        color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
}

.guia-layout .guia__topico .chamada h3 {
    font-size: 1.25rem;
    letter-spacing: -0.03em;
}

.guia-layout .guia__topico .chamada .texto-secundario {
    font-size: 0.9375rem;
    color: var(--cor-corpo);
}

/* AS ETAPAS EM TRILHO VERTICAL. A faixa horizontal da `.etapas`, que
   /confirmar ainda usa, não cabe numa coluna de 736 px com dois parágrafos
   por etapa. O número corta o trilho com um anel da cor do cartão. Os
   cartões de /depois-de-baixar (`.etapas-pagina`) usam o mesmo trilho, e o
   mesmo bloco para copiar, desde 30/09/2026. */
:is(.guia-layout, .etapas-pagina) .etapas {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espaco-2);
}

:is(.guia-layout, .etapas-pagina) .etapas::before {
    content: "";
    position: absolute;
    top: var(--espaco-3);
    bottom: var(--espaco-3);
    left: 19px;
    inline-size: 1px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-menta) 70%, transparent),
        color-mix(in srgb, var(--cor-luz) 40%, transparent),
        color-mix(in srgb, var(--cor-branco-gelo) 8%, transparent));
}

:is(.guia-layout, .etapas-pagina) .etapa {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--espaco-2);
    row-gap: 0;
    padding-top: 0;
}

:is(.guia-layout, .etapas-pagina) .etapa::before { content: none; }

:is(.guia-layout, .etapas-pagina) .etapa > :not(.etapa__numero) { grid-column: 2; }

:is(.guia-layout, .etapas-pagina) .etapa__numero {
    position: relative;
    z-index: 1;
    grid-row: span 6;
    inline-size: 40px;
    block-size: 40px;
    border: 1px solid color-mix(in srgb, var(--cor-menta) 45%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--cor-navy) 80%, var(--cor-navy-cartao));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-navy-cartao) 75%, var(--cor-noite));
    color: var(--cor-menta);
    font-family: var(--fonte-mono);
    font-size: 0.875rem;
    font-weight: 400;
}

:is(.guia-layout, .etapas-pagina) .etapa__titulo {
    margin-top: var(--espaco-1);
    font-size: 1.125rem;
    letter-spacing: -0.02em;
}

:is(.guia-layout, .etapas-pagina) .etapa .texto-secundario {
    margin-top: var(--espaco-1);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--cor-corpo);
}

/* A LISTA MARCADA vira caixas, com o ponto aceso no lugar do quadrado. O item
   continua sem grade, pela regra de 28/08/2026: recuo pendurado e o ponto
   absoluto, e a frase com `<strong>` no meio segue sendo frase. */
.guia-layout .lista-marcada { gap: 12px; }

.guia-layout .lista-marcada__item {
    padding: 12px var(--espaco-2) 12px 44px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-cartao);
    background: color-mix(in srgb, var(--cor-branco-gelo) 2.5%, transparent);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--cor-corpo);
}

.guia-layout .lista-marcada__item::before {
    top: 20px;
    left: 18px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    box-shadow: 0 0 10px color-mix(in srgb, var(--cor-menta) 60%, transparent);
}

/* O BLOCO PARA COPIAR, no escuro da noite, com o mono da casa. */
:is(.guia-layout, .etapas-pagina) .bloco-comando {
    padding: var(--espaco-3);
    border: 1px solid var(--borda-vidro-forte);
    border-radius: var(--raio-modal);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-navy) 70%, var(--cor-noite)), var(--cor-noite));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.84375rem;
    line-height: 1.75;
}

:is(.guia-layout, .etapas-pagina) .bloco-comando code {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

/* O fim dos guias: dois parágrafos no cartão da chamada. */
.chamada-cartao > .texto-secundario + .texto-secundario { margin-top: var(--espaco-1); }

@media (max-width: 40rem) {
    :is(.guia-layout, .etapas-pagina) .etapa { column-gap: 12px; }
    :is(.guia-layout, .etapas-pagina) .bloco-comando { padding: var(--espaco-2); font-size: 0.78125rem; }
    .guia-layout .tabela th[scope="row"] { inline-size: 7rem; }
    .guia-layout .guia__topico .chamada { padding: var(--espaco-3) var(--espaco-2); }
}

/* ---------------------------------------------------------------- as páginas legais */

/* OS DOCUMENTOS (/termos, /privacidade e /seguranca) no esqueleto dos guias:
   o índice preso ao lado e o texto inteiro num cartão só, com as seções
   separadas por filete. Tudo sob `.guia-layout`, porque o `.documento` de
   antes continua servindo às páginas legais que ainda não foram portadas.

   O cartão deixa de ser grade e passa a medir por margem: o título de seção
   leva o filete e o respiro de cima, e o texto fica na medida de leitura, 70
   caracteres, com a sobra do cartão à direita. */
.guia-layout .documento {
    display: block;
    padding: var(--espaco-6) 56px;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--cor-corpo);
}

.guia-layout .documento > h2 {
    margin-top: 0;
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    line-height: 1.25;
    letter-spacing: -0.035em;
    scroll-margin-top: calc(var(--altura-cabecalho) + var(--espaco-4));
}

/* O filete mora no título, e não no fim da seção de cima: quem chega pelo
   índice para no filete, e a seção começa por ele. `:first-of-type`, e não
   `:first-child`, porque o aviso de texto fora de vigor, quando existe, vem
   antes do primeiro título. */
.guia-layout .documento > h2:not(:first-of-type) {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--borda-vidro);
}

.guia-layout .documento > h3 {
    margin-top: var(--espaco-4);
    font-size: 1.1875rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.guia-layout .documento > p,
.guia-layout .documento > ul {
    max-width: 70ch;
    margin-top: var(--espaco-2);
}

.guia-layout .documento > .aviso {
    max-width: none;
    margin: 0 0 var(--espaco-4);
}

/* A LISTA GANHA O PONTO ACESO dos guias, sem a caixa: são cláusulas de um
   texto corrido, e uma caixa em volta de cada uma viraria parede.

   O marcador do navegador continua lá, transparente, de propósito. Sem
   marcador, o Safari deixa de anunciar a lista como lista, e o
   `role="list"` que os passos dos guias usam não cabe aqui: a lista das
   páginas com anúncio, em /privacidade, é lida por teste pela tag de
   abertura exata. */
.guia-layout .documento ul {
    display: grid;
    gap: var(--espaco-1);
    margin-bottom: 0;
    padding: 0;
}

.guia-layout .documento li {
    position: relative;
    padding-left: var(--espaco-3);
}

.guia-layout .documento li::marker { color: transparent; }

.guia-layout .documento li::before {
    content: "";
    position: absolute;
    top: calc(0.875em - 4px);
    left: 2px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--cor-menta);
    box-shadow: 0 0 8px color-mix(in srgb, var(--cor-menta) 50%, transparent);
}

.guia-layout .documento strong {
    font-weight: 600;
    color: var(--cor-branco-gelo);
}

@media (max-width: 40rem) {
    .guia-layout .documento {
        padding: var(--espaco-3) 20px;
        font-size: 0.9375rem;
    }

    .guia-layout .documento > h2:not(:first-of-type) {
        margin-top: 40px;
        padding-top: var(--espaco-3);
    }
}

/* ---------------------------------------------------------------- /novidades */

/* NOVIDADES: UMA ENTRADA POR VERSÃO PUBLICADA, desde a onda 3 (30/09/2026)
   num cartão sobre a linha do tempo.

   O REGISTRO DE VERSÕES VIROU UM LOG em 18/09/2026: cada entrada era separada
   por um filete horizontal, e filete horizontal diz "acabou um assunto,
   começa outro". Aqui não são assuntos diferentes: é a mesma coisa ao longo
   do tempo, e o que conta é a ordem. Ele virou uma espinha vertical, que é a
   forma que um registro cronológico pede, e a entrada mais recente acendia em
   menta para dizer onde está o presente.

   NA ONDA 3 A ESPINHA VIROU LINHA DO TEMPO, por fora dos cartões, com um
   ponto por versão, e a mais recente ganha o ponto aceso e o aro de menta.
   Ela acende por ser a primeira da lista, e não por uma classe na marcação:
   a próxima nota publicada herda o destaque sem ninguém lembrar de movê-lo. */
.novidades {
    position: relative;
    display: grid;
    gap: var(--espaco-4);
    max-width: 56.25rem;
    margin-inline: auto;
    padding-left: 56px;
}

.novidades::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 15px;
    inline-size: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        var(--cor-menta),
        color-mix(in srgb, var(--cor-luz) 50%, transparent) 18%,
        color-mix(in srgb, var(--cor-branco-gelo) 8%, transparent) 60%);
}

/* O PONTO DA LINHA MORA FORA DO CARTÃO, e o `.cartao` recorta tudo o que
   passa da borda, por causa da luz que segue o cursor (o `::before` dele).
   Nestes cartões a luz sai, e o recorte com ela: sem isso, o ponto sumiria
   junto com o que a luz desenha fora da caixa. */
.novidade {
    display: block;
    padding: var(--espaco-4) 40px;
    overflow: visible;
}

.novidade::before { content: none; }

.novidade::after {
    content: "";
    position: absolute;
    top: 34px;
    left: -49px;
    inline-size: 16px;
    block-size: 16px;
    border: 2px solid color-mix(in srgb, var(--cor-luz) 60%, transparent);
    border-radius: 50%;
    background: var(--cor-navy);
    box-shadow: 0 0 0 5px var(--cor-noite);
}

.novidade:first-child {
    border-color: transparent;
    background:
        radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--cor-menta) 12%, transparent), transparent 60%) padding-box,
        var(--material-cartao) padding-box,
        linear-gradient(160deg,
            color-mix(in srgb, var(--cor-menta) 70%, transparent),
            color-mix(in srgb, var(--cor-luz-media) 35%, transparent) 40%,
            color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent)) border-box;
}

.novidade:first-child::after {
    border-color: var(--cor-menta);
    background: var(--cor-menta);
    box-shadow:
        0 0 0 5px var(--cor-noite),
        0 0 20px color-mix(in srgb, var(--cor-menta) 80%, transparent);
}

/* A DATA CONTINUA EM MONO, porque é dado registrado, e não prosa. */
.novidade__data {
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--cor-cinza-fraco);
}

.novidade:first-child .novidade__data { color: var(--cor-menta); }

/* CADA VERSÃO É UM h2, e não um h3: a página tem o h1 do topo e nada entre
   ele e as versões, então o h3 abria um salto de nível que leitor de tela
   anuncia como seção faltando. Na onda 3 ela virou o título do cartão, na
   letra dos títulos; até ali era mono, no tamanho de um h3. */
.novidade__versao {
    margin-top: var(--espaco-1);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.045em;
}

.novidade > .texto-secundario {
    margin-top: 12px;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--cor-corpo);
}

.novidade strong {
    font-weight: 600;
    color: var(--cor-branco-gelo);
}

/* Nas notas a lista é leve, sem a caixa dos guias: 51 itens em caixa
   virariam parede. O ponto aceso é o mesmo, e o item continua sem grade. */
.novidade .lista-marcada {
    gap: 12px;
    margin-top: var(--espaco-3);
}

.novidade .lista-marcada__item {
    padding-left: var(--espaco-3);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--cor-corpo);
}

.novidade .lista-marcada__item::before {
    top: calc(0.825em - 4px);
    left: 4px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    box-shadow: 0 0 8px color-mix(in srgb, var(--cor-menta) 50%, transparent);
}

/* A nota do fim, alinhada aos cartões. */
.novidades + .texto-secundario {
    max-width: 56.25rem;
    margin-inline: auto;
    padding-left: 56px;
    font-size: 0.9375rem;
    line-height: 1.7;
}

@media (max-width: 40rem) {
    .novidades { padding-left: 34px; }
    .novidades::before { left: 7px; }
    .novidade { padding: var(--espaco-3) 20px; }

    .novidade::after {
        top: 27px;
        left: -34px;
        inline-size: 14px;
        block-size: 14px;
    }

    .novidades + .texto-secundario { padding-left: 0; }
}

/* ---------------------------------------------------------------- /depois-de-baixar */

/* OS QUATRO PASSOS DEPOIS DO DOWNLOAD, cada um num cartão, numa coluna só na
   medida de leitura. O comando e as etapas vestem o desenho dos guias (o
   bloco escuro e o trilho vertical, mais acima, sob
   `:is(.guia-layout, .etapas-pagina)`). O cartão não é grade: o espaço entre
   os blocos é margem, e o que a marcação pede (`.espaco-acima-3`) continua
   valendo dentro dele. */
.etapas-pagina {
    display: grid;
    gap: var(--espaco-4);
    max-width: 55rem;
    margin-inline: auto;
}

.etapa-pagina {
    display: block;
    padding: 40px;
}

.etapa-pagina .cabecalho-secao {
    display: block;
    max-width: none;
    margin: 0;
}

.etapa-pagina .cabecalho-secao h2 {
    margin-top: var(--espaco-1);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    line-height: 1.2;
    letter-spacing: -0.04em;
}

.etapa-pagina .cabecalho-secao .texto-secundario {
    margin-top: var(--espaco-2);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--cor-corpo);
}

.etapa-pagina > .bloco-comando,
.etapa-pagina > .etapas { margin-top: var(--espaco-3); }

.etapa-pagina > .texto-secundario,
.etapa-pagina > .legenda {
    margin-top: var(--espaco-2);
    line-height: 1.7;
}

.etapa-pagina > .texto-secundario { color: var(--cor-corpo); }

.etapa-pagina > .espaco-acima-3 { margin-top: var(--espaco-3); }

.etapa-pagina > .hero__acoes { margin-top: var(--espaco-4); }

.etapa-pagina strong {
    font-weight: 600;
    color: var(--cor-branco-gelo);
}

@media (max-width: 40rem) {
    .etapa-pagina { padding: var(--espaco-3) 20px; }
}

/* ---------------------------------------------------------------- as telas de conta */

/* AS PORTAS DA CONTA, desde a onda 3 (30/09/2026): o título e o apoio de um
   lado, o formulário num painel do outro, com a luz do herói atrás do painel.
   Tudo sob `.porta`, porque as classes do formulário (`.formulario`,
   `.campo`, `.opcao`, `.aviso`) servem também à área do cliente e à
   administração, que vestem o campo por `:is()` e têm o resto do desenho
   delas.

   A SEÇÃO SOBE POR BAIXO DO CABEÇALHO, como a `.abertura-pagina`, e leva a
   grade junto; o padding devolve a altura da barra e mais 72 px. O recorte é
   dela: as luzes passam do painel para os lados, e sem ele a página rolaria
   para o lado no telefone. */
.porta {
    position: relative;
    isolation: isolate;
    margin-top: calc(-1 * var(--altura-cabecalho));
    padding: calc(var(--altura-cabecalho) + 72px) 0 120px;
    overflow: hidden;
}

.porta::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    block-size: 900px;
    background-image:
        linear-gradient(color-mix(in srgb, var(--cor-branco-gelo) 3.5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cor-branco-gelo) 3.5%, transparent) 1px, transparent 1px);
    background-size: var(--espaco-8) var(--espaco-8);
    background-position: center top;
    mask-image: radial-gradient(60% 60% at 50% 30%, black 20%, transparent 75%);
    pointer-events: none;
}

/* A grade é o contexto de empilhamento das luzes: com `z-index: -1` dentro
   dela, elas ficam atrás do painel e na frente do chão da página. */
.porta__grade {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 72px;
    align-items: start;
}

.porta__texto { padding-top: var(--espaco-3); }

.porta__texto .selo { justify-content: flex-start; }
.porta__texto .selo__linha:first-child { display: none; }

.titulo-porta {
    font-size: clamp(2.3rem, 4.6vw, 3.75rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.porta__texto > .texto-grande {
    max-width: 30em;
    margin-top: var(--espaco-2);
}

.porta__painel { position: relative; }

/* A luz atrás do painel, a mesma dos dois lados do aparelho na home. */
.porta__luz {
    position: absolute;
    z-index: -1;
    top: 10%;
    inline-size: 70%;
    block-size: 80%;
    border-radius: 50%;
    background: var(--brilho-luz);
    filter: blur(24px);
    opacity: 0.7;
    pointer-events: none;
}

.porta__luz--esq { left: -42%; }
.porta__luz--dir { right: -42%; }

/* O PAINEL: o material do cartão, com o aro que vai do gelo à menta. A borda
   não acende no passar do mouse, como a dos outros cartões: é um formulário,
   e o aro é o desenho dele, não um sinal de que dá para clicar. */
.painel-conta,
.painel-conta:hover {
    border-color: transparent;
}

.painel-conta {
    display: block;
    padding: 40px;
    background:
        var(--material-cartao) padding-box,
        linear-gradient(160deg,
            color-mix(in srgb, var(--cor-luz-gelo) 75%, transparent),
            color-mix(in srgb, var(--cor-luz-media) 40%, transparent) 30%,
            color-mix(in srgb, var(--cor-branco-gelo) 7%, transparent) 60%,
            color-mix(in srgb, var(--cor-menta) 45%, transparent)) border-box;
    box-shadow:
        inset 0 -4px 120px 20px color-mix(in srgb, var(--cor-luz-media) 14%, transparent),
        var(--sombra-funda),
        0 30px 90px -40px color-mix(in srgb, var(--cor-luz-media) 60%, transparent);
}

/* O FORMULÁRIO DENTRO DA PORTA: campo mais alto, fundo da noite e a borda de
   vidro, e os campos mais perto uns dos outros, porque o painel já os agrupa.
   O foco continua sendo a menta, que é o que confirma. Vale também na área do
   cliente (`.secao--cliente`), desde /perfil, e na administração (`.painel`):
   o mesmo campo nas três. */
:is(.porta, .secao--cliente, .painel) .formulario { gap: var(--espaco-2); }

:is(.porta, .secao--cliente, .painel) .campo__rotulo { font-size: 0.875rem; }

:is(.porta, .secao--cliente, .painel) .campo__entrada {
    min-height: 48px;
    border-color: var(--borda-vidro-forte);
    border-radius: var(--raio-cartao);
    background-color: color-mix(in srgb, var(--cor-noite) 60%, transparent);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--cor-tinta) 40%, transparent);
    font-size: 0.9375rem;
}

:is(.porta, .secao--cliente, .painel) .campo__entrada:hover { border-color: color-mix(in srgb, var(--cor-branco-gelo) 30%, transparent); }

:is(.porta, .secao--cliente, .painel) .campo__entrada:focus {
    border-color: var(--cor-menta);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-menta) 16%, transparent);
}

:is(.porta, .secao--cliente, .painel) .campo__entrada.invalid {
    border-color: var(--cor-erro);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-erro) 14%, transparent);
}

:is(.porta, .secao--cliente) .campo--com-olho .campo__entrada { padding-right: 96px; }

:is(.porta, .secao--cliente) .campo__olho {
    height: 32px;
    padding-inline: 12px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-pilula);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
    color: var(--cor-corpo);
}

:is(.porta, .secao--cliente) .campo__olho:hover {
    color: var(--cor-branco-gelo);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 10%, transparent);
}

.porta .formulario .botao {
    width: 100%;
    min-height: 52px;
    margin-top: var(--espaco-1);
}

/* A CAIXA DAS NOVIDADES, maior e no vidro da porta. O visto é o da casa,
   desenhado, e só cresce com a caixa. O `:hover` e o `:checked` voltam com o
   prefixo: a regra da caixa, mais específica, apagaria os dois de antes. */
:is(.porta, .secao--cliente) .opcao { gap: 12px; }

:is(.porta, .secao--cliente) .opcao__marca[type="checkbox"] {
    inline-size: 22px;
    block-size: 22px;
    border: 1px solid var(--borda-vidro-forte);
    border-radius: 7px;
    background-color: color-mix(in srgb, var(--cor-noite) 60%, transparent);
}

:is(.porta, .secao--cliente) .opcao__marca[type="checkbox"]:hover { border-color: var(--cor-menta); }

:is(.porta, .secao--cliente) .opcao__marca[type="checkbox"]:checked {
    border-color: var(--cor-menta);
    background-color: var(--cor-menta);
}

:is(.porta, .secao--cliente) .opcao__marca[type="checkbox"]::after {
    inline-size: 0.65rem;
    block-size: 0.35rem;
}

:is(.porta, .secao--cliente) .opcao--frase .opcao__marca { margin-block-start: 0; }

:is(.porta, .secao--cliente) .opcao--frase .opcao__texto {
    font-size: 0.875rem;
    color: var(--cor-corpo);
}

/* O APOIO: o título vira rótulo em mono, e cada ponto vira uma caixa de vidro,
   com o ícone num selo de luz. O item continua sem grade nem flex, pela regra
   da casa: o ícone pendura por fora, e a frase com `<strong>` segue frase. */
.porta .tela-de-conta__apoio {
    max-width: 520px;
    margin-top: var(--espaco-6);
}

.porta .tela-de-conta__apoio .cartao__titulo {
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
}

.porta .tela-de-conta__lista {
    display: grid;
    gap: 12px;
    margin: var(--espaco-2) 0 0;
    padding: 0;
    list-style: none;
}

.porta .tela-de-conta__item {
    position: relative;
    padding: var(--espaco-2) var(--espaco-2) var(--espaco-2) 68px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-branco-gelo) 4.5%, transparent),
        color-mix(in srgb, var(--cor-branco-gelo) 1.2%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cor-corpo);
}

.porta .tela-de-conta__item strong {
    font-weight: 600;
    color: var(--cor-branco-gelo);
}

.porta .tela-de-conta__icone {
    position: absolute;
    inset-inline-start: var(--espaco-2);
    inset-block-start: 14px;
    inline-size: 36px;
    block-size: 36px;
    padding: var(--espaco-1);
    border: 1px solid color-mix(in srgb, var(--cor-luz) 25%, transparent);
    border-radius: var(--raio-cartao);
    background: color-mix(in srgb, var(--cor-luz-media) 12%, transparent);
    box-shadow: 0 0 18px -4px color-mix(in srgb, var(--cor-luz-media) 60%, transparent);
    color: var(--cor-luz);
}

.porta .tela-de-conta__apoio > .legenda { margin-top: var(--espaco-2); }

/* TRÊS PEÇAS NA ORDEM DO TELEFONE (título, formulário e apoio). Na tela larga
   o apoio sobe para debaixo do título, e o painel ocupa a coluna da direita
   inteira. A linha do apoio é a que estica, e ele fica no topo dela. */
@media (min-width: 67.5625rem) {
    .porta--conta .porta__grade {
        grid-template-areas: "texto painel" "apoio painel";
        grid-template-rows: auto 1fr;
        row-gap: 0;
    }

    .porta--conta .porta__texto { grid-area: texto; }
    .porta--conta .porta__painel { grid-area: painel; }
    .porta--conta .tela-de-conta__apoio { grid-area: apoio; }
}

@media (max-width: 67.5rem) {
    .porta__grade {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espaco-6);
        max-width: 40rem;
    }

    .porta__luz { inline-size: 90%; }

    .porta--conta .tela-de-conta__apoio {
        max-width: none;
        margin-top: 0;
    }
}

@media (max-width: 40rem) {
    .porta { padding: calc(var(--altura-cabecalho) + var(--espaco-6)) 0 var(--espaco-12); }
    .painel-conta { padding: var(--espaco-3) 20px; }
    .porta .tela-de-conta__item { padding: 14px var(--espaco-2) 14px 62px; }
    .porta .tela-de-conta__icone { inset-inline-start: 14px; }
}

/* AS TELAS DE ESTADO NA PORTA (/esqueci-a-senha, /redefinir-senha, /confirmar
   e /confirme-seu-email): o cartão centrado, com a luz atrás e um emblema no
   lugar de onde ele abre. Carta para "espere", chave para "escolha", visto
   para "pronto" e alerta para "parado". Sob `.porta`, porque o
   `.estado-da-tela` serve também a /minha-conta, ao perfil, à equipe, ao
   convite e ao erro, que ainda não foram portados. */
.porta--estado {
    padding-top: calc(var(--altura-cabecalho) + 88px);
    padding-bottom: 128px;
}

/* A luz atrás do cartão precisa de um contexto de empilhamento, senão o
   `z-index: -1` a manda para trás do chão da página. */
.porta--estado > .conteudo {
    position: relative;
    z-index: 1;
}

.porta--estado .porta__painel {
    max-width: 35rem;
    margin-inline: auto;
}

.porta .estado-da-tela {
    display: block;
    padding: var(--espaco-6) 40px 40px;
    text-align: center;
}

.estado-da-tela__emblema {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 72px;
    block-size: 72px;
    margin: 0 auto var(--espaco-3);
    border: 1px solid color-mix(in srgb, var(--cor-luz) 35%, transparent);
    border-radius: var(--raio-vidro);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-navy-cartao) 85%, var(--cor-luz-funda)),
        var(--cor-navy));
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--cor-luz) 5%, transparent),
        0 18px 40px -12px color-mix(in srgb, var(--cor-luz-media) 70%, transparent);
    color: var(--cor-luz);
}

.estado-da-tela__emblema .icone {
    inline-size: 32px;
    block-size: 32px;
    stroke-width: 1.5;
}

/* O RADAR DO "ESPERE": dois anéis que saem do emblema, só opacidade e escala.
   É enfeite, e nasce apagado; com menos movimento, a regra geral o roda uma
   vez, num instante, e ele termina onde começou, invisível. */
.estado-da-tela--espera .estado-da-tela__emblema::before,
.estado-da-tela--espera .estado-da-tela__emblema::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid color-mix(in srgb, var(--cor-luz) 55%, transparent);
    border-radius: inherit;
    opacity: 0;
    animation: radar-do-emblema 3.2s cubic-bezier(.22, 1, .36, 1) infinite;
    pointer-events: none;
}

.estado-da-tela--espera .estado-da-tela__emblema::after { animation-delay: 1.6s; }

@keyframes radar-do-emblema {
    from { opacity: 0.8; transform: scale(1); }
    to { opacity: 0; transform: scale(1.9); }
}

.estado-da-tela--pronto .estado-da-tela__emblema {
    border-color: color-mix(in srgb, var(--cor-menta) 50%, transparent);
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--cor-menta) 7%, transparent),
        0 18px 44px -12px color-mix(in srgb, var(--cor-menta) 60%, transparent);
    color: var(--cor-menta);
}

.estado-da-tela--parado .estado-da-tela__emblema {
    border-color: color-mix(in srgb, var(--cor-aviso) 45%, transparent);
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--cor-aviso) 6%, transparent),
        0 18px 40px -14px color-mix(in srgb, var(--cor-aviso) 45%, transparent);
    color: color-mix(in srgb, var(--cor-aviso) 70%, var(--cor-branco-gelo));
}

/* A MARCA VIRA PÍLULA na porta, e a cor do estado passa para o ponto: o
   texto fica branco, e o ponto diz a situação. Na porta o ponto não
   respira: quem mostra que está em curso é o radar do emblema. A marca dos
   cartões da área do cliente veste a mesma pílula. */
.porta .estado-da-tela__marca,
.secao--cliente .cartao__marca,
.secao--cliente .estado-da-tela__marca {
    display: inline-flex;
    padding: var(--espaco-1) var(--espaco-2);
    border: 1px solid var(--borda-vidro-forte);
    border-radius: var(--raio-pilula);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-noite) 10%, transparent),
        color-mix(in srgb, var(--cor-noite) 40%, transparent));
    box-shadow: inset 0 4px 8px color-mix(in srgb, var(--cor-branco-gelo) 12%, transparent);
    font-family: var(--fonte-corpo);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cor-branco-gelo);
}

.porta .estado-da-tela__ponto,
.secao--cliente .estado-da-tela__ponto {
    inline-size: 6px;
    block-size: 6px;
    background-color: var(--cor-branco-gelo);
    box-shadow: 0 0 10px color-mix(in srgb, var(--cor-branco-gelo) 80%, transparent);
    animation: none;
}

.porta .estado-da-tela--espera .estado-da-tela__ponto,
.secao--cliente .estado-da-tela--espera .estado-da-tela__ponto {
    background-color: var(--cor-luz);
    box-shadow: 0 0 10px var(--cor-luz);
}

.porta .estado-da-tela--pronto .estado-da-tela__ponto,
.secao--cliente .estado-da-tela--pronto .estado-da-tela__ponto {
    background-color: var(--cor-menta);
    box-shadow: 0 0 10px var(--cor-menta);
}

.porta .estado-da-tela--parado .estado-da-tela__ponto,
.secao--cliente .estado-da-tela--parado .estado-da-tela__ponto {
    background-color: var(--cor-aviso);
    box-shadow: 0 0 10px var(--cor-aviso);
}

.porta .estado-da-tela .cabecalho-secao {
    display: block;
    max-width: none;
    margin: var(--espaco-3) 0 0;
}

.porta .estado-da-tela h1 {
    font-size: clamp(2rem, 4.2vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.porta .estado-da-tela .cabecalho-secao .texto-secundario {
    margin-top: var(--espaco-2);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cor-corpo);
    text-wrap: balance;
}

.porta .estado-da-tela .formulario {
    margin-top: var(--espaco-4);
    text-align: left;
}

.porta .estado-da-tela > .botao { margin-top: var(--espaco-4); }

@media (max-width: 40rem) {
    .porta--estado {
        padding-top: calc(var(--altura-cabecalho) + 56px);
        padding-bottom: var(--espaco-12);
    }

    .porta .estado-da-tela { padding: var(--espaco-4) 20px var(--espaco-3); }
}

/* O ESTADO SEM CARTÃO, na coluna do texto (/confirme-seu-email): o cartão é
   do download, ao lado, e o estado fica solto, alinhado à esquerda, com o
   título no tamanho das portas. */
.porta--confirmacao .porta__texto { padding-top: var(--espaco-1); }

.porta__texto .estado-da-tela {
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

.porta__texto .estado-da-tela__emblema { margin-left: 0; }

.porta__texto .estado-da-tela h1 {
    font-size: clamp(2.3rem, 4.6vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.porta__texto .estado-da-tela .cabecalho-secao .texto-secundario {
    max-width: 32em;
    font-size: 1.0625rem;
}

/* A LISTA CURTA DO ESTADO, com o ponto de luz no lugar do marcador. O
   marcador do navegador fica, transparente, pelo mesmo motivo da lista dos
   documentos: sem ele, o Safari deixa de anunciar a lista como lista. */
.porta .lista-simples {
    display: grid;
    gap: var(--espaco-1);
    max-width: 30em;
    margin-top: var(--espaco-3);
    padding: 0;
    text-align: left;
}

.porta .lista-simples li {
    position: relative;
    padding-left: var(--espaco-3);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cor-corpo);
}

.porta .lista-simples li::marker { color: transparent; }

.porta .lista-simples li::before {
    content: "";
    position: absolute;
    top: calc(0.8em - 4px);
    left: 3px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--cor-luz);
    box-shadow: 0 0 8px color-mix(in srgb, var(--cor-luz) 60%, transparent);
}

/* O PAINEL QUE NÃO É ESTADO: o cabeçalho do download alinhado à esquerda, e
   a última frase separada por um filete. `:not(.estado-da-tela)`, porque o
   cartão das telas de estado também é `.painel-conta`, e lá o cabeçalho é
   centrado. */
.porta .painel-conta:not(.estado-da-tela) .cabecalho-secao {
    display: block;
    max-width: none;
    margin: 0;
    text-align: left;
}

.porta .painel-conta:not(.estado-da-tela) .cabecalho-secao h2 {
    font-size: 1.625rem;
    line-height: 1.2;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.porta .painel-conta:not(.estado-da-tela) .cabecalho-secao .texto-secundario {
    margin-top: 12px;
    font-size: 0.9375rem;
    color: var(--cor-corpo);
}

/* Em /baixar o formulário vem depois do cabeçalho, dentro do cartão. */
.porta .painel-conta .cabecalho-secao + .formulario { margin-top: var(--espaco-4); }

.porta .painel-conta > .texto-secundario {
    margin-top: var(--espaco-3);
    font-size: 0.875rem;
    color: var(--cor-corpo);
}

.porta .painel-conta > .texto-secundario:last-child {
    margin-top: var(--espaco-4);
    padding-top: var(--espaco-3);
    border-top: 1px solid var(--borda-vidro);
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* OS DOIS ARQUIVOS NA PORTA (o `OpcoesDeDownload`, como o componente o
   emite): cada opção numa caixa de vidro, a principal com a luz em cima, e o
   botão na largura da caixa. As três telas que usam o componente moram na
   porta: /confirme-seu-email, /confirmar e /baixar. */
.porta .baixada {
    gap: 12px;
    margin-top: var(--espaco-3);
}

.porta .baixada__opcao {
    gap: 12px;
    justify-items: stretch;
    padding: var(--espaco-2);
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
    background: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
}

.porta .baixada__opcao:first-child {
    border-color: color-mix(in srgb, var(--cor-luz) 35%, transparent);
    background:
        radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--cor-luz-media) 18%, transparent), transparent 70%),
        color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
}

.porta .baixada__opcao .botao {
    width: 100%;
    min-height: 52px;
}

.porta .baixada__nota {
    max-width: none;
    font-size: 0.875rem;
    color: var(--cor-corpo);
}

.porta .baixada__nota strong {
    font-weight: 600;
    color: var(--cor-branco-gelo);
}

/* O SHA-256 é o segundo parágrafo depois dos botões, e vai numa caixa
   tracejada: é o que se confere, e não o que se lê de passagem. */
.porta .baixada + .legenda + .legenda {
    padding: 12px var(--espaco-2);
    border: 1px dashed var(--borda-vidro-forte);
    border-radius: var(--raio-cartao);
}

/* O aviso do certificado, no âmbar da casa. Filho direto do painel: o aviso
   de erro do formulário mora dentro do `.formulario` e fica como está. */
.porta .painel-conta > .aviso {
    padding: 14px var(--espaco-2);
    border: 1px solid color-mix(in srgb, var(--cor-aviso) 35%, transparent);
    border-radius: var(--raio-cartao);
    background: color-mix(in srgb, var(--cor-aviso) 8%, transparent);
    color: color-mix(in srgb, var(--cor-aviso) 45%, var(--cor-branco-gelo));
    font-size: 0.875rem;
}

/* "O que fazer se o Windows barrar": a sanfona vira caixa de vidro, com a
   seta que gira ao abrir. Só transformação. O alvo de toque continua sendo o
   título inteiro, agora com o respiro dentro dele, e o foco desenha por
   dentro, com o canto do cartão. */
.porta .pergunta {
    padding: 0;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
}

.porta .pergunta:hover,
.porta .pergunta[open] { border-color: var(--borda-vidro-forte); }

.porta .pergunta__titulo {
    margin: 0;
    padding: 14px var(--espaco-2);
    border-radius: var(--raio-modal);
    font-size: 0.9375rem;
}

.porta .pergunta__titulo::after,
.porta .pergunta[open] .pergunta__titulo::after {
    content: "";
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    border: solid var(--cor-corpo);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}

.porta .pergunta[open] .pergunta__titulo::after { transform: rotate(-135deg); }

.porta .pergunta > :not(summary) { margin-inline: var(--espaco-2); }
.porta .pergunta > :last-child:not(summary) { margin-bottom: var(--espaco-2); }
.porta .pergunta > .lista-marcada.espaco-acima-3 { margin-top: var(--espaco-1); }

.porta .pergunta .lista-marcada { gap: var(--espaco-1); }

.porta .pergunta .lista-marcada__item {
    padding-left: 20px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--cor-corpo);
}

.porta .pergunta .lista-marcada__item::before {
    top: calc(0.8em - 3px);
    left: 2px;
    border-radius: 50%;
}

.porta .pergunta .lista-marcada__item strong {
    font-weight: 600;
    color: var(--cor-branco-gelo);
}

/* O recado do celular, só abaixo de 48 rem como antes, vira a caixa de menta
   da porta. */
@media (max-width: 48rem) {
    .porta .recado-do-celular {
        margin-block: var(--espaco-3) 0;
        padding: 12px var(--espaco-2);
        border: 1px solid color-mix(in srgb, var(--cor-menta) 30%, transparent);
        border-radius: var(--raio-cartao);
        background-color: color-mix(in srgb, var(--cor-menta) 6%, transparent);
        font-size: 0.875rem;
        color: var(--cor-corpo);
    }
}

/* /CONFIRMAR: o botão de confirmar fora do `.formulario`, com a largura do
   cartão, e o "pronto" mais largo, com os dois passos e, logo abaixo, os
   arquivos no cartão deles. */
.porta .estado-da-tela > form:not(.formulario) { margin-top: var(--espaco-4); }

.porta .estado-da-tela > form:not(.formulario) .botao {
    width: 100%;
    min-height: 52px;
}

.porta--estado .porta__painel--largo { max-width: 47.5rem; }

.porta--estado .porta__painel + .porta__painel { margin-top: var(--espaco-4); }

/* No cartão dos arquivos o recado do celular abre o cartão, e acima de 48 rem
   ele some: quem vem depois dele não pode guardar a margem de quem sumiu. */
.porta .painel-conta > .recado-do-celular:first-child { margin-top: 0; }

@media (min-width: 48.0625rem) {
    .porta .painel-conta > .recado-do-celular:first-child + .baixada { margin-top: 0; }
}

/* Em /baixar, para quem entrou, os arquivos abrem o cartão. */
.porta .painel-conta > .baixada:first-child { margin-top: 0; }

.porta__depois {
    position: relative;
    z-index: 1;
    max-width: 35rem;
    margin: var(--espaco-4) auto 0;
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: center;
    color: var(--cor-cinza-fraco);
    text-wrap: balance;
}

/* OS DOIS PASSOS DO "PRONTO", cada um numa caixa de vidro com o número na
   margem, lado a lado na tela larga. A faixa horizontal da `.etapas` era
   desta página e de /depois-de-baixar; os guias e /depois-de-baixar vestem o
   trilho vertical, e aqui ela vira caixa. A administração (`.painel`) usa a
   mesma caixa nos passos de "Para valer na máquina". */
.porta .etapas {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: var(--espaco-4);
    text-align: left;
}

:is(.porta, .painel) .etapa {
    display: block;
    padding: 20px var(--espaco-3) 20px 72px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-branco-gelo) 4.5%, transparent),
        color-mix(in srgb, var(--cor-branco-gelo) 1.2%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
}

:is(.porta, .painel) .etapa::before { content: none; }

:is(.porta, .painel) .etapa__numero {
    top: 18px;
    left: 20px;
    inline-size: 36px;
    block-size: 36px;
    border: 1px solid color-mix(in srgb, var(--cor-menta) 45%, transparent);
    background: var(--cor-navy);
    box-shadow: 0 0 16px -4px color-mix(in srgb, var(--cor-menta) 60%, transparent);
    color: var(--cor-menta);
    font-family: var(--fonte-mono);
    font-size: 0.8125rem;
    font-weight: 400;
}

:is(.porta, .painel) .etapa__titulo {
    margin-top: 6px;
    font-size: 1.0625rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

:is(.porta, .painel) .etapa .texto-secundario {
    margin-top: 6px;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--cor-corpo);
}

:is(.porta, .painel) .etapa strong {
    font-weight: 600;
    color: var(--cor-branco-gelo);
}

@media (min-width: 47.5625rem) {
    .porta .estado-da-tela--pronto .etapas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
    }
}

@media (max-width: 40rem) {
    :is(.porta, .painel) .etapa { padding: 18px var(--espaco-2) 18px 64px; }
    :is(.porta, .painel) .etapa__numero { left: var(--espaco-2); }
}

/* ---------------------------------------------------------------- a área do cliente */

/* A ÁREA DO CLIENTE (/minha-conta, /perfil, /assinar, /equipe, /equipe/marca
   e /vincular), desde a onda 3 (30/09/2026). A marcação é a das páginas, e a
   mudança é o modificador `.secao--cliente` na seção: o topo com a grade que
   apaga nas bordas, o respiro de quem tem o cabeçalho fixo em cima, e o vidro
   nos cartões, nas tabelas e nos blocos de estado. Tudo sob o modificador,
   porque as mesmas classes (`.cartao__titulo`, `.tabela`, `.aviso`,
   `.estado-da-tela`) servem a páginas que não são daqui.

   A SEÇÃO SOBE POR BAIXO DO CABEÇALHO, como a porta, e recorta só na
   horizontal: com `overflow: hidden` ela viraria área de rolagem e soltaria o
   que fica preso ao lado, como a marca em uso de /equipe/marca. */
.secao--cliente {
    position: relative;
    isolation: isolate;
    margin-top: calc(-1 * var(--altura-cabecalho));
    padding: calc(var(--altura-cabecalho) + var(--espaco-8)) 0 128px;
    overflow-x: clip;
}

.secao--cliente::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    block-size: 720px;
    background-image:
        linear-gradient(color-mix(in srgb, var(--cor-branco-gelo) 3.5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cor-branco-gelo) 3.5%, transparent) 1px, transparent 1px);
    background-size: var(--espaco-8) var(--espaco-8);
    background-position: center top;
    mask-image: radial-gradient(60% 70% at 50% 0%, black 20%, transparent 75%);
    pointer-events: none;
}

/* O CABEÇALHO DA PÁGINA, à esquerda e no tamanho das portas, e o das seções
   de dentro ("Onde você usa", "Pagamentos") com uma régua em cima. */
.secao--cliente .cabecalho-secao {
    display: block;
    max-width: none;
    margin: 0 0 var(--espaco-4);
    text-align: left;
}

.secao--cliente .cabecalho-secao h1 {
    font-size: clamp(2.3rem, 4.6vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.secao--cliente .cabecalho-secao > .texto-secundario {
    max-width: 42em;
    margin-top: var(--espaco-2);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--cor-corpo);
}

.secao--cliente .cabecalho-secao > .texto-secundario strong {
    font-weight: 600;
    color: var(--cor-branco-gelo);
}

.secao--cliente .cabecalho-secao:has(> h2) {
    margin: var(--espaco-8) 0 var(--espaco-3);
    padding-top: var(--espaco-3);
    border-top: 1px solid var(--borda-vidro);
}

.secao--cliente .cabecalho-secao h2 {
    font-size: 1.5rem;
    letter-spacing: -0.03em;
}

.secao--cliente .cabecalho-secao:has(> h2) > .texto-secundario {
    margin-top: var(--espaco-1);
    font-size: 0.9375rem;
}

.secao--cliente .texto-secundario {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--cor-corpo);
}

.secao--cliente > .conteudo > .legenda {
    max-width: 72ch;
    line-height: 1.65;
}

.secao--cliente .conteudo > .aviso { margin-bottom: var(--espaco-3); }

.secao--cliente .aviso--certo {
    border-color: color-mix(in srgb, var(--cor-menta) 40%, transparent);
    background-color: color-mix(in srgb, var(--cor-menta) 8%, transparent);
    color: color-mix(in srgb, var(--cor-menta) 35%, var(--cor-branco-gelo));
}

/* OS CARTÕES DO TOPO: a marca em pílula, o título e, no do plano que vale, o
   aro de menta do plano em destaque de /precos. O filete de lado do
   `.cartao--estado` sai, porque quem marca o plano agora é o aro. */
.secao--cliente .grade {
    --coluna-minima: 17rem;
    align-content: start;
}

.secao--cliente .cartao {
    align-content: start;
    padding: var(--espaco-4);
}

.secao--cliente .cartao > .botao,
.secao--cliente .cartao > form,
.secao--cliente .cartao__marca { justify-self: start; }

.secao--cliente .cartao--estado { border-inline-start-width: 1px; }

.secao--cliente .cartao__ponto {
    inline-size: 6px;
    block-size: 6px;
    background-color: var(--cor-luz);
    box-shadow: 0 0 10px var(--cor-luz);
}

.secao--cliente .cartao--vigente .cartao__ponto {
    background-color: var(--cor-menta);
    box-shadow: 0 0 10px var(--cor-menta);
}

.secao--cliente .cartao__titulo {
    margin-top: var(--espaco-2);
    font-size: 1.375rem;
    line-height: 1.25;
    letter-spacing: -0.03em;
}

.secao--cliente .cartao > .cartao__titulo:first-child { margin-top: 0; }
.secao--cliente .cartao > .texto-secundario { margin-top: var(--espaco-1); }

.secao--cliente .cartao > .legenda {
    margin-top: 12px;
    line-height: 1.6;
}

.secao--cliente .cartao--vigente {
    border-color: transparent;
    background:
        radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--cor-menta) 12%, transparent), transparent 60%) padding-box,
        var(--material-cartao) padding-box,
        linear-gradient(160deg,
            color-mix(in srgb, var(--cor-menta) 70%, transparent),
            color-mix(in srgb, var(--cor-luz-media) 35%, transparent) 40%,
            color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent)) border-box;
}

/* "2 de 3": o número em mono, do tamanho de um título de tela. */
.secao--cliente .cartao__leitura {
    margin-top: var(--espaco-2);
    font-family: var(--fonte-mono);
    font-size: 3.25rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--cor-branco-gelo);
}

.secao--cliente .cartao__leitura-de {
    margin-left: var(--espaco-1);
    font-family: var(--fonte-corpo);
    font-size: 0.9375rem;
    letter-spacing: 0;
    color: var(--cor-cinza-fraco);
}

/* AS TABELAS DE REGISTRO (máquinas, pagamentos, equipe, convites) numa caixa
   de vidro, com o cabeçalho em mono. A tabela continua rolando de lado
   dentro da caixa no telefone, como antes. */
.secao--cliente .tabela-envoltorio {
    position: relative;
    border-color: var(--borda-vidro);
    border-radius: var(--raio-modal);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent),
        color-mix(in srgb, var(--cor-branco-gelo) 1%, transparent));
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--cor-branco-gelo) 20%, transparent) transparent;
}

.secao--cliente .tabela { font-size: 0.90625rem; }

.secao--cliente .tabela th,
.secao--cliente .tabela td {
    padding: 14px 20px;
    white-space: nowrap;
    border-bottom-color: var(--borda-vidro);
}

.secao--cliente .tabela thead th {
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 2.5%, transparent);
}

.secao--cliente .tabela tbody tr:last-child th,
.secao--cliente .tabela tbody tr:last-child td { border-bottom: 0; }

.secao--cliente .tabela td { color: var(--cor-corpo); }
.secao--cliente .tabela td:last-child { text-align: right; }

.secao--cliente .tabela .tabela__recurso {
    font-weight: 500;
    color: var(--cor-branco-gelo);
}

/* A cobrança que entrou: a menta e um ponto aceso na frente. */
.secao--cliente .tabela .tabela__sim::before {
    content: "";
    display: inline-block;
    inline-size: 6px;
    block-size: 6px;
    margin-right: var(--espaco-1);
    border-radius: 50%;
    background: var(--cor-menta);
    box-shadow: 0 0 8px var(--cor-menta);
    vertical-align: middle;
}

.secao--cliente .tabela .botao {
    min-height: 36px;
    padding-inline: var(--espaco-2);
    font-size: 0.8125rem;
}

.secao--cliente .tabela-envoltorio + .legenda,
.secao--cliente form + .legenda { margin-top: var(--espaco-2); }

@media (max-width: 40rem) {
    .secao--cliente { padding: calc(var(--altura-cabecalho) + var(--espaco-6)) 0 var(--espaco-12); }
    .secao--cliente .cartao { padding: var(--espaco-3) 20px; }

    .secao--cliente .tabela th,
    .secao--cliente .tabela td { padding: 12px var(--espaco-2); }
}

/* A COLUNA ESTREITA DA ÁREA DO CLIENTE (/perfil, /assinar, /vincular) tem 720
   px de texto, e não os 34 rem das telas de formulário soltas: aqui o
   formulário mora num bloco, e o bloco pede a medida de uma página. */
.secao--cliente > .conteudo--estreito { max-width: calc(720px + 2 * var(--espaco-3)); }

/* A VOLTA PARA A MINHA CONTA, em pílula, com a seta desenhada antes. A seta é
   enfeite, e o texto alternativo vazio a tira do leitor de tela. */
.secao--cliente > .conteudo > .texto-secundario:first-child { margin-bottom: var(--espaco-4); }

.secao--cliente > .conteudo > .texto-secundario:first-child a {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    padding: var(--espaco-1) var(--espaco-2);
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-pilula);
    background: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
    font-size: 0.875rem;
    color: var(--cor-corpo);
    transition: color 200ms ease, border-color 200ms ease;
}

.secao--cliente > .conteudo > .texto-secundario:first-child a::before { content: "←" / ""; }

.secao--cliente > .conteudo > .texto-secundario:first-child a:hover {
    border-color: var(--borda-vidro-forte);
    background: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
    color: var(--cor-branco-gelo);
}

/* OS BLOCOS DE ESTADO (os três painéis de /perfil, a equipe de quem foi
   convidado, o vínculo feito) no vidro do cartão, à esquerda. O bloco deixa
   de ser grade e passa a medir por margem, como o cartão da porta. */
.secao--cliente .estado-da-tela {
    display: block;
    max-width: 760px;
    padding: var(--espaco-4);
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-vidro);
    background: var(--material-cartao);
    box-shadow:
        inset 0 -4px 100px 20px color-mix(in srgb, var(--cor-luz-media) 8%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 7%, transparent);
    text-align: left;
}

.secao--cliente .estado-da-tela--pronto { border-color: color-mix(in srgb, var(--cor-menta) 45%, transparent); }
.secao--cliente .estado-da-tela--parado { border-color: color-mix(in srgb, var(--cor-aviso) 40%, transparent); }

.secao--cliente .estado-da-tela .cabecalho-secao { margin: var(--espaco-3) 0 0; }
.secao--cliente .estado-da-tela .cabecalho-secao h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.secao--cliente .estado-da-tela > .texto-secundario { margin-top: var(--espaco-2); }

.secao--cliente .estado-da-tela > .legenda {
    margin-top: 12px;
    line-height: 1.6;
}

.secao--cliente .estado-da-tela > .botao,
.secao--cliente .estado-da-tela .formulario,
.secao--cliente .estado-da-tela > form:not(.formulario) { margin-top: var(--espaco-3); }

/* O botão do bloco não estica na coluna: é ação, e não barra. */
.secao--cliente .estado-da-tela .botao {
    width: auto;
    min-height: 48px;
    padding-inline: var(--espaco-3);
}

.secao--cliente .estado-da-tela .formulario .botao {
    justify-self: start;
    margin-top: var(--espaco-1);
}

@media (max-width: 40rem) {
    .secao--cliente .estado-da-tela { padding: var(--espaco-3) 20px; }
}

/* /ASSINAR: as faixas em cartão, com o preço em branco; depois de escolher,
   o formulário num painel com o aro da porta, o período em fichas e os
   assentos com a unidade ao lado. */
.secao--cliente .grade .cartao:has(> .cartao__titulo:first-child) > .legenda {
    font-size: 0.9375rem;
    color: var(--cor-branco-gelo);
}

.secao--cliente .conteudo--estreito > .formulario {
    padding: var(--espaco-4);
    border: 1px solid transparent;
    border-radius: var(--raio-vidro);
    background:
        var(--material-cartao) padding-box,
        linear-gradient(160deg,
            color-mix(in srgb, var(--cor-luz-gelo) 60%, transparent),
            color-mix(in srgb, var(--cor-luz-media) 35%, transparent) 30%,
            color-mix(in srgb, var(--cor-branco-gelo) 7%, transparent) 60%,
            color-mix(in srgb, var(--cor-menta) 40%, transparent)) border-box;
    box-shadow:
        var(--sombra-funda),
        0 30px 90px -40px color-mix(in srgb, var(--cor-luz-media) 50%, transparent);
}

.secao--cliente .conteudo--estreito > .formulario .botao {
    width: 100%;
    min-height: 52px;
}

/* O PERÍODO EM FICHAS. O rádio continua rádio, com teclado e leitor de tela
   de fábrica; só o desenho é da casa, e em alto contraste volta o nativo. A
   ficha marcada acende inteira, e não só o ponto. */
.secao--cliente .escolha__opcao {
    margin-top: 12px;
    padding: var(--espaco-2) 20px;
    border-color: var(--borda-vidro);
    border-radius: var(--raio-modal);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 2.5%, transparent);
    transition: border-color 200ms ease, background-color 200ms ease;
}

.secao--cliente .escolha__opcao:hover { border-color: color-mix(in srgb, var(--cor-branco-gelo) 22%, transparent); }

.secao--cliente .escolha__opcao:has(input:checked) {
    border-color: color-mix(in srgb, var(--cor-menta) 50%, transparent);
    background-color: color-mix(in srgb, var(--cor-menta) 6%, transparent);
}

.secao--cliente .escolha__opcao:has(input:focus-visible) {
    outline: 2px solid var(--cor-menta);
    outline-offset: 2px;
    box-shadow: none;
}

.secao--cliente .escolha__opcao input[type="radio"] {
    appearance: none;
    flex: none;
    inline-size: 20px;
    block-size: 20px;
    margin: 2px 0 0;
    border: 1px solid var(--borda-vidro-forte);
    border-radius: 50%;
    background: color-mix(in srgb, var(--cor-noite) 60%, transparent);
    cursor: pointer;
}

.secao--cliente .escolha__opcao input[type="radio"]:checked {
    border-color: var(--cor-menta);
    box-shadow:
        inset 0 0 0 4px var(--cor-navy),
        inset 0 0 0 10px var(--cor-menta),
        0 0 12px color-mix(in srgb, var(--cor-menta) 50%, transparent);
}

@media (forced-colors: active) {
    .secao--cliente .escolha__opcao input[type="radio"] { appearance: auto; }
}

.secao--cliente .escolha__titulo {
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    font-weight: 600;
}

.secao--cliente .campo__quantidade {
    flex-wrap: wrap;
    gap: 12px;
}

.secao--cliente .campo__quantidade .campo__entrada {
    width: 120px;
    font-family: var(--fonte-mono);
    font-size: 1.0625rem;
}

.secao--cliente .campo__unidade {
    font-size: 0.875rem;
    color: var(--cor-corpo);
}

/* Os dois estados de /assinar (fechada e já assinante) trazem o título solto
   no bloco, e não num cabeçalho, com o par de ações embaixo. */
.secao--cliente .estado-da-tela > h2 {
    margin-top: var(--espaco-3);
    font-size: 1.625rem;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.secao--cliente .estado-da-tela > .hero__acoes { margin-top: var(--espaco-3); }

/* /EQUIPE: a fita das duas áreas (Pessoas e Marca da empresa) com a régua
   embaixo e o traço de menta aceso na aberta, e o convite num painel curto,
   no vidro das tabelas. A fita da administração é a mesma peça e fica como
   estava: tudo aqui mora sob o modificador. */
.secao--cliente .modulos {
    gap: 4px;
    margin: 0 0 var(--espaco-4);
    border-bottom: 1px solid var(--borda-vidro);
}

.secao--cliente .modulo {
    position: relative;
    padding: 12px var(--espaco-2) 14px;
    border-bottom: 0;
    font-family: var(--fonte-corpo);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cor-cinza-fraco);
}

.secao--cliente .modulo:hover,
.secao--cliente .modulo--atual { color: var(--cor-branco-gelo); }

/* O TRAÇO DESCE UM PIXEL SOBRE A RÉGUA, e a fita, que rola de lado no
   telefone, o recorta ali: fica aceso o pixel de cima, com o brilho. A aberta
   continua marcada pela cor E pelo traço, como na administração. */
.secao--cliente .modulo::after {
    content: "";
    position: absolute;
    inset-inline: 12px;
    inset-block-end: -1px;
    block-size: 2px;
    border-radius: 2px;
    background: var(--cor-menta);
    box-shadow: 0 0 14px color-mix(in srgb, var(--cor-menta) 80%, transparent);
    opacity: 0;
}

.secao--cliente .modulo--atual::after { opacity: 1; }

.secao--cliente .formulario.conteudo--estreito {
    max-width: 36rem;
    padding: var(--espaco-3);
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-branco-gelo) 4.5%, transparent),
        color-mix(in srgb, var(--cor-branco-gelo) 1.2%, transparent));
}

.secao--cliente .formulario.conteudo--estreito .botao {
    width: 100%;
    min-height: 52px;
    margin-top: var(--espaco-1);
}

/* "Você, que contratou", no lugar do botão de remover: miúdo e apagado, que
   é a linha sem ação. */
.secao--cliente .tabela td .texto-secundario {
    font-size: 0.8125rem;
    color: var(--cor-cinza-fraco);
}

/* Quem foi convidado, e quem não tem equipe, lê o cabeçalho dentro do bloco,
   e ele quebra em linhas de largura parecida, como nas portas. */
.secao--cliente .estado-da-tela .cabecalho-secao h1,
.secao--cliente .estado-da-tela .cabecalho-secao > .texto-secundario { text-wrap: balance; }

/* /EQUIPE/MARCA, desde a onda 3 (30/09/2026): o formulário e a coluna ao
   lado em dois painéis no vidro do cartão, cada cor num cartão próprio, e o
   seletor de arquivo com o botão em pílula. As classes daqui só existem nesta
   página, e as regras de antes, espalhadas pela folha, vieram para cá.

   `identidade`, E NÃO `marca`: `.marca` já é o contêiner do logo no
   cabeçalho. Chamado igual, o bloco daqui caía sobre ele: a âncora do logo
   virava grade de duas colunas com 48 px de vão, empurrava a navegação e
   quebrava "O aplicativo" no meio, em toda página do site. Nome repetido em
   folha única não dá erro: dá o estrago na página que não se está olhando.

   À ESQUERDA O QUE SE PREENCHE, À DIREITA O QUE JÁ VALE, ou, sem marca, onde
   a cor vai parar. A coluna do lado fica presa enquanto o formulário rola, e
   é por ela que a seção do cliente recorta só na horizontal. */
.identidade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    align-items: start;
    gap: var(--espaco-4);
}

.identidade > .formulario,
.identidade__lado {
    padding: var(--espaco-4);
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-vidro);
    background: var(--material-cartao);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cor-branco-gelo) 7%, transparent);
}

.identidade > .formulario .botao {
    width: 100%;
    min-height: 52px;
    margin-top: var(--espaco-1);
}

.identidade__lado {
    position: sticky;
    top: calc(var(--altura-cabecalho) + var(--espaco-4));
    display: grid;
    gap: 12px;
    align-content: start;
}

/* "Onde ela aparece" e "Em uso agora" são etiqueta da coluna, e não rótulo de
   campo: em mono, miúdo e apagado. */
.identidade__lado .campo__rotulo {
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-cinza-fraco);
}

.identidade__atual {
    display: grid;
    gap: var(--espaco-2);
    justify-items: start;
}

/* A prévia da marca em uso. O desenho todo vive no SVG, com cor, cantos e
   enquadramento do logo, porque a cor é de quem contratou e não pode entrar
   por `style`. Aqui fica só o tamanho. */
.identidade__previa {
    display: block;
    inline-size: 100%;
    max-inline-size: 30rem;
    block-size: auto;
    margin-block: var(--espaco-2);
}

/* AS TRÊS CORES, uma por cartão. A amostra ocupa as duas linhas de cima, à
   esquerda; o nome e a caixa de usar (ou o "obrigatória", que guarda o lugar
   dela na primeira, para a coluna não parecer controle que faltou) ficam na
   de cima; o código tem a linha dele inteira, porque no telefone os 120 px
   dele não cabem ao lado da caixa; e o papel, que é frase, desce para a
   última, inteira. Cada pedaço tem lugar com nome, e a largura do texto não
   entra na conta das colunas.

   A ORDEM VISUAL SEGUE A DO DOCUMENTO: por isso o código vem depois da caixa
   na marcação. Na ordem de antes, colado na amostra, o tabulador desceria ao
   código e voltaria para cima, até a caixa. */
.cores {
    display: grid;
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.cor {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas:
        "amostra nome   uso"
        "amostra codigo codigo"
        "papel   papel  papel";
    align-items: center;
    gap: var(--espaco-1) var(--espaco-2);
    padding: var(--espaco-2);
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 2.5%, transparent);
}

/* LINHA DESLIGADA FICA ESMAECIDA. Sem isto as três amostras acesas dizem que
   as três valem, e duas podem não valer: a caixa desmarcada sozinha é um
   detalhe de 22 px num cartão de 700.

   A AMOSTRA NÃO ESMAECE. Ela existe para mostrar uma cor, e cor com opacidade
   é outra cor: quem olhasse veria um tom que não é o que vai ser gravado. */
.cor:has(.opcao__marca:not(:checked)) .cor__cabecalho,
.cor:has(.opcao__marca:not(:checked)) .cor__papel {
    opacity: 0.5;
}

.cor__cabecalho { grid-area: nome; }

.cor__nome {
    font-family: var(--fonte-corpo);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cor-branco-gelo);
    cursor: pointer;
}

.cor__uso {
    grid-area: uso;
    justify-self: end;
    font-size: var(--tamanho-legenda);
    color: var(--cor-cinza-fraco);
    white-space: nowrap;
}

.cor__uso .opcao__texto {
    font-size: var(--tamanho-legenda);
    color: var(--cor-corpo);
}

.cor__papel {
    grid-area: papel;
    margin-top: 4px;
    font-size: var(--tamanho-legenda);
    line-height: 1.55;
    color: var(--cor-cinza-fraco);
}

/* O SELETOR DE COR. O desenho de fábrica é uma caixa com moldura grossa e um
   miolo apertado, do tamanho de um botão de sistema; aqui ele é uma amostra
   de verdade, com a cor inteira a 4 px da borda, porque a cor é o que se está
   escolhendo. Cada motor guarda o miolo atrás do seu próprio
   pseudo-elemento, e não existe um que valha nos dois: a regra combinada
   seria descartada pelos dois. */
.campo__cor {
    grid-area: amostra;
    inline-size: 52px;
    block-size: 52px;
    padding: 0;
    border: 1px solid var(--borda-vidro-forte);
    border-radius: var(--raio-cartao);
    background: none;
    appearance: none;
    cursor: pointer;
}

.campo__cor::-webkit-color-swatch-wrapper { padding: 4px; }

.campo__cor::-webkit-color-swatch {
    border: 0;
    border-radius: var(--raio-controle);
}

.campo__cor::-moz-color-swatch {
    border: 0;
    border-radius: var(--raio-controle);
}

/* O CÓDIGO DA COR, AO LADO DA AMOSTRA. O seletor do sistema resolve escolher
   pelo olho e não resolve colar: quem tem a cor na documentação da marca
   teria de traduzir o hexadecimal em três números de 0 a 255, e o campo de
   texto é o atalho dessa pessoa.

   Preso ao início da célula, ou ele flutua para o meio e os três códigos
   deixam de formar coluna. E com largura fixa e folga, e não em `ch`: em
   `8ch` a caixa, que é `border-box`, tinha de caber também o preenchimento e
   a borda, e «#7A4FD0» aparecia como «#7A4FD».

   O foco é o dos campos da área do cliente, a borda e o anel de menta; o
   contorno transparente é o que aparece no alto contraste do Windows, que
   apaga a sombra. */
.campo__hex {
    grid-area: codigo;
    justify-self: start;
    inline-size: 120px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--borda-vidro-forte);
    border-radius: var(--raio-controle);
    background-color: color-mix(in srgb, var(--cor-noite) 60%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.84375rem;
    color: var(--cor-branco-gelo);
    text-transform: uppercase;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.campo__hex:focus {
    outline: 2px solid transparent;
    border-color: var(--cor-menta);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-menta) 16%, transparent);
}

/* O SELETOR DE ARQUIVO. `input type="file"` traz o botão cinza do sistema,
   que seria o único controle da página que não parece do site.
   `::file-selector-button` é padrão e o alcança sem uma linha de script, e
   sem trocar o input por um `label` disfarçado, que é o truque antigo e custa
   o teclado. Aqui ele é pílula de vidro, como o botão secundário. */
.secao--cliente .campo__entrada[type="file"] {
    padding: 10px;
    font-size: 0.875rem;
    color: var(--cor-corpo);
}

.campo__entrada[type="file"]::file-selector-button {
    min-height: 34px;
    margin-inline-end: 12px;
    padding: 0 14px;
    border: 1px solid var(--borda-vidro-forte);
    border-radius: var(--raio-pilula);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 8%, transparent);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--cor-branco-gelo);
    cursor: pointer;
}

.campo__entrada[type="file"]::file-selector-button:hover {
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 14%, transparent);
}

/* Abaixo de 67,5 rem a coluna do lado desce para depois do formulário, e
   deixa de ficar presa. */
@media (max-width: 67.5rem) {
    .identidade { grid-template-columns: minmax(0, 1fr); }
    .identidade__lado { position: static; }
}

@media (max-width: 40rem) {
    .identidade > .formulario,
    .identidade__lado { padding: var(--espaco-3) 20px; }
}

/* /VINCULAR, desde a onda 3 (30/09/2026): o código grande, no painel com o
   aro de /assinar, e a confirmação num cartão com a borda de luz, sem o
   painel em volta.

   O CÓDIGO CRESCE DE NOVO, e só até onde a tela deixa. Em 18/09/2026 ele
   recuou para 16 px, depois de o dono ver o texto passar da borda do campo
   com 18 px e 0,18 em, num estouro que não se reproduziu aqui. A proposta o
   quer com 28 px e centrado, e a letra acompanha a largura da tela até lá:
   medido com os nove caracteres digitados, o texto fica dentro do campo a
   320, 360, 768 e 1440 px. */
.secao--cliente .campo__entrada--codigo {
    min-height: 68px;
    font-size: clamp(1.125rem, 6vw, 1.75rem);
    letter-spacing: 0.18em;
    text-align: center;
}

.secao--cliente .campo__entrada--codigo::placeholder {
    color: color-mix(in srgb, var(--cor-branco-gelo) 18%, transparent);
}

/* A confirmação já é um cartão, e o painel do formulário não o embrulha de
   novo. O aviso que nomeia o golpe fica em âmbar claro, a cor do cuidado. */
.secao--cliente .conteudo--estreito > .formulario:has(> .cartao--estado) {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.secao--cliente .formulario .cartao--estado {
    border-color: color-mix(in srgb, var(--cor-luz) 35%, transparent);
}

.secao--cliente .formulario .cartao--estado .cartao__titulo { font-size: 1.625rem; }

.secao--cliente .formulario .cartao--estado > .legenda {
    color: color-mix(in srgb, var(--cor-aviso) 42%, var(--cor-branco-gelo));
}

/* No limite de máquinas, o caminho para desvincular vem entre o aviso e o
   painel, e sem isto encostava na borda dele. */
.secao--cliente .conteudo--estreito > .texto-secundario + .formulario { margin-top: var(--espaco-3); }

/* AS TELAS DE MOMENTO NA PORTA (/convite, desde a onda 3, 30/09/2026): o
   parágrafo solto depois do cabeçalho, o aviso de erro e o par de botões,
   centrado. É a porta de estado das telas de conta com o que o convite traz
   a mais, e nada daqui casa com elas: o estilo computado de cada uma saiu
   igual antes e depois. */
.porta .cartao.estado-da-tela > .texto-secundario {
    margin-top: var(--espaco-2);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--cor-corpo);
    text-wrap: balance;
}

.porta .cartao.estado-da-tela > .aviso {
    margin-top: var(--espaco-3);
    text-align: left;
}

.porta .cartao.estado-da-tela > .acoes {
    justify-content: center;
    margin-top: var(--espaco-4);
}

.porta .cartao.estado-da-tela strong {
    font-weight: 600;
    color: var(--cor-branco-gelo);
}

/* /ASSINATURA-RECEBIDA NA PORTA, desde a onda 3 (30/09/2026): o título solto
   no cartão, sem cabeçalho em volta, a legenda e o par de ações do herói,
   centrado. Nada daqui casa com as telas de conta nem com /convite: o estilo
   computado de cada uma saiu igual antes e depois. */
.porta .cartao.estado-da-tela > h1 { margin-top: var(--espaco-3); }

.porta .cartao.estado-da-tela > h1 + .texto-secundario { font-size: 1rem; }

.porta .cartao.estado-da-tela > .legenda {
    margin-top: var(--espaco-2);
    line-height: 1.6;
    text-wrap: balance;
}

.porta .cartao.estado-da-tela > .hero__acoes {
    justify-content: center;
    margin-top: var(--espaco-4);
}

/* ERRO NA PORTA, desde a onda 3 (30/09/2026): o código da requisição, que a
   pessoa copia para o suporte, numa pílula em mono, em gelo, e não na menta
   dos comandos dos guias, porque ali não há nada para executar. Ele tem 55
   caracteres sem espaço e quebra em qualquer ponto: sem isso, no telefone, o
   cartão passaria da tela. */
.porta .estado-da-tela code {
    padding: 2px var(--espaco-1);
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-controle);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 4%, transparent);
    font-family: var(--fonte-mono);
    font-size: 0.78125rem;
    color: var(--cor-luz-gelo);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------- entrar com o Google */

/* O BOTÃO DO GOOGLE, desde 30/09/2026 (BotaoDoGoogle). É o secundário da
   casa, o vidro com contorno, para não competir com o branco de "Criar conta
   e baixar"; o que o distingue é o "G", que vem em arquivo com as cores do
   Google, e não em cor solta aqui. `flex: none` para o logo não encolher
   quando o rótulo quebrar no telefone. */
.botao__marca { flex: none; }

/* EM /entrar O BOTÃO TEM FORMULÁRIO PRÓPRIO, e ele é um `.formulario` só para
   herdar a largura e a altura do botão da porta. Quando a ida ao Google volta
   com recado, o botão desce um pouco dele. */
.porta .painel-conta > .aviso + .formulario { margin-top: var(--espaco-2); }

/* O SEPARADOR ENTRE O GOOGLE E O FORMULÁRIO: a frase no meio de duas linhas
   finas. É flex com um filho só, o <span> da frase, e as linhas são os
   pseudoelementos: o que se escrever a mais entra no <span>, e não vira item
   (AGENTS.md §Convenções). */
.separador-de-entrada {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin: 0;
    font-size: 0.8125rem;
    color: var(--cor-cinza-nevoa);
}

.separador-de-entrada::before,
.separador-de-entrada::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background-color: var(--borda-vidro-forte);
}

/* Em /entrar ele mora entre dois formulários, fora da grade deles, e o
   respiro é dele. Dentro do cadastro, quem espaça é o `gap` da grade. */
.painel-conta > .separador-de-entrada { margin-block: var(--espaco-3); }

/* A frase dos termos para quem cria a conta pelo Google, embaixo da de
   sempre, em /entrar. */
.porta .painel-conta > .legenda--google { margin-top: var(--espaco-1); }