/* ============================================================
   EVOLV DIGITAL — evolv-fx: camada de efeitos e cor semântica
   Carregada DEPOIS de evolv.css, em qualquer página que opte por ela.
   Não substitui o design system: estende com uma gramática de cor
   (vermelho = problema, verde = ganho, âmbar = custo, azul = método)
   e com os componentes de apoio (aurora, ondas, conversa, comparativo,
   bento, funil, timeline E4, banda de perda, ranking do Maps).
   Regra: só transform e opacity animam. Tudo degrada sem JS.
   Depende de assets/js/evolv-fx.js e de vendor/anime.umd.min.js.
   ============================================================ */

/* ---------- A. Tokens de acento ---------- */
:root {
  --dor: #ff5a5a;
  --dor-claro: #ff8a8a;
  --dor-glow: rgba(255, 90, 90, 0.28);
  --dor-fundo: rgba(255, 90, 90, 0.07);

  --ganho: #34d399;
  --ganho-claro: #6ee7b7;
  --ganho-glow: rgba(52, 211, 153, 0.26);
  --ganho-fundo: rgba(52, 211, 153, 0.07);

  --preto-dor: #0b0709;
  --ambar: #ffb020;
  --ambar-glow: rgba(255, 176, 32, 0.24);

  --grad-dor: linear-gradient(135deg, #ff5a5a 0%, #ff8f5a 100%);
  --grad-ganho: linear-gradient(135deg, #22c58a 0%, #4fe3b4 100%);
}

/* ---------- B. Barra de progresso de leitura ---------- */
.progresso {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: calc(var(--z-nav) + 1);
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--azul) 0%, var(--azul-claro) 60%, var(--ganho) 100%);
  pointer-events: none;
}

/* ---------- C. Palco: fundo contínuo do hero até a prova social ----------
   Hero e clientes dividem um único céu. Nada de corte reto no meio: todas as
   camadas nascem no topo e morrem em degradê no fim do palco, onde a onda
   entrega a página para a seção de dor. */
.palco {
  /* Cor em que o palco termina. Ajuste por página com style="--palco-fim: ..."
     para casar com o fundo do que vem logo abaixo (onda, seção alt, etc). */
  --palco-fim: var(--preto);
  position: relative; isolation: isolate; background: var(--palco-fim);
}
.palco > * { position: relative; z-index: 1; }
.palco__fx {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* Céu: azul-noite no alto, preto no rodapé. Tira o chapado do preto puro. */
  background:
    radial-gradient(ellipse 130% 92% at 50% -6%, #0e1729 0%, #0a1120 38%, #070b14 68%, var(--palco-fim) 94%);
}
.palco__fx > span { position: absolute; display: block; }

.hero--fx { padding-bottom: clamp(4.5rem, 9vw, 7rem); }
.hero--fx .hero__glow { display: none; }
.hero--fx::after { display: none; }

/* Manchas de luz. A máscara vertical dissolve o conjunto antes do fim do
   palco, então nenhuma delas encosta numa borda e vira linha visível. */
.aurora {
  inset: -14% -12% 0 -12%; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 97%);
}
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(80px); opacity: .5; will-change: transform;
}
.aurora i:nth-child(1) {
  width: 46vw; height: 46vw; max-width: 660px; max-height: 660px; top: -8%; right: 0%;
  background: radial-gradient(circle, rgba(26,101,255,.5) 0%, transparent 66%);
  animation: aurora-a 22s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; top: 14%; left: -10%;
  background: radial-gradient(circle, rgba(13,47,122,.62) 0%, transparent 68%);
  animation: aurora-b 27s ease-in-out infinite alternate;
}
/* Terceira mancha em índigo, não em verde: o verde é cor de ganho na
   gramática da marca e no fundo virava névoa fora de contexto. */
.aurora i:nth-child(3) {
  width: 58vw; height: 38vw; max-width: 820px; max-height: 500px; top: 46%; left: 22%;
  background: radial-gradient(ellipse, rgba(45,66,180,.38) 0%, transparent 70%);
  animation: aurora-c 31s ease-in-out infinite alternate;
}
@keyframes aurora-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-6%, 8%, 0) scale(1.12); } }
@keyframes aurora-b { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(8%, -6%, 0) scale(.94); } }
@keyframes aurora-c { from { transform: translate3d(0,0,0) scale(.95); } to { transform: translate3d(-8%, -6%, 0) scale(1.12); } }

