#popupModal .modal-dialog {
    max-width: none;
    width: auto;
    margin: .5rem auto;
    justify-content: center;
  }
  #popupModal .modal-content {
    background: transparent;
    border: 0;
    width: auto;
    position: relative;
  }
  #popupModal .popup-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 95vw;
    max-height: 90vh;
    margin: 0 auto;
  }
  #popupModal .popup-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10 !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 30px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #000 !important;
    opacity: .9 !important;
    text-shadow: none !important;
  }

  /* Anula las transiciones de Bootstrap en este popup para que no choquen */
  #popupModal.fade,
  #popupModal.fade .modal-dialog {
    transition: none;
  }

  /* Entrada de la imagen: fundido + zoom + ligero desplazamiento */
  #popupModal.show .modal-dialog {
    animation: popupEntrada .8s cubic-bezier(.2, .8, .2, 1) backwards;
  }

  /* Fondo oscuro: fundido, solo mientras este popup está abierto */
  body.popup-activo .modal-backdrop.show {
    animation: popupFondo .8s ease backwards;
  }

  @keyframes popupEntrada {
    from { opacity: 0; transform: scale(.85) translateY(30px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes popupFondo {
    from { opacity: 0; }
    to   { opacity: .5; }
  }

  /* Respeta a quien tiene desactivadas las animaciones en su sistema */
  @media (prefers-reduced-motion: reduce) {
    #popupModal.show .modal-dialog,
    body.popup-activo .modal-backdrop.show {
      animation: none;
    }
  }