.profile-preview {
    position: relative;
    display: flex;
    justify-content: center;
    background-color: #3E606F;
    overflow: hidden;
  }
  
  .profile-container {
    z-index: 10;
  }
  
  .profile-preview:before,
  .profile-preview:after {
      content: "";
      position: absolute;
      left: 50%;
      min-width: 300vw;
      min-height: 300vw;
      background-color: var(--aux-bg-color, #FCFFF5); /* Valor predeterminado */
      animation-name: rotate;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
  }
  
  .profile-preview:before {
      bottom: 15vh;
      border-radius: 50%; /* Hace un círculo */
      clip-path: ellipse(50% 40% at 50% 50%); /* Elipse */
      animation-duration: 10s;
  }
    
  .profile-preview:after {
      bottom: 12vh;
      opacity: .5;
      border-radius: 0; /* Elimina cualquier curvatura */
      clip-path: polygon(50% 0%, 20% 100%, 80% 100%); /* Triángulo invertido */
      animation-duration: 12s; /* Diferente tiempo para variar la animación */
  }
  
  @keyframes rotate {
    0% {transform: translate(-50%, 0) rotateZ(0deg);}
    50% {transform: translate(-50%, -2%) rotateZ(180deg);}
    100% {transform: translate(-50%, 0%) rotateZ(360deg);}
  }