/* JFF Galería de Río — colage */
.jffgr {
  background: radial-gradient(1200px 600px at 70% -10%, #16241e 0%, #0d1512 55%), #0d1512;
  font-family: Barlow, sans-serif;
  padding: 72px 24px 96px;
  box-sizing: border-box;
  overflow: hidden;
}
.jffgr *, .jffgr *::before, .jffgr *::after { box-sizing: border-box; }
.jffgr-inner { max-width: 1180px; margin: 0 auto; }
.jffgr-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 48px;
}
.jffgr-eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  color: #d9a441; letter-spacing: 0.28em; font-size: 12px; font-weight: 500; text-transform: uppercase;
}
.jffgr-eyebrow span { display: inline-block; width: 36px; height: 2px; background: #d9a441; }
.jffgr-title {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px, 7vw, 88px);
  line-height: 0.95; margin: 0; color: #f2ede1; letter-spacing: 0.02em;
}
.jffgr-note {
  font-family: Caveat, cursive; font-size: 26px; color: #b8c4b6;
  margin: 0 0 8px; max-width: 320px; line-height: 1.2; transform: rotate(-2deg);
}
.jffgr-collage { position: relative; width: 100%; aspect-ratio: 1100 / 910; }
.jffgr-backdrop {
  position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover;
  filter: blur(34px) saturate(0.8); opacity: 0.16; pointer-events: none;
}
.jffgr-print { position: absolute; margin: 0; transition: transform 0.35s ease; }
.jffgr-print:hover { transform: rotate(0deg) scale(1.04) !important; z-index: 20 !important; }
.jffgr-paper { background: #f6f2e8; padding: 4% 4% 0; box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
.jffgr-paper img { display: block; width: 100%; object-fit: cover; }
.jffgr-paper figcaption {
  font-family: Caveat, cursive; font-size: clamp(14px, 1.6vw, 21px);
  color: #33362e; margin: 0; padding: 6px 2px 10px; text-align: center;
}
.jffgr-tape {
  position: absolute; height: 26px; background: rgba(244,238,214,0.5);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.jffgr-tape-top { top: -12px; left: 36%; width: 30%; transform: rotate(-3deg); }
.jffgr-tape-left { top: -13px; left: -20px; width: 26%; transform: rotate(-42deg); }
.jffgr-tape-right { top: -13px; right: -20px; width: 26%; transform: rotate(42deg); }

.jffgr-p1 { left: 2%; top: 7%; width: 24%; transform: rotate(-5deg); z-index: 2; }
.jffgr-p1 img { aspect-ratio: 3 / 4; }
.jffgr-p2 { left: 25%; top: 1%; width: 19%; transform: rotate(3deg); z-index: 1; }
.jffgr-p2 img { aspect-ratio: 9 / 16; }
.jffgr-p3 { left: 38%; top: 11%; width: 30%; transform: rotate(-2deg); z-index: 3; }
.jffgr-p3 img { aspect-ratio: 1 / 1; }
.jffgr-p3 .jffgr-paper { box-shadow: 0 26px 60px rgba(0,0,0,0.55); }
.jffgr-p4 { left: 71%; top: 3%; width: 17.5%; transform: rotate(5deg); z-index: 2; }
.jffgr-p4 img { aspect-ratio: 688 / 1400; }
.jffgr-p5 { left: 9%; top: 50%; width: 19%; transform: rotate(-4deg); z-index: 2; }
.jffgr-p5 img { aspect-ratio: 9 / 15; }
.jffgr-p6 { left: 34%; top: 55%; width: 27%; transform: rotate(2deg); z-index: 4; }
.jffgr-p6 img { aspect-ratio: 4 / 3.4; }

.jffgr-quote {
  position: absolute; left: 66%; top: 62%; width: 22%; transform: rotate(4deg); z-index: 3;
  background: #efe7d2; padding: 22px 20px; box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.jffgr-quote-text {
  font-family: Caveat, cursive; font-size: clamp(16px, 2vw, 25px);
  color: #2e3129; margin: 0 0 8px; line-height: 1.25;
}
.jffgr-quote-by { font-family: Caveat, cursive; font-size: clamp(13px, 1.5vw, 19px); color: #7a6f52; margin: 0; }
.jffgr-stamp {
  position: absolute; bottom: 14px; right: 16px; width: 46px; height: 46px;
  border: 2px solid rgba(122,111,82,0.55); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transform: rotate(12deg);
  font-size: 9px; letter-spacing: 0.12em; color: rgba(122,111,82,0.8);
  text-transform: uppercase; text-align: center; line-height: 1.3;
}

/* Móvil: el colage pasa a mosaico de dos columnas, sin solapes */
@media (max-width: 760px) {
  .jffgr { padding: 56px 18px 72px; }
  .jffgr-note { font-size: 22px; }
  .jffgr-collage {
    aspect-ratio: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px;
    padding-top: 10px;
  }
  .jffgr-backdrop { display: none; }
  .jffgr-print, .jffgr-quote { position: static; width: auto; }
  .jffgr-p1 { transform: rotate(-2.5deg); }
  .jffgr-p2 { transform: rotate(1.5deg); }
  .jffgr-p3 { transform: rotate(-1.5deg); grid-column: 1 / -1; }
  .jffgr-p4 { transform: rotate(2.5deg); }
  .jffgr-p4 img { aspect-ratio: 688 / 1100; }
  .jffgr-p5 { transform: rotate(-2deg); }
  .jffgr-p6 { transform: rotate(1.5deg); grid-column: 1 / -1; }
  .jffgr-quote { transform: rotate(1.5deg); grid-column: 1 / -1; }
}