/* ==========================================================================
   PÁGINA — #MÉTODOLIGAPRO sobre o design system Liga do Sofá / OXSIDE.

   Esta camada é MOBILE FIRST: cada bloco é escrito primeiro para 360–430px
   (de onde vem 90%+ do tráfego, o link na bio) e só depois ganha o desktop.
   Regra da camada: nada aqui redefine um componente por conveniência. Cada
   bloco existe por um motivo declarado, usa só tokens e vive no prefixo .lp-.

   Índice
     0. O que os componentes aplicam inline no JSX
     1. Fundamentos
     2. Peças de texto
     3. Hero: strip de credenciais + fachada de vídeo
     4. Faixa de audiência
     5. História: atos numerados
     6. Galeria de reels + alcance por plataforma
     7. Módulos e bônus
     8. Oferta: desconto e confiança
     9. Motivos: card em linha no mobile
    10. Timeline vertical no mobile
    11. FAQ nativo
    12. Fechamento e rodapé
    13. Impressão
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. O QUE OS COMPONENTES DO SISTEMA APLICAM INLINE
   No design system estes valores vivem no `style` do JSX (Timeline, GalleryTile).
   Em HTML estático precisam de um lugar — e o lugar é aqui, não no CSS dos
   componentes: assim components.css segue sendo cópia fiel do sistema.
   -------------------------------------------------------------------------- */
.ds-timeline{list-style:none;margin:0;padding:0}

/* Sprite de ícones. Não usar display:none — em alguns navegadores isso
   impede o <use> de resolver o símbolo. */
.lp-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ds-icon{display:block;flex:none}

/* Os invólucros de ícone do sistema são <span> (portanto inline) mas recebem
   margin-bottom, que o layout inline ignora — o ícone encostava no título logo
   abaixo. Torná-los bloco é o que o CSS do sistema já assume que eles são. */
.ds-support__icon,.ds-reason__icon{display:block}

/* --------------------------------------------------------------------------
   0.1 ÊNFASE MISTA  —  o recurso central da referência do cliente
   (MoneyClub / Thiago Finch)

   Na página dele, dentro de um mesmo parágrafo o tecido de ligação fica num
   tom mais baixo e o argumento fica em branco. O efeito é de leitura em dois
   tempos: quem passa o olho pula de trecho branco em trecho branco e absorve
   a tese em segundos; quem lê de fato encontra o texto inteiro.

   É o oposto do negrito comum, que destaca uma palavra. Aqui o destaque cobre
   a cláusula que carrega a informação, e é a ligação que recua.

   Nenhuma palavra do original foi alterada: o HTML só ganhou <strong> em volta
   de trechos que já existiam. 42 trechos, nos quatro atos da história, na fala
   do guia, nos cinco motivos, nos três passos e na faixa de suporte.

   A DOSE, lida do CSS da referência. Lá o parágrafo é assim:

     <p peso:400 cor:rgba(255,255,255,.9)>
       <span cor:rgba(255,255,255,.7)>Já </span>queimou dinheiro em tráfego<span
       cor:rgba(255,255,255,.7)> que não converteu;</span></p>

   Os dois trechos têm o MESMO peso — 400. A ênfase é feita só com cor, e o
   degrau é de 20 pontos de alfa (.9 contra .7). Nada de negrito: com texto
   claro sobre preto, o peso 600 engorda opticamente e o trecho passa a
   competir com o título da seção.

   Traduzido para a rampa do sistema: enfatizado --ink-000 (100%), recuado
   --ink-200 (~80%) — o mesmo degrau de 20 pontos, e o texto recuado fica
   exatamente na cor de corpo que o sistema já prescreve. Nada fica mais
   apagado do que o sistema pretende: 11,9:1 no recuado, 21:1 no enfatizado.
   -------------------------------------------------------------------------- */
.ds-act__body,.ds-prose,.ds-reason__body,.ds-step__body,.ds-support__body{color:var(--ink-200)}
/* font-weight:400 é o ponto todo: sobrescreve o bold do navegador e o 600 que
   o sistema aplica em .ds-prose strong. */
.ds-act__body strong,.ds-prose strong,.ds-reason__body strong,
.ds-step__body strong,.ds-support__body strong{color:var(--ink-000);font-weight:400}

/* --------------------------------------------------------------------------
   0.2 RECEITA DE CARD  —  lida do CSS da referência

     background-color: rgba(255,255,255,.10)   ← branco translúcido
     border: nenhuma
     border-radius: 12px · padding: 26px · gap entre cards: 11px
     box-shadow: inset 0 1px 2.8px rgba(255,255,255,.25),
                 inset 0 -1px 2.4px rgba(0,0,0,.25),
                 0 9px 17.3px rgba(0,0,0,.25),
                 0 4px 11.6px rgba(0,0,0,.25)

   O card não tem borda: quem desenha a quina de cima é o filete de luz interno,
   e quem separa o card do fundo são duas sombras deslocadas para baixo. O
   resultado é um painel que parece flutuar, em vez de um retângulo desenhado.

   Sobre o preto do sistema, rgba(255,255,255,.1) resolve em ~#1A1A1A — mais
   claro que --surface-100 (#0C0C13). É de propósito: na referência o card é
   sempre um degrau acima do fundo, nunca um quase-preto com fio.

   Compatível com a regra dos dois tratamentos do sistema: raio + sombra.
   Sem borda, sem gradiente.
   -------------------------------------------------------------------------- */
