/* ============================================================
   OSHARKS · QUADRILOGIA
   Editorial cinematográfico · Azul chumbo · Tipografia forte
   Tema travado em escuro. Acento único: ouro.
   As quatro cores de pilar existem SOMENTE como identidade de
   volume (01 amarelo, 02 laranja, 03 prata, 04 ouro).
   ============================================================ */

/* ---------- Fontes self-hosted ---------- */
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/anton-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/fonts/montserrat-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  /* superfícies: uma única família fria de azul chumbo */
  --ink:#04080D;
  --ink-2:#070E16;
  --ink-3:#0A1420;

  /* texto */
  --paper:#ECEDEE;
  --paper-dim:rgba(236,237,238,.64);
  --paper-mute:rgba(236,237,238,.40);

  /* linhas: sempre hairline, nunca caixa */
  --line:rgba(236,237,238,.11);
  --line-strong:rgba(236,237,238,.24);
  --glass-border:var(--line); /* alias legado usado pelas páginas de livro */

  /* acento ÚNICO da interface */
  --gold:#C9A227;
  --gold-lift:#E0BC4E;
  --gold-deep:#8A6E17;

  /* identidade de volume (nunca usadas como acento de UI) */
  --p1:#FFC400;
  --p2:#FF6A00;
  --p3:#C7C9C9;
  --p4:#C9A227;
  --yellow:var(--p1);
  --ash:var(--paper);

  --font-display:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* sistema de raio: praticamente reto. Editorial, não SaaS. */
  --r-sm:2px;
  --r-md:3px;

  /* ritmo vertical */
  --gap-section:clamp(6.5rem,14vh,11rem);

  /* escala z documentada */
  --z-base:1;
  --z-stage-copy:20;
  --z-grain:90;
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  /* Sem scroll-behavior:smooth. Ele entra em conflito com o pin do
     ScrollTrigger e desalinha as âncoras. A rolagem suave é feita
     pelo ScrollToPlugin, que recalcula os pins antes de ir. */
  overflow-x:clip;
  scroll-padding-top:2rem;
  background:var(--ink);
  color-scheme:dark;
}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.62;
  font-weight:400;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* grão fixo: nunca em container que rola */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:var(--z-grain);
  opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
strong{font-weight:700;color:var(--paper)}

::selection{background:var(--gold);color:#0A0A0A}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.skip-link{
  position:absolute;
  left:1rem;
  top:-4rem;
  z-index:calc(var(--z-grain) + 10);
  background:var(--gold);
  color:#0A0A0A;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.75rem 1.2rem;
  border-radius:var(--r-sm);
  transition:top .2s ease;
}
.skip-link:focus{top:1rem}

.container{width:min(1240px,90vw);margin-inline:auto}
.container.narrow{width:min(760px,90vw)}
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- Tipografia ---------- */
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  /* PT-BR usa Á É Í Ó Ú em caixa alta: o acento sobe acima da altura
     de caixa, então a entrelinha nunca desce abaixo de 1.04 no display,
     senão o acento encosta na linha de cima. */
  line-height:1.04;
  letter-spacing:-.005em;
  color:#fff;
  text-wrap:balance;
}
h1,.d-xl{font-size:clamp(2.9rem,7.4vw,6.4rem)}
h2,.d-lg{font-size:clamp(2.1rem,4.9vw,4.1rem)}
h3,.d-md{font-size:clamp(1.45rem,2.6vw,2.15rem)}
.d-sm{font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.06}

p{text-wrap:pretty}

.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.4rem;
}

.lead{
  font-size:clamp(1.02rem,1.5vw,1.2rem);
  line-height:1.65;
  color:var(--paper-dim);
  max-width:60ch;
}
.lead strong{color:var(--paper)}

.microcopy{
  font-size:.78rem;
  line-height:1.6;
  color:var(--paper-mute);
  letter-spacing:.01em;
}
.microcopy a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.microcopy a:hover{color:var(--gold-lift)}

.num{font-variant-numeric:tabular-nums}

.txt-gold{color:var(--gold)}
.txt-p1{color:var(--p1)}
.txt-p2{color:var(--p2)}
.txt-p3{color:var(--p3)}
.txt-p4{color:var(--p4)}
/* aliases legados das páginas internas */
.txt-yellow{color:var(--p1)}
.txt-orange{color:var(--p2)}
.txt-silver{color:var(--p3)}

/* ---------- Botões ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:1rem 1.85rem;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .12s ease;
}
.btn-lg{padding:1.15rem 2.3rem;font-size:.85rem}
.btn-sm{padding:.72rem 1.2rem;font-size:.72rem;letter-spacing:.11em}
.btn:active{transform:translateY(1px)}

/* primária: ouro sólido, texto quase preto (contraste ~9:1) */
.btn-primary,.btn-gold,.btn-accent{
  background:var(--gold);
  color:#0A0A0A;
  border-color:var(--gold);
}
.btn-primary:hover,.btn-gold:hover,.btn-accent:hover{
  background:var(--gold-lift);
  border-color:var(--gold-lift);
}

/* secundária: contorno, texto claro (contraste ~14:1) */
.btn-ghost{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--paper);
}
.btn-ghost:hover{border-color:var(--paper);background:rgba(236,237,238,.06)}

/* Pulso do botão de compra. Um anel de ouro que sai da borda e
   se apaga: chama o olho para o único passo que interessa sem
   mexer no tamanho do alvo de toque. Só nos CTAs de checkout. */
