*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
:root{--fg:#222;--muted:#8a8a8a;--line:#ececec;--font:'Montserrat',system-ui,-apple-system,'Helvetica Neue',sans-serif}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--fg);font-family:var(--font);font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.caps,.pf-studio,.pf-filter,.pf-card h2,.pf-cat,.pf-cover h1,.pf-back span,.pf-foot{text-transform:uppercase}

/* Encabezado */
.pf-head{display:flex;justify-content:center;align-items:center;padding:56px 16px 36px}
.pf-studio{margin:0;font-size:clamp(18px,2.4vw,26px);font-weight:300;letter-spacing:.42em;padding-left:.42em;text-align:center}
.pf-head-album{justify-content:space-between;padding:22px max(16px,3vw);position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.pf-head-album .pf-studio{font-size:14px;letter-spacing:.38em}
.pf-back,.pf-spacer{display:inline-flex;align-items:center;gap:6px;min-width:130px;font-size:10px;letter-spacing:.24em;color:var(--muted);transition:color .2s}
.pf-back:hover{color:var(--fg)}
.pf-back svg{width:16px;height:16px}

/* Filtros */
.pf-filters{display:flex;align-items:center;justify-content:center;gap:18px;max-width:1200px;margin:0 auto 34px;padding:0 16px;position:relative}
.pf-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px}
.pf-filter{font-size:11px;letter-spacing:.24em;padding:6px 0;color:var(--muted);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.pf-filter:hover{color:var(--fg)}
.pf-filter.active{color:var(--fg);border-color:var(--fg)}
.pf-search{display:flex;align-items:center;gap:4px}
.pf-icon{display:inline-grid;place-items:center;width:34px;height:34px;color:var(--muted);transition:color .2s}
.pf-icon:hover{color:var(--fg)}
.pf-search input{width:0;opacity:0;padding:6px 0;border:0;border-bottom:1px solid var(--fg);font:inherit;font-size:13px;letter-spacing:.08em;color:var(--fg);background:none;outline:none;transition:width .3s,opacity .3s}
.pf-search.open input{width:170px;opacity:1}
.pf-search input::-webkit-search-cancel-button{display:none}

/* Grid de álbumes */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 28px;max-width:1280px;margin:0 auto;padding:0 max(16px,3vw) 80px}
.pf-card{display:block}
.pf-card-img{aspect-ratio:1/1;overflow:hidden;background:#f4f4f4}
.pf-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .4s}
.pf-card:hover .pf-card-img img{transform:scale(1.035);opacity:.88}
.pf-card h2{margin:16px 0 0;font-size:12px;font-weight:400;letter-spacing:.26em;text-align:center;line-height:1.6}
.pf-empty,.pf-empty-msg{text-align:center;color:var(--muted);padding:60px 16px 120px;font-size:13px;letter-spacing:.12em}
.pf-empty .pf-back{justify-content:center;margin-top:16px;min-width:0}

/* Álbum */
.pf-cover{position:relative;height:78vh;height:78svh;min-height:380px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:#111}
.pf-cover-img{position:absolute;inset:0;background:center/cover no-repeat;animation:pfIn 1.4s ease-out both}
@keyframes pfIn{from{transform:scale(1.05);opacity:.3}to{transform:none;opacity:1}}
.pf-cover-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.35))}
.pf-cover-text{position:relative;padding:0 16px}
.pf-cat{margin:0 0 14px;font-size:10px;letter-spacing:.4em;opacity:.9}
.pf-cover h1{margin:0;font-size:clamp(24px,4.6vw,52px);font-weight:200;letter-spacing:.3em;padding-left:.3em;line-height:1.25}
.pf-mosaic{display:flex;gap:10px;align-items:flex-start;max-width:1400px;margin:0 auto;padding:44px max(16px,3vw) 72px}
.pf-col{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.pf-tile{display:block;width:100%;background:#f4f4f4;cursor:zoom-in;overflow:hidden}
.pf-tile img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.pf-tile img.loaded{opacity:1}
.pf-tile:hover img.loaded{opacity:.92}

/* Pie */
.pf-foot{text-align:center;padding:36px 16px 48px;border-top:1px solid var(--line);font-size:10px;letter-spacing:.3em;color:var(--muted)}
.pf-foot p{margin:0}
.pf-foot a:hover{color:var(--fg)}

/* Lightbox */
.pf-lb{position:fixed;inset:0;z-index:50;background:#fff;display:grid;grid-template-rows:60px 1fr;grid-template-columns:72px 1fr 72px}
.pf-lb-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 max(16px,2vw)}
.pf-lb-count{font-size:11px;letter-spacing:.26em;color:var(--muted)}
.pf-lb-stage{grid-column:2;display:grid;place-items:center;min-width:0;min-height:0;padding:0 0 28px;touch-action:pan-y}
.pf-lb-stage img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;transition:opacity .25s}
.pf-lb-nav{display:grid;place-items:center;color:var(--muted);transition:color .2s}
.pf-lb-nav:hover{color:var(--fg)}
.pf-lb-nav svg{width:30px;height:30px;stroke-width:1}

@media (max-width:1024px){
  .pf-grid{grid-template-columns:repeat(2,1fr);gap:40px 20px}
}
@media (max-width:640px){
  .pf-head{padding:40px 16px 26px}
  .pf-grid{grid-template-columns:1fr;gap:36px}
  .pf-filters{flex-direction:column;gap:12px;margin-bottom:26px}
  .pf-cats{gap:4px 18px}
  .pf-search.open input{width:200px}
  .pf-head-album{padding:16px}
  .pf-back span{display:none}
  .pf-back,.pf-spacer{min-width:40px}
  .pf-head-album .pf-studio{font-size:12px;letter-spacing:.3em}
  .pf-mosaic{gap:6px;padding:24px 6px 48px}
  .pf-col{gap:6px}
  .pf-lb{grid-template-columns:0 1fr 0}
  .pf-lb-nav{display:none}
  .pf-lb-stage{padding:0 0 16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}