/* =========================================================
   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); }

.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; }
.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; }

/* Fluxo 1 → 2 → 3 */
.lp-flow {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 28px 0 0; padding: 0; list-style: none;
  counter-reset: flow 0;
}
.lp-flow li {
  counter-increment: flow; position: relative;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 14px 13px;
  box-shadow: var(--sh-1);
}
.lp-flow li::before {
  content: counter(flow);
  display: grid; place-items: center;
  width: 24px; height: 24px; margin-bottom: 8px;
  border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 800;
}
.lp-flow b { display: block; font-size: 15px; color: var(--navy); line-height: 1.35; }
.lp-flow span { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; }
/* seta entre os passos (decorativa) */
.lp-flow li + li::after {
  content: ""; position: absolute; left: -8px; top: 50%;
  width: 7px; height: 7px; margin-top: -4px;
  border-top: 2px solid var(--line); border-right: 2px solid var(--line);
  transform: rotate(45deg);
}

.lp-hero-actions { margin-top: 28px; }
.lp-hero-micro { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); }

/* 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); }

/* =========================================================
   3. 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; }

/* =========================================================
   4. 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. Aplicativo
   ========================================================= */
.lp-app-grid { display: grid; grid-template-columns: 46fr 54fr; gap: 56px; align-items: center; }

