/* ==========================================================================
   VENDA — linguagem visual da superfície de conversão
   ==========================================================================
   Decisão do dono (2026-08-07): "a linguagem visual pode ser adaptada, para
   distinguir o que é conversão e o que é sistema, elas podem conversar sem
   seguir exatamente o mesmo layout".

   Então: o PAINEL é escuro/denso (trabalho); a VENDA é clara e arejada
   (decisão). A marca continua a mesma — navy, arco, Fredoka — mas aqui o
   navy é ACENTO (botão, card recomendado, faixa), nunca o fundo. Página de
   preço com fundo escuro cansa a vista e derruba confiança; toda referência
   séria (Wix inclusive) vende no claro.

   Este arquivo é o "casco" compartilhado das 4 telas do funil
   (planos → ciclo → confirmar → obrigado). Elas têm o MESMO cabeçalho,
   selos, FAQ e rodapé de propósito: a pessoa precisa sentir que continua no
   mesmo lugar enquanto avança, não que pulou para outro site.

   Depende de tokens.css (cores da marca, raios, fontes).
   ========================================================================== */

:root {
    /* Lavanda é da Wix. O nosso equivalente sai do arco da marca: um véu de
       teal, claro o bastante para ler texto navy por cima sem esforço. */
    --venda-wash:    #EFF7F5;
    --venda-wash-2:  #F5F9FD;
    --venda-line:    #E2E9F1;
    --venda-ink:     var(--tato-navy);
    --venda-ink-2:   #56657E;
    --venda-ink-3:   #8794AA;
    --venda-confirm: #0D6B58;
    --venda-whatsapp:#25D366;
    --venda-shadow:  0 1px 2px rgba(3,26,57,.04), 0 8px 24px rgba(3,26,57,.06);
    --venda-shadow-h:0 2px 4px rgba(3,26,57,.06), 0 16px 40px rgba(3,26,57,.10);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: var(--font-body);
    background: #fff;
    color: var(--venda-ink);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--venda-ink); }

.container { max-width:1120px; margin:0 auto; padding:0 20px; }
.container-narrow { max-width:760px; margin:0 auto; padding:0 20px; }

/* --------------------------------------------------------------------------
   Faixas do topo
   -------------------------------------------------------------------------- */

/* Garantia legal real (CDC art. 49), não slogan: 7 dias para desistir de
   compra feita fora da loja física. É o selo de confiança mais forte que a
   gente tem porque é verdade e é obrigação nossa. */
.bar-trust {
    background: var(--tato-navy); color:#fff;
    text-align:center; padding:9px 16px; font-size:13px;
    display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
.bar-trust svg { width:15px; height:15px; opacity:.85; flex-shrink:0; }
.bar-trust.is-stripe-test { background:#FFF1C9; color:#604600; font-weight:700; }
.bar-trust.is-stripe-test svg { opacity:1; }

/* Só existe quando há cupom real na Stripe — ver Billing::activePromotion(). */
.bar-promo {
    background: var(--tato-lime); color: var(--tato-navy);
    text-align:center; padding:9px 16px; font-size:13.5px; font-weight:600;
}
.bar-promo .promo-count { font-variant-numeric: tabular-nums; }

/* Faixa da Central de Campanhas (dono, 28/10/2026): mesmo lugar e padrão da
   barra do topo (.bar-trust), presa ao topo durante a rolagem, em todas as
   telas de compra. As cores vêm da campanha (--offer-bg/--offer-fg no <body>)
   e valem também para as pílulas "Economize"; sem campanha, as da marca. */
.bar-trust.bar-offer {
    position: sticky; top: 0; z-index: 30;
    background: var(--offer-bg, var(--tato-lime)); color: var(--offer-fg, var(--tato-navy));
    font-size: 13.5px; gap: 2px 8px;
}
.bar-offer svg { opacity: 1; }
.bar-offer strong { font-weight: 800; }

/* --------------------------------------------------------------------------
   Cabeçalho: só a marca. Nenhum menu, nenhuma busca, nenhum sino.
   Quem está decidindo comprar não pode ter para onde escapar sem querer.
   -------------------------------------------------------------------------- */
.venda-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 0; border-bottom:1px solid var(--venda-line);
}
.venda-head > a:first-child {
    display:inline-flex; align-items:center; min-height:44px;
}
.venda-head img { max-width: 174px; max-height: 50px; object-fit:contain; display:block; }
.venda-head .back {
    display:inline-flex; align-items:center; gap:6px;
    color: var(--venda-ink-2); font-size:13.5px; text-decoration:none; font-weight:500;
}
.venda-head .back:hover { color: var(--venda-ink); }
.venda-head .back svg { width:15px; height:15px; }

/* --------------------------------------------------------------------------
   Passos: mostra que existe um caminho e onde a pessoa está nele.
   Progresso visível reduz abandono — a pessoa sabe que falta pouco.
   -------------------------------------------------------------------------- */
.steps { display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 0; flex-wrap:wrap; }
.step { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color: var(--venda-ink-3); font-weight:500; }
.step .num {
    width:21px; height:21px; border-radius:50%; display:grid; place-items:center;
    background: var(--venda-line); color: var(--venda-ink-3); font-size:11.5px; font-weight:700; flex-shrink:0;
}
.step .num svg { width:12px; height:12px; stroke-width:3; }
/* REGRA DE COR DO FUNIL: lime (#93D63F) = ganho e conclusão; navy = ação e
   estrutura. Antes o lime só aparecia no cartão recomendado da etapa 1, e a
   cor mais viva da marca ficava de fora justamente das telas onde a pessoa
   está avançando. Agora ela marca cada coisa conquistada. */
.step.is-done { color: var(--venda-ink-2); }
.step.is-done .num { background: var(--tato-lime); color: var(--tato-navy); }
.step.is-now { color: var(--venda-ink); font-weight:700; }
.step.is-now .num { background: var(--tato-navy); color:#fff; }
.step-sep { width:22px; height:1px; background: var(--venda-line); flex-shrink:0; }

/* --------------------------------------------------------------------------
   Hero de cada etapa
   -------------------------------------------------------------------------- */
.hero {
    text-align:center;
    padding:42px 0 14px;
    position:relative;
    isolation:isolate;
    overflow:visible;
}
.hero::before {
    /* A atmosfera pertence à página, não à coluna de leitura. A largura do
       conteúdo continua limitada pelo container; só a camada decorativa
       atravessa toda a viewport, como na primeira etapa do funil. */
    content:''; position:absolute; z-index:-1;
    top:-80px; right:auto; bottom:-34px; left:50%; width:100vw;
    transform:translateX(-50%); clip-path:inset(80px 0 34px);
    background:
        radial-gradient(circle at 22% 34%, color-mix(in srgb, var(--arc-1) 18%, transparent), transparent 27%),
        radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--arc-4) 16%, transparent), transparent 25%),
        radial-gradient(circle at 52% 74%, color-mix(in srgb, var(--arc-2) 13%, transparent), transparent 30%);
    pointer-events:none;
}
.hero-kicker,
.compare-kicker,
.faq-kicker {
    display:flex; justify-content:center; align-items:center; gap:10px;
    color: var(--venda-ink-2); font-size:11.5px; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px;
}
.hero-kicker::before,
.compare-kicker::before,
.faq-kicker::before {
    content:''; width:34px; height:3px; border-radius:99px;
    background:linear-gradient(90deg, var(--arc-1), var(--arc-2), var(--arc-3), var(--arc-4), var(--arc-5));
}
.hero h1 { font-size:clamp(38px, 5vw, 58px); font-weight:500; letter-spacing:-.035em; line-height:1.05; }
.hero .sub { max-width:720px; margin:15px auto 0; font-size:17px; color: var(--venda-ink-2); line-height:1.65; }

