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

body {
    font-family: 'Inter', sans-serif;
}

.glass {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
}

.gradient-text {
    background: linear-gradient(90deg, #34d399, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-shadow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}

/* badges (para que no repitas 20 clases inútiles) */
.badge-blue {
    font-size: 12px;
    font-weight: bold;
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
    padding: 4px 12px;
    border-radius: 999px;
}

.badge-green {
    font-size: 12px;
    font-weight: bold;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    padding: 4px 12px;
    border-radius: 999px;
}

.badge-purple {
    font-size: 12px;
    font-weight: bold;
    color: #c084fc;
    background: rgba(192, 132, 252, 0.1);
    padding: 4px 12px;
    border-radius: 999px;
}
section {
    scroll-margin-top: 80px; /* Evita que el header tape el título al scrollear */
}

.glass {
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}