/* =========================================================
   Pagar Meia — Landing page
   Folha independente: não depende de assets/style.css (que é do
   portal interno). Assim a landing carrega só o que usa e as duas
   identidades não brigam por especificidade.
   ========================================================= */

:root {
  /* ---- Paleta ---- */
  --navy: #12325B;        /* títulos */
  --action: #2588E8;      /* azul da marca: ícones, foco, detalhes (não texto pequeno) */
  --action-strong: #1B6FC4; /* botões e links — 5,05:1 com branco, passa em AA */
  --action-dark: #155A9F; /* hover do botão — 7:1 */
  --mint: #35D3A0;        /* confirmações e destaques */
  --mint-dark: #0E7355;   /* texto sobre fundo menta — 5,53:1, passa em AA */
  --blue-soft: #EDF7FF;
  --mint-soft: #EEFCF7;
  --warm: #FFFDF8;        /* fundo quente */
  --ink: #21334A;         /* texto principal */
  --ink-soft: #607086;    /* texto secundário */
  --line: #DCE8F1;        /* borda */
  --danger: #B42318;      /* somente erros */
  --white: #FFFFFF;

  /* ---- Formas ---- */
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---- Sombras: azuladas e suaves, nunca preto opaco ---- */
  --sh-1: 0 1px 2px rgba(18, 50, 91, .04), 0 4px 12px rgba(18, 50, 91, .05);
  --sh-2: 0 2px 6px rgba(18, 50, 91, .05), 0 12px 28px rgba(18, 50, 91, .07);
  --sh-3: 0 8px 20px rgba(18, 50, 91, .08), 0 24px 48px rgba(18, 50, 91, .09);

  /* ---- Ritmo ---- */
  --container: 1200px;
  --pad-x: 24px;
  --section-y: 104px;

  /* Uma família só. Pilha do sistema: zero requisição externa, zero
     bloqueio de renderização e nada de rastreio de terceiros. */
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI",
          system-ui, -apple-system, "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.lp {
  margin: 0;
  background: var(--warm);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* trava qualquer vazamento horizontal */
}

.lp img, .lp svg { display: block; max-width: 100%; }
.lp a { color: var(--action-strong); text-decoration: none; }
.lp a:hover { text-decoration: underline; }

/* ATENÇÃO ao mexer aqui: ".lp a" (0,1,1) vence ".lp-btn--primary" (0,1,0),
   então sem estas regras o rótulo do botão herda a cor de link e fica azul
   sobre azul — ilegível. Os seletores "a.classe" (0,2,0) resolvem. */
.lp a.lp-btn--primary { color: #fff; }
.lp a.lp-btn--ghost { color: var(--navy); }
.lp a.lp-btn--ghost:hover { color: var(--action-strong); }
.lp a.lp-btn--quiet { color: var(--navy); }
.lp a.lp-btn--quiet:hover { color: var(--action-strong); }
.lp a.lp-skip { color: #fff; }
.lp a.lp-brand { color: var(--navy); }
/* No cartão final o esquema inverte: fundo branco com texto azul-marinho */
.lp-final-card a.lp-btn--primary { color: var(--navy); }
.lp-final-card a.lp-btn--ghost,
.lp-final-card a.lp-btn--ghost:hover { color: #fff; }

/* Foco visível e consistente em tudo que é interativo */
.lp a:focus-visible,
.lp button:focus-visible,
.lp summary:focus-visible,
.lp [tabindex]:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Atalho para quem navega por teclado */
.lp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.lp-skip:focus { left: 0; }

.lp-container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--pad-x);
}

/* ---------- Tipografia ---------- */
.lp h1, .lp h2, .lp h3, .lp h4 {
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
.lp h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; line-height: 1.12; }
.lp h2 { font-size: clamp(27px, 3.4vw, 38px); font-weight: 800; }
.lp h3 { font-size: 19px; font-weight: 700; }
.lp h4 { font-size: 16.5px; font-weight: 700; }
.lp p { margin: 0; }
/* Parágrafos com largura de leitura controlada, alinhados à esquerda */
.lp-lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-soft); max-width: 62ch; }
.lp-note { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Seções ---------- */
.lp-section { padding-block: var(--section-y); }
.lp-section--tint { background: var(--blue-soft); }
.lp-section--mint { background: var(--mint-soft); }
.lp-section--white { background: var(--white); }

.lp-head { max-width: 640px; margin-bottom: 48px; }
.lp-head--center { margin-inline: auto; text-align: center; }
.lp-head--center .lp-lead { margin-inline: auto; }
.lp-head h2 + .lp-lead { margin-top: 14px; }

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--line);
  color: var(--navy); font-size: 14px; font-weight: 700;
  padding: 7px 15px; border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
}
.lp-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none; }

