#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #ec1b2e;
  display: none; /* inicia oculto */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.logo, .globo {
  width: 150px;
  height: 150px;
  position: absolute;
}

/* Animaciones */
.logo {
  animation: logoIn 1.5s ease-in-out, logoOut 1s ease-in-out 1.5s forwards;
}

.globo {
  opacity: 0;
  animation: globoIn 2s ease-in-out 0.5s forwards, spinLoop 3s linear 5.5s infinite;
}

/* Keyframes */
@keyframes logoIn {
  from { opacity: 0; transform: scale(0.8) rotate(0deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes logoOut {
  from { opacity: 1; transform: scale(1) rotate(0deg); }
  to { opacity: 0; transform: scale(0.5) rotate(360deg); }
}
@keyframes globoIn {
  from { opacity: 0; transform: scale(0) rotate(0deg); }
  to { opacity: 1; transform: scale(1) rotate(360deg); }
}
@keyframes spinLoop {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}