/* Animación para el SVG completo */
    .circle-svg {
      /* animation: pulse-svg 2s; */
      /* animation: pulse-svg 5s ; */
       
      opacity: 0;
      transform: rotate(20deg);
      transform-origin: center center;

      /* animation: aparecer2 5s ease-in-out forwards; */
      animation: aparecerR 2.8s ease-out forwards;
      animation-delay: 1.69s;
      /* animation-fill-mode: both; */

    }

    .circle-svg:hover {
      /* animation: shake-rotate 55s ease-in-out; */
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
      /* transform-origin: center center; */
      /* animation: pulse-svg 5s ; */
    }

    @keyframes pulse-svg {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }

      100% {
        transform: scale(1);
      }
    }

    /* Animación para el texto dentro del SVG */
    .text-circle {

      opacity: 0;
      animation: aparecer 3s ease-in-out forwards;
    }

    @keyframes text-fade {

      0%,
      100% {
        fill-opacity: 1;
      }

      50% {
        fill-opacity: 0.3;
      }
    }

    @keyframes aparecer {
      from {
        opacity: 0;
        transform: translateY(20px);
        transform: translateX(40px);
      }

      to {
        opacity: 1;
        /* transform: translateY(0); */
        transform: translateX(0);
      }
    }

    @keyframes aparecer2 {
      from {
        opacity: 0;
        transform: translateY(-40px);
        /* transform: translateX(-40px); */
      }

      to {
        opacity: 1;
        transform: translateY(0);
        /* transform: translateX(0); */
      }
    }

    @keyframes aparecerR {
      0% {
        opacity: 0;
        transform: rotate(20deg);
        transform: translateY(-40px);

      }

      60% {
        opacity: 1;
        transform: translateY(0);
        /* transform: rotate(5deg); */
      }

      75% {
        transform: translateY(-10px);
        /* transform: rotate(20deg); */
      }

      90% {
        transform: translateY(4px);
        /* transform: rotate(5deg); */
      }

      100% {
        opacity: 1;
        transform: translateY(0);
        transform: rotate(20deg);
      }
    }

    @keyframes shake-rotate {
      0% {
        transform: rotate(0deg);
      }

      25% {
        transform: rotate(3deg);
      }

      50% {
        transform: rotate(0deg);
      }

      75% {
        transform: rotate(-3deg);
      }

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