/* ── a faixa viva ─────────────────────────────────────────────
   Uma galeria horizontal que não espera o leitor: corre sozinha, em
   laço, enquanto a página rola por baixo (referência: Kaleidoscope).
   Só `transform` anima. O laço usa dois grupos idênticos lado a lado e
   anda exatamente a largura de um deles, então a emenda não aparece.
   Esta é a única exceção à regra "só a marca gira em loop": foi pedida. */
.faixa-viva{position:relative;overflow:hidden;padding-block:clamp(14px,2vw,28px);background:var(--fv-bg,transparent)}
.fv-trilho{display:flex;width:max-content;will-change:transform;
  animation:fv-corre var(--fv-dur,80s) linear infinite}
.faixa-viva.volta .fv-trilho{animation-direction:reverse}
.fv-grupo{display:flex;gap:var(--fv-gap,clamp(10px,1.4vw,22px));padding-right:var(--fv-gap,clamp(10px,1.4vw,22px))}
.fv-grupo figure{margin:0;flex:0 0 auto;position:relative}
.fv-grupo img{display:block;height:var(--fv-h,clamp(220px,42svh,440px));width:auto;max-width:none;background:#1c1f1d}
@keyframes fv-corre{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* fotos: preto e branco; a cor entra no toque do mouse (única interação de cor) */
.faixa-viva.pb img{filter:grayscale(1) contrast(1.05);transition:filter var(--t-hover) var(--curva)}
.faixa-viva.pb figure:hover img{filter:none}
.fv-legenda{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding:12px var(--pad) 0;color:var(--mute)}
/* sem movimento: vira uma fileira que se rola com o dedo */
@media (prefers-reduced-motion:reduce){
  .faixa-viva{overflow-x:auto}
  .fv-trilho{animation:none}
  .fv-grupo[aria-hidden="true"]{display:none}
}