/* ============================================================
   Dtache Music — Pagina de portafolio
   Usa los mismos tokens de landing.css (colores, tipografias).
   ============================================================ */

.dtache-portafolio .pf-intro{
  padding-block:calc(var(--header) + clamp(48px,7vw,96px)) clamp(44px,6vw,80px);
  margin-top:calc(var(--header) * -1);
}
.pf-title{
  font-family:var(--f-display);font-weight:400;font-stretch:100%;
  font-size:clamp(38px,6.4vw,82px);line-height:.98;letter-spacing:-.015em;
  margin:18px 0 0;text-wrap:balance;color:var(--paper);
}
.pf-title em{font-family:var(--f-serif);font-style:italic;font-weight:400}
.pf-intro .lead{margin-top:22px}
.pf-meta{
  display:flex;flex-wrap:wrap;gap:10px 0;align-items:center;margin-top:clamp(28px,4vw,44px);
  padding-top:18px;border-top:1px solid var(--line);
  font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--silver);
}
.pf-meta span+span::before{content:"";display:inline-block;width:clamp(14px,3vw,40px);height:1px;background:var(--graphite);margin-inline:14px;vertical-align:middle}

.pf-grid-wrap{padding-block:clamp(56px,8vw,110px) clamp(72px,10vw,140px)}
.pf-destacado{margin-bottom:clamp(16px,2vw,24px)}
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:760px){.pf-grid{grid-template-columns:1fr}}

.pf-item{display:flex;flex-direction:column;background:var(--carbon);border-radius:3px;overflow:hidden}
.pf-item--destacado{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:900px){.pf-item--destacado{grid-template-columns:1fr}}

.pf-media{position:relative;aspect-ratio:16/9;background:#0e0e11;overflow:hidden}
.pf-item--destacado .pf-media{height:100%}
.pf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pf-item:hover .pf-media img{transform:scale(1.03)}
.pf-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.pf-body{display:flex;flex-direction:column;gap:6px;padding:clamp(20px,2.4vw,30px);flex:1}
.pf-item--destacado .pf-body{justify-content:center;gap:8px}
.pf-rol{font:500 11px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pf-body h3{font:600 clamp(20px,2.2vw,28px)/1.15 var(--f-display);letter-spacing:-.01em;color:var(--paper);margin:2px 0 0;text-wrap:balance}
.pf-artista{font-size:15px;color:var(--paper);opacity:.85}
.pf-nota{font-size:14px;color:var(--silver);line-height:1.5}
.pf-body .link-wa{margin-top:auto;align-self:flex-start;padding-top:16px}

/* Portada mas alta en el destacado para que no se vea cortado en movil */
@media (max-width:900px){.pf-item--destacado .pf-media{aspect-ratio:16/10}}