/* 365Graficas — estilos de la página: portafolio.html */
.pf-head{padding-block:clamp(48px,7vw,88px) clamp(32px,4vw,48px)}
.pf-head h1{margin-top:16px}
.pf-head .lead{margin-top:20px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.filters button{font:600 .86rem/1 "Montserrat",system-ui,sans-serif;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line2);background:transparent;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.filters button i{width:10px;height:10px;border-radius:3px}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pf{padding-top:clamp(24px,3vw,40px)}
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pf-grid{grid-template-columns:1fr}}
.work{display:grid;gap:12px;text-decoration:none}
.work .img{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.work img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.work:hover img{transform:scale(1.03)}
.work .cat{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.work h3{font-size:1.08rem}
.work p{color:var(--ink2);font-size:.9rem}
.empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px 40px;align-items:center;padding:clamp(28px,5vw,56px);border:1.5px dashed var(--line2);border-radius:22px;background:var(--surface)}
@media (max-width:700px){.empty{grid-template-columns:1fr}}
.empty .stack{position:relative;width:120px;height:110px}
.empty .stack svg{position:absolute;width:84px}
.empty .stack svg:nth-child(1){left:0;top:0;--acc:var(--amarillo)}
.empty .stack svg:nth-child(2){left:18px;top:12px;--acc:var(--magenta)}
.empty .stack svg:nth-child(3){left:36px;top:24px;--acc:var(--verde)}
.empty h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.empty p{color:var(--ink2);margin-top:12px;max-width:56ch}
.empty .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.empty .ctas svg{width:18px;height:18px;fill:currentColor}