/* Projetos: filtro enxuto + vitrine (lista à esquerda, prévia à direita) */
.pj{text-align:center}.pj p{margin-inline:auto}
.flt{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin:20px auto 0}
.flt+.flt{margin-top:10px}
.flt::before{content:attr(data-label);margin-right:6px;font:500 .68rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mu);min-width:44px;text-align:right}
.flt button{background:var(--sf);border:1px solid var(--ln);color:var(--mu);border-radius:999px;padding:3px 13px;font:500 .76rem var(--mono);cursor:pointer;transition:border-color .15s,color .15s}
.flt button:hover{color:var(--tx);border-color:var(--ac)}.flt button[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:#0c0e1a}
.show{display:grid;grid-template-columns:minmax(250px,340px) minmax(0,1fr);gap:clamp(20px,3.5vw,52px);margin-top:30px;text-align:left;align-items:start}
.show p{margin-inline:0}
.side{display:grid;gap:10px;min-width:0}
.srch{width:100%;background:var(--sf);border:1px solid var(--ln);border-radius:12px;color:var(--tx);font:400 .9rem var(--sans);padding:9px 14px;outline:0;transition:border-color .15s}
.srch:focus{border-color:var(--ac)}
.cnt{margin:0;max-width:none;font:500 .72rem var(--mono);color:var(--mu)}
.plist{position:relative;display:grid;gap:4px;counter-reset:n;max-height:clamp(260px,44vh,380px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--ln) transparent}
.pt{position:relative;display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:12px;padding:10px 14px;color:var(--mu);font:inherit;cursor:pointer;transition:background .2s,border-color .2s}
.pt:not(.soon):not([hidden]){counter-increment:n}
.pt .n{grid-row:span 2;font:500 .8rem var(--mono)}.pt .n::before{content:counter(n,decimal-leading-zero)}
.pt.soon .n::before{content:"+"}
.pt b{font-weight:600;font-size:1rem;color:var(--tx);line-height:1.3}
.pt small{font:500 .68rem var(--mono);text-transform:uppercase;letter-spacing:.06em}
.pt:hover{background:var(--sf)}
.pt[aria-selected=true]{background:var(--sf);border-color:var(--ln)}
.pt[aria-selected=true] .n{color:var(--ac)}
.pt[aria-selected=true]::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--ac)}
.pt.soon{border:1px dashed var(--ln);opacity:.7}
.stage{position:relative;min-width:0;container-type:inline-size}
.stage::before{content:"";position:absolute;inset:6% 4% auto;height:55%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ac) 30%,transparent),transparent);filter:blur(46px);pointer-events:none}
.proj{position:relative;animation:swap .35s ease-out}
@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.proj{animation:none}}
.shot{max-width:540px;margin:0;border:1px solid var(--ln);border-radius:16px;overflow:hidden;background:var(--sf);box-shadow:0 30px 70px -34px color-mix(in srgb,var(--ac) 55%,transparent)}
.bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--sf2);border-bottom:1px solid var(--ln)}
.bar i{width:10px;height:10px;border-radius:50%;background:#ff6b6b;opacity:.85}.bar i:nth-child(2){background:#ffd166}.bar i:nth-child(3){background:var(--ok)}
.bar span{flex:1;min-width:0;margin-left:10px;padding:2px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 .74rem var(--mono);color:var(--mu);background:var(--sf);border:1px solid var(--ln);border-radius:7px}
.shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--sf)}
.info{padding:24px 2px 0}
.info .tag{display:block;margin-bottom:8px;font:500 .72rem var(--mono);color:var(--ok);text-transform:uppercase;letter-spacing:.06em}
.info h3{margin:0 0 10px;font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:600;letter-spacing:-.02em;color:var(--tx)}
.info p{max-width:62ch}
.info .chips{margin-top:14px}.info .chips li{font-size:.8rem;padding:2px 10px}
.lks{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.lks a{padding:9px 18px;border-radius:10px;border:1px solid var(--ln);background:var(--sf);text-decoration:none;font:500 .84rem var(--mono);transition:transform .15s,border-color .15s}
.lks a:hover{transform:translateY(-1px);border-color:var(--ac)}.lks a.demo{background:var(--ac);border-color:var(--ac);color:#0c0e1a}
@container (min-width:640px){
  .proj{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:30px;align-items:center}
  .shot{max-width:none}.info{padding-top:0}
}
.empty{margin:0;padding:60px 0;max-width:none;text-align:center;color:var(--mu)}
@media(max-width:900px){
  .show{grid-template-columns:1fr;margin-top:26px}
  .plist{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;max-height:none;padding:0 0 6px;scrollbar-width:none}.plist::-webkit-scrollbar{display:none}
  .pt{flex:none;width:auto;min-width:210px;border-color:var(--ln);background:var(--sf)}
  .pt[aria-selected=true]::before{display:none}.pt[aria-selected=true]{border-color:var(--ac)}
  
}
.shot{position:relative}
.badge{position:absolute;top:52px;right:12px;padding:3px 12px;border-radius:999px;background:var(--ac);color:#0c0e1a;font:500 .7rem var(--mono);text-transform:uppercase;letter-spacing:.06em}