/* ============================================================
   PORTFÓLIO EMÉRITO: camada visual das páginas de case /portfolio/<slug>
   Carregar SEMPRE depois de home-redesign.css (usa os tokens).
   Nenhuma cor ou fonte nova no sistema: composição sobre o design system.
   As únicas cores fora dos tokens são as das paletas dos CLIENTES,
   aplicadas inline nos swatches pelo gerador (gerar-portfolio.mjs).
   ============================================================ */

/* menu: página atual */
.menu a[aria-current="page"]{color:var(--papel)}
.menu a[aria-current="page"]::after{right:0}

/* ---------- trilha (breadcrumb) ---------- */
.pf-trilha{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:clamp(30px,4.4vw,52px);color:var(--apagado);font-size:.74rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.pf-trilha a{color:var(--apagado);text-decoration:none;transition:color .2s ease}
.pf-trilha a:hover{color:var(--ouro)}
.pf-trilha .pf-sep{color:var(--bronze);font-size:.68rem}
.pf-trilha b{color:var(--grafite);font-weight:500}

/* ---------- hero do projeto ---------- */
.pf-hero{position:relative;padding:clamp(46px,6vw,78px) 0 0;overflow:hidden}
.pf-hero-num{position:absolute;right:-3%;top:-14%;z-index:0;font-family:var(--serif);font-weight:500;font-size:min(48vw,540px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(201,162,83,.12);pointer-events:none;user-select:none}
.pf-hero-conteudo{position:relative;z-index:2;max-width:840px}
.pf-hero .rotulo{display:inline-flex;align-items:center;gap:10px}
.pf-hero h1{margin-top:22px;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}
.pf-hero h1 em{-webkit-text-fill-color:var(--ouro)}
.pf-hero-lead{max-width:58ch;margin-top:24px;color:var(--grafite);font-size:clamp(.98rem,1.35vw,1.12rem)}
.pf-hero-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.pf-hero-indice{display:inline-flex;align-items:center;gap:10px;margin-top:26px;color:var(--apagado);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.pf-hero-indice::before{content:"";width:26px;height:1px;background:var(--bronze)}

/* ficha técnica: placa de museu */
.pf-ficha{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(46px,6vw,74px) 0 0;border:1px solid var(--linha-suave);border-radius:6px;background:rgba(21,18,13,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}
.pf-ficha>div{min-width:0;padding:20px 22px;border-right:1px solid var(--linha-suave);border-bottom:1px solid var(--linha-suave)}
.pf-ficha>div:nth-child(3n){border-right:0}
.pf-ficha>div:nth-child(n+4){border-bottom:0}
.pf-ficha dt{color:var(--apagado);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.pf-ficha dd{margin:9px 0 0;color:var(--papel);font-family:var(--serif);font-size:1.04rem;line-height:1.3;overflow-wrap:break-word}
.pf-status{display:inline-flex;align-items:center;gap:9px}
.pf-status::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--ouro);box-shadow:0 0 10px 1px rgba(201,162,83,.9);animation:pf-pulso 2.6s ease-in-out infinite}
@keyframes pf-pulso{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- vitrine (janela navegável) ---------- */
.pf-vitrine{padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(56px,7vw,88px)}
.caso-quadro{position:relative;display:grid;gap:20px;margin:0}
.caso-janela{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:10px;border:1px solid var(--linha);background:var(--carvao);box-shadow:0 40px 110px rgba(0,0,0,.42)}
.caso-janela.pf-rolavel{height:min(680px,80vh)}
.caso-barra{display:flex;align-items:center;gap:14px;flex:0 0 auto;padding:13px 18px;border-bottom:1px solid var(--linha-suave);background:var(--carvao-2)}
.caso-pontos{display:flex;gap:7px}
.caso-pontos i{width:9px;height:9px;border-radius:50%;background:rgba(201,162,83,.28)}
.caso-url{flex:1;min-width:0;padding:6px 14px;border-radius:999px;background:rgba(11,10,8,.55);color:var(--grafite);font-size:.76rem;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.caso-scroll{position:relative;flex:1;min-height:0;scroll-behavior:smooth}
.pf-rolavel .caso-scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bronze) transparent}
.pf-rolavel .caso-scroll::-webkit-scrollbar{width:8px}
.pf-rolavel .caso-scroll::-webkit-scrollbar-thumb{background:var(--bronze);border-radius:999px}
.caso-scroll img{width:100%;height:auto;display:block}
.pf-rolavel::after{content:"";position:absolute;left:1px;right:1px;bottom:1px;height:70px;border-radius:0 0 10px 10px;background:linear-gradient(to top,var(--carvao),transparent);pointer-events:none}
.caso-dica{display:flex;align-items:center;gap:8px;color:var(--apagado);font-size:.76rem;letter-spacing:.02em}
.caso-dica::before{content:"↕";color:var(--ouro)}

/* ---------- paleta do cliente ---------- */
.pf-paleta-secao{padding-top:0;padding-bottom:clamp(64px,8vw,104px)}
.pf-paleta-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:clamp(30px,3.6vw,44px)}
.pf-paleta-cab h2{margin-top:14px;color:var(--papel)}
.pf-paleta-cab>p{max-width:44ch;color:var(--grafite);font-size:.94rem}
.pf-paleta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.pf-chip{position:relative;margin:0;border:1px solid var(--linha-suave);border-radius:8px;background:var(--carvao);overflow:hidden;transition:transform .35s ease,border-color .35s ease}
.pf-chip:hover{transform:translateY(-4px);border-color:var(--linha)}
.pf-chip-cor{display:block;height:clamp(96px,10vw,140px);border-bottom:1px solid var(--linha-suave)}
.pf-chip-cor::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(240,233,218,.05);pointer-events:none}
.pf-chip figcaption{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.pf-chip b{color:var(--papel);font-family:var(--serif);font-weight:500;font-size:.98rem}
.pf-chip code{color:var(--apagado);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- comentário editorial da Emérito ---------- */
.pf-editorial{padding-top:0}
.pf-editorial .wrap{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(44px,7vw,110px);align-items:start}
.pf-editorial-aside{position:sticky;top:110px}
.pf-editorial-aside h2{margin-top:16px;color:var(--papel)}
.pf-editorial-aside>p{margin-top:18px;max-width:34ch;color:var(--grafite)}
.pf-editorial-aside .texto-link{margin-top:26px}
.pf-blocos{display:grid;gap:clamp(40px,5vw,64px)}
.pf-bloco{position:relative;padding-top:clamp(26px,3vw,36px);border-top:1px solid var(--linha-suave)}
.pf-bloco:nth-child(even){margin-left:clamp(18px,4vw,72px)}
.pf-bloco-cab{display:flex;align-items:baseline;gap:16px}
.pf-bloco-num{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3vw,2.7rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(201,162,83,.45)}
.pf-bloco-rotulo{color:var(--ouro);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.pf-bloco h3{margin-top:18px;color:var(--papel);font-size:clamp(1.24rem,2vw,1.72rem);letter-spacing:-.02em;text-wrap:balance}
.pf-bloco h3+p{margin-top:14px}
.pf-bloco p{max-width:60ch;color:var(--grafite)}
.pf-bloco p em{font-family:var(--serif);font-style:italic;color:var(--ouro-claro)}
.pf-depoimento{flex:none;width:100%;min-height:0;margin:6px 0 0;padding-top:clamp(26px,3vw,36px);border-top:1px solid var(--linha-suave)}
.pf-depoimento blockquote{font-size:1.16rem}
.pf-depoimento .depoimento-mono{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--linha);color:var(--ouro);font-family:var(--serif);font-size:1.05rem}

/* ---------- anterior / próximo ---------- */
.pf-nav{border-top:1px solid var(--linha-suave);border-bottom:1px solid var(--linha-suave);background:rgba(21,18,13,.3)}
.pf-nav .wrap{display:grid;grid-template-columns:1fr 1fr}
.pf-nav a{display:flex;align-items:center;gap:clamp(16px,2vw,26px);padding:clamp(30px,4.4vw,50px) clamp(10px,3vw,44px);text-decoration:none;transition:background .25s ease}
.pf-nav a:hover{background:rgba(201,162,83,.045)}
.pf-nav a+a{border-left:1px solid var(--linha-suave)}
.pf-nav-prox{flex-direction:row-reverse;text-align:right}
.pf-nav-prox .pf-nav-texto{align-items:flex-end}
.pf-nav-thumb{flex:0 0 clamp(96px,10vw,148px);overflow:hidden;border-radius:6px;border:1px solid var(--linha-suave);aspect-ratio:16/10;background:var(--carvao)}
.pf-nav-thumb img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.85);transition:transform .8s cubic-bezier(.2,.6,.2,1),filter .4s ease}
.pf-nav a:hover .pf-nav-thumb img{transform:scale(1.06);filter:saturate(1)}
.pf-nav-texto{display:flex;flex-direction:column;gap:9px;min-width:0}
.pf-nav-rotulo{color:var(--apagado);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.pf-nav b{font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,2.2vw,1.8rem);letter-spacing:-.02em;color:var(--papel);transition:color .2s ease}
.pf-nav a:hover b{color:var(--ouro-claro)}
.pf-nav small{color:var(--grafite);font-size:.82rem}

/* ---------- cards "outros projetos" ---------- */
.pf-card{position:relative;display:flex;flex-direction:column;color:var(--papel)}
.pf-card-link{display:block;color:inherit;text-decoration:none}
.pf-card-link::after{content:"";position:absolute;inset:0;z-index:1}
.pf-card-img{position:relative;overflow:hidden;border-radius:6px;border:1px solid var(--linha-suave);background:var(--carvao);aspect-ratio:16/10;margin:0}
.pf-card-img img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.92);transition:transform .9s cubic-bezier(.2,.6,.2,1),filter .5s ease}
.pf-card:hover .pf-card-img img,.pf-card:focus-within .pf-card-img img{transform:scale(1.045);filter:saturate(1)}
.pf-card-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(11,10,8,.55),transparent 38%);pointer-events:none}
.pf-card-img::after{content:"";position:absolute;inset:0;border-radius:6px;border:1px solid rgba(201,162,83,.1);pointer-events:none;z-index:2}
.pf-card-num{position:absolute;left:16px;bottom:10px;z-index:2;font-family:var(--serif);font-weight:500;font-size:2.9rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(240,233,218,.6)}
.pf-card-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:17px 2px 0}
.pf-card-meta b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:500;line-height:1.25;color:var(--papel);transition:color .2s ease}
.pf-card:hover .pf-card-meta b{color:var(--ouro-claro)}
.pf-card-meta small{display:block;margin-top:5px;color:var(--grafite);font-size:.8rem;line-height:1.45}
.pf-card-chip{display:inline-flex;margin-top:12px;padding:4px 12px;border:1px solid var(--linha);border-radius:999px;color:var(--ouro);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.pf-card-links{position:relative;z-index:2;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:4px}
.pf-card-links a{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}
.pf-card-links a:hover{color:var(--papel);border-color:var(--papel)}

/* ---------- mais projetos (rodapé das páginas de case) ---------- */
.pf-mais-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:clamp(34px,4vw,50px)}
.pf-mais-cab h2{margin-top:14px;color:var(--papel)}
.pf-mais-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,32px)}
.pf-mais-grid .pf-card-img{aspect-ratio:16/11}
.pf-mais-grid .pf-card-meta b{font-size:1.02rem}
.pf-mais-grid .pf-card-num{font-size:2.2rem}

