/* ==========================================================
   GRUPO 8 BJ · GALERÍA 2026
   Hasta 100 fotografías: assets/img/galeria/1.jpg ... 100.jpg
   Ritmo editorial: fotos cuadradas de tamaño generoso + algunas 2x2.
   Sin piezas horizontales.
   ========================================================== */
.gallery-page{overflow-x:hidden;background:#fff;color:var(--text)}
.gallery-page main{overflow:hidden}

/* BANNER CORTO · MISMA LÓGICA QUE CONTACTO */
.gallery-banner{
  position:relative;
  min-height:340px;
  overflow:hidden;
  border-radius:0 0 26px 26px;
  background:#176ED6;
}
.gallery-banner-photo{
  position:absolute;
  inset:0;
  background-image:url("../img/galeria/1.jpg");
  background-size:cover;
  background-position:center 42%;
}
.gallery-banner-overlay{position:absolute;inset:0}
.gallery-banner-inner{
  position:relative;
  z-index:2;
  min-height:340px;
  display:flex;
  align-items:flex-start;
  padding-top:168px;
  padding-bottom:28px;
}
.gallery-banner-copy{width:min(100%,760px);color:#fff}
.gallery-banner-copy .eyebrow{margin-bottom:8px}
.gallery-banner-copy h1{
  margin:0;
  color:#fff;
  font-size:clamp(2.85rem,3.8vw,4.05rem);
  line-height:.94;
  letter-spacing:-.05em;
}

/* ==========================================================
   GALERÍA · ESCALA TIPO FOTO IMPRESA
   Desktop: 4 columnas. Una pieza 2x2 + cuatro 1x1 produce el
   mismo ritmo visual del Home, pero todas siguen siendo cuadradas.
   ========================================================== */
.gallery-section{
  padding:76px 0 96px;
  background:linear-gradient(180deg,#F7FAFE 0%,#fff 42%,#F7FAFE 100%);
}
.gallery-section>.container{container-type:inline-size}
.gallery-heading{margin-bottom:34px}
.gallery-heading h2{
  margin:0;
  font-size:var(--site-h2-size);
  line-height:var(--site-h2-line);
  letter-spacing:-.045em;
}

.gallery-mosaic{
  --gallery-cols:4;
  --gallery-gap:18px;
  display:grid;
  grid-template-columns:repeat(var(--gallery-cols),minmax(0,1fr));
  grid-auto-rows:calc((100cqw - 54px) / 4);
  grid-auto-flow:dense;
  gap:var(--gallery-gap);
  align-items:stretch;
}

.gallery-photo{
  position:relative;
  min-width:0;
  min-height:0;
  margin:0;
  overflow:hidden;
  grid-column:span 1;
  grid-row:span 1;
  aspect-ratio:1;
  border-radius:20px;
  background:#E7EFF8;
  box-shadow:0 10px 26px rgba(24,53,108,.08);
  isolation:isolate;
}

/* Fotos destacadas: siempre cuadradas, solo cambian de escala. */
.gallery-photo-large{
  grid-column:span 2;
  grid-row:span 2;
  aspect-ratio:auto;
  border-radius:24px;
  box-shadow:0 18px 42px rgba(24,53,108,.11);
}

.gallery-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 70%,rgba(10,40,86,.08) 100%);
  opacity:0;
  transition:opacity .28s ease;
}
.gallery-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  cursor:default;
  transform:none;
  transition:filter .25s ease;
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}
.gallery-photo:hover img{filter:brightness(.985)}
.gallery-photo:hover::after{opacity:.55}

.gallery-photo,
.gallery-mosaic{
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

/* Ritmo muy sutil: rompe la sensación de catálogo sin perder elegancia. */
.gallery-photo:nth-child(12n+5):not(.gallery-photo-large){transform:translateY(6px)}
.gallery-photo:nth-child(12n+10):not(.gallery-photo-large){transform:translateY(-6px)}
.gallery-photo:nth-child(15n+7):not(.gallery-photo-large){border-radius:24px}

@media(max-width:1100px){
  .gallery-mosaic{
    --gallery-cols:3;
    --gallery-gap:15px;
    grid-auto-rows:calc((100cqw - 30px) / 3);
  }
}

@media(max-width:720px){
  .gallery-banner{min-height:420px;border-radius:0 0 20px 20px}
  .gallery-banner-photo{background-position:58% center}
  .gallery-banner-inner{min-height:420px;align-items:flex-end;padding:210px 0 38px}
  .gallery-banner-copy h1{font-size:clamp(2.55rem,11vw,3.35rem)}
  .gallery-section{padding:54px 0 68px}
  .gallery-heading{margin-bottom:24px}
  .gallery-mosaic{
    --gallery-cols:2;
    --gallery-gap:10px;
    grid-auto-rows:calc((100cqw - 10px) / 2);
  }
  .gallery-photo{border-radius:14px;transform:none!important}
  .gallery-photo-large{border-radius:18px}
}

@media(prefers-reduced-motion:reduce){
  .gallery-photo,.gallery-photo img{transition:none!important;transform:none!important}
}