.btn-pulse{position:relative;isolation:isolate}
.btn-pulse::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  border:1px solid var(--gold);
  pointer-events:none;
  animation:pulse-ring 2.8s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(1);opacity:.6}
  62%{transform:scale(1.16);opacity:0}
  100%{transform:scale(1.16);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .btn-pulse::before{display:none}
}

.link-gold{
  color:var(--gold);
  font-weight:600;
  border-bottom:1px solid rgba(201,162,39,.4);
  padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease;
}
.link-gold:hover{color:var(--gold-lift);border-color:var(--gold-lift)}

/* ============================================================
   ATO I · SEQUÊNCIA CGI CONTROLADA PELO SCROLL
   ============================================================ */
.hero{position:relative}

.stage{
  position:relative;
  height:100dvh;
  min-height:560px;
  overflow:hidden;
  background:var(--ink);
}

/* O CGI é panorâmico no desktop e retrato no celular, então o palco
   é sempre sangria total e o canvas recorta em "cover". */
.stage-media{
  position:absolute;
  inset:0;
  z-index:var(--z-base);
}
.stage-canvas{
  width:100%;
  height:100%;
  display:block;
  background:var(--ink);
}
.stage-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .35s ease;
}
.stage.use-video .stage-video{opacity:1}
.stage.use-video .stage-canvas,.stage.use-video .stage-poster{opacity:0}

/* poster: primeira imagem pintada, some quando o canvas assume */
.stage-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .5s ease;
}
.stage.is-ready .stage-poster{opacity:0}

/* Véu de leitura. O texto vive na base, então o escurecimento é por
   baixo: o miolo do quadro fica limpo para os livros. */
.stage-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(4,8,13,.62) 0%,
      rgba(4,8,13,.12) 16%,
      transparent 42%,
      rgba(4,8,13,.30) 74%,
      rgba(4,8,13,.90) 97%),
    radial-gradient(122% 86% at 50% 44%,transparent 46%,rgba(4,8,13,.52) 100%);
}

/* --- camada de blur radial central (ativa só na janela 3s-4s) --- */
.stage-fx{
  position:absolute;
  inset:0;
  z-index:calc(var(--z-stage-copy) - 6);
  pointer-events:none;
  opacity:0;
  backdrop-filter:blur(var(--fx-blur,0px));
  -webkit-backdrop-filter:blur(var(--fx-blur,0px));
  /* transparente no miolo, opaco nas bordas: leitura de blur radial */
  -webkit-mask-image:radial-gradient(58% 42% at 50% 50%,transparent 0%,rgba(0,0,0,.55) 46%,#000 82%);
  mask-image:radial-gradient(58% 42% at 50% 50%,transparent 0%,rgba(0,0,0,.55) 46%,#000 82%);
}

/* escurecimento curto que dá contraste ao texto da transição */
.stage-scrim{
  position:absolute;
  inset:0;
  z-index:calc(var(--z-stage-copy) - 5);
  pointer-events:none;
  opacity:0;
  background:radial-gradient(80% 60% at 50% 50%,rgba(4,8,13,.32) 0%,rgba(4,8,13,.86) 100%);
}

/* --- foreground desfocado atravessando a composição --- */
/* Objeto fora de foco cruzando o primeiro plano. Precisa ler como
   volume escuro atravessando a lente, não como mancha colorida:
   por isso passa baixo na composição, dessaturado e escurecido. */
.stage-fg{
  position:absolute;
  top:70%;
  left:50%;
  z-index:calc(var(--z-stage-copy) - 4);
  width:min(34vw,420px);
  aspect-ratio:1/1;
  pointer-events:none;
  opacity:0;
  filter:blur(38px) saturate(.28) brightness(.42);
  will-change:transform,opacity;
}
.stage-fg img{width:100%;height:100%;object-fit:contain}

/* --- camadas de texto --- */
.stage-copy{
  position:absolute;
  inset:0;
  z-index:var(--z-stage-copy);
  display:grid;
  align-items:center;
  pointer-events:none;
}
.stage-copy .container{width:min(1240px,90vw)}

.layer{
  grid-area:1/1;
  align-self:center;
  opacity:0;
  will-change:opacity,transform;
}
.layer > .container{pointer-events:none}
.layer a,.layer button{pointer-events:auto}

/* Abertura do desktop: uma faixa baixa e compacta, apoiada num fio.
   Fica fora do caminho do CGI em vez de ocupar meia tela. */
.layer-bar{align-self:end}
.hero-bar{
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);
  align-items:center;
  gap:clamp(1.2rem,3vw,3rem);
  padding-top:1.05rem;
  padding-bottom:clamp(2.2rem,5vh,3.2rem);
  border-top:1px solid var(--line-strong);
}
.hero-bar h1{
  font-size:clamp(1.5rem,2.4vw,2.3rem);
  line-height:1.06;
  white-space:nowrap;
}
.hero-bar .eyebrow{
  font-size:.62rem;
  letter-spacing:.3em;
  margin-bottom:.4rem;
}
.hero-sub{
  font-size:clamp(.86rem,1vw,.95rem);
  line-height:1.5;
  color:var(--paper-dim);
  max-width:46ch;
  margin:0;
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.7rem}

/* linha única de respiro entre atos da sequência */
.beat{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.8rem,3.6vw,3.2rem);
  line-height:1;
  color:#fff;
  max-width:16ch;
}
.beat span{color:var(--gold)}

/* Texto exclusivo da transição de blur. Ocupa a largura toda do palco
   e centraliza pelo próprio contêiner: limitar a largura da camada
   deslocava a frase para a direita. */
