/* ==========================================================================
   BODY GYM ACADEMIA — Mineiros/GO
   Arquitetura: cenas fixadas com faixas de rolagem sobrepostas (STACK_SPEC §4).
   Escala: raiz fluida (1vw desktop / 4vw mobile) com clamp nas pontas; tudo em rem.
   ========================================================================== */

/* ===== TROQUE SÓ ESTE BLOCO POR CLIENTE ================================== */
:root {
  --fundo:            #0F1015;
  --fundo-fundo:      #08090C;
  --superficie:       #171821;
  --superficie-alta:  #1E1F2A;
  --linha:            rgba(255,255,255,.10);
  --texto:            #F1F1F4;
  --texto-fraco:      #A0A1AB;
  --acento:           #FFC72C;   /* texto/traço — troca no tema claro */
  --acento-cheio:     #FFC72C;   /* superfície preenchida — constante */
  --sobre-acento:     #0F1015;
  --halo:             #FFE28A;

  --item-1: #FFC72C;  --item-2: #FF5A6E;  --item-3: #34D399;  --item-4: #6AA6FF;

  --grad-1: linear-gradient(135deg, rgba(255,199,44,.18) 0%, rgba(255,199,44,0) 70%);
  --grad-2: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.01) 100%);

  --fonte-display: 'Cabinet Grotesk', 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --fonte-texto:   'Plus Jakarta Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

  --raio:   .9rem;
  --raio-g: 1.6rem;
  --gutter: 4.4rem;
  --max:    82rem;
}

/* Cortina de cor: uma troca de atributo, não 22 tweens (STACK_SPEC §9 passo 5).
   Escopada às seções da faixa + barras: assim a galeria logo abaixo não muda de
   cor no meio da tela quando a cortina sai. */
[data-tema="claro"] :is(.escolha, .estrutura, .nav, .menu) {
  --fundo:            #F4F4F6;
  --fundo-fundo:      #E7E7EC;
  --superficie:       #FFFFFF;
  --superficie-alta:  #FFFFFF;
  --linha:            rgba(17,18,23,.12);
  --texto:            #111217;
  --texto-fraco:      #52525B;
  --acento:           #9A6200;   /* 4,6:1 sobre #F4F4F6 */
  --halo:             #9A6200;
  --item-1: #B45309;  --item-2: #BE123C;  --item-3: #047857;  --item-4: #1D4ED8;
  --grad-2: linear-gradient(180deg, rgba(17,18,23,.05) 0%, rgba(17,18,23,.01) 100%);
}
/* ===== FIM DO BLOCO DE MARCA ============================================= */

/* --- Raiz fluida --------------------------------------------------------- */
html { font-size: 16px; }
@media (max-width: 767px)                            { html { font-size: clamp(13px, 4vw, 16px); } }
@media (min-width: 768px)  and (max-width: 991px)    { html { font-size: clamp(12.5px, 1.6vw, 14.4px); } }
@media (min-width: 992px)  and (max-width: 2800px)   { html { font-size: clamp(13px, 1vw, 20px); } }
@media (min-width: 2801px)                           { html { font-size: clamp(20px, .8vw, 28px); } }

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1.05rem;
  line-height: 1.62;
  font-weight: 400;
  overflow-x: clip;              /* `hidden` viraria contêiner de rolagem e mataria o sticky */
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s linear, color .2s linear;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--fonte-display); font-weight: 800; line-height: .94; letter-spacing: -.012em; text-transform: uppercase; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--acento-cheio); color: var(--sobre-acento); }

/* --- Tipografia ---------------------------------------------------------- */
.d1 { font-size: 6.1rem; }
.d2 { font-size: 4.1rem; }
.d3 { font-size: 2.7rem; }
.d4 { font-size: 1.85rem; }
.lead { font-size: 1.28rem; line-height: 1.5; color: var(--texto-fraco); font-weight: 300; }
.muted { color: var(--texto-fraco); }
.num { font-variant-numeric: tabular-nums; }

.kicker {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--acento);
}
.kicker::before {
  content: ''; width: 2.2rem; height: 1px; background: currentColor; opacity: .7;
  transform-origin: left; transform: scaleX(var(--traco, 1));
}

/* Máscara de revelação por linha (SplitText). A folga vai nos DOIS lados: com
   `line-height` curto, `overflow: clip` decapita Á, Ã, Ó — e esta copy é cheia
   deles ("MUSCULAÇÃO", "NINGUÉM", "VOCÊ"). */
.split-mask-line-mask { padding: .18em 0 .13em !important; margin: -.18em 0 -.13em !important; }
.linha-mask { display: block; overflow: clip; padding: .18em 0 .13em; margin: -.18em 0 -.13em; }

