/* --- Base y Multi-idioma --- */
[data-lang] { display: none; }
html[lang="en"] [data-lang="en"],
html[lang="es"] [data-lang="es"],
html[lang="it"] [data-lang="it"] { display: block; }
html { scroll-behavior: smooth; } /* Mantenemos esto como fallback */
body {
    background-color: #0f172a;
    background-image: radial-gradient(circle at 10% 20%, rgba(168, 85, 247, 0.2 ) 0%, transparent 40%),
                      radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 50%);
}

/* --- Animaciones de Entrada --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.fade-in { animation: fadeIn 1s ease-out forwards; }
.slide-in-up { animation: slideInUp 0.8s ease-out forwards; }

.stagger-1 { animation-delay: 0.2s; opacity: 0; }
.stagger-2 { animation-delay: 0.4s; opacity: 0; }
.stagger-3 { animation-delay: 0.6s; opacity: 0; }
.stagger-4 { animation-delay: 0.8s; opacity: 0; }

/* --- Estilos para la Demo --- */
#demo-output { white-space: pre-wrap; font-family: 'Courier New', Courier, monospace; }