/* ==========================================================
   BiosMed – Sección "Empresas que confían en BiosMed"
   Ubicación: /wp-content/themes/medicenter-child/css/clients-section.css

   v2.0 — Reemplaza la matriz estática por 2 bandas horizontales
   animadas (marquee), 100% CSS, sin JavaScript ni plugins.

   Cómo funciona el loop infinito:
   cada fila (.biosmed-marquee-track) contiene el mismo grupo de
   logos DOS veces seguidas (solo en el HTML/markup, mismos
   archivos e URLs). El track mide el 200% del ancho visible y
   se anima de translateX(0) a translateX(-50%): al llegar a la
   mitad, la segunda copia queda exactamente donde empezó la
   primera, así que el salto es invisible y el loop se percibe
   continuo.
   ========================================================== */

.biosmed-clients-marquee .biosmed-section-header {
  margin-bottom: var(--biosmed-space-lg, 40px);
}

.biosmed-clients-marquee .biosmed-marquee-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.biosmed-clients-marquee .biosmed-marquee-row + .biosmed-marquee-row {
  margin-top: 28px;
}

.biosmed-clients-marquee .biosmed-marquee-track {
  display: flex;
  width: max-content;
  animation-name: biosmed-marquee-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Fila superior: hacia la derecha (misma animación, en reversa) */
.biosmed-clients-marquee .biosmed-marquee-row--a .biosmed-marquee-track {
  animation-duration: 38s;
  animation-direction: reverse;
}

/* Fila inferior: hacia la izquierda, con duración distinta para
   que no se perciba como una copia espejo de la fila de arriba. */
.biosmed-clients-marquee .biosmed-marquee-row--b .biosmed-marquee-track {
  animation-duration: 30s;
  animation-direction: normal;
}

.biosmed-clients-marquee .biosmed-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.biosmed-clients-marquee .biosmed-client-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 120px;
  width: 170px;
  padding: 0 20px;
  transition: transform 0.25s ease;
}

.biosmed-clients-marquee .biosmed-client-card:hover {
  transform: scale(1.03);
}

.biosmed-clients-marquee .biosmed-client-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@keyframes biosmed-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Pausa al pasar el cursor (solo con puntero fino, es decir,
   desktop — en táctil no aplica hover, así que el movimiento
   sigue funcionando sin interrupciones). */
@media (hover: hover) and (pointer: fine) {
  .biosmed-clients-marquee .biosmed-marquee-row:hover .biosmed-marquee-track {
    animation-play-state: paused;
  }
}

/* Accesibilidad: respeta "reducir movimiento" del sistema
   operativo del visitante. */
@media (prefers-reduced-motion: reduce) {
  .biosmed-clients-marquee .biosmed-marquee-track {
    animation: none;
  }
  .biosmed-clients-marquee .biosmed-marquee-row {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .biosmed-clients-marquee .biosmed-client-card {
    height: 100px;
    width: 145px;
    padding: 0 16px;
  }
}

/* Móvil */
@media (max-width: 700px) {
  .biosmed-clients-marquee .biosmed-client-card {
    height: 82px;
    width: 115px;
    padding: 0 12px;
  }
  .biosmed-clients-marquee .biosmed-marquee-row + .biosmed-marquee-row {
    margin-top: 20px;
  }
}