:root{
  --lp-card-bg:rgba(255,255,255,.1);
  --lp-card-bg-hover:rgba(255,255,255,.14);
  --lp-card-r:12px;
  --lp-card-lift:
    inset 0 1px 2.8px rgba(255,255,255,.25),
    inset 0 -1px 2.4px rgba(0,0,0,.25),
    0 9px 17.3px rgba(0,0,0,.25),
    0 4px 11.6px rgba(0,0,0,.25);
}
.ds-card,.lp-faq__item,.ds-step,.lp-platforms__item{
  background:var(--lp-card-bg);border:0;border-radius:var(--lp-card-r);
  box-shadow:var(--lp-card-lift)}
/* Sem borda, o hover não pode mudar cor de borda: ele clareia a superfície. */
@media (hover:hover) and (min-width:1024px){
  .ds-card--interactive:hover,.ds-step:hover{background:var(--lp-card-bg-hover);
    border:0;transform:translateY(var(--lift-card))}
}
.lp-faq__item[open]{border:0;background:var(--lp-card-bg-hover)}

/* --------------------------------------------------------------------------
   1. FUNDAMENTOS
   -------------------------------------------------------------------------- */
main{overflow-x:clip}

/* O hero precisa de ar acima do H1 sem a barra fixa (que nunca aparece
   sobre ele). No mobile o ar é menor: a dobra é curta e caríssima. */
.lp-hero{padding-top:var(--s-12)}
@media (min-width:768px){.lp-hero{padding-top:clamp(72px,9vw,104px)}}

/* Ancoragem: o alvo de #oferta não pode nascer colado na barra fixa de 60px. */
[id]{scroll-margin-top:calc(60px + var(--s-4))}

/* Sem JS o fade-up não tem quem o dispare — o conteúdo entra já visível. */
html:not(.js) .ds-reveal{opacity:1;transform:none;transition:none}

/* Feedback de toque coerente com o acento da marca. */
a,button{-webkit-tap-highlight-color:rgba(148,75,250,.18)}

/* --------------------------------------------------------------------------
   2. PEÇAS DE TEXTO
   -------------------------------------------------------------------------- */
/* O eyebrow carrega duas informações: o assunto (acento) e a origem (neutro).
   Separar por cor evita uma linha inteira de caixa-alta violeta. */
.lp-eyebrow__from{color:var(--ink-400);font-weight:500}

/* Nome próprio destacado dentro de um H2. */
.lp-name{color:var(--violet-500)}

/* Recapitulação de preço no fechamento — o valor volta em texto, nunca num
   segundo card: o card da oferta continua sendo o único bloco focal. */
.lp-recap{font-size:var(--fs-body-lg);color:var(--ink-200);margin:0 0 var(--s-8);font-variant-numeric:tabular-nums}
.lp-recap strong{color:var(--ink-000);font-weight:600}

/* Respiro entre o header de uma seção e um bloco alto (timeline, oferta, FAQ). */
.lp-gap{margin-top:var(--s-12)}

/* Dica de interação: só onde existe interação (a faixa de reels no mobile). */
.lp-hint{margin:var(--s-4) 0 0;font-size:11px;font-weight:600;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--ink-600);display:flex;align-items:center;gap:8px}
.lp-hint::after{content:"";height:1px;flex:1;background:var(--line-soft)}
@media (min-width:768px){.lp-hint{display:none}}

.ds-badge{white-space:nowrap}
.ds-offer__pay{flex-wrap:wrap;row-gap:8px}

/* --------------------------------------------------------------------------
   2.1 BOTÃO EM BANDEJA  (.lp-cta)

   Reprodução do botão da referência do cliente (MoneyClub / Thiago Finch,
   export em saveweb2zip-com-moneyclub-thiagofinch-com). Toda a geometria e a
   pilha de sombras foram lidas do CSS de lá, não estimadas:

     bandeja  padding 8px 26px 8px 8px · gap 20px · raio 20px
              fundo rgba(255,255,255,.1) · inset 0 2px 29px rgba(207,207,207,.12)
     pílula   flex:1 · padding 21px 22px · raio 12px (retângulo, não pílula)
              radial-gradient(50% 100% at 51.4% 6.1%, escuro → vivo)
              26 sombras: luz de baixo, aros laterais, linha branca no rodapé
     ícone    27x27 com dois drop-shadows

   O que mudou: as três famílias de cor. Onde o original usa laranja
   rgb(191,51,1) com aros em amarelo rgb(255,255,59), aqui entra o violeta do
   sistema com aros no seu tom claro. Os brancos e os pretos são idênticos.

   DESVIO CONSCIENTE DO SISTEMA, pedido pelo cliente. O design system pede o
   CTA "violeta sólido, sem ícone, sem gradiente, sem borda". Registrado aqui
   para não virar precedente silencioso: o degradê é de um tom só, não é o
   gradiente de assinatura violeta→ciano (que segue proibido em botão), e a
   forma se repete nos três CTAs principais, então continua reconhecível por
   repetição.
   -------------------------------------------------------------------------- */
.lp-cta{
  /* Tons derivados da rampa violeta do sistema. Ficam aqui, e não em
     tokens.css, porque existem só para este botão.

     Por que a base é mais escura que violet-500: o laranja da referência
     (191,51,1) tem luminância ~87; violet-500 tem ~115. Com a base 30% mais
     clara, os aros claros deixam de ser aro e viram lavagem — a pílula sai
     lilás e chapada. violet-600 (~91) devolve a luminância do original e os
     aros voltam a ler como luz na quina. */
  --lp-cta-core:#3B1478;   /* centro-topo do radial: violeta queimado */
  --lp-cta-edge:#8A3FEE;   /* borda do radial: entre violet-500 e 600 */
  --lp-cta-rim:236,222,255;/* aro claro — equivale ao amarelo do original */
  --lp-cta-shade:#2A0D52;  /* sombra do texto */

  display:flex;align-items:center;justify-content:center;gap:20px;
  width:100%;padding:8px 26px 8px 8px;
  background:rgba(255,255,255,.1);
  border-radius:20px;
  box-shadow:inset 0 2px 29px rgba(207,207,207,.12);
  text-decoration:none;overflow:hidden;position:relative;
  transition:box-shadow var(--dur-fast) var(--ease-out)}

