/* 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;
    background-color: var(--cor-navy);
    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. */

main {
    flex: 1;
    min-width: 0;
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

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

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

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

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

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

/* Botões — §4 */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-1);
    min-height: 40px;
    padding-inline: var(--espaco-3);
    border-radius: var(--raio-controle);
    border: none;
    font-family: var(--fonte-titulo);
    font-weight: 500;
    font-size: var(--tamanho-corpo);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

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

.botao:active { transform: none; }

.botao--primario {
    background-color: var(--cor-menta);
    color: var(--cor-tinta);
}

.botao--primario:hover {
    background-color: var(--cor-menta-escura);
    color: var(--cor-tinta);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--cor-menta) 28%, transparent);
}

.botao--secundario {
    background-color: transparent;
    border: 1.25px solid var(--cor-menta);
    color: var(--cor-menta);
}

.botao--secundario:hover {
    background-color: color-mix(in srgb, var(--cor-menta) 12%, transparent);
    color: var(--cor-gradiente-topo);
}

/* Cabeçalho e rodapé */

/* Filete do gradiente da marca no topo da página — §1: menta pontua, não cobre */

.faixa-marca {
    height: 4px;
    background: var(--gradiente-marca);
}

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: color-mix(in srgb, var(--cor-navy) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cor-toggle-desligado);
}

