/* =============================================================================================
   ESTILO DO SITE appdireto.com.br: um arquivo só, sem framework e sem build.
   As cores são as MESMAS da identidade (ver Documentacao/MARCA.md): azul -> indigo -> violeta,
   com o verde do "conferido".

   Regra de ouro deste arquivo: a página tem que ficar CURTA no celular. Espaço, cartão e fonte
   encolhem por faixa de tela (clamp) e o que não decide nada entra em bloco de abrir/fechar
   (details/summary, que já funciona sem JavaScript). Nada de biblioteca, fonte de fora ou
   rastreador: o site abre inteiro sem internet, e é isso que ferramentas/checar-site.js confere
   antes de publicar.
   ============================================================================================= */
:root {
    --azul: #2563eb;        /* cor de identidade: mora na logomarca, não pinta a página */
    --indigo: #4f46e5;      /* cor de identidade: idem */
    --violeta: #7c3aed;     /* a COR PRINCIPAL da marca: é ela que pinta ação (botão, link, destaque) */
    --verde: #22c55e;       /* o "conferido": produção, teste liberado, promoção */
    --verde-escuro: #15803d;
    --tinta: #1e1b4b;
    --tinta-2: #17153a;
    --cinza: #64748b;
    --cinza-claro: #94a3b8;
    --borda: #e8e8f6;
    --fundo: #f7f7fd;
    --branco: #ffffff;
    /* Nomes de intenção: quem escreve CSS daqui pra frente usa estes, não a cor crua. */
    --acao: var(--violeta);
    --acao-escura: #6d28d9;
    --acao-suave: #f5f3ff;
    --sucesso-suave: #f0fdf4;
    --raio: 16px;
    --raio-pequeno: 10px;
    /* ZERO sombra (revisão de 15/09/2026): quem separa um bloco do outro é a borda fina e o espaço.
       Sombra em tudo era metade do visual poluído, e sombra em cartão que não se clica não diz
       nada a ninguém. Sendo variável, apagar aqui apagou em todas as regras de uma vez. */
    --sombra: none;
    --sombra-alta: none;
    --limite: 1080px;
    --topo-altura: 62px;    /* o menu do topo é fixo: as âncoras param ABAIXO dele */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Rede de segurança contra rolagem lateral: nenhuma sobra de largura (brilho decorativo, chip
   comprido, imagem solta) pode fazer a página inteira rolar de lado no celular. É "clip" e não
   "hidden" de propósito: "hidden" cria uma área de rolagem e o topo preso (position: sticky)
   para de grudar. O @media de tela estreita (fim do arquivo) resolve o resto na origem. */
html, body { overflow-x: clip; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--fundo);
    color: var(--tinta);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--indigo); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 10px; }

h1 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); letter-spacing: -0.5px; }
h2 { font-size: clamp(1.32rem, 2.8vw, 1.85rem); letter-spacing: -0.3px; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 12px; }

::selection { background: #ddd6fe; color: var(--tinta); }

/* Qualquer destino de link (#secao) tem que parar abaixo do menu fixo, senão o título da seção
   aparece escondido atrás dele. */
[id] { scroll-margin-top: calc(var(--topo-altura) + 14px); }

/* Acessibilidade: quem navega pelo teclado precisa VER onde está o foco. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--violeta);
    outline-offset: 2px;
}

/* Atalho de teclado ("Pular para o conteúdo"): fica escondido até receber foco. */
.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--branco);
    color: var(--tinta);
    padding: 10px 16px;
    border-radius: 0 0 var(--raio-pequeno) 0;
    z-index: 100;
}
.pular-para-conteudo:focus { left: 0; }

.limite { max-width: var(--limite); margin: 0 auto; padding: 0 18px; }

