/* ============================================================
   work.css — Página "All work" (Figma 477:5688)
   Carga DESPUÉS de styles.css. Header/footer/menú vienen de styles.css.
   ============================================================ */

.work-page{
  max-width:calc(var(--maxw) + var(--gutter) * 2); /* contenido interior = --maxw (1280) */
  margin:0 auto;
  padding:0 var(--gutter);
}

/* Header sin banda rosa: toma el mismo blanco (--light) del fondo, como Priordei */
.page-work .header{background:transparent}
/* Nav ABOUT/WORK con la misma tipografía y peso que Priordei (Aktiv Grotesk Medium) */
.page-work .nav{font-family:var(--grotesk)}

/* Línea negra separadora encima del footer (Figma 477:6112: border-top #292929) */
.page-work .site-footer{border-top:1px solid var(--ink)}

/* ---- Título + filtros ---- */
.work-intro{
  display:flex;flex-direction:column;align-items:center;gap:56px;
  max-width:738px;margin:0 auto;
  padding-top:64px;
  text-align:center;
}
.work-intro__title{
  font-family:var(--serif);font-weight:400;
  font-size:42px;line-height:52px;color:var(--ink);
}
.work-filters{
  display:flex;gap:39px;flex-wrap:wrap;justify-content:center;
}
.filter-btn{
  display:inline-block;text-align:center;
  font-family:var(--grotesk);font-weight:400;font-size:18px;line-height:17px;
  /* padding vertical asimétrico: centra ÓPTICAMENTE las mayúsculas de Aktiv Grotesk
     (su centro de caja queda 1.4px alto respecto a la línea) — total 32px → botón 49px */
  padding:17.4px 20px 14.6px;border:0;border-radius:32px;
  box-shadow:inset 0 0 0 1px var(--ink); /* contorno sin sumar tamaño */
  background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s;
}
.filter-btn:hover{background:var(--ink);color:var(--light)}
.filter-btn.is-active{background:var(--ink);color:var(--light);font-family:var(--grotesk-italic);font-weight:400;font-style:italic}

/* ---- Grid de proyectos (2 columnas uniformes) ---- */
.work-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:20px;row-gap:64px;
  align-items:start;
  margin-top:64px;
  padding-bottom:120px;
}
.wcard{display:flex;flex-direction:column;gap:16px}
.wcard[hidden]{display:none}

/* Aparición suave de las tarjetas al pulsar un filtro (fade + subida ligera, escalonada) */
@keyframes wcardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wcard--anim{animation:wcardIn 1.1s cubic-bezier(.33,0,.15,1) both}
@media (prefers-reduced-motion:reduce){.wcard--anim{animation:none}}

/* Portada (relación 630x500 de Figma) */
.wcard__cover{
  position:relative;display:block;width:100%;
  overflow:hidden;border-radius:2px;background:#f0f0f0;
  aspect-ratio:630/500;
}
.wcard__media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;border-radius:inherit;
}
/* Chivo Gruñón: encuadre desplazado como en Figma (img al 119%, left -15.6%) */
.wcard__cover--chivo .wcard__media{object-position:82% center}
/* Zoom sutil solo en portadas enlazadas */
a.wcard__cover .wcard__media{transition:transform .4s ease}
a.wcard__cover:hover .wcard__media{transform:scale(1.03)}

/* Ponte Guapo: vídeo de puma + franja azul (ola) + logo sobrepuesto */
.wcard__cover--pg{background:#fff}
.wcard__pg-wave{
  position:absolute;left:0;bottom:0;width:100%;height:auto;
  z-index:1;pointer-events:none;
}
.wcard__pg-logo{
  position:absolute;left:46.9%;top:72.4%;width:51.1%;height:auto;
  z-index:2;pointer-events:none;
}

/* Info bajo la portada */
.wcard__info{display:flex;flex-direction:column;gap:12px}
.wcard__head{display:flex;align-items:center;gap:20px}
.wcard__name{
  font-family:var(--grotesk);font-weight:700;
  font-size:17px;line-height:1.2;letter-spacing:.68px;
  text-transform:uppercase;white-space:nowrap;
}
.wcard__divider{width:2px;height:20px;background:var(--ink);flex-shrink:0}
.wcard__tag{
  font-family:var(--grotesk);font-weight:700;
  font-size:17px;line-height:1.2;white-space:nowrap;
}
.wcard__desc{
  font-family:var(--grotesk);font-weight:400;
  font-size:17px;line-height:1.4;color:#7c7c7c;
}

/* ============================================================
   Tablet (<=1024px): 2 columnas más juntas
   ============================================================ */
@media (max-width:1024px){
  .work-grid{column-gap:24px;row-gap:48px}
}

/* ============================================================
   Móvil (<=768px): 1 columna apilada
   ============================================================ */
@media (max-width:768px){
  .work-intro{padding-top:40px;gap:32px}
  .work-intro__title{font-size:32px;line-height:1.2}
  .work-filters{gap:12px}
  .filter-btn{font-size:16px;padding:13.7px 18px 10.3px} /* mismo centrado óptico a 16px */

  .work-grid{grid-template-columns:1fr;row-gap:40px;margin-top:48px;padding-bottom:80px}
  /* Nombres/tags largos pueden envolver: evita overflow horizontal */
  .wcard__head{flex-wrap:wrap}
  .wcard__name,.wcard__tag{white-space:normal}
}