.containerr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #000000;
  margin: 6.5%;
  overflow: hidden;
  perspective: 1000px;
  will-change: transform; /* Optimización de rendimiento */
}

.text {
  font-size: 7vw;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 100%;
  margin: 0;
  width: 100%;
  color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  padding: 30px 0;
  cursor: default;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); /* Transición más rápida */
  margin-bottom: 30px;
  transform: translateY(0);
  opacity: 1;
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden; /* Mejora rendimiento en transformaciones */
}

/* Estilo para cada letra individual */
.text .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotateX(25deg) scale(0.9); /* Valores más sutiles */
  filter: blur(3px);
  transition: 
    opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), 
    transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), 
    filter 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
    color 0.3s ease;
  transition-delay: calc(var(--index) * 0.04s); /* Retraso más corto */
  transform-origin: bottom center;
  text-shadow: 0 0 0 rgba(0, 213, 71, 0);
  will-change: transform, opacity, filter;
}

/* Cuando el texto está activo, mostrar las letras con efectos mejorados */
.text.scroll-active .letter {
  opacity: 1;
  transform: translateY(0) rotateX(0) scale(1);
  filter: blur(0);
}

/* Efecto de hover para letras individuales - más rápido */
.text:hover .letter {
  color: #00D547;
  text-shadow: 0 0 15px rgba(0, 213, 71, 0.5);
  animation: letterPulse 1s infinite alternate ease-in-out; /* Animación más rápida */
  animation-delay: calc(var(--index) * 0.03s); /* Retraso más corto */
}

@keyframes letterPulse {
  0% {
    transform: translateY(0) scale(1);
    text-shadow: 0 0 5px rgb(0, 213, 71);
  }
  100% {
    transform: translateY(-3px) scale(1.05); /* Movimiento más sutil */
    text-shadow: 0 0 15px #00D547, 0 0 20px #ffe100;
  }
}

/* Efecto de scroll - clase aplicada por JS */
.text.scroll-active {
  transform: translateY(-3px) rotateX(3deg); /* Rotación más sutil */
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.1),
    0 4px 10px rgba(0, 213, 71, 0.1);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Más rápido */
}

.text:not(.scroll-active) {
  opacity: 0.3;
  filter: blur(2px); /* Menos blur para transición más rápida */
  transform: translateY(20px) scale(0.97); /* Movimiento más sutil */
  transition: all 0.45s ease-out; /* Transición más rápida */
}

/* Crear el efecto con pseudo-elemento SOLO PARA HOVER */
.text::before {
  content: attr(data-hover-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #7bff00 0%, #ffd900 100%);
  background-size: 200% 200%;
  color: #000000;
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  transform-origin: center;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); /* Más rápido */
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  will-change: clip-path, background-position;
  opacity: 0.95;
}

/* Efecto SOLO al hacer hover - más fluido */
.text:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  animation: gradientShift 2s ease infinite; /* Más rápido */
}

/* Animación de gradiente para el hover */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Estilo para los enlaces dentro del texto */
.text a {
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 2;
  transition: all 0.35s ease-out; /* Más rápido */
}

/* Asegurarse de que los enlaces sean visibles cuando se hace hover */
.text:hover a {
  color: #000000;
  transform: scale(1.03); /* Escala más sutil */
}

/* Animación de entrada para los textos al hacer scroll */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(25px) rotateX(15deg); /* Valores más sutiles */
    filter: blur(5px);
  }
  60% {
    opacity: 0.7;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0);
    filter: blur(0);
  }
}

/* Aplicar la animación a los textos cuando aparecen en el viewport */
.text.scroll-active {
  animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards; /* Más rápido */
}

/* Efecto de transición para el texto que está activo en scroll */
.text.scroll-active {
  filter: blur(0);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); /* Más rápido */
  position: relative;
}

/* Añadir un efecto de brillo al borde inferior cuando está activo */
.text.scroll-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00D547, #ffd900, transparent);
  background-size: 200% 100%;
  animation: borderGlow 1.5s linear infinite; /* Más rápido */
}

@keyframes borderGlow {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Animación para el texto al hacer hover - efecto de elevación */
.text:hover {
  transform: translateY(-5px) scale(1.01); /* Movimiento más sutil */
  box-shadow: 
    0 10px 20px rgba(0, 213, 71, 0.15),
    0 4px 10px rgba(0, 163, 255, 0.1);
  border-bottom-color: #00D547;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Más rápido */
}

/* Efecto de letra 3D al pasar el cursor */
.letter-container {
  display: inline-block;
  position: relative;
}

/* Efecto de destello aleatorio para algunas letras */
.text.scroll-active .letter:nth-child(3n+1) {
  animation: letterFlash 2s infinite alternate; /* Más rápido */
  animation-delay: calc(var(--index) * 0.05s + 0.5s); /* Retraso más corto */
}

@keyframes letterFlash {
  0%, 95%, 100% {
    color: #ffffff;
    text-shadow: none;
  }
  97% {
    color: #00D547;
    text-shadow: 0 0 8px #00d547e5, 0 0 15px #ffd900;
  }
}

/* Efecto de movimiento ondulatorio para las letras */
.text.scroll-active:hover .letter {
  animation: letterWave 1.2s infinite ease-in-out; /* Más rápido */
  animation-delay: calc(var(--index) * 0.04s); /* Retraso más corto */
}

@keyframes letterWave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px); /* Movimiento más sutil */
  }
}