/* ════════════════════════════════════════════════════════════
   p-home.css — a home imersiva ("Trajetória").
   Carrega depois de tokens.css, site.css e fx.css; só existe na home.

   Movimento: lento, linear e preciso, sempre com --ease
   (cubic-bezier(.22,1,.36,1)). Nada de bounce, elástico ou neon.
   Todo texto já nasce visível: o movimento só realça.
   ════════════════════════════════════════════════════════════ */

/* camada compartilhada (cabeçalho, botões, Trajetória, faixas, clip-path): assets/fx.css */

/* ── Pré-carregamento: o V aparece em ~0,1 s e libera a página em 1,1 s ── */
.preload { display: none; }
html.fx-vivo .preload {
  position: fixed; inset: 0; z-index: 400; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--verde-noite); pointer-events: none;
  animation: preload-sai .38s var(--ease) .72s both;
}
.preload img { width: 72px; height: 72px; opacity: 0; transform: scale(.96); animation: preload-logo .5s var(--ease) .06s both; }
.preload i { width: 72px; height: 1px; background: linear-gradient(90deg, var(--teal), var(--ouro-lt)); transform: scaleX(0); transform-origin: left; animation: preload-linha .62s cubic-bezier(.22,1,.36,1) .1s both; }
@keyframes preload-logo { to { opacity: 1; transform: none; } }
@keyframes preload-linha { to { transform: scaleX(1); } }
@keyframes preload-sai { to { opacity: 0; visibility: hidden; } }

