@charset "UTF-8";

/* Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif; color:#222; background:#fff;}

/* Header */
.header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid #eee;z-index:10}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.brand{text-decoration:none;color:#111827;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#f9fafb;font-weight:600}
.brand:hover{background:#f3f4f6}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:16px}

/* Gallery grid */
.gallery{display:grid;grid-template-columns: repeat(2, 1fr);gap:16px}
@media (min-width:640px){.gallery{grid-template-columns: repeat(3, 1fr)}}
@media (min-width:1024px){.gallery{grid-template-columns: repeat(4, 1fr)}}

.item{
  margin:0; border-radius:12px; overflow:hidden; background:#f6f7f8;
  display:flex; flex-direction:column; /* 👉 permite caption debajo */
}
.item img{
  width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .25s ease; cursor:zoom-in;
}
.item:hover img{ transform:scale(1.03) }

/* 👉 Nombre de la obra debajo de la miniatura */
.item figcaption{
  padding:8px 6px 0;
  font-size:14px;
  color:#444;
  text-align:center;
  line-height:1.35;
  min-height: 2.1em; /* asegura altura pareja en grilla */
  word-break: break-word;
}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:50}
.lightbox.is-open{display:flex}

.lb-stage{width:min(96vw,1400px);height:min(92vh,900px);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;touch-action:none}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .2s ease;cursor:zoom-in;will-change:transform}

.lb-btn{position:fixed;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;cursor:pointer;transition:background .2s;z-index:100}
.lb-btn:hover{background:rgba(255,255,255,.12)}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-close{top:20px;right:20px;transform:none;width:auto;height:auto;border-radius:10px;padding:8px 10px;font-size:18px;background:rgba(0,0,0,.5)}
.lb-zoom{top:20px;left:20px;transform:none;width:auto;height:auto;border-radius:10px;padding:8px 14px;font-size:16px;gap:8px;display:flex;align-items:center;background:rgba(0,0,0,.5)}
.lb-zoom span[aria-hidden="true"]{font-size:18px}
.lb-zoom-text{font-size:15px}
.lb-counter{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,.35);padding:4px 10px;border-radius:999px;font-size:14px}

/* Leyenda en lightbox */
.lb-caption{
  display:none;
  position:fixed;
  bottom:50px;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  background:rgba(0,0,0,.35);
  padding:6px 12px;
  border-radius:10px;
  font-size:15px;
  max-width:90vw;
  text-align:center;
  line-height:1.35;
}

/* Mobile: bigger buttons */
@media (max-width:640px){
  .lb-prev,.lb-next{width:52px;height:52px}
}

.lightbox.is-zoomed .lb-stage{cursor:grab}
.lightbox.is-zoomed .lb-stage.is-dragging{cursor:grabbing}
.lightbox.is-zoomed .lb-img{cursor:zoom-out}