/* Malha técnica, contínua nas duas seções e sem borda perceptível. */
.malha {
  inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 82% 62% at 50% 18%, #000 0%, rgba(0,0,0,.35) 58%, transparent 88%);
  mask-image: radial-gradient(ellipse 82% 62% at 50% 18%, #000 0%, rgba(0,0,0,.35) 58%, transparent 88%);
}

/* Vinheta: fecha as laterais para o olho ficar no centro. */
.palco__vinheta {
  inset: 0; z-index: 0;
  background: radial-gradient(ellipse 92% 68% at 50% 38%, transparent 52%, rgba(0,0,0,.5) 100%);
}

/* Base: entrega o palco ao preto exato de onde a onda parte. */
.palco__base {
  inset: auto 0 0 0; height: 34%; z-index: 0;
  background: linear-gradient(to bottom, transparent 0%, var(--palco-fim) 88%);
}

.hero--fx .hero__inner { position: relative; z-index: 1; }
.hero--fx h1 { max-width: 20ch; }
.hero--fx .lead { max-width: 52ch; }
.hero__selo {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 2rem;
  font-size: .84rem; color: var(--muted);
}
.hero__selo b { color: var(--branco); font-weight: 600; }
.hero__selo .ponto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ganho); flex: none;
  box-shadow: 0 0 0 4px rgba(52,211,153,.16);
  animation: pulso 2.4s ease-in-out infinite;
}
@keyframes pulso { 50% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } }

/* Palavras do H1 entram uma a uma (fallback: já visíveis) */
[data-hero-titulo] .palavra { display: inline-block; }
.js-anim [data-hero-titulo] .palavra { opacity: 0; }

