/* ===================================================================
   FIX v3 — SOLO pagina de GALERIA. La Principal no se toca.
   Se carga despues de css/style5.css y css/fondo_tipografia.css.
   =================================================================== */

.galeria-header {
  padding: 18px 0 22px !important;
  text-align: center !important;
}

.galeria-header h1 {
  font-family: 'Great Vibes', cursive !important;
  font-size: clamp(2.2rem, 7vw, 3.4rem) !important;
  line-height: 1.15 !important;
  color: #c9738c !important;
  margin: 0 0 8px !important;
  text-shadow: 0 1px 2px rgba(65, 30, 30, .3) !important;
}

.galeria-subtitulo {
  font-family: 'Parisienne', cursive !important;
  font-size: clamp(1rem, 2.6vw, 1.25rem) !important;
  color: #4a3f42 !important;
  margin: 0 0 4px !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
}

.galeria-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 16px 130px !important;
}

/* imagenes de la galeria */
.foto-item {
  min-width: 0 !important;
  break-inside: avoid !important;
}

.foto-item .galeria-img,
.galeria-img {
  min-width: 0 !important;
  width: 100% !important;
  height: clamp(160px, 22vw, 250px) !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
  cursor: zoom-in !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .18) !important;
  background: #f3e7dd !important;
}

/* ---------------------------------------------------------------
   LIGHTBOX: los botones Descargar / Regresar se salian del cuadro
   porque el 'container' del overlay no tenia altura maxima ni
   scroll. Ahora el overlay usa una columna con max-height:100dvh,
   la imagen flex-shrink:0 con su propio max-height, y los botones
   viven en un pie sticky que SIEMPRE queda dentro del cuadro.
   --------------------------------------------------------------- */
.modal-imagen-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* dvh evita el salto de la barra de direcciones en el celular */
  height: 100dvh !important;
  background: rgba(0, 0, 0, .88) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  cursor: zoom-out !important;
  overflow: hidden !important;
}

.modal-imagen-overlay > div {
  /* el container que crea script.js */
  position: relative !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
}

.modal-imagen-overlay .imagen-ampliada {
  position: static !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 150px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important;
  cursor: zoom-out !important;
  /* NO pisar el width/height que calcula el onload de script.js */
  flex: 0 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  order: 1 !important;
}

.modal-imagen-overlay .cerrar-imagen {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  left: auto !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .16) !important;
  backdrop-filter: blur(4px);
  font-size: 1.9rem !important;
  line-height: 1 !important;
  color: #fff !important;
  cursor: pointer !important;
  order: 0 !important;
  z-index: 2 !important;
  transition: background .2s;
}

.modal-imagen-overlay .cerrar-imagen:hover {
  background: rgba(255, 255, 255, .32) !important;
}

/* fallback por si el boton de cerrar llega como <span> */
.modal-imagen-overlay span[style*="position:absolute"] {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  left: auto !important;
  font-size: 2.2rem !important;
  line-height: 1 !important;
  color: #fff !important;
  order: 0 !important;
}

.modal-imagen-overlay .btn-descargar,
.modal-imagen-overlay .btn-volver {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  background: #8b5a2b !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: 'Quicksand', sans-serif !important;
  line-height: 1 !important;
  margin: 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35) !important;
  order: 2 !important;
  max-width: 100% !important;
  white-space: nowrap;
  flex: 0 0 auto !important;
}

.modal-imagen-overlay .btn-descargar:hover,
.modal-imagen-overlay .btn-volver:hover {
  background: #6f4423 !important;
  transform: none !important;
}

/* barra inferior del lightbox: los dos botones en una fila centrada,
   siempre DENTRO del cuadro (en el celu envuelven a 2 lineas si no cabe) */
.modal-imagen-overlay .modal-pie {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  align-items: center !important;
  position: static !important;
  order: 2 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* si script.js no crea .modal-pie, los 2 <a> sueltos van en fila */
.modal-imagen-overlay > div > .btn-descargar,
.modal-imagen-overlay > div > .btn-volver {
  order: 2 !important;
}

/* ---------------------------------------------------------------
   BOTON FIJO 'VOLVER AL INICIO' de la galeria — vistoso
   --------------------------------------------------------------- */
.btn-volver-fijo {
  position: fixed !important;
  bottom: 22px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: max-content !important;
  max-width: calc(100vw - 32px) !important;
  transform: none !important;
  z-index: 9000 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #c9738c, #a8556e) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  white-space: nowrap;
  border: 2px solid rgba(255, 255, 255, .6) !important;
  box-shadow: 0 8px 26px rgba(168, 85, 110, .5), 0 2px 6px rgba(0, 0, 0, .22) !important;
  transition: background .22s, box-shadow .22s, color .22s;
}

.btn-volver-fijo:hover {
  background: linear-gradient(135deg, #d4829a, #b35f79) !important;
  color: #fff !important;
  transform: none !important;   /* NO se mueve, solo cambia de color */
  box-shadow: 0 12px 34px rgba(168, 85, 110, .6), 0 3px 8px rgba(0, 0,0, .25) !important;
}

.btn-volver-fijo:active { background: #a8556e !important; transform: none !important; }

.btn-volver-fijo:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  .galeria-container {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    padding: 0 11px 120px !important;
  }
  .foto-item .galeria-img, .galeria-img {
    height: clamp(135px, 36vw, 200px) !important;
  }
  .galeria-header h1 { font-size: clamp(2rem, 8vw, 2.8rem) !important; }
  .galeria-header .galeria-subtitulo { font-size: clamp(.95rem, 3.2vw, 1.1rem) !important; }
  .btn-volver-fijo {
    bottom: 16px !important;
    padding: 12px 22px !important;
    font-size: 15px !important;
  }
  /* en el celu el lightbox apila los botones en 2 lineas */
  .modal-imagen-overlay .imagen-ampliada {
    max-height: calc(100dvh - 175px) !important;
  }
  .modal-imagen-overlay .btn-descargar,
  .modal-imagen-overlay .btn-volver {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 400px) {
  .galeria-container { grid-template-columns: 1fr !important; }
  .foto-item .galeria-img, .galeria-img { height: 210px !important; }
  .modal-imagen-overlay .btn-descargar,
  .modal-imagen-overlay .btn-volver {
    padding: 9px 13px !important;
    font-size: 13.5px !important;
  }
}

/* ---------------------------------------------------------------
   GRID POR ORIENTACION (reemplaza el auto-fill, que daba 3
   columnas impredecibles en landscape). Ahora es explicito:
     movil vertical  -> 1 columna
     movil horizontal-> 2 columnas
     tablet vertical -> 2 columnas
     tablet landscape-> 3 columnas
     escritorio      -> 4 columnas
   --------------------------------------------------------------- */

@media (max-width: 1024px) and (orientation: portrait) {
  .galeria-container { grid-template-columns: repeat(2, 1fr) !important; gap: 13px !important; }
}
@media (max-width: 1024px) and (orientation: landscape) {
  .galeria-container { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 560px) and (orientation: landscape) {
  .galeria-container { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) and (orientation: portrait) {
  .galeria-container { grid-template-columns: 1fr !important; }
}
@media (min-width: 1025px) {
  .galeria-container { grid-template-columns: repeat(4, 1fr) !important; }
}