@keyframes aparecerLogo {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes desaparecerLogo {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.04); }
}

@keyframes respirarPunto {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.6; }
}

#logo-intro {
  width: clamp(360px, 42vw, 630px);
  filter: drop-shadow(0 0 40px rgba(139, 30, 47, 0.35));
  opacity: 0;
}

#logo-intro.aparece { animation: aparecerLogo 1.2s ease-out forwards; }
#logo-intro.desaparece { animation: desaparecerLogo 1.1s ease-in forwards; }

#logo-intro-alt {
  display: none;
  font-family: var(--fuente-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 0.08em;
  color: var(--carmesi-brillante);
  opacity: 0;
}

#logo-intro-alt.aparece { display: block; animation: aparecerLogo 3s ease-out forwards; }
#logo-intro-alt.desaparece { animation: desaparecerLogo 2s ease-in forwards; }

.logo-menu {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  width: 128px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@keyframes aparecerElementoLento {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-orden] {
  opacity: 0;
}

.revelar-elemento {
  animation: aparecerElementoLento 900ms ease-out both;
  animation-delay: calc(var(--orden, 0) * 220ms);
}