/* ---------- Botões ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 14px 26px;
  border: 2px solid transparent; border-radius: var(--r-sm);
  font-family: inherit; font-size: 16.5px; font-weight: 700; line-height: 1.2;
  cursor: pointer; text-align: center; text-decoration: none !important;
  transition: background-color .16s ease, border-color .16s ease, transform .12s ease;
}
.lp-btn--primary { background: var(--action-strong); color: #fff; box-shadow: var(--sh-2); }
.lp-btn--primary:hover { background: var(--action-dark); transform: translateY(-1px); }
.lp-btn--ghost { background: var(--white); color: var(--navy); border-color: var(--line); }
.lp-btn--ghost:hover { border-color: var(--action-strong); color: var(--action-strong); }
.lp-btn--quiet { background: transparent; color: var(--navy); min-height: 44px; padding: 10px 14px; font-size: 15.5px; }
.lp-btn--quiet:hover { color: var(--action-strong); }
.lp-btn--sm { min-height: 46px; padding: 11px 20px; font-size: 15px; }
.lp-btn--block { width: 100%; }
.lp-btn:active { transform: translateY(0); }
/* Um SVG sem width/height vira 300x150 (o padrão de elemento substituído)
   e estica o botão inteiro. */
.lp-btn svg { width: 18px; height: 18px; flex: none; }

.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Cartões ---------- */
.lp-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
  box-shadow: var(--sh-1);
}
.lp-card h3 { margin-bottom: 8px; }
.lp-card p { color: var(--ink-soft); font-size: 15.5px; }

.lp-grid { display: grid; gap: 22px; }
.lp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lp-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Ícone padrão dos cartões */
.lp-ico {
  width: 50px; height: 50px; flex: none;
  border-radius: var(--r-sm); display: grid; place-items: center;
  margin-bottom: 16px; color: var(--navy);
}
.lp-ico svg { width: 24px; height: 24px; }
.lp-ico--blue { background: var(--blue-soft); color: var(--action-strong); }
.lp-ico--mint { background: var(--mint-soft); color: var(--mint-dark); }
.lp-ico--warm { background: #FFF6E6; color: #A9752B; }

/* ---------- Selos ---------- */
.lp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 800; letter-spacing: .01em;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--mint-soft); color: var(--mint-dark);
  border: 1px solid #BFEFDD;
}
.lp-badge--blue { background: var(--blue-soft); color: var(--action-strong); border-color: #C7E3FA; }

/* =========================================================
   1. Cabeçalho
   ========================================================= */
.lp-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
}
/* NÃO usar backdrop-filter/filter/transform aqui: qualquer um deles faz o
   header virar bloco de contenção para descendentes "position: fixed", e o
   menu do celular (que é filho do header) deixaria de cobrir a tela toda,
   ficando preso à faixa de 74px. */

/* Quando o menu está aberto, o header precisa pintar ACIMA do fundo escuro.
   O header é contexto de empilhamento (tem z-index), então o menu lá dentro
   nunca passaria do scrim sem elevar o header inteiro. */
body.lp--menu-open .lp-header { z-index: 110; }
.lp-header-inner {
  height: 74px; display: flex; align-items: center; gap: 24px;
}
.lp-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.lp-brand:hover { text-decoration: none; }
.lp-brand-mark {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: linear-gradient(160deg, var(--mint-soft), var(--blue-soft));
  border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
}
.lp-brand-mark img { width: 86%; height: 86%; object-fit: contain; margin-bottom: -6%; }
.lp-brand-name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.lp-brand-name .w1 { color: var(--navy); }
.lp-brand-name .w2 { color: var(--mint-dark); }

