/* Emusys — padrão de landing page "cartão de app" (mobile-first, CTA único),
   usado por LPs de tráfego pago/social. Mesma estrutura visual das LPs que já
   convertem bem (site_novo/lps), só que os valores soltos (cores, fontes,
   sombras) foram trocados pelos tokens do design system (colors/typography/
   spacing/effects), pra ficar coerente com o site institucional.
   Classes prefixadas com `lp-` pra não colidir com as classes globais `emu-`. */

.lp-page-wrap {
  display: flex;
  justify-content: center;
}

.lp-page {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: var(--surface-page);
  overflow: hidden;
  position: relative;
}

.lp-nav {
  padding: var(--space-3) var(--space-5);
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  justify-content: center;
  align-items: center;
}

.lp-main {
  padding: var(--space-4) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Layout utilities ── */
.lp-section { padding-block: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }
.lp-section--tight { gap: var(--space-3); }
.lp-section--loose { gap: var(--space-6); }

.lp-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.lp-stack-sm { display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Typography ── */
.lp-title {
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
}
.lp-title--invert { color: #fff; }

.lp-text { color: var(--gray-600); font-size: var(--text-lg); line-height: var(--leading-normal); }
.lp-text-center { text-align: center; }

.lp-text-secondary { color: var(--gray-500); font-size: var(--text-sm); line-height: 1.5; }

.lp-card-title { color: var(--text-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.45; }
.lp-card-title--lg { font-size: var(--text-lg); line-height: 1.4; }

.lp-caption { text-align: center; color: var(--gray-500); font-size: var(--text-xs); line-height: 1.5; }

.lp-accent { color: var(--purple); }

.lp-badge {
  padding: 6px 14px;
  background: var(--purple-050);
  border-radius: var(--radius-pill);
  color: var(--purple);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-align: center;
  display: inline-block;
}

/* ── Buttons — full-width, alvo de toque grande (CTA de funil, não nav) ── */
.lp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border: none;
  cursor: pointer;
  width: 100%;
  text-decoration: none;
  transition: background .18s, opacity .18s;
}
.lp-btn-primary { height: 58px; background: var(--cta); color: #fff; box-shadow: var(--shadow-cta); }
.lp-btn-primary:hover { background: var(--cta-hover); }
.lp-btn-white { padding: 14px; background: #fff; color: var(--text-heading); }
.lp-btn-outline { height: var(--control-lg); background: #fff; border: 1px solid var(--border-default); color: var(--gray-600); }

/* ── Card ── */
.lp-card { background: var(--gray-050); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.lp-card--icon { padding: var(--space-4); display: flex; align-items: flex-start; gap: 14px; }
.lp-card--stat { padding: var(--space-4) 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }

/* ── Callout ── */
.lp-callout { border-radius: var(--radius-sm); background: var(--purple); color: #fff; padding: var(--space-4) var(--space-5); }
.lp-callout p { font-size: var(--text-md); line-height: var(--leading-normal); }
.lp-callout--muted { background: var(--gray-050); color: var(--gray-600); }
.lp-callout--accent { background: var(--purple-050); color: var(--purple-deep); }

/* ── Icon circle ── */
.lp-icon-circle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lp-icon-circle--bubble { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.lp-icon-circle--dark { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--navy); }
.lp-icon-circle--feature { width: 40px; height: 40px; border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.lp-icon-circle--benefit { width: 52px; height: 52px; border-radius: 14px; }

/* ── Hero ── */
.lp-hero { padding-top: var(--space-8); padding-bottom: var(--space-4); }
.lp-hero-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.lp-hero-headline {
  text-align: center;
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
}
.lp-hero-sub { font-size: var(--text-lg); max-width: 380px; margin: 0 auto; }
.lp-hero-cta { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 380px; margin: 0 auto; }
.lp-hero-stats { display: flex; gap: 10px; width: 100%; }
.lp-hero-stats > .lp-card--stat { flex: 1; margin-top: var(--space-4); }
.lp-stat-number { color: var(--purple); font-size: var(--text-xl); font-weight: var(--weight-extrabold); line-height: 1.3; }

/* ── Grids (mobile: coluna única; desktop: grid — ver media query) ── */
.lp-como-funciona-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.lp-benefits-grid { display: flex; flex-direction: column; gap: var(--space-8); }
.lp-features-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.lp-depoimentos-grid { display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Floating WhatsApp button ── */
.lp-whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-pill);
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform .15s;
}
.lp-whatsapp-float:hover { transform: scale(1.05); }

/* ── Depoimentos (prints, colapsável no mobile) ── */
.lp-depoimentos-wrap { position: relative; max-height: 900px; overflow: hidden; transition: max-height .5s ease; }
.lp-depoimentos-wrap.is-expanded { max-height: 9999px; }
.lp-depoimentos-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--surface-page));
  pointer-events: none;
  transition: opacity .3s;
}
.lp-depoimentos-wrap.is-expanded::after { opacity: 0; }
.lp-depoimento-card { border-radius: var(--radius-lg); border: 1px solid var(--border-default); overflow: hidden; background: #fff; }
.lp-depoimento-card img { width: 100%; display: block; }

/* ── Dark CTA ── */
.lp-dark-cta { background: var(--navy); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }

/* ── Footer ── */
.lp-footer { padding-top: var(--space-8); padding-bottom: var(--space-4); border-top: 1px solid var(--gray-100); display: flex; flex-direction: column; gap: var(--space-4); }
.lp-footer-brand { display: flex; align-items: center; justify-content: center; }

/* ══════════════════════════════════════════════════════════
   Desktop — abaixo desse breakpoint nada muda no layout mobile.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .lp-page-wrap { background: var(--gray-050); padding: var(--space-12) var(--space-6); }
  .lp-page { max-width: 980px; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

  .lp-nav { padding: var(--space-5) var(--space-12); }

  .lp-main { padding: var(--space-16) var(--space-12) var(--space-20); gap: var(--space-6); }

  .lp-section:not(.wide) { width: 100%; max-width: 640px; margin-inline: auto; }
  .lp-hero-inner, .lp-form-section, .lp-dark-cta { max-width: 640px; margin-inline: auto; width: 100%; }

  .lp-hero-headline { font-size: var(--text-5xl); line-height: 1.1; }
  .lp-title { font-size: var(--text-3xl); max-width: 720px; margin-inline: auto; }
  .lp-text { font-size: var(--text-lg); line-height: var(--leading-normal); }

  .lp-hero-stats { gap: var(--space-4); }

  .lp-section.wide > img { max-width: 480px; display: block; margin: 0 auto; }

  .lp-como-funciona-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .lp-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .lp-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
  .lp-depoimentos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }

  .lp-depoimentos-wrap { max-height: none; overflow: visible; }
  .lp-depoimentos-wrap::after { display: none; }
  .lp-load-more { display: none; }

  .lp-whatsapp-float { bottom: 32px; right: 32px; }
}