/* ==========================================================================
   1. RESET BÁSICO & CONFIGURAÇÃO
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-family: "Poppins", sans-serif;
    text-decoration: none;
}

:root {
    /* Espaçamentos padronizados */
    --space-xs: 0.25rem;
    /* 4px */
    --space-sm: 0.5rem;
    /* 8px */
    --space-md: 1rem;
    /* 16px */
    --space-lg: 1.5rem;
    /* 24px */
    --space-xl: 2rem;
    /* 32px */
    --space-xl-1: 3rem;
    /* 48px */
    --space-xl-2: 4rem;
    /* 64px */

    /* Container máximo */
    --max-width: 1350px;
}

/* ==========================================================================
   2. CONTAINERS E CENTRALIZAÇÃO
   ========================================================================== */
/* Centraliza o conteúdo na tela e limita a largura */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* Utilitário para centralizar qualquer bloco isolado */
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   3. FLEXBOX UTILITIES
   ========================================================================== */
.d-flex {
    display: flex !important;
}

/* Direção */
.row {
    flex-direction: row !important;
}

.col {
    flex-direction: column !important;
}

.wrap {
    flex-wrap: wrap !important;
}

/* Alinhamento Horizontal / Eixo Principal */
.justify-start {
    justify-content: flex-start !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-around {
    justify-content: space-around !important;
}

/* Alinhamento Vertical / Eixo Cruzado */
.items-start {
    align-items: flex-start !important;
}

.items-center {
    align-items: center !important;
}

.items-end {
    align-items: flex-end !important;
}

.items-stretch {
    align-items: stretch !important;
}

/* Flex Grow / Shrink rápidos */
.flex-1 {
    flex: 1 1 0% !important;
}

/* ==========================================================================
   4. ESPAÇAMENTO ENTRE ELEMENTOS FLEX (GAP)
   ========================================================================== */
.gap-1 {
    gap: var(--space-xs) !important;
}

.gap-2 {
    gap: var(--space-sm) !important;
}

.gap-3 {
    gap: var(--space-md) !important;
}

.gap-4 {
    gap: var(--space-lg) !important;
}

.gap-5 {
    gap: var(--space-xl) !important;
}

.gap-6 {
    gap: var(--space-xl-1) !important;
}

.gap-7 {
    gap: var(--space-xl-2) !important;
}

/* ==========================================================================
   5. MARGINS BÁSICAS
   ========================================================================== */
.m-0 {
    margin: 0 !important;
}

.mt-1 {
    margin-top: var(--space-xs) !important;
}

.mt-2 {
    margin-top: var(--space-sm) !important;
}

.mt-3 {
    margin-top: var(--space-md) !important;
}

.mt-4 {
    margin-top: var(--space-lg) !important;
}

.mb-1 {
    margin-bottom: var(--space-xs) !important;
}

.mb-2 {
    margin-bottom: var(--space-sm) !important;
}

.mb-3 {
    margin-bottom: var(--space-md) !important;
}

.mb-4 {
    margin-bottom: var(--space-lg) !important;
}

.mx-1 {
    margin-left: var(--space-xs) !important;
    margin-right: var(--space-xs) !important;
}

.mx-2 {
    margin-left: var(--space-sm) !important;
    margin-right: var(--space-sm) !important;
}

.mx-3 {
    margin-left: var(--space-md) !important;
    margin-right: var(--space-md) !important;
}

.mx-4 {
    margin-left: var(--space-lg) !important;
    margin-right: var(--space-lg) !important;
}

.my-1 {
    margin-top: var(--space-xs) !important;
    margin-bottom: var(--space-xs) !important;
}

.my-2 {
    margin-top: var(--space-sm) !important;
    margin-bottom: var(--space-sm) !important;
}

.my-3 {
    margin-top: var(--space-md) !important;
    margin-bottom: var(--space-md) !important;
}

.my-4 {
    margin-top: var(--space-lg) !important;
    margin-bottom: var(--space-lg) !important;
}

/* ==========================================================================
   6. PADDING BÁSICAS
   ========================================================================== */
.p-0 {
    padding: 0 !important;
}

.pt-1 {
    padding-top: var(--space-xs) !important;
}

.pt-2 {
    padding-top: var(--space-sm) !important;
}

.pt-3 {
    padding-top: var(--space-md) !important;
}

.pt-4 {
    padding-top: var(--space-lg) !important;
}

.pb-1 {
    padding-bottom: var(--space-xs) !important;
}

.pb-2 {
    padding-bottom: var(--space-sm) !important;
}

.pb-3 {
    padding-bottom: var(--space-md) !important;
}

.pb-4 {
    padding-bottom: var(--space-lg) !important;
}

.px-1 {
    padding-left: var(--space-xs) !important;
    padding-right: var(--space-xs) !important;
}

.px-2 {
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
}

.px-3 {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
}

.px-4 {
    padding-left: var(--space-lg) !important;
    padding-right: var(--space-lg) !important;
}

.py-1 {
    padding-top: var(--space-xs) !important;
    padding-bottom: var(--space-xs) !important;
}

.py-2 {
    padding-top: var(--space-sm) !important;
    padding-bottom: var(--space-sm) !important;
}

.py-3 {
    padding-top: var(--space-md) !important;
    padding-bottom: var(--space-md) !important;
}

.py-4 {
    padding-top: var(--space-lg) !important;
    padding-bottom: var(--space-lg) !important;
}

.py-5 {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
}

.py-6 {
    padding-top: var(--space-xl-1) !important;
    padding-bottom: var(--space-xl-1) !important;
}

.py-7 {
    padding-top: var(--space-xl-2) !important;
    padding-bottom: var(--space-xl-2) !important;
}