.lp-nav { margin-left: auto; }
.lp-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lp-nav a {
  display: block; padding: 10px 13px; border-radius: 10px;
  font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.lp-nav a:hover { background: var(--blue-soft); color: var(--action-strong); text-decoration: none; }
/* "Baixar APP" na lista do menu: ícone junto do texto */
.lp-nav-app { display: inline-flex; align-items: center; gap: 6px; }
.lp-nav-app svg { width: 16px; height: 16px; flex: none; color: var(--action-strong); }
.lp-header-cta { display: flex; align-items: center; gap: 10px; flex: none; }

/* Estes três só existem no menu do celular. No desktop precisam ficar
   escondidos, senão o botão do menu aparece dentro da barra e estica o
   header além da altura prevista. */
.lp-burger,
.lp-menu-close,
.lp-nav > .lp-btn { display: none; }

/* =========================================================
   2. Hero
   ========================================================= */
.lp-hero { background: var(--warm); padding-block: 68px 84px; position: relative; overflow: hidden; }
/* manchas de cor muito suaves, sem pesar */
.lp-hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 620px; height: 620px; right: -180px; top: -240px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--blue-soft), transparent 70%);
}
.lp-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 54fr 46fr;
  gap: 48px; align-items: center;
}
.lp-hero h1 { margin: 18px 0 0; }
.lp-hero .lp-lead { margin-top: 18px; max-width: 52ch; }

.lp-hero-actions { margin-top: 28px; }
.lp-hero-micro { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); }
.lp-hero-app-link {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
}
.lp-hero-app-link svg { width: 16px; height: 16px; flex: none; color: var(--action-strong); }
.lp-hero-app-link strong { color: var(--action-strong); font-weight: 700; }
.lp-hero-app-link:hover { color: var(--navy); }
.lp-hero-app-link:hover strong { color: var(--navy); }

/* Personagem do hero, dentro de forma orgânica */
.lp-hero-art { position: relative; display: flex; justify-content: center; }
.lp-hero-blob {
  position: relative; width: 100%; max-width: 440px;
  display: flex; align-items: flex-end; justify-content: center;
}
.lp-hero-blob::before {
  content: ""; position: absolute; inset: 6% 0 4%;
  background: linear-gradient(165deg, var(--blue-soft) 0%, var(--mint-soft) 100%);
  border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
}
.lp-hero-blob img {
  position: relative; width: 100%; height: auto;
  /* sombra colorida e suave, nunca preta */
  filter: drop-shadow(0 16px 22px rgba(18, 50, 91, .16));
  animation: lp-float 6s ease-in-out infinite;
}
@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.lp-art-tag {
  position: absolute; z-index: 2; bottom: 8%; left: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 9px 15px;
  font-size: 14px; font-weight: 700; color: var(--navy);
  box-shadow: var(--sh-2);
}
.lp-art-tag svg { width: 16px; height: 16px; color: var(--mint-dark); }

/* =========================================================
   4. Faixa de confiança
   ========================================================= */
.lp-trust { background: var(--white); border-block: 1px solid var(--line); padding-block: 26px; }
.lp-trust ul {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px 26px; list-style: none; margin: 0; padding: 0;
}
.lp-trust li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.45;
}
.lp-trust svg { width: 21px; height: 21px; flex: none; color: var(--mint-dark); margin-top: 1px; }

/* =========================================================
   5. Processo em três etapas
   ========================================================= */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.lp-step { position: relative; display: flex; flex-direction: column; }
.lp-step-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--action-strong); color: #fff;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800; margin-bottom: 16px;
}
.lp-step h3 { margin-bottom: 8px; }
.lp-step p { color: var(--ink-soft); font-size: 15.5px; }
.lp-step-extra { margin-top: 14px; }

/* rostinho acompanhando a etapa 3 */
.lp-step-face {
  position: absolute; top: -22px; right: 16px;
  width: 56px; height: auto; z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(18, 50, 91, .16));
}

.lp-recap {
  margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 8px 14px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 14px 24px;
  font-weight: 700; color: var(--navy); font-size: 15.5px;
  box-shadow: var(--sh-1);
}
.lp-recap svg { width: 17px; height: 17px; color: var(--mint-dark); }

/* =========================================================
   6. Onde utilizar
   ========================================================= */
