/* ════════════════════════════════════════════════════════════
   fx.css — a camada "Trajetória" do site inteiro.
   Carrega em todas as páginas (body.fx), depois de tokens.css,
   site.css e da folha da página. Aqui ficam o cabeçalho e o
   rodapé escuros, os botões ouro, a Trajetória, as faixas
   escuras (hero e chamada final), as transições em clip-path,
   a régua de leitura e os estados de movimento.

   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.
   ════════════════════════════════════════════════════════════ */

:root {
  --verde-noite: #0D2C25;          /* fundo das faixas escuras */
  --tx-inv-2: #B9D3C9;             /* texto secundário sobre o escuro */
  --linha-escura: rgba(196, 233, 215, .14);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-d: max(16px, env(safe-area-inset-right, 0px));
  --faixa-escura: radial-gradient(120% 95% at 72% 100%, #1C5446 0%, var(--verde-profundo) 40%, var(--verde-noite) 82%);
}
html { background: var(--verde-noite); }

/* Lenis (lenis.css da 1.3.26): a rolagem suave manda, o smooth do CSS sai */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

.escuro { color: var(--tx-inv); }
.escuro :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--tx-inv); }
.escuro .eyebrow { color: var(--ouro-lt); }

/* reveal sem esconder texto: o bloco chega com um passo curto, nunca transparente */
html.fx-vivo body.fx .reveal:not(.in) { opacity: 1; transform: translateY(14px); }

/* ── Cabeçalho escuro ───────────────────────────────────── */
.fx .site-header {
  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);
}
.fx .site-header.is-scrolled { background: rgba(13, 44, 37, .96); border-bottom-color: var(--linha-escura); box-shadow: 0 10px 30px rgba(5, 20, 16, .22); }
.fx .site-header .brand-name { color: #fff; }
.fx .site-header .brand-sub { color: var(--tx-inv-2); }
.fx .site-header :where(a, button):focus-visible { outline-color: var(--tx-inv); }
.fx .nav-links a { color: var(--tx-inv-2); min-height: 44px; display: inline-flex; align-items: center; }
.fx .nav-links a:hover, .fx .nav-links a.ativo, .fx .nav-links a[aria-current="page"] { color: #fff; }
.fx .nav-links a[aria-current="page"]::after { background: var(--ouro-lt); }
@media (min-width: 1080.02px) { .fx .nav-links a.nav-so-celular { display: none; } }
.fx .nav-cta .btn { min-height: 44px; }
.fx .nav-toggle { width: 44px; height: 44px; background: rgba(255, 255, 255, .06); border-color: rgba(196, 233, 215, .32); }
.fx .nav-toggle span, .fx .nav-toggle span::before, .fx .nav-toggle span::after { background: #fff; }
.fx .nav-toggle[aria-expanded="true"] span { background: transparent; }
@media (max-width: 1080px) {
  .fx .nav-links { background: var(--verde-noite); border-bottom-color: var(--linha-escura); box-shadow: 0 18px 30px rgba(5, 20, 16, .3); }
  .fx .nav-links a { min-height: 48px; display: flex; align-items: center; }
  .fx .nav-links a.ativo, .fx .nav-links a[aria-current="page"] { background: rgba(255, 255, 255, .06); box-shadow: none; }
  .fx .nav-links a:not(.nav-so-celular) + .nav-so-celular::before { background: var(--linha-escura); }
  .fx .nav-cta .btn-vidro { display: none; }
}
@media (max-width: 600px) { .fx .nav-cta .btn-ouro { padding: 10px 14px; font-size: 14px; } }
@media (max-width: 359.98px) { .fx .nav-cta .btn-ouro { display: none; } }
.fx main [id] { scroll-margin-top: 84px; }

/* régua de leitura: fio teal → ouro na base do cabeçalho (fx/main.js) */
.regua-leitura {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--teal), var(--ouro-lt)); transform: scaleX(0); transform-origin: left;
}

/* ── Botões ─────────────────────────────────────────────── */
.fx .btn { min-height: 44px; }
.btn .seta { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--tm) var(--ease); }
.btn:hover .seta { transform: translateX(3px); }
.btn-ouro {
  position: relative; overflow: hidden; isolation: isolate; color: var(--tx-sobre-ouro);
  background: linear-gradient(115deg, var(--ouro) 0%, var(--ouro-lt) 42%, var(--ouro) 72%, var(--ouro-dk) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 22px rgba(194, 168, 106, .24);
}
.btn-ouro:hover { color: var(--tx-sobre-ouro); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 30px rgba(194, 168, 106, .34); }
/* varredura de luz metálica: uma automática por tela (transicoes.js) e outra a cada hover */
.btn-ouro::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-130%);
}
.btn-ouro.brilho::after { animation: varre 1.2s var(--ease) both; }
@media (hover: hover) { .btn-ouro:hover::after { animation: varre .9s var(--ease) both; } }
@keyframes varre { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.btn-vidro { background: rgba(255, 255, 255, .06); color: var(--tx-inv); border-color: rgba(196, 233, 215, .36); }
.btn-vidro:hover { background: rgba(255, 255, 255, .12); border-color: rgba(196, 233, 215, .6); color: var(--tx-inv); }

/* ── Vídeo de fundo da abertura (fx/video.js), sob a Trajetória ── */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -4; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); pointer-events: none; }
.hero-video.rodando { opacity: .5; }

