/* Bloque de clientes: dos carriles en sentidos opuestos. */
@layer components {
  .clients { background: var(--concreto); padding-block: var(--section-y); overflow: clip; }

  .clients__intro { display: grid; gap: 1.25rem var(--col-gap); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
  .clients__title { font-size: var(--fs-3); }
  .clients__text { color: var(--acero-oscuro); }

  @media (min-width: 60rem) {
    .clients__intro { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
    .clients__title { grid-column: 1 / span 5; }
    .clients__text { grid-column: 7 / span 6; }
  }

  .clients__rows { display: grid; gap: 1rem; }

  .marquee { display: flex; overflow: hidden; --gap: 1rem; }
  .marquee__track {
    display: flex;
    flex: none;
    gap: var(--gap);
    margin: 0;
    padding: 0 var(--gap) 0 0;
    list-style: none;
    min-width: 100%;
    animation: marquee-left calc(var(--count, 12) * 6s) linear infinite;
  }
  .marquee--right .marquee__track { animation-direction: reverse; }
  .marquee:hover .marquee__track,
  .clients__rows:focus-visible .marquee__track { animation-play-state: paused; }
  .clients__rows:focus-visible { outline-offset: -2px; box-shadow: none; }

  @keyframes marquee-left { to { transform: translateX(-100%); } }

  .logo-tile {
    display: grid;
    place-items: center;
    flex: none;
    height: 6rem;
    padding: 0 1.75rem;
    background: var(--blanco);
    border-radius: var(--radius);
  }
  .logo-tile--dark { background: var(--petroleo-hondo); }
  .logo-tile__img { width: auto; height: auto; max-height: 3.5rem; max-width: 11.5rem; object-fit: contain; }

  /* Movimiento reducido: cuadrícula estática y sin duplicados. */
  @media (prefers-reduced-motion: reduce) {
    .clients__rows {
      grid-template-columns: repeat(auto-fill, minmax(min(10rem, 40%), 1fr));
      padding-inline: var(--gutter);
    }
    .marquee, .marquee__track { display: contents; }
    .marquee__track[data-copy] { display: none; }
    .logo-tile { padding-inline: 1rem; }
    .logo-tile__img { max-width: 100%; }
  }
}