/* Maquete de celular montada em CSS (sem captura de tela de aluno real) */
.lp-phone-wrap { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.lp-phone {
  position: relative; z-index: 1;
  width: 258px; flex: none;
  background: #0E2340; border-radius: 34px; padding: 9px;
  box-shadow: var(--sh-3);
}
.lp-phone-screen {
  background: #F4F7FB; border-radius: 26px; overflow: hidden;
  aspect-ratio: 9 / 17.5; display: flex; flex-direction: column;
}
.lp-phone-bar {
  background: var(--navy); color: #fff; padding: 11px 13px 10px;
  display: flex; align-items: center; gap: 9px; flex: none;
}
.lp-phone-bar .ic { width: 15px; height: 15px; }
.lp-phone-bar b { font-size: 11.5px; font-weight: 700; }
.lp-phone-body { padding: 11px; display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 0; }
/* carteirinha esquemática */
.lp-mini-card {
  background: linear-gradient(150deg, var(--navy), #234E86);
  border-radius: 12px; padding: 11px; color: #fff;
  display: flex; gap: 9px; align-items: center;
}
.lp-mini-card .ph {
  width: 34px; height: 42px; border-radius: 6px; flex: none;
  background: rgba(255,255,255,.22);
}
.lp-mini-card .tx { min-width: 0; }
.lp-mini-card .tx b { display: block; font-size: 10.5px; line-height: 1.3; }
.lp-mini-card .tx span { display: block; font-size: 8.5px; opacity: .85; margin-top: 2px; }
/* linhas do menu, com "Baixar APP" destacado */
.lp-mini-menu { display: flex; flex-direction: column; gap: 5px; }
.lp-mini-row {
  display: flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #E4EBF3; border-radius: 8px;
  padding: 7px 9px; font-size: 10px; font-weight: 600; color: var(--ink);
}
.lp-mini-row .sq { width: 13px; height: 13px; border-radius: 4px; background: var(--blue-soft); flex: none; }
.lp-mini-row--hi { border-color: var(--mint); background: var(--mint-soft); color: var(--mint-dark); font-weight: 800; }
.lp-mini-row--hi .sq { background: var(--mint); }

/* ícone do app "saindo" do celular, como na tela inicial */
.lp-app-icon {
  position: absolute; z-index: 2; right: -6px; bottom: 34px;
  width: 74px; padding: 8px;
  background: #fff; border-radius: 18px; border: 1px solid var(--line);
  box-shadow: var(--sh-2); text-align: center;
}
.lp-app-icon img { width: 100%; height: auto; border-radius: 11px; }
.lp-app-icon span { display: block; font-size: 9.5px; font-weight: 700; color: var(--navy); margin-top: 5px; }

/* personagem menor nesta seção, sem animação */
.lp-app-char { width: 148px; height: auto; margin-right: -18px; align-self: flex-end; flex: none; }

.lp-app-benefits { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.lp-app-benefits li { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; font-weight: 600; }
.lp-app-benefits svg { width: 22px; height: 22px; flex: none; color: var(--mint-dark); margin-top: 2px; }

.lp-os { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.lp-os-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }
.lp-os-card h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 16.5px; }
.lp-os-card svg { width: 18px; height: 18px; color: var(--action); }
.lp-os-card p { font-size: 14.5px; color: var(--ink-soft); }

/* =========================================================
   7. 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; }

/* =========================================================
   8. Prévia do portal
   ========================================================= */
.lp-preview-switch {
  display: inline-flex; gap: 4px; padding: 5px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
  margin-bottom: 28px;
}
.lp-preview-switch button {
  min-height: 44px; padding: 10px 22px; border: none; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-soft);
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.lp-preview-switch button[aria-selected="true"] { background: var(--navy); color: #fff; }

.lp-shot { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.lp-shot[hidden] { display: none !important; }
.lp-shot-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #F5F8FC; border-bottom: 1px solid var(--line); }
.lp-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D9E3EE; display: block; }
.lp-shot-bar span { margin-left: 8px; font-size: 12px; color: var(--ink-soft); }
.lp-shot-body { padding: 20px; display: grid; gap: 14px; }

/* representação esquemática do portal — sem dados de aluno real */
.lp-skel-top { display: flex; align-items: center; gap: 14px; }
.lp-skel-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--blue-soft); flex: none; }
.lp-skel-lines { display: grid; gap: 7px; flex: 1; min-width: 0; }
.lp-skel-line { height: 11px; border-radius: 6px; background: #E7EEF6; }
.lp-skel-line.w40 { width: 40%; } .lp-skel-line.w60 { width: 60%; } .lp-skel-line.w80 { width: 80%; }
.lp-skel-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lp-skel-tile { background: #F5F8FC; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 8px; }
.lp-skel-tile .sq { width: 26px; height: 26px; border-radius: 8px; background: var(--blue-soft); }
.lp-skel-tile .lp-skel-line { height: 9px; }
.lp-shot--mobile { max-width: 320px; margin-inline: auto; }
.lp-shot--mobile .lp-skel-tiles { grid-template-columns: 1fr 1fr; }

.lp-preview-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lp-demo-note {
  margin-top: 20px; display: flex; gap: 12px; align-items: flex-start;
  background: var(--blue-soft); border: 1px solid #C7E3FA;
  border-radius: var(--r-md); padding: 16px 18px;
}
.lp-demo-note svg { width: 21px; height: 21px; flex: none; color: var(--action-strong); margin-top: 2px; }
.lp-demo-note p { font-size: 15px; color: var(--ink); }

/* =========================================================
   9. 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; }

/* =========================================================
   10. Transparência e validade
   ========================================================= */
.lp-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lp-fact { display: grid; grid-template-columns: 46px 1fr; gap: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 24px; }
.lp-fact .lp-ico { margin: 0; width: 46px; height: 46px; }
.lp-fact h3 { font-size: 17px; margin-bottom: 6px; }
.lp-fact p { font-size: 15.5px; color: var(--ink-soft); }

/* =========================================================
   11. 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); }

/* =========================================================
   12. 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)); }

/* =========================================================
   13. 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); }
/* aviso de campo institucional não preenchido — só aparece se faltar dado */
.lp-missing {
  display: block; background: #FFF4F2; border: 1px dashed #E7B4AE;
  color: var(--danger); border-radius: var(--r-sm); padding: 14px 16px;
  font-size: 14.5px; margin-top: 16px;
}

/* =========================================================
   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-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-app-grid { gap: 36px; }
  .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: 40px 56px; }
  .lp-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .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-flow { grid-template-columns: 1fr; gap: 8px; }
  .lp-flow li + li::after { left: 50%; top: -8px; margin: 0 0 0 -4px; transform: rotate(135deg); }

  .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-facts { grid-template-columns: 1fr; }

  .lp-app-grid { grid-template-columns: 1fr; gap: 34px; }
  .lp-app-visual { order: 2; }
  .lp-app-copy { order: 1; }
  .lp-os { 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-preview-switch { width: 100%; }
  .lp-preview-switch button { flex: 1; padding: 10px 12px; }
  .lp-shot-body { padding: 14px; }
  .lp-skel-tiles { grid-template-columns: 1fr 1fr; }
  .lp-preview-actions .lp-btn { width: 100%; }
  .lp-phone { width: 232px; }
  .lp-app-char { width: 112px; margin-right: -10px; }
  .lp-app-icon { width: 62px; bottom: 26px; right: -2px; }
  .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; }
}

/* 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; }
}