@media (max-width: 991px) {
  .d1 { font-size: 4.4rem; } .d2 { font-size: 3.1rem; } .d3 { font-size: 2.2rem; } .d4 { font-size: 1.6rem; }
}
@media (max-width: 767px) {
  .d1 { font-size: 3.05rem; } .d2 { font-size: 2.3rem; } .d3 { font-size: 1.7rem; } .d4 { font-size: 1.35rem; }
  .lead { font-size: 1.08rem; }
  :root { --gutter: 1.4rem; }
}
@media (min-width: 768px) and (max-width: 991px) { :root { --gutter: 2.4rem; } }

/* --- Utilitários --------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.pular {
  position: fixed; top: .5rem; left: .5rem; z-index: 200;
  background: var(--acento-cheio); color: var(--sobre-acento);
  padding: .6rem 1rem; border-radius: var(--raio); font-weight: 600;
  transform: translateY(-160%); transition: transform .2s;
}
.pular:focus { transform: none; }

/* --- Botões -------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.7rem;
  border-radius: 100px; font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  overflow: hidden; isolation: isolate; text-align: center;
}
.btn span { position: relative; z-index: 2; }
.btn--cheio { background: var(--acento-cheio); color: var(--sobre-acento); }
.btn--cheio::after {
  content: ''; position: absolute; inset: 0; z-index: 1; background: var(--texto);
  transform: translateY(101%); transition: transform .45s cubic-bezier(.5,0,.2,1);
}
.btn--vazio { border: 1px solid var(--linha); color: var(--texto); }
.btn--vazio::after {
  content: ''; position: absolute; inset: 0; z-index: 1; background: var(--acento-cheio);
  transform: translateY(101%); transition: transform .45s cubic-bezier(.5,0,.2,1);
}
@media (hover: hover) {
  .btn--cheio:hover::after, .btn--vazio:hover::after { transform: translateY(0); }
  .btn--cheio:hover span { color: var(--fundo); }
  .btn--vazio:hover span { color: var(--sobre-acento); }
}
.btn span, .btn--cheio:hover span { transition: color .3s .05s; }

/* --- Navegação ----------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--gutter);
  transition: background-color .3s, backdrop-filter .3s, padding .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
/* Barra de progresso: numa página de 22 viewports, ela é orientação, não enfeite */
.nav__progresso {
  position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--acento);
  transform: scaleX(0); transform-origin: left;
  opacity: 0; transition: opacity .3s;
}
.nav[data-colado="1"] .nav__progresso { opacity: 1; }
.nav[data-colado="1"] {
  background: color-mix(in srgb, var(--fundo) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linha);
  padding-block: .7rem;
}
.marca { display: flex; align-items: baseline; gap: .5rem; font-family: var(--fonte-display); font-size: 1.32rem; line-height: 1; letter-spacing: -.01em; }
.marca b { font-weight: 800; }
.marca i { font-style: normal; font-weight: 800; color: var(--acento); }
.marca em { font-style: normal; font-size: .58rem; letter-spacing: .28em; font-family: var(--fonte-texto); font-weight: 600; color: var(--texto-fraco); align-self: center; }

.nav__links { display: flex; align-items: center; gap: 1.9rem; }
.nav__links a { font-size: .92rem; font-weight: 500; position: relative; padding-block: .3rem; }
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--acento);
  transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.5,0,.2,1);
}
@media (hover: hover) { .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } }
.nav__acoes { display: flex; align-items: center; gap: .8rem; }
.nav .btn { min-height: 44px; padding: .6rem 1.25rem; font-size: .86rem; }

.hamb { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; }
.hamb i { display: block; position: relative; width: 22px; height: 2px; background: var(--texto); transition: background .2s; }
.hamb i::before, .hamb i::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--texto); transition: transform .3s cubic-bezier(.5,0,.2,1); }
.hamb i::before { top: -7px; } .hamb i::after { top: 7px; }
.hamb[aria-expanded="true"] i { background: transparent; }
.hamb[aria-expanded="true"] i::before { transform: translateY(7px) rotate(45deg); }
.hamb[aria-expanded="true"] i::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991px) {
  .nav__links, .nav__acoes .btn--vazio { display: none; }
  .hamb { display: flex; }
}

.menu {
  position: fixed; inset: 0; z-index: 95;
  background: var(--fundo-fundo);
  display: flex; flex-direction: column; justify-content: center; gap: .2rem;
  padding: 5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
}
.menu a { font-family: var(--fonte-display); font-weight: 800; font-size: 2.4rem; text-transform: uppercase; line-height: 1.28; }
.menu a span { color: var(--acento); font-family: var(--fonte-texto); font-size: .7rem; letter-spacing: .2em; vertical-align: super; margin-right: .5rem; }
.menu__pe { margin-top: 2.2rem; display: flex; flex-direction: column; gap: .9rem; font-size: .95rem; }

