/* =========================================================================
   LAQUIN FOODS · Cintilla de clientes
   Banda de papel bajo el hero con los logos de los clientes deslizándose.
   Los logos van a color; el papel les da fondo neutro sin recortarlos.
   ========================================================================= */

.lq-clientes {
  --lq-paper:    #FAF4EA;
  --lq-paper-hi: #FDF9F2;
  --lq-paper-lo: #F1E5D4;
  --lq-ink:      #1A0E11;
  --lq-ink-soft: #4E3D40;
  --lq-crimson:  #DD183B;

  position: relative;
  width: 100%;
  padding: 34px 0 32px;
  background-image: linear-gradient(178deg, var(--lq-paper-hi) 0%, var(--lq-paper) 52%, var(--lq-paper-lo) 100%);
  overflow: hidden;
}

/* ---------- Rótulo ---------- */

.lq-clientes__titulo {
  margin: 0 0 26px;
  padding: 0 20px 13px;
  position: relative;
  font-family: 'Lexend', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--lq-ink-soft);
}

.lq-clientes__titulo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34px;
  height: 2px;
  margin-left: -17px;
  background: var(--lq-crimson);
}

/* ---------- Carril ---------- */

/* Astra encoge al ancho de contenido (1140px) y centra TODO lo que cuelga en
   segundo nivel de .entry-content, con esta regla de especificidad (0,4,0):
     .ast-page-builder-template .entry-content[data-ast-blocks-layout]
       > *:not(.wp-block-group):where(:not(.uagb-is-root-container)…) > *
   El título y el carril son justo esos nietos. No hay forma de superarla sin
   inflar el selector con :not(#id), así que aquí !important es lo honesto:
   la cintilla va a sangre por definición. */
.lq-clientes > .lq-clientes__titulo,
.lq-clientes > .lq-clientes__viewport {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.lq-clientes__viewport {
  width: 100%;
  overflow: hidden;
  /* Los extremos se desvanecen: así el punto de empalme no se ve nunca. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* Cuatro copias idénticas: el desplazamiento de una copia (-25%) deja
   siempre carril de sobra por delante, incluso en monitores ultrapanorámicos. */
.lq-clientes__pistas {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: lq-clientes-desliza 34s linear infinite;
}

.lq-clientes__viewport:hover .lq-clientes__pistas,
.lq-clientes__viewport:focus-within .lq-clientes__pistas {
  animation-play-state: paused;
}

@keyframes lq-clientes-desliza {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

.lq-clientes__pista {
  display: flex;
  align-items: center;
  gap: 72px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 36px;
  list-style: none;
}

.lq-clientes__pista li {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
  line-height: 0;
}

.lq-clientes__pista img {
  display: block;
  width: auto;
  height: 46px;
  max-width: none;
  object-fit: contain;
}

/* Logos redondos: a igual altura pesan más que los apaisados, se compensa. */
.lq-clientes__pista img[data-forma="redondo"] { height: 64px; }

/* ---------- Tablet y móvil ---------- */

@media (max-width: 880px) {
  .lq-clientes { padding: 28px 0 26px; }
  .lq-clientes__titulo { margin-bottom: 22px; }
  .lq-clientes__pista { gap: 54px; padding: 0 27px; }
  .lq-clientes__pista img { height: 38px; }
  .lq-clientes__pista img[data-forma="redondo"] { height: 53px; }
}

@media (max-width: 480px) {
  .lq-clientes { padding: 24px 0 22px; }
  .lq-clientes__pista { gap: 42px; padding: 0 21px; }
  .lq-clientes__pista img { height: 32px; }
  .lq-clientes__pista img[data-forma="redondo"] { height: 45px; }
}

/* ---------- Movimiento reducido ---------- */

/* Quien pide menos movimiento en su sistema recibe la cintilla más lenta,
   no parada: el token de la especificación es «reduce», no «none», y
   congelarla dejaba a la mitad de los clientes fuera de la vista.
   Sigue deteniéndose al pasar el ratón o al recibir el foco.
   Para volver a detenerla del todo, basta con cambiar la línea de abajo por
   `animation: none;`. */
@media (prefers-reduced-motion: reduce) {
  .lq-clientes__pistas { animation-duration: 78s; }
}