front-AT/app/Components/Wave/wave.module.css

.ocean {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30vh;
  overflow: hidden;
  background: #4fc3f7; /* color del mar */
  z-index: -1; /* para que quede atrás del contenido */
}

.wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 160%;
  height: 130%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50% 50%;
  animation: waveMove 6s linear infinite;
}

.wave:nth-child(2) {
  top: -10;
  background: rgba(255, 255, 255, 0.3);
  animation-duration: 8s;
  animation-delay: -2s;
}

.wave:nth-child(3) {
  background: rgba(255, 255, 255, 0.2);
  animation-duration: 10s;
  animation-delay: -4s;
}

@keyframes waveMove {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(-25%) translateY(5%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

@media (max-width: 800px) {
  .ocean {
    background: transparent;
  }
  .wave {
    display: none;
  }
}