.layer-flash{
  justify-self:stretch;
  align-self:center;
  width:100%;
  text-align:center;
}
.layer-flash .container{width:min(1240px,90vw);margin-inline:auto}
.flash-line{
  margin-inline:auto;
  max-width:20ch;
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(2rem,5.6vw,4.6rem);
  line-height:.96;
  color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.85);
}

.layer-final{max-width:min(48ch,44vw)}

/* Fecho da sequência: centralizado no desktop, sobre o fundo
   desfocado que o data-veil liga em JS. */
.layer-close{align-self:center}
.layer-close .layer-final{
  max-width:min(56ch,68vw);
  margin-inline:auto;
  text-align:center;
}
.layer-close h1{
  font-size:clamp(2.4rem,5.6vw,4.8rem);
  margin-bottom:1.3rem;
}
.layer-close .eyebrow{margin-bottom:1rem}
.layer-close .hero-sub{
  margin-inline:auto;
  margin-bottom:2rem;
  max-width:46ch;
  font-size:clamp(.95rem,1.15vw,1.08rem);
  color:var(--paper-dim);
}
.layer-close .final-pillars{justify-content:center;margin-bottom:2.2rem}
.layer-close .hero-ctas{justify-content:center}

.final-pillars{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.4rem;
  margin-bottom:1.8rem;
}
.final-pillars li{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.final-pillars li::before{
  content:"";
  display:inline-block;
  width:14px;height:1px;
  background:var(--pc,var(--gold));
  vertical-align:middle;
  margin-right:.6rem;
}

/* barra de progresso da sequência: informa posição, não decora */
.stage-progress{
  position:absolute;
  left:8vw;right:8vw;
  bottom:2.2rem;
  height:1px;
  background:var(--line);
  z-index:var(--z-stage-copy);
}
.stage-progress i{
  display:block;
  height:100%;
  width:0;
  background:var(--gold);
  transform-origin:left center;
}

/* fallback estático de movimento reduzido */
.stage-still{display:none}

/* ============================================================
   ATO II · DECLARAÇÃO
   ============================================================ */
.section{padding-block:var(--gap-section)}

.statement{
  border-top:1px solid var(--line);
  padding-block:clamp(7rem,15vh,12rem) clamp(6rem,12vh,10rem);
}
.statement-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,7rem);
  align-items:end;
}
.statement h2{margin-bottom:0}
.statement-aside{
  display:grid;
  gap:1.4rem;
  padding-bottom:.5rem;
}

/* ============================================================
   ATO III · OS QUATRO PILARES (escada deslocada)
   ============================================================ */
.ladder{
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.rung{
  display:grid;
  grid-template-columns:7rem minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:baseline;
  padding-block:clamp(2.4rem,5vh,3.6rem);
  border-bottom:1px solid var(--line);
  transition:background .35s ease;
}
/* deslocamento progressivo: quebra a simetria sem quebrar o alinhamento */
.rung:nth-child(2){padding-left:clamp(0rem,3vw,3rem)}
.rung:nth-child(3){padding-left:clamp(0rem,6vw,6rem)}
.rung:nth-child(4){padding-left:clamp(0rem,9vw,9rem)}
.rung:hover{background:linear-gradient(90deg,rgba(236,237,238,.03),transparent 60%)}

.rung-num{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,4vw,3.4rem);
  line-height:.9;
  color:var(--pc,var(--gold));
  font-variant-numeric:tabular-nums;
}
.rung-name{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.35rem,2.4vw,2rem);
  line-height:1;
  color:#fff;
}
.rung-desc{color:var(--paper-dim);font-size:.95rem;max-width:44ch}

/* ============================================================
   ATO IV · VITRINE DOS QUATRO LIVROS
   Um único palco. Abre em grade, reorganiza e passa a mostrar
   um volume por vez.
     desktop  coreografia de coverflow presa ao scroll
     celular  trilho com encaixe nativo (o gesto mais fluido
              que o aparelho tem, sem sequestrar a rolagem)
   ============================================================ */
.vitrine{
  position:relative;
  border-top:1px solid var(--line);
  background:var(--ink-2);
}
.vitrine-hold{overflow:visible}
.vitrine-head{margin-bottom:clamp(1.6rem,4vh,2.8rem)}
.vitrine-head h2{max-width:16ch}

.vitrine-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}

/* --- palco ---
   min-width:0 é obrigatório: como item de grade, o padrão é
   min-width:auto, e aí o conteúdo do trilho (quatro capas mais o
   preenchimento lateral) empurra a coluna para muito além da
   largura da página. */
.vt-stage{
  position:relative;
  min-width:0;
  height:clamp(300px,46vh,460px);
  perspective:1500px;
  perspective-origin:50% 50%;
}
.vt-track{position:absolute;inset:0}
.vt-card{
  position:absolute;
  top:50%;
  left:50%;
  height:80%;
  aspect-ratio:760/1140;
  margin:0;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%);
  will-change:transform,opacity,filter;
  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    opacity .45s ease,
    filter .45s ease;
}
.vt-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--r-sm);
  box-shadow:0 2px 0 rgba(255,255,255,.06),0 34px 80px rgba(2,6,12,.82);
  backface-visibility:hidden;
}
/* Cantoneira vetorial em volta do volume em exibição. Não é enfeite:
   é o que diz qual dos quatro está no palco, na cor do volume. */
