/* VYRO CLIENTS — premium full-bleed client marquee */
.clients-section{
  position:relative;
  width:100%;
  min-height:700px;
  padding:clamp(100px,10vw,150px) 0 clamp(110px,11vw,160px);
  background:
    linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.72) 34%,rgba(255,255,255,.12) 70%,rgba(255,255,255,.04) 100%),
    url("/assets/clientes-background.png") center center/cover no-repeat;
  color:var(--ink);
  overflow:hidden;
  isolation:isolate;
}
.clients-section:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 20%,transparent 78%,rgba(255,255,255,.22));
  pointer-events:none;
  z-index:-1;
}
.clients-inner{
  width:min(1420px,calc(100% - 12vw));
  margin:0 auto;
  position:relative;
  z-index:2;
}
.clients-head{
  max-width:780px;
  margin:0 0 46px;
  padding:25px 30px 28px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:26px;
  background:rgba(255,255,255,.68);
  box-shadow:0 18px 55px rgba(27,34,52,.09);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.clients-head small{
  display:block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.28em;
  color:#343b4a;
}
.clients-head h2{
  font:800 clamp(46px,5.8vw,80px)/.94 "Manrope",sans-serif;
  letter-spacing:-.07em;
  margin:17px 0 0;
  color:#0a1038;
}
.clients-head h2 span{
  background:linear-gradient(90deg,#086cff,#1647c7);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.clients-marquee-card{
  position:relative;
  background:rgba(247,248,250,.96);
  border:1px solid rgba(217,221,228,.92);
  border-radius:32px;
  box-shadow:0 28px 90px rgba(36,43,58,.13),0 8px 25px rgba(36,43,58,.07);
  padding:34px 0;
  overflow:hidden;
}
.clients-marquee-card:before,.clients-marquee-card:after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:12%;
  pointer-events:none;
}
.clients-marquee-card:before{left:0;background:linear-gradient(90deg,#f7f8fa,transparent)}
.clients-marquee-card:after{right:0;background:linear-gradient(270deg,#f7f8fa,transparent)}
.clients-marquee{width:100%;overflow:hidden}
.clients-track{
  display:flex;
  width:max-content;
  animation:clientsMarquee 34s linear infinite;
  will-change:transform;
}
.clients-track:hover{animation-play-state:paused}
.client-set{
  display:flex;
  align-items:center;
  gap:22px;
  padding:0 11px;
}
.client-logo{
  width:250px;
  height:132px;
  flex:0 0 250px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(225,228,233,.9);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 35px rgba(38,45,58,.09),0 2px 8px rgba(38,45,58,.05);
  overflow:hidden;
  padding:12px;
}
.client-logo img{
  display:block;
  width:auto;
  height:auto;
  max-width:208px;
  max-height:92px;
  object-fit:contain;
}
.client-logo--wide img{max-width:220px;max-height:84px}
.client-logo--tall img{max-width:190px;max-height:102px}
.clients-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:22px;
  padding:0 8px;
  color:#343b4a;
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.clients-note span:last-child{color:#086cff}
@keyframes clientsMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media(max-width:900px){
  .clients-section{
    min-height:620px;
    padding:90px 0 105px;
    background-position:62% center;
  }
  .clients-inner{width:90%}
  .clients-head{margin-bottom:34px;padding:22px 22px 25px;border-radius:22px}
  .clients-marquee-card{border-radius:26px;padding:26px 0}
  .client-set{gap:14px;padding:0 7px}
  .client-logo{width:205px;height:112px;flex-basis:205px;border-radius:18px}
  .client-logo img{max-width:172px;max-height:76px}
  .clients-note{display:block;line-height:1.7}
  .clients-note span{display:block}
  .clients-note span+span{margin-top:5px}
}
@media(max-width:600px){
  .clients-section{
    min-height:560px;
    padding:78px 0 88px;
    background:
      linear-gradient(90deg,rgba(255,255,255,.86),rgba(255,255,255,.32)),
      url("/assets/clientes-background.png") 64% center/cover no-repeat;
  }
  .clients-inner{width:92%}
  .clients-head h2{font-size:clamp(42px,12vw,62px)}
  .clients-head{padding:20px 18px 22px}
  .clients-head small{letter-spacing:.2em}
  .client-logo{width:180px;height:102px;flex-basis:180px}
  .client-logo img{max-width:150px;max-height:68px}
  .clients-track{animation-duration:29s}
}
@media(prefers-reduced-motion:reduce){
  .clients-track{animation:none;transform:none}
  .clients-marquee{overflow:auto}
  .clients-marquee-card:before,.clients-marquee-card:after{display:none}
}