/* ── galeria.css — galería de capturas del prototipo real ──
   Compartida por los casos que cierran con capturas. La grilla vive dentro
   de una .demo-zone; el lightbox lo monta galeria.js al hacer click. */

.gal{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*3)}
.gal a{display:block;text-decoration:none}
.gal img{display:block;width:100%;height:auto;border:1px solid var(--borde)}
.gal .mono{display:block;margin-top:calc(var(--u)*1.5);color:var(--tinta-3)}
@media(max-width:640px){.gal{grid-template-columns:1fr}}

/* lightbox — mismo lenguaje que las demos */
.gal-lb{position:fixed;inset:0;z-index:900;background:rgba(20,20,20,.78);
  display:flex;align-items:center;justify-content:center;padding:calc(var(--u)*4)}
.gal-lb[hidden]{display:none}
.gal-lb-caja{background:var(--papel);border:1px solid var(--borde);
  max-width:min(1200px,94vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.gal-lb-bar{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*4);
  padding:calc(var(--u)*2) calc(var(--u)*3);border-bottom:1px solid var(--borde)}
.gal-lb-bar .mono{color:var(--tinta-3)}
.gal-lb-x{border:0;background:none;cursor:pointer;color:var(--tinta);padding:calc(var(--u)*1) calc(var(--u)*1.5)}
.gal-lb-x:hover{background:#facc15;color:#141414}
.gal-lb img{display:block;max-width:100%;max-height:calc(90vh - 56px);width:auto;height:auto;margin:0 auto}