.lp-cta__go{
  flex:1 1 0;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:21px 22px;border-radius:12px;
  background:radial-gradient(50% 100% at 51.4% 6.1%,var(--lp-cta-core) 0%,var(--lp-cta-edge) 100%);
  color:#fff;font-family:var(--font-body);font-weight:700;font-size:17px;
  letter-spacing:var(--track-button);line-height:1.3;text-align:center;
  text-shadow:0 3px 11px var(--lp-cta-shade);
  /* A pilha da referência, tom por tom: luz difusa vinda de baixo, micro-brilho
     no topo, aros nas duas laterais, brilho de acento no rodapé, linha branca
     dura na base e uma sombra externa curta. É o que dá o volume.

     As geometrias (offset, blur, spread) são as do original, sem arredondar.
     As opacidades das camadas MAIS ABERTAS foram reduzidas: no original o aro
     é amarelo sobre laranja — salto de matiz, então cobrir área grande ainda
     lê como luz. Aqui é lilás sobre violeta, salto só de claridade: a mesma
     opacidade em 34px de blur vira véu. As camadas justas ficam intactas,
     porque são elas que desenham a quina. */
  box-shadow:
    inset 0 -.74px 2.23px -.68px rgba(255,255,255,.23),
    inset 0 -1.82px 5.47px -1.36px rgba(255,255,255,.22),
    inset 0 -3.46px 10.37px -2.04px rgba(255,255,255,.18),
    inset 0 -6.03px 18.1px -2.71px rgba(255,255,255,.13),
    inset 0 -10.5px 31.5px -3.39px rgba(255,255,255,.09),
    inset 0 -19.23px 57.69px -4.07px rgba(255,255,255,.05),
    inset 0 .24px .24px -1.88px rgba(255,255,255,.69),
    inset 0 2px 2px -3.75px rgba(255,255,255,.25),
    inset .72px .4px .82px -.94px rgba(var(--lp-cta-rim),.32),
    inset 2.17px 1.21px 2.49px -1.88px rgba(var(--lp-cta-rim),.22),
    inset 5.74px 3.19px 6.57px -2.81px rgba(var(--lp-cta-rim),.1),
    inset 18px 10px 20.59px -3.75px rgba(var(--lp-cta-rim),.06),
    inset -.72px .36px .8px -.94px rgba(var(--lp-cta-rim),.42),
    inset -2.17px 1.09px 2.43px -1.88px rgba(var(--lp-cta-rim),.3),
    inset -5.74px 2.87px 6.42px -2.81px rgba(var(--lp-cta-rim),.14),
    inset -18px 9px 20.12px -3.75px rgba(var(--lp-cta-rim),.08),
    inset 0 -.8px .56px -.71px rgba(var(--lp-cta-rim),.72),
    inset 0 -2.05px 1.43px -1.42px rgba(var(--lp-cta-rim),.6),
    inset 0 -4.1px 2.87px -2.13px rgba(var(--lp-cta-rim),.44),
    inset 0 -7.78px 5.45px -2.83px rgba(var(--lp-cta-rim),.28),
    inset 0 -15.47px 10.83px -3.54px rgba(var(--lp-cta-rim),.14),
    inset 0 -34px 23.8px -4.25px rgba(var(--lp-cta-rim),.05),
    inset 0 -3px 3.8px 0 rgba(255,255,255,.9),
    inset 0 1px 2.8px 0 rgba(255,255,255,.25),
    0 4px 4px 0 rgba(0,0,0,.25);
  transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out)}

/* Brilho interno de acento e trama de pontos, as duas camadas que a referência
   sobrepõe à pílula em color-dodge e lighten. A trama é o mesmo ladrilho de
   96px do original (quatro pontos), inline como data URI. */
