/* ════════════════════════════════════════════════════════════
   verta-fx.css — camada METÁLICA + MOVIMENTO
   Carregar SEMPRE depois de site.css (sobrepõe por cascata).

   Princípio do "mint & aço": metal se lê por REFLEXO, não por cor.
   Toda superfície metálica aqui tem 3 ingredientes:
     1. gradiente multi-stop (vários pontos de luz, não um só)
     2. highlight especular no topo (inset branco)
     3. varredura de luz no hover (shimmer)

   Tudo em transform/opacity/filter (GPU). Respeita
   prefers-reduced-motion no fim do arquivo.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Gradientes metálicos (multi-stop = polido) ── */
  --met-ouro: linear-gradient(135deg,
    #9C854B 0%, #C2A86A 16%, #E7D6AC 34%, #DBC592 48%,
    #C2A86A 60%, #9C854B 78%, #BFA468 100%);
  --met-verde: linear-gradient(150deg,
    #16453A 0%, #246B55 22%, #2F8F70 46%, #3FA88A 58%,
    #2F8F70 72%, #1D5A47 100%);
  --met-aco: linear-gradient(150deg,
    #FFFFFF 0%, #F4F8F6 28%, #E6ECEB 54%, #DCE6E2 74%, #EAF1EE 100%);
  --met-mint: linear-gradient(140deg, #C4E9D7 0%, #9AD9BC 45%, #7FCBB0 70%, #B4E2CE 100%);

  /* highlight especular reutilizável */
  --spec: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(30,50,45,.06);
  --spec-dk: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.14);
}

/* ── Varredura de luz (shimmer) — base reutilizável ────── */
.fx-sheen { position: relative; overflow: hidden; isolation: isolate; }
.fx-sheen::after {
  content: ''; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 28%, rgba(255,255,255,.42) 46%, rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.42) 54%, transparent 72%);
  transform: translateX(-130%);
  transition: transform .75s cubic-bezier(.22,1,.36,1);
}
.fx-sheen:hover::after, .fx-sheen:focus-visible::after { transform: translateX(130%); }

/* ── Botões metálicos ──────────────────────────────────── */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn > * { position: relative; z-index: 3; }
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%, rgba(255,255,255,.38) 47%, rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.38) 53%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.btn:hover::after { transform: translateX(130%); }

.btn-primary {
  background: var(--met-verde);
  box-shadow: var(--spec-dk), 0 6px 18px rgba(22,69,58,.26), 0 1px 2px rgba(22,69,58,.2);
}
.btn-primary:hover {
  box-shadow: var(--spec-dk), 0 12px 30px rgba(22,69,58,.34), 0 2px 6px rgba(22,69,58,.24);
}
.btn-gold {
  background: var(--met-ouro); color: #2E2611;
  box-shadow: var(--spec), 0 6px 18px rgba(156,133,75,.28), 0 0 0 1px rgba(156,133,75,.35);
}
.btn-gold:hover { box-shadow: var(--spec), 0 12px 30px rgba(156,133,75,.36), 0 0 0 1px rgba(156,133,75,.45); }
.btn-ghost {
  background: var(--met-aco);
  box-shadow: var(--spec), 0 2px 6px rgba(30,50,45,.07);
}
.btn-ghost:hover { box-shadow: var(--spec), 0 8px 20px rgba(30,50,45,.12); }

/* pressionar afunda (feedback tátil) */
.btn:active { transform: translateY(1px) scale(.995); }

/* ── Cards: borda em gradiente metálico + reflexo ──────── */
.card, .device, .mini-panel, .cta-final, .lead-modal, .lead-inline, .eg-quiz {
  position: relative;
}
.card::before, .device::before, .cta-final::after, .lead-modal::before, .eg-quiz::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 0;
  background: linear-gradient(135deg,
    rgba(194,168,106,.55) 0%, rgba(255,255,255,.9) 26%, rgba(154,217,188,.5) 52%,
    rgba(255,255,255,.75) 72%, rgba(194,168,106,.32) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: .8; transition: opacity var(--tm) var(--ease);
}
.card > *, .device > *, .cta-final > *, .eg-quiz > * { position: relative; z-index: 1; }
.card:hover::before, .device:hover::before { opacity: 1; }

/* o device (mockup do app) ganha reflexo de vidro */
.device { background: var(--met-aco); }
.device::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30%;
  border-radius: 20px 20px 50% 50% / 20px 20px 14% 14%;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
  pointer-events: none; z-index: 0;
}

