/* ===========================================================
   MARCAS
   Cinta de logos de clientes en bucle continuo. La fila se duplica
   y el conjunto se desplaza justo la mitad de su ancho: al terminar
   el ciclo la segunda copia está exactamente donde arrancó la
   primera, así que el salto es invisible.

   Los logotipos vienen con brillos muy distintos (de 48 a 255 de
   luminancia media) y varios son a todo color, así que NO se igualan
   a blanco: cada uno lleva el ajuste que le hace falta.
   =========================================================== */
.marcas{
  position:relative; z-index:2;
  width:100%; max-width:var(--ancho); margin-inline:auto;
  padding:clamp(24px,5vh,60px) 0 clamp(34px,6vh,72px);
}

.marcas__rotulo{
  font-family:var(--nav); font-weight:500;
  font-size:clamp(10px,1.05vw,13px);
  letter-spacing:.20em; text-transform:uppercase;
  color:var(--texto-3); text-align:center;
  padding-inline:var(--lado);
  margin-bottom:clamp(22px,3.4vh,40px);
}

/* la ventana recorta y difumina los dos extremos */
.marcas__ventana{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}

.marcas__cinta{
  display:flex; width:max-content;
  animation:desfilar var(--vuelta,42s) linear infinite;
  will-change:transform;
}
.marcas__ventana:hover .marcas__cinta{ animation-play-state:paused }

@keyframes desfilar{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(-50%,0,0) }
}

.marcas__fila{
  display:flex; align-items:center; list-style:none;
  gap:clamp(38px,6vw,88px);
  padding-inline:clamp(19px,3vw,44px);
}
/* Los logotipos van EN SU COLOR. Aplastarlos todos a blanco los
   dejaba irreconocibles: los huecos del dibujo se leían como letras
   negras. Cada uno lleva su propio ajuste, medido de sus píxeles
   opacos, y sólo lo lleva el que lo necesita. */
.marcas__fila img{
  height:clamp(26px,6vw,36px); width:auto;
  filter:var(--ajuste-oscuro,none);
  opacity:.82;
  transition:opacity .4s var(--suave), transform .4s var(--suave), filter .4s var(--suave);
}
html[data-tema="claro"] .marcas__fila img{ filter:var(--ajuste-claro,none) }
.marcas__fila img:hover{ opacity:1; transform:translateY(-3px) scale(1.04) }

@media (prefers-reduced-motion:reduce){
  .marcas__cinta{ animation:none }
  .marcas__fila img{ transition:none }
}