/* ---------- hub legado (portfolio.html antigo; o hub novo tem CSS próprio) ---------- */
.pf-hub .cabecalho-editorial h2{color:var(--papel)}
.pf-hub .cabecalho-editorial>p{color:var(--grafite)}
.pf-hub .projetos-aba{border-color:var(--linha);color:var(--grafite)}
.pf-hub .projetos-aba:hover{border-color:var(--ouro);color:var(--papel)}
.pf-hub .projetos-aba.ativa{background:var(--ouro);border-color:var(--ouro);color:var(--tinta)}
.pf-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,5.4vw,68px) clamp(24px,3.4vw,44px)}
.pf-hub-grid .pf-card[hidden]{display:none}

/* ---------- responsivo ---------- */
@media (max-width:1020px){
  .pf-editorial .wrap{grid-template-columns:1fr;gap:40px}
  .pf-editorial-aside{position:static}
  .pf-editorial-aside>p{max-width:56ch}
  .pf-hub-grid{grid-template-columns:1fr}
}
@media (max-width:780px){
  .pf-mais-grid{grid-template-columns:1fr;gap:34px}
  .pf-ficha{grid-template-columns:1fr 1fr}
  .pf-ficha>div{border-right:1px solid var(--linha-suave);border-bottom:1px solid var(--linha-suave)}
  .pf-ficha>div:nth-child(2n){border-right:0}
  .pf-ficha>div:nth-child(n+5){border-bottom:0}
  .pf-nav .wrap{grid-template-columns:1fr}
  .pf-nav a+a{border-left:0;border-top:1px solid var(--linha-suave)}
  .pf-hero-num{right:-14%;top:-6%;font-size:70vw;opacity:.7}
  .caso-janela.pf-rolavel{height:min(560px,72vh)}
  .pf-paleta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-paleta-cab{flex-direction:column;align-items:flex-start;gap:14px}
  .pf-mais-cab{flex-direction:column;align-items:flex-start;gap:14px}
  .pf-bloco:nth-child(even){margin-left:0}
}
@media (max-width:500px){
  .pf-ficha{grid-template-columns:1fr}
  .pf-ficha>div{border-right:0;border-bottom:1px solid var(--linha-suave)}
  .pf-ficha>div:last-child{border-bottom:0}
  .caso-janela.pf-rolavel{height:min(470px,68vh)}
  .pf-paleta{grid-template-columns:1fr 1fr;gap:12px}
  .pf-chip figcaption{padding:11px 12px 13px}
  .pf-nav a{flex-direction:column;align-items:flex-start;gap:14px}
  .pf-nav-prox{align-items:flex-end;text-align:right}
  .pf-nav-thumb{flex:none;width:min(220px,60%)}
  .pf-card-meta{flex-direction:column;gap:12px}
  .pf-card-links{flex-direction:row;align-items:center;gap:18px;padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .pf-status::before{animation:none}
  .pf-card-img img,.pf-nav-thumb img,.pf-chip{transition:none}
  .caso-scroll{scroll-behavior:auto}
}