/* ==========================================================
   IMERSÃO PQV · V4 — versão definitiva
   Hero V1 · interseção V2 · seções V1/V2/V3 conforme aprovação
   Nunito Sans 400/500 apenas
   ========================================================== */

:root {
  /* zona escura · cinza esverdeado da marca (#2C3439), mais fechado e sóbrio */
  --ink: #12181A;
  --ink-2: #1A2124;
  --ink-3: #222A2E;
  --ink-4: #2C3439;
  --white: #EFF3F2;
  --gray: #9AA8AB;
  --gray-d: #6B787D;
  --line-d: rgba(194, 205, 216, 0.14);
  --veil: rgba(18, 24, 26, 0.62);
  --scrim: 18, 24, 26;

  /* zona clara · gelo da marca */
  --paper: #FBFBFD;
  --paper-2: #F1F4F7;
  --card: #F2F4F7;
  --card-2: #E8ECF1;
  --tink: #2C3439;
  --dim: #6E7B82;
  --line-l: rgba(44, 52, 57, 0.11);

  /* marca */
  --green: #48D99C;
  --green-soft: #82E5B5;
  --green-d: #35B97F;
  --green-vivid: #25B286;
  --green-arrow: #1F9E76;
  --green-tint: rgba(53, 185, 127, 0.10);
  --green-ink: #10241C;
  --green-a: 72, 217, 156;
  --yellow: #F5E95A;
  --yellow-hover: #F8EF7E;
  --yellow-ink: #1E2427;
  --red: #D73233;
  --red-soft: #FB6565;

  --font: "Nunito Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pad: clamp(20px, 3vw, 40px);
  --wide: 1380px;
  --r: 16px;
  --r-sm: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
strong, b, h1, h2, h3 { font-weight: 500; }
em { font-style: normal; }
::selection { background: var(--green); color: var(--green-ink); }

/* foco visível por teclado (nunca no clique de mouse) */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}
.lsec :focus-visible, .notice :focus-visible { outline-color: var(--green-vivid); }

.wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 var(--pad); }
.wide { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad); }
.center { text-align: center; }
.narrow { max-width: 54ch; margin-inline: auto; }

/* ==========================================================
   TIPOGRAFIA
   ========================================================== */
.display {
  font-size: clamp(2.1rem, 4.7vw, 4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
.display--center { text-align: center; max-width: 22ch; margin-inline: auto; }
.display--wide { max-width: 30ch; }
.display em { color: var(--green); }

.giant {
  font-size: clamp(2.1rem, 4.7vw, 4.1rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 24px auto 22px;
  max-width: 22ch;
}
.giant em { color: var(--green-d); }

.txt { font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 56ch; }
.txt--dim { color: var(--gray); }
.txt strong { color: var(--white); font-weight: 500; }
.center .txt, .txt.center { margin-inline: auto; }

.ldim { color: var(--dim); font-size: clamp(1rem, 1.35vw, 1.15rem); }
.ldim strong { color: var(--tink); }

.fillcopy {
  font-size: clamp(1.7rem, 3.3vw, 2.85rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.fillcopy--center { text-align: center; }
[data-fill] .w { opacity: 0.16; }

[data-chars] .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
[data-chars] .word > span { display: inline-block; }

/* ==========================================================
   TAG DE SEÇÃO (pré-headline)
   ========================================================== */
.stag {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: clamp(18px, 2vw, 26px);
}
.stag i {
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--green);
  flex-shrink: 0;
}
.stag--light { color: var(--tink); }
.stag--light i { background: var(--green-d); }
.stag--flush { margin-bottom: 0; }

.section { padding: clamp(72px, 8.5vw, 126px) 0; position: relative; }
.lsec {
  background: var(--paper);
  color: var(--tink);
  padding: clamp(72px, 8.5vw, 126px) 0;
  position: relative;
}
/* brilho de gelo no topo de cada seção clara (identidade da marca) */
.lsec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* transparente nas duas bordas: nunca cria emenda entre seções claras */
  background: radial-gradient(115% 62% at 50% 46%, rgba(194, 205, 216, 0.30) 0%, rgba(194, 205, 216, 0) 74%);
}
.lsec > * { position: relative; z-index: 1; }

/* faixa barcode de troca de tema */
.cut { height: 64px; background: var(--paper); display: flex; gap: 20px; padding-left: 26%; position: relative; overflow: hidden; }
/* faixa de luz que varre a divisória; o gradiente é simétrico de propósito,
   assim a mesma peça serve para a divisória espelhada (.cut--flip) sem inverter. */
.cut__sweep {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 24%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    rgba(var(--green-a), 0) 0%,
    rgba(var(--green-a), 0.5) 34%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(var(--green-a), 0.5) 66%,
    rgba(var(--green-a), 0) 100%);
}
/* As barras só existem durante a transição (o JS as sobe e recolhe no rastro
   da faixa). Em repouso ficam em scaleY(0): a divisória é uma borda reta.
   Sem JS ou com reduced-motion, é isso que se vê — nada estático "riscado". */
.cut i { width: 22px; background: var(--ink); transform-origin: top center; transform: scaleY(0); }
.cut i:nth-child(2) { width: 12px; }
.cut i:nth-child(3) { width: 34px; }
.cut i:nth-child(5) { width: 14px; }
.cut i:nth-child(6) { width: 28px; }
.cut--flip { transform: scaleX(-1) scaleY(-1); }

/* ==========================================================
   PROGRESSO DE LEITURA
   ========================================================== */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 70;
  pointer-events: none;
  background: transparent;
}
.progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--green-d), var(--green));
  transform: scaleX(0);
  transform-origin: left center;
}

/* ==========================================================
   BARRA DE ESCASSEZ
   ========================================================== */
