/* Fotos: aparecen al llegar a ellas y, al pincharlas, se ven a pantalla completa (se usa con fotos.js). */

/* Con JavaScript, cada foto entra deslizándose y se va enfocando cuando llegas a ella */
.fotos-js main img.rev {
  opacity: 0 !important;
  transform: translateY(48px) scale(0.97) !important;
  filter: blur(10px) !important;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s ease !important;
  transition-delay: 0s !important;
}
.fotos-js main img.rev.visto {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Las fotos que se pueden ampliar */
main img.ampliable { cursor: zoom-in; }

/* Visor a pantalla completa */
.visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
  cursor: zoom-out;
  animation: visor-entra 0.2s ease-out;
}
.visor img {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: none;
  border-radius: 0;
}
/* Aviso propio que se desvanece solo a los pocos segundos */
.visor-aviso {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(40, 40, 40, 0.88);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  animation: visor-aviso 4.2s ease forwards;
}
@keyframes visor-aviso { 0%, 75% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
body.visor-abierto { overflow: hidden; }
@keyframes visor-entra { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .visor { animation: none; }
  .visor-aviso { animation: visor-aviso-quieto 4.2s steps(1) forwards; }
}
@keyframes visor-aviso-quieto { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }