/* =========================================================
   SEÇÕES · YESHUA
   ========================================================= */

/* ---------------- NAV ---------------- */
.nav{ position:fixed; inset:16px 0 auto; z-index:60; display:flex; justify-content:center; pointer-events:none }
.nav__pilula{
  pointer-events:auto;
  display:flex; align-items:center; gap:var(--s-5);
  padding:8px 8px 8px 22px; border-radius:var(--r-full);
  background:color-mix(in srgb, var(--bg-vidro) 72%, transparent);
  border:1px solid color-mix(in srgb, var(--ink-100) 9%, transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:var(--sombra-suave);
}
.nav__marca{
  font-family:var(--sans); font-weight:700; letter-spacing:.16em;
  font-size:13px; text-decoration:none; color:var(--texto-forte);
}
.nav__sep{ width:1px; height:16px; background:var(--line-forte) }
.nav__link{
  font-family:var(--sans); font-size:13.5px; text-decoration:none;
  color:var(--ink-400); transition:color .2s ease;
}
.nav__link:hover{ color:var(--texto-forte) }

/* Alvo de toque de 44px sem esticar a pílula: o ::after estende a área
   clicável pra fora da caixa visual. O audit mediu 22px nesses links. */
.nav__marca, .nav__link{ position:relative }
.nav__marca::after, .nav__link::after{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:44px; translate:0 -50%;
}
.nav__cta{ padding:10px 20px; font-size:13.5px }
@media (max-width:767px){
  .nav__link, .nav__sep{ display:none }
  .nav__pilula{ padding-left:20px }
}

/* ---------------- HERO ---------------- */
/* Composição centralizada e empilhada: texto, produto, ficha.
   O padding-top é a altura da pílula do menu (52) mais o respiro de 16
   mais os 64 pedidos, pra o texto começar exatamente 64px abaixo dele. */
.hero{
  /* 64px abaixo do menu no desktop; em tela pequena encolhe pra puxar
     o livro pra cima, que é o que precisa aparecer na 1ª dobra */
  padding-block:calc(var(--nav-topo) + var(--nav-h) + clamp(28px, 4.4vw, 64px))
               clamp(56px, 7vw, 96px);
  /* clip só no eixo X: a palavra gigante e a atmosfera têm recuos
     negativos e empurravam a largura em mobile. `clip` corta na
     horizontal sem virar container de rolagem e sem recortar na
     vertical, que é onde o livro e a sombra precisam de folga. */
  overflow-x:clip;
  text-align:center;
}

/* atmosfera: recorte desfocado da nuvem da própria contracapa.
   Agora centrada atrás do livro, que virou o eixo da composição. */
.hero__atmosfera{
  position:absolute; inset:-14% -6% -46%; pointer-events:none;
  background:url('../assets/atmosfera.webp') center/cover no-repeat;
  opacity:.36;
  /* O elemento desce bem além do hero de propósito. Com recuo curto, a
     máscara radial ainda estava ~35% opaca na borda de baixo e o desenho
     era cortado reto ali, criando a emenda entre as dobras. Agora ela
     chega a zero antes de qualquer borda. */
  mask-image:radial-gradient(58% 42% at 50% 46%, #000 6%, transparent 72%);
  -webkit-mask-image:radial-gradient(58% 42% at 50% 46%, #000 6%, transparent 72%);
}
.hero > .container{ position:relative; z-index:2 }

.hero__int{ display:flex; flex-direction:column; align-items:center }

/* o bloco é largo pro h1 caber em 2 linhas; quem segura a medida
   de leitura é o próprio .lead, mais estreito */
.hero__texto{ display:flex; flex-direction:column; align-items:center; max-width:1120px }
/* 1040px é o intervalo medido: a linha 1 sem "Ele" mede 1071px e com
   ele 1158, e o tracking negativo tira uns 75. Abaixo de 1080 o "Ele"
   desce sozinho, sem <br>, e continua em 2 linhas. */
.hero__texto h1{ margin-top:var(--s-3); max-width:min(1040px, 92vw) }
.hero__texto .lead{ margin-top:var(--s-4); max-width:52ch }
.hero__acoes{
  margin-top:var(--s-6); display:flex; flex-direction:column;
  align-items:center; gap:var(--s-3);
}

/* prova social: linha só, encostada no CTA */
.prova{ margin-top:14px; display:flex; align-items:center; justify-content:center; gap:var(--s-3) }
.prova__faces{ display:flex; align-items:center }
/* retratos reais no lugar dos discos de gradiente. A borda na cor do
   fundo é o que separa um do outro na sobreposição. */
.prova__faces img{
  width:32px; height:32px; border-radius:50%; object-fit:cover;
  margin-right:-10px; border:2px solid var(--bg);
  background:var(--surface);
}
.prova__faces img:last-child{ margin-right:0 }

/* alinhado à esquerda: centralizado, a segunda linha fica pendurada
   no meio e desmonta o bloco */
.prova__txt{
  font-family:var(--sans); font-size:var(--t-micro); color:var(--ink-500);
  margin-left:var(--s-2); text-align:left; max-width:30ch;
  line-height:1.32;   /* rótulo de 2 linhas não usa entrelinha de texto corrido */

}
.prova__txt strong{ color:var(--texto) }
@media (min-width:700px){
  /* no desktop a frase inteira cabe numa linha: os 30ch existem pro
     mobile, onde ela precisa quebrar em duas */
  .prova__txt{ max-width:none; white-space:nowrap }
}

/* ---------------- palco do produto ---------------- */
.hero__palco{
  position:relative; display:grid; place-items:center;
  width:100%; margin-top:clamp(24px, 2.6vw, 40px);
  /* só reserva o espaço: o livro mora na camada grudada da jornada */
}

/* a palavra gigante atrás do livro: o gesto que o thewatch usa pra
   fazer o produto e a tipografia ocuparem o mesmo espaço */
.hero__gigante{
  position:absolute; top:44%; left:50%; translate:-50% -50%;
  font-family:var(--serif); font-size:var(--t-display);
  line-height:var(--lh-display); letter-spacing:var(--ls-display);
  white-space:nowrap; pointer-events:none; user-select:none;
  color:transparent;
  background:linear-gradient(180deg, var(--ink-100) 0%, var(--ink-800) 92%);
  -webkit-background-clip:text; background-clip:text;
  opacity:.13;
}

/* ficha: ícone, rótulo e valor empilhados; os três lado a lado */
.ficha{
  position:relative; z-index:2; list-style:none; width:100%;
  margin-top:clamp(4px, 1vw, 12px); padding-top:clamp(24px, 2.4vw, 32px);
  /* sem borda: o hero é uma superfície contínua, qualquer filete corta a
     atmosfera no meio e denuncia a emenda */
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-5);
  max-width:820px;
}
.ficha li{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  text-align:center;   /* o align-items centra a coluna, não o texto que quebra */
}
.ficha__ico{ width:26px; height:26px; color:var(--acento); margin-bottom:var(--s-1) }
.ficha b{
  font-family:var(--sans); font-weight:500; font-size:15px;
  color:var(--texto-forte); letter-spacing:-.01em;
}

@media (max-width:639px){
  .ficha{ grid-template-columns:1fr; gap:var(--s-6) }
}

/* ---------------- cabeçalho de seção ---------------- */
.cabeca{ margin-inline:auto; margin-bottom:clamp(40px, 5vw, 64px) }
/* a medida vive no h2, não no bloco: em ch do próprio título ela acompanha
   o corpo da fonte. Antes eram 44ch do texto base = 432px, e um h2 de 56px
   caía em quatro linhas curtas. */
.cabeca h2{ margin-top:var(--s-3); max-width:26ch; margin-inline:auto; text-wrap:balance }
.cabeca > p:not(.eyebrow){ max-width:56ch; margin-inline:auto }
.cabeca h2 + p{ margin-top:var(--s-5); font-size:var(--t-lead); color:var(--ink-400) }

/* =========================================================
   JORNADA · hero e seções 02/03 dividem o mesmo livro
   O livro não é posicionado por porcentagem: ele interpola entre
   âncoras reais do DOM. Em p=0 está exatamente onde estaria no fluxo
   do hero, sem deslocamento adivinhado.
   ========================================================= */
.jornada{ position:relative; --p:0 }

.jornada__livro{
  position:fixed; top:0; left:0; z-index:3;
  transform-origin:50% 50%;
  will-change:transform;
}
#livro3d{ width:100%; height:100% }

/* Âncora do hero: define o tamanho de partida do livro. Precisa ser
   PAISAGEM. Com canvas estreito quem limita o enquadramento passa a ser
   a horizontal e o livro encolhe; com canvas largo quem limita é a
   vertical e ele preenche a altura. Foi o que o fez encolher antes.
   Vem depois da regra de cima de propósito: é ela que dá a altura. */
.hero__palco{
  position:relative; display:grid; place-items:center;
  width:min(1180px, 96vw); height:min(94svh, 880px);
  margin:clamp(24px, 2.6vw, 40px) auto 0;
}

/* ---------------- MÉTODO (04) ----------------
   Coluna esquerda travada, níveis passando ao lado. Só um nível fica
   aceso por vez, então o card ativo é o único ponto de leitura da tela.
   Sem JS todos nascem acesos: o modo apagado só liga com .niveis--vivo. */

.metodo{ position:relative }

.metodo__int{ position:relative; display:grid; gap:clamp(48px,5vw,88px) }
@media (min-width:1000px){
  .metodo__int{ grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr); align-items:start }
}

/* ---- coluna travada ---- */
.metodo__fixo h2{ margin-top:var(--s-3) }
.metodo__fixo .lead{ margin-top:var(--s-5); max-width:44ch }
@media (min-width:1000px){
  .metodo__fixo{
    position:sticky;
    top:calc(var(--nav-topo) + var(--nav-h) + clamp(40px,7vh,96px));
  }
}

/* trilha: diz em que camada a leitura está. Marca com borda à esquerda,
   o mesmo recurso que a seção 05 usa pra destacar a pergunta que vale. */
.trilha{
  list-style:none; display:none; flex-direction:column;
  margin-top:clamp(32px,4vw,48px);
}
@media (min-width:1000px){ .trilha{ display:flex } }
.trilha li{
  display:flex; align-items:baseline; gap:14px;
  padding:11px 0 11px 18px; border-left:1px solid var(--line);
  font-family:var(--sans); font-size:15px;
  color:var(--ink-600); transition:color .4s ease, border-color .4s ease;
}
.trilha li .rotulo{ color:inherit; transition:color .4s ease }
.trilha li.passou{ color:var(--ink-500); border-left-color:var(--line-forte) }
.trilha li.ativo{ color:var(--texto-forte); border-left-color:transparent }
/* a barra do item aceso repete o gradiente do card */
.trilha li.ativo{
  background:linear-gradient(180deg, var(--plum-400), var(--gold-500)) left / 1px 100% no-repeat;
}
.trilha li.ativo .rotulo{ color:var(--gold-400) }

/* ---- os níveis ---- */
.niveis{ list-style:none; display:flex; flex-direction:column; gap:clamp(16px,1.6vw,22px) }

.nivel{
  position:relative; display:flex; gap:clamp(20px,2.4vw,34px); align-items:center;
  min-height:clamp(230px,27vh,290px);
  padding:clamp(28px,3vw,42px) clamp(24px,2.8vw,40px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color .5s ease, background .5s ease, transform .5s cubic-bezier(.22,.8,.3,1);
}

/* aba do número, encaixada na quina pra parecer ficha catalogada */
.nivel__aba{
  position:absolute; top:-1px; left:-1px; padding:7px 15px;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em;
  color:var(--ink-600); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-lg) 0 var(--r-md) 0;
  transition:color .5s ease, border-color .5s ease;
}

.nivel__icone{
  position:relative; flex:0 0 auto; color:var(--ink-700);
  transition:color .5s ease;
}
.nivel__icone::before{
  content:''; position:absolute; inset:-42%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--plum-500) 42%, transparent) 0%,
    color-mix(in srgb, var(--plum-800) 26%, transparent) 42%, transparent 70%);
  opacity:0; scale:.6; transition:opacity .55s ease, scale .55s cubic-bezier(.22,.8,.3,1);
}
.nivel__svg{ width:clamp(64px,6.2vw,94px); height:auto; display:block }

