.animated-gradient-text {
  position: relative;
  margin: 0 auto;
  display: flex;
  max-width: fit-content;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 1.25rem;
  font-weight: 700;
  transition: box-shadow 0.5s ease-out;
  overflow: hidden;
  /* Optimización para móvil */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 300% 100%;
  animation: gradient linear infinite;
  -webkit-animation: gradient linear infinite;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  /* Aceleración GPU */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: background-position;
}

.gradient-overlay::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-radius: inherit;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: transparent;
  z-index: -1;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.text-content {
  display: inline-block;
  position: relative;
  z-index: 2;
  background-size: 300% 100%;
  /* Prefijos vendor completos para background-clip */
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradient linear infinite;
  -webkit-animation: gradient linear infinite;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  /* Aceleración GPU */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: background-position;
  
  /* Mejorar renderizado en múltiples líneas */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Fallback para navegadores que no soportan background-clip: text */
@supports not (-webkit-background-clip: text) {
  .text-content {
    color: var(--primary-cyan, #00BFFF);
    -webkit-text-fill-color: var(--primary-cyan, #00BFFF);
    background: none;
  }
}

/* Optimización crítica para navegadores in-app (Instagram, Facebook) y móviles */
@media screen and (max-width: 768px), screen and (hover: none) and (pointer: coarse) {
  .text-content {
    /* Problema conocido: text-shadow rompe background-clip: text en WebKit mobile */
    text-shadow: none !important; 
    
    /* Asegurar renderizado correcto */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    
    /* Prevenir artefactos visuales */
    transform: translateZ(0);
    will-change: auto; 
  }
  
  .gradient-overlay {
    will-change: auto;
    /* En móviles a veces es mejor ocultar el overlay si da problemas, pero probemos mantenerlo */
  }
}

/* Simplificar animaciones en dispositivos de bajo rendimiento */
@media (prefers-reduced-motion: reduce) {
  .text-content,
  .gradient-overlay {
    animation: none;
    -webkit-animation: none;
  }
}