/* Página /portfolio — só os trabalhos. Reaproveita os tokens de styles.css e os cartões (.trab) de site.css. */
.pf{--dock-h:0px}
.pf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pf-topo .nav{gap:22px}
@media (max-width:820px){.pf-topo .nav a:not(.cta){display:none}.pf-topo .nav a.cta{display:inline-flex;min-height:44px}}
@media (max-width:360px){.pf-topo .wrap{gap:12px}.pf-topo .nav a.cta{padding:0 12px}}

.pf-hero{padding-block:clamp(48px,8vw,104px) clamp(28px,4vw,48px);position:relative;overflow:hidden}
.pf-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 90% at 85% 0%,rgba(255,205,7,.09),transparent 60%);pointer-events:none}
.pf-k{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;color:var(--ouro);margin-bottom:18px}
.pf-k i{width:9px;height:9px;background:var(--ouro);transform:rotate(45deg);flex:0 0 auto}
.pf-h1{font:900 clamp(44px,7.4vw,104px)/.96 var(--disp);font-stretch:118%;letter-spacing:-.03em;max-width:14ch}
.pf-h2{font:800 clamp(34px,5vw,64px)/1 var(--disp);font-stretch:114%;letter-spacing:-.025em;max-width:18ch}
.pf-h1 .it,.pf-h2 .it{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;color:var(--ouro);letter-spacing:-.01em}
.pf-lead{color:var(--suave);font-size:clamp(17px,1.5vw,20px);max-width:60ch;margin-top:20px}
.pf-lead b{color:var(--texto);font-weight:600}

.pf-filtros{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pf-filtros button{font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linha-2);background:transparent;color:var(--suave);cursor:pointer}
.pf-filtros button b{font-weight:500;color:var(--suave);margin-left:6px}
.pf-filtros button:hover{border-color:var(--ouro);color:var(--texto)}
.pf-filtros button[aria-pressed="true"]{background:var(--ouro);border-color:var(--ouro);color:#070707}
.pf-filtros button[aria-pressed="true"] b{color:rgba(7,7,7,.6)}
.pf-filtros button:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

.pf-lista{padding-block:clamp(20px,3vw,40px) clamp(64px,9vw,120px)}
.pf-lista .trabs{gap:clamp(48px,7vw,88px)}
.pf-lista .trab{scroll-margin-top:96px}
.pf-lista .trab[hidden]{display:none}
.pf-lista .trab__info h3{font:800 clamp(26px,2.8vw,38px)/1.05 var(--disp);font-stretch:112%;letter-spacing:-.02em}
.pf-lista .trab__meta{color:var(--suave)}.pf-lista .trab__meta b{color:var(--ouro);font-weight:500}
.pf-lista .trab__play{opacity:.95;transform:none}
/* trabalho só vertical: a tela não estica na coluna larga */
.trab--v .trab__telas{max-width:340px}
@media (min-width:1024px){.trab--v{grid-template-columns:340px 1fr!important;gap:48px;align-items:center!important}}
.pf-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--suave);background:none;border:0;padding:8px 0;cursor:pointer;min-height:44px}
.pf-link:hover,.pf-link.ok{color:var(--ouro)}
.pf-vazio{color:var(--suave);padding:40px 0}

.pf-cta{border-top:1px solid var(--linha);padding-block:clamp(56px,8vw,112px);background:radial-gradient(60% 120% at 0% 100%,rgba(255,205,7,.08),transparent 60%)}
.pf-cta__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:520px){.pf-cta__btns .cta{flex:1 1 100%}}
.pf .rodape{padding-block:32px 96px}

/* revisão: rolagem travada com o player aberto, âncoras sob o cabeçalho fixo, alvos de toque */
html{scrollbar-gutter:stable}
html:has(#player[open]){overflow:hidden}
:root{scroll-padding-top:84px}
.pf .marca{min-height:44px}
.pf .rodape__ig{display:inline-flex;align-items:center;min-height:44px}
/* rótulo do cartão: cada bloco não quebra por dentro e o separador nunca fica solto no início da linha */
.pf-lista .trab__meta{--sep:calc(3ch + .3em);display:flex;flex-wrap:wrap;margin-left:calc(-1*var(--sep));clip-path:inset(0 0 0 var(--sep))}
.pf-lista .trab__meta>*{position:relative;white-space:nowrap;padding-left:var(--sep)}
.pf-lista .trab__meta>*::before{content:'·';position:absolute;left:0;width:var(--sep);text-align:center;color:var(--suave);font-weight:400;letter-spacing:0}
/* grade: texto embaixo do vídeo entre 1024 e 1240 px (o botão flutuante cobria a coluna estreita); coluna de texto mais larga acima disso */
@media (min-width:1024px) and (max-width:1239.98px){.pf-lista .trab:not(.trab--v){grid-template-columns:1fr;align-items:start}.pf-lista .trab--v .trab__info{padding-right:40px}}
@media (min-width:1240px){.pf-lista .trab:not(.trab--v){grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
/* celular: disco de play menor nos cartões duplos (cobria a prévia) */
@media (max-width:520px){
  .pf-lista .trab--duo .trab__play{width:44px;height:44px;margin:-22px 0 0 -22px}
  .pf-lista .trab--duo .trab__play svg{width:16px;height:16px;margin-left:2px}
  .pf-lista .trab--duo .trab__tela--v .trab__play{width:32px;height:32px;margin:-16px 0 0 -16px}
  .pf-lista .trab--duo .trab__tela--v .trab__play svg{width:12px;height:12px}
}