/* Página Proyectos: 3 proyectos grandes arriba y el resto más chicos en una fila */
body { color: #000; background: #fff; }

.estampillas { padding: calc(var(--barra) + 14px) 1.7vw 90px; }
.estampillas-titulo {
  font-family: "Space Mono", monospace; font-weight: 700;
  font-size: clamp(30px, 3.3vw, 56px); line-height: 1; letter-spacing: -.02em;
  margin-bottom: clamp(30px, 4vw, 60px);
}

/* arriba los 3 más importantes en grande; abajo el resto, más chicos, todos en una fila */
.album-grande {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 22px); margin-bottom: clamp(10px, 1.4vw, 22px);
}
.album {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: clamp(8px, 1vw, 16px);
}
.foto-proyecto { display: block; overflow: hidden; aspect-ratio: 3 / 4; background: #ececec; }
.foto-proyecto img {
  --acercar: 1;
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--acercar));
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.foto-proyecto:hover img { transform: scale(calc(var(--acercar) * 1.04)); }
/* los proyectos chicos de abajo van en blanco y negro (al pasar el mouse vuelven a color) */
.album .foto-proyecto img { filter: grayscale(1); transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s; }
.album .foto-proyecto:hover img { filter: grayscale(0); }

/* Botón chico "Fashion Films" arriba a la derecha (mismo estilo que "Descargar PDF" del CV) */
.estampillas-cabeza { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.pastilla {
  display: inline-flex; align-items: center; gap: 8px;
  background: #4a4a4a; color: #fff; border-radius: 5px;
  padding: 3px 10px; font-family: var(--sans); font-size: clamp(13px, 1.2vw, 18px);
  transition: background .25s;
}
.pastilla:hover { background: #000; }

/* Celular: 2 por fila */
@media (max-width: 760px) {
  .estampillas { padding-left: 14px; padding-right: 14px; }
  .album-grande { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .album { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}