.lp-places { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.lp-place {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px 12px; text-align: center;
}
.lp-place svg { width: 28px; height: 28px; margin: 0 auto 10px; color: var(--action); }
.lp-place span { font-size: 14.5px; font-weight: 700; color: var(--navy); }

/* Aviso de condições: visível, do mesmo tamanho do corpo do texto */
.lp-legal {
  margin-top: 32px; display: flex; gap: 15px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--mint); border-radius: var(--r-md);
  padding: 22px 24px;
}
.lp-legal svg { width: 24px; height: 24px; flex: none; color: var(--mint-dark); margin-top: 2px; }
.lp-legal p { font-size: 16px; line-height: 1.6; }
.lp-legal p + p { margin-top: 10px; color: var(--ink-soft); font-size: 15px; }

/* =========================================================
   7. Meta do lançamento (contador de contas criadas)
   ========================================================= */
.lp-meta { padding-block: calc(var(--section-y) * .72); }
.lp-meta-card {
  max-width: 720px; margin-inline: auto; text-align: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  padding: 40px 44px 34px;
}
.lp-meta-card h2 { margin-top: 14px; }

/* Número grande + rótulo, numa linha só que quebra bem no celular */
.lp-meta-numeros {
  display: flex; align-items: baseline; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-top: 20px;
}
.lp-meta-numeros b {
  font-size: clamp(44px, 9vw, 64px); font-weight: 800; line-height: 1;
  color: var(--action-strong); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.lp-meta-numeros span { font-size: 16px; color: var(--ink-soft); font-weight: 600; }

/* ---- Barra ----
   O mascote e o fim do preenchimento leem a MESMA variável
   (--meta-pos, escrita no HTML), então nunca saem de sincronia. */
.lp-meta-trilho {
  position: relative;
  margin-top: 74px;  /* espaço para o mascote, que fica acima da barra */
}
.lp-meta-barra {
  position: relative; height: 14px; border-radius: var(--r-pill);
  background: var(--blue-soft); overflow: hidden;
}
.lp-meta-preenchida {
  position: absolute; inset: 0 auto 0 0; width: var(--meta-pos, 0%);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--action) 0%, var(--mint) 100%);
}

.lp-meta-marcador {
  position: absolute; bottom: calc(100% + 8px);
  /* clamp evita que o mascote vaze para fora do cartão se um dia a
     meta for editada para um valor perto de 0% ou de 100% */
  left: clamp(34px, var(--meta-pos, 0%), calc(100% - 34px));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  animation: lp-meta-flutua 4.5s ease-in-out infinite;
}
.lp-meta-marcador img {
  width: 56px; height: auto;
  filter: drop-shadow(0 6px 10px rgba(18, 50, 91, .18));
}
/* Setinha ligando o rostinho ao ponto exato da barra */
.lp-meta-marcador::after {
  content: ""; display: block; margin-top: 2px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--action-strong);
}
@keyframes lp-meta-flutua {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-5px); }
}

