/* ============================================================
   BASE.CSS — Variáveis, reset e tipografia global
   ============================================================ */

/* --- Importação de fontes --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap');

/* --- Variáveis de cor --- */
:root {
    --cor-principal:     #4A6FA5;
    --cor-destaque:      #B5714A;
    --cor-fonte:         #3D3D3D;
    --cor-fundo:         #FFFFFF;
    --cor-fundo-secao:   #EEF2F7;
    --cor-borda:         #D8DFE8;
    --cor-fundo-escuro:  #2A3245;
    --cor-texto-claro:   #F5F7FA;
    --cor-sombra:        rgba(74, 111, 165, 0.12);
}

/* --- Variáveis de tipografia --- */
:root {
    --fonte-titulo:  'Playfair Display', Georgia, serif;
    --fonte-corpo:   'Lato', Arial, sans-serif;

    /* Tamanhos desktop */
    --t-h1:          42px;
    --t-h2:          32px;
    --t-h3:          20px;
    --t-corpo:       16px;
    --t-label:       13px;
    --t-btn:         14px;
    --t-nav:         14px;

    /* Pesos */
    --peso-leve:     300;
    --peso-normal:   400;
    --peso-medio:    600;
    --peso-bold:     700;
}

/* --- Variáveis de espaçamento --- */
:root {
    --gap-secao:     88px;
    --gap-interno:   48px;
    --raio:          10px;
    --raio-btn:      6px;
    --max-width:     1140px;
    --padding-lado:  24px;
}

/* --- Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fonte-corpo);
    font-size: var(--t-corpo);
    font-weight: var(--peso-normal);
    color: var(--cor-fonte);
    background-color: var(--cor-fundo);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* --- Tipografia base --- */
h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    color: var(--cor-fonte);
    line-height: 1.25;
}

h1 { font-size: var(--t-h1); font-weight: var(--peso-bold); }
h2 { font-size: var(--t-h2); font-weight: var(--peso-medio); }
h3 { font-size: var(--t-h3); font-weight: var(--peso-normal); font-style: italic; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--cor-principal);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover { color: var(--cor-destaque); }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol { list-style: none; }

/* --- Container --- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--padding-lado);
}

/* --- Seção genérica --- */
.secao {
    padding: var(--gap-secao) 0;
}

.secao--cinza {
    background-color: var(--cor-fundo-secao);
}

.secao--escuro {
    background-color: var(--cor-fundo-escuro);
    color: var(--cor-texto-claro);
}

.secao__titulo {
    font-size: var(--t-h2);
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-medio);
    color: var(--cor-fonte);
    margin-bottom: 12px;
}

.secao__subtitulo {
    font-size: var(--t-corpo);
    color: #6B7A8D;
    font-weight: var(--peso-leve);
    margin-bottom: var(--gap-interno);
}

/* --- Botões --- */
.btn {
    display: inline-block;
    font-family: var(--fonte-corpo);
    font-size: var(--t-btn);
    font-weight: var(--peso-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 14px 32px;
    border-radius: var(--raio-btn);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.25s;
    text-decoration: none;
}

.btn--principal {
    background-color: var(--cor-principal);
    color: #fff;
    border-color: var(--cor-principal);
}
.btn--principal:hover {
    background-color: #3a5c8f;
    border-color: #3a5c8f;
    color: #fff;
}

.btn--outline {
    background-color: transparent;
    color: var(--cor-principal);
    border-color: var(--cor-principal);
}
.btn--outline:hover {
    background-color: var(--cor-principal);
    color: #fff;
}

.btn--destaque {
    background-color: var(--cor-destaque);
    color: #fff;
    border-color: var(--cor-destaque);
}
.btn--destaque:hover {
    background-color: #9e5f3a;
    border-color: #9e5f3a;
    color: #fff;
}

/* --- Divisor decorativo --- */
.divisor {
    width: 48px;
    height: 3px;
    background-color: var(--cor-destaque);
    margin: 16px 0 32px 0;
}

/* --- Alerta / mensagem --- */
.alerta {
    padding: 14px 20px;
    border-radius: var(--raio);
    font-size: 14px;
    margin-top: 16px;
    display: none;
}
.alerta--sucesso {
    background-color: #e8f4ec;
    color: #2d6a4f;
    border: 1px solid #b7dfca;
}
.alerta--erro {
    background-color: #fdecea;
    color: #8b2020;
    border: 1px solid #f5c6c6;
}

/* --- Responsivo mobile --- */
@media (max-width: 768px) {
    :root {
        --t-h1:       28px;
        --t-h2:       22px;
        --t-h3:       17px;
        --t-corpo:    15px;
        --gap-secao:  56px;
        --gap-interno:32px;
    }
}