@keyframes glowing-red {
  0%, 100% {
    box-shadow: 0 0 8px #ef4444, 0 0 12px #ef4444;
  }
  50% {
    box-shadow: 0 0 16px #dc2626, 0 0 24px #dc2626;
  }
}

.glow-red {
  animation: glowing-red 2s infinite ease-in-out;
  border: 2px solid #dc2626;
  border-radius: 0.75rem;
}

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

@keyframes rotateIcon {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

.animate-rotate {
  animation: rotateIcon 2s infinite ease-in-out;
}

/* Texto brillante según divisa */
.precio-electric {
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glow 1.6s infinite ease-in-out, gradientShift 5s infinite;
}

.precio-electric[data-color="red"] {
  background-image: linear-gradient(90deg, #ff0000, #ff4d4d, #ff0000);
  color: #f90413;
}

.precio-electric[data-color="blue"] {
  background-image: linear-gradient(90deg, #007bff, #66ccff, #007bff);
  color: #f90413;
}

.precio-electric[data-color="green"] {
  background-image: linear-gradient(90deg, #00cc44, #66ff66, #00cc44);
  color: #f90413;
}

/* Cuadro */
.precio-electric-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  border: 2px solid currentColor;
  border-radius: 0.5rem;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.05);
  animation: glow 2s infinite ease-in-out;
  min-width: 105px;
  min-height: 42px;
  cursor: pointer;
}
@keyframes pulse-price {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.animate-pulse-price {
  animation: pulse-price 1.5s infinite ease-in-out;
}
@keyframes pulse-title {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.animate-pulse-title {
  animation: pulse-title 1.5s infinite ease-in-out;
}
@keyframes glow-title {
  0%, 100% { text-shadow: 0 0 4px #facc15; }
  50% { text-shadow: 0 0 12px #facc15, 0 0 24px #facc15; }
}

.animate-glow-title {
  animation: glow-title 2s infinite ease-in-out;
}


@keyframes lightningFlash {
  0%, 5%, 100% { opacity: 0.2; }
  2%, 4% { opacity: 0.9; }
}

.bg-lightning-animation {
  background: radial-gradient(circle, rgba(0, 191, 255, 0.1) 0%, transparent 60%),
              linear-gradient(45deg, rgba(0, 212, 255, 0.05) 25%, transparent 25%),
              linear-gradient(-45deg, rgba(0, 212, 255, 0.05) 25%, transparent 25%);
  background-size: 200% 200%;
  animation: lightningFlash 3s infinite ease-in-out;
}


/* Fondo de rayos animados diagonales */
@keyframes rayosDiagonal {
  0% { background-position: 0 0; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0 0; }
}

.bg-lightning {
  background-image: 
    linear-gradient(135deg, rgba(255,255,255,0.05) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,0.05) 25%, transparent 25%);
  background-size: 200% 200%;
  animation: rayosDiagonal 3s linear infinite;
}

/* Animación del título brillante */
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 4px #facc15, 0 0 8px #facc15; }
  50% { text-shadow: 0 0 16px #ffe066, 0 0 32px #ffd700; }
}

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

.titulo-impactante {
  background: linear-gradient(90deg, #ffff00, #00ccff, #ffff00);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glowPulse 1.8s infinite ease-in-out, glowGradient 5s infinite linear;
}

/* Entrada suave */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}


@keyframes rayoOrbit {
  0%   { transform: rotate(0deg) translateX(120%) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(120%) rotate(-360deg); }
}

.rayo-orbitante {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #ffff00 20%, #ff0000 70%, transparent 100%);
  border-radius: 50%;
  animation: rayoOrbit 3s linear infinite;
  pointer-events: none;
  opacity: 0.8;
  z-index: 10;
}

@keyframes orbita1 {
  0%   { transform: rotate(0deg) translateX(60vw) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(60vw) rotate(-360deg); }
}
@keyframes orbita2 {
  0%   { transform: rotate(0deg) translateX(40vw) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(40vw) rotate(-360deg); }
}
@keyframes orbita3 {
  0%   { transform: rotate(0deg) translateX(20vw) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(20vw) rotate(-360deg); }
}
.estrella-orbitante {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/120px-Gold_Star.svg.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.8;
  z-index: 50;
  transform-origin: center;
}

.estrella1 {
  animation: orbita1 14s linear infinite;
}
.estrella2 {
  animation: orbita2 10s linear infinite reverse;
}
.estrella3 {
  animation: orbita3 8s linear infinite;
}