/* ==========================================================================
   components/marquee.css
   Marquesina de servicios que se desplaza bajo el inicio.
   ========================================================================== */
.marquee { position: relative; z-index: 2; overflow: hidden; padding: 18px 0; border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(227,38,43,.9), var(--red-deep)); transform: rotate(-2deg) scale(1.04); margin: 20px 0 40px; box-shadow: 0 20px 60px -20px rgba(227,38,43,.6); }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: .6em; padding: 0 1.6em; font-family: var(--font-d); font-weight: 700; font-size: clamp(.95rem, 2vw, 1.3rem); white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; }
.marquee__track span .ico { opacity: .75; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }