/* Estilos para el contenedor de la imagen principal */
.main-image {
    position: relative;
    overflow: visible;
    cursor: crosshair; /* Cursor tipo cruz para indicar que se puede hacer zoom */
}

/* Estilos para la imagen principal */
#mainImage {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Estilos para la lupa - similar a la segunda imagen de referencia */
.magnifier {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid #006dba; /* Borde azul como en la imagen de referencia */
    pointer-events: none; /* Para evitar interferencias con eventos del mouse */
    transform: translate(-50%, -50%); /* Para centrar exactamente en el cursor */
    z-index: 1000;
    overflow: hidden; /* Para contener el contenido magnificado */
    background: white; /* Fondo blanco como en la referencia */
}

/* Contenido interno magnificado */
.magnifier-content {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 200% 200%; /* Zoom exacto de 2x */
}

/* Eliminar cualquier cursor personalizado después */
.main-image::after {
    display: none;
}