/* A LP DE ANÚNCIO (`/laudo-com-ia`).
 *
 * Uma peça só, ESCURA nos dois temas, como um anúncio. O contrato deste arquivo:
 *
 *   1. TODO seletor começa em `.lp`. Peça nova leva o nome da PEÇA (`.lp-selo`), nunca o
 *      do conceito: classe genérica num CSS compartilhado é nome que já existe em outro
 *      arquivo, e o último vence sem erro nenhum.
 *   2. Cor só em TOKEN. Os desta página nascem no bloco `.lp` logo abaixo, e é o único
 *      lugar do arquivo com cor escrita por extenso. A exceção declarada são as duas
 *      rampas de luz do botão e do selo: elas são uma amostra linha a linha, e viram
 *      ruído se cada degrau ganhar um nome.
 *   3. O estado de REPOUSO é o estado FINAL. O que entra ao rolar só começa escondido
 *      debaixo de `.lp-js`, a classe que o `lp.js` põe; sem script, a página lê inteira.
 *   4. Nenhum texto abaixo de 11px e nenhum texto sobre fundo que não tenha
 *      `background-color` em algum ancestral: a auditoria de UX mede os dois, e mede
 *      a COR declarada, não o gradiente.
 *
 * Pontos de quebra: os da casa (1100, 820, 560).
 */

.lp{
  /* ---- os tokens da página ---- */
  --lp-fundo:#03050B;            /* o palco */
  --lp-fundo-2:#070B14;          /* faixa de seção, um passo acima do palco */
  --lp-cartao:#0E121B;           /* cartão comum */
  --lp-cartao-2:#161B27;         /* cartão em foco */
  --lp-tinta:#F4F6FA;            /* texto principal: 19:1 no palco */
  --lp-cinza:#AAB2C0;            /* texto de apoio: 9,3:1 no palco, 8:1 no cartão */
  --lp-cinza-2:#8791A1;          /* legenda: 6,3:1 no palco */
  --lp-fio:rgba(255,255,255,.10);
  --lp-fio-forte:rgba(255,255,255,.18);
  --lp-vidro:rgba(255,255,255,.06);
  --lp-vidro-2:rgba(255,255,255,.11);
  --lp-azul:#0062FC;             /* a marca */
  --lp-azul-claro:#7FB0FF;       /* a marca sobre escuro: 8,6:1 */
  --lp-brilho:rgba(64,140,255,.22);
  --lp-folha:#FFFFFF;            /* o papel do laudo desenhado */
  --lp-folha-tinta:#14161B;
  --lp-folha-cinza:#5B6270;      /* 6:1 na folha */
  --lp-folha-fio:#E3E6EC;
  --lp-marca-fundo:#FEEDE3;      /* o amarelo do [[PREENCHE]] */
  --lp-marca-tinta:#A8380A;      /* 5,6:1 no amarelo */
  --lp-ok:#5FD39A;
  --lp-nao:#F0906A;
  --lp-expo:cubic-bezier(.16, 1, .3, 1);
  --lp-suave:cubic-bezier(.22, 1, .36, 1);
  --lp-largura:1080px;
  --lp-secao:clamp(72px, 9vw, 132px);

  /* Os tokens da casa, travados no escuro DENTRO desta página: assim a barra de
     consentimento e os links legais, que vêm do `vitrine.css`, saem escuros aqui mesmo
     quando o visitante está com o tema claro. */
  --branco:#12161F; --papel:#03050B; --preto:#F4F6FA; --cinza:#AAB2C0; --cinza-2:#8791A1;
  --linha:rgba(255,255,255,.12); --azul-forte:#7FB0FF; --grafite-2:#DCE1EA;
  --vidro:rgba(255,255,255,.07); --vidro-forte:rgba(255,255,255,.12);
  --vidro-borda:rgba(255,255,255,.14); --vidro-brilho:rgba(255,255,255,.10);
  --sombra-2:0 2px 6px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.55);

  position:relative; min-height:100dvh; overflow-x:clip;
  background-color:var(--lp-fundo); color:var(--lp-tinta);
  font-size:16px; line-height:1.55 }
.lp *{ box-sizing:border-box }
/* O zerado da página em `:where()`, que tem especificidade ZERO. Escrito como `.lp p`
   ele valia mais que `.lp-sub` e apagava a margem de toda peça de uma classe só: o
   subtítulo colava no título e o link perdia a cor, sem erro nenhum. */
:where(.lp) :where(a){ color:inherit; text-decoration:none }
:where(.lp) :where(h1, h2, h3, p, ul, ol){ margin:0 }
:where(.lp) :where(ul, ol){ padding:0; list-style:none }
.lp :focus-visible{ outline:2px solid var(--lp-azul-claro); outline-offset:3px; border-radius:10px }

/* ================================================================ os dois botões
 *
 * O BOTÃO DE LUZ. Azul da marca, com um banco de luz empoçado no PÉ. A luz é um
 * gradiente de fundo RECORTADO pelo próprio retângulo arredondado do botão: não é brilho
 * externo, não é sombra, não é uma barra separada. `overflow:hidden` é obrigatório, é ele
 * que faz o recorte. A maior sombra de fora tem 8px de desfoque: nada de halo.
 *
 * `background-color` vem declarada além do gradiente porque é ela que a auditoria lê
 * para o contraste do rótulo: branco sobre o azul da marca dá 5,1:1.
 */
.lp-btn{ position:relative; overflow:hidden; display:inline-grid; place-items:center;
  min-height:52px; padding:0 28px; border-radius:15px; white-space:nowrap;
  background-color:var(--lp-azul); color:var(--lp-tinta);
  background-image:linear-gradient(to top,
    #e4f1ff 0px, #c4e0ff 1px, #9fceff 2px, #7bb9ff 4px, #579fff 6px, #3a88ff 8px,
    #2278ff 11px, #126bfd 14px, #0862f6 18px, #0158e6 24px, #0150d4 34px, #014bc8 100%);
  box-shadow:
    inset 0 3px 3px -2px rgba(210,232,255,.22),
    inset 1px 0 0 rgba(255,255,255,.14), inset -1px 0 0 rgba(255,255,255,.14),
    0 1px 0 rgba(150,200,255,.42),
    0 0 8px rgba(40,120,255,.16), 0 2px 5px -3px rgba(110,170,255,.5);
  font-size:16px; font-weight:600; letter-spacing:-.005em; cursor:pointer;
  transition:transform .25s var(--lp-suave), filter .25s, box-shadow .25s }
/* O risco de luz na aresta de CIMA, só em parte da largura. */
.lp-btn::before{ content:""; position:absolute; left:22%; right:38%; top:.8px; height:1.9px;
  z-index:1; filter:blur(.55px);
  background:linear-gradient(90deg, rgba(190,222,255,0) 0%, rgba(190,222,255,.6) 34%,
    rgba(220,238,255,.78) 50%, rgba(190,222,255,.6) 66%, rgba(190,222,255,0) 100%) }
/* A luz das laterais, 13px para dentro, MASCARADA para morrer conforme sobe. Sem a
   máscara ela inunda o botão inteiro. */
.lp-btn::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:1;
  background:linear-gradient(90deg, rgba(225,240,255,.6), rgba(225,240,255,0) 13px),
             linear-gradient(270deg, rgba(225,240,255,.6), rgba(225,240,255,0) 13px);
  -webkit-mask:linear-gradient(to top, #000 0, #000 6px, rgba(0,0,0,.4) 12px,
    rgba(0,0,0,.15) 18px, rgba(0,0,0,.06) 26px, rgba(0,0,0,.02) 34px, rgba(0,0,0,.02) 100%);
          mask:linear-gradient(to top, #000 0, #000 6px, rgba(0,0,0,.4) 12px,
    rgba(0,0,0,.15) 18px, rgba(0,0,0,.06) 26px, rgba(0,0,0,.02) 34px, rgba(0,0,0,.02) 100%) }
.lp-btn span{ position:relative; z-index:2; display:block; line-height:1;
  text-shadow:0 1px 2px rgba(0,22,70,.55) }
.lp-btn:hover{ transform:translateY(-1px); filter:brightness(1.1) }
.lp-btn:active{ transform:translateY(0); filter:brightness(.97) }
.lp-btn-cta{ min-height:56px; padding:0 32px; font-size:17px }
.lp-btn-nav{ min-height:42px; padding:0 20px; border-radius:13px; font-size:14.5px }
.lp-btn-barra{ min-height:48px; padding:0 26px }

/* O SEGUNDO BOTÃO: vidro. Sem banco de luz, de propósito: numa tela só um botão brilha. */
.lp-btn-2{ background-color:var(--lp-cartao-2); background-image:none;
  border:1px solid var(--lp-fio-forte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) }
.lp-btn-2::before, .lp-btn-2::after{ display:none }
.lp-btn-2 span{ text-shadow:none }
.lp-btn-2:hover{ background-color:#1E2535; filter:none }

/* ================================================================ a navegação
 * Uma pílula de vidro que acompanha a rolagem. Não tem gaveta nem estado: no celular
 * os links somem e ficam a marca e o botão, que cabem em 320px. */
.lp-nav{ position:sticky; top:12px; z-index:35;
  display:flex; align-items:center; gap:24px;
  width:min(720px, calc(100% - 24px)); height:64px; margin:0 auto; padding:0 11px 0 22px;
  border:1px solid var(--lp-fio); border-radius:32px;
  background-color:rgba(6,9,16,.72);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.35) }
.lp-nav-marca{ display:flex; align-items:center; flex:none }
.lp-logo{ display:block; width:132px; height:auto }
.lp-nav-links{ display:flex; align-items:center; gap:22px; margin-left:auto }
.lp-nav-links a{ display:inline-flex; align-items:center; min-height:40px;
  color:var(--lp-cinza); font-size:14px; white-space:nowrap; transition:color .2s }
.lp-nav-links a:hover{ color:var(--lp-tinta) }
.lp-nav .lp-btn{ flex:none }
.lp-nav-entrar{ display:inline-flex; align-items:center; flex:none; min-height:44px; padding:0 6px;
  color:var(--lp-tinta); font-size:14px; font-weight:600; white-space:nowrap; transition:color .2s }
.lp-nav-entrar:hover{ color:var(--lp-azul-claro) }
.lp-nav-links + .lp-nav-entrar{ margin-left:-6px }
.lp-rodape-entrar{ display:inline-flex; align-items:center; min-height:44px;
  color:var(--lp-cinza); text-decoration:underline; text-underline-offset:4px }
.lp-rodape-entrar:hover{ color:var(--lp-tinta) }

/* ================================================================ o palco (hero) */
.lp-palco{ position:relative; margin-top:-64px; padding-top:88px; overflow:hidden;
  background-color:var(--lp-fundo);
  background-image:linear-gradient(180deg, rgba(25,110,255,0) 34%, rgba(25,110,255,.05) 56%,
    rgba(25,110,255,.075) 76%, rgba(25,110,255,.03) 100%) }

/* As estrelas: dois pontos de 1px cujo céu inteiro é uma lista de `box-shadow`, escrita
   pelo `lp.js`. Sem script são dois pixels brancos no canto, e ninguém vê. */
.lp-estrelas{ position:absolute; inset:0; pointer-events:none }
.lp-estrelas i{ position:absolute; left:0; top:0; width:1px; height:1px; border-radius:50%;
  background-color:var(--lp-tinta) }

.lp-hero{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center;
  max-width:1080px; margin:0 auto; padding:clamp(40px, 6vw, 76px) 20px 0; text-align:center }

/* O SELO. Caixa de vidro com o ladrilho do ícone preso à esquerda e o rótulo ao lado.
   O texto começa DEPOIS do ladrilho, por padding: os dois nunca se sobrepõem. */
.lp-selo{ position:relative; display:inline-flex; align-items:center; min-height:40px;
  padding:0 16px 0 46px; border:1px solid var(--lp-fio); border-radius:13px;
  background-color:rgba(255,255,255,.035);
  background-image:linear-gradient(to top, rgba(170,205,255,.17) 0px, rgba(170,205,255,.12) 2px,
    rgba(170,205,255,.07) 4px, rgba(170,205,255,.025) 6px, rgba(255,255,255,.012) 9px,
    rgba(255,255,255,.012) 100%);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) }
.lp-selo i{ position:absolute; left:5px; top:50%; width:30px; height:30px; margin-top:-15px;
  display:grid; place-items:center; border-radius:9px; color:var(--lp-tinta);
  background-image:linear-gradient(to top, #6fb0ff 0px, #4d9bff 2px, #1f7bf7 5px, #0b5fd6 8px,
    #0748a8 11px, #06377f 14px, #07295c 17px, #081d40 21px, #08152c 26px, #070f1e 30px);
  box-shadow:inset 1px 0 0 rgba(160,205,255,.4), inset -1px 0 0 rgba(160,205,255,.5),
    0 0 6px rgba(50,130,255,.22) }
.lp-selo i svg{ width:12px; height:17px }
.lp-selo b{ font-size:14px; font-weight:500; color:var(--lp-tinta);
  font-variant-numeric:tabular-nums }

.lp h1{ margin-top:26px;
  font-size:clamp(34px, 5.3vw, 66px); font-weight:800; line-height:1.02;
  letter-spacing:-.022em; text-transform:uppercase; text-wrap:balance;
  text-shadow:0 0 38px var(--lp-brilho) }
.lp-linha{ display:block }
.lp-sub{ max-width:58ch; margin-top:30px; color:var(--lp-cinza);
  font-size:clamp(16px, 1.5vw, 18.5px); line-height:1.6; text-wrap:pretty }
.lp-sub b{ color:var(--lp-tinta); font-weight:600 }
.lp-hero-acao{ margin-top:32px }
.lp-nota{ margin-top:16px; color:var(--lp-cinza-2); font-size:14px;
  font-variant-numeric:tabular-nums }

/* ---------------------------------------------------------------- a vitrine
 *
 * O anel é um cilindro de verdade em perspectiva, com a câmera no CENTRO dele: as cartas
 * ficam tangentes e cada uma encara a câmera. Raio 891, perspectiva 891, 37 cartas, um
 * passo de 360/37 graus. Quem as coloca, quadro a quadro, é o `lp.js`.
 *
 * `--k` é a escala da cena (o `lp.js` grava `max(1, largura/1172)`): acima de 1172px o
 * anel cresce para encher a largura; abaixo ele mantém a geometria inteira e é só
 * RECORTADO pela vitrine, que é o que mantém a carta legível no celular.
 *
 * A janela pinta NA FRENTE do anel e cobre o terço de baixo das cartas. Essa sobreposição
 * é o ponto da composição: as cartas são os laudos, a janela é de onde eles saem.
 */
.lp-vitrine{ --k:1; position:relative; z-index:2; overflow:hidden;
  height:calc(20px + 92px * var(--k) + 330px); margin-top:clamp(36px, 5vw, 60px) }
.lp-vitrine::before, .lp-vitrine::after{ content:""; position:absolute; top:0; bottom:0;
  z-index:6; width:min(18vw, 220px); pointer-events:none }
.lp-vitrine::before{ left:0; background:linear-gradient(90deg, var(--lp-fundo), rgba(3,5,11,0)) }
.lp-vitrine::after{ right:0; background:linear-gradient(270deg, var(--lp-fundo), rgba(3,5,11,0)) }

.lp-anel{ display:none; position:absolute; left:50%; margin-left:-586px;
  top:calc(20px + 150px * var(--k) - 616px); width:1172px; height:657px; z-index:5;
  perspective:891px; perspective-origin:586px 918px; transform-style:preserve-3d;
  transform:scale(var(--k)); transform-origin:586px 616px; pointer-events:none }
.lp-anel.lp-anel-vivo{ display:block }
.lp-carta{ position:absolute; left:586px; top:616px; width:130px; height:300px;
  margin:-150px 0 0 -65px; padding:14px 12px; border-radius:12px; overflow:hidden;
  background-color:var(--lp-folha); color:var(--lp-folha-tinta);
  box-shadow:0 24px 46px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.15);
  backface-visibility:hidden; will-change:transform }
.lp-carta-regua{ display:block; height:3px; border-radius:3px; background-color:var(--lp-azul) }
.lp-carta-k{ display:block; margin-top:12px; color:var(--lp-folha-cinza);
  font-size:11px; font-weight:700; letter-spacing:.08em }
.lp-carta-nome{ display:block; margin-top:5px; font-size:12.5px; font-weight:800; line-height:1.18;
  letter-spacing:-.015em; overflow-wrap:break-word }
.lp-carta-fio{ display:block; height:5px; margin-top:8px; border-radius:5px;
  background-color:var(--lp-folha-fio) }
