/* Página de proyecto (estilo Sort Office) */

/* Línea de información */
.p-info {
  display: grid; grid-template-columns: 4% 14% 32% 1fr auto; gap: var(--gutter); align-items: start;
  padding: clamp(24px, 3vw, 40px) var(--gutter) 16px;
}
.p-info p { max-width: 46em; }
.p-services { color: var(--muted); }
.p-year { justify-self: end; }

/* Collage de imágenes */
.p-gallery { display: grid; gap: var(--gutter); padding: 0 var(--gutter); }
.p-row { display: flex; gap: var(--gutter); align-items: flex-start; }
.p-row figure { margin: 0; flex: 0 1 calc(var(--w) - var(--gutter) / 2); min-width: 0; }
.p-row img, .p-row video { display: block; width: 100%; height: auto; }
.p-video { aspect-ratio: 932 / 988; object-fit: cover; background: var(--soft); }

/* Piezas hechas en HTML */
.p-tile { background: #FFFBF4; }
.seasons { display: grid; grid-template-columns: 1fr 1fr; }
.seasons div {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  display: flex; align-items: flex-end; padding: 12px;
  background: var(--g); color: #F6EFE4;
}
.seasons div::before { content: ""; position: absolute; right: -24%; top: -14%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--p); }
.seasons span { position: relative; }

.p-type { display: grid; gap: 14px; padding: clamp(20px, 3vw, 40px); color: #2B1712; }
.p-type p { margin: 0; }
.t-gloock { font-family: "Gloock", Georgia, serif; font-size: clamp(36px, 4.6vw, 72px); line-height: 1; }
.t-hanken { font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: clamp(15px, 1.4vw, 20px); }
.t-courier { font-family: "Courier Prime", ui-monospace, monospace; font-size: clamp(13px, 1.2vw, 16px); }
.t-damion { font-family: "Damion", cursive; font-size: clamp(28px, 3vw, 44px); color: #5A1426; }

/* Navegación al final */
.p-next {
  display: flex; justify-content: space-between;
  padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(32px, 4vw, 56px);
}
.p-next span { color: var(--muted); }

@media (max-width: 900px) {
  .p-info { grid-template-columns: auto 1fr auto; }
  .p-info p { grid-column: 1 / -1; grid-row: 2; }
  .p-info .p-services { grid-row: 3; }
  .p-year { grid-column: 3; grid-row: 1; }
}
@media (max-width: 600px) {
  .p-row { flex-direction: column; }
  .p-row figure { flex-basis: auto; width: 100%; }
}