/* 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 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);
}

/* O "Entrar" em botão é o do telefone, e só existe abaixo de 40 rem. */
.cabecalho__entrar-no-telefone { display: none; }

/* 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.

   NO TELEFONE TAMBÉM SÃO DUAS COLUNAS, desde 19/10/2026 (o plano do /baixar,
   item A1). Numa coluna só, os quatro ocupavam 210 px a 390, e o cartão do
   cadastro começava no fim da primeira tela. Em duas, o rótulo mais longo
   quebra em duas linhas, e o cartão sobe. Os fatos continuam antes do
   formulário, como decidido em 28/09. */
.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 { gap: var(--espaco-1); }

    .faixa-confianca__item {
        gap: var(--espaco-1);
        padding: 10px 12px;
        font-size: 0.8125rem;
        line-height: 1.35;
    }
}
/* 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 no computador, e some de verdade, com `display: none`: ali 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. Até 19/10/2026 o sinal era a largura, abaixo de
   48 rem, e uma janela de notebook partida ao meio (683 px num monitor de
   1366) lia que estava no celular. Desde então é o toque: `hover: none` e
   `pointer: coarse` dizem que o dedo é o jeito principal de apontar, que é o
   celular e o tablet. Um notebook com tela de toque continua com o mouse
   como principal, e fica de fora; um tablet com Windows sem teclado pode
   cair aqui, e é para ele o caminho de volta dos arquivos. É o sinal mais
   perto de "este aparelho não instala" que o CSS enxerga sem script.

   NO MESMO APARELHO OS ARQUIVOS FICAM RECOLHIDOS (`so-onde-instala`, logo
   abaixo, e OpcoesDeDownload). Por isso a ordem do erro importa: navegador
   que não entende a consulta não aplica nada do bloco, e fica com os
   arquivos à vista e sem recado, que é como o computador lê a página. */
.recado-do-celular {
    display: none;
}

/* A linha que traz os arquivos de volta no celular. Ver OpcoesDeDownload. */
.opcoes-de-download__mostrar {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    /* O QUE SÓ SERVE ONDE O APLICATIVO INSTALA: os arquivos, o "e baixar"
       dos botões e o título que manda baixar. `!important` porque é regra de
       aparelho, e não de desenho: as regras da porta dão `display` a alguns
       desses blocos com mais especificidade, e o celular tem de vencer todas.

       O `:not(:target ~ *)` é o caminho de volta: o que vem depois da âncora
       `#arquivos`, quando ela é o alvo, deixa de ser escondido e volta ao
       desenho de sempre. Navegador que não entende o seletor descarta a regra
       inteira, e não esconde nada. */
    .so-onde-instala:not(:target ~ *) {
        display: none !important;
    }

    .opcoes-de-download__mostrar {
        display: block;
    }

    /* Aberto o caminho, a linha sai: os arquivos aparecem onde ela estava. */
    .opcoes-de-download__mostrar:target {
        display: none;
    }

    .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 dos números grandes lá em cima. */
.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 MARCA DE HOJE FICA EMBAIXO DA DATA, em qualquer largura, desde 16/10/2026.
   Até ali ela era uma pílula ao lado da data na tela larga, e só descia no
   telefone e na tabela de origens. Com as três colunas do vínculo a tabela dos
   dias passou a onze, a pílula alargava a coluna do dia em uns 140 px, a
   tabela passou da largura do cartão, rolou para o lado e a pílula invadiu a
   coluna «Home» (visto pelo dono). Sem a moldura, porque é ela que quebra em
   duas linhas, e moldura redonda em volta de duas linhas vira bolha. */
.dia__marca {
    display: block;
    margin-top: 4px;
    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);
}

/* AS ORIGENS POR DIA, na administração (13/10/2026). A tabela dos sete dias tem
   o dia na linha; esta o tem na coluna, porque o nome de uma origem é texto
   longo e o número é curto: sete colunas de dia cabem numa tela estreita onde
   sete nomes lado a lado não caberiam. Ela herda de `.tabela--dias` o número à
   direita, o mono e a régua do rodapé.

   HOJE ACENDE A COLUNA, e não a linha, pelo mesmo motivo da tabela de cima:
   está pela metade. A classe é outra (`coluna--hoje`) porque `.dia--hoje > *`
   pinta os FILHOS do elemento, e a marca «hoje» do cabeçalho é filho do `th`:
   com a classe da linha ela ganharia um fundo próprio dentro da coluna. O
   passar do mouse repete o seletor do hover da linha, que tem a mesma força:
   quem vem depois ganha, e é esta, para a coluna não apagar ao ler uma linha.

   O CABEÇALHO PRECISA DO SELETOR MAIS FORTE: `.painel .tabela thead th` já
   define o fundo dele e pesa mais que a classe sozinha, e sem isto a coluna
   acendia só a partir da primeira linha, com a célula de cima apagada. */
.tabela--origens .coluna--hoje,
.painel .tabela--origens thead th.coluna--hoje {
    background-color: color-mix(in srgb, var(--cor-menta) 5%, transparent);
}

.tabela--origens tbody tr:hover > .coluna--hoje {
    background-color: color-mix(in srgb, var(--cor-menta) 8%, transparent);
}

/* O NOME DA ORIGEM CORTA, e o nome inteiro mora no `title`. A origem mais
   comprida do site tem trinta caracteres, e sem o teto a primeira coluna
   decidia a largura da tabela e empurrava os sete dias para fora da tela. */
.origem__nome {
    display: block;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zero em cinza: numa matriz esparsa o que importa é onde há alguma coisa. */
.tabela--origens tbody td.celula--zero {
    color: var(--cor-cinza-fraco);
}

/* 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);
}

/* AS TABELAS DE NÚMEROS RESPIRAM 12 PX DE CADA LADO, e não 18, desde
   16/10/2026: a dos dias tem onze colunas, e 36 px por coluna somavam quase
   400 px de ar numa tabela que precisa caber no cartão sem rolar. Doze ainda
   separa um número do vizinho, que é o que o respiro faz aqui. O telefone
   aperta mais, na regra de tela estreita. */
.painel .tabela--dias th,
.painel .tabela--dias td {
    padding-inline: 12px;
}

.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 uma
       ação, Entrar ou Sair, e o próprio Menu. O nome de quem entrou também
       sai, porque a Minha conta está no Menu.

       A AÇÃO DE QUEM NÃO ENTROU É ENTRAR, desde 19/10/2026 (LayoutPrincipal),
       e não mais o botão de baixar: no celular o arquivo não instala, e o
       "Entrar" só existia dentro do Menu. "Criar conta" pede 129 px onde
       sobram 86; "Entrar" pede 67, como o "Baixar" que estava ali. 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,
    .cabecalho__baixar { display: none; }

    .cabecalho__entrar-no-telefone { display: inline-flex; }

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

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

    /* 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 CARTÃO MIÚDO DO PAINEL

   A corrente do funil (21/09/2026), a faísca e o «Em uso» de um passo só
   saíram em 19/10/2026, com a tela executiva: o caminho virou a `.jornada`,
   a métrica-norte virou o primeiro cartão da `.panorama`, e o dia a dia em
   barras, a `.tendencia`. Fica o cartão de vidro miúdo da ativação passo a
   passo, com o número, o nome e a nota dele.

   `align-content: start` porque o cartão mora em grade esticada: sem ele a
   sobra de altura de um cartão alto se reparte entre as linhas dos baixos, 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». */
.resumo__cartao {
    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);
}

/* ------------------------------------------------------------
   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 FILTRO E O RESUMO — 14/10/2026

   A tela de números tinha nove blocos e três deles diziam o mesmo: a corrente,
   a faísca e a tabela mostravam os mesmos passos do funil. Agora há um filtro,
   o período, e um resumo, seis cartões que mudam com ele.

   O FILTRO É UM LINK, e não um formulário nem uma aba em JavaScript: cada
   período tem endereço próprio, sobrevive ao F5 e funciona sem script, a mesma
   régua do resto do painel. O aberto fica marcado pela cor, pelo traço e pelo
   `aria-current`, e não só pela cor. */

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

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

.periodo__opcao {
    padding: 10px 18px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-pilula);
    font-family: var(--fonte-mono);
    font-size: 0.8125rem;
    color: var(--cor-corpo);
    text-decoration: none;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.periodo__opcao:hover {
    color: var(--cor-branco-gelo);
    border-color: var(--borda-vidro-forte);
}

.periodo__opcao[aria-current="page"] {
    border-color: color-mix(in srgb, var(--cor-menta) 45%, transparent);
    background-color: color-mix(in srgb, var(--cor-menta) 8%, transparent);
    color: var(--cor-menta);
}

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

/* A nota ocupa a linha de baixo inteira: ela diz de quando são os números, que
   é a primeira pergunta de quem compara dois períodos. */
.periodo__nota {
    flex-basis: 100%;
    max-width: 96ch;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--cor-cinza-fraco);
}

/* SEIS CARTÕES: um por linha no telefone, dois a partir de 30 rem e três a
   partir de 44 rem, o que dá três por fileira na tela larga. Em duas colunas no
   telefone cada cartão ficava com 110 px de texto, e a pílula da variação
   quebrava em duas linhas. Seis numa fileira só deixaria cada cartão com 150 px
   na tela larga, e o número de cinco dígitos em mono comeria a largura
   inteira. O número é o `.corrente__valor`, e o tamanho dele vem daqui. */
.resumo {
    --tamanho-do-numero: clamp(2rem, 3vw, 2.5rem);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

@media (min-width: 44rem) {
    .resumo {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* A VARIAÇÃO É A ÚNICA COISA DO CARTÃO QUE RESPONDE «ESTÁ MUDANDO?», e por isso
   é pílula de luz, como a queda da corrente. Subir e descer têm a mesma cor: a
   seta diz o sentido, e uma cor de «bom» e outra de «ruim» afirmaria um juízo
   que a conta não tem (mais visitas sem mais cadastros também é um achado).
   Igual e sem comparação ficam neutras, em cinza: luz é de quem se mexeu. */
.resumo__variacao {
    justify-self: start;
    margin: 4px 0 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);
}

.resumo__variacao--neutra {
    border-color: var(--borda-vidro);
    color: var(--cor-cinza-fraco);
}

.resumo__seta {
    margin-right: 4px;
}

/* O ACUMULADO, EM UMA FILEIRA DE NÚMEROS pequenos: é contexto, e não a
   pergunta da tela. O valor vem primeiro em tela mesmo estando depois do nome
   na marcação (`dt` antes de `dd`, que é a ordem que o leitor de tela lê). */
.totais {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

@media (min-width: 44rem) {
    .totais {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.totais__item {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 14px 18px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-controle);
}

.totais__valor {
    order: -1;
    margin: 0;
    font-family: var(--fonte-mono);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--cor-branco-gelo);
}

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

.totais__nota {
    margin: 0;
    font-size: 0.75rem;
    color: var(--cor-cinza-fraco);
}

/* O «VER MAIS» É `<details>`, e não botão com JavaScript: abre e fecha sem
   script e pelo teclado. O marcador de fábrica sai, e o `+`/`−` em menta o
   substitui, porque o triângulo do navegador não vestia a paleta. A tabela
   de dentro perde a borda, que já é a do cartão. */
.detalhe {
    /* Sem o piso em zero, o item da grade do cartão cresce até caber a tabela
       inteira (o `min-width` automático de quem não recorta), e no telefone a
       página passava a rolar para o lado: 576 px de rolagem numa tela de 375. A
       tabela rola dentro do próprio envoltório. */
    min-width: 0;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
}

.detalhe > summary {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
    padding: 12px 18px;
    font-size: 0.875rem;
    color: var(--cor-corpo);
    cursor: pointer;
    list-style: none;
}

.detalhe > summary::-webkit-details-marker {
    display: none;
}

.detalhe > summary::before {
    content: "+";
    inline-size: 1ch;
    font-family: var(--fonte-mono);
    color: var(--cor-menta);
}

.detalhe[open] > summary {
    border-bottom: 1px solid var(--borda-vidro);
    color: var(--cor-branco-gelo);
}

.detalhe[open] > summary::before {
    content: "\2212";
}

.detalhe > summary:focus-visible {
    outline: 2px solid var(--cor-menta);
    outline-offset: -2px;
    border-radius: var(--raio-modal);
}

/* O que o «ver mais» abre mora num corpo só, com a mesma folga em volta e
   entre as partes: cartões, tabela e legenda. */
.detalhe__corpo {
    display: grid;
    gap: var(--espaco-2);
    align-content: start;
    min-width: 0;
    padding: var(--espaco-2);
}

.detalhe__corpo > .legenda {
    max-width: 96ch;
    margin: 0;
}

.painel .detalhe .tabela-envoltorio {
    border: 0;
    border-radius: 0;
}

/* ------------------------------------------------------------
   A TELA EXECUTIVA — 19/10/2026

   O dono ia mostrar a tela de números a um cliente no dia seguinte, e não a
   conseguia ler: dez cartões do mesmo tamanho, com nomes de bastidor. Agora ela
   conta uma história de cima para baixo (a visão geral, o caminho, o dia a dia,
   cada produto, de onde vieram), e o detalhe mora em «Para conferir», atrás de
   um clique. As peças abaixo são as três que não existiam: os números grandes,
   o caminho em régua única e as barras de cada dia. */

/* QUATRO NÚMEROS GRANDES, cada um com a frase que o explica. Um por linha no
   telefone, dois a partir de 30 rem e os quatro numa fileira a partir de 60
   rem. O cartão é o vidro miúdo do resumo, maior. */
.panorama {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

@media (min-width: 60rem) {
    .panorama:not(.panorama--produtos) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.panorama__item {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 22px 22px 20px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-branco-gelo) 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) 7%, transparent);
}

/* A MÉTRICA-NORTE ACESA EM MENTA, como o «Em uso» que ela substitui: é o único
   número da tela que mede uso, e não passagem. */
.panorama__item--norte {
    border-color: color-mix(in srgb, var(--cor-menta) 35%, transparent);
    background:
        radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--cor-menta) 14%, transparent), transparent 65%),
        color-mix(in srgb, var(--cor-menta) 4%, transparent);
}

.panorama__rotulo {
    margin: 0;
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cor-corpo);
}

.panorama__item--norte .panorama__rotulo {
    color: var(--cor-menta);
}