.notice {
  position: relative;
  z-index: 60;
  background: var(--yellow);
  color: var(--yellow-ink);
  padding: 9px var(--pad);
  font-size: 0.86rem;
}
.notice__inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.notice__txt { line-height: 1.35; }
.notice__txt strong { font-weight: 500; }
.notice__pre { opacity: 0.65; }
.notice__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: pulse 2.4s var(--ease) infinite;
}
.notice__pct { font-weight: 500; font-variant-numeric: tabular-nums; flex-shrink: 0; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* medidor de vagas (barra carregando) */
.meter {
  display: block;
  position: relative;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.meter i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: var(--red);
  transform-origin: left center;
  transform: scaleX(var(--p, 0.7));
  animation: meterFill 1.6s var(--ease) 0.35s backwards;
}
@keyframes meterFill { from { transform: scaleX(0); } }
.meter--dark { width: clamp(90px, 12vw, 160px); background: rgba(30, 36, 39, 0.18); }
/* barra alta com o texto dentro */
.meter--bar {
  width: 100%;
  height: 48px;
  background: var(--card-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 22px;
}
.meter--bar i { z-index: 0; }
.meter__label, .meter__pct {
  position: relative;
  z-index: 1;
  font-weight: 500;
  font-size: 0.98rem;
  white-space: nowrap;
}
.meter__label { color: #fff; }
.meter__pct { color: var(--tink); font-variant-numeric: tabular-nums; }

/* ==========================================================
   PLACEHOLDERS
   ========================================================== */
.phm {
  position: relative;
  background: radial-gradient(120% 90% at 30% 10%, #242D31 0%, #182023 55%, #12181A 100%);
  overflow: hidden;
}
.phm__tag {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}
.has-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.has-img .phm__tag { display: none; }
[data-inner-parallax] { overflow: hidden; }

/* ==========================================================
   BOTÕES
   ========================================================== */
.pillbtn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--yellow);
  color: var(--yellow-ink);
  font-weight: 500;
  font-size: 1.02rem;
  border-radius: 999px;
  padding: 10px 28px 10px 10px;
  transition: transform 0.45s var(--ease), background 0.3s;
  box-shadow: 0 14px 36px -16px rgba(245, 233, 90, 0.45);
}
.pillbtn:hover { background: var(--yellow-hover); }
.pillbtn:active { transform: scale(0.97); }
.pillbtn__disc {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-arrow);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pillbtn__disc svg { width: 18px; height: 18px; }
.pillbtn:hover .pillbtn__disc svg { animation: pointR 0.8s ease-in-out infinite; }
@keyframes pointR {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@keyframes pointD {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.vpill {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: var(--yellow);
  color: var(--yellow-ink);
  font-weight: 500;
  font-size: 1rem;
  border-radius: 999px;
  padding: 8px 26px 8px 8px;
  transition: transform 0.45s var(--ease), background 0.3s;
  box-shadow: 0 14px 36px -16px rgba(214, 195, 40, 0.5);
}
.vpill:hover { background: var(--yellow-hover); }
.vpill:active { transform: scale(0.97); }
.vpill__disc {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-arrow);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.vpill__disc svg { width: 18px; height: 18px; }
.vpill:hover .vpill__disc svg { animation: pointR 0.8s ease-in-out infinite; }
.vpill--big { font-size: 1.05rem; padding-right: 30px; }

/* botão "ver mais / ver menos" do mural */
.morebtn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--tink);
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  border-radius: 999px;
  padding: 15px 26px;
  transition: background 0.35s, color 0.35s, transform 0.4s var(--ease);
}
.morebtn:hover { background: #1D2427; }
.morebtn:active { transform: scale(0.97); }
.morebtn__chev {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  transition: transform 0.4s var(--ease);
}
.morebtn__chev svg { width: 18px; height: 18px; }
.morebtn:hover .morebtn__chev { transform: translateY(3px); }
/* estado recolher: vira link em linha, chevron para cima */
.morebtn.is-open {
  background: none;
  color: var(--tink);
  padding: 8px 4px;
  border-bottom: 1px solid var(--line-l);
  border-radius: 0;
}
.morebtn.is-open:hover { background: none; color: var(--green-vivid); }
.morebtn.is-open .morebtn__chev { transform: rotate(180deg); }
.morebtn.is-open:hover .morebtn__chev { transform: rotate(180deg) translateY(3px); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--green-tint);
  color: var(--green-d);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 12px;
  padding: 11px 18px;
}
.chip svg { width: 17px; height: 17px; }

.ulink {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 500;
  font-size: 1rem;
  padding-bottom: 10px;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.3s;
}
.ulink:hover { opacity: 0.6; }
.ulink__corner {
  width: 9px; height: 9px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  align-self: center;
  transition: transform 0.35s var(--ease);
}
.ulink:hover .ulink__corner { transform: translate(3px, -3px); }

/* ==========================================================
   ÍCONES ANIMADOS
   ========================================================== */
/* Animação de "desenhar" REMOVIDA: usava stroke-dasharray fixo (70/30/26) que
   não corresponde ao comprimento real de cada path — paths mais longos ficavam
   permanentemente cortados. Os ícones agora são estáticos e íntegros. */

/* ==========================================================
   HERO (V1)
   ========================================================== */
.hero {
  position: relative;
  min-height: 96dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }

/* parede de fotos · colunas em carrossel contínuo */
.herowall {
  --wall-gap: clamp(8px, 0.9vw, 14px);
  position: absolute;
  inset: 0 -1%;
  display: flex;
  /* flex-start é essencial: com o stretch padrão a coluna herda a altura do
     container, e o yPercent -50 passa a deslocar metade DISSO em vez de um
     bloco — era o que fazia o loop "pular". Aqui a coluna mede o conteúdo. */
  align-items: flex-start;
  gap: var(--wall-gap);
}
/* O respiro entre tiles é margin, NÃO gap na coluna. Com gap, a coluna mede
   2·bloco + gap, e mover -50% desloca bloco + gap/2 — meio gap de erro por
   ciclo, que aparecia como um "pulo" no loop. Com margin, bloco = n·(h+gap)
   e -50% desloca exatamente um bloco. */
.herowall__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.herowall__set {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.heroshot {
  display: block;
  width: 100%;
  /* altura em dvh (e não aspect-ratio): assim o bloco cresce junto com a
     área visível. REGRA DO LOOP: um bloco precisa ser >= a altura visível
     da parede, senão sobra buraco no fim do ciclo. */
  height: 24dvh;
  margin-bottom: var(--wall-gap);
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--ink-2); /* base enquanto a foto carrega */
  box-shadow: inset 0 0 0 1px rgba(194, 205, 216, 0.06);
}
.heroshot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* desfoque leve da parede feito aqui (e não com filter no container animado:
     assim o blur não re-rasteriza os 56 tiles a cada frame).
     Suba/remova o valor para deixar as fotos mais ou menos nítidas. */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* vinheta suave: escurece as bordas sem apagar a parede de fotos */
  background:
    radial-gradient(112% 84% at 50% 30%, rgba(var(--scrim),0) 0%, rgba(var(--scrim),0.48) 68%, rgba(var(--scrim),0.90) 100%),
    linear-gradient(180deg, rgba(var(--scrim),0.55) 0%, rgba(var(--scrim),0.06) 22%, rgba(var(--scrim),0.26) 56%, rgba(var(--scrim),0.94) 100%);
  pointer-events: none;
}

/* recorte do expert, na frente da parede e atrás do texto.
   A arte é paisagem (873×552, braços abertos): dimensiona pela largura. */
.hero__figure {
  position: absolute;
  left: 50%;
  top: 3%;
  z-index: 3;
  width: min(738px, 50vw);
  transform: translateX(-50%);
  pointer-events: none;
}
.hero__figure img {
  width: 100%;
  height: auto;
  display: block;
  /* descola o recorte da parede de fotos */
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}
/* Véu de baixo para cima sobre o recorte E a parede: escurece e desfoca
   progressivamente até a cor do fundo, garantindo a leitura do texto.
   O mask faz o desfoque entrar aos poucos em vez de começar com uma borda. */
.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Rampa LONGA (espalhada por ~420px) para escurecer de baixo para cima sem
     formar linha. O elemento é alto de propósito: o que define onde o efeito
     "aparece" é a curva, não a borda — os primeiros 20% ficam quase zerados.
     A legibilidade do texto na faixa de transição vem do text-shadow abaixo,
     não de opacidade alta aqui (era isso que exigia rampa curta e criava a
     linha seca). */
  height: 78%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--scrim), 0) 0%,
    rgba(var(--scrim), 0.04) 12%,
    rgba(var(--scrim), 0.16) 22%,
    rgba(var(--scrim), 0.45) 32%,
    rgba(var(--scrim), 0.75) 42%,
    rgba(var(--scrim), 0.92) 52%,
    rgba(var(--scrim), 0.99) 62%,
    rgb(var(--scrim)) 70%,
    rgb(var(--scrim)) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* o mask entra igualmente devagar: desfoque sem costura visível */
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 15%, rgba(0,0,0,0.5) 32%, #000 55%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 15%, rgba(0,0,0,0.5) 32%, #000 55%);
}
.hero__content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 120px var(--pad) clamp(48px, 6vw, 84px);
}
.hero__meta {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
  /* colado na headline: encurta o bloco de texto e libera o centro da hero */
  margin-bottom: clamp(10px, 1.2vw, 16px);
}
.hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: clamp(1.02rem, 1.4vw, 1.25rem);
  /* a linha de data cai na faixa de transição do véu; a sombra garante a
     leitura sem precisar de véu opaco ali (que criaria a linha seca) */
  text-shadow: 0 1px 14px rgba(var(--scrim), 0.95), 0 0 4px rgba(var(--scrim), 0.8);
}
.hero__meta-item .ai, .hero__meta-item i {
  width: 26px; height: 26px;
  color: var(--green);
  display: inline-block;
  flex-shrink: 0;
}
.hero__meta-item svg { width: 100%; height: 100%; }

