/* ===== Clients bar (look premium, SIN líneas delimitantes) ===== */
.clients-bar{
  --gap: clamp(20px, 5vw, 48px);
  --logo-h: clamp(40px, 9vw, 80px);
  --speed: 28s;
  --tint-jade: rgba(65,140,143,.12);
  --veil: rgba(12,18,24,.88);

  padding: 1.2rem 0 1.6rem;

  /* ❌ sin bordes dorados (líneas) */
  border: none;
  overflow: hidden;
}

/* Título más sobrio (sin parecer separador) */
.clients-bar__title{
  font: 700 clamp(1rem, .7rem + 1vw, 1.25rem)/1.15 Cinzel, serif;
  letter-spacing: .4px;
  text-align: center;
  margin: 0 0 1rem;
  color: var(--bone-50);
  text-shadow: 0 1px 10px rgba(0,0,0,.22);
}

/* Viewport con fade en extremos (se mantiene) */
.clients-bar__viewport{
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Rail animado */
.clients-bar__rail{
  --cycle: 0px;
  display: flex;
  width: max-content;
  will-change: transform;
}
.clients-bar__rail.is-ready{ animation: clients-marquee var(--speed) linear infinite; }
.clients-bar:hover .clients-bar__rail.is-ready,
.clients-bar:focus-within .clients-bar__rail.is-ready{ animation-play-state: paused; }

/* Set de logos */
.clients-bar__set{
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: .25rem 0;
  flex-shrink: 0;
}

/* Logos: look limpio y profesional */
.clients-bar__set img{
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
  display: block;
  opacity: .95;
  filter: saturate(1.02) contrast(1.02);
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.clients-bar__set img:hover{
  transform: translateY(-2px) scale(1.03);
  filter: saturate(1.06) contrast(1.06);
  opacity: 1;
}

/* Accesibilidad */
.clients-bar__set a:focus-visible{
  outline: 3px solid var(--turquoise);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Animación */
@keyframes clients-marquee{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(calc(-1 * var(--cycle)),0,0); }
}

/* ===== Responsivo ===== */
@media (max-width: 960px){
  .clients-bar{ --logo-h: clamp(56px, 12vw, 96px); }
}
@media (max-width: 560px){
  .clients-bar{
    padding: 1rem 0 1.2rem;
    --logo-h: clamp(64px, 18vw, 110px);
  }
  .clients-bar__title{ margin-bottom: .8rem; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .clients-bar__rail.is-ready{ animation: none; }
  .clients-bar__viewport{ -webkit-mask-image: none; mask-image: none; }
  .clients-bar__rail{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--gap);
    justify-items: center;
    width: 100%;
  }
}

/* Set de logos con gap */
.clients-bar__set{
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: .25rem 0;
  flex-shrink: 0;
}

/* Truco: espacio extra al final del set para que el loop no “pegue” */
.clients-bar__set::after{
  content: "";
  display: block;
  flex: 0 0 calc(var(--gap) * 2);  /* el doble del gap como colchón */
}

@media (min-width: 769px) {
  .clients-bar__viewport {
    height: 180px !important; /* altura del carrusel, sube si lo necesitas */
  }

  .clients-bar__set {
    gap: 48px !important; /* más espacio entre logos si crecen */
  }

  .clients-bar__set img {
    max-height: none !important;  /* quita límite */
    height: 120px !important;     /* fuerza el tamaño real */
    width: auto !important;       /* mantiene proporción */
    display: block;
  }
}