/* Portfólio da home: filtros por material, grade de fotos e visualizador */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.filtros button{
  flex:1 1 auto;min-height:52px;padding:8px 20px;border:1px solid transparent;border-radius:var(--r);
  background:#fff;color:var(--navy);cursor:pointer;
  font-family:var(--cond);font-weight:500;font-size:18px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.filtros button:hover{border-color:var(--navy)}
.filtros button[aria-pressed="true"]{background:var(--navy);color:#fff}
.filtros button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

.gal-box{container-type:inline-size;margin-top:18px}
.gal{
  --cols:3;--gap:14px;margin-top:0;display:grid;gap:var(--gap);
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-auto-rows:calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * .72);
  grid-auto-flow:dense;
}
.obra{
  position:relative;display:block;width:100%;height:100%;padding:0;border:0;overflow:hidden;
  border-radius:var(--r);background:#0d0d0d;cursor:zoom-in;text-align:left;color:#fff;
}
.obra.alta{grid-row:span 2}
.obra.larga{grid-column:span 2}
.obra img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.obra:hover img{transform:scale(1.04)}
.obra span{
  position:absolute;inset:auto 0 0;padding:30px 14px 11px;font-family:var(--body);font-weight:500;
  font-size:14.5px;line-height:1.3;background:linear-gradient(transparent,rgba(5,12,26,.78));
}
.obra:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

.gal-vazio{
  margin-top:18px;padding:40px 24px;background:#fff;border-radius:var(--r);text-align:center;color:var(--text);
}
.gal-vazio a{color:var(--navy);font-weight:600}

@media(max-width:820px){
  .filtros{gap:8px}
  .filtros button{flex:1 1 22%;min-height:46px;padding:6px 4px;font-size:14px;letter-spacing:.1em}
  .filtros button:last-child{flex-basis:100%}
  .gal{--cols:2;--gap:10px}
}
@media(max-width:480px){
  .obra span{padding:24px 9px 8px;font-size:13px}
}

/* visualizador */
.lb{
  width:min(1120px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;overflow:visible;
  background:transparent;color:#fff;
}
.lb::backdrop{background:rgba(5,12,26,.93)}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb img{max-width:100%;max-height:calc(100dvh - 110px);width:auto;height:auto;border-radius:var(--r)}
.lb figcaption{font-family:var(--body);font-size:16px;text-align:center}
.lb button{
  position:fixed;width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;
}
.lb button:hover{background:rgba(255,255,255,.26)}
.lb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb .lb-x{top:14px;right:14px}
.lb .lb-ant{left:14px;top:50%;margin-top:-24px}
.lb .lb-prox{right:14px;top:50%;margin-top:-24px}
@media(max-width:720px){
  .lb .lb-ant,.lb .lb-prox{top:auto;bottom:12px;margin-top:0}
  .lb img{max-height:calc(100dvh - 170px)}
}