.panorama__valor {
    margin: 4px 0 0;
    font-family: var(--fonte-mono);
    font-size: clamp(2.5rem, 4vw, 3.25rem);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--cor-branco-gelo);
}

.panorama__item--norte .panorama__valor {
    text-shadow: 0 0 40px color-mix(in srgb, var(--cor-menta) 45%, transparent);
}

.panorama__explica {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--cor-cinza-fraco);
}

/* O ícone e o nome do produto, que não é frase: os dois são as únicas coisas
   do parágrafo, e a flexão só os alinha pela linha do meio. */
.panorama__produto {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 1rem;
    color: var(--cor-branco-gelo);
}

.panorama__produto img {
    flex: none;
    border-radius: 8px;
}

/* O CAMINHO, EM RÉGUA ÚNICA. Cada etapa numa linha: o número, o nome com a
   frase, a barra e o valor. A régua é a maior etapa, e não a primeira, porque
   «Clicaram em baixar» pode passar de «Criaram a conta» (quem já tem conta
   baixa sem se cadastrar), e uma barra acima de cheia não existe.

   NO TELEFONE A BARRA DESCE para a linha de baixo, com a largura inteira: ao
   lado do nome ela teria 60 px, e o que se compara nela é o comprimento. */
.jornada {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jornada__etapa {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-areas:
        "numero nome valor"
        "numero explica explica"
        "numero barra barra";
    align-items: center;
    gap: 6px var(--espaco-2);
    padding: 16px 20px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
    background: color-mix(in srgb, var(--cor-branco-gelo) 2.5%, transparent);
}

.jornada__numero {
    grid-area: numero;
    align-self: start;
    padding-top: 3px;
    font-family: var(--fonte-mono);
    font-size: 0.8125rem;
    color: var(--cor-menta);
}

.jornada__nome {
    grid-area: nome;
    margin: 0;
    font-size: 1rem;
    color: var(--cor-branco-gelo);
}

.jornada__explica {
    grid-area: explica;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cor-cinza-fraco);
}

.jornada__barra {
    grid-area: barra;
    block-size: 10px;
    margin-top: 6px;
}

.jornada__valor {
    grid-area: valor;
    margin: 0;
    font-family: var(--fonte-mono);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: right;
    color: var(--cor-branco-gelo);
}

@media (min-width: 52rem) {
    .jornada__etapa {
        grid-template-columns: 2rem minmax(0, 22rem) minmax(0, 1fr) 6rem;
        grid-template-areas:
            "numero nome barra valor"
            "numero explica barra valor";
        column-gap: var(--espaco-3);
    }

    .jornada__barra {
        margin-top: 0;
    }
}

/* O DIA A DIA EM BARRAS, uma série por cartão: a forma da semana ou do mês,
   e não o número de cada dia, que está na tabela de «Para conferir». As três
   séries ficam lado a lado a partir de 52 rem, cada uma na própria régua,
   porque 50 visitas e 3 cadastros na mesma régua deixariam os cadastros no
   chão. O título de cada barra diz o dia e o valor sob o cursor.

   `preserveAspectRatio="none"` estica a caixa, e por isso só há retângulo: o
   texto do eixo mora fora do SVG. */
.tendencia {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

@media (min-width: 52rem) {
    .tendencia {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tendencia__serie {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 18px 20px 14px;
    border: 1px solid var(--borda-vidro);
    border-radius: var(--raio-modal);
    background: color-mix(in srgb, var(--cor-branco-gelo) 2.5%, transparent);
}

.tendencia__cabeca {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-1);
}

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

/* O total e o de hoje lado a lado, pela linha de base: os dois são números, e
   não frase. */
.tendencia__numeros {
    display: inline-flex;
    align-items: baseline;
    gap: var(--espaco-1);
}

.tendencia__hoje {
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--cor-luz);
}

.tendencia__total {
    font-family: var(--fonte-mono);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    color: var(--cor-branco-gelo);
}

/* UMA COLUNA POR DIA, desde 19/10/2026: a grade reparte a largura em partes
   iguais sem saber quantos dias são, e cada coluna leva a própria barra e a
   própria dica. A coluna inteira é o alvo do cursor, porque a barra de 30
   dias tem 5 px de largura. */
.tendencia__barras {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    block-size: 88px;
}

.tendencia__dia {
    position: relative;
    border-radius: 4px;
}

/* Absoluto, e não em fluxo: em fluxo o SVG toma a proporção da própria caixa
   (10 por 40) pela largura da coluna, e a barra de 7 dias saía com 340 px de
   altura, por cima do cartão de baixo. Fora do fluxo, a coluna tem a altura da
   linha da grade, e o SVG só a preenche. */
.tendencia__coluna {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

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

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

.tendencia__dia:hover .tendencia__barra {
    fill: var(--cor-luz-gelo);
}

/* A DICA DO DIA: o valor grande e a data embaixo, logo acima da barra. Nasce
   com `display: none`, e não transparente: escondida mas com caixa, a dica das
   colunas da ponta contaria para a rolagem e a página do telefone passaria a
   rolar para o lado. Na primeira metade ela se apoia na borda esquerda da
   coluna, e na segunda, na direita, para nunca sair do cartão. */
.tendencia__dica {
    display: none;
    position: absolute;
    z-index: 2;
    inset-inline-start: 0;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--cor-luz) 45%, transparent);
    border-radius: var(--raio-controle);
    background-color: var(--cor-navy);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--cor-noite) 70%, transparent);
    white-space: nowrap;
    pointer-events: none;
}

.tendencia__dia--fim .tendencia__dica {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.tendencia__dia:hover .tendencia__dica {
    display: block;
}

.tendencia__dica-valor {
    display: block;
    font-family: var(--fonte-mono);
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--cor-branco-gelo);
}

.tendencia__dica-dia {
    display: block;
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    color: var(--cor-cinza-fraco);
}

/* O nível é o topo da barra em décimos da coluna (`NivelDaDica`), e a dica
   fica 8 px acima dele. Uma regra por nível porque a marcação não leva
   `style`. */
.tendencia__dica--0 { inset-block-end: 8px; }
.tendencia__dica--1 { inset-block-end: calc(10% + 8px); }
.tendencia__dica--2 { inset-block-end: calc(20% + 8px); }
.tendencia__dica--3 { inset-block-end: calc(30% + 8px); }
.tendencia__dica--4 { inset-block-end: calc(40% + 8px); }
.tendencia__dica--5 { inset-block-end: calc(50% + 8px); }
.tendencia__dica--6 { inset-block-end: calc(60% + 8px); }
.tendencia__dica--7 { inset-block-end: calc(70% + 8px); }
.tendencia__dica--8 { inset-block-end: calc(80% + 8px); }
.tendencia__dica--9 { inset-block-end: calc(90% + 8px); }
.tendencia__dica--10 { inset-block-end: calc(100% + 8px); }

/* O dia zerado é um toco apagado: andaime, e não dado. */
/* HOJE ESTÁ PELA METADE, e a barra dele é a única que ainda vai crescer: a
   meia luz, como a faísca de 30/09/2026 fazia, para não ler como queda. Sob o
   cursor ela acende como as outras. */
.tendencia__barra--hoje {
    fill: color-mix(in srgb, var(--cor-luz) 50%, transparent);
}

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

.tendencia__eixo {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding-top: 6px;
    border-top: 1px solid var(--borda-vidro);
    font-family: var(--fonte-mono);
    font-size: 0.6875rem;
    color: var(--cor-cinza-fraco);
}

/* «PARA CONFERIR» é uma pilha de «ver mais», um por assunto. */
.conferir {
    display: grid;
    gap: 10px;
    min-width: 0;
}

/* ------------------------------------------------------------
   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);
    }
}

/* ------------------------------------------------------------
   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;
    }

    /* 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;
    }

    /* Na tela estreita o nome da origem cede mais: com onze rem ele sozinho
       gastaria metade de um telefone antes do primeiro dia. */
    .origem__nome {
        max-width: 6.5rem;
    }

    .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.

   SÓ NAS PÁGINAS CUJA ABERTURA JÁ TEM A AÇÃO, desde 19/10/2026: a home,
   /novidades e /precos levam `barra-de-download--com-rolagem`
   (BarraDeDownload.EntramComARolagem). Nos guias e nas outras páginas de
   conteúdo o botão de criar conta fica no fim, e ali a barra aparece ao
   abrir. */

@supports (animation-timeline: scroll()) {
    @media (max-width: 40rem) and (prefers-reduced-motion: no-preference) {
        .barra-de-download--com-rolagem {
            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); }

/* O par "Já confirmei, entrar" e "Enviar de novo" de /confirme-seu-email,
   para quem chegou com volta (14/10/2026): o mesmo respiro do botão solto. */
.porta .estado-da-tela > .acoes { 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);
}

/* «Já tem conta? Entrar» no topo do cartão de /baixar (19/10/2026): uma linha
   curta, à direita, acima do título, para quem volta achar a entrada sem
   atravessar o formulário. */
.porta .painel-conta__volta {
    margin: 0 0 var(--espaco-2);
    text-align: right;
    font-size: 0.875rem;
    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 vira a caixa de menta da porta. Aparece onde o recado
   aparece, pelo toque, e não mais abaixo de 48 rem (ver .recado-do-celular). */
@media (hover: none) and (pointer: coarse) {
    .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 no computador
   ele some, junto com a linha que traz os arquivos de volta: quem vem depois
   dos dois não pode guardar a margem de quem sumiu. */
.porta .painel-conta > .recado-do-celular:first-child { margin-top: 0; }

@media not all and (hover: none) and (pointer: coarse) {
    .porta .painel-conta > .recado-do-celular:first-child + .opcoes-de-download__mostrar + .baixada { margin-top: 0; }
}

/* No celular, quando o título do cartão sai (/confirme-seu-email), quem abre
   o cartão é o recado. */
@media (hover: none) and (pointer: coarse) {
    .porta .painel-conta > .so-onde-instala:first-child + .recado-do-celular { margin-top: 0; }
}

/* A linha que traz os arquivos de volta, logo abaixo do recado, ou abrindo o
   cartão em /baixar, para quem entrou. */
.porta .opcoes-de-download__mostrar { margin-top: var(--espaco-2); }

.porta .painel-conta > .opcoes-de-download__mostrar:first-child { margin-top: 0; }

/* Em /baixar, para quem entrou, os arquivos abrem o cartão no computador, e
   no celular depois de a pessoa pedir por eles: nos dois casos a linha de
   cima não está na tela. */
.porta .painel-conta > .opcoes-de-download__mostrar:first-child + .baixada { 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; }

/* O código a conferir com o aplicativo (14/10/2026), na letra e no
   espaçamento do campo de cima, para a pessoa reconhecer o mesmo desenho
   que acabou de ver lá. Só na tela, e não no campo: aqui ninguém digita. */
.secao--cliente .cartao__codigo {
    font-family: var(--fonte-mono);
    font-size: clamp(1.125rem, 6vw, 1.75rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--cor-branco-gelo);
}

.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); }

/* ===================================================== O CAPTUREHUB MOBILE
   O SITE DA EMPRESA COM OS DOIS PRODUTOS, desde 16/10/2026: a versão 6 da
   prévia, aprovada pelo dono no mesmo dia. Tudo aqui veste peças novas
   (o banner, a barra do produto, o menu Produtos, as páginas do Mobile, os
   downloads dos dois) e nenhuma regra sobrescreve o desenho de uma página de
   hoje; o que é de página portada mora sob a classe nova dela. Com o Mobile
   desligado nenhuma destas classes vai para a marcação, e a folha só pesa.

   O ROXO É DO MOBILE, e entra pela família da luz: dentro de
   `data-produto="mobile"` (o `<main>` das páginas dele, o slide, os cartões e
   o bloco do arquivo) a luz vira roxa, e tudo o que o site já desenha com ela
   muda sozinho. Ele pinta brilho, ponto e traço, e nunca o que se clica: o
   botão continua o branco da casa. Os tokens estão no bloco de desvio do
   tokens.css. */

/* Dentro de `data-produto="mobile"` a família da luz vira roxa, e tudo o que
   o site já desenha com ela (o brilho, a borda do vidro, o fim do título, o
   aro da chamada) muda sozinho. */
[data-produto="mobile"] {
    --cor-luz-gelo: var(--cor-roxo-reflexo);
    --cor-luz: var(--cor-roxo);
    --cor-luz-media: var(--cor-roxo-profundo);
    --cor-luz-funda: var(--cor-roxo-sombra);
    --brilho-luz: radial-gradient(closest-side,
        var(--cor-luz-gelo) 0%, var(--cor-luz) 18%, var(--cor-luz-media) 42%,
        color-mix(in srgb, var(--cor-luz-funda) 45%, transparent) 66%, transparent 100%);
}

[data-produto="mobile"] .selo__ponto { background: var(--cor-roxo); box-shadow: 0 0 10px var(--cor-roxo); }
[data-produto="mobile"] .numero__rotulo { color: var(--cor-roxo); }

[data-produto="mobile"] .mostras--vidro .mostra__rotulo {
    color: var(--cor-roxo);
    border-color: color-mix(in srgb, var(--cor-roxo) 30%, transparent);
    background: color-mix(in srgb, var(--cor-roxo) 6%, transparent);
}

[data-produto="mobile"] .mostras--vidro .mostra__rotulo::before { background: var(--cor-roxo); box-shadow: 0 0 8px var(--cor-roxo); }

.titulo-pagina 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;
}

/* A etiqueta «Novo», em metal: marca, e não ação. Aparece em dois lugares
   da home, no máximo. */
.etiqueta-novo {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--raio-pilula);
    background: var(--gradiente-metal-roxo);
    color: var(--cor-tinta);
    font-family: var(--fonte-corpo);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: 2px;
}

/* ===================================================== O MENU PRODUTOS
   No lugar de «O aplicativo», então a barra continua com o mesmo número de
   itens. Um <details>, como o Menu do celular: abre sem JavaScript. */
.produtos { position: relative; }

.produtos__botao {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    padding: var(--espaco-1) 14px;
    border-radius: var(--raio-pilula);
    color: var(--cor-corpo);
    font-size: 0.9375rem;
    white-space: nowrap;
    user-select: none;
    transition: color 180ms ease, background-color 180ms ease;
}

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

.produtos__botao::after {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate 180ms ease;
}

.produtos[open] .produtos__botao::after { rotate: 225deg; translate: 0 2px; }

