/* Visor de fotos (visor.js, tanda 13a). Reemplazó a Magnific Popup, del que heredó el aspecto. Rehecho el 28/09/2026 por tres cosas que reportó Christian mirándolo en su iPhone, y una cuarta que apareció midiendo: 1. la cruz caía sobre la foto y sobre una foto clara no se veía. Lo que no se veía era la cruz, no su lugar: era una × blanca al 65 % de opacidad, sin fondo. Ahora tiene disco oscuro y sombra, así que se lee sobre lo que sea, y por eso va ENCIMA de la foto, en su esquina, sin robarle alto (primero le había reservado una franja propia; Christian pidió que la foto se quedara con ese espacio y tiene razón: con el disco, la franja sobraba). 2. la foto no aprovechaba el alto: tenía 40 px de relleno arriba y abajo heredados de Magnific que no hacían nada. Sacados; la foto ocupa toda la caja que le queda. 3. la barra de WhatsApp (.pf-lb-cta) no se tapa nunca: el alto se MIDE en visor.js y se guarda en --vf-abajo. Antes eran 78 px escritos a mano y solo hasta 991 px, asi que en escritorio la barra tapaba 70 px de la foto, y en un celular con la barra en dos renglones también. 4. el contador y la marca llevan sombra, por lo mismo que la cruz. La foto nunca se deforma ni se recorta: crece hasta donde entra manteniendo su proporción. */ /* sin desplazamiento con el visor abierto; en iPhone lo completa window.mrFondo (pie.php), que fija el */ html.vf-abierto,body.vf-abierto{overflow:hidden} .vf{ /* arriba no se reserva nada: la cruz va sobre la foto. --vf-abajo lo escribe visor.js con el alto real de la barra de WhatsApp, que SÍ se respeta */ --vf-arriba:0px;--vf-abajo:8px; position:fixed;inset:0;z-index:1043;box-sizing:border-box;outline:0;-webkit-tap-highlight-color:transparent; padding:calc(var(--vf-arriba) + env(safe-area-inset-top)) 6px var(--vf-abajo) } /* casi opaco. Estaba al 80 % (herencia de Magnific) y por el hueco que queda arriba y abajo de una foto vertical se leía la página de atrás: el sobrante parecía desprolijo en vez de un marco. No llega a 1 para que se siga notando que hay una página debajo y que tocando ahí se cierra. Al 94 % tampoco se ve la cabecera del sitio: medido en pantalla, la franja de arriba y la letra del logo dan el mismo color (24,24,24). Con el 80 % sí se leía, y eso me hizo creer que la cabecera flotaba por encima del visor y agregarle un z-index que no hacía falta. No hace falta: .wsmobileheader (z-index 10002) vive dentro de .header-wrapper, que es fixed con z-index 999, o sea que todo el encabezado stackea en 999, por debajo del visor. */ .vf-fondo{position:fixed;inset:0;background:#0b0b0b;opacity:.94} .vf-caja{position:relative;height:100%;display:flex;align-items:center;justify-content:center} .vf-figura{position:relative;z-index:0;margin:0;max-width:100%;max-height:100%;line-height:0;cursor:pointer} .vf-figura:after{content:'';position:absolute;inset:0;z-index:-1;background:#444;box-shadow:0 0 8px rgba(0,0,0,.6)} .vf-img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto} /* marca y contador: sombra para que se lean sobre una foto clara */ .vf-marca{position:absolute;inset:0;pointer-events:none} /* la marca pasó de arriba a la derecha a abajo a la izquierda: arriba a la derecha ahora está la cruz, y con la foto pegada al borde las dos se pisaban */ .vf-marca:before,.vf-marca:after{position:absolute;bottom:8px;font-weight:900;font-size:18px;text-shadow:0 1px 3px rgba(0,0,0,.75)} .vf-marca:before{content:"MASAJES";left:10px;color:#8b8d8e} .vf-marca:after{content:".RED";left:100px;color:#efa697} .vf-contador{position:absolute;right:8px;bottom:8px;color:#fff;font-size:12px;line-height:18px;white-space:nowrap;cursor:auto;text-shadow:0 1px 3px rgba(0,0,0,.85)} .vf-cerrar,.vf-flecha{position:absolute;display:block;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-appearance:none;user-select:none} /* la cruz va SOBRE la foto, pegada a su esquina de arriba a la derecha (vive dentro de la

, así que se mueve con la foto). Lo único que la hace visible es lo que trae puesto: disco oscuro, sombra y opacidad casi llena. Si algo de esto se toca se rompe lo que pidió Christian, y hay una prueba en visor.spec.js que lo mira. */ .vf-cerrar{ top:8px;right:8px;width:44px;height:44px;z-index:2; color:#fff;font:26px/44px Arial,Baskerville,monospace;text-align:center; border-radius:50%;background:rgba(0,0,0,.55);text-shadow:0 1px 3px rgba(0,0,0,.9);opacity:.95; box-shadow:0 1px 6px rgba(0,0,0,.5) } .vf-flecha{top:50%;width:90px;height:110px;margin-top:-55px;z-index:1;opacity:.65} .vf-cerrar:hover,.vf-cerrar:focus{opacity:1;outline:0;background:rgba(0,0,0,.65)} .vf-flecha:hover,.vf-flecha:focus{opacity:1;outline:0} .vf-cerrar:focus-visible,.vf-flecha:focus-visible{outline:2px solid #fff;outline-offset:-4px} .vf-flecha:active{margin-top:-54px} .vf-flecha:before,.vf-flecha:after{content:'';position:absolute;left:0;top:0;width:0;height:0;margin:35px 0 0 35px;border:medium inset transparent} .vf-flecha:after{top:8px;border-top-width:13px;border-bottom-width:13px} .vf-flecha:before{border-top-width:21px;border-bottom-width:21px;opacity:.7} .vf-ant{left:0}.vf-ant:after{margin-left:31px;border-right:17px solid #fff}.vf-ant:before{margin-left:25px;border-right:27px solid #3f3f3f} .vf-sig{right:0}.vf-sig:after{margin-left:39px;border-left:17px solid #fff}.vf-sig:before{border-left:27px solid #3f3f3f} .vf-aviso{display:none;position:absolute;top:50%;left:8px;right:8px;margin:-.8em 0 0;color:#ccc;text-align:center} .vf-carga .vf-aviso,.vf-error .vf-aviso{display:block} .vf-carga .vf-figura,.vf-error .vf-figura{visibility:hidden} .vf-error .vf-cerrar{visibility:visible} .vf-una .vf-flecha{display:none} @media (max-width:900px){.vf{padding-left:0;padding-right:0}.vf-flecha{transform:scale(.75)}.vf-ant{transform-origin:0}.vf-sig{transform-origin:100%}}