/* sistema visual herdado da home */
:root{
--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--d-slow:400ms;
--ease-out:cubic-bezier(.22,1,.36,1);
--fluido-blur:clamp(34px,4vw,66px);
--r-full:9999px;
}
.fluido{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:var(--z-fluido);
  /* a faixa do header fica limpa: o degradê só começa a aparecer abaixo dela,
     senão o texto do menu (que vira degradê no hover) some sobre o fundo colorido */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 78px,#000 232px,#000 46%,rgba(0,0,0,.5) 74%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 78px,#000 232px,#000 46%,rgba(0,0,0,.5) 74%,transparent 100%);
  --c1:var(--nucleo-amarelo);--c2:var(--nucleo-laranja);
  --c3:var(--nucleo-vermelho);--c4:var(--nucleo-rosa)}
.fluido::before{content:'';position:absolute}
.fluido::after{content:'';position:absolute;inset:0;
  background-image:var(--noise);
  /* sem background-size o SVG de 200x200 estica para a largura toda
     e o grão vira bloco. travado, ele repete no tamanho natural. */
  background-size:200px 200px;
  background-repeat:repeat;
  opacity:.5;mix-blend-mode:multiply}
.f-ima::before{
  top:-16%;right:-10%;width:76%;height:142%;filter:blur(var(--fluido-blur));
  background:
    radial-gradient(ellipse at 25% 30%, color-mix(in srgb,var(--c4) 94%,transparent) 0%,transparent 44%),
    radial-gradient(ellipse at 55% 30%, color-mix(in srgb,var(--c3) 90%,transparent) 0%,transparent 46%),
    radial-gradient(ellipse at 65% 60%, color-mix(in srgb,var(--c2) 94%,transparent) 0%,transparent 46%),
    radial-gradient(ellipse at 35% 70%, color-mix(in srgb,var(--c1) 68%,transparent) 0%,transparent 44%)}
.reveal{opacity:0;transform:translateY(20px);animation:sobe var(--d-slow) var(--ease-out) forwards}
@keyframes sobe{to{opacity:1;transform:none}}

/* ════ hero com degradê fluido, igual à home ════ */
.seg-hero{background:none}
.seg-hero .fluido{--c1:var(--nucleo-amarelo);--c2:var(--nucleo-laranja);
  --c3:var(--nucleo-vermelho);--c4:var(--nucleo-rosa);opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 62%,transparent 100%)}
.seg-hero .f-ima::before{top:-22%;right:-16%;width:62%;height:130%}
.seg-hero-grade{position:relative;z-index:10;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:var(--sp-10);align-items:center}

/* ════ mockup do agente ════ */
.mk{background:#FFF;border:1px solid var(--border);border-radius:18px;overflow:hidden;
  box-shadow:0 26px 60px -18px rgba(10,10,11,.22)}
.mk-cab{display:flex;align-items:center;gap:9px;padding:11px 14px;
  border-bottom:1px solid var(--border);background:var(--off-white)}
.mk-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--nucleo-amarelo),var(--nucleo-rosa))}
.mk-nome{font-size:.8125rem;font-weight:600;color:var(--preto);line-height:1.2}
.mk-sub{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--success)}
.mk-tag{margin-left:auto;font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 8px;border-radius:20px;
  background:color-mix(in srgb,var(--nucleo-laranja) 12%,#FFF);color:#B8420F}
.mk-corpo{padding:14px;display:flex;flex-direction:column;gap:9px;background:#FBFAF7}
.bal{max-width:82%;padding:9px 12px;border-radius:13px;font-size:.8125rem;line-height:1.4;
  opacity:0;transform:translateY(8px);animation:balao .5s var(--ease-out) forwards}
.bal--in{align-self:flex-start;background:#FFF;border:1px solid var(--border);color:var(--preto)}
.bal--out{align-self:flex-end;color:#FFF;
  background:linear-gradient(135deg,var(--nucleo-laranja),var(--nucleo-rosa))}
.bal:nth-child(1){animation-delay:.25s} .bal:nth-child(2){animation-delay:.9s}
.bal:nth-child(3){animation-delay:1.6s} .bal:nth-child(4){animation-delay:2.3s}
@keyframes balao{to{opacity:1;transform:none}}
.mk-pe{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-top:1px solid var(--border);background:#FFF}
.mk-pe-l{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-texto)}
.mk-score{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.625rem;color:#0A7C48;
  background:#E8F7EF;padding:4px 9px;border-radius:20px}
.mk-bar{height:3px;border-radius:2px;background:var(--cream);overflow:hidden;flex:1}
.mk-bar i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--nucleo-amarelo),var(--nucleo-rosa));
  animation:enche 1.2s var(--ease-out) 2.6s forwards}
@keyframes enche{to{width:87%}}

/* ════ reveal ao rolar ════ */
[data-r]{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-r].vis{opacity:1;transform:none}
[data-r].vis:nth-child(2){transition-delay:.09s}
[data-r].vis:nth-child(3){transition-delay:.18s}
[data-r].vis:nth-child(4){transition-delay:.27s}

/* ════ fluxo animado da jornada ════ */
.flx{position:relative;margin-top:var(--sp-8)}
.flx svg{display:block;width:100%;height:auto}
.flx-lin{fill:none;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);
  transition:stroke-dashoffset 1.4s var(--ease-out)}
.vis .flx-lin{stroke-dashoffset:0}
.flx-lin--ruim{stroke:#E0DCD4;stroke-dasharray:6 7}
.flx-lin--bom{stroke:url(#gflx)}
.flx-no{opacity:0;transition:opacity .5s var(--ease-out)}
.vis .flx-no{opacity:1}
.vis .flx-no:nth-of-type(2){transition-delay:.35s}
.vis .flx-no:nth-of-type(3){transition-delay:.6s}
.vis .flx-no:nth-of-type(4){transition-delay:.85s}
.vis .flx-no:nth-of-type(5){transition-delay:1.1s}
.vis .flx-no:nth-of-type(6){transition-delay:1.35s}

/* ════ cartões dos passos com visual ════ */
.md{position:relative}
.md-vis{flex:0 0 178px;align-self:center;background:var(--cream);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:7px}
.md-vis-l{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gray-texto)}
.md-lin{height:5px;border-radius:3px;background:#FFF;overflow:hidden}
.md-lin i{display:block;height:100%;border-radius:3px;width:0;
  background:linear-gradient(90deg,var(--nucleo-amarelo),var(--nucleo-rosa));
  transition:width 1.1s var(--ease-out)}
.vis .md-lin i{width:var(--w,70%)}
.md-num{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:1.6rem;line-height:1;letter-spacing:-.03em;color:var(--preto)}
.md-num em{font-style:normal;font-size:.5em;color:var(--gray-texto)}

@media (max-width:860px){
  .seg-hero-grade{grid-template-columns:1fr;gap:var(--sp-8)}
  .md-vis{flex-basis:auto;width:100%}
}