.logos{padding:clamp(60px,10vh,110px) 0;position:relative;overflow:hidden;background:radial-gradient(120% 140% at 50% 120%,rgba(30,30,30,.55) 0%,rgba(7,7,7,0) 60%)}
.logos .kick{padding:0 var(--pad);margin-bottom:26px;display:block}
.belt{display:flex;width:max-content;animation:belt 38s linear infinite}
.belt .sq{width:clamp(170px,22vw,330px);aspect-ratio:1.8/1;margin-right:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .4s}
.belt .sq:hover{background:rgba(255,255,255,.1)}
.belt .sq img,.belt .sq b{opacity:.28;filter:grayscale(1);transition:opacity .4s,filter .4s,color .4s}
.belt .sq img{max-width:55%;max-height:46%;object-fit:contain;filter:grayscale(1) brightness(1.6)}
.belt .sq b{color:#9a9a9a}
.belt .sq:hover img,.belt .sq:hover b{opacity:1;color:#fff}
.belt .sq:hover img{filter:grayscale(0) brightness(1)}
.belt .sq b{font-size:clamp(18px,1.9vw,28px);font-weight:800;font-variation-settings:'wdth' 110;letter-spacing:.02em;text-transform:uppercase}
@keyframes belt{to{transform:translateX(-50%)}}
/* --- antes injetado pelo app.js --- */
.logos.arts{padding:clamp(70px,11vh,130px) 0;background:none}
.arts .kick{display:none}
.aband{overflow:hidden;background:var(--accent);color:#fff;padding:clamp(10px,1.4vw,16px) 0;white-space:nowrap}
.aband.b2{background:#fff;color:var(--accent)}
.aband .atrack{animation-duration:25.3s}
.aband.b2 .atrack{animation-direction:reverse}
.aband .ai{display:inline-flex;align-items:center;gap:clamp(14px,2vw,30px);padding-right:clamp(14px,2vw,30px);font-family:var(--disp);font-size:clamp(26px,3.4vw,56px);font-weight:800;font-variation-settings:'wdth' 72;text-transform:uppercase;letter-spacing:0;line-height:1}
.aband .ai svg{width:.9em;height:.9em;flex:0 0 auto}
.atrack{display:flex;width:max-content;animation:amq linear infinite;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
@keyframes amq{to{transform:translateX(-50%)}}
.arow{overflow:hidden;height:clamp(200px,24vw,400px)}
.arow .atrack{height:100%}
.arow.r2 .atrack{animation-direction:reverse}
.arow:hover .atrack,.arts.paused .atrack{animation-play-state:paused}
.aph{position:relative;height:100%;aspect-ratio:1/1;margin:0;flex:0 0 auto;overflow:hidden;background:#141414;cursor:pointer}
.aph img{height:100%;width:100%;object-fit:cover;display:block;max-width:none;filter:saturate(.92);transition:filter .5s,transform .8s cubic-bezier(.16,1,.3,1)}
.aph:hover img{filter:saturate(1.08);transform:scale(1.04)}
.aph figcaption{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:99px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.04em;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1);pointer-events:none}
.aph:hover figcaption{opacity:1;transform:none}
@media (max-width:700px){.arow{height:44vw}.aband .ai{font-size:26px}}
/* --- toque (celular) e teclado: nome visível e fileira pausada --- */
.aph.show img{filter:saturate(1.08);transform:scale(1.04)}
.aph.show figcaption,.aph:focus-visible figcaption{opacity:1;transform:none}
.aph:focus{outline:none}
.aph:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.arow:focus-within .atrack,.arow:has(.aph.show) .atrack{animation-play-state:paused}
/* Quem pediu menos movimento no sistema: letreiros e fileiras ficam parados. */