/* ============================================================
   PGTBoardView — PREVIEW cinematográfica (scroll-storytelling).
   A PÁGINA INTEIRA é uma sequência de CENAS full-screen (Apple-like):
   texto, labels, imagem e fundo animam ao entrar; rail de progresso.
   Paleta GPUTestSuiteVGA: grafite #000/#0A0A0A/#111, verde #2E7D32/#4CAF50
   acento/CTA, dourado #FFC107 só em tiques. Sem neon. Classes .pgv-.
   ============================================================ */
:root {
  --pv-bg: #0A0A0A; --pv-bg-2: #000000; --pv-panel: #0D0D0D; --pv-card: #111111;
  --pv-elev: #1A1A1A; --pv-elev-2: #222222; --pv-line: #1E1E1E; --pv-line-2: #333333; --pv-line-3: #404040;
  --pv-txt: #FFFFFF; --pv-txt-2: #C9C9C9; --pv-txt-3: #888888; --pv-txt-4: #555555;
  --pv-green: #2E7D32; --pv-green-2: #4CAF50; --pv-green-hover: #388E3C; --pv-green-dark: #1B5E20;
  --pv-gold: #E0A93A; --pv-gold-hi: #FFC107; --pv-danger: #F44336;
  --pv-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --pv-radius: 12px; --pv-radius-sm: 8px; --pv-shadow: 0 14px 30px -18px rgba(0,0,0,.72); --pv-maxw: 1180px;
  --pgv-zoom: 1.54; /* "zoom" (tamanho maior) no desktop — não é a causa do travamento */
  /* Altura do header fixo. O JS remede e regrava (idioma, zoom, redimensionar);
     este valor é só o palpite inicial. O respiro do topo das cenas SAI daqui:
     como a cena centraliza o conteúdo, um respiro menor que o header faz o
     primeiro bloco nascer por baixo dele — foi o que escondia o "Comece agora"
     e o topo do título na cena de download. */
  --pgv-head: 70px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--pv-bg); color: var(--pv-txt); font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Botões ---------- */
.pgv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: 0.95rem; padding: 12px 24px; border-radius: var(--pv-radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.pgv-btn:active { transform: translateY(1px); }
.pgv-btn-cta { background: linear-gradient(180deg, var(--pv-green-hover), var(--pv-green)); color: #fff; box-shadow: 0 8px 22px -12px rgba(46,125,50,.75); }
.pgv-btn-cta:hover { background: linear-gradient(180deg, var(--pv-green-2), var(--pv-green-hover)); }
.pgv-btn-solid { background: var(--pv-elev-2); color: var(--pv-txt); border-color: var(--pv-line-2); }
.pgv-btn-solid:hover { background: #2a2a2a; border-color: var(--pv-line-3); }
.pgv-btn-ghost { background: transparent; color: var(--pv-txt-2); border-color: var(--pv-line-2); }
.pgv-btn-ghost:hover { color: var(--pv-txt); border-color: var(--pv-line-3); }
.pgv-btn-lg { padding: 15px 30px; font-size: 1rem; }

/* ---------- Header (slim, transparente) ---------- */
/* header sólido translúcido — sem backdrop-filter (custava repaint por quadro no scroll) */
.pgv-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(8,8,8,.92); border-bottom: 1px solid var(--pv-line); }
.pgv-header-in { max-width: var(--pv-maxw); margin: 0 auto; padding: 12px 26px; display: flex; align-items: center; gap: 26px; }
.pgv-logo { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.06rem; }
.pgv-logo img { height: 28px; }
.pgv-logo b { color: var(--pv-green-2); }
/* Menu em pastilhas: contorno fino, sem preenchimento, para ter peso de botao
   sem disputar com o CTA verde da direita. Acende no hover igual aos selos
   de plataforma do card de download. */
.pgv-nav { display: flex; gap: 8px; margin-left: 14px; }
.pgv-nav a { color: var(--pv-txt-3); font-size: .85rem; font-weight: 500; padding: 6px 12px; border: 1px solid var(--pv-line); border-radius: 999px; white-space: nowrap; transition: color .14s ease, border-color .14s ease, background .14s ease; }
.pgv-nav a:hover { color: var(--pv-txt); border-color: var(--pv-green-2); background: rgba(76,175,80,.10); }
/* Tela mais estreita: aperta a pastilha antes de o menu brigar com o CTA. */
@media (max-width: 1150px) { .pgv-nav { gap: 6px; margin-left: 8px; } .pgv-nav a { padding: 5px 9px; font-size: .8rem; } }
.pgv-header-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pgv-header-cta .pgv-login { color: var(--pv-txt-2); font-size: 0.9rem; font-weight: 600; }
.pgv-header-cta .pgv-login[hidden] { display: none !important; }
.pgv-header-cta .pgv-login:hover { color: var(--pv-txt); }
.pgv-header-cta .pgv-user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgv-header-cta .pgv-user-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--pv-green-2); box-shadow: 0 0 0 3px rgba(76,175,80,.14); vertical-align: 1px; }

