html, body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
  body {
    background-color: hsl(166, 100%, 30%);
    position: relative;
  }
  
  /* Onda superior (no repetida, onda grande animada) */
  body::before {
    content: "";
    position: absolute;
    top: -55vh;
    right: -140vh;
    width: 150%;
    height: 150vh; /* Ajusta según lo alto que quieras la onda */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    z-index: -1;
    /* Se combina la inversión y rotación original con una animación de traslación */
    transform: scaleX(-1) rotate(-220deg);
    animation: waveTopMove 10s ease-in-out infinite;
    background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1000 500'>\
    <path fill='%23cea93a' d='M0,250 C125,100 375,100 500,250 C625,400 875,400 1000,250 V500 H0 Z'/>\
  </svg>");
   
  }
  
  /* Onda inferior (no repetida, onda grande animada) */
  body::after {
    content: "";
    position: absolute;
    bottom: -60vh;
    left: -40vh;
    right: 0;
    width: 200%;
    height: 230vh; /* Ajusta según lo alto que quieras la onda */
    background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1000 500'>\
    <path fill='%23000eb6' d='M0,250 C125,100 375,100 500,250 C625,400 875,400 1000,250 V500 H0 Z'/>\
  </svg>");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    z-index: -1;
    transform: scaleX(-1) rotate(100deg);
    animation: waveBottomMove 20s ease-in-out infinite;
  }
  
  /* Keyframes para mover la onda superior */
  @keyframes waveTopMove {
    0% {
      transform: scaleX(-1) rotate(-220deg) translateX(0);
    }
    50% {
      transform: scaleX(-1) rotate(-220deg) translateX(-100px);
    }
    100% {
      transform: scaleX(-1) rotate(-220deg) translateX(0);
    }
  }
  
  /* Keyframes para mover la onda inferior */
  @keyframes waveBottomMove {
    0% {
      transform: scaleX(-1) rotate(-20deg) translateX(0);
    }
    50% {
      transform: scaleX(-1) rotate(-20deg) translateX(100px);
    }
    100% {
      transform: scaleX(-1) rotate(-20deg) translateX(0);
    }
  }
  

  @media screen and (max-width: 745px) {

    body::before {
      top: -45vh;
      right: -48vh;
    }
    body::after {
      bottom: -38vh;
      left: -57vh;
    }

  }