/* Inicio – Marcas (2 filas infinitas) | cargado desde functions.php (indsro-child) */

.eci-brands {
  --eci-brand-w: 130px;    /* ancho del espacio de cada logo */
  --eci-brand-h: 48px;     /* alto del espacio de cada logo */
  --eci-brand-gap: 44px;   /* separación entre logos */
  --eci-brand-row-gap: 20px; /* separación entre las dos filas */

  display: flex;
  flex-direction: column;
  gap: var(--eci-brand-row-gap);
  width: 100%;
  padding: 0;
  margin: 0;
}

/*
  Si el contenedor de Elementor centra su contenido verticalmente, el carrusel
  queda "flotando" con espacio arriba. Esto lo pega a la parte superior,
  alineado con el título de la izquierda.
*/
.elementor-widget-html:has(.eci-brands) {
  margin-top: 0 !important;
  margin-bottom: auto !important;
}

.eci-brands-row {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/*
  WP Rocket (función "Lazy Render" / renderizado diferido) marca elementos con
  data-wpr-lazyrender y les pone content-visibility: auto. En un carrusel que se
  mueve con transform, el navegador deja de dibujar los logos que "cree" fuera de
  pantalla y aparecen espacios en blanco. Esto lo desactiva solo en el carrusel.
*/
.eci-brands,
.eci-brands * {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}

/* Sin JS o con "reducir movimiento": filas quietas que se pueden deslizar */
.eci-brands:not(.eci-brands-ready) .eci-brands-row {
  overflow-x: auto;
  scrollbar-width: none;
}
.eci-brands-row::-webkit-scrollbar { display: none; }

.eci-brands-track {
  display: flex;
  width: max-content;
  will-change: transform;   /* capa propia en la GPU: el movimiento no repinta la página */
  backface-visibility: hidden;
}

.eci-brands-list {
  display: flex;
  align-items: center;
  gap: var(--eci-brand-gap);
  padding: 0 var(--eci-brand-gap) 0 0 !important; /* el padding derecho mantiene el espacio al empalmar */
  margin: 0 !important;
  list-style: none !important;
}

.eci-brand-item {
  flex: 0 0 var(--eci-brand-w);
  height: var(--eci-brand-h);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.eci-brand-item img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  transition: transform .3s ease;
  -webkit-user-drag: none;
  user-select: none;
}
.eci-brand-item:hover img { transform: scale(1.06); }

/*
  Movimiento: lo hace el JS moviendo la pista con transform en cada cuadro.
  (Una animación CSS sobre una pista tan ancha hace que Chrome deje de dibujar
   partes de ella y aparecen espacios en blanco.)
*/

@media (max-width: 767px) {
  .eci-brands { --eci-brand-w: 100px; --eci-brand-h: 38px; --eci-brand-gap: 28px; --eci-brand-row-gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .eci-brand-item img { transition: none; }
}