/* Linha "todos os planos incluem" — a mesma da Wix: tira objeção comum antes
   de a pessoa começar a comparar. */
.included-line {
    display:flex; align-items:center; justify-content:center; gap:6px 22px; flex-wrap:wrap;
    margin-top:22px; font-size:13.5px; color: var(--venda-ink-2);
}
.included-line span { display:inline-flex; align-items:center; gap:6px; }
.included-line svg { width:14px; height:14px; color: var(--arc-2); flex-shrink:0; }

/* Aviso contextual do herói. UM componente e UMA aparência para os dois
   estados da tela de planos — assinante vê o próprio contrato, visitante vê a
   oferta de entrada, e a caixa é a mesma.
   Tentei antes distinguir por cor (lime = oferta, teal = contrato) e o efeito
   prático foi ruim: as duas telas ficaram com caixas de peso e cor
   diferentes no mesmo ponto, parecendo componentes distintos. Estar num plano
   também é uma conquista — as duas mensagens são positivas, então as duas
   usam o verde da marca. */
.hero-note {
    display:inline-flex; align-items:center; gap:8px; margin-top:16px;
    background:#F6FCEC; border:1px solid var(--tato-lime);
    color:#3D6B0A; font-size:13px; font-weight:500;
    padding:8px 17px; border-radius: var(--radius-full);
}
.hero-note strong { font-weight:700; }
.hero-note svg { width:15px; height:15px; flex-shrink:0; color:#6BA518; }
.hero-note-copy, .hero-note-primary, .hero-note-secondary { display:inline; }
.hero-note-secondary::before { content:' — '; }

/* --------------------------------------------------------------------------
   ETAPA 1 — cartões de plano
   -------------------------------------------------------------------------- */
.plans { padding:34px 0 8px; }
/* auto-fit + minmax: os cartões fluem conforme a contagem de planos.
   3 planos ficam centralizados (justify-content:center), 4 ocupam largura
   cheia. minmax(240px, 1fr) impede o cartão fino demais que o antigo auto-fit
   também já evitava; o resto é só deixar o grid respirar em vez de forçar
   uma 4ª coluna que não existe (vazio à direita quando há 3 planos). */
.plans-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    justify-content:center;
    gap:18px;
    align-items:stretch;
}

.plan {
    display:flex; flex-direction:column; position:relative;
    background:#fff; border:1px solid var(--venda-line); border-radius: var(--radius-lg);
    padding:26px 22px 24px;
    transition: box-shadow .18s ease, transform .18s ease;
}
.plan:hover { box-shadow: var(--venda-shadow-h); transform:translateY(-2px); }

/* O recomendado é um cartão NAVY sobre a página clara: impossível de não ver,
   sem precisar de seta, animação ou "mais popular!!!". A cor da marca
   trabalhando como destaque em vez de fundo. */