/* ---------- D. Mock de conversa ---------- */
.chat {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(16,23,37,.92), rgba(9,13,22,.96));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(26,101,255,.08) inset;
}
.chat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 82% 0%, rgba(52,211,153,.10), transparent 46%);
}
.chat__head {
  display: flex; align-items: center; gap: .8rem; padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02);
  position: relative;
}
.chat__ava {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, #1f3350, #16233a); color: var(--azul-suave);
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  border: 1px solid rgba(255,255,255,.08);
}
.chat__quem { min-width: 0; }
.chat__quem b { display: block; color: #fff; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.chat__quem span { font-size: .76rem; color: var(--ganho); display: flex; align-items: center; gap: .35rem; }
.chat__quem span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chat__tag {
  margin-left: auto; flex: none; font-size: .64rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); border: 1px solid var(--linha);
  padding: .28rem .6rem; border-radius: var(--r-full);
}
.chat__body {
  padding: 1.25rem 1.15rem; display: flex; flex-direction: column; gap: .7rem;
  min-height: 342px; justify-content: flex-end;
}
.msg {
  max-width: 84%; padding: .68rem .9rem; border-radius: 14px; font-size: .9rem; line-height: 1.5;
  position: relative; color: var(--texto);
}
.msg time { display: block; font-size: .66rem; color: var(--muted-2); margin-top: .3rem; text-align: right; }
.msg--in { align-self: flex-start; background: #161e2e; border: 1px solid rgba(255,255,255,.06); border-bottom-left-radius: 5px; }
.msg--out {
  align-self: flex-end; border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, rgba(37,211,102,.16), rgba(52,211,153,.10));
  border: 1px solid rgba(52,211,153,.24); color: #eafff5;
}
.msg--out time { color: rgba(110,231,183,.7); }
.msg b { color: #fff; font-weight: 600; }
.msg--sistema {
  align-self: center; max-width: 100%; text-align: center; background: none; border: 0;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
  padding: .2rem 0;
}
.digitando { align-self: flex-start; display: flex; gap: 4px; padding: .8rem .95rem; background: #161e2e; border-radius: 14px; border-bottom-left-radius: 5px; }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); display: block; animation: digita 1.3s ease-in-out infinite; }
.digitando i:nth-child(2) { animation-delay: .18s; }
.digitando i:nth-child(3) { animation-delay: .36s; }
@keyframes digita { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat__pe {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.15rem; border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02); font-size: .78rem; color: var(--muted);
}
.chat__pe b { color: var(--ganho-claro); font-family: var(--font-display); font-size: .95rem; }
/* Estado inicial: mensagens escondidas só quando o JS assume o controle */
.js-anim .msg, .js-anim .digitando { opacity: 0; }

/* ---------- E. Divisores animados ---------- */
.divisor { position: relative; line-height: 0; margin: 0; }
.divisor svg { display: block; width: 100%; height: clamp(52px, 7vw, 96px); }
/* Totalmente parametrizado: --divisor-de é o fundo de cima, --divisor-para o de baixo.
   Os modificadores abaixo são só atalhos para as combinações mais usadas.
   Qualquer outra combinação sai inline, ex.: style="--divisor-de:var(--preto-2)". */
.divisor { background: var(--divisor-de, var(--preto)); }
.divisor path { fill: var(--divisor-para, var(--preto-dor)); }
.divisor--para-dor { --divisor-de: var(--preto); --divisor-para: var(--preto-dor); }
.divisor--de-dor   { --divisor-de: var(--preto-dor); --divisor-para: var(--preto); }
.divisor--para-alt { --divisor-de: var(--preto); --divisor-para: var(--preto-2); }
.divisor--de-alt   { --divisor-de: var(--preto-2); --divisor-para: var(--preto); }

/* ---------- F. Seção de dor ---------- */
.sec-dor { background: var(--preto-dor); position: relative; overflow: hidden; }
.sec-dor::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70%;
  background: radial-gradient(ellipse at 50% 0%, var(--dor-glow), transparent 62%);
  filter: blur(50px); pointer-events: none;
}
.sec-dor > .container { position: relative; z-index: 1; }
.eyebrow--dor { color: var(--dor-claro); background: var(--dor-fundo); border-color: rgba(255,90,90,.3); }

.dor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .dor-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.js-anim .dor-card { opacity: 0; }
.dor-card {
  position: relative; padding: 2rem 1.85rem; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,90,90,.05), rgba(12,8,10,.6));
  border: 1px solid rgba(255,90,90,.16); overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.dor-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--grad-dor); opacity: .8;
}
.dor-card:hover { transform: translateY(-5px); border-color: rgba(255,90,90,.4); box-shadow: 0 26px 60px -34px rgba(255,90,90,.55); }
.dor-card__ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,90,90,.12); color: var(--dor-claro); margin-bottom: 1.15rem;
}
.dor-card__ic svg { width: 21px; height: 21px; }
.dor-card h3 { font-size: 1.08rem; margin-bottom: .55rem; }
.dor-card p { color: var(--muted); font-size: .94rem; line-height: 1.65; }

