.gallery-hero { position: relative; overflow: hidden; background: var(--navy); }
.gallery-hero > img { width: 100%; height: clamp(300px, 31vw, 500px); object-fit: cover; object-position: center; }

.gallery-list { padding: 56px 24px 92px; background: #fafaf7; }
.gallery-list__inner { display: grid; width: min(100%, 1190px); gap: 14px; margin: auto; }
.gallery-project { min-width: 0; scroll-margin-top: 115px; }
.gallery-project__surface { position: relative; isolation: isolate; display: grid; grid-template-columns: 170px minmax(0, 1fr) 170px; align-items: center; width: 100%; min-height: 200px; padding: 25px 34px; overflow: hidden; border-radius: 16px; color: var(--gallery-ink); box-shadow: 0 10px 28px #12214714; }
/* Las torres alternan de lado y quedan recortadas dentro de cada portada. */
.gallery-project__surface::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; width: 270px; height: 200px; background: url('/assets/figma/desktop-elemento-grafico-correccion2.png') center / 100% 100% no-repeat; opacity: 1; transform: scaleX(-1); pointer-events: none; }
.gallery-project:nth-child(even) .gallery-project__surface::before { right: 0; left: auto; transform: none; }
.gallery-project__surface::after { content: ""; position: absolute; z-index: 1; inset: 0; background: var(--gallery-tint); }
.gallery-project__surface > :not(.gallery-project__cover) { position: relative; z-index: 2; }
.gallery-project__cover, .gallery-project__cover img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gallery-project__cover img { object-fit: cover; object-position: center 45%; filter: saturate(.8); transition: transform .45s ease; }
.gallery-project h2 { grid-column: 2; font-size: max(13px, calc(clamp(30px, 3vw, 42px) * var(--content-text-scale, 1))); font-style: italic; font-weight: 400; line-height: 1.15; text-align: center; text-shadow: 0 2px 12px #1624401f; }
.gallery-project__status { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 145px; padding: 10px 13px; border: 1px solid currentColor; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.gallery-project__status { opacity: .9; }
.gallery-project summary { list-style: none; cursor: pointer; }
.gallery-project summary::-webkit-details-marker { display: none; }
.gallery-project summary::marker { content: ""; }
.gallery-project summary:hover .gallery-project__cover img { transform: scale(1.035); }
.gallery-project[open] .gallery-project__surface { border-radius: 16px 16px 0 0; }
.gallery-project__panel { padding: 36px; border: 1px solid #e4e8df; border-top: 0; border-radius: 0 0 16px 16px; background: #fff; box-shadow: 0 18px 34px #12214711; }
.gallery-project__intro { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 26px; color: var(--navy); }
.gallery-project__eyebrow { color: #8b6b34; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gallery-project h3 { margin-top: 8px; font-size: max(13px, calc(clamp(25px, 2.5vw, 34px) * var(--content-text-scale, 1))); font-style: italic; font-weight: 400; }
.gallery-project__intro p { max-width: 42ch; color: #586567; font-size: max(13px, calc(14px * var(--content-text-scale, 1))); line-height: 1.5; }
.gallery-project__hint { display: none; }
.gallery-project__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gallery-project__photo { position: relative; display: block; width: 100%; min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #e9ece7; aspect-ratio: 4 / 3; cursor: zoom-in; }
.gallery-project__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-project__photo:hover img, .gallery-project__photo:focus-visible img { transform: scale(1.035); }
.gallery-project__photo-index { position: absolute; right: 12px; bottom: 12px; padding: 6px 9px; border-radius: 999px; background: #122147b0; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; opacity: .72; }
.gallery-project__photo:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.gallery-lightbox { width: min(94vw, 1200px); max-width: 94vw; max-height: 92dvh; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #fff; color: var(--navy); box-shadow: 0 30px 85px #060d1f96; }
.gallery-lightbox::backdrop { background: #071022e0; backdrop-filter: blur(5px); }
.gallery-lightbox__toolbar { display: flex; min-height: 56px; align-items: center; justify-content: space-between; padding: 7px 14px 7px 22px; background: #101b31; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gallery-lightbox__stage { display: flex; align-items: center; justify-content: center; background: #101b31; }
.gallery-lightbox__media { display: flex; min-width: 0; align-items: center; justify-content: center; }
.gallery-lightbox__media img { width: auto; max-width: 100%; max-height: min(calc(92dvh - 142px), 740px); object-fit: contain; }
/* La imagen de cocina incluye un margen claro dentro del archivo original. */
.gallery-lightbox__media img[src$="/cocina-referencia.png"] { clip-path: inset(9.8% 4.2% 4.3% 4.9%); }
.gallery-lightbox__close, .gallery-lightbox__arrow { display: grid; width: 48px; height: 48px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: 0 5px 16px #07102230; }
.gallery-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gallery-lightbox__arrow:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.gallery-lightbox__close:hover, .gallery-lightbox__arrow:hover { background: #264778; }
.gallery-lightbox__close { font-size: 28px; line-height: 1; }
.gallery-lightbox__arrow .ri-icon { font-size: 27px; }
.gallery-lightbox__footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; padding: 15px 22px; font-size: max(13px, calc(14px * var(--content-text-scale, 1))); line-height: 1.4; }
.gallery-lightbox__footer p { min-width: 0; }
.gallery-lightbox__controls { display: flex; flex: none; align-items: center; gap: 14px; }
.gallery-lightbox__controls span { min-width: 44px; font-weight: 700; text-align: center; white-space: nowrap; }

.gallery-project--torre-tiber { --gallery-tint: linear-gradient(90deg, #547263dc, #698475cc); --gallery-ink: #fff; }
.gallery-project--torre-ganges { --gallery-tint: linear-gradient(90deg, #e99576e8, #f6a484d9); --gallery-ink: #fff; }
.gallery-project--torre-missisipi { --gallery-tint: linear-gradient(90deg, #aa1d5bdc, #c43270d9); --gallery-ink: #fff; }
.gallery-project--torre-danubio { --gallery-tint: linear-gradient(90deg, #ede9dedc, #f1eee4cf); --gallery-ink: var(--navy); }
.gallery-project--torre-felix-cuevas { --gallery-tint: linear-gradient(90deg, #8d8e88d6, #afaea8ca); --gallery-ink: #fff; }
.gallery-project--torre-guadalupe { --gallery-tint: linear-gradient(90deg, #e2d3d9e0, #eadfe2d5); --gallery-ink: var(--navy); }

@media (max-width: 1200px) {
  .gallery-hero > img { height: clamp(250px, 33vw, 400px); }
}
@media (max-width: 800px) {
  .gallery-list { padding: 36px 18px 70px; }
  .gallery-project__surface::before { width: 175px; height: 130px; }
  .gallery-project__surface { grid-template-columns: 135px minmax(0, 1fr) 135px; min-height: 130px; padding: 22px; }
  .gallery-project__status { min-width: 0; padding: 8px 11px; font-size: 11px; }
  .gallery-project__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .gallery-lightbox { width: 96vw; max-width: 96vw; }
  .gallery-lightbox__toolbar { min-height: 52px; padding: 5px 10px 5px 15px; font-size: 10px; }
  .gallery-lightbox__media img { max-height: calc(92dvh - 190px); }
  .gallery-lightbox__footer { flex-direction: column; align-items: stretch; gap: 12px; padding: 13px 15px 15px; font-size: 12px; }
  .gallery-lightbox__controls { justify-content: space-between; }
  .gallery-hero > img { height: clamp(190px, 55vw, 230px); }
  .gallery-list { padding: 26px 14px 55px; }
  .gallery-list__inner { gap: 10px; }
  .gallery-project { scroll-margin-top: 74px; }
  .gallery-project__surface::before { width: 150px; height: 150px; }
  .gallery-project__surface { grid-template-columns: 1fr; grid-template-rows: 1fr; min-height: 150px; gap: 12px; padding: 18px 20px; }
  .gallery-project h2 { grid-column: 1; grid-row: 1; align-self: center; font-size: max(13px, calc(clamp(26px, 7.5vw, 34px) * var(--content-text-scale, 1))); }
  .gallery-project__status { position: absolute; top: 18px; right: 20px; font-size: 10px; }
  .gallery-project__panel { padding: 22px 16px 18px; }
  .gallery-project__intro { display: block; margin-bottom: 20px; }
  .gallery-project__intro p { margin-top: 10px; font-size: 13px; }
  .gallery-project__hint { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #50616b; font-size: 12px; font-weight: 700; }
  .gallery-project__hint span { color: var(--navy); font-size: max(13px, calc(18px * var(--content-text-scale, 1))); }
  .gallery-project__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: 12px; margin: 0 -16px; padding: 0 16px 14px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .gallery-project__photo { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-project__cover img, .gallery-project__photo img { transition: none; }
  .gallery-project summary:hover .gallery-project__cover img, .gallery-project__photo:hover img { transform: none; }
}