.plan.featured { background: var(--tato-navy); border-color: var(--tato-navy); box-shadow: var(--venda-shadow); }
.plan.featured h2, .plan.featured .price { color:#fff; }
.plan.featured .desc, .plan.featured .price-note { color: rgba(255,255,255,.72); }
.plan.featured li { color: rgba(255,255,255,.92); }
.plan.featured li small { color: rgba(255,255,255,.58); }
.plan.featured li.hasnt { color: rgba(255,255,255,.42); }
.plan.featured .feat-sep { background: rgba(255,255,255,.16); }

.plan.is-destaque { border-color: var(--tato-lime); box-shadow:0 0 0 3px rgba(147,214,63,.28); }

.plan-badge {
    position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    background: var(--tato-lime); color: var(--tato-navy);
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    padding:4px 13px; border-radius: var(--radius-full); white-space:nowrap;
}
/* "SEU PLANO" no mesmo verde de "MAIS POPULAR": os dois são selo de destaque
   do cartão e não devem parecer componentes diferentes. Quem distingue os
   casos é a palavra, não a cor. Em teal, a tela do assinante ficava sem
   nenhum #93D63F — a cor da marca sumia justamente para quem já é cliente. */
.plan-badge.is-current { background: var(--tato-lime); color: var(--tato-navy); }

.plan h2 { font-size:20px; font-weight:600; }
/* Reserva DUAS linhas: as descrições variam de tamanho ("Para botar o negócio
   no ar" x "Para ter seu próprio endereço .com.br") e, com espaço para uma só,
   o cartão de descrição maior empurrava o preço para baixo — os preços
   deixavam de ficar na mesma linha entre os cartões, que é justamente o
   alinhamento que permite comparar de relance. */
.plan .desc { font-size:13px; color: var(--venda-ink-2); margin-top:3px; min-height:44px; line-height:1.5; }

/* Preço em Inter, não em Fredoka: numeral de display arredondado a 42px lê
   como brinquedo. Dinheiro pede grotesca, peso alto e tabular-nums para os
   dígitos não dançarem entre um cartão e outro. */
.plan .price {
    font-family: var(--font-body); font-size:40px; font-weight:800;
    letter-spacing:-.03em; line-height:1; margin-top:14px;
    font-variant-numeric: tabular-nums;
}
.plan .price .cents { font-size:22px; font-weight:700; letter-spacing:-.02em; }
.plan .price .per { font-size:14px; font-weight:500; color: var(--venda-ink-2); letter-spacing:0; }
/* min-height reserva as DUAS linhas (por dia + ciclo mais longo) para os
   cartões não ficarem com o separador desalinhado quando um plano tem
   desconto de período e o outro não. */
.plan .price-note { font-size:12px; color: var(--venda-ink-3); margin-top:7px; min-height:34px; line-height:1.45; }

.feat-sep { height:1px; background: var(--venda-line); margin:20px 0 16px; }

.plan ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.plan li { display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color: var(--venda-ink); }
.plan li svg { width:15px; height:15px; flex-shrink:0; margin-top:3.5px; color: var(--arc-2); }
.plan li.hasnt { color: var(--venda-ink-3); }
.plan li.hasnt svg { color: var(--venda-ink-3); opacity:.6; }
.plan li.hasnt > span { text-decoration:line-through; }
.plan li small { display:block; font-size:11.5px; color: var(--venda-ink-3); text-decoration:none; line-height:1.45; margin-top:1px; }
.plan-catalog-mobile { display:none; }

.plan .cta { margin-top:auto; padding-top:22px; }

/* --------------------------------------------------------------------------
   Botões — UM primário por decisão. Nada mais no cartão compete com ele.
   -------------------------------------------------------------------------- */
.btn {
    display:block; width:100%; text-align:center; cursor:pointer;
    font-family:inherit; font-size:14.5px; font-weight:600; text-decoration:none;
    padding:13px 20px; border-radius: var(--radius); border:1.5px solid transparent;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    /* line-height EXPLÍCITA: sem ela, <button> e <a> com esta mesma classe
       saem com alturas diferentes (45px x 51px), porque o navegador aplica
       `line-height: normal` ao <button> e o herdado ao <a>. Ficava visível na
       tela de planos do assinante, que tem dois botões desativados na mesma
       fileira dos links de compra — os botões não alinhavam com nada. */
    line-height:1.6;
}
/* HOVER — a mesma ideia nos dois tipos de botão: o contorno acende.
   O botão branco acende em navy; o botão navy acende em lima. É o par natural
   (cada um acende na cor que o outro usa de fundo), e é o que traz o
   #93D63F para dentro do gesto de clicar, não só para os selos.

   A linha tem 3px: a borda de 1,5px acesa + 1,5px de anel de sombra colado
   a ela. É feita assim, e não com uma borda grossa, porque `box-shadow` não
   entra no cálculo de layout — o botão não muda de tamanho nem empurra o
   próprio texto ao passar o mouse. */
.btn-primary { background: var(--tato-navy); color:#fff; }
.btn-primary:hover {
    background:#06264f;
    border-color: var(--tato-lime);
    box-shadow: 0 0 0 1.5px var(--tato-lime);
    transform:translateY(-1px);
}
.btn-outline { background:#fff; color: var(--tato-navy); border-color: var(--venda-line); }
.btn-outline:hover {
    border-color: var(--tato-navy);
    box-shadow: 0 0 0 1.5px var(--tato-navy);
}

/* No cartão navy o primário inverte para lima: contraste máximo e a cor mais
   viva do arco reservada para o único botão que traz dinheiro. Como o fundo
   já É lima, o contorno dele acende em navy — mesma lógica, invertida. */
.plan.featured .btn-primary { background: var(--tato-lime); color: var(--tato-navy); }
.plan.featured .btn-primary:hover {
    background:#a3e34d;
    border-color: var(--tato-navy);
    box-shadow: 0 0 0 1.5px var(--tato-navy);
}
.plan.featured .btn-outline { background:transparent; color:#fff; border-color: rgba(255,255,255,.34); }
/* Sobre o cartão navy, o hover do contorno também acende em lima — a regra
   geral do `.btn-outline` acenderia em navy, que sobre navy é invisível. */
.plan.featured .btn-outline:hover {
    border-color: var(--tato-lime);
    box-shadow: 0 0 0 1.5px var(--tato-lime);
}
/* Botão desativado nos cartões de plano ("Plano ativo", "Plano de entrada")
   NÃO usa opacidade: ele não é um botão quebrado, é um estado — a informação
   de que aquele plano já é o seu. Com `opacity:.5` sobre o cartão navy o
   texto branco ficava quase ilegível. Aqui ele vira uma faixa sólida discreta,
   legível nos dois fundos. */
.btn:disabled { cursor:default; transform:none; }
.plan .btn:disabled {
    background: var(--venda-wash-2); color: var(--venda-ink-2);
    border-color: var(--venda-line);
}
.plan.featured .btn:disabled {
    background: rgba(255,255,255,.13); color: rgba(255,255,255,.88);
    border-color: rgba(255,255,255,.28);
}
.btn-lg { font-size:16px; padding:15px 28px; }
.btn-auto { width:auto; display:inline-block; }

/* Confiança colada no botão, onde a dúvida acontece — não num rodapé.
   Dentro do cartão de plano o espaço é RESERVADO mesmo quando não há texto:
   como os cartões têm altura igual e o bloco do botão é ancorado embaixo, um
   cartão sem esta linha empurrava o próprio botão 35px para baixo e a fileira
   de botões deixava de se alinhar. */
.trust-inline {
    display:flex; align-items:center; justify-content:center; gap:5px;
    font-size:11.5px; color: var(--venda-ink-3); margin-top:10px;
}
/* Uma linha de texto exata, com ou sem conteúdo — `em` acompanha a
   line-height da própria regra, então não descola se a fonte mudar. */
.plan .trust-inline { min-height:1.6em; }
.trust-inline svg { width:12px; height:12px; flex-shrink:0; }
/* Selo oficial "Powered by Stripe" nas telas antes do pagamento (dono,
   25/10/2026): confiança à vista, logo abaixo do botão. */
.stripe-badge { display:flex; justify-content:center; margin-top:12px; }
.stripe-badge img { display:block; width:120px; height:auto; }
.checkout-resume {
    display:block; width:max-content; max-width:100%; margin:12px auto 0;
    color:var(--venda-ink-2); font-size:12.5px; font-weight:600;
    text-align:center; text-decoration:underline; text-underline-offset:3px;
}
.checkout-resume:focus-visible {
    outline:3px solid color-mix(in srgb, var(--tato-lime) 75%, transparent);
    outline-offset:4px; border-radius:3px;
}
.plan.featured .trust-inline { color: rgba(255,255,255,.6); }
.cta-error { font-size:12.5px; color:#B4232A; margin-top:9px; text-align:center; }

/* Bandeiras aceitas, ao lado do botão. Texto e não imagem: logo de bandeira
   é marca de terceiro, e uma pílula sóbria cumpre o mesmo papel de conferir
   "meu cartão serve" sem hospedar arte que não é nossa. */
.card-brands { display:flex; justify-content:center; gap:7px; margin-top:11px; }
.card-brands span {
    font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    color: var(--venda-ink-3); border:1px solid var(--venda-line);
    border-radius:4px; padding:4px 9px; background:#fff;
}
.plan.featured .cta-error { color:#FFB4B4; }

/* --------------------------------------------------------------------------
   ETAPA 2 — escolha de ciclo (linhas de rádio, maior compromisso primeiro)
   -------------------------------------------------------------------------- */
.cycle-list { display:flex; flex-direction:column; gap:11px; margin:30px 0 0; }
.cycle-row {
    display:flex; align-items:center; gap:15px; cursor:pointer;
    background:#fff; border:1.5px solid var(--venda-line); border-radius: var(--radius);
    padding:18px 20px; transition: border-color .15s ease, background .15s ease;
}
.cycle-row:hover { border-color: var(--arc-2); }
.cycle-row input { position:absolute; opacity:0; width:0; height:0; }
.cycle-row .dot {
    width:20px; height:20px; border-radius:50%; border:2px solid var(--venda-line);
    flex-shrink:0; display:grid; place-items:center; transition: border-color .15s ease;
}
.cycle-row .dot::after { content:''; width:10px; height:10px; border-radius:50%; background:transparent; transition: background .15s ease; }
.cycle-row.is-on { border-color: var(--tato-navy); background: var(--venda-wash-2); }
.cycle-row.is-on .dot { border-color: var(--tato-navy); }
.cycle-row.is-on .dot::after { background: var(--tato-navy); }

.cycle-name { font-size:16px; font-weight:700; min-width:104px; flex-shrink:0; }
/* Complemento do nome curto: "à vista" / "pago por mês" (padrão Wix, 28/10). */
.cycle-name small { display:block; font-size:12px; font-weight:500; color: var(--venda-ink-2); margin-top:1px; }
.cycle-money { flex:1; min-width:0; }
.cycle-total { display:block; font-size:16px; font-weight:600; font-variant-numeric: tabular-nums; }
/* Preço cheio do período no mensal: a referência que torna a economia visível. */
.cycle-anchor { font-weight:400; color: var(--venda-ink-3); margin-right:6px; }
/* A frase que faz o plurianual ser escolhido: traduz o valor grande de uma
   vez para o mensal que a pessoa já tem na cabeça. */
.cycle-equiv { display:block; font-size:13px; color: var(--venda-ink-2); margin-top:2px; font-variant-numeric: tabular-nums; }
/* Economia é ganho — logo, lime. É o selo que decide o período escolhido.
   Segue as cores da campanha no ar (Central de Campanhas). */
.cycle-save {
    flex-shrink:0; background: var(--offer-bg, var(--tato-lime)); color: var(--offer-fg, var(--tato-navy));
    font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    padding:5px 11px; border-radius: var(--radius-full);
    white-space:nowrap;
}

/* --------------------------------------------------------------------------
   ETAPA 3 — confirmação (resumo + termos antes de sair para a Stripe)
   -------------------------------------------------------------------------- */
.summary { display:grid; grid-template-columns: 1.25fr .85fr; gap:22px; margin-top:30px; align-items:start; }
.panel { background:#fff; border:1px solid var(--venda-line); border-radius: var(--radius-lg); padding:26px; }
.panel h2 { font-size:17px; font-weight:600; margin-bottom:16px; }
.panel-quiet { background: var(--venda-wash-2); }

.sum-row { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--venda-line); font-size:14px; }
.sum-row:last-of-type { border-bottom:none; }
.sum-row .k { color: var(--venda-ink-2); }
.sum-row .v { font-weight:600; text-align:right; font-variant-numeric: tabular-nums; }
.sum-total { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-top:14px; padding-top:16px; border-top:2px solid var(--tato-navy); }
.sum-total .k { font-size:15px; font-weight:600; }
.sum-total .v { font-family: var(--font-body); font-size:28px; font-weight:800; letter-spacing:-.02em; font-variant-numeric: tabular-nums; }

.guarantee { display:flex; gap:11px; align-items:flex-start; margin-top:18px; font-size:13px; color: var(--venda-ink-2); }
/* Garantia e recurso incluso são ganhos — lime, com o traço mais forte para
   segurar contraste em ícone pequeno sobre fundo branco. */
.guarantee svg { width:18px; height:18px; color:#6BA518; flex-shrink:0; margin-top:2px; stroke-width:2.4; }
.guarantee strong { color: var(--venda-ink); display:block; font-size:13.5px; }

/* Linha de economia no resumo da etapa 3: o número que a pessoa ganha. */
.sum-row.is-gain .v { color:#4E7C12; font-weight:700; }
.sum-row.is-gain .k { color:#4E7C12; }
.promotion-note { margin-top:12px; color:var(--venda-ink-2); font-size:12.5px; }
.promotion-note svg { width:13px; height:13px; color:var(--arc-2); vertical-align:-2px; }

/* Renovação automática dita com todas as letras, antes do pagamento: é
   exigência legal de informação e, na prática, o que evita estorno depois. */
.legal { font-size:12px; color: var(--venda-ink-2); line-height:1.6; margin-top:18px; }
.legal a { color: var(--venda-ink-2); }
.commercial-acceptance {
    display:flex; align-items:flex-start; gap:9px; margin-top:18px; padding:12px;
    border:1px solid var(--venda-line); border-radius:var(--radius); background:var(--venda-wash-2);
    color:var(--venda-ink-2); font-size:13px; line-height:1.5;
}
.commercial-acceptance input[type="checkbox"] { width:18px; height:18px; margin:1px 0 0; accent-color:var(--arc-3); flex:0 0 auto; }
.commercial-acceptance label { cursor:pointer; min-height:44px; min-width:0; overflow-wrap:anywhere; }
.commercial-acceptance-versions { display:block; margin-top:6px; font-size:12px; }
.commercial-acceptance + .btn:disabled { opacity:.55; }
.commercial-acceptance a { color:var(--venda-ink); font-weight:700; }
.commercial-acceptance input:focus-visible { outline:2px solid var(--venda-ink); outline-offset:2px; }
.commercial-acceptance a:focus-visible { outline:2px solid var(--venda-ink); outline-offset:3px; border-radius:2px; }

/* --------------------------------------------------------------------------
   Campos da conta na etapa 3 — o cadastro deixou de ser tela separada
   -------------------------------------------------------------------------- */
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field-wide { grid-column:1 / -1; }
.field label { font-size:13px; font-weight:600; color: var(--venda-ink); }
.field input,
.field textarea,
.field select {
    font-family:inherit; font-size:15px; color: var(--venda-ink);
    padding:11px 13px; border:1.5px solid var(--venda-line); border-radius: var(--radius-sm);
    background:#fff; width:100%; transition: border-color .15s ease;
}
.field textarea { min-height:104px; resize:vertical; line-height:1.5; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline:none; border-color: var(--tato-navy); }
.field small { font-size:11.5px; color: var(--venda-ink-3); }
.fiscal-intro { color:var(--venda-ink-2); font-size:13px; line-height:1.55; margin:0 0 16px; }
.fiscal-optional { font-weight:400; color:var(--venda-ink-2); }

/* Erro no topo do formulário: na tela do pagamento, mensagem discreta é
   mensagem não lida — e a pessoa fica achando que o botão está quebrado. */
.form-alert {
    display:flex; align-items:flex-start; gap:10px;
    background:#FDECEC; border:1px solid #E8A0A0; color:#8E1B22;
    border-radius: var(--radius); padding:13px 16px; font-size:13.5px; margin:18px 0;
}
.form-alert svg { width:17px; height:17px; flex-shrink:0; margin-top:1px; }
/* Aviso que não é erro ("enviamos o link", "senha alterada"): neutro, no
   mesmo tom da caixa de aceite. Vermelho fica só para erro (dono, 26/10/2026). */
.form-alert.is-neutral { background: var(--venda-wash-2); border-color: var(--venda-line); color: var(--venda-ink-2); }
.form-alert.is-neutral svg { color: var(--venda-confirm); }

.inc-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
.inc-list li { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; }
.inc-list svg { width:15px; height:15px; color: var(--arc-2); flex-shrink:0; margin-top:3.5px; }
.inc-list small { display:block; font-size:11.5px; color: var(--venda-ink-3); }

/* --------------------------------------------------------------------------
   ETAPA 4 — obrigado
   -------------------------------------------------------------------------- */
/* Conclusão: o lime cheio, sem contorno. É a única tela em que a marca pode
   comemorar — a pessoa acabou de comprar. */
.done-mark {
    width:66px; height:66px; border-radius:50%; margin:0 auto 20px;
    display:grid; place-items:center; background: var(--tato-lime);
}
.done-mark svg { width:32px; height:32px; color: var(--tato-navy); stroke-width:3; }
.next-steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:14px; margin-top:28px; text-align:left; }
.next-step { background:#fff; border:1px solid var(--venda-line); border-radius: var(--radius); padding:18px; }
.next-step .n { font-size:11.5px; font-weight:700; color: var(--arc-2); text-transform:uppercase; letter-spacing:.05em; }
.next-step strong { display:block; font-size:14.5px; margin:5px 0 3px; }
.next-step span { font-size:12.5px; color: var(--venda-ink-2); }

/* --------------------------------------------------------------------------
   Comparativo, selos, FAQ, rodapé — o rodapé comum das telas do funil
   -------------------------------------------------------------------------- */
.compare-link { text-align:center; padding:26px 0 0; }
.compare-link a { color: var(--venda-ink-2); font-size:13.5px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; border-bottom:1px solid var(--venda-line); padding-bottom:2px; }
.compare-link a:hover { color: var(--venda-ink); border-color: var(--tato-navy); }
.compare-link svg { width:14px; height:14px; }

.compare {
    position:relative; padding:86px 0 24px;
    background:linear-gradient(180deg, #fff 0, var(--venda-wash-2) 18%, #fff 100%);
}
.compare-intro { max-width:760px; margin:0 auto 34px; text-align:center; }
.compare-intro h2 { font-size:clamp(34px, 4vw, 48px); font-weight:500; letter-spacing:-.03em; line-height:1.08; }
.compare-intro > p:last-child { color:var(--venda-ink-2); font-size:15.5px; line-height:1.7; margin-top:13px; }
.compare-kicker { margin-bottom:14px; }
.presence-map { display:grid; grid-template-columns:repeat(var(--stage-count, 4), minmax(0, 1fr)); max-width:1000px; margin:0 auto 42px; position:relative; }
.presence-map::before {
    content:''; position:absolute; left:12%; right:12%; top:16px; height:3px;
    border-radius:99px; background:linear-gradient(90deg, var(--arc-1), var(--arc-2), var(--arc-3), var(--arc-4), var(--arc-5));
}
.presence-map-item { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.presence-map-item span {
    width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
    background:#fff; border:3px solid var(--stage-accent); color:var(--venda-ink);
}
.presence-map-item span svg { width:16px; height:16px; stroke-width:2.2; }
.presence-map-item strong { font-family:var(--font-display); font-size:15px; font-weight:600; }
.compare-full { background:#fff; border:1px solid var(--venda-line); border-radius:var(--radius-lg); box-shadow:var(--venda-shadow); overflow:hidden; scroll-margin-top:20px; }
.compare-table-title { padding:24px 28px 20px; font-size:28px; font-weight:600; }
.compare-scroll { overflow-x:auto; background:#fff; border-top:1px solid var(--venda-line); width:100%; max-width:100%; min-width:0; }
.compare table { width:100%; border-collapse:collapse; min-width:600px; }
/* Padding lateral 24px (não 16): a coluna de nomes tem texto corrido e
   não pode ficar colada na borda lateral da tabela em nenhuma viewport.
   Mesmo no mobile rolável, ao repousar no início da scroll, o texto do
   th precisa de respiro visível — reduziu a sensação de "colado na li-
   nha lateral esquerda" observada em /planos. */
.compare th, .compare td { padding:13px 24px; text-align:center; font-size:13.5px; border-bottom:1px solid var(--venda-line); }
.compare thead th { background:color-mix(in srgb, var(--stage-accent) 7%, white); }
/* Nome do plano e rotulo de leitura, nao titulo de display. Inter em tamanho
   corrente deixa as colunas nitidas sem o aspecto comprimido da Fredoka
   pequena e pesada. */
.compare thead th.plan-col {
    font-family:var(--font-body); font-size:16px; font-weight:500;
    line-height:1.4; letter-spacing:-.01em;
}
.compare thead th:first-child { text-align:left; }
.compare tbody th { text-align:left; font-weight:400; color: var(--venda-ink-2); }
/* Segunda linha do nome do recurso: o que ele faz, lido do catálogo de
   módulos. Fica menor e mais claro que o nome, para explicar sem competir
   com ele. `max-width` porque a coluna é a única com texto corrido — sem
   limite, uma descrição longa espremeria as colunas de plano. */
.compare tbody th strong { display:block; font-weight:600; color: var(--venda-ink); }
.compare tbody th small { display:block; max-width:360px; margin-top:3px; font-size:11.5px; line-height:1.45; color: var(--venda-ink-3); }
.compare-status { display:inline-flex; align-items:center; justify-content:center; gap:5px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.compare-status svg { width:14px; height:14px; }
.compare-status.is-in {
    color:#111;
    font-weight:800;
}
.compare-status.is-in svg { stroke-width:2.8; }
.compare-status.is-above { color:var(--venda-line); font-size:22px; line-height:1; }
.compare td small { display:block; font-size:10.5px; color: var(--venda-ink-3); margin-top:2px; }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom:none; }

.compare tbody tr.compare-product-row { background:color-mix(in srgb, var(--product-accent) 7%, white); }
.compare tbody tr.compare-product-row th,
.compare tbody tr.compare-product-row td { padding-top:17px; padding-bottom:17px; }
.compare tbody tr.compare-product-row th {
    position:relative; padding-left:28px;
}
.compare tbody tr.compare-product-row th::before {
    content:''; position:absolute; left:12px; top:17px; bottom:17px;
    width:4px; border-radius:99px; background:var(--product-accent);
}
.compare-product-icon {
    width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
    color:var(--venda-ink); background:color-mix(in srgb, var(--product-accent) 18%, white);
}
.compare-product-icon svg { width:20px; height:20px; }
.compare-product-content { display:grid; grid-template-columns:42px minmax(0, 1fr); gap:13px; align-items:center; }
.compare-product-copy { min-width:0; }
.compare tbody tr.compare-product-row th strong { font-size:14px; font-weight:700; }

.trust-row { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; padding:64px 0; }
.trust-row > div { flex:1; min-width:210px; max-width:300px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:9px; }
.trust-row svg { width:24px; height:24px; color: var(--arc-2); }
.trust-row strong { font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.trust-row span { font-size:12.5px; color: var(--venda-ink-2); }

/* Faixa clara da marca, como a lavanda da Wix — separa "decidir" de "tirar
   dúvida" sem cortar a página com uma linha dura. */
.faq-band { background:linear-gradient(180deg, #fff 0, var(--venda-wash) 16%, var(--venda-wash) 84%, #fff 100%); padding:74px 0; }
.faq-grid { display:grid; grid-template-columns:minmax(260px, .72fr) minmax(0, 1.4fr); gap:68px; align-items:start; max-width:1120px; margin:0 auto; padding:0 20px; }
.faq-grid h2 { font-size:clamp(30px, 3.5vw, 44px); font-weight:500; line-height:1.08; letter-spacing:-.025em; }
.faq-kicker { justify-content:flex-start; margin-bottom:13px; }
.faq-grid .aside { font-size:13.5px; color: var(--venda-ink-2); margin-top:12px; }
.faq-grid .aside a { color:#0d6b58; }
.faq details { border-bottom:1px solid rgba(3,26,57,.10); padding:15px 2px; }
.faq details:last-child { border-bottom:none; }
.faq summary { cursor:pointer; font-weight:600; font-size:14.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:''; width:9px; height:9px; border-right:2px solid var(--venda-ink-2); border-bottom:2px solid var(--venda-ink-2); transform:rotate(45deg) translateY(-2px); flex-shrink:0; transition: transform .18s ease; }
.faq details[open] summary::after { transform:rotate(-135deg) translateY(-2px); }
.faq p { font-size:13.5px; color: var(--venda-ink-2); margin-top:9px; }

.venda-foot { border-top:1px solid var(--venda-line); padding:26px 0 40px; font-size:13px; color: var(--venda-ink-2); }
.venda-foot .inner { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.venda-foot a { color: var(--venda-ink-2); }
.venda-foot img { max-height:26px; max-width:130px; object-fit:contain; opacity:.75; }

.fineprint { text-align:center; font-size:11.5px; color: var(--venda-ink-3); padding:22px 0 0; max-width:820px; margin:0 auto; }

/* --------------------------------------------------------------------------
   TELA DE CARTÃO ÚNICO — login, cadastro, recuperação de senha, contato
   --------------------------------------------------------------------------
   Estas telas ficam NO MEIO do funil: o cartão grátis leva ao cadastro, a
   confirmação linka o login, o cancelamento linka o contato. Elas eram fundo
   navy escuro com cartão branco no centro — o padrão anterior do projeto — e
   quem vinha do funil claro sentia que tinha trocado de site na hora mais
   sensível.
   Agora usam a mesma tela clara, a mesma tipografia, os mesmos campos e o
   mesmo botão do funil. Continuam sendo cartão centralizado, que é o formato
   certo para um formulário curto — muda a moldura, não a estrutura.
   -------------------------------------------------------------------------- */
.venda-solo {
    min-height:100vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:32px 20px 44px;
}
.venda-solo .brand {
    display:inline-flex; align-items:center; min-height:44px; margin-bottom:22px;
}
.venda-solo .brand img { max-width: 174px; max-height: 50px; object-fit:contain; display:block; }
.solo-card {
    background:#fff; border:1px solid var(--venda-line); border-radius: var(--radius-lg);
    box-shadow: var(--venda-shadow); padding:34px 32px; width:100%; max-width:440px;
}
.solo-card.is-wide { max-width:560px; }
.solo-card h1 { font-size:25px; font-weight:700; text-align:center; letter-spacing:-.01em; }
.solo-card .solo-sub { text-align:center; color: var(--venda-ink-2); font-size:13.5px; margin-top:7px; margin-bottom:24px; }
.solo-card .field + .field { margin-top:14px; }
.solo-card .btn { margin-top:20px; }

/* Convite administrativo: conserva a casca arejada do funil, mas deixa claro
   que o cadastro já existe e que a próxima ação é apenas revisar. */
.payment-invitation-page { padding-bottom: 20px; }
.payment-invitation-card { max-width: 620px; margin: 28px auto 0; display: grid; gap: 20px; box-shadow: var(--venda-shadow); }
.payment-invitation-client { display: flex; align-items: center; gap: 11px; padding-bottom: 17px; border-bottom: 1px solid var(--venda-line); }
.payment-invitation-client > svg { width: 24px; height: 24px; color: var(--arc-2); flex: 0 0 auto; }
.payment-invitation-client > span { display: grid; gap: 1px; min-width: 0; }
.payment-invitation-client small { color: var(--venda-ink-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.payment-invitation-client strong { color: var(--venda-ink); font-size: 15px; }
.payment-invitation-client em { color: var(--venda-ink-2); font-size: 12.5px; font-style: normal; overflow-wrap: anywhere; }
.payment-invitation-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.payment-invitation-summary div { display: grid; gap: 3px; }
.payment-invitation-summary span { color: var(--venda-ink-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.payment-invitation-summary strong { color: var(--venda-ink); font-size: 16px; }
.payment-invitation-note { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid var(--venda-line); border-radius: var(--radius); background: var(--venda-wash-2); color: var(--venda-ink-2); font-size: 12.5px; line-height: 1.5; }
.payment-invitation-note > svg { width: 16px; height: 16px; color: var(--arc-2); flex: 0 0 auto; margin-top: 1px; }
.payment-invitation-card > .btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.payment-invitation-card > .btn svg { width: 17px; height: 17px; }

@media (max-width: 560px) {
    .payment-invitation-summary { grid-template-columns: 1fr; gap: 10px; }
    .payment-invitation-card { padding: 21px; }
}
.solo-foot { text-align:center; font-size:13px; color: var(--venda-ink-2); margin-top:20px; }
.solo-foot a { color: var(--venda-ink); font-weight:600; }
.solo-foot .session-action__link { color: var(--venda-ink); font-weight:600; }
.solo-note { text-align:center; font-size:12.5px; color: var(--venda-ink-3); margin-top:18px; }

/* Faixa de contexto dentro do cartão (plano escolhido, dias de teste). */
.solo-pill {
    display:flex; align-items:flex-start; gap:10px; margin-bottom:20px;
    background:#F6FCEC; border:1px solid var(--tato-lime); border-radius: var(--radius);
    padding:12px 14px; font-size:12.5px; color: var(--venda-ink-2);
}
.solo-pill strong { display:block; color:#3D6B0A; font-size:13.5px; }
.solo-pill svg { width:17px; height:17px; color:#6BA518; flex-shrink:0; margin-top:1px; }
.solo-pill--plan { background:var(--venda-wash); border-color:var(--arc-2); }
.solo-pill--plan svg,
.solo-pill--plan strong { color:var(--venda-confirm); }

/* WhatsApp exige a cor oficial dele; o componente ainda pertence ao casco de
   venda para não criar uma folha ou estilo isolado para a tela de contato. */
.contact-whatsapp {
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:13px; border-radius:var(--radius-sm); background:var(--venda-whatsapp); color:#fff;
    font-size:15px; font-weight:600; text-decoration:none; transition:filter .15s;
}
.contact-whatsapp:hover { filter:brightness(.94); }
.contact-whatsapp svg { width:18px; height:18px; }
.contact-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--venda-ink-3); font-size:12px; }
.contact-divider::before,
.contact-divider::after { content:''; flex:1; height:1px; background:var(--venda-line); }

/* Login — uma arte local é sorteada pelo servidor em assets/auth/. A imagem
   fica na moldura; o cartão continua opaco o bastante para a autenticação
   funcionar até quando uma futura arte tiver mais contraste. */
.venda-solo.auth-login {
    min-height:100dvh;
    position:relative;
    isolation:isolate;
    overflow-x:hidden;
    padding:104px 20px 44px;
    background:var(--venda-wash-2);
}
.venda-solo.auth-login::before {
    content:'';
    position:fixed;
    z-index:-2;
    inset:0;
    background-color:var(--venda-wash-2);
    background-image:var(--auth-login-bg, none);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    pointer-events:none;
}
.auth-login .brand {
    position:absolute;
    z-index:1;
    top:clamp(24px, 4vw, 42px);
    left:clamp(24px, 5vw, 64px);
    margin:0;
    isolation:isolate;
}
.auth-login .brand::before {
    content:'';
    position:absolute;
    z-index:-1;
    top:50%;
    left:50%;
    width:clamp(156px, 16vw, 214px);
    height:clamp(92px, 10vw, 132px);
    border-radius:50%;
    transform:translate(-50%, -50%);
    background:radial-gradient(ellipse, var(--surface) 0 44%, color-mix(in srgb, var(--surface) 78%, transparent) 64%, transparent 100%);
    filter:blur(13px);
    pointer-events:none;
}
.auth-login .solo-card {
    position:relative;
    z-index:1;
    max-width:440px;
    border-color:color-mix(in srgb, var(--tato-navy) 9%, transparent);
    border-radius:18px;
    box-shadow:var(--shadow-lg), var(--shadow-sm);
    background:color-mix(in srgb, var(--surface) 94%, transparent);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .auth-login .solo-card { backdrop-filter:blur(12px); }
}
.auth-login .solo-card::before {
    content:'';
    display:block;
    width:42px;
    height:3px;
    margin:0 auto 18px;
    border-radius:99px;
    background:linear-gradient(90deg, var(--arc-1), var(--arc-2), var(--arc-3), var(--arc-4), var(--arc-5));
}
.auth-login .solo-card h1 { font-size:32px; font-weight:600; }
.auth-login .solo-card .solo-sub { margin-bottom:28px; }

/* --------------------------------------------------------------------------
   Responsivo — o público (MEI, autônomo) decide no celular.
   -------------------------------------------------------------------------- */
@media (max-width:1000px) {
    .plans-grid { grid-template-columns:repeat(2, 1fr); }
    .summary { grid-template-columns:1fr; }
    .faq-grid { grid-template-columns:1fr; gap:20px; }
}
@media (max-width:640px) {
    .summary .panel { padding:18px; }
    .summary .field input,
    .summary .field textarea,
    .summary .field select { font-size:16px; }
    .venda-head { padding:12px 0; }
    .venda-head img,
    .venda-solo .brand img { max-width:128px; max-height:42px; }
    .form-grid-2 { grid-template-columns:1fr; }
    .hero { padding-top:34px; }
    .hero h1 { font-size:36px; }
    .hero .sub { font-size:15px; }
    .hero-note-trial {
        max-width:100%; padding:10px 15px; border-radius:20px;
        align-items:flex-start; text-align:left; line-height:1.45;
    }
    .hero-note-trial svg { margin-top:3px; }
    .hero-note-trial .hero-note-copy,
    .hero-note-trial .hero-note-primary,
    .hero-note-trial .hero-note-secondary { display:block; }
    .hero-note-trial .hero-note-secondary { margin-top:1px; font-size:12px; font-weight:500; }
    .hero-note-trial .hero-note-secondary::before { content:none; }
    .plans-grid { grid-template-columns:1fr; }
    .plan .price { font-size:36px; }
    .plan > .plan-feature-list { display:none; }
    .plan-catalog-mobile { display:block; margin-top:2px; }
    .plan-catalog-mobile summary {
        display:flex; align-items:center; justify-content:space-between; gap:12px;
        padding:11px 0; border-top:1px solid var(--venda-line);
        color:var(--venda-ink-2); cursor:pointer; font-size:12.5px; font-weight:700;
        list-style:none;
    }
    .plan-catalog-mobile summary::-webkit-details-marker { display:none; }
    .plan-catalog-summary-icon {
        width:22px; height:22px; border:1px solid var(--venda-line); border-radius:50%;
        display:grid; place-items:center; flex:0 0 auto; font-size:17px; line-height:1;
    }
    .plan-catalog-mobile[open] .plan-catalog-summary-icon { transform:rotate(45deg); }
    .plan-catalog-mobile ul { padding-top:8px; }
    .plan.featured .plan-catalog-mobile summary { border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.8); }
    .plan.featured .plan-catalog-summary-icon { border-color:rgba(255,255,255,.28); }
    .steps { gap:5px; }
    .step-sep { width:12px; }
    .step .lbl { display:none; }
    .cycle-row { flex-wrap:wrap; gap:10px 13px; padding:16px; }
    .cycle-name { min-width:0; }
    .cycle-money { flex:1 1 100%; order:3; }
    .trust-row { gap:26px; }
    .faq-grid h2 { font-size:27px; }
    .presence-map { grid-template-columns:1fr; gap:14px; margin-bottom:30px; }
    .presence-map::before { left:16px; right:auto; top:16px; bottom:16px; width:3px; height:auto; background:linear-gradient(180deg, var(--arc-1), var(--arc-2), var(--arc-3), var(--arc-4), var(--arc-5)); }
    .presence-map-item { flex-direction:row; justify-content:flex-start; gap:12px; }
    .compare-table-title { padding:20px; font-size:25px; }
    .compare tbody th small { display:block; font-size:10.5px; }
    .venda-solo.auth-login { padding:88px 16px 28px; }
    .auth-login .brand { top:22px; left:20px; }
    .auth-login .solo-card { padding:30px 24px; }
}
@media (max-width:360px) {
    .summary .sum-total { flex-direction:column; align-items:stretch; gap:4px; }
    .summary .sum-total .v { text-align:right; white-space:nowrap; }
    .summary .btn-lg { padding-inline:16px; }
}
@media (prefers-reduced-motion: reduce) {
    .plan, .btn, .cycle-row, .faq summary::after { transition:none; }
    .plan:hover, .btn-primary:hover { transform:none; }
}
.contract-checkout-document { margin-block: 1.25rem; }
.contract-checkout-document summary { cursor: pointer; font-weight: 500; padding-block: .75rem; }
/* Caixa de leitura com altura fixa e rolagem própria, como no contrato de
   licença de um instalador (dono, 26/10/2026): a página não cresce com o
   documento e o "Li e aceito" fica logo abaixo, à vista. */
.contract-checkout-text {
    white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6;
    max-height: 16rem; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 14px; border: 1px solid var(--venda-line); border-radius: var(--radius);
    background: var(--venda-wash-2); color: var(--venda-ink-2); font-size: 13px;
}
.contract-checkout-text:focus-visible { outline: 2px solid var(--arc-2); outline-offset: 2px; }
@media (max-width:640px) { .contract-checkout-text { max-height: 12rem; } }
.contract-checkout-agreement { display: flex; align-items: flex-start; gap: .75rem; margin-block: 1.5rem; line-height: 1.5; }
.contract-checkout-agreement input { flex-shrink: 0; margin-top: .25rem; }

/* Popup do contrato na tela de contratação (dono, 28/10/2026): o contrato é
   lido ali, sem tela extra. Texto com rolagem própria, como o do instalador. */
.link-button {
    display:inline; padding:0; border:0; background:none; cursor:pointer;
    font:inherit; font-weight:700; color:var(--venda-ink); text-decoration:underline; text-underline-offset:2px;
}
.link-button:focus-visible { outline:2px solid var(--venda-ink); outline-offset:3px; border-radius:2px; }
.contract-dialog {
    width:min(720px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:22px 24px;
    border:1px solid var(--venda-line); border-radius:var(--radius-lg); background:#fff; color:var(--venda-ink);
    box-shadow:0 24px 64px rgba(3, 26, 57, .28); overflow-y:auto;
}
.contract-dialog::backdrop { background:color-mix(in srgb, var(--tato-navy) 60%, transparent); }
.contract-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.contract-dialog-head h2 { margin:0; font-family:var(--font-display); font-size:22px; }
.contract-dialog-close { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:50%; background:none; cursor:pointer; color:var(--venda-ink); }
.contract-dialog-close:hover { background:var(--venda-wash-2); }
.contract-dialog-note { margin:6px 0 14px; color:var(--venda-ink-2); font-size:13px; line-height:1.5; }
.contract-dialog-text {
    white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; max-height:55dvh; overflow-y:auto; overscroll-behavior:contain;
    padding:12px 14px; border:1px solid var(--venda-line); border-radius:var(--radius);
    background:var(--venda-wash-2); color:var(--venda-ink-2); font-size:13px;
}
.contract-dialog-text[hidden] { display:none; }
.contract-dialog-text:focus-visible { outline:2px solid var(--arc-2); outline-offset:2px; }
.contract-dialog-actions { display:flex; justify-content:flex-end; margin-top:16px; }

/* Botão de pagamento com cadeado (dono, 28/10/2026, como o da Wix). */
.btn-secure { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; }
.btn-secure svg { width:18px; height:18px; flex-shrink:0; }

/* Resumo no padrão da Wix (dono, 28/10/2026): nome do plano, selo de economia, lista de confiança. */
.sum-plan { font-weight:700; color:var(--venda-ink); margin:0 0 6px; }
.sum-badge { display:inline-block; padding:2px 8px; border-radius:4px; background:var(--offer-bg, var(--tato-lime)); color:var(--offer-fg, var(--tato-navy)); font-size:12px; font-weight:700; text-transform:uppercase; }
.trust-list { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; justify-items:center; }
.trust-list li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--venda-ink); }
.trust-list svg { width:20px; height:20px; flex-shrink:0; color:var(--arc-3); }

/* Aceite no clique do botão (dono, 28/10/2026, como a Wix): texto colado ao CTA, sem caixa. */
.accept-note { margin:18px 0 0; font-size:12px; line-height:1.6; color:var(--venda-ink-2); }
.accept-note a, .accept-note .link-button { color:var(--venda-ink); font-weight:600; text-decoration:underline; }

/* [hidden] precisa vencer o display:flex do .field (representante só para empresa; endereço resumido). */
.field[hidden], .form-grid-2[hidden] { display:none; }

/* Telas de entrada (login e cadastro) — título dentro do campo (dono, 28/10/2026).
   O título nasce dentro da caixa e, ao focar ou digitar, sobe e fica pequeno no alto
   dela: continua sendo um <label> de verdade (leitor de tela, preenchimento automático)
   e a tela fica sem uma linha de texto acima de cada campo. O estado "preenchido" vem do
   placeholder vazio (" ") e de :has(), já que o password-field.js põe o botão de mostrar
   senha entre o campo e qualquer irmão. */
.float-field { position:relative; }
.float-field label {
    position:absolute; z-index:1; left:14px; top:17px; margin:0; max-width:calc(100% - 60px);
    font-size:15px; font-weight:400; line-height:1.2; color:var(--venda-ink-3);
    pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:top .15s ease, font-size .15s ease, color .15s ease;
}
.float-field input { height:54px; padding-top:22px; padding-bottom:7px; padding-left:14px; }
.float-field:focus-within label,
.float-field:has(input:not(:placeholder-shown)) label,
.float-field:has(input:-webkit-autofill) label { top:8px; font-size:11px; color:var(--venda-ink-2); }
@media (prefers-reduced-motion: reduce) { .float-field label { transition:none; } }
.auth-login .solo-card .solo-sub { margin-bottom:22px; }
.auth-login .solo-card .solo-sub a { color:var(--venda-ink); font-weight:600; text-decoration:underline; }
.auth-login .accept-note { text-align:center; font-size:11.5px; line-height:1.55; color:var(--venda-ink-3); margin:18px 0 0; }
.auth-login .accept-note a { color:var(--venda-ink-2); font-weight:500; }
.auth-login .email-hint { margin-top:-4px; }
.float-field:has(input:placeholder-shown) .password-strength { display:none; }
.float-field:has(textarea:not(:placeholder-shown)) label { top:8px; font-size:11px; color:var(--venda-ink-2); }
.float-field textarea { padding:26px 14px 10px; min-height:132px; }

/* Widget da Cloudflare (Turnstile, modo "só se precisar"): vazio não ocupa espaço. */
.bot-widget { display:flex; justify-content:center; margin-top:12px; }
.bot-widget:empty { display:none; }