/* =====================================================================
   Hagá · LP — Etapa 5: Planos (lpp-), Perguntas (lpq-), CTA final (lpk-), Rodapé (lpft-)
   e o menu atualizado (cabeçalho + gaveta do celular, lpn-).
   Adaptado das pranchas do Claude Design (handoff de 16/10/2026; lp-final.css é a fonte de medidas).

   O QUE É REAPROVEITADO (nada disto é copiado aqui):
     • botões — .lph-btn* de css/lp-hero.css (o .lp-btn do handoff é o mesmo componente);
     • selo da Play — .hg-play (css/play-badge.css · js/play-badge.js), com o mecanismo de sempre
       para o app: data-oculto-no-app (js/modo-app.js) + remoção do elemento no play-badge.js;
     • cabeçalho — o .lp-nav existente (landing.css + lp-hero.js), só adaptado (.lp-nav--lp);
     • fontes auto-hospedadas (frontend/fonts) — as pranchas chamavam o Google Fonts, aqui não.

   TOKENS (conferidos contra design-system/colors_and_type.css; ver docs/estado/01-DECISOES.md):
     iguais ao DS ........ --bg, --bg-deep, --surface, --surface-2, --border, --border-strong (só como traço: --mark-subtle), --fg, --fg-2*,
                           --accent, --gold-400, --ink-900/950, --periwinkle-*, --radius-pill, --ease-out
     (*) --fg-2 do handoff é #5F5C77; o do DS (#6B6881) já dá 4,9–5,3:1 em todos os fundos daqui:
         fica o token existente.
     faltam no DS (definidos abaixo, com o valor do handoff) ... tons suaves claros do primary, divisor,
                           degradê do título claro (o do Recursos, #6569DB no fim: ver lp-recursos.css),
                           tamanho/entrelinha do H2, tracking do rótulo.
     --dur-hover/--dur-state do handoff = --dur-fast/--dur-base do DS.

   Responsividade por MEDIA QUERIES (padrão das irmãs): ≥ 1200 · 900–1199 · < 900.
   O cabeçalho vira gaveta abaixo de 1080px (o mesmo corte que o .lp-nav já usava: com 4 links +
   Entrar + Começar a barra pede ~1000px).
   ===================================================================== */

