/* Galeria publica: una lamina mas del juego de planos de v3. Rejilla de detalles con marco fino de tinta,
   llamada numerada y pie en Plex; el naranja solo como franja de «plotter» al pasar por encima. */
.g-lamina { width: 100%; max-width: 1440px; margin: 0 auto; padding: 56px 16px 72px; }
@media (min-width: 1024px) { .g-lamina { padding: 88px clamp(20px, 4vw, 64px) 96px; } }

.g-cab { display: grid; gap: 0; max-width: 60ch; justify-items: start; }
.g-cab h1 { font-size: var(--t-h1); }
.g-bajada { font-size: var(--t-cuerpo); line-height: 1.5; color: var(--t72); margin: 20px 0 0; max-width: 52ch; }
.g-cuenta { margin: 20px 0 0; font: 500 13px/1 var(--texto); letter-spacing: .16em; color: var(--acero); font-variant-numeric: tabular-nums; }

.g-rejilla { list-style: none; margin: 44px 0 72px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 36px 24px; }
@media (min-width: 560px) { .g-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .g-rejilla { grid-template-columns: repeat(3, 1fr); gap: 44px 32px; } }
@media (min-width: 1600px) { .g-rejilla { grid-template-columns: repeat(4, 1fr); } }

.g-foto { margin: 0; }
.g-marco { position: relative; display: block; border: 1px solid var(--tinta); padding: 8px; background: var(--papel); overflow: hidden; }
.g-marco img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: rgba(78, 110, 150, .08); }
.g-marco::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--naranja);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.6, .05, .3, 1); }
.g-marco:hover::after, .g-marco:focus-visible::after { transform: scaleX(1); }
.g-foto figcaption { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.g-pie { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; padding-top: 7px; }
.g-tit { font: 500 var(--t-cuerpo)/1.3 var(--texto); border-bottom: 1px solid var(--tinta); padding-bottom: 6px; overflow-wrap: anywhere; }
.g-desc { font: 400 .9375rem/1.45 var(--texto); color: var(--t72); overflow-wrap: anywhere; }

.g-vacia { margin: 44px 0 72px; }
.g-vacia-marco { border: 1px dashed var(--acero); padding: clamp(40px, 8vw, 96px) 20px; text-align: center; font-size: var(--t-cuerpo); color: var(--t72); }
.g-vacia-marco p { margin: 0; } .g-vacia-marco p + p { margin-top: 6px; font-family: var(--marca); font-weight: 700; color: var(--tinta); }

/* cuadro de rotulacion de cierre */
.g-contacto { display: grid; grid-template-columns: 1fr; }
.g-contacto .rot-fila { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--tinta); }
.g-contacto .rot-fila .rot-celda + .rot-celda { border-top: 1px solid var(--tinta); }
@media (min-width: 600px) {
  .g-contacto .rot-fila { grid-template-columns: repeat(3, 1fr); }
  .g-contacto .rot-fila .rot-celda + .rot-celda { border-top: 0; border-left: 1px solid var(--tinta); }
}
@media (min-width: 1024px) {
  .g-contacto { grid-template-columns: 3fr 2fr; }
  .g-contacto .rot-celda--cab { padding: 28px 32px; }
  .g-contacto .rot-celda--cab .btn-principal { max-width: 420px; }
  .g-contacto .rot-fila { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--tinta); }
  .g-contacto .rot-fila .rot-celda + .rot-celda { border-left: 0; border-top: 1px solid var(--tinta); }
}

/* visor (lo crea galeria.js) */
.visor { width: min(1600px, 96vw); max-width: none; max-height: 96svh; padding: 0; border: 1.5px solid var(--tinta); background: var(--papel); color: var(--tinta); }
.visor::backdrop { background: rgba(11, 31, 58, .88); }
.visor-fig { margin: 0; padding: 10px 10px 0; }
.visor-fig img { width: 100%; height: auto; max-height: calc(96svh - 128px); object-fit: contain; background: rgba(78, 110, 150, .08); }
.visor-pie { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-top: 1px solid var(--t14); margin-top: 10px; }
.visor-pie .g-pie { padding-top: 0; }
.visor-pie .g-tit { border-bottom: 0; padding-bottom: 0; }
.visor-btns { display: flex; gap: 6px; margin-left: auto; flex: none; }
.visor-btns button { min-width: 44px; min-height: 44px; border: 1.5px solid var(--tinta); font: 600 15px/1 var(--texto); padding: 0 12px; }
.visor-btns button:hover { background: var(--tinta); color: var(--papel); }
@media (max-width: 479px) { .visor-pie { flex-wrap: wrap; } .visor-btns { width: 100%; justify-content: space-between; } .visor-btns button { flex: 1; } }