/* Tecela AI · visual da página /servicos/sites-e-funis (Sites e funis).
   Trilha do funil: Anúncio → Página → Quiz → CRM → Agenda, com um contato
   que percorre as etapas e acumula marcações. Sem animação: estado final,
   completo. Com animação (prefers-reduced-motion:no-preference): percurso
   em ciclo. Tudo escopado sob .fnl-*. */

.fnl-wrap {margin-top:2px}
.svcp-shot + .fnl-wrap {margin-top:18px}

.fnl-track {list-style:none;margin:0 0 20px;padding:0;display:flex;justify-content:space-between;gap:4px;position:relative}
.fnl-track::before {content:"";position:absolute;top:16px;left:16px;right:16px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:.4}
.fnl-track li {display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;min-width:0;text-align:center;position:relative}
.fnl-node {width:32px;height:32px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--accent);background:var(--accent);color:var(--accent-fg);position:relative;z-index:1}
.fnl-node svg {width:16px;height:16px}
.fnl-track b {font-size:10.5px;font-weight:650;letter-spacing:.01em;color:var(--fg-2);white-space:nowrap}

.fnl-lane {position:relative;height:32px;margin-bottom:12px;overflow:hidden}
.fnl-card {position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:6px 13px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 14%,var(--bg-2));font:600 12px var(--font-sans);color:var(--fg)}
.fnl-dot {width:6px;height:6px;border-radius:50%;background:var(--accent-2);flex:none}

.fnl-tags {display:flex;gap:7px;flex-wrap:wrap;min-height:24px}
.fnl-tag {font:600 10.5px var(--font-mono);letter-spacing:.02em;padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:var(--fg-2);background:var(--bg-2)}

@media(max-width:600px) {
  .fnl-track b {font-size:9.5px}
  .fnl-node {width:28px;height:28px}
  .fnl-node svg {width:14px;height:14px}
  .fnl-card {padding:5px 11px;font-size:11.5px}
}

/* Sem movimento: contato já chegou à agenda, com todas as marcações visíveis. */
@media(prefers-reduced-motion:no-preference) {
  .fnl-track .fnl-node {animation:fnl-node-fill 12s ease-in-out infinite backwards}
  .fnl-track li:nth-child(1) .fnl-node {animation-delay:0s}
  .fnl-track li:nth-child(2) .fnl-node {animation-delay:2.4s}
  .fnl-track li:nth-child(3) .fnl-node {animation-delay:4.8s}
  .fnl-track li:nth-child(4) .fnl-node {animation-delay:7.2s}
  .fnl-track li:nth-child(5) .fnl-node {animation-delay:9.6s}
  .fnl-card {animation:fnl-card-move 12s ease-in-out infinite backwards}
  .fnl-t1 {animation:fnl-tag1 12s ease-in-out infinite backwards}
  .fnl-t2 {animation:fnl-tag2 12s ease-in-out infinite backwards}
  .fnl-t3 {animation:fnl-tag3 12s ease-in-out infinite backwards}
}
/* Em telas maiores a pista tem mais espaço livre: o contato percorre um trecho mais largo. */
@media(prefers-reduced-motion:no-preference) and (min-width:960px) {
  .fnl-card {animation-name:fnl-card-move-wide}
}

@keyframes fnl-node-fill {
  0%,4% {background:var(--bg-2);border-color:var(--border);color:var(--muted)}
  8%,88% {background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
  94%,100% {background:var(--bg-2);border-color:var(--border);color:var(--muted)}
}
@keyframes fnl-card-move {
  0% {right:52%;opacity:0}
  4% {opacity:1}
  4%,17% {right:52%}
  20%,37% {right:39%}
  40%,57% {right:26%}
  60%,77% {right:13%}
  80%,95% {right:0%}
  98%,100% {right:0%;opacity:0}
}
@keyframes fnl-card-move-wide {
  0% {right:60%;opacity:0}
  4% {opacity:1}
  4%,17% {right:60%}
  20%,37% {right:45%}
  40%,57% {right:30%}
  60%,77% {right:15%}
  80%,95% {right:0%}
  98%,100% {right:0%;opacity:0}
}
@keyframes fnl-tag1 {0%,39% {opacity:0} 43%,96% {opacity:1} 99%,100% {opacity:0}}
@keyframes fnl-tag2 {0%,59% {opacity:0} 63%,96% {opacity:1} 99%,100% {opacity:0}}
@keyframes fnl-tag3 {0%,79% {opacity:0} 83%,96% {opacity:1} 99%,100% {opacity:0}}