/* =========================================================
   CLIENTES
   LedLab — landing. Editar SOLO lo de esta sección acá.
   ---------------------------------------------------------
   Título arriba y dos filas de logos en carrusel infinito, una hacia
   cada lado. El carrusel es el componente .marquee (css/base/marquee.css).
   ========================================================= */

/* La etiqueta y el título van en naranja, no en el rosa por defecto
   (medido del Figma: #E95411, que es --color-3). */
.clientes .section-label {
  color: var(--color-3);
}

.clientes__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

.clientes__title {
  font-size: clamp(1.8rem, 2.8vw, 3.2rem);
  line-height: 1.12;
  max-width: 18ch;
}
.clientes__title .is-orange { color: var(--color-3); }
.clientes__title .is-dark { color: var(--color-text-dark); }

/* ---------------------------------------------------------
   FILAS
   Dos filas con distinta velocidad y sentido: si fueran iguales se
   leerían como un solo bloque desplazándose.
   --------------------------------------------------------- */
.clientes__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* El .marquee se sale del .container a propósito: el carrusel va de
   borde a borde de la pantalla, no encerrado en el margen lateral. */
.clientes__rows .marquee {
  --marquee-gap: var(--space-6);
}
.clientes__rows .marquee:nth-child(1) { --marquee-duration: 64s; }
.clientes__rows .marquee:nth-child(2) { --marquee-duration: 78s; }

@media (max-width: 1024px) {
  /* Esta seccion es corta (titulo + dos filas de logos): en mobile no
     tiene sentido estirarla a una pantalla entera, queda un hueco enorme
     entre la etiqueta y el titulo. Se ajusta al contenido. */
  .clientes.section-full {
    min-height: 0;
  }

  .clientes__inner { gap: var(--space-5); }
  .clientes__title { max-width: none; }
  .clientes__rows {
    gap: var(--space-4);
  }
  .clientes__rows .marquee {
    --marquee-gap: var(--space-4);
    --marquee-item-w: clamp(120px, 30vw, 170px);
  }
}