/* landing-desktop.css — landing reformulada, camada DESKTOP (≥ 900px).
 *
 * ── Arquitetura ───────────────────────────────────────────────────────────
 * Continua o esquema de DUAS ÁRVORES: `.lpm-only` (mobile, landing-mobile.css)
 * aparece abaixo de 900px; `.lpd-only` (esta) aparece a partir de 900px. O
 * handoff propunha fundir as duas numa árvore só — decisão adiada de propósito
 * para uma rodada própria, então a duplicação de H1/H2 no DOM segue registrada
 * como dívida técnica.
 *
 * Este arquivo substitui o VISUAL da árvore desktop; `landing.css` continua
 * carregado porque a camada mobile reaproveita primitivas dele (.lp-phone,
 * .lp-mock-*, .lp-screen-*, .xpbar, .lp-nav...). Não apague landing.css.
 *
 * ── Tokens ────────────────────────────────────────────────────────────────
 * O TOKENS.md deste handoff foi DESCARTADO, como nos três anteriores: seus 24
 * hex estão TODOS no design-system-v1-backup e só 15 no design system real
 * (17 de 39 pares divergem). Mapeamento por INTENÇÃO, mesma tabela já
 * documentada em landing-mobile.css:
 *
 *   handoff    intenção                    token real
 *   #FAFAF8    fundo da página             --bg              (#FBFBF9)
 *   #FFFFFF    superfície branca           --bg-deep         (#FFFFFF)
 *   #F4F2FF    "well" lavanda              --surface-2       (#F5F4FB)   ⚠
 *   #ECEAFB    hover de secundário         --surface-hover   (#EFEDFA)
 *   #E8E4F8    borda hairline              --border          (#EEECF7)
 *   #1A1040    texto primário / moldura    --fg              (#17122E)
 *   #6B6880    texto secundário            --fg-2            (#6E6B84)
 *   #9D9AB0    meta / overline mudo        --fg-3            (#A5A2B8)
 *   #E6B450    estrela de avaliação        --gold-400        (#C9932C)   ⚠
 *
 * ⚠ --surface NÃO serve para os wells: no sistema real ele é #FFFFFF e o well
 *   ficaria branco sobre branco. Por isso --surface-2.
 * ⚠ --gold-400 escureceu no v2 — única diferença visível a olho.
 * A rampa periwinkle é idêntica entre v1 e v2, então todo o periwinkle
 * (--primary, --primary-hover, --periwinkle-*) casa exatamente com o desenho.
 */

/* A CHAVE ENTRE AS DUAS CAMADAS MORA EM landing-mobile.css, e só lá:
 *   .lpm-only { display: none }                          (base)
 *   @media (max-width: 899.98px) { .lpd-only { display: none !important }
 *                                  .lpm-only { display: block } }
 * Este arquivo NÃO repete essa decisão. Uma versão anterior tinha aqui um
 * `.lpd-only { display: none }` de espelho; ele foi removido depois que o
 * controle negativo mostrou que a suíte passava igual com ou sem ele — regra
 * que nenhum teste consegue derrubar é peso morto, e duas fontes para a mesma
 * decisão é como uma delas envelhece em silêncio.
 */
