/* Separador entre o "Fale conosco" e o rodapé (/nova-pagina/), opção 3
 * escolhida: faixa terracota levemente inclinada com os serviços deslizando.
 * A lista aparece duas vezes para o laço ser contínuo (anima até -50%).
 * Decorativa (aria-hidden); parada com "reduzir movimento". */

body.nova-pagina .nv-sep {
  padding: 56px 0;
  overflow: hidden;
  background: #f8f2ec;
}
body.nova-pagina .nv-sep__trilho {
  overflow: hidden;
  background: #b84c26;
  transform: rotate(-1.2deg);
  box-shadow: 0 10px 24px rgba(60, 20, 6, 0.18);
}
/* A faixa dá 2 voltas em velocidade constante e uma 3ª desacelerando até parar
 * na posição inicial (-50% = 0, a lista é duplicada): sem salto, e o movimento
 * não fica infinito (WCAG 2.2.2). Pausa com o cursor em cima ou com foco dentro.
 * A curva da 3ª volta começa com a mesma inclinação (1) da linear. */
body.nova-pagina .nv-sep__fita {
  --sep-volta: 38s;
  display: flex;
  width: max-content;
  padding: 16px 0;
  animation:
    nv-sep-fita var(--sep-volta) linear 2,
    nv-sep-fita var(--sep-volta) cubic-bezier(0.33, 0.33, 0.6, 1) calc(var(--sep-volta) * 2) 1;
}
body.nova-pagina .nv-sep:is(:hover, :focus-within) .nv-sep__fita { animation-play-state: paused; }
body.nova-pagina .nv-sep__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
body.nova-pagina .nv-sep__fita span {
  padding: 0 18px;
  color: #fff;
  font: 700 clamp(18px, 2vw, 24px)/1 "Lato", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.nova-pagina .nv-sep__fita i { display: flex; align-self: center; color: #ffc29b; }
body.nova-pagina .nv-sep__fita i svg { width: 13px; height: 13px; fill: currentColor; }
@keyframes nv-sep-fita { to { transform: translateX(-50%); } }

@media (max-width: 767px) {
  body.nova-pagina .nv-sep { padding: 44px 0; }
  body.nova-pagina .nv-sep__fita { padding: 12px 0; --sep-volta: 28s; }
}
@media (prefers-reduced-motion: reduce) {
  body.nova-pagina .nv-sep__fita { animation: none; }
}

/* Espaço igual acima e abaixo da faixa: o fim do Fale conosco tem 48px (32px no
 * celular) de respiro; o topo do rodapé, logo após a faixa, usa o mesmo valor. */
body.nova-pagina .nv-sep + .nv-rp { padding-top: 48px; }
@media (max-width: 767px) {
  body.nova-pagina .nv-sep + .nv-rp { padding-top: 32px; }
}
