/* ==========================================================================
   Páginas das palestras, versão 2: cenas que andam com a rolagem (estilo Apple).
   Cada [data-cena] recebe --p (0 a 1) do palestra-v2.js conforme a pessoa rola.
   Sem JS ou com "reduzir movimento": tudo aparece parado, na posição final legível.
   ========================================================================== */

.v2 { background: var(--purple-900); }

/* ---------- Cena 1: o topo ---------- */
.cena-topo { position: relative; height: 170vh; background: var(--purple-900); }
.cena-topo__fixo { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; color: #fff; }
.cena-topo__fundo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  opacity: calc(.32 - var(--p, 0) * .18); transform: scale(calc(1.12 - var(--p, 0) * .12));
}
.cena-topo__fixo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 85%, rgba(138,105,212,.45), transparent 60%), linear-gradient(180deg, rgba(38,10,47,.55), rgba(38,10,47,.2) 40%, rgba(38,10,47,.95) 92%);
}
.cena-topo__titulo {
  position: absolute; inset: 10svh 0 auto; margin: 0; z-index: 1; text-align: center; pointer-events: none;
  font-weight: 900; text-transform: uppercase; line-height: .82; letter-spacing: -.01em;
}
.cena-topo__titulo span { display: block; }
.cena-topo__titulo .l1, .cena-topo__titulo .l2 { font-size: clamp(4.2rem, 15vw, 16rem); color: var(--yellow); text-shadow: 0 .04em 0 rgba(0,0,0,.35), 0 0 .35em rgba(38,10,47,.6); }
.cena-topo__titulo .l1 { transform: translateX(calc(var(--p, 0) * -18vw)); }
/* "DÁ" termina e "LUCRO…" começa um pouco antes e depois do centro: o espaço entre as palavras fica atrás da cabeça do Bruno */
.cena-topo__titulo .l2 { display: grid; grid-template-columns: 1fr min(20svh, 24vw) 1fr; color: #fff; font-size: clamp(3.6rem, 11.5vw, 12rem); transform: translateX(calc(-4svh + var(--p, 0) * 18vw)); }
.cena-topo__titulo .l2 > span:first-child { grid-column: 1; text-align: right; }
.cena-topo__titulo .l2 > span:last-child { grid-column: 3; text-align: left; }
/* "e não enche o saco!" aparece embaixo (.cena-topo__saco); no título fica só para o Google e leitores de tela */
.cena-topo__titulo .l3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Texto só para o Google e leitores de tela (ex.: nome da palestra dentro do título que é um logo) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Grande no centro, mais baixo que antes: a cabeça fica entre as linhas do título e tapa no máximo uma letra.
   Sempre preso ao fundo da cena; o corte da foto (na calça) some num degradê */
.cena-topo__bruno {
  position: absolute; left: 50%; bottom: 0; z-index: 2; width: auto; height: min(76svh, 1000px); max-width: none;
  transform: translateX(-50%) scale(calc(1 + var(--p, 0) * .16)); transform-origin: 50% 100%;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%); mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
}
.cena-topo__base {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 110px var(--gutter) max(28px, 4svh);
  display: grid; gap: 12px; justify-items: center; text-align: center;
  background: linear-gradient(180deg, transparent, rgba(38,10,47,.9) 50%);
  opacity: calc(1 - var(--p, 0) * 1.8);
}
.cena-topo__base p { margin: 0; max-width: 40em; font-size: clamp(1rem, .5vw + .9rem, 1.2rem); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.cena-topo__base .cena-topo__saco { font-weight: 900; text-transform: uppercase; line-height: 1; color: var(--yellow); font-size: clamp(1.7rem, 3.4vw, 3rem); text-shadow: 0 .06em 0 rgba(0,0,0,.4); }
.cena-topo__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cena-topo__ctas .btn--purple { border-color: #fff; box-shadow: 4px 4px 0 rgba(0,0,0,.35); }
.cena-topo__trilha { position: absolute; top: 84px; left: var(--gutter); z-index: 3; font-size: .8rem; opacity: .8; }
.cena-topo__trilha a { color: #fff; }
.cena-topo__trilha span { margin: 0 .35em; }
@media (min-width: 900px) { .cena-topo__base { padding-left: 96px; padding-right: 96px; } }

/* Celular: o título inteiro em cima; o recorte logo abaixo, centralizado, sem tapar as letras */
@media (max-width: 767px) {
  .cena-topo { height: 150vh; }
  .cena-topo__trilha { display: none; }
  .cena-topo__titulo { top: 12svh; text-align: center; }
  .cena-topo__titulo .l1, .cena-topo__titulo .l2 { font-size: 17vw; transform: none; }
  .cena-topo__titulo .l2 { display: block; }
  .cena-topo__titulo .l2 > span { display: inline; }
  .cena-topo__titulo .l3 { display: none; }
  .cena-topo__bruno { left: 50%; height: 64svh; bottom: 0; transform: translateX(-50%) scale(calc(1 + var(--p, 0) * .1)); }
  .cena-topo__base { padding: 70px var(--gutter) 28px; justify-items: center; text-align: center; background: linear-gradient(180deg, transparent, rgba(38,10,47,.92) 40%); }
  .cena-topo__base p { font-size: .95rem; }
  .cena-topo__ctas { justify-content: center; }
  .cena-topo__ctas .btn--purple { display: none; }
}

/* ---------- Cena 2: a frase que acende palavra por palavra ---------- */
.cena-frase { position: relative; height: 220vh; /* 1,2 tela presa: o suficiente para acender a frase sem cansar */ background: var(--purple-900); color: #fff; }
.cena-frase__fixo { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: 0 var(--gutter); }
.cena-frase p {
  margin: 0; max-width: 18em; font-weight: 900; text-transform: uppercase; line-height: 1.02;
  font-size: clamp(2.1rem, 6vw, 5.4rem); text-align: center;
}
.cena-frase .w { opacity: .38; /* mínimo para o contraste de texto grande (3:1) em todos os fundos */ transition: opacity .25s, color .25s; }
.cena-frase .w.on { opacity: 1; }
.cena-frase .w.dest.on { color: var(--yellow); }

/* ---------- Cena 3: os números ---------- */
.v2-numeros { background: var(--purple-900); color: #fff; padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6.5vw, 96px); text-align: center; }
.v2-nota { display: grid; justify-items: center; text-decoration: none; color: inherit; }
.v2-nota strong { font-size: clamp(7rem, 30vw, 24rem); line-height: .8; font-weight: 900; color: var(--yellow); letter-spacing: -.03em; }
.v2-nota span { font-size: clamp(1.1rem, 1.6vw, 1.6rem); font-weight: 700; margin-top: .6em; }
.v2-nota small { display: block; font-size: .85rem; opacity: .75; margin-top: .3em; font-weight: 400; }
.v2-cont { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 6vw, 90px); margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.v2-cont li { display: grid; }
.v2-cont b { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; color: #fff; }
.v2-cont span { font-size: .95rem; opacity: .8; }

/* ---------- O problema e os dados com fonte ---------- */
.v2-problema { background: var(--cream); }

/* ---------- Cena 4: galeria que anda para o lado ---------- */
.cena-galeria { position: relative; height: 320vh; background: #120417; color: #fff; }
.cena-galeria__fixo { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-content: center; gap: 4svh; }
.cena-galeria h2 { margin: 0; padding: 0 var(--gutter); font-weight: 900; text-transform: uppercase; line-height: .95; font-size: clamp(2.2rem, 6vw, 5rem); color: var(--yellow); }
.cena-galeria__trilho { display: flex; gap: 20px; padding: 0 var(--gutter); width: max-content; transform: translateX(var(--x, 0px)); will-change: transform; margin: 0; list-style: none; }
.cena-galeria figure { margin: 0; position: relative; height: 62svh; aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; }
.cena-galeria li:nth-child(3n+2) figure { aspect-ratio: 4 / 5; }
.cena-galeria img { width: 100%; height: 100%; object-fit: cover; }
.cena-galeria figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; font-weight: 700; font-size: .9rem; background: linear-gradient(180deg, transparent, rgba(18,4,23,.85)); }
@media (max-width: 767px) {
  .cena-galeria { height: auto; padding: 56px 0; }
  .cena-galeria__fixo { position: static; height: auto; }
  .cena-galeria__trilho { width: auto; transform: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .cena-galeria__trilho { scroll-padding-inline: var(--gutter); }
  .cena-galeria li { scroll-snap-align: start; flex: none; }
  .cena-galeria__trilho { align-items: flex-start; }
  .cena-galeria figure, .cena-galeria li:nth-child(3n+2) figure { height: auto; width: 78vw; aspect-ratio: 4 / 5; }
}

/* ---------- Sem movimento: tudo parado e legível ---------- */
@media (prefers-reduced-motion: reduce) {
  .cena-topo, .cena-frase, .cena-galeria { height: auto; }
  .cena-topo__fixo, .cena-frase__fixo { position: relative; }
  .cena-frase__fixo { height: auto; padding: 90px var(--gutter); }
  .cena-frase .w { opacity: 1; }
  .cena-galeria__fixo { position: static; height: auto; padding: 60px 0; }
  .cena-galeria__trilho { width: auto; overflow-x: auto; transform: none; }
}
html:not(.js-cenas) .cena-frase .w { opacity: 1; }

/* A vírgula do 9,91 desce abaixo da linha: a legenda fica abaixo dela */
.v2-nota strong { padding-bottom: .3em; }
/* No celular, a barra "Contrate agora" só aparece depois do topo (o topo já tem o botão) */
.v2 .mobile-bar { transform: translateY(110%); }
.v2 .mobile-bar.is-visible { transform: none; }
.cena-galeria li:first-child img { object-position: 74% 50%; }
@media (max-width: 1299px) { .cena-topo__trilha { display: none; } }

/* Celular: a frase prende menos rolagem (conteúdo primeiro) */
@media (max-width: 767px) { .cena-frase { height: 170vh; } }