/* ---------- Rail de progresso (cenas) ---------- */
.pgv-rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 15px; }
.pgv-rail a { position: relative; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--pv-line-3); background: transparent; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.pgv-rail a.on { background: var(--pv-green-2); border-color: var(--pv-green-2); transform: scale(1.25); }
.pgv-rail a span { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--pv-mono); font-size: .7rem; color: var(--pv-txt-2); opacity: 0; pointer-events: none; background: rgba(0,0,0,.72); padding: 3px 9px; border-radius: 100px; border: 1px solid var(--pv-line-2); transition: opacity .18s ease; }
.pgv-rail a:hover span { opacity: 1; }

/* ---------- DECK (navegação por transform na GPU — estilo fullpage.js) ---------- */
.pgv-deck { position: relative; }
html.pgv-paged, html.pgv-paged body { overflow: hidden; height: 100%; }
html.pgv-paged .pgv-deck { will-change: transform; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
html.pgv-probing .pgv-deck { transition: none; }

/* Estado transitorio da medicao (JS): libera a altura para ler o tamanho NATURAL
   da cena. O JS adiciona e remove a classe dentro do mesmo bloco sincrono, entao
   nenhum quadro chega a ser pintado com ela. */
html.pgv-measuring .pgv-scene { min-height: 0; height: auto; }

/* Existe UM mecanismo de navegacao vertical por vez. Quando tudo cabe, o deck
   paginado acima e o dono. Se uma cena for mais alta, o JS desliga o deck e liga
   pgv-native-snap: o navegador aproxima a parada da cena sem impedir que o usuario
   percorra o interior da cena alta. `mandatory` e proibido aqui justamente porque
   conteudo maior que a tela poderia ficar inalcançavel. As classes nunca coexistem. */
@media (min-width: 1000px) {
  html.pgv-native-snap { scroll-snap-type: y proximity; }
  html.pgv-native-snap .pgv-scene { scroll-snap-align: start; }
}

/* ---------- CENA (base) ---------- */
/* Cena real = 1 tela (100svh), sem zoom no html. snap encaixa em coordenadas reais.
   header sólido já dá 0-jank; conteúdo é dimensionado p/ caber (imagem tem teto de altura). */
/* min-height, nunca height: a cena ocupa uma tela quando o conteúdo cabe e CRESCE
   quando não cabe. Com `height: 100svh` fixo aqui, qualquer excesso (zoom do
   navegador, escala do Windows a 125/150%, fonte grande) era cortado pelo
   overflow — inclusive o rodapé da última cena. */
.pgv-scene { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--pgv-head) + 8px) 0 64px; overflow: hidden; contain: layout paint; }
/* Só o modo paginado fixa a altura: ali a navegação é por transform e cada cena
   precisa medir exatamente uma tela. O JS só liga esse modo quando tudo cabe. */
html.pgv-paged .pgv-scene { height: 100svh; }
/* fundo/glow SEMPRE visíveis (sem fade no scroll) — pintados uma vez, zero repaint por quadro */
.pgv-scene-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 45px, rgba(255,255,255,.012) 45px 46px),
    repeating-linear-gradient(90deg, transparent 0 45px, rgba(255,255,255,.012) 45px 46px);
}
.pgv-scene-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pgv-scene-glow.r { background: radial-gradient(760px 520px at 80% 35%, rgba(46,125,50,.16), transparent 60%); }
.pgv-scene-glow.l { background: radial-gradient(760px 520px at 20% 40%, rgba(46,125,50,.15), transparent 60%); }
.pgv-scene-glow.c { background: radial-gradient(820px 520px at 50% 20%, rgba(46,125,50,.14), transparent 62%); }
.pgv-scene-in { position: relative; z-index: 1; width: 100%; max-width: var(--pv-maxw); margin: 0 auto; padding: 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.pgv-scene.rev .pgv-scene-media { order: -1; }
.pgv-scene.center .pgv-scene-in { grid-template-columns: 1fr; text-align: center; max-width: 820px; }

/* efeito "construção" — roda JUNTO com o slide do deck (tudo compositor). Rápido:
   a cena termina de se montar quando o slide pousa (não fica esperando). */
.pgv-scene .cine { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .4s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1); }
.pgv-scene.is-active .cine { opacity: 1; transform: translate3d(0, 0, 0); }
.pgv-scene.is-active .cine.d1 { transition-delay: .12s; }
.pgv-scene.is-active .cine.d2 { transition-delay: .2s; }
.pgv-scene.is-active .cine.d3 { transition-delay: .28s; }
.pgv-scene.is-active .cine.d4 { transition-delay: .36s; }
.pgv-scene-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--pv-mono); font-size: .74rem; letter-spacing: 3px; text-transform: uppercase; color: var(--pv-txt-3); margin-bottom: 18px; }
.pgv-scene-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--pv-gold); }
.pgv-scene-eyebrow b { color: var(--pv-green-2); font-weight: 600; }
.pgv-scene h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; text-transform: uppercase; }
.pgv-scene .sub { color: var(--pv-txt-2); font-size: 1.12rem; max-width: 480px; margin-top: 18px; }
/* ressalva discreta por aba (data-note): letra pequena abaixo da legenda */
.pgv-scene .subnote { display: block; color: var(--pv-txt-2); filter: brightness(.68); font-style: italic; font-size: .7rem; max-width: 480px; margin-top: 8px; }
.pgv-scene .subnote[hidden] { display: none; }
.pgv-scene.center .sub { margin-left: auto; margin-right: auto; }
#scene-hero .sub.sub2 { font-size: .93rem; margin-top: 12px; opacity: .82; }
.pgv-scene .labels { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 26px; }
.pgv-scene.center .labels { justify-content: center; }
.pgv-scene .labels span { font-family: var(--pv-mono); font-size: .76rem; color: var(--pv-txt-2); border: 1px solid var(--pv-line-2); background: var(--pv-card); border-radius: 100px; padding: 5px 13px; }
/* chips clicáveis (abas que trocam a imagem da cena) */
.pgv-scene .labels button { font-family: var(--pv-mono); font-size: .76rem; color: var(--pv-txt-2); border: 1px solid var(--pv-line-2); background: var(--pv-card); border-radius: 100px; padding: 5px 13px; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.pgv-scene .labels button:hover { border-color: var(--pv-line-3); color: var(--pv-txt); }
.pgv-scene .labels button.on { border-color: var(--pv-green); color: #fff; background: rgba(46,125,50,.16); }
.pgv-scene-cta { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 30px; }
.pgv-scene.center .pgv-scene-cta { justify-content: center; }

/* imagem "se criando": zoom-in leve + fade, GPU-composto, junto com o slide */
.pgv-scene-media { position: relative; opacity: 0; transform: translate3d(0, 16px, 0) scale(1.035); transition: opacity .45s ease .1s, transform .55s cubic-bezier(.2,.7,.2,1) .1s; }
.pgv-scene.is-active .pgv-scene-media { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.pgv-frame { position: relative; border: 1px solid var(--pv-line-2); border-radius: var(--pv-radius); overflow: hidden; box-shadow: var(--pv-shadow); background: var(--pv-panel); }
.pgv-frame .bar { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: var(--pv-elev); border-bottom: 1px solid var(--pv-line-2); }
.pgv-frame .bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
.pgv-frame .bar span { margin-left: 8px; font-family: var(--pv-mono); font-size: .74rem; color: var(--pv-txt-3); }
/* área da imagem travada em 16:9: trocar de aba nunca muda a altura (sem "desnível");
   captura fora do padrão aparece centralizada (contain) em vez de esticar a cena */
.pgv-frame img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; display: block; background: #0A0A0A; }
/* lupa: hover amplia a imagem seguindo o mouse (JS define origem/escala; só desktop) */
.pgv-frame { cursor: zoom-in; }
.pgv-frame .bar { position: relative; z-index: 2; }
.pgv-frame::after { content: ""; position: absolute; top: -1px; right: -1px; width: 16px; height: 16px; border-top: 2px solid var(--pv-gold); border-right: 2px solid var(--pv-gold); border-top-right-radius: var(--pv-radius); }

/* ---------- HERO (cena 1) ---------- */
.pgv-hero-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pv-mono); font-size: .75rem; letter-spacing: 1px; color: var(--pv-txt-2); border: 1px solid var(--pv-line-2); border-radius: 100px; padding: 5px 13px; margin-bottom: 22px; }
.pgv-hero-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--pv-green-2); box-shadow: 0 0 0 3px rgba(76,175,80,.16); }
.pgv-hero-h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: .98; letter-spacing: -0.04em; font-weight: 800; }
.pgv-hero-h1 span { color: var(--pv-green-2); }
.pgv-hero-scroll { margin-top: 44px; font-family: var(--pv-mono); font-size: .72rem; letter-spacing: 2px; color: var(--pv-txt-3); display: inline-flex; align-items: center; gap: 8px; }
.pgv-hero-scroll::after { content: ""; width: 1px; height: 26px; background: linear-gradient(var(--pv-green-2), transparent); animation: pgvscroll 1.8s ease-in-out infinite; }
@keyframes pgvscroll { 0%,100% { opacity:.3; transform: translateY(0);} 50% { opacity:1; transform: translateY(4px);} }

