/* ══════════════════════════════════════════════════════════════
   TOKENS
   Preto e branco puros + rampa neutra. A ÚNICA cor da página é o
   azul da capa do PDF (amostrado dela: #39558E / #35476F) — usado
   com parcimônia, para o olho sempre voltar ao produto.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#000; --ink:#fff;
  --g-90:#0A0A0A; --g-80:#141414; --g-60:#3A3A3A;
  --g-40:#7A7A7A; --g-30:#9C9C9C; --g-10:#E6E6E6;
  --navy:#39558E; --navy-deep:#35476F;
  /* lápis-lazúli: puxado do azul da capa, um passo mais saturado e
     fundo. O navy da capa direto no botão ficaria apagado sobre o
     painel branco do CTA — precisa de mais peso para virar ação. */
  --lapis:#26619C; --lapis-deep:#1C4878;
  --win:#0F7A3D; --loss:#C2261C;

  /* Poppins em tudo. O token --mono continua existindo porque
     vários blocos (preço, rótulos) usam o tratamento de caixa alta e
     espacejamento largo — mudou a fonte, não o gesto. */
  --font:"Poppins",system-ui,-apple-system,sans-serif;
  --mono:"Poppins",system-ui,-apple-system,sans-serif;
  --container:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-weight:400; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,p{margin:0}
::selection{background:var(--navy); color:#fff}

.container{max-width:var(--container); margin-inline:auto; padding-inline:1.5rem}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:#fff; color:#000; padding:.7rem 1rem; font-weight:600;
}
.skip-link:focus{left:.5rem; top:.5rem}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px}

