/* Estilos generales para el fondo del popup */
.mfp-bg {
    background-color: rgba(44, 44, 44, 0.5); /* Fondo oscuro */
    transition: opacity 0.3s ease-in-out; /* Animación suave para la desaparición */
}

/* Estilos para el contenedor del popup */
.mfp-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Asegura que esté centrado verticalmente */
    transition: opacity 0.3s ease-in-out; /* Animación suave para la desaparición */
}

/* Estilos para el contenido dentro del popup */
.mfp-content {
    text-align: center;
    background-color: #fff; /* Fondo blanco */
    border-radius: 50px;
    max-width: 600px;
    width: 100%;
    opacity: 1;
    transition: opacity 0.3s ease-in-out; /* Desaparece suavemente */
}

/* Aseguramos que la imagen no tenga márgenes ni padding */
.mfp-content img {
    max-width: 100%; /* Hace que la imagen se ajuste al contenedor */
    height: auto; /* Mantiene las proporciones de la imagen */
    border-radius: 5px; /* Opcional, le da bordes redondeados a la imagen */
    margin: 0; /* Elimina los márgenes */
    padding: 0; /* Elimina el padding */
}

/* Animación de fade cuando se cierra */
.mfp-fade.mfp-close {
    opacity: 0 !important;
}