/* ocultar menu toggle */
.menu__toggle {
  display: none;
}

/* Icono de la hamburguesa */
.menu__icon {
  display: flex;
  align-items: right;
  cursor: pointer;
  color: #000;
  margin: auto;
}

.menu__toggle:checked + .menu__modal {
  display: flex;
}

/* Fondo y efectos orgánicos adaptados */
.menu__modal {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /* Fondo animado igual al body */
  background: linear-gradient(
    125deg,
    rgba(80, 100, 80, 0.83) 0%,
    rgba(70, 90, 70, 0.83) 25%,
    rgba(65, 80, 65, 0.83) 50%,
    rgba(60, 75, 60, 0.83) 75%,
    rgba(55, 65, 55, 0.83) 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  justify-content: center;
  align-items: center;
  z-index: 0;
  overflow: hidden;
}

/* Círculos orgánicos flotantes para el modal */
.menu__modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
      circle 120px at 15% 20%,
      rgba(139, 195, 74, 0.1) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle 80px at 75% 40%,
      rgba(165, 214, 167, 0.08) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle 60px at 50% 80%,
      rgba(139, 195, 74, 0.12) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle 140px at 85% 75%,
      rgba(165, 214, 167, 0.09) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle 90px at 40% 15%,
      rgba(139, 195, 74, 0.07) 0%,
      transparent 70%
    );
  animation: organicFloat 20s ease-in-out infinite;
}

/* Hojas y partículas flotantes para el modal */
.menu__modal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  background: 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%
    ),
    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;
}

/* Animaciones reutilizadas */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@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;
  }
}
@keyframes floatingElements {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
  }
}

.menu__content {
  /* Alternativa: degradado suave en verdes y beige, claro y cálido */
  background: linear-gradient(
    135deg,
    #f1f8e9 0%,
    #c8e6c9 35%,
    #b9e6c0 70%,
    #fffde7 100%
  );
  padding: 20px;
  border-radius: 10px;
  height: 30%;
  width: 80%;
  max-width: 400px;
  text-align: center;
  position: relative;
  top: 10 0px;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* boton cerrar modal */
.menu__close--btn {
  font-size: 45px;
  color: #ff0000;
  position: absolute;
  top: 10px;
  right: 30px;
  cursor: pointer;
}

.menu__links {
  font-size: 40px;
  font-weight: 600;
  list-style-type: none;
  padding: 0;
  margin: 10px 0px 0px;
}

.menu__links li {
  margin: 10px 0px;
}

.menu__links a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
}