.box {
    background-image: linear-gradient(90deg, #73d900, #97d804);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size 1s;
}

.box:hover {
    background-size: 100% 100%;
    color: white;
}
.hoja-padre {
    display: inline-flex;  
    align-items: center;
    justify-content: center;  
    position: relative;  
}

.hoja {
    position: absolute;
    left: 90%;  /* Posición inicial: completamente fuera del contenedor a la derecha */
    transition: left 1s, opacity 1s;  /* Agregamos transición para opacity */
    z-index: 10;  /* Asegura que la imagen esté por encima del contenido de .hoja-padre */
    opacity: 0;  /* Inicialmente, la imagen es completamente transparente */
}

.hoja-padre:hover .hoja {
    left: -40px;  /* La imagen se detiene en la mitad del borde derecho */
    opacity: 1;  /* Al hacer hover, la imagen se vuelve completamente opaca */
}
.cambiate{
  display: inline-block;
  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}
.conversemos{
      display: inline-block;
  animation: headShake; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

.mapapulse{
  display: inline-block;
  animation: pulse; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}
.conocershakeX {
  display: inline-block;
  animation: shakeX; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}
.conocershakeX {
  display: inline-block;
  animation: shakeX; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}
.fondocelular{
    display: inline-block;
    fadeIn;
    animation-duration: 1s;
}
.muevecelular{
    opacity: 1 !important;
    display: inline-block;
    animation: backInDown;
    animation-duration: 1s;
}
.muevecelularcentrado{
    display: inline-block;
    animation: tada;
    animation-duration: 1s;
}
.muevegraficocentrado{
    display: inline-block;
    animation: tada;
    animation-duration: 2s;
    animation-delay: 2s;
}

.imagenploma{}
.graficosmover{

}
.desplegar{
  opacity: 1 !important;
  visibility: visible;
  transition: opacity 0.5s, visibility 0s 0.5s;
}