/*Estilos hotspots*/

        .position-relative {
            position: relative;
            width: 100%;
            max-width: 100%; /* Asegúrate de que el contenedor se ajuste al tamaño de la imagen */
        }
        
        /* Botón con el efecto de parpadeo y el anillo */
        .btn-hotspot {
            position: absolute;
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background-color: #882f80;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            font-size: 1.3rem;
            font-weight: bold;
            z-index: 10;
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.8);
            animation: blink 1.5s infinite; /* Animación de parpadeo */
        }

        /* Efecto "ring" usando un pseudo-elemento ::before */
        .btn-hotspot::before {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 2px solid rgba(136, 47, 128, 0.5); /* Contorno del anillo */
            z-index: -1;
            animation: ring 2s infinite; /* Animación del anillo */
        }

        /* Animación del anillo (se expande y desaparece) */
        @keyframes ring {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(1.7);
                opacity: 0;
            }
        }

        /* Animación de parpadeo (cambia a un color más claro) */
        @keyframes blink {
            0%, 100% {
                background-color: #7d2a76;
            }
            50% {
                background-color: #882f80; /* Color más claro durante el parpadeo */
            }
        }

        /* Cambio de color en hover */
        .btn-hotspot:hover {
            background-color: #1a90a6;
        }




/* Estilo para los iconos */
.icon-circle {
  position: absolute;
  top: -25px;
  left: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #3498db; /* Color personalizado para el borde */
}

.icon-circle i {
  font-size: 24px;
  color: #3498db; /* Color del icono */
}

/* Estilo para las tarjetas */
.card-custom {
  margin-bottom: 30px;
  border: none;
}

.bg-custom {
  background-color: #3498db; /* Color personalizado de fondo para el encabezado */
  color: white;
  font-weight: bold;
  font-size: 18px;
  padding: 20px 20px 40px; /* Ajuste para espacio al icono */
  position: relative;
}

@media (max-width: 768px) {
  .bg-custom {
    font-size: 16px;
    padding: 15px;
  }

  .icon-circle {
    top: -20px;
    width: 40px;
    height: 40px;
  }

  .icon-circle i {
    font-size: 20px;
  }
}

/*compensa ancho barra menú para las anclas*/
:target::before {
  content: "";
  display: block;
  height: 140px; /* Altura de tu barra fija */
  margin-top: -140px; /* Negativo para compensar el espaciado */
  visibility: hidden;
}


/*Estilo botones menú activos*/
.nav-link-active2 {
  background-color: #486bd0 !important;
  border-radius: 5px;
}

/*Carrusel tarjetas*/
.card-custom {
  margin-bottom: 30px;
  border: none;
}

/* Títulos con color de fondo #882473 y texto blanco */
.bg-custom {
  background-color: #882473;
  color: white;
  font-weight: bold;
  font-size: 18px;
  padding: 20px;
  position: relative;
  text-align: center;
}

@media (max-width: 768px) {
  .bg-custom {
    font-size: 16px;
    padding: 15px;
  }
}

/* Quita fondo a carrusel específico*/
#carouselTarjetasControls .carousel-inner {
  background-color: transparent !important;
}