/* MateVerso — Estilos personalizados */

@keyframes slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slide-up 0.3s ease-out; }

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in { animation: fade-in 0.3s ease-out; }

@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.5); }
    50% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}
.animate-pop-in { animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Tipografía: usa system fonts si Inter no está disponible */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Prose básico para el HTML de teoría */
.prose p { margin-bottom: 0.75em; line-height: 1.6; }
.prose ul, .prose ol { margin-bottom: 0.75em; padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.25em; }
.prose b, .prose strong { font-weight: 700; color: #1e293b; }
.prose i, .prose em { font-style: italic; }
.prose table { border-collapse: collapse; margin: 1em 0; }
.prose td, .prose th { padding: 6px 12px; border: 1px solid #cbd5e1; }
.prose pre { background: #f1f5f9; padding: 8px 12px; border-radius: 8px; font-family: monospace; overflow-x: auto; }