/* ===============================
   CLIENTS – CAROUSEL LIMPIO
   ❌ SIN BORDES
=============================== */

.clients{
  background:#011077;
  padding:26px 0;
  overflow:hidden;
}

.clients__container{
  max-width:1300px;
  margin:0 auto;
  padding:0 24px;

  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
}

/* Flechas minimal (SIN bordes) */
.clients__arrow{
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  border:none;               /* ❌ eliminado */
  color:#FFFFFF;
  font-size:26px;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease, opacity .2s ease;
}

.clients__arrow:hover{
  background:rgba(255,255,255,.22);
  transform:scale(1.05);
}

/* viewport */
.clients__viewport{
  overflow:hidden;
  position:relative;

  /* fade elegante a los lados (no es borde) */
  -webkit-mask-image:linear-gradient(
    to right,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to right,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}

/* Track */
.clients__track{
  display:flex;
  align-items:center;
  gap:64px;
  padding:10px 6px;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* Logos */
.clients__track img{
  height:62px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  opacity:.92;
  transition:opacity .25s ease, transform .25s ease;
  user-select:none;
  pointer-events:none;
}

.clients__viewport:hover .clients__track img{
  opacity:1;
}

/* ===============================
   RESPONSIVE
=============================== */

@media (max-width:1024px){
  .clients{
    padding:22px 0;
  }

  .clients__container{
    max-width:100%;
    padding:0 18px;
    gap:14px;
  }

  .clients__arrow{
    width:38px;
    height:38px;
    font-size:24px;
  }

  .clients__track{
    gap:48px;
  }

  .clients__track img{
    height:52px;
    max-width:180px;
  }
}

@media (max-width:768px){
  .clients{
    padding:18px 0;
  }

  .clients__container{
    grid-template-columns:1fr;
    row-gap:14px;
  }

  .clients__arrow{
    display:none; /* swipe natural */
  }

  .clients__track{
    gap:40px;
  }

  .clients__track img{
    height:46px;
    max-width:160px;
  }
}

@media (max-width:480px){
  .clients{
    padding:16px 0;
  }

  .clients__track{
    gap:32px;
  }

  .clients__track img{
    height:40px;
    max-width:140px;
  }

  .clients__viewport{
    -webkit-mask-image:linear-gradient(
      to right,
      transparent 0%,
      #000 15%,
      #000 85%,
      transparent 100%
    );
    mask-image:linear-gradient(
      to right,
      transparent 0%,
      #000 15%,
      #000 85%,
      transparent 100%
    );
  }
}

@media (max-width:360px){
  .clients__track{
    gap:26px;
  }

  .clients__track img{
    height:36px;
    max-width:120px;
  }
}