.gallery-nav {
  align-items: center;
  display: flex;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 28px;
}

.gallery-hero {
  align-items: flex-end;
  background:
    linear-gradient(90deg, rgba(6, 31, 25, 0.88), rgba(6, 31, 25, 0.18)),
    url("imagenes/pura-vida.jpeg") center / cover;
  color: white;
  display: flex;
  justify-content: space-between;
  min-height: 72vh;
  padding: 90px clamp(20px, 8vw, 120px);
}

.gallery-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 9vw, 8rem);
  letter-spacing: -0.05em;
  line-height: 0.88;
  margin: 0 0 28px;
}

.gallery-hero h1 em { color: var(--lime); }
.gallery-hero p:last-child { color: rgba(255, 255, 255, 0.75); font-size: 1.1rem; }
.scroll-note { color: var(--lime); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }

.photo-gallery {
  background: var(--cream);
  display: grid;
  gap: 18px;
  grid-auto-rows: 300px;
  grid-template-columns: repeat(3, 1fr);
  padding: 90px clamp(20px, 5vw, 72px);
}

.gallery-item {
  background: var(--forest);
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }
.gallery-item img { height: 100%; transition: transform 0.7s ease; }
.gallery-item:hover img { transform: scale(1.045); }
.gallery-item span {
  background: linear-gradient(transparent, rgba(4, 25, 20, 0.78));
  bottom: 0;
  color: white;
  font-weight: 700;
  left: 0;
  padding: 55px 22px 20px;
  position: absolute;
  text-align: left;
  width: 100%;
}

.reveal { opacity: 0; transform: translateY(45px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

.gallery-cta { padding: 110px 20px; text-align: center; }
.gallery-cta h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.5rem, 5vw, 5rem); margin: 0 0 35px; }
.gallery-cta .header-cta { display: inline-block; }

.lightbox {
  align-items: center;
  background: rgba(3, 18, 15, 0.96);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 30px 90px;
  position: fixed;
  z-index: 100;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-height: 88vh; max-width: 1100px; text-align: center; }
.lightbox img { max-height: 80vh; object-fit: contain; }
.lightbox figcaption { color: white; margin-top: 14px; }
.lightbox-close, .lightbox-arrow { background: none; border: 0; color: white; cursor: pointer; font-size: 2rem; position: absolute; }
.lightbox-close { right: 30px; top: 22px; }
.lightbox-arrow.previous { left: 30px; }
.lightbox-arrow.next { right: 30px; }

@media (max-width: 760px) {
  .gallery-nav .header-cta { display: none; }
  .gallery-hero { align-items: flex-start; flex-direction: column; justify-content: flex-end; }
  .photo-gallery { grid-auto-rows: 250px; grid-template-columns: 1fr; }
  .gallery-item.tall { grid-row: span 1; }
  .gallery-item.wide { grid-column: span 1; }
  .lightbox { padding: 65px 20px; }
  .lightbox-arrow { bottom: 18px; top: auto; }
}