/* =====================================================================
   Hormones Mentoring ELITE — componentes das dobras
   Todo componente aqui puxa --neon / --glow / --line da paleta da dobra,
   então nenhum precisa saber que a página é dourada.
   ===================================================================== */

/* =====================================================================
   FUNDO EM IMAGEM — um por dobra
   Uso: <div class="bg-img" style="background-image:url('...');--blend:soft-light;--op:.6">
   A URL entra por background-image no style do elemento — NUNCA por
   custom property: url() dentro de var() resolve relativo ao ARQUIVO CSS
   e o navegador procura em assets/css/assets/img/... (404 mudo).
   ===================================================================== */
.bg-img{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  mix-blend-mode:var(--blend,soft-light);
  opacity:var(--op,.7);
  filter:var(--fx,none);
  transition:opacity .85s var(--ease);
  /* morre nas duas pontas: sem isso a imagem cria aresta contra a vizinha */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 3%,#000 92%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 3%,#000 92%,transparent 100%);
}

/* =====================================================================
   PARA QUEM É — dobra presa: uma frase por vez
   A seção é alta e o palco trava na tela; a rolagem escolhe qual frase
   está no ar. A foto NÃO sai do lugar — o movimento é só na troca.
   A altura da seção é o "tempo" da dobra: 4 frases pedem ~360vh.
   ===================================================================== */
.quem{padding:0;height:360vh}
.quem-stage{
  position:sticky;top:0;
  /* as duas linhas: o iOS antes do 15.4 descarta a regra inteira se só
     houver svh, a altura vira auto e o sticky perde a âncora */
  height:100vh;height:100svh;
  display:grid;place-items:center;
}
/* lado invertido: a figura vai para a ESQUERDA e o texto para a direita.
   Feito por `order`, não trocando o HTML — assim a ordem de leitura para
   quem usa leitor de tela continua sendo título → frases → figura. */
.quem-grid{
  display:grid;grid-template-columns:.82fr 1fr;gap:clamp(28px,4.6vw,64px);
  align-items:center;width:100%;
}
.quem-col{min-width:0;order:2}
.quem-foto{order:1}

.quem-frases{
  position:relative;display:grid;margin-top:var(--sp-4);
  /* altura fixa: a frase mais longa define o palco. Sem isso a troca
     empurra os tracinhos pra cima e pra baixo a cada rolagem. */
  height:min(30vh,210px);
}
.quem-frase{
  grid-area:1/1;align-self:center;pointer-events:none;
  opacity:0;filter:blur(14px);transform:translateY(26px) scale(.99);
  transition:opacity .6s var(--ease),filter .6s var(--ease),transform .6s var(--ease);
}
.quem-frase.is-active{opacity:1;filter:none;transform:none}
.quem-frase p{
  font-family:'Sora',sans-serif;font-weight:300;
  font-size:clamp(19px,2.3vw,29px);line-height:1.34;color:var(--fg);
}
.quem-frase b{font-weight:500;color:var(--neon-hi);text-shadow:0 0 16px var(--glow)}
/* revelação palavra a palavra */
.quem-frase .w{
  display:inline-block;opacity:.14;filter:blur(3px);
  transition:opacity .45s var(--ease),filter .45s var(--ease);
}
.quem-frase.is-active .w{opacity:1;filter:none}

.quem-ticks{display:flex;gap:10px;margin-top:var(--sp-3)}
.quem-ticks i{
  width:34px;height:2px;background:var(--line);
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease);
}
.quem-ticks i.on{background:var(--neon);box-shadow:0 0 8px var(--glow)}

.quem-foto{
  width:100%;height:auto;border-radius:3px;
  box-shadow:0 30px 70px -46px #000,0 0 50px -34px var(--glow);
}

/* ---------- fundo da dobra 2 ----------
   Fica só no LADO DA FIGURA, não no espaço inteiro: ele é o ambiente do
   Dr. André, e atravessando a dobra toda competia com a leitura do texto.
   Mora no palco preso, então acompanha os 360vh em vez de deslizar.

   Duas máscaras somadas por mask-composite: uma dissolve em cima e embaixo
   (para não emendar com as dobras vizinhas) e outra dissolve para a direita,
   entregando o fundo liso onde o texto começa. */