.vt-card::after{
  content:"";
  position:absolute;
  inset:-11px;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease .1s;
  background:
    linear-gradient(var(--pc),var(--pc)) 0 0/1px 20px no-repeat,
    linear-gradient(var(--pc),var(--pc)) 0 0/20px 1px no-repeat,
    linear-gradient(var(--pc),var(--pc)) 100% 0/1px 20px no-repeat,
    linear-gradient(var(--pc),var(--pc)) 100% 0/20px 1px no-repeat,
    linear-gradient(var(--pc),var(--pc)) 0 100%/1px 20px no-repeat,
    linear-gradient(var(--pc),var(--pc)) 0 100%/20px 1px no-repeat,
    linear-gradient(var(--pc),var(--pc)) 100% 100%/1px 20px no-repeat,
    linear-gradient(var(--pc),var(--pc)) 100% 100%/20px 1px no-repeat;
}
.vt-stage:not(.is-grid) .vt-card.is-on::after{opacity:1}

/* --- texto: os painéis ocupam a mesma célula e se revezam --- */
.vt-copy{display:grid;min-width:0}
.vt-panel{
  grid-area:1/1;
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,14px,0);
  transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility .4s;
}
.vt-panel.is-on{opacity:1;visibility:visible;transform:none}
.vt-meta{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--pc,var(--gold));
  margin-bottom:1rem;
}
.vt-meta .num{
  font-family:var(--font-display);
  font-size:1.5rem;
  letter-spacing:.02em;
  line-height:1;
}
.vt-title{
  font-size:clamp(1.9rem,3.6vw,3rem);
  margin-bottom:.9rem;
}
.vt-sub{color:var(--paper-dim);max-width:44ch;margin-bottom:1.5rem}
.vt-quote{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1rem,1.6vw,1.3rem);
  line-height:1.12;
  color:#fff;
  padding-left:1rem;
  border-left:2px solid var(--pc,var(--gold));
  margin-bottom:1.8rem;
  max-width:28ch;
}
.vt-actions{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center}

/* painel de abertura: o índice dos quatro volumes */
.vt-index{display:grid;gap:.6rem;margin-top:1.6rem}
.vt-index li{
  display:flex;
  align-items:baseline;
  gap:.9rem;
  font-size:.95rem;
  color:var(--paper-dim);
}
.vt-index .num{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--pc);
  min-width:2ch;
}

/* --- trilho: posição e atalho --- */
.vt-rail{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:clamp(1.6rem,4vh,2.6rem);
  border-top:1px solid var(--line);
}
.vt-tick{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  background:none;
  border:0;
  border-top:2px solid transparent;
  margin-top:-1px;
  padding:.9rem .2rem;
  cursor:pointer;
  color:var(--paper-mute);
  font-family:var(--font-body);
  text-align:left;
  transition:color .3s ease,border-color .3s ease;
}
.vt-tick .num{
  font-family:var(--font-display);
  font-size:1rem;
  color:var(--pc);
  opacity:.45;
  transition:opacity .3s ease;
}
.vt-tick-name{
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.vt-tick:hover{color:var(--paper)}
.vt-tick.is-on{color:var(--paper);border-top-color:var(--pc)}
.vt-tick.is-on .num{opacity:1}

/* ============================================================
   ATO V · ANTES / DEPOIS (split com fio central)
   ============================================================ */
.compare{border-top:1px solid var(--line)}
/* bloco que fica preso enquanto as frases trocam */
.compare-hold{
  min-height:100dvh;
  display:grid;
  align-content:center;
  padding-block:clamp(4rem,9vh,7rem);
}
.compare-grid{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:clamp(1.6rem,4vw,4rem);
  margin-top:clamp(2rem,4.5vh,3rem);
}
.compare-rule{background:var(--line)}
.compare-col h3{
  font-size:.78rem;
  font-weight:600;
  font-family:var(--font-body);
  letter-spacing:.24em;
  margin-bottom:1.1rem;
  color:var(--paper-mute);
}
.compare-after h3{color:var(--gold)}
.compare-col li{
  font-size:clamp(1rem,1.5vw,1.24rem);
  line-height:1.3;
  padding-block:.34rem;
  color:var(--paper-mute);
}
.compare-after li{color:var(--paper);font-weight:500}

/* Troca conduzida pelo scroll: as linhas acendem uma a uma.
   Só entra em cena quando o JS assume; sem JS tudo já está legível. */
.js-cmp .compare-col li{
  opacity:.2;
  transform:translateY(6px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),color .45s ease;
}
.js-cmp .compare-col li.is-on{opacity:1;transform:none}
.js-cmp .compare-after li.is-on{color:#fff}

/* ============================================================
   ATO VI · OFERTA (assimétrica)
   ============================================================ */
.offer{
  border-top:1px solid var(--line);
  background:var(--ink-2);
}
.offer-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(3rem,7vw,7rem);
  align-items:center;
}

/* O pacote se monta: as quatro capas saem de uma pilha única e
   abrem em leque quando a seção entra em cena. Uma vez montado,
   fica parado. Nada de laço infinito aqui. */
.pack{
  position:relative;
  height:clamp(260px,40vh,400px);
  width:100%;
  justify-self:center;
  max-width:520px;
}
.pack.reveal,.pack.reveal.in{transform:none}
.pack-card{
  position:absolute;
  top:50%;
  left:50%;
  height:88%;
  aspect-ratio:760/1140;
  margin:0;
  --x:0rem;--a:0deg;--y:0rem;
  transform:translate(-50%,-50%) translate(0,2.6rem) rotate(0deg) scale(.9);
  opacity:0;
  transition:
    transform .95s cubic-bezier(.16,1,.3,1),
    opacity .6s ease;
  transition-delay:calc(var(--k) * 90ms);
}
.pack-card:nth-child(1){--x:-4.8rem;--a:-11deg;--y:.9rem;z-index:1}
.pack-card:nth-child(2){--x:-1.6rem;--a:-3.6deg;--y:0rem;z-index:2}
.pack-card:nth-child(3){--x:1.6rem;--a:3.6deg;--y:0rem;z-index:3}
.pack-card:nth-child(4){--x:4.8rem;--a:11deg;--y:.9rem;z-index:4}
.pack.in .pack-card{
  transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--a)) scale(1);
  opacity:1;
}
.pack-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--r-sm);
  box-shadow:0 2px 0 rgba(255,255,255,.06),0 30px 70px rgba(2,6,12,.78);
}