/* ── Na home, o cabeçalho flutua transparente sobre o hero e escurece ao rolar ── */
.home .site-header {
  position: fixed; left: 0; right: 0; top: 0;
  padding-top: env(safe-area-inset-top, 0px);
  background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.home .site-header.is-scrolled {
  background: rgba(13, 44, 37, .94); border-bottom-color: var(--linha-escura);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 10px 30px rgba(5, 20, 16, .22);
}
.home main [id] { scroll-margin-top: 76px; }

/* ════════════════════════════════════════════════════════════
   1 · Hero — a Trajetória
   ════════════════════════════════════════════════════════════ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(660px, 100svh); display: grid; align-items: center;
  background: radial-gradient(120% 90% at 50% 100%, #1C5446 0%, var(--verde-profundo) 38%, var(--verde-noite) 80%);
}
/* o halo e os respiros do hero antigo (site.css) não valem aqui */
.home .hero { padding: 0; }
.home .hero::before { content: none; }
/* véu: o topo escurece para o cabeçalho; a base, para o manifesto que sobe por cima */
.home .hero::after {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  width: auto; height: auto; max-width: none; max-height: none;
  background: linear-gradient(180deg, rgba(13, 44, 37, .7) 0%, rgba(13, 44, 37, 0) 26%, rgba(13, 44, 37, 0) 78%, rgba(13, 44, 37, .55) 100%);
}
.hero-conteudo { position: relative; padding-top: calc(68px + env(safe-area-inset-top, 0px) + clamp(40px, 9vh, 96px)); padding-bottom: clamp(150px, 20vh, 230px); }
.hero-texto { display: grid; gap: 24px; justify-items: start; max-width: 600px; }
.hero h1 { font-size: clamp(44px, 8.4vw, 104px); font-weight: 800; letter-spacing: -.035em; line-height: .98; max-width: 11ch; }
.hero h1 em {
  font-style: normal; color: var(--mint-lt);
  background: linear-gradient(100deg, var(--mint-lt) 0%, var(--teal) 46%, var(--ouro-lt) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero .lead { margin: 0; color: var(--tx-inv-2); font-size: clamp(17px, 1.6vw, 20px); max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero-selos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--tx-inv-2); }
.hero-selos li { display: inline-flex; align-items: center; gap: 9px; }
.hero-selos li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

.percorrido {
  position: absolute; right: var(--gutter-d); bottom: 84px; margin: 0; text-align: right;
  font: 500 11px/1.6 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: rgba(196, 233, 215, .74);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.percorrido b { display: block; margin-bottom: 4px; font: 700 28px/1 var(--f-display); letter-spacing: -.02em; color: var(--ouro-lt); font-variant-numeric: tabular-nums; }
@media (min-width: 1240px) { .percorrido { right: calc((100vw - 1180px) / 2 + 24px); bottom: 96px; } }

@media (max-width: 719.98px) {
  .hero { align-items: start; }
  .hero-conteudo { padding-top: calc(68px + env(safe-area-inset-top, 0px) + 28px); padding-bottom: 270px; }
  .hero-texto { gap: 18px; }
  .hero .lead { font-size: 16.5px; }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1 1 auto; padding: 14px 16px; font-size: 15px; }
  .percorrido { bottom: 72px; font-size: 10px; }
}
@media (max-width: 419.98px) {
  .hero-cta .seta { display: none; }
  .percorrido b { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════
   2 · Manifesto
   ════════════════════════════════════════════════════════════ */
.manifesto { z-index: 1; margin-top: -56px; padding: clamp(80px, 11vw, 140px) 0 clamp(88px, 12vw, 150px); }
.manifesto-grade { display: grid; grid-template-columns: 1px minmax(0, 1fr); column-gap: clamp(18px, 4vw, 56px); row-gap: 28px; }
.manifesto-regua { grid-row: 1 / span 2; position: relative; background: var(--border-mid); }
.manifesto-regua::after {
  content: ''; position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--lido, 1));
  background: linear-gradient(180deg, var(--verde), var(--teal) 60%, var(--ouro));
}
.manifesto .eyebrow { margin: 0; }
.manifesto-texto { font: 700 clamp(28px, 4.4vw, 56px)/1.18 var(--f-display); letter-spacing: -.025em; max-width: 22ch; color: var(--tx-1); text-wrap: pretty; }
.manifesto-texto strong { font-weight: inherit; color: var(--verde-tx); }

/* ════════════════════════════════════════════════════════════
   3 · Pilares — painel fixo (sticky) e lista que avança
   ════════════════════════════════════════════════════════════ */
.pilares { --fundo-faixa: var(--bg-suave); padding: clamp(88px, 11vw, 136px) 0 clamp(72px, 9vw, 112px); }
.pilares::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border); z-index: -1; }
.pilares-cabeca { display: grid; gap: 14px; max-width: 680px; margin-bottom: clamp(40px, 6vw, 72px); }
.pilares-cabeca h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.025em; }
.pilares-cabeca p { color: var(--tx-2); font-size: 17px; max-width: 58ch; }
.pilares-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }

.palco {
  position: sticky; top: calc(68px + env(safe-area-inset-top, 0px) + 40px);
  aspect-ratio: 1 / 1.02; border-radius: 22px; overflow: hidden; isolation: isolate; perspective: 900px;
  background:
    linear-gradient(rgba(154, 217, 188, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(154, 217, 188, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(150deg, #1D5A4A 0%, var(--verde-profundo) 55%, var(--verde-noite) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 64px rgba(30, 50, 45, .22);
}
/* borda metálica: ouro → mint → aço */
.palco::before {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--ouro-lt), rgba(194, 168, 106, .12) 40%, rgba(154, 217, 188, .4) 80%, var(--metal-edge));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* mira de instrumento nos cantos */
.palco::after {
  content: ''; position: absolute; inset: 18px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--mint), var(--mint)) 0 0 / 14px 1px, linear-gradient(var(--mint), var(--mint)) 0 0 / 1px 14px,
    linear-gradient(var(--mint), var(--mint)) 100% 0 / 14px 1px, linear-gradient(var(--mint), var(--mint)) 100% 0 / 1px 14px,
    linear-gradient(var(--mint), var(--mint)) 0 100% / 14px 1px, linear-gradient(var(--mint), var(--mint)) 0 100% / 1px 14px,
    linear-gradient(var(--mint), var(--mint)) 100% 100% / 14px 1px, linear-gradient(var(--mint), var(--mint)) 100% 100% / 1px 14px;
  background-repeat: no-repeat; opacity: .35;
}
.palco-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cena {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: translateZ(-120px) scale(.92); filter: blur(6px);
  transition: opacity .7s var(--ease), transform 1s var(--ease), filter .7s var(--ease);
}
.cena.on { opacity: 1; transform: none; filter: none; }
.cena.saiu { opacity: 0; transform: translateZ(90px) scale(1.07); filter: blur(5px); }
.cena svg { width: 74%; height: 74%; overflow: visible; }
/* com movimento, o traço da cena se desenha ao entrar */
.com-movimento .cena .tr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease) .12s; }
.com-movimento .cena.on .tr { stroke-dashoffset: 0; }
.com-movimento .cena .tinta, .com-movimento .cena .sobe { opacity: 0; transition: opacity .9s var(--ease) .5s; }
.com-movimento .cena.on .tinta, .com-movimento .cena.on .sobe { opacity: 1; }

