/* ===== 08 · Clientes — A «Puente a contacto» (única desde la ronda 8; antes E): una línea infinita de marcas ===== */

/* Marca: símbolo monocromo (favicon real) + nombre como rótulo. Color al pasar el ratón. */
.clients-mk{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-head);font-weight:700;font-size:clamp(.95rem,1.05vw,1.08rem);letter-spacing:-.025em;line-height:1;white-space:nowrap}
.clients-mk img{width:24px;height:24px;flex:none;border-radius:6px;object-fit:contain;transition:filter .4s,opacity .4s}
[data-theme="light"] .clients-mk img{filter:grayscale(1) contrast(1.2) brightness(.82)}
[data-theme="light"] .clients-mk--line img{filter:brightness(0);opacity:.78}
[data-theme="dark"] .clients-mk img{filter:grayscale(1) contrast(1.1)}
[data-theme="dark"] .clients-mk--line img{filter:brightness(0) invert(1);opacity:.88}
.clients-mk:hover img{filter:none;opacity:1}
[data-theme="light"] .clients-mk{color:#3F4554}
[data-theme="dark"] .clients-mk{color:#C9CFDB}

/* Marcas sin favicon (clientes del portfolio): inicial en un cuadradito del mismo tamaño */
.clients-mk__ini{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:6px;font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:0;border:1px solid currentColor;opacity:.7}

/* ---------- A · Puente a contacto ---------- */
.clients-a{background:var(--u-night);color:var(--u-paper);padding:clamp(3.5rem,7vw,5rem) 0 0;text-align:center;--gap:clamp(2.2rem,3.6vw,3.6rem)}
.clients-a__label{margin:0 auto 1.8rem;color:var(--u-muted)}
/* Cinta: una sola línea; los bordes se funden con el fondo */
.clients-a__belt{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients-a__track{display:flex;width:max-content;animation:clients-loop var(--dur,90s) linear infinite}
.clients-a__row{list-style:none;margin:0;padding:.6rem var(--gap) .6rem 0;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--gap);flex:none}
.clients-a__belt:hover .clients-a__track,.clients-a__belt:focus-within .clients-a__track,.clients-a.is-off .clients-a__track{animation-play-state:paused}
@keyframes clients-loop{to{transform:translate3d(-50%,0,0)}}
.clients-a__foot{display:flex;flex-direction:column;align-items:center}
.clients-a__cert{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1.4rem;margin:1.8rem 0 0;padding-top:1.4rem;border-top:1px solid var(--u-line);color:var(--u-muted)}
.clients-a__cert img{height:22px;width:auto;filter:brightness(0) invert(1);opacity:.82}
.clients-a__next{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:clamp(2.4rem,5vw,3.6rem);font-family:var(--f-head);font-weight:600;font-size:1rem;color:var(--u-paper)}
.clients-a__next span{border-bottom:2px solid var(--u-blue);padding-bottom:.2rem;transition:color .3s}
.clients-a__next:hover span{color:var(--u-blue)}
.clients-a__next i{display:block;width:1px;height:clamp(56px,9vh,96px);background:linear-gradient(var(--u-blue),rgba(153,196,228,0));transform-origin:50% 0}
/* Movimiento reducido: sin cinta; todas las marcas visibles en varias líneas */
@media (prefers-reduced-motion:reduce){
  .clients-a__belt{-webkit-mask-image:none;mask-image:none}
  .clients-a__track{animation:none;width:auto;display:block}
  .clients-a__row{flex-wrap:wrap;justify-content:center;row-gap:1.2rem;padding:0 var(--pad)}
  .clients-a__row[aria-hidden]{display:none}
}