.offer-list{
  display:grid;
  gap:.55rem;
  margin-block:1.8rem;
}
.offer-list li{
  display:flex;
  align-items:baseline;
  gap:.85rem;
  font-size:.95rem;
  color:var(--paper-dim);
}
.offer-list i{
  width:18px;height:1px;
  background:var(--pc,var(--gold));
  flex:none;
  transform:translateY(-.3rem);
}
.offer-list b{color:var(--paper);font-weight:600}

.preco-bloco{margin-block:2rem 1.6rem}
.preco-de{
  display:block;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-mute);
  margin-bottom:.35rem;
}
.preco-de s{text-decoration-thickness:1px}
.preco-por{
  font-family:var(--font-display);
  font-size:clamp(3rem,6vw,4.8rem);
  line-height:.9;
  color:#fff;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.preco-nota{
  display:block;
  margin-top:.6rem;
  font-size:.8rem;
  color:var(--paper-mute);
}
.oferta-ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:1.5rem}
.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.6rem;
  margin-bottom:1rem;
}
.trust-row li{
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-mute);
  font-weight:500;
}

/* ============================================================
   ATO VII · FECHAMENTO
   ============================================================ */
.closer{
  position:relative;
  border-top:1px solid var(--line);
  text-align:center;
  padding-block:clamp(7rem,16vh,12rem);
  overflow:hidden;
}
.closer-mark{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(70vw,720px);
  opacity:.05;
  pointer-events:none;
  filter:grayscale(1);
}
.closer .container{position:relative}
.closer h2{margin-bottom:1.6rem}
.closer .lead{margin-inline:auto;margin-bottom:2.6rem}

/* ---------- Footer ---------- */
.brand-name{
  font-family:var(--font-display);
  font-size:1.02rem;
  letter-spacing:.2em;
  color:var(--paper);
  line-height:1;
  display:block;
}
.footer{
  border-top:1px solid var(--line);
  padding-block:3.5rem 2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);
  gap:2.5rem;
  align-items:start;
}
.footer-brand{display:flex;align-items:center;gap:.7rem}
.footer-brand img{height:30px;width:auto}
.footer-sub{
  display:block;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper-mute);
  margin-top:.2rem;
}
.footer-links{display:grid;gap:.6rem}
.footer-links a{
  font-size:.8rem;
  color:var(--paper-dim);
  transition:color .2s ease;
  justify-self:start;
}
.footer-links a:hover{color:var(--paper)}
.footer-aviso{font-size:.76rem;color:var(--paper-mute);max-width:46ch;line-height:1.6}
.footer-sig{
  margin-top:3rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-family:var(--font-display);
  font-size:.8rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--paper-mute);
  text-align:center;
}

/* ---------- Reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}
.d4{transition-delay:.32s}

/* ============================================================
   PÁGINAS DE LIVRO INDIVIDUAL (/visto /lider /influencia /atracao)
   e páginas de fluxo (/obrigado /volta)
   ============================================================ */
.lt-page{min-height:100dvh;display:flex;flex-direction:column}
.lt-bar{padding-block:1.2rem}
.lt-bar .container{display:flex;align-items:center;gap:.7rem}
.lt-bar img{height:28px;width:auto}
.lt-bar .wordmark{
  font-family:var(--font-display);
  font-size:1rem;
  letter-spacing:.2em;
  color:var(--paper);
}
.lt-hero{flex:1;display:grid;align-items:center;padding-block:clamp(3rem,8vh,6rem)}
.lt-grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.lt-capa{
  width:100%;
  max-width:330px;
  border-radius:var(--r-sm);
  box-shadow:0 40px 90px rgba(2,6,12,.75);
  justify-self:center;
}
.lt-copy h1{
  font-size:clamp(2.3rem,5vw,3.9rem);
  margin-bottom:1.2rem;
}
.lt-sub{color:var(--paper-dim);max-width:52ch;margin-bottom:1.8rem;font-size:1.02rem}
.lt-bullets{display:grid;gap:.7rem;margin-bottom:1.8rem}
.lt-bullets li{
  display:flex;
  gap:.85rem;
  align-items:baseline;
  color:var(--paper-dim);
  font-size:.95rem;
}
.lt-bullets li::before{
  content:"";
  width:18px;height:1px;
  background:var(--pc,var(--gold));
  flex:none;
  transform:translateY(-.3rem);
}
.lt-bump{margin-top:1.2rem;font-size:.8rem;letter-spacing:.04em;color:var(--gold)}