.nivel__rotulo{
  display:flex; align-items:baseline; gap:10px; margin:0 0 10px;
  font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-600);
  transition:color .5s ease;
}
.nivel__heb{ font-size:17px; letter-spacing:0; color:inherit; opacity:.75 }
.nivel h3{
  font-size:clamp(30px,3.1vw,46px); line-height:1.02; letter-spacing:-.03em;
  /* apagado tem piso: ink-600 dá 3.32, o mínimo AA pra texto grande.
     O salto do efeito vem do gradiente, não de sumir com o inativo. */
  color:var(--ink-600); transition:color .5s ease;
}
.nivel__desc{
  margin-top:var(--s-4); max-width:46ch; font-size:16px; line-height:1.55;
  /* 16px exige 4.5: ink-500 passa (4.69) e ainda lê como secundário */
  color:var(--ink-500); transition:color .5s ease;
}

/* ---- estados ----
   O apagado só existe quando o JS assume; assim a seção continua
   legível sem script e com movimento reduzido.
   O aceso é a conversa das duas escalas da capa: ameixa entrando em
   ouro, na mesma diagonal em todos os elementos do card. */
.niveis--vivo .nivel{ transform:scale(.985) }

.niveis--vivo .nivel.ativo{
  transform:none;
  /* borda em gradiente: os dois primeiros planos pintam o miolo até o
     padding-box e o terceiro preenche só a faixa da borda */
  border-color:transparent;
  /* a camada sólida vai como gradiente de uma cor só: no shorthand
     background, uma cor só é válida na última camada e invalida a
     declaração inteira se aparecer no meio. */
  background:
    linear-gradient(128deg,
      color-mix(in srgb, var(--plum-800) 46%, transparent) 0%,
      color-mix(in srgb, var(--plum-900) 30%, transparent) 38%,
      transparent 72%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(128deg, var(--plum-500) 0%, var(--plum-400) 42%, var(--gold-500) 100%) border-box;
  /* sem glow: o que acende é a borda, não o ar em volta do card */
}

.niveis--vivo .nivel.ativo .nivel__aba{
  color:var(--plum-200);
  border-color:transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(128deg, var(--plum-500), var(--gold-500)) border-box;
}
.niveis--vivo .nivel.ativo .nivel__rotulo{ color:var(--ink-400) }
.niveis--vivo .nivel.ativo .nivel__heb{ color:var(--gold-400); opacity:1 }
.niveis--vivo .nivel.ativo .nivel__desc{ color:var(--ink-300) }

/* o ícone recebe o gradiente de verdade, não uma cor aproximada */
.niveis--vivo .nivel.ativo .nivel__svg{ stroke:url(#gradNivel) }
.niveis--vivo .nivel.ativo .nivel__svg [fill="currentColor"]{ fill:var(--gold-400) }
/* halo atrás do ícone: o mesmo brilho que a capa tem no olho */
.niveis--vivo .nivel.ativo .nivel__icone::before{ opacity:1; scale:1 }

.niveis--vivo .nivel.ativo h3{
  background:linear-gradient(96deg, var(--plum-300) 0%, var(--plum-400) 38%, var(--gold-400) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

@media (max-width:999px){
  .nivel{ flex-direction:column; align-items:flex-start; min-height:0 }
  .nivel__icone{ margin-bottom:var(--s-2) }
}
@media (prefers-reduced-motion:reduce){
  .niveis--vivo .nivel{ transform:none }
  .nivel, .nivel *{ transition:none }
}


/* ---------------- seção 02: encaixe ---------------- */
.encaixe{ min-height:100svh; display:flex; align-items:center }
.encaixe__grid{ display:grid; gap:clamp(32px,4vw,64px); align-items:center; width:100% }
@media (min-width:960px){
  .encaixe__grid{ grid-template-columns:minmax(0,5.4fr) minmax(0,5.6fr) }
}
/* âncora de chegada */
/* mesma altura do vão do hero: a escala é a razão entre os dois,
   então igualar significa o livro chegar do mesmo tamanho */
.encaixe__vao{ width:100%; height:min(94svh, 880px) }
.encaixe__texto{ text-align:left; max-width:52ch }
.encaixe__texto h2{ margin-top:var(--s-3) }
.encaixe__texto p{ margin-top:var(--s-4) }
.encaixe__texto .lead{ margin-top:var(--s-5) }

/* ---------------- mobile: o livro desce e para abaixo do texto ---------------- */
@media (max-width:959px){
  .hero__palco{ width:min(760px, 96vw); height:min(54svh, 470px) }
  .encaixe{ min-height:auto; display:block }
  .encaixe__grid{ display:flex; flex-direction:column }
  /* o vão vai pro fim: o texto fica acima e o livro pousa embaixo */
  .encaixe__vao{ order:2; height:min(54svh, 470px) }
  .encaixe__texto{ order:1 }
}

/* ---------------- 03 · conteúdo: livro no centro ---------------- */
.conteudo__grid{
  display:grid; gap:clamp(28px,3vw,48px); align-items:center;
  margin-bottom:calc(var(--s-5) * -1);
  grid-template-columns:1fr;
}
@media (min-width:1000px){
  /* bullets, livro, bullets. O vão do meio é a terceira parada. */
  .conteudo__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr) }
}
.conteudo__vao{ width:100%; height:min(78svh, 700px); order:-1; position:relative }
@media (min-width:1000px){ .conteudo__vao{ order:0 } }

.itens{ list-style:none; display:flex; flex-direction:column; gap:clamp(24px,2.6vw,40px) }
.itens li{
  display:flex; gap:var(--s-4); align-items:flex-start;
  padding:var(--s-5); border-radius:var(--r-md);
  border:1px solid var(--line);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 84%, transparent) 0%, transparent 150%);
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.itens li:hover{
  border-color:color-mix(in srgb, var(--gold-600) 40%, transparent);
  transform:translateY(-2px);
}
.itens p{ margin:0; color:var(--ink-300); line-height:1.5 }
.itens__svg{ width:16px; height:16px; display:block }
.itens__ico{
  flex:0 0 30px; width:30px; height:30px; border-radius:var(--r-full);
  display:grid; place-items:center; font-size:12px; margin-top:2px;
  color:var(--acento); border:1px solid color-mix(in srgb, var(--gold-600) 45%, transparent);
  background:color-mix(in srgb, var(--gold-900) 34%, transparent);
}
/* à direita o texto encosta no livro: ícone depois do texto */
/* Com box, alinhar à direita piora a leitura: a borda do cartão já
   resolve a simetria e o texto continua começando no mesmo lugar. */
@media (min-width:1000px){
  .itens--esq li{ flex-direction:row }
}

/* o que seria o sétimo item vira remate com CTA */
.remate{
  margin:clamp(16px,1.8vw,32px) auto 0; max-width:620px;
  display:flex; flex-direction:column; align-items:center; gap:var(--s-5);
}
/* Medido: a melhor quebra em 2 linhas pede 457px de largura ("Um chamado
   para uma Teshuvá" / "genuína, o retorno às raízes."). Com 432 caía em 3.
   480 dá folga e continua longe dos 862 que uma linha só exigiria. */
.remate h3{
  font-size:var(--t-h35); line-height:1.2; letter-spacing:-.02em;
  max-width:min(480px, 92vw); text-wrap:balance;
}

@media (max-width:999px){
  .conteudo__vao{ height:min(50svh, 430px) }
  /* empilhado, o remate encosta no último card: no desktop ele mora em
     outra coluna e os 16px de cima bastavam. A margem negativa do grid
     existe pra aproximar no desktop e aqui só come o respiro. */
  .conteudo__grid{ margin-bottom:0 }
  .remate{ margin-top:clamp(40px,7vw,64px) }
}

/* O livro só captura ponteiro quando o controle é dele. Durante a
   viagem ele atravessa a página, então não rouba clique nem scroll. */
.jornada__livro{ pointer-events:none }
.jornada__livro.e-manual{ pointer-events:auto; cursor:grab }
.jornada__livro.e-manual:active{ cursor:grabbing }

/* ---------------- 05 · storytelling ---------------- */
.origem__perguntas{
  display:grid; gap:var(--s-4); margin:clamp(36px,4vw,56px) 0;
  text-align:left;
}
@media (min-width:760px){ .origem__perguntas{ grid-template-columns:1fr 1fr; gap:var(--s-5) } }

.pergunta{
  padding:var(--s-5) var(--s-5) var(--s-5) var(--s-6);
  border-left:2px solid var(--line-forte); border-radius:0 var(--r-md) var(--r-md) 0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--surface) 70%, transparent), transparent 90%);
}
.pergunta .rotulo{ display:block; margin-bottom:var(--s-3) }
.pergunta p{ margin:0; font-size:var(--t-h4); line-height:1.32; color:var(--ink-400); font-style:italic }
/* a segunda é a que vale: borda e texto ganham peso */
.pergunta--vale{ border-left-color:var(--acento) }
.pergunta--vale p{ color:var(--texto-forte); font-style:normal }