.lp-meta-escala {
  display: flex; justify-content: space-between;
  margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.lp-meta-nota {
  margin-top: 22px; font-size: 15px; line-height: 1.6; color: var(--ink-soft);
  max-width: 46ch; margin-inline: auto;
}

@media (max-width: 620px) {
  .lp-meta-card { padding: 30px 20px 26px; border-radius: var(--r-md); }
  .lp-meta-trilho { margin-top: 62px; }
  .lp-meta-marcador img { width: 46px; }
  .lp-meta-marcador { left: clamp(28px, var(--meta-pos, 0%), calc(100% - 28px)); }
  .lp-meta-nota { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-meta-marcador { animation: none; }
}

/* =========================================================
   8. Planos
   ========================================================= */
.lp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.lp-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 26px; box-shadow: var(--sh-1);
}
.lp-plan--featured { border-color: var(--mint); box-shadow: var(--sh-2); }
.lp-plan-flag {
  position: absolute; top: -13px; left: 26px;
  background: var(--mint); color: #06301F;
  font-size: 14px; font-weight: 800; padding: 5px 14px; border-radius: var(--r-pill);
}
.lp-plan-name { font-size: 19px; font-weight: 800; color: var(--navy); }
.lp-plan-dur { font-size: 14.5px; color: var(--ink-soft); margin-top: 4px; }
.lp-plan-price { display: flex; align-items: baseline; gap: 7px; margin: 18px 0 4px; }
.lp-plan-price b { font-size: 38px; font-weight: 800; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.lp-plan-price span { font-size: 14.5px; color: var(--ink-soft); font-weight: 600; }
.lp-plan-pay { font-size: 14px; color: var(--ink-soft); }

.lp-plan-specs { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 13px; }
.lp-plan-specs li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15px; line-height: 1.5; }
.lp-plan-specs svg { width: 19px; height: 19px; margin-top: 2px; }
.lp-plan-specs .ok { color: var(--mint-dark); }
.lp-plan-specs .info { color: var(--action); }
.lp-plan-specs dt { font-weight: 700; color: var(--navy); display: inline; }
.lp-plan-specs dd { margin: 0; display: inline; color: var(--ink-soft); }
.lp-plan .lp-btn { margin-top: 26px; }
.lp-plan-foot { margin-top: 14px; font-size: 14px; color: var(--ink-soft); text-align: center; }

/* Aviso de que o aplicativo entra em todos os planos (a seção própria
   do aplicativo saiu da página) */
.lp-plans-app {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 10px;
  margin: 26px auto 0; max-width: 760px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 13px 22px;
  font-size: 15px; color: var(--ink); text-align: center;
  box-shadow: var(--sh-1);
}
.lp-plans-app svg { width: 19px; height: 19px; flex: none; color: var(--action-strong); }
.lp-plans-app a { font-weight: 700; }

/* O texto ocupa ~733px numa linha só. Daí para baixo ele quebra, e o
   formato de pílula viraria uma losango estranha — então o canto passa
   a ser o arredondado normal, que fica bem com qualquer nº de linhas. */
@media (max-width: 820px) {
  .lp-plans-app { border-radius: var(--r-md); padding: 14px 18px; font-size: 14.5px; }
}

/* =========================================================
   9. FAQ
   ========================================================= */
.lp-faq-grid { display: grid; grid-template-columns: 34fr 66fr; gap: 56px; align-items: start; }
.lp-faq-aside { position: sticky; top: 106px; }
.lp-faq-aside .lp-lead { margin-top: 14px; }
.lp-faq-help { margin-top: 24px; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); }
.lp-faq-help h3 { font-size: 16.5px; margin-bottom: 6px; }
.lp-faq-help p { font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; }

.lp-faq-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.lp-faq-cats button {
  min-height: 44px; padding: 10px 17px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.lp-faq-cats button:hover { border-color: var(--action-strong); color: var(--action-strong); }
.lp-faq-cats button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.lp-faq-group { margin-bottom: 30px; }
.lp-faq-group[hidden] { display: none !important; }
.lp-faq-group > h3 {
  font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); margin-bottom: 12px;
}
.lp-faq-list { display: grid; gap: 10px; }

.lp-qa { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.lp-qa-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 58px; padding: 16px 20px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.45;
}
.lp-qa-btn:hover { background: var(--blue-soft); }
.lp-qa-btn .chev {
  width: 22px; height: 22px; flex: none; color: var(--action);
  transition: transform .2s ease;
}
.lp-qa-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lp-qa-panel { padding: 0 20px 20px; }
.lp-qa-panel[hidden] { display: none !important; }
.lp-qa-panel p { font-size: 15.5px; color: var(--ink-soft); }
.lp-qa-panel p + p { margin-top: 10px; }
.lp-qa-panel ul { margin: 10px 0 0; padding-left: 22px; font-size: 15.5px; color: var(--ink-soft); }
.lp-qa-panel li + li { margin-top: 6px; }
.lp-qa-panel strong { color: var(--ink); }

/* =========================================================
   10. CTA final
   ========================================================= */
.lp-final { padding-block: var(--section-y); }
.lp-final-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #123259 0%, #1B4C86 55%, #17795F 100%);
  border-radius: var(--r-lg); color: #fff;
  padding: 56px 56px 56px;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  box-shadow: var(--sh-3);
}
.lp-final-card h2 { color: #fff; }
.lp-final-card > div > .lp-lead { color: rgba(255, 255, 255, .95); margin-top: 14px; max-width: 46ch; }
.lp-final-card .lp-actions { margin-top: 28px; }
.lp-final-card .lp-btn--primary { background: #fff; color: var(--navy); }
.lp-final-card .lp-btn--primary:hover { background: #EAF3FC; }
.lp-final-card .lp-btn--ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .62); }
.lp-final-card .lp-btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.lp-final-micro { margin-top: 16px; font-size: 14.5px; color: rgba(255, 255, 255, .94); }
.lp-final-face { width: 168px; height: auto; flex: none; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .22)); }

/* =========================================================
   11. Rodapé
   ========================================================= */