.hero__title {
  font-size: clamp(1.4rem, 4.4vw, 3.8rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: clamp(26px, 3vw, 38px);
  text-shadow: 0 2px 22px rgba(var(--scrim), 0.6);
}
.hero__title em { color: var(--green); }
.hero__title .hline { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero__title .hline > span { display: inline-block; white-space: nowrap; }

.hero__apply {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__capsule {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  background: var(--veil);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--green-a), 0.28);
  border-radius: 999px;
  padding: 10px 30px 10px 10px;
}
.hero__note {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--gray);
}
.hero__note strong { color: var(--green); font-weight: 500; }
.hero__note-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse 2s var(--ease) infinite;
}
.hero__note-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse 2s var(--ease) infinite;
}

/* ==========================================================
   GROW (interseção V2)
   ========================================================== */
.grow {
  background: var(--ink);
  display: flex;
  justify-content: center;
  padding: clamp(64px, 8vw, 110px) 0;
  overflow: clip;
}
.grow__media {
  width: 100vw;
  aspect-ratio: 16 / 7.2;
  border-radius: 12px;
  transform: scale(0.72);
  transform-origin: center center;
  will-change: transform;
  box-shadow: 0 60px 140px -60px rgba(0, 0, 0, 0.8);
}

/* ==========================================================
   YOUTUBE FULL-WIDTH
   ========================================================== */
