/* PORTFÓLIO — painel dentro do site (grafite fosco) */
html.pf-lock,html.pf-lock body{overflow:hidden!important}
#pf{position:fixed;inset:0;z-index:99999;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  background-color:#2b2d30;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color:#e9e9df;font-family:'Segoe UI','Segoe',"DejaVu Sans",Verdana,sans-serif;font-size:14px;line-height:1.5;
  visibility:hidden;opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
#pf.open{visibility:visible;opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
#pf *,#pf *:before,#pf *:after{box-sizing:border-box}
#pf a,#pf a:visited{color:inherit;text-decoration:none}
#pf button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* barra superior */
#pf .pf-bar{position:sticky;top:0;z-index:5;display:flex;justify-content:flex-end;align-items:center;padding:14px 5vw;
  background:linear-gradient(#2b2d30f2,#2b2d30cc);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid #ffffff12}
#pf .pf-back{font:600 12px 'Raleway SemiBold','Segoe UI',sans-serif;letter-spacing:.22em;text-transform:uppercase;border:1px solid #fcfcd6aa;padding:9px 16px;color:#FCFCD6;transition:.25s}
#pf .pf-back:hover{background:#FCFCD6;color:#1d1e20}
#pf .pf-brand{font:12px 'Raleway SemiBold','Segoe UI',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#a9aaa0}

/* título */
#pf .pf-head{text-align:center;padding:9vh 6vw 4vh}
#pf .pf-eyebrow{font:600 12px 'Raleway SemiBold','Segoe UI',sans-serif;letter-spacing:.42em;text-transform:uppercase;color:#C5C54F;display:flex;gap:16px;align-items:center;justify-content:center}
#pf .pf-eyebrow:before,#pf .pf-eyebrow:after{content:"";width:44px;height:1px;background:#C5C54F99}
#pf h2{margin:22px 0 0;font:400 clamp(46px,9vw,128px)/1 'Oswald SemiBold','Oswald',Impact,sans-serif;letter-spacing:.09em;color:#FCFCD6;text-transform:uppercase;padding-left:.09em}
#pf .pf-sub{margin:22px auto 0;max-width:620px;color:#cfd0c5;font-size:15px;line-height:1.7;font-weight:400}

/* filtros */
#pf .pf-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:2vh 5vw 5vh}
#pf .pf-chip{font:600 11px 'Raleway SemiBold','Segoe UI',sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:10px 16px;border:1px solid #ffffff33;color:#d6d7cc;transition:.25s}
#pf .pf-chip i{font-style:normal;color:#8d8e85;margin-left:8px;letter-spacing:.05em}
#pf .pf-chip:hover{border-color:#FCFCD6;color:#FCFCD6}
#pf .pf-chip.on{background:#FCFCD6;border-color:#FCFCD6;color:#1d1e20}
#pf .pf-chip.on i{color:#55564f}

/* grade como no site antigo: cartões iguais, foto, linha "Categoria | Cliente"; texto sobre a foto no hover */
#pf .pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:30px 28px;padding:0 5vw 10vh;max-width:1360px;margin:0 auto}
#pf .pf-card{display:block;width:100%;text-align:left;background:#34363b;box-shadow:0 6px 18px #0006,0 1px 2px #0008;padding:16px 16px 0;opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
#pf .pf-card.in{opacity:1;transform:none}
#pf .pf-card.hide{display:none}
#pf .pf-card:hover{box-shadow:0 12px 28px #000a,0 1px 2px #0008}
#pf .pf-card:focus-visible{outline:2px solid #FCFCD6;outline-offset:2px}
#pf .pf-im{display:block;position:relative;overflow:hidden;height:184px;background:#2a2c30}
#pf .pf-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#pf .pf-card.fit .pf-im img{object-fit:contain}
#pf .pf-tx{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 7%;background:rgba(52,54,59,.95);opacity:0;transition:opacity .3s ease}
#pf .pf-card:hover .pf-tx,#pf .pf-card:focus-visible .pf-tx{opacity:1}
#pf .pf-t{display:block;font:600 14px/1.3 Helvetica,Arial,sans-serif;color:#f1f1e3}
#pf .pf-d{display:block;margin-top:8px;font:400 13px/1.55 Helvetica,Arial,sans-serif;color:#b9bab0}
#pf .pf-ft{display:flex;align-items:center;gap:12px;height:48px;font:400 15px Helvetica,Arial,sans-serif;color:#cfd0c5;white-space:nowrap;overflow:hidden}
#pf .pf-ft i{flex:none;width:10px;height:10px;border-radius:50%;background:#8f9088;margin-left:6px}
#pf .pf-ft b{font-weight:700;color:#f1f1e3;overflow:hidden;text-overflow:ellipsis}

#pf .pf-foot{text-align:center;padding:0 5vw 9vh;color:#7d7e76;font:11px 'Raleway SemiBold','Segoe UI',sans-serif;letter-spacing:.3em;text-transform:uppercase}
#pf .pf-foot a{display:inline-block;margin-top:18px;border:1px solid #fcfcd6aa;padding:10px 18px;color:#FCFCD6;transition:.25s}
#pf .pf-foot a:hover{background:#FCFCD6;color:#1d1e20}

/* lightbox */
#pf .pf-lb{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:56px 70px 24px;background:#1b1c1ef5;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
#pf .pf-lb.open{opacity:1;visibility:visible;transition:opacity .3s}
#pf .pf-lb img{max-width:100%;max-height:calc(100vh - 190px);object-fit:contain;box-shadow:0 20px 70px #000a;animation:pfin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pfin{from{opacity:0;transform:scale(.96)}}
#pf .pf-lbtxt{max-width:760px;text-align:center}
#pf .pf-lbtxt b{display:block;font:400 20px 'Oswald SemiBold','Oswald',sans-serif;letter-spacing:.06em;color:#FCFCD6;text-transform:uppercase}
#pf .pf-lbtxt em{display:block;font-style:normal;font:600 11px 'Raleway SemiBold','Segoe UI',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#C5C54F;margin:6px 0}
#pf .pf-lbtxt span{display:block;color:#b5b6ac;font-size:14px;line-height:1.6}
#pf .pf-lb button{position:absolute;color:#FCFCD6;font-size:34px;line-height:1;width:52px;height:52px;display:grid;place-items:center;border:1px solid #ffffff33;border-radius:50%;transition:.25s}
#pf .pf-lb button:hover{background:#FCFCD6;color:#1d1e20}
#pf .pf-lb .x{top:14px;right:16px}#pf .pf-lb .pv{left:12px;top:50%;margin-top:-26px}#pf .pf-lb .nx{right:12px;top:50%;margin-top:-26px}
#pf .pf-lb .ct{position:absolute;top:26px;left:24px;font:600 11px 'Raleway SemiBold',sans-serif;letter-spacing:.25em;color:#8f9088}

@media(max-width:700px){
  #pf .pf-chip{padding:8px 10px;font-size:10px;letter-spacing:.12em}#pf .pf-filters{gap:8px}
  #pf .pf-brand{display:none}
  #pf .pf-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  #pf .pf-card{padding:8px 8px 0}#pf .pf-im{height:96px}#pf .pf-ft{height:38px;font-size:11px;gap:7px}#pf .pf-ft i{width:7px;height:7px;margin-left:2px}#pf .pf-t{font-size:12px}#pf .pf-d{display:none}
  #pf .pf-lb{padding:60px 12px 16px}#pf .pf-lb .pv,#pf .pf-lb .nx{top:auto;bottom:14px;margin:0;width:44px;height:44px}
  #pf .pf-lb .pv{left:14px}#pf .pf-lb .nx{right:14px}
  #pf .pf-lb img{max-height:calc(100vh - 260px)}
}
@media(prefers-reduced-motion:reduce){#pf,#pf *{transition:none!important;animation:none!important}#pf .pf-card{opacity:1;transform:none}}