/* ==========================================================================
   MECÂNICA DE ASSINATURA — cenas fixadas com faixas sobrepostas
   O trilho define quanto scroll a cena consome; o driver invade a faixa da
   cena anterior com `top` negativo; o painel gruda com `position: sticky`.
   Sem `pin` do ScrollTrigger — ele só fornece progresso.
   ========================================================================== */
.cena { position: relative; }
.trilho { height: calc(var(--trilho, 1) * 100vh); height: calc(var(--trilho, 1) * 100svh); }
.driver {
  position: relative;
  top: calc(var(--recuo, 0) * -100vh);
  top: calc(var(--recuo, 0) * -100svh);
  height: calc(var(--driver, var(--trilho, 1)) * 100vh);
  height: calc(var(--driver, var(--trilho, 1)) * 100svh);
}
.painel {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid; align-items: center;
  pointer-events: none;                   /* painel vazio não pode bloquear a cena de baixo */
}
.painel a, .painel button, .painel .clicavel { pointer-events: auto; }
/* z-index sem `position`: item de grid aceita, e assim não vence o `absolute`
   dos blocos de topo/rodapé, que têm menos especificidade que este seletor. */
.painel > .wrap { grid-area: 1 / 1; width: 100%; z-index: 2; }
/* Camada que cobre a cena anterior — entra por opacidade no começo da timeline,
   para a cena nova se montar POR CIMA da anterior em vez de cortá-la. */
.painel__fundo { position: absolute; inset: 0; z-index: 0; background: var(--fundo); }
/* Custom property é herdada como VALOR: `color` precisa ser reafirmado aqui,
   senão a faixa clara herda o texto claro que o body resolveu no tema escuro. */
.escolha, .estrutura, .nav, .menu { color: var(--texto); }
.escolha, .estrutura, .nav, .menu, .escolha .painel__fundo, .escolha__elipse,
.chips li, .pilha__cartao, .horarios li { transition: background-color .2s linear, color .2s linear, border-color .2s linear; }
[data-tema="claro"] .ponteiro { --halo: #9A6200; mix-blend-mode: multiply; }
.metodo .painel__fundo { background: linear-gradient(180deg, var(--fundo) 0%, var(--fundo-fundo) 100%); }

/* Nível estático (movimento reduzido / economia de dados): vira documento normal */
[data-nivel="estatico"] .trilho { height: auto; }
[data-nivel="estatico"] .driver { top: 0; height: auto; }
[data-nivel="estatico"] .painel { position: static; height: auto; overflow: visible; padding-block: 5rem; pointer-events: auto; }
[data-nivel="estatico"] .flutua, [data-nivel="estatico"] .abertura__arte,
[data-nivel="estatico"] .painel__fundo, [data-nivel="estatico"] .escolha__elipse { display: none; }
[data-nivel="estatico"] .abertura__topo,
[data-nivel="estatico"] .abertura__rodape { position: static; margin-block: 1.6rem; padding-inline: 0; }
[data-nivel="estatico"] .metodo__blocos { gap: 3.4rem; }
[data-nivel="estatico"] .metodo__bloco { grid-area: auto; }
[data-nivel="estatico"] .acervo__janela { height: auto !important; }
[data-nivel="estatico"] .escolha__rotulos { height: auto; display: grid; gap: 1.6rem; }
[data-nivel="estatico"] .escolha__rotulo { position: static; opacity: 1; }
[data-nivel="estatico"] .pilha { aspect-ratio: auto; max-width: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
[data-nivel="estatico"] .pilha__cartao { position: static; aspect-ratio: 4/5; }
[data-nivel="estatico"] .baralho { height: auto; display: grid; gap: 1rem; perspective: none; }
[data-nivel="estatico"] .baralho__item { position: static; opacity: 1 !important; transform: none !important; }

/* --- Cena 1 · abertura --------------------------------------------------- */
.abertura { --trilho: 6; }
.abertura .painel { align-content: center; }
.abertura__arte { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.abertura__arte svg { position: absolute; width: 46rem; max-width: none; opacity: .5; filter: blur(8px); }
.abertura__arte .a1 { top: -8rem; right: -10rem; }
.abertura__arte .a2 { bottom: -14rem; left: -12rem; width: 34rem; opacity: .32; }
.abertura__brilho {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 55% at 78% 28%, rgba(255,199,44,.16) 0%, rgba(255,199,44,0) 68%),
              radial-gradient(45% 40% at 8% 88%, rgba(255,199,44,.09) 0%, rgba(255,199,44,0) 70%);
}

/* Estes dois NÃO levam `.wrap`: como filhos absolutos de um grid, o
   `grid-area: 1/1` faria o `top` resolver contra a área de grid, não contra o
   painel — e o bloco descia 220px. */
.abertura__topo, .abertura__rodape {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
}
.abertura__topo {
  position: absolute; top: 6.4rem; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
}
.abertura__topo p { font-size: .82rem; letter-spacing: .04em; color: var(--texto-fraco); max-width: 15rem; }

.abertura__corpo { position: relative; z-index: 2; display: grid; gap: 1.7rem; justify-items: start; max-width: 46rem; }
.abertura h1 { max-width: 13.5em; }
.abertura h1 em { font-style: normal; color: var(--acento); }
.abertura__lead { max-width: 30rem; }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: .8rem; }

.flutua { position: absolute; z-index: 1; }
.flutua img { border-radius: var(--raio); object-fit: cover; box-shadow: 0 2rem 4rem rgba(0,0,0,.5); }
.chip-foto { width: 11.5rem; aspect-ratio: 3/4; }
.chip-foto img { width: 100%; height: 100%; object-position: 50% 26%; }
.f1 { top: 12%;  right: 6%; }
.f2 { bottom: 12%; right: 20%; width: 9rem; }
.f3 { top: 26%; right: 30%; }
.disco {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--superficie-alta), var(--fundo-fundo) 70%);
  border: 1px solid var(--linha);
  display: grid; place-items: center;
}
.disco::after { content: ''; width: 26%; height: 26%; border-radius: 50%; background: var(--fundo); border: 1px solid var(--linha); }
.f3.disco { width: 6.5rem; height: 6.5rem; }
.f4 { bottom: 24%; left: 4%; width: 4.2rem; height: 4.2rem; }
.f5 { top: 18%; left: 30%; width: 2.6rem; height: 2.6rem; opacity: .8; }

