/* === styles.css === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800;900&display=swap');

/* Configuración Base */
:root {
    --primary: #0f172a;   /* Slate 900 */
    --accent: #06b6d4;    /* Cyan 500 */
    --bg-color: #f8fafc;  /* Slate 50 */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--primary);
    -webkit-tap-highlight-color: transparent;
}

/* Ocultar Scrollbar pero permitir scroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Animaciones suaves */
.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Efecto Glassmorphism (Cristal) */
.glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}