/* --- 1. CONFIGURAÇÕES GLOBAIS E VARIÁVEIS --- */
:root {
    /* Paleta de Cores: Um azul acadêmico no lugar do roxo */
    --primary-color: #002b5c; /* Azul escuro, sóbrio e acadêmico */
    --white-color: #ffffff;
    --dark-color: #1a1a1a;
    --text-color: #333;
    --light-gray: #f4f4f4;

    /* Tipografia (A mesma do site de inspiração) */
    --font-title: 'Playfair Display', serif; 
    --font-body: 'Lato', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: 1.8;
    color: var(--text-color);
    background-color: var(--white-color);
}

/* --- 2. SEÇÃO HERO (CAPA) --- */
.hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--white-color);
    position: relative; /* Necessário para o blend mode */

    /* O EFEITO DE FUNDO: Cor + Imagem + Blend */
    background-color: var(--primary-color);
    
    /* !! IMPORTANTE: COLOQUE UMA FOTO DO LATTES AQUI !! */
    background-image: url('lattes-rosto.jpg'); 
    
    background-blend-mode: multiply; 
    background-size: cover;
    background-position: center 30%; /* Tenta focar mais no rosto */
}

/* --- 3. NAVEGAÇÃO (MINIMALISTA) --- */
nav {
    width: 100%;
    padding: 40px 0;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px; /* Espaço entre os links */
}

nav li a {
    color: var(--white-color);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: opacity 0.3s ease;
}

nav li a:hover {
    opacity: 0.7;
}

/* --- 4. TÍTULO PRINCIPAL (HERO) --- */
.hero-content {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.title-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-container h1 {
    font-family: var(--font-title);
    font-size: 7rem; /* Título gigante */
    font-weight: 900;
    margin: 0 40px;
    color: var(--white-color);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.3); /* Sombra para legibilidade */
}

/* As linhas ao lado do título */
.line {
    width: 150px;
    height: 2px;
    background-color: var(--white-color);
}

.subtitle {
    font-family: var(--font-title);
    font-size: 1.5rem;
    margin-top: 20px;
    opacity: 0.9;
}

/* Legenda da imagem no rodapé do Hero */
.caption {
    width: 100%;
    padding: 30px;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* --- 5. SEÇÕES DE CONTEÚDO --- */
.content-section {
    padding: 100px 0;
}

.container {
    max-width: 800px; /* Limita a largura do texto para leitura */
    margin: 0 auto;
    padding: 0 20px;
}

.content-section h2 {
    font-family: var(--font-title);
    font-size: 3.5rem; /* Títulos grandes */
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
}

.content-section h3 {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.content-section p {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* Variações de Cor de Fundo */
.white-bg {
    background-color: var(--white-color);
    color: var(--text-color);
}
.white-bg h2 {
    color: var(--dark-color);
}

.color-bg {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.color-bg h2, .color-bg h3 {
    color: var(--white-color);
}

/* --- 6. RODAPÉ --- */
footer {
    background-color: var(--light-gray);
    color: #888;
    text-align: center;
    padding: 40px 0;
    font-size: 0.9rem;
}

/* =================================== */
/* ==== 7. ESTILO DAS IMAGENS ==== */
/* (ESTE É O LUGAR CORRETO) */
/* =================================== */
.content-section img {
    display: block;           /* 1. Faz a imagem se comportar como um bloco */
    margin-left: auto;        /* 2. Cria margem automática na esquerda */
    margin-right: auto;       /* 3. Cria margem automática na direita (isso centraliza) */
    
    max-width: 100%;          /* Garante que a imagem não saia do container */
    height: auto;             /* Mantém a proporção */
    
    margin-top: 40px;         /* Espaço acima da imagem */
    margin-bottom: 20px;      /* Espaço abaixo da imagem */
    
    /* Bônus: Estilos para deixar mais moderno */
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); 
}


/* --- 8. RESPONSIVO (MOBILE) --- */
@media (max-width: 768px) {
    .title-container h1 {
        font-size: 3.5rem; /* Diminui o título no mobile */
        margin: 0 15px;
    }

    .line {
        width: 80px; /* Diminui as linhas */
    }

    .subtitle {
        font-size: 1.1rem;
    }

    .content-section h2 {
        font-size: 2.5rem; /* Diminui os títulos de seção */
    }

    nav ul {
        gap: 20px;
    }
    
    nav li a {
        font-size: 0.8rem;
    }
    
    /* (A regra da imagem não deve estar aqui) */
}