.abertura__rodape {
  position: absolute; left: 0; right: 0; bottom: 2.2rem; z-index: 3;
  display: flex; justify-content: space-between; align-items: end; gap: 1rem;
}
.rolar { display: inline-flex; align-items: center; gap: .7rem; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-fraco); }
.rolar b { display: block; width: 1px; height: 2.4rem; background: linear-gradient(var(--acento), transparent); }
.selo-hora { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; padding: .5rem .95rem; border: 1px solid var(--linha); border-radius: 100px; background: var(--superficie); }
.selo-hora i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--texto-fraco); }
.selo-hora[data-aberto="1"] i { background: #34D399; box-shadow: 0 0 0 .25rem rgba(52,211,153,.18); }

@media (max-width: 991px) {
  .abertura { --trilho: 4; }
  .f3, .f5 { display: none; }
  .chip-foto { width: 8rem; }
  .f1 { top: auto; bottom: 16%; right: 4%; }
  .f2 { display: none; }
  .abertura__topo { top: 5rem; }
  .abertura__topo p { display: none; }
}
@media (max-width: 767px) {
  .abertura__acoes .btn { flex: 1 1 12rem; }
  .abertura__rodape { bottom: 1.2rem; }
  /* Não sobra faixa livre entre a nav, o bloco central e o rodapé: no celular
     a abertura é tipografia + geometria, e as fotos aparecem adiante. */
  .chip-foto { display: none; }
  .f4 { bottom: 26%; left: 6%; width: 5.4rem; height: 5.4rem; }
}

/* --- Cena 2 · método ----------------------------------------------------- */
.metodo { --trilho: 1; --driver: 4; --recuo: 3; }
.metodo .painel { background: linear-gradient(180deg, transparent, var(--fundo-fundo) 34%); }
.metodo__grade { display: grid; grid-template-columns: 1.2fr .8fr; gap: 4.5rem; align-items: center; }
.metodo__bloco { display: grid; gap: 1.4rem; justify-items: start; grid-area: 1 / 1; }
.metodo__blocos { display: grid; grid-area: 1 / 1; }
.metodo__arte { position: relative; aspect-ratio: 1; max-width: 20rem; margin-inline: auto; display: grid; place-items: center; }
.metodo__arte svg { width: 100%; }
.metodo__marca { position: absolute; text-align: center; }
.metodo__marca b { display: block; font-family: var(--fonte-display); font-size: 3.4rem; line-height: 1; color: var(--acento); }
.metodo__marca span { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-fraco); }
@media (max-width: 991px) {
  .metodo { --trilho: 2.3; --driver: 4; --recuo: 1.7; }
  .metodo__grade { grid-template-columns: 1fr; gap: 2rem; }
  .metodo__arte { max-width: 15rem; margin-inline: auto; }
}
@media (max-width: 767px) { .metodo__arte { display: none; } }

