/* Forum '26 · fotos del año pasado: mosaico de puntos (galería 02 del laboratorio) y visor entre columnas.
   Las celdas son links a la foto: sin JS abren la imagen; con JS la foto se dibuja en puntos y un click abre el visor. */

.fm { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; }
.fm-grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fm-cell { position: relative; display: block; aspect-ratio: 1; line-height: 0; cursor: zoom-in; }
.fm-cell canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fm-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; }
.fm-cell.is-dotted img { opacity: 0; }
.fm-cell.is-dotted:hover img, .fm-cell.is-dotted:focus-visible img { opacity: 1; }
.fm-cell:focus-visible { outline: 2px solid var(--dot-lit); outline-offset: 3px; }
.fm-all { all: unset; cursor: pointer; font-family: var(--font-mono); font-size: 12px; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; color: var(--dot-lit); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fm-all:hover { color: var(--dot-amber); }
.fm-all:focus-visible { outline: 2px solid var(--dot-lit); outline-offset: 3px; }

/* Visor: la foto en color entre dos columnas de puntos cuadrados */
.fm-box { position: fixed; inset: 0; z-index: 50; display: none; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 24px; align-items: center; padding: 48px 40px; background: color-mix(in srgb, var(--ground) 96%, transparent); }
.fm-box.is-open { display: grid; }
.fm-col { align-self: stretch; background-color: var(--dot-lit);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Crect x='1' y='1' width='4' height='4'/%3E%3C/svg%3E") 0 0 / 12px 6px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Crect x='1' y='1' width='4' height='4'/%3E%3C/svg%3E") 0 0 / 12px 6px repeat; }
.fm-fig { margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; min-height: 0; height: 100%; }
.fm-fig img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; display: block; }
.fm-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; align-items: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.fm-bar button { all: unset; cursor: pointer; padding: 6px 10px; border: 1px solid var(--dot-lit); color: var(--dot-lit); }
.fm-bar button:hover { background: var(--dot-lit); color: var(--ground); }
.fm-bar button:focus-visible { outline: 2px solid var(--dot-amber); outline-offset: 2px; }

@media (max-width: 639px) {
  .fm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fm-box { grid-template-columns: 18px minmax(0, 1fr) 18px; gap: 10px; padding: 24px 12px; }
  .fm-bar { font-size: 11px; gap: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .fm-cell img { transition: none; } }