/* Gallery: tablón de investigación */
#fotos { background: radial-gradient(circle at 1px 1px, #ffffff0d 1px, transparent 0) 0 0 / 18px 18px, var(--bg2); }
.gallery { position: relative; display: grid; gap: 40px 32px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); padding: 16px 8px; }
.gallery figure { background: #f1ede3; padding: 12px 12px 0; box-shadow: 0 12px 30px #000a; transform: rotate(var(--r, -2deg)); transition: transform .3s; }
.gallery figure:nth-child(2n) { --r: 2.5deg; }
.gallery figure:nth-child(3n) { --r: -1deg; }
.gallery figure:hover { transform: rotate(0) scale(1.03); z-index: 3; }
.gallery .ph { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #1a1720; display: grid; place-items: center; color: #6b6478; }
.gallery .ph::before { content: "Foto próximamente"; font-size: .9rem; }
.gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; filter: sepia(.25) contrast(1.05); }
.gallery figcaption { font-family: "Permanent Marker", cursive; color: #222; text-align: center; padding: 12px 0 14px; font-size: 1.05rem; }
.string { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
dialog { border: 0; padding: 0; background: transparent; max-width: 92vw; }
dialog::backdrop { background: #000d; }
dialog img { max-width: 92vw; max-height: 88vh; border-radius: 12px; display: block; }

/* Móvil: 2 columnas para que el hilo haga zigzag en vez de cruzar las fotos */
@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr 1fr; gap: 28px 16px; padding: 12px 0; }
  .gallery figure { padding: 7px 7px 0; }
  .gallery figcaption { font-size: .8rem; padding: 8px 0 10px; line-height: 1.2; }
  .gallery .ph::before { font-size: .7rem; }
}