.yt { position: relative; width: 100vw; margin-bottom: clamp(64px, 8vw, 100px); }
.yt__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.yt__frame iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: calc(100% + 140px); /* corta título/branding do player */
  border: 0;
  pointer-events: none; /* bloqueia clique que pausaria */
}
.yt__shield { position: absolute; inset: 0; z-index: 2; }
.yt__sound {
  position: absolute;
  right: clamp(16px, 2.5vw, 36px);
  bottom: clamp(16px, 2.5vw, 36px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(var(--scrim), 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-weight: 500;
  font-size: 0.92rem;
  border-radius: 999px;
  padding: 12px 20px;
  transition: background 0.3s, transform 0.35s var(--ease);
}
.yt__sound:hover { background: rgba(var(--scrim), 0.9); transform: translateY(-2px); }
.yt__sound i { width: 18px; height: 18px; display: grid; place-items: center; }
.yt__sound svg { width: 18px; height: 18px; }
.yt__sound .ico-on { display: none; }
.yt__sound.is-on .ico-on { display: block; }
.yt__sound.is-on .ico-muted { display: none; }

.bigquote {
  text-align: center;
  margin-top: clamp(92px, 12vw, 170px);
  margin-bottom: clamp(48px, 7vw, 110px);
}
.bigquote__who {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--green);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: clamp(26px, 3vw, 40px);
}
.bigquote blockquote {
  font-size: clamp(1.35rem, 2.5vw, 1.95rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 44ch;
  margin: 0 auto;
}
.bigquote__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ink-3) center/cover no-repeat;
  border: 1px dashed rgba(var(--green-a), 0.4);
  color: rgba(var(--green-a), 0.55);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.bigquote__avatar svg { width: 24px; height: 24px; }
/* quando a foto real entrar: adicionar .has-img + background-image inline */
.bigquote__avatar.has-img { border-style: solid; }
.bigquote__avatar.has-img svg { display: none; }

/* ==========================================================
   BIGNUM (V2)
   ========================================================== */
.bignum {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(100px, 12vw, 160px) 0 0;
  background: var(--ink);
  overflow: hidden;
}
.bignum__bg {
  /* 12% de sobra em cima e embaixo: o parallax desliza por transform (yPercent
     ±8) sem descobrir as bordas — e sem repintar a foto a cada frame */
  position: absolute; top: -12%; bottom: -12%; left: 0; right: 0;
  background-image: url('img/plateia-desk.webp');
}
.bignum__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--scrim),0.82) 0%, rgba(var(--scrim),0.25) 45%, rgba(var(--scrim),0.9) 100%);
}
.bignum__title {
  position: relative;
  z-index: 3;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: min(60vw, 14ch);
  padding: 0 var(--pad);
  margin-left: max(var(--pad), calc((100vw - var(--wide)) / 2 + var(--pad)));
}
.bignum__strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(var(--scrim), 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.bignum__cell {
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 40px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.bignum__cell:first-child { border-left: none; }
.bignum__value {
  display: block;
  font-size: clamp(2.6rem, 4.8vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.bignum__label { color: rgba(255, 255, 255, 0.66); font-size: 0.92rem; line-height: 1.4; display: block; max-width: 24ch; }

/* ==========================================================
   DECK (V2, sem meta)
   ========================================================== */
.deck {
  max-width: min(1080px, 88vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12vh;
  padding-bottom: 6vh;
}
.deck__card { position: sticky; top: 9vh; }
.deck__card:nth-child(2) { top: 10.4vh; }
.deck__card:nth-child(3) { top: 11.8vh; }
.deck__card:nth-child(4) { top: 13.2vh; }
.deck__card:nth-child(5) { top: 14.6vh; }
.deck__card:nth-child(6) { top: 16vh; }
.deck__media {
  aspect-ratio: 16 / 8.6;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, 0.95);
}
.deck__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  border-radius: 50%;
  /* sem backdrop-filter: eram 30 instâncias na página, cada uma um passe de
     desfoque do compositor. O véu claro + borda + sombra reproduzem a leitura
     do vidro fosco sem custo de composição. */
  background: rgba(239, 243, 242, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 2px 18px rgba(var(--scrim), 0.45);
  color: var(--white);
  display: grid;
  place-items: center;
  z-index: 4;
  transition: background 0.35s, color 0.35s, transform 0.4s var(--ease);
}
.deck__play svg { width: 26px; height: 26px; margin-left: 3px; }
.deck__card:hover .deck__play, .caro__item:hover .deck__play { background: var(--green); color: var(--green-ink); transform: translate(-50%, -50%) scale(1.07); }
.deck__play--sm { width: 54px; height: 54px; }
.deck__play--sm svg { width: 18px; height: 18px; }

/* carrossel */
.caro {
  margin: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 72px);
  --caro-pad: max(var(--pad), calc((100vw - var(--wide)) / 2 + var(--pad)));
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "tag nav" "track track";
  align-items: center;
  row-gap: 22px;
}
.caro__tag { grid-area: tag; padding-left: var(--caro-pad); }
.caro__nav { grid-area: nav; display: flex; gap: 10px; padding-right: var(--caro-pad); }
.caro__track { grid-area: track; }
.caro__btn {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid var(--line-d);
  display: grid;
  place-items: center;
  color: var(--white);
  transition: border-color 0.3s, color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.caro__btn svg { width: 20px; height: 20px; }
.caro__btn:hover { border-color: #fff; color: var(--tink); background: #fff; transform: scale(1.05); }
.caro__track {
  display: flex;
  /* flex-start é obrigatório: com o stretch padrão o item era esticado na altura
     e o aspect-ratio derivava dali uma largura MENOR que a base flex reservada.
     A sobra virava folga visual (o gap real dava 56px em vez de 18px) e a altura
     esticada ainda estourava o container, cortando a base dos cards. */
  align-items: flex-start;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* margem só à esquerda: sangra para fora à direita.
     A folga embaixo acomoda o -5px do hover e a sombra sem clipar. */
  padding: 6px 0 14px var(--caro-pad);
  scroll-padding-left: var(--caro-pad);
  scrollbar-width: none;
}
.caro__track::-webkit-scrollbar { display: none; }
.caro__item {
  position: relative;
  flex: 0 0 clamp(300px, 30vw, 430px);
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.45s var(--ease);
}
.caro__item:hover { transform: translateY(-5px); }

/* ==========================================================
   MENTOR
   ========================================================== */
.mentor__title { margin-bottom: 14px; }
.mentor__role {
  color: var(--green);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  margin-bottom: clamp(44px, 5vw, 68px);
}
.mentor__shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  margin-bottom: clamp(52px, 6vw, 84px);
}
.mentor__shot {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--ink-2);
}
.mentor__shot img { width: 100%; height: auto; display: block; }

.mentor__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(80px, 10vw, 130px);
}
.mentor__copy { display: flex; flex-direction: column; gap: 18px; }
.mentor__copy .txt { max-width: 60ch; }

.mentor__stats {
  border-left: 1px solid var(--line-d);
  padding-left: clamp(24px, 3vw, 44px);
}
.mentor__statskey {
  color: var(--gray);
  font-size: 1.02rem;
  line-height: 1.45;
  max-width: 34ch;
  margin-bottom: 22px;
}
.mentor__statskey + .mstat { margin-bottom: 26px; }
.mstat { margin-bottom: 34px; }
.mstat:last-child { margin-bottom: 0; }
.mstat__v {
  display: block;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.mstat__l { display: block; color: var(--gray); font-size: 0.98rem; }
.mstat__l em { color: var(--gray-d); }

/* galeria 3D dos experts */
.exptitle {
  font-size: clamp(2.1rem, 4.7vw, 4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--white);
  max-width: 22ch;
  margin: 0 auto clamp(48px, 6vw, 76px);
}
/* ---- galeria 3D dos experts ----
   Estado padrão = grade estática (é o que fica se o JS/GSAP não rodar
   ou se o usuário pede menos movimento). O JS adiciona .is-3d para
   ligar o voo em profundidade. */
.gal3d {
  --gal-persp: 750px;   /* menor = zoom mais dramático */
  --gal-odd: 70%;       /* posição horizontal dos cards ímpares */
  --gal-even: 30%;      /* posição horizontal dos cards pares */
  padding: 0 var(--pad);
}
.gal3d__stage {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 20px);
}
.gal3d__card { width: clamp(126px, 13.4vw, 186px); }
/* o PNG já traz cartão, cantos e sombra — nada de moldura por cima */
.gal3d__card img { width: 100%; height: auto; display: block; }
.gal3d__bar { display: none; }

/* modo 3D */
.gal3d.is-3d { padding: 0; }
.gal3d.is-3d .gal3d__stage {
  display: block;
  max-width: none;
  margin: 0;
  height: 100svh;
  perspective: var(--gal-persp);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  overflow: hidden;
  position: relative;
}
.gal3d.is-3d .gal3d__card {
  position: absolute;
  top: 50%;
  left: var(--gal-odd);
  width: min(400px, 32vw); /* mesma medida da galeria de referência */
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.gal3d.is-3d .gal3d__card:nth-child(even) { left: var(--gal-even); }

@media (max-width: 1024px) {
  .gal3d { --gal-odd: 80%; --gal-even: 20%; }
}
@media (max-width: 767px) {
  .gal3d { --gal-persp: 600px; --gal-odd: 58%; --gal-even: 42%; }
  .gal3d.is-3d .gal3d__card { width: min(78vw, 320px); }
  /* barra de progresso do voo, só no mobile */
  .gal3d.is-3d .gal3d__bar {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: rgba(var(--green-a), 0.18);
    pointer-events: none;
    z-index: 99;
  }
  .gal3d.is-3d .gal3d__bar i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left center;
  }
}

/* ==========================================================
   DAYS · blocos verticais (V2 layout + bloco V3)
   ========================================================== */
/* trilho horizontal pinado dos dias */
.dayrail { position: relative; overflow: hidden; margin: clamp(48px, 6vw, 72px) 0 clamp(40px, 5vw, 56px); }
.dayrail__track { display: flex; width: max-content; will-change: transform; }
.dayslide {
  width: 100vw;
  padding: 0 var(--pad);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.dayblock {
  width: 100%;
  max-width: 1300px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 64px);
  background: linear-gradient(165deg, var(--ink-3), var(--ink-2));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--r) + 6px);
  padding: clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.dayblock__media {
  border-radius: var(--r);
  min-height: 380px; height: 100%;
  /* mesmo gradiente do fundo das ilustrações (medido nas bordas do arquivo:
     #FEFEFE em cima, #C4CDD8 embaixo) — no mobile, onde a arte entra inteira
     em contain, as faixas laterais somem no fundo em vez de aparecer como moldura */
  background: linear-gradient(180deg, #FEFEFE 0%, #C4CDD8 100%);
}
.dayblock__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dayblock__body { padding: clamp(4px, 1vw, 16px) 0; }
.dayblock__tag {
  display: inline-block;
  background: rgba(var(--green-a), 0.1);
  border: 1px solid rgba(var(--green-a), 0.3);
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 18px;
}
.dayblock h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.dayblock h3 em { color: var(--green); }
.dayblock__body > .txt { margin-bottom: 24px; }
.dayblock__label {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-d);
  border-bottom: 1px solid var(--line-d);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.dayblock__list { margin-bottom: 26px; }
.dayblock__list li {
  position: relative;
  padding: 7px 0 7px 26px;
  color: var(--gray);
  font-size: 0.98rem;
}
.dayblock__list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 15px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--green);
}
.dayblock__take {
  display: inline-block;
  background: rgba(var(--green-a), 0.08);
  border: 1px solid rgba(var(--green-a), 0.22);
  border-radius: 12px;
  padding: 16px 22px;
  font-size: 1.05rem;
  font-weight: 500;
}
.dayblock__take { color: var(--green); }