.lp-carta-fio.curto{ width:62% }
.lp-carta-fio.primeiro{ margin-top:16px }
.lp-carta-foto{ display:block; height:58px; margin-top:12px; border-radius:7px;
  background-color:var(--lp-folha-fio);
  background-image:linear-gradient(150deg, #dfe6f1, #c3cede 60%, #d6dcea) }
.lp-carta-marca{ display:inline-block; margin-top:10px; padding:2px 6px; border-radius:5px;
  background-color:var(--lp-marca-fundo); color:var(--lp-marca-tinta);
  font-size:11px; font-weight:700 }

/* A janela do sistema, desenhada. Sai pela borda de baixo: é a vitrine que a recorta. */
.lp-janela{ position:absolute; left:50%; bottom:0; top:calc(20px + 92px * var(--k)); z-index:10;
  width:min(calc(842px * var(--k)), calc(100% - 24px)); max-width:1080px;
  transform:translateX(-50%); overflow:hidden; border-radius:26px 26px 0 0;
  background-color:#141821; box-shadow:0 -14px 44px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.07) }
.lp-janela-barra{ position:relative; display:flex; align-items:center; justify-content:center;
  height:44px; background-color:#11152B;
  background-image:linear-gradient(180deg, rgba(30,36,68,.6), rgba(15,19,38,.7)) }
.lp-janela-pontos{ position:absolute; left:24px; top:18px; display:flex; gap:5px }
.lp-janela-pontos i{ width:8px; height:8px; border-radius:50% }
.lp-janela-pontos i:nth-child(1){ background-color:#ee5c62 }
.lp-janela-pontos i:nth-child(2){ background-color:#f6b719 }
.lp-janela-pontos i:nth-child(3){ background-color:#12c02f }
.lp-janela-url{ display:flex; align-items:center; justify-content:center;
  width:min(340px, 56%); height:27px; border-radius:7px;
  background-color:#090D1A; color:var(--lp-cinza); font-size:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05) }
.lp-janela-pagina{ display:grid; grid-template-columns:170px minmax(0, 1fr); gap:22px;
  height:100%; margin:0 7px; padding:22px 26px; border-radius:10px 10px 0 0;
  background-color:#F1F2F5; color:var(--lp-folha-tinta) }
.lp-etapas{ display:flex; flex-direction:column; gap:4px; counter-reset:etapa }
.lp-etapas li{ counter-increment:etapa; display:flex; align-items:center; gap:9px;
  padding:7px 10px; border-radius:9px; color:var(--lp-folha-cinza);
  font-size:12.5px; font-weight:500 }
.lp-etapas li::before{ content:counter(etapa); display:grid; place-items:center; flex:none;
  width:19px; height:19px; border-radius:50%; background-color:var(--lp-folha-fio);
  color:var(--lp-folha-cinza); font-size:11px; font-weight:700 }
.lp-etapas li.feita::before{ background-color:#D7E6FF; color:#0A4FC4 }
.lp-etapas li.agora{ background-color:var(--lp-folha); color:var(--lp-folha-tinta);
  font-weight:700; box-shadow:0 1px 2px rgba(15,25,50,.08) }
.lp-etapas li.agora::before{ background-color:var(--lp-azul); color:var(--lp-folha) }
.lp-folha{ align-self:start; padding:22px 26px 26px; border-radius:10px;
  background-color:var(--lp-folha); box-shadow:0 1px 2px rgba(15,25,50,.06), 0 12px 30px rgba(15,25,50,.08) }
.lp-folha-titulo{ padding-bottom:12px; border-bottom:2px solid var(--lp-azul);
  font-size:12px; font-weight:800; letter-spacing:.1em; text-align:center }
.lp-folha-secao{ margin-top:14px; font-size:14px; font-weight:800 }
.lp-folha-txt{ margin-top:8px; color:var(--lp-folha-cinza); font-size:13px; line-height:1.6 }
/* A frase digitada guarda as duas linhas dela: sem isto a folha encolhe quando o script
   apaga o texto e cresce de novo enquanto ele escreve. */
.lp-folha-txt[data-lp-digita]{ min-height:3.2em }
.lp-folha mark{ padding:1px 6px; border-radius:5px; background-color:var(--lp-marca-fundo);
  color:var(--lp-marca-tinta); font-weight:700;
  -webkit-box-decoration-break:clone; box-decoration-break:clone }
.lp-folha-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px }
.lp-folha-chips span{ padding:4px 9px; border-radius:7px; background-color:#EEF1F6;
  color:var(--lp-folha-cinza); font-size:11.5px; font-weight:700 }
.lp-folha-chips .ia{ background-color:#E4EEFF; color:#0A4FC4 }
/* O cursor que digita. Só existe enquanto o `lp.js` escreve a frase. */
.lp-cursor::after{ content:""; display:inline-block; width:2px; height:1em; margin-left:2px;
  vertical-align:-.15em; background-color:var(--lp-azul); animation:lp-pisca 1s steps(1) infinite }
@keyframes lp-pisca{ 50%{ opacity:0 } }

/* ================================================================ as seções */
.lp-secao{ max-width:var(--lp-largura); margin:0 auto; padding:var(--lp-secao) 24px 0;
  scroll-margin-top:72px }
.lp-cabeca{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  margin-bottom:clamp(36px, 4.5vw, 56px) }
.lp-cabeca-lado{ flex:none; max-width:34ch; color:var(--lp-cinza); font-size:16px;
  text-wrap:pretty }
.lp-pilula{ display:inline-flex; align-items:center; gap:8px; min-height:28px; padding:0 12px;
  border:1px solid var(--lp-fio); border-radius:999px; background-color:var(--lp-vidro);
  color:var(--lp-cinza); font-size:12.5px }
.lp-pilula i{ width:6px; height:6px; border-radius:50%; background-color:var(--lp-azul-claro) }
.lp h2{ margin-top:22px; font-size:clamp(28px, 3.6vw, 44px); font-weight:500; line-height:1.06;
  letter-spacing:-.025em; text-wrap:balance }
.lp h3{ font-size:19px; font-weight:600; letter-spacing:-.015em }

/* ---------------------------------------------------------------- a borda que segue o cursor
 *
 * Um anel de 1px pintado por um gradiente radial centrado no ponteiro. O anel sai de duas
 * máscaras subtraídas (`mask-composite:exclude`): a caixa inteira menos a caixa de
 * conteúdo, e o que sobra é a moldura. `--fx` e `--fy` nascem fora da tela, então sem
 * ponteiro (e sem script) a borda é só o fio de sempre.
 */
.lp-foco{ --fx:-9999px; --fy:-9999px; position:relative; display:flex; border-radius:22px }
.lp-foco::before{ content:""; position:absolute; inset:0; z-index:2; padding:1px;
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(460px circle at var(--fx) var(--fy), rgba(150,195,255,.75),
    rgba(150,195,255,0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude }
.lp-foco > *{ flex:1 1 auto }

/* ---------------------------------------------------------------- os três passos */
.lp-passos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px }
.lp-passo{ display:flex; flex-direction:column; padding:28px; border:1px solid var(--lp-fio);
  border-radius:22px; background-color:var(--lp-cartao);
  background-image:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 46%) }
.lp-passo-n{ color:var(--lp-azul-claro); font-size:13px; font-weight:700; letter-spacing:.16em;
  font-variant-numeric:tabular-nums }
.lp-passo h3{ margin-top:38px }
.lp-passo p{ margin-top:12px; color:var(--lp-cinza); font-size:15.5px; line-height:1.6 }

/* ---------------------------------------------------------------- faz e não faz */
.lp-dupla{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:18px;
  align-items:start }
.lp-quadro{ padding:30px; border:1px solid var(--lp-fio); border-radius:22px;
  background-color:var(--lp-cartao) }
.lp-quadro-nao{ background-color:var(--lp-fundo-2) }
.lp-quadro h3{ color:var(--lp-cinza); font-size:12.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase }
.lp-linhas{ margin-top:14px }
.lp-linhas li{ display:flex; align-items:flex-start; gap:14px; padding:16px 0;
  color:var(--lp-cinza); font-size:15.5px; line-height:1.55 }
.lp-linhas li + li{ border-top:1px solid var(--lp-fio) }
.lp-linhas b{ color:var(--lp-tinta); font-weight:600 }
.lp-marca{ display:grid; place-items:center; flex:none; width:22px; height:22px; margin-top:1px;
  border-radius:50%; border:1px solid var(--lp-fio-forte) }
.lp-marca svg{ width:11px; height:11px }
.lp-marca-sim{ background-color:rgba(95,211,154,.12); color:var(--lp-ok) }
.lp-marca-nao{ color:var(--lp-nao) }
.lp-exemplo{ margin-top:18px }
/* A dor e a virada (20/10): o antes e o depois pesam igual, e cada bloco fecha com um botão. */
.lp-dupla-igual{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
.lp-limites{ max-width:72ch; margin:22px auto 0; color:var(--lp-cinza); font-size:15px;
  line-height:1.6; text-align:center; text-wrap:pretty }
.lp-limites b{ color:var(--lp-tinta); font-weight:600 }
.lp-secao-acao{ display:flex; flex-direction:column; align-items:center; margin-top:40px;
  text-align:center }
.lp-link{ display:inline-flex; align-items:center; min-height:44px; color:var(--lp-azul-claro);
  font-weight:600; text-decoration:underline; text-underline-offset:4px }

/* ---------------------------------------------------------------- a demonstração */
.lp-video{ display:block; width:100%; aspect-ratio:16 / 9; border:1px solid var(--lp-fio);
  border-radius:22px; background-color:var(--lp-cartao); box-shadow:var(--sombra-2) }

/* ---------------------------------------------------------------- quem usa
 * O depoimento em destaque ocupa a largura inteira: a foto de um lado, alta, e a frase
 * do outro, grande. Uma frase curta numa caixa pequena lia como rodapé; aqui ela é a
 * seção. O relato longo (`.lp-voz-longo`) só existe quando a pessoa o escreveu. */
.lp-voz-destaque{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  margin:0; overflow:hidden; border:1px solid var(--lp-fio); border-radius:28px;
  background-color:var(--lp-cartao);
  background-image:radial-gradient(70% 90% at 100% 0%, rgba(0,98,252,.16), rgba(0,98,252,0) 70%) }
.lp-voz-sem-foto{ grid-template-columns:1fr }
.lp-voz-foto{ display:block; width:100%; height:100%; min-height:420px; max-height:560px;
  object-fit:cover; object-position:50% 30% }
/* Com vídeo: o vídeo em pé (9:16) inteiro, numa coluna estreita, sem corte. */
.lp-voz-com-video{ grid-template-columns:minmax(0, 360px) minmax(0, 1fr) }
.lp-voz-video{ display:block; width:100%; height:auto; aspect-ratio:9 / 16; object-fit:cover;
  background-color:var(--lp-fundo) }
/* A moldura do depoimento corta o que passa da borda: o anel de foco entra para dentro.
   O foco de teclado cai nos controles do player, dentro dele, e aí o `:focus-visible`
   do próprio vídeo não liga: por isso `:focus-within`. */
.lp-voz-video:focus-visible, .lp-voz-video:focus-within{ outline:2px solid var(--lp-azul-claro);
  outline-offset:-4px; border-radius:0 }
.lp-voz-dica{ margin-top:18px; max-width:44ch; color:var(--lp-cinza); font-size:16px;
  line-height:1.6 }
.lp-voz-acao{ margin-top:30px }
.lp-voz-demo{ margin-top:18px }
.lp-voz-citacao{ margin-top:22px; font-size:clamp(24px, 3vw, 38px) }
.lp-voz-corpo{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:clamp(28px, 5vw, 64px) }
.lp-voz blockquote{ margin:26px 0 0 }
.lp-voz-txt{ color:var(--lp-tinta); font-size:clamp(28px, 3.6vw, 46px); font-weight:500;
  line-height:1.12; letter-spacing:-.028em; text-wrap:balance }
.lp-voz-longo{ max-width:54ch; margin-top:22px; color:var(--lp-cinza); font-size:17px;
  line-height:1.7; text-wrap:pretty }
.lp-voz-quem{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:34px;
  padding-top:22px; border-top:1px solid var(--lp-fio); align-self:stretch;
  color:var(--lp-cinza); font-size:15px }
.lp-voz-quem b{ color:var(--lp-tinta); font-size:17px; font-weight:600 }
.lp-mono{ display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%;
  background-color:rgba(127,176,255,.16); color:var(--lp-azul-claro); font-size:14px; font-weight:700 }
.lp-vozes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap:18px; margin-top:18px }
.lp-voz-menor{ margin:0; padding:30px; border:1px solid var(--lp-fio); border-radius:22px;
  background-color:var(--lp-cartao) }
.lp-voz-menor blockquote{ margin:0 }
.lp-voz-menor .lp-voz-txt{ font-size:clamp(20px, 2vw, 24px); line-height:1.3 }

/* ---------------------------------------------------------------- os planos
 * Dois cartões, no máximo 780px. O da esquerda é o que o anúncio vende: fundo um passo
 * mais claro, o selo no topo e o botão de luz. O outro leva o botão de vidro. */
.lp-planos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px;
  max-width:800px; margin:0 auto }
.lp-foco-plano{ border-radius:24px }
.lp-plano{ position:relative; display:flex; flex-direction:column; padding:32px;
  border:1px solid var(--lp-fio); border-radius:24px; background-color:var(--lp-cartao) }
.lp-plano-foco{ background-color:var(--lp-cartao-2) }
.lp-plano-selo{ position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; min-height:28px; padding:0 13px; border-radius:999px;
  background-color:var(--lp-tinta); color:var(--lp-fundo); font-size:12.5px; font-weight:600;
  white-space:nowrap }
.lp-plano-nome{ padding-bottom:14px; border-bottom:1px solid var(--lp-fio); color:var(--lp-cinza);
  font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase }
.lp-plano-preco{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin-top:38px }
.lp-plano-valor{ font-size:clamp(40px, 4.4vw, 50px); font-weight:500; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.lp-plano-preco s{ color:var(--lp-cinza-2); font-size:19px; font-variant-numeric:tabular-nums }
.lp-plano-por{ flex-basis:100%; color:var(--lp-cinza-2); font-size:14px }
.lp-plano-desc{ min-height:4.8em; margin-top:16px; color:var(--lp-cinza); font-size:15px;
  line-height:1.6 }
.lp-plano-desc b{ color:var(--lp-tinta); font-weight:600; font-variant-numeric:tabular-nums }
.lp-plano-acao{ margin-top:24px }
.lp-plano-acao .lp-btn{ display:grid; width:100% }
.lp-linhas-plano{ margin-top:22px }
.lp-linhas-plano li{ align-items:center; padding:14px 0; font-size:15px }
.lp-linhas-plano li.fora{ color:var(--lp-cinza-2) }

/* ---------------------------------------------------------------- as perguntas
 *
 * Duas colunas. A da esquerda fica PARADA enquanto a lista rola, com o título e o botão:
 * quem está lendo as objeções tem a saída sempre à mão. A da direita é uma lista numerada
 * separada por fios, sem caixa em volta de cada pergunta: sete caixas iguais empilhadas
 * liam como um formulário, e a pergunta virava moldura.
 *
 * A abertura anima a ALTURA de verdade, com `interpolate-size` e `::details-content`,
 * dentro de `@supports`. Onde isso não existe, abre de uma vez, que é o `<details>` de
 * sempre.
 */
.lp-duvidas{ display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);
  gap:clamp(32px, 6vw, 88px); align-items:start }
.lp-duvidas-lado{ position:sticky; top:104px }
.lp-duvidas-txt{ max-width:30ch; margin-top:18px; color:var(--lp-cinza); font-size:16px }
.lp-duvidas-acao{ margin-top:34px }
.lp-faq{ border-top:1px solid var(--lp-fio) }
.lp-q{ border-bottom:1px solid var(--lp-fio); transition:background-color .3s }
.lp-q summary{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center;
  gap:20px; min-height:84px; padding:22px 4px; cursor:pointer; list-style:none }
.lp-q summary::-webkit-details-marker{ display:none }
.lp-q-n{ color:var(--lp-cinza-2); font-size:13px; font-weight:700; letter-spacing:.14em;
  font-variant-numeric:tabular-nums; transition:color .25s }
.lp-q-t{ color:var(--lp-cinza); font-size:clamp(18px, 1.7vw, 21px); font-weight:500;
  line-height:1.3; letter-spacing:-.015em; text-wrap:balance; transition:color .25s }
/* O sinal de mais: dois traços num círculo. Aberto, ele gira e vira um xis, e o círculo
   acende no azul da marca. */
.lp-q-mais{ position:relative; flex:none; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--lp-fio-forte); background-color:var(--lp-vidro);
  transition:transform .4s var(--lp-suave), background-color .25s, border-color .25s }
.lp-q-mais::before, .lp-q-mais::after{ content:""; position:absolute; left:50%; top:50%;
  width:13px; height:1.6px; margin:-.8px 0 0 -6.5px; border-radius:2px;
  background-color:var(--lp-tinta) }
.lp-q-mais::after{ transform:rotate(90deg) }
.lp-q summary:hover .lp-q-t, .lp-q[open] .lp-q-t{ color:var(--lp-tinta) }
.lp-q summary:hover .lp-q-mais{ border-color:var(--lp-azul-claro) }
.lp-q[open] .lp-q-n{ color:var(--lp-azul-claro) }
.lp-q[open] .lp-q-mais{ transform:rotate(135deg); background-color:var(--lp-azul);
  border-color:var(--lp-azul) }
.lp-q p{ max-width:56ch; padding:0 62px 28px 4px; margin-left:38px;
  color:var(--lp-cinza); font-size:16px; line-height:1.7 }
@supports selector(::details-content){
  .lp-q{ interpolate-size:allow-keywords }
  .lp-q::details-content{ block-size:0; overflow:clip; opacity:0;
    transition:block-size .42s var(--lp-suave), opacity .3s ease,
      content-visibility .42s allow-discrete }
  .lp-q[open]::details-content{ block-size:auto; opacity:1 }
}

/* ---------------------------------------------------------------- o personalizado
 * O plano maior, no fim. Um cartão largo em duas partes: o que ele é, e quanto custa.
 * Os dois números do preço ficam JUNTOS e legíveis: o da implantação grande, e a
 * mensalidade logo abaixo, sem letra miúda. */
.lp-foco-pers{ border-radius:28px }
.lp-pers{ display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr);
  overflow:hidden; border:1px solid var(--lp-fio); border-radius:28px;
  background-color:var(--lp-cartao) }
.lp-pers-txt{ padding:clamp(28px, 4vw, 48px) }
.lp-pers-txt h2{ font-size:clamp(28px, 3.2vw, 40px) }
.lp-pers-sub{ max-width:52ch; margin-top:16px; color:var(--lp-cinza); font-size:16px; line-height:1.65 }
/* Dez itens: duas colunas, com o fio de cima em TODOS (inclusive o primeiro de cada
   coluna), para as duas ficarem com a mesma régua. */
.lp-linhas-pers{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:28px; margin-top:22px }
.lp-linhas-pers li, .lp-linhas-pers li + li{ padding:14px 0; border-top:1px solid var(--lp-fio);
  font-size:15px }
.lp-pers-preco{ display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px, 4vw, 48px); border-left:1px solid var(--lp-fio);
  background-color:var(--lp-cartao-2) }
.lp-pers-valor{ margin-top:30px; font-size:clamp(40px, 4.4vw, 52px); font-weight:500; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums }
/* `flex:none`: a classe traz `flex-basis:100%` da linha de preço dos planos, e numa
   coluna isso vira ALTURA de 100%, abrindo um buraco entre os dois números. */
.lp-pers-preco .lp-plano-por{ flex:none; margin-top:8px }
.lp-pers-mais{ margin-top:18px; padding-top:18px; border-top:1px solid var(--lp-fio);
  color:var(--lp-cinza); font-size:17px }
.lp-pers-mais span{ color:var(--lp-cinza-2) }
.lp-pers-mais b{ color:var(--lp-tinta); font-size:24px; font-weight:600;
  font-variant-numeric:tabular-nums }
.lp-pers-preco .lp-btn{ display:grid; margin-top:28px }

/* ---------------------------------------------------------------- o fecho */
.lp-fecho{ position:relative; display:flex; flex-direction:column; align-items:center;
  max-width:var(--lp-largura); margin:var(--lp-secao) auto 0; padding:clamp(56px, 8vw, 104px) 24px;
  overflow:hidden; text-align:center; border:1px solid var(--lp-fio); border-radius:32px;
  background-color:var(--lp-fundo-2);
  background-image:radial-gradient(60% 90% at 50% 118%, rgba(0,98,252,.42), rgba(0,98,252,0) 70%) }
.lp-fecho h2{ margin:0 0 34px; font-size:clamp(32px, 5vw, 60px); font-weight:800;
  text-transform:uppercase; letter-spacing:-.022em; text-shadow:0 0 38px var(--lp-brilho) }
.lp-fecho .lp-nota{ margin-top:18px }
.lp-fecho-sub{ max-width:52ch; margin:-12px 0 32px; color:var(--lp-cinza); font-size:17px;
  line-height:1.6; text-wrap:pretty }

/* ---------------------------------------------------------------- o rodapé e a barra */
.lp-rodape{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 24px; max-width:var(--lp-largura); margin:0 auto; padding:44px 24px 40px;
  color:var(--lp-cinza-2); font-size:14px }
.lp-rodape .vt-legal-links{ color:var(--lp-cinza) }
.lp-barra{ display:none }
.lp-quebra{ display:inline }

/* ================================================================ movimento
 *
 * DUAS coisas diferentes, de propósito:
 *
 * A ENTRADA do palco é animação CSS, roda uma vez e termina. Ela não depende de script,
 * então não existe o instante em que a página aparece e depois some. Usa `translate`,
 * `scale` e `clip-path` como propriedades soltas, e nunca `transform`: o `transform` do
 * anel e da janela já tem dono (a geometria), e as duas coisas compõem em vez de brigar.
 * O título SOBE de dentro da própria linha de base (o `clip-path` abre de baixo para
 * cima); ele não apenas aparece.
 *
 * A entrada das SEÇÕES é presa à rolagem pelo `lp.js` (um observador, sem ouvinte de
 * rolagem). Só começa escondida debaixo de `.lp-js`.
 */
@keyframes lp-entra{ from{ opacity:0; translate:0 var(--de, 12px); scale:var(--es, 1) } }
@keyframes lp-limpa{ from{ opacity:0; translate:0 16px; clip-path:inset(100% 0 -30% 0) }
                     to  { opacity:1; translate:0 0;    clip-path:inset(-30% 0 -30% 0) } }
@media (prefers-reduced-motion:no-preference){
  .lp-nav{ --de:-10px; animation:lp-entra .62s var(--lp-expo) .06s both }
  .lp-selo{ --de:11px; --es:.985; animation:lp-entra .56s var(--lp-expo) .27s both }
  .lp-linha{ animation:lp-limpa .9s var(--lp-expo) .38s both }
  .lp-linha + .lp-linha{ animation-delay:.47s }
  .lp-sub{ --de:10px; animation:lp-entra .62s var(--lp-expo) .69s both }
  .lp-hero-acao{ --de:13px; --es:.985; animation:lp-entra .62s var(--lp-expo) .83s both }
  .lp-hero .lp-nota{ --de:8px; animation:lp-entra .6s var(--lp-expo) .93s both }
  .lp-anel{ --de:18px; --es:.99; animation:lp-entra .95s var(--lp-expo) .7s both }
  .lp-janela{ --de:26px; animation:lp-entra .9s var(--lp-expo) .9s both }

  .lp-js [data-sobe]{ opacity:0; translate:0 24px;
    transition:opacity .6s var(--lp-suave), translate .6s var(--lp-suave);
    transition-delay:calc(var(--i, 0) * .1s) }
  .lp-js [data-sobe="1"]{ --i:1 }
  .lp-js [data-sobe="2"]{ --i:2 }
  .lp-js [data-sobe="3"]{ --i:3 }
  .lp-js [data-sobe].lp-visto{ opacity:1; translate:0 0 }
}

/* ================================================================ responsivo */
@media (max-width:1100px){
  .lp-passos{ grid-template-columns:1fr }
  .lp-passo h3{ margin-top:22px }
}
@media (max-width:820px){
  /* No celular a navegação é a marca e o `Entrar`, e não acompanha a rolagem: quem carrega o botão
     é a barra de baixo, e dois "Assinar" na mesma tela pequena disputam o mesmo polegar. */
  .lp-nav{ position:relative; top:0; justify-content:space-between; height:58px; padding:0 18px;
    border-color:transparent; background-color:transparent; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none }
  .lp-nav-links, .lp-nav .lp-btn{ display:none }
  .lp-palco{ margin-top:-58px; padding-top:66px }
  /* A janela desce um pouco: num palco estreito ela cobria quase a carta inteira. */
  .lp-vitrine{ height:468px }
  .lp-janela{ top:150px }
  .lp-cabeca{ flex-direction:column; align-items:flex-start; gap:18px }
  .lp-cabeca-lado{ flex:0 1 auto; max-width:46ch }
  .lp-dupla, .lp-dupla-igual{ grid-template-columns:1fr }
  .lp-planos{ grid-template-columns:1fr; max-width:460px; gap:34px }
  .lp-plano-desc{ min-height:0 }
  .lp-voz-destaque{ grid-template-columns:1fr }
  .lp-pers{ grid-template-columns:1fr }
  .lp-linhas-pers{ grid-template-columns:1fr }
  .lp-pers-preco{ border-left:0; border-top:1px solid var(--lp-fio) }
  .lp-voz-foto{ min-height:0; max-height:none; aspect-ratio:4 / 3; object-position:50% 34% }
  .lp-duvidas{ grid-template-columns:1fr; gap:34px }
  .lp-duvidas-lado{ position:static }
  /* No celular o botão desta coluna some: a barra fixa de baixo já é ele. */
  .lp-duvidas-acao{ display:none }
  .lp-quebra{ display:none }
  .lp-janela-pagina{ grid-template-columns:1fr; padding:16px }
  .lp-etapas{ display:none }
  .lp-fecho{ margin-left:16px; margin-right:16px; border-radius:26px }
  /* A barra de compra fixa: o botão ao alcance do polegar em qualquer ponto da rolagem.
     O rodapé ganha folga para o último link legal não ficar atrás dela. */
  .lp-barra{ display:flex; align-items:center; justify-content:space-between; gap:14px;
    /* Abaixo de 40: a barra de consentimento (`.vt-consent`) precisa ficar POR CIMA
       desta enquanto estiver aberta, ou o visitante não consegue responder a ela. */
    position:fixed; left:0; right:0; bottom:0; z-index:30;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--lp-fio); background-color:rgba(6,9,16,.92);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px) }
  .lp-barra-txt{ color:var(--lp-cinza); font-size:14px }
  .lp-barra-txt b{ color:var(--lp-tinta); font-size:18px; font-weight:700;
    font-variant-numeric:tabular-nums }
  .lp-rodape{ padding-bottom:calc(96px + env(safe-area-inset-bottom)) }
}
@media (max-width:560px){
  .lp-secao{ padding-left:18px; padding-right:18px }
  .lp-passo, .lp-quadro, .lp-plano, .lp-voz-menor{ padding:24px }
  .lp-hero-acao, .lp-hero-acao .lp-btn, .lp-secao-acao, .lp-secao-acao .lp-btn,
  .lp-voz-acao, .lp-voz-acao .lp-btn{ width:100% }
  .lp-hero-acao .lp-btn, .lp-secao-acao .lp-btn, .lp-voz-acao .lp-btn{ display:grid }
  .lp-btn-cta{ padding:0 20px; font-size:16px }
  .lp-folha{ padding:18px }
  .lp-q summary{ gap:14px; min-height:72px; padding:18px 0 }
  .lp-q-mais{ width:34px; height:34px }
  .lp-q p{ margin-left:0; padding:0 0 24px }
}