/* ══════════ BOTÕES ══════════ */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  padding:.85rem 1.4rem; border-radius:2px; border:1px solid transparent;
  transition:transform .35s var(--ease), background .3s, color .3s, box-shadow .35s var(--ease);
  will-change:transform;
}
.btn b{font-weight:800}
.btn-solid{background:#fff; color:#000}
.btn-solid:hover{transform:translateY(-2px); box-shadow:0 10px 30px -12px rgba(255,255,255,.5)}
.btn-invert{background:#000; color:#fff}
.btn-invert:hover{transform:translateY(-2px); box-shadow:0 14px 40px -14px rgba(0,0,0,.8)}

/* O botão de compra é o único elemento da página inteira pintado com
   a cor do produto. Nada mais compete com ele, então a cor sozinha já
   diz onde clicar — sem borda, sem seta piscando, sem contorno. */
.btn-buy{background:var(--lapis); color:#fff}
.btn-buy:hover{
  background:var(--lapis-deep); transform:translateY(-2px);
  box-shadow:0 14px 40px -14px rgba(38,97,156,.85);
}
.btn-sm{padding:.6rem 1rem; font-size:.85rem}
.btn-lg{padding:1.15rem 2rem; font-size:1.05rem}
.btn-arrow{transition:transform .35s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(5px)}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
/* A hero é medida pela tela, não pelo conteúdo: manchete e fileira de
   produtos têm que caber juntas em uma dobra só.

   Ela é BRANCA de ponta a ponta. Os recortes dos produtos vêm com fundo
   transparente e nasceram em foto de estúdio sobre branco — no preto
   eles pediam sombra pesada para não virar adesivo. No branco, não
   pedem nada. O preto continua sendo o registro do resto da página. */
.hero{
  position:relative; overflow:hidden;
  background:#fff; color:#000;
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(1.5rem,4vw,3rem);
}

/* grade de fundo: uma camada MAIOR que a tela, movida por transform —
   animar background-position repintaria a tela toda a cada frame */
.hero-grid{
  position:absolute; left:-25%; top:-25%; width:150%; height:150%;
  /* na hero branca a grade tem que ser quase invisível: é textura,
     não desenho */
  background-image:linear-gradient(#EDEDED 1px,transparent 1px),
                   linear-gradient(90deg,#EDEDED 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 25%,#000 15%,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 25%,#000 15%,transparent 72%);
  animation:drift 34s linear infinite;
}
@keyframes drift{to{transform:translate3d(64px,64px,0)}}

/* O halo azul só existia para o fundo preto — sobre branco vira uma
   mancha suja. Fica desligado; o <div> continua no HTML caso um dia a
   hero volte a ser escura. */
.hero-glow{display:none}

.hero-grain{
  position:absolute; inset:0; opacity:.035; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-wide{position:relative; z-index:2; padding-inline:clamp(1.5rem,4vw,3rem); text-align:center}

/* A manchete deixou de ser cartaz de tela cheia: menor, ela divide a
   dobra com a fileira de produtos. O piso de 1.7rem é o que manda no
   celular — é ele que dá o tamanho da manchete abaixo de ~450px. O
   tracking afrouxou junto: a Poppins é mais larga e redonda que a
   Inter e fecha demais com -.055em. */
.poster{
  /* O terceiro termo é o que garante as duas linhas: a linha mais longa
     ("Sua renda extra está") mede ~10,15x o tamanho da fonte, então
     dividir a largura útil por 10,4 devolve o maior corpo que ainda
     cabe numa linha. Ele só entra abaixo de ~340px de tela — de 360px
     para cima o piso de 1.7rem continua mandando. */
  font-size:min(clamp(1.7rem,5.6vw,4.5rem),9.6vh,calc((100vw - 3.6rem) / 10.4));
  line-height:.98; font-weight:800;
  letter-spacing:-.03em; text-transform:none;
}
.pl{display:block; animation:rise .9s var(--ease) both}
.pl-1{animation-delay:.05s}
.pl-2{animation-delay:.13s}
@keyframes rise{from{opacity:0; transform:translateY(28px)}}

/* O painel branco cortado em diagonal saiu junto com o fundo preto:
   branco sobre branco não desenha nada. O <div> segue no HTML porque
   é ele que devolve o corte se a hero voltar a ser escura. */
.hero-stage{position:relative; margin-top:clamp(1.2rem,3.5vw,2.6rem)}
.panel-shape{display:none}
.panel-inner{
  position:relative; display:grid; grid-template-columns:1fr;
  justify-items:center; text-align:center;
  gap:clamp(1.5rem,4vw,3rem);
  padding-block:clamp(3rem,7vw,4.5rem) clamp(1.5rem,3.5vw,2.5rem);
  color:#000;
}
.panel-sub{
  font-size:clamp(1.5rem,3.6vw,2.6rem); font-weight:800;
  letter-spacing:-.026em; line-height:1.02;
}
.panel-figure{position:relative; justify-self:center; order:-1}
/* O mockup 3D já traz perspectiva e sombra assadas na imagem. Por isso
   aqui NÃO há box-shadow (desenharia um retângulo em volta do PNG
   transparente) nem rotação forte — só um giro de alguns graus, para
   o objeto reagir ao mouse sem brigar com a perspectiva que ele já tem. */
.book-tilt{
  position:relative; width:min(420px,70vw);
  /* o livro rompe a borda de cima do painel: é ele que fura o corte */
  margin-top:clamp(-13rem,-24vw,-8rem);
  transform:perspective(1600px) rotateY(-4deg) rotateX(1.5deg);
  transition:transform .7s var(--ease);
  animation:bookIn 1.1s var(--ease) .3s both;
}
@keyframes bookIn{from{opacity:0; transform:perspective(1600px) rotateY(-11deg) translateY(40px)}}
.book-tilt:hover{transform:perspective(1600px) rotateY(-1deg) rotateX(0deg) translateY(-8px)}
.book-img{width:100%; height:auto; aspect-ratio:460/686}

/* ══════════════════════════════════════════════════════════════
   HERO · A FILEIRA DE PRODUTOS
   Onde estava a capa do PDF agora estão as quatro coisas que se
   compra e se revende, apoiadas em UMA linha de base só. A frase
   mora no meio delas, como um quinto item da fileira: é ela que
   parte os quatro em dois pares e segura o centro.

   O tamanho de cada uma vem do --w no HTML, não de um width fixo:
   é o peso dela na fileira. Assim a proporção entre os quatro
   objetos é sempre a mesma, de 360px a 1600px de tela.
   ══════════════════════════════════════════════════════════════ */
.prods{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; justify-content:center;
  /* Espaço curto entre os objetos: eles são um grupo, não quatro
     itens de uma lista. Como cada um cresce por flex-basis 0, o que
     sai do vão entra no tamanho deles. */
  gap:clamp(.15rem,.7vw,.6rem);
  width:100%;
  /* A altura da fileira sai da largura dela (o iPhone é o mais alto,
     ~1/4 da largura total). Em tela baixa esse teto em vh é o que
     impede a fileira de empurrar tudo para fora da dobra. */
  max-width:min(100%,118vh); margin-inline:auto;
  margin-top:clamp(.5rem,2vw,1.5rem);
}
.prod{
  margin:0; flex:var(--w) 1 0;
  display:flex; align-items:flex-end; justify-content:center;
  animation:rise .9s var(--ease) both;
}
/* nth-of-type e não nth-child: a frase é um <p> no meio dos <figure> */
.prod:nth-of-type(1){animation-delay:.30s}
.prod:nth-of-type(2){animation-delay:.38s}
.prod:nth-of-type(3){animation-delay:.54s}
.prod:nth-of-type(4){animation-delay:.62s}
.prod img{
  width:100%; height:auto;
  /* --up tira o objeto da linha de base comum e o sobe em direção ao
     título. Vale para qualquer um dos quatro; hoje o ps5 e o iphone
     usam. O par no 2x2 do celular é o --up-m, logo abaixo. */
  margin-bottom:var(--up,0);
  /* sombra curta e rasa: só o bastante para os objetos pousarem na
     linha de base em vez de flutuar no branco */
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.13));
  transition:transform .5s var(--ease);
}
.prod:hover img{transform:translateY(-8px)}

/* A FRASE, no meio da fileira. Encostada na mesma linha de base dos
   produtos, com um respiro embaixo para não parecer legenda de foto. */
.prods .panel-sub{
  flex:1.2 1 0; align-self:flex-end; text-align:center; text-wrap:balance;
  /* o vão apertado é dos objetos; a frase precisa de ar dos dois lados
     para não encostar no macbook e no ps5 */
  padding-inline:clamp(.5rem,1.4vw,1.1rem);
  margin:0 0 clamp(.6rem,2.2vw,1.8rem);
  font-size:clamp(.95rem,1.75vw,1.45rem); line-height:1.14;
  animation:rise .9s var(--ease) .46s both;
}

/* No celular a fileira de quatro vira 2x2: com quatro em linha o
   iPhone ficaria com 30px de largura. */
@media (max-width:640px){
  .prods{flex-wrap:wrap; column-gap:.4rem; row-gap:1.1rem; margin-top:.5rem}
  /* o --m repete no 2x2 a variação de tamanho da fileira larga */
  .prod{flex:0 0 calc(50% - .3rem); height:calc(8.2rem * var(--m,1))}
  /* no 2x2 o objeto sobe dentro de uma célula de altura fixa: metade
     do deslocamento da fileira larga já encosta na linha de cima, e é
     esse o padrão. Quem precisa de outra medida no celular — porque
     ali o vizinho é outro — declara --up-m e escapa da conta. */
  .prod img{width:auto; max-width:100%; max-height:100%;
            margin-bottom:var(--up-m, calc(var(--up,0) * .42))}
  /* a frase ocupa a linha inteira entre os dois pares */
  .prods .panel-sub{flex:0 0 100%; margin:.2rem 0; font-size:clamp(1.05rem,4.4vw,1.5rem)}
}

/* ══════════════════════════════════════════════════════════════
   2 · O RESPIRO
   A seção NÃO fecha. O padding de baixo é grande de propósito:
   é nele que o painel da seção 4 sobe por dentro (ver .note).
   ══════════════════════════════════════════════════════════════ */
.breath{
  position:relative; background:#000;
  padding-block:clamp(5rem,14vw,9rem) clamp(9rem,22vw,15rem);
}
.breath-inner{position:relative; z-index:1; text-align:center}
.poster-h{
  font-size:clamp(2.8rem,11vw,8rem); line-height:.9; font-weight:900;
  letter-spacing:-.03em;
}
/* Esta linha é a carga útil da seção, não uma legenda do título.
   Antes ela era cinza e pequena ao lado de uma manchete de 8rem —
   lia como rodapé do título e sumia. Agora é branca, tem corpo
   próprio e ganha um fio azul que se desenha quando ela entra:
   o fio dá um ponto de partida para o olho sem gritar mais alto
   que a manchete. */
/* Sem o fio, o que separa esta linha da manchete é só o espaço —
   por isso ele fica curto de propósito: perto o bastante para ler
   como resposta da pergunta, não como bloco novo. */
.breath-line{
  margin:clamp(1rem,2.4vw,1.6rem) auto 0;
  font-size:clamp(1.35rem,3.4vw,2.35rem); font-weight:600;
  color:#fff; letter-spacing:-.024em; line-height:1.18;
  max-width:20ch;
}

/* ══════════════════════════════════════════════════════════════
   3 · O CADERNO — a ponte visual (opção C)
   margin-top negativo faz o painel branco NASCER dentro da seção 3.
   O leitor vê um pedaço de coisa nova na dobra e rola sozinho:
   nenhuma seta, nenhum "role para baixo", nenhuma palavra a mais.
   ══════════════════════════════════════════════════════════════ */
.note{
  position:relative; z-index:2; background:#fff; color:#000;
  margin-top:clamp(-11rem,-20vw,-7rem);
  padding-block:clamp(4.5rem,11vw,7.5rem);
  clip-path:polygon(0 6%,100% 0,100% 100%,0 100%);
}
.note-inner{max-width:820px; text-align:center}
.note-h{
  font-size:clamp(2.2rem,6vw,4rem); font-weight:900; letter-spacing:-.03em;
  line-height:.95;
}
.note-lead{
  margin:clamp(.7rem,1.6vw,1rem) auto 0; max-width:44ch;
  font-size:clamp(1.15rem,2.2vw,1.6rem); font-weight:500;
  /* mais escuro que o cinza de apoio, mas ainda abaixo do preto do
     título — se fosse preto puro, disputaria a hierarquia com ele */
  color:#242424; letter-spacing:-.025em; line-height:1.35;
}

/* amostra grátis: a prova que paga a curiosidade da seção 3 */
.sample{margin:clamp(2.5rem,6vw,4rem) 0 0; padding:0}
/* Dois prints reais lado a lado. O que faz o trabalho é o contraste
   entre eles, então os dois cards são idênticos em tudo menos na
   etiqueta — qualquer diferença de tratamento entregaria a resposta
   antes de o leitor comparar. */
.sample-pair{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2.6vw,2rem); align-items:start;
}
.shot{position:relative}
.shot-tag{
  display:inline-block; margin-bottom:.7rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.3rem .6rem;
}
.is-bad .shot-tag{background:var(--loss); color:#fff}
.is-good .shot-tag{background:var(--win); color:#fff}
.shot img{
  width:100%; height:auto; border:1px solid var(--g-10);
  /* o print é interface, não foto: canto reto e fio fino sustentam
     melhor do que sombra, que faria parecer card decorativo */
  transition:transform .5s var(--ease);
}
.shot:hover img{transform:translateY(-4px)}
.shot-why{
  margin-top:.8rem; font-size:clamp(.88rem,1.5vw,1rem);
  color:var(--g-60); letter-spacing:-.015em; line-height:1.35;
}
.shot-why b{font-weight:700}
.is-bad .shot-why b{color:var(--loss)}
.is-good .shot-why b{color:var(--win)}
.sample-note{margin-top:clamp(1.4rem,3vw,2rem); color:var(--g-60); font-size:.98rem; letter-spacing:-.01em}

@media (max-width:700px){
  .sample-pair{grid-template-columns:1fr; gap:2rem}
}


/* ══════════════════════════════════════════════════════════════
   4 · O QUE DISSERAM
   Preto entre dois brancos (o caderno e o CTA): sem este corte as
   duas seções viram uma só.

   Os prints correm numa faixa horizontal com scroll-snap. É isso que
   impede a seção de crescer: com 3 ou com 10 prints a altura é a
   mesma, e no celular o vizinho fica espiando na borda — que é o
   convite para arrastar, sem precisar de seta nem de bolinha.
   ══════════════════════════════════════════════════════════════ */
.fb{background:#000; padding-block:clamp(4rem,10vw,7rem)}
.fb-h{
  text-align:center; line-height:1;
  font-size:clamp(2rem,6vw,4rem); font-weight:900; letter-spacing:-.03em;
}
.fb-strip{
  margin-top:clamp(2rem,4.5vw,3.2rem);
  display:flex; gap:clamp(.7rem,1.6vw,1.1rem);

  /* ── POR QUE A FAIXA NÃO ROLA NA VERTICAL ──────────────────────
     Duas coisas juntas prendiam o dedo aqui em vez de rolar a página,
     e o site parecia travado bem em cima do depoimento:

     1) declarar só overflow-x:auto não deixa o eixo Y em `visible` —
        o CSS troca `visible` por `auto` no outro eixo. Por isso o
        overflow-y vem escrito.
     2) o .reveal ficava em CADA cartão, e cartão ainda não revelado
        carrega translateY(24px). Os que estavam fora da faixa
        empurravam o conteúdo 24px para baixo e criavam rolagem
        vertical de verdade lá dentro. O .reveal agora é um só, na
        faixa inteira (ver o HTML) — nenhum cartão desloca nada.
     ────────────────────────────────────────────────────────────── */
  overflow-x:auto; overflow-y:hidden;
  /* (nada de touch-action:pan-x aqui: ele proibiria o gesto vertical
     que começa em cima da faixa, que é justamente o gesto de rolar a
     página — seria trocar um travamento por outro) */
  overscroll-behavior-x:contain;
  /* proximity e não mandatory: com mandatory qualquer encostada no
     eixo X puxava o cartão de volta, o que soma à sensação de que a
     página está lutando com o dedo */
  scroll-snap-type:x proximity;
  /* cabem os três lado a lado no desktop; safe evita o corte da
     primeira quando a faixa passa a rolar */
  justify-content:safe center;
  padding-block:.2rem .6rem;
  scrollbar-width:none;
}
.fb-strip::-webkit-scrollbar{display:none}
.fb-shot{
  margin:0; flex:0 0 clamp(15rem,78vw,21rem);
  scroll-snap-align:center;
  /* proporção fixa para os três: é ela que mantém a faixa numa linha
     reta mesmo com prints de formatos diferentes */
  aspect-ratio:5/4;
  border-radius:14px; overflow:hidden;
  /* a cor vem do próprio print (--bg no HTML), então a sobra da
     proporção não lê como moldura */
  background:var(--bg,var(--g-90));
  /* fio no lugar de borda: dois dos prints são pretos e sumiriam no
     fundo preto sem um contorno */
  box-shadow:0 0 0 1px rgba(255,255,255,.1);
}
.fb-shot img{
  display:block; width:100%; height:100%;
  /* contain, não cover: o print aparece inteiro, nada é cortado */
  object-fit:contain;
}

/* O CARTÃO VAZIO, no fim da fila. Mesmo tamanho dos prints, mas
   tracejado e sem fundo: ele é o lugar que ainda não foi preenchido.
   É link — leva ao preço, que é a seção seguinte. */
.fb-next{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8rem; text-align:center; padding:1.2rem;
  background:transparent; box-shadow:none;
  border:2px dashed rgba(255,255,255,.34);
  transition:border-color .4s var(--ease), background .4s var(--ease),
             transform .4s var(--ease);
}
.fb-next-t{
  font-size:clamp(1.15rem,2.2vw,1.5rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.15;
}
.fb-next-arrow{font-size:1.5rem; line-height:1; transition:transform .4s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .fb-next:hover{
    border-color:#fff; background:rgba(255,255,255,.05); transform:translateY(-4px);
  }
  .fb-next:hover .fb-next-arrow{transform:translateY(5px)}
}

/* Da largura de tablet para cima os quatro cartões dividem a linha e
   encolhem juntos: assim o cartão do convite está sempre visível, sem
   ninguém precisar arrastar para descobrir que ele existe. */
@media (min-width:821px){
  .fb-shot{flex:1 1 0; min-width:0; max-width:17rem}
}

@media (max-width:820px){
  /* a faixa sangra até a borda da tela: é o que faz o próximo print
     aparecer pela metade */
  .fb-strip{
    justify-content:flex-start;
    margin-inline:-1.5rem; padding-inline:1.5rem;
    scroll-padding-inline:1.5rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   5 · CTA — o painel É a ponta do funil
   ══════════════════════════════════════════════════════════════ */
.cta{position:relative; padding-block:clamp(4rem,10vw,6rem) clamp(7rem,16vw,11rem); overflow:hidden}
.cta-shape{
  position:absolute; inset:0; background:#fff;
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);
}
.cta-inner{position:relative; color:#000; text-align:center}
/* Âncora em cima, preço real embaixo. O olho lê de cima para baixo,
   então nessa ordem ele vê a queda acontecer — lado a lado, os dois
   números competiam e a queda virava comparação, não desconto. */
.price{display:flex; flex-direction:column; align-items:center; gap:.35rem}
.price-old{
  font-family:var(--mono); font-size:clamp(1.2rem,2.9vw,1.85rem);
  color:var(--g-40); text-decoration-thickness:2px;
}
.price-new{font-size:clamp(3rem,10vw,6rem); font-weight:900; letter-spacing:-.032em; line-height:1}
.cta-h{
  margin-top:.6rem; font-size:clamp(1.4rem,4vw,2.6rem);
  font-weight:900; letter-spacing:-.028em; line-height:1.02;
}
.btn-lg{margin-top:clamp(1.6rem,4vw,2.4rem)}
/* Único elemento abaixo do botão: o desvio para /sobre/, para quem
   quer saber como o pagamento funciona antes de pagar. Cinza, corpo
   pequeno e sem peso — ele não pode competir com o botão. */
.cta-about{margin-top:clamp(1.9rem,4.5vw,2.8rem); text-align:center; position:relative; z-index:1}
.cta-about a{
  font-size:.95rem; font-weight:600; color:var(--g-40); letter-spacing:-.01em;
  box-shadow:inset 0 -1px 0 var(--g-10); transition:color .25s, box-shadow .25s;
}
.cta-about a:hover{color:#000; box-shadow:inset 0 -1px 0 #000}

/* ══════════════════════════════════════════════════════════════
   RODAPÉ
   O nome em contorno vazado é o gesto próprio deste bloco: sem ele
   o rodapé seria só uma pilha de letra miúda. Fica atrás do texto,
   cortado pela borda de cima, para ler como marca-d'água e não como
   título. (O "quem escreveu" mudou para /sobre/.)
   ══════════════════════════════════════════════════════════════ */
.foot{
  position:relative; background:#000; overflow:hidden;
  padding-block:clamp(3.5rem,9vw,6rem) 6rem;
  border-top:1px solid var(--g-80);
}
/* O espaço que separa o nome vazado do bloco legal é PADDING daqui,
   não margem do filho: com um filho só, a margem dele colapsaria para
   fora e o nome cairia em cima do texto. */
.foot-inner{position:relative; padding-top:clamp(5.5rem,14vw,9.5rem)}
.who-ghost{
  position:absolute; left:50%; transform:translateX(-50%); top:-.46em; z-index:0;
  font-size:clamp(5rem,17vw,14rem); font-weight:900; letter-spacing:-.035em;
  color:transparent; -webkit-text-stroke:1px var(--g-80); pointer-events:none;
  white-space:nowrap;
}
/* Sem a bio, o bloco legal é o único conteúdo do rodapé — a margem
   grande é o que impede o nome vazado de cair em cima dele. */
.foot-base{
  position:relative; z-index:1; display:grid; gap:.9rem;
  justify-items:center; text-align:center;
  padding-top:clamp(1.6rem,4vw,2.2rem); border-top:1px solid var(--g-80);
}
.foot-brand{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase;
}
.foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem}
.foot-links a{font-size:.9rem; color:var(--g-30); transition:color .25s}
.foot-links a:hover{color:#fff}
.foot-legal{font-size:.76rem; color:var(--g-60); letter-spacing:-.005em}

/* ══════════ BARRA FIXA MOBILE ══════════ */
/* Antes só existia no celular. No desktop a página ficava sem
   nenhum caminho de compra até o fim — e é aqui que o preço passa a
   aparecer antes do CTA, sem precisar de mais texto na página. */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex;
  align-items:center; justify-content:center; gap:1.2rem;
  padding:.7rem 1.5rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.86); backdrop-filter:blur(3px);
  border-top:1px solid var(--g-80);
  transform:translateY(120%); transition:transform .45s var(--ease);
}
.mbar.is-on{transform:none}
.mbar-price{font-family:var(--mono); font-size:.8rem}
.mbar-note{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--g-40);
}
@media (max-width:700px){.mbar-note{display:none}}
.mbar-price s{color:var(--g-40); margin-right:.4rem}
.mbar-price b{font-size:1rem}

/* ══════════ BARRA DE CONTAGEM (topo) ══════════
   Escassez REAL: a oferta é de data comemorativa e termina junto com
   o dia 27/08. O prazo é absoluto (`data-fim`, com fuso explícito),
   não por visitante — recarregar a página não devolve tempo, e à
   meia-noite a barra assume o estado de encerrada em vez de voltar
   a contar. Contador que reseta é a única coisa que transformaria
   escassez verdadeira em propaganda enganosa.

   Vermelho é deliberado: é o único lugar da página que sai do acento
   do nicho. A barra não é identidade, é aviso — e precisa disputar
   atenção com a hero sem se confundir com ela.

   ATENÇÃO: o CTA mostra o preço. Mudou o preço? Ele também muda aqui
   (ver a lista de lugares no ESTADO.md). */
:root{ --alerta:#C81E1E; --alerta-fundo:#A81616; --cbar-h:3.9rem }

body{ padding-top:var(--cbar-h) }
.hero{ min-height:calc(100svh - var(--cbar-h)) }

.cbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--cbar-h); display:flex; align-items:center; justify-content:center;
  background:var(--alerta); color:#fff;
  font-family:var(--font); font-weight:700;
  box-shadow:0 2px 12px -4px rgba(0,0,0,.45);
}
.cbar-in{
  display:flex; align-items:center; gap:.85rem;
  padding-inline:1rem;
}
.cbar-txt{
  font-size:.92rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}

/* ── o relógio é o peso da barra ──
   tabular-nums trava a largura do dígito: sem isso o "1" é mais
   estreito que o "8" e a barra treme a cada segundo. As chapas
   escuras separam os pares sem precisar de mais texto. */
.cbar-time{
  display:flex; align-items:baseline; gap:.2rem;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  white-space:nowrap;
}
.cbar-time b{
  background:var(--alerta-fundo); border-radius:.34rem;
  padding:.24rem .45rem .28rem;
  font-size:1.34rem; font-weight:800; letter-spacing:.01em; line-height:1;
}
.cbar-time i{ font-style:normal; font-size:.78rem; font-weight:700; opacity:.8; margin-right:.24rem }

/* ── os centésimos ──
   Moram DENTRO da chapa dos segundos, menores, para o olho ler
   "34,87" como um número só correndo. São reais (não são enfeite
   que gira solto), e por isso somem junto com o resto quando o
   prazo vence. Repintam a ~60fps via rAF: um nó de texto só, com
   largura travada por tabular-nums, então não custa reflow.
   No prefers-reduced-motion não são renderizados — número piscando
   60 vezes por segundo é exatamente o que essa preferência pede
   para não existir. */
.cbar-ms{
  font-size:.76rem; font-weight:800; opacity:.7;
  margin-left:.02em; letter-spacing:0;
}
.cbar-time i:last-child{ margin-right:0 }

/* ── mini CTA: chapa branca sobre o vermelho ──
   Usa data-checkout, então herda o destino e o InitiateCheckout dos
   outros botões de compra: um lugar só decide para onde vai. */
.cbar-cta{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff; color:var(--alerta);
  font-size:.88rem; font-weight:800; letter-spacing:.01em;
  padding:.55rem 1.05rem; border-radius:999px; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cbar-cta:hover{ transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(0,0,0,.5) }
.cbar-cta span{ transition:transform .25s var(--ease) }
.cbar-cta:hover span{ transform:translateX(3px) }

.cbar-dot{
  width:.5rem; height:.5rem; border-radius:50%; background:#fff;
  flex:0 0 auto; animation:cbar-pulse 1.6s var(--ease) infinite;
}
@keyframes cbar-pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.3; transform:scale(.78)} }

/* estado encerrado: perde o vermelho de alarme, o pulso, o relógio e
   o CTA. Não há mais nada a apressar — e vender com contador parado
   em zero seria o mesmo que contador falso. */
.cbar.is-over{ background:#3A1414 }
.cbar.is-over .cbar-dot,
.cbar.is-over .cbar-time,
.cbar.is-over .cbar-cta{ display:none }
.cbar.is-over .cbar-txt{ font-size:.8rem; letter-spacing:.05em }

/* ── três larguras de rótulo ──
   O relógio e o CTA são intocáveis: são a urgência e a ação. Quem
   cede espaço é a frase, em três degraus, porque com o relógio
   grande a versão média já quebrava em três linhas num iPhone.
   O CTA também encurta — o preço é o argumento, o verbo é enfeite. */
.cbar-medio, .cbar-curto, .cta-curto{ display:none }

@media (max-width:860px){
  .cbar-longo{ display:none }
  .cbar-medio{ display:inline }
  .cbar-in{ gap:.55rem; padding-inline:.7rem }
  .cbar-txt{ font-size:.72rem; letter-spacing:.04em }
}
@media (max-width:600px){
  :root{ --cbar-h:3.55rem }
  .cbar-medio{ display:none }
  .cbar-curto{ display:inline }
  .cta-longo{ display:none }
  .cta-curto{ display:inline }
  .cbar-in{ gap:.5rem; padding-inline:.6rem }
  .cbar-txt{ font-size:.66rem; letter-spacing:.05em }
  .cbar-time b{ font-size:1.06rem; padding:.16rem .3rem .2rem }
  .cbar-time i{ font-size:.64rem; margin-right:.16rem }
  .cbar-ms{ font-size:.62rem }
  .cbar-cta{ font-size:.78rem; padding:.44rem .72rem }
}
/* abaixo disso nem "Só hoje" cabe sem espremer o relógio */
@media (max-width:330px){
  .cbar-txt{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .cbar-dot{ animation:none }
  .cbar-ms{ display:none }
  .cbar-cta, .cbar-cta span{ transition:none }
  .cbar-cta:hover{ transform:none }
}

/* usada pela linha viva do contador; não existia no template */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ══════════ SCROLL-REVEAL ══════════ */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .book-tilt{margin-top:clamp(-10rem,-28vw,-5rem); transform:perspective(1600px) rotateY(-3deg)}
  .who-ghost{top:-.34em}
}
@media (max-width:560px){
  .cta-shape{clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%)}
}

/* ══════════════════════════════════════════════════════════════
   MOVIMENTO REDUZIDO — conferido efeito por efeito, não uma regra só
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .hero-grid,.hero-glow{animation:none}
  .pl,.book-tilt,.prod,.prods .panel-sub{animation:none; opacity:1; transform:none}
  .book-tilt{transform:perspective(1600px) rotateY(-4deg) rotateX(1.5deg)}
  .reveal{opacity:1; transform:none; transition:none}
  .btn,.book-tilt,.mbar,.shot img,.prod img,.fb-next,.fb-next-arrow{transition:none}
  .prod:hover img{transform:none}
  .btn:hover{transform:none}
}


/* ══════════════════════════════════════════════════════════════
   BANNER DE CONSENTIMENTO
   Compacto e no rodapé da tela. Enquanto ele está aberto a barra de
   compra recolhe — dois blocos fixos no mesmo canto se sobreporiam.
   ══════════════════════════════════════════════════════════════ */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.9rem 1.4rem;
  padding:1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
  background:#0A0A0A; border-top:1px solid var(--g-80);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.consent.is-on{transform:none}
.consent-t{
  max-width:62ch; font-size:.84rem; color:var(--g-30);
  letter-spacing:-.01em; line-height:1.4;
}
.consent-b{display:flex; gap:.6rem; flex:none}
/* mesmo tamanho e mesmo peso: só o preenchimento diferencia */
.consent-no{background:transparent; color:#fff; border-color:var(--g-60)}
.consent-no:hover{border-color:#fff}
.consent-yes{background:#fff; color:#000}
.consent-yes:hover{transform:translateY(-2px)}
body.has-consent-open .mbar{transform:translateY(120%)}

@media (prefers-reduced-motion:reduce){
  .consent{transition:none}
  .consent-yes:hover{transform:none}
}