/* Las fotos de la app, en grande al pulsarlas (ver ampliar_controller). */
.ampliable { display: block; cursor: zoom-in; }
.ampliable:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }

.ampliada {
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  margin: 0; padding: clamp(12px, 3vw, 40px);
  border: 0;
  background: transparent;
  cursor: zoom-out;
}
.ampliada[open] { display: grid; place-items: center; }
.ampliada::backdrop { background: rgba(10, 10, 10, 0.88); backdrop-filter: blur(4px); }
.ampliada img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--r-m);
  box-shadow: var(--sombra-flotante);
}
.ampliada-cerrar {
  position: fixed; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0;
  background: var(--tarjeta-alta);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  color: var(--tinta);
  font-size: 22px; line-height: 1;
  cursor: pointer;
}
.ampliada-cerrar:hover { background: var(--relleno); }
:root:has(.ampliada[open]) { overflow: hidden; }

/* En el móvil, a lo ancho no se lee: la foto se abre alta y se recorre deslizando. */
@media (max-width: 700px) {
  .ampliada[open] { place-items: center start; overflow-x: auto; overscroll-behavior: contain; }
  .ampliada img { max-width: none; max-height: none; height: min(72vh, 620px); }
}