/* =====================================================================
   Hagá · LP — novo HERO (vídeo, cards flutuantes, partículas)
   Adaptado de lp-hero.css do Claude Design (handoff da LP, etapa 1).

   Escopo: tudo aqui vive sob a classe .lph (prefixo "lph-"). O prefixo
   existe porque landing.css já usa .lp-hero, .lp-glass, .lp-nav e o
   keyframe lp-float — reaproveitar os nomes do handoff colidiria.
   A página continua forçada ao tema CLARO; o escuro vale só dentro do
   hero (data-theme="dark" na própria <section class="lph">).

   Carregar DEPOIS de landing.css / landing-mobile.css / landing-desktop.css.
   O cabeçalho é o .lp-nav existente da landing (não há header novo):
   a seção "Cabeçalho sobre o hero" ao fim deste arquivo o adapta.
   ===================================================================== */

/* ---------- 1. Tokens da LP ---------- */
.lph{
  /* Tokens que o handoff usa e o design-system/ real não tem (o V4 os
     define em design-system-v4/canonical/tokens; valores copiados de lá). */
  --surface-3: #262D4E;
  --primary-soft: rgba(143,146,236,.16);
  --primary-soft-strong: rgba(143,146,236,.26);
  --success-fg: #7FD3AC;
  /* Não existem nem no V4 canônico: valores próprios desta camada. */
  --lph-tracking: -0.02em;
  --lph-dur-hover: var(--dur-fast);
  --lph-dur-state: var(--dur-base);

  /* O --primary escuro (#8F92EC) com texto branco dá 2,8:1.
     Para o CTA com texto branco: periwinkle-600 (4,78:1). */
  --lph-cta: var(--periwinkle-600);
  --lph-cta-hover: var(--periwinkle-700);
  --lph-cta-press: var(--periwinkle-800);

  /* Vidro — exceção aprovada só para o hero da LP */
  --lph-glass-bg: rgba(21,26,49,.55);
  --lph-glass-border: rgba(192,196,255,.18);
  --lph-glass-blur: blur(14px) saturate(140%);
  --lph-glass-radius: var(--radius-lg);
  --lph-glass-shadow: var(--shadow-float);

  /* Scrim de leitura sobre o vídeo (--bg-deep escuro #06080F) */
  --lph-scrim-x: linear-gradient(90deg, rgba(6,8,15,.85) 0%, rgba(6,8,15,.55) 38%, rgba(6,8,15,0) 62%);
  --lph-scrim-y: linear-gradient(180deg, rgba(6,8,15,0) 72%, rgba(6,8,15,.7) 90%, #06080F 100%);
  --lph-scrim-top: linear-gradient(180deg, rgba(6,8,15,.7) 0%, rgba(6,8,15,0) 100%);

  /* Partículas — exceção aprovada: cor da luz quente do vídeo */
  --lph-particle: #FFC977;

  --lph-title-grad: linear-gradient(90deg, var(--periwinkle-400) 0%, var(--periwinkle-200) 100%);
  --lph-line: rgba(192,196,255,.18);
  --lph-outline: rgba(192,196,255,.38);

  --lph-gutter: 80px;
  --lph-max: 1280px;

  /* Tipografia: o título acompanha a largura E a altura da janela,
     para caber no hero de 640px sem invadir a faixa de confiança. */
  --lph-title-size: clamp(44px, min(5vw, 8.4vh), 72px);
  --lph-title-lh: 1.04;
  --lph-sub-size: 20px;   --lph-sub-lh: 1.5;
  --lph-micro-size: 14px; --lph-micro-lh: 1.45;

  --lph-in-dur: 600ms;
  --lph-in-dist: 12px;
  --lph-in-step: 80ms;
  --lph-card-step: 120ms;

  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg-deep);
  color: var(--fg);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 2. Botões ---------- */
.lph-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 28px; border:0; border-radius:var(--radius-pill);
  font-family:var(--font-ui); font-size:16px; font-weight:700; line-height:1;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition: background var(--lph-dur-hover) var(--ease-out), box-shadow var(--lph-dur-hover) var(--ease-out), transform var(--lph-dur-hover) var(--ease-out), color var(--lph-dur-hover) var(--ease-out);
}
.lph-btn svg{width:18px; height:18px; flex:none}
.lph-btn:hover{text-decoration:none}
.lph-btn--primary{background:var(--lph-cta); color:var(--fg-on-primary); box-shadow:var(--shadow-glow-soft)}
.lph-btn--primary:hover{background:var(--lph-cta-hover); color:var(--fg-on-primary); transform:translateY(-1px); box-shadow:var(--shadow-glow)}
.lph-btn--primary:active{background:var(--lph-cta-press); transform:scale(.98)}
.lph-btn--secondary{background:transparent; color:var(--fg); box-shadow:inset 0 0 0 1.5px var(--lph-outline)}
.lph-btn--secondary:hover{color:var(--fg); background:rgba(192,196,255,.06); box-shadow:inset 0 0 0 1.5px var(--accent)}
.lph-btn--secondary:active{transform:scale(.98)}
.lph-btn:focus-visible{outline:0; box-shadow:var(--ring), 0 0 0 1px var(--accent)}
.lph-btn--block{display:flex; width:100%}

