/* Página nueva de portfolio. No modifica la home. */
.portfolio-body{background:var(--warm)}
.portfolio-body .nav a[aria-current="page"]{opacity:1;font-weight:700}
.portfolio-main{padding:0 4vw 6vw}
.portfolio-intro{padding:clamp(32px,4vw,64px) 0 32px;max-width:1120px}
.portfolio-intro h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.4rem,4.6vw,4.5rem);line-height:.98;letter-spacing:-.055em;margin:14px 0 18px}
.portfolio-intro h1 span{color:var(--pink)}
.portfolio-intro>p:last-child{max-width:760px;font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.6;opacity:.7}
.portfolio-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1600px;margin:0 auto}
.portfolio-card{display:flex;flex-direction:column;min-width:0;background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.portfolio-card:hover,.portfolio-card:focus-visible{transform:translateY(-6px);box-shadow:0 24px 60px rgba(17,17,17,.10);outline:none}
.portfolio-card__browser{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line);font:600 .72rem 'DM Sans';letter-spacing:.02em}
.portfolio-card__browser span{opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portfolio-card__browser b{color:var(--pink);white-space:nowrap}
.portfolio-card__shot{position:relative;aspect-ratio:16/10;background:#ece8e2;overflow:hidden}
.portfolio-card__fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:24px;background:linear-gradient(145deg,#f4eee7,#e9e0d7)}
.portfolio-card__fallback span{font-size:.72rem;font-weight:700;letter-spacing:.16em;color:var(--pink)}
.portfolio-card__fallback strong{font:700 clamp(1.8rem,3vw,3.2rem)/.88 'Space Grotesk';letter-spacing:-.06em;max-width:10ch}
.portfolio-card__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .3s ease,transform .55s ease}
.portfolio-card__shot img.is-loaded{opacity:1}
.portfolio-card:hover .portfolio-card__shot img{transform:scale(1.018)}
.portfolio-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px;flex:1}
.portfolio-card__category{margin:0;font-size:.69rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;opacity:.5}
.portfolio-card__body h2{font:700 clamp(1.4rem,1.8vw,2rem)/1 'Space Grotesk';letter-spacing:-.055em;margin:0}
.portfolio-card__body>p:not(.portfolio-card__category){margin:0;max-width:620px;line-height:1.6;opacity:.68}
.portfolio-card__link{margin-top:auto;padding-top:7px;font-size:.8rem;font-weight:700;border-bottom:1px solid currentColor}
.portfolio-cta{max-width:1000px;margin:7vw 0 1vw;padding-top:4vw;border-top:1px solid var(--line)}
.portfolio-cta h2{font:700 clamp(2.8rem,6vw,6.6rem)/.93 'Space Grotesk';letter-spacing:-.06em;margin:16px 0 28px}
@media(min-width:901px) and (max-width:1199px){
  .portfolio-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .portfolio-main{padding-left:18px;padding-right:18px}
  .portfolio-intro{padding:40px 0 28px}
  .portfolio-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .portfolio-card__body{padding:19px}
  .portfolio-cta{margin-top:74px;padding-top:44px}
}
@media(max-width:600px){
  .portfolio-gallery{grid-template-columns:1fr}
  .portfolio-intro{padding:28px 0 24px}
  .portfolio-intro h1{font-size:clamp(2rem,9.5vw,3rem)}
  .portfolio-card__browser{font-size:.67rem}
  .portfolio-card__fallback{padding:18px}
  .portfolio-card__fallback strong{font-size:2.5rem}
}