/* Vira Click – Layout (plugin) */

/* ---------- Menu do topo: nada quebra em duas linhas ---------- */
.nav>li{flex-shrink:0}
.nav>li>a,.acoes .bt,.conta-bt,.conta-txt{white-space:nowrap}
.acoes{flex-shrink:0}
.marca{flex-shrink:0}

/* Telas médias (notebook): menu mais compacto */
@media (min-width:1101px) and (max-width:1360px){
  .topo>.wrap{gap:18px}
  .nav{gap:0}
  .nav>li>a{padding:10px 8px;font-size:15px}
  .acoes{gap:8px}
}
/* Notebook pequeno: telefone e "Ver painel" viram só ícone */
@media (min-width:1181px) and (max-width:1280px){
  .acoes .bt-pri.hide-m{font-size:0;gap:0;width:46px;padding:0}
  .acoes .bt-pri.hide-m .ic{width:22px!important;height:22px!important}
  .conta-txt,.acoes .bt-ent span{display:none}
  .conta-bt{padding:0 8px 0 5px;gap:4px}
  .acoes .bt-ent{padding:0 13px!important}
}
/* Abaixo de 1180px o menu vai para o botão ☰ (antes quebrava em duas linhas) */
@media (max-width:1180px){
  .navw{display:none!important}
  .acoes .menu-bt.show-m{display:grid!important}
}

/* Submenu "Quem somos": alinhado ao item e com largura confortável */
.nav>li>.sub{left:50%;transform:translate(-50%,6px);min-width:220px}
.nav>li:hover>.sub,.nav>li:focus-within>.sub,.nav>li.aberto>.sub{transform:translate(-50%,0)}
.sub a{white-space:nowrap}

