/* Carrossel "Sites que já entregamos" da home (#sites). Usa os tokens da home (--ink, --line, --bg2,
   --brand...) e as classes .janela/.ib de portfolio/estilo.css só onde a home não as tem: por isso
   repete aqui o mínimo da janela de navegador. Sem JS, o trilho rola com o dedo (scroll-snap). */
.cx{overflow:clip}
.cx__lead{color:var(--mut);margin:-16px 0 28px;max-width:56ch}
.cx__palco{position:relative;margin-top:8px}
.cx__trilho{display:flex;gap:20px;list-style:none;margin:0;padding:12px max(20px,calc((100vw - 1120px)/2)) 24px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cx__trilho::-webkit-scrollbar{display:none}
.cx__trilho.anda{scroll-snap-type:none}
.cx__item{flex:none;width:min(78vw,380px);scroll-snap-align:center;perspective:900px}
.cx__item a{display:block;text-decoration:none;color:inherit;transform:rotateX(calc(var(--ry,0)*1deg)) rotateY(calc(var(--rx,0)*1deg));transition:transform .2s ease-out}
.cx .janela{display:block;border-radius:14px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);box-shadow:0 30px 50px -28px rgba(0,0,0,.6);transition:box-shadow .25s,border-color .25s}
.cx__item a:hover .janela,.cx__item a:focus-visible .janela{border-color:var(--brand);box-shadow:0 36px 60px -26px rgba(0,0,0,.7)}
.cx .janela__barra{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-bottom:1px solid var(--line)}
.cx .janela__barra i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block;flex:none}
.cx .janela__barra b{margin-left:8px;font:400 11px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx .janela img{display:block;width:100%;height:auto;aspect-ratio:720/450;object-fit:cover}
.cx__nome{display:block;margin-top:12px;font:500 15px/1.3 Sora,system-ui,sans-serif;color:var(--ink)}
.cx__ctl{display:flex;align-items:center;gap:10px;margin-top:4px}
.cx__todos{margin-left:auto}