/**
 * portfolio-v2.css: /portfolio e /portfolio/{slug} no design da /sites.
 * Camada própria (prefixo pf-) sobre sites/sites.css, que é carregado antes e NÃO é editado.
 * Overrides de hm-/in- ficam sempre escopados sob .pf (classe do <body>).
 * Só tokens do DS (var(--...)). Sem valor de cor solto.
 */

/* ---------- reveal: só esconde quando o JS está pronto (html.pf-ready); sem JS, tudo visível ---------- */
html:not(.pf-ready) .pf .hm-reveal,
html:not(.pf-ready) .pf .hm-path.hm-reveal{ opacity:1; transform:none; }
.pf .hm-path{ opacity:1; transform:none; }
html.pf-ready .pf .hm-path.hm-reveal:not(.is-in){ opacity:0; transform:translateY(22px); }
.pf .hm-path.hm-reveal.is-in{ opacity:1; transform:none; }
.pf .hm-path.hm-reveal.is-in:hover{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--shadow-md); }
.pf .hm-path.is-yours.hm-reveal.is-in:hover{ border-color:var(--border-accent); }

/* ---------- marca-texto do h1 (sem JS já aparece aceso; com JS varre ao carregar) ---------- */
.pf .hm-hl{ background-size:100% 86%; color:#fff; }
html.pf-ready .pf .pf-hero .hm-hl:not(.is-lit){ background-size:0% 86%; color:inherit; }

/* ---------- topo: respiro abaixo do topbar fixo ---------- */
.pf main{ display:block; min-height:70svh; }

/* ---------- hero ---------- */
.pf-hero{
    max-width:74rem; margin:0 auto;
    padding:calc(var(--layout-hh) + clamp(2.4rem,9vh,5.5rem)) clamp(1.2rem,5vw,3rem) clamp(2.4rem,6vh,3.6rem);
}
.pf-h1{ max-width:16ch; }
.pf-lead{ margin:1.4rem 0 0; font-size:1.08rem; color:var(--text-secondary); max-width:46ch; }

/* ---------- lista ---------- */
.pf-list{ max-width:74rem; margin:0 auto; padding:clamp(1.6rem,4vh,2.4rem) clamp(1.2rem,5vw,3rem) clamp(4rem,10vh,7rem); }
.pf-bar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem 1.6rem; margin-bottom:2rem; }
.pf-filters{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pf-chip.is-active,
.pf-chip[aria-pressed="true"]{
    background:var(--color-primary-400); border-color:var(--color-primary-400); color:#fff;
}
.pf-chip.is-active:hover,
.pf-chip[aria-pressed="true"]:hover{ background:var(--color-primary-500); border-color:var(--color-primary-500); color:#fff; }
.pf-count{ margin:0; }
.pf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,19.5rem),1fr)); gap:clamp(1.2rem,3vw,2rem); }
.pf-card{ padding:clamp(1.1rem,2vw,1.5rem); overflow:hidden; }
.pf-card[hidden]{ display:none; }
.pf-card .hm-path-top{ flex-wrap:wrap; justify-content:flex-start; gap:.5rem; margin-bottom:1.1rem; }
.pf-title{ font-size:clamp(1.3rem,2vw,1.6rem); font-weight:900; letter-spacing:-.03em; line-height:1.12; margin-bottom:.8rem; }
.pf-link{ color:var(--text-primary); }
.pf-link:hover{ color:var(--text-accent); }
.pf-link::after{ content:''; position:absolute; inset:0; border-radius:var(--radius-xl); }
.pf-link:focus-visible{ outline:none; }
.pf-link:focus-visible::after{ outline:2px solid var(--border-accent); outline-offset:3px; }
.pf-sum{ margin:0 0 1rem; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.pf-client{ margin:0 0 1rem; }
.pf-more{ margin-top:auto; display:inline-flex; align-items:center; gap:.6em; font-size:.9rem; font-weight:600; color:var(--text-accent); }
.pf-more i{ font-size:.8em; transition:transform var(--trans); }
.pf-card:hover .pf-more i{ transform:translateX(4px); }
.pf-badge-concept{ color:var(--color-primary-400); border-color:rgba(var(--color-primary-rgb),.45); background:rgba(var(--color-primary-rgb),.1); }
.pf-empty{ margin:2rem 0; padding:1.6rem; border:1px dashed var(--border-default); border-radius:var(--radius-lg); color:var(--text-secondary); max-width:none; }
.pf-reset{ padding:0; border:0; background:none; color:var(--text-accent); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* ---------- capa (lista e detalhe), com placeholder do DS ---------- */
.pf-cover{ position:relative; aspect-ratio:16/9; margin:0 0 1.4rem; border-radius:var(--radius-lg); background:var(--surface-elevated); overflow:hidden; }
.pf-cover img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms cubic-bezier(.22,.61,.36,1); }
.pf-card:hover .pf-cover img{ transform:scale(1.03); }
.pf-ph{ position:absolute; inset:0; display:grid; place-items:center; background:var(--surface-elevated); }
.pf-cover.has-img:not(.is-broken) .pf-ph{ display:none; }
.pf-cover.is-broken img{ display:none; }
.pf-ph .hm-vis-brand{ width:min(220px,70%); height:auto; aspect-ratio:2.2/1; }
.pf-ph .hm-vis-logo{ transform:none; background:var(--color-primary-400); box-shadow:0 8px 22px -6px rgba(var(--color-primary-rgb),.6); }
.pf-ph .hm-vis-lines i{ background:var(--text-tertiary); }
.pf-ph .hm-vis-lines i:nth-child(1){ width:88%; background:var(--text-secondary); }
.pf-ph .hm-vis-lines i:nth-child(2){ width:70%; }
.pf-ph .hm-vis-lines i:nth-child(3){ width:52%; }
.pf-ph .hm-vis-cta{ width:44px; }

/* ---------- convite final (lista e detalhe) ---------- */
.pf-cta{ margin-top:clamp(3rem,8vh,5rem); padding:clamp(1.6rem,4vw,2.8rem); border:1px solid var(--border-default); border-radius:var(--radius-xl); background:color-mix(in srgb, var(--surface-card) 82%, transparent); }
.pf-cta-h{ font-size:clamp(1.5rem,3vw,2.2rem); max-width:22ch; margin-bottom:.9rem; }
.pf-cta p{ color:var(--text-secondary); }
.pf-cta-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.4rem; }
.pf-cta .btn-lg{ margin-top:.4rem; }
.pf-cta-actions .btn-lg{ margin-top:0; }
.pf-cta-phone{ font-weight:500; opacity:.85; }

