/* =====================================================================
   home.css — a home publica do QG Policial na PELE NOVA (28/09/2026).

   TOKENS
   A paleta operacional da plataforma (skill qg-pele): asfalto a noite,
   cartao grafite, UM acento dourado so no botao principal, verde neon so
   para acerto e avanco. Os quadros sao os mostradores circulares sobre
   fundo pintado de cor profunda (qg_quadros.py), escuros nos dois temas.
   Letra: IBM Plex Sans (texto e titulo, caixa normal) e IBM Plex Sans
   Condensed (numero, rotulo, botao).

   NOMES
   Prefixo `lp-` (landing page) para nao colidir com o `.qg-*` do produto.
   Os quadros (`.qq-*`) e a trilha (`.tr-*`) usam os nomes da plataforma
   de proposito: e o mesmo componente.

   MOVIMENTO (referencia: o template que o Xerife mandou, na pele do QG)
   - `.lp-revela`: sobe 16px e abre o recorte de baixo para cima, 480ms,
     escada de 70ms (teto 350ms). Desfoque so no computador com mouse.
   - Tudo escondido so existe com `html.js-io`, classe que SO o home.js
     poe. Sem JS ou com prefers-reduced-motion, a pagina nasce pronta.
   - So transform, opacity, clip-path e stroke-dasharray animam.
   ===================================================================== */

:root {
  --bg: #171D26;
  --card: #1F2732;
  --card2: #28323F;
  --bd: #3A4654;
  --tx: #F3F7FB;
  --tx2: #C3CEDB;
  --tx3: #9AA8B8;
  --ouro: #E3B341;
  --ouro-borda: #B98A1E;
  --ouro-fraco: rgba(227, 179, 65, .14);
  --ok: #3DD673;
  --neon: #3EFF7A;
  --err: #F87171;

  --font-display: 'IBM Plex Sans Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-anda: cubic-bezier(.45, 0, .2, 1);
  --t-entra: .48s;

  --lp-largura: 1180px;
  --lp-lateral: 16px;
  --lp-secao: clamp(64px, 9vw, 112px);
  --lp-topo-altura: 60px;
  --lp-barra-altura: 0px;
  --pontilhado: radial-gradient(rgba(255, 255, 255, .11) 1.2px, transparent 1.3px);
}
@media (min-width: 600px) { :root { --lp-lateral: clamp(20px, 4vw, 32px); } }

/* ---------------------------------------------------------------------
   base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip (e nao hidden): o que entra pela direita (relatos, duvidas) nao alarga a pagina
   no celular, e o cabecalho sticky continua funcionando (clip nao cria rolagem) */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--lp-topo-altura) + 12px); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--tx);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background-image: var(--pontilhado); background-size: 22px 22px;
}
body { overflow-x: clip; }
.lp-secao, .lp-hero { overflow-x: clip; }
@media (min-width: 900px) { body { font-size: 16.5px; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 4px; }

.lp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-wrap { width: 100%; max-width: var(--lp-largura); margin: 0 auto; padding: 0 var(--lp-lateral); }
.lp-pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ouro); color: #171D26; padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.lp-pular:focus { top: 12px; }

.lp-i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.14em; }

/* ---------------------------------------------------------------------
   tipografia por papel
   ------------------------------------------------------------------ */
.lp-titulo { font: 700 clamp(28px, 6.4vw, 42px)/1.12 var(--font-body); letter-spacing: -.02em; color: var(--tx2); text-wrap: balance; }
.lp-titulo .lp-tit-2 { color: var(--tx); }
h1.lp-titulo { font-size: clamp(34px, 8.6vw, 58px); line-height: 1.04; letter-spacing: -.03em; color: var(--tx); }
h1.lp-titulo .lp-tit-2 { color: var(--ouro); }
.lp-intro { color: var(--tx2); font-size: clamp(16.5px, 1.8vw, 18.5px); line-height: 1.6; max-width: 62ch; }
.lp-intro b { color: var(--tx); }

/* o rotulo da plataforma, com a linha fina ate a borda */
.lp-rotulo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 600 12px/1.2 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); }
.lp-rotulo::after { content: ''; flex: 1; height: 1px; background: var(--bd); transform-origin: left; }
.lp-cabeca { margin-bottom: clamp(28px, 4vw, 44px); display: grid; gap: 14px; }
.lp-cabeca .lp-rotulo { margin-bottom: 2px; }

.lp-legenda { margin-top: 10px; font-size: 13px; color: var(--tx3); }
.lp-demo {
  position: absolute; z-index: 4; top: 10px; right: 10px;
  font: 700 10.5px/1 var(--font-display); letter-spacing: .09em; text-transform: uppercase;
  color: #171D26; background: rgba(243, 247, 251, .88); border-radius: 5px; padding: 4px 7px;
}
.lp-garantia { font-size: 13.5px; color: var(--tx3); }
.lp-nota { margin-top: 24px; font-size: 14px; color: var(--tx3); max-width: 70ch; }