.palco-leitura {
  position: absolute; left: 24px; bottom: 22px; z-index: 2; display: flex; align-items: baseline; gap: 12px;
  font: 600 11px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--mint-lt);
}
.palco-leitura b { font: 700 22px/1 var(--f-display); letter-spacing: 0; color: var(--ouro-lt); font-variant-numeric: tabular-nums; }
.palco-trilho { position: absolute; right: 24px; bottom: 26px; z-index: 2; display: flex; gap: 6px; }
.palco-trilho i { width: 18px; height: 2px; border-radius: 2px; background: rgba(196, 233, 215, .22); transition: background .6s var(--ease); }
.palco-trilho i.on { background: var(--ouro-lt); }

.pilares-lista { display: grid; }
.pilar { display: grid; gap: 12px; align-content: center; padding: 44px 0 44px 22px; border-top: 1px solid var(--border); position: relative; }
.pilar:last-child { border-bottom: 1px solid var(--border); }
.pilar::before { content: ''; position: absolute; left: 0; top: 44px; bottom: 44px; width: 2px; border-radius: 2px; background: var(--border-mid); transition: background .5s var(--ease); }
.pilar .eyebrow { color: var(--verde-tx); }
.pilar .eyebrow::before { display: none; }
.pilar h3 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.02em; }
.pilar p { color: var(--tx-2); max-width: 46ch; }
.pilar-itens { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pilar-itens li { font-size: 13px; font-weight: 600; color: var(--teal-tx); background: rgba(63, 191, 188, .1); padding: 6px 12px; border-radius: 999px; }
.pilar .btn-link { justify-self: start; min-height: 44px; }
/* acompanhando a leitura: o ativo ganha a régua em ouro; os outros ficam um tom abaixo, ainda em AA */
.pilares-lista.acompanha .pilar.on::before { background: linear-gradient(180deg, var(--ouro), var(--verde)); }
.pilares-lista.acompanha .pilar:not(.on) h3 { color: var(--tx-2); }
.pilares-lista.acompanha .pilar:not(.on) p { color: var(--tx-3); }
.pilares .nota-legal { margin-top: 40px; }
@media (min-width: 900px) {
  .pilar { min-height: 58vh; }
}
@media (max-width: 899.98px) {
  .pilares-grade { grid-template-columns: 1fr; gap: 0; }
  /* a sombra na cor do fundo cobre o vão até o cabeçalho e esfuma o texto que passa por baixo */
  .palco { top: calc(68px + env(safe-area-inset-top, 0px) + 8px); aspect-ratio: 16 / 9; z-index: 2; margin-bottom: 8px; border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 -10px 0 10px var(--bg-suave), 0 22px 20px 2px var(--bg-suave); }
  .cena svg { width: 50%; height: 84%; }
  .palco-leitura { left: 16px; bottom: 14px; }
  .palco-trilho { right: 16px; bottom: 18px; }
  .pilar { padding: 36px 0 36px 18px; min-height: 52vh; }
  .pilar::before { top: 36px; bottom: 36px; }
}

/* ════════════════════════════════════════════════════════════
   4 · Meu Plano — o app em movimento
   ════════════════════════════════════════════════════════════ */
.meu-plano { position: relative; padding: clamp(88px, 11vw, 140px) 0; overflow: hidden; border-top: 1px solid var(--border); }
.meu-plano-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.meu-plano-texto { display: grid; gap: 18px; justify-items: start; }
.meu-plano-texto h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.025em; max-width: 18ch; }
.meu-plano-texto .lead { margin: 0; max-width: 46ch; }
.recursos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 16px; }
.recursos li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.recursos svg { width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--verde-tx); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recursos b { font-family: var(--f-display); font-weight: 700; }
.recursos span { display: block; color: var(--tx-2); font-size: 15px; }
.app-acesso { font-size: 14px; color: var(--tx-2); }
.meu-plano .nota-legal { margin-top: 4px; }