.cabecalho__interno {
    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`. */

.marca {
    display: inline-flex;
    align-items: center;
}

.marca__logo {
    display: block;
    height: 44px;
    width: auto;
}

.marca__logo--rodape { height: 36px; }

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

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

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

/* Sair é um formulário para ser POST, mas na barra ocupa o lugar de um botão */

.navegacao__saida {
    display: inline-flex;
    margin: 0;
}

.rodape {
    border-top: 1px solid var(--cor-toggle-desligado);
    padding-block: var(--espaco-6);
    color: var(--cor-cinza-nevoa);
}

.rodape__interno {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-3);
    align-items: center;
    justify-content: space-between;
}

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

/* Hero */

.hero {
    padding-block: var(--espaco-12) var(--espaco-8);
    display: grid;
    gap: var(--espaco-3);
    max-width: 46rem;
}

.hero__selo {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    align-self: start;
    padding: 6px var(--espaco-2);
    border-radius: var(--raio-pilula);
    border: 1px solid var(--cor-toggle-desligado);
    color: var(--cor-cinza-nevoa);
    font-size: var(--tamanho-legenda);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero__selo::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--raio-pilula);
    background: var(--gradiente-marca);
}

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

/* Abertura: brilho ambiente da marca. 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-menta) 12%, transparent), transparent 72%),
        radial-gradient(42% 48% at 2% 2%, color-mix(in srgb, var(--cor-gradiente-topo) 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%);
}

.abertura__grade {
    display: grid;
    gap: var(--espaco-6);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    perspective: 1400px;
}

/* Ilustração do resultado da gravação */

.vitrine {
    background-color: var(--cor-navy-superficie);
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-modal);
    box-shadow: var(--sombra-padrao);
    overflow: hidden;

    /* Leve inclinação 3D, que endireita sob o mouse. A entrada animada da
       vitrine é só de opacidade (animacoes.js) para não disputar o transform
       com esta regra. */
    transform: rotateX(4deg) rotateY(-8deg);
    transition: transform 400ms ease;
}

@media (hover: hover) {
    .vitrine:hover { transform: none; }
}

.vitrine__barra {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
    padding: var(--espaco-2) var(--espaco-3);
    border-bottom: 1px solid var(--cor-toggle-desligado);
}

.vitrine__ponto {
    width: var(--espaco-1);
    height: var(--espaco-1);
    border-radius: var(--raio-pilula);
    background-color: var(--cor-gravacao);
    animation: pulso-gravacao 2s ease-in-out infinite;
}

@keyframes pulso-gravacao {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-gravacao) 55%, transparent); }
    70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--cor-gravacao) 0%, transparent); }
}

.vitrine__tempo {
    font-size: var(--tamanho-legenda);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cor-cinza-nevoa);
}

.vitrine__corpo {
    display: grid;
    gap: var(--espaco-2);
    padding: var(--espaco-3);
}

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

.vitrine__numero {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--espaco-3);
    height: var(--espaco-3);
    border-radius: var(--raio-pilula);
    background: var(--gradiente-marca);
    color: var(--cor-navy);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: var(--tamanho-legenda);
}

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

.vitrine__saidas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-1);
    padding: var(--espaco-2) var(--espaco-3);
    border-top: 1px solid var(--cor-toggle-desligado);
}

.vitrine__etiqueta {
    padding: 4px var(--espaco-2);
    border-radius: var(--raio-pilula);
    border: 1px solid color-mix(in srgb, var(--cor-menta) 40%, transparent);
    color: var(--cor-menta);
    font-size: var(--tamanho-legenda);
}

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

@media (max-width: 40rem) {
    .vitrine { display: none; }
}

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

.mostra__midia {
    margin: 0;
    background-color: var(--cor-navy-superficie);
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-modal);
    overflow: hidden;
    box-shadow: var(--sombra-padrao);
}

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

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

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

.lista-marcada__item::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--cor-menta);
    font-weight: 700;
}

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

.cartao {
    background-color: var(--cor-navy-superficie);
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-cartao);
    padding: var(--espaco-3);
    display: grid;
    gap: var(--espaco-1);
    align-content: start;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.cartao:hover {
    border-color: color-mix(in srgb, var(--cor-menta) 45%, transparent);
    transform: translateY(-2px);
    box-shadow: var(--sombra-padrao);
}

.cartao__titulo {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    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;
}

/* Faixa do diferencial */

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

.diferencial__item {
    position: relative;
    display: grid;
    gap: var(--espaco-1);
    padding-left: var(--espaco-2);
}

.diferencial__item::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 2px;
    border-radius: var(--raio-pilula);
    background: var(--gradiente-marca);
}

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

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

/* Direção do produto — rótulo obrigatório em cada item, para que visão de
   futuro nunca seja lida como capacidade atual. */

.roteiro {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    max-width: 46rem;
}

.roteiro__item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
    align-items: center;
    justify-content: space-between;
    padding-block: var(--espaco-2);
    border-bottom: 1px solid var(--cor-toggle-desligado);
    color: var(--cor-cinza-nevoa);
}

.roteiro__item:last-child { border-bottom: none; }

.rotulo {
    flex: none;
    padding: 4px var(--espaco-2);
    border-radius: var(--raio-pilula);
    font-family: var(--fonte-titulo);
    font-weight: 500;
    font-size: var(--tamanho-legenda);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rotulo--validacao {
    background-color: color-mix(in srgb, var(--cor-aviso) 16%, transparent);
    color: var(--cor-aviso);
}

.rotulo--planejado {
    background-color: color-mix(in srgb, var(--cor-cinza-nevoa) 16%, transparent);
    color: var(--cor-cinza-nevoa);
}

/* 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-4);
    flex-wrap: wrap;
}

.ciclo__rotulo {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2);
    cursor: pointer;
    color: var(--cor-cinza-nevoa);
}

.ciclo__trilho {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: var(--raio-pilula);
    background-color: var(--cor-toggle-desligado);
    transition: background-color 120ms ease;
    flex: none;
}

.ciclo__knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--cor-cinza-nevoa);
    transition: transform 120ms ease, background-color 120ms ease;
}

.ciclo-entrada:checked ~ .ciclo .ciclo__trilho {
    background-color: var(--cor-menta);
}

.ciclo-entrada:checked ~ .ciclo .ciclo__knob {
    background-color: var(--cor-branco-gelo);
    transform: translateX(20px);
}

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

.ciclo__economia {
    padding: 4px var(--espaco-2);
    border-radius: var(--raio-pilula);
    background-color: color-mix(in srgb, var(--cor-menta) 14%, transparent);
    color: var(--cor-menta);
    font-size: var(--tamanho-legenda);
    font-family: var(--fonte-titulo);
    font-weight: 500;
}

/* Cartões de plano */

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

.plano {
    position: relative;
    background-color: var(--cor-navy-superficie);
    border: 1px solid var(--cor-toggle-desligado);
    border-radius: var(--raio-cartao);
    padding: var(--espaco-3);
    display: grid;
    gap: var(--espaco-2);
}

.plano--destacado {
    border-color: var(--cor-menta);
    box-shadow: var(--sombra-padrao), 0 0 32px color-mix(in srgb, var(--cor-menta) 16%, transparent);
}

.plano__selo {
    position: absolute;
    top: calc(-1 * var(--espaco-1) - 6px);
    left: var(--espaco-3);
    padding: 4px var(--espaco-2);
    border-radius: var(--raio-pilula);
    background-color: var(--cor-menta);
    color: var(--cor-tinta);
    font-family: var(--fonte-titulo);
    font-weight: 500;
    font-size: var(--tamanho-legenda);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

.plano__valor {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: var(--tamanho-tela);
    line-height: 1.1;
}

.plano__unidade {
    font-family: var(--fonte-corpo);
    font-weight: 400;
    font-size: var(--tamanho-corpo);
    color: var(--cor-cinza-nevoa);
}

.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 {
    min-height: 1.2em;
    font-size: var(--tamanho-legenda);
    color: var(--cor-cinza-nevoa);
}

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

/* 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: 1rem 1fr;
    gap: var(--espaco-1);
    align-items: start;
    color: var(--cor-cinza-nevoa);
}

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

/* Tabela comparativa */

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

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

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

.tabela__categoria td {
    font-family: var(--fonte-titulo);
    font-weight: 500;
    color: var(--cor-menta);
    background-color: color-mix(in srgb, var(--cor-menta) 6%, transparent);
    text-transform: uppercase;
    font-size: var(--tamanho-legenda);
    letter-spacing: 0.08em;
}

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

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

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

.pergunta__titulo {
    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; }

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

.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);
    border: 1px solid var(--cor-menta);
    border-radius: var(--raio-modal);
    background-color: var(--cor-navy-superficie);
    background-image: radial-gradient(70% 100% at 50% 0%, color-mix(in srgb, var(--cor-menta) 10%, transparent), transparent 70%);
}

.garantia {
    display: flex;
    gap: var(--espaco-2);
    align-items: center;
    justify-content: center;
    padding: var(--espaco-3);
    border-radius: var(--raio-cartao);
    background-color: color-mix(in srgb, var(--cor-menta) 8%, transparent);
    color: var(--cor-branco-gelo);
    text-align: center;
    flex-wrap: wrap;
}

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

/* Documento longo em prosa: termos e privacidade. Mais estreito que a grade do
   site e mais largo que a de formulário — linha muito longa cansa, e estes dois
   textos existem para serem lidos até o fim, não varridos. O h2 desce para o
   tamanho de seção: o de tela abriria buraco entre os assuntos e faria o
   documento parecer uma sequência de páginas soltas. */

.conteudo--documento { max-width: 44rem; }

/* O aviso de "ainda não está em vigor" precisa respirar antes do documento:
   `.aviso` não tem margem e o primeiro `h2` do documento zera a dele, então sem
   isto os dois se encostam — e o que fica espremido é justamente a linha que
   diz que o contrato ainda não vale. */

.conteudo--documento .aviso { margin-bottom: var(--espaco-4); }

.documento {
    display: grid;
    gap: var(--espaco-2);
}

.documento h2 {
    font-size: var(--tamanho-secao);
    margin-top: var(--espaco-4);
}

.documento h2:first-child { margin-top: 0; }

.documento h3 {
    font-size: var(--tamanho-corpo);
    margin-top: var(--espaco-2);
}

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

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

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

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

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

.campo--com-olho {
    position: relative;
}

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

.campo__olho {
    position: absolute;
    right: var(--espaco-1);

    /* Alinha pelo campo, e não pelo rótulo: o `.campo` é uma grade com o
       rótulo em cima, então a entrada não começa no topo. */
    top: calc(var(--espaco-3) + 4px);
    height: 32px;
    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);
}

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

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

@media (max-width: 40rem) {
    .navegacao { gap: var(--espaco-2); }
    .navegacao__vinculo--secundario { display: none; }
    .secao { padding-block: var(--espaco-8); }

    /* O logo do kit tem 186 px de largura em 44 px de altura: metade de uma
       tela de 360 px, que é a largura do Android mais comum. Somado ao vão e à
       navegação, o cabeçalho pedia 374 px, então em 360 a página rolava para o
       lado e em 375 ele cabia raspando, colado na borda direita, sem respiro
       nenhum. Esconder link secundário não bastava: o que não cabe é o logo.
       Medido em 28/08/2026. */

    .cabecalho__interno { gap: var(--espaco-2); }
    .marca__logo { height: 32px; }
}

/* 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); }
    .marca__logo { height: 28px; }
}

/* Movimento (Anime.js) — só a camada de movimento esconde: a classe
   `com-movimento` vem do animacoes.js, nunca da marcação. Sem JavaScript não
   há classe, e o site aparece inteiro, parado. Esconder é opacidade, nunca
   display: o espaço do elemento fica reservado e a página não salta. */

.com-movimento .hero > *,
.com-movimento .vitrine,
.com-movimento .vitrine__passo,
.com-movimento .vitrine__etiqueta,
.com-movimento .cabecalho-secao,
.com-movimento .grade > *,
.com-movimento .diferencial > *,
.com-movimento .etapas > *,
.com-movimento .planos > *,
.com-movimento .perguntas > *,
.com-movimento .roteiro > *,
.com-movimento .ciclo,
.com-movimento .tabela-envoltorio,
.com-movimento .garantia,
.com-movimento .formulario,
.com-movimento .mostra__midia,
.com-movimento .mostra__texto > *,
.com-movimento .dupla > *,
.com-movimento .chamada {
    opacity: 0;
}

/* Enquanto o Anime.js escreve transformações quadro a quadro, a transição de
   hover do próprio elemento não pode persegui-las — a entrada sairia borrada.
   A classe entra e sai pelo animacoes.js, e esta regra vence por vir depois. */

.entrando {
    transition: none;
}