/* ───────────────────────────────────────────────────────────────────────────
 * O FIO — a linha 3D que percorre a página do cabeçalho ao rodapé, ao scroll,
 * e ganha a forma de cada secção ao chegar. Aditivo: só atua onde o <body> tem
 * a classe `tem-fio`. Direção: DESIGN-3D-2026.md (conceito "O fio", 2026-10-08).
 * ─────────────────────────────────────────────────────────────────────────── */

/* Tokens do fio — seguem o tema como o resto do sistema (claro por defeito). */
:root {
  --fio-cor: #5b21b6;
  --fio-no: #6d28d9;
  --fio-fraco: rgb(91 33 182 / .14);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fio-cor: #8b5cf6;
  --fio-no: #c4b5fd;
  --fio-fraco: rgb(139 92 246 / .18);
}}
:root[data-theme="dark"] {
  --fio-cor: #8b5cf6;
  --fio-no: #c4b5fd;
  --fio-fraco: rgb(139 92 246 / .18);
}

/* O conteúdo passa a estar por cima do fio; os fundos sólidos das secções
 * ficam transparentes para a linha se ver a atravessá-las (os fundos eram
 * `var(--bg)`/`var(--bg2)`, muito próximos do fundo da página). */
body.tem-fio { position: relative; }
body.tem-fio #fioSvg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
/* genérico: filhos diretos do body ficam à frente do fio (reutilizável em
 * qualquer página com `tem-fio`, sem mexer no CSS dessa página). */
body.tem-fio > section,
body.tem-fio > header,
body.tem-fio > nav,
body.tem-fio > .wrap,
body.tem-fio > footer { position: relative; z-index: 1; }
body.tem-fio #hero,
body.tem-fio #stats,
body.tem-fio #features,
body.tem-fio #bio-page,
body.tem-fio #pricing,
body.tem-fio footer.klr { position: relative; z-index: 1; }
body.tem-fio #stats,
body.tem-fio #features,
body.tem-fio #bio-page,
body.tem-fio #pricing { background: transparent; }

/* Traços do fio */
#fioSvg #fioBase { fill: none; stroke: var(--fio-fraco); stroke-width: 2; }
#fioSvg #fioVivo { fill: none; stroke: var(--fio-cor); stroke-width: 2.5; stroke-linecap: round; filter: url(#fioBrilho); }
#fioSvg .fio-no { fill: var(--k-bg, #fff); stroke: var(--fio-fraco); stroke-width: 2; transition: stroke .4s cubic-bezier(.23,1,.32,1); }
#fioSvg .fio-no.on { stroke: var(--fio-no); filter: url(#fioBrilho); }
#fioSvg #fioCabeca { fill: var(--fio-no); filter: url(#fioBrilho); }
#fioSvg .fio-glifo {
  fill: none; stroke: var(--fio-cor); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; filter: url(#fioBrilho); opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  #fioSvg .fio-no { transition: none; }
}