.scroll-section {
  position: relative;
  height: 200vh;
  background-color: #3a3939;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #292929;
  transition: background-color 1s ease-in-out;
}

.scroll-container {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  margin-top: 10px;
  
}

.cylinder {
  width: 200px;
  height: 1000px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s ease-in-out;
  margin-top: 70px;
}

.band {
  position: absolute;
  width: 300px;
  height: 40px;
  background: linear-gradient(90deg, #00cfff, #00ffff);
  color: #000;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:
    0 0 10px #00f0ff,
    0 0 20px #00e0ff,
    inset 0 0 10px #00ffff;
  filter: drop-shadow(0 0 10px #00e0ff);
  animation: band-glitch 2s infinite ease-in-out;
  /* NO usar transform fijo aquí */
}

/* Glitch: solo efectos visuales */
@keyframes band-glitch {
  0%, 100% {
    filter: drop-shadow(0 0 10px #00e0ff);
    opacity: 1;
  }
  10% {
    filter: drop-shadow(0 0 15px #00ffff);
  }
  15% {
    opacity: 0.95;
  }
  20% {
    filter: drop-shadow(0 0 10px #00e0ff);
  }
}

/* Hover opcional */
.band:hover {
  background: linear-gradient(90deg, #00ffff, #00cfff);
  transform: scale(1.03); /* Solo escala, no rotaciones */
}

.letra_fija{
  position: absolute;
  display: flex;
  flex-flow: row wrap;
  align-self: flex-start;
  align-content: flex-start;
  color: white;
  margin-right: 1100px;
  font-family:'Kola';
  animation: flicker 0.15s infinite alternate;
    text-shadow:
      0 0 5px #0ff,
      0 0 10px #0ff,
      0 0 20px #0ff,
      0 0 40px #0ff;
  margin-top: 30px;
  font-size: 30px;
}

.hogar{
  position: absolute;
  display: flex;
  flex-flow: row wrap;
  align-self: flex-end;
  align-content: flex-end;
  transition: color 0.3s ease;
      animation: flicker_purple 0.15s infinite alternate;
      text-shadow:
        0 0 5px #cc00ff,
        0 0 10px #cc00ff,
        0 0 20px #cc00ff,
        0 0 40px #cc00ff;
  margin-left: 1250px;
  margin-bottom: 1250px;
  font-size: 25px;
}

/* Nuevos estilos para rayos laterales */
.lightning-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.lightning-side {
  position: absolute;
  width: 300px;
  height: 100vh;
  top: 0; /* ← Esto sube los rayos */
}

.lightning-side.left {
  left: 50px;
}

.lightning-side.right {
  right: 50px;
}

.lightning-bolt {
  position: absolute;
  width: 100%;
  height: 100%;
  stroke: #00ffff;
  stroke-width: 2;
  fill: none;
  filter: url(#lightning-glow);
  opacity: 0;
}

/* Ajustes para el cilindro con rayos */
.scroll-container.logo-electrico {
  position: relative;
  width: 100%;
  height: 100%;
}

.scroll-container .rayos-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: 15;
}