/* Generated split from dual.css + convenios.css
   File: galeria.css
*/

/* ===== Galería (quilt elegante) para .gallery existente ---------------------------- ===== */

/* V2 galería  */
/* ==== Galería DUAL en una sola pantalla (alto controlado + scroll lateral) ==== */
.galleryDual {
  --gap: 0.75rem;
  --cols-min: 260px; /* ancho base de “tarjeta” */
  height: clamp(420px, 70svh, 720px); /* bloquea el alto a viewport */
  display: grid;
  gap: var(--gap);

  /* Rejilla horizontal: más columnas hacia la derecha */
  grid-auto-flow: row;
  grid-auto-columns: minmax(var(--cols-min), 1fr);

  /* 2 ó 3 filas fijas dentro del alto */
  grid-template-columns: repeat(
    7,
    1fr
  ); /* sube a 3 si quieres piezas más bajas */

  padding-bottom: 0.25rem; /* margen para evitar recorte de sombra */
  overflow-x: auto;
  overflow-y: hidden;

  /* UX suave y “carrusel” natural */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}



/* Tarjeta base */
.galleryDual .tile {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e6ebf1;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);

  /* ocupa 1 columna x 1 fila por defecto */
  grid-row: span 1;
  grid-column: span 1;

  /* que cada ítem pueda “anclarse” al snap */
  scroll-snap-align: start;
}



/* Variantes de composición */
.galleryDual .wide {
  grid-column: span 2;
}

 /* ancha (2 columnas) */
.galleryDual .tall {
  grid-row: span 2;
}

 /* alta (ocupa las 2 filas) */

/* Imágenes siempre cubriendo el cuadro */
.galleryDual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.25s ease;
}


.galleryDual a:hover img,
.galleryDual a:focus-visible img {
  transform: scale(1.02);
}



/* Float */

/* ===== Lightbox ===== */
.lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 20, 30, 0.82);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}


.lb__figure {
  max-width: min(92vw, 1400px);
  max-height: 86svh;
  margin: 0;
}


.lb__img {
  display: block;
  max-width: 100%;
  max-height: calc(86svh - 48px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}


.lb__cap {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: #eaf0f6;
  font-size: 0.95rem;
  line-height: 1.4;
  margin-top: 0.6rem;
  padding: 0.25rem 0.25rem 0;
}


.lb__text {
  opacity: 0.95;
}


.lb__count {
  opacity: 0.75;
}



/* Controles */
.lb__close,
.lb__nav {
  position: absolute;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(8, 32, 56, 0.45);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.6);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}


.lb__close {
  top: 14px;
  right: 14px;
  font-size: 18px;
}


.lb__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
}


.lb__prev {
  left: 14px;
}


.lb__next {
  right: 14px;
}


.lb__close:hover,
.lb__nav:hover {
  background: rgba(8, 32, 56, 0.75);
}



/* Galería nuevo diseño */

/* ===== Quilt elegante ===== */
.gal-quilt {
  --min: 180px; /* tamaño mínimo de bloque */
  --gap: 0.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr));
  grid-auto-rows: 140px; /* “altura base” del mosaico */
  gap: var(--gap);
  grid-auto-flow: dense; /* relleno inteligente */
}



.gal-quilt .tile {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  isolation: isolate; /* para filtros */
  transform: translateZ(0); /* suaviza animaciones */
  grid-row: span 1;
  grid-column: span 1;
}


.gal-quilt .tile.wide {
  grid-column: span 2;
}


.gal-quilt .tile.tall {
  grid-row: span 2;
}



.gal-quilt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02) contrast(1.02);
  transition: transform 0.35s ease, filter 0.35s ease;
}



/* Vignette + caption en hover/focus */
.gal-quilt .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    140% 90% at 50% 120%,
    transparent 40%,
    rgba(0, 0, 0, 0.35) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}


.gal-quilt .cap {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.5rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}



/* micro-parallax */
.gal-quilt .tile:hover img,
.gal-quilt .tile:focus-visible img {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.05);
}


.gal-quilt .tile:hover::after,
.gal-quilt .tile:focus-visible::after {
  opacity: 1;
}


.gal-quilt .tile:hover .cap,
.gal-quilt .tile:focus-visible .cap {
  opacity: 1;
  transform: none;
}



/* Accesibilidad: foco visible */
.gal-quilt .tile:focus-visible {
  outline: 3px solid var(--cecns-gold);
  outline-offset: 2px;
}



/* ====== 6) GALERÍA “QUILT” – rejilla fluida por anchura ====== */
.gal-quilt {
  --min: 220px; /* base desktop */
  grid-auto-rows: 160px; /* bloque base */
}


/* ===== Responsive: 2 columnas en m��vil para galleryDual ===== */
@media (max-width: 640px) {
  .galleryDual {
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: unset;
    grid-auto-rows: minmax(140px, 40vw);
    grid-auto-flow: dense;
    grid-auto-columns: unset;
    overflow-x: hidden;
    overflow-y: visible;
    scroll-snap-type: none;
  }

  .galleryDual .tile,
  .galleryDual .tile.wide,
  .galleryDual .tile.tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}