/* ---------- Faixas de logomarcas (passam sem parar) ---------- */
.vcl-faixa{--vcl-gap:56px;overflow:hidden;padding:6px 0 12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.vcl-trilho{display:flex;width:max-content;animation:vcl-rola var(--vcl-dur,40s) linear infinite;will-change:transform}
.vcl-rev .vcl-trilho{animation-direction:reverse}
.vcl-faixa:hover .vcl-trilho,.vcl-faixa:focus-within .vcl-trilho{animation-play-state:paused}
.vcl-grupo{display:flex;align-items:center;gap:var(--vcl-gap);padding-right:var(--vcl-gap);flex-shrink:0}
@keyframes vcl-rola{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.vcl-item{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;text-decoration:none}
.vcl-logo-img{display:block;width:auto;height:auto;object-fit:contain;transition:filter .2s,opacity .2s,transform .2s}
.vcl-logo-nome{font-family:var(--disp,Sora),system-ui,sans-serif;font-weight:700;font-size:17px;color:#8a9aa0;white-space:nowrap}
.vcl-cinza .vcl-logo-img{filter:grayscale(1);opacity:.7}
.vcl-cinza .vcl-item:hover .vcl-logo-img,.vcl-cinza .vcl-item:focus-visible .vcl-logo-img{filter:none;opacity:1}

/* Plataformas */
.vcl-plat-in{display:flex;align-items:center;gap:28px;padding-top:20px;padding-bottom:20px}
.vcl-plat-tit{font-size:14px;font-weight:700;color:#5d6d74;white-space:nowrap;flex-shrink:0}
.vcl-f-plat{flex:1 1 auto;min-width:0;--vcl-gap:48px}
.vcl-f-plat .vcl-logo-img{height:var(--vcl-h,34px);max-width:170px}

/* Clientes */
.vcl-cli-faixas{display:flex;flex-direction:column;gap:14px}
.vcl-f-cli{--vcl-gap:18px}
.vcl-f-cli .vcl-item{width:200px;height:100px}
.vcl-f-cli .vcl-logo-img{max-height:60px;max-width:100%}
.vcl-caixa .vcl-item{background:#fff;border:1px solid #e3e9ec;border-radius:18px;padding:16px 22px;box-shadow:0 12px 26px -22px rgba(11,42,49,.5);transition:border-color .2s,transform .2s,box-shadow .2s}
.vcl-caixa .vcl-item:hover{border-color:#bfd4d8;transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(11,42,49,.55)}

/* Botão de logo (abre o pop-up, não sai da página) */
button.vcl-item{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.vcl-caixa .vcl-item[aria-expanded=true]{border-color:var(--orange,#f7941d);box-shadow:0 0 0 3px rgba(247,148,29,.18)}
.vcl-cinza .vcl-item[aria-expanded=true] .vcl-logo-img{filter:none;opacity:1}
.vcl-faixa.vcl-parado .vcl-trilho{animation-play-state:paused}

/* Página Clientes: grade com as mesmas caixas */
.vcl-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.vcl-grade .vcl-item{width:auto;height:112px}
.vcl-grade .vcl-logo-img{max-height:64px;max-width:100%}

/* Pop-up da logo grande */
.vcl-pop{position:fixed;left:0;top:0;z-index:120;width:min(320px,calc(100vw - 20px));background:#fff;border:1px solid #e3e9ec;border-radius:20px;box-shadow:0 30px 60px -24px rgba(11,42,49,.45);padding:22px 22px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility 0s linear .15s;pointer-events:none}
.vcl-pop.on{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto}
.vcl-pop::before{content:"";position:absolute;top:-9px;left:calc(var(--seta,50%) - 9px);width:16px;height:16px;background:#fff;border-left:1px solid #e3e9ec;border-top:1px solid #e3e9ec;transform:rotate(45deg)}
.vcl-pop.vcl-pop-cima{transform:translateY(-6px)}
.vcl-pop.vcl-pop-cima.on{transform:none}
.vcl-pop.vcl-pop-cima::before{top:auto;bottom:-9px;transform:rotate(225deg)}
.vcl-pop-img{width:100%;height:170px;display:grid;place-items:center}
.vcl-pop-img img{max-width:100%;max-height:170px;width:auto;height:auto;object-fit:contain;display:block}
.vcl-pop-nome{font-family:var(--disp,Sora),system-ui,sans-serif;font-size:16px;color:var(--ink,#0b2a31);text-align:center;line-height:1.3}
.vcl-pop-x{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:50%;background:#f4f8f8;color:#0b2a31;font-size:22px;line-height:1;display:none;cursor:pointer}
.vcl-pop-fixo .vcl-pop-x{display:grid;place-items:center}

/* ---------- Animação da ilustração do topo ---------- */
.vcl-mo .vcl-p,.vcl-mo .vcl-g,.vcl-mo .vcl-v,.vcl-mo .vcl-au,.vcl-mo .vcl-chip,.vcl-mo-img img{
  animation:vcl-entra .9s cubic-bezier(.2,.75,.25,1) var(--d,0s) both,vcl-flutua var(--f,6s) ease-in-out calc(var(--d,0s) + .9s) infinite}
.vcl-mo .vcl-p{--d:.05s;--f:7s;--y:-8px}
.vcl-mo .vcl-g{--d:.3s;--f:6s;--x:26px;--y:-12px}
.vcl-mo .vcl-v{--d:.5s;--f:6.6s;--x:26px;--y:-9px}
.vcl-mo .vcl-au{--d:.7s;--f:5.6s;--x:-26px;--y:-11px}
.vcl-mo .vcl-chip{--d:1s;--f:5s;--y:-6px}
.vcl-mo-img img{--f:8s;--y:-8px}
@keyframes vcl-entra{from{opacity:0;transform:translate3d(var(--x,0),28px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes vcl-flutua{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,var(--y,-10px),0)}}
.vcl-mo .vcl-play{animation:vcl-pulso 2.2s ease-out 1.6s infinite}
@keyframes vcl-pulso{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}100%{box-shadow:0 0 0 18px rgba(255,255,255,0)}}
.vcl-mo .vcl-onda span{transform-origin:center;animation:vcl-onda 1s ease-in-out infinite alternate}
.vcl-mo .vcl-onda span:nth-child(2n){animation-duration:.8s}
.vcl-mo .vcl-onda span:nth-child(3n){animation-duration:1.25s;animation-delay:.2s}
.vcl-mo .vcl-onda span:nth-child(4n){animation-duration:.9s;animation-delay:.35s}
@keyframes vcl-onda{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.vcl-mo .vcl-saiba{animation:vcl-toque 4s ease-in-out 2.2s infinite}
@keyframes vcl-toque{0%,12%,100%{transform:none}6%{transform:scale(.95)}}

/* ---------- Celular e tablet ---------- */
@media (max-width:760px){
  .vcl-plat-in{flex-direction:column;align-items:stretch;gap:12px;padding-left:0;padding-right:0}
  .vcl-plat-tit{text-align:center;padding:0 16px}
  .vcl-f-plat{--vcl-gap:36px}
  .vcl-f-plat .vcl-logo-img{height:calc(var(--vcl-h,34px)*.82)}
  .vcl-f-cli{--vcl-gap:12px}
  .vcl-f-cli .vcl-item{width:150px;height:78px}
  .vcl-f-cli .vcl-logo-img{max-height:46px}
  .vcl-caixa .vcl-item{padding:12px 16px;border-radius:14px}
  .vcl-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .vcl-grade .vcl-item{width:auto;height:90px}
  .vcl-grade .vcl-logo-img{max-height:50px}
  .vcl-pop-img{height:140px}.vcl-pop-img img{max-height:140px}
}
@media (max-width:640px){
  /* Botões lado a lado viram uma coluna, todos com a mesma largura */
  .vcl-bts,:where(div,p):has(> .bt + .bt){flex-direction:column!important;align-items:stretch!important}
  .vcl-bts>.bt,:where(div,p):has(> .bt + .bt)>.bt{width:100%}
  .bt{max-width:100%}
  /* Números do topo numa linha só */
  .vcl-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px!important}
  .vcl-stats>div>div:first-child{font-size:22px!important}
  .vcl-stats>div>div:last-child{font-size:13px!important;line-height:1.35}
}
@media (max-width:400px){
  .bt{padding:0 16px;font-size:15px}
  .vcl-stats>div>div:first-child{font-size:20px!important}
}

/* Quem prefere menos movimento: tudo parado, logos em grade */
@media (prefers-reduced-motion:reduce){
  .vcl-trilho{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .vcl-grupo{flex-wrap:wrap;justify-content:center;padding:0;row-gap:16px}
  .vcl-grupo[aria-hidden]{display:none}
  .vcl-faixa{-webkit-mask-image:none;mask-image:none}
  .vcl-mo *,.vcl-mo-img img{animation:none!important}
}