/* SECCIÓN */
.trusted-section {
  padding: 2.5rem 1.5rem; /* antes: 4rem */
  text-align: center;
}

/* TÍTULO */
.trusted-title {
  font-size: 1.875rem;
  font-weight: 300;
  color: #1D273B;
  margin-bottom: 2.5rem;
}

/* 🔴 ESTE ES EL "RECUADRO" DEL EJEMPLO */
.trusted-box {
  max-width: 1100px;      /* controla el ancho */
  margin: 0 auto;        /* centra el bloque */
  position: relative;
}

/* MARQUEE */
.logo-marquee {
  overflow: hidden;
  position: relative;
}

/* TRACK EN MOVIMIENTO */
.logo-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  animation: scroll-logos 30s linear infinite;
}

/* LOGOS */
.logo-track img {
  width: 130px;
  opacity: 1; /* a color y bien vivos */
  transition: transform 0.3s ease;
}

.logo-track img:hover {
  transform: scale(1.06);
  opacity: 1;
}

/* ANIMACIÓN */
@keyframes scroll-logos {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* DESVANECIDO EN LOS BORDES (solo dentro del recuadro) */
.logo-marquee::before,
.logo-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.logo-marquee::before {
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}

.logo-marquee::after {
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .trusted-box {
    max-width: 90%;
  }

  .logo-track {
    gap: 2rem;
    animation-duration: 20s;
  }

  .logo-track img {
    width: 100px;
  }
}