.quem-bg{
  position:absolute;left:0;top:0;bottom:0;z-index:0;pointer-events:none;
  width:min(56%,900px);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.55;
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0,#000 14%,#000 62%,rgba(0,0,0,.5) 84%,transparent 100%),
    linear-gradient(90deg,#000 0,#000 52%,transparent 100%);
          mask-image:
    linear-gradient(180deg,transparent 0,#000 14%,#000 62%,rgba(0,0,0,.5) 84%,transparent 100%),
    linear-gradient(90deg,#000 0,#000 52%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
@media(max-width:960px){
  /* em coluna única a figura ocupa a largura toda, então o fundo também */
  .quem-bg{width:100%}
}

/* ---------- sequência quadro a quadro ----------
   A caixa reserva a proporção do quadro (900x1318) desde o primeiro pintar,
   então trocar de quadro nunca mexe no layout. */
.seq{
  position:relative;order:1;justify-self:center;
  width:100%;max-width:480px;aspect-ratio:900/1318;
}
.seq-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;
  /* o pé da figura dissolve: sem isso o recorte termina em corte reto e o
     movimento denuncia a emenda a cada quadro */
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 99%);
          mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 99%);
}

/* a linha de luz no pé: é ela que fecha a leitura, dando um chão para a
   figura em vez de um fim de imagem. Pulsa devagar — muda só brilho, então
   fica de pé mesmo com "reduzir movimento". */
.seq-linha{
  position:absolute;left:4%;right:4%;bottom:2%;height:1px;z-index:2;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb,var(--accent-hi) 85%,transparent) 28%,
    var(--accent-hi) 50%,
    color-mix(in srgb,var(--accent-hi) 85%,transparent) 72%,
    transparent);
  animation:seq-pulso 4.8s ease-in-out infinite;
}
/* o halo é um segundo elemento desfocado, não box-shadow: shadow em linha
   de 1px sai duro e some nas pontas */