.lp-footer { background: var(--white); border-top: 1px solid var(--line); padding-block: 56px 40px; }
.lp-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.lp-footer h3 { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 14px; }
.lp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-footer a { color: var(--ink); font-size: 15px; font-weight: 500; }
.lp-footer a:hover { color: var(--action-strong); }
.lp-footer-id { font-size: 15px; color: var(--ink-soft); line-height: 1.7; }
.lp-footer-id dl { margin: 14px 0 0; display: grid; gap: 6px; }
.lp-footer-id dt { font-weight: 700; color: var(--ink); display: inline; }
.lp-footer-id dd { margin: 0; display: inline; }
.lp-footer-id .row { font-size: 14.5px; }
.lp-footer-legal {
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line);
  display: grid; gap: 14px; font-size: 14px; color: var(--ink-soft); line-height: 1.65;
}
.lp-footer-legal .copy { font-weight: 600; color: var(--ink); }
/* =========================================================
   CTA fixo no celular
   ========================================================= */
.lp-sticky {
  display: none;
  position: fixed; z-index: 80; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 10px; align-items: center;
  box-shadow: 0 -6px 18px rgba(18, 50, 91, .07);
}
.lp-sticky .lp-btn { flex: 1; min-height: 50px; }
.lp-sticky-app {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  color: var(--action-strong);
}
.lp-sticky-app:hover { border-color: var(--action-strong); }
.lp-sticky-app svg { width: 20px; height: 20px; }
.lp-sticky-close {
  width: 44px; height: 44px; flex: none;
  background: none; border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink-soft); font-size: 20px; line-height: 1; cursor: pointer;
}
.lp-sticky-close:hover { color: var(--navy); border-color: var(--navy); }
body.lp--sticky-on .lp-sticky { display: flex; }
/* espaço extra no rodapé para a barra não cobrir o texto legal */
body.lp--sticky-on .lp-footer { padding-bottom: 120px; }

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 1080px) {
  .lp-hero-grid { gap: 32px; }
  .lp-faq-grid { grid-template-columns: 1fr; gap: 34px; }
  .lp-faq-aside { position: static; }
  .lp-places { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   Cabeçalho: vira menu de gaveta ANTES do resto do layout.
   Motivo medido: em 1010px a barra completa pedia 995px e a lista de
   links já vinha sendo comprimida. Colapsando em 1080px, a barra sempre
   sobra folga confortável e a gaveta cobre o resto.
   ========================================================= */
@media (max-width: 1080px) {
  /* ---- Cabeçalho vira hambúrguer ---- */
  .lp-nav {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px);
    background: var(--white); z-index: 100;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateX(100%);
    /* visibility entra junto para o menu fechado não continuar recebendo
       foco por teclado nem ser lido por leitor de tela fora da tela.
       Ela troca de valor de forma discreta, então na abertura aparece na
       hora e no fechamento só desaparece ao fim do movimento. */
    visibility: hidden;
    transition: transform .22s ease, visibility .22s;
    display: flex; flex-direction: column; gap: 8px;
    box-shadow: -8px 0 30px rgba(18, 50, 91, .12);
    overflow-y: auto;
  }
  .lp-nav[data-open="true"] { transform: none; visibility: visible; }
  .lp-nav ul { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 8px; }
  .lp-nav a { padding: 15px 14px; font-size: 16.5px; border-radius: 12px; min-height: 50px; display: flex; align-items: center; }
  /* aqui sim o botão de criar conta aparece: dentro da gaveta */
  .lp-nav > .lp-btn { display: inline-flex; margin-top: 14px; }

  /* Na barra fica só "Entrar" — o botão de criar conta já está na gaveta e
     na barra fixa de baixo. Manter os dois aqui estourava a largura da tela. */
  .lp-header-cta .lp-btn--primary { display: none; }
  /* logo à esquerda, ações à direita: "Entrar" e depois o menu */
  .lp-header-cta { margin-left: auto; order: 2; }
  .lp-burger { order: 3; }

  .lp-menu-close {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    align-self: flex-end; min-height: 44px; padding: 10px 14px;
    background: none; border: 1px solid var(--line); border-radius: 12px;
    font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink);
    cursor: pointer;
  }
  .lp-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: none;
    background: var(--white); border: 1px solid var(--line); border-radius: 12px;
    cursor: pointer; color: var(--navy);
  }
  .lp-burger svg { width: 22px; height: 22px; }
  .lp-scrim {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(18, 50, 91, .38); border: none; padding: 0; margin: 0;
    animation: lp-fade .18s ease;
  }
  @keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
  body.lp--menu-open { overflow: hidden; }

}