.lp-cta__go::before,.lp-cta__go::after{content:"";position:absolute;pointer-events:none}
.lp-cta__go::before{inset:-54px -82px;z-index:0;mix-blend-mode:color-dodge;opacity:.2;
  background:radial-gradient(50% 50% at 50% 50%,#4B1C8C 0%,transparent 100%)}
.lp-cta__go::after{inset:0;z-index:1;mix-blend-mode:lighten;opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M24 20a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0 48a4 4 0 1 1 0 8 4 4 0 0 1 0-8m48 0a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0-48a4 4 0 1 1 0 8 4 4 0 0 1 0-8' fill='%23fff'/%3E%3C/svg%3E");
  background-size:16.5px auto;background-repeat:repeat}
/* O rótulo fica acima das duas camadas. */
.lp-cta__label{position:relative;z-index:2}

.lp-cta__mark{flex:none;width:27px;height:27px;display:grid;place-items:center;
  color:var(--ink-000);
  filter:drop-shadow(0 5px 8px rgba(var(--lp-cta-rim),.39)) drop-shadow(0 2px 2px rgba(0,0,0,.7));
  transition:transform var(--dur-fast) var(--ease-out)}
.lp-cta__mark .ds-icon{width:100%;height:100%}

@media (hover:hover){
  .lp-cta:hover{box-shadow:inset 0 2px 29px rgba(207,207,207,.2),0 0 42px rgba(148,75,250,.3)}
  .lp-cta:hover .lp-cta__go{filter:brightness(1.07);transform:translateY(var(--lift-button))}
  .lp-cta:hover .lp-cta__mark{transform:translate(2px,-2px)}
}
.lp-cta:active .lp-cta__go{transform:translateY(0);filter:brightness(.95)}
/* O foco por teclado marca o botão inteiro, não só a pílula. */
.lp-cta:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* O único brilho pulsante da página é o CTA da oferta — e ele pulsa na
   bandeja, não na pílula: mexer nas 26 sombras da pílula faria o volume
   piscar junto. */
.lp-cta--breathing{animation:lp-breathe 8s var(--ease-out) infinite}
@keyframes lp-breathe{
  0%,100%{box-shadow:inset 0 2px 29px rgba(207,207,207,.12),0 0 32px rgba(148,75,250,.22)}
  50%{box-shadow:inset 0 2px 29px rgba(207,207,207,.18),0 0 56px rgba(148,75,250,.4)}
}
@media (prefers-reduced-motion:reduce){.lp-cta--breathing{animation:none}}

/* Variante alta, para o fechamento da página. */
.lp-cta--lg .lp-cta__go{padding:25px 26px;font-size:18px}

@media (max-width:809px){
  /* Os mesmos valores que a referência usa no breakpoint móvel dela. */
  .lp-cta{gap:10px;padding:8px}
  .lp-cta__go,.lp-cta--lg .lp-cta__go{padding:19px 14px;font-size:clamp(14px,3.7vw,17px)}
}
@media (max-width:374px){
  /* Abaixo de 375px a marca rouba largura demais do rótulo: sai a marca e
     sobra a pílula inteira, que é o que importa. */
  .lp-cta__mark{display:none}
}

/* --------------------------------------------------------------------------
   3. HERO
   -------------------------------------------------------------------------- */
/* A linha de apoio do hero é mais curta que a coluna de texto corrido: ela
   completa o H1, não abre um parágrafo. E encosta no título — o H1 já traz
   24px de respiro embaixo. */
.lp-hero .ds-section-header__lede{margin-top:0;max-width:44ch}

/* No mobile o H1 quebrava no meio do trecho em gradiente ("…dos 45 /
   milhões de views…"), partindo em duas linhas o que precisa ser lido como
   um número só. Em bloco, o trecho ganha as próprias linhas e o gradiente
   volta a percorrer uma unidade inteira de sentido. */
@media (max-width:767px){
  .lp-hero h1 .ds-grad{display:block}
}

/* 3.1 Strip de credenciais.
   Substitui a fileira de chips, que quebrava em 2+1 no mobile e deixava um
   órfão. Três colunas fixas dentro de uma única moldura: nunca quebra,
   nunca fica ragged, e lê como um bloco de especificação — não como tags. */
.lp-specs{display:grid;grid-template-columns:repeat(3,1fr);margin:var(--s-8) 0 0;padding:0;
  list-style:none;border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.lp-specs__item{display:flex;flex-direction:column;gap:3px;padding:12px 10px;
  border-left:1px solid var(--line-soft)}
.lp-specs__item:first-child{border-left:0}
.lp-specs__value{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,4.6vw,21px);
  line-height:1.1;letter-spacing:-.015em;color:var(--ink-000);font-variant-numeric:tabular-nums}
.lp-specs__label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.25;color:var(--ink-400)}
@media (min-width:768px){
  .lp-specs__item{padding:14px var(--s-4)}
  .lp-specs__label{font-size:11px;letter-spacing:.1em}
}

/* 3.2 Fachada de vídeo.
   O still original é um frame de vídeo com legenda queimada no rodapé. A
   moldura mostra os 82% superiores do quadro para removê-la, mantendo o rosto,
   a extratora e a parede da Liga do Sofá. */
.lp-facade__img{height:140%;object-position:50% 0}
@media (min-width:768px){
  /* Na coluna de 5/12 do desktop o quadro é maior: 122% já tira a legenda e
     mantém o sofá laranja e a parede da marca dentro do enquadramento. */
  .lp-facade__img{height:122%}
}

/* O scrim padrão só escurece o topo; aqui ele também precisa assentar a base
   do quadro para o micro-label de 11px não competir com a textura da foto. */
.lp-facade__scrim{background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.26) 48%,rgba(0,0,0,.72) 100%)}

/* Botão de play menor no mobile: 76px sobre um quadro de 190px de altura
   cobriria o rosto do KEEL, que é justamente o que faz o clique acontecer. */
.ds-facade__play{width:60px;height:60px}
@media (min-width:768px){.ds-facade__play{width:76px;height:76px}}

/* O label ganha o mesmo fio do eyebrow: a fachada passa a fazer parte do
   sistema tipográfico em vez de flutuar como legenda solta. Sem `right`, ele
   se dimensiona pelo conteúdo e nunca colide com a marca do outro canto. */
.ds-facade__label{left:var(--s-4);right:auto;bottom:14px;display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.1em;color:var(--ink-200)}
.ds-facade__label::before{content:"";width:20px;height:1px;background:var(--violet-500);flex:none}
@media (min-width:768px){
  .ds-facade__label{left:var(--s-6);bottom:var(--s-6);font-size:var(--fs-label);letter-spacing:var(--track-caps)}
  .ds-facade__label::before{width:24px}
}

