/* Lightbox de fotos — ver assets/js/main.js para la lógica de apertura/cierre.
   Por qué existe: las fotos de las galerías de caso (.photo-strip) se abrían con
   <a href="foto.webp" target="_blank">, que navegaba directo al archivo de imagen
   y mostraba la ruta interna de wp-content en la barra de direcciones. Este overlay
   agranda la foto encima de la misma página, sin navegar a ningún lado — si el
   usuario quiere, sigue pudiendo abrir la imagen real con clic derecho, pero ya
   no es el comportamiento por defecto. */
.horma-lightbox {
  position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center;
  padding: 12px; background: rgba(20, 33, 61, 0.92);
}
.horma-lightbox.is-open { display: flex; }
.horma-lightbox-img {
  max-width: 97vw; max-height: 95vh; object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: scale(0.97); transition: opacity 0.2s ease, transform 0.2s ease;
}
.horma-lightbox.is-open .horma-lightbox-img { opacity: 1; transform: scale(1); }
.horma-lightbox-close {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.horma-lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
.horma-lightbox-prev,
.horma-lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.horma-lightbox-prev:hover, .horma-lightbox-next:hover { background: rgba(255, 255, 255, 0.24); }
.horma-lightbox-prev { left: 16px; }
.horma-lightbox-next { right: 16px; }
.horma-lightbox.has-nav .horma-lightbox-prev,
.horma-lightbox.has-nav .horma-lightbox-next { display: flex; }
.horma-lightbox-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7); font-size: 14px; letter-spacing: 0.02em; display: none;
}
.horma-lightbox.has-nav .horma-lightbox-counter { display: block; }
body.horma-lightbox-open { overflow: hidden; }
@media (max-width: 640px) {
  .horma-lightbox-prev, .horma-lightbox-next { width: 40px; height: 40px; }
  .horma-lightbox-prev { left: 8px; }
  .horma-lightbox-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .horma-lightbox-img { transition: none; }
}