/* projects.css — página de proyectos */
.page-header {
  position: relative; isolation: isolate; overflow: clip; color: var(--white);
  background: linear-gradient(160deg, var(--blue-950), var(--blue-800) 120%);
  padding: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(3rem, 6vw, 5rem);
}
.page-header h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; max-width: 16ch; }
.page-header p { margin-top: 1.25rem; max-width: 56ch; font-size: var(--fs-md); color: rgb(255 255 255 / .82); }
.page-header .hero__rule { width: 110px; margin-bottom: 1.5rem; }

.gallery { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--section-y); background: var(--paper); }
.gallery__grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.gallery__grid .shot { aspect-ratio: 4 / 3; border-radius: var(--r-md); width: 100%; box-shadow: var(--shadow-xs); }
.gallery__grid .shot:hover { box-shadow: var(--shadow-md); }
@media (max-width: 575.98px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; } .gallery__grid .shot { border-radius: var(--r-sm); } }