custom icons change their position on a non-geo map

Question

This is the scenario:

A non-geo map, that fits to the browser's size height, with custom icons on markers.

The problem:

As I set the markers positions on my own devices, they seem ok for me. But on other size devices the icons change completely their positions.

What I want:

What I have: https://laypijeda.tierracomun.io/ciudad/

What I'm expecting: Simple: fix the icons to their positions on the map.

Here is my code. The xy for non latlng units:

/* inicia conversión a XY */

var yx = L.latLng;

function xy(x, y) {
    if (L.Util.isArray(x)) { // When doing xy([x, y]);
        return yx(x[1], x[0]);
    }
    return yx(y, x); // When doing xy(x, y);
}
/* finaliza conversión a XY */

The map and its variables declaration...

/* inicia declaración de variables de mapa */
var relacion = 2560/1440; //relación entre el ancho y alto de la imagen real (en pixeles)
var altoR = window.innerHeight; //alto **inicial** del navegador
var anchoR = altoR*relacion; //ancho derivado de la altura dada por el navegador
var posX = 0; //punto 0 en el navegador
var posY = 0; //punto 0 en el navegador
var alto = posY+(altoR);
var ancho = posX+(anchoR*relacion);
var limites = [xy(posX, posY), xy(anchoR, altoR)];
/* finaliza declaración de variables de mapa */

/* inicia declaración de mapa */
var map = L.map('map', {
crs: L.CRS.Simple,
maxBounds: limites,
maxBoundsViscosity: 1,
attributionControl: false,
minZoom: 0,
maxZoom: 2,
zoomControl: false,
});
/* finaliza declaración de mapa */

initializing the map...

/* inicia posicionamiento de mapa */
var image = L.imageOverlay('../imagenes/ciudad.jpg', limites).addTo(map);
/* finaliza posicionamiento de mapa */

The icons and passing them to vars...

/*  inicia declaración de ícono(s) */
var iconoR = 220; //tamaño real de la imagen en px (tomando sólo una de sus dimensiones)
var Icono = L.Icon.extend({
    options: {
        iconSize:     [iconoR, iconoR],
        iconAnchor:   [iconoR/2, iconoR]
    }
});
var mascaraXY_1 = xy(1100, 600);
var mascaraXY_2 = xy(840, 300);
var mascaraXY_3 = xy(900, 510);
var mascaraXY_4 = xy(1050, 440);

var mascaraIcon1 = new Icono({iconUrl: '../imagenes/estandarte.gif'});
var mascaraIcon2 = new Icono({iconUrl: '../imagenes/tehuana.gif'});
var mascaraIcon3 = new Icono({iconUrl: '../imagenes/olla.gif'});
var mascaraIcon4 = new Icono({iconUrl: '../imagenes/tapo.gif'});

Positioning the markers...

var mascara1 = L.marker(mascaraXY_1, {icon: mascaraIcon1, liga: 'fiesta.html'}).on('click', function(){window.location=this.options.liga}).bindTooltip('Fiesta de San Isidro', {direction:'top', offset:[0, -iconoR]}).addTo(map);
var mascara2 = L.marker(mascaraXY_2, {icon: mascaraIcon2, liga: 'tehuanitas.html'}).on('click', function(){window.location=this.options.liga}).bindTooltip('Tehuanitas', {direction:'top', offset:[0, -iconoR]}).addTo(map);
var mascara3 = L.marker(mascaraXY_3, {icon: mascaraIcon3, liga: 'pan.html'}).on('click', function(){window.location=this.options.liga}).bindTooltip('Mole de Chipil', {direction:'top', offset:[0, -iconoR*0.85]}).addTo(map);
var mascara4 = L.marker(mascaraXY_4, {icon: mascaraIcon4, liga: 'viaje.html'}).on('click', function(){window.location=this.options.liga}).bindTooltip('El Viaje', {direction:'top', offset:[0, -iconoR*0.75]}).addTo(map);

And finally, the initial view setting...

map.setView(xy(anchoR/2, 0), -1);

and applying some settings over the zoom controls on the last minute

/* inicia declaración de control de zoom */
var zoom = L.control.zoom({
});
/* finaliza declaración de control de zoom */
zoom.setPosition('bottomright').addTo(map);

Thanks on advance!