/* ==========================================================================
   css/global.css
   Fundação do site: Cores, Fontes Modernas, Reset e Configurações Globais.
   ========================================================================== */

/* Importando a fonte moderna 'Inter' do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
   /* ✨ NOVA PALETA DE CORES PREMIUM (JORTON MARKETING ADS) */
    --cor-preto: #0F172A;        /* Grafite profundo (mais moderno que o preto puro) */
    --cor-azul-escuro: #1E3A8A; /* Azul marinho corporativo rico e profundo */
    --cor-azul-claro: #2563EB;  /* Azul elétrico vibrante para links e destaques */
    --cor-amarelo: #F59E0B;     /* Dourado Âmbar/Mel de altíssima conversão e elegância */
    --cor-vermelho: #EF4444;    /* Coral moderno para alertas */
    
    /* Aplicação Estratégica das Cores */
    --fundo-site: #F8FAFC;      /* Off-white ultra-suave que descansa a vista */
    --texto-principal: #334155; /* Cinza escuro elegante para leitura confortável */
    --texto-mutado: #64748B;    /* Slate para textos secundários */
    
    /* Configurações de Design */
    --raio-borda: 10px;         /* Arredondamento levemente mais moderno */
    --transicao: all 0.25s ease-in-out;
}

/* Reset Universal (Garante consistência Mobile-First) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Configuração do Elemento Raiz */
html {
    scroll-behavior: smooth; /* Rolagem suave ao clicar em links âncora */
}

body {
    font-family: 'Inter', sans-serif; /* Opção A - Moderna */
    font-size: 16px;
    line-height: 1.6;
    background-color: var(--fundo-site);
    color: var(--texto-principal);
}

/* Estilização Base de Títulos (Mobile-First - Tamanhos confortáveis para tela pequena) */
h1, h2, h3, h4 {
    color: var(--cor-preto);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

p {
    margin-bottom: 1.2rem;
    color: var(--texto-principal);
}

/* Configurações de Listas Giras */
ul, ol {
    margin-bottom: 1.2rem;
    padding-left: 1.2rem;
}

li {
    margin-bottom: 0.5rem;
}

/* Separadores Visuais Flexíveis */
hr {
    border: 0;
    height: 1px;
    background: #E0E0E0;
    margin: 2.5rem 0;
}

/* Imagens Responsivas */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--raio-borda);
}