/* ==============================================
   FONDOS CON ONDAS - ÉVOLE
   ============================================== */

/* Contenedor base para fondos con ondas */
.wave-background {
  position: relative;
  overflow: hidden;
}

.wave-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

/* Variante 1: Ondas azules suaves (para secciones pares) */
.wave-bg-blue::before {
  background-image: 
    radial-gradient(ellipse 800px 600px at 20% 30%, rgba(2, 114, 177, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 600px 800px at 80% 70%, rgba(2, 114, 177, 0.04) 0%, transparent 50%);
}

/* Variante 2: Ondas verdes suaves (para secciones impares) */
.wave-bg-green::before {
  background-image: 
    radial-gradient(ellipse 700px 500px at 80% 20%, rgba(133, 175, 83, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 500px 700px at 10% 80%, rgba(133, 175, 83, 0.04) 0%, transparent 50%);
}

/* Variante 3: Ondas mixtas (azul + verde) */
.wave-bg-mixed::before {
  background-image: 
    radial-gradient(ellipse 900px 600px at 10% 40%, rgba(2, 114, 177, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 600px 900px at 90% 60%, rgba(133, 175, 83, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 400px 400px at 50% 50%, rgba(2, 114, 177, 0.02) 0%, transparent 50%);
}

/* Variante 4: Ondas sutiles grises (para secciones neutras) */
.wave-bg-neutral::before {
  background-image: 
    radial-gradient(ellipse 1000px 400px at 30% 20%, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse 800px 600px at 70% 80%, rgba(0, 0, 0, 0.015) 0%, transparent 50%);
}

/* Asegurar que el contenido esté por encima del fondo */
.wave-background > * {
  position: relative;
  z-index: 1;
}

/* Animación sutil opcional (muy suave para no distraer) */
@keyframes wave-float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.02);
  }
}

.wave-bg-animated::before {
  animation: wave-float 20s ease-in-out infinite;
}