/* ============================================================
   HUB · GALERIA DE EXPOSIÇÃO (/portfolio/index.html)
   Vitrines vivas: o fullpage de cada projeto rola em loop
   dentro de uma moldura de navegador. Carregar SEMPRE depois
   de home-redesign.css e portfolio.css (usa os tokens).
   Nenhuma cor ou fonte nova: só composição sobre o sistema.
   ============================================================ */

/* ---------- hero editorial do hub ---------- */
.pfh-hero{position:relative;padding:clamp(58px,6vw,92px) 0 0;overflow:hidden;text-align:center}
.pfh-hero .rotulo{display:inline-flex;align-items:center;gap:10px}
.pfh-hero h1{max-width:16ch;margin:22px auto 0;background:linear-gradient(180deg,#F8F3E8 0%,#EFE7D5 50%,rgba(233,222,201,.62) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pfh-hero h1 em{-webkit-text-fill-color:var(--ouro)}
.pfh-hero .prova{margin-top:clamp(48px,6vw,72px)}

/* ---------- grade da galeria ---------- */
.pfv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,5.4vw,64px) clamp(24px,3.4vw,44px)}
.pfv-obra{position:relative;display:flex;flex-direction:column}
.pfv-obra[hidden]{display:none}

/* ---------- vitrine viva (moldura de navegador) ---------- */
.pfv-janela{--pf-jan:clamp(270px,26vw,350px);position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:10px;border:1px solid var(--linha);background:var(--carvao);box-shadow:0 30px 80px rgba(0,0,0,.4);transition:border-color .3s ease,box-shadow .3s ease}
.pfv-obra:hover .pfv-janela,.pfv-obra:focus-within .pfv-janela{border-color:rgba(201,162,83,.42);box-shadow:0 34px 90px rgba(0,0,0,.5),0 0 0 1px rgba(201,162,83,.12)}
.pfv-tela{position:relative;height:var(--pf-jan);overflow:hidden;background:var(--carvao-2)}
.pfv-tela img{width:100%;height:auto;animation:pfv-percorrer var(--dur,34s) linear var(--atraso,0s) infinite alternate;will-change:transform}
@keyframes pfv-percorrer{
  0%,3%{transform:translateY(0)}
  97%,100%{transform:translateY(calc(var(--pf-jan) - 100%))}
}
.pfv-obra:hover .pfv-tela img,.pfv-obra:focus-within .pfv-tela img{animation-play-state:paused}
.pfv-tela::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(to top,rgba(11,10,8,.5),transparent);pointer-events:none}
.pfv-pausa{position:absolute;right:12px;bottom:10px;z-index:2;padding:5px 12px;border-radius:999px;border:1px solid var(--linha);background:rgba(11,10,8,.72);color:var(--grafite);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .3s ease;pointer-events:none}
.pfv-obra:hover .pfv-pausa,.pfv-obra:focus-within .pfv-pausa{opacity:1}

/* ---------- ficha da obra ---------- */
.pfv-info{display:flex;align-items:flex-start;gap:18px;padding:18px 2px 0}
.pfv-num{flex-shrink:0;font-family:var(--serif);font-weight:500;font-size:2.2rem;line-height:1.06;color:transparent;-webkit-text-stroke:1px rgba(201,162,83,.55)}
.pfv-nome{flex:1;min-width:0}
.pfv-nome b{display:block;font-family:var(--serif);font-size:1.22rem;font-weight:500;line-height:1.25;color:var(--papel);transition:color .2s ease}
.pfv-obra:hover .pfv-nome b{color:var(--ouro-claro)}
.pfv-nome small{display:block;margin-top:5px;color:var(--grafite);font-size:.8rem;line-height:1.45}
.pfv-tags{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0;padding:0;list-style:none}
.pfv-tags li{padding:4px 12px;border:1px solid var(--linha);border-radius:999px;color:var(--ouro);font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.pfv-ver{flex-shrink:0;align-self:flex-start;margin-top:6px;color:var(--ouro);font-size:.78rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--linha);padding-bottom:2px;white-space:nowrap;transition:color .2s ease,border-color .2s ease}
.pfv-ver::after{content:"";position:absolute;inset:0;z-index:1}
.pfv-obra:hover .pfv-ver{color:var(--papel);border-color:var(--papel)}

/* ---------- case em destaque (Vie, 2 colunas) ---------- */
.pfv-destaque{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4.4vw,60px);align-items:center;padding:clamp(22px,3vw,40px);border:1px solid var(--linha-suave);border-radius:12px;background:rgba(21,18,13,.45)}
.pfv-destaque .pfv-janela{--pf-jan:clamp(330px,34vw,460px)}
.pfv-destaque .pfv-info{position:relative;display:block;padding:0}
.pfv-destaque .pfv-num{position:absolute;right:-2px;top:-18px;font-size:4.2rem;-webkit-text-stroke:1px rgba(201,162,83,.3)}
.pfv-destaque .pfv-nome b{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.02em}
.pfv-destaque .pfv-lead{margin-top:16px;max-width:44ch;color:var(--grafite);font-size:.95rem}
.pfv-destaque .pfv-tags{margin-top:18px}
.pfv-destaque .pfv-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pfv-destaque .pfv-acoes .botao{position:relative;z-index:2}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .pfv-grid{grid-template-columns:1fr}
  .pfv-destaque{grid-template-columns:1fr;align-items:start;padding:clamp(16px,4vw,26px)}
  .pfv-destaque .pfv-num{top:auto;bottom:-6px}
  .pfv-janela{--pf-jan:min(360px,52vh)}
  .pfv-destaque .pfv-janela{--pf-jan:min(400px,56vh)}
}
@media (max-width:560px){
  .pfv-info{flex-wrap:wrap;gap:12px}
  .pfv-num{font-size:1.8rem}
  .pfv-ver{margin-top:0}
  .pfv-janela{--pf-jan:min(320px,50vh)}
  .pfv-destaque .pfv-janela{--pf-jan:min(340px,52vh)}
}
@media (prefers-reduced-motion:reduce){
  .pfv-tela img{animation:none}
  .pfv-janela,.pfv-nome b,.pfv-ver{transition:none}
  .pfv-pausa{display:none}
}