/* Eye-catching animations for the "SELECCIONA TU RIFA" title */
.title-rifa-lava2 {
  /* Center and size - improved responsiveness */
  text-align: center;
  font-size: clamp(1.8rem, 5vw, 2.8rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  /* margin: 1.5rem auto 2rem auto !important; */
  
  /* 3D text effect */
  position: relative;
  display: inline-block;
  letter-spacing: 2px;
  padding: 0.5rem 1rem !important;
  
  /* Gold/yellow gradient animation matching site color scheme */
  background: linear-gradient(120deg, 
    #FFD700, /* Gold */
    #FFFBE7, /* Light gold */
    #C08A2F, /* Dark gold */
    #FFD700, /* Gold */
    #FFFBE7  /* Light gold */
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: titleGradientFlow 3s ease infinite;
  
  /* Multiple text shadows for glow effect in gold/yellow */
 
    
  /* No border, just glow effect */
  animation: 
    titleGradientFlow 3s ease infinite,
    titlePulse 2s ease-in-out infinite alternate,
    titleGlow 1.5s ease-in-out infinite alternate;
}



/* Create a subtle before element for extra effects */
.title-rifa-lava2::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;

  z-index: -1;
  animation: beforeGlow 3s ease infinite;
}

/* Animation keyframes */
@keyframes titleGradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes titlePulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

@keyframes titleGlow {
  0% { 
    text-shadow: 
      0 0 5px rgba(255, 215, 0, 0.8),
      0 0 10px rgba(255, 215, 0, 0.5),
      0 0 15px rgba(192, 138, 47, 0.3); 
  }
  100% { 
    text-shadow: 
      0 0 10px rgba(255, 215, 0, 0.9),
      0 0 20px rgba(255, 215, 0, 0.6),
      0 0 30px rgba(192, 138, 47, 0.4); 
  }
}

@keyframes underlineGlow {
  0%, 100% { 
    opacity: 0.5;
    width: 70%; 
    left: 15%;
    filter: blur(1px);
  }
  50% { 
    opacity: 1;
    width: 100%; 
    left: 0;
    filter: blur(2px);
  }
}

/* @keyframes beforeGlow {
  0%, 100% { 
    opacity: 0.3;
    box-shadow: 
      0 0 20px rgba(255, 215, 0, 0.4),
      0 0 40px rgba(192, 138, 47, 0.2);
  }
  50% { 
    opacity: 0.5;
    box-shadow: 
      0 0 30px rgba(255, 215, 0, 0.6),
      0 0 60px rgba(192, 138, 47, 0.3);
  }
} */

/* Add attention-grabbing floating stars around the title */
@keyframes floatingStar {
  0%, 100% { 
    transform: translateY(0) rotate(0deg); 
    opacity: 0.7;
  }
  50% { 
    transform: translateY(-15px) rotate(180deg); 
    opacity: 1;
  }
}

/* Stars container - more responsive */
.title-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 15px 0;
  min-height: 80px;
  overflow: visible;
  max-width: 100vw;
}

/* Media queries for better responsiveness */
@media (max-width: 768px) {
  .title-rifa-lava2 {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    padding: 0.4rem 0.8rem !important;
    margin: 1rem auto 1.5rem auto !important;
  }
  
  .title-container {
    padding: 10px 0;
    min-height: 70px;
  }
}

@media (max-width: 480px) {
  .title-rifa-lava2 {
    font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
    letter-spacing: 1px;
    padding: 0.3rem 0.6rem !important;
    margin: 0.8rem auto 1.2rem auto !important;
  }
  
  .title-container {
    padding: 8px 0;
    min-height: 60px;
  }
}