@keyframes heroImg {
    0% {
        transform: translate(0px) rotate(0deg);
    }

 

    50% {
        transform: translate(-55px) rotate(-10deg);
    }



    100% {
        transform: translate(0px) rotate(0deg);
    }
}



.draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1400;
    stroke-width: 1px;

    animation: draw 5s linear forwards;
  }

  /* Añade más reglas para los demás elementos */
  @keyframes draw {
    to {
      stroke-dashoffset: 0;

    }
  }

  @keyframes mapa {
    0% {opacity: 0;
        transform: translateY(-100px);

    }

    70% {opacity: 1;
      transform: translateY(20px);

  }

   90% {opacity: 1;
        transform: translateY(0px);

    }
    100% {opacity: 1;
      transform: translateY(0px);

  }
}
@keyframes opacity {
  0% {fill: transparent;
    transform: translateY(10px);
  }

 40% {opacity: 1;
  fill: transparent;   
  transform: translateY(0px);
  }

  100% {opacity: 1;
  }
}