*{
  font-family: "Poppins";
}
    @keyframes shakeAndBlur {
        0% {
          transform: translate(0, 0);
          filter: blur(0px);
        }
        25% {
          transform: translate(2px, -2px);
          filter: blur(2px);
        }
        50% {
          transform: translate(-2px, 2px);
          filter: blur(4px);
        }
        75% {
          transform: translate(2px, 2px);
          filter: blur(2px);
        }
        100% {
          transform: translate(0, 0);
          filter: blur(0px);
        }
      }
  
      .shake-blur:hover .img-inner {
        animation: shakeAndBlur 0.5s ease;
        will-change: transform, filter;
      }
  
      /* Efecto de flechita y desplazamiento en el título */
.hover-title .title {
  position: relative;
  display: inline-block;
  transition: padding-left 0.3s ease;
}

.hover-title:hover .title,
.hover-title.hover-active .title {
  padding-left: 3rem;
}

.hover-title .title::before {
  content: '➜';
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: all 0.3s ease;
}

.hover-title:hover .title::before,
.hover-title.hover-active .title::before {
  opacity: 1;
  transform: translateX(0);
}

      .img-outline {
        color: transparent;
        -webkit-text-stroke: 1.5px rgb(255, 255, 255);
      }
      h1 {
        color: aliceblue;
      }
  
      .perspective-wrapper {
        perspective: 800px;
        perspective-origin: left center;
      }
  
      .perspective-text {
        transform: rotateY(-40deg);
        font-weight: 900;
      }

      .outline-text {
        -webkit-text-stroke: 1px rgb(55, 13, 74);
        color: transparent;
        white-space: nowrap;
      }
  
      .no-scrollbar::-webkit-scrollbar {
        display: none;
      }
      .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }


      .gradiante{
        background-image: url("../img/mesh-gradient.webp");
        background-size: cover;
        background-color: rgb(255, 0, 0);
        background-position: center;

      }
      footer {
        background-image: url("../img/mesh-gradient.webp");
        background-size: cover;
        background-color: rgb(255, 0, 0);
        background-position: center;
      }
      

.shake-blur.animate .img-inner {
  animation: shakeAndBlur 0.5s ease;
  will-change: transform, filter;
}