.seq-linha::after{
  content:"";position:absolute;left:0;right:0;top:-7px;height:15px;
  background:radial-gradient(60% 100% at 50% 50%,
    color-mix(in srgb,var(--glow) 85%,transparent),transparent 75%);
  filter:blur(5px);
}
@keyframes seq-pulso{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
/* o halo de ambiente atrás da figura — só no celular (ver bloco 960px) */
.seq-bg{display:none}
@media(max-width:960px){
  .seq{max-width:min(300px,60vw)}
  .seq-bg{
    display:block;position:absolute;z-index:-1;
    left:-26%;right:-26%;top:-5%;bottom:-3%;
    background-size:cover;background-position:center;
    opacity:.5;
    /* máscara radial: o ambiente morre em volta e fica SÓ atrás do Dr.,
       em vez de virar uma faixa que atravessa a dobra */
    -webkit-mask-image:radial-gradient(66% 58% at 50% 46%,#000 0,#000 42%,transparent 100%);
            mask-image:radial-gradient(66% 58% at 50% 46%,#000 0,#000 42%,transparent 100%);
  }
}
@media(max-width:960px){
  .quem{height:330vh}
  .quem-stage{padding:3vh 0}
  .quem-grid{grid-template-columns:1fr;gap:var(--sp-2)}
  /* ordem no celular: rótulo, título, figura, frase, tracinhos.
     A figura entra ENTRE o título e a frase — daí os filhos da coluna
     virarem itens do grid pelo display:contents. */
  .quem-col{display:contents}
  .quem .eyebrow{order:1}
  .quem .h2{order:2;font-size:clamp(21px,5.4vw,28px)}
  .seq{order:3}
  .quem-frases{order:4;height:min(24vh,170px);margin-top:var(--sp-2);text-align:center}
  .quem-ticks{order:5;justify-content:center;margin-top:var(--sp-2)}
  .quem-frase p{font-size:clamp(18px,4.6vw,24px)}
  /* o fundo do palco sai: atravessando a coluna única, ele passava por
     baixo do texto. Quem faz o ambiente aqui é o halo dentro da figura. */
  .quem-bg{display:none}
}

/* =====================================================================
   DECLARAÇÃO — a frase-manifesto da página
   Rola normal, entra palavra a palavra e vira fumaça ao cruzar o topo.
   --exit vem do JS (0 inteira, 1 dissolvida). SEM transition no
   container: a saída acompanha o scroll e não pode ter atraso.
   ===================================================================== */
.decl{
  position:relative;isolation:isolate;background:var(--bg);
  padding:18vh 0 20vh;text-align:center;overflow:hidden;
}
/* o arco emoldura a declaração. O vão dele ocupa 67% da largura da arte,
   medido no arquivo — é o que define o max-width da frase mais abaixo,
   para o texto não encostar nas pilastras. */
.decl-arco{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;
  width:min(1180px,92vw);aspect-ratio:1500/964;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  opacity:.85;
  /* a base do arco é cortada no arquivo: dissolver o pé evita o corte reto */
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 82%,transparent 100%);
}
@media(max-width:860px){
  /* No celular o arco não emoldura nada: a arte é larga e o vão dela não
     cabe numa coluna estreita, então as pilastras cortavam o texto.
     A 230vw as colunas e a cimalha saem de quadro e sobra só o corredor
     escuro do miolo — vira ambiente, que é o que funciona aqui. */
  .decl-arco{width:230vw;opacity:.32}
}
.stmt{
  --exit:0;
  max-width:28ch;margin:0 auto;text-align:center;
  font-family:'Sora',sans-serif;font-weight:300;
  font-size:clamp(20px,2.6vw,32px);line-height:1.42;color:var(--fg);
  opacity:calc(1 - var(--exit));
  filter:blur(calc(var(--exit) * 18px));
  transform:translateY(calc(var(--exit) * -26px));
}
.stmt b{font-weight:500;color:var(--neon-hi);text-shadow:0 0 20px var(--glow)}
.stmt .w{
  display:inline-block;opacity:.1;filter:blur(3px);
  transition:opacity .55s var(--ease),filter .55s var(--ease);
}
.stmt.is-in .w{opacity:1;filter:none}
.decl .lead{max-width:56ch;margin:var(--sp-4) auto 0;font-size:var(--step--1)}

/* =====================================================================
   ENCONTROS — abas + grade de fotos + vídeo do encontro
   Dobra clara: as fotos respiram e a rolagem ganha um respiro.
   ===================================================================== */
/* as 4 abas na MESMA linha, em partes iguais: elas são uma linha do tempo
   (I → II → III → IV) e quebrar em 2×2 desmonta a leitura da sequência.
   Cabem porque o rótulo vira duas linhas dentro do botão — numeral em
   cima, cidade embaixo — em vez de uma tira longa. */
.enc-abas{
  display:flex;gap:8px;justify-content:center;margin-bottom:var(--sp-5);
}
.enc-aba{
  border:0;cursor:pointer;padding:12px 14px;border-radius:2px;background:transparent;
  flex:1 1 0;min-width:0;display:grid;gap:4px;text-align:center;
  font-family:'Sora',sans-serif;font-weight:500;
  text-transform:uppercase;color:var(--fg-dim);min-height:44px;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.ea-n{font-size:11px;letter-spacing:.26em;opacity:.72}
.ea-c{font-size:var(--step--2);letter-spacing:.1em;font-weight:600}
.enc-aba:hover{color:var(--fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--neon) 55%,transparent)}
.enc-aba[aria-selected="true"]{
  color:var(--accent-hi);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--accent),0 0 24px -14px var(--glow);
}
.enc-painel[hidden]{display:none}
/* fotos de um lado, vídeo do outro. O vídeo é um objeto só contra uma
   grade de 3 fileiras, então fica centrado na vertical: a sobra de ar
   acima e abaixo é simétrica e lê como respiro, não como buraco. */
/* alinhado pelo TOPO, não centrado: o vídeo é 16:9 e a grade de fotos tem
   3 fileiras, então as alturas não fecham. Centrado, o vídeo flutua com ar
   simétrico em volta e lê como buraco; compartilhando a linha de cima com
   a primeira fileira de fotos, a diferença lê como coluna mais longa. */
/* o vídeo domina: 1.28 contra .72. Nessa proporção as alturas dos dois
   blocos também quase empatam (vídeo 16:9 largo × 3 fileiras de fotos
   estreitas), então a dobra fecha sem sobra de ar. */
.enc-corpo{
  display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(24px,3.6vw,48px);
  align-items:start;
}
.enc-video{min-width:0}
/* 2 colunas × 3 fileiras: são 6 fotos por encontro. minmax(0,1fr) e não
   auto-fill, porque a coluna já é estreita e auto-fill colapsaria pra 1. */
.enc-fotos{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
.enc-foto{
  position:relative;display:block;padding:0;border:0;cursor:zoom-in;
  /* 16/10 é o formato das fotos de referência (348x216) — recorte mínimo */
  aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:var(--bg-3);
  box-shadow:0 18px 44px -34px rgba(40,26,8,.8);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.enc-foto img{width:100%;height:100%;object-fit:cover}
.enc-foto:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 54px -30px rgba(40,26,8,.85),0 0 0 1px var(--accent);
}
.enc-nota{
  margin-top:var(--sp-4);text-align:center;font-size:var(--step--2);
  letter-spacing:.06em;color:var(--fg-dim);
}
@media(max-width:900px){
  /* no celular o vídeo vem primeiro: é o gancho da dobra */
  .enc-corpo{grid-template-columns:1fr;gap:var(--sp-4)}
  .enc-video{order:1}
  .enc-fotos{order:2}
}
@media(max-width:640px){
  .enc-fotos{gap:8px}
  /* As abas viram GRADE 2x2, não tira que rola. Rolando de lado, a terceira
     e a quarta ficavam cortadas na borda e a pessoa não via que existiam —
     aba escondida é aba que ninguém clica. Em 2x2 as quatro aparecem. */
  .enc-abas{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
  }
  .enc-aba{padding:10px 8px}
  .ea-n{font-size:10px;letter-spacing:.18em}
  .ea-c{letter-spacing:.04em;font-size:var(--step--2)}
}

/* ---- lightbox das fotos ---- */
.lbox{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(8,4,1,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.lbox.is-open{display:flex}
.lbox img{
  max-width:min(1200px,94vw);max-height:86vh;width:auto;height:auto;border-radius:3px;
  box-shadow:0 40px 100px -40px #000,0 0 0 1px rgba(240,199,102,.32);
}
.lbox-fechar,.lbox-nav{
  position:absolute;border:0;cursor:pointer;padding:0;
  width:52px;height:52px;border-radius:50%;
  background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(240,199,102,.4);
  transition:box-shadow .3s,background .3s;
}
.lbox-fechar:hover,.lbox-nav:hover{background:rgba(0,0,0,.8);box-shadow:inset 0 0 0 1px #F0C766}
.lbox-fechar{top:18px;right:18px}
.lbox-fechar::before,.lbox-fechar::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:1px;background:#FFE7AE;
}
.lbox-fechar::before{transform:translate(-50%,-50%) rotate(45deg)}
.lbox-fechar::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lbox-nav::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;
  border-right:2px solid #FFE7AE;border-top:2px solid #FFE7AE;
}
.lbox-prev{left:18px}.lbox-prev::after{transform:translate(-30%,-50%) rotate(-135deg)}
.lbox-next{right:18px}.lbox-next::after{transform:translate(-70%,-50%) rotate(45deg)}
.lbox-conta{
  position:absolute;left:0;right:0;bottom:20px;text-align:center;
  font-family:'Sora',sans-serif;font-size:13px;letter-spacing:.24em;color:#C9AE88;
}
@media(max-width:640px){
  .lbox-nav{width:44px;height:44px}
  .lbox-prev{left:8px}.lbox-next{right:8px}
}

/* =====================================================================
   TIRA — os 7 vídeos do último evento numa faixa que rola de lado,
   fora da coluna de texto, ocupando a largura inteira da tela.
   Os vídeos são VERTICAIS (Shorts), então o card é 9:16: num card largo
   a miniatura do YouTube entra com tarja borrada nas laterais.
   A largura fixa do card com teto é de propósito — em tela grande ele
   para de crescer e sobra um pedaço do quinto card à direita, que é o
   que avisa "tem mais pro lado" sem precisar de instrução.
   ===================================================================== */
.tira-shell{position:relative}
.tira{
  --tira-gap:clamp(12px,1.6vw,22px);
  display:flex;gap:var(--tira-gap);overflow-x:auto;
  padding:0 var(--gutter) 10px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;cursor:grab;
}
.tira::-webkit-scrollbar{display:none}
.tira.is-dragging{scroll-snap-type:none;cursor:grabbing}
.tira.is-dragging .yt{cursor:grabbing}
.tira-item{flex:0 0 clamp(210px,22vw,300px);scroll-snap-align:center}
.tira-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;cursor:pointer;padding:0;border:0;
  background:rgba(10,6,2,.6);box-shadow:inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  transition:box-shadow .3s,background .3s;
}
.tira-nav::after{
  content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  border-right:2px solid var(--neon-hi);border-top:2px solid var(--neon-hi);
}
.tira-nav:hover{background:rgba(10,6,2,.9);box-shadow:inset 0 0 0 1px var(--neon)}
.tira-prev{left:16px}.tira-prev::after{transform:translate(-30%,-50%) rotate(-135deg)}
.tira-next{right:16px}.tira-next::after{transform:translate(-70%,-50%) rotate(45deg)}
/* As setas FICAM no celular. Eu as tinha escondido contando com o arraste
   do dedo, mas card cortado na borda sem nenhum controle visível lê como
   página quebrada — e se o toque falhar, não há segundo caminho. Com a seta,
   sempre há. */
@media(max-width:860px){
  .tira-nav{width:42px;height:42px}
  .tira-prev{left:6px}
  .tira-next{right:6px}
}

/* =====================================================================
   O QUE VOCÊ IRÁ RECEBER — o coração da oferta
   ===================================================================== */
.rec-box{
  position:relative;border-radius:5px;padding:clamp(28px,4vw,52px);
  background:linear-gradient(158deg,
    rgba(255,255,255,.055),
    rgba(255,255,255,.015) 46%,
    color-mix(in srgb,var(--neon) 6%,transparent));
  -webkit-backdrop-filter:blur(14px) saturate(120%);
          backdrop-filter:blur(14px) saturate(120%);
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 46px 90px -58px #000,
    0 24px 66px -52px var(--glow);
}
/* luz seguindo o mouse — sem mix-blend-mode, senão o vidro some no hover */
.rec-box::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  border-radius:5px;
  background:radial-gradient(320px 360px at var(--mx,50%) var(--my,50%),
             color-mix(in srgb,var(--neon-hi) 18%,transparent),
             color-mix(in srgb,var(--glow) 10%,transparent) 44%,
             transparent 72%);
  transition:opacity .55s var(--ease);
}
.rec-box:hover::after{opacity:1}
.rec-box>*{position:relative;z-index:1}
/* a faixa do ciclo: atravessa o topo do painel, ancorada por uma barra
   de ouro de 3px — o elemento mais forte da caixa */
.rec-ciclo{
  display:block;margin:0 0 var(--sp-4);padding:16px 20px;border-radius:2px;
  text-align:center;font-family:'Sora',sans-serif;font-weight:600;
  font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--neon-hi);text-shadow:0 0 12px var(--glow);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--neon) 14%,transparent),
    color-mix(in srgb,var(--neon) 3%,transparent));
  border-top:3px solid var(--neon);
  box-shadow:0 3px 24px -10px var(--glow);
}
.rec-lista{columns:2;column-gap:clamp(24px,3.4vw,48px)}
.rec-lista li{
  list-style:none;break-inside:avoid;
  padding:12px 0 12px 28px;position:relative;
  font-size:var(--step-0);color:var(--fg-dim);line-height:1.62;
}
.rec-lista li::before{
  content:"";position:absolute;left:2px;top:21px;width:11px;height:5px;
  border-left:1px solid var(--neon);border-bottom:1px solid var(--neon);
  transform:rotate(-45deg);filter:drop-shadow(0 0 5px var(--glow));
}
.rec-fecho{
  margin-top:var(--sp-5);text-align:center;
  font-size:var(--step-1);color:var(--fg);font-family:'Sora',sans-serif;font-weight:300;
}
@media(max-width:760px){.rec-lista{columns:1}}

