/* =========================================================
   CLIENTES — carrusel de logotipos (Inicio, Nosotros, Contacto)
   Alimentado por /assets/data/clientes.json (js/clients-logos.js)
   Logos a todo color sobre tarjetas blancas, sin controles.
========================================================= */
.clients-logos{ scroll-margin-top:84px; }
.clients-logos[hidden]{ display:none !important; }
.clients-logos{
  padding:88px 0;
  background:#EEF2F7;                      /* azul grisáceo muy suave (tema claro) */
}
:root[data-theme="dark"] .clients-logos{ background:var(--color-bg-alt); }

.clients-logos__head{ text-align:center; max-width:680px; margin:0 auto 44px; }
.clients-logos__head .eyebrow{ justify-content:center; }
.clients-logos__head .section-title{ margin-left:auto; margin-right:auto; }
.clients-logos__head .section-desc{ margin-left:auto; margin-right:auto; }

.clients-logos__stage{ position:relative; }
.clients-logos__viewport{
  overflow-x:auto; overflow-y:hidden; padding:4px 0;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.clients-logos__viewport::-webkit-scrollbar{ display:none; }
.clients-logos__viewport:focus-visible{ outline:2px solid var(--color-primary); outline-offset:4px; border-radius:var(--radius); }
/* Pocos logos: estáticos y centrados, sin movimiento ni desvanecido */
.clients-logos.is-static .clients-logos__viewport{ -webkit-mask-image:none; mask-image:none; overflow:hidden; }

.clients-logos__track{
  display:flex; align-items:stretch; gap:var(--cl-gap,24px);
  width:max-content; min-width:100%; justify-content:center;
  list-style:none; margin:0; padding:0;
}
.clients-logos__item{
  flex:0 0 var(--cl-item-w,200px); width:var(--cl-item-w,200px); height:92px; display:flex;
}
.clients-logos__tile{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:18px 26px; border-radius:var(--radius-lg);
  background:#FFFFFF; border:1px solid rgba(15,18,24,.07);
  box-shadow:0 1px 2px rgba(15,18,24,.04);
  text-decoration:none;
  transition:border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
:root[data-theme="dark"] .clients-logos__tile{ background:#F4F6FA; border-color:rgba(255,255,255,.10); box-shadow:none; }
.clients-logos__logo{ display:block; width:100%; height:100%; object-fit:contain; }
a.clients-logos__tile:hover{ border-color:rgba(47,111,237,.35); box-shadow:0 2px 8px rgba(15,18,24,.06); }
a.clients-logos__tile:focus-visible{ outline:2px solid var(--color-primary); outline-offset:3px; }

@media (max-width:1023px){ .clients-logos__item{ height:84px; } }
@media (max-width:767px){
  .clients-logos{ padding:64px 0; }
  .clients-logos__head{ margin-bottom:32px; }
  .clients-logos__item{ height:76px; }
  .clients-logos__tile{ padding:14px 18px; }
}
@media (prefers-reduced-motion: reduce){ .clients-logos__tile{ transition:none; } }