/* ============================================================
   PORTFÓLIO — folha complementar
   Usa os mesmos tokens de style.css. Carregar sempre depois dela.
   ============================================================ */

/* ---------- cabeçalho ---------- */
.pf-topo{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding:calc(var(--nav-h) + clamp(52px,7vw,96px)) 0 clamp(36px,4.5vw,56px)
}
.pf-topo::after{
  content:"";position:absolute;right:-8%;top:8%;width:min(48vw,540px);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(202,25,22,.15),transparent 62%)
}
.pf-topo .wrap{position:relative;z-index:1}
.pf-topo h1{
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;
  font-size:clamp(2.1rem,5.6vw,4.3rem);line-height:.94;margin:0 0 20px;max-width:17ch
}
.pf-topo h1 em{font-style:normal;color:var(--blood)}
.pf-topo .lead{max-width:58ch;margin:0}

/* ---------- barra de filtros ---------- */
.pf-barra{
  position:sticky;top:var(--nav-h);z-index:20;background:rgba(8,9,10,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)
}
.pf-barra__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px 0}
.pf-filtros{display:flex;flex-wrap:wrap;gap:8px}
.pf-filtros button{
  --cut:8px;background:rgba(247,247,255,.05);border:1px solid var(--line);color:var(--muted);
  font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 16px;cursor:pointer;transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))
}
.pf-filtros button:hover{color:var(--paper);border-color:rgba(247,247,255,.34)}
.pf-filtros button[aria-pressed="true"]{background:var(--blood);border-color:var(--blood);color:#fff}
.pf-filtros button:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.pf-conta{
  margin:0 0 0 auto;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2)
}
.pf-conta b{color:var(--blood-txt)}

/* ---------- mural em alvenaria ---------- */
.pf-mural{columns:4;column-gap:clamp(12px,1.4vw,20px);padding:clamp(30px,4vw,52px) 0 clamp(60px,8vw,104px)}
.pf-item{break-inside:avoid;margin:0 0 clamp(12px,1.4vw,20px)}
.pf-item[hidden]{display:none}
/* escada: a segunda de cada trio desce, para a grade não ficar burocrática */
.pf-mural .pf-item:nth-child(3n+2){margin-top:clamp(12px,1.8vw,26px)}

.pf-abre{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative
}
.pf-moldura{
  --cut:15px;position:relative;display:block;overflow:hidden;background:#0b0e0f;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  transition:transform .45s var(--ease)
}
.pf-moldura img{
  width:100%;height:auto;display:block;
  filter:grayscale(.7) brightness(.84) contrast(1.04);
  transition:filter .45s var(--ease),transform .7s var(--ease)
}
.pf-moldura::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(180deg,rgba(202,25,22,0) 48%,rgba(202,25,22,.42))
}
.pf-abre:hover .pf-moldura,.pf-abre:focus-visible .pf-moldura{transform:translateY(-6px)}
.pf-abre:hover img,.pf-abre:focus-visible img{filter:none;transform:scale(1.03)}
.pf-abre:hover .pf-moldura::after,.pf-abre:focus-visible .pf-moldura::after{opacity:1}
.pf-abre:focus-visible{outline:2px solid var(--blood);outline-offset:6px}

/* selo de tipo, canto superior esquerdo */
.pf-selo{
  position:absolute;left:10px;top:10px;z-index:2;
  font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);background:rgba(8,9,10,.78);border:1px solid rgba(247,247,255,.16);
  padding:6px 10px;backdrop-filter:blur(4px)
}
.pf-item--video .pf-selo{background:var(--blood);border-color:var(--blood)}

/* botão de play sobre a capa do vídeo */
.pf-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:62px;height:62px;border-radius:50%;background:rgba(202,25,22,.92);
  display:grid;place-items:center;pointer-events:none;transition:transform .4s var(--ease)
}
.pf-play::before{
  content:"";width:0;height:0;margin-left:4px;
  border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent
}
.pf-abre:hover .pf-play{transform:translate(-50%,-50%) scale(1.12)}

.pf-legenda{
  display:flex;align-items:center;gap:9px;margin:11px 2px 0;text-align:left;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)
}
.pf-legenda b{color:var(--blood-txt);font-weight:700;flex:none}

.pf-vazio{
  display:none;padding:70px 0;text-align:center;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)
}
.pf-vazio.is-on{display:block}

/* ---------- ampliação ---------- */
.pf-lupa{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:22px;
  background:rgba(4,5,6,.95);backdrop-filter:blur(6px)
}
.pf-lupa.is-open{display:grid}
.pf-lupa__palco{max-width:min(94vw,980px);max-height:88vh;display:grid;place-items:center}
.pf-lupa__palco.is-longa{
  display:block;overflow-y:auto;overscroll-behavior:contain;
  width:min(94vw,900px);max-height:84vh;scrollbar-width:thin
}
.pf-lupa__palco.is-longa img{max-height:none;width:100%;clip-path:none}
.pf-lupa__palco img,.pf-lupa__palco video{
  max-width:100%;max-height:84vh;width:auto;height:auto;display:block;background:#000;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))
}
.pf-lupa__x,.pf-lupa__nav{
  position:absolute;background:none;border:0;color:var(--paper);cursor:pointer;padding:16px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase
}
.pf-lupa__x{top:12px;right:14px}
.pf-lupa__nav{top:50%;transform:translateY(-50%);font-size:30px;padding:20px}
.pf-lupa__nav.ant{left:4px}
.pf-lupa__nav.prox{right:4px}
.pf-lupa__x:hover,.pf-lupa__nav:hover{color:var(--blood-txt)}
.pf-lupa__pe{
  position:absolute;left:0;right:0;bottom:16px;text-align:center;padding:0 60px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)
}
.pf-lupa__pe b{color:var(--blood-txt)}

/* ---------- rodapé da página ---------- */
.pf-fim{border-top:1px solid var(--line);padding:clamp(46px,6vw,78px) 0}
.pf-fim p{max-width:54ch}

@media(max-width:1080px){.pf-mural{columns:3}}
@media(max-width:760px){
  .pf-mural{columns:2}
  .pf-barra__in{flex-direction:column;align-items:flex-start;gap:12px}
  .pf-conta{margin-left:0;order:2}
  .pf-filtros{width:100%;overflow-x:auto;flex-wrap:nowrap;padding:2px 2px 4px;margin:0 -2px;scrollbar-width:none}
  .pf-filtros::-webkit-scrollbar{display:none}
  .pf-filtros button{flex:none}
}
@media(max-width:430px){
  .pf-mural{columns:1}
  .pf-mural .pf-item:nth-child(3n+2){margin-top:0}
  .pf-lupa__nav{font-size:24px;padding:12px}
}
@media(prefers-reduced-motion:reduce){
  .pf-moldura,.pf-moldura img,.pf-play{transition:none}
}