/* cantos de mira: 4 L de 10px */
.lp-canto { position: absolute; z-index: 3; width: 10px; height: 10px; border: 0 solid var(--tx3); pointer-events: none; transition: transform .42s var(--ease), border-color .2s; }
.lp-canto-a { top: -6px; left: -6px; border-top-width: 1.5px; border-left-width: 1.5px; }
.lp-canto-b { top: -6px; right: -6px; border-top-width: 1.5px; border-right-width: 1.5px; }
.lp-canto-c { bottom: -6px; left: -6px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.lp-canto-d { bottom: -6px; right: -6px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* ---------------------------------------------------------------------
   a chamada (28/09, Xerife: o botao arredondado com brilho "tem cara de IA")
   Placa operacional: cantos chanfrados (a moldura das honrarias), ouro
   chapado sem brilho, Condensed em caixa alta e a seta num bloco proprio,
   separado por um filete. clip-path corta o outline: o foco e um filete
   por dentro.
   ------------------------------------------------------------------ */
.lp-cta {
  --corte: 12px;
  position: relative; display: inline-flex; align-items: stretch; justify-content: center;
  min-height: 52px; padding: 0; border: 0; border-radius: 0; cursor: pointer; text-decoration: none;
  font: 700 16.5px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte));
  transition: transform .16s var(--ease), background-color .16s, filter .16s;
  -webkit-tap-highlight-color: transparent;
}
.lp-cta-texto { display: inline-flex; align-items: center; padding: 0 20px 0 24px; white-space: nowrap; }
.lp-cta-primaria { background: var(--ouro); color: #171D26; }
.lp-cta-primaria .lp-cta-icone {
  position: relative; display: grid; place-items: center; width: 50px; flex: none;
  background: rgba(23, 29, 38, .12); border-left: 1px solid rgba(23, 29, 38, .28); transition: width .22s var(--ease);
}
.lp-cta-primaria .lp-cta-seta { width: 20px; height: 20px; stroke-width: 2.4; transition: transform .22s var(--ease); }
.lp-cta-spinner { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; opacity: 0; }
.lp-cta:active { transform: translateY(1px); }
.lp-cta:focus-visible { outline: 2px solid #171D26; outline-offset: -6px; border-radius: 0; }
@media (hover: hover) and (pointer: fine) {
  .lp-cta-primaria:hover { filter: brightness(1.06); }
  .lp-cta-primaria:hover .lp-cta-icone { width: 58px; }
  .lp-cta-primaria:hover .lp-cta-seta { transform: translateX(3px); }
}
.lp-cta[aria-busy="true"] { pointer-events: none; }
.lp-cta[aria-busy="true"] .lp-cta-seta { opacity: 0; }
.lp-cta[aria-busy="true"] .lp-cta-spinner { opacity: 1; animation: lp-gira .7s linear infinite; }
.lp-cta[aria-disabled="true"], .lp-cta:disabled { opacity: .55; cursor: not-allowed; }
.lp-cta-compacta { --corte: 8px; min-height: 40px; font-size: 14px; letter-spacing: .07em; }
.lp-cta-compacta .lp-cta-texto { padding: 0 12px 0 16px; }
.lp-cta-compacta .lp-cta-icone { width: 38px; }
.lp-cta-compacta .lp-cta-seta { width: 16px; height: 16px; }
.lp-cta-curto { display: none; }
@media (max-width: 359px) { .lp-cta-longo { display: none; } .lp-cta-curto { display: inline; } .lp-cta-texto { padding: 0 14px 0 18px; } }

/* secundaria: o mesmo chanfro so em contorno branco, nunca dourado ("Me avise") */
.lp-cta-secundaria { background: var(--tx); color: var(--tx); isolation: isolate; }
.lp-cta-secundaria::before {
  content: ''; position: absolute; inset: 1.5px; z-index: -1; background: var(--bg); transition: background-color .16s;
  clip-path: polygon(calc(var(--corte) - .6px) 0, 100% 0, 100% calc(100% - var(--corte) + .6px), calc(100% - var(--corte) + .6px) 100%, 0 100%, 0 calc(var(--corte) - .6px));
}
.lp-cta-secundaria .lp-cta-fundo, .lp-cta-secundaria .lp-cta-seta { display: none; }
.lp-cta-secundaria .lp-cta-texto { padding: 0 26px; }
.lp-cta-secundaria:focus-visible { outline-color: var(--tx); }
@media (hover: hover) and (pointer: fine) { .lp-cta-secundaria:hover::before { background: var(--card2); } }
.lp-bt-t { color: var(--tx2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--bd); font-weight: 600; }
.lp-bt-t:hover { color: var(--tx); }
@keyframes lp-gira { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   1. cabecalho
   ------------------------------------------------------------------ */
.lp-topo { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--bd); }
.lp-topo-linha { display: flex; align-items: center; gap: 20px; height: var(--lp-topo-altura); }
.lp-marca { display: inline-flex; flex: none; }
.lp-logo { height: 28px; width: auto; }
.lp-nav { display: none; margin-left: auto; }
.lp-nav-lista { display: flex; gap: 26px; }
.lp-nav-lista a { text-decoration: none; color: var(--tx2); font-size: 15px; font-weight: 600; }
.lp-nav-lista a:hover { color: var(--tx); }
.lp-topo-acoes { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.lp-entrar { color: var(--tx2); text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 2px; }
.lp-entrar:hover { color: var(--tx); }
.lp-topo-chamada { display: none; }
@media (min-width: 1024px) {
  :root { --lp-topo-altura: 68px; }
  .lp-logo { height: 34px; }
  .lp-nav { display: block; }
  .lp-topo-acoes { margin-left: 26px; }
  .lp-topo-chamada { display: inline-flex; transition: opacity .2s, transform .2s var(--ease); }
  html.js .lp-topo-chamada { opacity: 0; transform: translateY(-4px); pointer-events: none; }
  html.js.lp-topo-cta .lp-topo-chamada { opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------------------------------------------------------------------
   2. hero
   ------------------------------------------------------------------ */
.lp-hero { padding: clamp(28px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); }
.lp-hero-grade { display: grid; gap: 34px; align-items: center; }
.lp-hero-texto { display: grid; gap: 18px; justify-items: start; }
.lp-hero-rotulo { font: 600 12.5px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); }
.lp-hero-sub { color: var(--tx2); font-size: clamp(17px, 2vw, 19.5px); line-height: 1.55; max-width: 40ch; }
.lp-hero-acoes { display: grid; gap: 10px; justify-items: start; width: 100%; }
.lp-hero-prova { color: var(--tx2); font-size: 15px; }
.lp-hero-prova b { font: 700 19px/1 var(--font-display); color: var(--tx); letter-spacing: .01em; margin-right: 2px; }
.lp-hero-ver { display: inline-flex; align-items: center; gap: 6px; color: var(--tx2); font-weight: 600; font-size: 15px; text-decoration: none; }
.lp-hero-ver:hover { color: var(--tx); }
.lp-hero-ver .lp-i { width: 18px; height: 18px; }
@media (max-width: 599px) { .lp-hero-acoes .lp-cta-primaria { width: 100%; } }
@media (min-width: 1024px) {
  .lp-hero-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 56px; }
}

/* o painel: o recorte vivo do Inicio */
.lp-hero-painel { position: relative; min-width: 0; }
.lp-painel {
  position: relative; padding: 20px 16px 16px; border: 1px solid var(--bd); border-radius: 16px;
  background: var(--card); background-image: var(--pontilhado); background-size: 22px 22px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.lp-painel-oi { display: grid; margin: 0 0 16px; padding-right: 110px; }
.lp-painel-oi b { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.2; letter-spacing: -.01em; }
.lp-painel-oi span { color: var(--tx2); font-size: 14.5px; }
/* no hero cada quadro tem metade do painel: o mostrador fica em cima do texto (como os
   cards do Meu edital na plataforma); lado a lado so a partir de 1200 px, onde o rotulo cabe */
.lp-hero-painel .qq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-hero-painel .qq-q { --qq-lx: 50px; --qq-ly: 50px; grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: start; gap: 8px; padding: 12px; }
.lp-hero-painel .qq-d { width: 84px; height: 84px; }
.lp-hero-painel .qq-n { font-size: 32px; } .lp-hero-painel .qq-n.l4 { font-size: 27px; } .lp-hero-painel .qq-n.l5 { font-size: 23px; }
.lp-hero-painel .qq-par .qq-n { font-size: 23px; }
.lp-hero-painel .qq-t { width: 100%; }
.lp-hero-painel .qq-k { font-size: 11.5px; letter-spacing: .06em; }
@media (max-width: 600px) {
  .lp-painel { padding: 16px 10px 10px; }
  .lp-hero-painel .qq-q { --qq-lx: 39px; --qq-ly: 39px; padding: 9px; gap: 6px; }
  .lp-hero-painel .qq-d { width: 62px; height: 62px; }
  .lp-hero-painel .qq-n { font-size: 24px; } .lp-hero-painel .qq-n.l5 { font-size: 16px; }
  .lp-hero-painel .qq-par .qq-n { font-size: 17px; }
  .lp-hero-painel .qq-k { font-size: 10.5px; letter-spacing: .04em; }
}
@media (min-width: 1200px) {
  .lp-hero-painel .qq-q { --qq-lx: 60px; --qq-ly: 50%; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 12px 11px 10px; }
  .lp-hero-painel .qq-d { width: 96px; height: 96px; }
  .lp-hero-painel .qq-n { font-size: 36px; } .lp-hero-painel .qq-n.l4 { font-size: 30px; } .lp-hero-painel .qq-n.l5 { font-size: 26px; }
  .lp-hero-painel .qq-par .qq-n { font-size: 26px; }
}

/* ---------------------------------------------------------------------
   os quadros do QG (qg_quadros.py da plataforma, 28/09): mostrador
   circular sobre fundo pintado de cor profunda, escuro sempre
   ------------------------------------------------------------------ */
.qq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qq-q {
  --qq-c: #FFC53D; --qq-f1: #2A3544; --qq-f2: #1A222C; --qq-luz: rgba(255, 255, 255, .10); --qq-borda: rgba(255, 255, 255, .16);
  --qq-lx: 64px; --qq-ly: 50%; --qq-trilho: rgba(255, 255, 255, .14); --qq-esc: #FFFFFF; --qq-neon: #3EFF7A; --qq-er: #FFFFFF;
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-width: 0; min-height: 128px;
  margin: 0; padding: 11px 14px 11px 11px; border: 1px solid var(--qq-borda); border-radius: 12px; color: #FFFFFF;
  background:
    radial-gradient(circle at var(--qq-lx) var(--qq-ly), var(--qq-luz) 0, transparent 96px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='17.32' viewBox='0 0 30 17.32'%3E%3Cpath d='M0 8.66 5 0h10l5 8.66-5 8.66H5zM20 8.66h10' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--qq-f1), var(--qq-f2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 24px rgba(0, 0, 0, .30);
  isolation: isolate;
}
.qq-q.f-azul { --qq-f1: #1446A8; --qq-f2: #0A2360; --qq-luz: rgba(92, 194, 255, .30); --qq-borda: rgba(92, 194, 255, .45); }
.qq-q.f-verde { --qq-f1: #0D5E33; --qq-f2: #063A1F; --qq-luz: rgba(166, 242, 58, .24); --qq-borda: rgba(166, 242, 58, .42); }
.qq-q.f-roxo { --qq-f1: #4A1FA8; --qq-f2: #250D5E; --qq-luz: rgba(62, 255, 122, .20); --qq-borda: rgba(190, 160, 255, .45); }
.qq-q.f-ambar { --qq-f1: #7A4105; --qq-f2: #3F2002; --qq-luz: rgba(255, 197, 61, .30); --qq-borda: rgba(255, 197, 61, .48); }
.qq-q::before, .qq-q::after { content: ''; position: absolute; z-index: 1; width: 9px; height: 9px; border: 2px solid rgba(255, 255, 255, .55); pointer-events: none; }
.qq-q::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.qq-q::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.qq-q.c-ok { --qq-c: #3DE07B; } .qq-q.c-meio { --qq-c: #FFC53D; } .qq-q.c-ruim { --qq-c: #FF7070; }
.qq-q.c-ouro { --qq-c: #FFC53D; } .qq-q.c-lima { --qq-c: #A6F23A; } .qq-q.c-neon { --qq-c: #3EFF7A; }
.qq-d { position: relative; flex: none; width: 106px; height: 106px; }
.qq-g { display: block; width: 100%; height: 100%; overflow: visible; }
.qq-g circle, .qq-g line { fill: none; }
.qq-g .face { fill: rgba(0, 0, 0, .26); stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.qq-g .fina { stroke: var(--qq-esc); opacity: .28; }
.qq-g .grossa { stroke: var(--qq-esc); opacity: .62; }
.qq-g .trilho { stroke: var(--qq-trilho); stroke-width: 5; }
.qq-g .arco, .qq-g .anel { stroke: var(--qq-c); stroke-width: 5; filter: drop-shadow(0 0 4px var(--qq-c)); }
.qq-g .ponta { fill: var(--qq-c); stroke: #FFFFFF; stroke-width: 1.4; filter: drop-shadow(0 0 4px var(--qq-c)); }
.qq-g .meta { stroke: #FFC53D; stroke-width: 2.6; }
.qq-g .ac { stroke: var(--qq-neon); stroke-width: 5; filter: drop-shadow(0 0 5px rgba(62, 255, 122, .8)); }
.qq-g .er { stroke: var(--qq-er); stroke-width: 5; opacity: .92; }
.qq-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.qq-n { font: 700 40px/1 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #FFFFFF; white-space: nowrap; text-shadow: 0 0 14px rgba(255, 255, 255, .22); }
.qq-n small { font-size: .46em; font-weight: 600; color: rgba(255, 255, 255, .84); margin-left: 1px; }
.qq-n.l4 { font-size: 33px; } .qq-n.l5 { font-size: 28px; } .qq-n.l6 { font-size: 23px; }
.qq-s { margin-top: 3px; font: 600 10.5px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .84); }
.qq-par { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.qq-par .qq-n { font-size: 28px; }
.qq-par .qq-n.ac { color: var(--neon); text-shadow: 0 0 12px rgba(62, 255, 122, .45); }
.qq-par i { display: block; width: 30px; height: 1px; background: rgba(255, 255, 255, .3); }
.qq-t { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.qq-k { font: 700 12.5px/1.25 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.qq-x { font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.qq-x b { color: #FFFFFF; }
.qq-x .mt { display: inline-block; width: 11px; height: 2.4px; border-radius: 1px; background: #FFC53D; vertical-align: middle; margin-right: 6px; }
.qq-r { display: flex; align-items: center; gap: 8px; font: 600 13px/1.2 var(--font-body); color: rgba(255, 255, 255, .9); }
.qq-r + .qq-r { margin-top: 4px; }
.qq-p { margin-left: auto; border-radius: 6px; padding: 2px 8px; font: 700 17px/1.2 var(--font-display); white-space: nowrap; }
.qq-p.ac { background: #3EFF7A; color: #06210F; box-shadow: 0 0 12px rgba(62, 255, 122, .55); }
.qq-p.er { background: #FFFFFF; color: #1A222C; }
@media (max-width: 600px) {
  .qq { gap: 8px; }
  .qq-q { --qq-lx: 37px; gap: 7px; min-height: 0; padding: 8px 7px 8px 6px; border-radius: 10px; }
  .qq-d { width: 62px; height: 62px; }
  .qq-n { font-size: 24px; } .qq-n.l4 { font-size: 20px; } .qq-n.l5 { font-size: 16px; } .qq-n.l6 { font-size: 13px; }
  .qq-s { font-size: 7.5px; margin-top: 1px; letter-spacing: 0; }
  .qq-par .qq-n { font-size: 17px; } .qq-par i { width: 20px; }
  .qq-t { gap: 3px; }
  .qq-k { font-size: 10.5px; letter-spacing: .03em; overflow-wrap: anywhere; }
  .qq-x { font-size: 11.5px; line-height: 1.3; }
  .qq-r { font-size: 11.5px; gap: 4px; }
  .qq-p { font-size: 13px; padding: 1px 5px; border-radius: 5px; }
  .qq-q::before, .qq-q::after { width: 7px; height: 7px; border-width: 1.5px; }
  .qq-q::before { top: 4px; left: 4px; } .qq-q::after { bottom: 4px; right: 4px; }
}

/* o anel enche e o numero conta (home.js poe `lp-cheio` no painel) */
.lp-painel [data-arco] { transition: stroke-dasharray 1.1s var(--ease); }
.lp-painel .qq-q:nth-child(2) [data-arco] { transition-delay: .09s; }
.lp-painel .qq-q:nth-child(3) [data-arco] { transition-delay: .18s; }
.lp-painel .qq-q:nth-child(4) [data-arco] { transition-delay: .27s; }
.lp-painel .qq-g .ponta, .lp-painel .qq-g .meta { transition: opacity .16s 1.05s; }
html.js-io .lp-painel:not(.lp-cheio) [data-arco] { stroke-dasharray: 0 100; }
html.js-io .lp-painel:not(.lp-cheio) .qq-g .ponta, html.js-io .lp-painel:not(.lp-cheio) .qq-g .meta { opacity: 0; transition: none; }

/* ---------------------------------------------------------------------
   secoes
   ------------------------------------------------------------------ */
.lp-secao { padding: var(--lp-secao) 0; }
.lp-secao-pe { margin-top: clamp(32px, 5vw, 48px); display: grid; gap: 10px; justify-items: center; text-align: center; }
@media (max-width: 599px) { .lp-secao-pe .lp-cta-primaria, .lp-final-acoes .lp-cta-primaria, .lp-oferta-caixa .lp-cta-primaria { width: 100%; } }

/* 3. diagnostico: tabela densa, sem caixa */
.lp-problema { padding-top: clamp(24px, 4vw, 48px); }
.lp-dores { width: 100%; border-collapse: collapse; }
.lp-dores thead th { font: 600 12px/1.2 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); text-align: left; padding: 0 0 12px; border-bottom: 1px solid var(--bd); }
.lp-dores tr { border-bottom: 1px solid var(--bd); }
.lp-dor { text-align: left; font-weight: 600; font-size: clamp(17px, 2vw, 20px); line-height: 1.35; padding: 18px 20px 18px 0; color: var(--tx); }
.lp-resolve { padding: 18px 0; }
.lp-resolve a { display: inline-flex; align-items: center; gap: 10px; color: var(--tx2); text-decoration: none; font-weight: 600; }
.lp-resolve a .lp-i { width: 20px; height: 20px; color: var(--tx); }
.lp-resolve a .lp-i-seta { width: 16px; height: 16px; color: var(--tx3); transition: transform .2s var(--ease); }
.lp-resolve a:hover { color: var(--tx); }
.lp-resolve a:hover .lp-i-seta { transform: translateX(3px); color: var(--ouro); }
@media (max-width: 699px) {
  .lp-dores thead { display: none; }
  .lp-dores tr { display: grid; gap: 6px; padding: 16px 0; }
  .lp-dor, .lp-resolve { padding: 0; display: block; }
  .lp-resolve a { font-size: 14.5px; }
}

/* ---------------------------------------------------------------------
   4. Entenda mais do QG: a lista das funcoes e o painel que troca
   ------------------------------------------------------------------ */
.lp-abas { position: relative; border-top: 1px solid var(--bd); }
.lp-abas-ind { display: none; }
.lp-aba { border-bottom: 1px solid var(--bd); }
.lp-aba-cab { margin: 0; font: inherit; }
.lp-aba-bt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 12px 2px;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--tx2); font-weight: 600; font-size: 16.5px;
}
.lp-aba-bt .lp-i { width: 20px; height: 20px; color: var(--tx3); }
.lp-aba-bt .lp-aba-seta { margin-left: auto; width: 18px; height: 18px; transition: transform .2s var(--ease); }
.lp-aba-bt[aria-expanded="true"] { color: var(--tx); }
.lp-aba-bt[aria-expanded="true"] .lp-i { color: var(--tx); }
.lp-aba-bt[aria-expanded="true"] .lp-aba-seta { transform: rotate(180deg); }
.lp-aba-bt:hover { color: var(--tx); }
/* sem JS, todas abertas; com JS, so a escolhida */
html.js .lp-aba:not(.lp-aba-aberta) > .lp-aba-painel { display: none; }
.lp-aba-painel { display: grid; gap: 22px; padding: 4px 0 28px; }
.lp-aba-texto { display: grid; gap: 12px; align-content: start; }
.lp-aba-rot { font: 600 12px/1.3 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); }
.lp-aba-rot b { color: var(--tx); font-weight: 700; }
.lp-aba-tit { font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
.lp-aba-txt { color: var(--tx2); max-width: 52ch; }
.lp-aba-prox { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; color: var(--tx2); font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--bd); padding-bottom: 3px; }
.lp-aba-prox:hover { color: var(--tx); border-color: var(--tx3); }
.lp-aba-prox .lp-i { width: 16px; height: 16px; }

@media (min-width: 1024px) {
  .lp-abas {
    display: grid; grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: repeat(8, auto) 1fr; column-gap: 0;
    border: 1px solid var(--bd); border-radius: 16px; overflow: hidden; background: rgba(23, 29, 38, .7);
  }
  .lp-aba { display: contents; }
  .lp-aba-cab { grid-column: 1; }
  .lp-aba-bt { min-height: 56px; padding: 14px 22px; border-bottom: 1px solid rgba(58, 70, 84, .6); font-weight: 500; font-size: 15.5px; }
  .lp-aba-bt .lp-aba-seta { display: none; }
  .lp-aba-bt[aria-expanded="true"] { background: rgba(243, 247, 251, .04); font-weight: 600; }
  .lp-abas-ind { display: block; position: absolute; z-index: 2; left: 0; top: 0; width: 2px; height: 56px; background: var(--tx); transition: transform .24s var(--ease), height .24s var(--ease); }
  .lp-aba-painel {
    grid-column: 2; grid-row: 1 / -1; padding: 36px 40px;
    grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start;
    border-left: 1px solid var(--bd); background: var(--card); background-image: var(--pontilhado); background-size: 22px 22px;
  }
  .lp-aba-painel:has(.lp-faixa) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   o NOTEBOOK (29/09, Xerife): no computador o texto vai EM CIMA, em duas
   colunas, e embaixo um notebook com a tela inteira da plataforma descendo
   devagar. Desenhado em CSS, sem marca. No celular fica a moldura de celular.
   ------------------------------------------------------------------ */
.lp-note { display: none; }
@media (min-width: 1024px) {
  .lp-aba-painel, .lp-aba-painel:has(.lp-faixa) { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 34px 40px 30px; }
  .lp-aba-painel .lp-cel, .lp-aba-painel .lp-faixa { display: none; }
  .lp-aba-texto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 10px; align-items: start; }
  .lp-aba-rot { grid-area: 1 / 1; }
  .lp-aba-tit { grid-area: 2 / 1; }
  .lp-aba-txt { grid-area: 1 / 2 / 3 / 3; }
  .lp-aba-ver { grid-area: 3 / 1; margin: 8px 0 0; }
  .lp-aba-prox { grid-area: 3 / 2; align-self: center; margin-top: 8px; }
  .lp-note { display: block; position: relative; width: 93%; max-width: 860px; margin: 0 auto; }
}
.lp-note-tampa { position: relative; padding: 16px 16px 20px; border-radius: 16px 16px 6px 6px; background: #0A0D11; box-shadow: 0 0 0 1px #3A4654, inset 0 0 0 1px rgba(255, 255, 255, .05), 0 34px 60px -28px rgba(0, 0, 0, .75); }
.lp-note-cam { position: absolute; top: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #2A333F; }
.lp-note-tela { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #171D26; }
.lp-note-rola { position: absolute; inset: 0; overflow: hidden; }
.lp-note-rola > img { display: block; width: 100%; height: auto; transform: translateY(0); }
.lp-note-rola > img.lp-anda { animation: lpNote var(--dur, 20s) ease-in-out .8s infinite alternate; }
@keyframes lpNote { 0%, 3% { transform: translateY(0); } 97%, 100% { transform: translateY(var(--rola, 0px)); } }
.lp-note-tela .lp-honra { border-radius: 4px; }
.lp-note-base { position: relative; height: 16px; margin: 0 -3.5%; border-radius: 2px 2px 14px 14px; background: linear-gradient(#3B4450, #20262E); box-shadow: inset 0 1px 0 #566170; }
.lp-note-base i { position: absolute; top: 0; left: 50%; width: 16%; height: 6px; margin-left: -8%; border-radius: 0 0 8px 8px; background: #151A21; }
.lp-note .lp-legenda { margin-top: 14px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .lp-note-rola > img.lp-anda, .lp-cel-rola > img.lp-anda, .lp-cel-rola > .lp-capas.lp-anda { animation: none; } }

/* (29/09, Xerife: "bote a capa de um simulado") a vitrine de simulados: as capas de verdade */
.lp-capas { position: absolute; top: 0; left: 0; right: 0; min-height: 100%; padding: 14px 14px 18px; background: #0E1116; }
.lp-cel-rola:has(.lp-capas) { background: #0E1116; }
.lp-capas-tit { margin: 24px 0 12px; font: 700 13px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }
.lp-capas-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; margin: 0; padding: 0; list-style: none; }
.lp-capa img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.lp-capa:last-child img { box-shadow: 0 0 0 2px var(--ouro); }
.lp-capa b { display: block; margin-top: 7px; font: 700 13px/1.1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tx); }
.lp-capa span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--tx3); }
.lp-note-capas .lp-capas { inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 18px 24px; }
.lp-note-capas .lp-capas-tit { margin-top: 6px; font-size: 14px; }
.lp-note-capas .lp-capas-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lp-note-capas .lp-capa b { font-size: 14.5px; }
.lp-note-capas .lp-capa span { font-size: 12.5px; }

/* a moldura do celular, com os cantos de mira fixos */
.lp-cel { position: relative; width: 100%; max-width: 360px; justify-self: center; }
.lp-cel-tela {
  position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--bd); border-radius: 20px; overflow: visible;
  background: var(--bg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  transition: background-color .38s, border-color .38s;
}
.lp-cel-tela::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .25); }
.lp-cel-rola { position: absolute; inset: 0; overflow: hidden; border-radius: 19px; }
.lp-cel-rola > img { width: 100%; transform: translateY(0); }
/* (29/09, Xerife) a tela inteira desce ate o fim, mais rapido, e volta: a mesma animacao do notebook */
.lp-cel-rola > img.lp-anda, .lp-cel-rola > .lp-capas.lp-anda { animation: lpNote var(--dur, 12s) ease-in-out .6s infinite alternate; }
.lp-cel-clara .lp-cel-tela { background: #E9EDF2; border-color: #D8DFE7; }
@media (min-width: 1024px) { .lp-cel { max-width: 340px; } .lp-cel-tela { aspect-ratio: 390 / 700; } }

/* a trilha do Plano de Guerra, viva (mesma marcacao da plataforma) */
.lp-trilha { position: absolute; z-index: 2; left: 0; right: 0; top: 0; padding: 16px 12px 12px; background: #1F2732; border-bottom: 1px solid var(--bd); border-radius: 19px 19px 0 0; }
.lp-trilha + .lp-cel-rola { top: 164px; border-radius: 0 0 19px 19px; }
.lp-trilha-rot { font: 600 10.5px/1.2 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); }
.lp-trilha-tit { font-weight: 700; font-size: 16px; margin: 2px 0 2px; }
.tr-pista { --passo: 58px; --x: 2.375; position: relative; width: max-content; margin: 0 auto; padding-top: 37px; }
.tr-ol { list-style: none; margin: 0; padding: 0; display: flex; }
.tr-no { width: var(--passo); flex: none; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.tr-pt { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--card2); border: 1.5px solid var(--bd); color: var(--tx3); font: 700 12.5px/1 var(--font-display); margin-bottom: 4px; }
.tr-pt .lp-i { width: 14px; height: 14px; }
.tr-nm { font: 600 11.5px/1.3 var(--font-body); color: var(--tx3); white-space: nowrap; }
.tr-sub { font-size: 10.5px; line-height: 1.3; color: var(--tx3); white-space: nowrap; }
.tr-no.feita .tr-pt { background: linear-gradient(rgba(61, 214, 115, .18), rgba(61, 214, 115, .18)), var(--card); border-color: var(--ok); color: var(--ok); }
.tr-no.feita .tr-pt .lp-i { stroke-width: 2.6; }
.tr-no.feita .tr-nm { color: var(--tx2); }
.tr-no.atual .tr-pt { border: 2px solid var(--ouro); background: linear-gradient(var(--ouro-fraco), var(--ouro-fraco)), var(--card); color: var(--ouro); }
.tr-no.atual .tr-nm { color: var(--tx); }
.tr-no.atual .tr-sub { color: var(--ouro); font-weight: 600; }
.tr-no.fut .tr-pt { border-style: dashed; }
.tr-no.fut .tr-nm, .tr-no.fut .tr-sub { opacity: .62; }
.tr-no.prox .tr-pt { border-color: rgba(227, 179, 65, .6); }
.tr-no.fim .tr-pt { width: 30px; height: 30px; margin: -2px 0 2px; background: var(--card); border-color: rgba(227, 179, 65, .55); color: var(--ouro); }
.tr-no.fim .tr-pt .lp-i { width: 16px; height: 16px; }
.tr-estrada { position: absolute; left: calc(var(--passo) / 2); right: calc(var(--passo) / 2); top: 49px; border-top: 2px dashed var(--bd); }
.tr-feito { position: absolute; left: calc(var(--passo) / 2); top: 48.5px; height: 3px; border-radius: 2px; background: var(--ok); width: calc(var(--x) * var(--passo)); transition: width .9s var(--ease); }
.tr-brilho { position: absolute; top: 46px; height: 8px; width: 34px; left: calc((var(--x) + .5) * var(--passo)); border-radius: 4px; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.tr-av { position: absolute; top: 0; left: calc((var(--x) + .5) * var(--passo)); width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; border: 2px solid var(--ouro); background: #0E1319; z-index: 2; transition: left 1.2s var(--ease-anda) .2s; }
.tr-av::before { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -4px; border: 4px solid transparent; border-top: 5px solid var(--ouro); border-bottom: 0; }
.tr-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 16%; }
/* de onde a trilha vem (so com JS e sem reduced-motion); o home.js poe `tr-anda` */
html.js-io .lp-trilha:not(.tr-anda) .tr-feito { width: 0; transition: none; }
html.js-io .lp-trilha:not(.tr-anda) .tr-av { left: calc(.5 * var(--passo)); transition: none; }
html.js-io .lp-trilha:not(.tr-anda) .tr-no.feita .tr-pt { transform: scale(.6); opacity: 0; }
.lp-trilha .tr-no.feita .tr-pt { transition: transform .16s var(--ease), opacity .16s; }
.lp-trilha.tr-anda .tr-no.feita:nth-child(1) .tr-pt { transition-delay: .35s; }
.lp-trilha.tr-anda .tr-no.feita:nth-child(2) .tr-pt { transition-delay: .7s; }
.lp-trilha.tr-anda .tr-no.atual .tr-pt { animation: trPulso 1.1s ease-out 1.4s 2; }
.lp-trilha.tr-anda .tr-brilho { animation: trBrilho 1.4s linear 3.4s 1 both; }
@keyframes trPulso { 0% { box-shadow: 0 0 0 0 rgba(227, 179, 65, .5); } 70% { box-shadow: 0 0 0 9px rgba(227, 179, 65, 0); } 100% { box-shadow: 0 0 0 0 rgba(227, 179, 65, 0); } }
@keyframes trBrilho {
  0% { opacity: 0; transform: translateX(-17px); }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc((4 - var(--x) - .5) * var(--passo) - 17px)); }
}

/* a honraria se montando (Ofensiva de 7 dias), por cima do Quadro de Honrarias */
@property --lp-giro { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
.lp-honra {
  position: absolute; z-index: 5; inset: 0; display: grid; justify-items: center; align-content: center; gap: 6px; padding: 24px 18px; text-align: center;
  border-radius: 19px; background: radial-gradient(circle at 50% 40%, rgba(227, 179, 65, .2), transparent 60%), rgba(14, 19, 25, .96);
  cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;
}
.lp-honra.lp-honra-on { opacity: 1; visibility: visible; transition: opacity .3s; }
.lp-honra-rot { font: 700 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); }
.lp-honra-medalha { position: relative; width: 159px; height: 159px; margin: 8px 0 4px; }
/* o metal: prata na maquete, ouro por filtro (o mesmo da plataforma) */
.lp-honra-medalha img { position: relative; z-index: 1; width: 159px; height: 159px; filter: sepia(1) saturate(2.7) brightness(1.1) hue-rotate(-8deg) contrast(1.06);
  /* o recorte traz um pouco do fundo da maquete: a mascara radial funde a borda (LEIA-ME das medalhas) */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 78%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 78%, transparent 100%); }
/* o selo dourado com check carimba o cadeado desenhado (posicao de _cadeados.json: 49%, 83%, raio 8%) */
.lp-honra-cad { position: absolute; z-index: 2; left: 49%; top: 83%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFE08A, #E3B341 55%, #9A6C10); color: #3A2703; box-shadow: 0 0 0 2px #6B4A0C, 0 0 12px rgba(227, 179, 65, .7); }
.lp-honra-cad .lp-i { width: 17px; height: 17px; stroke-width: 3; }
.lp-honra-anel { position: absolute; inset: -9px; border-radius: 50%; background: conic-gradient(from 0deg, var(--ouro) var(--lp-giro), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent 92%, #000 93%); mask: radial-gradient(closest-side, transparent 92%, #000 93%); opacity: .9; }
.lp-honra-luz { position: absolute; z-index: 2; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 130% 0; mix-blend-mode: screen; }
.lp-honra-nome { font: 700 22px/1.15 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.lp-honra-porque { font-size: 13.5px; color: var(--tx2); max-width: 26ch; }
.lp-honra-selo { margin-top: 6px; font: 700 11.5px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #06210F; background: var(--neon); border-radius: 5px; padding: 5px 9px; box-shadow: 0 0 14px rgba(62, 255, 122, .5); }
.lp-honra.lp-honra-monta .lp-honra-anel { animation: lpAnel .55s var(--ease) .15s both; }
.lp-honra.lp-honra-monta .lp-honra-medalha img { animation: lpCai .55s cubic-bezier(.3, 1.4, .5, 1) .7s both, lpOuro .5s ease 1.25s both; }
.lp-honra.lp-honra-monta .lp-honra-cad { animation: lpSelo .45s cubic-bezier(.2, 1.6, .4, 1) 1.3s both; }
.lp-honra.lp-honra-monta .lp-honra-luz { animation: lpLuz .7s ease-out 1.75s both; }
.lp-honra.lp-honra-monta .lp-honra-selo { animation: lpSelo .45s cubic-bezier(.2, 1.6, .4, 1) 2.05s both; }
.lp-honra.lp-honra-monta .lp-honra-nome, .lp-honra.lp-honra-monta .lp-honra-porque { animation: lpSobe .4s var(--ease) 1.5s both; }
@keyframes lpAnel { from { --lp-giro: 0deg; } to { --lp-giro: 360deg; } }
@keyframes lpCai { from { transform: translateY(-40px) scale(1.5); opacity: 0; filter: blur(6px) grayscale(1) brightness(1.3); } to { transform: none; opacity: 1; filter: grayscale(1) brightness(1.3); } }
@keyframes lpOuro { from { filter: grayscale(1) brightness(1.3); } to { filter: sepia(1) saturate(2.7) brightness(1.1) hue-rotate(-8deg) contrast(1.06); } }
@keyframes lpLuz { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes lpSelo { from { transform: scale(1.9) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lpSobe { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* o Caderno de Erros: a faixa larga, sem moldura de celular */
.lp-faixa { display: grid; gap: 18px; }
.lp-faixa-tela { position: relative; border: 1px solid #D8DFE7; border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.lp-faixa-tela .lp-demo { top: auto; bottom: 8px; background: #171D26; color: #F3F7FB; }
.lp-faixa-tela img { width: 100%; }
.lp-faixa-passos { display: grid; gap: 10px; counter-reset: passo; }
.lp-faixa-passos li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-left: 2px solid var(--bd); color: var(--tx2); }
.lp-faixa-passos .lp-i { width: 20px; height: 20px; color: var(--tx); }
.lp-faixa-passos li:last-child .lp-i { color: var(--ok); }
@media (min-width: 700px) { .lp-faixa-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------
   5. prova de campo: texto com filete, sem caixa
   ------------------------------------------------------------------ */
.lp-depo { border-left: 2px solid var(--bd); padding: 2px 0 2px 18px; display: grid; gap: 12px; }
.lp-depo-texto p { color: var(--tx); font-size: 16.5px; line-height: 1.6; }
.lp-depo-destaque { margin-bottom: 36px; border-left-color: var(--ouro); }
.lp-depo-destaque .lp-depo-texto p { font-size: clamp(20px, 2.6vw, 24px); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; max-width: 44ch; }
.lp-depo-quem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; color: var(--tx3); }
.lp-depo-quem b { color: var(--tx2); font: 700 13px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.lp-depo-meta { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.lp-depo-sep { color: var(--bd); }
.lp-depo-selo { color: var(--ok); font-weight: 600; }
.lp-depos { display: grid; gap: 28px 40px; }
@media (min-width: 900px) { .lp-depos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-depos-mais { margin-top: 28px; }
.lp-depos-mais > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--tx2); font-weight: 600; }
.lp-depos-mais > summary::-webkit-details-marker { display: none; }
.lp-depos-mais > summary .lp-i { transition: transform .18s; }
.lp-depos-mais[open] > summary .lp-i { transform: rotate(180deg); }
.lp-depos-mais[open] > summary { margin-bottom: 28px; }
/* no computador os 8 relatos cabem: o home.js abre o details e o resumo some */
@media (min-width: 900px) {
  html.js .lp-depos-mais { margin-top: 0; }
  html.js .lp-depos-mais > summary { display: none; }
  html.js .lp-depos-mais[open] > .lp-depos { margin-top: 28px; }
}

/* ---------------------------------------------------------------------
   6. oferta
   ------------------------------------------------------------------ */
.lp-oferta-cartao {
  position: relative; padding: clamp(22px, 4vw, 44px); border: 1px solid var(--bd); border-radius: 18px;
  background: var(--card); isolation: isolate;
}
.lp-oferta-cartao::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--pontilhado); background-size: 22px 22px; opacity: .6; }
/* a luz que segue o mouse (so computador com mouse; o home.js poe --mx/--my) */
.lp-oferta-cartao::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .08), transparent 60%); }
@media (hover: hover) and (pointer: fine) { .lp-oferta-cartao:hover::after { opacity: 1; } }
.lp-oferta-cartao .lp-canto { border-color: var(--tx2); }
html.js-io .lp-oferta-cartao:not(.lp-visivel) .lp-canto-a { transform: translate(-10px, -10px); }
html.js-io .lp-oferta-cartao:not(.lp-visivel) .lp-canto-b { transform: translate(10px, -10px); }
html.js-io .lp-oferta-cartao:not(.lp-visivel) .lp-canto-c { transform: translate(-10px, 10px); }
html.js-io .lp-oferta-cartao:not(.lp-visivel) .lp-canto-d { transform: translate(10px, 10px); }
.lp-oferta-cabeca { display: grid; gap: 10px; padding-bottom: 24px; margin-bottom: 26px; border-bottom: 1px solid var(--bd); }
.lp-oferta-rot { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1.2 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); }
.lp-oferta-rot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(61, 214, 115, .2); }
.lp-oferta-concurso { color: var(--tx2); font-weight: 600; }
.lp-faltam { color: var(--ouro); font-weight: 700; }
.lp-sem-milagre { margin-top: 6px; padding-left: 14px; border-left: 2px solid var(--ouro); color: var(--tx); font-weight: 600; max-width: 60ch; }
.lp-oferta-corpo { display: grid; gap: 28px; }
.lp-oferta-sub { font: 600 12px/1.2 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); margin-bottom: 14px; }
.lp-oferta-lista { display: grid; gap: 11px; }
.lp-oferta-lista li { display: flex; gap: 10px; color: var(--tx2); }
.lp-i-ok { color: var(--ok); width: 20px; height: 20px; margin-top: 2px; stroke-width: 2.4; }
.lp-oferta-caixa { display: grid; gap: 12px; align-content: start; }
.lp-oferta-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.lp-oferta-vista { font: 700 46px/1 var(--font-display); letter-spacing: -.01em; }
.lp-oferta-ou { color: var(--tx2); }
.lp-oferta-ou b { color: var(--tx); }
.lp-oferta-nota { font-size: 13px; color: var(--tx3); }
/* oferta desligada (sem preco): o botao nao estica na cabeca da secao */
.lp-oferta .lp-cabeca > .lp-cta { justify-self: start; }
@media (max-width: 599px) { .lp-oferta .lp-cabeca > .lp-cta { justify-self: stretch; } }
.lp-oferta-comprar { justify-self: start; color: var(--tx2); font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--bd); padding-bottom: 2px; }
.lp-oferta-comprar:hover { color: var(--tx); border-color: var(--tx2); }
.lp-oferta-condicoes { display: grid; gap: 8px; margin-top: 8px; font-size: 14.5px; color: var(--tx2); }
.lp-oferta-condicoes li { display: flex; gap: 10px; align-items: center; }
.lp-oferta-condicoes .lp-i { width: 18px; height: 18px; color: var(--tx); }
@media (min-width: 900px) { .lp-oferta-corpo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; } }

/* ---------------------------------------------------------------------
   7. Fique por dentro
   ------------------------------------------------------------------ */
/* Operacoes (16/10/2026): os concursos com teste gratis, a vitrine do /gratis/ na home */
.lp-ops-grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 28px; }
.lp-op { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; }
.lp-op-capa { display: block; aspect-ratio: 16 / 9; background: var(--card2); }
.lp-op-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-op-corpo { display: grid; gap: 6px; padding: 16px; flex: 1; align-content: start; }
.lp-op-cod { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: .02em; color: var(--tx); }
.lp-op-nome { color: var(--tx2); font-size: 15px; }
.lp-op-meta { color: var(--tx3); font-size: 13.5px; }
.lp-op-meta b { color: var(--tx2); font-weight: 600; }
.lp-op-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lp-ops-todas { margin-top: 20px; text-align: center; }
.lp-ops-todas a { color: var(--ouro); text-decoration: underline; text-underline-offset: 3px; }

.lp-fique { padding-top: 0; }
.lp-fique-grade { display: grid; gap: 28px; }
.lp-fique-texto { display: grid; gap: 12px; align-content: start; }
.lp-fique-texto .lp-titulo { color: var(--tx); }
.lp-fique-caixa { position: relative; min-height: 290px; }
.lp-fique-form { display: grid; gap: 14px; }
.lp-campo { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--tx2); }
.lp-campo input, .lp-campo select {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--bd); background: var(--card); color: var(--tx); font-size: 16px; font-weight: 400;
}
.lp-campo input::placeholder { color: #6F7D8D; }
.lp-campo input:focus, .lp-campo select:focus { outline: none; border-color: var(--tx2); box-shadow: 0 0 0 3px rgba(243, 247, 251, .12); }
.lp-campo input[aria-invalid="true"] { border-color: var(--err); }
.lp-fique-erro { min-height: 0; font-size: 13.5px; color: var(--err); margin-top: -6px; }
.lp-fique-erro:empty { display: none; }
.lp-fique-linha { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.lp-campo-uf[hidden] { display: none; }
.lp-fique-linha:has(.lp-campo-uf[hidden]) { grid-template-columns: 1fr; }
.lp-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-fique-bt { justify-self: start; min-width: 190px; gap: 8px; align-items: center; }
.lp-fique-bt .lp-giro { display: none; width: 18px; height: 18px; animation: lp-gira .8s linear infinite; }
.lp-fique-bt[aria-busy="true"] .lp-giro { display: inline-block; }
.lp-fique-sem-js { font-size: 13.5px; color: var(--tx3); }
html.js .lp-fique-sem-js { display: none; }
.lp-consentimento { font-size: 13px; color: var(--tx2); max-width: 52ch; }
.lp-consentimento a { color: var(--tx); }
.lp-fique-alerta { font-size: 14px; color: var(--err); }
.lp-fique-ok { display: flex; gap: 12px; align-items: flex-start; min-height: 290px; padding-top: 6px; }
.lp-fique-ok .lp-i { width: 28px; height: 28px; color: var(--neon); stroke-width: 2.6; flex: none; }
.lp-fique-ok p { font-size: 18px; line-height: 1.5; }
.lp-fique-ok[hidden], .lp-fique-alerta[hidden] { display: none; }
@media (max-width: 599px) { .lp-fique-bt { width: 100%; } }
@media (min-width: 900px) {
  .lp-fique-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .lp-fique-texto { padding-right: 48px; }
  .lp-fique-caixa { padding-left: 48px; border-left: 1px solid var(--bd); }
}

/* ---------------------------------------------------------------------
   8. duvidas
   ------------------------------------------------------------------ */
.lp-faq-grade { display: grid; gap: 8px; }
@media (min-width: 1024px) { .lp-faq-grade { grid-template-columns: 360px minmax(0, 1fr); gap: 56px; align-items: start; } }
.lp-faq-lista { border-top: 1px solid var(--bd); }
.lp-faq-item { border-bottom: 1px solid var(--bd); }
.lp-faq-pergunta { display: flex; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; }
.lp-faq-pergunta::-webkit-details-marker { display: none; }
.lp-faq-seta { margin-left: auto; width: 20px; height: 20px; color: var(--tx3); transition: transform .18s var(--ease); }
.lp-faq-item[open] .lp-faq-seta { transform: rotate(180deg); }
.lp-faq-resposta { padding: 0 0 20px; display: grid; gap: 10px; color: var(--tx2); max-width: 70ch; }
.lp-faq-resposta b { color: var(--tx); }
.lp-faq-resposta a { color: var(--tx); }

/* ---------------------------------------------------------------------
   9. manifesto + CTA final: a arte abre como cortina de mira
   ------------------------------------------------------------------ */
.lp-final { padding-top: 0; }
.lp-arte { position: relative; margin: 0 auto; max-width: 1400px; height: clamp(460px, 78vh, 720px); overflow: hidden; }
.lp-arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.lp-arte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 29, 38, .1) 30%, rgba(23, 29, 38, .92) 88%, var(--bg)); }
.lp-manifesto { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 0 var(--lp-lateral) clamp(28px, 5vw, 56px); max-width: var(--lp-largura); margin: 0 auto; display: grid; gap: 6px; }
.lp-manifesto-frase { font: 700 clamp(28px, 5.4vw, 52px)/1.22 var(--font-body); letter-spacing: -.025em; max-width: 22ch; }
.lp-manifesto-frase span { color: var(--tx2); }
.lp-manifesto-frase b { color: var(--tx); font-weight: 700; }
.lp-manifesto-apoio { margin-top: 10px; max-width: 52ch; color: var(--tx2); line-height: 1.7; }
/* a tarja preta acompanha cada linha do texto (sobre foto, texto vai em tarja) */
.lp-manifesto-frase > *, .lp-manifesto-apoio > span { background: rgba(10, 13, 18, .84); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 10px; }
html.js-io .lp-arte img { transition: clip-path .9s var(--ease), opacity .9s var(--ease); }
html.js-io .lp-arte:not(.lp-aberta) img { clip-path: inset(8% 6% round 14px); opacity: .55; }
.lp-final-caixa { padding-top: clamp(40px, 6vw, 72px); display: grid; gap: 16px; justify-items: center; text-align: center; }
.lp-final-caixa .lp-titulo { max-width: 22ch; }
.lp-final-caixa .lp-intro { margin: 0 auto; }
.lp-final-acoes { display: grid; gap: 12px; justify-items: center; margin-top: 12px; width: 100%; }

/* ---------------------------------------------------------------------
   10. rodape
   ------------------------------------------------------------------ */
.lp-rodape { border-top: 1px solid var(--bd); padding: 48px 0 calc(28px + var(--lp-barra-altura)); background: #131820; }
.lp-rodape-grade { display: grid; gap: 32px; }
@media (min-width: 900px) { .lp-rodape-grade { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.lp-rodape-desc { margin-top: 14px; font-size: 14px; color: var(--tx3); max-width: 40ch; }
.lp-rodape-rot { font: 600 12px/1.2 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); margin-bottom: 12px; }
.lp-rodape-col ul { display: grid; gap: 8px; }
.lp-rodape-col a { display: inline-flex; align-items: center; gap: 8px; color: var(--tx2); text-decoration: none; font-size: 15px; }
.lp-rodape-col a:hover { color: var(--tx); }
.lp-rodape-col .lp-i { width: 16px; height: 16px; }
.lp-rodape-fim { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--bd); display: grid; gap: 6px; font-size: 13px; color: var(--tx3); }

/* ---------------------------------------------------------------------
   11. barra fixa do celular
   ------------------------------------------------------------------ */
.lp-barra { display: none; }
@media (max-width: 767px) {
  html.js .lp-barra {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px;
    min-height: 64px; padding: 10px var(--lp-lateral) calc(10px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--bd); box-shadow: 0 -14px 30px -18px rgba(0, 0, 0, .8);
    transform: translateY(110%); transition: transform .22s var(--ease); visibility: hidden;
  }
  html.js .lp-barra p { display: grid; font-size: 13px; line-height: 1.3; color: var(--tx2); }
  html.js .lp-barra p b { color: var(--tx); }
  html.js .lp-barra .lp-cta { margin-left: auto; min-height: 46px; }
  html.js.lp-barra-on .lp-barra { transform: none; visibility: visible; }
  html.js.lp-barra-on { --lp-barra-altura: 64px; }
}

/* ---------------------------------------------------------------------
   a revelacao (o clip-slide do template, na pele do QG)
   (28/09, Xerife: "a pagina toda carrega de uma vez; quero que ela va
   carregando a medida que o aluno desce".) Cada bloco so aparece quando
   entra na tela: sobe 40 px, abre o recorte de baixo para cima e (no
   computador com mouse) sai do desfoque. Nada e mostrado por tempo: o
   home.js so libera sozinho o que ja esta na tela ou acima dela.
   ------------------------------------------------------------------ */
html.js-io .lp-revela {
  opacity: 0; transform: translateY(40px); clip-path: inset(0 0 100% 0);
  transition: opacity .9s var(--ease), transform .9s var(--ease), clip-path .9s var(--ease), filter .9s var(--ease);
  transition-delay: calc(min(var(--i, 0), 6) * 90ms);
}
html.js-io .lp-revela.lp-visivel { opacity: 1; transform: none; clip-path: inset(-20% -20% -20% -20%); }
@media (hover: hover) and (pointer: fine) {
  html.js-io .lp-revela:not(.lp-visivel) { filter: blur(10px); }
  html.js-io .lp-revela.lp-visivel { filter: none; }
}
/* a linha do rotulo se desenha da esquerda */
html.js-io .lp-rotulo::after { transform: scaleX(0); transition: transform .9s var(--ease) .15s; }
html.js-io .lp-rotulo.lp-visivel::after { transform: scaleX(1); }
/* os elementos com recorte nao podem cortar a sombra depois de aparecer */
html.js-io .lp-abas.lp-revela.lp-visivel, html.js-io .lp-oferta-cartao.lp-revela.lp-visivel { clip-path: none; }

/* o titulo sobe palavra por palavra (cada palavra numa caixa que corta por baixo) */
.lp-pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.lp-pal > span { display: inline-block; }
html.js-io .lp-titulo.lp-revela { opacity: 1; transform: none; clip-path: none; filter: none; }
html.js-io .lp-palavras .lp-pal > span { transform: translateY(110%); transition: transform .85s var(--ease); transition-delay: calc(var(--p, 0) * 55ms); }
html.js-io .lp-palavras.lp-visivel .lp-pal > span, html.js-io [data-hero].lp-hero-on .lp-palavras .lp-pal > span { transform: none; }

/* a entrada do hero, em escada, logo que as fontes chegam (o home.js poe lp-hero-on) */
html.js-io [data-hero] .lp-entra { transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--e, 0) * 90ms + 120ms); }
html.js-io [data-hero]:not(.lp-hero-on) .lp-entra { opacity: 0; transform: translateY(26px); }
html.js-io [data-hero]:not(.lp-hero-on) .lp-hero-painel.lp-entra { transform: translateY(40px) scale(.97); }

/* a barra de progresso da rolagem: um filete dourado no topo, so onde o navegador liga a rolagem na animacao */
.lp-progresso { display: none; }

/* ---------------------------------------------------------------------
   movimento preso a rolagem (CSS scroll-driven, Chrome/Edge/Safari 26):
   a peca anda na velocidade do dedo do aluno. Onde nao existe, fica a
   revelacao por IntersectionObserver acima. Reduced-motion: nada disso.
   ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-progresso { display: block; position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 2px; background: var(--ouro); transform-origin: 0 50%;
      animation: lpProgresso linear both; animation-timeline: scroll(root); }
    @keyframes lpProgresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* o painel do hero sobe e recua enquanto o aluno sai do topo */
    html.js-io [data-hero].lp-hero-on .lp-hero-painel { animation: lpHeroSai linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes lpHeroSai { to { transform: translateY(-70px) scale(.94); opacity: .35; } }

    /* diagnostico: cada dor entra da esquerda, uma depois da outra, no ritmo da rolagem */
    html.js-io .lp-dores tbody tr { animation: lpDaEsquerda linear both; animation-timeline: view(); animation-range: entry 5% entry 90%; }
    @keyframes lpDaEsquerda { from { opacity: 0; transform: translateX(-60px); clip-path: inset(0); filter: none; } to { opacity: 1; transform: none; clip-path: inset(0); filter: none; } }

    /* o Entenda mais do QG cresce ate o tamanho real quando entra */
    html.js-io .lp-abas { animation: lpCresce linear both; animation-timeline: view(); animation-range: entry 0% entry 360px; }
    @keyframes lpCresce { from { opacity: .2; transform: translateY(80px) scale(.92); clip-path: none; filter: none; } to { opacity: 1; transform: none; clip-path: none; filter: none; } }

    /* relatos: os da esquerda vem da esquerda, os da direita da direita */
    html.js-io .lp-depos > li { animation: lpDaEsquerda linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    html.js-io .lp-depos > li:nth-child(even) { animation-name: lpDaDireita; }
    @keyframes lpDaDireita { from { opacity: 0; transform: translateX(60px); clip-path: inset(0); filter: none; } to { opacity: 1; transform: none; clip-path: inset(0); filter: none; } }

    /* a oferta sobe e trava no lugar */
    /* bloco mais alto que a tela: a animacao termina depois de uma distancia fixa, antes de o aluno ler */
    html.js-io .lp-oferta-cartao { animation: lpCresce linear both; animation-timeline: view(); animation-range: entry 0% entry 360px; }

    /* duvidas: cada pergunta desliza da direita */
    html.js-io .lp-faq-item { animation: lpDaDireita linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }

    /* o manifesto: a arte abre como cortina e a foto anda mais devagar que a pagina (paralaxe) */
    html.js-io .lp-arte { animation: lpCortina linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes lpCortina { from { clip-path: inset(14% 10% round 22px); } to { clip-path: inset(0 0 round 0); } }
    html.js-io .lp-arte img { top: -12%; height: 124%; animation: lpParalaxe linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes lpParalaxe { from { transform: translateY(-9%); } to { transform: translateY(9%); } }
    html.js-io .lp-arte:not(.lp-aberta) img { clip-path: none; opacity: 1; }
    /* quem anda com a rolagem nao faz a revelacao por tempo (as duas brigariam) */
    html.js-io .lp-dores tbody tr, html.js-io .lp-abas, html.js-io .lp-depos > li, html.js-io .lp-oferta-cartao, html.js-io .lp-faq-item { transition: none; }
  }
}

/* a aba que entra: o painel faz a revelacao em escada */
html.js-io .lp-aba-painel.lp-entra > * { animation: lpAbaEntra .38s var(--ease) both; }
html.js-io .lp-aba-painel.lp-entra > *:nth-child(2) { animation-delay: .07s; }
html.js-io .lp-aba-painel.lp-entra.lp-sobe > * { animation-name: lpAbaDesce; }
@keyframes lpAbaEntra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lpAbaDesce { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   reduced-motion: tudo pronto, nada anda
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .lp-cel-rola img.lp-rola { transform: none !important; }
}

/* ---------------------------------------------------------------------
   area de toque: todo link fora de paragrafo tem 40 px de altura, no minimo
   ------------------------------------------------------------------ */
.lp-marca, .lp-nav-lista a, .lp-entrar, .lp-hero-ver, .lp-resolve a, .lp-aba-prox, .lp-oferta-comprar, .lp-bt-t,
.lp-rodape-col a, .lp-depos-mais > summary, .lp-consentimento a { min-height: 40px; display: inline-flex; align-items: center; }
.lp-nav-lista a { padding: 0 2px; }

/* ---------------------------------------------------------------------
   Ver por dentro (28/09 noite, Xerife): a funcao em TELA CHEIA, a tela real
   (iframe) ou a pagina inteira fotografada. Etiqueta Demonstracao sempre a vista.
   ------------------------------------------------------------------ */
.lp-aba-ver { margin: 4px 0 2px; }
.lp-aba-ver .lp-cta { min-height: 46px; font-size: 15px; }
.lp-aba-ver .lp-cta-secundaria .lp-cta-texto { padding: 0 20px; }
html.lp-dv-aberta, html.lp-dv-aberta body { overflow: hidden; }
.lp-dv { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: var(--bg); }
.lp-dv[hidden] { display: none; }
.lp-dv-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 10px 16px 10px 20px; background: var(--card); border-bottom: 1px solid var(--bd); }
.lp-dv-tit { display: flex; align-items: center; gap: 10px; min-width: 0; font: 700 17px/1.25 var(--font-body); color: var(--tx); }
.lp-dv-ic { display: inline-grid; place-items: center; color: var(--ouro); }
.lp-dv-ic svg { width: 20px; height: 20px; }
.lp-dv-selo { flex: none; padding: 3px 8px; border: 1px solid var(--bd); border-radius: 4px; font: 600 11.5px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--tx2); }
.lp-dv-dica { grid-column: 1; font-size: 14px; line-height: 1.4; color: var(--tx2); }
.lp-dv-acoes { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 10px; }
.lp-dv-fecha { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--bd); border-radius: 8px; background: transparent; color: var(--tx); cursor: pointer; }
.lp-dv-fecha:hover { background: var(--card2); }
.lp-dv-fecha:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.lp-dv-fecha svg { width: 20px; height: 20px; }
.lp-dv-corpo { position: relative; flex: 1; min-height: 0; }
.lp-dv-corpo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.lp-dv-carrega { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: var(--tx2); }
.lp-dv-rola { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.lp-dv-rola:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; }
.lp-dv-rola img { display: block; width: 100%; max-width: 1280px; height: auto; margin: 0 auto; }
.lp-dv-pe { display: none; }
@media (max-width: 699px) {
  .lp-dv-topo { padding: 8px 10px 8px 14px; }
  .lp-dv-tit { font-size: 15.5px; gap: 8px; }
  .lp-dv-dica { grid-column: 1 / -1; font-size: 13px; }
  .lp-dv-acoes { grid-row: 1; }
  .lp-dv-acoes .lp-cta { display: none; }
  .lp-dv-pe { display: block; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--bd); }
  .lp-dv-pe .lp-cta { width: 100%; }
}