/* ===========================
   VARIÁVEIS GLOBAIS
=========================== */
    :root {
        /* Paleta de cores */
        --citrino: #fbf3e3;
        --roxo: #511361;
        --amarelo: #fbdb5c;
        --ramalhete: #a47ca1;

        /* Fontes */
        --font-body: "Inter", Arial, sans-serif;
        --font-heading: "Poppins", "Inter", sans-serif;

        /* Tipografia base */
        --font-size-base: 16px;
        --line-height-base: 1.6;

        /* Tamanhos dos headings */
        --font-h1: 2.5rem;
        --font-h2: 2rem;
        --font-h3: 1.5rem;
        --font-h4: 1.25rem;
        --font-h5: 1.1rem;
        --font-h6: 1rem;

        /* Espaços */
        --space-xs: 4px;
        --space-sm: 8px;
        --space-md: 16px;
        --space-lg: 24px;
        --space-xl: 32px;
        --space-xxl: 48px;
    }

/* ===========================
   RESET BÁSICO
=========================== */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

/* ===========================
   STICKY FOOTER (NOVO)
=========================== */
    html,
    body {
        height: 100%;
    }

/* ===========================
   BODY (CORRETO)
=========================== */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        font-family: var(--font-body);
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);
        color: var(--roxo);
        background-color: var(--citrino);
    }

    /* Faz o conteúdo ocupar o espaço disponível */
    main {
        flex: 1;
    }

/* ===========================
                SEÇÕES
=========================== */
    section {
        padding: var(--space-xxl) var(--space-lg);
    }

    @media (max-width: 768px) {
        section {
            padding: var(--space-xl) var(--space-md);
        }
    }

/* ===========================
   TIPOGRAFIA BASE DOS HEADINGS
=========================== */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-heading);
        font-weight: 600;
        color: var(--roxo);
        margin-bottom: var(--space-md);
        line-height: 1.3;
    }

/* ===========================
   TIPOGRAFIA POR NÍVEL
=========================== */
    h1 {
        font-size: var(--font-h1);
        line-height: 1.2;
        margin-bottom: var(--space-lg);
    }

    h2 {
        font-size: var(--font-h2);
    }

    h3 {
        font-size: var(--font-h3);
    }

    h4 {
        font-size: var(--font-h4);
    }

    h5 {
        font-size: var(--font-h5);
    }

    h6 {
        font-size: var(--font-h6);
    }

/* ===========================
   PARÁGRAFOS
=========================== */
    p {
        max-width: 65ch;
        margin-bottom: var(--space-md);
        line-height: 1.7;
    }

/* ===========================
   LINKS
=========================== */
    a {
        color: var(--roxo);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    a:hover {
        color: var(--amarelo);
    }

/* ===========================
   BOTÕES (CTA)
=========================== */
    .btn {
        display: inline-block;
        padding: var(--space-md) var(--space-lg);
        border-radius: 10px;
        font-weight: 600;
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
        border: none;
    }

    .btn:focus {
        outline: 2px solid var(--amarelo);
        outline-offset: 2px;
    }

    .btn-primary {
        background: var(--roxo);
        color: #fff;
    }

    .btn-primary:hover {
        background: var(--amarelo);
        color: var(--roxo);
    }