/* Estilos actualizados para coincidir con el diseño de la imagen */



.containerServicios {

  background-color: #0E1524;
  
  display: flex;
  
  justify-content: center;
  
  align-items: center;
  
  padding: 60px 5%;
  
  gap: 100px;
  
  position: relative;
  
  overflow: hidden;
  
  font-family: 'Segoe UI', Roboto, sans-serif;
  
  }
  
  
  
  /* Contenedor del menú */
  
  .serviciosLord {
  
  display: flex;
  
  flex-direction: column;
  
  gap: 20px;
  
  z-index: 10;
  
  }
  
  
  
  /* Botones con estilo Glassmorphism refinado */
  
  .serviciosLord button {
  
  background: rgba(255, 255, 255, 0.03);
  
  border: 1px solid rgba(255, 255, 255, 0.1);
  
  color: rgba(255, 255, 255, 0.7);
  
  padding: 18px 30px;
  
  border-radius: 15px; /* Bordes menos redondeados para verse más moderno */
  
  cursor: pointer;
  
  font-size: 17px;
  
  text-align: left;
  
  width: 380px;
  
  line-height: 1.4;
  
  backdrop-filter: blur(10px);
  
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  position: relative;
  
  overflow: hidden;
  
  }
  
  
  
  /* Hover y Active */
  
  .serviciosLord button:hover,
  
  .serviciosLord button.active {
  
  background: rgba(255, 255, 255, 0.1);
  
  color: #fff;
  
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  transform: translateX(10px);
  
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  
  }
  
  
  
  /* Indicador lateral para el botón activo */
  
  .serviciosLord button.active::before {
  
  content: '';
  
  position: absolute;
  
  left: 0;
  
  top: 20%;
  
  height: 60%;
  
  width: 4px;
  
  background: #00d2ff; /* Color cian vibrante de la imagen */
  
  border-radius: 0 4px 4px 0;
  
  }
  
  
  
  /* Contenedor de la animación circular */
  
  .circulo-central-wrapper {
  
  position: relative;
  
  width: 500px;
  
  height: 500px;
  
  display: flex;
  
  justify-content: center;
  
  align-items: center;
  
  }
  
  
  
  /* Círculo Central con efecto de profundidad y brillo */
  
  .circulo-central {
  
  width: 320px;
  
  height: 320px;
  
  border-radius: 50%;
  
  background: radial-gradient(circle at center, #16213e 0%, #0a0f1d 100%);
  
  display: flex;
  
  justify-content: center;
  
  align-items: center;
  
  text-align: center;
  
  padding: 40px;
  
  box-sizing: border-box;
  
  font-size: 20px;
  
  color: #fff;
  
  border: 2px solid rgba(0, 210, 255, 0.3);
  
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.8),
  
  inset 0 0 30px rgba(0, 210, 255, 0.1);
  
  z-index: 5;
  
  }
  
  
  
  /* Puntos flotantes con Glow */
  
  .dot {
  
  position: absolute;
  
  border-radius: 50%;
  
  z-index: 6;
  
  filter: blur(1px);
  
  box-shadow: 0 0 20px currentColor;
  
  }
  
  
  
  .dot-pink {
  
  width: 100px; height: 100px;
  
  top: 5%; left: 5%;
  
  background: radial-gradient(circle at 30% 30%, #ff00ff, #550055);
  
  color: rgba(255, 0, 255, 0.6);
  
  }
  
  
  
  .dot-green {
  
  width: 70px; height: 70px;
  
  top: 10%; right: 5%;
  
  background: radial-gradient(circle at 30% 30%, #00ff88, #005522);
  
  color: rgba(0, 255, 136, 0.5);
  
  }
  
  
  
  .dot-yellow {
  
  width: 50px; height: 50px;
  
  bottom: 15%; right: 10%;
  
  background: radial-gradient(circle at 30% 30%, #ffee00, #554400);
  
  color: rgba(255, 238, 0, 0.5);
  
  }
  
  
  
  .dot-blue {
  
  width: 65px; height: 65px;
  
  bottom: 5%; left: 15%;
  
  background: radial-gradient(circle at 30% 30%, #00d2ff, #004455);
  
  color: rgba(0, 210, 255, 0.5);
  
  }
  
  
  
  /* Líneas curvas sutiles */
  
  .circulo-central-wrapper svg {
  
  position: absolute;
  
  width: 100%;
  
  height: 100%;
  
  opacity: 0.4;
  
  }
  
  
  
  .circulo-central-wrapper svg path {
  
  stroke-width: 1.5;
  
  stroke-dasharray: 5, 5; /* Líneas punteadas como en diseños tecnológicos */
  
  }
  
  
  
  /* Media Queries para Móvil */
  
  @media (max-width: 900px) {
  
  .containerServicios {
  
  flex-direction: column;
  
  gap: 50px;
  
  }
  
  
  .serviciosLord button {
  
  width: 90vw;
  
  }
  
  
  .circulo-central-wrapper {
  
  width: 350px;
  
  height: 350px;
  
  }
  
  
  .circulo-central {
  
  width: 220px;
  
  height: 220px;
  
  font-size: 16px;
  
  }
  
  }