.halo {
  position: absolute;
  bottom: -100px; 
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1300px;
  display: flex;
  justify-content: center;
  z-index: 7;
  pointer-events: none; /* <- ESSENCIAL! */
}


svg {
    width: 100%;
    height: auto;
    display: block;
  }

.neon-glow {
  filter: drop-shadow(0 0 15px #3CA7FF)
          drop-shadow(0 0 30px #3CA7FF)
          drop-shadow(0 0 45px #3CA7FF);
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px #3CA7FF)
            drop-shadow(0 0 16px #3CA7FF)
            drop-shadow(0 0 24px #3CA7FF);
    stroke-opacity: 1;
  }
  50% {
    filter: drop-shadow(0 0 4px #3CA7FF)
            drop-shadow(0 0 8px #3CA7FF)
            drop-shadow(0 0 12px #3CA7FF);
    stroke-opacity: 0.6;
  }
  
}


/* Responsividade para dispositivos menores */
@media (min-width: 321px) and (max-width: 376px) {
  .halo {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95%; 
    max-width: none;
    overflow: visible;
    z-index: 1;
  }

  .halo svg {
    width: 100%;
    height: auto;
  }

  .halo svg path {
    stroke-width: 12px;
    filter: drop-shadow(0 0 18px #3CA7FF); 
  }
}



@media (min-width: 377px) and (max-width: 480px) {
  .halo {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95%; 
    max-width: none;
    overflow: visible;
    z-index: 1;
  }

  .halo svg {
    width: 100%;
    height: auto;
  }

  .halo svg path {
    stroke-width: 12px;
    filter: drop-shadow(0 0 18px #3CA7FF); 
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .halo {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 99%; 
    max-width: none;
    overflow: visible;
    z-index: 1;
  }

  .halo svg {
    width: 100%;
    height: auto;
  }

  .halo svg path {
    stroke-width: 5px;
    filter: drop-shadow(0 0 18px #3CA7FF); 
  }
}

 @media screen and (min-width: 992px) and (max-width: 1000px) {
  .halo {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 99%; 
    max-width: none;
    overflow: visible;
    z-index: 1;
  }

  .halo svg {
    width: 100%;
    height: auto;
  }

  .halo svg path {
    stroke-width: 5px;
    filter: drop-shadow(0 0 18px #3CA7FF); 
  }
 }

@media (min-width: 1200px) and (max-width: 1599px) {
.halo {
    width: 100%;
    max-width: 1300px;
    margin-bottom: -180px;
}

svg {
    width: 100%;
}

path.main {
    stroke-width: 2.5;
}
}

@media (min-width: 1600px) and (max-width: 1919px) {
 .halo {
    position: absolute;
    bottom: -35%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%; 
    max-width: none;
    overflow: visible;
    z-index: 1;
  }

  .halo svg {
    width: 100%;
    height: auto;
  }

  .halo svg path {
    stroke-width: 3px;
    filter: drop-shadow(0 0 18px #3CA7FF); 
  }
}

@media (min-width: 1920px) {
  .halo {
    position: absolute;
    bottom: -29%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%; 
    max-width: none;
    overflow: visible;
    z-index: 1;
  }

  .halo svg {
    width: 100%;
    height: auto;
  }

  .halo svg path {
    stroke-width: 3px;
    filter: drop-shadow(0 0 18px #3CA7FF); 
  }
}