/* Ficha de obra: portada que se recoge con el scroll, hoja de datos en mono y galería según resolución real. */
.fcover { padding: 0 var(--pad); }
.fcover__frame { aspect-ratio: 16 / 9; max-height: 86svh; margin-inline: auto; transform-origin: top center; }
.fcover--mid .fcover__frame { max-width: 1100px; aspect-ratio: 3 / 2; }
.fcover__frame picture { height: 100%; overflow: hidden; }
.fcover__cap { margin-top: 12px; color: var(--ink-2); text-align: right; }
.fcover--mid .fcover__cap { max-width: 1100px; margin-inline: auto; }

.fbody {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 96px);
  padding: clamp(56px, 8vw, 120px) var(--pad);
}
.fbody__intro { font: 400 var(--t-big) / 1.25 var(--f-display); letter-spacing: -0.025em; text-wrap: pretty; }
.sheet { border-top: 2px solid var(--ink); align-self: start; }
.sheet__row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sheet dt { color: var(--blue); padding-top: 0.2em; }

.gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(48px, 6vw, 96px) var(--gap); padding: 0 var(--pad) clamp(64px, 8vw, 120px); }
.gal__fig { display: grid; gap: 10px; }
.gal__fig figcaption { color: var(--ink-2); }
.gal__fig--wide { grid-column: 2 / span 10; }
.gal__fig--mid { grid-column: span 7; }
.gal__fig--portrait { grid-column: span 5; }
.gal__fig--mid:nth-child(even), .gal__fig--portrait:nth-child(even) { margin-top: clamp(0px, 8vw, 140px); }
.gal__frame picture { overflow: hidden; }

.fnext {
  display: grid; gap: 28px; padding: clamp(64px, 8vw, 120px) var(--pad); border-top: 1px solid var(--line);
}
.fnext__link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26vw); gap: 8px var(--gap); align-items: end; text-decoration: none; }
.fnext__link .label { grid-column: 1; }
.fnext__title { grid-column: 1; font: 500 var(--t-h2) / 1.02 var(--f-display); letter-spacing: -0.035em; transition: color 0.3s; }
.fnext__link:hover .fnext__title { color: var(--blue); }
.fnext__frame { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 4 / 3; }
.fnext__frame picture { height: 100%; overflow: hidden; }
.fnext__all { justify-self: start; }

@media (max-width: 899px) {
  .fbody { grid-template-columns: 1fr; }
  .gal { grid-template-columns: 1fr; }
  .gal__fig--wide, .gal__fig--mid, .gal__fig--portrait { grid-column: auto; margin-top: 0 !important; }
  .fnext__link { grid-template-columns: 1fr; }
  .fnext__frame { grid-column: 1; grid-row: auto; }
}