/* --- Cena 3 · acervo (lista rolante de serviços) -------------------------- */
.acervo { --trilho: 5; --driver: 7; --recuo: 2; }
.acervo__grade { display: grid; grid-template-columns: .82fr 1.18fr; gap: 4rem; align-items: center; }
.acervo__cabeca { display: grid; gap: 1.2rem; justify-items: start; }
.acervo__janela { perspective: 900px; overflow: hidden; }
.acervo__lista { transform-style: flat; }
.acervo__item {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
  padding: 1.7rem 0; border-top: 1px solid var(--linha);
  transform-origin: 50% 0%;
}
.acervo__item:last-child { border-bottom: 1px solid var(--linha); }
.acervo__item b { font-family: var(--fonte-display); font-size: .95rem; color: var(--acento); padding-top: .35rem; }
.acervo__item h3 { font-size: 1.85rem; margin-bottom: .5rem; }
.acervo__item p { color: var(--texto-fraco); font-size: 1rem; max-width: 34em; }
.acervo__barra { height: 2px; background: var(--linha); margin-top: 2.4rem; position: relative; overflow: hidden; }
.acervo__barra i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--acento); transform: scaleX(0); transform-origin: left; }
@media (max-width: 991px) {
  .acervo { --trilho: 3.4; --driver: 4.6; --recuo: 1.2; }
  .acervo__grade { grid-template-columns: 1fr; gap: 1.6rem; }
  .acervo__item { padding: 1.1rem 0; gap: 1rem; }
  .acervo__item h3 { font-size: 1.4rem; }
  .acervo__item p { font-size: .95rem; }
}
/* O painel é `overflow: hidden`: no celular a cena inteira precisa caber em
   100svh, senão o cabeçalho fica cortado durante toda a fixação. */
@media (max-width: 767px) {
  .acervo__cabeca > p, .acervo__barra { display: none; }
  .acervo__cabeca { gap: .9rem; }
  .acervo .d2 { font-size: 1.95rem; }
  .acervo__item { padding: .8rem 0; }
  .acervo__item h3 { font-size: 1.22rem; margin-bottom: .3rem; }
  .acervo__item p { font-size: .86rem; line-height: 1.45; }
  .acervo__item b { font-size: .82rem; }
}

/* --- Cena 4 · escolha (pilha de cartões) --------------------------------- */
.escolha { --trilho: 4; --driver: 6; --recuo: 2; }
.ancora-tema { position: absolute; left: 0; width: 1px; top: -100vh; top: -100svh; height: 600vh; height: 600svh; pointer-events: none; }
.escolha__elipse {
  position: absolute; left: 50%; top: 50%; width: 76rem; height: 40rem;
  margin: -20rem 0 0 -38rem; border-radius: 50%; z-index: 0;
  border: 1px solid color-mix(in srgb, var(--acento) 32%, transparent);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 7%, transparent), transparent 78%);
}
.escolha__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 2; }
.escolha__texto { display: grid; gap: 1.3rem; justify-items: start; }
.escolha__rotulos { position: relative; height: 4.4rem; width: 100%; }
.escolha__rotulo { position: absolute; inset: 0; display: grid; align-content: center; }
.escolha__rotulo h3 { font-size: 2.3rem; }
.escolha__rotulo p { color: var(--texto-fraco); font-size: .98rem; }
.escolha__ponto { display: inline-flex; align-items: center; gap: .7rem; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-fraco); }
.escolha__ponto i { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--item-1); transition: background-color .3s; }
.escolha__ponto i[data-item="2"] { background: var(--item-2); }
.escolha__ponto i[data-item="3"] { background: var(--item-3); }
.escolha__ponto i[data-item="4"] { background: var(--item-4); }

