/* ==========================================================================
   GestIA · Pase de fotos institucionales (componente)
   Una imagen a la vez sobre un fondo de marca, con fundido, acercamiento lento y un velo
   que garantiza el contraste del texto blanco que va encima.
   ========================================================================== */

.photo-show {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--grad-deep);
}
.photo-stack { position: absolute; inset: 0; }
.photo-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--photo-fade) var(--ease);
  will-change: opacity;
}
.photo-slide.is-active { opacity: 1; }
.photo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
/* Solo se anima transform: el recorte no cambia y la tarjeta que va encima no se mueve. */
.photo-slide.is-active img { animation: photo-zoom 12s var(--ease) both; }
@keyframes photo-zoom { from { transform: scale(1.04); } to { transform: scale(1.14); } }

.photo-scrim {
  position: absolute;
  inset: 0;
  background: var(--photo-tint), var(--photo-scrim);
}

.photo-caption {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 28px);
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--on-color);
  background: var(--glass-dark);
  border: 1px solid var(--glass-soft-line);
  backdrop-filter: blur(10px);
  animation: rise .45s var(--ease) .25s both;
}
.photo-caption .i { width: 15px; height: 15px; flex: none; opacity: .85; }

/* ---------- Portada de la vista de inicio ---------- */
.scene-photos { z-index: -1; }

/* ---------- Fondo del inicio de sesión ---------- */
.login-photos {
  z-index: -4;
  background: var(--navy-950);
}
.login-photos .photo-stack { opacity: .56; }
.login-photos .photo-scrim { background: var(--photo-tint-hero), var(--photo-scrim-hero); }
.login-photos .photo-slide.is-active img { animation-duration: 16s; }

/* En pantallas angostas el hero se reduce a una franja: la foto gana presencia y el velo pasa a ser
   vertical, oscuro donde apoya el texto y más claro arriba, donde se reconoce al equipo. */
@media (max-width: 980px) {
  .login-photos .photo-stack { opacity: .85; }
  .login-photos .photo-scrim { background: var(--photo-tint), var(--photo-scrim-band); }
  .login-hero .mesh { opacity: .42; }
}
@media (max-width: 560px) {
  .photo-caption { font-size: 11.5px; padding: 6px 11px 6px 9px; }
  /* En el móvil la franja es mínima: la foto queda sin tinte y las manchas de color casi no pesan. */
  .login-photos .photo-scrim { background: var(--photo-scrim-band); }
  .login-hero .mesh { opacity: .3; }
}