/* =====================================================================
   PLAYBOOK IMOBILIARIO — /150-protocolos/
   CSS proprio desta pagina. NAO carrega style.css: o Figma desta LP tem
   sistema visual proprio (paleta, escala, raios) e herdar o global so
   traria peso morto e brigas de especificidade.

   FONTE DA VERDADE: Figma lMeqcwNhdvCWUFTaT07Xn6, frame 187:317
   "site-Phone-150-protocolos", 480 x 9208, desenhado mobile-first.

   === COMO A ESCALA FUNCIONA =========================================
   A prancha do Figma tem 480px de largura. Para a pagina ficar
   proporcionalmente identica em qualquer tela, a raiz escala com a
   viewport e 1rem passa a valer 16px "do Figma".

     --px = 1 pixel do Figma.

   Entao todo valor daqui e escrito como calc(N * var(--px)), onde N e
   exatamente o numero que esta no no do Figma. Da para auditar linha a
   linha contra o arquivo. Nao arredonde: se o Figma diz 36.824, escreva
   36.824.

   Consequencia consciente: a pagina ignora o "tamanho de fonte padrao"
   do navegador (mas responde a zoom, que e o que 99% dos usuarios usam).
   Foi a troca escolhida para poder entregar fidelidade proporcional.
   ===================================================================== */