/* páginas legais */
.legal{padding-block:clamp(3rem,8vh,5.5rem) clamp(4rem,10vh,7rem)}
.legal h1{font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:.6rem}
.legal-date{
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-mute);
  margin-bottom:3rem;
}
.legal h2{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:2.6rem;
  margin-bottom:.7rem;
  line-height:1.4;
}
.legal p{color:var(--paper-dim);max-width:68ch}
.legal p a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* páginas de fluxo centradas */
.flow-page{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem;
  gap:1.2rem;
}
.flow-page img.capa{
  width:170px;
  border-radius:var(--r-sm);
  box-shadow:0 30px 70px rgba(2,6,12,.75);
  margin-bottom:.8rem;
}
.flow-page h1{font-size:clamp(2rem,5vw,3.4rem)}
.flow-page .lead{margin-inline:auto}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1180px) and (min-width:901px){
  /* a faixa não cabe em três colunas: o texto de apoio sai de cena
     e ficam só o título e os botões */
  .hero-bar{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
  .hero-bar .hero-sub{display:none}
  .layer-final{max-width:min(46ch,52vw)}
}

@media (max-width:900px){
  /* o poster acompanha o mesmo enquadramento do canvas no celular */
  .stage-poster{object-fit:contain;object-position:center 32%}
  .stage-video{object-fit:contain;object-position:center 32%;background:var(--ink)}

  /* palco recomposto: o CGI retrato ocupa a tela e o texto senta
     embaixo, sobre um véu vertical em vez do lateral do desktop */
  .stage-media::after{
    background:
      linear-gradient(to bottom,rgba(4,8,13,.62) 0%,transparent 20%,transparent 40%,rgba(4,8,13,.95) 92%);
  }
  .stage-copy{align-items:end}
  .layer{align-self:end;padding-bottom:clamp(4.5rem,12vh,7rem)}
  .layer-final{max-width:100%}

  /* no celular o fecho continua alinhado à esquerda, na base */
  .layer-close{align-self:end}
  .layer-close .layer-final{max-width:100%;text-align:left;margin-inline:0}
  .layer-close h1{font-size:clamp(2.4rem,10vw,3.4rem);margin-bottom:1rem}
  .layer-close .hero-sub{margin-inline:0;margin-bottom:1.5rem;max-width:34ch}
  .layer-close .final-pillars{justify-content:flex-start;margin-bottom:1.6rem}
  .layer-close .hero-ctas{justify-content:stretch}

  /* no celular a faixa vira bloco empilhado, sem fio e sem colunas */
  .hero-bar{
    grid-template-columns:1fr;
    gap:1rem;
    border-top:0;
    padding-top:0;
    padding-bottom:0;
  }
  .hero-bar h1{
    font-size:clamp(2.4rem,11vw,3.4rem);
    white-space:normal;
  }
  .hero-bar .eyebrow{font-size:.66rem;margin-bottom:.9rem}
  .hero-sub{max-width:34ch;font-size:.95rem}
  .hero-ctas .btn{flex:1 1 auto;justify-content:center}
  .beat{max-width:12ch}
  .layer-flash{padding-bottom:0;align-self:center}
  .stage-progress{left:5vw;right:5vw;bottom:1.6rem}
  .stage-fg{width:min(120vw,620px)}

  /* ---------- Abertura do celular ----------
     No celular a sequência não é dirigida pelo scroll: o vídeo
     roda sozinho e o palco entrega a proposta e o botão de uma
     vez, na primeira tela. Nada de rolar para achar o CTA. */
  .stage.is-static .layer{display:none}
  .stage.is-static .stage-progress{display:none}
  .stage.is-static .layer-close{
    display:block;
    opacity:1;
    visibility:visible;
    transform:none;
    padding-bottom:clamp(2rem,5vh,3rem);
  }
  .stage.is-static .layer-close .layer-final > *{
    animation:hero-rise .7s cubic-bezier(.16,1,.3,1) both;
  }
  .stage.is-static .layer-close .eyebrow{animation-delay:.05s}
  .stage.is-static .layer-close h1{animation-delay:.13s}
  .stage.is-static .layer-close .hero-sub{animation-delay:.21s}
  .stage.is-static .layer-close .final-pillars{animation-delay:.29s}
  .stage.is-static .layer-close .hero-ctas{animation-delay:.37s}
  .stage.is-static .layer-close h1{font-size:clamp(2.3rem,10.5vw,3.3rem);margin-bottom:.9rem}
  .stage.is-static .layer-close .hero-sub{margin-bottom:1.3rem}
  .stage.is-static .layer-close .final-pillars{margin-bottom:1.4rem;gap:.4rem 1.1rem}
  /* o véu de baixo sobe: o texto agora ocupa mais da tela */
  .stage.is-static .stage-media::after{
    background:linear-gradient(to bottom,
      rgba(4,8,13,.55) 0%,transparent 18%,transparent 33%,
      rgba(4,8,13,.86) 62%,rgba(4,8,13,.97) 84%);
  }
@keyframes hero-rise{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}

  .statement-grid{grid-template-columns:1fr;gap:2.5rem}
  .rung{grid-template-columns:4rem minmax(0,1fr);row-gap:.6rem}
  .rung-desc{grid-column:2}
  .rung:nth-child(2),.rung:nth-child(3),.rung:nth-child(4){padding-left:0}

  /* ---------- Vitrine no celular ----------
     Sem pin e sem sequestro de rolagem: o palco vira um trilho
     com encaixe nativo. O dedo arrasta, o aparelho faz a inércia
     e a rolagem vertical da página nunca é interrompida. */
  .vitrine-hold{min-height:0;padding-block:clamp(3rem,8vh,4.5rem)}
  .vitrine-grid{grid-template-columns:minmax(0,1fr);gap:1.6rem}

  /* A altura do palco é a mesma na grade e na vitrine, senão a
     reorganização empurraria a página debaixo do dedo. */
  .vt-stage{height:min(84vw,350px);perspective:none}
  .vt-track{
    position:static;
    display:flex;
    align-items:center;
    height:100%;
    gap:1rem;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    /* metade do container (90vw) menos meia capa: a primeira e a
       última encaixam no centro como todas as outras. Em vw, e não
       em %, para não depender da largura que este mesmo trilho
       ajuda a definir. */
    padding-inline:calc(45vw - min(26vw,108px));
  }
  .vt-track::-webkit-scrollbar{display:none}
  .vt-card{
    position:static;
    flex:0 0 min(52vw,216px);
    width:min(52vw,216px);
    height:auto;
    scroll-snap-align:center;
    transform:scale(.86);
    opacity:.38;
    transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s ease;
  }
  .vt-card.is-on{transform:scale(1);opacity:1}
  .vt-card::after{inset:-9px}
  /* durante a reorganização quem manda é a animação, não a transição */
  .vt-stage.vt-flip .vt-card{transition:none}

  /* estado de abertura: grade 2x2 dentro do mesmo palco */
  .vt-stage.is-grid .vt-track{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    place-items:center;
    gap:.9rem 1.1rem;
    overflow:visible;
    padding-inline:0;
    scroll-snap-type:none;
  }
  .vt-stage.is-grid .vt-card{
    flex:none;
    width:auto;
    height:100%;
    /* sem isto a altura mínima automática do item (largura da
       coluna vezes a proporção da capa) estica as duas linhas e a
       grade transborda o palco */
    min-width:0;
    min-height:0;
    aspect-ratio:760/1140;
    transform:none;
    opacity:1;
  }

  .vt-title{font-size:clamp(1.75rem,8vw,2.4rem)}
  .vt-sub{max-width:100%}
  .vt-quote{margin-bottom:1.4rem}
  .vt-actions{gap:.9rem}
  .vt-actions .btn{flex:1 1 auto;justify-content:center}

  .vt-rail{margin-top:1.2rem}
  .vt-tick{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:.25rem;
    padding:.7rem .25rem;
    min-width:0;
  }
  .vt-tick-name{font-size:.62rem;letter-spacing:.1em}

  .compare-hold{min-height:0;padding-block:clamp(3.5rem,8vh,5rem)}
  .compare-grid{grid-template-columns:1fr;gap:1.8rem}
  .compare-rule{height:1px;width:100%}

  .offer-grid{grid-template-columns:1fr;gap:2.4rem}
  .pack{max-width:100%;height:clamp(220px,32vh,300px);order:-1}
  .pack-card{height:100%}
  .pack-card:nth-child(1){--x:-3.4rem;--a:-10deg}
  .pack-card:nth-child(2){--x:-1.15rem;--a:-3.3deg}
  .pack-card:nth-child(3){--x:1.15rem;--a:3.3deg}
  .pack-card:nth-child(4){--x:3.4rem;--a:10deg}
  .oferta-ctas .btn{flex:1 1 auto}

  .footer-grid{grid-template-columns:1fr;gap:2rem}

  .lt-grid{grid-template-columns:1fr;gap:2.5rem}
  .lt-capa{max-width:230px}
}

@media (max-width:520px){
  .container,.container.narrow{width:90vw}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .vt-card{flex-basis:58vw;width:58vw}
  .vt-track{padding-inline:16vw}
  .vt-tick-name{display:none}
  .vt-tick{align-items:center;padding:.75rem .2rem}
  .vt-tick .num{font-size:1.05rem}
}

/* ============================================================
   MOVIMENTO REDUZIDO
   A sequência colapsa para um quadro final imóvel e todo o
   texto do palco passa a ser lido em fluxo normal.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}

  .stage{height:auto;min-height:0;padding-block:3rem 4rem}
  .stage-media,.stage-fx,.stage-scrim,.stage-fg,.stage-progress{display:none}
  /* o quadro final substitui a sequência: retrato no celular,
     panorâmico no desktop, então a largura acompanha */
  .stage-still{
    display:block;
    width:min(320px,62vw);
    margin:0 auto 2.5rem;
    border-radius:var(--r-sm);
    box-shadow:0 40px 90px rgba(2,6,12,.75);
  }
  @media (min-width:901px){
    .stage-still{width:min(900px,80vw)}
  }
  .stage-copy{position:static;display:block;pointer-events:auto}
  .layer{
    opacity:1;
    transform:none;
    display:block;
    margin-bottom:2.5rem;
    max-width:100%;
  }
  .layer-flash{text-align:left}
  .flash-line{font-size:clamp(1.6rem,4vw,2.6rem);margin-inline:0}
  .layer-final{max-width:60ch}
  .hero-bar{grid-template-columns:1fr;border-top:0;padding:0;gap:1rem}
  .hero-bar h1{white-space:normal;font-size:clamp(2.4rem,7vw,4rem)}
  /* vitrine sem movimento: grade estática e os quatro textos
     legíveis em fluxo, um debaixo do outro */
  .vt-stage{height:auto;perspective:none}
  .vt-track{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;overflow:visible;padding:0;height:auto}
  .vt-card{position:static;width:100%;height:auto;flex:none;transform:none;opacity:1}
  .vt-card::after{display:none}
  .vt-copy{display:block}
  .vt-panel{opacity:1;visibility:visible;transform:none;padding-block:1.6rem;border-top:1px solid var(--line)}
  .vt-panel.is-intro{border-top:0;padding-top:0}
  .vt-rail{display:none}
  .pack{height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:420px}
  .pack-card{position:static;transform:none;opacity:1;height:auto;width:100%}
  .compare-hold{min-height:0}
  .js-cmp .compare-col li{opacity:1;transform:none}
}

