/* ==========================================================================
   Portafolio — estilos específicos
   ========================================================================== */
.pf-hero { padding-top: 120px; padding-bottom: 50px; text-align: center; }
.pf-hero .eyebrow { margin-bottom: 26px; }
.pf-title {
  font-family: var(--serif); font-size: clamp(40px, 6vw, 84px); font-weight: 400;
  margin: 0 0 24px; letter-spacing: -0.03em; line-height: 0.98;
}
.pf-hero .lede { max-width: 600px; margin: 0 auto; }
.pf-hero .filters { margin-top: 46px; }

.pf-list { padding-top: 20px; padding-bottom: 90px; }
.pf-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 46px 24px; }
.pf-card { display: flex; flex-direction: column; }
.pf-media {
  aspect-ratio: 9/16; position: relative; overflow: hidden; background: var(--surface);
  box-shadow: 0 16px 34px rgba(0,0,0,0.4); margin-bottom: 22px;
  transition: transform 0.85s var(--ease), box-shadow 0.85s;
}
.pf-card:hover .pf-media { transform: translateY(-6px); box-shadow: 0 36px 64px rgba(0,0,0,0.55); }
.pf-media .slot { transition: transform 1.4s var(--ease); }
.pf-card:hover .pf-media .slot { transform: scale(1.05); }
.pf-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,15,14,0.42) 0%, transparent 34%, transparent 70%, rgba(16,15,14,0.55) 100%);
}
.pf-media .tag { top: 14px; left: 14px; padding: 5px 10px; }
.pf-media .play { top: 50%; width: 54px; height: 54px; background: rgba(16,15,14,0.3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pf-media .play::before { border-top-width: 8px; border-bottom-width: 8px; border-left-width: 13px; }
.pf-card:hover .play { background: var(--gold); border-color: var(--gold); }
.pf-card h2 {
  font-family: var(--serif); font-size: clamp(18px, 1.5vw, 22px); font-weight: 400;
  margin: 0 0 9px; letter-spacing: -0.01em; line-height: 1.25;
}
.pf-type { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.pf-role { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; font-weight: 300; flex: 1; text-wrap: pretty; }
.pf-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory);
  transition: color 0.45s, gap 0.45s;
}
.pf-card:hover .pf-link { color: var(--gold); gap: 12px; }
/* En móvil el enlace es fino: se le da alto de toque sin moverlo de sitio. */
@media (pointer: coarse), (max-width: 760px) {
  .pf-link { padding: 12px 0; margin: -12px 0; }
}

.pf-quote {
  max-width: 780px; margin: 0 auto; text-align: center;
  font-family: var(--serif); font-size: clamp(24px, 2.8vw, 40px); font-weight: 400;
  line-height: 1.24; letter-spacing: -0.02em; color: var(--ivory); text-wrap: balance;
}
.pf-quote-sec, .pf-cta { padding-bottom: 130px; }
.pf-cta { text-align: center; }
.pf-cta .h2 { font-size: clamp(28px, 3.6vw, 46px); margin: 0 0 18px; }
.pf-cta .lede { line-height: 1.8; max-width: 520px; margin: 0 auto 36px; }
.pf-cta .btn { padding: 17px 34px; }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 200; background: rgba(6,6,5,0.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 28px; overflow-y: auto;
  animation: v2Fade 0.35s ease both;
}
.modal[hidden] { display: none; }
.modal-close {
  position: fixed; top: 22px; right: 22px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(244,241,236,0.3); background: rgba(16,15,14,0.8); color: var(--ivory);
  cursor: pointer; font-size: 16px; z-index: 210; transition: border-color 0.4s, color 0.4s;
}
.modal-close:hover { border-color: var(--gold); color: var(--gold); }
.modal-inner {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 46px; align-items: center;
  width: min(1020px, 100%); max-height: 100%; overflow-y: auto; margin: auto;
  background: #14130F; border: 1px solid var(--line); padding: 40px; position: relative;
  animation: v2Rise 0.5s var(--ease) both;
}
.modal-media { aspect-ratio: 9/16; position: relative; overflow: hidden; background: var(--surface); }
.modal-media:has(iframe) { aspect-ratio: auto; background: #000; }
.modal-embed { display: block; width: 100%; height: min(707px, 76vh); border: 0; background: #000; }
.modal-cat { display: block; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.modal-inner h2 {
  font-family: var(--serif); font-size: clamp(28px, 3vw, 44px); font-weight: 400;
  margin: 0 0 20px; letter-spacing: -0.02em; line-height: 1.06;
}
.modal-dl { margin: 0 0 26px; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 13px; }
.modal-dl dt { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.modal-dl dd { margin: 0; color: var(--body); font-weight: 300; line-height: 1.6; }
.modal-desc { font-size: 14.5px; line-height: 1.85; color: var(--muted); margin: 0 0 34px; font-weight: 300; text-wrap: pretty; }
.modal-link { padding: 16px 32px; font-size: 10.5px; letter-spacing: 0.18em; }

/* Footer simple */
.pf-footer {
  padding: 60px 64px 46px; border-top: 1px solid rgba(244,241,236,0.1);
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: center;
}
.pf-footer a { color: var(--muted-2); font-size: 12.5px; letter-spacing: 0.06em; }
.pf-footer a:hover { color: var(--gold); }

@media (max-width: 1100px) {
  .pf-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .modal-inner { grid-template-columns: minmax(0,1fr); padding: 30px 24px; gap: 30px; }
  .modal-media { aspect-ratio: 4/3; }
  .pf-footer { padding-left: 26px; padding-right: 26px; }
}
@media (max-width: 760px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 16px; }
  .pf-card:hover .pf-media { transform: none; box-shadow: 0 16px 34px rgba(0,0,0,0.4); }
  .pf-footer { padding-bottom: 92px; }
}