@keyframes message {
    0% {
      max-height: 100vmax;
    }
    10% {
      transform: scale(1.1);
    }
    20% {
      transform: scale(1);
      max-height: 100vmax;
      overflow: visible;
      padding-top: 1rem;
    }
    30% {
      transform: scale(1);
      max-height: 100vmax;
      overflow: visible;
      padding-top: 1rem;
    }
    40% {
      transform: scale(1);
      max-height: 100vmax;
      overflow: visible;
      padding-top: 1rem;
    }
    50% {
      transform: scale(1);
      max-height: 100vmax;
      overflow: visible;
      padding-top: 1rem;
    }
    60% {
      transform: scale(1);
      max-height: 100vmax;
      overflow: visible;
      padding-top: 1rem;
    }
    70% {
      transform: scale(1);
      max-height: 100vmax;
      overflow: visible;
      padding-top: 1rem;
    }
    80% {
      transform: scale(1);
      max-height: 100vmax;
      overflow: visible;
      padding-top: 1rem;
    }
    90% {
      transform: scale(1.1);
      max-height: 100vmax;
      overflow: visible;
      padding-top: 1rem;
    }
    95% {
      transform: scale(1);
      max-height: 100vmax;
      overflow: visible;
      padding-top: 1rem;
    }
    100% {
      transform: scale(0);
    }
  }

@keyframes ondas1 {
    0% {
      transform: scale(0);
      transform-origin: center;
    }
    20% {
      transform: scale(0.8);
      transform-origin: center;
      opacity: 0.1;
    }
    100% {
      transform: scale(1);
      transform-origin: center;
    }
  }
  @keyframes face1 {
    0% {
      transform: scale(0);
      transform-origin: center;
    }
    20% {
      transform: scale(0.9);
      transform-origin: center;
      opacity: 0.1;
    }
    100% {
      transform: scale(1);
      transform-origin: center;
    }
  }
@keyframes ondas2 {
    0% {
      transform: scale(0);
      transform-origin: center;
    }
    20% {
      transform: scale(0.8);
      transform-origin: center;
      opacity: 0.1;
    }
    100% {
      transform: scale(1);
      transform-origin: center;
    }
  }
  @keyframes face2 {
    0% {
      transform: scale(0);
      transform-origin: center;
    }
    20% {
      transform: scale(0.5);
      transform-origin: center;
      opacity: 0.1;
    }
    100% {
      transform: scale(1);
      transform-origin: center;
    }
  }
  @keyframes ondas3 {
    0% {
      transform: scale(0);
      transform-origin: center;
    }
    20% {
      transform: scale(0.3);
      transform-origin: center;
    }
    100% {
      transform: scale(1);
      transform-origin: center;
    }
  }
  @keyframes luz {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90%{
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes pulse {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0);
    }
  }