/* =========================================
   GLOBAL.CSS — Variáveis, Reset e Componentes
   ========================================= */

/* 1. VARIÁVEIS GLOBAIS */
:root {
    --cor-fundo: #000000;
    --cor-fundo-secundario: #060A26;
    --cor-primaria: #5B5AF3;
    --cor-primaria-clara: #9595FB;
    --cor-branca: #FFFFFF;

    --cor-texto: #FFFFFF;
    --cor-texto-suave: rgba(255, 255, 255, 0.72);
    --cor-texto-fraco: rgba(255, 255, 255, 0.55);

    --cor-borda-suave: rgba(255, 255, 255, 0.10);
    --cor-superficie: rgba(255, 255, 255, 0.03);

    --gradiente-botao: linear-gradient(90deg, #5B5AF3 0%, #7B6DFF 100%);

    --fonte-titulo: 'Plus Jakarta Sans', sans-serif;
    --fonte-texto: 'Inter', sans-serif;

    --largura-maxima: 1200px;
    --transicao-padrao: 0.3s ease;
    --radius-pill: 999px;
}

/* 2. RESET E BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-texto);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transicao-padrao);
}

ul {
    list-style: none;
}

/* 3. UTILITÁRIOS E COMPONENTES COMPARTILHADOS */
.container {
    width: 100%;
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: 0 24px;
}

.btn-primario {
    background: linear-gradient(90deg, #5B5AF3 0%, rgba(52, 28, 135, 0) 100%);
    border: 1px solid #3A39FD;
    width: 171px;
    height: 44px;
    border-radius: var(--radius-pill);
    color: var(--cor-branca);
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transicao-padrao);
}

.btn-primario:hover {
    box-shadow: 0 0 20px rgba(91, 90, 243, 0.4);
    transform: translateY(-2px);
}

/* Badge compartilhada (usada em Pilares e Projetos) */
.badge-secao {
    background: linear-gradient(90.66deg, rgba(91, 90, 243, 0.22) 0%, #5B5AF3 100%);
    border-radius: 19px;
    padding: 6px 22px;
    font-family: var(--fonte-texto);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}