.pilha { position: relative; aspect-ratio: 4/5; max-width: 27rem; margin-inline: auto; width: 100%; }
.pilha__cartao {
  position: absolute; inset: 0; border-radius: var(--raio-g); overflow: hidden;
  background: var(--superficie); box-shadow: 0 2.2rem 5rem rgba(0,0,0,.34);

}
.pilha__cartao img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
/* Gradiente alto de propósito: engole a legenda queimada nas capas de reel. */
.pilha__cartao figcaption {
  position: absolute; inset: auto 0 0 0; padding: 6rem 1.4rem 1.3rem;
  background: linear-gradient(transparent, rgba(8,9,12,.55) 34%, rgba(8,9,12,.94) 78%);
  color: #F1F1F4; font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
@media (max-width: 991px) {
  .escolha { --trilho: 4; --driver: 4; --recuo: 0; }
  .escolha__grade { grid-template-columns: 1fr; gap: 1.8rem; }
  .pilha { max-width: 17rem; }
  .escolha__elipse { width: 40rem; height: 26rem; margin: -13rem 0 0 -20rem; }
  .escolha__rotulos { height: 5.6rem; }
  .escolha__rotulo h3 { font-size: 1.7rem; }
}

/* --- Estrutura (chips + horários) ---------------------------------------- */
.estrutura { padding-block: 7rem; background: var(--fundo); }
.estrutura__topo { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 3rem; }
.chips { display: flex; flex-wrap: wrap; gap: .7rem; }
.chips li {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.15rem; border: 1px solid var(--linha); border-radius: 100px;
  font-size: .92rem; background: var(--superficie);
}
.chips svg { width: 1.05rem; height: 1.05rem; color: var(--acento); flex: none; }
.horarios { display: grid; gap: .1rem; margin-top: 3rem; border-top: 1px solid var(--linha); }
.horarios li { display: flex; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--linha); font-size: 1rem; }
.horarios li b { font-weight: 600; }
.horarios li span { color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.horarios li[data-hoje="1"] { color: var(--acento); }
.horarios li[data-hoje="1"] span { color: inherit; }
@media (max-width: 767px) { .estrutura { padding-block: 4rem; } .estrutura__topo { grid-template-columns: 1fr; gap: 1.4rem; } }

/* --- Cena 5 · imagem (campo em parallax diferencial) ---------------------- */
.imagem { position: relative; padding-block: 8rem 9rem; background: var(--fundo); overflow: hidden; }
.imagem__cabeca { position: relative; z-index: 3; text-align: center; display: grid; gap: 1rem; justify-items: center; margin-bottom: 3.4rem; }
.campo { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem; }
.campo figure { margin: 0; border-radius: var(--raio); overflow: hidden; background: var(--superficie); }
.campo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; aspect-ratio: 3/4; }
.campo .c1 { grid-column: 1 / span 3; }
.campo .c2 { grid-column: 4 / span 3; margin-top: 3.4rem; }
.campo .c3 { grid-column: 7 / span 3; }
.campo .c4 { grid-column: 10 / span 3; margin-top: 2.2rem; }
.campo .c5 { grid-column: 2 / span 3; margin-top: -1rem; }
.campo .c6 { grid-column: 5 / span 4; margin-top: 1.6rem; }
.campo .c7 { grid-column: 9 / span 3; margin-top: -2rem; }
.cartao-nota {
  display: grid; align-content: center; gap: .7rem; padding: 1.7rem;
  aspect-ratio: 3/4; background: var(--superficie); border: 1px solid var(--linha);
  background-image: var(--grad-2);
}
.cartao-nota b { font-family: var(--fonte-display); font-size: 2.4rem; line-height: 1; color: var(--acento); }
.cartao-nota p { font-size: .92rem; color: var(--texto-fraco); }
.cartao-nota p strong { color: var(--texto); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .imagem { padding-block: 4rem 5rem; }
  .campo { grid-template-columns: repeat(6, 1fr); gap: .7rem; }
  .campo .c1 { grid-column: 1 / span 3; } .campo .c2 { grid-column: 4 / span 3; margin-top: 2rem; }
  .campo .c3 { grid-column: 1 / span 3; } .campo .c4 { grid-column: 4 / span 3; margin-top: -1rem; }
  .campo .c5 { grid-column: 1 / span 3; } .campo .c6 { grid-column: 4 / span 3; margin-top: -1.5rem; }
  .campo .c7 { grid-column: 2 / span 4; }
  .cartao-nota { aspect-ratio: auto; padding: 1.2rem; }
  .cartao-nota b { font-size: 1.9rem; }
  .cartao-nota p { font-size: .84rem; }
}

/* --- Voz · depoimentos --------------------------------------------------- */
.voz { padding-block: 7rem; background: var(--fundo-fundo); overflow: hidden; }
.voz__topo { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.6rem; }
.voz__setas { display: flex; gap: .6rem; }
.voz__setas button {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linha);
  display: grid; place-items: center; transition: background-color .25s, color .25s, border-color .25s;
}
.voz__setas button svg { width: 1.1rem; height: 1.1rem; }
.voz__setas .prev svg { transform: scaleX(-1); }
@media (hover: hover) { .voz__setas button:hover { background: var(--acento-cheio); color: var(--sobre-acento); border-color: transparent; } }

