.photo-section {

  padding: 120px 32px 100px;

  background: #fff;

}

.photo-section__content {

  max-width: 1320px;

  margin: 0 auto;

}

.photo-section__intro {

  display: grid;

  gap: 18px;

  max-width: 640px;

  margin-bottom: 56px;

}

.photo-section__eyebrow {

  display: inline-block;

  font-size: 0.78rem;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  color: #767676;

}

.photo-section h2 {

  margin: 0;

  font-size: clamp(2.3rem, 3.4vw, 4rem);

  line-height: 1.02;

  letter-spacing: -0.04em;

  color: #111;

}

.photo-section p {

  max-width: 560px;

  font-size: 1rem;

  line-height: 1.9;

  color: #4f4f4f;

}


/* ==============================
   GALERÍA
   ============================== */

.photo-gallery {

  column-count: 4;

  column-gap: 24px;

}

.photo-card {

  position: relative;

  display: inline-block;

  width: 100%;

  margin: 0 0 24px;

  overflow: hidden;

  border-radius: 24px;

  cursor: pointer;

  background: #f6f6f6;

  opacity: 0;

  transform: translateY(36px);

  transition: opacity 0.75s ease, transform 0.75s ease;

  break-inside: avoid;

}

.photo-card.visible {

  opacity: 1;

  transform: translateY(0);

}


/* ==============================
   COLUMNAS RESPONSIVAS
   ============================== */

@media (max-width: 1200px) {

  .photo-gallery {

    column-count: 3;

  }

}

@media (max-width: 840px) {

  .photo-gallery {

    column-count: 2;

  }

}

@media (max-width: 620px) {

  .photo-gallery {

    column-count: 1;

  }

}


/* ==============================
   IMÁGENES DE LA GALERÍA
   ============================== */

.photo-card img {

  width: 100%;

  height: auto;

  object-fit: cover;

  display: block;

  transition: transform 0.35s ease, filter 0.35s ease;

}

.photo-card::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.28) 100%
  );

  opacity: 0;

  transition: opacity 0.35s ease;

}

.photo-card:hover img,

.photo-card:focus-within img {

  transform: scale(1.03);

}

.photo-card:hover::after,

.photo-card:focus-within::after {

  opacity: 1;

}


/* ==============================
   MODAL DE FOTOGRAFÍA
   ============================== */

.photo-modal {

  position: fixed;

  inset: 0;

  z-index: 9999;

  background: rgba(16, 16, 16, 0.92);

  display: none;

  align-items: center;

  justify-content: center;

  padding: 30px;

}

.photo-modal--open {

  display: flex;

}


/* Contenedor de la fotografía */

.photo-modal__frame {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: auto;

  max-width: 90vw;

  max-height: 90vh;

  margin: 0;

}


/* Fotografía ampliada */

.photo-modal__frame img {

  display: block;

  width: auto;

  height: auto;

  max-width: 90vw;

  max-height: 82vh;

  object-fit: contain;

  border-radius: 12px;

}


/* ==============================
   TEXTO DE LA FOTOGRAFÍA
   ============================== */

.photo-modal__caption {

  margin-top: 14px;

  max-width: 90vw;

  color: #f3f3f3;

  font-size: 0.9rem;

  letter-spacing: 0.02em;

  line-height: 1.5;

  text-align: center;

}


/* ==============================
   BOTÓN CERRAR
   ============================== */

.photo-modal__close {

  position: fixed;

  top: 25px;

  right: 25px;

  z-index: 10000;

  width: 42px;

  height: 42px;

  border: none;

  border-radius: 50%;

  background: rgba(255,255,255,0.12);

  color: #fff;

  font-size: 1.4rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition:
    background 0.2s ease,
    transform 0.2s ease;

}

.photo-modal__close:hover {

  background: rgba(255,255,255,0.25);

  transform: scale(1.05);

}


/* ==============================
   TABLET
   ============================== */

@media (max-width: 900px) {

  .photo-section {

    padding: 100px 20px 80px;

  }

  .photo-modal {

    padding: 20px;

  }

  .photo-modal__frame {

    max-width: 94vw;

    max-height: 85vh;

  }

  .photo-modal__frame img {

    max-width: 94vw;

    max-height: 78vh;

  }

}


/* ==============================
   CELULAR
   ============================== */

@media (max-width: 560px) {

  .photo-section__intro {

    gap: 12px;

  }

  .photo-section h2 {

    font-size: 2rem;

  }

  .photo-modal {

    padding: 15px;

  }

  .photo-modal__frame {

    max-width: 94vw;

    max-height: 82vh;

  }

  .photo-modal__frame img {

    max-width: 94vw;

    max-height: 75vh;

    border-radius: 10px;

  }

  .photo-modal__caption {

    max-width: 94vw;

    font-size: 0.8rem;

  }

  .photo-modal__close {

    top: 15px;

    right: 15px;

    width: 40px;

    height: 40px;

  }

}