/* ---------------- ESPEC (compartilhada) ----------------
   Nome próprio porque .ficha já é a lista de ícones do hero.
   Pares rótulo/valor, o mesmo idioma da ficha do hero. Aparece no
   autor e na oferta pra as seções falarem a mesma língua. */
.espec{ display:grid; gap:0 }
.espec > div{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-5); padding:14px 0; border-bottom:1px solid var(--line);
}
.espec > div:first-child{ border-top:1px solid var(--line) }
.espec dd{ font-family:var(--sans); font-size:15px; color:var(--texto-forte); text-align:right }

/* variante em linha: vira régua de especificação acima dos planos */
.espec--linha{
  grid-template-columns:repeat(2,1fr); gap:0 clamp(24px,3vw,48px);
  max-width:940px; margin:0 auto clamp(40px,4vw,64px);
}
@media (min-width:840px){ .espec--linha{ grid-template-columns:repeat(4,1fr) } }
.espec--linha > div{
  flex-direction:column; align-items:flex-start; gap:6px;
  border-bottom:none; border-top:1px solid var(--line); padding:var(--s-4) 0 0;
}
.espec--linha > div:first-child{ border-top:1px solid var(--line) }
.espec--linha dd{ text-align:left }

/* ---------------- 05 · A VIRADA ----------------
   As duas perguntas em confronto, com o eixo marcando a troca. É o
   argumento da seção desenhado, não dois cartões lado a lado. */