/* =====================================================================
   DEPOIMENTOS — carrossel de capas verticais
   A miniatura do YouTube é 16:9 com o vídeo vertical no centro e as
   laterais borradas. object-fit:cover num card 9:16 recorta exatamente
   a faixa central, então o card mostra só o vídeo.
   ===================================================================== */
.dep-shell{position:relative;max-width:900px;margin:var(--sp-4) auto 0}
.dep-grid{
  --dep-gap:clamp(14px,2.4vw,26px);
  display:flex;gap:var(--dep-gap);overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;cursor:grab;
}
.dep-grid::-webkit-scrollbar{display:none}
.dep-grid.is-dragging{scroll-snap-type:none;cursor:grabbing}
.dep-grid.is-dragging .yt{cursor:grabbing}
.dep-item{flex:0 0 calc((100% - var(--dep-gap)*2)/3);scroll-snap-align:start}
.dep-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;cursor:pointer;padding:0;border:0;
  background:rgba(10,6,2,.55);
  box-shadow:inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:box-shadow .3s,background .3s;
}
.dep-nav::after{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;
  border-right:2px solid var(--neon-hi);border-top:2px solid var(--neon-hi);
}
.dep-prev{left:-23px}.dep-prev::after{transform:translate(-30%,-50%) rotate(-135deg)}
.dep-next{right:-23px}.dep-next::after{transform:translate(-70%,-50%) rotate(45deg)}
.dep-nav:hover{background:rgba(10,6,2,.85);box-shadow:inset 0 0 0 1px var(--neon)}
@media(max-width:860px){
  /* mesma lição da tira: a seta fica, senão não há caminho alternativo
     quando o arraste não pega */
  .dep-nav{width:42px;height:42px}
  .dep-prev{left:6px}
  .dep-next{right:6px}
  .dep-shell{margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1)}
  .dep-grid{padding:0 var(--gutter) 10px}
  /* o card cabe na tela COM o título junto: a largura também é limitada
     pela altura do viewport (36svh de largura ≈ 64svh de altura no 9:16) */
  .dep-item{flex:0 0 min(66vw,36svh,300px);scroll-snap-align:center}
}