.virada {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--r-lg); border: 1px solid var(--linha);
  background: linear-gradient(120deg, rgba(26,101,255,.09), rgba(14,20,32,.5));
  position: relative; overflow: hidden;
}
.virada::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--grad-azul); }
.virada p { font-size: clamp(1.05rem, 1.9vw, 1.3rem); color: var(--texto); line-height: 1.6; max-width: 64ch; }
.virada strong { color: #fff; font-weight: 600; }
.virada .destaque { color: var(--azul-claro); }

/* ---------- G. Comparativo (gráfico) ---------- */
.comparativo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
@media (max-width: 820px) { .comparativo { grid-template-columns: 1fr; } }
.comp-col {
  border-radius: var(--r-xl); padding: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid var(--linha); background: var(--grad-card); position: relative; overflow: hidden;
}
.comp-col--ruim { border-color: rgba(255,90,90,.18); }
.comp-col--bom { border-color: rgba(26,101,255,.3); background: linear-gradient(180deg, rgba(26,101,255,.08), #0b111c); }
.comp-col--bom::after {
  content: ""; position: absolute; inset: auto -20% -60% -20%; height: 70%;
  background: radial-gradient(ellipse at 50% 100%, var(--azul-glow), transparent 62%); pointer-events: none;
}
.comp-col > * { position: relative; z-index: 1; }
.comp-col__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.comp-col__tit { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; letter-spacing: -.01em; }
.comp-col__sel {
  font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: .28rem .65rem; border-radius: var(--r-full); flex: none;
}
.comp-col--ruim .comp-col__sel { color: var(--dor-claro); background: var(--dor-fundo); border: 1px solid rgba(255,90,90,.28); }
.comp-col--bom .comp-col__sel { color: var(--azul-claro); background: rgba(26,101,255,.12); border: 1px solid rgba(26,101,255,.3); }
.comp-col > p { color: var(--muted); font-size: .92rem; margin-bottom: 1.6rem; max-width: 42ch; }

.comp-bars { display: flex; align-items: flex-end; gap: .5rem; height: 172px; }
.comp-bars i {
  flex: 1; display: block; border-radius: 6px 6px 3px 3px; height: var(--h);
  transform-origin: 50% 100%; will-change: transform;
}
.comp-col--ruim .comp-bars i { background: linear-gradient(180deg, rgba(255,90,90,.34), rgba(255,90,90,.1)); }
.comp-col--bom .comp-bars i { background: var(--grad-azul); box-shadow: 0 0 20px -6px var(--azul-glow); }
.comp-col--bom .comp-bars i.pico { background: linear-gradient(180deg, #4fe3b4, #22c58a); box-shadow: 0 0 24px -6px var(--ganho-glow); }
/* Sem JS as barras já aparecem na altura certa */
.js-anim .comp-bars i { transform: scaleY(0); }

.comp-legend {
  display: flex; justify-content: space-between; margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid var(--linha);
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2);
}
.comp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
@media (max-width: 560px) { .comp-kpis { grid-template-columns: 1fr; gap: .9rem; } }
.comp-kpi { border-left: 2px solid var(--linha); padding-left: 1rem; }
.comp-kpi b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem); color: #fff; line-height: 1.1; letter-spacing: -.02em;
}
.comp-kpi b .suf { color: var(--azul-claro); }
.comp-kpi span { color: var(--muted); font-size: .86rem; }

/* ---------- H. Bento do sistema ---------- */
.sec-sistema { position: relative; overflow: hidden; }
.sec-sistema::before {
  content: ""; position: absolute; inset: auto -10% -40% 30%; height: 70%;
  background: radial-gradient(ellipse at 50% 100%, var(--ganho-glow), transparent 60%);
  filter: blur(60px); pointer-events: none; opacity: .5;
}
.sec-sistema > .container { position: relative; z-index: 1; }
.eyebrow--ganho { color: var(--ganho-claro); background: var(--ganho-fundo); border-color: rgba(52,211,153,.3); }

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.bento__item {
  border-radius: var(--r-lg); border: 1px solid var(--linha); background: var(--grad-card);
  padding: 1.65rem; position: relative; overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bento__item:hover { transform: translateY(-4px); border-color: rgba(52,211,153,.3); box-shadow: 0 26px 60px -36px rgba(52,211,153,.4); }
.bento__item--funil { grid-row: span 2; display: flex; flex-direction: column; gap: 1.2rem; background: linear-gradient(180deg, rgba(52,211,153,.06), #0b111c); border-color: rgba(52,211,153,.2); }
.bento__item--funil:hover { transform: none; }
.bento__item--largo { grid-column: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__item--funil { grid-row: auto; grid-column: span 2; }
  .bento__item--largo { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento__item--funil, .bento__item--largo { grid-column: auto; }
}
.bento__check {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: rgba(52,211,153,.12); color: var(--ganho-claro); margin-bottom: .95rem;
}
.bento__check svg { width: 16px; height: 16px; }
.bento__item h3 { font-size: 1rem; margin-bottom: .45rem; line-height: 1.35; }
.bento__item p { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.bento__tit { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.05rem; margin-bottom: .3rem; }
.bento__sub { color: var(--muted); font-size: .88rem; }

/* Funil SVG */
.funil { width: 100%; margin-top: auto; }
.funil svg { width: 100%; height: auto; overflow: visible; }
.funil .etapa { transform-box: fill-box; transform-origin: 50% 50%; }
.js-anim .funil .etapa { opacity: 0; }
.funil .contorno { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1.5; stroke-dasharray: 4 6; }
.funil text { font-family: var(--font-body); }
.funil .num { font-family: var(--font-display); font-weight: 700; fill: #fff; }
.funil .rot { fill: rgba(255,255,255,.62); font-size: 12px; letter-spacing: .04em; }
.funil__pe { display: flex; justify-content: space-between; gap: 1rem; font-size: .76rem; color: var(--muted-2); border-top: 1px solid var(--linha); padding-top: .85rem; }
.funil__pe b { color: var(--ganho-claro); }

/* ---------- I. Método E4 (timeline com trilho) ---------- */
.e4 { position: relative; display: grid; gap: clamp(2rem, 4vw, 3rem); padding-left: 3.25rem; }
.e4__trilho { position: absolute; top: .5rem; bottom: .5rem; left: 15px; width: 2px; background: var(--linha); border-radius: 2px; overflow: hidden; }
.e4__trilho i { position: absolute; inset: 0; display: block; background: linear-gradient(180deg, var(--azul) 0%, var(--azul-claro) 55%, var(--ganho) 100%); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
.e4__fase { position: relative; }
.e4__fase::before {
  content: ""; position: absolute; left: -3.25rem; top: .35rem; width: 32px; height: 32px;
  border-radius: 50%; background: var(--preto-2); border: 2px solid var(--linha-forte);
  transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.e4__fase::after {
  content: ""; position: absolute; left: calc(-3.25rem + 11px); top: calc(.35rem + 11px);
  width: 10px; height: 10px; border-radius: 50%; background: var(--muted-2);
  transition: background .35s ease, transform .35s ease;
}
.e4__fase.is-ativa::before { border-color: var(--azul); background: rgba(26,101,255,.14); box-shadow: 0 0 0 6px rgba(26,101,255,.1); }
.e4__fase.is-ativa::after { background: var(--azul-claro); transform: scale(1.15); }
.e4__n { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--azul-claro); margin-bottom: .5rem; }
.e4__fase h3 { font-size: clamp(1.25rem, 2.3vw, 1.6rem); margin-bottom: .6rem; }
.e4__fase p { color: var(--muted); max-width: 60ch; line-height: 1.7; }
.e4__saida {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem;
  font-size: .82rem; color: var(--texto); background: rgba(255,255,255,.035);
  border: 1px solid var(--linha); border-radius: var(--r-full); padding: .4rem .9rem;
}
.e4__saida svg { width: 14px; height: 14px; color: var(--ganho); flex: none; }
@media (max-width: 600px) { .e4 { padding-left: 2.6rem; } .e4__fase::before { left: -2.6rem; width: 28px; height: 28px; } .e4__fase::after { left: calc(-2.6rem + 9px); width: 10px; height: 10px; } .e4__trilho { left: 13px; } }

/* ---------- J. Banda do custo ---------- */
.perda {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255,90,90,.12), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(255,176,32,.09), transparent 55%),
    #0a0709;
}
.perda::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.perda > .container { position: relative; z-index: 1; }
.perda-lista { display: grid; gap: .9rem; }
.perda-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.15rem;
  padding: 1.35rem 1.5rem; border-radius: var(--r-md);
  background: rgba(18,12,14,.6); border: 1px solid rgba(255,90,90,.14);
  transition: border-color .25s, transform .25s, background .25s;
}
.perda-item:hover { border-color: rgba(255,90,90,.34); transform: translateX(4px); background: rgba(26,16,18,.7); }
.perda-item__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,90,90,.1); color: var(--dor-claro); flex: none; }
.perda-item__ic svg { width: 17px; height: 17px; }
.perda-item p { color: var(--texto); font-size: .98rem; line-height: 1.5; margin: 0; }
.perda-item p b { color: #fff; font-weight: 600; }
.perda-item__val {
  font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dor-claro); flex: none; white-space: nowrap;
}
@media (max-width: 720px) {
  .perda-item { grid-template-columns: auto 1fr; }
  .perda-item__val { grid-column: 2; margin-top: .35rem; }
}
.perda-fecho { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.perda-fecho h3 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .8rem; }
.perda-fecho p { color: var(--muted); max-width: 62ch; margin-inline: auto; }

/* ---------- K. Prova: barras coloridas por natureza da métrica ---------- */
.perf-bar__fill[data-tipo="ganho"] { background: var(--grad-ganho); }
.perf-bar__fill[data-tipo="custo"] { background: linear-gradient(135deg, #ffb020, #ffd166); }
.perf-card .perf-metric__val { color: #fff; }

/* Depoimentos com cara de avaliação */
.quote--review .estrelas { color: #ffc93c; letter-spacing: 2px; font-size: .95rem; margin-bottom: .9rem; display: block; }
.quote--review { display: flex; flex-direction: column; }
.quote--review p { flex: 1; }

/* ---------- L. Urgência / CTA final ---------- */
.urgencia { border-color: rgba(52,211,153,.24); }
.urgencia::before { background: radial-gradient(circle at 85% 25%, rgba(52,211,153,.22), transparent 55%); }
.urgencia__aviso {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ambar); background: rgba(255,176,32,.1);
  border: 1px solid rgba(255,176,32,.28); padding: .35rem .85rem; border-radius: var(--r-full);
}
.urgencia__aviso svg { width: 14px; height: 14px; }

/* ---------- M. Ajustes finos ---------- */
.sec-head--centro { margin-inline: auto; text-align: center; }
.sec-head--centro .sec-head__meta { justify-content: center; }
.sec-head--centro .lead { margin-inline: auto; }
.chip-linha { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.chip-linha span {
  font-size: .78rem; color: var(--muted); border: 1px solid var(--linha);
  background: rgba(255,255,255,.025); padding: .35rem .8rem; border-radius: var(--r-full);
}



/* ---------- O. Fotografia: uma imagem por seção, sempre com o texto por cima ---------- */

/* Bloco de virada, texto e foto lado a lado */
.virada--midia { display: grid; grid-template-columns: 1fr .82fr; gap: 0; padding: 0; align-items: stretch; }
.virada__texto { padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem); display: flex; align-items: center; }
.virada__foto { position: relative; min-height: 250px; }
.virada__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.virada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,7,9,.96) 0%, rgba(11,7,9,.42) 48%, rgba(11,7,9,.1) 100%);
}
@media (max-width: 820px) {
  .virada--midia { grid-template-columns: 1fr; }
  .virada__foto { min-height: 190px; }
  .virada__foto::after { background: linear-gradient(180deg, rgba(11,7,9,.9) 0%, rgba(11,7,9,.25) 60%); }
}

/* Card do bento com foto de fundo */
.bento__item--foto { min-height: 268px; display: flex; flex-direction: column; justify-content: flex-end; border-color: rgba(255,255,255,.1); }
.bento__item--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; z-index: 0; }
.bento__item--foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(9,13,22,.3) 0%, rgba(9,13,22,.72) 45%, rgba(9,13,22,.96) 100%);
}
.bento__item--foto > *:not(img) { position: relative; z-index: 2; }
.bento__item--foto:hover img { opacity: .68; }
.bento__item--foto img { transition: opacity .3s ease; }

/* Método E4 com coluna de mídia fixa */
.e4-wrap { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 940px) { .e4-wrap { grid-template-columns: 1fr; } .e4-midia { display: none; } }
.e4-midia {
  position: sticky; top: calc(var(--nav-h) + 2.5rem); margin: 0;
  border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--linha);
  box-shadow: var(--sombra);
}
.e4-midia img { width: 100%; display: block; aspect-ratio: 4 / 4.6; object-fit: cover; }
.e4-midia figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.5rem 1.4rem 1.35rem;
  background: linear-gradient(180deg, transparent, rgba(5,7,13,.92) 55%);
  color: var(--texto); font-size: .9rem; line-height: 1.55;
}
.e4-midia figcaption b { display: block; color: #fff; font-family: var(--font-display); font-size: 1rem; margin-bottom: .25rem; }

/* Banda de perda com a foto ao fundo */
.perda__bg { position: absolute; inset: 0; z-index: 0; }
.perda__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,9,.82), rgba(10,7,9,.97)); }