.virada{
  display:grid; gap:var(--s-5); align-items:stretch;
  max-width:1000px; margin:clamp(40px,5vw,64px) auto 0;
}
@media (min-width:860px){ .virada{ grid-template-columns:1fr auto 1fr; gap:clamp(24px,3vw,40px) } }

.virada__lado{
  padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface);
}
.virada__lado .rotulo{ display:block; margin-bottom:var(--s-3) }
.virada__lado p{
  margin:0; font-family:var(--serif); font-size:clamp(21px,2vw,27px);
  line-height:1.18; letter-spacing:-.02em; color:var(--ink-600);
}
/* a que vale acende com a mesma borda em gradiente da 04 */
.virada__lado--vale{
  border-color:transparent;
  background:
    linear-gradient(128deg, color-mix(in srgb, var(--plum-900) 34%, transparent), transparent 66%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(128deg, var(--plum-500), var(--gold-500)) border-box;
}
.virada__lado--vale p{ color:var(--texto-forte) }
.virada__lado--vale .rotulo{ color:var(--gold-400) }

/* eixo: some no empilhamento e vira traço horizontal no mobile */
.virada__eixo{ display:grid; place-items:center }
.virada__eixo span{
  display:block; width:44px; height:1px;
  background:linear-gradient(90deg, var(--line-forte), var(--acento));
}
@media (min-width:860px){
  .virada__eixo span{ width:56px }
}
@media (max-width:859px){
  .virada__eixo span{ width:1px; height:34px;
    background:linear-gradient(180deg, var(--line-forte), var(--acento)) }
}

.origem__fecho{ margin-top:clamp(48px,5vw,80px) }
.origem__fecho p + p{ margin-top:var(--s-5) }

/* =========================================================
   06 · AUTOR
   ========================================================= */
.autor__grid{ display:grid; gap:clamp(32px,4vw,72px); align-items:center }
@media (min-width:840px){ .autor__grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr) } }