.celular-zona { position: relative; display: grid; place-items: center; padding: 28px 0; }
.halo {
  position: absolute; width: 520px; height: 520px; max-width: 120%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(63, 191, 188, .26), rgba(154, 217, 188, .1) 45%, transparent 70%);
}
.celular {
  --rx: 5deg; --ry: -12deg; --luz: 50%;
  position: relative; width: 300px; max-width: 78vw; aspect-ratio: 9 / 19; padding: 12px; border-radius: 46px;
  background: linear-gradient(145deg, #E9EFED, var(--metal-2) 40%, var(--metal-edge) 60%, #8FA69F);
  box-shadow: 0 40px 80px rgba(30, 50, 45, .28), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(30, 50, 45, .2);
  transform: perspective(1200px) rotateY(var(--ry)) rotateX(var(--rx));
  transition: transform .9s var(--ease);
}
.celular.segue { transition: none; }
/* reflexo metálico que corre com a inclinação */
.celular::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent calc(var(--luz) - 22%), rgba(255, 255, 255, .22) var(--luz), transparent calc(var(--luz) + 22%));
  mix-blend-mode: soft-light;
}
.tela-app { height: 100%; border-radius: 35px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); font-size: 12px; }
.app-topo { display: grid; gap: 4px; padding: 36px 18px 22px; color: var(--tx-inv); background: linear-gradient(160deg, var(--verde-profundo), var(--verde-noite)); }
.app-topo small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-inv-2); }
.app-grande { font: 700 28px/1.1 var(--f-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.app-delta { font-size: 11px; color: var(--mint); }
.app-corpo { display: grid; gap: 10px; padding: 14px; }
.app-card { display: grid; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.app-card-t { font: 700 12px/1.2 var(--f-display); color: var(--tx-1); }
.linha { display: flex; justify-content: space-between; gap: 8px; color: var(--tx-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.linha b { color: var(--tx-1); font-weight: 600; }
.spark { width: 100%; height: 46px; display: block; }
.barra { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.barra i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--verde), var(--teal)); }
.barra.ouro i { background: linear-gradient(90deg, var(--ouro), var(--ouro-lt)); }
.passos-mes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 11px; color: var(--tx-2); }
.passos-mes li { display: flex; align-items: center; gap: 8px; }
.passos-mes li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--border-mid); }
.passos-mes li.feito { color: var(--tx-3); text-decoration: line-through; text-decoration-color: var(--border-mid); }
.passos-mes li.feito::before { border-color: var(--verde); background: var(--verde); box-shadow: inset 0 0 0 2px #fff; }
.app-abas { margin-top: auto; display: flex; justify-content: space-around; padding: 12px 24px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.app-abas i { width: 18px; height: 4px; border-radius: 2px; background: var(--surface-3); }
.app-abas i.on { background: var(--verde); }
.selo-exemplo {
  position: absolute; top: 6px; right: max(4%, calc(50% - 190px)); z-index: 2;
  font: 600 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ouro-tx);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; box-shadow: 0 8px 24px rgba(30, 50, 45, .1);
}
/* com movimento: barras e sparkline esperam o celular aparecer (os números já estão escritos) */
.celular.espera .barra i { width: 0; }
.celular.espera .spark-linha { stroke-dasharray: 1; stroke-dashoffset: 1; }
.celular.espera .spark-area { opacity: 0; }
.celular.vivo .barra i { transition: width 1.6s var(--ease) .25s; }
.celular.vivo .app-card .barra:nth-child(5) i { transition-delay: .4s; }
.celular.vivo .app-card .barra:nth-child(7) i { transition-delay: .55s; }
.celular.vivo .spark-linha { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease) .1s; }
.celular.vivo .spark-area { transition: opacity 1.2s var(--ease) .6s; }
@media (max-width: 899.98px) {
  .meu-plano-grade { grid-template-columns: 1fr; gap: 48px; }
  .celular { --rx: 0deg; --ry: 0deg; width: 270px; }
}

