/* PF Portfolio Filter */
.pfp{--pfp-cols:3;--pfp-cols-md:2;--pfp-cols-sm:1;--pfp-gap:0px;--pfp-ratio:4 / 3;--pfp-overlay:.65;--pfp-accent:#ffd100;--pfp-title:#333;--pfp-btn:#777;--pfp-btn-on:#222;width:100%}
.pfp,.pfp *,.pfp *::before,.pfp *::after{box-sizing:border-box}

.pfp-head{text-align:center;padding:48px 16px 14px}
.pfp-title{margin:0;color:var(--pfp-title);font-size:clamp(2.25rem,6vw,4rem);font-weight:800;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.pfp-sub{margin:.9em 0 0;color:var(--pfp-accent);font-size:1rem;letter-spacing:.02em;text-transform:uppercase}

.pfp-filters{margin:0 0 16px;padding:0 12px}
.pfp-filters ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:0;padding:0;list-style:none}
.pfp-filters li{display:flex;align-items:center;margin:0;padding:0}
.pfp-filters li+li::before{content:"";display:block;width:1px;height:14px;background:#ccc}

/* Modificación de botones de filtro: fondo transparente #999 y activo #111 */
.pfp-btn{appearance:none;margin:0;padding:6px 14px;border:0;border-radius:0; text-transform: inherit !important; background-color:transparent !important;color:#999 !important;font:inherit;font-size:.8125rem;line-height:1.2;cursor:pointer;transition:color .2s, background-color .2s}
.pfp-btn:hover,.pfp-btn.is-active{color:#000 !important;background-color: transparent !Important}
.pfp-btn.is-active{font-weight:700;background-color: transparent !important;color:#111 !important}
.pfp-btn:focus-visible{outline:2px solid var(--pfp-accent);outline-offset:2px}

.pfp-grid{display:grid;grid-template-columns:repeat(var(--pfp-cols),minmax(0,1fr));gap:var(--pfp-gap)}
.pfp-item{position:relative;overflow:hidden;margin:0;aspect-ratio:var(--pfp-ratio);background:#e9e9e9;outline-offset:-3px}
.pfp-item[hidden]{display:none}
.pfp-item img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover}

/* Modificación de .pfp-cap agregando !important al background */
.pfp-cap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:10px;background:rgb(0 0 0 / var(--pfp-overlay)) !important;opacity:0;transition:opacity .25s ease;pointer-events:none}
.pfp-cap span{padding:.5em .85em;background:rgb(255 255 255 / .14);color:#fff;font-size:.8125rem;font-weight:700;line-height:1.2;letter-spacing:.03em;text-align:center;text-transform:uppercase}
.pfp-item:hover .pfp-cap,.pfp-item:focus .pfp-cap,.pfp-item:focus-within .pfp-cap{opacity:1}

/* Pantallas táctiles: sin hover, el nombre queda visible abajo. */
@media (hover:none){
.pfp-cap{align-items:flex-end;justify-content:flex-start;padding:12px;background:linear-gradient(to top,rgb(0 0 0 / .6),transparent 45%) !important;opacity:1}
.pfp-cap span{padding:0;background:none}
}

.pfp-item.is-in{animation:pfp-in .35s ease both}
@keyframes pfp-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pfp-item.is-in{animation:none}.pfp-cap{transition:none}}

@media (max-width:1024px){.pfp-grid{grid-template-columns:repeat(var(--pfp-cols-md),minmax(0,1fr))}}
@media (max-width:600px){.pfp-grid{grid-template-columns:repeat(var(--pfp-cols-sm),minmax(0,1fr))}.pfp-head{padding-top:32px}}