/* ===============================================
   BACKGROUND ORGÁNICO - SOLO HTML + CSS
   =============================================== */

/* Reseteo y configuración base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Configuración principal del body */
body {
  background: linear-gradient(
    125deg,
    #f4fdf4 0%,
    #f0fff0 25%,
    #f6fff6 50%,
    #f5fff5 75%,
    #e3ffe3 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Animación del gradiente principal */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Primer pseudo-elemento: Círculos orgánicos flotantes */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
  background: 
        /* Círculo grande superior izquierdo */ radial-gradient(
      circle 120px at 15% 20%,
      rgba(139, 195, 74, 0.1) 0%,
      transparent 70%
    ),
    /* Círculo mediano centro-derecha */
      radial-gradient(
        circle 80px at 75% 40%,
        rgba(165, 214, 167, 0.08) 0%,
        transparent 70%
      ),
    /* Círculo pequeño inferior centro */
      radial-gradient(
        circle 60px at 50% 80%,
        rgba(139, 195, 74, 0.12) 0%,
        transparent 70%
      ),
    /* Círculo grande inferior derecha */
      radial-gradient(
        circle 140px at 85% 75%,
        rgba(165, 214, 167, 0.09) 0%,
        transparent 70%
      ),
    /* Círculo mediano superior centro */
      radial-gradient(
        circle 90px at 40% 15%,
        rgba(139, 195, 74, 0.07) 0%,
        transparent 70%
      );
  animation: organicFloat 20s ease-in-out infinite;
}

@keyframes organicFloat {
  0%,
  100% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: translateX(20px) translateY(-15px) scale(1.05);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-15px) translateY(10px) scale(0.95);
    opacity: 0.9;
  }
  75% {
    transform: translateX(10px) translateY(-5px) scale(1.02);
    opacity: 0.7;
  }
}

/* Segundo pseudo-elemento: Hojas y partículas flotantes */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background: 
        /* Simulación de hojas usando gradientes radiales */ radial-gradient(
      ellipse 12px 18px at 10% 100%,
      rgba(139, 195, 74, 0.6) 0%,
      rgba(139, 195, 74, 0.3) 50%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 8px 14px at 25% 110%,
      rgba(165, 214, 167, 0.5) 0%,
      rgba(165, 214, 167, 0.2) 50%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 15px 20px at 45% 120%,
      rgba(139, 195, 74, 0.4) 0%,
      rgba(139, 195, 74, 0.2) 50%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 10px 16px at 70% 105%,
      rgba(165, 214, 167, 0.6) 0%,
      rgba(165, 214, 167, 0.3) 50%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 13px 19px at 85% 115%,
      rgba(139, 195, 74, 0.5) 0%,
      rgba(139, 195, 74, 0.2) 50%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 9px 15px at 60% 108%,
      rgba(165, 214, 167, 0.4) 0%,
      rgba(165, 214, 167, 0.2) 50%,
      transparent 70%
    ),
    /* Partículas pequeñas */
      radial-gradient(
        circle 2px at 20% 90%,
        rgba(139, 195, 74, 0.8) 0%,
        transparent 70%
      ),
    radial-gradient(
      circle 3px at 40% 95%,
      rgba(165, 214, 167, 0.7) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle 2px at 75% 88%,
      rgba(139, 195, 74, 0.6) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle 2px at 90% 92%,
      rgba(165, 214, 167, 0.8) 0%,
      transparent 70%
    );
  animation: floatingElements 25s linear infinite;
}

@keyframes floatingElements {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
  }
}

/* Clase contenedora para efectos adicionales */
.organic-container {
  position: relative;
  z-index: 1;
}

/* Ondas sutiles en la parte inferior usando pseudo-elemento */
.organic-container::before {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
      to top,
      rgba(139, 195, 74, 0.1) 0%,
      transparent 100%
    ),
    linear-gradient(to top, rgba(165, 214, 167, 0.08) 0%, transparent 80%);
  animation: gentleWave 12s ease-in-out infinite;
}

@keyframes gentleWave {
  0%,
  100% {
    transform: translateX(0) scaleY(1);
  }
  33% {
    transform: translateX(-20px) scaleY(1.1);
  }
  66% {
    transform: translateX(15px) scaleY(0.9);
  }
}

/* Efecto de partículas adicionales usando box-shadow */
.organic-particles {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: -1;
}

.organic-particles::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 
        /* Partículas dispersas por toda la pantalla */ -400px -200px
      0 1px rgba(139, 195, 74, 0.4),
    -200px -400px 0 1px rgba(165, 214, 167, 0.5),
    200px -300px 0 2px rgba(139, 195, 74, 0.3),
    400px -100px 0 1px rgba(165, 214, 167, 0.4),
    -300px 100px 0 1px rgba(139, 195, 74, 0.5),
    100px 200px 0 2px rgba(165, 214, 167, 0.3),
    300px 100px 0 1px rgba(139, 195, 74, 0.4),
    -100px 300px 0 1px rgba(165, 214, 167, 0.5),
    -200px -100px 0 1px rgba(139, 195, 74, 0.3),
    450px 50px 0 2px rgba(165, 214, 167, 0.4),
    -450px 150px 0 1px rgba(139, 195, 74, 0.5),
    0px -250px 0 1px rgba(165, 214, 167, 0.3),
    -350px -50px 0 2px rgba(139, 195, 74, 0.4),
    350px -150px 0 1px rgba(165, 214, 167, 0.5),
    -50px 400px 0 1px rgba(139, 195, 74, 0.3);
  animation: particlesDrift 30s linear infinite;
}

@keyframes particlesDrift {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50px) translateX(25px);
    opacity: 0;
  }
}

/* Efecto de brillo sutil */
.organic-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -3;
  background: radial-gradient(
      circle 300px at 20% 30%,
      rgba(139, 195, 74, 0.03) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle 400px at 80% 70%,
      rgba(165, 214, 167, 0.02) 0%,
      transparent 70%
    );
  animation: glowPulse 18s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body::before {
    background: radial-gradient(
        circle 80px at 15% 20%,
        rgba(139, 195, 74, 0.08) 0%,
        transparent 70%
      ),
      radial-gradient(
        circle 60px at 75% 40%,
        rgba(165, 214, 167, 0.06) 0%,
        transparent 70%
      ),
      radial-gradient(
        circle 50px at 50% 80%,
        rgba(139, 195, 74, 0.09) 0%,
        transparent 70%
      );
  }

  body::after {
    background: radial-gradient(
        ellipse 8px 12px at 10% 100%,
        rgba(139, 195, 74, 0.5) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 6px 10px at 30% 110%,
        rgba(165, 214, 167, 0.4) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 10px 14px at 70% 105%,
        rgba(139, 195, 74, 0.4) 0%,
        transparent 70%
      );
  }
}

/* Clase para contenido principal */
.content {
  position: relative;
  z-index: 10;
  padding: 2rem;
  color: #2e7d32;
}

/* Opcional: clase para desactivar animaciones */
@media (prefers-reduced-motion: reduce) {
  body,
  body::before,
  body::after,
  .organic-container::before,
  .organic-particles::before,
  .organic-glow {
    animation: none;
  }

  body {
    background: linear-gradient(135deg, #e8f5e8, #f0f8f0, #e0f2e0, #f5f9f5);
  }
}