.ob-kp-planner {
      margin: 0 auto;
    }

    .ob-kp-planner-svg {
      width: 100%;    /* responsive */
      height: auto;   /* mantiene el ratio 1240x509 */
      display: block;
    }

    /* estilos generales para textos, burbujas, etc. */
    .ob-kp-planner .kp-label-bg {
      fill: #fff;
      stroke: #fff;
      stroke-width: 1;
      rx: 14;
      ry: 14;
    }

    .ob-kp-planner .kp-label-text {
      fill: #000;
      font-weight: 500;
      font-size: 15px;
      text-transform: uppercase;
    }

    .ob-kp-planner .kp-dot {
      fill: rgba(128, 94, 232, 1);
      stroke: #fff;
      stroke-width: 6;
    }

    .ob-kp-planner .kp-line {
      stroke: #fff;
      stroke-width: 2;
    }







.kp-hotspot {
  cursor: pointer;
}

/* Punto central */
.kp-dot {
  fill: rgba(128, 94, 232, 1);
  stroke: #fff;
  stroke-width: 6;
}

/* Círculo de pulso (anillo animado) */
.kp-dot-pulse {
  fill: rgba(128, 94, 232, 0.80);
  stroke: none;
  animation: kp-pulse 1.5s infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* Segundo pulso desfasado para más efecto */
.kp-dot-pulse.kp-dot-pulse-2 {
  animation-delay: 0.4s;
}

@keyframes kp-pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  70% {
    transform: scale(2.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}



    /* Mostrar cuando el hotspot está activo */
    .kp-hotspot.is-active .kp-callout {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }


    .kp-callout {
      opacity: 0;
      pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
    }