/* Visor a pantalla completa de fotos y planos. */
.visor {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1rem var(--margen) 1.25rem;
  background: rgba(10, 13, 15, 0.94);
  color: var(--c-blanco);
  opacity: 0;
  transition: opacity var(--d-media) var(--curva);
}
.visor.abierto { opacity: 1; }
.visor[hidden] { display: none; }
.visor__barra { display: flex; align-items: center; gap: 1rem; }
.visor__titulo { flex: 1; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); }
.visor__contador { font-size: var(--t-s); color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.visor .circulo { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: var(--c-blanco); }
.visor .circulo:hover { background: rgba(255, 255, 255, 0.24); border-color: var(--c-blanco); }
.visor__lienzo { display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 0; padding: 1rem 0; touch-action: pan-y; }
.visor__img { max-width: 100%; max-height: 100%; border-radius: var(--r-m); object-fit: contain; }
.visor__plano { width: min(820px, 100%); padding: 1rem; border-radius: var(--r-l); background: var(--c-blanco); color: var(--c-tinta); }
/* La película es vertical: ocupa el alto disponible y se centra */
.visor__video { height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-m); background: #000; object-fit: contain; }
.visor__flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.visor__flecha--izq { left: var(--margen); }
.visor__flecha--der { right: var(--margen); }
.visor__pie { text-align: center; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
@media (max-width: 700px) {
  .visor__flecha { top: auto; bottom: 1rem; transform: none; }
}