/* ============================================================
   WORK — fichas de categoría, galerías y páginas de proyecto
   ============================================================ */

.cat-hero,.project-hero{padding-block-start:calc(var(--section-y) + var(--nav-h))}
/* Los heroes van pegados a lo que sigue: sin esto quedaban dos secciones
   de aire completo, una encima de otra, y en las páginas de proyecto el
   hueco entre la descripción y la portada era enorme. */
.cat-hero{padding-block-end:var(--space-lg)}
.cat-hero + .band{padding-block-start:var(--space-lg)}
.project-hero{padding-block-end:var(--space-xl)}
.project-hero + .band{padding-block-start:var(--space-xl)}

.back{
  display:inline-block;font-size:var(--step--1);font-weight:var(--w-medium);
  text-decoration:none;margin-bottom:var(--space-md);color:var(--dim);
}
.back:hover{color:inherit}

/* ---------- Índice de categorías ---------- */
.cats{
  display:grid;gap:var(--space-md);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
}
.cat a{
  display:block;position:relative;text-decoration:none;
  border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/3;background:var(--slate);
  isolation:isolate;   /* que el z-index de dentro no se escape */
}
.cat__media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.55;transition:opacity var(--dur-base) var(--ease),
                          scale var(--dur-slow) var(--ease);
}
.cat a:hover .cat__media,
.cat a:focus-visible .cat__media{opacity:.75;scale:1.04}
.cat__body{
  position:absolute;inset-inline:0;inset-block-end:0;
  padding:var(--space-lg);color:var(--paper);
  display:grid;gap:.2rem;
  /* Degradado detrás del texto: sin esto, el nombre se pierde sobre
     una imagen clara y el contraste depende del proyecto que toque. */
  background:linear-gradient(to top,
    rgba(14,16,24,.92) 0%, rgba(14,16,24,.72) 45%, rgba(14,16,24,0) 100%);
}
.cat__name{font-size:var(--step-2);font-weight:var(--w-bold);letter-spacing:var(--track-tight)}
.cat__count{font-size:var(--step--1);opacity:.82}

/* ---------- Galería de proyectos ---------- */
.grid{
  display:grid;gap:var(--space-md);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
}
.card a{
  display:block;position:relative;text-decoration:none;
  border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:4/3;background:var(--hairline);isolation:isolate;
}
.card__media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:scale var(--dur-slow) var(--ease);
}
.card a:hover .card__media,
.card a:focus-visible .card__media{scale:1.05}
.card__media--empty{background:var(--hairline)}

/* El nombre aparece al hacer hover, como en el portafolio anterior.
   Con teclado aparece igual al enfocar: si solo respondiera al mouse,
   quien navega con Tab nunca sabría qué proyecto es. */
.card__label{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--space-md);color:var(--paper);
  background:linear-gradient(to top,
    rgba(14,16,24,.92) 0%, rgba(14,16,24,.55) 50%, rgba(14,16,24,.1) 100%);
  opacity:0;transition:opacity var(--dur-base) var(--ease);
}
.card a:hover .card__label,
.card a:focus-visible .card__label{opacity:1}
.card__title{font-size:var(--step-1);font-weight:var(--w-bold);
  letter-spacing:var(--track-tight);line-height:1.15}
.card__meta{font-size:var(--step--1);opacity:.85;margin-block-start:.25rem}

/* En táctil no hay hover: el nombre se queda siempre visible.
   Si no, en un celular las tarjetas no dirían qué son. */
@media (hover:none){
  .card__label{opacity:1}
}

/* ---------- Página de proyecto ---------- */
.project__title{font-size:var(--step-5);max-width:18ch}
.project__meta{
  margin-block-start:var(--space-md);color:var(--dim);
  font-size:var(--step--1);font-variant-numeric:tabular-nums;
}
.project__desc{margin-block-start:var(--space-lg);max-width:56ch}

.pieces{display:grid;gap:var(--space-2xl) var(--space-md)}
/* Sin contenedor: la pieza se apoya directo sobre el fondo de la página.
   Antes tenía fondo gris y las imágenes se ajustaban con object-fit,
   así que casi ninguna llenaba su caja y se veía el marco alrededor. */
.piece{margin:0;background:none;border-radius:0}
.piece img,.piece video{
  display:block;width:100%;height:auto;
  /* Sin max-height ni object-fit: la imagen manda su propia proporción
     y ocupa todo el ancho que le toque. */
}
/* El video sí conserva una esquina redondeada: lleva controles del
   navegador encima y sin ella se ven pegados al filo. */
.piece--video video{border-radius:var(--r-md)}

/* ---------- Layout de las piezas de un proyecto ----------
   Lo decide el nombre del archivo original: "1. full portada.png" va a
   todo lo ancho, "2. galeria.png" va en rejilla de dos columnas.
   Dos columnas fijas para que dos piezas de galería seguidas queden
   emparejadas; una pieza full ocupa las dos. */
.pieces{grid-template-columns:repeat(2,minmax(0,1fr))}
.piece--full{grid-column:1 / -1}
.piece--galeria{grid-column:span 1}
.piece--galeria img{max-height:none}
@media (max-width:700px){
  .pieces{grid-template-columns:minmax(0,1fr)}
  .piece--galeria{grid-column:1 / -1}
}

/* ---------- Navegación al cerrar un proyecto ---------- */
.project-nav{padding-block-start:var(--space-2xl)}
.project-nav .wrap{
  display:flex;gap:var(--space-md);flex-wrap:wrap;
  justify-content:space-between;align-items:center;
  padding-block-start:var(--space-lg);
  border-block-start:1px solid var(--hairline);
}