/* =========================================================
   «Y esto no es todo.» — una fila de logotipos en movimiento
   Fondo amarillo, logotipos en negro, sin cajas. La fila va hacia
   la izquierda (marcas.js clona los logotipos para que el bucle no
   tenga saltos e iguala su peso visual con --k).
   ========================================================= */

.brands {
  --logo-h: clamp(44px, 4.6vw, 72px);   /* altura de un logotipo de proporción media (≈3:1) */
  --logo-gap: clamp(64px, 7vw, 128px);  /* separación entre logotipos */

  position: relative;
  background: var(--yellow);
  color: var(--ink);
  padding-block: clamp(96px, 11vw, 160px);
  overflow: hidden;
}

.brands__head {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.brands__title {
  margin: 0;
  font-size: clamp(48px, 7.4vw, 112px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.05em;
}
.brands__lead {
  max-width: 30ch;
  margin: clamp(20px, 2.2vw, 30px) auto 0;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  text-wrap: balance;
}

/* ---------- Filas ---------- */
.brands__rows {
  margin-top: clamp(64px, 7vw, 104px);
}
.brands__row { overflow: hidden; }
.brands__row.is-moving {
  /* los logotipos aparecen y desaparecen suavemente por los lados */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.brands__track {
  display: flex;
  flex-wrap: wrap;               /* sin JS o con movimiento reducido: filas estáticas centradas */
  justify-content: center;
  align-items: center;
  row-gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brands__item {
  flex: none;
  display: flex;
  align-items: center;
  height: calc(var(--logo-h) * 1.6);
  padding-inline: calc(var(--logo-gap) / 2);   /* padding, no gap: así el bucle mide exactamente el doble */
}

/* --k lo pone marcas.js según la proporción: los alargados bajan y los cuadrados suben */
.brands__item img {
  display: block;
  width: auto;
  height: calc(var(--logo-h) * var(--k, 1));
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- En movimiento ---------- */
.brands__row.is-moving .brands__track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: brands-left var(--dur, 60s) linear infinite;
  will-change: transform;
}
.brands.is-offscreen .brands__track,
.brands__row:hover .brands__track { animation-play-state: paused; }

@keyframes brands-left { from { transform: translateX(0); }    to { transform: translateX(-50%); } }

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .brands { --logo-h: 36px; --logo-gap: 52px; }
  .brands__row.is-moving {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
}

/* Movimiento reducido: logotipos quietos en varias líneas (marcas.js tampoco clona) */
@media (prefers-reduced-motion: reduce) {
  .brands__row.is-moving .brands__track { animation: none; }
}