.produtos__botao:hover,
.produtos[open] .produtos__botao {
    color: var(--cor-branco-gelo);
    background-color: color-mix(in srgb, var(--cor-branco-gelo) 5%, transparent);
}

.produtos__painel { display: none; }

.produtos[open] .produtos__painel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 14px);
    left: 50%;
    translate: -50% 0;
    display: grid;
    align-content: start;
    gap: 4px;
    inline-size: 27rem;
    padding: var(--espaco-1);
    border-radius: var(--raio-modal);
    border: 1px solid var(--borda-vidro-forte);
    background: color-mix(in srgb, var(--cor-noite) 94%, var(--cor-navy-cartao));
    box-shadow: var(--sombra-funda);
}

.cabecalho__nav .produtos__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 12px;
    border-radius: var(--raio-cartao);
    white-space: normal;
    color: var(--cor-corpo);
}

.produtos__item img { display: block; inline-size: 40px; block-size: 40px; }
.produtos__nome { display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem; color: var(--cor-branco-gelo); }
.produtos__frase { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.45; }

.produtos__rodape {
    margin: 4px 12px 6px;
    padding-top: 10px;
    border-top: 1px solid var(--borda-vidro);
    font-size: var(--tamanho-legenda);
    color: var(--cor-cinza-nevoa);
}

.menu-movel__produto { display: grid; gap: 2px; }
.menu-movel__produto small { font-size: var(--tamanho-legenda); color: var(--cor-cinza-nevoa); }

/* ===================================================== A BARRA DO PRODUTO
   A fita de /equipe e da administração, a mesma peça: as abas em texto
   sobre uma régua, a aberta marcada pela cor e pelo traço aceso, o traço
   na cor do produto. O nome do produto à esquerda, e mais nada: o botão de
   baixar é o do cabeçalho, um só. */
.barra-produto {
    position: sticky;
    z-index: 40;
    top: var(--altura-cabecalho);
    border-bottom: 1px solid var(--borda-vidro);
    background-color: color-mix(in srgb, var(--cor-noite) 86%, transparent);
    backdrop-filter: blur(16px);
}

.barra-produto__corpo {
    display: flex;
    align-items: center;
    gap: var(--espaco-6);
}

.barra-produto__nome {
    flex: none;
    padding-block: 14px;
    color: var(--cor-branco-gelo);
    font-family: var(--fonte-titulo);
    font-size: 1.0625rem;
    font-weight: 600;
    white-space: nowrap;
}

.barra-produto__nome small {
    margin-left: var(--espaco-1);
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-legenda);
    font-weight: 400;
    color: var(--cor-cinza-nevoa);
}

.barra-produto .modulos { flex: 1; min-inline-size: 0; gap: 4px; margin: 0; }

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

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

.barra-produto .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;
}

.barra-produto[data-produto="mobile"] .modulo::after { background: var(--cor-roxo); box-shadow: 0 0 14px color-mix(in srgb, var(--cor-roxo) 80%, transparent); }
.barra-produto .modulo--atual::after { opacity: 1; }
.barra-produto .modulo:focus-visible { outline: 2px solid var(--cor-luz-gelo); outline-offset: -2px; border-radius: var(--raio-controle); }

/* A abertura que vem logo depois da barra não sobe por baixo do cabeçalho:
   quem fica embaixo dele agora é a barra. O índice preso dos guias e o
   destino das âncoras descontam a altura dela. */
.barra-produto + .abertura-pagina { margin-top: 0; padding-top: var(--espaco-12); }
main:has(> .barra-produto) .guia-layout .guia__indice { top: calc(var(--altura-cabecalho) + 56px + var(--espaco-4)); }
main:has(> .barra-produto) [id] { scroll-margin-top: calc(var(--altura-cabecalho) + 56px + var(--espaco-3)); }

/* A captura presa de /o-aplicativo desce a altura da barra, onde a barra
   também fica presa: medido a 1280 px, ela parava em 120 px e a barra
   terminava em 136, e o topo da tela ficava por baixo dela. */
@media (min-width: 60.0625rem) {
    main:has(> .barra-produto) .mostras--vidro .mostra__midia { top: calc(var(--altura-cabecalho) + 56px + 40px); }
}

/* No telefone a barra não fica presa (o cabeçalho já ocupa 64 px), e a fita
   corre para o lado, como em /equipe. */
@media (max-width: 60rem) {
    .barra-produto { position: static; }
    .barra-produto__corpo { gap: var(--espaco-2); }
    .barra-produto__nome small { display: none; }
    .barra-produto .modulos { mask-image: linear-gradient(90deg, black 85%, transparent); padding-right: var(--espaco-4); }
}

/* No telefone a barra é só a fita: o nome do produto já está no título da
   página, e sem ele as quatro abas cabem inteiras em 343 px, com a aberta
   sempre à vista. */
@media (max-width: 40rem) {
    .barra-produto__nome { display: none; }
    .barra-produto .modulos { gap: 0; mask-image: none; padding-right: 0; justify-content: space-between; }
    .barra-produto .modulo { padding-inline: 8px; font-size: var(--tamanho-legenda); }
}

/* ===================================================== OS DOIS PRODUTOS */
.familia {
    --coluna-minima: 24rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--coluna-minima), 100%), 1fr));
    gap: var(--espaco-3);
    align-content: start;
}

.familia--estreita { --coluna-minima: 15rem; }
.familia__cartao { display: grid; align-content: start; gap: var(--espaco-2); padding: var(--espaco-4); }
.familia--estreita .familia__cartao { padding: var(--espaco-3); }
.familia__cartao h3 { font-size: 1.375rem; }
/* O logo cabe na coluna: a 320 px o do Mobile, com 54 px de altura, pedia
   272 de largura, e a coluna da grade não encolhia abaixo dele. */
.familia__logo { display: block; block-size: 40px; inline-size: auto; max-inline-size: 100%; object-fit: contain; object-position: left center; }
.familia__logo--mobile { block-size: 54px; margin-block: -7px; }
.familia__plataforma { font-family: var(--fonte-mono); font-size: 0.8125rem; color: var(--cor-luz); letter-spacing: 0.02em; }
.familia__cartao .texto-secundario { color: var(--cor-corpo); font-size: 1.0625rem; line-height: 1.6; }
.familia--estreita .familia__cartao .texto-secundario { font-size: 1rem; }
.familia__lista { display: grid; gap: var(--espaco-1); align-content: start; margin: 0; padding: 0; list-style: none; }
.familia__lista li { position: relative; padding-left: 26px; color: var(--cor-corpo); }

.familia__lista li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.62em;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--cor-luz);
    box-shadow: 0 0 10px var(--cor-luz);
}

.familia__acao { justify-self: start; margin-top: var(--espaco-1); }

/* Em /baixar os botões dos dois cartões ficam na mesma altura: o do Mobile
   tem o recado do Windows a mais, e o botão dele descia 65 px abaixo do do
   CaptureHub, medido a 1440. O cartão vira coluna, e a sobra fica entre os
   fatos e os botões. */
.downloads__grade .familia__cartao { display: flex; flex-direction: column; align-items: flex-start; }
.downloads__grade .downloads__fatos,
.downloads__grade .downloads__recado { align-self: stretch; }
.downloads__grade .familia__acao { margin-top: auto; }
.familia__nota { margin-top: var(--espaco-4); text-align: center; color: var(--cor-cinza-nevoa); }

/* ===================================================== A PÁGINA DO MOBILE
   A abertura com botões e palco reduzido serve também a /o-aplicativo, com
   o Mobile publicado: as duas visões gerais são irmãs. */
.abertura-dupla__texto .heroi__acoes { justify-content: flex-start; margin-top: var(--espaco-4); }
.abertura-dupla__texto .heroi__garantia { justify-content: flex-start; }
.demo-reduzida .palco { width: 1000px; margin: 0; zoom: 0.58; animation: none; }

/* Nas abas internas do Mobile a abertura é só o título, e o vão até a
   primeira seção somava 240 px (os 96 da abertura e os 144 da seção). */
main[data-produto="mobile"] .abertura-pagina:has(.cabecalho-secao--palco) { padding-bottom: var(--espaco-8); }
main[data-produto="mobile"] .abertura-pagina:has(.cabecalho-secao--palco) + .secao { padding-top: var(--espaco-2); }

@media (max-width: 75rem) {
    .demo-reduzida .palco { zoom: 0.5; }
}

/* Empilhada, a abertura dá a largura inteira ao palco, que volta ao tamanho
   de desenho. Até 60 rem ele ficava reduzido à metade e preso à esquerda, com
   a outra metade da linha vazia, medido a 1024. */
@media (max-width: 67.5rem) {
    .demo-reduzida .palco { width: 100%; zoom: 1; }
}

@media (max-width: 60rem) {
    .demo--mobile { grid-template-columns: minmax(0, 1fr); }
}

/* A demonstração do Mobile: as mesmas classes do herói de hoje, com um
   celular no lugar da janela. Sem `data-demo`, o animacoes.js não a pega, e
   ela fica no estado final, com os três passos à vista. */
.demo--mobile { grid-template-columns: minmax(0, 1fr) minmax(290px, 1.2fr); }
.demo--mobile .demo__palco { padding: 32px 24px 28px; }
.demo--mobile .demo__regiao { width: auto; justify-self: center; }
.demo--mobile .demo__captura { aspect-ratio: 1080 / 2424; inline-size: 236px; border-radius: 28px; background-color: var(--cor-tinta); }
.demo--mobile .demo__captura img { position: static; inline-size: 100%; block-size: 100%; object-fit: cover; }
.demo--mobile .demo__zoom { background: url("../produto/mobile/configuracoes.png") no-repeat var(--bx) var(--by) / 270px auto, var(--cor-branco-gelo); }
.demo__zoom--m1 { --bx: -40px; --by: -145px; }
.demo__zoom--m2 { --bx: -89px; --by: -548px; }
.demo__zoom--m3 { --bx: -40px; --by: -450px; }

.demo__toque {
    position: absolute;
    left: 30%;
    top: 79%;
    inline-size: 34px;
    block-size: 34px;
    translate: -50% -50%;
    border-radius: 50%;
    border: 2px solid var(--cor-roxo);
    background-color: color-mix(in srgb, var(--cor-roxo) 25%, transparent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--cor-roxo) 15%, transparent), 0 0 24px var(--cor-roxo);
}

/* O caminho do Mobile, no bento da home: o recorte do toque é a linha
   «Network & internet» da tela de Configurações, x 40 a 1040, y 528 a 861. */
.recorte--toque { --proporcao: 3 / 1; --largura: 108%; --esquerda: -4%; --topo: -158.6%; }

.lupa--toque .lupa__alvo {
    left: 3%;
    top: 30%;
    inline-size: 94%;
    block-size: 36%;
    border-color: var(--cor-roxo);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-roxo) 18%, transparent), 0 0 24px color-mix(in srgb, var(--cor-roxo) 50%, transparent);
}

.lupa--toque .demo__toque { left: 22%; top: 48%; }
.cena--ligar .tela-em-vidro img { aspect-ratio: 16 / 9; object-fit: cover; object-position: left 16%; }

.saidas-mobile {
    --coluna-minima: 20rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--coluna-minima), 100%), 1fr));
    gap: var(--espaco-2);
    align-content: start;
}

.saidas-mobile .cartao { display: grid; align-content: start; gap: var(--espaco-1); padding: var(--espaco-3); }
.saidas-mobile h3 { font-size: 1.125rem; }
.saidas-mobile p { color: var(--cor-corpo); line-height: 1.6; }
.saidas-mobile .familia__plataforma { font-size: 0.75rem; }

.perguntas-mobile { display: grid; gap: var(--espaco-2); align-content: start; max-width: 52rem; margin: 0 auto; }
.perguntas-mobile .pergunta p { margin-top: var(--espaco-2); color: var(--cor-corpo); line-height: 1.65; }

.primeira-execucao {
    counter-reset: passo;
    display: grid;
    gap: var(--espaco-2);
    align-content: start;
    max-width: 52rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.primeira-execucao li { position: relative; padding: var(--espaco-3) var(--espaco-3) var(--espaco-3) 76px; }

.primeira-execucao li::before {
    counter-increment: passo;
    content: counter(passo, decimal-leading-zero);
    position: absolute;
    left: var(--espaco-3);
    top: var(--espaco-3);
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--cor-roxo) 50%, transparent);
    color: var(--cor-roxo);
    font-family: var(--fonte-mono);
    font-size: 0.8125rem;
}

.primeira-execucao h3 { font-size: 1.125rem; }
.primeira-execucao p { margin-top: 6px; color: var(--cor-corpo); line-height: 1.6; }

/* ===================================================== DOWNLOADS */
.downloads__grade {
    --coluna-minima: 24rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--coluna-minima), 100%), 1fr));
    gap: var(--espaco-3);
    align-content: start;
    margin-top: var(--espaco-6);
}

.downloads__fatos { display: grid; gap: 10px; align-content: start; margin: 0; }
.downloads__fato { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--espaco-2); padding-top: 10px; border-top: 1px solid var(--borda-vidro); }
.downloads__fato dt { font-family: var(--fonte-mono); font-size: 0.8125rem; color: var(--cor-cinza-nevoa); }
.downloads__fato dd { margin: 0; color: var(--cor-corpo); }
.downloads__recado { color: var(--cor-corpo); }
.downloads__recado strong { color: var(--cor-branco-gelo); }
.porta--depois { margin-top: 0; padding-top: var(--espaco-8); }

@media (max-width: 30rem) {
    .downloads__fato { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Depois do cadastro: um bloco por aplicativo, o que a pessoa veio buscar
   em cima, com o único botão principal da tela. */
.app-baixar {
    display: grid;
    align-content: start;
    gap: var(--espaco-2);
    padding: var(--espaco-3);
    border-radius: var(--raio-cartao);
    border: 1px solid var(--borda-vidro);
    background: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
}

.app-baixar + .app-baixar { margin-top: var(--espaco-2); }
[data-produto="mobile"].app-baixar { border-color: color-mix(in srgb, var(--cor-roxo) 40%, transparent); }
.app-baixar__cabeca { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; }
.app-baixar__cabeca img { display: block; inline-size: 44px; block-size: 44px; }
.app-baixar__nome { display: block; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.125rem; color: var(--cor-branco-gelo); }
.app-baixar__versao { display: block; font-family: var(--fonte-mono); font-size: 0.8125rem; color: var(--cor-cinza-nevoa); }
.app-baixar__rotulo { font-family: var(--fonte-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cor-cinza-nevoa); }
.app-baixar .baixada { margin-top: 0; }

@media (max-width: 40rem) {
    .app-baixar,
    [data-produto="mobile"].app-baixar { padding: var(--espaco-3) 0 0; border: 0; border-top: 1px solid var(--borda-vidro-forte); border-radius: 0; background: none; }
}

/* O complemento do selo, que sai abaixo de 25 rem: «CaptureHub Mobile ·
   emulador de Android» pede 329 px, e a 320 passava da borda; «CaptureHub ·
   gravador de tela para Windows», em /o-aplicativo, pede 347, e a 375 passava
   20 px da coluna. Com os 48 do respiro, os dois cabem a partir de 400. Quem
   fica sem ele lê o produto no título logo abaixo. */
@media (max-width: 25rem) {
    .selo__complemento { display: none; }
}

/* Na porta há um botão principal só, e ele é do primeiro bloco: a luz da
   primeira opção, que diz "comece por aqui", fica só nele. */
.porta .app-baixar + .app-baixar .baixada__opcao:first-child {
    border-color: var(--borda-vidro);
    background: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
}

/* O SHA-256 do Mobile é o primeiro parágrafo depois dos botões, e não o
   segundo, e veste a mesma caixa tracejada do do CaptureHub. */
.porta [data-produto="mobile"].app-baixar .baixada + .legenda {
    padding: 12px var(--espaco-2);
    border: 1px dashed var(--borda-vidro-forte);
    border-radius: var(--raio-cartao);
}

/* Antes do texto, nos cartões dos planos: a margem vai para o lado do texto. */
.etiqueta-novo--antes { margin: 0 6px 0 0; }

/* A etiqueta na comparação de /precos, ao lado do nome do grupo. */
.tabela__rotulo .etiqueta-novo { margin-left: var(--espaco-1); }

/* ================================================= O FILME DA HOME
   O topo da home com o CaptureHub Mobile publicado (FilmeDosProdutos). Desde
   19/10/2026, por pedido do dono, o texto fica em cima, no desenho do herói de
   hoje (as classes são as dele), e o filme embaixo, na largura inteira.

   É CSS, e não um arquivo de vídeo: a cena é desenhada numa tela de 160 × 90
   unidades que escala com a janela (a unidade é o `em` de `--u`, tirado do
   tamanho do palco), e fica nítida em qualquer monitor pesando só as duas
   capturas, que o site já servia.

   O que dá o ar de vídeo é a câmera (`.filme__camera`), que se aproxima dos
   cliques e dos toques e se afasta na troca de ato, e o clique que vira passo:
   a miniatura sai do ponto clicado e voa até a linha dela no painel. Painéis,
   legendas, voos e a faixa de luz ficam fora da câmera, parados na tela.

   As regras do §Movimento valem: só opacidade e transformação, e nenhuma
   captura inclinada (a câmera aproxima, não gira); sem script o filme roda
   igual, porque quem o move são os @keyframes; com menos movimento, ele para
   no pôster, com o Windows e o Android lado a lado. O animacoes.js só
   acrescenta os controles: pausar e pular de capítulo.

   Todas as peças são elementos do bloco `filme`, e não `cena`, `painel`,
   `passo` ou `linha`: esses nomes já existem nesta folha, e a primeira
   versão da prévia herdou o desenho do painel da administração. */

/* O texto é o do herói: só o ponto do selo, roxo do Mobile, e o negrito do
   parágrafo, que o herói de hoje não tem, são daqui. */
.cinema .cinema__selo-ponto { background: var(--cor-roxo); box-shadow: 0 0 10px var(--cor-roxo); }
.cinema .heroi__texto .texto-grande { max-width: 44rem; }
.cinema .texto-grande strong { color: var(--cor-branco-gelo); font-weight: 600; }
.cinema.heroi { padding-bottom: var(--espaco-6); }

.cinema__filme {
    --duracao: 36s;
    position: relative;
    z-index: 2;
    margin-top: 48px;
}

/* O palco vai de ponta a ponta. A tela tem 160 × 84 (a cena acontece até
   y 74, e o rodapé fica de 77 a 82), a altura é a dessa proporção, sem passar
   da janela nem de 860 px, e a tela cabe inteira nele, centrada. */
.filme__palco {
    position: relative;
    block-size: min(52.5vw, calc(100svh - 120px), 860px);
    container-type: size;
}

.filme__cena {
    --u: min(calc(100cqw / 160), calc(100cqh / 84));
    position: absolute;
    left: 50%;
    top: 50%;
    inline-size: 160em;
    block-size: 84em;
    translate: -50% -50%;
    font-size: var(--u);
    pointer-events: none;
}

.filme__cena > *,
.filme__camera > * { position: absolute; }

.filme__camera { inset: 0; transform-origin: 0 0; }

/* As duas luzes, a do Windows e a do Android, que trocam de força com o ato. */
.filme__luz { top: -12em; inline-size: 110em; block-size: 110em; border-radius: 50%; }
.filme__luz--ch { left: -8em; background: radial-gradient(closest-side, color-mix(in srgb, var(--cor-luz-media) 34%, transparent), color-mix(in srgb, var(--cor-luz-funda) 10%, transparent) 60%, transparent); }
.filme__luz--mobile { left: 32em; background: radial-gradient(closest-side, color-mix(in srgb, var(--cor-roxo-profundo) 38%, transparent), color-mix(in srgb, var(--cor-roxo-sombra) 12%, transparent) 60%, transparent); opacity: 0.18; }

/* ================================================= AS LEGENDAS DO FILME */
/* A posição divide pelo tamanho da letra: o `em` de quem tem fonte própria
   é o dela, e não a unidade da cena. */
.filme__legenda {
    left: 50%;
    top: calc(2.6em / 2.6);
    translate: -50% 0;
    font-family: var(--fonte-titulo);
    font-size: 2.6em;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--cor-branco-gelo);
    white-space: nowrap;
    opacity: 0;
}

.filme__legenda strong {
    font-weight: 600;
    background: linear-gradient(95deg, var(--cor-luz-gelo), var(--cor-menta));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.filme__legenda--2 strong { background-image: linear-gradient(95deg, var(--cor-roxo-reflexo), var(--cor-roxo)); }
.filme__legenda--3 strong { background-image: linear-gradient(95deg, var(--cor-luz), var(--cor-menta) 55%, var(--cor-roxo)); }

/* ================================================= ATO 1: A JANELA DO WINDOWS */
.filme__janela {
    left: 16em;
    top: 13em;
    inline-size: 90em;
    border-radius: 1.2em;
    overflow: hidden;
    border: 0.1em solid var(--borda-vidro-forte);
    background: var(--cor-tinta);
    box-shadow: 0 4em 8em -3em color-mix(in srgb, var(--cor-tinta) 90%, transparent), 0 0 0 0.6em color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
    transform-origin: 0 0;
    /* O pôster, com menos movimento: a janela menor, à esquerda. */
    transform: translate(12em, 6em) scale(0.68);
}

/* A barra de cima é a do CaptureHub gravando, como no herói de hoje, e não
   uma barra de janela: a captura já traz a dela, e moldura em volta de
   captura é a janela dentro da janela que o dono reprovou em 09/09/2026. */
.filme__gravacao {
    display: flex;
    align-items: center;
    gap: 1.2em;
    block-size: 3.2em;
    padding-inline: 1.4em;
    background: color-mix(in srgb, var(--cor-navy-elevado) 85%, var(--cor-tinta));
    color: var(--cor-cinza-nevoa);
    font-family: var(--fonte-mono);
    font-size: 1.1em;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.filme__gravacao-estado { display: inline-flex; align-items: center; gap: 0.6em; color: var(--cor-branco-gelo); font-weight: 600; }
.filme__gravacao-divisa { inline-size: 0.1em; block-size: 1.4em; background: var(--borda-vidro-forte); }
.filme__gravacao-sessao { color: var(--cor-branco-gelo); font-family: var(--fonte-corpo); letter-spacing: 0; }
.filme__gravacao-monitor { margin-left: auto; }

.filme__janela-tela { position: relative; aspect-ratio: 1560 / 940; }
.filme__janela-tela img { display: block; inline-size: 100%; block-size: 100%; }

/* A região que está sendo gravada: os quatro cantos da marca. */
.filme__janela-regiao { position: absolute; inset: 0.8em; }
.filme__janela-regiao i { position: absolute; inline-size: 2.4em; block-size: 2.4em; border: 0.28em solid var(--cor-menta); }
.filme__janela-regiao i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 0.6em; }
.filme__janela-regiao i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 0.6em; }
.filme__janela-regiao i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 0.6em; }
.filme__janela-regiao i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 0.6em; }

/* Os alvos que acendem no clique, medidos na captura de 1560 × 940 (o
   campo do cupom, «Aplicar cupom» e «Finalizar pedido»). Captura nova pede
   as medidas de novo, aqui, nos cliques, no cursor e nas miniaturas. */
.filme__alvo { position: absolute; border-radius: 0.4em; border: 0.22em solid var(--cor-menta); box-shadow: 0 0 0 0.5em color-mix(in srgb, var(--cor-menta) 18%, transparent); opacity: 0; }
.filme__alvo--1 { left: 21.67%; top: 66.5%; inline-size: 24.3%; block-size: 4.26%; }
.filme__alvo--2 { left: 46.73%; top: 66.5%; inline-size: 8.9%; block-size: 4.47%; }
.filme__alvo--3 { left: 60.45%; top: 72.2%; inline-size: 17.9%; block-size: 4.47%; }

.filme__clique { position: absolute; inline-size: 4em; block-size: 4em; margin: -2em 0 0 -2em; border-radius: 50%; border: 0.25em solid var(--cor-menta); opacity: 0; }
.filme__clique--1 { left: 33.8%; top: 68.6%; }
.filme__clique--2 { left: 51.2%; top: 68.7%; }
.filme__clique--3 { left: 69.4%; top: 74.5%; }

/* O cursor anda numa camada do tamanho da captura: a translação em
   porcentagem é da camada, e por isso cai no ponto certo da tela. O aperto
   do clique é da seta, com a origem na ponta. */
.filme__cursor { position: absolute; inset: 0; transform: translate(69.4%, 74.5%); }
.filme__cursor svg { position: absolute; left: 0; top: 0; inline-size: 2.6em; block-size: 2.6em; fill: var(--cor-branco-gelo); stroke: var(--cor-tinta); stroke-width: 1.2; filter: drop-shadow(0 0.3em 0.5em color-mix(in srgb, var(--cor-tinta) 50%, transparent)); transform-origin: 15% 10%; }

.filme__flutuante-ponto { inline-size: 0.6em; block-size: 0.6em; border-radius: 50%; background: var(--cor-gravacao); box-shadow: 0 0 0.6em var(--cor-gravacao); animation: filme-pisca 1.2s ease-in-out infinite; }

/* O ponto de gravação pisca em 1,2 s, que divide os 36 do filme: pular de
   capítulo acerta o relógio dele junto, e ele não sai do compasso. */
@keyframes filme-pisca {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ================================================= O PAINEL DOS PASSOS */
.filme__painel {
    inline-size: 30em;
    padding: 1.6em;
    border-radius: 1.6em;
    border: 0.1em solid var(--borda-vidro-forte);
    background: var(--material-cartao);
    box-shadow: var(--sombra-funda);
    opacity: 0;
}

.filme__painel--ch { left: 114em; top: 15em; }
.filme__painel--mobile { left: 100em; top: 15em; }

.filme__painel-cabeca { display: flex; align-items: center; gap: 0.7em; color: var(--cor-branco-gelo); font-family: var(--fonte-titulo); font-size: 1.4em; font-weight: 600; }
.filme__painel-ponto { inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: var(--cor-menta); box-shadow: 0 0 0.6em var(--cor-menta); }
.filme__painel--mobile .filme__painel-ponto { background: var(--cor-roxo); box-shadow: 0 0 0.6em var(--cor-roxo); }
.filme__painel-produto { margin-left: auto; font-family: var(--fonte-mono); font-size: 0.72em; font-weight: 400; color: var(--cor-cinza-nevoa); }

.filme__painel-lista { display: grid; gap: 0.9em; margin: 1.4em 0 0; padding: 0; list-style: none; }

.filme__passo {
    position: relative;
    display: grid;
    grid-template-columns: 7em minmax(0, 1fr);
    gap: 1em;
    align-items: center;
    padding: 0.8em;
    border-radius: 1em;
    border: 0.1em solid var(--borda-vidro);
    background: color-mix(in srgb, var(--cor-branco-gelo) 3%, transparent);
}

/* O aro da linha da vez: acende quando a miniatura chega, e passa para a
   seguinte no próximo clique. */
.filme__passo::after {
    content: "";
    position: absolute;
    inset: -0.1em;
    border-radius: 1em;
    border: 0.16em solid var(--cor-menta);
    box-shadow: 0 0 1.4em color-mix(in srgb, var(--cor-menta) 30%, transparent);
    opacity: 0;
    pointer-events: none;
}

.filme__painel--mobile .filme__passo::after { border-color: var(--cor-roxo); box-shadow: 0 0 1.4em color-mix(in srgb, var(--cor-roxo) 30%, transparent); }

.filme__passo-miniatura { display: block; inline-size: 7em; block-size: 3.2em; border-radius: 0.5em; background-color: var(--cor-branco-gelo); background-repeat: no-repeat; }
.filme__passo-miniatura--c1, .filme__passo-miniatura--c2, .filme__passo-miniatura--c3 { background-image: image-set(url("../produto/gravacao.avif") type("image/avif"), url("../produto/gravacao.webp") type("image/webp"), url("../produto/gravacao.png") type("image/png")); background-size: 23.33em auto; }
.filme__passo-miniatura--c1 { background-position: -4.39em -8.05em; }
.filme__passo-miniatura--c2 { background-position: -8.45em -8.06em; }
.filme__passo-miniatura--c3 { background-position: -12.69em -8.87em; }
.filme__passo-miniatura--m1, .filme__passo-miniatura--m2, .filme__passo-miniatura--m3 { background-image: url("../produto/mobile/configuracoes.png"); background-size: 100% auto; }
.filme__passo-miniatura--m1 { background-position: 0 -3.07em; }
.filme__passo-miniatura--m2 { background-position: 0 -5.85em; }
.filme__passo-miniatura--m3 { background-position: 0 -10.95em; }

.filme__passo-texto { display: grid; gap: 0.3em; min-inline-size: 0; }
.filme__passo-meta { font-family: var(--fonte-mono); font-size: 0.95em; color: var(--cor-luz); letter-spacing: 0.03em; }
.filme__painel--mobile .filme__passo-meta { color: var(--cor-roxo); }
.filme__passo-acao { font-size: 1.2em; line-height: 1.35; color: var(--cor-branco-gelo); }

.filme__painel-saidas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin-top: 1.4em; padding-top: 1.2em; border-top: 0.1em solid var(--borda-vidro); }
.filme__painel-saidas-rotulo { font-family: var(--fonte-mono); font-size: 0.95em; color: var(--cor-cinza-nevoa); }
.filme__saida { padding: 0.35em 0.9em; border-radius: 99em; border: 0.1em solid var(--borda-vidro-forte); color: var(--cor-corpo); font-size: 1.05em; }

/* ================================================= O CLIQUE QUE VIRA PASSO
   O passo que sai pequeno do ponto clicado e voa até a linha dele no painel.
   Cada um mora em cima da linha dele, e a animação o traz do ponto do
   clique, já com a câmera aplicada. As duas coisas são medidas no navegador,
   em unidades da cena (o pixel dividido pela largura da `.filme__cena` / 160):
   a caixa de `.filme__passo--c1` a `--m3` com o painel parado, e o centro de
   `.filme__clique--N` e `.filme__toque--N` com a câmera aproximada. */
.filme__voo {
    display: grid;
    grid-template-columns: 7em minmax(0, 1fr);
    gap: 1em;
    align-items: center;
    padding: 0.8em;
    border-radius: 1em;
    border: 0.16em solid var(--cor-menta);
    background: var(--cor-navy-cartao);
    box-shadow: 0 1.6em 3.2em -0.8em color-mix(in srgb, var(--cor-tinta) 85%, transparent), 0 0 2.4em color-mix(in srgb, var(--cor-menta) 35%, transparent);
    opacity: 0;
    transform-origin: 50% 50%;
}

.filme__voo--m1, .filme__voo--m2, .filme__voo--m3 { border-color: var(--cor-roxo); box-shadow: 0 1.6em 3.2em -0.8em color-mix(in srgb, var(--cor-tinta) 85%, transparent), 0 0 2.4em color-mix(in srgb, var(--cor-roxo) 35%, transparent); }
.filme__voo--m1 .filme__passo-meta, .filme__voo--m2 .filme__passo-meta, .filme__voo--m3 .filme__passo-meta { color: var(--cor-roxo); }
.filme__voo--c1 { left: 115.72em; top: 20.36em; inline-size: 26.57em; block-size: 6.89em; }
.filme__voo--c2 { left: 115.72em; top: 28.14em; inline-size: 26.57em; block-size: 5.27em; }
.filme__voo--c3 { left: 115.72em; top: 34.31em; inline-size: 26.57em; block-size: 5.27em; }
.filme__voo--m1 { left: 101.72em; top: 20.36em; inline-size: 26.57em; block-size: 6.89em; }
.filme__voo--m2 { left: 101.72em; top: 28.14em; inline-size: 26.57em; block-size: 5.27em; }
.filme__voo--m3 { left: 101.72em; top: 34.31em; inline-size: 26.57em; block-size: 5.27em; }

/* ================================================= O RODAPÉ
   Uma mensagem por vez no pé do filme, como legenda de vídeo: o que cada
   produto faz e o que a pessoa ganha com isso, pedido do dono (19/10/2026).
   As frases saem do que o site já diz: o herói e /o-aplicativo para o
   CaptureHub, e /mobile e /mobile/recursos para o Mobile. Frase nova aqui
   que o site não sustenta é promessa sem página atrás. */
.filme__mensagem {
    left: 50%;
    top: calc(77em / 1.8);
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    padding: 0.6em 1.3em 0.6em 1em;
    border-radius: 99em;
    border: 0.06em solid var(--borda-vidro-forte);
    background: color-mix(in srgb, var(--cor-noite) 84%, transparent);
    box-shadow: 0 1em 2.4em -0.8em color-mix(in srgb, var(--cor-tinta) 80%, transparent);
    color: var(--cor-corpo);
    font-size: 1.8em;
    white-space: nowrap;
    opacity: 0;
}

.filme__mensagem::before { content: ""; flex: none; inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: var(--cor-menta); box-shadow: 0 0 0.6em var(--cor-menta); }
.filme__mensagem--mobile::before { background: var(--cor-roxo); box-shadow: 0 0 0.6em var(--cor-roxo); }
.filme__mensagem--dois::before { background: linear-gradient(90deg, var(--cor-menta), var(--cor-roxo)); box-shadow: none; }
.filme__mensagem strong { color: var(--cor-branco-gelo); font-weight: 600; }

/* ================================================= A VINHETA
   O produto no meio da tela na abertura de cada ato, como vinheta de vídeo,
   por pedido do dono (19/10/2026, «mais chamativa»). O logo, o nome e a frase
   que o site já usa para ele. */
.filme__vinheta {
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: grid;
    justify-items: center;
    gap: 1.4em;
    padding: 4em 6em;
    border-radius: 3em;
    border: 0.1em solid var(--borda-vidro-forte);
    background: color-mix(in srgb, var(--cor-noite) 86%, transparent);
    box-shadow: 0 3em 7em -2em color-mix(in srgb, var(--cor-tinta) 90%, transparent), 0 0 6em -1em color-mix(in srgb, var(--cor-luz) 30%, transparent);
    text-align: center;
    opacity: 0;
}

.filme__vinheta--2 { box-shadow: 0 3em 7em -2em color-mix(in srgb, var(--cor-tinta) 90%, transparent), 0 0 6em -1em color-mix(in srgb, var(--cor-roxo) 38%, transparent); }
.filme__vinheta-logos { display: flex; gap: 1.2em; }
.filme__vinheta-logos img { inline-size: 9em; block-size: 9em; }
.filme__vinheta-nome { font-family: var(--fonte-titulo); font-size: 5.2em; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--cor-branco-gelo); white-space: nowrap; }
.filme__vinheta-frase { font-size: 2.3em; color: var(--cor-corpo); white-space: nowrap; }

/* ================================================= O FILME RESPONDE AO MOUSE
   O animacoes.js escreve --px e --py (de -1 a 1) com o cursor sobre o palco:
   as luzes andam mais, a cena e os painéis andam menos, e é a diferença que
   dá a profundidade. Só translação, pela propriedade `translate`, que não
   briga com o `transform` dos @keyframes: a captura não inclina (§Movimento).
   Os voos andam junto com os painéis, ou pousariam fora da linha. Sem script,
   ou com menos movimento, as variáveis não existem e nada se mexe. */
.filme__luz--ch { translate: calc(var(--px, 0) * 5em) calc(var(--py, 0) * 4em); }
.filme__luz--mobile { translate: calc(var(--px, 0) * -6em) calc(var(--py, 0) * -4em); }
.filme__camera { translate: calc(var(--px, 0) * -0.9em) calc(var(--py, 0) * -0.6em); }
.filme__painel, .filme__voo { translate: calc(var(--px, 0) * 0.7em) calc(var(--py, 0) * 0.5em); }
.filme__luz, .filme__camera, .filme__painel, .filme__voo { transition: translate 0.6s cubic-bezier(.22, 1, .36, 1); }

/* O palco é clicável quando o script existe: o clique pausa e continua, como
   num vídeo, e pausado aparece o play no meio. O botão de pausa da fila
   continua sendo o controle de teclado. */
.cinema--controlavel .filme__palco { cursor: pointer; }

.filme__palco::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    inline-size: 96px;
    block-size: 96px;
    margin: -48px 0 0 -48px;
    border-radius: 50%;
    border: 1px solid var(--borda-vidro-forte);
    background: color-mix(in srgb, var(--cor-noite) 70%, transparent);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.filme__palco::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    margin: -16px 0 0 -10px;
    border-block: 16px solid transparent;
    border-left: 26px solid var(--cor-branco-gelo);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.cinema--pausado .filme__palco::after,
.cinema--pausado .filme__palco::before { opacity: 1; transform: none; }

/* A faixa de luz que atravessa a cena na troca de ato. */
.filme__varredura {
    left: 0;
    top: -10em;
    inline-size: 16em;
    block-size: 110em;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cor-luz) 14%, transparent) 30%, color-mix(in srgb, var(--cor-branco-gelo) 42%, transparent) 50%, color-mix(in srgb, var(--cor-luz) 14%, transparent) 70%, transparent);
    opacity: 0;
}

/* ================================================= ATO 2: O EMULADOR */
.filme__aparelhos {
    left: 22em;
    top: 22em;
    inline-size: 22em;
    padding: 1.6em;
    border-radius: 1.6em;
    border: 0.1em solid var(--borda-vidro-forte);
    background: var(--material-cartao);
    opacity: 0;
}

.filme__aparelhos-titulo { font-family: var(--fonte-titulo); font-size: 1.4em; font-weight: 600; color: var(--cor-branco-gelo); }
.filme__aparelhos-lista { display: grid; gap: 0.6em; margin: 1.2em 0 0; padding: 0; list-style: none; }
.filme__aparelhos-lista li { display: flex; align-items: center; gap: 0.8em; padding: 0.7em 0.9em; border-radius: 0.9em; border: 0.1em solid var(--borda-vidro); color: var(--cor-corpo); font-size: 1.1em; }
.filme__aparelhos-lista li::before { content: ""; flex: none; inline-size: 1em; block-size: 1.6em; border-radius: 0.25em; border: 0.15em solid currentColor; opacity: 0.7; }
.filme__aparelhos-lista .ligado { border-color: color-mix(in srgb, var(--cor-roxo) 55%, transparent); background: color-mix(in srgb, var(--cor-roxo) 10%, transparent); color: var(--cor-branco-gelo); }
.filme__aparelhos-lista .ligado span { display: inline-flex; align-items: center; gap: 0.4em; margin-left: auto; font-family: var(--fonte-mono); font-size: 0.85em; color: var(--cor-branco-gelo); }
.filme__aparelhos-lista .ligado span::before { content: ""; inline-size: 0.6em; block-size: 0.6em; border-radius: 50%; background: var(--cor-gravacao); box-shadow: 0 0 0.6em var(--cor-gravacao); }
.filme__aparelhos-nota { margin-top: 1.2em; font-size: 1.05em; line-height: 1.4; color: var(--cor-cinza-nevoa); }

.filme__celular {
    left: 56em;
    top: 9em;
    inline-size: 24em;
    padding: 0.8em;
    border-radius: 3.6em;
    background: linear-gradient(160deg, color-mix(in srgb, var(--cor-branco-gelo) 22%, var(--cor-tinta)), var(--cor-tinta) 40%);
    box-shadow: 0 4em 9em -3em color-mix(in srgb, var(--cor-roxo-sombra) 80%, transparent), 0 0 0 0.12em var(--borda-vidro-forte);
    transform-origin: 0 0;
    /* O pôster: o celular à direita da janela. */
    transform: translate(48em, 5em) scale(0.86);
}

.filme__celular-tela { position: relative; overflow: hidden; border-radius: 2.9em; aspect-ratio: 540 / 1212; }
.filme__celular-tela img { display: block; inline-size: 100%; block-size: 100%; }

/* O aparelho ligando: a tela escura com a marca do Mobile, que se apaga
   quando o Android aparece, junto com a ficha «Liga em segundos». */
.filme__celular-boot {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(60% 40% at 50% 45%, color-mix(in srgb, var(--cor-roxo-sombra) 70%, var(--cor-tinta)), var(--cor-tinta) 75%);
    opacity: 0;
}

.filme__celular-boot img { inline-size: 6em; block-size: 6em; animation: filme-respira 2.4s ease-in-out infinite; }

@keyframes filme-respira {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.08); opacity: 1; }
}

.filme__linha { position: absolute; left: 3.7%; inline-size: 92.6%; border-radius: 1.2em; background: color-mix(in srgb, var(--cor-roxo) 22%, transparent); outline: 0.2em solid var(--cor-roxo); opacity: 0; }
.filme__linha--1 { top: 25.7%; block-size: 8%; }
.filme__linha--2 { top: 43.5%; block-size: 7.8%; }
.filme__linha--3 { top: 76%; block-size: 7.8%; }

.filme__toque { position: absolute; inline-size: 4.2em; block-size: 4.2em; margin: -2.1em 0 0 -2.1em; border-radius: 50%; background: color-mix(in srgb, var(--cor-roxo) 35%, transparent); border: 0.22em solid var(--cor-roxo); opacity: 0; }
.filme__toque--1 { left: 46%; top: 29.7%; }
.filme__toque--2 { left: 46%; top: 47.4%; }
.filme__toque--3 { left: 46%; top: 79.9%; }

/* A barra lateral do emulador: os controles do aparelho, de enfeite. */
.filme__barra-emulador {
    left: 81.6em;
    top: 15em;
    display: grid;
    gap: 0.8em;
    padding: 0.9em 0.7em;
    border-radius: 99em;
    border: 0.1em solid var(--borda-vidro-forte);
    background: var(--material-cartao);
    opacity: 0;
}

.filme__barra-emulador i { display: block; inline-size: 2.2em; block-size: 2.2em; border-radius: 50%; background: color-mix(in srgb, var(--cor-branco-gelo) 8%, transparent); position: relative; }
.filme__barra-emulador i::before { content: ""; position: absolute; inset: 0.65em; border-radius: 0.2em; border: 0.15em solid var(--cor-corpo); }
.filme__barra-emulador i:nth-child(2)::before { border-radius: 50%; }
.filme__barra-emulador i:nth-child(4)::before { inset: 0.55em 0.75em; }

/* ================================================= AS FICHAS DO ATO 2
   O que o dono pediu para destacar (16/10/2026): o emulador é leve e fácil
   de instalar. Cada ficha é um número medido no repositório do Mobile: a
   instalação em 7,8 s, por usuário e sem administrador (bloco 6), e o boot
   rápido de 2,8 a 3,4 s (plano do projeto, medições). A leveza é não abrir o
   Android Studio, e não um Android mais rápido (ADR 0001 de lá). */