/* transparência reduzida: troca blur por preenchimento sólido */
@media (prefers-reduced-transparency:reduce){
  .stage-fx{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,8,13,.5)}
}

/* ============================================================
   SEÇÕES TRAVADAS PELO SCROLL (declaração, código, bônus)
   Cada uma ocupa exatamente uma tela, fica presa enquanto o
   scroll percorre os seus passos e só então libera a próxima.
   Fundo opaco: enquanto está fixada, nada pode aparecer atrás.
   ============================================================ */
#problema,#codigo,#bonus{
  padding-block:0; /* o respiro vem do bloco travado */
  background:var(--ink);
  position:relative;
  z-index:var(--z-base);
}
/* a vitrine também trava, mas guarda o próprio fundo */
#livros{position:relative;z-index:var(--z-base)}
.pin-hold{
  min-height:100dvh;
  display:grid;
  align-content:center;
  padding-block:clamp(2.5rem,7vh,4.5rem);
  overflow:hidden;
}

/* --- declaração: as duas frases acendem uma a uma --- */
.js-steps [data-step]{
  opacity:.16;
  transform:translateY(12px);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);
}
.js-steps [data-step].is-on{opacity:1;transform:none}

/* --- escada: um degrau por vez, com a descrição só no ativo --- */
.js-steps .rung{
  opacity:.3;
  transition:opacity .45s ease,background .45s ease;
}
.js-steps .rung.is-on{
  opacity:1;
  background:linear-gradient(90deg,rgba(201,162,39,.10),transparent 62%);
}
.js-steps .rung-desc{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .45s ease,opacity .45s ease;
}
.js-steps .rung.is-on .rung-desc{max-height:9rem;opacity:1}
/* com a descrição recolhida, os quatro degraus cabem em uma tela */
.js-steps .rung{padding-block:clamp(1.1rem,2.6vh,1.9rem)}