/* ---------- 3. Card de vidro ---------- */
.lph-glass{
  background:var(--lph-glass-bg);
  border:1px solid var(--lph-glass-border);
  -webkit-backdrop-filter:var(--lph-glass-blur);
  backdrop-filter:var(--lph-glass-blur);
  border-radius:var(--lph-glass-radius);
  box-shadow:var(--lph-glass-shadow);
  color:var(--fg);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .lph-glass{background:rgba(21,26,49,.92)}
}

/* ---------- 4. Hero — camadas ---------- */
.lph{height:clamp(640px, 100vh, 920px)}
.lph-hero__stage{position:absolute; inset:0; z-index:0}
.lph-hero__media{position:absolute; inset:0; z-index:0;
  /* --lph-shift é gravado pelo lp-hero.js (afasta o mascote da coluna de texto
     em larguras estreitas); o fade da borda esquerda esconde a faixa que a
     translação deixa — a metade esquerda do quadro é só navy. */
  transform:translate3d(var(--lph-shift, 0px),0,0);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14%);
          mask-image:linear-gradient(90deg, transparent 0, #000 14%)}
.lph-hero__media img, .lph-hero__media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 50%}
.lph-hero__video{opacity:0; transition:opacity 400ms var(--ease-out)}
.lph-hero__video.is-on{opacity:1}
.lph-hero__scrim{position:absolute; inset:0; z-index:1; background:var(--lph-scrim-x); pointer-events:none}
.lph-hero__scrim::after{content:""; position:absolute; inset:0; background:var(--lph-scrim-y)}
.lph-hero__scrim::before{content:""; position:absolute; left:0; right:0; top:0; height:200px; background:var(--lph-scrim-top)}

/* camada 2 — partículas (só na região de luz, à direita) */
.lph-particles{position:absolute; top:0; bottom:0; left:55%; right:5%; z-index:2; pointer-events:none; overflow:hidden}
.lph-p{position:absolute; display:block}
.lph-p > i{display:block; width:100%; height:100%; border-radius:50%; background:var(--lph-particle); filter:blur(1px); box-shadow:0 0 6px rgba(255,201,119,.6); opacity:0; animation-name:lph-rise-1; animation-timing-function:linear; animation-iteration-count:infinite}
.lph-p.r2 > i{animation-name:lph-rise-2}
.lph-p.r3 > i{animation-name:lph-rise-3}
@keyframes lph-rise-1{0%{opacity:0; transform:translate3d(0,0,0)} 18%{opacity:1} 82%{opacity:1} 100%{opacity:0; transform:translate3d(10px,-260px,0)}}
@keyframes lph-rise-2{0%{opacity:0; transform:translate3d(0,0,0)} 18%{opacity:1} 82%{opacity:1} 100%{opacity:0; transform:translate3d(-14px,-380px,0)}}
@keyframes lph-rise-3{0%{opacity:0; transform:translate3d(0,0,0)} 18%{opacity:1} 82%{opacity:1} 100%{opacity:0; transform:translate3d(6px,-520px,0)}}

/* camada 3 — cards flutuantes. Posição (left/top, em px) e escala (--lph-k)
   são calculadas por lp-hero.js a partir da coluna de texto e da área do
   mascote; os valores abaixo são só o ponto de partida. */