/* =====================================================================
   AUTORIDADE — Dr. André
   ===================================================================== */
.aut-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(26px,5vw,58px);align-items:center}
.aut-head{margin-bottom:var(--sp-4)}
.aut-head .h2{margin-top:2px}
.aut-crm{
  font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-top:10px;
}
.aut-foto{
  width:100%;height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
}
/* o vídeo do Dr. André, o mesmo do Essentials */
.aut-video{
  width:100%;height:auto;display:block;border-radius:3px;
  box-shadow:0 24px 60px -40px #000,0 0 46px -28px var(--glow);
}
/* currículo em sanfona: no desktop nasce aberto e sem o botão */
.aut-cv{margin-top:var(--sp-3)}
.aut-cv>summary{
  display:none;align-items:center;justify-content:space-between;gap:14px;
  cursor:pointer;list-style:none;padding:16px 4px;min-height:44px;
  font-family:'Sora',sans-serif;font-size:var(--step--1);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--neon-hi);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.aut-cv>summary::-webkit-details-marker{display:none}
.aut-creds{margin:var(--sp-3) 0 0}
.aut-creds li{
  list-style:none;padding:9px 0 9px 20px;position:relative;
  font-size:var(--step--1);line-height:1.55;color:var(--fg-dim);
  border-bottom:1px solid var(--line);
}
.aut-creds li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--accent)}
.mx-ico{position:relative;width:16px;height:16px;flex:0 0 16px}
.mx-ico::before,.mx-ico::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.mx-ico::before{width:14px;height:1px}
.mx-ico::after{width:1px;height:14px}
.aut-cv[open]>summary .mx-ico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
@media(max-width:860px){
  .aut-grid{grid-template-columns:1fr;gap:var(--sp-3)}
  .aut-foto{max-width:400px;margin:0 auto}
  .aut-cv>summary{display:flex}
  .aut-cv:not([open]) .aut-creds{display:none}
}