/* CTA final com a foto ao fundo */
.urgencia__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.urgencia__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.urgencia__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,12,20,.96) 26%, rgba(9,12,20,.6) 70%, rgba(9,12,20,.4) 100%); }


/* ---------- P. Abas com painel de problema (dialeto .tabs do v4) ---------- */
.tabs__panel--dor .tabs__icon { background: rgba(255,90,90,.12); color: var(--dor-claro); }
.tabs__panel--dor .tabs__list svg { color: var(--dor-claro); }
.tabs__panel--dor .tabs__rule { background: var(--grad-dor); }
.tabs__panel--ganho .tabs__icon { background: rgba(52,211,153,.12); color: var(--ganho-claro); }
.tabs__panel--ganho .tabs__list svg { color: var(--ganho-claro); }

/* Barras do mock das abas: mesma leitura de cor do comparativo */
.mock-bars i { transform-origin: 50% 100%; will-change: transform; }
.js-anim .mock-bars i { transform: scaleY(0); }
.tabs__panel--dor .mock-bars i:not(.up) { background: linear-gradient(180deg, rgba(255,90,90,.32), rgba(255,90,90,.08)); }
.mock-bars i.up.topo { background: linear-gradient(180deg, #4fe3b4, #22c58a); box-shadow: 0 0 22px -6px var(--ganho-glow); }

/* ---------- Q. Ranking local (Google Meu Negócio) ---------- */
.mock-maps { display: grid; gap: .65rem; }
.mock-maps__item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  padding: .9rem 1.05rem; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--linha); will-change: transform;
}
.mock-maps__pos {
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  background: rgba(255,255,255,.06); color: var(--muted);
}
.mock-maps__quem b { display: block; color: #fff; font-size: .93rem; font-weight: 600; line-height: 1.3; }
.mock-maps__quem span { color: var(--muted-2); font-size: .78rem; }
.mock-maps__nota { font-size: .8rem; color: var(--ambar); white-space: nowrap; flex: none; }
.mock-maps__item--voce {
  border-color: rgba(52,211,153,.36);
  background: linear-gradient(135deg, rgba(52,211,153,.1), var(--surface));
  box-shadow: 0 18px 44px -30px var(--ganho-glow);
}
.mock-maps__item--voce .mock-maps__pos { background: var(--grad-ganho); color: #04231a; }
.mock-maps__item--voce .mock-maps__nota { color: var(--ganho-claro); }
.mock-maps__pe { margin-top: .35rem; font-size: .78rem; color: var(--muted-2); display: flex; justify-content: space-between; gap: 1rem; }

/* ---------- R. Modificadores de cor nos componentes do design system ---------- */
.card__icon--ganho { background: rgba(52,211,153,.12); color: var(--ganho-claro); }
.card__icon--dor { background: rgba(255,90,90,.12); color: var(--dor-claro); }
.card--ganho { border-color: rgba(52,211,153,.18); }
.card--ganho:hover { border-color: rgba(52,211,153,.4); box-shadow: 0 26px 60px -36px var(--ganho-glow); }
.card--dor { border-color: rgba(255,90,90,.18); }
.card--dor:hover { border-color: rgba(255,90,90,.4); box-shadow: 0 26px 60px -36px var(--dor-glow); }
.bar__fill[data-tipo="ganho"] { background: var(--grad-ganho); }
.bar__fill[data-tipo="custo"] { background: linear-gradient(135deg, #ffb020, #ffd166); }
.bar__top span[data-tipo="ganho"] { color: var(--ganho-claro); }
.bar__top span[data-tipo="custo"] { color: var(--ambar); }

/* ---------- S. Visor: prévia da página inteira em modal rolável ---------- */
.post--visor { cursor: pointer; }
.post--visor .post__thumb { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.post--visor:hover .post__thumb { transform: scale(1.03); }
.post__thumb-wrap { display: block; overflow: hidden; position: relative; }
.post__lupa {
  position: absolute; inset: auto .8rem .8rem auto; display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem; border-radius: var(--r-full); font-size: .74rem; font-weight: 600;
  background: rgba(5,7,13,.72); color: #fff; border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
}
.post__lupa svg { width: 14px; height: 14px; }
.post--visor:hover .post__lupa, .post--visor:focus-visible .post__lupa { opacity: 1; transform: none; }

.visor {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: clamp(.6rem, 2.5vw, 2rem);
}
.visor[hidden] { display: none; }
.visor__fundo {
  position: absolute; inset: 0; background: rgba(3,5,10,.86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: visor-fundo .24s linear both;
}
@keyframes visor-fundo { from { opacity: 0; } }
@keyframes visor-entra { from { opacity: 0; transform: scale(.97) translateY(8px); } }
.visor__caixa {
  position: relative; width: min(100%, 1080px); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); background: var(--surface);
  border: 1px solid var(--linha-forte); box-shadow: 0 60px 130px -50px #000;
  animation: visor-entra .32s cubic-bezier(.2,.7,.2,1) both;
}
.visor__topo {
  display: flex; align-items: center; gap: .9rem; flex: none;
  padding: .75rem .9rem; border-bottom: 1px solid var(--linha); background: rgba(255,255,255,.03);
}
.visor__pontos { display: flex; gap: .4rem; flex: none; }
.visor__pontos i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.15); display: block; }
.visor__quem { min-width: 0; margin-right: auto; }
.visor__quem b { display: block; color: #fff; font-family: var(--font-display); font-size: .95rem; line-height: 1.3; }
.visor__quem span { color: var(--muted-2); font-size: .78rem; }
.visor__topo .btn { padding: .5rem 1.1rem; font-size: .84rem; flex: none; }
.visor__x {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: var(--muted); border: 1px solid var(--linha); transition: color .2s, border-color .2s, background .2s;
}
.visor__x:hover { color: #fff; border-color: var(--linha-forte); background: rgba(255,255,255,.06); }
.visor__x svg { width: 17px; height: 17px; }
.visor__scroll { overflow-y: auto; overscroll-behavior: contain; background: #fff; flex: 1 1 auto; }
.visor__scroll img { width: 100%; display: block; }
.visor__pe {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .95rem; border-top: 1px solid var(--linha);
  background: rgba(255,255,255,.03); color: var(--muted-2); font-size: .78rem;
}
.visor__pe .rolar { display: inline-flex; align-items: center; gap: .45rem; }
.visor__pe .rolar svg { width: 14px; height: 14px; animation: desce-dica 1.8s ease-in-out infinite; }
@keyframes desce-dica { 50% { transform: translateY(3px); } }
@media (max-width: 640px) {
  .visor__topo { flex-wrap: wrap; }
  .visor__topo .btn { order: 3; width: 100%; }
  .visor__pontos { display: none; }
}
body.visor-aberto { overflow: hidden; }

/* ---------- N. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora i, .hero__selo .ponto, .digitando i, .visor__pe .rolar svg { animation: none !important; }
  .js-anim .msg, .js-anim .digitando, .js-anim .funil .etapa,
  .js-anim .dor-card, .js-anim [data-hero-titulo] .palavra { opacity: 1 !important; }
  .js-anim .comp-bars i, .js-anim .mock-bars i { transform: none !important; }
  .progresso { display: none; }
  .e4__trilho i { transform: scaleY(1) !important; }
}

/* ---------- O2. Método E4 na horizontal: fases centralizadas ----------
   Acompanha o alinhamento central do resto do site. Os marcadores saem
   do canto e vão para o centro de cada coluna, e o trilho passa a ligar
   o centro do primeiro ponto ao centro do último. */
@media (min-width: 981px) {
  .e4--linha .e4__fase { text-align: center; align-items: center; }
  .e4--linha .e4__fase p { margin-inline: auto; }
  .e4--linha .e4__saida { align-self: center; }

  /* Marcador (32px) e miolo (10px) centrados na coluna */
  .e4--linha .e4__fase::before { left: 50%; margin-left: -16px; }
  .e4--linha .e4__fase::after { left: 50%; margin-left: -5px; }

  /* Com 4 colunas e 3 gaps, meia coluna vale (100% - 3*gap) / 8 */
  .e4--linha .e4__trilho {
    left: calc((100% - 3 * var(--e4-gap)) / 8);
    right: calc((100% - 3 * var(--e4-gap)) / 8);
  }
}