/*
  Página de venda (F3, 24/10/2026), na identidade "Identidade · Engine" do app: fundo #0F0F11, superfície #1A1A1E,
  divisória #26262B, texto #F4F4F5 e #A1A1AA, azul #2563EB só em ação, âmbar e verde só em estado. Inter para ler e
  Cascadia Mono para números. O produto real (capturas do app) no lugar de ilustração. Sem degradê, brilho, vidro,
  card dentro de card, maiúsculas espaçadas ou animação de enfeite. Celular primeiro: 16 px de margem e nada que role
  para o lado.
*/
:root {
  --fundo: #0F0F11; --sup: #1A1A1E; --sup-2: #212126; --linha: #26262B; --borda: #3A3A40;
  --texto: #F4F4F5; --texto-2: #A1A1AA; --texto-3: #8B8B94;
  --acao: #2563EB; --acao-hover: #1D4ED8; --foco: #3B82F6; --bom: #22C55E; --atencao: #F5A524;
  /* Sem fonte de fora: Inter se estiver instalada, senão a do sistema (a página desenha na hora e não chama terceiros). */
  --ler: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --medir: 'Cascadia Mono', 'Cascadia Code', Consolas, ui-monospace, monospace;
  --margem: clamp(16px, 4vw, 48px); --largura: 1120px; --raio: 12px; --raio-p: 8px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 16px/1.6 var(--ler); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--foco); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--acao); color: #fff; }
.num { font-family: var(--medir); font-variant-numeric: tabular-nums; font-variant-ligatures: none; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--largura), 100% - 2 * var(--margem)); margin-inline: auto; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 16px; background: var(--acao); color: #fff; border-radius: 6px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; }

