/* =====================================================
   Zcomex · Carrusel de clientes
   -----------------------------------------------------
   Mecánica compartida por las seis versiones. Solo define
   movimiento y tamaño: el aspecto de cada tarjeta lo sigue
   poniendo la hoja de su versión (clara u oscura).

   Se enlaza DESPUÉS de la hoja de cada versión para poder
   reemplazar la retícula por la pista horizontal.
   ===================================================== */

.clientes__marco{
  position:relative;
  overflow:hidden;
  margin-top:40px;
  /* Los logos se desvanecen en los bordes en vez de cortarse en seco */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}

/* Reemplaza la retícula: ahora es una fila que se desplaza */
.clientes__pista{
  display:flex !important;
  grid-template-columns:none !important;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:20px;
  width:max-content;
  margin:0;
  padding:0;
  list-style:none;
  will-change:transform;
}

/* La pista solo se mueve cuando ya sabemos el ancho de un juego */
.clientes__marco[data-listo="1"] .clientes__pista{
  animation:clientes-desfile var(--duracion,40s) linear infinite;
}
@keyframes clientes-desfile{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(calc(var(--juego) * -1),0,0)}
}

/* Se detiene al pasar el cursor o al llegar con el teclado, para poder
   mirar un logo concreto sin perseguirlo */
.clientes__marco:hover .clientes__pista,
.clientes__marco:focus-within .clientes__pista{animation-play-state:paused}

/* Tarjetas más anchas y logos más grandes que en la retícula */
.clientes__pista .cliente{
  flex:0 0 auto;
  width:clamp(200px,17vw,250px);
  min-height:130px;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease;
}

/* Los logos van a color de entrada.
   La cadena de cuatro clases es a propósito: gana en especificidad a las
   reglas de cada versión (y a las del tema Aurora, que llevan :root) que
   los dejaban en escala de grises. */
.clientes__marco .clientes__pista .cliente .cliente__logo{
  max-height:76px;
  max-width:100%;
  width:auto;
  object-fit:contain;
  filter:none;
  opacity:1;
  transition:transform .35s cubic-bezier(.16,1,.3,1),filter .35s ease;
}

/* Realce sin quitar color: la tarjeta se eleva, el logo crece un punto
   y aparece un resplandor dorado de marca por detrás. */
.clientes__pista .cliente:hover,
.clientes__pista .cliente:focus-within{
  transform:translateY(-6px);
  border-color:var(--gold-400,#F4C150);
  box-shadow:0 14px 34px rgba(217,165,55,.28);
}
.clientes__marco .clientes__pista .cliente:hover .cliente__logo,
.clientes__marco .clientes__pista .cliente:focus-within .cliente__logo{
  transform:scale(1.09);
  filter:saturate(1.12) drop-shadow(0 6px 16px rgba(217,165,55,.45));
}

@media (max-width:640px){
  .clientes__pista{gap:14px}
  .clientes__pista .cliente{width:170px;min-height:112px}
  .clientes__pista .cliente__logo{max-height:60px}
}

/* Sin movimiento: la pista se queda quieta y se puede arrastrar a mano.
   Nunca dejamos los logos inaccesibles por desactivar la animación. */
@media (prefers-reduced-motion: reduce){
  .clientes__marco{
    overflow-x:auto;
    -webkit-mask-image:none;mask-image:none;
    scroll-snap-type:x proximity;
  }
  .clientes__marco[data-listo="1"] .clientes__pista{animation:none}
  .clientes__pista .cliente{scroll-snap-align:start;transition:none}
  /* El realce se queda, pero sin desplazamiento ni escalado */
  .clientes__pista .cliente:hover,
  .clientes__pista .cliente:focus-within{transform:none}
  .clientes__marco .clientes__pista .cliente:hover .cliente__logo,
  .clientes__marco .clientes__pista .cliente:focus-within .cliente__logo{
    transform:none;transition:none;
  }
}