/* Player nativo (quando CONFIG.videoFile está preenchido). Diferente de uma
   foto, um vídeo nunca pode ser recortado: contain, sobre preto, para que uma
   fonte com proporção diferente de 16:9 apareça inteira em vez de cortar o
   rosto de quem está falando. */
.ds-facade video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#000;border:0}

/* Onde o clique vai parar, no canto oposto ao label. Escondido abaixo de
   600px: os dois juntos não cabem na base de um quadro de 335px. */
.lp-facade__meta{display:none;position:absolute;right:var(--s-6);bottom:var(--s-6);
  align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-400)}
@media (min-width:600px){.lp-facade__meta{display:flex}}

/* 3.3 Hero tolerante ao número de blocos.
   O .ds-split do sistema espera exatamente dois filhos. Se o strip de
   credenciais e o CTA forem escritos como filhos diretos do split (em vez de
   ficarem dentro da coluna de texto), o grid de 7/5 vira 2x2 e o CTA cai na
   coluna estreita, embaixo do vídeo. Estas regras seguram a leitura numa
   coluna só: texto, números e ação à esquerda; vídeo à direita, atravessando
   as linhas. Valem tanto com dois filhos quanto com quatro.
   Elas só disparam em filho DIRETO — com o markup aninhado, não fazem nada. */
.lp-hero .ds-split > .lp-specs,
.lp-hero .ds-split > .ds-cta{margin-top:0}

@media (min-width:1024px){
  .lp-hero .ds-split{align-items:start}
  .lp-hero .ds-split > .lp-specs,
  .lp-hero .ds-split > .ds-cta{grid-column:1}
  /* O vídeo é o segundo foco do hero: atravessa a altura toda e fica
     centrado, para que a leitura comece sempre pelo título. */
  .lp-hero .ds-split > .lp-hero__media{grid-column:2;grid-row:1 / span 3;align-self:center}
}

/* --------------------------------------------------------------------------
   4. FAIXA DE AUDIÊNCIA
   O ícone da plataforma foi para DENTRO do label. Quando ele ficava acima do
   número, as cifras de colunas vizinhas nasciam em alturas diferentes e a
   faixa perdia a linha de base — o defeito mais visível da versão anterior.
   Agora os quatro valores alinham e as células formam uma grade com fios.
   -------------------------------------------------------------------------- */
.lp-stats{grid-template-columns:repeat(2,1fr);gap:0}
.lp-stats .ds-stat{align-items:flex-start;text-align:left;gap:6px;
  padding:var(--s-6) var(--s-4);border-left:0;border-top:1px solid var(--line-soft)}
.lp-stats .ds-stat:nth-child(-n+2){border-top:0}
.lp-stats .ds-stat:nth-child(odd){padding-left:0;border-right:1px solid var(--line-soft)}
.lp-stats .ds-stat:nth-child(even){padding-right:0}
.lp-stats .ds-stat__value{font-size:clamp(28px,7.4vw,40px)}
.lp-stats .ds-stat__label{display:flex;align-items:center;gap:8px;color:var(--ink-400)}
.lp-stats .ds-stat__label .ds-icon{color:var(--cyan-500)}
@media (min-width:768px){
  .lp-stats{grid-template-columns:repeat(4,1fr)}
  /* Reseta as regras nth-child do mobile antes de aplicar a grade de 4 colunas,
     senão a paridade par/ímpar continua zerando o padding do lado errado. */
  .lp-stats .ds-stat,
  .lp-stats .ds-stat:nth-child(odd),
  .lp-stats .ds-stat:nth-child(even){padding:0 var(--s-6);border-top:0;border-right:0;
    border-left:1px solid var(--line-soft)}
  .lp-stats .ds-stat:first-child{padding-left:0;border-left:0}
  .lp-stats .ds-stat:last-child{padding-right:0}
}

/* Rótulo da faixa. Uma faixa de números sem nome é um enfeite; com nome,
   é informação. Fica sobre um fio para amarrar a faixa à grade da página. */
.lp-bandlabel{display:flex;align-items:center;gap:12px;margin:0 0 var(--s-6);
  font-size:11px;font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-400)}
.lp-bandlabel::after{content:"";height:1px;flex:1;background:var(--line-soft)}

/* --------------------------------------------------------------------------
   5. HISTÓRIA
   -------------------------------------------------------------------------- */
/* O ato ganha um índice tabular antes do rótulo: quatro atos numerados leem
   como capítulos, não como quatro parágrafos parecidos empilhados. */
.ds-act__label{display:flex;align-items:baseline;gap:10px}
.lp-act__index{font-family:var(--font-display);font-weight:700;font-size:14px;
  color:var(--violet-500);font-variant-numeric:tabular-nums;letter-spacing:0;flex:none}

/* No mobile a foto vem antes do texto e não precisa dos 4:5 inteiros:
   um 4:5 de 335px de largura ocupa 419px de altura, meia tela só de imagem. */
@media (max-width:767px){
  .lp-portrait--story .ds-frame{aspect-ratio:3/2}
  .lp-portrait--story img{object-position:50% 22%}
}

/* --------------------------------------------------------------------------
   6. GALERIA DE REELS
   Os três quadros vêm de um único arquivo (a grade fixada do Instagram,
   1290x563). Cada tile mostra um painel de 430px do sprite — uma requisição,
   três tiles, zero recompressão do material do cliente.
   A proporção é 3:4 e não 9:16 porque o texto queimado no quadro ("Sofá da
   Barbie de Chernobyl", "7,2 mi") não sobrevive a um corte de 9:16.
   -------------------------------------------------------------------------- */
.lp-gallery{display:grid;gap:var(--s-4);grid-template-columns:repeat(3,1fr)}