/* ---------- FONTE (mesma do site, ja auto-hospedada) ---------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- TOKENS (hex exatos lidos dos nos do Figma) -------------- */
:root {
  /* 1 pixel do Figma. 16 deles = 1rem.
     --px-base nunca muda; --px pode ser multiplicado dentro de um bloco
     para ampliar a composicao inteira dele sem reescrever medida nenhuma
     (usado so no desktop). Larguras e margens do INVOLUCRO de um bloco
     ampliado usam --px-base, porque precisam da escala do container. */
  --px-base: 0.0625rem;
  --px: var(--px-base);

  --azul:          #2563EB;  /* 31 ocorrencias — cor primaria */
  --azul-escuro:   #1D4ED8;  /* realce do h1, titulos, rotulo das pilulas */
  --azul-grad-1:   #2460E8;  /* gradiente do nome do produto */
  --azul-grad-2:   #143682;
  --azul-bg:       #F5F8FF;  /* caixa de texto das linhas de categoria */
  --azul-medio:    #C8D9FF;  /* sub-caixa de padrao do imovel */
  --azul-claro:    #E0EAFF;  /* fundo da caixa de oferta */
  --verde:         #23A566;  /* botoes de CTA */
  --vermelho:      #FF5B5B;  /* rotulo "Prompt Generico" e preco riscado */
  --vermelho-puro: #FF0000;  /* risco sobre R$297,90 na oferta */
  --preto:         #0D0F12;
  --cinza-txt:     #626262;  /* lead do hero, rotulo dos passos */
  --cinza-selo:    #3A3A3A;  /* selos de seguranca */
  --cinza-avista:  #464646;  /* "a vista" */
  --papel:         #F7F8FA;  /* fundo da secao antes/depois */
  --placeholder:   #D9D9D9;  /* caixas VSL e "video gif" do Figma */

  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* line-height "auto" do Inter no Figma */
  --lh: 1.21;
  --transicao: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- RESET MINIMO -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* 3.3333vw == 16px quando a viewport tem 480px (a largura da prancha).
     Trava em 16px acima disso; piso de 10px para telas muito estreitas. */
  font-size: clamp(10px, 3.3333vw, 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #FFFFFF;
  color: #000000;
  font-family: var(--fonte);
  font-weight: 400;
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* height:auto e obrigatorio: as imagens levam width/height no HTML (para o
   navegador reservar o espaco e nao haver salto de layout), e sem isto o
   atributo height viraria a altura usada, ignorando o aspect-ratio do CSS. */
img, svg, video { display: block; max-width: 100%; height: auto; }

/* Icone vindo do sprite (<use>): sem viewBox proprio, precisa preencher
   o container, que e quem tem a medida do Figma. */
.lp-i { width: 100%; height: 100%; }

/* O sprite nao e conteudo, e biblioteca. Fica fora de tela em vez de
   display:none, porque alguns navegadores param de desenhar o <use>
   quando o simbolo de origem esta escondido desse jeito. */
.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b, strong { font-weight: 700; }

:where(a, button):focus-visible {
  outline: calc(3 * var(--px)) solid var(--azul-escuro);
  outline-offset: calc(3 * var(--px));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- CONTAINER ----------------------------------------------- */
/* 480 * 0.0625rem = 30rem. Abaixo de 480px de viewport, 30rem == 100vw,
   entao a coluna ocupa a tela inteira e tudo escala junto. */
.lp {
  width: 100%;
  max-width: calc(480 * var(--px));
  margin-inline: auto;
  /* sem overflow-x aqui: no desktop quatro blocos precisam ultrapassar os
     480 da coluna. Quem barra a rolagem horizontal e o <body>. */
}

/* Texto centralizado e o padrao da prancha inteira. */
.lp-centro { text-align: center; }
.lp-realce { color: var(--azul-escuro); }
.lp-preto  { color: #000000; }

/* Some visualmente, continua no fluxo de leitores de tela. */
.lp-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   1. HERO  —  branco, y 0 -> 460
   ===================================================================== */
.lp-hero {
  padding-top: calc(81 * var(--px));
  padding-bottom: calc(16 * var(--px));
  text-align: center;
}

/* 202:696 — 36px Bold, 4 linhas autorais, caixa 350x176 (44px por linha) */
.lp-hero__titulo {
  font-size: calc(36 * var(--px));
  font-weight: 700;
  line-height: calc(44 / 36);
  letter-spacing: 0;
  color: #000000;
}

/* 202:697 — 20px Regular #626262, caixa de 412px (quebra natural) */
.lp-hero__lead {
  width: calc(412 * var(--px));
  margin: calc(12 * var(--px)) auto 0;
  font-size: calc(20 * var(--px));
  line-height: calc(24 / 20);
  color: var(--cinza-txt);
}

/* 204:759 — pilula azul 287x43, raio 10 */
.lp-selo {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  width: calc(287 * var(--px));
  height: calc(43 * var(--px));
  margin: calc(12 * var(--px)) auto 0;
  padding-left: calc(14 * var(--px));      /* icone em x110, caixa em x96 */
  border-radius: calc(10 * var(--px));
  background: var(--azul);
  color: #FFFFFF;
}
.lp-selo__icone { width: calc(24 * var(--px)); height: calc(24 * var(--px)); flex: none; }
.lp-selo__texto { font-size: calc(16.882 * var(--px)); font-weight: 700; }

/* =====================================================================
   2. VSL + faixa do titulo  —  azul, y 460 -> 845
   O bloco azul termina com os cantos de baixo arredondados em 15px; o
   que aparece por tras deles e o #f7f8fa da secao seguinte, por isso os
   dois ficam dentro de .lp-fundo-papel.
   ===================================================================== */
.lp-fundo-papel { background: var(--papel); }

.lp-vsl {
  background: var(--azul);
  border-radius: 0 0 calc(15 * var(--px)) calc(15 * var(--px));
  padding-top: calc(64 * var(--px));
}

/* 202:683 — 341x190, raio 20. Recebe o video da VSL. */
.lp-vsl__quadro {
  position: relative;
  width: calc(341 * var(--px));
  aspect-ratio: 341 / 190;
  margin-inline: auto;
  border-radius: calc(20 * var(--px));
  overflow: hidden;
  background: var(--placeholder);
}
.lp-vsl__quadro video,
.lp-vsl__quadro img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Botao transparente cobrindo o quadro: clicar na VSL leva ao
   antes/depois. Fica por cima do video porque o <video> sozinho nao
   recebe foco de teclado nem anuncia que e clicavel — e porque clicar
   direto nele dispara play/pause nativo em alguns navegadores.
   Sem rotulo visivel: quem enxerga ve o video, quem usa leitor de tela
   recebe o aria-label. */
.lp-quadro__avancar {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.lp-quadro__avancar:focus-visible {
  outline: calc(3 * var(--px)) solid #FFFFFF;
  outline-offset: calc(-4 * var(--px));
}

/* 187:372 — 20px Bold branco, 2 linhas. Faixa 749->845, texto 773->821. */
.lp-vsl__titulo {
  margin-top: calc(59 * var(--px));         /* 524+190=714 -> 773 */
  padding-bottom: calc(24 * var(--px));     /* 821 -> 845 */
  font-size: calc(20 * var(--px));
  font-weight: 700;
  line-height: calc(24 / 20);
  color: #FFFFFF;
  text-align: center;
}

/* =====================================================================
   3. ANTES / DEPOIS  —  fundo #f7f8fa, y 749 -> 2234
   ===================================================================== */
.lp-comparacao { padding-bottom: calc(41 * var(--px)); }

/* 200:631 — 20px Regular, 2 linhas */
.lp-comparacao__sub {
  padding-top: calc(30 * var(--px));
  font-size: calc(20 * var(--px));
  line-height: calc(24 / 20);
  text-align: center;
}

/* Um par: coluna de 202 + coluna de 180, vao de 26, bloco de 408 centrado.
   As alturas vem do proprio arquivo (cada arte tem recorte diferente no
   Figma), por isso height:auto — nunca forcar aspect-ratio aqui. */
/* ---------- O PAR, EMPILHADO (padrao ate 1024px) --------------------
   O Figma poe as duas artes lado a lado. Isso funciona na prancha, mas
   num celular de 375px cada imagem fica com ~170px de largura — o texto
   do anuncio vira borrao e a comparacao perde a forca justamente onde
   ela e a prova principal da pagina.

   O limite e geometrico, nao de ajuste: duas colunas dentro de 375px
   nunca passam disso. Por isso, ate 1024px, as artes empilham e cada uma
   ocupa quase a largura toda — passam de ~170px para ~350px, o dobro. A
   partir de 1024px, onde ha espaco de verdade, volta o lado a lado do
   arquivo, ampliado 2x.

   Decisao do Carlos em 05/08, depois de duas rodadas de "ainda esta
   pequeno" com o layout de duas colunas. */
.lp-par {
  position: relative;
  width: calc(440 * var(--px));
  margin: calc(40 * var(--px)) auto 0;
  display: grid;
  justify-items: center;
}
.lp-par img { width: 100%; height: auto; }

/* Empilhado a seta aponta para baixo: e a mesma arte de 197:562, girada. */
.lp-par__seta {
  width: calc(26 * var(--px));
  height: calc(20.4 * var(--px));
  margin: calc(18 * var(--px)) 0;
  rotate: 90deg;
}

/* 197:558 / 197:560 — rotulos brancos sobre vermelho e azul.
   Empilhados eles nao usam mais a largura fixa de 143 do arquivo: com a
   imagem duas vezes maior, uma pilula fixa ficaria desproporcional. */
.lp-par__rotulo {
  margin-top: calc(12 * var(--px));
  padding: calc(5 * var(--px)) calc(16 * var(--px));
  font-size: calc(15 * var(--px));
  line-height: calc(19 / 15);
  color: #FFFFFF;
  white-space: nowrap;
}
.lp-par__rotulo--antes  { background: var(--vermelho); }
.lp-par__rotulo--depois { background: var(--azul); }

/* =====================================================================
   4. CTA  —  componente, aparece 2x (y 2025 e y 5154)
   ===================================================================== */
/* 187:399 — 20px Regular, 2 linhas */
.lp-cta__chamada {
  font-size: calc(20 * var(--px));
  line-height: calc(24 / 20);
  text-align: center;
}

/* 199:622 — 314x64, raio 15, #23a566, texto 20px Bold em 2 linhas */
.lp-botao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--px));
  width: calc(314 * var(--px));
  min-height: calc(64 * var(--px));
  margin-inline: auto;
  border: 0;
  border-radius: calc(15 * var(--px));
  background: var(--verde);
  color: #FFFFFF;
  font-family: inherit;
  font-size: calc(20 * var(--px));
  font-weight: 700;
  line-height: calc(24 / 20);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
/* Pulso continuo nos CTAs (pedido do Carlos, 05/08).

   Anima a propriedade `scale`, NAO `transform`. Sao propriedades
   separadas no CSS moderno, e isso importa aqui: `transform` ja e usado
   pelo :active (o botao afunda 1px) e pela revelacao de entrada. Se o
   pulso usasse transform, a animacao venceria os dois e o botao pararia
   de responder ao toque.

   3% de escala e 2,4s de ciclo: chama o olho na visao periferica sem
   virar banner piscante. `scale` nao afeta layout, entao nao ha risco de
   deslocar nada em volta nem de piorar o CLS. */
@keyframes lp-pulsar {
  0%, 100% { scale: 1; }
  50%      { scale: 1.03; }
}
.lp-botao { animation: lp-pulsar 2.4s ease-in-out infinite; }

/* Com o dedo ou o mouse em cima, o visitante ja achou o botao: o pulso
   perde a funcao e so atrapalha a mira. Idem enquanto carrega. */
.lp-botao:hover,
.lp-botao:focus-visible,
.lp-botao:active,
.lp-botao[aria-busy="true"] { animation: none; scale: 1; }

.lp-botao:hover  { background: #1E8F58; box-shadow: 0 calc(4 * var(--px)) calc(14 * var(--px)) rgba(35, 165, 102, .35); }
.lp-botao:active { background: #1A7A4B; transform: translateY(calc(1 * var(--px))); box-shadow: none; }
/* Estado enquanto o navegador sai para o checkout da Cakto. Sem ele o
   botao parece inerte no intervalo entre o toque e a nova pagina, e o
   visitante toca de novo. */
.lp-botao[aria-busy="true"] { background: #1A7A4B; cursor: progress; }
.lp-botao[aria-busy="true"] .lp-botao__rotulo { opacity: .55; }
.lp-botao__giro {
  display: none;
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  border: calc(2.5 * var(--px)) solid rgba(255, 255, 255, .45);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: lp-girar 700ms linear infinite;
}
.lp-botao[aria-busy="true"] .lp-botao__giro { display: block; position: absolute; }
@keyframes lp-girar { to { rotate: 360deg; } }

/* Alvo de toque confortavel sem mexer no desenho: o botao da oferta tem
   42px no Figma, que num celular de 390px vira ~34px reais — abaixo do
   minimo de 44px. A area invisivel abaixo resolve sem alterar 1px do
   visual. */
.lp-botao::after {
  content: "";
  position: absolute;
  inset: calc(-6 * var(--px)) calc(-8 * var(--px));
}

/* 199:624 — 14px, "R$ 297,90" em #ff5b5b riscado por uma linha inclinada
   7,21 graus (200:632), e "R$ 37,90" em #23a566 */
.lp-preco {
  margin-top: calc(10 * var(--px));
  font-size: calc(14 * var(--px));
  line-height: calc(17 / 14);
  text-align: center;
}
.lp-preco__de {
  position: relative;
  color: var(--vermelho);
}
.lp-preco__de::after {
  content: "";
  position: absolute;
  left: calc(-2 * var(--px));
  right: calc(-2 * var(--px));
  top: 50%;
  height: 1px;
  background: #000000;
  rotate: -7.21deg;
}
.lp-preco__por { color: var(--verde); }

/* 187:417 — fileira de logos, x49 -> x430.41, altura 30.
   Cada logo tem tamanho proprio no arquivo e precisa vir explicito: os
   SVGs exportados do Figma nao carregam width/height, entao sem isto
   eles colapsam para altura zero e somem da pagina. */
.lp-ias {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(381.41 * var(--px));
  height: calc(30 * var(--px));
  margin: calc(30 * var(--px)) auto 0;
}
.lp-ias__item { display: flex; align-items: center; flex: none; }
.lp-ias__item svg { display: block; flex: none; }
/* 187:385 — icone do ChatGPT 28.791, com 4.89 ate o texto */
.lp-ias__item--chatgpt svg { width: calc(28.791 * var(--px)); height: calc(28.791 * var(--px)); }
.lp-ias__item--chatgpt { gap: calc(4.89 * var(--px)); }
/* 187:396 — Gemini 118.61 x 30 */
.lp-ias__item--gemini svg { width: calc(118.61 * var(--px)); height: calc(30 * var(--px)); }
/* 187:395 — Claude 98.413 x 26.618 */
.lp-ias__item--claude svg { width: calc(98.413 * var(--px)); height: calc(26.618 * var(--px)); }
/* 187:386 — "Chat GPT" 16.38px Bold #0d0f12, numa linha so */
.lp-ias__nome {
  font-size: calc(16.38 * var(--px));
  font-weight: 700;
  color: var(--preto);
  white-space: nowrap;
}
.lp-ias__divisor { width: 1px; height: calc(28 * var(--px)); background: #000000; flex: none; }

/* =====================================================================
   5. DEMONSTRACAO ("video gif")  —  branco, caixa 240x320 SEM raio
   ===================================================================== */
.lp-demo { padding-block: calc(30 * var(--px)) calc(41 * var(--px)); }
.lp-demo__quadro {
  position: relative;
  width: calc(240 * var(--px));
  aspect-ratio: 240 / 320;
  margin-inline: auto;
  overflow: hidden;
  background: var(--placeholder);
}
.lp-demo__quadro video,
.lp-demo__quadro img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   6. COMO FUNCIONA  —  grade 2x2, y 2625 -> 2946
   Bloco de 263x321 centrado; setas posicionadas por cima.
   ===================================================================== */
.lp-passos {
  position: relative;
  width: calc(263 * var(--px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, calc(73.746 * var(--px)));
  justify-content: space-between;
  row-gap: calc(20.3 * var(--px));    /* 2777.7 -> 2798 */
}
.lp-passo { text-align: center; }
/* 187:344 — "1º" 24px Bold preto */
.lp-passo__n {
  font-size: calc(24 * var(--px));
  font-weight: 700;
  line-height: calc(29 / 24);
  margin-bottom: calc(9 * var(--px));  /* 2654 -> 2663 */
}
/* 187:301 — quadrado 73.746 azul, raio 11.062 */
.lp-passo__icone {
  width: calc(73.746 * var(--px));
  height: calc(73.746 * var(--px));
  border-radius: calc(11.062 * var(--px));
  background: var(--azul);
  display: grid;
  place-items: center;
}
.lp-passo__icone svg { width: calc(58.997 * var(--px)); height: calc(58.997 * var(--px)); }
/* os tres outros icones tem tamanhos proprios no Figma */
.lp-passo--imagem   .lp-passo__icone svg { width: calc(56.047 * var(--px)); height: calc(56.047 * var(--px)); }
.lp-passo--publicar .lp-passo__icone svg { width: calc(53.097 * var(--px)); height: calc(53.097 * var(--px)); }
.lp-passo--pergunta .lp-passo__icone { background: none; border-radius: 0; }
.lp-passo--pergunta .lp-passo__icone svg { width: 100%; height: 100%; }
/* 187:368..371 — 14.749px Bold #626262, 2 linhas.
   A caixa de texto e MAIS LARGA que o icone (96 contra 73.746) e
   transborda para os dois lados: e o que segura "Responda as" e
   "Publique e" numa linha so. Com 73.746 elas quebram em tres linhas e
   a grade inteira cresce ~52px. */
.lp-passo__texto {
  width: calc(96 * var(--px));
  margin: calc(9.25 * var(--px)) auto 0;   /* 2736.75 -> 2746 */
  font-size: calc(14.749 * var(--px));
  font-weight: 700;
  line-height: calc(15.86 / 14.749);
  color: var(--cinza-txt);
}
/* Na segunda linha da grade o respiro entre numero e icone e 4, nao 9
   (2827 -> 2831 contra 2654 -> 2663). Assimetria do proprio arquivo. */
.lp-passo:nth-child(n + 3) .lp-passo__n { margin-bottom: calc(4 * var(--px)); }
/* 187:365 / 187:367 — setas pretas 37x29.04.
   `color` porque o simbolo do sprite usa currentColor: a mesma seta e
   preta aqui e branca no FAQ. */
.lp-passos__seta {
  position: absolute;
  left: calc(112 * var(--px));          /* 221 - 109 (origem do bloco) */
  width: calc(37 * var(--px));
  height: calc(29.039 * var(--px));
  color: #000000;
}
.lp-passos__seta--1 { top: calc(60 * var(--px)); }    /* 2685 - 2625 */
.lp-passos__seta--2 { top: calc(228 * var(--px)); }   /* 2853 - 2625 */
.lp-passos__seta--3 { display: none; }                /* so no desktop */
/* 187:366 — a mesma seta de 37x29.04, girada para apontar para baixo e a
   esquerda (ligando o 2o passo ao 3o). O SVG exportado do Figma NAO vem
   girado: a rotacao e transformacao do no, e o export ignora. Sem o
   rotate aqui a seta aponta para a direita e o fluxo dos 4 passos deixa
   de fazer sentido. 137deg e o que reproduz a caixa de 46.878 x 46.445
   registrada no arquivo. */
.lp-passos__seta--diagonal {
  position: absolute;
  left: calc(162.82 * var(--px));       /* centro 290.32 - 109 - 37/2  */
  top: calc(163.01 * var(--px));        /* centro 2802.53 - 2625 - 29.0388/2 */
  width: calc(37 * var(--px));
  height: calc(29.039 * var(--px));
  rotate: 137deg;
}

/* =====================================================================
   7. CATEGORIAS  —  2 tiles com arte + 6 linhas de lista
   ===================================================================== */
.lp-categorias { padding-top: calc(30 * var(--px)); }

/* 188:470 — imagem 392x588 (raio 25 em cima) + faixa 392x77 (raio 25 embaixo) */
.lp-tile {
  width: calc(392 * var(--px));
  margin-inline: auto;
}
.lp-tile + .lp-tile { margin-top: calc(35 * var(--px)); }
.lp-tile__arte {
  width: 100%;
  aspect-ratio: 392 / 588;
  object-fit: cover;
  border-radius: calc(25 * var(--px)) calc(25 * var(--px)) 0 0;
}
.lp-tile__faixa {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(77 * var(--px));
  border-radius: 0 0 calc(25 * var(--px)) calc(25 * var(--px));
  background: var(--azul);
  color: #FFFFFF;
  font-size: calc(24 * var(--px));
  line-height: calc(29 / 24);
  text-align: center;
}

/* 200:640 — bloco de 367 de largura, 6 linhas com 22 de respiro */
.lp-lista { width: calc(367 * var(--px)); margin: calc(35 * var(--px)) auto 0; }
.lp-lista__item + .lp-lista__item { margin-top: calc(22 * var(--px)); }

.lp-linha {
  display: grid;
  grid-template-columns: calc(55 * var(--px)) calc(60 * var(--px)) calc(252 * var(--px));
  align-items: center;
}
/* 191:502 — check verde 34x34, alinhado ao centro da caixa de 60 */
.lp-linha__check { width: calc(34 * var(--px)); height: calc(33.997 * var(--px)); }
/* 191:481 — caixa 60x60 azul, numero 24px Bold branco, sem raio */
.lp-linha__n {
  height: calc(60 * var(--px));
  display: grid;
  place-items: center;
  background: var(--azul);
  color: #FFFFFF;
  font-size: calc(24 * var(--px));
  font-weight: 700;
}
/* 191:482 — caixa 252x60 #f5f8ff, texto 16px, recuo de 7 */
.lp-linha__texto {
  height: calc(60 * var(--px));
  display: flex;
  align-items: center;
  padding-left: calc(7 * var(--px));
  background: var(--azul-bg);
  font-size: calc(16 * var(--px));
  line-height: calc(19.36 / 16);
}
/* 197:542 — sub-caixa 252x90 #c8d9ff, lista com marcadores, recuo de 31 */
.lp-padroes {
  width: calc(252 * var(--px));
  height: calc(90 * var(--px));
  margin-left: calc(115 * var(--px));    /* 172 - 57 */
  padding-left: calc(31 * var(--px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--azul-medio);
  list-style: disc;
  font-size: calc(16 * var(--px));
  line-height: calc(19.36 / 16);
}
.lp-padroes li { display: list-item; list-style: disc; }

/* 191:514 — 24px Regular, 2 linhas */
.lp-categorias__fecho {
  margin-top: calc(35 * var(--px));
  font-size: calc(24 * var(--px));
  line-height: calc(29 / 24);
  text-align: center;
}

/* =====================================================================
   8. DEPOIMENTOS  —  2 prints reais do WhatsApp
   ===================================================================== */
.lp-depoimentos { padding-top: calc(35 * var(--px)); }
/* 201:646 — 32px Bold, 2 linhas */
.lp-depoimentos__titulo {
  font-size: calc(32 * var(--px));
  font-weight: 700;
  line-height: calc(39 / 32);
  text-align: center;
}
.lp-depoimento {
  width: calc(327 * var(--px));
  margin-inline: auto;
  height: auto;
}
.lp-depoimento--1 { margin-top: calc(35 * var(--px)); border-radius: calc(15 * var(--px)); }
.lp-depoimento--2 { margin-top: calc(25 * var(--px)); border-radius: calc(13.365 * var(--px)); }

/* =====================================================================
   9. OBJECAO  —  titulo + 4 cards
   ===================================================================== */
.lp-objecao { padding-top: calc(35 * var(--px)); }
/* 188:418 — 32px Regular, "sem saber nada de Design" em Bold */
.lp-objecao__titulo {
  font-size: calc(32 * var(--px));
  font-weight: 400;
  line-height: calc(39 / 32);
  text-align: center;
}
/* 188:419 — 16px, "Sim!" preto e o resto #626262 */
.lp-objecao__sub {
  margin-top: calc(30 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(19.36 / 16);
  color: var(--cinza-txt);
  text-align: center;
}
.lp-cards { margin-top: calc(30 * var(--px)); }
.lp-card { width: calc(281 * var(--px)); margin-inline: auto; }
.lp-card + .lp-card { margin-top: calc(30 * var(--px)); }
/* 188:423 — cabecalho 281x40 azul, raio 15 so em cima */
.lp-card__titulo {
  height: calc(40 * var(--px));
  display: grid;
  place-items: center;
  border-radius: calc(15 * var(--px)) calc(15 * var(--px)) 0 0;
  background: var(--azul);
  color: #FFFFFF;
  font-size: calc(16 * var(--px));
  font-weight: 400;
}
/* 188:424 — corpo 281x80, borda 1px azul, cantos retos */
.lp-card__corpo {
  min-height: calc(80 * var(--px));
  display: grid;
  place-items: center;
  padding-inline: calc(20 * var(--px));
  border: 1px solid var(--azul);
  background: #FFFFFF;
  font-size: calc(16 * var(--px));
  line-height: calc(19.36 / 16);
  text-align: center;
}

/* =====================================================================
   10. POR QUE ISSO ACONTECE  —  y 7168 -> 7549
   Um retangulo azul de 480x381 com os cantos de baixo arredondados, e
   por cima dele uma faixa branca de 480x104 tambem arredondada embaixo.
   E a sobreposicao das duas que desenha o "encaixe" do topo do azul.
   ===================================================================== */
.lp-porque {
  position: relative;
  height: calc(381 * var(--px));
  margin-top: calc(35 * var(--px));
  border-radius: 0 0 calc(15 * var(--px)) calc(15 * var(--px));
  background: var(--azul);
}
.lp-porque::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(104 * var(--px));
  border-radius: 0 0 calc(15 * var(--px)) calc(15 * var(--px));
  background: #FFFFFF;
}
/* 200:634 — 32px Regular #1d4ed8, y 7200 */
.lp-porque__titulo {
  position: absolute;
  inset-inline: 0;
  top: calc(32 * var(--px));
  font-size: calc(32 * var(--px));
  font-weight: 400;
  line-height: calc(39 / 32);
  color: var(--azul-escuro);
  text-align: center;
}
/* 200:637 — 24px branco, caixa de 343, quebras em branco literais */
.lp-porque__texto {
  position: absolute;
  left: 50%;
  top: calc(134 * var(--px));           /* 7302 - 7168 */
  translate: -50% 0;
  width: calc(343 * var(--px));
  font-size: calc(24 * var(--px));
  line-height: calc(29 / 24);
  color: #FFFFFF;
  text-align: center;
}

/* =====================================================================
   11. METODO  —  4 pilulas contornadas + descricao
   ===================================================================== */
.lp-metodo { padding-top: calc(30 * var(--px)); }
.lp-metodo__item + .lp-metodo__item { margin-top: calc(35 * var(--px)); }
/* 188:448 — altura 49, raio 15, borda 1px azul. Largura vem do conteudo. */
.lp-pilula {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(49 * var(--px));
  margin-inline: auto;
  border: 1px solid var(--azul);
  border-radius: calc(15 * var(--px));
  font-size: calc(24 * var(--px));
  line-height: calc(29 / 24);
  color: var(--azul-escuro);
  text-align: center;
}
/* 188:449 — 24px preto, caixa de 343 */
.lp-metodo__texto {
  width: calc(343 * var(--px));
  margin: calc(27 * var(--px)) auto 0;
  font-size: calc(24 * var(--px));
  line-height: calc(29 / 24);
  text-align: center;
}

/* =====================================================================
   12. OFERTA  —  caixa 418x631 (#e0eaff, raio 10) com card branco dentro
   O interior do card e posicionado em coordenadas absolutas de proposito:
   sao elementos colocados a mao no Figma (linhas tortas, risco vermelho,
   selos), e reproduzir por fluxo geraria desvio acumulado.
   ===================================================================== */
.lp-oferta {
  position: relative;
  width: calc(418 * var(--px));
  height: calc(631 * var(--px));
  margin: calc(59 * var(--px)) auto 0;
  border-radius: calc(10 * var(--px));
  background: var(--azul-claro);
}
/* 204:752 — mockup 342x228 */
.lp-oferta__mockup {
  position: absolute;
  left: calc(38 * var(--px));
  top: calc(22 * var(--px));
  width: calc(342 * var(--px));
  height: calc(228 * var(--px));
  object-fit: contain;
}
/* 204:713 — card branco 360x330, raio 25 */
.lp-oferta__card {
  position: absolute;
  left: calc(29 * var(--px));
  top: calc(267 * var(--px));
  width: calc(360 * var(--px));
  height: calc(330 * var(--px));
  border-radius: calc(25 * var(--px));
  background: #FFFFFF;
}
/* 204:704 / 204:705 — nome com gradiente #2460e8 -> #143682 */
.lp-oferta__nome {
  position: absolute;
  inset-inline: 0;
  top: calc(28 * var(--px));
  text-align: center;
  background-image: linear-gradient(to right, var(--azul-grad-1), var(--azul-grad-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-oferta__nome b { display: block; font-size: calc(20 * var(--px)); font-weight: 700; line-height: calc(24 / 20); }
.lp-oferta__nome i { display: block; font-size: calc(21.271 * var(--px)); font-weight: 400; font-style: normal; line-height: calc(26 / 21.271); }
/* 204:715 e 204:729 — as duas linhas desenhadas a mao, 196 de largura */
.lp-oferta__risco {
  position: absolute;
  left: calc(82 * var(--px));           /* 142 - 60 */
  width: calc(196 * var(--px));
  height: calc(2 * var(--px));
}
.lp-oferta__risco--1 { top: calc(83 * var(--px)); }
.lp-oferta__risco--2 { top: calc(265 * var(--px)); }
/* 204:707 — 24px preto, com "R$297,90" cortado pelo risco vermelho 204:726 */
.lp-oferta__de {
  position: absolute;
  inset-inline: 0;
  top: calc(94 * var(--px));
  font-size: calc(24 * var(--px));
  line-height: calc(29 / 24);
  text-align: center;
}
.lp-oferta__de s { text-decoration: none; position: relative; }
.lp-oferta__de s::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: calc(2 * var(--px));
  background: var(--vermelho-puro);
}
/* 204:708 — 36.824px Bold #2563eb */
.lp-oferta__parcela {
  position: absolute;
  inset-inline: 0;
  top: calc(123 * var(--px));
  font-size: calc(36.824 * var(--px));
  font-weight: 700;
  line-height: calc(45 / 36.824);
  color: var(--azul);
  text-align: center;
}
/* 204:711 — 16px #464646 */
.lp-oferta__avista {
  position: absolute;
  inset-inline: 0;
  top: calc(183 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(19.36 / 16);
  color: var(--cinza-avista);
  text-align: center;
}
/* 204:727 — botao 227x42, raio 9 */
.lp-oferta__botao {
  position: absolute;
  left: calc(66 * var(--px));
  top: calc(206 * var(--px));
  width: calc(227 * var(--px));
  min-height: calc(42 * var(--px));
  margin: 0;
  border-radius: calc(9 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(19.36 / 16);
}
/* 204:746..748 — selos 8.205px #3a3a3a */
.lp-selos {
  position: absolute;
  left: calc(66 * var(--px));           /* 126 - 60 */
  top: calc(279 * var(--px));
  width: calc(227 * var(--px));
  height: calc(22 * var(--px));
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lp-selo-item { display: flex; align-items: center; gap: calc(3 * var(--px)); }
.lp-selo-item svg { height: calc(22 * var(--px)); width: auto; flex: none; }
.lp-selo-item span {
  font-size: calc(8.205 * var(--px));
  line-height: calc(10 / 8.205);
  color: var(--cinza-selo);
}
.lp-selo-item--forte span { font-weight: 700; }

/* O cadeado solto de 204:732 saiu a pedido do Carlos em 05/08: era sobra
   de prototipagem no arquivo, nao elemento de desenho. */

/* =====================================================================
   13. FAQ  —  NAO existe no Figma (pedido do Carlos, 05/08).

   Nada de linguagem visual nova: e o mesmo cartao da secao de objecao
   (cabecalho azul com raio 15 so em cima, corpo branco com borda azul de
   1px, base reta), na largura de 367 que a lista de categorias ja usa.

   Unica licenca: a entrelinha do corpo sobe de 1.21 para 1.5. As
   respostas tem 3 a 5 linhas e nao existe nada parecido no arquivo — a
   entrelinha apertada do Figma foi desenhada para blocos de 2 linhas.
   ===================================================================== */
.lp-faq { padding-top: calc(45 * var(--px)); }

.lp-faq__titulo {
  font-size: calc(32 * var(--px));
  font-weight: 700;
  line-height: calc(39 / 32);
  text-align: center;
}

.lp-faq__lista {
  width: calc(367 * var(--px));
  margin: calc(30 * var(--px)) auto 0;
}
.lp-faq__item + .lp-faq__item { margin-top: calc(16 * var(--px)); }

/* summary com display:flex tira o triangulo nativo do Chrome; o
   ::-webkit-details-marker cobre o Safari, que ignora o display. */
.lp-faq__p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--px));
  min-height: calc(40 * var(--px));
  padding: calc(9 * var(--px)) calc(16 * var(--px));
  /* Fechado e uma pilula inteira; aberto perde o raio de baixo para
     encostar no corpo da resposta e virar o mesmo cartao do Figma. */
  border-radius: calc(15 * var(--px));
  background: var(--azul);
  color: #FFFFFF;
  font-size: calc(16 * var(--px));
  line-height: calc(19.36 / 16);
  cursor: pointer;
  list-style: none;
  transition: background var(--transicao);
}
.lp-faq__p::-webkit-details-marker { display: none; }
.lp-faq__p:hover { background: var(--azul-escuro); }
.lp-faq__p:focus-visible {
  outline: calc(3 * var(--px)) solid var(--azul-escuro);
  outline-offset: calc(2 * var(--px));
}

/* A seta e o mesmo asset do bloco "como funciona", girado para baixo. */
.lp-faq__seta {
  flex: none;
  width: calc(15 * var(--px));
  height: calc(15 * var(--px));
  display: grid;
  place-items: center;
  rotate: 90deg;
  transition: rotate var(--transicao);
}
.lp-faq__item[open] .lp-faq__seta { rotate: -90deg; }
.lp-faq__item[open] .lp-faq__p {
  border-radius: calc(15 * var(--px)) calc(15 * var(--px)) 0 0;
}

.lp-faq__r {
  padding: calc(14 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px));
  border: 1px solid var(--azul);
  border-top: 0;
  background: #FFFFFF;
  font-size: calc(16 * var(--px));
  line-height: 1.5;
}

/* =====================================================================
   14. BENEFICIOS + CTA FINAL  —  NAO existe no Figma (05/08).

   Monta com atomos que ja existem: o check verde de 34 e a caixa clara
   #f5f8ff das linhas de categoria. De proposito NAO repete o cartao do
   FAQ, que vem logo acima.
   ===================================================================== */
.lp-beneficios { padding-top: calc(50 * var(--px)); }

.lp-beneficios__titulo {
  font-size: calc(32 * var(--px));
  font-weight: 700;
  line-height: calc(39 / 32);
  text-align: center;
}

.lp-beneficios__lista {
  width: calc(367 * var(--px));
  margin: calc(30 * var(--px)) auto 0;
}

.lp-beneficio {
  display: grid;
  grid-template-columns: calc(55 * var(--px)) calc(312 * var(--px));
  align-items: center;
}
.lp-beneficio + .lp-beneficio { margin-top: calc(14 * var(--px)); }
.lp-beneficio__check { width: calc(34 * var(--px)); height: calc(33.997 * var(--px)); }
.lp-beneficio__caixa {
  display: block;
  padding: calc(12 * var(--px)) calc(16 * var(--px));
  background: var(--azul-bg);
  font-size: calc(16 * var(--px));
  line-height: calc(19.36 / 16);
}
.lp-beneficio__caixa b { display: block; font-weight: 700; }
.lp-beneficio__caixa span { display: block; color: var(--cinza-txt); }

/* =====================================================================
   15. DISCLAIMER  —  NAO existe no Figma (pedido do Carlos, 05/08).
   Faixa azul de largura total, logo antes do rodape.
   ===================================================================== */
.lp-disclaimer {
  margin-top: calc(60 * var(--px));
  padding: calc(32 * var(--px)) calc(28 * var(--px));
  background: var(--azul);
  color: #FFFFFF;
  text-align: center;
}
.lp-disclaimer__contato {
  font-size: calc(16 * var(--px));
  line-height: calc(24 / 16);
}
.lp-disclaimer__contato a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: calc(2 * var(--px));
  /* o e-mail e longo: sem isto ele fura a caixa numa tela de 360 */
  word-break: break-word;
}
.lp-disclaimer__contato a:hover { text-decoration-thickness: calc(2 * var(--px)); }
.lp-disclaimer__texto {
  max-width: calc(400 * var(--px));
  margin: calc(20 * var(--px)) auto 0;
  font-size: calc(12 * var(--px));
  line-height: 1.6;
}
.lp-disclaimer__copy {
  margin-top: calc(20 * var(--px));
  font-size: calc(14 * var(--px));
  line-height: calc(20 / 14);
}

/* =====================================================================
   16. RODAPE  —  nao existe no Figma. Exigencia legal e do Meta Ads.
   ===================================================================== */
/* Sem margem nem borda no topo: o rodape encosta na faixa azul do
   disclaimer, que ja faz a separacao. */
.lp-rodape {
  padding: calc(28 * var(--px)) calc(24 * var(--px)) calc(36 * var(--px));
  color: var(--cinza-txt);
  font-size: calc(12 * var(--px));
  line-height: 1.6;
  text-align: center;
}
.lp-rodape__links { display: flex; flex-wrap: wrap; gap: calc(16 * var(--px)); justify-content: center; margin-bottom: calc(12 * var(--px)); }
.lp-rodape a { color: var(--azul); text-decoration: none; }
.lp-rodape a:hover { text-decoration: underline; }

/* =====================================================================
   DESKTOP  —  a partir de 1024px

   O Figma so tem a prancha de 480. A composicao dele continua sendo a
   verdade: a coluna central permanece com 480 e NADA e reorganizado por
   conta propria. O que muda sao quatro blocos que existem justamente
   para serem olhados e que ficariam minusculos numa tela larga: os pares
   antes/depois, os dois tiles de categoria, os 4 passos e os 4 cards de
   objecao.

   A ampliacao nao reescreve medida nenhuma. Cada bloco recebe um --px
   maior e TODA a geometria dele (imagem, vao, rotulo, fonte, raio)
   cresce junto, na mesma proporcao do arquivo. O involucro usa
   --px-base, que nao muda, para saber onde comeca e termina a coluna.

   Unica decisao de layout tomada aqui, e por consequencia direta de
   "os 4 passos numa linha": em fila unica a seta diagonal, que no
   arquivo liga o fim da primeira linha ao inicio da segunda, deixa de
   ter para onde apontar. Ela sai e entra uma terceira seta horizontal,
   igual as outras duas.
   ===================================================================== */
@media (min-width: 1024px) {
  /* O fundo #f7f8fa da secao antes/depois passa a ocupar a tela inteira.
     Sem isto os pares ampliados escapam da faixa clara e ficam metade
     sobre cinza, metade sobre branco. O CONTEUDO continua nos 480 — quem
     abre e so a cor de fundo. */
  .lp-fundo-papel {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .lp-fundo-papel > * {
    max-width: calc(480 * var(--px-base));
    margin-inline: auto;
  }

  /* Rompe a coluna de 480 e centraliza um bloco mais largo. */
  .lp-pares,
  .lp-tiles,
  .lp-passos,
  .lp-cards {
    position: relative;
    margin-inline: auto;
  }

  /* --- pares antes/depois: volta o lado a lado do Figma, ampliado 2x ---
     Aqui ha largura de sobra, entao a composicao original do arquivo
     (duas colunas + seta no meio) e reconstruida: 202 e 180 dobram para
     404 e 360, com o vao de 26 virando 52 — 816 no total. */
  .lp-pares {
    width: calc(816 * var(--px-base));
    margin-inline: calc(-168 * var(--px-base));
  }
  .lp-pares .lp-par {
    --px: calc(var(--px-base) * 2);
    width: auto;
    grid-template-columns: calc(202 * var(--px)) calc(180 * var(--px));
    column-gap: calc(26 * var(--px));
    justify-content: center;
    justify-items: start;
    align-items: start;
    margin-top: calc(30 * var(--px));
  }
  .lp-par__antes  { grid-area: 1 / 1; }
  .lp-par__rotulo--antes  { grid-area: 2 / 1; }
  .lp-par__depois { grid-area: 1 / 2; }
  .lp-par__rotulo--depois { grid-area: 2 / 2; }

  /* 197:562 — de volta ao meio das duas colunas, apontando para a direita.
     A posicao NAO pode ser 50%: as colunas do arquivo sao assimetricas
     (202 e 180), entao o centro do bloco cai 22px a esquerda do centro
     do vao e a seta encosta na imagem da esquerda. 215 = 202 da primeira
     coluna + metade do vao de 26. */
  .lp-par__seta {
    position: absolute;
    left: calc(215 * var(--px));
    top: 50%;
    translate: -50% -50%;
    width: calc(19 * var(--px));
    height: calc(14.911 * var(--px));
    margin: 0;
    rotate: none;
  }

  /* Rotulos voltam a medida exata do arquivo, inclusive o deslocamento
     para a esquerda que eles tem la (x59 contra a coluna em x36). */
  .lp-par__rotulo {
    width: calc(143 * var(--px));
    height: calc(20 * var(--px));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* --gap-rotulo: o terceiro par usa 30 no arquivo, os outros dois 24 */
    margin-top: calc(var(--gap-rotulo, 24) * var(--px));
    font-size: calc(12 * var(--px));
    line-height: normal;
  }
  .lp-par__rotulo--antes  { margin-left: calc(23 * var(--px)); }
  /* o segundo par usa 16 no arquivo; os outros dois, 12 */
  .lp-par__rotulo--depois { margin-left: calc(var(--off-depois, 12) * var(--px)); }

  /* --- tiles de categoria: lado a lado, 392 + 35 + 392 = 819 --- */
  .lp-tiles {
    display: grid;
    grid-template-columns: repeat(2, calc(392 * var(--px-base)));
    column-gap: calc(35 * var(--px-base));
    justify-content: center;
    width: calc(819 * var(--px-base));
    margin-inline: calc(-169.5 * var(--px-base));
  }
  .lp-tiles .lp-tile + .lp-tile { margin-top: 0; }

  /* --- 4 passos em fila unica, mesmo passo de coluna (167) do arquivo --- */
  .lp-passos {
    grid-template-columns: repeat(4, calc(73.746 * var(--px)));
    justify-content: space-between;
    width: calc(574.75 * var(--px-base));
    margin-inline: calc(-47.375 * var(--px-base));
  }
  /* Em fila unica todas as celulas voltam ao respiro de 9 da primeira
     linha; a assimetria de 4 so existia por causa da quebra em duas. */
  .lp-passo:nth-child(n + 3) .lp-passo__n { margin-bottom: calc(9 * var(--px)); }
  .lp-passos__seta--diagonal { display: none; }
  .lp-passos__seta { display: block; top: calc(60 * var(--px)); }
  .lp-passos__seta--1 { left: calc(93.25 * var(--px)); }
  .lp-passos__seta--2 { left: calc(260.25 * var(--px)); }
  .lp-passos__seta--3 { left: calc(427.25 * var(--px)); }

  /* --- cards de objecao: 2 x 2 --- */
  .lp-cards {
    display: grid;
    grid-template-columns: repeat(2, calc(281 * var(--px-base)));
    gap: calc(30 * var(--px-base));
    justify-content: center;
    width: calc(592 * var(--px-base));
    margin-inline: calc(-56 * var(--px-base));
  }
  .lp-cards .lp-card + .lp-card { margin-top: 0; }

  /* Numa tela grande o cursor existe: da para mostrar que a arte responde. */
  .lp-tile__arte,
  .lp-depoimento { transition: transform var(--transicao); }
  .lp-tile:hover .lp-tile__arte { transform: translateY(calc(-3 * var(--px))); }
}

/* Entre 480 e 1024 (tablet) nada muda: a coluna de 480 fica centrada na
   tela, exatamente como o arquivo. */

/* =====================================================================
   MODAL DE RETOMADA  —  NAO existe no Figma (pedido do Carlos, 05/08).

   Aparece quando o visitante continua parado depois de a pagina ter
   descido sozinha. Reusa o vocabulario visual da caixa de oferta: card
   branco com raio 25, a mesma largura de 360, o mesmo botao verde.

   NAO ocupa a tela inteira, e isso e deliberado. Interstitial que cobre
   o conteudo no celular e o padrao que o Google penaliza, e esta pagina
   esta `index, follow`. Card de 360 sobre fundo escurecido mantem o
   antes/depois visivel em volta — que e justamente a prova que trouxe a
   pessoa ate aqui.
   ===================================================================== */
.lp-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: calc(24 * var(--px));
}
.lp-modal[hidden] { display: none; }

.lp-modal__fundo {
  position: absolute;
  inset: 0;
  background: rgba(13, 15, 18, .55);
  animation: lp-surgir 200ms ease-out;
}

.lp-modal__caixa {
  position: relative;
  width: 100%;
  max-width: calc(360 * var(--px));
  padding: calc(34 * var(--px)) calc(24 * var(--px)) calc(20 * var(--px));
  border-radius: calc(25 * var(--px));
  background: #FFFFFF;
  text-align: center;
  box-shadow: 0 calc(18 * var(--px)) calc(48 * var(--px)) rgba(13, 15, 18, .28);
  animation: lp-entrar 240ms cubic-bezier(.2, .7, .3, 1);
}

/* 44px de alvo de toque num icone de 16: a area invisivel do padding e o
   que faz o X ser acertavel no dedo sem inchar o desenho. */
.lp-modal__x {
  position: absolute;
  top: calc(6 * var(--px));
  right: calc(6 * var(--px));
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cinza-txt);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.lp-modal__x svg { width: calc(16 * var(--px)); height: calc(16 * var(--px)); fill: none; }
.lp-modal__x:hover { background: var(--azul-bg); color: var(--preto); }

/* text-wrap:balance distribui as linhas por igual e evita a palavra
   orfa na ultima ("IA." sozinha embaixo). Onde nao houver suporte, a
   quebra volta a ser a normal — nada quebra. */
.lp-modal__titulo {
  font-size: calc(24 * var(--px));
  font-weight: 700;
  line-height: calc(29 / 24);
  color: #000000;
  text-wrap: balance;
}
.lp-modal__sub {
  margin-top: calc(10 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(19.36 / 16);
  color: var(--cinza-txt);
  text-wrap: balance;
}
.lp-modal__botao {
  width: 100%;
  min-height: calc(52 * var(--px));
  margin-top: calc(20 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(19.36 / 16);
}
.lp-modal__recusar {
  display: block;
  margin: calc(14 * var(--px)) auto 0;
  padding: calc(8 * var(--px)) calc(12 * var(--px));
  border: 0;
  background: transparent;
  color: var(--cinza-txt);
  font-family: inherit;
  font-size: calc(14 * var(--px));
  line-height: calc(17 / 14);
  text-decoration: underline;
  cursor: pointer;
}
.lp-modal__recusar:hover { color: var(--preto); }

@keyframes lp-surgir { from { opacity: 0; } }
@keyframes lp-entrar {
  from { opacity: 0; transform: translateY(calc(16 * var(--px))) scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-modal__fundo, .lp-modal__caixa { animation: none; }
}

/* =====================================================================
   ANIMACOES — discretas, so entrada. Nada que dispute atencao com o CTA.
   O estado inicial so e aplicado quando o JS assume (classe .js no html),
   para a pagina nunca ficar invisivel se o script falhar.
   ===================================================================== */
.js .lp-revela {
  opacity: 0;
  transform: translateY(calc(14 * var(--px)));
  transition: opacity 520ms ease-out, transform 520ms cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}
.js .lp-revela.lp-revela--visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .lp-revela { opacity: 1; transform: none; }
}