/* Variables */
:root {
  --logo-color: #ffffff;
  --logo-hover:  #ffffff; /* sigue existiendo por si luego lo necesitas */
}

/* Contenedor */
.logo_principal {
  --escala: 0.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  will-change: transform;
  margin-top: 1rem;
}

@media (max-width: 1000px) {
  .logo_principal {
  --escala: 0.3;

  }
    
}



/* Puntos - Base */
.logo_dot {
  width: calc(130.22px * var(--escala));
  height: calc(132.47px * var(--escala));
  background-color: var(--logo-color);
  border-radius: 50%;
  margin-bottom: calc(32.27px * var(--escala));
  opacity: 0;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: opacity, transform;
}

/* Stem - Base */
.logo_stem {
  width: calc(102.16px * var(--escala));
  height: calc(244.82px * var(--escala));
  background-color: var(--logo-color);
  border-bottom-left-radius: calc(130px * var(--escala));
  opacity: 0;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: opacity, transform;
}

/* Animaciones específicas */
.logo_principal .logo_dot:nth-child(1) {
  animation-name: elemento1;
}

.logo_principal .logo_dot:nth-child(2) {
  animation-name: elemento2;
}

.logo_principal .logo_stem {
  animation-name: elemento3;
}

/* Keyframes - Elemento 1 */
@keyframes elemento1 {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  8% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  75% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  85%, 100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
  }
}

/* Keyframes - Elemento 2 */
@keyframes elemento2 {
  0%, 15% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  23% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  75% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  85%, 100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
  }
}

/* Keyframes - Elemento 3 */
@keyframes elemento3 {
  0%, 30% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  38% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  75% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  85%, 100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
  }
}