/* ---------- 0. Tokens locais e rolagem ---------- */
.lpp, .lpq, .lpk, .lpft, .lpn-drawer{
  --lph-cta: var(--periwinkle-600);
  --lph-cta-hover: var(--periwinkle-700);
  --lph-cta-press: var(--periwinkle-800);
  --lph-dur-hover: var(--dur-fast);
  --lph-outline: rgba(192,196,255,.38);
  --lpf-primary-soft: rgba(123,127,232,.12);
  --lpf-primary-soft-strong: rgba(123,127,232,.2);
  --lpf-divider: #F2F0FA;
  --lpf-h2-size: 44px; --lpf-h2-lh: 1.08; --lpf-tracking: -0.02em; --lpf-label-tracking: .11em;
  --lpf-title-grad: linear-gradient(90deg, var(--periwinkle-600) 0%, #6569DB 100%);
  --lpf-title-grad-dark: linear-gradient(90deg, var(--periwinkle-400) 0%, var(--periwinkle-200) 100%);
  --lpf-gutter: 80px; --lpf-max: 1280px;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
.lpft, .lpn-drawer{ --lpf-divider: rgba(192,196,255,.07); }

html{scroll-behavior:smooth; scroll-padding-top:84px}   /* cabeçalho fixo + folga */
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* ---------- 1. Comuns das seções claras ---------- */
.lpf-sec{background:var(--bg); color:var(--fg)}
.lpf-in{max-width:var(--lpf-max); margin:0 auto; padding:0 var(--lpf-gutter)}
.lpf-pill{display:inline-flex; align-items:center; height:28px; padding:0 14px; border-radius:var(--radius-pill); background:var(--lpf-primary-soft); color:var(--primary-text-hover); font-size:11px; font-weight:700; letter-spacing:var(--lpf-label-tracking); text-transform:uppercase}
.lpf-h2{margin:16px 0 0; font-family:var(--font-display); font-weight:700; font-size:var(--lpf-h2-size); line-height:var(--lpf-h2-lh); letter-spacing:var(--lpf-tracking); color:var(--fg); text-wrap:balance}
.lpf-accent{background:var(--lpf-title-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lpf-lead{margin:18px 0 0; font-size:17px; line-height:1.6; color:var(--fg-2); max-width:400px}
.lpf-check{width:20px; height:20px; flex:none; border-radius:50%; background:var(--lph-cta); color:#FFFFFF; display:inline-flex; align-items:center; justify-content:center; margin-top:1px}
.lpf-check svg{width:12px; height:12px; stroke-width:3}

/* =====================================================================
   5 · PLANOS
   ===================================================================== */
.lpp{padding:128px 0 72px}
.lpp__grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr); gap:24px; align-items:stretch}
.lpp__intro{padding-top:8px; padding-right:24px}
.lpp-card{position:relative; display:flex; flex-direction:column; padding:32px; border-radius:28px}
.lpp-card--free{background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-md)}
.lpp-card--plus{background:var(--hero-grad); color:var(--fg); box-shadow:0 0 0 1.5px var(--periwinkle-400), 0 0 0 6px rgba(143,146,236,.14), 0 24px 60px rgba(98,102,214,.40)}
.lpp-card__top{display:flex; align-items:center; gap:12px}
.lpp-card__name{margin:0; font-family:var(--font-display); font-size:26px; line-height:1.15; font-weight:700; color:var(--fg)}
.lpp-crown{width:40px; height:40px; flex:none; border-radius:12px; background:rgba(230,180,80,.16); color:var(--gold-400); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(230,180,80,.28)}
.lpp-crown svg{width:22px; height:22px; stroke-width:1.75}
.lpp-card__tag{margin:6px 0 0; font-size:14px; line-height:1.45; color:var(--fg-2)}
.lpp-price{margin-top:22px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.lpp-price b{font-family:var(--font-display); font-size:44px; line-height:1; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums}
.lpp-price span{font-size:16px; color:var(--fg-2)}
.lpp-price__alt{margin:8px 0 0; font-size:14px; line-height:1.45; color:var(--accent)}   /* card escuro: lavanda */
.lpp-list{list-style:none; margin:24px 0 0; padding:24px 0 0; border-top:1px solid var(--lpf-divider); display:flex; flex-direction:column; gap:12px}
.lpp-list li{display:flex; gap:12px; font-size:15px; line-height:1.45; color:var(--fg)}
.lpp-list__lead{margin:24px 0 0; padding-top:24px; border-top:1px solid var(--lpf-divider); font-size:14px; font-weight:600; color:var(--accent)}
.lpp-list__lead + .lpp-list{margin-top:12px; padding-top:0; border-top:0}
.lpp-card__cta{margin-top:auto; padding-top:28px; display:flex; flex-direction:column; align-items:stretch; gap:10px}
.lpp-card__cta .lph-btn{width:100%}
.lpp-btn-soft{background:var(--lpf-primary-soft-strong); color:var(--primary-text-hover); box-shadow:none}
.lpp-btn-soft:hover{background:var(--periwinkle-200); color:var(--primary-text-hover)}
.lpp-card__micro{margin:0; text-align:center; font-size:13px; color:var(--fg-2)}
.lpp__note{margin:28px 0 0; display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; line-height:1.5; color:var(--fg-2); text-align:center}
.lpp__note svg{width:18px; height:18px; flex:none; color:var(--primary-text); stroke-width:1.75}

/* =====================================================================
   6 · PERGUNTAS
   ===================================================================== */
.lpq{padding:72px 0 96px}
.lpq__grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:48px; align-items:start}
.lpq__list{display:flex; flex-direction:column; gap:12px}
.lpq-item{background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-sm); transition:box-shadow var(--dur-base) var(--ease-out)}
.lpq-item[open]{box-shadow:var(--shadow-md)}
.lpq-item summary{list-style:none; display:flex; align-items:center; gap:14px; padding:18px 22px; cursor:pointer; border-radius:18px; font-size:16px; line-height:1.4; font-weight:600; color:var(--fg)}
.lpq-item summary::-webkit-details-marker{display:none}
.lpq-item summary:hover{background:var(--surface-2)}
.lpq-item[open] summary:hover{background:transparent}
.lpq-item summary:focus-visible{outline:0; box-shadow:var(--ring)}
.lpq-plus{position:relative; width:28px; height:28px; flex:none; border-radius:50%; background:var(--lpf-primary-soft); color:var(--primary-text-hover)}
.lpq-plus::before, .lpq-plus::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; border-radius:2px; background:currentColor; transition:transform var(--dur-base) var(--ease-out)}
.lpq-plus::after{transform:rotate(90deg)}
.lpq-item[open] .lpq-plus::after{transform:rotate(90deg) scaleX(0)}   /* + vira − */
.lpq-item[open] .lpq-plus{background:var(--lph-cta); color:#FFFFFF}
.lpq-a{padding:0 22px 20px 64px; font-size:15px; line-height:1.6; color:var(--fg-2)}
.lpq-a p{margin:0}
@media (prefers-reduced-motion: no-preference){
  .lpq-item[open] .lpq-a{animation:lpq-open 240ms var(--ease-out)}
}
@keyframes lpq-open{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* =====================================================================
   7 · CTA FINAL — UM bloco só de botões, reposicionado por CSS (ajuste 1 do LEIA-ME)
   ===================================================================== */
.lpk{padding:0 0 120px}
.lpk__card{position:relative; isolation:isolate; overflow:hidden; border-radius:28px; height:500px; background:var(--ink-950); color:#FFFFFF; box-shadow:0 24px 60px rgba(58,52,120,.22)}
.lpk__media{position:absolute; inset:0; z-index:0}
.lpk__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 62%}
/* véu: --bg-deep (#06080F) · 90% → 82% em 40% → 0 em 62% (o briefing pedia ~85% → 0 em 55%; não dava 4,5:1 sob o céu) */
.lpk__veil{position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(6,8,15,.90) 0%, rgba(6,8,15,.82) 40%, rgba(6,8,15,0) 62%); pointer-events:none}
.lpk__body{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; padding:56px 64px; max-width:560px}
.lpk__title{margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--lpf-h2-size); line-height:var(--lpf-h2-lh); letter-spacing:var(--lpf-tracking); color:#FFFFFF; text-wrap:balance}
.lpk__accent{display:inline-block; background:var(--lpf-title-grad-dark); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.06em}
/* Título em 2 linhas (como na prancha) só onde o fim de "com propósito." ainda cai sobre o véu: a Playfair real é mais larga que a fonte de reserva da prancha e a linha de 453px entra no céu claro.
   Medido no pixel (trecho em degradê, última parada): ≥ 4,5:1 de 1080 a 1199px e de 1240px para cima; em 900–1079 (1,1 a 4,0:1) e 1200–1239 (3,9 a 4,5:1) fica a coluna estreita, em 3 linhas. Fonte e véu não mudam. */
@media (min-width:1080px) and (max-width:1199.98px), (min-width:1240px){ .lpk__title{width:max-content; max-width:500px} }
.lpk__lead{margin:16px 0 0; font-size:17px; line-height:1.6; color:#F5F6FC; max-width:440px}
.lpk__ctas{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:30px}
.lpk__note{margin:16px 0 0; display:inline-flex; align-items:center; gap:8px; font-size:14px; line-height:1.4; color:#F5F6FC}   /* texto, não botão: sem borda nem fundo */
.lpk__note svg{width:16px; height:16px; color:var(--periwinkle-200); stroke-width:2.4}

/* =====================================================================
   8 · RODAPÉ (escuro)
   ===================================================================== */
.lpft{background:var(--bg-deep); color:var(--fg); padding:72px 0 32px}
.lpft__grid{display:grid; grid-template-columns:minmax(0,3.4fr) repeat(3, minmax(0,2fr)) minmax(0,2.4fr); gap:32px; align-items:start}
.lpft__brand img{display:block; height:60px; width:auto; margin:-12px -9px}
.lpft__brand p{margin:14px 0 0; font-size:14px; color:var(--fg-2)}
.lpft__col h3{margin:0; font-family:var(--font-ui); font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--fg)}
.lpft__col ul{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.lpft__col a{font-size:14px; line-height:1.4; color:var(--fg-2); text-decoration:none; border-radius:4px}
.lpft__col a:hover{color:var(--fg); text-decoration:underline}
.lpft__social{display:flex; flex-direction:column; align-items:flex-end; gap:16px}
.lpft__icons{display:flex; gap:10px}
.lpft__icon{width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--fg); box-shadow:inset 0 0 0 1.5px var(--mark-subtle); text-decoration:none; transition:background var(--dur-fast) var(--ease-out)}
.lpft__icon:hover{background:var(--surface-2); color:var(--fg)}
.lpft__icon svg{width:20px; height:20px; stroke-width:1.75}
.lpft__bottom{margin:48px 0 0; padding-top:20px; border-top:1px solid var(--lpf-divider); font-size:13px; color:var(--fg-2)}
.lpft a:focus-visible, .lpq-item summary:focus-visible{outline:0; box-shadow:var(--ring)}

/* =====================================================================
   MENU — cabeçalho (.lp-nav--lp adapta o .lp-nav existente) e gaveta do celular
   ===================================================================== */
/* Item da seção visível (rolagem): aria-current="location" */
.lp-nav--lp .lp-nav-link[aria-current="location"]{color:var(--fg); box-shadow:inset 0 -2px 0 var(--periwinkle-400)}
.lp-nav--lp .lp-nav-links{flex:1; display:flex; justify-content:center; gap:36px}
.lp-nav--lp .lp-nav-link{padding:8px 2px; border-radius:var(--radius-xs)}
.lp-nav--lp .lp-nav-logo{margin-right:0}
.lp-nav--lp .lp-nav-actions{display:flex; align-items:center; gap:12px; flex:none}
.lpn-burger{display:none; width:44px; height:44px; flex:none; padding:0; border:0; border-radius:50%; background:transparent; color:var(--fg); align-items:center; justify-content:center; cursor:pointer; box-shadow:inset 0 0 0 1.5px var(--mark-subtle)}
.lpn-burger svg{width:20px; height:20px}
.lpn-burger:focus-visible{outline:0; box-shadow:var(--ring)}
.lp-nav--hero .lpn-burger{box-shadow:inset 0 0 0 1.5px rgba(192,196,255,.5)}
.lp-nav--hero .lpn-burger:focus-visible{outline:2px solid var(--fg); outline-offset:3px; box-shadow:none}

/* abaixo de 1080px: sem links no cabeçalho — vira gaveta */
@media (max-width: 1079.98px){
  .lp-nav--lp .lp-nav-links, .lp-nav--lp .lp-nav-entrar{display:none}
  .lp-nav--lp .lp-nav-logo{margin-right:auto}
  .lpn-burger{display:inline-flex}
}

.lpn-scrim{position:fixed; inset:0; z-index:249; background:var(--scrim)}
.lpn-scrim[hidden], .lpn-drawer[hidden]{display:none}
.lpn-drawer{position:fixed; inset:0 0 0 auto; width:min(360px, 100%); z-index:250; background:var(--bg); color:var(--fg); box-shadow:var(--shadow-xl); display:flex; flex-direction:column; padding:12px 20px 28px; overflow-y:auto}
.lpn-drawer__top{display:flex; align-items:center; justify-content:space-between; min-height:56px}
.lpn-drawer__top img{height:52px; width:auto; margin:-11px -8px}
.lpn-drawer__nav{display:flex; flex-direction:column; margin-top:16px}
.lpn-drawer__nav a{display:flex; align-items:center; min-height:56px; font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--fg); text-decoration:none; border-bottom:1px solid var(--lpf-divider)}
.lpn-drawer__nav a:hover{color:var(--accent); text-decoration:none}
.lpn-drawer__nav a:focus-visible{outline:0; box-shadow:var(--ring); border-radius:var(--radius-xs)}
.lpn-drawer__ctas{margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:12px}
.lpn-drawer__ctas .lph-btn{width:100%}
.lpn-close{width:44px; height:44px; flex:none; padding:0; border:0; border-radius:50%; background:transparent; color:var(--fg); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:inset 0 0 0 1.5px var(--mark-subtle)}
.lpn-close svg{width:20px; height:20px}
.lpn-close:focus-visible{outline:0; box-shadow:var(--ring)}
html.lpn-travado{overflow:hidden}
@media (prefers-reduced-motion: no-preference){
  .lpn-drawer{animation:lpn-entra 220ms var(--ease-out)}
  .lpn-scrim{animation:lpn-fade 220ms var(--ease-out)}
}
@keyframes lpn-entra{from{transform:translateX(24px); opacity:0} to{transform:none; opacity:1}}
@keyframes lpn-fade{from{opacity:0} to{opacity:1}}

/* =====================================================================
   900–1199
   ===================================================================== */
@media (max-width: 1199.98px){
  .lpf-in{padding:0 64px}
  .lpp__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .lpp__intro{grid-column:1 / -1; padding:0; max-width:640px; margin-bottom:16px}
  .lpp__intro .lpf-lead{max-width:none}
  .lpq__grid{grid-template-columns:minmax(0,1fr); gap:32px}
  .lpq__intro .lpf-lead{max-width:560px}
  .lpk__card{height:460px}
  .lpk__veil{background:linear-gradient(90deg, rgba(6,8,15,.92) 0%, rgba(6,8,15,.84) 46%, rgba(6,8,15,0) 66%)}
  .lpk__body{max-width:480px; padding:48px}
  .lpft__grid{grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:40px}
  .lpft__brand{grid-column:1 / span 2}
  .lpft__social{grid-column:3; grid-row:1; align-items:flex-end}
}

/* =====================================================================
   < 900
   ===================================================================== */
@media (max-width: 899.98px){
  html{scroll-padding-top:72px}
  .lpf-in{padding:0 16px}
  .lpf-h2{font-size:32px; line-height:1.1}
  .lpf-lead{font-size:16px; margin-top:14px}
  .lpp{padding:88px 0 48px}
  .lpp__grid{grid-template-columns:minmax(0,1fr); gap:16px}
  .lpp__intro{margin-bottom:12px}
  .lpp-card{padding:24px 20px; border-radius:24px}
  .lpp-price b{font-size:40px}
  .lpq{padding:48px 0 72px}
  .lpq-item summary{padding:16px 16px; gap:12px; font-size:15.5px}
  .lpq-a{padding:0 16px 18px 56px}
  .lpk{padding:0 0 72px}
  /* CTA no celular: imagem vertical com o texto no céu; botões numa faixa navy do próprio card.
     UM bloco de botões: o corpo vira "display:contents" e título/botões entram na grade do card. */
  .lpk__card{height:auto; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:640px auto; border-radius:24px; background:var(--ink-900)}
  .lpk__body{display:contents}
  .lpk__media{position:relative; inset:auto; grid-area:1 / 1; height:640px}
  .lpk__media img{object-position:55% 75%}
  .lpk__media::after{content:""; position:absolute; left:0; right:0; bottom:0; height:90px; background:linear-gradient(180deg, rgba(11,15,30,0), var(--ink-900))}
  .lpk__veil{position:relative; inset:auto; grid-area:1 / 1; height:640px; background:linear-gradient(180deg, rgba(6,8,15,.92) 0%, rgba(6,8,15,.84) 44%, rgba(6,8,15,0) 57%)}
  .lpk__text{grid-area:1 / 1; align-self:start; position:relative; z-index:2; padding:28px 20px}
  .lpk__title{font-size:32px; line-height:1.1}
  .lpk__lead{font-size:16px; margin-top:12px}
  .lpk__act{grid-area:2 / 1; position:relative; z-index:2; display:flex; flex-direction:column; align-items:stretch; gap:14px; padding:4px 20px 24px}
  .lpk__ctas{display:flex; flex-direction:column; align-items:stretch; gap:14px; margin-top:0}
  .lpk__ctas .lph-btn{width:100%}
  .lpk__ctas .hg-play{display:flex; justify-content:center}
  .lpk__act .lpk__note{margin:0; justify-content:center}
  .lpft{padding:56px 0 28px}
  .lpft__grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 20px}
  .lpft__brand{grid-column:1 / -1; text-align:center}
  .lpft__brand img{margin:-12px auto}
  .lpft__social{grid-column:1 / -1; grid-row:auto; align-items:center}
  .lpft__col--inst{grid-column:1 / -1}
  .lpft__bottom{text-align:center; margin-top:36px}
}