/* ==========================================================
   PQV.AI (V3 + vídeo + ícones)
   ========================================================== */
.ailogo {
  width: clamp(180px, 20vw, 258px);
  height: auto;
  margin: 0 auto clamp(34px, 4vw, 52px);
}
.aivideo {
  display: block;
  width: 100%;
  border-radius: var(--r);
  margin-bottom: clamp(40px, 5vw, 64px);
  background: var(--ink-2);
  /* o vídeo tem fundo branco como a seção — a borda evita que ele "suma" */
  border: 1px solid var(--line-l);
  box-shadow: 0 30px 70px -46px rgba(44, 52, 57, 0.4);
}
.prosplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
}
.prosplit__left .ldim { max-width: 50ch; margin-bottom: 26px; }
.pluslist { margin-bottom: 30px; }
.pluslist li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  font-weight: 500;
}
.pluslist li span {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-d);
  display: grid;
  place-items: center;
  font-weight: 500;
  flex-shrink: 0;
}
.srow {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border-radius: var(--r-sm);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: transform 0.4s var(--ease), background 0.35s;
}
.srow:hover { transform: translateX(6px); background: var(--card-2); }
.srow__ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--green-tint);
  color: var(--green-d);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.35s var(--ease);
}
.srow__ico svg { width: 21px; height: 21px; }
.srow:hover .srow__ico { transform: scale(1.1) rotate(-4deg); }
.srow h3 { font-size: clamp(1rem, 1.32vw, 1.16rem); font-weight: 500; line-height: 1.3; }

/* ==========================================================
   TRIO (V3, refinado)
   ========================================================== */