/* =====================================================================
   CTA FINAL — arte sangrando na direita, conteúdo à esquerda
   A arte ocupa a metade direita inteira e dissolve na esquerda por uma
   máscara: assim ela encosta na borda da tela sem costura contra o fundo
   da dobra, e não depende de o arquivo ter fundo transparente.
   ===================================================================== */
.final{padding:0;text-align:left;overflow:hidden}
/* a coluna do texto leva a maior parte: a caixa precisa de corpo, e a arte
   ainda funciona no que sobra porque o recorte dela é retrato */
.final-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.28fr .72fr;align-items:center;
  min-height:min(88vh,860px);
}
/* o padding da esquerda repete a matemática do .wrap, então o texto
   alinha com o resto da página em vez de flutuar */
.final-col{
  padding:var(--sp-7) var(--sp-4) var(--sp-7)
          max(var(--gutter), calc(50vw - var(--maxw)/2 + var(--gutter)));
  min-width:0;
}
/* vw e não %: a logo vive dentro do .logo-luz (inline-block, encolhe pro
   conteúdo) e % ali vira dependência circular */
.final-logo{width:min(320px,34vw);height:auto;margin:0 auto var(--sp-4)}
.final-arte{position:relative;align-self:stretch;overflow:hidden;min-height:100%}
.final-arte img{
  width:100%;height:100%;object-fit:cover;object-position:center right;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%);
}
.final .final-box{
  position:relative;isolation:isolate;overflow:hidden;border-radius:5px;
  /* teto de largura: solta, a caixa esticava até o fim da coluna e o texto
     centrado dentro dela ficava com linhas longas demais para o tamanho */
  max-width:560px;margin:0 auto;
  padding:clamp(30px,3.4vw,48px) clamp(24px,2.8vw,40px);
  background:
    linear-gradient(152deg,rgba(255,255,255,.055),rgba(255,255,255,.016) 44%,rgba(255,255,255,0) 72%),
    var(--bg-2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
@media(max-width:900px){
  .final-grid{grid-template-columns:1fr;min-height:0}
  .final-col{order:1;padding:var(--sp-6) var(--gutter) var(--sp-4)}
  /* a logo cresce: 34vw dava ~135px numa tela de 400 e a marca desaparecia
     justamente na dobra que fecha a página */
  .final-logo{width:min(280px,66vw);margin:0 auto var(--sp-4)}
  .final-arte{order:2;height:min(56vh,460px)}
  .final-arte img{
    object-position:center top;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);
  }
  .final{text-align:center}
  .final h2,.final .lead{margin-left:auto;margin-right:auto}
}
/* raio de luz diluído entrando pelo canto superior esquerdo */
.final .final-box::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-34%;top:-46%;width:130%;height:105%;
  background:linear-gradient(102deg,
    transparent 34%,
    color-mix(in srgb,var(--neon-hi) 22%,transparent) 47%,
    color-mix(in srgb,var(--neon-hi) 8%,transparent) 53%,
    transparent 64%);
  filter:blur(30px);transform:rotate(-13deg);
}
/* fio de luz na aresta de cima */
.final .final-box::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--neon-hi) 50%,transparent),transparent);
}
/* o bloco continua no canto esquerdo, mas tudo DENTRO dele é centrado no
   mesmo eixo: logo, título, texto e botão. Alinhado à esquerda, a logo
   pequena sobre a caixa larga deixava o conjunto torto. */
