/* Portfolio: grade editorial em colunas. Cada fotografia mantem a proporcao
   original, entao nenhum rosto e cortado para encaixar num card. */
/* Mesma assinatura da home, mas desenhada por tempo: aqui nao existe
   sequencia de rolagem para conduzir o traco. */
.pf-mark{display:block;width:min(62vw,400px);margin:0 0 22px}
.pf-mark img{display:block;width:100%;height:auto}
@supports ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .pf-mark{
    -webkit-mask-image:linear-gradient(97deg,#000 0 40%,rgba(0,0,0,.5) 41.5%,transparent 43%);
    mask-image:linear-gradient(97deg,#000 0 40%,rgba(0,0,0,.5) 41.5%,transparent 43%);
    -webkit-mask-size:300% 100%;mask-size:300% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    animation:pf-escreve 2.8s cubic-bezier(.3,.7,.2,1) .3s both
  }
}
@keyframes pf-escreve{
  from{-webkit-mask-position:100% 0;mask-position:100% 0}
  to{-webkit-mask-position:0 0;mask-position:0 0}
}

.pf-hero{padding:calc(var(--nav) + 64px) 0 40px}
.pf-hero .container{display:grid;gap:34px;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:end}
.pf-lead h1{font:700 clamp(38px,5.4vw,74px)/1.04 var(--serif);letter-spacing:-.01em;margin:14px 0 18px}
.pf-lead h1 em{font-style:normal;color:var(--rose)}
.pf-lead p{max-width:44ch;color:var(--muted)}
.pf-feature img{display:block;width:100%;height:auto;border-radius:18px}

/* Filtros no desenho do glow: Noivas em prata, a direita; Todos e Producoes em
   preto. O selecionado ganha anel e halo acesos, os outros ficam um tom abaixo.
   Sem barra embaixo, a pedido. */
.pf-filters{display:flex;flex-wrap:wrap;gap:12px;padding:8px 0 0;margin-bottom:38px}
.pf-filters button{appearance:none;cursor:pointer;padding:11px 20px;
  font:600 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}
html[data-theme] .pf-filters .glow-preto{background:linear-gradient(180deg,#241c1e,#0c090a);color:#f6e8eb;
  border-color:rgba(239,163,173,.32);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 -1px 0 rgba(0,0,0,.45) inset,0 8px 22px -14px rgba(239,163,173,.5)}
html[data-theme] .pf-filters .glow-preto::before{background:linear-gradient(105deg,transparent 32%,rgba(239,163,173,.24) 49%,transparent 66%)}
html[data-theme] .pf-filters .glow-prata{background:linear-gradient(180deg,#fbfbfc 0%,#dcdce1 46%,#bdbdc4 54%,#ececef 100%);
  color:#1c1618;border-color:rgba(255,255,255,.8);
  box-shadow:0 1px 0 #fff inset,0 -1px 0 rgba(0,0,0,.2) inset,0 8px 24px -12px rgba(255,255,255,.4)}
html[data-theme] .pf-filters .glow-prata::before{background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.85) 49%,transparent 66%)}
html[data-theme] .pf-filters .glow-btn[aria-pressed="false"]{opacity:.74}
html[data-theme] .pf-filters .glow-btn[aria-pressed="false"]:hover{opacity:1}
html[data-theme] .pf-filters .glow-preto[aria-pressed="true"]{
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 2px rgba(239,163,173,.9),0 0 28px 2px rgba(239,163,173,.42)}
html[data-theme] .pf-filters .glow-prata[aria-pressed="true"]{
  box-shadow:0 1px 0 #fff inset,0 0 0 2px rgba(255,255,255,.95),0 0 28px 2px rgba(255,255,255,.38)}
/* Grade uniforme em 4:5. O corte tira as laterais das fotos horizontais e o
   rodape das verticais, entao o enquadramento vertical e o que decide se o
   rosto sobrevive: 28% por padrao, mais alto nas fotos de corpo inteiro. */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pf-item{display:block;width:100%;padding:0;border:0;background:none;
  color:inherit;cursor:zoom-in;position:relative}
.pf-item img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;border-radius:14px}
.pf-item.crop-alto img{object-position:50% 15%}
.pf-item:hover img,.pf-item:focus-visible img{opacity:.88}
.pf-item img{transition:opacity .3s var(--ease)}
.pf-item:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:16px}
.pf-empty{padding:40px 0;color:var(--muted)}

.pf-cta{text-align:center;padding:76px 0 90px}
.pf-cta h2{font:700 clamp(28px,3.6vw,46px)/1.15 var(--serif);margin-bottom:14px}
.pf-cta p{color:var(--muted);max-width:52ch;margin:0 auto 26px}

/* Navegacao do lightbox, exclusiva desta pagina */
.lb-nav{position:fixed;top:50%;translate:0 -50%;z-index:5;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.55);color:#fff9f6;font-size:22px;cursor:pointer}
.lb-nav:hover{background:rgba(0,0,0,.8);border-color:var(--rose)}
.lb-nav[hidden]{display:none}
#lb-prev{left:16px}
#lb-next{right:16px}

@media(max-width:1024px){
  .pf-grid{grid-template-columns:repeat(2,1fr)}
  .pf-hero .container{grid-template-columns:1fr;gap:26px}
  .pf-feature{max-width:460px}
}
@media(max-width:620px){
  .pf-hero{padding:calc(var(--nav) + 34px) 0 26px}
  .lb-nav{width:44px;height:44px}
  #lb-prev{left:8px}
  #lb-next{right:8px}
}
@media(prefers-reduced-motion:reduce){
  .pf-filters button,.pf-item img{transition:none}
}

/* Entrada ao rolar (componente InView): opacidade, escala e desfoque, em
   cascata de 90ms, como no prompt do cliente. */
.pf-anima .pf-item{opacity:0;transform:scale(.8);filter:blur(10px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
  transition-delay:calc(var(--k,0) * 90ms)}
.pf-anima .pf-item.visto{opacity:1;transform:none;filter:none}
#lb-img{border-radius:14px}
/* No celular a foto do topo ocupa a largura toda, num recorte mais baixo para
   nao tomar a primeira tela. A grade fica em duas colunas, como no desktop. */
@media(max-width:620px){
  .pf-feature img{aspect-ratio:5/4;object-fit:cover;object-position:50% 30%}
  .pf-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pf-item img{border-radius:12px}
  /* Os tres filtros numa linha so, para Noivas continuar a direita: com o
     tamanho do desktop ela quebrava para baixo, sozinha, a esquerda. */
  .pf-filters{flex-wrap:nowrap;gap:8px}
  .pf-filters button{padding:10px 13px;font-size:11px;letter-spacing:.07em}
  html[data-theme] .pf-filters .glow-btn::after{width:13px;height:13px}
}
@media(prefers-reduced-motion:reduce){
  .pf-anima .pf-item{opacity:1;transform:none;filter:none;transition:none}
}