/*hotspot */
.ldv-imghotspot {
  position: relative;
  display: inline-block; /* Se ajusta al ancho de la imagen */
  width: 100%;           /* O el ancho que desees */
  /*max-width: 800px;*/      /* Ejemplo de límite */
}

/* 2. La imagen debe ocupar el 100% del contenedor */
.ldv-imghotspot img {
  display: block;
  width: 100%;
  height: auto;
}

/* 3. Estilo base para todos los enlaces (hotspots) */
.ldv-hotspot {
  position: absolute;    /* Permite moverlo libremente sobre la imagen */
  border: 2px solid transparent; /* Invisible por defecto */
  transition: background 0.3s;
}

/* 4. Posicionamiento específico (EJEMPLOS) */
/* Usamos porcentajes para que si la imagen se achica, el link se mueva con ella */

.ldv-link-youtube {
  top: 6.9%;
  left: 75%;
  width: 21.5%;
  height: 5%;
}
.ldv-link-insta {
  top: 12.9%;
  left: 75%;
  width: 21.5%;
  height: 5%;
}
.ldv-link-tiktok {
  top: 18.5%;
  left: 75%;
  width: 21.5%;
  height: 5%;
}
.ldv-link-ldv {
  top: 69%;
  left: 4%;
  width: 32.3%;
  height:24%;
}
/* 5. Efecto visual al pasar el mouse (Opcional pero recomendado) */
.ldv-hotspot:hover {
  background: rgba(255, 255, 255, 0.5); /* Un velo blanco semitransparente */
  border: 2px solid white;
}