.contenedor {
position: relative;
width: 100%;
}
.contenedor img {
width: 100%;
height: auto;
display: block;
pointer-events: none;
}
.custom-tooltip .tooltip-inner {
background-color: #ffffff !important; 
color: #000000 !important; 
font-size: 16px !important;
padding: 10px 14px !important;
border-radius: 8px !important;
max-width: 300px !important;
text-align: center;
font-family: 'nh-roman'!important; 
border: solid 2px #ffffff!important; 
}
.custom-tooltip.bs-tooltip-top .tooltip-arrow::before {
border-top-color: white !important;
}
.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
border-bottom-color: white !important;
}
.punto {
position: absolute;
width: 1.8%;
aspect-ratio: 1/1;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #ffffff;
cursor: pointer;
z-index: 5;
border: none;
animation: pulse 1.5s ease-in-out infinite;
animation-play-state: running; 
transition: transform 0.2s ease-in-out;
}
.punto:hover, .punto:focus-visible{
background: #909090;
border:none;
outline: none;
animation-play-state: paused;
transform: translate(-50%, -50%) scale(1.3);
}
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}