/* ════════════════════════════════════════════════════════════
   5 · Método — a trilha
   ════════════════════════════════════════════════════════════ */
.metodo { --fundo-faixa: var(--surface); padding: clamp(88px, 11vw, 136px) 0; }
.metodo h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.025em; max-width: 18ch; margin-top: 14px; }
.trilha { position: relative; margin-top: clamp(48px, 6vw, 72px); }
.trilha-svg { position: absolute; overflow: visible; pointer-events: none; }
.trilha-h { top: 27px; left: 28px; right: 28px; width: calc(100% - 56px); height: 2px; }
.trilha-v { display: none; }
.trilha-base { stroke: var(--surface-3); stroke-width: 2; }
.trilha-feita { stroke-width: 2; stroke-linecap: round; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.passo { position: relative; display: grid; gap: 12px; align-content: start; transition: transform .8s var(--ease); }
.passo-n {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--verde); font: 800 18px/1 var(--f-display); color: var(--verde-tx);
  box-shadow: 0 0 0 6px var(--surface);
  transition: border-color .6s var(--ease), color .6s var(--ease), background .6s var(--ease);
}
.passo:last-child .passo-n { border-color: var(--ouro); color: var(--ouro-tx); }
.passo small { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); margin-top: 8px; }
.passo h3 { font-size: 22px; letter-spacing: -.015em; }
.passo p { color: var(--tx-2); font-size: 15.5px; max-width: 34ch; }
/* com movimento: a etapa ainda não alcançada fica com o marco tracejado e um passo atrás (o texto segue legível) */
.trilha.anima .passo:not(.chegou) { transform: translateY(10px); }
.trilha.anima .passo:not(.chegou) .passo-n { border-style: dashed; border-color: var(--border-mid); color: var(--tx-3); }
.trilha.anima .passo.chegou .passo-n { background: var(--bg-suave); }
.metodo-mais { margin-top: 40px; }
@media (max-width: 859.98px) {
  .trilha-h { display: none; }
  .trilha-v { display: block; top: 28px; bottom: 28px; left: 27px; width: 2px; height: calc(100% - 56px); }
  .passos { grid-template-columns: 1fr; gap: 36px; padding-left: 76px; }
  .passo-n { position: absolute; left: -76px; top: 0; }
  .passo small { margin-top: 0; }
  .passo h3 { margin-top: -4px; }
}

/* ════════════════════════════════════════════════════════════
   6 · Teste da nota e 7 · Perguntas
   ════════════════════════════════════════════════════════════ */