.lp-reel{position:relative;margin:0;overflow:hidden;border-radius:var(--r-md);aspect-ratio:3/4;
  background:var(--surface-100);box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:transform var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (min-width:1024px){.lp-reel:hover{transform:scale(1.02)}}
/* height:100% + width:auto faz o sprite escalar pela altura; o deslocamento
   horizontal em % da largura do tile seleciona o painel e joga a emenda fora. */
.lp-reel__img{position:absolute;top:0;height:100%;width:auto;max-width:none}
.lp-reel--1 .lp-reel__img{left:-.9%}
.lp-reel--2 .lp-reel__img{left:-102.8%}
.lp-reel--3 .lp-reel__img{left:-204.6%}

/* Mobile: três tiles empilhados custariam duas telas e meia de rolagem.
   Viram uma faixa com snap, sangrando nas laterais — o terceiro tile cortado
   é a própria affordance de arrastar. */
@media (max-width:767px){
  .lp-gallery{display:flex;gap:var(--s-2);overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--sec-x) * -1);padding-inline:var(--sec-x);
    scroll-padding-inline:var(--sec-x);scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch}
  .lp-gallery::-webkit-scrollbar{display:none}
  .lp-gallery > *{flex:0 0 66%;scroll-snap-align:center}
}

/* Alcance por plataforma. Na referência, todo dado solto ganha caixa própria —
   nada de número flutuando sobre o fundo. Três cards em vez de três linhas de
   lista: o mesmo conteúdo passa a ler como três fatos, não como uma legenda. */
.lp-platforms{display:grid;grid-template-columns:1fr;gap:var(--s-3);
  margin:var(--s-8) 0 0;padding:0;list-style:none;font-variant-numeric:tabular-nums}
.lp-platforms__item{display:flex;align-items:center;gap:var(--s-3);padding:20px 22px}
.lp-platforms__icon{color:var(--ink-400);flex:none}
.lp-platforms__value{font-family:var(--font-display);font-weight:700;font-size:17px;
  letter-spacing:-.01em;color:var(--ink-000);flex:none}
.lp-platforms__label{font-size:13px;color:var(--ink-400);font-weight:500}
@media (min-width:768px){
  .lp-platforms{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
  .lp-platforms__item{flex-direction:column;align-items:flex-start;gap:var(--s-2);
    padding:var(--s-6)}
  .lp-platforms__value{font-size:24px}
}

/* --------------------------------------------------------------------------
   7. MÓDULOS E BÔNUS
   -------------------------------------------------------------------------- */
/* O numeral do módulo é o grafismo do card. No mobile ele precisa recuar:
   56px atrás de um título de 19px em 335px de largura vira ruído. */
@media (max-width:767px){
  .ds-module__num{font-size:40px;top:12px;right:16px}
  .ds-module__title{padding-right:52px}
}

/* Rodapé do card de módulo: um fio e a contagem de tópicos. Fecha o card em
   vez de deixar a lista terminando no vazio. */
.lp-module__foot{display:flex;align-items:center;gap:10px;margin-top:var(--s-6);
  padding-top:var(--s-4);border-top:1px solid var(--line-soft);
  font-size:11px;font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-600)}

/* A aula secreta ocupa a largura das duas colunas: é conteúdo do método, mas
   não é um módulo — e a forma precisa dizer isso sem virar um bloco focal
   (o card da oferta continua sendo o único). */
.lp-bonus{display:grid;gap:var(--s-6)}
@media (min-width:1024px){
  .lp-bonus-slot{grid-column:1 / -1}
  .lp-bonus{grid-template-columns:5fr 7fr;gap:var(--s-16);align-items:start}
}
.lp-bonus__title{margin:var(--s-4) 0 0}
.lp-bonus__lede{margin:var(--s-3) 0 0;color:var(--ink-200);max-width:42ch}

/* --------------------------------------------------------------------------
   8. OFERTA
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   8.1 CARD DA OFERTA
   Estrutura calcada na referência do cliente (MoneyClub / Thiago Finch):
   tudo centrado, título curto no topo, lista de entregáveis com selo à
   esquerda e etiqueta à direita, painel de preço rebaixado, botão em bandeja
   e uma linha fina de conforto no rodapé. Só as cores e a tipografia mudam —
   são as do sistema Liga do Sofá / OXSIDE.
   -------------------------------------------------------------------------- */
/* O card focal da referência é opaco (não translúcido como os demais) e leva
   o mesmo filete de luz interno mais uma sombra longa e deslocada. Aqui isso
   se soma ao brilho violeta que o sistema reserva para a oferta. */
.lp-offer{text-align:center;box-shadow:
  inset 0 1px 2.8px rgba(255,255,255,.25),
  inset 0 -1px 2.4px rgba(0,0,0,.25),
  -8px 27px 44.5px rgba(0,0,0,.78),
  var(--glow-focal)}

.lp-offer__title{margin:0 0 var(--s-6);font-family:var(--font-body);font-weight:600;
  font-size:var(--fs-label);letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--violet-400)}

/* Lista de entregáveis. Três colunas: selo · nome · etiqueta.
   O nome ocupa o vão, então a etiqueta fica sempre colada à direita e as
   quatro etiquetas formam uma coluna, mesmo com nomes de tamanhos diferentes. */
.lp-items{display:grid;gap:0;margin:0;padding:0;list-style:none;text-align:left}
.lp-item{display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:var(--s-3);padding:14px 0;border-top:1px solid var(--line-soft)}
.lp-item:first-child{border-top:0;padding-top:0}
.lp-item:last-child{padding-bottom:0}
/* Selo preenchido em ciano: o registro de verificação do sistema. O check é
   vazado na cor do card, como na referência. */
.lp-item__mark{color:var(--cyan-500);margin-top:1px}
.lp-item__name{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-200)}
.lp-item__name strong{color:var(--ink-000);font-weight:600}
.lp-item__tag{margin-top:3px;padding:5px 10px;border-radius:var(--r-full);
  background:rgba(255,255,255,.04);border:1px solid var(--line-soft);color:var(--ink-400);
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  line-height:1;white-space:nowrap}
.lp-item__tag--accent{background:var(--cyan-wash);border-color:rgba(34,211,238,.2);
  color:var(--cyan-400)}
@media (max-width:359px){
  /* Só abaixo de 360px a etiqueta espremeria o nome a ponto de quebrar errado.
     Em 360/390/414 — praticamente todo celular em uso — ela permanece. */
  .lp-item{grid-template-columns:auto 1fr}
  .lp-item__tag{display:none}
}

/* Painel de preço rebaixado. O preto absoluto dentro do cinza do card faz o
   número afundar no cartão em vez de flutuar sobre ele — um tratamento só
   (raio), sem borda e sem sombra, como manda o sistema. */
.lp-pricebox{background:var(--bg-000);border-radius:var(--r-sm);
  padding:var(--s-6);margin:var(--s-6) 0}
.lp-price{gap:0;align-items:center}
.lp-price__from{margin:0 0 var(--s-3);font-size:var(--fs-body);color:var(--strike)}
.lp-price__from s{text-decoration-thickness:1px;text-underline-offset:2px}
/* "12x de" empilhado acima do número. Alinhado pela linha de base ao lado de
   um número de 68px, o prefixo nasce lá embaixo e parece caído. */
.lp-price__prefix{margin:0;font-size:var(--fs-body-lg);font-weight:500;color:var(--ink-200);
  line-height:1.2}
.lp-price__value{margin:2px 0 0;font-family:var(--font-display);font-weight:800;
  font-size:var(--fs-price);line-height:1;letter-spacing:-.03em}
/* O cifrão menor que os dígitos: o olho lê o número, não a moeda. */
.lp-price__cur{font-size:.56em;letter-spacing:0}
.lp-price__cash{margin:var(--s-3) 0 0;font-size:var(--fs-body);color:var(--ink-200)}
.lp-price__cash strong{color:var(--ink-000);font-weight:600}

/* Rodapé do card: segurança e bandeiras atrás de um fio, fora do fluxo
   principal. São informação de conforto, não argumento de venda. */
.lp-offer__foot{margin-top:var(--s-6);padding-top:var(--s-4);
  border-top:1px solid var(--line-soft)}
.lp-offer__foot .ds-offer__secure{margin-top:0;justify-content:center}
.lp-offer__foot .ds-offer__pay{justify-content:center}

/* O desconto sai de aritmética sobre os dois preços do cliente
   (1 − 297/1149 = 74%). Ciano porque é verificação de um fato, não uma ação. */
.lp-save{display:inline-flex;align-items:center;margin-left:8px;padding:4px 8px;border-radius:6px;
  background:var(--cyan-wash);border:1px solid rgba(34,211,238,.2);color:var(--cyan-400);
  font-size:11px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;
  vertical-align:middle;line-height:1}

/* Cabeçalho do card: badge à esquerda, o que está incluído à direita. */

/* No mobile o card focal encosta nas laterais da seção; 24px de padding
   interno contra 20px de padding de seção deixa a borda respirando. */
@media (max-width:767px){
  .ds-offer{padding:var(--s-6)}
  .ds-offer__head{margin-bottom:var(--s-4)}
  .ds-price__value{font-size:clamp(40px,13vw,56px)}
  /* Cinco bandeiras em caixinhas não cabem em 300px: "Hipercard" caía sozinha
     numa segunda linha. Viram uma linha separada por pontos — a mesma forma
     que o sistema já usa em toda microcopy. */
  .ds-offer__pay{gap:0;font-size:10px;letter-spacing:.1em}
  .ds-offer__pay span{padding:0;border:0}
  .ds-offer__pay span + span::before{content:"·";margin:0 7px;color:var(--ink-600)}
}

/* --------------------------------------------------------------------------
   9. MOTIVOS
   Cinco cards empilhados no mobile geram cinco blocos idênticos de 200px.
   Em linha — ícone à esquerda, título e texto à direita — a seção cabe em uma
   tela e meia e ganha uma coluna óptica de leitura.
   -------------------------------------------------------------------------- */
/* O card de argumento da referência é uma linha: ícone de 24px à esquerda,
   texto à direita, gap de 20px. Vale em qualquer largura — empilhar o ícone
   acima do título só criava uma terceira variação de forma sem motivo. */
.ds-reason{display:grid;grid-template-columns:auto 1fr;gap:0 20px;align-items:start}
.ds-reason__icon{grid-row:1;grid-column:1;margin-bottom:0;padding-top:2px}
.ds-reason__icon .ds-icon{width:24px;height:24px}
.ds-reason__title{grid-row:1;grid-column:2;margin:0;font-size:18px}
.ds-reason__body{grid-row:2;grid-column:2;margin-top:var(--s-2)}
.ds-grid-3 .ds-card{padding:26px}

/* --------------------------------------------------------------------------
   10. TIMELINE
   Na referência, cada passo é um card — e é melhor assim: com o passo dentro
   de uma caixa, o numeral não precisa mais do fio conector para dizer que
   existe uma ordem, porque a própria sequência de caixas já diz. O conector
   horizontal do sistema sai (ele atravessaria os cards).
   -------------------------------------------------------------------------- */