.prose {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 60ch;
  margin: 0 auto clamp(48px, 6vw, 72px);
  color: var(--dim);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
}
/* timeline vertical (V1) */
.tline {
  position: relative;
  max-width: 1020px;
  margin: 0 auto clamp(44px, 5vw, 64px);
  padding: 24px var(--pad);
}
.tline__bar {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(23, 24, 26, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.tline__fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: var(--green-d);
  transform: scaleY(0);
  transform-origin: top;
}
.tline__item {
  position: relative;
  width: 50%;
  padding: clamp(28px, 3.5vw, 44px) clamp(48px, 6vw, 88px) clamp(28px, 3.5vw, 44px) 0;
  text-align: right;
}
.tline__item--right {
  margin-left: 50%;
  padding: clamp(28px, 3.5vw, 44px) 0 clamp(28px, 3.5vw, 44px) clamp(48px, 6vw, 88px);
  text-align: left;
}
.tline__dot {
  position: absolute;
  top: clamp(40px, 4.5vw, 58px);
  right: -8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--green-d);
  box-shadow: 0 0 0 6px rgba(15, 169, 104, 0.14);
}
.tline__item--right .tline__dot { right: auto; left: -8px; }
.tline__num {
  display: block;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 500;
  color: var(--green-d);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.tline__text h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.35;
  max-width: 30ch;
  display: inline-block;
}
.tline__text p { color: var(--dim); margin-top: 6px; font-size: 0.95rem; }

/* bloco de escassez (abaixo do botão) */
.scar {
  max-width: 520px;
  margin: clamp(30px, 3.6vw, 44px) auto 0;
}
.scar__note {
  color: var(--dim);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-top: 14px;
  text-align: center;
  text-wrap: balance;
}

/* ==========================================================
   CARDGRID incluso (V3, sem dots, texto maior)
   ========================================================== */
/* baralho: os cards se sobrepõem no scroll, os de trás levemente girados */
.cardstack {
  width: 100%;
  max-width: 720px;
  margin: clamp(40px, 5vw, 60px) auto 0;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  gap: 11vh;
  padding-bottom: 12vh;
}
.vcard {
  position: sticky;
  top: 15vh;
  background: #fff;
  border-radius: var(--r);
  padding: 10px;
  transform-origin: 50% 8%;
  box-shadow: 0 30px 60px -34px rgba(44, 52, 57, 0.35);
}
.vcard__media { aspect-ratio: 16 / 9; border-radius: calc(var(--r) - 6px); }
.vcard__foot { padding: 20px 16px 14px; text-align: center; }
.vcard__foot h3 {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  font-weight: 500;
  line-height: 1.32;
  text-wrap: balance;
}

/* ==========================================================
   FIT2 (V3)
   ========================================================== */
.fit2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: start; }
/* box positiva (verde) e negativa (vermelha) */
.fitcard {
  border-radius: var(--r);
  padding: 34px;
  background: linear-gradient(180deg, rgba(53, 185, 127, 0.11) 0%, rgba(53, 185, 127, 0.035) 100%);
  border: 1px solid rgba(53, 185, 127, 0.24);
}
.fitcard--no {
  background: linear-gradient(180deg, rgba(215, 50, 51, 0.09) 0%, rgba(215, 50, 51, 0.028) 100%);
  border-color: rgba(215, 50, 51, 0.22);
}
.fitcard__head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  margin-bottom: 20px;
}
.fitcard__head i { width: 10px; height: 10px; background: var(--green-d); border-radius: 3px; flex-shrink: 0; }
.fitcard--no .fitcard__head i { background: var(--red); }
.fitcard li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  font-weight: 500;
  font-size: 1.02rem;
  border-top: 1px solid rgba(23, 24, 26, 0.08);
}
.check {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(15, 169, 104, 0.14);
  color: var(--green-d);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.check svg { width: 13px; height: 13px; }
.check--no { background: rgba(215, 50, 51, 0.10); color: var(--red); }
.fitcard--no li { color: var(--dim); font-weight: 400; }

/* ==========================================================
   MURAL (V3)
   ========================================================== */
.muralgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: clamp(40px, 5vw, 60px) auto;
}
.muralcell {
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  transition: transform 0.45s var(--ease);
}
.muralcell:hover { transform: translateY(-6px); }
.muralcell--extra { display: none; }
.muralgrid.is-open .muralcell--extra { display: block; }

/* ==========================================================
   LEDGER (V2, textos maiores + corte vermelho)
   ========================================================== */
.ledger {
  max-width: 860px;
  margin: clamp(48px, 6vw, 72px) auto 0;
  padding: 0 var(--pad);
}
.ledger__group { margin-bottom: clamp(40px, 5vw, 56px); }
.ledger__key {
  color: var(--dim);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  text-align: center;
  margin-bottom: 14px;
}
.ledger__list { border-top: 1px solid var(--line-l); }
.ledger__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(23, 24, 26, 0.08);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}
.ledger__list li span { max-width: 44ch; }
.ledger__list li em { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.ledger__list li em.ok { color: var(--green-d); }
/* valor riscado · line-through nativo, revelado no scroll */
.cut-price {
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.5s var(--ease), color 0.5s var(--ease);
}
.cut-price.is-cut {
  text-decoration-color: var(--red);
  color: var(--dim);
}
.ledger__total {
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
  border-top: 1px solid var(--line-l);
  padding-top: clamp(28px, 3.5vw, 40px);
}
.ledger__total em { color: var(--green-d); }

/* ==========================================================
   ZERO (contagem regressiva)
   ========================================================== */
.zero {
  background: var(--ink);
  color: var(--white);
  min-height: 92dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--pad);
  overflow: hidden;
}
.zero__label {
  color: var(--white);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 500;
  margin-bottom: 12px;
}
.zero__value {
  font-size: clamp(5rem, 16vw, 14rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  margin-bottom: 28px;
}
.zero__claim {
  /* mesmo corpo do .zero__label, no amarelo do botão */
  color: var(--yellow);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.35;
  max-width: 24ch;
  margin-bottom: 18px;
}
.zero__micro { color: var(--gray); max-width: 58ch; font-size: 0.98rem; line-height: 1.7; }
.zero__cta { margin-top: clamp(34px, 4.5vw, 52px); }

/* ==========================================================
   PEGADINHA (V1, espaçamentos corrigidos)
   ========================================================== */
.pricecards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: clamp(44px, 5.5vw, 72px) auto clamp(48px, 6vw, 64px);
}
.pricecard {
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r);
  padding: 32px 30px;
  transition: border-color 0.4s, transform 0.45s var(--ease);
}
.pricecard:hover { border-color: rgba(var(--green-a), 0.3); transform: translateY(-5px); }
.pricecard__icon {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  background: rgba(var(--green-a), 0.09);
  color: var(--green);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}