@media (max-width: 900px) {
  :root { --section-y: 76px; }

  /* ---- Hero em coluna, personagem depois dos botões ---- */
  .lp-hero { padding-block: 26px 46px; }
  .lp-hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .lp-hero .lp-lead { max-width: none; }
  .lp-hero-art { order: 2; }
  .lp-hero-copy { order: 1; display: flex; flex-direction: column; }
  /* ordem pedida: rótulo, título, texto, fluxo, botões, personagem, microbenefícios */
  .lp-hero-actions .lp-btn { width: 100%; }
  .lp-hero-blob { max-width: 300px; }
  .lp-art-tag { left: 50%; transform: translateX(-50%); bottom: 2%; white-space: nowrap; }

  .lp-trust ul { grid-template-columns: 1fr 1fr; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-step-face { top: -18px; right: 12px; width: 48px; }
  .lp-grid--3, .lp-grid--4 { grid-template-columns: 1fr; }

  .lp-plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }

  .lp-final-card { grid-template-columns: 1fr; padding: 40px 26px; text-align: center; }
  .lp-final-card .lp-lead { margin-inline: auto; }
  .lp-final-card .lp-actions { justify-content: center; }
  .lp-final-card .lp-btn { width: 100%; }
  .lp-final-face { order: -1; margin-inline: auto; width: 130px; }

  .lp-footer-top { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 620px) {
  :root { --pad-x: 20px; --section-y: 62px; }
  body.lp { font-size: 16.5px; }
  .lp h1 { font-size: clamp(32px, 9vw, 40px); }
  .lp-head { margin-bottom: 34px; }
  .lp-card { padding: 22px; border-radius: var(--r-md); }
  .lp-places { grid-template-columns: 1fr 1fr; }
  .lp-legal { flex-direction: column; gap: 12px; padding: 20px; }
  .lp-plan { padding: 26px 22px; }
  .lp-qa-btn { font-size: 15.5px; padding: 15px 16px; }
  .lp-qa-panel { padding: 0 16px 18px; }
  .lp-final { padding-bottom: 42px; }
}

@media (max-width: 380px) {
  .lp-brand-name { font-size: 17.5px; }
  .lp-brand-mark { width: 36px; height: 36px; }
  /* só a altura e o espaço entre os itens; o recuo lateral continua
     vindo de --pad-x para não descer abaixo do mínimo de 20px */
  .lp-header-inner { height: 66px; gap: 12px; }
  .lp-places { grid-template-columns: 1fr; }

  /* Tela estreita: o botão de criar conta precisa do máximo de espaço
     possível, então os ícones ao lado encolhem. */
  .lp-sticky { padding-inline: 12px; gap: 6px; }
  .lp-sticky .lp-btn { padding-inline: 14px; font-size: 15px; }
  .lp-sticky-app, .lp-sticky-close { width: 40px; height: 40px; }
}

/* Monitores grandes: conteúdo continua centralizado, sem esticar */
@media (min-width: 1600px) {
  :root { --section-y: 118px; }
}

/* ---------- Quem prefere menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .lp-hero-blob img { animation: none; }
  .lp *, .lp *::before, .lp *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- Impressão ---------- */
@media print {
  .lp-header, .lp-sticky, .lp-nav, .lp-burger { display: none !important; }
  body.lp { background: #fff; }
}

/* =========================================================
   Movimento: aparições ao rolar a página

   Regra de segurança: o estado escondido só é aplicado quando o
   JavaScript marca <html class="lp-anim">. Sem script, sem
   IntersectionObserver ou com "reduzir movimento" ligado, nada fica
   escondido — a página inteira aparece normalmente. Nunca dá para
   sumir com o conteúdo por causa de animação.
   ========================================================= */
.lp-anim [data-anim] {
  opacity: 0;
  transition: opacity .62s cubic-bezier(.22, .8, .3, 1),
              transform .62s cubic-bezier(.22, .8, .3, 1);
  will-change: opacity, transform;
}
.lp-anim [data-anim="up"]    { transform: translate3d(0, 28px, 0); }
.lp-anim [data-anim="left"]  { transform: translate3d(-34px, 0, 0); }
.lp-anim [data-anim="right"] { transform: translate3d(34px, 0, 0); }
.lp-anim [data-anim="zoom"]  { transform: scale(.94); }
.lp-anim [data-anim="fade"]  { transform: none; }

.lp-anim [data-anim].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Atraso em degrau: usado tanto pelo atributo manual quanto pelos
   filhos de um contêiner com data-anim-stagger (o JS numera). */
.lp-anim [data-anim-delay="1"] { transition-delay: .07s; }
.lp-anim [data-anim-delay="2"] { transition-delay: .14s; }
.lp-anim [data-anim-delay="3"] { transition-delay: .21s; }
.lp-anim [data-anim-delay="4"] { transition-delay: .28s; }
.lp-anim [data-anim-delay="5"] { transition-delay: .35s; }
.lp-anim [data-anim-delay="6"] { transition-delay: .42s; }
.lp-anim [data-anim-delay="7"] { transition-delay: .49s; }
.lp-anim [data-anim-delay="8"] { transition-delay: .56s; }

/* Barra fina de progresso da leitura, no rodapé do cabeçalho */
.lp-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: transparent; pointer-events: none;
}
.lp-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--action-strong), var(--mint));
  border-radius: 0 3px 3px 0;
  transition: width .12s linear;
}

