/* ============================================================
   Visor de fotos
   ============================================================ */

.ul-lb{
  position:fixed;inset:0;z-index:9999;
  background:rgba(var(--ul-a900-rgb),.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ul-suave),visibility .35s;
}
.ul-lb.ul-lb-on{opacity:1;visibility:visible}

.ul-lb-marco{
  position:relative;
  max-width:min(92vw,1400px);
  max-height:84vh;
  display:flex;align-items:center;justify-content:center;
}
.ul-lb-img{
  max-width:100%;max-height:84vh;
  width:auto;height:auto;
  border-radius:6px;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  transform:scale(.96);opacity:0;
  transition:transform .45s var(--ul-curva),opacity .35s var(--ul-suave);
}
.ul-lb.ul-lb-on .ul-lb-img{transform:none;opacity:1}
.ul-lb-img.ul-lb-cargando{opacity:.3}

.ul-lb-btn{
  position:absolute;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(230,241,251,.2);
  color:var(--ul-a050);
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;
  transition:background .25s var(--ul-suave),transform .3s var(--ul-curva),border-color .25s;
}
.ul-lb-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(230,241,251,.45)}
.ul-lb-btn:active{transform:scale(.92)}
.ul-lb-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.ul-lb-cerrar{top:22px;right:22px}
.ul-lb-ant{left:22px;top:50%;margin-top:-24px}
.ul-lb-sig{right:22px;top:50%;margin-top:-24px}

.ul-lb-contador{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  color:var(--ul-a200);font-family:var(--ul-texto);
  font-size:13px;font-weight:500;letter-spacing:.1em;
  background:rgba(0,0,0,.3);padding:7px 16px;border-radius:20px;
}

@media (max-width:900px){
  .ul-lb-btn{width:42px;height:42px}
  .ul-lb-cerrar{top:14px;right:14px}
  .ul-lb-ant{left:10px;margin-top:-21px}
  .ul-lb-sig{right:10px;margin-top:-21px}
  .ul-lb-marco{max-width:96vw}
  .ul-lb-img{max-height:76vh}
  .ul-lb-contador{bottom:16px;font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .ul-lb,.ul-lb-img,.ul-lb-btn{transition-duration:.01ms !important}
  .ul-lb-img{transform:none !important}
}