/*seccion de portafolio*/
.pf-sec {
    padding:5rem 2.5rem; border-bottom:1px solid var(--line);
    max-width:1200px; margin:0 auto;
}
.pf-sec-hdr {
    display:grid; grid-template-columns:80px 1fr;
    gap:2.5rem; align-items:start; margin-bottom:3.5rem;
}
.pf-sec-num {
    font-family:var(--mono); font-size:.58rem; color:var(--orange);
    letter-spacing:.14em; text-transform:uppercase; padding-top:.45rem;
}
.pf-sec-title {
    font-family:var(--fd); font-size:clamp(2rem,4.5vw,3.5rem);
    font-weight:800; letter-spacing:-.02em; line-height:1; margin-bottom:.7rem;
}
.pf-sec-sub {
    font-size:.85rem; font-weight:300; color:var(--gray); line-height:1.7;
}

/*grid de proyectos*/
.pf-sec-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1px; background:var(--line);
    border:1px solid var(--line); margin-bottom:2.5rem;
}
.pf-project {
    background:var(--bg); display:flex; flex-direction:column;
    overflow:hidden; position:relative;
    transition:background .28s;
}
.pf-project:hover { background:var(--black); }

/*imagen del proyecto - el usuario provee PNG 800x500*/
.pf-img {
    aspect-ratio:16/10; overflow:hidden; position:relative; flex-shrink:0;
    background:var(--light);
}
.pf-img img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:filter .28s;
}
.pf-project:hover .pf-img img { filter:brightness(.45) saturate(.6); }

.pf-info {
    padding:1.4rem 1.6rem; display:flex; flex-direction:column; gap:.4rem;
}
.pf-cat {
    font-family:var(--mono); font-size:.52rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--orange);
}
.pf-nm {
    font-family:var(--fd); font-size:.92rem; font-weight:700;
    letter-spacing:-.01em; transition:color .28s;
}
.pf-project:hover .pf-nm { color:white; }
.pf-yr {
    font-family:var(--mono); font-size:.56rem; color:var(--gray); transition:color .28s;
}
.pf-project:hover .pf-yr { color:#555; }

/*botones de seccion*/
.pf-sec-actions { display:flex; gap:.7rem; flex-wrap:wrap; }
.pf-btn {
    display:inline-flex; align-items:center; gap:.6rem; padding:.75rem 1.6rem;
    background:var(--black); color:white; text-decoration:none;
    font-size:.58rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    cursor:none; transition:background .22s;
}
.pf-btn:hover { background:var(--orange); }
.pf-btn i { font-size:.95rem; }
.pf-btn-sec {
    background:transparent; color:var(--black);
    border:1.5px solid var(--line);
}
.pf-btn-sec:hover { background:var(--black); color:white; border-color:var(--black); }

/*responsive portafolio*/
@media (max-width:900px) {
    .pf-sec { padding:3.5rem 1.4rem; }
    .pf-sec-hdr { grid-template-columns:1fr; gap:.6rem; margin-bottom:2rem; }
    .pf-sec-num { padding-top:0; }
    .pf-sec-title { font-size:clamp(1.8rem,8vw,2.8rem); }
    .pf-sec-grid { grid-template-columns:repeat(2,1fr); }
    .pf-btn { font-size:.56rem; padding:.7rem 1.2rem; }
}

@media (max-width:600px) {
    .pf-sec-grid { grid-template-columns:1fr; }
}

a {
    text-decoration:none; 
    color:inherit;
}