/* ==========================================================
   1. TOKENS DE ESPAÇAMENTO (Base: 1rem = 16px)
   ========================================================== */
:root {
    /* Desktop (Telas Grandes) */
    --space-sm: 2rem;     /* 32px  - Para respiros curtos ou seções muito conectadas */
    --space-md: 4rem;     /* 64px  - O seu novo padrão/médio entre seções comuns */
    --space-lg: 6rem;     /* 96px  - Para separar blocos de assuntos bem diferentes */
    --space-xl: 8rem;     /* 128px - Para respiros dramáticos (ex: antes do footer) */
}

/* Tablet (Abaixo de 1024px - 64em) */
@media (max-width: 64em) {
    :root {
        --space-sm: 1.5rem;   /* 24px */
        --space-md: 3rem;     /* 48px */
        --space-lg: 4.5rem;   /* 72px */
        --space-xl: 6rem;     /* 96px */
    }
}

/* Mobile (Abaixo de 768px - 48em) */
@media (max-width: 48em) {
    :root {
        --space-sm: 1.5rem;   /* 24px */
        --space-md: 2rem;     /* 32px */
        --space-lg: 3rem;     /* 48px */
        --space-xl: 4rem;     /* 64px */
    }
}

/* ==========================================================
   2. CLASSES UTILITÁRIAS DE ESPAÇAMENTO (Elementor/Gutenberg)
   ========================================================== */
/* Padding Y (Cima e Baixo) - Aplique na Tag da Seção */
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* Caso precise aplicar apenas no topo ou na base */
.pt-md { padding-top: var(--space-md); }
.pb-md { padding-bottom: var(--space-md); }


/* ==========================================================
   3. SISTEMA DE LARGURA DA SEÇÃO (GRID CONTAINER)
   ========================================================== */
/*
   Regras aplicadas:
   - Max-width: 1300px (81.25rem)
   - Tablet: 90%
   - Mobile: 100% com 1rem (16px) de padding lateral
*/

.section-container {
    /* Mobile First: 100% com padding de 16px (1rem) */
    width: 100%;
    padding-inline: 1rem; 
    margin-inline: auto; /* Centraliza o container */
}

/* Tablet (A partir de 768px - 48em) */
@media (min-width: 48em) {
    .section-container {
        width: 90%;
        /* O padding não é mais necessário, pois os 90% de largura 
           já garantem 5% de espaço livre em cada lateral */
        padding-inline: 0; 
    }
}

/* Desktop (A partir de 1300px - 81.25em) */
@media (min-width: 81.25em) {
    .section-container {
        width: 100%; /* Permite que o max-width assuma o controle */
        max-width: 81.25rem; /* 1300px */
    }
}

/* ==========================================================
   4. CLASSE PARA A HERO SECTION
   ========================================================== */
.hero-vh {
    min-height: 85dvh;
}