.filme__ficha {
    display: inline-flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.8em 1.4em 0.8em 0.9em;
    border-radius: 99em;
    border: 0.1em solid color-mix(in srgb, var(--cor-roxo) 45%, transparent);
    background: color-mix(in srgb, var(--cor-noite) 82%, var(--cor-roxo-sombra));
    box-shadow: 0 1.6em 3em -1em color-mix(in srgb, var(--cor-tinta) 55%, transparent);
    color: var(--cor-branco-gelo);
    font-size: 1.25em;
    white-space: nowrap;
    opacity: 0;
}

.filme__ficha-icone { display: grid; place-items: center; inline-size: 2.2em; block-size: 2.2em; border-radius: 50%; background: color-mix(in srgb, var(--cor-roxo) 22%, transparent); color: var(--cor-roxo); }
.filme__ficha-icone svg { inline-size: 1.2em; block-size: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; }
.filme__ficha strong { font-weight: 600; }
.filme__ficha--instala { left: calc(22em / 1.25); top: calc(50em / 1.25); }
.filme__ficha--liga { left: calc(48em / 1.25); top: calc(58em / 1.25); }

/* ================================================= ATO 3: A EVIDÊNCIA */
.filme__relatorio {
    left: calc(45em / 1.18);
    top: calc(13em / 1.18);
    inline-size: calc(70em / 1.18);
    font-size: 1.18em;
    padding: 2.6em;
    border-radius: 1.8em;
    background: var(--cor-branco-gelo);
    color: var(--cor-tinta);
    box-shadow: 0 5em 10em -3em color-mix(in srgb, var(--cor-tinta) 65%, transparent), 0 0 0 0.6em color-mix(in srgb, var(--cor-branco-gelo) 6%, transparent);
    opacity: 0;
}

.filme__relatorio-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 2em; padding-bottom: 1.6em; border-bottom: 0.1em solid color-mix(in srgb, var(--cor-tinta) 12%, transparent); }
.filme__relatorio-tipo { font-family: var(--fonte-mono); font-size: 1.05em; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--cor-tinta) 55%, transparent); }
.filme__relatorio-titulo { margin-top: 0.3em; font-family: var(--fonte-titulo); font-size: 2.2em; font-weight: 700; }
.filme__relatorio-selo { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 1em; border-radius: 99em; background: color-mix(in srgb, var(--cor-menta) 22%, var(--cor-branco-gelo)); color: var(--cor-menta-escura); font-size: 1.1em; font-weight: 600; white-space: nowrap; }

.filme__relatorio-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; margin-top: 1.8em; }
.filme__relatorio-origem { display: flex; align-items: center; gap: 0.6em; font-weight: 600; font-size: 1.25em; }
.filme__relatorio-origem img { inline-size: 1.6em; block-size: 1.6em; }
.filme__relatorio-plataforma { display: block; margin-top: 0.2em; font-family: var(--fonte-mono); font-size: 0.95em; color: color-mix(in srgb, var(--cor-tinta) 55%, transparent); }
.filme__relatorio-passos { display: grid; gap: 0.7em; margin: 1.2em 0 0; padding: 0; list-style: none; counter-reset: passo; }
.filme__relatorio-passos li { display: grid; grid-template-columns: 2em minmax(0, 1fr); gap: 0.8em; align-items: start; font-size: 1.15em; line-height: 1.35; counter-increment: passo; }
.filme__relatorio-passos li::before { content: counter(passo); display: grid; place-items: center; inline-size: 1.7em; block-size: 1.7em; border-radius: 50%; background: var(--cor-tinta); color: var(--cor-branco-gelo); font-size: 0.85em; font-weight: 700; }
.filme__relatorio-bloco--mobile .filme__relatorio-passos li::before { background: var(--cor-roxo-profundo); }

.filme__relatorio-saidas { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 2em; padding-top: 1.6em; border-top: 0.1em solid color-mix(in srgb, var(--cor-tinta) 12%, transparent); }
.filme__relatorio-saidas span { padding: 0.45em 1em; border-radius: 99em; background: color-mix(in srgb, var(--cor-tinta) 7%, transparent); font-size: 1.1em; font-weight: 500; }

/* ================================================= OS CAPÍTULOS */
/* Sem script, a lista fica sozinha embaixo do palco; com ele, ela entra numa
   fila com o botão de pausa. */
.cinema__filme > .filme__capitulos,
.filme__fila {
    position: relative;
    z-index: 2;
    max-inline-size: 60rem;
    margin: var(--espaco-3) auto 0;
    padding-inline: var(--espaco-3);
    font-size: 10px;
}

.filme__fila { display: flex; align-items: center; gap: 2.4em; }

.filme__capitulos {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 2.4em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filme__capitulo { flex: 1; min-inline-size: 0; }
.filme__capitulo-trilho { display: block; block-size: 0.35em; border-radius: 99em; overflow: hidden; background: color-mix(in srgb, var(--cor-branco-gelo) 14%, transparent); }
.filme__capitulo-progresso { display: block; block-size: 100%; transform-origin: 0 50%; transform: scaleX(1); background: linear-gradient(90deg, var(--cor-luz), var(--cor-menta)); }
.filme__capitulo--2 .filme__capitulo-progresso { background: linear-gradient(90deg, var(--cor-roxo-profundo), var(--cor-roxo)); }
.filme__capitulo--3 .filme__capitulo-progresso { background: linear-gradient(90deg, var(--cor-luz), var(--cor-menta) 55%, var(--cor-roxo)); }
.filme__capitulo-nome { display: block; margin-top: 0.9em; font-size: max(12px, 1.35em); color: var(--cor-branco-gelo); }
.filme__capitulo-numero { margin-right: 0.6em; font-family: var(--fonte-mono); color: var(--cor-cinza-nevoa); }

/* Os botões que o script cria: o capítulo inteiro vira o alvo do clique. */
.filme__capitulo-botao { display: block; inline-size: 100%; padding: 0.8em 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.filme__capitulo-botao:focus-visible { outline: 0.2em solid var(--cor-luz-gelo); outline-offset: 0.4em; border-radius: 0.4em; }
.filme__capitulo-botao:hover .filme__capitulo-nome { text-decoration: underline; text-underline-offset: 0.3em; }

.cinema__pausa {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 4.4em;
    block-size: 4.4em;
    border-radius: 50%;
    border: 0.1em solid var(--borda-vidro-forte);
    background: color-mix(in srgb, var(--cor-noite) 70%, transparent);
    color: var(--cor-branco-gelo);
    font-size: inherit;
    cursor: pointer;
}

.cinema__pausa::before { content: ""; inline-size: 1.2em; block-size: 1.4em; border-inline: 0.42em solid currentColor; }
.cinema--pausado .cinema__pausa::before { inline-size: 0; block-size: 0; border-inline: 0; border-block: 0.75em solid transparent; border-left: 1.2em solid currentColor; margin-left: 0.3em; }
.cinema__pausa:focus-visible { outline: 0.2em solid var(--cor-luz-gelo); outline-offset: 0.3em; }

/* ================================================= ESCOLHA O SEU */
.os-dois__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
    gap: var(--espaco-3);
    align-content: start;
    margin-top: var(--espaco-6);
}

.os-dois__cartao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-2); padding: var(--espaco-4); }
.os-dois__cabeca { display: flex; align-items: center; gap: var(--espaco-2); }
.os-dois__cabeca img { inline-size: 56px; block-size: 56px; }
.os-dois__nome { font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 700; color: var(--cor-branco-gelo); }
.os-dois__cartao .texto-secundario { color: var(--cor-corpo); font-size: 1.0625rem; line-height: 1.6; }
.os-dois__cartao .familia__lista { align-self: stretch; }
.os-dois__cartao .familia__acao { margin-top: auto; padding-top: var(--espaco-1); }

/* ================================================= TELA MÉDIA: O RECORTE
   Abaixo de 70 rem a tela inteira deixaria letra de 5 px: o palco mostra só a
   faixa em que a cena acontece (x de 9 a 145, y de 1 a 84, com o rodapé),
   na largura toda. */
@media (max-width: 70rem) {
    .filme__palco { block-size: calc(100vw * 83 / 136); }
    .filme__cena { --u: calc(100cqw / 136); left: -9em; top: -1em; translate: none; }
}

/* ================================================= TELEFONE
   No telefone o recorte é a parte do meio (x de 20 a 112, y de 1 a 87): a
   janela, o celular e o relatório. Os painéis saem, e os voos com eles, e a
   lista de aparelhos também: no recorte a letra dela passaria dos 6 px
   mínimos do navegador e quebraria por baixo das fichas. */
@media (max-width: 40rem) {
    .cinema__selo-longo { display: none; }
    .filme__palco { block-size: calc(100vw * 86 / 92); }
    .filme__cena { --u: calc(100cqw / 92); left: -20em; top: -1em; }
    .filme__painel, .filme__voo, .filme__aparelhos { display: none; }
    .cinema .filme__ficha--instala { left: calc(38em / 1.25); top: calc(45em / 1.25); }
    .cinema .filme__ficha--liga { left: calc(44em / 1.25); top: calc(57em / 1.25); }
    .cinema.heroi { padding-bottom: var(--espaco-3); }
    .filme__legenda { left: calc(66em / 3.4); top: calc(5em / 3.4); font-size: 3.4em; white-space: normal; inline-size: calc(80em / 3.4); text-align: center; line-height: 1.15; }
    .cinema__filme > .filme__capitulos,
    .filme__fila { font-size: 8px; }
    .filme__capitulos { gap: 12px; }
    .filme__capitulo-numero { display: none; }
    .filme__vinheta { left: 66em; top: 40em; padding: 3.4em 4em; }
    .filme__vinheta-nome { font-size: 5.6em; }
    .filme__vinheta-frase { font-size: 2.8em; white-space: normal; max-inline-size: calc(70em / 2.8); }
    /* A mensagem quebra em duas linhas e cresce: na letra da cena ela teria 7 px. */
    .filme__mensagem { left: calc(66em / 3); top: calc(74em / 3); font-size: 3em; white-space: normal; inline-size: max-content; max-inline-size: calc(84em / 3); text-align: center; line-height: 1.35; border-radius: 1em; }
}

/* ================================================= O ROTEIRO
   36 s em três atos: o Windows (0 a 14 s), o Android (14 a 27 s) e a
   evidência (27 a 36 s). Era 24 até 19/10/2026, e o dono achou rápido.
   Os cliques em 3, 6 e 9 s, os toques em 17,6, 20,6 e 23,6 s; cada passo
   chega ao painel 1,1 s depois. A câmera se aproxima da janela de 0,8 a
   2,2 s e do celular de 16,6 a 17,3 s, e se afasta antes de cada troca. A
   vinheta de cada produto ocupa o meio da tela na abertura e nas trocas
   (0 a 1,6 s, 13,7 a 15,4 s e 26,7 a 28,3 s). As
   oito mensagens do rodapé ficam pouco mais de 3 s cada. Todas as
   animações têm a mesma duração e nenhum atraso: é o que deixa o script
   pular de capítulo acertando o relógio de todas de uma vez. Cada
   @keyframes abaixo é um desses instantes dividido por 36, em porcentagem. */
