* { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: 100%;
      height: 100%;
      background-color: #000;
      overflow: hidden;
      font-family: 'Segoe UI', sans-serif;
    }

    canvas {
      position: fixed;
      top: 0; left: 0;
      z-index: 0;
    }

    .center-container {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .center-logo {
      font-size: clamp(24px, 8vw, 60px);
      color: #66ccff;
      text-shadow: 0 0 15px #1a1aff;
      cursor: pointer;
      transition: transform 0.3s ease;
      text-align: center;
      max-width: 90%;
    }

    .center-logo:hover {
      transform: scale(1.1);
    }

    #nodes {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      transition: transform 0.3s ease;
    }

.menu-node {
    position: absolute;
    width: clamp(100px, 12vw, 160px);
    height: clamp(100px, 12vw, 160px);
    border-radius: 50%;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    overflow: visible;
    z-index: 2;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6); /* <<< ESTE ES EL HALO */
}

    .menu-node img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        transition: transform 0.3s ease;
        will-change: transform;
        z-index: 3;

    }

    .menu-node:hover img {
      transform: scale(1.6);
    }

    .tooltip {
      position: absolute;
      min-width: 100px;
      max-width: 200px;
      background-color: rgba(20, 20, 20, 0.9);
      color: #66ccff;
      padding: 6px 10px;
      border-radius: 12px;
      font-size: 24px;
      box-shadow: 0 0 12px #1a1aff;
      opacity: 0;
      pointer-events: none;
      z-index: 10;
    }

    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }

    .typing-effect {
      white-space: nowrap;
      overflow: hidden;
      border-right: 2px solid #66ccff;
      width: 0;
      animation: typing 2.5s steps(30, end) forwards;
    }

    .b1 { top: 10%; left: 15%; }
    .b2 { top: 10%; left: 45%; }
    .b3 { top: 10%; left: 75%; }
    .b4 { top: 35%; left: 15%; }
    .b5 { top: 35%; left: 45%; }
    .b6 { top: 35%; left: 75%; }
    .b7 { top: 60%; left: 15%; }
    .b8 { top: 60%; left: 45%; }
    .b9 { top: 60%; left: 75%; }

#connectionCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* más alto que el fondo de partículas */
    pointer-events: none; /* muy importante para que no bloquee clicks */
}

    @media (max-width: 600px) {
      .center-logo {
        font-size: 28px;
        text-align: center;
        margin-top: 40px;
      }
      .tooltip {
        font-size: 12px;
        max-width: 180px;
        padding: 8px 12px;		
      }
      #nodes {
        transform: scale(0.65);
        transform-origin: center;
      }
      .menu-node {
        width: 120px;
        height: 120px;

      }
      .b1 { top: 10%; left: -5%; }
      .b2 { top: 10%; left: 34%; }
      .b3 { top: 10%; left: 70%; }
      .b4 { top: 35%; left: -5%; }
      .b5 { top: 35%; left: 34%; }
      .b6 { top: 35%; left: 70%; }
      .b7 { top: 60%; left: -5%; }
      .b8 { top: 60%; left: 34%; }
      .b9 { top: 60%; left: 70%; }
    }
	
	/*portal css*/
	#portal-ring {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 6px solid #66ccff;
  border-radius: 50%;
  box-shadow: 0 0 30px #1a1aff, 0 0 60px #66ccff inset;
  transform: scale(0);
  opacity: 0;
  animation: portalOpen 1s ease-out forwards;
}

@keyframes portalOpen {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(2.5);
    opacity: 1;
    box-shadow: 0 0 60px #66ccff, 0 0 100px #1a1aff inset;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}

/*conexiones electricas*/
#connections {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
    .table-responsive-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}