/* Animaciones */
.effTransition{ transition: transform 1s ease; }
.effZoom:hover{ transform: scale(1.2); }

.effHero{ animation: hero 2s ease 0s 1 normal forwards; }
.effInfintHero{ animation: hero 3s ease 5s infinite normal forwards; }

/* boxs */
.bxShadow{ border: 1px solid #0000009d; animation: bxShadow 10s ease 0s 1 normal none; animation-iteration-count: infinite; }

/* textos */
.txtShadow{ animation: txtShadow 15s ease 0s 1 normal both; }
.ffzoom:hover{ animation: zoom 2s ease 0s 1 normal; animation-iteration-count: infinite; }

@keyframes hero { 0% { animation-timing-function: ease-in; opacity: 0; transform: translateY(-250px); } 38% { animation-timing-function: ease-out; opacity: 1; transform: translateY(0); } 55% { animation-timing-function: ease-in; transform: translateY(-65px); } 72% { animation-timing-function: ease-out; transform: translateY(0); } 81% { animation-timing-function: ease-in; transform: translateY(-28px); } 90% { animation-timing-function: ease-out; transform: translateY(0); } 95% { animation-timing-function: ease-in; transform: translateY(-8px); } 100% { animation-timing-function: ease-out; transform: translateY(0); } }

@keyframes carrousel { 0% { animation-timing-function: ease-in; opacity: 0; transform: translateX(-250px); } 38% { animation-timing-function: ease-out; opacity: 1; transform: translateX(0); } 55% { animation-timing-function: ease-in; transform: translateX(-68px); } 72% { animation-timing-function: ease-out; transform: translateX(0); } 81% { animation-timing-function: ease-in; transform: translateX(-28px); } 90% { animation-timing-function: ease-out; transform: translateX(0); } 95% { animation-timing-function: ease-in; transform: translateX(-8px); } 100% { animation-timing-function: ease-out; transform: translateX(0); } }

@keyframes spawn { 0% { transform: scale(1); } 10% { transform: scale(1.1); } 30% { transform: scale(1.2); } 50% { transform: scale(1.3); } 70% { transform: scale(1.21); } 90% { transform: scale(1.1); } 100% { transform: scale(1); } }

@keyframes inleft { 0% { opacity: 0; transform: translateX(-250px); } 100% { opacity: 1; transform: translateX(0); } }

@keyframes inright { 0% { opacity: 0; transform: translateX(250px); } 100% { opacity: 1; transform: translateX(0); } }

@keyframes txtShadow{ 0% { text-shadow: -5px 5px 7px #000000; } 40% { text-shadow: 5px 0px 7px #f10505; } 100% { text-shadow: 0px -5px 7px #0409f8; } }

@keyframes bxShadow{ 0% { box-shadow: 5px 5px 5px 1px #00000093; } 10% { box-shadow: -5px 5px 5px 1px #00000093; } 20% { box-shadow: 5px -5px 5px 1px #00000093; } 30% { box-shadow: -5px -5px 5px 1px #00000093; } 40% { box-shadow: -5px 5px 5px 1px #00000093; } 50% { box-shadow: 5px -5px 5px 1px #00000093; } 60% { box-shadow: 5px -5px 5px 1px #00000093; } 70% { box-shadow: -5px 5px 5px 1px #00000093; } 80% { box-shadow: 5px 5px 5px 1px #00000093; } 90% { box-shadow: 5px -5px 5px 1px #00000093; } 100% { box-shadow: 5px 5px 5px 1px #00000093; } }

/* Efecto de Desvanecimiento (Fade In) */
.fffIn { animation: fadeIn 1s ease-in-out forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fffInInf { animation: fadeInInf 1s ease-in-out infinite; } @keyframes fadeInInf { from { opacity: 0; } to { opacity: 1; } }

/* Efecto de Rotación (Rotate) */
.fffr { animation: rotateOnce 2s linear forwards; } @keyframes rotateOnce { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fffrinf { animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Efecto de Rebote (Bounce) */
.fffbinf { animation: bounce 1s ease-in-out infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } }
.fffb { animation: bounceOnce 1s ease-in-out forwards; } @keyframes bounceOnce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } }

/* Efecto de Pulsación (Pulse) */
.fffpinf { animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.fffp { animation: pulseOnce 1s ease-in-out forwards; } @keyframes pulseOnce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

/* Efecto de Deslizamiento Entrante (Slide In) */
.fffsIn { animation: slideIn 1s ease-in-out forwards; } @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.fffsfInInf { animation: slideInInf 1s ease-in-out infinite; } @keyframes slideInInf { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* Efecto de Destello (Flash) */
.ffflashinf { animation: flash 1s linear infinite; } @keyframes flash { 50% { opacity: 0; } }
.fff { animation: flashOnce 1s linear forwards; } @keyframes flashOnce { 50% { opacity: 0; } }

/* Efecto de Sacudida (Shake) */
.fffsinf { animation: shake 0.5s ease-in-out infinite; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } }
.fffs { animation: shakeOnce 0.5s ease-in-out forwards; } @keyframes shakeOnce { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } }

/* Efecto de Giro (Flip) */
.flipinf { animation: flip 1s ease-in-out infinite; } @keyframes flip { 0%, 100% { transform: perspective(400px) rotateY(0deg); } 50% { transform: perspective(400px) rotateY(180deg); } }
.flip:hover { animation: flipOnce 1s ease-in-out forwards; } @keyframes flipOnce { 0%, 100% { transform: perspective(400px) rotateY(0deg); } 50% { transform: perspective(400px) rotateY(180deg); } }

/* Efecto maquina de escribir */
.fftyping{
    white-space: nowrap;
    width: 20ch;
    animation: typing 2s steps(12),
    blink 1s infinite step-end alternate;
    overflow: hidden;
}

@keyframes typing{
    from {width: 0}
}
@keyframes blink{
    50% {border-color: transparent}
}

/* Efectos de texto */
/* Linear wipe */
.linear-wipe {
    text-align: center;
    
    background: linear-gradient(to right, #ffbf00 20%, #FF0 40%, #FF0 60%, #ffcf00 80%);
    background-size: 200% auto;
    
    color: #000;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s linear infinite;
  }

    @keyframes shine {
        to {
        background-position: 200% center;
        }
    }


/* efecto bounce (deslizarse) */

/* Efecto deslizarse hacia la izquierda */
.ffbounceLeft {
    animation: ffbounceLeft 2s ease 0s 1 normal none;
}
/* Efecto infinito deslizarse hacia la izquierda */
.ffbounceLeftINF{
animation: ffbounceLeft 2s ease 0s infinite normal none;
}

@keyframes ffbounceLeft {
    0% {
      animation-timing-function: ease-in;
      opacity: 1;
      transform: translateX(-48px);
    }
  
    24% {
      opacity: 1;
    }
  
    40% {
      animation-timing-function: ease-in;
      transform: translateX(-26px);
    }
  
    65% {
      animation-timing-function: ease-in;
      transform: translateX(-13px);
    }
  
    82% {
      animation-timing-function: ease-in;
      transform: translateX(-6.5px);
    }
  
    93% {
      animation-timing-function: ease-in;
      transform: translateX(-4px);
    }
  
    25%,
    55%,
    75%,
    87%,
    98% {
      animation-timing-function: ease-out;
      transform: translateX(0px);
    }
  
    100% {
      animation-timing-function: ease-out;
      opacity: 1;
      transform: translateX(0px);
    }
  }
/* Efecto deslizarse hacia la derecha */
.ffbounceRight {
    animation: ffbounceRight 2s ease 0s 1 normal none;
}
/* Efecto infinito deslizarse hacia la derecha */
.ffbounceRightINF{
animation: ffbounceRight 2s ease 0s infinite normal none;
}
@keyframes ffbounceRight {
    0% {
      animation-timing-function: ease-in;
      opacity: 1;
      transform: translateX(48px);
    }
  
    24% {
      opacity: 1;
    }
  
    40% {
      animation-timing-function: ease-in;
      transform: translateX(26px);
    }
  
    65% {
      animation-timing-function: ease-in;
      transform: translateX(13px);
    }
  
    82% {
      animation-timing-function: ease-in;
      transform: translateX(6.5px);
    }
  
    93% {
      animation-timing-function: ease-in;
      transform: translateX(4px);
    }
  
    25%,
    55%,
    75%,
    87%,
    98% {
      animation-timing-function: ease-out;
      transform: translateX(0px);
    }
  
    100% {
      animation-timing-function: ease-out;
      opacity: 1;
      transform: translateX(0px);
    }
  }

/* Efectp Jello (tipo estirarse copado) */
.ffjello{
    animation: ffjello 2s ease 0s 1 normal none;
}
.ffjelloINF{
    animation: ffjello 2s ease 0s infinite normal none;
}
.ffjelloHover:hover{
    animation: ffjello 2s ease 0s 1 normal none;
}

@keyframes ffjello {
    0% {
      transform: scale3d(1, 1, 1);
    }
  
    30% {
      transform: scale3d(1.25, 0.75, 1);
    }
  
    40% {
      transform: scale3d(0.75, 1.25, 1);
    }
  
    50% {
      transform: scale3d(1.15, 0.85, 1);
    }
  
    65% {
      transform: scale3d(0.95, 1.05, 1);
    }
  
    75% {
      transform: scale3d(1.05, 0.95, 1);
    }
  
    100% {
      transform: scale3d(1, 1, 1);
    }
  }
  
/* efecto shake (Sacudir) infito */

.ffshakeINF{
animation: shakeINF 2s ease 0s infinite normal none;
}
@keyframes shakeINF {
    0%,
    100% {
      transform: rotate(0deg);
      transform-origin: 50% 50%;
    }
  
    10% {
      transform: rotate(8deg);
    }
  
    20%,
    40%,
    60% {
      transform: rotate(-10deg);
    }
  
    30%,
    50%,
    70% {
      transform: rotate(10deg);
    }
  
    80% {
      transform: rotate(-8deg);
    }
  
    90% {
      transform: rotate(8deg);
    }
  }