/**
 * Correções de layout da LP, aplicadas por fora do build da Lovable.
 *
 * CSS em vez de mexer no DOM: é mais estável, porque o React pode re-renderizar a árvore
 * a qualquer momento e desfazer mudanças feitas via JS — regra de estilo continua valendo.
 */

/* ── 1. Texto em gradiente virava um retângulo colorido ────────────────────────────────
 * O build da Lovable usa a classe `bg-clip-text`, mas essa regra NÃO EXISTE no CSS
 * compilado (conferido: nenhuma folha de estilo da página a define). Sem ela o elemento
 * fica com texto transparente sobre um gradiente de fundo inteiro — ou seja, some o texto
 * e sobra o bloco. Acontece no "agora mesmo" do título "Resultados que estão acontecendo".
 * O -webkit- vem junto porque Safari e Chrome ainda exigem o prefixo. */
.bg-clip-text {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* ── 2. Botões dos planos desalinhados ─────────────────────────────────────────────────
 * Os cards têm alturas de conteúdo diferentes, então cada botão parava numa altura. O card
 * vira coluna flex; `order` joga o botão pro fim (sem mexer no HTML) e `margin-top:auto`
 * come o espaço que sobra, encostando os três na base. A classe .lf-plano é posta pelo
 * nosso JS só nos três cards de preço, pra não pegar outros .glass-card da página. */
.lf-plano {
  display: flex;
  flex-direction: column;
}
.lf-plano > .lf-plano-cta {
  order: 99;
  margin-top: auto;
}

/* ── 3. "Entrar" solto no meio da barra ────────────────────────────────────────────────
 * A pílula usa justify-between: com 4 filhos (logo, menu, Entrar, CTA) o espaço se dividia
 * por igual e o Entrar boiava no meio. `margin-left:auto` absorve a folga antes dele, o que
 * gruda Entrar e "Começar agora" à direita, como um par. */
[data-liveflow-conta] {
  margin-left: auto;
}