@keyframes slideOutUp {
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.inner-image-cont.exiting {
  animation: slideOutUp 1s forwards;
}


#imagenRotar {
    transition: transform 0.2s ease-in-out; /* Suaviza la transición de la rotación */
}

@keyframes floatAnimation1 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
    100% {
      transform: translateY(0);
    }
    }
    @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0);
    }
    }
    @keyframes floatAnimation3 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0);
    }
    }
    @keyframes floatAnimation4 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-30px);
    }
    100% {
      transform: translateY(0);
    }
    }
  
  .float-1 {
    animation: floatAnimation1 5s ease-in-out infinite;
  }
  .float-2 {
    animation: floatAnimation2 3s ease-in-out infinite;
  }
  .float-3 {
    animation: floatAnimation3 3s ease-in-out infinite;
  }
  .float-4 {
    animation: floatAnimation4 3s ease-in-out infinite;
  }
  
  @keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
  }

  .pulse {
    animation: pulse 1.5s infinite alternate; /* La animación durará 1.5 segundos, se repetirá infinitamente y alternará entre el estado original y el transformado */
    }



    @keyframes shake {
      0%, 10%, 100% { transform: translateX(0); }
      2.5% { transform: translateX(-10px); }
      5% { transform: translateX(10px); }
      7.5% { transform: translateX(-10px); }
    }
    
    .shake {
      animation: shake 6s ease-in-out infinite;
    }


  @keyframes floatA {
    0% {
      transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
      transform: translate(-5px, -5px) rotate(-3deg);
    }
    50% {
      transform: translate(5px, -10px) rotate(3deg);
    }
    75% {
      transform: translate(-5px, 5px) rotate(-1.5deg);
    }
    100% {
      transform: translate(0px, 0px) rotate(0deg);
    }
  }
  
  .floatA {
    animation: floatA 6s ease-in-out infinite;
  }

  @keyframes floatB {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    20% {
      transform: translate(-10px, 5px) rotate(-2deg);
    }
    40% {
      transform: translate(10px, -5px) rotate(2deg);
    }
    60% {
      transform: translate(-5px, 10px) rotate(-1deg);
    }
    80% {
      transform: translate(5px, -10px) rotate(1deg);
    }
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
  }
  
  .floatB {
    animation: floatB 7s ease-in-out infinite;
  }

  
  @keyframes floatC {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    20% {
      transform: translate(8px, -10px) rotate(-3deg);
    }
    40% {
      transform: translate(-10px, 5px) rotate(3deg);
    }
    60% {
      transform: translate(10px, -5px) rotate(-2deg);
    }
    80% {
      transform: translate(-5px, 8px) rotate(2deg);
    }
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
  }

  .floatC {
    animation: floatC 7s ease-in-out infinite;
  }
 
  @keyframes floatD {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(-3px, -8px) rotate(2deg);
    }
    50% {
      transform: translate(3px, 10px) rotate(-4deg);
    }
    75% {
      transform: translate(-6px, 5px) rotate(3deg);
    }
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
  }

  .floatD {
    animation: floatD 8s ease-in-out infinite;
  }
 
  @keyframes floatE {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    15% {
      transform: translate(5px, -5px) rotate(-5deg);
    }
    30% {
      transform: translate(-4px, 4px) rotate(5deg);
    }
    45% {
      transform: translate(3px, -3px) rotate(-4deg);
    }
    60% {
      transform: translate(-2px, 2px) rotate(4deg);
    }
    75% {
      transform: translate(2px, -2px) rotate(-3deg);
    }
    90% {
      transform: translate(-1px, 1px) rotate(2deg);
    }
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
  }

  .floatE {
    animation: floatE 5s ease-in-out infinite;
  }


  @keyframes spiralLoop {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(20px, 20px) rotate(90deg);
    }
    50% {
      transform: translate(40px, 0) rotate(180deg);
    }
    75% {
      transform: translate(20px, -20px) rotate(270deg);
    }
    100% {
      transform: translate(0, 0) rotate(360deg);
    }
  }
  
  .spiralLoop {
    animation: spiralLoop 10s infinite linear;
  }
  

  @keyframes floatAInverted {
    0% {
      transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
      transform: translate(-4px, -4px) rotate(-2deg);
    }
    50% {
      transform: translate(-7px, 5px) rotate(3deg);
    }
    75% {
      transform: translate(4px, -4px) rotate(-1.5deg);
    }
    100% {
      transform: translate(0px, 0px) rotate(0deg);
    }
  }
  
  .floatAInverted {
    animation: floatAInverted 6s ease-in-out infinite;
  }

  @keyframes textGlow {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
  
  .textGlow {
    animation: textGlow 1s ease-in-out infinite;
  }
  

  @keyframes drawLine {
    to {
        width: calc(100% - 32%);
    }
}
  


/* CIRCULOS ONDAS */

@keyframes circle {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(6)
  }
}

.circle {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 3px solid rgba(255, 255, 255, 0.034);
  border-radius: 50%;
  position: absolute;
  top: 40%;
  left: 35%;
  z-index: 299 !important;
}

@keyframes circle {
  0% {
    transform: scale(1);
    border-color: rgba(255, 255, 255, 0);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.15);
  }
  100% {
    transform: scale(5);
    border-color: rgba(255, 255, 255, 0);
  }
}

@keyframes circle2 {
  0% {
    transform: scale(2);
    border-color: rgba(255, 255, 255, 0);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.15);
  }
  100% {
    transform: scale(7);
    border-color: rgba(255, 255, 255, 0);
  }
}


.one {
  animation: circle 2s infinite linear;
}

.two {
  animation: circle2 2s infinite linear;
}

.three {
  animation: circle 2s infinite linear;
}