.card-hover:hover { box-shadow: var(--sh-pop), var(--spec); }

/* ── Selos de ícone: metal polido com luz cônica ───────── */
.ico {
  background: var(--met-mint);
  box-shadow: var(--spec), 0 3px 10px rgba(30,50,45,.12);
  position: relative; overflow: hidden;
  color: #14503C;                    /* glifo escuro: vence o brilho cônico */
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.ico::before {
  content: ''; position: absolute; inset: 0;
  background: conic-gradient(from 210deg at 30% 20%,
    rgba(255,255,255,.62), transparent 34%, transparent 66%, rgba(255,255,255,.34));
  pointer-events: none;
}
.ico-gold { background: var(--met-ouro); color: #33290E; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.ico > * { position: relative; z-index: 1; }

/* passos numerados */
.step .num {
  background: var(--met-verde);
  box-shadow: var(--spec-dk), 0 4px 12px rgba(22,69,58,.3);
  position: relative; overflow: hidden;
}
.step .num::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.4), transparent 55%);
}

/* pílulas */
.pill { background: var(--met-aco); box-shadow: var(--spec), 0 1px 3px rgba(30,50,45,.07); }
.pill-gold { background: linear-gradient(140deg, rgba(231,214,172,.5), rgba(194,168,106,.2)); }
.pill-mint { background: linear-gradient(140deg, rgba(196,233,215,.7), rgba(154,217,188,.3)); }

/* ── Faixa de números: aço escovado escuro + brilho ────── */
.stats-band {
  background: var(--met-verde);
  box-shadow: var(--spec-dk), 0 14px 40px rgba(22,69,58,.28);
}
.stats-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(100deg,
    rgba(255,255,255,.05) 0 1px, transparent 1px 4px);  /* escovado */
  opacity: .55;
}
/* números com gradiente metálico no próprio texto */
.stat-big .n {
  background: linear-gradient(160deg, #FFFFFF 0%, #EAF6F0 42%, #B9E4D0 78%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.stats-band .stat-big .l { color: rgba(255,255,255,.86); }
.stat-big .n .suf {
  background: var(--met-mint); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Header: vidro + fio metálico embaixo ──────────────── */
.site-header {
  background: linear-gradient(180deg, rgba(248,251,250,.92), rgba(240,245,243,.82));
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 14px rgba(30,50,45,.05);
  border-bottom: none;
}
.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(194,168,106,.5) 18%, rgba(154,217,188,.6) 50%, rgba(194,168,106,.5) 82%, transparent);
}
/* nav: sublinhado que cresce */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--met-ouro);
  transform: scaleX(0); transform-origin: left; transition: transform var(--tm) var(--ease);
}
.nav-links a:hover::after, .nav-links a.ativo::after { transform: scaleX(1); }

/* marca: leve brilho ao passar */
.brand img { transition: transform var(--tm) var(--ease), filter var(--tm) var(--ease); }
.brand:hover img { transform: scale(1.06) rotate(-3deg); filter: drop-shadow(0 3px 8px rgba(194,168,106,.45)); }

/* ── Pincelada do destaque: cresce ao entrar em cena ───── */
em.brush::after {
  background: linear-gradient(90deg, var(--mint-lt), rgba(154,217,188,.55) 60%, rgba(196,233,215,.15));
  transform-origin: left; transform: scaleX(0);
  transition: transform .85s cubic-bezier(.22,1,.36,1) .15s;
}
.reveal.in em.brush::after, .in em.brush::after, section:not(.reveal) em.brush::after { transform: scaleX(1); }
h1 em.brush::after { transform: scaleX(1); }  /* hero: já visível ao carregar */

/* ── Orbes do hero: flutuam + parallax no scroll ────────
   `translate` é propriedade separada de `transform`: as duas se
   compõem, então o parallax (JS) não briga com o keyframe. */
.hero::before { animation: fxFlutuaA 16s ease-in-out infinite; translate: 0 var(--fx-par, 0px); }
.hero::after  { animation: fxFlutuaB 20s ease-in-out infinite; translate: 0 calc(var(--fx-par, 0px) * -.55); }
@keyframes fxFlutuaA {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-26px, 20px) scale(1.06); }
}
@keyframes fxFlutuaB {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(22px, -18px) scale(1.08); }
}
.site-footer::before { animation: fxFlutuaB 24s ease-in-out infinite; }

