/* =========================================================
   FAIXA ANIMADA (marquee) — logo abaixo da hero
   Duas faixas de especialidades que andam em sentidos
   opostos conforme a rolagem. JS: js/faixa.js
   ========================================================= */

.marquee-section { overflow: hidden; padding: 2.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 3rem 0; }
/* sem JS, a faixa anda sozinha com esta animação */
.marquee-track { display: flex; gap: 4rem; animation: marquee 25s linear infinite; white-space: nowrap; }
.marquee-track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-item { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--gray); display: flex; align-items: center; gap: 2rem; transition: color 0.3s; }
.marquee-item:hover { color: var(--cream); }
.marquee-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* com JS: duas faixas guiadas pela rolagem */
.marquee-section.is-scroll { display: flex; flex-direction: column; gap: 1.5rem; }
.marquee-section.is-scroll .marquee-track { animation: none; width: max-content; will-change: transform; }
/* segunda faixa com letras vazadas */
.marquee-track.alt .marquee-item {
  color: transparent;
  -webkit-text-stroke: 1px var(--gray);
}
.marquee-track.alt .marquee-item:hover { color: var(--cream); -webkit-text-stroke-color: transparent; }