/* Botões: alvo de 44 px no celular, azul só na ação principal */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 8px; font: 600 15px/1 var(--ler); text-decoration: none; cursor: pointer; transition: background-color 120ms ease-out; }
.botao-principal { background: var(--acao); color: #fff; }
.botao-principal:hover { background: var(--acao-hover); }
.botao-linha { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px var(--borda); }
.botao-linha:hover { background: var(--sup-2); }
.botao-grande { min-height: 48px; padding: 0 22px; font-size: 16px; }
.botao-pequeno { min-height: 36px; padding: 0 14px; font-size: 14px; }
.botao-largo { width: 100%; }
.botao[hidden] { display: none; }
.link-discreto { color: var(--texto-2); font-size: 14px; text-decoration: none; }
.link-discreto:hover { color: var(--texto); }

/* Navegação */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(15, 15, 17, .94); box-shadow: inset 0 -1px 0 var(--linha); }
.nav-linha { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); font-weight: 600; text-decoration: none; }
.nav-links { display: none; gap: 24px; margin: 0; padding: 0; list-style: none; }
.nav-links a { color: var(--texto-2); font-size: 14px; text-decoration: none; }
.nav-links a:hover { color: var(--texto); }
.nav-acoes { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* Topo: a promessa e o produto real */
.topo { padding: 40px 0 48px; }
.topo-grade { display: grid; gap: 32px; }
.sobre { color: var(--texto-2); font-size: 14px; font-weight: 500; }
h1 { margin-top: 8px; font-size: clamp(32px, 6.2vw, 56px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.lead { margin-top: 16px; max-width: 640px; color: var(--texto-2); font-size: clamp(16px, 2.2vw, 18px); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.fatos { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--texto-2); font-size: 14px; }
.fatos b { color: var(--texto); font-weight: 600; }
.tela { margin: 0; }
.tela img { width: 100%; border-radius: var(--raio-p); box-shadow: 0 0 0 1px var(--linha); background: var(--sup); }
.tela figcaption { margin-top: 10px; color: var(--texto-3); font-size: 13px; }

/* Seções */
.secao { padding: 64px 0; }
.secao-sup { background: #131316; box-shadow: inset 0 1px 0 var(--linha), inset 0 -1px 0 var(--linha); }
.titulo { font-size: clamp(26px, 4.4vw, 40px); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.sub { margin-top: 12px; max-width: 680px; color: var(--texto-2); font-size: 17px; }

.passos { display: grid; gap: 48px; margin: 32px 0 0; padding: 0; list-style: none; }
.passo { display: grid; gap: 16px; }
.passo-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--borda); color: var(--texto); font-size: 14px; }
.passo h3 { font-size: 20px; line-height: 1.3; }
.passo p { margin-top: 6px; color: var(--texto-2); max-width: 560px; }

.grade-recursos { display: grid; gap: 1px; margin: 32px 0 0; padding: 0; list-style: none; border-radius: var(--raio); overflow: hidden; background: var(--linha); box-shadow: 0 0 0 1px var(--linha); }
.grade-recursos li { padding: 20px; background: var(--sup); }
.grade-recursos h3 { font-size: 16px; }
.grade-recursos p { margin-top: 4px; color: var(--texto-2); font-size: 15px; }

.duas-colunas { display: grid; gap: 20px; }
.lista-honesta p { color: var(--texto-2); font-size: 17px; }
.lista-honesta ul { display: grid; gap: 8px; margin: 16px 0 0; padding-left: 20px; color: var(--texto); }

/* Preços */
.barra { height: 6px; margin-top: 12px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.barra span { display: block; height: 100%; width: 0; background: var(--atencao); }
.planos { display: grid; gap: 16px; margin-top: 28px; }
.plano { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--raio); background: var(--sup); box-shadow: inset 0 0 0 1px var(--linha); }
.plano-destaque { box-shadow: inset 0 0 0 2px var(--acao); }
.plano h3 { font-size: 18px; }
.selo { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--sup-2); color: var(--texto); font-size: 13px; font-weight: 600; }
.preco b { font-size: 32px; font-weight: 600; }
.preco span { color: var(--texto-2); }
.plano .nota { flex: 1; color: var(--texto-2); font-size: 15px; }
.garantias { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.garantias li { display: flex; gap: 12px; align-items: flex-start; color: var(--texto-2); font-size: 15px; }
.garantias b { color: var(--texto); }
.garantias .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: var(--bom); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.comparar { margin-top: 28px; }
.comparar summary { cursor: pointer; color: var(--foco); font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.comparar table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 15px; }
.comparar th, .comparar td { padding: 10px 8px; text-align: left; box-shadow: inset 0 -1px 0 var(--linha); }
.comparar thead th { color: var(--texto-2); font-weight: 500; }
.comparar tbody th { font-weight: 400; }

/* Perguntas */
.perguntas { display: grid; gap: 24px; }
.perguntas details { box-shadow: inset 0 -1px 0 var(--linha); }
.perguntas summary { display: flex; align-items: center; min-height: 56px; padding: 8px 0; cursor: pointer; font-weight: 600; list-style: none; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; margin-left: auto; padding-left: 16px; color: var(--texto-2); font: 400 22px/1 var(--medir); }
.perguntas details[open] summary::after { content: "\2212"; }
.perguntas details p { padding: 0 0 18px; color: var(--texto-2); max-width: 720px; }

/* Lista de espera */
.final-grade { display: grid; gap: 24px; }
.espera label { display: block; margin-bottom: 8px; font-weight: 500; }
.espera-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.espera input { flex: 1 1 240px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--borda); color: var(--texto); font: 400 16px var(--ler); }
.espera input:focus { outline: 2px solid var(--foco); outline-offset: 1px; }
.espera .botao { min-height: 48px; }
.espera .nota { margin-top: 10px; color: var(--texto-3); font-size: 13px; }
.espera-retorno { margin-top: 10px; min-height: 24px; font-size: 15px; }
.espera-retorno.ok { color: var(--bom); }
.espera-retorno.erro { color: var(--atencao); }
.no-celular p { color: var(--texto-2); margin-bottom: 12px; }

/* Rodapé */
.rodape { padding: 32px 0 48px; color: var(--texto-3); font-size: 14px; box-shadow: inset 0 1px 0 var(--linha); }
.rodape-grade { display: grid; gap: 12px; }
.rodape ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.rodape a { color: var(--texto-2); }

/* Faixa do modo demonstração (cf.js) */
.faixa-demo { padding: 8px 0; background: var(--sup-2); color: var(--texto-2); font-size: 14px; }

@media (min-width: 760px) {
  .planos { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .grade-recursos { grid-template-columns: repeat(2, 1fr); }
  .garantias { grid-template-columns: repeat(3, 1fr); }
  .duas-colunas, .final-grade { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .perguntas { grid-template-columns: 1fr 2fr; gap: 48px; }
}
@media (min-width: 960px) {
  .nav-links { display: flex; }
  .topo { padding: 72px 0 64px; }
  .secao { padding: 96px 0; }
  .grade-recursos { grid-template-columns: repeat(4, 1fr); }
  .passo { grid-template-columns: 40px 1fr; column-gap: 16px; }
  .passo .tela { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao { transition: none; }
}

/* O foguete do CleanForce (marca do site, mantido a pedido do Ruã em 24/10/2026), igual à página anterior: a trilha
   tracejada, o foguete que escreve as frases-chave e a lixeira onde ele pousa no fim. Lógica em foguete.js. */
.lixeira{position:relative;width:clamp(80px,8.5vw,112px)}
.lixeira svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 100%}
.lixeira path,.lixeira circle{fill:none;stroke:#5A5A60;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .6s}
.lixeira .lx-corpo,.lixeira .lx-tampa path{fill:var(--fundo)}
.lixeira .lx-riscos{stroke:#3A3A40;transition:opacity .4s}
.lixeira .lx-check{stroke:var(--foco);stroke-width:2.6;stroke-dasharray:42;stroke-dashoffset:42;transition:stroke-dashoffset .3s}
.lixeira .lx-faiscas path{stroke:var(--foco);opacity:0}
.lixeira .lx-mini{opacity:0}
.lixeira .lx-mini path,.lixeira .lx-mini circle{stroke:var(--foco);stroke-width:1.3}
.lx-mini .t-chama{transform-box:fill-box;transform-origin:50% 0;animation:chama .18s linear infinite alternate}
.lx-tampa{transform-box:view-box;transform-origin:89px 27px;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.lixeira.aberta .lx-tampa{transform:rotate(72deg);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.lixeira.cheia .lx-corpo,.lixeira.cheia .lx-tampa path{stroke:var(--texto)}
.lixeira.cheia .lx-riscos{opacity:0}
.lixeira.cheia .lx-check{stroke-dashoffset:0;transition:stroke-dashoffset .55s cubic-bezier(.22,1,.36,1) .25s}
.lixeira.cheia svg{animation:quica .6s cubic-bezier(.22,1,.36,1) .1s}
.lixeira.cheia .lx-faiscas path{animation:faisca .7s ease-out .15s}
.lixeira.joga .lx-mini{animation:cai 1.5s cubic-bezier(.45,0,.2,1) both}
.lixeira.joga .lx-tampa{animation:abre 1.5s both}
@keyframes quica{35%{transform:scale(1.06,.94)}70%{transform:scale(.98,1.02)}}
@keyframes faisca{0%{opacity:0;transform:none}30%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes cai{0%{opacity:0;transform:translateY(-120px)}12%{opacity:1;transform:translateY(-120px)}78%,100%{opacity:1;transform:none}}
@keyframes abre{0%{transform:none}14%,80%{transform:rotate(72deg)}90%{transform:rotate(-5deg)}100%{transform:none}}
.lx-legenda{position:absolute;left:50%;top:100%;margin-top:8px;font-size:.8125rem;font-weight:500;line-height:1.2;color:var(--texto);white-space:nowrap;opacity:0;transform:translate(-50%,6px);transition:opacity .3s,transform .3s}
.lixeira.cheia .lx-legenda{opacity:1;transform:translate(-50%,0);transition:opacity .5s .55s,transform .5s cubic-bezier(.22,1,.36,1) .55s}
main{position:relative}
main>section>.wrap{position:relative;z-index:1}
.trilha{position:absolute;left:0;top:0;width:100%;height:0;z-index:0;pointer-events:none;overflow:visible}
.t-rota{fill:none;stroke:rgba(237,237,239,.07);stroke-width:1.25;stroke-dasharray:4 9;stroke-linecap:round}
.t-feito{fill:none;stroke:rgba(59,130,246,.45);stroke-width:1.25;stroke-dasharray:4 9;stroke-linecap:round}
.trilha-topo{z-index:3}
.t-frente path,.t-frente circle{stroke:var(--foco)}
.t-atras,.t-frente{transition:opacity .3s}
.t-foguete path,.t-foguete circle{fill:none;stroke:rgba(59,130,246,.75);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.t-foguete .t-chama{stroke:rgba(59,130,246,.5);transform-box:fill-box;transform-origin:50% 0;animation:chama .18s linear infinite alternate}
@keyframes chama{from{transform:scaleY(.7)}to{transform:scaleY(1.1)}}
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pl{white-space:nowrap}
/* Frase-chave: o foguete passa e cada letra ganha a cor do texto principal e o sublinhado azul de 2 px. */
.parada .l{background:linear-gradient(var(--foco),var(--foco)) no-repeat 0 100%/0 2px;transition:color .4s,background-size .35s cubic-bezier(.22,1,.36,1)}
.parada .l.on,.parada.escrita .l{color:var(--texto);background-size:100% 2px}
.parada.escrita .l{transition-delay:calc(var(--i)*26ms)}
html.medindo [data-reveal]{transform:none!important;transition:none!important}
@media (max-width:859px){.trilha{display:none}}

.t-frente{opacity:0}
.lx-faiscas path:nth-child(1){--dx:0;--dy:-6px}
.lx-faiscas path:nth-child(2){--dx:-5px;--dy:-5px}
.lx-faiscas path:nth-child(3){--dx:5px;--dy:-5px}
.lx-faiscas path:nth-child(4){--dx:-6px;--dy:-3px}
.lx-faiscas path:nth-child(5){--dx:6px;--dy:-3px}
.final-marca{display:flex;align-items:flex-end;gap:20px;margin-bottom:24px}
@media (max-width:859px){.lx-legenda{left:100%;top:auto;bottom:6px;margin:0 0 0 16px;transform:translate(0,6px)}.lixeira.cheia .lx-legenda{transform:none}}
@media (prefers-reduced-motion:reduce){.trilha{display:none}.parada .l,.lixeira svg,.lixeira *{animation:none!important;transition-duration:1ms!important}}