@media (min-width: 900px) {

  /* ── Primitivas ───────────────────────────────────────────────────────── */
  /* 1200px de conteúdo; acima disso o fundo sangra e a faixa segue centrada,
     que é o que impede linhas de texto de esticarem em telas grandes. */
  .lpd-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

  /* A .lp-nav é `position: fixed` e mede 121px em toda esta faixa. Sem isto,
     clicar em "Preços" na nav para a seção com o título embaixo da barra. */
  .lpd-only [id] { scroll-margin-top: 137px; }

  .lpd-sec { position: relative; }
  .lpd-sec--branca { background: var(--bg-deep); padding: 104px 0 108px; }
  .lpd-sec--pilares {
    padding: 104px 0 110px;
    background: linear-gradient(180deg, var(--bg-deep) 0%, var(--surface-2) 42%, var(--bg) 100%);
  }
  .lpd-sec--lavanda { background: var(--surface-2); padding: 96px 0 100px; }
  .lpd-sec--bg { background: var(--bg); padding: 100px 0 104px; }

  .lpd-cabeca { text-align: center; max-width: 760px; margin: 0 auto; }
  .lpd-overline {
    font-family: var(--font-ui); font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--primary);
  }
  .lpd-h2 {
    font-family: var(--font-display); font-size: 44px; line-height: 1.1;
    letter-spacing: -.02em; font-weight: 700; color: var(--fg);
    margin: 14px 0 0; text-wrap: pretty;
  }
  .lpd-lead {
    font-family: var(--font-ui); font-size: 17px; line-height: 1.62;
    color: var(--fg-2); margin: 16px 0 0; text-wrap: pretty;
  }

  .lpd-grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
  .lpd-card {
    background: var(--bg-deep); border: 1px solid var(--border); border-radius: 28px;
    padding: 28px; display: flex; flex-direction: column;
    box-shadow: 0 12px 30px rgba(26,16,64,.07);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  /* Hover de card: sobe 2px e a sombra cresce — regra do design system.
     CSS puro, não JS (o JS do handoff existia só por limitação da ferramenta).
     Cards de preço ficam de fora de propósito: o destaque ali é o tier
     Premium, e um hover competiria com ele. */
  .lpd-card:hover { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(26,16,64,.12); }
  .lpd-well { background: var(--surface-2); border-radius: 20px; padding: 16px; margin-top: auto; }
  .lpd-tela { background: var(--bg-deep); border-radius: 16px; padding: 16px; }

  .lpd-ico { display: inline-flex; flex: 0 0 auto; }
  .lpd-ico svg { display: block; }

  .lpd-cta, .lpd-btn2 {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-ui); font-size: 16px; font-weight: 700;
    padding: 16px 30px; border-radius: var(--radius-pill);
    border: none; cursor: pointer; text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .lpd-cta {
    background: var(--primary); color: var(--fg-on-primary);
    box-shadow: 0 4px 0 var(--periwinkle-400), 0 14px 32px rgba(123,127,232,.30);
  }
  .lpd-cta:hover { background: var(--primary-hover); }
  /* Press: afunda os 4px do lip e o lip some — herdado do design system. */
  .lpd-cta:active { transform: translateY(4px); box-shadow: 0 0 0 var(--periwinkle-400), 0 8px 20px rgba(123,127,232,.24); }
  .lpd-btn2 { background: var(--surface-2); color: var(--fg); border: 1px solid var(--border); }
  .lpd-btn2:hover { background: var(--surface-hover); }

  /* ── Seção 1 · Hero ───────────────────────────────────────────────────── */
  .lpd-hero {
    padding: 96px 0 104px;
    background:
      radial-gradient(70% 80% at 78% 8%, var(--periwinkle-50) 0%, transparent 60%),
      radial-gradient(50% 60% at 6% 0%, var(--surface-2) 0%, transparent 60%),
      var(--bg);
  }
  .lpd-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 72px; align-items: center; }
  .lpd-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg-deep); border-radius: var(--radius-pill);
    padding: 9px 18px; font-family: var(--font-ui); font-size: 14px; font-weight: 600;
    color: var(--primary-hover); box-shadow: var(--shadow-sm);
  }
  .lpd-h1 {
    font-family: var(--font-display); font-size: 64px; line-height: 1.04;
    letter-spacing: -.025em; font-weight: 700; color: var(--fg);
    margin: 22px 0 0; text-wrap: pretty;
  }
  .lpd-h1 span { color: var(--primary); }
  .lpd-hero-sub {
    font-family: var(--font-ui); font-size: 19px; line-height: 1.62;
    color: var(--fg-2); margin: 20px 0 0; max-width: 520px;
  }
  .lpd-hero-ctas { display: flex; align-items: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
  /* .lpd-prova* removidas: eram a faixa "+12 mil leitores" com avatares
     AB/JM/PH, herdada do hero anterior sem fonte para o número — número
     fabricado, apagado por instrução explícita, e não substituído por nada. */

  /* iPhone do hero. Sem largura fixa em px no wrapper: é coluna de grade e
     comprime junto entre 900 e 1200px — é isso que evita o corte da faixa
     900–980px que existia no desktop antigo. */
  .lpd-fone {
    width: 100%; max-width: 372px; margin: 0 auto; position: relative;
    background: var(--fg); border-radius: 54px; padding: 11px;
    box-shadow: 0 40px 90px rgba(26,16,64,.28);
    will-change: transform;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .lpd-fone-tela {
    background: var(--bg-deep); border-radius: 42px; overflow: hidden;
    position: relative; padding: 34px 20px 22px;
  }
  .lpd-notch {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    width: 112px; height: 30px; background: var(--fg); border-radius: var(--radius-pill); z-index: 3;
  }
  .lpd-status {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--fg);
    margin-bottom: 18px;
  }
  .lpd-escritura {
    font-family: var(--font-read); font-size: 15px; line-height: 1.74; color: var(--fg); margin: 14px 0 0;
  }
  .lpd-escritura sup { color: var(--primary); font-family: var(--font-ui); font-size: 10px; font-weight: 700; margin-right: 3px; }

  /* ── Seção 2 · Como funciona (timeline HORIZONTAL) ────────────────────── */
  .lpd-tl { position: relative; margin-top: 56px; }
  /* A linha desbota nas duas pontas para não parecer uma barra cortada. */
  .lpd-tl::before {
    content: ""; position: absolute; top: 21px; left: 12%; right: 12%; height: 2px;
    background: linear-gradient(90deg, var(--periwinkle-50), var(--primary) 18%,
                var(--periwinkle-400) 50%, var(--periwinkle-200) 82%, var(--periwinkle-50));
  }
  .lpd-tl-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: stretch; position: relative; }
  .lpd-passo { display: flex; flex-direction: column; }
  .lpd-marcador {
    width: 44px; height: 44px; border-radius: var(--radius-pill); margin: 0 auto 26px;
    background: var(--primary); color: var(--fg-on-primary);
    font-family: var(--font-ui); font-size: 17px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    /* O anel branco recorta a linha da timeline por baixo do marcador. */
    box-shadow: 0 0 0 8px var(--bg-deep), 0 8px 20px rgba(123,127,232,.28);
  }
  /* display:block porque em todo uso este rótulo encabeça algo (é o overline do
     card, do "Reflexão do dia", do "Código de convite"...). Como <span> inline
     ele encostava no elemento seguinte na mesma linha — foi o que aconteceu na
     faixa de convite, com "CÓDIGO DE CONVITE" e "HAGA-7K2P" lado a lado. */
  .lpd-passo-rot {
    display: block;
    font-family: var(--font-ui); font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3);
  }
  .lpd-h3 { font-family: var(--font-display); font-size: 26px; line-height: 1.16; font-weight: 700; color: var(--fg); margin: 8px 0; }
  .lpd-p { font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0 0 18px; }

  /* wrap + nowrap: aos 900px as duas abas não cabem lado a lado. Quebrar entre
     elas (a segunda desce inteira) lê como escolha; quebrar DENTRO do rótulo,
     partindo "Por livros" em duas linhas, lê como defeito. */
  .lpd-abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .lpd-aba {
    white-space: nowrap;
    display: flex; align-items: center; gap: 6px; padding: 9px 13px;
    font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--fg-2);
    border-radius: var(--radius-pill);
  }
  .lpd-aba.is-ativa { background: var(--bg-deep); font-weight: 700; color: var(--fg); box-shadow: 0 1px 4px rgba(58,52,120,.06); }
  .lpd-aba.is-ativa .lpd-ico { color: var(--primary); }
  .lpd-aba .lpd-ico { color: var(--fg-3); }
  .lpd-frase { font-family: var(--font-read); font-style: italic; font-size: 14px; line-height: 1.55; color: var(--fg); margin: 0; }
  .lpd-dica { font-family: var(--font-ui); font-size: 11px; color: var(--fg-3); }
  .lpd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .lpd-chip {
    font-family: var(--font-ui); font-size: 11px; color: var(--fg-2);
    background: var(--bg-deep); border: 1px solid var(--border);
    border-radius: var(--radius-pill); padding: 6px 10px;
  }
  .lpd-chip.is-sel { color: var(--fg); font-weight: 600; background: var(--periwinkle-50); border-color: var(--periwinkle-100); }

  .lpd-ritmos { display: flex; flex-direction: column; gap: 8px; }
  .lpd-ritmo { display: flex; align-items: center; gap: 10px; background: var(--bg-deep); border-radius: 14px; padding: 11px 12px; }
  .lpd-ritmo.is-sel { border: 1.5px solid var(--primary); box-shadow: 0 8px 22px rgba(123,127,232,.18); }
  .lpd-ritmo-ico { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .lpd-ritmo-ico--calmo { background: var(--success-bg); color: var(--success); }
  .lpd-ritmo-ico--medio { background: var(--periwinkle-50); color: var(--primary); }
  .lpd-ritmo-ico--forte { background: #FFE6DC; color: var(--ember-400); }
  .lpd-ritmo-txt { flex: 1; min-width: 0; }
  .lpd-ritmo-nome { display: block; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--fg); }
  .lpd-ritmo-cap { display: block; font-family: var(--font-ui); font-size: 11px; color: var(--fg-2); }
  .lpd-ritmo-dias { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--fg); }
  .lpd-ritmo.is-sel .lpd-ritmo-dias { color: var(--primary-hover); }
  .lpd-ritmo-ate { display: block; font-family: var(--font-ui); font-size: 11px; color: var(--fg-3); }
  .lpd-tag-mini {
    display: inline-block; margin-top: 5px; font-family: var(--font-ui); font-size: 9px;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--primary-hover); background: var(--periwinkle-50); padding: 4px 7px; border-radius: var(--radius-pill);
  }

  .lpd-topo-linha { display: flex; align-items: center; justify-content: space-between; }
  .lpd-tag-foco {
    font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--primary-hover); background: var(--periwinkle-50);
    padding: 5px 8px; border-radius: var(--radius-pill);
  }
  .lpd-plano-tit { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--fg); margin: 10px 0 3px; }
  .lpd-plano-meta { font-family: var(--font-ui); font-size: 12px; color: var(--fg-2); margin: 0 0 10px; }
  .lpd-barra { height: 7px; border-radius: var(--radius-pill); background: var(--track-bg); overflow: hidden; }
  .lpd-barra--g { height: 9px; }
  .lpd-barra i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--grad-xp); }
  .lpd-leitura { display: flex; align-items: center; gap: 10px; background: var(--bg-deep); border-radius: 14px; padding: 11px 12px; margin-top: 8px; }
  .lpd-leitura.is-fraca { background: var(--surface-2); opacity: .6; margin-top: 6px; }
  .lpd-leitura-dia { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--primary-hover); }
  .lpd-leitura.is-fraca .lpd-leitura-dia { color: var(--fg-3); }
  .lpd-leitura-ref { flex: 1; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--fg); }
  .lpd-leitura.is-fraca .lpd-leitura-ref { color: var(--fg-2); }
  .lpd-leitura-min { font-family: var(--font-ui); font-size: 11px; color: var(--fg-3); }
  .lpd-cta-tela {
    display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 12px;
    background: var(--primary); color: var(--fg-on-primary);
    font-family: var(--font-ui); font-size: 14px; font-weight: 700;
    padding: 13px; border-radius: var(--radius-pill); box-shadow: 0 4px 0 var(--periwinkle-400);
  }

  /* ── Seção 3 · Três pilares ───────────────────────────────────────────── */
  .lpd-pilar-ico {
    width: 46px; height: 46px; border-radius: 14px; background: var(--periwinkle-50);
    display: flex; align-items: center; justify-content: center; color: var(--primary);
  }
  .lpd-pilar-h3 { font-family: var(--font-display); font-size: 27px; line-height: 1.14; font-weight: 700; color: var(--fg); margin: 16px 0 10px; }
  .lpd-bullets { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .lpd-bullets li { display: flex; gap: 9px; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--fg-2); }
  .lpd-bullets .lpd-ico { color: var(--success); margin-top: 2px; }
  .lpd-tag-premium {
    font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--fg-on-primary); background: var(--primary);
    padding: 5px 8px; border-radius: var(--radius-pill);
  }
  .lpd-meta-linha { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 12px; color: var(--fg-2); margin-top: 8px; }
  .lpd-meta-linha .lpd-ico { color: var(--fg-3); }
  .lpd-estrela { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--gold-400); font-weight: 700; }
  .lpd-reflexao { font-family: var(--font-read); font-style: italic; font-size: 15px; line-height: 1.62; color: var(--fg); margin: 10px 0 12px; }
  .lpd-autor { display: flex; align-items: center; gap: 10px; }
  .lpd-autor-av {
    width: 34px; height: 34px; border-radius: var(--radius-pill); flex: 0 0 auto;
    background: var(--grad-primary); color: var(--fg-on-primary);
    font-family: var(--font-display); font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .lpd-autor-nome { display: block; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--fg); }
  .lpd-autor-obra { display: block; font-family: var(--font-ui); font-size: 11px; color: var(--fg-2); }
  .lpd-meditar { background: var(--surface-2); border-radius: 14px; padding: 12px; margin-top: 10px; }
  .lpd-linha-forte { display: flex; align-items: center; gap: 10px; background: var(--bg-deep); border-radius: 14px; padding: 12px; margin-top: 8px; }
  .lpd-linha-forte .lpd-ico { color: var(--ember-400); }
  .lpd-forte-n { display: block; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--fg); }
  .lpd-forte-d { display: block; font-family: var(--font-ui); font-size: 12px; color: var(--fg-2); }
  .lpd-chip-ambar {
    font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--warning); background: var(--warning-bg);
    padding: 5px 8px; border-radius: var(--radius-pill);
  }
  .lpd-versiculo { font-family: var(--font-read); font-size: 14px; line-height: 1.7; color: var(--fg); margin: 12px 0 0; }
  .lpd-versiculo sup { color: var(--primary); font-family: var(--font-ui); font-size: 10px; font-weight: 700; }
  .lpd-realce { background: var(--periwinkle-50); border-radius: 3px; }

  /* ── Seção 4 · Grupos (duas colunas) ──────────────────────────────────── */
  .lpd-grupos-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 76px; align-items: center; }
  .lpd-grupo-card {
    background: linear-gradient(160deg, var(--surface-2), var(--bg-deep));
    border: 1px solid var(--border); border-radius: 32px; padding: 26px;
    box-shadow: 0 22px 52px rgba(26,16,64,.12);
  }
  .lpd-grupo-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .lpd-grupo-nome { display: block; font-family: var(--font-display); font-size: 25px; font-weight: 700; color: var(--fg); margin-top: 4px; }
  .lpd-grupo-plano { display: block; font-family: var(--font-ui); font-size: 13px; color: var(--fg-2); }
  .lpd-chip-pess {
    font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--fg-2);
    background: var(--bg-deep); padding: 7px 11px; border-radius: var(--radius-pill); white-space: nowrap;
  }
  .lpd-membros { display: flex; flex-direction: column; gap: 9px; }
  .lpd-membro {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-deep); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px;
  }
  /* "Você" destacado — sem numeral de ranking e sem pódio, por decisão de
     produto: a seção promete incentivo, não competição. */
  .lpd-membro.is-voce { background: var(--periwinkle-50); border: 1.5px solid var(--primary); }
  .lpd-membro-av {
    width: 36px; height: 36px; border-radius: var(--radius-pill); flex: 0 0 auto; object-fit: cover;
    font-family: var(--font-ui); font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .lpd-membro-nome { display: block; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--fg); }
  .lpd-membro-barra { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--track-bg); margin-top: 6px; overflow: hidden; }
  .lpd-membro-barra i { display: block; height: 100%; background: var(--grad-xp); }
  .lpd-membro-dia { font-family: var(--font-ui); font-size: 12px; color: var(--fg-2); white-space: nowrap; }
  .lpd-membro.is-voce .lpd-membro-dia { color: var(--primary-hover); font-weight: 700; }
  .lpd-feed { background: var(--bg-deep); border-radius: 18px; padding: 16px; margin-top: 14px; }
  .lpd-feed-cit { font-family: var(--font-read); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--fg); margin: 10px 0 8px; }

  .lpd-provas { display: flex; flex-direction: column; gap: 22px; margin-top: 30px; }
  .lpd-prova-item { display: flex; gap: 14px; }
  .lpd-prova-ico {
    width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
    background: var(--periwinkle-50); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
  }
  .lpd-prova-tit { font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--fg); margin: 0 0 4px; }
  .lpd-prova-desc { font-family: var(--font-ui); font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0; }
  .lpd-convite {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 18px 22px;
  }
  .lpd-codigo { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--primary-hover); letter-spacing: .04em; }
  .lpd-copiar {
    font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--primary-hover);
    background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: 9px 15px; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .lpd-copiar:hover { background: var(--surface-hover); }

  /* ── Seção 5 · Depoimentos ────────────────────────────────────────────── */
  .lpd-deps { margin-top: 48px; gap: 26px; }
  .lpd-dep-cit { font-family: var(--font-read); font-style: italic; font-size: 17px; line-height: 1.68; color: var(--fg); margin: 0 0 24px; }
  .lpd-dep-quem { display: flex; align-items: center; gap: 12px; margin-top: auto; }
  .lpd-dep-av {
    width: 42px; height: 42px; border-radius: var(--radius-pill); flex: 0 0 auto;
    background: var(--grad-primary); color: var(--fg-on-primary);
    font-family: var(--font-ui); font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .lpd-dep-nome { display: block; font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--fg); }
  .lpd-dep-metr { display: block; font-family: var(--font-ui); font-size: 13px; color: var(--fg-2); }

  /* ── Seção 6 · Preços ─────────────────────────────────────────────────── */
  .lpd-ciclo-wrap { display: flex; justify-content: center; margin-top: 30px; }
  .lpd-ciclo { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px; }
  .lpd-ciclo-opt {
    border: none; background: none; cursor: pointer; font-family: var(--font-ui);
    font-size: 14px; font-weight: 600; color: var(--fg-2);
    padding: 10px 22px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; gap: 9px;
  }
  .lpd-ciclo-opt.ativo { background: var(--bg-deep); color: var(--fg); box-shadow: 0 2px 8px rgba(26,16,64,.08); }
  .lpd-eco {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    background: var(--success-bg); color: var(--success);
    padding: 3px 9px; border-radius: var(--radius-pill);
  }
  .lpd-planos { margin-top: 44px; gap: 26px; }
  .lpd-plano {
    background: var(--bg-deep); border: 1px solid var(--border); border-radius: 28px;
    padding: 32px; display: flex; flex-direction: column; position: relative;
  }
  .lpd-plano.is-destaque {
    border: 1.5px solid var(--primary); padding-top: 38px;
    box-shadow: 0 20px 44px rgba(123,127,232,.22);
  }
  .lpd-plano-pop {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    background: var(--primary); color: var(--fg-on-primary);
    font-family: var(--font-ui); font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 7px 16px; border-radius: var(--radius-pill); white-space: nowrap;
  }
  .lpd-plano-rot { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
  /* Preço como UMA string em Playfair, com o período alinhado pela baseline —
     corrige o "R$ 149 ,90/ano" quebrado do desktop antigo. */
  .lpd-preco { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0; }
  .lpd-preco-v { font-family: var(--font-display); font-size: 46px; font-weight: 700; color: var(--fg); line-height: 1; }
  .lpd-preco-p { font-family: var(--font-ui); font-size: 15px; color: var(--fg-2); }
  .lpd-preco-nota { font-family: var(--font-ui); font-size: 13px; color: var(--fg-3); min-height: 1em; margin-top: 8px; }
  /* Filete separando o bloco de preço das features — antes ficavam coladas. */
  .lpd-plano-sep { height: 1px; background: var(--border); margin: 22px 0; }
  .lpd-plano-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
  .lpd-plano-lista li { display: flex; gap: 10px; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--fg-2); }
  .lpd-plano-lista .lpd-ico { color: var(--success); margin-top: 2px; }
  /* Spacer: mantém os 3 CTAs alinhados no rodapé mesmo com listas de tamanhos
     diferentes. */
  .lpd-plano-espaco { flex: 1; min-height: 24px; }
  .lpd-plano .lpd-cta, .lpd-plano .lpd-btn2 { width: 100%; font-size: 15px; padding: 14px 22px; }

  /* ── Seção 7 · CTA final + footer ─────────────────────────────────────── */
  .lpd-final {
    text-align: center; padding: 110px 0 116px;
    background: radial-gradient(60% 90% at 50% 0%, var(--periwinkle-50) 0%, transparent 68%), var(--bg);
  }
  .lpd-final img { width: 132px; height: auto; display: block; margin: 0 auto 26px; }
  .lpd-final-h2 { font-family: var(--font-display); font-size: 52px; line-height: 1.08; font-weight: 700; color: var(--fg); margin: 0; }
  .lpd-final .lpd-lead { margin: 18px auto 34px; max-width: 560px; }
  .lpd-rodape { background: var(--bg-deep); border-top: 1px solid var(--border); padding: 30px 0; }
  .lpd-rodape-inner { display: flex; align-items: center; gap: 24px; }
  .lpd-rodape img { height: 48px; width: auto; }
  .lpd-rodape-copy { font-family: var(--font-ui); font-size: 14px; color: var(--fg-3); margin-left: auto; }
  .lpd-rodape-links { display: flex; gap: 18px; }
  .lpd-rodape-links a { font-family: var(--font-ui); font-size: 14px; color: var(--fg-2); text-decoration: none; }
  .lpd-rodape-links a:hover { color: var(--fg); }

  /* ── Entrada por rolagem ──────────────────────────────────────────────── */
  /* 520ms é acima de --dur-slow (380ms): divergência deliberada do handoff,
     registrada no TOKENS.md dele. O escalonamento entra por --atraso.
     `translate`, e NÃO `transform`: quase todo card é alvo de reveal E de
     hover ao mesmo tempo, e as duas regras disputariam a mesma propriedade.
     `.lpd-only [data-reveal].is-visivel` tem especificidade maior que
     `.lpd-card:hover`, então o estado revelado ganhava e fixava
     `transform: none` — o card trocava de sombra no hover mas não subia.
     As propriedades individuais (translate/rotate/scale) compõem com
     `transform` em vez de sobrescrevê-lo, então cada regra fica com a sua. */
  .lpd-only [data-reveal] {
    opacity: 0; translate: 0 18px;
    transition: opacity 520ms var(--ease-out) var(--atraso, 0ms),
                translate 520ms var(--ease-out) var(--atraso, 0ms);
  }
  .lpd-only [data-reveal].is-visivel { opacity: 1; translate: none; }
}

/* Fora do @media de largura de propósito: a preferência vale em qualquer
   viewport, e uma media query aninhada não alcançaria o desktop. */
@media (prefers-reduced-motion: reduce) {
  .lpd-only [data-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
  .lpd-fone { transition: none !important; transform: none !important; }
  .lpd-card:hover { transform: none; }
  .lpd-cta:active { transform: none; }
}