.somente-leitor-tela {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------------- topo / menu */
.topo {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--tinta-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topo-barra {
    max-width: var(--limite);
    margin: 0 auto;
    padding: 9px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topo-marca { display: flex; align-items: center; }
.topo-marca img { height: 38px; width: auto; }

.topo-menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

.topo-menu a {
    color: #dbeafe;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: var(--raio-pequeno);
    white-space: nowrap;
}
.topo-menu a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.topo-cta { margin-left: 6px; white-space: nowrap; }
/* O botão do topo é menor que os do corpo da página: a barra tem que ser baixa. */
.topo .botao-claro { padding: 8px 14px; font-size: 0.9rem; }

/* ---------------------------------------------------------------------------- botões */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--raio-pequeno);
    font-weight: 700;
    font-size: 0.96rem;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.botao:hover { transform: translateY(-1px); }

.botao-principal { background: var(--verde); color: #06331c; box-shadow: 0 6px 18px rgba(34, 197, 94, 0.28); }
.botao-principal:hover { background: #16a34a; }

.botao-claro { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.botao-claro:hover { background: rgba(255, 255, 255, 0.22); }

.botao-escuro { background: var(--violeta); color: #fff; }
.botao-escuro:hover { background: #6d28d9; }

.botao-contorno { background: transparent; color: var(--violeta); border-color: var(--violeta); }
.botao-contorno:hover { background: #f5f3ff; }

.botao[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

/* ----------------------------------------------------------------------------- hero */
.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: clamp(30px, 4.6vw, 52px) 0 clamp(30px, 4.6vw, 50px);
    background: var(--tinta-2);
}
.hero-conteudo {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(18px, 3vw, 34px);
    align-items: center;
}
.hero h1 { color: #fff; margin-bottom: 10px; }
.hero .assinatura {
    font-size: 0.76rem;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: #c7d2fe;
    font-weight: 700;
    margin-bottom: 8px;
}
/* Slogan principal da marca (Documentacao/MARCA.md): frase de efeito, então vem em corpo maior,
   com a barra verde do "conferido" marcando o começo da frase. */
.hero p.slogan {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    font-weight: 700;
    color: #fff;
    border-left: 4px solid var(--verde);
    padding-left: 12px;
    margin: 0 0 12px;
    max-width: 560px;
}
.hero p.manchete { font-size: clamp(0.96rem, 1.4vw, 1.04rem); color: #e0e7ff; max-width: 560px; margin-bottom: 0; }
.hero-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hero-selos { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }

/* Cartão de oferta dentro do hero (resumo do plano Start) */
.hero-cartao {
    background: rgba(255, 255, 255, 0.98);
    color: var(--tinta);
    border-radius: var(--raio);
    padding: 18px 18px 16px;
    box-shadow: 0 18px 44px rgba(8, 6, 36, 0.35);
}
.hero-cartao h2 { font-size: 1.1rem; margin-bottom: 2px; }
.hero-cartao .preco-linha { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 2px; flex-wrap: wrap; }
.hero-cartao .preco-de { color: var(--cinza-claro); text-decoration: line-through; font-size: 0.95rem; }
.hero-cartao .preco-por { font-size: 1.9rem; font-weight: 800; color: var(--violeta); line-height: 1; }
.hero-cartao .preco-periodo { color: var(--cinza); font-size: 0.9rem; }
.hero-cartao ul { margin: 10px 0 14px; padding-left: 0; list-style: none; }
.hero-cartao li { padding-left: 24px; position: relative; margin-bottom: 5px; font-size: 0.9rem; }
.hero-cartao li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--verde-escuro);
    font-weight: 800;
}

/* ----------------------------------------------------------- faixa de slogans (curtos) */
/* Logo abaixo do hero, numa faixa fina: fundo claro (duas faixas escuras emendadas pesariam) e os
   três slogans curtos na MESMA linha, para não gastar uma tela de celular com isso. */
.faixa-slogans {
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
    padding: 16px 0 18px;
}
.faixa-slogans .rotulo-slogans {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--violeta);
    margin-bottom: 8px;
}
.lista-slogans {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
}
.lista-slogans li {
    position: relative;
    padding-left: 20px;
    font-size: clamp(0.95rem, 1.5vw, 1.08rem);
    font-weight: 700;
    color: var(--tinta);
    line-height: 1.35;
}
.lista-slogans li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--verde-escuro);
    font-weight: 800;
}

/* ----------------------------------------------------------------------------- selos */
.selo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
}
.selo-promocao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--verde);
    color: #06331c;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.selo-promocao.chip-claro {
    background: #dcfce7;
    color: var(--verde-escuro);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
}

/* -------------------------------------------------------------------------- seções */
/* O respiro entre seções é o que mais pesava no celular: aqui ele encolhe até 32px e volta a
   crescer sozinho em tela grande. */
.secao { padding: clamp(32px, 5vw, 58px) 0; }
.secao-clara { background: var(--branco); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.secao-escura { background: var(--tinta-2); color: #fff; }
.secao-escura h2, .secao-escura h3 { color: #fff; }
.secao-escura p { color: #dbeafe; }

.cabecalho-secao { max-width: 720px; margin-bottom: clamp(16px, 2.6vw, 28px); }
.cabecalho-secao p { color: var(--cinza); font-size: 1rem; margin: 0; }
.cabecalho-secao .rotulo {
    display: inline-block;
    background: #f5f3ff;
    border: 1px solid #ede9fe;
    color: var(--violeta);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.secao-escura .cabecalho-secao .rotulo { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #c7d2fe; }
.secao-escura .cabecalho-secao p { color: #c7d2fe; }

/* ------------------------------------------------------------------------- cartões */
.grade { display: grid; gap: clamp(10px, 1.6vw, 16px); align-items: start; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cartao {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: clamp(14px, 1.8vw, 20px);
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cartao h3 { margin-bottom: 2px; }
.cartao p { color: #475569; font-size: 0.92rem; margin: 0; }
.cartao .rotulo-cartao {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cinza-claro);
}
/* Catálogo de sistemas (seção #sistemas, 15/09/2026): nove segmentos em cartão + o cartão largo de
   "o seu negócio é outro?". O cartão do catálogo é mais baixo que o dos passos, e o selo do estágio
   (Em produção / Sob medida) desce para o PÉ do cartão (margin-top:auto), para que os selos da mesma
   linha fiquem alinhados mesmo quando os textos têm tamanhos diferentes. */
.grade-sistemas { align-items: stretch; }
.cartao-sistema, .cartao-cta-catalogo { padding: clamp(12px, 1.5vw, 16px); }
.cartao-sistema p { font-size: 0.88rem; }
.cartao-sistema .chips { margin-top: auto; }
/* O cartão do fim do catálogo ocupa a linha inteira em qualquer tela: é a chamada de quem é de
   outro ramo, e não um segmento a mais na lista. (O 9º segmento só ocupa a linha inteira no
   celular: ver .cartao-celular-largo no @media de tela estreita.) */
.cartao-largo { grid-column: 1 / -1; }

/* Só em quem tem mouse: no celular o realce extra não muda nada e some depois do toque. */
@media (hover: hover) {
    .cartao:hover, .mini:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
}

.cartao-destaque {
    border: 2px solid var(--violeta);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.16);
}
.cartao-destaque h3 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); }
.cartao-destaque p { font-size: 0.95rem; }
.cartao-destaque .faixa-destaque {
    display: inline-block;
    align-self: flex-start;
    background: var(--violeta);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 6px;
}

/* Cartões MIÚDOS: os módulos do sistema. Antes era um cartão grande por módulo (14 cartões, mais
   de duas telas de celular só nisso). Aqui cada módulo é uma linha com ícone, título e UMA frase
   curta, em duas colunas no celular e quatro no computador. */
.grade-mini {
    display: grid;
    /* 190px dá QUATRO a CINCO colunas no computador. No celular o @media fixa duas colunas (com o
       auto-fit puro daria uma só e a lista de módulos voltaria a ter duas telas de altura). */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 8px;
}
.mini {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    box-shadow: 0 1px 8px rgba(30, 27, 75, 0.05);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mini h3 { font-size: 0.9rem; margin: 0; }
.mini p { font-size: 0.8rem; color: #475569; margin: 1px 0 0; line-height: 1.4; }

/* Lista de problemas da rotina ("Reconhece essa rotina?"): texto em colunas, sem cartão. O mínimo de
   380px é de propósito: são QUATRO itens lado a lado, então em duas colunas eles fecham um 2x2
   (em três colunas sobrava uma célula vazia embaixo).
   ATENÇÃO ao min(380px, 100%): com o mínimo cru (só 380px), num celular de 375px a coluna ficava com
   380px, o fim das frases era cortado e a página inteira rolava 21px para o lado. Medido no Chrome
   (moldura de 375px) em 15/09/2026. O min() mantém as duas colunas no computador e deixa a coluna
   caber no celular. */
.lista-problemas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: 4px 26px;
}
.lista-problemas li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.lista-problemas p { margin: 0; font-size: 0.88rem; color: #475569; }
.lista-problemas strong { display: block; color: var(--tinta); font-size: 0.95rem; }

/* Lista de conferido (o que vem junto do plano): duas colunas, uma linha cada. */
.lista-check {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 8px 20px;
}
.lista-check li { position: relative; padding-left: 22px; font-size: 0.9rem; color: #334155; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; color: var(--verde-escuro); font-weight: 800; }

/* Lista de módulos (chips) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip {
    background: #f5f3ff;
    border: 1px solid #ede9fe;
    color: #4c1d95;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 0.82rem;
    font-weight: 600;
}
.chip-verde { background: #f0fdf4; border-color: #dcfce7; color: var(--verde-escuro); }

/* ------------------------------------------------------- passos (como funciona) */
/* Os três passos do "você não instala nada": número em bolinha, título e duas linhas. É um cartão
   baixo e largo, não um bloco alto, então os três cabem numa tela de celular. */
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 10px; }
.passo { flex-direction: row; align-items: flex-start; gap: 12px; border-left: 3px solid var(--verde); }
.passo-numero {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--violeta);
    color: #fff;
    font-weight: 800;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.passo h3 { font-size: 0.98rem; margin: 3px 0 2px; }
.passo p { font-size: 0.88rem; }

/* Bloco de abrir/fechar do próprio HTML (details/summary): é aqui que entra o texto que era
   corrido e não decide nada. Abre sem JavaScript e o navegador cuida do teclado e do leitor. */
.mais {
    margin-top: 14px;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra);
    padding: 0 16px;
}
.mais > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--tinta);
    list-style: none;
}
.mais > summary::-webkit-details-marker { display: none; }
.mais > summary::before { content: "+"; color: var(--violeta); font-weight: 800; }
.mais[open] > summary::before { content: "-"; }
.mais > summary:hover { color: var(--violeta); }
.mais .mais-corpo { padding: 2px 0 16px; }
.mais .mais-corpo p { font-size: 0.9rem; color: #475569; }
.secao-escura .mais { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.secao-escura .mais > summary { color: #fff; }
.secao-escura .mais > summary::before { color: #a5b4fc; }
.secao-escura .mais .mais-corpo p { color: #c7d2fe; }

/* ----------------------------------------------------------------------- plano */
.plano {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: clamp(18px, 2.4vw, 26px);
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
}
.plano-destaque { border: 2px solid var(--verde); box-shadow: 0 14px 40px rgba(34, 197, 94, 0.16); }
.plano h3 { font-size: 1.3rem; margin-bottom: 4px; }
.plano .preco-linha { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 6px; flex-wrap: wrap; }
.plano .preco-de { color: var(--cinza-claro); text-decoration: line-through; }
.plano .preco-por { font-size: clamp(1.9rem, 4vw, 2.3rem); font-weight: 800; color: var(--tinta); line-height: 1; }
.plano .preco-periodo { color: var(--cinza); }
.plano .plano-limite { font-weight: 700; color: var(--indigo); margin-bottom: 10px; }
.plano ul { list-style: none; margin: 0 0 16px; padding: 0; }
.plano li { padding-left: 24px; position: relative; margin-bottom: 6px; font-size: 0.92rem; color: #334155; }
.plano li::before { content: "✓"; position: absolute; left: 0; color: var(--verde-escuro); font-weight: 800; }
.plano .plano-rodape { margin-top: auto; }
/* A descrição de cada plano é escrita no painel (é o texto de venda que o dono digita na aba Planos)
   e chega junto do cartão: texto de apoio, sem competir com o preço. */
.plano .plano-texto { font-size: 0.9rem; color: #475569; margin: 0 0 12px; }

/* A lista de planos é a grade que o JavaScript redesenha com os planos do painel (um cartão por
   plano). O respiro embaixo separa essa lista do bloco de apoio que vem depois dela. */
.grade-planos { margin-bottom: clamp(14px, 2vw, 20px); }

/* Texto miúdo de apoio (prazo da promoção, avisos do rodapé dos cartões). */
.observacao { font-size: 0.82rem; color: var(--cinza); }

/* ------------------------------------------------------------------- formulário */
.formulario {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: clamp(16px, 2.2vw, 24px);
    box-shadow: var(--sombra);
}
/* Duas colunas TAMBÉM no celular: assim o formulário fica com metade da altura. Só desce para uma
   coluna em tela muito estreita (abaixo de 380px). */
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo-largo { grid-column: 1 / -1; }
.campo label { font-size: 0.82rem; font-weight: 700; color: #334155; }
.campo .opcional { font-weight: 400; color: var(--cinza-claro); }
.campo input, .campo select, .campo textarea {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: var(--raio-pequeno);
    background: #fff;
    color: var(--tinta);
    width: 100%;
}
.campo textarea { resize: vertical; min-height: 68px; }
.campo .ajuda { font-size: 0.76rem; color: var(--cinza); }
/* Armadilha para robô de spam: o campo existe no HTML, mas fica fora da tela e sem rótulo visível,
   quem preenche à mão nunca vê; robô que varre formulário preenche e o cadastro é descartado. */
.campo-captcha {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}
.campo-consentimento { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: #334155; }
.campo-consentimento input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }

.acoes-formulario { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.acoes-formulario .nota { font-size: 0.8rem; color: var(--cinza); margin: 0; }

/* Duas colunas com pesos diferentes (formulário largo + contato), no celular vira uma coluna só,
   por isso é uma classe e não um estilo solto no HTML (estilo solto ganharia do @media). */
.grade-formulario { grid-template-columns: 1.45fr 1fr; align-items: start; }

/* Dois botões de largura igual. No celular ficam lado a lado; um embaixo do outro, eles sozinhos
   ocupavam meia tela (o estilo de largura não pode vir no HTML: estilo solto ganha do @media). */
.botoes-duplos { display: flex; gap: 10px; flex-wrap: wrap; }
.botoes-duplos .botao { flex: 1 1 45%; }

.aviso {
    border-radius: var(--raio-pequeno);
    padding: 14px 16px;
    margin-top: 16px;
    font-size: 0.92rem;
    display: none;
}
.aviso.visivel { display: block; }
.aviso-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; }
.aviso-erro { background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; }
.aviso-info { background: #eef2ff; border: 1px solid #c7d2fe; color: #312e81; }

/* ---------------------------------------------------------- perguntas frequentes */
/* Os blocos de abrir/fechar do próprio HTML (details/summary) já resolvem sem JavaScript, e o
   navegador cuida do teclado e do leitor de tela. O marcador nativo é trocado por um "+"/"-"
   visível: sem isso, a pergunta não mostra que dá para clicar. */
.lista-perguntas { display: grid; gap: 8px; max-width: 860px; }
.pergunta {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra);
    padding: 0 16px;
}
.pergunta summary {
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 0;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--tinta);
    list-style: none;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::before { content: "+"; color: var(--violeta); font-weight: 800; }
.pergunta[open] summary::before { content: "-"; }
.pergunta summary:hover { color: var(--violeta); }
.pergunta p { color: #475569; font-size: 0.9rem; margin: 0 0 14px; padding-left: 20px; }

/* Lista de contato (A empresa / Contato): grade de rótulo e dado, sem as linhas altas de antes. */
.lista-contato { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-contato li { display: flex; gap: 10px; font-size: 0.9rem; }
.lista-contato .rotulo { min-width: 88px; font-weight: 700; color: #334155; flex-shrink: 0; }
.lista-contato a { color: var(--violeta); font-weight: 600; }

/* Dados da empresa em duas colunas (rótulo + dado): era uma lista de cinco linhas altas. */
.dados-empresa { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 0.9rem; }
.dados-empresa dt { font-weight: 700; color: #334155; }
.dados-empresa dd { margin: 0; color: #475569; }
.dados-empresa a { color: var(--violeta); font-weight: 600; }

/* O cartão branco dentro da seção escura (dados da empresa) mantém o texto escuro: sem isto, o
   branco do h3 do cartão some no fundo claro do próprio cartão. */
.secao-escura .cartao, .secao-escura .cartao h3, .secao-escura .cartao strong { color: var(--tinta); }
.secao-escura .cartao p, .secao-escura .cartao dd { color: #475569; }

/* Princípios da empresa: duas colunas de uma linha cada, sem lista alta. */
.principios {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 8px 24px;
}
.principios li { position: relative; padding-left: 24px; font-size: 0.9rem; color: #e0e7ff; }
.principios li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 800; }
.principios strong { color: #fff; }

/* Linha de chamada no fim de uma seção (o botão que antes ficava solto, com estilo no HTML). */
.acoes-secao { margin: 20px 0 0; }

/* Coluna da direita da seção de planos: o checklist e o contato, empilhados. */
.coluna-plano { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------------------- rodapé */
.rodape { background: var(--tinta-2); color: #cbd5e1; padding: 30px 0 22px; }
.rodape-grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
.rodape h3 { color: #fff; font-size: 0.88rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 5px; font-size: 0.87rem; }
.rodape a { color: #dbeafe; text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape .rodape-marca img { height: 34px; width: auto; margin-bottom: 8px; }
.rodape .rodape-slogan { color: #a5b4fc; font-weight: 700; font-size: 0.92rem; margin: 0 0 8px; }
.rodape .rodape-fim {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.8rem;
    color: #94a3b8;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------- barra de ação do celular */
/* Existe só no celular e fica presa no pé da tela (ver o @media abaixo): é o que evita o visitante
   ter que descer a página inteira para achar o WhatsApp ou o cadastro. No computador ela não
   aparece, porque lá o menu do topo já dá conta. */
.barra-acao { display: none; }

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 980px) {
    .hero-conteudo { grid-template-columns: 1fr; }
    .grade-4, .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grade-formulario { grid-template-columns: 1fr; }
    .rodape-grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    /* CELULAR: o topo NÃO fica preso na tela. Preso, ele comia a altura de um cartão no alto da
       página, e como o menu não cabia numa linha, ele virava um trilho que rolava de lado: era
       isso que dava a sensação de "a tela arrasta". Rolar junto com a página e deixar o menu
       QUEBRAR em linhas devolve a tela para o conteúdo; o atalho do WhatsApp e do cadastro
       continua preso no pé (ver .barra-acao). Medido no Chrome (moldura de 375px) em 15/09/2026. */
    .topo { position: static; }
    /* Sem topo preso, a âncora não precisa de margem de segurança para não parar atrás dele. */
    [id] { scroll-margin-top: 12px; }
    .topo-barra { gap: 6px 8px; flex-wrap: wrap; }
    .topo-menu {
        order: 3;
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        gap: 2px 4px;
    }
    .topo-menu a { padding: 6px 9px; font-size: 0.86rem; }
    .topo-cta { margin-left: auto; }
    /* Marca e botão um pouco menores: assim o botão não quebra em três linhas num celular de 360px. */
    .topo-marca img { height: 32px; }
    .topo .botao-claro { padding: 7px 12px; font-size: 0.84rem; }

    .barra-acao {
        display: flex;
        gap: 8px;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 70;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid var(--borda);
        box-shadow: none;
    }
    .barra-acao .botao { flex: 1; padding: 11px 12px; font-size: 0.92rem; }
    /* Espaço no pé da página para a barra não cobrir o último conteúdo. */
    body { padding-bottom: 72px; }
    .rodape { padding-bottom: 84px; }
}

@media (max-width: 660px) {
    .limite { padding: 0 16px; }
    .topo-barra { padding: 8px 16px; }
    .grade-2, .grade-3 { grid-template-columns: 1fr; }
    /* Catálogo de sistemas em DUAS colunas mesmo no celular: em uma coluna só, nove segmentos viravam
       quase duas telas de rolagem. Cada cartão é curto (ícone, título, duas linhas e o selo). */
    .grade-sistemas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* O nono segmento ocupa as duas colunas: sozinho num canto, ele parecia sobra da lista. */
    .cartao-celular-largo { grid-column: 1 / -1; }
    /* Duas colunas fixas de módulos no celular. */
    .grade-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* No celular cada pixel de respiro conta: 28px entre seções e o rótulo mais colado no título. */
    .secao { padding: 28px 0; }
    .cabecalho-secao { margin-bottom: 14px; }
    .cabecalho-secao p { font-size: 0.96rem; }

    /* Botões do hero lado a lado: empilhados, eles sozinhos gastavam meia tela. */
    .hero-acoes .botao { flex: 1 1 45%; padding: 11px 12px; font-size: 0.9rem; }
    .hero-selos { margin-top: 12px; }
    .selo-chip { font-size: 0.78rem; padding: 5px 10px; }

    .lista-problemas li { padding: 8px 0; }
    .passos { gap: 8px; }
    .pergunta summary { padding: 10px 0; font-size: 0.92rem; }
    /* O cartão de dúvidas da seção de planos some no celular: a mesma ação (WhatsApp) está fixa no
       pé da tela, e em cima o plano já tem o botão do teste grátis. */
    .cartao-duvida { display: none; }

    /* Rodapé em duas colunas: os dois blocos de links cabem lado a lado, e a marca fica na linha
       inteira em cima (em uma coluna só, o rodapé sozinho era quase uma tela). */
    .rodape-grade { grid-template-columns: 1fr 1fr; }
    .rodape-grade > .rodape-marca { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
    .campos { grid-template-columns: 1fr; }
}

/* Quem pediu menos animação no sistema operacional não recebe animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .botao, .cartao, .mini { transition: none; }
    .botao:hover, .cartao:hover, .mini:hover { transform: none; }
}

/* =============================================================================================
   REVISÃO DE 15/09/2026: A PÁGINA MAIS ENXUTA (E O CELULAR SEM ARRASTO)

   O dono olhou o site publicado e disse o que precisava ser dito: "grande demais, poluído, muito
   cartão e emoji". O que poluía não era o conteúdo, era a decoração em cima dele. Esta camada
   fica no FIM do arquivo de propósito: com a mesma especificidade, quem vem depois ganha, então dá
   para corrigir a identidade da página inteira sem reescrever as 800 linhas de cima (nem mexer no
   que já estava certo: tipografia, formulário, foco do teclado, tamanho de toque).

   As quatro regras desta camada:
     1) UMA cor de ação: o violeta, que é a cor principal da marca (ver Documentacao/MARCA.md).
        Verde só no que é "conferido/pronto" (produção, promoção). Azul e indigo moram na logomarca.
     2) SUPERFÍCIE CHAPADA: acabou o degradê. Faixa escura é tinta chapada e o brilho decorativo
        do hero saiu (era a única peça que podia passar da largura da tela).
     3) CARTÃO LEVE: borda fina, sem sombra e sem levantar no hover. Bloco se separa por espaço.
     4) CELULAR: nada passa da largura da tela (o @media no fim desta camada).
   ============================================================================================= */

/* ------------------------------------------------------------------ 1) cor de ação única */
.botao { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.botao:hover { transform: none; }
/* O botão de ação é o violeta da marca (era verde; o verde agora é só do "conferido"). */
.botao-principal { background: var(--acao); color: #fff; }
.botao-principal:hover { background: var(--acao-escura); }
.botao-escuro { background: var(--tinta-2); color: #fff; }
.botao-escuro:hover { background: #2a2560; }
.botao-contorno { color: var(--acao); border-color: var(--acao); }
.botao-contorno:hover { background: var(--acao-suave); }

a { color: var(--acao); }
.plano .plano-limite { color: var(--acao); }
.pergunta summary::before { color: var(--acao); }
.pergunta summary:hover { color: var(--acao); }
.lista-contato a, .dados-empresa a { color: var(--acao); }

/* ------------------------------------------------------------- 2) superfície chapada */
/* As quatro faixas escuras (topo, hero, seção da empresa e rodapé) eram degradê. Ficaram chapadas
   na cor da marca na própria regra de cada uma (.topo, .hero, .secao-escura, .rodape), lá em cima
   no arquivo: quem for mexer no topo acha a cor do topo no topo, e não aqui embaixo. O brilho verde
   de 400px que ficava atrás do texto do hero (.hero::after) foi apagado de vez: era a única peça da
   página que podia passar da largura da tela. */

/* ---------------------------------------------------------------- 3) cartão leve */
/* As sombras dos cartões já saíram junto com as variáveis --sombra/--sombra-alta (topo do arquivo);
   aqui saem as que estavam escritas na mão. */
.hero-cartao { box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.14); }
.cartao-destaque { box-shadow: none; }
.plano-destaque { border: 2px solid var(--acao); box-shadow: none; }
.barra-acao { box-shadow: none; }
.cartao:hover, .mini:hover { box-shadow: none; transform: none; }
.mini { padding: 9px 11px; border-radius: var(--raio-pequeno); }
.mini p { font-size: 0.82rem; }
.grade-mini { gap: 6px; }

/* ------------------------------------------------- 4) celular: nada passa da largura */
/* Grade que se adapta de verdade: o mínimo da coluna nunca é maior que a tela. As grades já usam
   minmax(min(NNNpx, 100%), 1fr) na própria regra (ver .lista-problemas, que explica o defeito
   medido em 15/09/2026). Aqui ficam só as duas escolhas que mudam DE PROPÓSITO no celular: */
/* Catálogo por segmento em UMA coluna: em duas colunas de 160px a frase de cada segmento quebrava
   em quatro linhas e ficava pior de ler do que rolando um pouco mais. (Substitui a escolha de duas
   colunas do @media de 660px, mais acima.) */
.grade-sistemas { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
/* Cartões miúdos (os módulos do sistema) também em uma coluna no celular, pela mesma razão. */
.grade-mini { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }

/* Texto de apoio do hero (as duas linhas abaixo dos botões): eram estilos soltos no HTML. */
.hero-cliente { margin: 14px 0 0; font-size: 0.92rem; color: #c7d2fe; }
.hero-cliente a { color: #fff; font-weight: 700; }
.hero-cartao-resumo { margin: 0; color: var(--cinza); font-size: 0.88rem; }

@media (max-width: 820px) {
    /* Formulário em uma coluna: em duas, cada campo ficava com menos de 160px e o dedo errava. */
    .campos { grid-template-columns: 1fr; }
    /* Campo com 16px é o mínimo para o iPhone não dar ZOOM sozinho ao tocar (a página "pulava"). */
    input, select, textarea { font-size: 1rem; }
    .limite { padding: 0 16px; }
    .secao { padding: clamp(26px, 6vw, 36px) 0; }
    .cabecalho-secao { margin-bottom: 16px; }
}