.lph-cards{position:absolute; inset:0; z-index:3; perspective:1200px; pointer-events:none}
.lph-fc{position:absolute; transform-style:preserve-3d; transition:transform 700ms var(--ease-out); will-change:transform}
.lph-fc .lph-glass{transform:scale(var(--lph-k, 1)); transform-origin:0 0}
.lph-fc__in{animation:lph-card-in 700ms var(--ease-out) both}
.lph-fc__float{animation:lph-float 6s ease-in-out infinite}
@keyframes lph-card-in{from{opacity:0; transform:translate3d(0,16px,0) scale(.98)} to{opacity:1; transform:none}}
@keyframes lph-float{0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,calc(var(--amp, 8px) * -1),0)}}
.lph-fc--a{left:46%; top:132px; width:244px}
.lph-fc--b{left:70%; top:132px; width:264px}
.lph-fc--c{left:80%; top:300px; width:248px}
.lph-fc--a .lph-fc__in{animation-delay:calc(3 * var(--lph-in-step) + var(--lph-in-dur))}
.lph-fc--b .lph-fc__in{animation-delay:calc(3 * var(--lph-in-step) + var(--lph-in-dur) + var(--lph-card-step))}
.lph-fc--c .lph-fc__in{animation-delay:calc(3 * var(--lph-in-step) + var(--lph-in-dur) + 2 * var(--lph-card-step))}
.lph-fc--a .lph-fc__float{animation-duration:7s;   animation-delay:-1.2s}
.lph-fc--b .lph-fc__float{animation-duration:5.4s; animation-delay:-3.1s}
.lph-fc--c .lph-fc__float{animation-duration:6.3s; animation-delay:-.4s}
.lph-fc--a{--amp:10px} .lph-fc--b{--amp:6px} .lph-fc--c{--amp:8px}
/* Sem o layout calculado (JS ausente) os cards ficam escondidos em vez de
   arriscar cobrir o texto ou o mascote. */
.lph:not(.lph--ready) .lph-cards{visibility:hidden}