@keyframes filme-camera {
    0.000% { transform: translate(0em, 0em) scale(1); }
    2.222% { transform: translate(0em, 0em) scale(1); }
    6.111% { transform: translate(-7em, -6em) scale(1.12); }
    30.556% { transform: translate(-7em, -6em) scale(1.12); }
    34.167% { transform: translate(0em, 0em) scale(1); }
    46.111% { transform: translate(0em, 0em) scale(1); }
    48.056% { transform: translate(-4em, 0em) scale(1.12); }
    68.889% { transform: translate(-4em, 0em) scale(1.12); }
    71.944% { transform: translate(0em, 0em) scale(1); }
    76.667% { transform: translate(0em, 0em) scale(1); }
    96.111% { transform: translate(-4em, -1.95em) scale(1.05); }
    100.000% { transform: translate(0em, 0em) scale(1); }
}
.filme__camera { animation: filme-camera var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-janela {
    0.000% { opacity: 1; transform: none; }
    36.944% { opacity: 1; transform: none; }
    39.444% { opacity: 0; transform: translate(-10em, 0) scale(0.96); }
    75.000% { opacity: 0; transform: translate(-10em, 0) scale(0.96); }
    77.778% { opacity: 0.42; transform: translate(-9em, 19em) scale(0.42); }
    97.222% { opacity: 0.42; transform: translate(-9em, 19em) scale(0.42); }
    100.000% { opacity: 1; transform: none; }
}
.filme__janela { animation: filme-janela var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-cursor {
    0.000% { transform: translate(86%, 30%); }
    4.444% { transform: translate(86%, 30%); }
    7.500% { transform: translate(33.8%, 68.6%); }
    12.778% { transform: translate(33.8%, 68.6%); }
    15.833% { transform: translate(51.2%, 68.7%); }
    21.111% { transform: translate(51.2%, 68.7%); }
    24.167% { transform: translate(69.4%, 74.5%); }
    27.778% { transform: translate(69.4%, 74.5%); }
    31.111% { transform: translate(84%, 40%); }
    97.222% { transform: translate(84%, 40%); }
    100.000% { transform: translate(86%, 30%); }
}
.filme__cursor { animation: filme-cursor var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-cursoraperta {
    0.000% { transform: none; }
    8.167% { transform: none; }
    8.333% { transform: scale(0.78); }
    8.778% { transform: none; }
    16.500% { transform: none; }
    16.667% { transform: scale(0.78); }
    17.111% { transform: none; }
    24.833% { transform: none; }
    25.000% { transform: scale(0.78); }
    25.444% { transform: none; }
    100.000% { transform: none; }
}
.filme__cursor svg { animation: filme-cursoraperta var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-clique1 {
    0.000% { opacity: 0; transform: scale(0.2); }
    8.194% { opacity: 0; transform: scale(0.2); }
    8.333% { opacity: 0.95; transform: scale(0.45); }
    10.556% { opacity: 0; transform: scale(2.6); }
    100.000% { opacity: 0; transform: scale(2.6); }
}
.filme__clique--1 { animation: filme-clique1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-alvo1 {
    0.000% { opacity: 0; }
    8.194% { opacity: 0; }
    8.611% { opacity: 1; }
    13.611% { opacity: 1; }
    15.000% { opacity: 0; }
    100.000% { opacity: 0; }
}
.filme__alvo--1 { animation: filme-alvo1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-clique2 {
    0.000% { opacity: 0; transform: scale(0.2); }
    16.528% { opacity: 0; transform: scale(0.2); }
    16.667% { opacity: 0.95; transform: scale(0.45); }
    18.889% { opacity: 0; transform: scale(2.6); }
    100.000% { opacity: 0; transform: scale(2.6); }
}
.filme__clique--2 { animation: filme-clique2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-alvo2 {
    0.000% { opacity: 0; }
    16.528% { opacity: 0; }
    16.944% { opacity: 1; }
    21.944% { opacity: 1; }
    23.333% { opacity: 0; }
    100.000% { opacity: 0; }
}
.filme__alvo--2 { animation: filme-alvo2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-clique3 {
    0.000% { opacity: 0; transform: scale(0.2); }
    24.861% { opacity: 0; transform: scale(0.2); }
    25.000% { opacity: 0.95; transform: scale(0.45); }
    27.222% { opacity: 0; transform: scale(2.6); }
    100.000% { opacity: 0; transform: scale(2.6); }
}
.filme__clique--3 { animation: filme-clique3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-alvo3 {
    0.000% { opacity: 0; }
    24.861% { opacity: 0; }
    25.278% { opacity: 1; }
    30.278% { opacity: 1; }
    31.667% { opacity: 0; }
    100.000% { opacity: 0; }
}
.filme__alvo--3 { animation: filme-alvo3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-vooc1 {
    0.000% { opacity: 0; transform: translate(-83.97em, 30.38em) scale(0.3); }
    8.556% { opacity: 0; transform: translate(-83.97em, 30.38em) scale(0.3); }
    9.333% { opacity: 1; transform: translate(-58.78em, 16.27em) scale(0.66); }
    11.389% { opacity: 1; transform: none; }
    12.083% { opacity: 0; transform: none; }
    100.000% { opacity: 0; transform: translate(-83.97em, 30.38em) scale(0.3); }
}
.filme__voo--c1 { animation: filme-vooc1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-passoc1 {
    0.000% { opacity: 0.28; transform: translateY(0.5em); }
    11.250% { opacity: 0.28; transform: translateY(0.5em); }
    12.083% { opacity: 1; transform: none; }
    98.333% { opacity: 1; transform: none; }
    100.000% { opacity: 0.28; transform: translateY(0.5em); }
    100.000% { opacity: 0.28; transform: translateY(0.5em); }
}
.filme__passo--c1 { animation: filme-passoc1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-aroc1 {
    0.000% { opacity: 0; }
    11.250% { opacity: 0; }
    11.944% { opacity: 1; }
    19.722% { opacity: 1; }
    20.556% { opacity: 0; }
    100.000% { opacity: 0; }
}
.filme__passo--c1::after { animation: filme-aroc1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-vooc2 {
    0.000% { opacity: 0; transform: translate(-66.47em, 23.48em) scale(0.3); }
    16.889% { opacity: 0; transform: translate(-66.47em, 23.48em) scale(0.3); }
    17.667% { opacity: 1; transform: translate(-46.53em, 11.43em) scale(0.66); }
    19.722% { opacity: 1; transform: none; }
    20.417% { opacity: 0; transform: none; }
    100.000% { opacity: 0; transform: translate(-66.47em, 23.48em) scale(0.3); }
}
.filme__voo--c2 { animation: filme-vooc2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-passoc2 {
    0.000% { opacity: 0.28; transform: translateY(0.5em); }
    19.583% { opacity: 0.28; transform: translateY(0.5em); }
    20.417% { opacity: 1; transform: none; }
    98.333% { opacity: 1; transform: none; }
    100.000% { opacity: 0.28; transform: translateY(0.5em); }
    100.000% { opacity: 0.28; transform: translateY(0.5em); }
}
.filme__passo--c2 { animation: filme-passoc2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-aroc2 {
    0.000% { opacity: 0; }
    19.583% { opacity: 0; }
    20.278% { opacity: 1; }
    28.056% { opacity: 1; }
    28.889% { opacity: 0; }
    100.000% { opacity: 0; }
}
.filme__passo--c2::after { animation: filme-aroc2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-vooc3 {
    0.000% { opacity: 0; transform: translate(-48.19em, 20.81em) scale(0.3); }
    25.222% { opacity: 0; transform: translate(-48.19em, 20.81em) scale(0.3); }
    26.000% { opacity: 1; transform: translate(-33.73em, 9.57em) scale(0.66); }
    28.056% { opacity: 1; transform: none; }
    28.750% { opacity: 0; transform: none; }
    100.000% { opacity: 0; transform: translate(-48.19em, 20.81em) scale(0.3); }
}
.filme__voo--c3 { animation: filme-vooc3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-passoc3 {
    0.000% { opacity: 0.28; transform: translateY(0.5em); }
    27.917% { opacity: 0.28; transform: translateY(0.5em); }
    28.750% { opacity: 1; transform: none; }
    98.333% { opacity: 1; transform: none; }
    100.000% { opacity: 0.28; transform: translateY(0.5em); }
    100.000% { opacity: 0.28; transform: translateY(0.5em); }
}
.filme__passo--c3 { animation: filme-passoc3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-aroc3 {
    0.000% { opacity: 0; }
    27.917% { opacity: 0; }
    28.611% { opacity: 1; }
    35.556% { opacity: 1; }
    36.389% { opacity: 0; }
    100.000% { opacity: 0; }
}
.filme__passo--c3::after { animation: filme-aroc3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-painelch {
    0.000% { opacity: 1; transform: none; }
    36.667% { opacity: 1; transform: none; }
    38.889% { opacity: 0; transform: translateX(3em); }
    97.778% { opacity: 0; transform: translateX(3em); }
    100.000% { opacity: 1; transform: none; }
}
.filme__painel--ch { animation: filme-painelch var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-legenda1 {
    0.000% { opacity: 1; transform: none; }
    36.111% { opacity: 1; transform: none; }
    38.056% { opacity: 0; transform: translateY(-1em); }
    98.056% { opacity: 0; transform: translateY(1em); }
    100.000% { opacity: 1; transform: none; }
}
.filme__legenda--1 { animation: filme-legenda1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-varredura {
    0.000% { opacity: 0; transform: translateX(-24em) skewX(-14deg); }
    37.778% { opacity: 0; transform: translateX(-24em) skewX(-14deg); }
    38.611% { opacity: 1; transform: translateX(20em) skewX(-14deg); }
    40.556% { opacity: 0; transform: translateX(176em) skewX(-14deg); }
    73.889% { opacity: 0; transform: translateX(-24em) skewX(-14deg); }
    74.722% { opacity: 1; transform: translateX(20em) skewX(-14deg); }
    76.667% { opacity: 0; transform: translateX(176em) skewX(-14deg); }
    100.000% { opacity: 0; transform: translateX(176em) skewX(-14deg); }
}
.filme__varredura { animation: filme-varredura var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-luzch {
    0.000% { opacity: 1; transform: none; }
    36.111% { opacity: 1; transform: translate(5em, 2em); }
    39.444% { opacity: 0.22; transform: translate(-6em, 0); }
    73.889% { opacity: 0.22; transform: translate(-6em, 0); }
    77.222% { opacity: 0.75; transform: translate(10em, 2em); }
    97.222% { opacity: 0.75; transform: translate(12em, 3em); }
    100.000% { opacity: 1; transform: none; }
}
.filme__luz--ch { animation: filme-luzch var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-luzmobile {
    0.000% { opacity: 0.18; transform: translate(8em, 0); }
    36.667% { opacity: 0.18; transform: translate(8em, 0); }
    39.722% { opacity: 1; transform: none; }
    73.333% { opacity: 1; transform: translate(-4em, 2em); }
    77.222% { opacity: 0.75; transform: translate(-10em, 2em); }
    97.222% { opacity: 0.75; transform: translate(-12em, 3em); }
    100.000% { opacity: 0.18; transform: translate(8em, 0); }
}
.filme__luz--mobile { animation: filme-luzmobile var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-celular {
    0.000% { opacity: 0; transform: translate(-31.33em, 23.23em) scale(0.08); }
    41.667% { opacity: 0; transform: translate(-31.33em, 23.23em) scale(0.08); }
    44.167% { opacity: 1; transform: none; }
    74.444% { opacity: 1; transform: none; }
    77.222% { opacity: 0.42; transform: translate(62em, 15em) scale(0.5); }
    97.222% { opacity: 0.42; transform: translate(62em, 15em) scale(0.5); }
    98.889% { opacity: 0; transform: translate(62em, 15em) scale(0.5); }
    100.000% { opacity: 0; transform: translate(-31.33em, 23.23em) scale(0.08); }
}
.filme__celular { animation: filme-celular var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-boot {
    0.000% { opacity: 1; }
    45.278% { opacity: 1; }
    46.667% { opacity: 0; }
    99.722% { opacity: 0; }
    100.000% { opacity: 1; }
}
.filme__celular-boot { animation: filme-boot var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-aparelhos {
    0.000% { opacity: 0; transform: translateX(-3em); }
    41.111% { opacity: 0; transform: translateX(-3em); }
    42.778% { opacity: 1; transform: none; }
    73.333% { opacity: 1; transform: none; }
    75.278% { opacity: 0; transform: translateX(-3em); }
    100.000% { opacity: 0; transform: translateX(-3em); }
}
.filme__aparelhos { animation: filme-aparelhos var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-barraemulador {
    0.000% { opacity: 0; transform: translateX(-1em); }
    46.111% { opacity: 0; transform: translateX(-1em); }
    47.500% { opacity: 1; transform: none; }
    73.333% { opacity: 1; transform: none; }
    75.000% { opacity: 0; transform: none; }
    100.000% { opacity: 0; transform: none; }
}
.filme__barra-emulador { animation: filme-barraemulador var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-painelmobile {
    0.000% { opacity: 0; transform: translateX(3em); }
    43.333% { opacity: 0; transform: translateX(3em); }
    45.278% { opacity: 1; transform: none; }
    73.333% { opacity: 1; transform: none; }
    75.278% { opacity: 0; transform: translateX(3em); }
    100.000% { opacity: 0; transform: translateX(3em); }
}
.filme__painel--mobile { animation: filme-painelmobile var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-legenda2 {
    0.000% { opacity: 0; transform: translateY(1em); }
    41.667% { opacity: 0; transform: translateY(1em); }
    43.333% { opacity: 1; transform: none; }
    72.778% { opacity: 1; transform: none; }
    74.722% { opacity: 0; transform: translateY(-1em); }
    100.000% { opacity: 0; transform: translateY(-1em); }
}
.filme__legenda--2 { animation: filme-legenda2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-fichainstala {
    0.000% { opacity: 0; transform: translateY(1em); }
    42.500% { opacity: 0; transform: translateY(1em); }
    44.167% { opacity: 1; transform: none; }
    72.778% { opacity: 1; transform: none; }
    74.722% { opacity: 0; transform: none; }
    100.000% { opacity: 0; transform: none; }
}
.filme__ficha--instala { animation: filme-fichainstala var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-fichaliga {
    0.000% { opacity: 0; transform: translateY(1em) scale(0.9); }
    46.667% { opacity: 0; transform: translateY(1em) scale(0.9); }
    47.778% { opacity: 1; transform: none; }
    72.778% { opacity: 1; transform: none; }
    74.722% { opacity: 0; transform: none; }
    100.000% { opacity: 0; transform: none; }
}
.filme__ficha--liga { animation: filme-fichaliga var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-toque1 {
    0.000% { opacity: 0; transform: scale(0.3); }
    48.750% { opacity: 0; transform: scale(0.3); }
    48.889% { opacity: 1; transform: scale(0.6); }
    51.389% { opacity: 0; transform: scale(2.2); }
    100.000% { opacity: 0; transform: scale(2.2); }
}
.filme__toque--1 { animation: filme-toque1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-linha1 {
    0.000% { opacity: 0; }
    48.750% { opacity: 0; }
    49.167% { opacity: 1; }
    53.889% { opacity: 1; }
    55.278% { opacity: 0; }
    100.000% { opacity: 0; }
}
.filme__linha--1 { animation: filme-linha1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-toque2 {
    0.000% { opacity: 0; transform: scale(0.3); }
    57.083% { opacity: 0; transform: scale(0.3); }
    57.222% { opacity: 1; transform: scale(0.6); }
    59.722% { opacity: 0; transform: scale(2.2); }
    100.000% { opacity: 0; transform: scale(2.2); }
}
.filme__toque--2 { animation: filme-toque2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-linha2 {
    0.000% { opacity: 0; }
    57.083% { opacity: 0; }
    57.500% { opacity: 1; }
    62.222% { opacity: 1; }
    63.611% { opacity: 0; }
    100.000% { opacity: 0; }
}
.filme__linha--2 { animation: filme-linha2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-toque3 {
    0.000% { opacity: 0; transform: scale(0.3); }
    65.417% { opacity: 0; transform: scale(0.3); }
    65.556% { opacity: 1; transform: scale(0.6); }
    68.056% { opacity: 0; transform: scale(2.2); }
    100.000% { opacity: 0; transform: scale(2.2); }
}
.filme__toque--3 { animation: filme-toque3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-linha3 {
    0.000% { opacity: 0; }
    65.417% { opacity: 0; }
    65.833% { opacity: 1; }
    70.556% { opacity: 1; }
    71.944% { opacity: 0; }
    100.000% { opacity: 0; }
}
.filme__linha--3 { animation: filme-linha3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-voom1 {
    0.000% { opacity: 0; transform: translate(-43.84em, 3.89em) scale(0.3); }
    49.111% { opacity: 0; transform: translate(-43.84em, 3.89em) scale(0.3); }
    49.889% { opacity: 1; transform: translate(-30.69em, -2.27em) scale(0.66); }
    51.944% { opacity: 1; transform: none; }
    52.639% { opacity: 0; transform: none; }
    100.000% { opacity: 0; transform: translate(-43.84em, 3.89em) scale(0.3); }
}
.filme__voo--m1 { animation: filme-voom1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-passom1 {
    0.000% { opacity: 0.28; transform: translateY(0.5em); }
    51.806% { opacity: 0.28; transform: translateY(0.5em); }
    52.639% { opacity: 1; transform: none; }
    73.889% { opacity: 1; transform: none; }
    75.278% { opacity: 0.28; transform: translateY(0.5em); }
    100.000% { opacity: 0.28; transform: translateY(0.5em); }
}
.filme__passo--m1 { animation: filme-passom1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-arom1 {
    0.000% { opacity: 0; }
    51.806% { opacity: 0; }
    52.500% { opacity: 1; }
    60.278% { opacity: 1; }
    61.111% { opacity: 0; }
    100.000% { opacity: 0; }
}
.filme__passo--m1::after { animation: filme-arom1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-voom2 {
    0.000% { opacity: 0; transform: translate(-43.84em, 6.9em) scale(0.3); }
    57.444% { opacity: 0; transform: translate(-43.84em, 6.9em) scale(0.3); }
    58.222% { opacity: 1; transform: translate(-30.69em, -0.17em) scale(0.66); }
    60.278% { opacity: 1; transform: none; }
    60.972% { opacity: 0; transform: none; }
    100.000% { opacity: 0; transform: translate(-43.84em, 6.9em) scale(0.3); }
}
.filme__voo--m2 { animation: filme-voom2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-passom2 {
    0.000% { opacity: 0.28; transform: translateY(0.5em); }
    60.139% { opacity: 0.28; transform: translateY(0.5em); }
    60.972% { opacity: 1; transform: none; }
    73.889% { opacity: 1; transform: none; }
    75.278% { opacity: 0.28; transform: translateY(0.5em); }
    100.000% { opacity: 0.28; transform: translateY(0.5em); }
}
.filme__passo--m2 { animation: filme-passom2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-arom2 {
    0.000% { opacity: 0; }
    60.139% { opacity: 0; }
    60.833% { opacity: 1; }
    68.611% { opacity: 1; }
    69.444% { opacity: 0; }
    100.000% { opacity: 0; }
}
.filme__passo--m2::after { animation: filme-arom2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-voom3 {
    0.000% { opacity: 0; transform: translate(-43.84em, 19.02em) scale(0.3); }
    65.778% { opacity: 0; transform: translate(-43.84em, 19.02em) scale(0.3); }
    66.556% { opacity: 1; transform: translate(-30.69em, 8.32em) scale(0.66); }
    68.611% { opacity: 1; transform: none; }
    69.306% { opacity: 0; transform: none; }
    100.000% { opacity: 0; transform: translate(-43.84em, 19.02em) scale(0.3); }
}
.filme__voo--m3 { animation: filme-voom3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-passom3 {
    0.000% { opacity: 0.28; transform: translateY(0.5em); }
    68.472% { opacity: 0.28; transform: translateY(0.5em); }
    69.306% { opacity: 1; transform: none; }
    73.889% { opacity: 1; transform: none; }
    75.278% { opacity: 0.28; transform: translateY(0.5em); }
    100.000% { opacity: 0.28; transform: translateY(0.5em); }
}
.filme__passo--m3 { animation: filme-passom3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-arom3 {
    0.000% { opacity: 0; }
    68.472% { opacity: 0; }
    69.167% { opacity: 1; }
    72.222% { opacity: 1; }
    73.056% { opacity: 0; }
    100.000% { opacity: 0; }
}
.filme__passo--m3::after { animation: filme-arom3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-relatorio {
    0.000% { opacity: 0; transform: translateY(3em) scale(0.96); }
    77.778% { opacity: 0; transform: translateY(3em) scale(0.96); }
    80.000% { opacity: 1; transform: none; }
    97.222% { opacity: 1; transform: none; }
    98.889% { opacity: 0; transform: translateY(-2em); }
    100.000% { opacity: 0; transform: translateY(-2em); }
}
.filme__relatorio { animation: filme-relatorio var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-rel1 {
    0.000% { opacity: 0; transform: translateY(0.6em); }
    80.556% { opacity: 0; transform: translateY(0.6em); }
    81.944% { opacity: 1; transform: none; }
    98.889% { opacity: 1; transform: none; }
    100.000% { opacity: 0; transform: translateY(0.6em); }
}
.filme__relatorio .r1 { animation: filme-rel1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-rel2 {
    0.000% { opacity: 0; transform: translateX(-4em); }
    81.667% { opacity: 0; transform: translateX(-4em); }
    83.056% { opacity: 1; transform: none; }
    98.889% { opacity: 1; transform: none; }
    100.000% { opacity: 0; transform: translateX(-4em); }
}
.filme__relatorio .r2 { animation: filme-rel2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-rel3 {
    0.000% { opacity: 0; transform: translateX(4em); }
    82.778% { opacity: 0; transform: translateX(4em); }
    84.167% { opacity: 1; transform: none; }
    98.889% { opacity: 1; transform: none; }
    100.000% { opacity: 0; transform: translateX(4em); }
}
.filme__relatorio .r3 { animation: filme-rel3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-rel4 {
    0.000% { opacity: 0; transform: translateY(0.6em); }
    84.722% { opacity: 0; transform: translateY(0.6em); }
    86.111% { opacity: 1; transform: none; }
    98.889% { opacity: 1; transform: none; }
    100.000% { opacity: 0; transform: translateY(0.6em); }
}
.filme__relatorio .r4 { animation: filme-rel4 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-carimbo {
    0.000% { opacity: 0; transform: scale(1.9) rotate(-8deg); }
    86.667% { opacity: 0; transform: scale(1.9) rotate(-8deg); }
    87.361% { opacity: 1; transform: scale(0.94) rotate(0deg); }
    87.917% { opacity: 1; transform: none; }
    98.889% { opacity: 1; transform: none; }
    100.000% { opacity: 0; transform: scale(1.9) rotate(-8deg); }
}
.filme__relatorio-selo { animation: filme-carimbo var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-legenda3 {
    0.000% { opacity: 0; transform: translateY(1em); }
    78.056% { opacity: 0; transform: translateY(1em); }
    79.722% { opacity: 1; transform: none; }
    96.667% { opacity: 1; transform: none; }
    98.611% { opacity: 0; transform: translateY(-1em); }
    100.000% { opacity: 0; transform: translateY(-1em); }
}
.filme__legenda--3 { animation: filme-legenda3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-mensagem1 {
    0.000% { opacity: 0; transform: translateY(1.2em); }
    4.444% { opacity: 0; transform: translateY(1.2em); }
    5.833% { opacity: 1; transform: none; }
    13.333% { opacity: 1; transform: none; }
    14.444% { opacity: 0; transform: translateY(-0.5em); }
    100.000% { opacity: 0; transform: translateY(-0.5em); }
}
.filme__mensagem--1 { animation: filme-mensagem1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-mensagem2 {
    0.000% { opacity: 0; transform: translateY(1.2em); }
    14.167% { opacity: 0; transform: translateY(1.2em); }
    15.556% { opacity: 1; transform: none; }
    23.889% { opacity: 1; transform: none; }
    25.000% { opacity: 0; transform: translateY(-0.5em); }
    100.000% { opacity: 0; transform: translateY(-0.5em); }
}
.filme__mensagem--2 { animation: filme-mensagem2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-mensagem3 {
    0.000% { opacity: 0; transform: translateY(1.2em); }
    25.556% { opacity: 0; transform: translateY(1.2em); }
    26.944% { opacity: 1; transform: none; }
    36.111% { opacity: 1; transform: none; }
    37.222% { opacity: 0; transform: translateY(-0.5em); }
    100.000% { opacity: 0; transform: translateY(-0.5em); }
}
.filme__mensagem--3 { animation: filme-mensagem3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-mensagem4 {
    0.000% { opacity: 0; transform: translateY(1.2em); }
    43.333% { opacity: 0; transform: translateY(1.2em); }
    44.722% { opacity: 1; transform: none; }
    52.222% { opacity: 1; transform: none; }
    53.333% { opacity: 0; transform: translateY(-0.5em); }
    100.000% { opacity: 0; transform: translateY(-0.5em); }
}
.filme__mensagem--4 { animation: filme-mensagem4 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-mensagem5 {
    0.000% { opacity: 0; transform: translateY(1.2em); }
    53.333% { opacity: 0; transform: translateY(1.2em); }
    54.722% { opacity: 1; transform: none; }
    62.778% { opacity: 1; transform: none; }
    63.889% { opacity: 0; transform: translateY(-0.5em); }
    100.000% { opacity: 0; transform: translateY(-0.5em); }
}
.filme__mensagem--5 { animation: filme-mensagem5 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-mensagem6 {
    0.000% { opacity: 0; transform: translateY(1.2em); }
    63.889% { opacity: 0; transform: translateY(1.2em); }
    65.278% { opacity: 1; transform: none; }
    73.333% { opacity: 1; transform: none; }
    74.444% { opacity: 0; transform: translateY(-0.5em); }
    100.000% { opacity: 0; transform: translateY(-0.5em); }
}
.filme__mensagem--6 { animation: filme-mensagem6 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-mensagem7 {
    0.000% { opacity: 0; transform: translateY(1.2em); }
    80.556% { opacity: 0; transform: translateY(1.2em); }
    81.944% { opacity: 1; transform: none; }
    88.889% { opacity: 1; transform: none; }
    90.000% { opacity: 0; transform: translateY(-0.5em); }
    100.000% { opacity: 0; transform: translateY(-0.5em); }
}
.filme__mensagem--7 { animation: filme-mensagem7 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-mensagem8 {
    0.000% { opacity: 0; transform: translateY(1.2em); }
    89.722% { opacity: 0; transform: translateY(1.2em); }
    91.111% { opacity: 1; transform: none; }
    98.333% { opacity: 1; transform: none; }
    99.444% { opacity: 0; transform: translateY(-0.5em); }
    100.000% { opacity: 0; transform: translateY(-0.5em); }
}
.filme__mensagem--8 { animation: filme-mensagem8 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-vinheta1 {
    0.000% { opacity: 1; transform: none; }
    3.056% { opacity: 1; transform: none; }
    4.444% { opacity: 0; transform: scale(1.06); }
    98.611% { opacity: 0; transform: scale(0.9); }
    100.000% { opacity: 1; transform: none; }
}
.filme__vinheta--1 { animation: filme-vinheta1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-vinheta2 {
    0.000% { opacity: 0; transform: scale(0.9); }
    38.056% { opacity: 0; transform: scale(0.9); }
    39.444% { opacity: 1; transform: none; }
    41.389% { opacity: 1; transform: none; }
    42.778% { opacity: 0; transform: scale(1.06); }
    100.000% { opacity: 0; transform: scale(1.06); }
}
.filme__vinheta--2 { animation: filme-vinheta2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-vinheta3 {
    0.000% { opacity: 0; transform: scale(0.9); }
    74.167% { opacity: 0; transform: scale(0.9); }
    75.556% { opacity: 1; transform: none; }
    77.222% { opacity: 1; transform: none; }
    78.611% { opacity: 0; transform: scale(1.06); }
    100.000% { opacity: 0; transform: scale(1.06); }
}
.filme__vinheta--3 { animation: filme-vinheta3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-cap1 {
    0.000% { transform: scaleX(0); }
    38.889% { transform: scaleX(1); }
    99.722% { transform: scaleX(1); }
    100.000% { transform: scaleX(0); }
}
.filme__capitulo--1 .filme__capitulo-progresso { animation: filme-cap1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-cap2 {
    0.000% { transform: scaleX(0); }
    38.889% { transform: scaleX(0); }
    75.000% { transform: scaleX(1); }
    99.722% { transform: scaleX(1); }
    100.000% { transform: scaleX(0); }
}
.filme__capitulo--2 .filme__capitulo-progresso { animation: filme-cap2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-cap3 {
    0.000% { transform: scaleX(0); }
    75.000% { transform: scaleX(0); }
    99.722% { transform: scaleX(1); }
    100.000% { transform: scaleX(0); }
}
.filme__capitulo--3 .filme__capitulo-progresso { animation: filme-cap3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-nome1 {
    0.000% { opacity: 1; }
    38.889% { opacity: 1; }
    39.444% { opacity: 0.5; }
    99.444% { opacity: 0.5; }
    100.000% { opacity: 1; }
}
.filme__capitulo--1 .filme__capitulo-nome { animation: filme-nome1 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-nome2 {
    0.000% { opacity: 0.5; }
    38.889% { opacity: 0.5; }
    39.444% { opacity: 1; }
    75.000% { opacity: 1; }
    75.556% { opacity: 0.5; }
    100.000% { opacity: 0.5; }
}
.filme__capitulo--2 .filme__capitulo-nome { animation: filme-nome2 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes filme-nome3 {
    0.000% { opacity: 0.5; }
    75.000% { opacity: 0.5; }
    75.556% { opacity: 1; }
    99.444% { opacity: 1; }
    100.000% { opacity: 0.5; }
}
.filme__capitulo--3 .filme__capitulo-nome { animation: filme-nome3 var(--duracao) cubic-bezier(.4, 0, .2, 1) infinite; }

/* No telefone a câmera é outra: o recorte tem 92 de largura, e ela anda até
   o assunto de cada ato em vez de se aproximar dele. */
@keyframes filme-camera-telefone {
    0.000% { transform: translate(5em, 0em) scale(1); }
    36.111% { transform: translate(5em, 0em) scale(1); }
    38.889% { transform: translate(0em, 0em) scale(1); }
    46.111% { transform: translate(0em, 0em) scale(1); }
    48.056% { transform: translate(-10em, 0em) scale(1.12); }
    68.889% { transform: translate(-10em, 0em) scale(1.12); }
    71.944% { transform: translate(0em, 0em) scale(1); }
    75.000% { transform: translate(0em, 0em) scale(1); }
    77.500% { transform: translate(-14em, 0em) scale(1); }
    97.222% { transform: translate(-14em, 0em) scale(1); }
    100.000% { transform: translate(5em, 0em) scale(1); }
}
@media (max-width: 40rem) {
    .filme__camera { animation-name: filme-camera-telefone; }
}

/* Com menos movimento, o filme vira pôster: a janela e o celular lado a lado
   (as posições de base), as duas fichas e mais nada. */
@media (prefers-reduced-motion: reduce) {
    .cinema__filme * { animation: none !important; }
    .filme__painel, .filme__aparelhos, .filme__barra-emulador, .filme__relatorio, .filme__legenda,
    .filme__alvo, .filme__clique, .filme__toque, .filme__linha, .filme__cursor, .filme__voo,
    .filme__varredura, .filme__celular-boot, .filme__mensagem, .filme__vinheta { display: none; }
    .filme__ficha { opacity: 1; }
    .filme__ficha--instala { left: calc(100em / 1.25); top: calc(62em / 1.25); }
    .filme__ficha--liga { left: calc(100em / 1.25); top: calc(67.4em / 1.25); }
}