.pricecard__icon svg { width: 26px; height: 26px; }
.pricecard h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 500; margin-bottom: 10px; }
.pricecard p { color: var(--gray); font-size: 0.98rem; }
.priceclose {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--gray);
  max-width: 46ch;
  margin: 0 auto clamp(32px, 4vw, 44px);
}
.priceclose strong { color: var(--white); }

/* ==========================================================
   FAQ (V1)
   ========================================================== */
.section--faq { padding-bottom: clamp(100px, 12vw, 160px); }
.faq { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid var(--line-d); }
.faq__item:last-child { border-bottom: 1px solid var(--line-d); }
.faq__item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--green); }
.faq__plus { position: relative; width: 15px; height: 15px; flex-shrink: 0; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; background: currentColor; transition: transform 0.4s var(--ease); }
.faq__plus::before { left: 0; right: 0; top: 6.5px; height: 2px; }
.faq__plus::after { top: 0; bottom: 0; left: 6.5px; width: 2px; }
.faq__item[open] .faq__plus::after { transform: scaleY(0); }
.faq__body { padding: 0 0 26px; color: var(--gray); max-width: 64ch; }

/* ==========================================================
   FOOTER (V1)
   ========================================================== */
.footer { border-top: 1px solid var(--line-d); padding: clamp(40px, 5vw, 64px) 0; background: var(--ink); }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}
.footer__legal { color: var(--gray); font-size: 0.85rem; text-align: left; line-height: 1.6; }
.footer__policy { color: var(--gray); font-size: 0.85rem; line-height: 1.6; text-align: right; }
.footer__policy em { color: var(--gray-d); }

/* ==========================================================
   ANIM · estados iniciais
   ========================================================== */
html.has-anim [data-anim] { opacity: 0; transform: translateY(40px); filter: blur(6px); }
html.has-anim [data-hero] { opacity: 0; transform: translateY(24px); }
html.has-anim .hero__title .hline > span { transform: translateY(115%); }
html.has-anim [data-hero-media] { }
html.has-anim [data-chars] .word > span { transform: translateY(115%); }