/* ---------- Bônus (abas travadas pelo scroll) ---------- */
.bonus-hold{min-height:0;padding-block:0}
.bonus{
  display:grid;
  grid-template-columns:minmax(220px,.9fr) 1.6fr;
  gap:clamp(1.6rem,4vw,3.5rem);
  border-top:1px solid var(--line);
  padding-top:clamp(1.6rem,3.5vh,2.6rem);
}
.bonus-tabs{display:flex;flex-direction:column;gap:2px}
.bonus-tab{
  display:flex;align-items:baseline;gap:.9rem;
  width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:1rem .2rem;cursor:pointer;color:var(--paper-mute);
  transition:color .3s ease,border-color .3s ease;
}
.bonus-tab{position:relative}
/* fio de ouro que preenche conforme o scroll avança dentro do bônus */
.bonus-tab::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
}
.js-bonus .bonus-tab.is-active::after{transform:scaleX(var(--bp,1))}
.bonus-tab:hover{color:var(--paper)}
.bonus-tab.is-active{color:var(--paper);border-color:var(--gold)}
.bonus-tab-num{font-size:.72rem;letter-spacing:.18em;color:var(--gold);opacity:.5}
.bonus-tab.is-active .bonus-tab-num{opacity:1}
.bonus-tab-name{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,2.2vw,1.6rem);
  line-height:1.06;text-transform:uppercase;letter-spacing:.01em;
}
.bonus-panels{position:relative;min-height:12rem;display:grid;align-content:center}
.bonus-panel{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.bonus-panel.is-active{opacity:1;transform:none}
.bonus-panel[hidden]{display:none}
.bonus-panel h3{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.06;margin-bottom:.9rem;
}
.bonus-panel p{color:var(--paper-dim);font-size:clamp(1rem,1.4vw,1.16rem);line-height:1.55;max-width:46ch}
.bonus-tag{
  display:inline-block;margin-top:1.3rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:.42rem .7rem;
}
@media (max-width:900px){
  .bonus{grid-template-columns:1fr;gap:1.8rem}
  .bonus-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .bonus-tab{width:auto;min-width:0;flex-direction:column;align-items:center;text-align:center;
    justify-content:flex-end;gap:.35rem;padding:.8rem .4rem;border-bottom:2px solid var(--line)}
  .bonus-tab::after{bottom:-2px;height:2px}
  .bonus-tab-name{font-size:.92rem}
  .bonus-panels{min-height:14rem;align-content:start}
  /* Sem pin no celular, a tela cheia obrigatória vira só buraco:
     a altura passa a ser a do conteúdo. */
  .pin-hold{min-height:0;padding-block:clamp(3rem,8vh,4.5rem)}
  .js-steps .rung-name{font-size:1.15rem}

  /* O grão é uma camada fixa de tela inteira em mix-blend-mode:
     no desktop custa pouco, no celular obriga o compositor a
     refazer a mistura da tela toda a cada quadro de rolagem. Em
     3x de densidade ninguém enxerga o grão. Sai. */
  body::after{display:none}

  /* ---------- Alvos de toque ----------
     Links de texto ficam com 21px a 28px de altura, metade do
     mínimo confortável para o polegar. A área de toque cresce por
     um pseudo-elemento invisível, e não por padding, para que o
     fio embaixo da palavra continue colado no texto. */
  .link-gold,.footer-links a,.microcopy a{position:relative}
  .link-gold::after,.footer-links a::after,.microcopy a::after{
    content:"";
    position:absolute;
    left:0;right:0;
    top:50%;
    height:44px;
    transform:translateY(-50%);
  }
  /* o toque não pinta nada: o estado ativo já é dado pela cor */
  a,button{-webkit-tap-highlight-color:transparent}
}