/* placeholder de imagem: assumido como provisório, com rótulo visível
   em vez de fingir que é arte final */
.ph{
  display:grid; place-items:center; border-radius:var(--r-lg);
  border:1px dashed var(--line-forte);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--plum-900) 45%, transparent), transparent 70%),
    var(--surface);
}
/* a foto ocupa o mesmo lugar que o placeholder ocupava */
.autor__foto img{
  width:100%; max-height:600px; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-lg); border:1px solid var(--line); margin-inline:auto;
}

.autor__bio h2{ margin-top:var(--s-3) }
.autor__bio p{ margin-top:var(--s-5) }
.autor__bio .espec{ margin-top:clamp(28px,3vw,40px) }
.autor__foto figcaption{ display:block; margin-top:var(--s-4); text-align:center }
/* ---------------- EM CAMPO (dentro da 06) ----------------
   Reforço de autoridade com material real: o autor na terra sobre a
   qual escreve. Vertical porque é como foi filmado; recortar pra
   paisagem jogaria fora metade do enquadramento. */
.campo{ margin-top:clamp(56px,6vw,88px) }

.campo__titulo{ display:block; margin-bottom:var(--s-5); color:var(--ink-400) }

.campo__faixa{
  list-style:none; display:grid; gap:var(--s-4);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:840px){ .campo__faixa{ grid-template-columns:repeat(4,1fr); gap:var(--s-5) } }

.campo__item figure{ margin:0 }
.campo__video{
  display:block; width:100%; aspect-ratio:9/16; object-fit:cover;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--surface);
}
.campo__item figcaption{ display:block; margin-top:var(--s-3) }

/* uma parada de leitura por vez: o vídeo sob o cursor sobe ao primeiro
   plano e os outros recuam, sem tirar nenhum de vista */
.campo__faixa:hover .campo__item{ opacity:.55; transition:opacity .4s ease }
.campo__faixa .campo__item:hover{ opacity:1 }

@media (prefers-reduced-motion:reduce){
  .campo__faixa:hover .campo__item, .campo__faixa .campo__item:hover{ opacity:1 }
}

/* frase do autor, fechando a bio: citação curta, sem aspas gigantes */
.autor__bio .versiculo{ margin:clamp(28px,3vw,40px) 0 0; padding-left:var(--s-5); border-left:1px solid var(--gold-500) }
.versiculo .rotulo{ display:block; color:var(--ink-400) }
.versiculo blockquote{ margin:var(--s-3) 0 0 }
.autor__bio .versiculo p{ margin-top:0 }
.versiculo__heb{ font-size:var(--t-h35); line-height:1.2; font-style:italic; color:var(--gold-300); letter-spacing:-.01em }
.autor__bio .versiculo .versiculo__trad{ margin-top:var(--s-3); color:var(--ink-300) }

/* =========================================================
   06b · COMUNIDADE
   O player é desenho: retrato do autor numa moldura de vídeo, com
   controles que não fazem nada. Por isso nada nele é focável.
   ========================================================= */
