/* Celular (< 900 px): ajustes de ritmo e de toque. Carregado por último.
   Regra: nada que só enfeite — cada ajuste encurta o caminho até a conversa ou deixa o gesto mais claro. */
@media (max-width: 899px) {
  :root { --respiro: 64px; }

  /* Cabeçalho enxuto: só a logo (o convite já está no topo da página e no botão fixo). */
  .topo .miolo { min-height: 56px; }
  .topo-lp .botao { display: none; }
  .topo .marca img { width: 104px; height: auto; }

  /* Topo: a tela de exemplo mais compacta (quatro números em linha, linhas da tabela mais baixas). */
  .lp-abertura { padding-top: 48px; }
  .lp-abertura .destaque { margin-bottom: 24px; }
  .app-principal { padding: 14px; gap: 12px; }
  .app-kpis { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .tela-kpi { padding: 10px 8px; }
  .tela-kpi strong { font-size: 22px; }
  .tela-kpi span { font-size: 10px; line-height: 1.2; display: block; }
  .tabela td { padding: 8px 6px; font-size: 12px; }
  .tabela .chip { font-size: 11px; padding: 3px 8px; }

  /* O topo avança sobre a seção seguinte; aqui a folga é menor (sem o buraco cinza). */
  .lp-etapas .rolagem-e1 { padding-top: calc(var(--respiro) + 48px); }

  /* Antes e depois: no celular não é arrastar. Dois botões trocam o lado inteiro, com a divisória deslizando. */
  .lp-comparar input[type=range], .lp-comparar .comparar-alca, .lp-comparar .comparar-convite { display: none; }
  .lp-comparar { height: 610px; }
  .lp-comparar .comparar-depois { transition: clip-path 700ms var(--ease-suave, ease-out); }
  .lp-comparar .comparar-lado { padding: 18px; gap: 14px; }
  .lp-cmp-linhas li { height: auto; min-height: 0; padding: 11px 0; }
  .comparar-antes .lp-cmp-linhas b, .comparar-depois .lp-cmp-linhas b, .lp-zap, .lp-aviso-ok, .lp-arquivo { max-width: none; }
  .lp-cmp-meta { display: block; }
  .lp-dica { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
  .lp-dica-meio { display: none; }
  .lp-dica-lado { min-height: 52px; font-size: 15px; opacity: 0.62; }
  .lp-dica-lado.ativo { opacity: 1; box-shadow: 0 0 0 2px currentColor inset; }
  .comparar-dica { display: none; }

  /* Conversa: menos ar em cima, cartão mais baixo. */
  .lp-conversa { padding: 72px 0 48px; align-items: flex-start; }
  .lp-conversa .cabeca-secao { margin-bottom: 20px; }
  .lp-conversa.passos-on #contato { min-height: 400px; }
  .cta-fixo { min-height: 52px; }
}