/* =========================================================
   Topo: imagem do personagem encaixada com o título
   ========================================================= */
.lp-hero-art--heroi .lp-hero-blob { max-width: 460px; }

/* A arte nova tem fundo transparente, então o "palco" colorido aparece
   atrás dela sem retângulo branco. */
.lp-hero-art--heroi .lp-hero-blob::before {
  inset: 12% -4% 6%;
  background:
    radial-gradient(60% 55% at 30% 28%, rgba(53, 211, 160, .30), transparent 70%),
    linear-gradient(160deg, var(--blue-soft) 0%, var(--mint-soft) 100%);
  border-radius: 48% 52% 44% 56% / 54% 46% 54% 46%;
  animation: lp-blob 14s ease-in-out infinite;
}
@keyframes lp-blob {
  0%, 100% { border-radius: 48% 52% 44% 56% / 54% 46% 54% 46%; transform: rotate(0deg); }
  50%      { border-radius: 54% 46% 56% 44% / 46% 56% 44% 54%; transform: rotate(-2.5deg); }
}
.lp-hero-art--heroi .lp-hero-blob img { animation: lp-float 7s ease-in-out infinite; }

/* =========================================================
   Responsivo do topo
   ========================================================= */
@media (max-width: 900px) {
  /* No celular a imagem sobe para logo abaixo do título: é ali que ela
     "conversa" com a frase. O resto do texto vem na sequência. */
  .lp-hero-grid { display: flex; flex-direction: column; }
  .lp-hero-copy { display: contents; }
  .lp-hero-eyebrow-wrap { order: 1; }
  .lp-hero h1 { order: 2; margin-bottom: 4px; }
  .lp-hero-art { order: 3; margin: 6px 0 2px; }
  .lp-hero .lp-lead { order: 4; }
  .lp-hero-actions { order: 5; margin-top: 10px; }
  .lp-hero-micro { order: 6; }
  /* Com display:contents todos os filhos viram itens do flex, e quem não
     tem order explícito assume 0 — iria parar ANTES do rótulo e do
     título. Todo elemento exposto aqui precisa do seu order. */
  .lp-hero-app-link { order: 7; }

  .lp-hero-art--heroi .lp-hero-blob { max-width: 288px; }
}

@media (max-width: 420px) {
  .lp-hero-art--heroi .lp-hero-blob { max-width: 244px; }
}

/* =========================================================
   Quem pede menos movimento continua sem movimento
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .lp-anim [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-hero-art--heroi .lp-hero-blob::before,
  .lp-hero-art--heroi .lp-hero-blob img { animation: none !important; }
  .lp-progress span { transition: none; }
}

/* O JS escreve --lp-parallax; sem JS a variável não existe e o valor
   padrão (0) mantém tudo no lugar. */
.lp-hero-art[data-parallax] { transform: translate3d(0, var(--lp-parallax, 0px), 0); }
@media (prefers-reduced-motion: reduce) {
  .lp-hero-art[data-parallax] { transform: none !important; }
}