.final-col{text-align:center}
.final h2{font-size:var(--step-3);max-width:26ch;margin:0 auto var(--sp-3);font-weight:600}
.final .lead{margin:0 auto var(--sp-4);max-width:52ch}

/* =====================================================================
   MOVIMENTO REDUZIDO
   A versão estática precisa ser DESENHADA, não sobrar do que foi
   desligado. Sai a rolagem presa (desloca a página); ficam as trocas de
   cor e luz, que não causam desconforto vestibular.
   Este bloco vem DEPOIS dos @media(max-width): mesma especificidade,
   quem vem por último vence — e uma regra de mobile fixando altura
   cortaria a grade do fallback pela metade.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  /* as 4 frases voltam a ser os 4 cartões, foto ao lado, sem palco preso */
  .quem{height:auto;padding:var(--sp-7) 0}
  .quem-stage{position:static;height:auto;display:block;padding:0}
  .quem-grid{align-items:center}
  .quem-frases{height:auto;display:grid;gap:12px}
  .quem-frase{
    grid-area:auto;align-self:auto;opacity:1;filter:none;transform:none;
    padding:20px 24px;border-radius:3px;background:var(--card);
    box-shadow:inset 1px 0 0 var(--neon),inset 0 0 70px -48px var(--glow);
  }
  .quem-frase p{font-size:var(--step--1);line-height:1.66;color:var(--fg-dim)}
  .quem-frase b{color:var(--fg);text-shadow:none}
  .quem-frase .w{opacity:1;filter:none}
  .quem-ticks{display:none}
  /* a tira continua rolável pela mão, só não anda sozinha (ver site.js) */
}