/* ===== NAV en Portfolio: sin línea, fondo transparente, colores por tema ===== */
.page-portfolio .site-nav{
  background: transparent;            /* sin bloque blanco */
  color: var(--text);
  /* quitamos cualquier borde/línea */
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ===== Portfolio ===== */
:root{
  --pf-edge: 10px;
  --pf-gap: 10px;
  --pf-header-h: 84px;
  --pf-bg: var(--page-bg);
  --pf-fg: var(--text);
  --pf-dim: var(--muted, #9aa0a6);
  --ease: cubic-bezier(.2,.6,.2,1);
}
@media (max-width: 980px){
  :root{ --pf-edge: 8px; --pf-gap: 8px; --pf-header-h: 76px; }
}

.pf-works{
  color: var(--pf-fg);
  background: var(--pf-bg);
  padding: calc(var(--pf-header-h) + var(--pf-gap)) var(--pf-edge) var(--pf-gap);
}

/* encabezado sin subtítulo */
.pf-works__head{ margin: .6rem var(--pf-edge) 1.2rem; }
.pf-eyebrow{
  font: 400 .75rem/1 'PPNeueMontreal', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing:.22em; opacity:.65;
}
.pf-title{
  margin-top:.15rem;
  font: 800 clamp(2.4rem,6vw,5rem)/1 'PPNeueMontreal', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing:.08em;
}

.pf-grid{ display:grid; grid-template-columns:1fr 1fr; gap: var(--pf-gap); }
@media (max-width: 980px){ .pf-grid{ grid-template-columns:1fr; } }

.pf-item{ opacity:0; transform: translateY(18px); }
.pf-item.is-visible{
  opacity:1; transform: translateY(0);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}

/* tarjeta 1:1 */
.pf-square{
  position:relative; aspect-ratio: 1/1; overflow:hidden; border-radius: 12px;
  background:#111; isolation:isolate;
}

/* imagen base + blur */
.pf-bg, .pf-bg .pf-cover{ position:absolute; inset:0; }
.pf-cover{
  width:100%; height:100%; object-fit:cover;
  transition: transform .45s var(--ease), filter .45s var(--ease), opacity .3s;
  will-change: transform, filter;
}
.pf-square:hover .pf-cover{
  filter: blur(8px) saturate(.9) brightness(.85);
  transform: scale(1.035);
}

/* overlay */
.pf-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background: radial-gradient(80% 70% at 50% 55%, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 70%);
  opacity:.35; transition: opacity .25s var(--ease);
}
.pf-square:hover .pf-overlay{ opacity:.6; }

/* banco oculto */
.pf-images{ position:absolute; inset:-9999px; visibility:hidden; }

/* cluster centrado (previews 1:1) */
.pf-cluster{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.pf-thumb{
  position:absolute; top:50%; left:50%;
  width:50%; aspect-ratio:1/1; object-fit:cover; border-radius:10px;
  box-shadow: 0 18px 48px rgba(0,0,0,.5);
  transform: translate(-50%,-50%) scale(.92);
  opacity:0;
  transition: opacity .28s var(--ease), transform .35s var(--ease);
}
.pf-thumb.is-active{ opacity:1; transform: translate(-50%,-50%) scale(1); }

/* captions con máscara: 100% ocultas en reposo */
.pf-cap{ position:absolute; left:0; right:0; z-index:3; pointer-events:none; padding-inline: 14px; }
.pf-cap--top{ top:10px; height:22px; overflow:hidden; }
.pf-cap--bottom{ bottom:16px; overflow:hidden; }

.cap-inner{
  opacity:0; transform: translateY(-160%); transition: transform .45s var(--ease), opacity .25s var(--ease);
}
.pf-cap--bottom .cap-inner{ transform: translateY(180%); }
.pf-square:hover .pf-cap--top .cap-inner,
.pf-square:hover .pf-cap--bottom .cap-inner{
  opacity:1; transform: translateY(0);
}

/* tipografías coherentes + ajustes solicitados */
.mono{
  font-family: 'TheGoodMonolith', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:.2em; text-transform:uppercase; font-size:.75rem; opacity:.95;
}
.pf-name{
  font: 700 clamp(1rem,1.4vw,1.15rem)/1.15 'PPNeueMontreal', system-ui, sans-serif; /* bold */
  text-transform: uppercase; letter-spacing:.08em; text-align:center;
  white-space: nowrap;  /* misma línea */
}
.pf-role{
  font: 300 .85rem/1.3 'PPNeueMontreal', system-ui, sans-serif;
  text-align:center; margin-top:2px;
}

/* efecto INVERTIDO tipo nav (fill-sweep) para year, name y role */
.pf-invert{
  position: relative;
  display: inline-block;
  padding: 2px 4px;
  color: var(--text);
  transition: color .25s ease;
}
.pf-invert::after{
  content:"";
  position:absolute; inset:0;
  width:0%; z-index:-1;
  background-color: var(--text);
  transition: width .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pf-square:hover .pf-invert::after{ width:100%; }
.pf-square:hover .pf-invert{ color: var(--page-bg); }

.pf-bold{ font-weight: 800; }

/* ===== CTA antes del footer (reusa estilos del home) ===== */
.pf-cta{ padding: clamp(60px, 10vh, 120px) 24px 24px; }
.pf-cta .contact-cta__inner{ max-width: 900px; margin: 0 auto; text-align:center; }

/* === Footer marquee — igual que en Home (sin líneas) === */
.site-footer { padding-top: 0; }

.marquee{
  overflow: hidden;
  border-top: none;          /* pediste sin línea */
  border-bottom: none;       /* pediste sin línea */
  margin-top: 18px;
}

.marquee__track{
  display: inline-flex;
  gap: 2rem;
  white-space: nowrap;
  padding: 16px 0;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(26px, 5.5vw, 64px);
  color: var(--text);
  animation: marquee 22s linear infinite;
  will-change: transform;
}

@keyframes marquee{
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}

/* redondeos en móvil */
@media (max-width:520px){
  .pf-square, .pf-thumb{ border-radius:8px; }
}
/* =========================
   PATCH — Header compacto (Selected + Works en línea)
   ========================= */
.pf-works__head{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35ch;                 /* “Selected” pegadito a “Works” */
}
.pf-works__head .pf-eyebrow{  /* sin salto ni margen extra */
  margin: 0;
}
.pf-works__head .pf-title{
  margin: 0;
  line-height: 1;             /* alinea mejor con la eyebrow */
}

/* =========================
   PATCH — Footer (redes con estilo del Home)
   ========================= */
.footer-top{
  display: flex;
  justify-content: flex-end;
  padding-bottom: 8px;
}

.socials{
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0 24px;
}

.socials a{
  font-weight: 600;
  opacity: .9;
  color: var(--text);          /* respeta light/dark */
  text-decoration: none;
}

.socials a:hover{
  opacity: 1;
}