@media (prefers-reduced-motion: reduce) {
  html.has-anim [data-anim], html.has-anim [data-hero] { opacity: 1; transform: none; filter: none; }
  html.has-anim .hero__title .hline > span,
  html.has-anim [data-chars] .word > span { transform: none; }
  html.has-anim [data-hero-media] { transform: none; }
  [data-fill] .w { opacity: 1 !important; }
  .grow__media { transform: none !important; }
  .cut-price { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* ==========================================================
   RESPONSIVO
   ========================================================== */
@media (max-width: 1100px) {
  .bignum__strip { grid-template-columns: 1fr 1fr; }
  .bignum__cell:nth-child(3) { border-left: none; }
  .bignum__cell { border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .bignum__title { max-width: 90vw; }
  .mentor__grid { grid-template-columns: 1fr; }
  .mentor__stats {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--line-d);
    padding-top: clamp(28px, 4vw, 40px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
  }
  .mentor__statskey { grid-column: 1 / -1; margin-bottom: 0; }
  .mstat, .mentor__statskey + .mstat { margin-bottom: 0; }
  /* dias: vira vertical */
  .dayrail__track { flex-direction: column; width: 100%; gap: 22px; }
  .dayslide { width: 100%; }
  .dayblock { grid-template-columns: 1fr; }
  /* No mobile a arte é um arquivo próprio (522x400, já com o fundo e o desenho
     centralizado). O <img> fica em fluxo normal: a altura vem do próprio arquivo.
     Sem aspect-ratio de propósito — em item de grid esticado sem conteúdo em
     fluxo, o Safari colapsa a caixa a zero e a imagem some. */
  .dayblock__media { min-height: 0; height: auto; align-self: start; background: none; }
  .dayblock__media img { position: static; width: 100%; height: auto; object-fit: initial; }
  .progress { display: none; }
  .prosplit { grid-template-columns: 1fr; }
  .tline__bar { left: 8px; }
  .tline__item, .tline__item--right {
    width: 100%;
    margin-left: 0;
    padding: 26px 0 26px 44px;
    text-align: left;
  }
  .tline__item .tline__dot, .tline__item--right .tline__dot { left: 0; right: auto; }
  .cardstack { max-width: 640px; gap: 9vh; }
  .fit2 { grid-template-columns: 1fr; }
  .muralgrid { grid-template-columns: 1fr 1fr; }
  .pricecards { grid-template-columns: 1fr; max-width: 560px; }
  .gal3d__card { width: clamp(120px, 20vw, 168px); }
}

@media (max-width: 768px) {
  body { font-size: 16px; }

  /* barra de escassez compacta */
  .notice { font-size: 0.74rem; padding: 8px 14px; }
  .notice__inner { gap: 9px; }
  .notice__pre { display: none; }
  .meter--dark { width: 54px; height: 6px; }
  .meter--bar { height: 44px; padding: 0 16px; }
  .meter__label, .meter__pct { font-size: 0.84rem; }

  /* HERO */
  .hero__content { padding-top: 90px; }
  /* parede: menos colunas e tiles mais altos, senão sobra vão no rodapé */
  /* 3 colunas: com 4 os tiles ficam estreitos demais para a altura exigida */
  .herowall { inset: 0 -2%; --wall-gap: 7px; }
  .herowall__col:nth-child(n+4) { display: none; }
  .heroshot { height: 25dvh; }
  /* sangra além da tela para o recorte ter presença (a hero tem overflow:hidden) */
  .hero__figure { width: min(118vw, 480px); top: 4%; }
  /* mobile tem muito mais texto: o véu sobe mais e fecha antes */
  .hero__fade {
    /* mobile mantém a versão aprovada antes do ajuste de altura */
    height: 80%;
    /* SEM backdrop-filter no mobile: dois véus de tela cheia desfocando uma
       parede que anima a cada frame era a principal fonte de travamento.
       Como aqui o véu já é quase opaco, o blur não muda quase nada. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg,
      rgba(var(--scrim), 0) 0%,
      rgba(var(--scrim), 0.22) 8%,
      rgba(var(--scrim), 0.58) 16%,
      rgba(var(--scrim), 0.86) 22%,
      rgb(var(--scrim)) 30%,
      rgb(var(--scrim)) 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 9%, #000 21%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 9%, #000 21%);
  }
  .hero__meta { flex-wrap: nowrap; gap: 16px; margin-bottom: 10px; }

  /* ---- custo de composição no mobile ----
     Cada backdrop-filter vira uma camada que o GPU precisa re-amostrar e
     re-desfocar por frame. Em telas grandes, sobre conteúdo em movimento,
     é o que segurava o scroll. Mantidos só os pequenos que dão identidade. */
  .hero__scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .bignum__strip { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(var(--scrim), 0.88); }
  .hero__meta-item { font-size: 0.9rem; gap: 8px; }
  .hero__meta-item .ai, .hero__meta-item i { width: 20px; height: 20px; }
  .hero__title {
    font-size: 1.78rem;
    line-height: 1.16;
    margin-bottom: 34px;
  }
  .hero__title .hline, .hero__title .hline > span { display: inline; white-space: normal; }
  .hero__apply { align-items: stretch; }
  .hero__capsule {
    width: 100%;
    border-radius: var(--r);
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 12px;
  }
  .hero__note { display: block; font-size: 0.86rem; text-align: center; }
  .hero__note-dot { display: inline-block; vertical-align: middle; margin-right: 8px; }

  /* botões ocupam toda a largura e ficam mais encorpados */
  .pillbtn, .vpill, .morebtn {
    width: 100%;
    justify-content: center;
    font-size: 0.98rem;
    padding: 11px 22px 11px 11px;
  }
  .morebtn { padding: 16px 22px; }
  .pillbtn__disc, .vpill__disc { width: 44px; height: 44px; }
  .pillbtn__disc svg, .vpill__disc svg { width: 17px; height: 17px; }
  .morebtn.is-open { width: auto; padding: 8px 4px; }

  /* imagem de interseção · full width, mesma animação do desktop */
  .grow { padding: clamp(40px, 8vw, 68px) 0; }
  .grow__media { aspect-ratio: 16 / 10; }

  .yt__sound span { display: none; }
  .yt__sound { padding: 12px; }
  .deck { max-width: 92vw; gap: 7vh; }

  /* carrossel · setas abaixo, centralizadas e menores */
  .caro { grid-template-columns: 1fr; grid-template-areas: "tag" "track" "nav"; row-gap: 18px; }
  .caro__tag { padding-right: var(--caro-pad); }
  .caro__nav { justify-content: center; padding-right: 0; }
  .caro__btn { width: 42px; height: 42px; }
  .caro__btn svg { width: 17px; height: 17px; }
  .caro__item { flex-basis: 80vw; }

  /* MENTOR */
  .mentor__shots { grid-template-columns: 1fr; }
  .mentor__stats { grid-template-columns: 1fr; }
  .gal3d__card { width: clamp(112px, 28vw, 150px); }

  /* PQV.ai · bullets logo abaixo do vídeo, 2 colunas */
  .prosplit__right {
    order: -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 34px;
  }
  .srow { margin-bottom: 0; padding: 14px 14px; gap: 12px; flex-direction: column; align-items: flex-start; }
  .srow:hover { transform: none; }
  .srow__ico { width: 36px; height: 36px; border-radius: var(--r-sm); }
  .srow__ico svg { width: 18px; height: 18px; }
  .srow h3 { font-size: 0.92rem; line-height: 1.25; }

  /* TIMELINE · número | linha com bolinha | texto */
  .tline__bar { left: calc(var(--pad) + 72px); transform: none; }
  .tline__item, .tline__item--right {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: 56px 32px 1fr;
    align-items: start;
    padding: 20px 0;
    text-align: left;
  }
  .tline__num {
    grid-column: 1;
    font-size: 1.45rem;
    text-align: right;
    margin-bottom: 0;
    line-height: 1.5;
  }
  .tline__item .tline__dot, .tline__item--right .tline__dot {
    position: static;
    grid-column: 2;
    justify-self: center;
    margin-top: 12px;
    width: 13px; height: 13px;
    box-shadow: 0 0 0 5px rgba(53, 185, 127, 0.14);
  }
  .tline__text { grid-column: 3; padding-left: 16px; }
  .tline__text h3 { font-size: 1.02rem; max-width: none; }
  .tline__text p { font-size: 0.88rem; }

  .muralgrid { grid-template-columns: 1fr; }
  /* folga extra para o giro dos cards não encostar na borda */
  .cardstack { max-width: none; gap: 7vh; padding: 0 calc(var(--pad) + 12px) 8vh; }
  .vcard { top: 12vh; }

  /* LEDGER · texto à esquerda, valor à direita, com mais respiro */
  .ledger__list li {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    padding: 17px 2px;
    font-size: 0.95rem;
    line-height: 1.45;
  }
  .ledger__list li span { flex: 1 1 auto; max-width: none; }
  .ledger__list li em { flex: 0 0 auto; font-size: 0.98rem; }
  .ledger__key { font-size: 0.95rem; }
  .ledger__total { font-size: 1.45rem; padding-top: 26px; }
  /* o valor vai pra linha de baixo inteiro: sem quebrar entre "R$" e o número */
  .ledger__total em { display: block; white-space: nowrap; }

  .footer__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 18px; }
  .footer__legal, .footer__policy { text-align: center; }
  /* arte vertical, feita para a proporção de tela do celular */
  .bignum__bg { background-image: url('img/plateia-mobile.webp'); }
  .cut { height: 40px; gap: 12px; }
  .cut i { width: 14px; }
  .cut i:nth-child(2) { width: 8px; }
  .cut i:nth-child(3) { width: 22px; }
  .cut i:nth-child(5) { width: 9px; }
  .cut i:nth-child(6) { width: 18px; }
}

@media (max-width: 380px) {
  .hero__meta { gap: 12px; }
  .hero__meta-item { font-size: 0.82rem; }
  .tline__item, .tline__item--right { grid-template-columns: 44px 28px 1fr; }
  .tline__bar { left: calc(var(--pad) + 58px); }
}