/* ============================================================
   Visor de imágenes compartido (lightbox) — prefijo .lb-
   Lo usan las galerías de todos los temas. Sin librerías.
   Va en archivo aparte (no en un <style>) para que el navegador
   lo cachee una vez y para que el exportador estático lo sirva
   igual que el resto del CSS.
   ============================================================ */

.lb{position:fixed;inset:0;z-index:99990;display:none;
  background:rgba(12,10,8,.93);
  align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px);
  padding-top:max(clamp(12px,3vw,40px),env(safe-area-inset-top,0px));
  padding-bottom:max(clamp(12px,3vw,40px),env(safe-area-inset-bottom,0px))}
.lb.is-open{display:flex}

.lb__fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb__img{max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto;display:block;
  border-radius:6px;box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  opacity:0;transition:opacity .22s ease}
.lb__img.is-lista{opacity:1}

.lb__cap{color:#e9e4dd;font:400 .9rem/1.45 system-ui,-apple-system,'Segoe UI',sans-serif;
  text-align:center;max-width:70ch;margin:0}
.lb__n{color:#9d958c;font:600 .75rem/1 system-ui,sans-serif;letter-spacing:.1em}

/* Botones: 48px de lado, que es lo mínimo cómodo con el dedo. */
.lb__btn{position:absolute;width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;
  transition:background .18s}
.lb__btn:hover{background:rgba(255,255,255,.26)}
.lb__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lb__cerrar{top:max(14px,env(safe-area-inset-top,0px));right:14px}
.lb__ant{left:14px;top:50%;transform:translateY(-50%)}
.lb__sig{right:14px;top:50%;transform:translateY(-50%)}
.lb__ant[hidden],.lb__sig[hidden]{display:none}

/* Cargando: un aro girando mientras llega la imagen grande. */
.lb__carga{position:absolute;width:34px;height:34px;border:3px solid rgba(255,255,255,.22);
  border-top-color:#fff;border-radius:50%;animation:lb-giro .8s linear infinite}
.lb__carga[hidden]{display:none}
@keyframes lb-giro{to{transform:rotate(360deg)}}

/* La imagen que se puede ampliar avisa con el cursor y una lupa al pasar. */
.lb-abre{cursor:zoom-in;position:relative;display:block}

@media(max-width:600px){
  .lb__ant{left:8px}
  .lb__sig{right:8px}
  .lb__img{max-height:calc(100dvh - 190px)}
}
@media(prefers-reduced-motion:reduce){
  .lb__img{transition:none;opacity:1}
  .lb__carga{animation:none}
}