/* ---------- detalhe ---------- */
.pf-crumb{ max-width:56rem; margin:0 auto; padding:calc(var(--layout-hh) + 1.6rem) clamp(1.2rem,5vw,3rem) 0; }
.pf-crumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem .6rem; font-size:.82rem; color:var(--text-secondary); }
.pf-crumb li + li::before{ content:'/'; margin-right:.6rem; color:var(--text-tertiary); }
.pf-crumb a{ color:var(--text-secondary); }
.pf-crumb a:hover{ color:var(--text-primary); }
.pf-crumb [aria-current="page"]{ color:var(--text-primary); font-weight:600; }
.pf-article{ max-width:56rem; margin:0 auto; padding:clamp(2rem,5vh,3rem) clamp(1.2rem,5vw,3rem) clamp(4rem,10vh,7rem); }
.pf-dbadges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.4rem; }
.pf-dh1{ max-width:20ch; font-size:clamp(2rem,4.8vw,3.6rem); }
.pf-dhead .pf-lead{ margin-top:1.2rem; max-width:52ch; }
.pf-dhead .pf-client{ margin:1.2rem 0 0; }
.pf-dactions{ margin-top:1.8rem; }
.pf-dcover{ margin-top:clamp(2rem,5vh,3rem); margin-bottom:0; border:1px solid var(--border-default); border-radius:var(--radius-xl); }
.pf-content{ margin-top:clamp(2.4rem,6vh,3.6rem); max-width:44rem; }
.pf-content p{ color:var(--text-secondary); font-size:1.04rem; max-width:none; }
.pf-sub{ margin:2.4rem 0 .8rem; font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.03em; line-height:1.15; color:var(--text-primary); }

/* ---------- responsivo (desktop-first) ---------- */
@media (max-width:760px){
    .pf-grid{ grid-template-columns:1fr; gap:1.4rem; }
    .pf-bar{ flex-direction:column; align-items:flex-start; }
    .pf-cta-actions .btn{ width:100%; }
    .pf-dactions .btn{ width:100%; }
}
@media (max-width:420px){
    .pf-cta-phone{ display:none; }
}