/* Coverflow 3D do hero */
.pgv-cf { position: relative; z-index: 1; width: 100%; height: 420px; perspective: 1600px; }
.pgv-cf-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
/* dim por opacity (não por filter: brightness — filter repinta a cada quadro e trava) */
.pgv-cf-item { position: absolute; top: 50%; left: 50%; width: 72%; max-width: 560px; margin: 0; transition: transform .9s cubic-bezier(.25,.7,.2,1), opacity .9s ease; cursor: pointer; will-change: transform; }
.pgv-cf-item img { width: 100%; height: auto; display: block; border: 1px solid var(--pv-line-2); border-radius: var(--pv-radius); box-shadow: var(--pv-shadow); }
.pgv-cf-item.is-active img { border-color: var(--pv-green); }
.pgv-cf-nav { position: absolute; top: 0; bottom: 40px; width: 17%; z-index: 30; cursor: pointer; display: flex; align-items: center; opacity: .28; transition: opacity .15s ease; }
.pgv-cf-nav:hover { opacity: 1; }
.pgv-cf-prev { left: 0; } .pgv-cf-next { right: 0; justify-content: flex-end; }
.pgv-cf-nav svg { width: 28px; height: 28px; color: #fff; filter: drop-shadow(0 1px 4px #000); }
.pgv-cf-dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; gap: 7px; justify-content: center; z-index: 30; }
.pgv-cf-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--pv-line-3); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.pgv-cf-dots i.on { background: var(--pv-green-2); transform: scale(1.3); }
.pgv-cf-cap { text-align: center; margin-top: 10px; }
.pgv-cf-cap span { font-family: var(--pv-mono); font-size: .78rem; color: var(--pv-txt-2); border: 1px solid var(--pv-line-2); background: var(--pv-card); padding: 5px 14px; border-radius: 100px; }

/* ---------- Preço / Download (cena final) ---------- */
.pgv-buy { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; margin-top: 40px; text-align: left; }
.pgv-buy-card { background: var(--pv-card); border: 1px solid var(--pv-line-2); border-radius: var(--pv-radius); padding: 30px; position: relative; overflow: hidden; }
.pgv-buy-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.pgv-buy-card.price::before { background: linear-gradient(90deg, var(--pv-green-dark), var(--pv-green-2)); }
.pgv-buy-card.dl::before { background: var(--pv-line-2); }
.pgv-buy-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.pgv-buy-card .s { color: var(--pv-txt-3); font-size: .9rem; margin-bottom: 18px; }
.pgv-price { font-family: var(--pv-mono); font-size: 2.7rem; font-weight: 800; color: var(--pv-green-2); letter-spacing: -0.02em; }
.pgv-price small { font-size: 1rem; color: var(--pv-txt-3); font-weight: 400; font-family: "Segoe UI", sans-serif; }
.pgv-buy ul { list-style: none; margin: 18px 0 22px; display: grid; gap: 9px; }
.pgv-buy li { position: relative; padding-left: 25px; color: var(--pv-txt-2); font-size: .94rem; }
.pgv-buy li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 11px; height: 7px; border-left: 2px solid var(--pv-green-2); border-bottom: 2px solid var(--pv-green-2); transform: rotate(-45deg); }
/* Selos de plataforma lado a lado (padrao de loja de app): o do Windows baixa,
   o do macOS fica inerte ate a build existir. Icone monocromatico via currentColor. */
.pgv-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pgv-store { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--pv-line-2); border-radius: var(--pv-radius-sm); background: var(--pv-elev); color: var(--pv-txt); transition: border-color .15s ease, background .15s ease; }
a.pgv-store:hover { border-color: var(--pv-green-2); background: rgba(76,175,80,.10); }
.pgv-store .ico { display: flex; flex: 0 0 auto; }
.pgv-store .ico svg { width: 21px; height: 21px; display: block; fill: currentColor; }
.pgv-store .txt { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.pgv-store small { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pv-txt-3); }
.pgv-store b { font-size: .92rem; font-weight: 600; white-space: nowrap; }
/* Ainda nao lancado: apagado e sem afordancia de clique. */
.pgv-store.is-soon { opacity: .5; cursor: default; }
@media (max-width: 560px) { .pgv-stores { grid-template-columns: 1fr; } }