.comunidade__grid{ display:grid; gap:clamp(36px,4vw,72px); align-items:center }
@media (min-width:880px){ .comunidade__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) } }

.player{ margin:0 }
.player__tela{
  position:relative; aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-forte); background:var(--surface);
  box-shadow:var(--sombra-alta), 0 0 120px color-mix(in srgb, var(--plum-600) 22%, transparent);
}
.player__tela img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 15% }
/* escurece topo e base pra os controles lerem sobre a foto */
.player__tela::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgb(18 13 12 / .72), transparent 26%, transparent 58%, rgb(18 13 12 / .88));
}
.player__topo, .player__barra{ position:absolute; left:0; right:0; z-index:1; display:flex; align-items:center; gap:var(--s-3); padding:clamp(14px,1.6vw,22px) }
.player__topo{ top:0; justify-content:space-between; flex-wrap:wrap }
.player__selo{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--ink-950); background:var(--gold-300); padding:5px 12px; border-radius:var(--r-full);
}
.player__selo i{ width:7px; height:7px; border-radius:50%; background:var(--plum-700) }
.player__aula{ font-family:var(--sans); font-size:14px; color:var(--ink-100) }

/* play fora do rosto: pílula no canto inferior esquerdo, acima da barra */
.player__play{
  position:absolute; z-index:1; left:clamp(14px,1.6vw,22px); bottom:clamp(52px,5vw,68px);
  display:inline-flex; align-items:center; gap:10px; padding:8px 18px 8px 8px; border-radius:var(--r-full);
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink-950);
  background:linear-gradient(180deg, var(--gold-200), var(--gold-400));
  box-shadow:0 8px 24px rgb(0 0 0 / .45);
}
.player__play i{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--ink-950); color:var(--gold-300) }
.player__play svg{ width:14px; margin-left:2px }
/* no celular o player é pequeno e a pílula cairia sobre o rosto */
@media (max-width:599px){ .player__aula, .player__play{ display:none } }

.player__barra{ bottom:0; color:var(--ink-100); font-family:var(--sans); font-size:13px; font-variant-numeric:tabular-nums }
.player__ico{ width:18px; height:18px; flex:0 0 auto }
.player__trilho{ flex:1; height:4px; border-radius:4px; background:rgb(255 255 255 / .22); overflow:hidden }
.player__trilho span{ display:block; width:6%; height:100%; background:var(--gold-300) }

.comunidade__texto h2{ margin-top:var(--s-3) }
.comunidade__texto p{ margin-top:var(--s-5) }
.comunidade__texto .espec{ margin-top:clamp(28px,3vw,40px) }
.comunidade__texto .btn{ margin-top:clamp(28px,3vw,40px) }
.player__titulo{ flex:0 1 auto; max-width:48%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (max-width:599px){ .player__titulo{ display:none } }

/* ---- as 20 aulas ----
   Numeradas porque são uma sequência de verdade. Uma grade só, com as
   vinte de uma vez: quebrar em duas listas desalinhava as colunas e as
   linhas de uma metade não encontravam as da outra. */
.aulas{ margin-top:clamp(64px,7vw,104px) }
.aulas__cabeca{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--s-2) var(--s-5);
  padding-bottom:var(--s-4); border-bottom:1px solid var(--line) }
.aulas__cabeca p{ margin:0 }
.aulas__cabeca .rotulo{ color:var(--acento) }
.aulas__lista{ list-style:none; margin:0; padding:0; display:grid; column-gap:var(--s-7) }
@media (min-width:840px){ .aulas__lista{ grid-template-columns:1fr 1fr } }
.aulas__lista li{ display:grid; grid-template-columns:40px 1fr; gap:var(--s-3); align-items:baseline;
  padding-block:var(--s-4); border-bottom:1px solid var(--line) }
/* a última linha de cada coluna não precisa de filete: o bloco já fecha */
@media (min-width:840px){ .aulas__lista li:nth-last-child(-n+2){ border-bottom:0 } }
@media (max-width:839px){ .aulas__lista li:last-child{ border-bottom:0 } }
.aulas__n{ font-family:var(--sans); font-size:13px; color:var(--ink-500); font-variant-numeric:tabular-nums }
.aulas__lista p{ margin:0; color:var(--ink-100); line-height:1.4 }
.aulas__trad{ display:block; margin-top:2px; font-family:var(--sans); font-size:13px; color:var(--ink-500) }

.aulas__alem{ margin-top:clamp(40px,4vw,56px); padding:clamp(24px,3vw,36px); border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface); display:grid; gap:var(--s-3); max-width:880px }
.aulas__alem p{ margin:0 }
.aulas__alem .rotulo{ color:var(--acento) }

/* =========================================================
   07 · PROVA SOCIAL
   ========================================================= */
.depoimentos{ list-style:none; display:grid; gap:var(--s-5) }
@media (min-width:700px){  .depoimentos{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){
  /* tamanhos diferentes de propósito: o destaque puxa a leitura e os
     outros orbitam, em vez de quatro cartões idênticos em fila */
  .depoimentos{ grid-template-columns:repeat(3,1fr) }
  .depoimento--destaque{ grid-row:span 2 }
  .depoimento:last-child{ grid-column:span 2 }
}
.depoimento{
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-5);
  padding:clamp(24px,2.2vw,32px); border-radius:var(--r-md); border:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 80%, transparent), transparent 150%);
}
.depoimento p{ margin:0; color:var(--ink-200); font-size:18px; line-height:1.45; text-wrap:pretty }
.depoimento--destaque{
  justify-content:flex-end;
  border-color:color-mix(in srgb, var(--gold-700) 45%, transparent);
  background:
    linear-gradient(168deg, color-mix(in srgb, var(--plum-900) 34%, transparent), transparent 62%),
    var(--surface);
}
.depoimento--destaque p{
  font-family:var(--serif); font-size:clamp(24px,2.3vw,32px);
  line-height:1.18; letter-spacing:-.02em; color:var(--texto-forte);
}
.depoimento footer{ display:flex; align-items:center; gap:var(--s-4) }