/* camada 4 — conteúdo */
.lph-hero__content{position:relative; z-index:4; height:100%; max-width:var(--lph-max); margin:0 auto; padding:120px var(--lph-gutter) 124px; display:flex; flex-direction:column; justify-content:center}
.lph-copy{width:clamp(400px, 34vw, 500px); max-width:100%}
.lph-title{margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--lph-title-size); line-height:var(--lph-title-lh); letter-spacing:var(--lph-tracking); color:var(--fg); text-wrap:balance}
.lph-title__accent{display:inline-block; background:var(--lph-title-grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.06em}
.lph-sub{margin:24px 0 0; font-size:var(--lph-sub-size); line-height:var(--lph-sub-lh); color:var(--periwinkle-200); max-width:480px}
.lph-ctas{display:flex; flex-wrap:wrap; gap:16px; margin-top:32px}
.lph-micro{margin:18px 0 0; font-size:var(--lph-micro-size); line-height:var(--lph-micro-lh); color:var(--periwinkle-200)}
.lph-rise{animation:lph-up var(--lph-in-dur) var(--ease-out) both}
.lph-rise--1{animation-delay:0ms} .lph-rise--2{animation-delay:calc(1 * var(--lph-in-step))} .lph-rise--3{animation-delay:calc(2 * var(--lph-in-step))} .lph-rise--4{animation-delay:calc(3 * var(--lph-in-step))}
@keyframes lph-up{from{opacity:0; transform:translate3d(0,var(--lph-in-dist),0)} to{opacity:1; transform:none}}
@media (max-height: 760px){
  .lph-sub{margin-top:16px}
  .lph-ctas{margin-top:24px}
  .lph-micro{margin-top:12px}
}
@media (max-height: 700px){
  .lph{--lph-title-size:clamp(44px, min(5vw, 7.4vh), 72px)}
  .lph-sub{font-size:18px; margin-top:12px}
  .lph-ctas{margin-top:20px}
  .lph-micro{margin-top:10px}
}

/* Selo Google Play — atrás de flag: data-play-badge="on" no .lph (ligada: o app está na loja).
   O componente (.hg-play: arte oficial, link, área de respiro) vive em css/play-badge.css.
   A imagem do selo tem 7,3px transparentes em cima e embaixo; com a margem de 10px o
   respiro visível até o microtexto passa dos 12px que o Google pede (1/4 da altura do selo). */
.lph-play{display:none; margin-top:10px}
.lph[data-play-badge="on"] .lph-play{display:block}
/* Sem altura sobrando, o selo não entra no desktop: ele soma ~73px ao bloco de texto e, com a coluna de
   texto estreita (400–440px, título em 3 linhas) e a janela baixa, passaria por cima da nav e da faixa de
   confiança. Esconder é melhor que sobrepor — e que mexer na altura do hero aprovado (isso muda o
   enquadramento do vídeo e o posicionador dos cards, que deixava de achar lugar em 1200×800).
   Faixas medidas com o selo forçado (varredura de 900 a 1500px × 560 a 900px, critério: título abaixo da
   nav e ≥ 12px entre a barra do selo e a faixa de confiança):
     ≥ 1350px de largura  → cabe em qualquer altura;
     900–1099px           → cabe a partir de ~740px de altura;
     1100–1349px          → cabe a partir de ~880px de altura. */
@media (min-width: 900px) and (max-width: 1099.98px) and (max-height: 739.98px){ .lph-play{display:none !important} }
@media (min-width: 1100px) and (max-width: 1349.98px) and (max-height: 879.98px){ .lph-play{display:none !important} }

/* Faixa de confiança */
.lph-trust{list-style:none; margin:0; position:absolute; z-index:4; left:max(var(--lph-gutter), calc((100% - var(--lph-max)) / 2 + var(--lph-gutter))); bottom:32px; display:flex; align-items:center; padding:14px 8px; border-radius:var(--radius-lg)}
/* A seção seguinte ("Como funciona") sobe uma curva de 48px por cima do fim do hero.
   Com altura sobrando, a faixa fica a 64px da base (folga de ~41px até a curva). Em
   janelas baixas ela continua a 32px — ali o texto do hero já ocupa a altura toda, e a
   curva, que sob a faixa sobe no máximo ~23px, ainda passa com ~9px de folga. */
@media (min-width: 900px) and (min-height: 800px){
  .lph-trust{bottom:64px}
  .lph-hero__content{padding-bottom:156px}
}
.lph-trust__item{display:flex; align-items:center; gap:14px; padding:4px 24px}
.lph-trust__item + .lph-trust__item{border-left:1px solid var(--lph-line)}
.lph-trust__item svg{width:24px; height:24px; color:var(--accent); flex:none}
.lph-trust__item strong{display:block; font-size:15px; line-height:1.35; font-weight:600; color:var(--fg)}
.lph-trust__item span{display:block; font-size:13px; line-height:1.4; color:var(--fg-2)}
.lph-trust__item div{min-width:0}

/* ---------- 5. Componentes dos cards (recriados do app) ---------- */
/* A · card de plano */
.lph-plan{overflow:hidden}
.lph-plan__cover{position:relative; height:104px; background:var(--surface-2); display:flex; align-items:flex-start; gap:8px; padding:12px}
.lph-plan__cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.lph-plan__cover::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,8,15,.4) 0%, rgba(6,8,15,0) 60%)}
.lph-tag{position:relative; z-index:1; display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--radius-pill); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(6,8,15,.72); color:var(--fg)}
.lph-tag--free{background:var(--success-bg); color:var(--success-fg)}
.lph-plan__body{padding:16px 18px 18px}
.lph-plan__title{margin:0; font-family:var(--font-display); font-size:20px; line-height:1.25; font-weight:700; color:var(--fg); letter-spacing:-.01em}
.lph-plan__desc{margin:6px 0 0; font-size:13.5px; line-height:1.5; color:var(--fg-2); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.lph-plan__meta{display:flex; align-items:center; gap:16px; margin-top:12px; font-size:13px; font-weight:600}
.lph-plan__meta span{display:inline-flex; align-items:center; gap:6px; color:var(--fg-2)}
.lph-plan__meta svg{width:15px; height:15px}
.lph-plan__meta .is-level{color:var(--success)}

/* B · card de jornada */
.lph-journey{padding:18px 20px}
.lph-journey__head{display:flex; align-items:center; gap:14px}
.lph-journey__badge{width:52px; height:52px; border-radius:50%; background:var(--success-bg); color:var(--success); display:flex; align-items:center; justify-content:center; flex:none}
.lph-journey__badge svg{width:24px; height:24px}
.lph-journey__title{margin:0; font-family:var(--font-display); font-size:22px; line-height:1.2; font-weight:700; color:var(--fg)}
.lph-journey__next{margin:2px 0 0; font-size:13.5px; line-height:1.4; color:var(--fg-2)}
.lph-trail{display:flex; align-items:center; margin-top:16px}
.lph-trail__node{width:32px; height:32px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1.5px var(--mark); color:var(--fg-2)}
.lph-trail__node svg{width:15px; height:15px}
.lph-trail__node.is-done{box-shadow:inset 0 0 0 1.5px var(--primary-text); background:var(--primary-soft); color:var(--primary-text)}
.lph-trail__node.is-current{box-shadow:inset 0 0 0 2px var(--primary-text), 0 0 18px rgba(143,146,236,.45); background:var(--primary-soft-strong); color:var(--accent)}
.lph-trail__line{flex:1; height:2px; min-width:6px; background:var(--mark-subtle)}
.lph-trail__line.is-done{background:var(--primary-text)}

/* C · card de versículo */
.lph-verse{padding:18px 20px 18px}
.lph-verse__mark{display:block; font-family:var(--font-display); font-size:34px; line-height:.6; height:16px; color:var(--primary-text)}
.lph-verse__text{margin:6px 0 0; font-family:var(--font-read); font-style:italic; font-size:17px; line-height:1.55; color:var(--fg)}
.lph-verse__ref{display:block; margin-top:10px; font-family:var(--font-ui); font-variant-numeric:tabular-nums; font-size:12px; letter-spacing:.02em; color:var(--primary-text)}

/* Legibilidade no desktop: os cards são escalados (--lph-k, mínimo 0,86), então todo texto
   pequeno parte de 14px (14 × 0,86 = 12,04px) e os títulos de 20–22px (≥ 17px no mínimo). */
@media (min-width: 900px){
  .lph-tag{height:26px; font-size:14px; letter-spacing:.04em}
  .lph-plan__desc{font-size:14px}
  .lph-plan__meta{font-size:14px}
  .lph-plan__meta svg{width:16px; height:16px}
  .lph-journey__next{font-size:14px}
  .lph-verse__ref{font-size:14px}
  /* um pouco mais compactos que o desenho original, para caberem sem encolher */
  .lph-plan__cover{height:80px}
  .lph-plan__body{padding:12px 16px 14px}
  .lph-plan__meta{margin-top:8px}
  .lph-journey{padding:14px 18px}
  .lph-trail{margin-top:12px}
  .lph-verse{padding:14px 18px}
}

/* ---------- 6. Celular / abaixo de 900px ---------- */
@media (max-width: 899.98px){
  .lph{
    height:auto; display:flex; flex-direction:column;
    --lph-gutter:16px;
    --lph-title-size:42px; --lph-title-lh:1.06; --lph-sub-size:17px;
  }
  .lph-hero__content{height:auto; padding:96px var(--lph-gutter) 56px; display:block}
  .lph-copy{width:auto}
  .lph-sub{margin-top:14px}
  .lph-ctas{flex-direction:column; flex-wrap:nowrap; gap:12px; margin-top:24px}
  .lph-ctas .lph-btn{display:flex; width:100%}
  .lph-micro{margin-top:14px}
  .lph-play{margin-top:6px}

  .lph-hero__stage{position:relative; inset:auto; order:2; aspect-ratio:4 / 5; border-radius:0 0 var(--radius-xl) var(--radius-xl); isolation:isolate}
  .lph-hero__media{overflow:hidden; border-radius:inherit; transform:none; -webkit-mask-image:none; mask-image:none}
  .lph-hero__media img, .lph-hero__media video{object-position:50% 50%}
  .lph-hero__media::after{content:""; position:absolute; left:0; right:0; top:0; height:72px; background:linear-gradient(180deg, var(--bg-deep) 0%, rgba(6,8,15,0) 100%)}
  .lph-hero__scrim{display:none}
  .lph-particles{left:55%; right:5%}
  .lph-p:nth-child(2n){display:none}
  .lph-cards{perspective:none}
  .lph-fc{transition:none}
  /* Os três cards ao redor do bloco 4:5, sem tocar o rosto: A no alto à esquerda (versão
     compacta), B no alto à direita, C embaixo. O rosto ocupa o meio do quadro e a Bíblia a
     faixa de baixo; por isso nada fica na altura média. A escala (--lph-k) acompanha a largura. */
  .lph-fc--a{left:12px; top:-28px; width:172px; --lph-k:.9}
  .lph-fc--b{left:auto; right:12px; top:36px; width:204px; --lph-k:.78}
  .lph-fc--c{left:16px; top:auto; bottom:-90px; width:212px; --lph-k:.92}
  .lph-fc--a .lph-fc__in{animation-delay:calc(3 * var(--lph-in-step) + var(--lph-in-dur))}
  .lph-fc--b .lph-fc__in{animation-delay:calc(3 * var(--lph-in-step) + var(--lph-in-dur) + var(--lph-card-step))}
  .lph-fc--c .lph-fc__in{animation-delay:calc(3 * var(--lph-in-step) + var(--lph-in-dur) + 2 * var(--lph-card-step))}
  /* A compacto: sem descrição, capa baixa, só título + dias + nível */
  .lph-fc--b .lph-glass{transform-origin:100% 0}
  .lph-plan__cover{height:56px; padding:8px}
  .lph-plan__body{padding:10px 12px 12px}
  .lph-plan__title{font-size:15px}
  .lph-plan__desc{display:none}
  .lph-plan__meta{margin-top:6px; font-size:11.5px; gap:12px}
  .lph-tag{height:20px; font-size:9.5px; padding:0 8px}
  .lph .lph-glass{border-radius:var(--radius-md)}
  .lph-journey{padding:12px 14px}
  .lph-journey__head{gap:10px}
  .lph-journey__badge{width:36px; height:36px}
  .lph-journey__badge svg{width:18px; height:18px}
  .lph-journey__title{font-size:17px}
  .lph-journey__next{font-size:12px}
  .lph-trail{margin-top:10px}
  .lph-trail__node{width:22px; height:22px}
  .lph-trail__node svg{width:11px; height:11px}
  .lph-verse{padding:14px 16px}
  .lph-verse__mark{font-size:26px; height:12px}
  .lph-verse__text{font-size:14px; line-height:1.5; margin-top:4px}
  .lph-verse__ref{font-size:11px; margin-top:6px}

  .lph-trust{position:static; order:3; flex-direction:column; align-items:stretch; margin:112px var(--lph-gutter) 64px; padding:6px 18px}   /* 64px abaixo: a curva (28px) da seção seguinte não encosta na faixa */
  .lph-trust__item{padding:14px 0}
  .lph-trust__item + .lph-trust__item{border-left:0; border-top:1px solid var(--lph-line)}
  .lph-hero__content{order:1}
}
@media (min-width: 375px) and (max-width: 899.98px){ .lph-fc--a{--lph-k:1} .lph-fc--b{--lph-k:.84} }
@media (min-width: 414px) and (max-width: 899.98px){ .lph-fc--b{--lph-k:.9} .lph-fc--c{--lph-k:1} }
@media (min-width: 430px) and (max-width: 899.98px){ .lph-fc--b{--lph-k:.96} }

/* ---------- 7. Cabeçalho sobre o hero ----------
   O cabeçalho é o .lp-nav da landing. Enquanto o hero está na tela
   (classe .lp-nav--hero, tirada pelo lp-hero.js ao passar do hero) ele
   fica transparente, com texto claro e o logo para fundo escuro; depois
   de rolar 24px dentro do hero vira vidro escuro; fora do hero volta ao
   visual de landing.css, sem nenhuma regra daqui. */
.lp-nav .lp-nav-logo .lp-nav-logo--escuro{display:none}
.lp-nav--hero .lp-nav-logo .lp-nav-logo--claro{display:none}
.lp-nav--hero .lp-nav-logo .lp-nav-logo--escuro{display:block}
.lp-nav--hero .lp-nav-link{color:var(--fg)}
.lp-nav--hero .lp-nav-link:hover{color:var(--fg)}
.lp-nav--hero .lp-nav-link:focus-visible,
.lp-nav--hero .lp-nav-logo:focus-visible,
.lp-nav--hero .btn:focus-visible{outline:2px solid var(--fg); outline-offset:3px; border-radius:var(--radius-xs)}
.lp-nav--hero .btn-secondary{background:rgba(6,8,15,.55); color:var(--fg); border-color:rgba(192,196,255,.5); box-shadow:none}
.lp-nav--hero .btn-secondary:hover{background:rgba(6,8,15,.75); color:var(--fg)}
.lp-nav--hero .btn-primary{background:var(--periwinkle-600); color:var(--fg-on-primary); border-color:transparent}
.lp-nav--hero .btn-primary:hover{background:var(--periwinkle-700); color:var(--fg-on-primary)}
.lp-nav--hero.scrolled{
  background:rgba(21,26,49,.78);
  border-bottom-color:rgba(192,196,255,.18);
  box-shadow:0 8px 24px rgba(4,6,14,.4);
}

/* ---------- 8. Reduzir movimento ---------- */
@media (prefers-reduced-motion: reduce){
  .lph-rise, .lph-fc__in, .lph-fc__float{animation:none !important}
  .lph-particles{display:none}
  .lph-fc{transform:none !important; transition:none}
}