.pgv-dl-meta { margin-top: 16px; border-top: 1px solid var(--pv-line-2); padding-top: 14px; }
.pgv-dl-meta summary { cursor: pointer; color: var(--pv-txt-3); font-size: .86rem; }
.pgv-dl-meta .kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--pv-line); font-size: .86rem; }
.pgv-dl-meta .kv:last-child { border-bottom: none; }
.pgv-dl-meta .kv span:first-child { color: var(--pv-txt-3); }
.pgv-dl-meta .kv span:last-child { font-family: var(--pv-mono); color: var(--pv-txt-2); word-break: break-all; text-align: right; }

/* ---------- Footer ---------- */
.pgv-footer { border-top: 1px solid var(--pv-line-2); background: var(--pv-bg-2); padding: 40px 0 34px; }
.pgv-footer-in { max-width: var(--pv-maxw); margin: 0 auto; padding: 0 26px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.pgv-footer .pgv-logo b { color: var(--pv-green-2); }
.pgv-footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.pgv-footer-links a { color: var(--pv-txt-3); font-size: .9rem; }
.pgv-footer-links a:hover { color: var(--pv-txt); }
.pgv-footer small { color: var(--pv-txt-3); font-size: .85rem; }

/* ---------- "Zoom" embutido no desktop (deixa tudo maior, tipo 120-140% do navegador) ----------
   zoom escala a página inteira; compensa-se a altura da cena p/ continuar "1 cena = 1 tela".
   MQ enxerga a largura real (o zoom não altera vw/vh/innerWidth no Blink), então não oscila. */
/* Paginação (desktop) por JS (wheel-lock). Zoom no html p/ tamanho maior — não quebra
   coordenada porque o pager usa getBoundingClientRect + scrollIntoView (à prova de zoom). */
@media (min-width: 1000px) {
  html { zoom: var(--pgv-zoom); }
  /* Mesma regra da base: piso, não teto. O `height` fixo volta só no modo
     paginado (abaixo), que o JS só liga depois de confirmar que a cena cabe. */
  .pgv-scene { min-height: calc(100svh / var(--pgv-zoom)); }
  html.pgv-paged .pgv-scene { height: calc(100svh / var(--pgv-zoom)); }
  /* imagem nunca maior que o espaço vertical da cena (senão clipa a base); mantém proporção */
  .pgv-frame img { max-height: calc((100svh / var(--pgv-zoom)) - 188px); object-fit: contain; }
  /* Nao reserve camadas de GPU para as oito cenas ao mesmo tempo: no Firefox,
     sobretudo com zoom alto, isso pesa na rolagem. So a cena em animacao ganha
     a dica de composicao; as demais ficam baratas. */
  .pgv-scene.is-active .cine, .pgv-scene.is-active .pgv-scene-media { will-change: transform, opacity; }
}
/* hero: encolhe o carrossel conforme a altura da tela (senão estoura com o sub maior) */
@media (min-width: 1000px) and (max-height: 920px) { .pgv-cf { height: 375px; } .pgv-hero-tag { margin-bottom: 16px; } #scene-hero .labels { margin-top: 18px; } #scene-hero .pgv-scene-cta { margin-top: 22px; } .pgv-hero-scroll { margin-top: 28px; } #scene-hero .sub.sub2 { font-size: .88rem; margin-top: 10px; } }
@media (min-width: 1000px) and (max-height: 850px) { .pgv-cf { height: 330px; } .pgv-hero-scroll { margin-top: 26px; } }
@media (min-width: 1000px) and (max-height: 780px) {
  .pgv-cf { height: 265px; }
  .pgv-hero-h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
  #scene-hero .sub { font-size: .98rem; }
  #scene-hero .sub.sub2 { font-size: .84rem; margin-top: 8px; }
  #scene-hero .pgv-scene-cta { margin-top: 18px; }
  #scene-hero .labels { margin-top: 16px; }
  .pgv-hero-scroll { margin-top: 12px; }
  .pgv-hero-tag { margin-bottom: 14px; }
}
/* Altura util muito curta (ex.: 1280x720 a 125%, ou 1920x1080 com o zoom do
   navegador em 150%): o hero passa a ser a cena que estoura a tela. Aperta os
   respiros dele — sem tirar texto, chips, botoes ou o carrossel — para que o
   encaixe por telas continue valendo em vez de virar rolagem livre.
   O teto e 700px, nao 620: entre 620 e 700 nao havia compactacao nenhuma e nada
   cabia, entao o modo paginado desligava so nessa faixa e voltava a ligar mais
   apertado ainda. Dar zoom trocava de comportamento e voltava — sem sentido
   para quem esta usando.
   O respiro do topo continua maior que o header fixo, senao o primeiro bloco
   passaria por baixo dele. */
@media (min-width: 1000px) and (max-height: 700px) {
  .pgv-scene { padding: var(--pgv-head) 0 40px; }
  .pgv-cf { height: 215px; }
  .pgv-hero-tag { margin-bottom: 8px; }
  #scene-hero .sub { margin-top: 10px; font-size: .92rem; }
  #scene-hero .sub.sub2 { font-size: .8rem; margin-top: 6px; }
  #scene-hero .labels { margin-top: 10px; }
  #scene-hero .pgv-scene-cta { margin-top: 12px; }
  #scene-hero .pgv-scene-cta .pgv-btn-lg { padding: 10px 22px; }
  .pgv-hero-scroll { margin-top: 10px; }
}

/* TETO do zoom por altura de tela. O valor final quem escolhe e o JS, que mede
   a cena mais alta e usa o maior zoom ATE este teto em que ela ainda cabe; isto
   aqui e o limite superior (e a unica escala se o JS nao rodar). */
@media (min-width: 1000px) and (max-height: 850px) { :root { --pgv-zoom: 1.32; } }
@media (min-width: 1000px) and (max-height: 800px) { :root { --pgv-zoom: 1.28; } }
@media (min-width: 1000px) and (max-height: 750px) { :root { --pgv-zoom: 1.19; } }
/* macOS (html.pgv-mac via JS): sem zoom, igual ao Firefox.
   Motivo: o truque `calc(100svh / zoom)` assume o comportamento do Blink (zoom NÃO
   altera as unidades de viewport). No WebKit/Safari o zoom ALTERA vh/svh, então a
   cena fica curta demais e o rodapé (que vive dentro da última cena, com
   overflow:hidden) era cortado. Sem zoom a conta fecha em qualquer engine.
   Bônus: telas de Mac (Air M1 ~1440x900 "looks like") já são baixas, e a cena
   precisa caber inteira em 1 tela porque no modo paginado o body não rola. */
html.pgv-mac { --pgv-zoom: 1; }
html.pgv-mac .pgv-scene-media { transform: translate3d(0, 16px, 0); }
html.pgv-mac .pgv-scene.is-active .pgv-scene-media { transform: translate3d(0, 0, 0); }

/* TOQUE (html.pgv-touch via JS): iPad/tablet/TV em paisagem têm largura >=1000px e
   caíam no modo paginado — que navega só por roda do mouse. Sem gesto de swipe o
   usuário ficava PRESO na 1ª tela (o body trava o scroll). Aqui desligamos o modo
   cena-cheia: rolagem normal, altura automática e nada cortado. */
html.pgv-touch { --pgv-zoom: 1; }
html.pgv-touch .pgv-scene { min-height: auto; height: auto; overflow: visible; padding: 44px 0 56px; }
html.pgv-touch .pgv-deck .pgv-scene:first-of-type { padding-top: 92px; }
html.pgv-touch .pgv-rail { display: none; }
html.pgv-touch .pgv-frame img { max-height: none; }
html.pgv-touch .pgv-scene-media { transform: translate3d(0, 16px, 0); }
html.pgv-touch .pgv-scene.is-active .pgv-scene-media { transform: translate3d(0, 0, 0); }

/* Firefox (html.pgv-ff via JS): sem zoom (caminho lento no Gecko) e reveal sem scale.
   Vem depois do Mac de propósito: Firefox no Mac também roda sem zoom. */
html.pgv-ff { --pgv-zoom: 1; }
html.pgv-ff .pgv-scene-media { transform: translate3d(0, 16px, 0); }
html.pgv-ff .pgv-scene.is-active .pgv-scene-media { transform: translate3d(0, 0, 0); }

/* Compactar a cena final p/ preço/cards + faixa de mídia caberem juntos na 1ª vista.
   O respiro do topo é o menor possível — mas nunca menor que o header, senão o
   "Comece agora" e o título somem por baixo dele. */
#scene-download { padding-top: var(--pgv-head); }
#scene-download h2 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
#scene-download .pgv-scene-eyebrow { margin-bottom: 6px; }
#scene-download .sub { margin-top: 6px; font-size: .92rem; }
#scene-download .pgv-buy { margin-top: 12px; gap: 14px; }
#scene-download .pgv-buy-card { padding: 12px 16px; }
#scene-download .pgv-buy-card h3 { font-size: .98rem; margin-bottom: 2px; }
#scene-download .pgv-buy-card .s { margin-bottom: 8px; }
#scene-download .pgv-price { font-size: 1.45rem; }
#scene-download .pgv-buy ul { margin: 8px 0 10px; gap: 5px; }
#scene-download .pgv-store { padding: 7px 10px; }
#scene-download .pgv-store b { font-size: .86rem; }
#scene-download .pgv-buy li { font-size: .86rem; }
#scene-download .pgv-buy-card .pgv-btn-lg { padding: 9px 18px; font-size: .9rem; }
#scene-download .pgv-dl-meta { margin-top: 8px; padding-top: 8px; }
/* faixa "NA MÍDIA" no rodapé (matérias em que o Paulo saiu) */
.pgv-press { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 26px 8px; }
.pgv-press .t { font-family: var(--pv-mono); font-size: .64rem; letter-spacing: 3px; color: var(--pv-txt-4); }
/* esteira: os logos deslizam da direita p/ esquerda e somem no limite (máscara de fade) */
.pgv-press .logos-marquee { overflow: hidden; max-width: 700px; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.pgv-press .logos-track { display: flex; width: max-content; animation: pgv-marquee 26s linear infinite; will-change: transform; }
.pgv-press .logos-track:hover { animation-play-state: paused; }
@keyframes pgv-marquee { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .pgv-press .logos-track { animation: none; } }
.pgv-press .logos { flex: none; display: flex; align-items: center; gap: 46px; padding-right: 46px; }
.pgv-press .logos img { height: 22px; width: auto; opacity: .75; transition: opacity .15s ease; }
.pgv-press .logos img.sq { height: 30px; } /* selo quadrado (Guru3D) precisa de mais altura p/ equilibrar com os wordmarks */
.pgv-press .logos a:hover img, .pgv-press .logos img:hover { opacity: 1; }
.pgv-press .hwinfo-entry { display: flex; align-items: center; gap: 8px; min-width: 132px; opacity: .82; }
.pgv-press .hwinfo-entry > span { display: grid; gap: 4px; line-height: 1; }
.pgv-press .hwinfo-entry b { color: #dce6de; font: 700 .65rem/1 var(--pv-mono); letter-spacing: .05em; }
.pgv-press .hwinfo-entry small { color: var(--pv-green-2); font: 600 .44rem/1 var(--pv-mono); letter-spacing: .08em; }
.pgv-press .hwinfo-entry:hover { opacity: 1; }
.pgv-press .hwinfo-entry:hover b { color: #fff; }

/* A cena final empilha em COLUNA: conteúdo (preço + download) ocupa o espaço
   livre e o rodapé — com a faixa de portais — é a última linha da própria cena.
   Como o rodapé pertence à cena, a última parada da navegação já mostra tudo:
   não existe "mais uma rolagem" para alcançá-lo, nem em modo paginado nem na
   rolagem nativa do celular. É também o que impede o rodapé de ser sobreposto:
   ele está no fluxo, não ancorado por cima. */
#scene-download { flex-direction: column; align-items: stretch; padding-bottom: 0; }
#scene-download > .pgv-scene-in { flex: 1 1 auto; }
#scene-download > .pgv-footer { flex: 0 0 auto; width: 100%; margin-top: 24px; }
/* desktop: rodapé enxuto e integrado à cena (sem bloco preto separando) */
@media (min-width: 1000px) {
  #scene-download > .pgv-footer { margin-top: 14px; padding: 10px 0; background: transparent; border-top: 1px solid var(--pv-line); }
  #scene-download > .pgv-footer .pgv-footer-in { padding: 0 26px; }
  #scene-download > .pgv-footer small, #scene-download > .pgv-footer .pgv-footer-links a { font-size: .78rem; }
}
/* telas baixas (ex.: 720p): compacta mais a cena final p/ nada clipar atrás do
   header. A faixa de imprensa NUNCA é escondida — esconder conteúdo era o bug;
   quando nem assim cabe, o JS reduz o zoom e, no limite, libera a rolagem. */
@media (min-width: 1000px) and (max-height: 780px) {
  #scene-download > .pgv-footer { margin-top: 10px; padding: 8px 0; }
  #scene-download h2 { font-size: clamp(1.05rem, 1.7vw, 1.4rem); }
  #scene-download .sub { margin-top: 6px; font-size: .9rem; }
  #scene-download .pgv-buy { margin-top: 10px; }
  #scene-download .pgv-buy-card { padding: 12px 16px; }
  #scene-download .pgv-buy ul { margin: 8px 0 10px; gap: 5px; }
  #scene-download .pgv-store { padding: 6px 9px; }
  #scene-download .pgv-store .ico svg { width: 18px; height: 18px; }
}
/* Em zoom/escala fortes a altura CSS cai para 550-700px. A cena final e a que
   passa desse limite e obriga a pagina a abandonar o encaixe por telas.
   Compacta espacamentos, sem remover texto, logos ou botoes.
   O teto acompanha o do hero (700px) de proposito: com um em 620 e o outro em
   650, sobrava uma faixa em que nada compactava e o modo paginado desligava so
   ali — dar zoom trocava de comportamento e voltava. */
@media (min-width: 1000px) and (max-height: 700px) {
  #scene-download .pgv-scene-eyebrow { margin-bottom: 2px; }
  #scene-download h2 { font-size: 1rem; }
  #scene-download .sub { margin-top: 2px; font-size: .78rem; }
  #scene-download .pgv-buy { margin-top: 5px; gap: 9px; }
  #scene-download .pgv-buy-card { padding: 7px 11px; }
  #scene-download .pgv-buy-card h3 { font-size: .9rem; }
  #scene-download .pgv-price { margin: 4px 0; font-size: 1.45rem; }
  #scene-download .pgv-buy ul { margin: 4px 0 6px; gap: 2px; }
  #scene-download .pgv-buy li, #scene-download .pgv-buy-card .s { font-size: .72rem; }
  #scene-download .pgv-btn-lg { padding: 7px 14px; }
  #scene-download .pgv-stores { margin-top: 5px; }
  #scene-download > .pgv-footer { margin-top: 7px; padding: 3px 0; }
  #scene-download > .pgv-footer .pgv-press { padding: 2px 0 4px; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 999px) {
  .pgv-rail { display: none; }
  .pgv-nav { display: none; }
  /* header cabe em 1 linha no celular (senão o CTA quebra sobre o logo) */
  .pgv-header-in { padding: 10px 14px; gap: 10px; }
  .pgv-logo { font-size: .95rem; gap: 8px; }
  .pgv-logo img { height: 24px; }
  .pgv-header-cta .pgv-login { display:inline-flex; min-height:36px; align-items:center; padding:7px 9px; border:1px solid var(--pv-line-2); border-radius:8px; white-space:nowrap; }
  .pgv-header-cta .pgv-btn { padding: 9px 12px; font-size: .82rem; white-space: nowrap; }
  /* header opaco no celular: o conteúdo não passa "fantasma" por baixo ao rolar */
  .pgv-header { background: #0A0A0A; }
  .pgv-scene { min-height: auto; height: auto; padding: 44px 0 56px; }
  /* 1ª cena precisa de folga pro header fixo */
  .pgv-deck .pgv-scene:first-of-type { padding-top: 86px; }
  .pgv-scene-in { grid-template-columns: 1fr; gap: 26px; }
  /* 1 coluna = tudo centralizado (título, legenda, chips, botões, notas) */
  .pgv-scene-copy { text-align: center; }
  .pgv-scene-eyebrow { justify-content: center; }
  .pgv-scene .sub, .pgv-scene .subnote { margin-left: auto; margin-right: auto; }
  .pgv-scene .labels { justify-content: center; }
  .pgv-scene-cta { justify-content: center; }
  /* mobile = estático (sem reveal/camadas): mais leve e sem depender do scroll assentar */
  .pgv-scene .cine, .pgv-scene-media { opacity: 1; transform: none; transition: none; }
  .pgv-scene-media { order: -1; }
  .pgv-scene.rev .pgv-scene-media { order: -1; }
  .pgv-buy { grid-template-columns: 1fr; }
  .pgv-cf { height: 280px; } .pgv-cf-item { width: 84%; }
}
@media (max-width: 560px) {
  /* No celular nenhum acesso importante some: marca na primeira linha e
     conta, login, download e idioma na segunda. */
  .pgv-header { position:sticky; }
  .pgv-header-in { flex-wrap:wrap; justify-content:center; padding:9px 10px; gap:7px; }
  .pgv-logo { width:100%; justify-content:center; }
  .pgv-header-cta { width:100%; margin-left:0; justify-content:center; flex-wrap:wrap; gap:6px; }
  .pgv-header-cta .pgv-login { min-height:34px; padding:6px 8px; font-size:.78rem; }
  .pgv-header-cta .pgv-btn { min-height:34px; padding:7px 9px; font-size:.74rem; }
  .pgv-deck .pgv-scene:first-of-type { padding-top:44px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Reduzir movimento tambem desliga o encaixe nativo de contingencia. */
  html { scroll-behavior: auto !important; }
  .pgv-scene .cine, .pgv-scene-media, .pgv-scene-bg, .pgv-scene-glow { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pgv-cf-item { transition: none; }
  .pgv-hero-scroll::after { animation: none; }
}