/* Avatar por iniciais e não por foto: rosto de pessoa real ao lado de
   uma fala que a pessoa não disse é outra categoria de problema. Quando
   os depoimentos verdadeiros chegarem, com foto de verdade, isto vira
   uma <img> e o gradiente sai. */
.av{
  width:40px; height:40px; border-radius:50%; flex:0 0 40px;
  display:grid; place-items:center;
  font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--gold-100); letter-spacing:.02em;
  background:linear-gradient(140deg, var(--plum-700), var(--gold-800));
  border:1px solid color-mix(in srgb, var(--gold-600) 30%, transparent);
}
.depoimento__quem{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.depoimento__quem b{
  font-family:var(--sans); font-weight:500; font-size:14px;
  color:var(--texto-forte); letter-spacing:.01em;
}
.depoimento__quem{ font-family:var(--sans); font-size:12.5px; color:var(--ink-500) }

/* =========================================================
   08 · OFERTA
   Dois planos: o ebook e o combo com a comunidade. O combo é o maior e
   o único com borda acesa, e a ação fica travada na base dos dois pra o
   botão do ebook não flutuar no meio da altura do outro.
   ========================================================= */
.planos{
  display:grid; gap:var(--s-5); max-width:940px; margin-inline:auto;
  align-items:stretch;
}
@media (min-width:840px){ .planos{ grid-template-columns:1fr 1.06fr; gap:var(--s-6) } }

.plano{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(30px,3vw,42px); border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface);
}
.plano--destaque{
  /* mesma borda acesa dos níveis do método: ameixa entrando em ouro na
     diagonal de 128°. A camada sólida vai como linear-gradient de uma
     cor só, porque cor solta no meio do shorthand invalida tudo. */
  border-color:transparent;
  background:
    linear-gradient(128deg,
      color-mix(in srgb, var(--plum-800) 40%, transparent) 0%,
      color-mix(in srgb, var(--plum-900) 26%, transparent) 40%,
      transparent 74%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(128deg, var(--plum-500) 0%, var(--plum-400) 42%, var(--gold-500) 100%) border-box;
}

/* o selo assenta na quina em vez de cavalgar a borda do meio */
.plano__selo{
  position:absolute; top:0; right:clamp(24px,3vw,36px); translate:0 -50%;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:6px 14px; border-radius:var(--r-full);
  background:linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color:var(--ink-950); white-space:nowrap;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .42), 0 2px 6px rgb(0 0 0 / .35);
}

.plano__topo h3{ font-size:var(--t-h4); margin-bottom:var(--s-2) }
.plano__promessa{ margin:0; font-size:15px; color:var(--texto-suave); max-width:30ch }

/* ---- preço ----
   Enquanto o valor real não chega, R$ 000 fica óbvio de propósito. A
   âncora e a parcela ficam em linhas próprias pra não competirem. */
.plano__preco{
  margin:clamp(24px,2.6vw,34px) 0 0; display:grid; gap:2px;
  font-family:var(--sans); color:var(--texto-suave);
}
.plano__de{ font-size:13px; color:var(--ink-600) }
.plano__de s{ text-decoration-color:var(--ink-700) }
.plano__preco b{
  font-size:clamp(34px,3.4vw,46px); font-weight:600; line-height:1;
  color:var(--texto-forte); letter-spacing:-.02em;
}
.plano__parcela{ font-size:13px; color:var(--ink-500) }

/* ---- lista ----
   Ícone desenhado, não glifo: ✦ era tipografia fazendo papel de ícone. */
.plano__lista{
  list-style:none; display:flex; flex-direction:column; gap:var(--s-4);
  margin:clamp(24px,2.6vw,32px) 0 0;
  padding-top:clamp(24px,2.6vw,32px); border-top:1px solid var(--line);
}
.plano__lista li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--ink-300) }
.plano__ico{
  flex:0 0 auto; width:16px; height:16px; margin-top:4px; color:var(--acento);
}
.plano--destaque .plano__ico{ color:var(--gold-300) }

/* ---- ação, colada na base dos dois cartões ---- */
.plano__acao{ margin-top:auto; padding-top:clamp(28px,3vw,40px); display:grid; gap:var(--s-4) }
.plano__acao .btn{ justify-content:center; width:100% }
.plano__nota{ justify-content:center; gap:8px; margin:0 }
.plano__cadeado{ width:14px; height:14px; flex:0 0 auto; color:var(--ink-600) }
/* a comunidade é order bump: quem escolhe o plano cheio precisa saber
   que ela entra dentro do checkout, senão o preço parece não bater */
.plano__bump{ color:var(--acento-forte) }

/* a ficha do hero reaparece aqui, fechando a seção. Sem filete, pela
   mesma razão do hero: a seção é superfície contínua e o traço corta a
   atmosfera no meio. O espaço já separa. */
.ficha--oferta{
  grid-template-columns:repeat(2, 1fr); max-width:940px;
  margin:clamp(56px,6vw,88px) auto 0;
  gap:clamp(28px,3vw,40px) var(--s-5);
}
@media (min-width:840px){ .ficha--oferta{ grid-template-columns:repeat(4, 1fr) } }

