/* Loop Mais — tokens oficiais de marca.
   Fonte da verdade: public/assets/design_handoff_loop_mais/brand.css + identidade-visual.html
   (kit de rebrand "Loop+", alta-fidelidade — reproduzido aqui exatamente, sem reinterpretação).
   Isolado de public/css/style.css (--loop-*): o app autenticado continua com seu próprio tema
   (inclusive a marca por tenant aplicada em runtime por public/js/branding.js); estes tokens
   (--lp-*) valem só para as páginas públicas de marketing/checkout, que são a vitrine do
   produto Loop Mais, não de uma empresa-cliente específica. */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --lp-roxo: #6C33A2;
  --lp-roxo-hover: #3B1D5C;
  --lp-roxo-suave: #5A2A89;
  --lp-amarelo: #FFB90A;
  --lp-amarelo-texto: #8A6400;
  --lp-uva: #3B1D5C;
  --lp-lilas: #9A6BC7;
  --lp-lilas-claro: #C9A8E8;
  --lp-nevoa: #F4EFF9;
  --lp-branco: #FBF9FD;
  --lp-borda: #EAE0F5;
  --lp-texto: #3B1D5C;
  --lp-texto-corpo: #5C4A73;

  --lp-font-titulo: 'Baloo 2', sans-serif;
  --lp-font-corpo: 'Nunito', sans-serif;

  --lp-raio-card: 24px;
  --lp-raio-pill: 999px;

  /* Sombras com o matiz da própria marca (nunca preto puro), como recomenda o padrão de
     qualidade adotado neste redesign — dá profundidade sem parecer genérico. */
  --lp-sombra-suave: 0 10px 30px rgba(108, 51, 162, .08);
  --lp-sombra-media: 0 20px 48px rgba(108, 51, 162, .14);
  --lp-sombra-forte: 0 28px 64px rgba(59, 29, 92, .28);
}

body.lp-theme {
  font-family: var(--lp-font-corpo);
  color: var(--lp-texto-corpo);
  background: var(--lp-branco);
}

.lp-theme h1,
.lp-theme h2,
.lp-theme h3 {
  font-family: var(--lp-font-titulo);
  font-weight: 800;
  color: var(--lp-texto);
  text-wrap: balance;
}

.lp-theme a {
  color: var(--lp-roxo);
}

.lp-theme a:hover {
  color: var(--lp-amarelo-texto);
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--lp-font-titulo);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--lp-raio-pill);
  background: var(--lp-roxo);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.lp-btn:hover {
  background: var(--lp-roxo-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--lp-sombra-media);
}

.lp-btn:active {
  transform: translateY(0) scale(.98);
}

.lp-btn:focus-visible {
  outline: 2px solid var(--lp-uva);
  outline-offset: 3px;
}

.lp-btn--destaque {
  background: var(--lp-amarelo);
  color: var(--lp-uva);
}

.lp-btn--destaque:hover {
  background: #fff;
  color: var(--lp-uva);
}

.lp-btn--fantasma {
  background: transparent;
  color: var(--lp-roxo);
  border: 1.5px solid var(--lp-borda);
}

.lp-btn--fantasma:hover {
  background: var(--lp-nevoa);
  border-color: var(--lp-lilas-claro);
  color: var(--lp-roxo);
  box-shadow: none;
}

.lp-card {
  background: #fff;
  border: 1px solid var(--lp-borda);
  border-radius: var(--lp-raio-card);
  padding: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .lp-btn {
    transition: none;
  }
}