/* ── Reveal com profundidade (blur + escala) ───────────── */
.reveal {
  opacity: 0; transform: translateY(24px) scale(.985); filter: blur(5px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal.in { will-change: auto; }

/* ── Gráficos: brilho na linha e pulso no ponto ────────── */
.spark path.line { filter: drop-shadow(0 2px 4px rgba(47,143,112,.28)); }
.spark .dot {
  filter: drop-shadow(0 0 3px rgba(47,143,112,.55));
  transform-box: fill-box; transform-origin: center;
  animation: fxPulso 2.8s ease-in-out infinite;
}
@keyframes fxPulso {
  0%,100% { transform: scale(1);    opacity: 1; }
  50%     { transform: scale(1.22); opacity: .8; }
}
.bars .bar-value { filter: drop-shadow(0 2px 3px rgba(30,50,45,.14)); }
.bars .bar-value:hover { filter: drop-shadow(0 4px 8px rgba(30,50,45,.22)) brightness(1.06); }
.mini-chart svg { overflow: visible; }

/* mini-stats e painéis: aço claro */
.mini-stat, .mini-panel { background: var(--met-aco); box-shadow: var(--spec); }
.mini-stat { transition: transform var(--tf) var(--ease), box-shadow var(--tf) var(--ease); }
.mini-stat:hover { transform: translateY(-2px); box-shadow: var(--spec), 0 6px 16px rgba(30,50,45,.1); }

/* ── Checklist: marcador metálico ──────────────────────── */
.checklist .ck {
  background: var(--met-mint); color: #14503C;
  box-shadow: var(--spec), 0 2px 5px rgba(30,50,45,.1);
}

/* ── CTA final: aço polido com halo ────────────────────── */
.cta-final { background: var(--met-aco); box-shadow: var(--spec), var(--sh-card); }
.cta-final::before { animation: fxFlutuaA 18s ease-in-out infinite; }

/* ── Barra de progresso de leitura ─────────────────────── */
.fx-progresso {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 100;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--ouro), var(--teal) 55%, var(--verde));
  box-shadow: 0 0 8px rgba(63,191,188,.5);
  pointer-events: none;
}

/* ── Tilt 3D (aplicado por JS) ─────────────────────────── */
.fx-tilt { transform-style: preserve-3d; transition: transform var(--tm) var(--ease); }

/* ── Ferramentas: sliders e chips metálicos ────────────── */
.eg-slider::-webkit-slider-thumb {
  background: var(--met-verde);
  box-shadow: 0 0 0 1px rgba(22,69,58,.5), 0 2px 6px rgba(30,50,45,.3), var(--spec-dk);
}
.eg-slider::-moz-range-thumb { background: var(--met-verde); }
.eg-chip, .lead-chip { background: var(--met-aco); box-shadow: var(--spec); }
.eg-chip.on, .lead-chip.on {
  background: linear-gradient(140deg, rgba(196,233,215,.85), rgba(154,217,188,.45));
  box-shadow: var(--spec), 0 2px 8px rgba(47,143,112,.18);
}
.eg-pilar-fill, .eg-bat-fill, .eg-fire-progfill {
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
/* brilho que percorre as barras preenchidas */
.eg-bat-fill::after, .eg-fire-progfill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
  animation: fxCorre 2.8s linear infinite;
}
@keyframes fxCorre { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* anel do quiz com brilho */
.eg-ring-prog { filter: drop-shadow(0 0 6px rgba(194,168,106,.45)); }
.eg-ring-num b {
  background: linear-gradient(160deg, #17211E 0%, #2F4A42 50%, #17211E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── Modal do lead: entrada com profundidade ───────────── */
.lead-modal { background: var(--met-aco); }
.lead-overlay { background: rgba(9,26,21,.6); }

/* ── Foco visível (acessibilidade) ─────────────────────── */
.btn:focus-visible, .nav-links a:focus-visible, .eg-chip:focus-visible, .lead-chip:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 3px;
}

/* ══ Menos movimento: desliga tudo o que se mexe sozinho ══ */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .site-footer::before, .cta-final::before,
  .eg-bat-fill::after, .eg-fire-progfill::after, .spark .dot { animation: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .btn::after, .fx-sheen::after { display: none; }
  em.brush::after { transform: scaleX(1); transition: none; }
  .fx-progresso { display: none; }
  .fx-tilt { transform: none !important; }
}