.ds-step{flex-direction:column;align-items:flex-start;gap:var(--s-4);padding:26px;height:100%;
  transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
/* Dentro de um card o anel de 6px na cor da página não faz sentido: o numeral
   passa a viver sobre a superfície do card. */
.ds-step__num,.ds-section--alt .ds-step__num{background:rgba(0,0,0,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ds-step:not(:last-child)::after{display:none}

/* --------------------------------------------------------------------------
   11. FAQ
   <details>/<summary> nativos: acordeão acessível, navegável por teclado,
   funcional sem uma linha de JavaScript.
   -------------------------------------------------------------------------- */
/* A lista fica na medida de leitura, alinhada à esquerda com o resto da
   página — não centralizada, que quebraria a coluna do grid editorial. */
.lp-faq{display:grid;gap:var(--s-3);max-width:var(--measure-prose)}
.lp-faq__item{background:var(--surface-100);border:1px solid var(--line-soft);
  border-radius:var(--r-md);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-out)}
.lp-faq__item[open]{border-color:var(--line)}
.lp-faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) var(--s-6);min-height:64px;cursor:pointer;list-style:none;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-body);line-height:1.45;color:var(--ink-000)}
.lp-faq__q::-webkit-details-marker{display:none}
.lp-faq__q:hover{color:var(--violet-400)}
/* Sinal de + que vira − ao abrir. Duas barras de 1px, sem ícone e sem fonte. */
.lp-faq__sign{position:relative;flex:none;width:20px;height:20px;margin-top:2px}
.lp-faq__sign::before,.lp-faq__sign::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--violet-500);transition:transform var(--dur-fast) var(--ease-out)}
.lp-faq__sign::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.lp-faq__sign::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.lp-faq__item[open] .lp-faq__sign::after{transform:translate(-50%,-50%) rotate(90deg)}
.lp-faq__a{margin:0;padding:0 var(--s-6) var(--s-6);color:var(--ink-200);max-width:60ch}
@media (min-width:768px){
  .lp-faq__q{padding:var(--s-4) var(--s-8);font-size:var(--fs-body-lg)}
  .lp-faq__a{padding:0 var(--s-8) var(--s-6)}
}

/* --------------------------------------------------------------------------
   12. FECHAMENTO E RODAPÉ
   -------------------------------------------------------------------------- */
.lp-final{text-align:center}
/* Linha de confiança do fechamento — espelha a do card da oferta para que a
   última coisa que o leitor vê antes de clicar seja a mesma garantia. */
.lp-trust{display:flex;align-items:center;justify-content:center;gap:8px;margin:var(--s-6) 0 0;
  font-size:var(--fs-label);color:var(--ink-600)}
.lp-trust .ds-icon{color:var(--cyan-500)}

/* Retrato de suporte: o recorte 3:2 precisa começar no topo para não cortar
   os três rostos da colagem. */
.lp-img--top{object-position:50% 0}

/* A faixa de suporte tem pouca informação — por isso é uma faixa. No desktop,
   uma foto de 465px de largura devolvia 310px de altura a um bloco de três
   linhas de texto, e a faixa deixava de ser faixa. Limitar a foto mantém a
   densidade que a seção deveria ter. */
@media (min-width:1024px){
  .ds-support{gap:var(--s-12)}
  .ds-support .ds-portrait{width:100%;max-width:400px;margin-left:auto}
}

/* Alvos de toque de 44px, sangria e folga para a barra de compra fixa (68px). */
@media (max-width:1023px){
  .ds-footer__links{gap:0 var(--s-6)}
  .ds-footer__links a{display:inline-flex;align-items:center;min-height:44px}
  .ds-footer__social{margin-top:var(--s-4)}
  .ds-wordmark{padding:4px 0;min-height:44px;justify-content:center}
  .ds-footer .ds-wordmark{min-height:0;padding:0}
  .ds-footer{padding-bottom:124px}
  .ds-textlink{min-height:48px}
}
@supports (padding:env(safe-area-inset-bottom)){
  @media (max-width:1023px){.ds-footer{padding-bottom:calc(124px + env(safe-area-inset-bottom))}}
}
@media (max-width:767px){
  .ds-act{padding-left:var(--s-4)}
  .ds-offer__pay{font-size:10px;gap:8px}
  .ds-section-header__lede,.ds-prose{max-width:none}
  /* O selo do retrato não pode sangrar fora da moldura em tela estreita. */
  .ds-portrait__seal{left:var(--s-2);bottom:var(--s-2);font-size:10px;letter-spacing:.1em}
  /* A barra do topo no mobile é só marca + ação curta: o label longo do
     desktop empurraria o wordmark para fora. */
  .ds-topbar .ds-btn{padding:10px 18px;min-height:40px;font-size:13px}
  .ds-topbar__inner .ds-wordmark{justify-content:flex-start;min-height:0;padding:0}
  .ds-topbar .ds-wordmark__sign{display:none}
}

/* --------------------------------------------------------------------------
   13. IMPRESSÃO — o cliente imprime a página para aprovar em reunião.
   -------------------------------------------------------------------------- */
@media print{
  .ds-topbar,.ds-mobilebar,.ds-skip,.ds-facade__play,.lp-hint{display:none!important}
  .ds-wash{display:none}
  .ds-section{padding-block:var(--s-8);break-inside:avoid}
  .ds-reveal{opacity:1!important;transform:none!important}
  .lp-faq__a{display:block!important}
}