.baralho { position: relative; height: 24rem; perspective: 1200px; touch-action: pan-y; }
.baralho__item {
  position: absolute; inset: 0; margin-inline: auto; max-width: 42rem;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g);
  padding: 2.6rem; display: grid; align-content: center; gap: 1.4rem;
  transition: transform .55s cubic-bezier(.5,0,.2,1), opacity .55s;

}
.baralho__item:not(:first-child) { opacity: 0; }   /* sem JS, um depoimento aparece */
.baralho__item blockquote { margin: 0; font-size: 1.18rem; line-height: 1.55; }
.baralho__item footer { display: flex; align-items: center; gap: .9rem; }
.avatar {
  width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--acento-cheio); color: var(--sobre-acento);
  font-family: var(--fonte-display); font-size: .95rem;
}
.estrelas { display: flex; gap: .18rem; color: var(--acento); }
.estrelas svg { width: .95rem; height: .95rem; }
.voz__conta { font-size: .85rem; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .voz { padding-block: 4rem; }
  .baralho { height: 28rem; }
  .baralho__item { padding: 1.7rem; }
  .baralho__item blockquote { font-size: 1.02rem; }
  .voz__topo { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}

/* --- Planos -------------------------------------------------------------- */
.planos { padding-block: 7rem; background: var(--fundo); }
.planos__topo { display: grid; gap: 1rem; justify-items: start; margin-bottom: 2.8rem; max-width: 40rem; }
.planos__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: start; }
.plano {
  position: relative; border: 1px solid var(--linha); border-radius: var(--raio-g);
  background: var(--superficie); background-image: var(--grad-2); overflow: hidden;
  transition: border-color .3s, transform .4s cubic-bezier(.5,0,.2,1);
}
.plano[data-destaque] { border-color: color-mix(in srgb, var(--acento) 55%, transparent); }
.plano__cabeca { width: 100%; text-align: left; padding: 1.9rem; display: grid; gap: .55rem; min-height: 48px; }
.plano__tag { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--acento); }
.plano h3 { font-size: 1.55rem; }
.plano__preco { font-family: var(--fonte-display); font-size: 2.1rem; line-height: 1.1; }
.plano__preco small { font-family: var(--fonte-texto); font-size: .82rem; font-weight: 400; color: var(--texto-fraco); letter-spacing: 0; text-transform: none; }
.plano__corpo { padding: 0 1.9rem 1.9rem; display: grid; gap: 1.1rem; overflow: hidden; }
.plano__corpo ul { display: grid; gap: .65rem; }
.plano__corpo li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .7rem; font-size: .95rem; color: var(--texto-fraco); }
.plano__corpo li svg { width: 1.1rem; height: 1.1rem; color: var(--acento); margin-top: .25rem; }
.plano__seta { position: absolute; top: 1.9rem; right: 1.9rem; width: 1.6rem; height: 1.6rem; color: var(--texto-fraco); transition: transform .35s; }
.plano[aria-expanded="false"] .plano__seta { transform: rotate(-90deg); }
@media (max-width: 991px) { .planos__grade { grid-template-columns: 1fr; } .plano__seta { display: none; } }
@media (max-width: 767px) { .planos { padding-block: 4rem; } }

/* --- Conversão ----------------------------------------------------------- */
.cta { padding-block: 7rem; background: var(--fundo-fundo); position: relative; overflow: hidden; }
.cta__brilho { position: absolute; inset: auto 0 -30% 0; height: 60%; background: var(--grad-1); pointer-events: none; }
.cta__grade { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: start; }
.cta__texto { display: grid; gap: 1.3rem; justify-items: start; }
.cta__texto h2 { max-width: 11em; }
.cta__dados { display: grid; gap: 1.1rem; margin-top: .6rem; }
.cta__dados a, .cta__dados p { display: grid; grid-template-columns: 1.2rem 1fr; gap: .9rem; align-items: start; font-size: .98rem; color: var(--texto-fraco); }
.cta__dados svg { width: 1.2rem; height: 1.2rem; color: var(--acento); margin-top: .3rem; }
.cta__dados b { color: var(--texto); font-weight: 600; display: block; }

.form { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 2rem; display: grid; gap: 1.05rem; }
.campo-form { display: grid; gap: .45rem; }
.campo-form label { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-fraco); }
.campo-form input, .campo-form select, .campo-form textarea {
  font: inherit; font-size: .98rem; color: var(--texto);
  background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .85rem 1rem; min-height: 48px; width: 100%;
}
.campo-form textarea { min-height: 5.5rem; resize: vertical; }
.form small { font-size: .8rem; color: var(--texto-fraco); }
@media (max-width: 991px) { .cta__grade { grid-template-columns: 1fr; gap: 2.4rem; } }
@media (max-width: 767px) { .cta { padding-block: 4rem; } .form { padding: 1.4rem; } }

/* --- Rodapé -------------------------------------------------------------- */
.pe { background: var(--fundo); padding: 4rem 0 calc(2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linha); }
.pe__grade { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; align-items: start; }
.pe__links { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .93rem; color: var(--texto-fraco); }
.pe__fim { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; font-size: .82rem; color: var(--texto-fraco); }