.nota-secao { padding: clamp(72px, 9vw, 112px) 0; background: var(--bg); border-top: 1px solid var(--border); }
.perguntas { padding: clamp(72px, 9vw, 112px) 0 clamp(96px, 12vw, 150px); background: var(--bg-suave); border-top: 1px solid var(--border); }
.perguntas-grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.perguntas h2 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.02em; margin-top: 14px; max-width: 20ch; }
.perguntas-mais { margin-top: 20px; }
.perguntas .faq summary { min-height: 44px; }
@media (max-width: 859.98px) { .perguntas-grade { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   8 · CTA final — faixa escura com a Trajetória discreta
   ════════════════════════════════════════════════════════════ */
.final {
  --fundo-faixa: radial-gradient(110% 80% at 50% 0%, #1C5446 0%, var(--verde-profundo) 40%, var(--verde-noite) 85%);
  position: relative; overflow: hidden; margin-top: -40px; z-index: 1;
}
.final .trajetoria { z-index: 0; clip-path: var(--recorte); }
.final-grade { position: relative; z-index: 1; display: grid; gap: 56px; padding-top: clamp(112px, 13vw, 160px); padding-bottom: clamp(72px, 9vw, 104px); }
.final-cta { display: grid; gap: 20px; justify-items: start; max-width: 720px; }
.final-cta h2 { font-size: clamp(34px, 5.4vw, 68px); letter-spacing: -.035em; line-height: 1.02; }
.final-cta p { color: var(--tx-inv-2); font-size: 18px; max-width: 48ch; }
.final-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.final-entrar a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mint-lt); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(196, 233, 215, .4); }
.final-entrar a:hover { color: #fff; }
.contatos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.contato { display: grid; gap: 6px; min-width: 0; padding: 16px 16px 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(196, 233, 215, .16); }
.contato small { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-inv-2); }
.contato div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.contato a { font: 600 16px/1.3 var(--f-display); color: var(--tx-inv); overflow-wrap: anywhere; min-width: 0; padding: 10px 0; }
.contato a:hover { text-decoration: underline; text-underline-offset: 3px; }
.copiar { flex: none; min-height: 44px; min-width: 76px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(196, 233, 215, .12); color: var(--mint-lt); font: 600 13px/1 var(--f-body); transition: background var(--tf) var(--ease); }
.copiar:hover { background: rgba(196, 233, 215, .22); }
@media (max-width: 719.98px) {
  .final-grade { padding-top: 120px; }
  .final-acoes .btn { flex: 1 1 100%; }
}


.home .contato a { padding: 12px 0; }

/* ════════════════════════════════════════════════════════════
   Desempenho: as seções abaixo da dobra só fazem layout e pintura
   quando chegam perto da tela; a altura real fica lembrada (auto)
   ════════════════════════════════════════════════════════════ */
.pilares { content-visibility: auto; contain-intrinsic-size: auto 3000px; }
.meu-plano { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
.metodo { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.nota-secao { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
.perguntas { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.final { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.home .site-footer { content-visibility: auto; contain-intrinsic-size: auto 700px; }

/* ════════════════════════════════════════════════════════════
   Ilustrações da casa (assets/img): pilares, Mural e conversa
   ════════════════════════════════════════════════════════════ */
.pilar-foto { margin: 0 0 6px; max-width: 460px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--surface-2); box-shadow: var(--sh-card); }
.pilar-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .8s var(--ease); }
.pilares-lista.acompanha .pilar:not(.on) .pilar-foto img { filter: saturate(.55); }
.pilares-lista.acompanha .pilar.on .pilar-foto img { transform: scale(1.03); }

.mural { margin-top: clamp(56px, 7vw, 88px); }
.mural-titulo { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 15px; color: var(--tx-2); }
.mural-titulo b { font-family: var(--f-display); font-size: 18px; color: var(--tx-1); }
.mural-lista { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mural-lista li { position: relative; border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: var(--sh-card); border: 1px solid var(--border); }
.mural-lista img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--ease); }
.mural-lista li:hover img { transform: scale(1.03); }
.mural-lista span { display: block; padding: 12px 14px; font: 700 14px/1.3 var(--f-display); color: var(--tx-1); }
@media (max-width: 899.98px) { .mural-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.metodo-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 32px 56px; align-items: end; }
.metodo-foto { margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; box-shadow: var(--sh-card); background: var(--surface-2); }
.metodo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
@media (max-width: 859.98px) { .metodo-cabeca { grid-template-columns: 1fr; } .metodo-foto { aspect-ratio: 16 / 9; } }

/* ════════════════════════════════════════════════════════════
   Movimento reduzido: tudo parado e legível
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html.fx-vivo .preload { display: none; }
}