/* =========================================================
   09 · GARANTIA
   ========================================================= */
.selo{ display:grid; justify-items:center; gap:var(--s-4);
  margin:0 auto clamp(20px,2.6vw,32px) }
.selo__palco{
  position:relative; width:clamp(260px,26vw,360px); aspect-ratio:1;
  display:grid; place-items:center; color:var(--acento);
}
.selo__palco canvas{ position:relative; z-index:2 }

.selo__brilho{
  position:absolute; inset:-32%; z-index:1; pointer-events:none;
  opacity:0; transition:opacity .8s ease;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--plum-500) 34%, transparent) 0%,
      color-mix(in srgb, var(--plum-700) 22%, transparent) 34%, transparent 66%);
}
.selo--pronto .selo__brilho{ opacity:1 }

/* faíscas: quatro pontos que respiram fora de fase */
.selo__faisca{
  position:absolute; z-index:3; width:5px; height:5px; border-radius:50%;
  background:var(--gold-100); pointer-events:none;
  opacity:0; animation:faiscar 3.4s ease-in-out infinite;
}
.selo--pronto .selo__faisca:nth-of-type(1){ top:12%; left:20%; animation-delay:0s }
.selo--pronto .selo__faisca:nth-of-type(2){ top:24%; right:12%; animation-delay:.9s; width:4px; height:4px }
.selo--pronto .selo__faisca:nth-of-type(3){ bottom:20%; left:11%; animation-delay:1.8s; width:3px; height:3px }
.selo--pronto .selo__faisca:nth-of-type(4){ bottom:12%; right:22%; animation-delay:2.6s }
@keyframes faiscar{
  0%, 100%{ opacity:0; transform:scale(.4) }
  50%{ opacity:.9; transform:scale(1) }
}

.selo__reserva{ width:34px; height:34px; transition:opacity .5s ease; z-index:2 }
.selo--pronto .selo__reserva{ opacity:0; position:absolute; pointer-events:none }
.selo__legenda{ color:var(--ink-500) }

@media (prefers-reduced-motion:reduce){ .selo__faisca{ animation:none; opacity:.7 } }

.garantia h2{ max-width:15ch; margin-inline:auto; text-wrap:balance }
.garantia p{ margin-top:var(--s-5) }

/* =========================================================
   10 · FAQ
   ========================================================= */
.faq__grid{ display:grid; gap:clamp(40px,4vw,72px) }
@media (min-width:1000px){
  .faq__grid{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); align-items:start }
  /* mesma gramática da 04: o título fica, a lista passa */
  .faq__cabeca{ position:sticky; top:calc(var(--nav-topo) + var(--nav-h) + clamp(40px,7vh,96px)) }
}
.faq__cabeca h2{ margin-top:var(--s-3) }
.faq__cabeca .suave{ margin-top:var(--s-5); max-width:34ch }
@media (min-width:1000px){
  /* a coluna comporta a frase inteira; os 34ch deixavam "leitura."
     pendurada sozinha na segunda linha. A frase foi encurtada junto:
     com o texto antigo, a linha media exatamente a largura da coluna e
     qualquer fallback de fonte a faria vazar. */
  .faq__cabeca .suave{ max-width:none; white-space:nowrap }
}

.faq{ border-top:1px solid var(--line) }
.faq summary .rotulo{ flex:0 0 auto; color:var(--ink-600); transition:color .25s ease }
.faq details[open] summary .rotulo, .faq summary:hover .rotulo{ color:var(--acento) }

.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; padding:var(--s-5) 0;
  display:flex; align-items:baseline; gap:var(--s-5);
  color:var(--texto-forte); font-size:17px; transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:'+'; font-family:var(--sans); color:var(--acento); font-size:18px;
  transition:rotate .25s ease; flex:0 0 auto; margin-left:auto;
}
.faq details[open] summary::after{ rotate:45deg }
.faq summary:hover{ color:var(--acento) }
.faq details p{ margin:0 0 var(--s-5) calc(var(--s-5) + 22px); max-width:52ch; color:var(--ink-400) }

/* =========================================================
   11 · CTA FINAL
   ========================================================= */
.fechamento{ position:relative; overflow-x:clip; text-align:center }
.fechamento__luz{
  position:absolute; inset:-40% -10%; pointer-events:none;
  background:radial-gradient(50% 46% at 50% 52%,
    color-mix(in srgb, var(--gold-800) 30%, transparent) 0%, transparent 68%);
}
/* eco do YESHUA do hero: a página abre e fecha com a mesma marca d'água */
.fechamento__gigante{
  /* abaixo da headline: atrás do botão, onde não disputa a leitura */
  position:absolute; top:68%; left:50%; translate:-50% -50%;
  font-family:var(--serif); font-size:clamp(72px,13vw,210px); line-height:.8;
  letter-spacing:-.05em; white-space:nowrap; pointer-events:none; opacity:.055;
  background:linear-gradient(180deg, var(--texto-forte), transparent 82%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fechamento > .container{ position:relative; z-index:2 }
/* 18ch deixava "revelação." sozinha numa terceira linha; 24ch fecha em duas */
.fechamento h2{ max-width:24ch; margin-inline:auto; text-wrap:balance }
.fechamento .btn{ margin-top:clamp(32px,4vw,48px) }
.fechamento .lead{ margin-top:clamp(28px,3vw,40px); max-width:46ch; margin-inline:auto }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{ border-top:1px solid var(--line); padding-block:var(--s-7) }
.rodape__int{ display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-6); justify-content:space-between; align-items:center }