/* --- Botão flutuante de WhatsApp ----------------------------------------- */
.wa {
  position: fixed; z-index: 80; right: 1.1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #06251A;
  box-shadow: 0 .9rem 2rem rgba(0,0,0,.35);
  opacity: 0; transform: translateY(140%); transition: opacity .3s, transform .5s cubic-bezier(.5,0,.2,1);
}
.wa[data-visivel="1"] { opacity: 1; transform: none; }
.wa svg { width: 28px; height: 28px; }

/* --- Ponteiro inercial (só ponteiro fino) -------------------------------- */
.ponteiro {
  position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none;
  width: .55rem; height: .55rem; margin: -.275rem 0 0 -.275rem; border-radius: 50%;
  background: var(--halo); mix-blend-mode: screen;
  box-shadow: inset 0 0 .3rem rgba(255,255,255,.9), 0 0 1.2rem var(--halo), 0 0 3rem color-mix(in srgb, var(--halo) 50%, transparent);
  opacity: 0; transition: opacity .3s;
}
.ponteiro[data-on="1"] { opacity: .85; }
@media (max-width: 991px), (pointer: coarse) { .ponteiro { display: none; } }

/* --- Preloader ----------------------------------------------------------- */
.pre {
  position: fixed; inset: 0; z-index: 150; background: var(--fundo-fundo);
  display: grid; place-items: center; gap: 1.4rem; align-content: center;
}
.pre__marca { font-family: var(--fonte-display); font-size: 2.6rem; letter-spacing: -.01em; text-transform: uppercase; }
.pre__marca i { font-style: normal; color: var(--acento); }
.pre__trilho { width: 12rem; height: 2px; background: var(--linha); overflow: hidden; }
.pre__barra { display: block; height: 100%; width: 0; background: var(--acento); }

/* --- Movimento reduzido -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  body { transition: none; }
  .pre { display: none; }
}

/* ==========================================================================
   ACABAMENTO — hover, profundidade e níveis de capacidade
   ========================================================================== */

/* Campo de fotos: moldura reage ao ponteiro, imagem tem folga para o parallax
   interno. Folga curta (scale 1.07) porque as capas de reel têm texto gravado
   perto das bordas — ±6% cortaria a legenda. */
.campo figure { transition: transform .5s cubic-bezier(.5,0,.2,1); }
.campo figure img { transition: filter .5s, transform .6s cubic-bezier(.5,0,.2,1); }
@media (hover: hover) and (min-width: 992px) {
  .campo figure:not(.cartao-nota):hover { transform: translateY(-.4rem); }
  .campo figure:not(.cartao-nota):hover img { filter: brightness(1.08) saturate(1.06); }
  .pilha__cartao { transition: box-shadow .5s; }
  .plano:hover { border-color: color-mix(in srgb, var(--acento) 42%, var(--linha)); }
  .chips li { transition: transform .35s cubic-bezier(.5,0,.2,1), border-color .35s; }
  .chips li:hover { transform: translateY(-.15rem); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
  .cta__dados a { transition: color .3s; }
  .cta__dados a:hover { color: var(--acento); }
}

/* Indicador de rolagem: pulso curto, só enquanto a abertura está na tela */
.rolar b { transform-origin: top; animation: pulso 2.4s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes pulso {
  0%, 100% { transform: scaleY(.35); opacity: .45; }
  45%      { transform: scaleY(1);   opacity: 1; }
}

/* Estados iniciais das revelações: donos únicos, e sempre revertidos por JS.
   Só entram quando o JS confirma que vai animar (classe no <html>), senão
   ficariam invisíveis para sempre em caso de falha de rede do GSAP. */
.js-anim [data-linhas] { visibility: hidden; }

/* --------------------------------------------------------------------------
   Nível de capacidade — publicado em <html data-nivel> e usado de verdade.
   `leve` (toque, tela pequena, <=2 núcleos ou <=2 GB) mantém a mecânica de
   assinatura rodando e corta o que custa por frame sem aparecer.
   -------------------------------------------------------------------------- */
[data-nivel="leve"] .abertura__arte svg { filter: none; opacity: .34; }   /* blur(8px) é caro por frame */
[data-nivel="leve"] .nav[data-colado="1"] { backdrop-filter: none; background: var(--fundo); }
[data-nivel="leve"] .pilha__cartao { box-shadow: 0 1rem 2rem rgba(0,0,0,.3); }
[data-nivel="leve"] .campo figure img { transition: none; }
[data-nivel="leve"] .rolar b { animation-duration: 3.2s; }

@media (prefers-reduced-motion: reduce) {
  .rolar b { animation: none; transform: none; opacity: .7; }
  .js-anim [data-linhas] { visibility: visible; }
  .nav__progresso { display: none; }
}