/* ── A Trajetória (canvas) e os rótulos dos marcos ──────── */
.trajetoria { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; opacity: 0; transition: opacity 1.6s var(--ease); pointer-events: none; }
.trajetoria.aceso { opacity: 1; }
.marcos { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.marco {
  position: absolute; left: 0; top: 0; padding: 5px 8px; border-radius: 4px; white-space: nowrap; will-change: transform, opacity;
  font: 600 10.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase;
}
.marco[data-estado="feito"] { color: rgba(196, 233, 215, .92); background: rgba(13, 44, 37, .5); border: 1px solid rgba(154, 217, 188, .4); }
.marco[data-estado="futuro"] { color: rgba(196, 233, 215, .5); border: 1px dashed rgba(196, 233, 215, .3); }

/* ════════════════════════════════════════════════════════════
   Faixa escura de abertura (hero das páginas internas)
   ════════════════════════════════════════════════════════════ */
body.fx .hero-fx {
  position: relative; isolation: isolate; overflow: hidden; color: var(--tx-inv);
  background: var(--faixa-escura);
  padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(72px, 10vw, 128px);
}
body.fx .hero-fx::before { content: none; }
/* véu à esquerda: o texto lê sempre sobre o escuro, a rota mora à direita */
body.fx .hero-fx::after {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  width: auto; height: auto; max-width: none; max-height: none; left: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(13, 44, 37, .72) 0%, rgba(13, 44, 37, .35) 45%, rgba(13, 44, 37, 0) 70%);
}
body.fx .hero-fx > .wrap { position: relative; z-index: 1; }
.hero-fx h1, .hero-fx .h-lg { color: #fff; }
.hero-fx :is(h1, h2) em, .hero-fx em.brush {
  font-style: normal; padding: 0; border-radius: 0; 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;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
}
.hero-fx .lead, .hero-fx .hero-trust, .hero-fx .app-hero-nota, .hero-fx .updated { color: var(--tx-inv-2); }
.hero-fx .hero-trust .dot { background: var(--teal); }
.hero-fx .eyebrow { color: var(--ouro-lt); }
.hero-fx > .wrap > * .btn-link, .hero-fx .hero-cta .btn-link { color: var(--mint-lt); }
.hero-fx .nota-legal { color: var(--tx-inv-2); border-left-color: rgba(219, 197, 146, .5); }
.hero-fx .nota-legal a { color: var(--mint-lt); }
/* cartões e fotos dentro da faixa continuam claros, com o texto escuro */
.hero-fx :is(.card, .browser, .phone, .foto) { color: var(--tx-1); }
.hero-fx .card .btn-link { color: var(--verde-dk); }
.hero-fx :is(.foto, .browser) { box-shadow: 0 30px 70px rgba(5, 20, 16, .45); }

/* ════════════════════════════════════════════════════════════
   Faixa escura de fechamento (chamada final das páginas internas)
   ════════════════════════════════════════════════════════════ */
body.fx .final-fx {
  --fundo-faixa: radial-gradient(110% 80% at 50% 0%, #1C5446 0%, var(--verde-profundo) 40%, var(--verde-noite) 85%);
  position: relative; overflow: hidden; color: var(--tx-inv); border-top: 0;
  padding-top: clamp(96px, 12vw, 150px); padding-bottom: clamp(88px, 11vw, 130px);
}
body.fx .final-fx .trajetoria { z-index: 0; clip-path: var(--recorte); }
body.fx .final-fx > .wrap { position: relative; z-index: 1; }
.final-fx .cta-final { background: none; border: 0; box-shadow: none; padding: 0; max-width: 780px; margin-inline: auto; }
.final-fx .cta-final::before { content: none; }
.final-fx h2 { color: #fff; font-size: clamp(32px, 5vw, 60px); letter-spacing: -.03em; line-height: 1.04; }
.final-fx .title-accent { color: var(--ouro-lt); }
.final-fx .lead { color: var(--tx-inv-2); }
.final-fx .eyebrow { color: var(--ouro-lt); }
.final-fx .btn-link { color: var(--mint-lt); }
.final-fx :is(h2) em.brush {
  font-style: normal; padding: 0; 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;
}

/* ════════════════════════════════════════════════════════════
   Transições entre seções: só a camada de fundo é recortada
   (--abre vai de 0 a 1 com a rolagem; sem JS fica em 1)
   ════════════════════════════════════════════════════════════ */
[data-clip] {
  position: relative; isolation: isolate;
  --recorte: inset(0 calc((1 - var(--abre, 1)) * 4%) 0 round calc((1 - var(--abre, 1)) * 40px) calc((1 - var(--abre, 1)) * 40px) 0 0);
}
[data-clip]::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--fundo-faixa, var(--bg));
  clip-path: var(--recorte);
}
/* as faixas claras alternadas das páginas internas passam a abrir com a rolagem */
body.fx :is(.pb-faixa, .emp-fundo, .app-suave, .pilar-secao--inv)[data-clip] { --fundo-faixa: var(--bg-suave); background: none; }

/* ════════════════════════════════════════════════════════════
   Frases que acendem, etapas que chegam, telas que inclinam
   ════════════════════════════════════════════════════════════ */
/* a palavra apagada fica em 3,2:1 (texto grande, AA); em texto menor, use --apagada: var(--tx-3) */
[data-manifesto].por-palavra .w { color: var(--apagada, #7A8984); transition: color .45s linear; }
[data-manifesto].por-palavra .w.on { color: var(--acesa, var(--tx-1)); }
[data-manifesto].por-palavra .w-chave.on { color: var(--verde-tx); }

.em-sequencia > * { transition: transform .7s var(--ease); }
.em-sequencia > :not(.chegou) { transform: translateY(8px); }
.jornada.em-sequencia > li::before { transition: background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease); }
.jornada.em-sequencia > li.chegou::before { background: var(--verde-dk); color: #fff; }
.jornada.em-sequencia > li:not(.chegou)::before { background: var(--surface); color: var(--tx-3); }

.inclina { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }

/* ── Rodapé escuro, colado nas faixas ───────────────────── */
.fx .site-footer { background: var(--verde-noite); border-top: 1px solid var(--linha-escura); }
.fx .site-footer::before { content: none; }
.mmxxvi { font-family: var(--f-display); font-weight: 700; letter-spacing: .3em; color: var(--ouro-lt); }

/* ── Alvos de toque: nada clicável abaixo de 44 px ─────── */
.fx .skip { min-height: 44px; display: inline-flex; align-items: center; }
.fx .site-header .brand { min-height: 44px; }
.fx main .btn-link { min-height: 44px; }
.fx .eg-chip { min-height: 44px; }
/* o trilho do slider continua com 5 px; a área de toque passa a 44 px */
.fx .eg-slider {
  height: 44px; border-radius: 0;
  background-size: 100% 5px !important; background-position: center !important; background-repeat: no-repeat !important;
}
.fx .site-footer .brand { min-height: 44px; }
.fx .app-module-nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
.fx .lead-chip { min-height: 44px; }
.fx .legal-toc a { min-height: 44px; display: flex; align-items: center; }
/* link de ação que quebra linha dentro de um parágrafo: a área de toque cresce para cima e para baixo */
.fx main p > .btn-link { padding-block: 6px; }
.fx .site-footer .footer-grid a, .fx .site-footer .link-cookies { display: flex; align-items: center; min-height: 44px; padding: 0; }

/* ════════════════════════════════════════════════════════════
   Ajustes por página
   ════════════════════════════════════════════════════════════ */
/* chamada final: sem o cartão claro nem a borda metálica antiga (verta-fx.css) */
.final-fx .cta-final::after { content: none; }
/* /pilares: a frase de destaque é texto médio, então a palavra apagada fica em tx-3 (AA) */
.pilar-destaque[data-manifesto] { --apagada: var(--tx-3); }
/* /nota: o cartão claro sobre a faixa escura, com a rota ao fundo */
body.fx #conteudo.nota-fx { position: relative; isolation: isolate; overflow: hidden; background: var(--faixa-escura); }
.nota-fx .nota-cartao { box-shadow: 0 30px 80px rgba(5, 20, 16, .45); }
/* 404: a faixa ocupa a tela, com a rota passando ao fundo */
body.fx .erro-fx { min-height: min(78vh, 740px); display: grid; align-items: center; }
/* páginas legais: faixa curta só com o título e a vigência */
body.fx .legal-faixa { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 80px); }
.legal-faixa .legal-cabecalho { margin-bottom: 0; }
.legal-faixa .updated { color: var(--tx-inv-2); }
/* /agendar: a abertura é a faixa escura; os caminhos e os detalhes vêm logo abaixo */
body.fx .agendar-hero { padding-bottom: clamp(56px, 8vw, 96px); }
.agendar-hero .agendar-intro { max-width: 760px; }

/* ── Desempenho: nas páginas internas, as seções longas abaixo da dobra só fazem
      layout e pintura quando chegam perto da tela (a altura real fica lembrada) ── */
body.fx:not(.home) main > .section:nth-of-type(n+3), body.fx .app-grupo > .section { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ════════════════════════════════════════════════════════════
   Movimento reduzido: tudo parado e legível
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fx *, .fx *::before, .fx *::after { animation: none !important; transition: none !important; }
  .trajetoria { opacity: 1; }
  .em-sequencia > * { transform: none; }
  .inclina { transform: none; }
}