/* ================================================= */
/* 1. VARIÁVEIS E PALETA DE CORES                   */
/* ================================================= */
:root {
    --branco: #ffffff;
    --grafite: #333333;
    --bronze: #b08d57;
    --preto: #000000;
    --cinzacerebral: #cccccc;
    --vermelho-puro: #ff0000;
    --cinza-medio: #6b7280;
    --azul-celeste: #f0ffff;
    --azul-claro: #add8e6;
    --papiro: #eee7dd;
    --verde-menta: #ecffec;
    --cor-fundo-geral: #f7f5f2;
    --cor-fundo-container: #ffffff;
    --cor-texto-principal: #333333;
    --cor-texto-secundario: #666666;
    --cor-borda: #dddddd;
    --cor-destaque-vermelho: #ff0000;
    --cor-verde-floresta: #228b22;
    --cor-aviso: #f0ad4e;
    --cor-titulo: #222222;
}

/* ================================================= */
/* 2. BASE E TIPOGRAFIA                             */
/* ================================================= */
body {
    font-family: 'Lato', 'Segoe UI', 'Arial', sans-serif;
    background-color: var(--cor-fundo-geral);
    margin: 0;
    padding: 0;
    color: var(--cor-texto-principal);
    line-height: 1.5;
}

/* ================================================= */
/* 3. Fundo Exclusivo (mod_raca.php)                */
/* ================================================= */
.raca-bg {
    background-image: url('/assets/background/bg_raca1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* ================================================= */
/* 4. ESTRUTURA GLOBAL                              */
/* ================================================= */
.page-wrapper {
    max-width: 1400px;
    width: 80%;
    margin: 40px auto;
    background-color: var(--cor-fundo-container);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.main-content {
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
}

@media (max-width: 1024px) {
    .main-content {
        max-width: 95%;
    }
}

/* ================================================= */
/* 5. CABEÇALHO E NAVEGAÇÃO                         */
/* ================================================= */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    border-bottom: 1px solid var(--cor-borda);
}

.header img {
    height: 120px;
    width: auto;
}

.header nav a {
    margin-left: 25px;
    text-decoration: none;
    color: var(--cor-texto-principal);
    font-size: 0.95em;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

.header nav a:hover {
    color: var(--cor-destaque-vermelho);
}

/* ================================================= */
/* 6. LAYOUT DA PÁGINA                              */
/* ================================================= */
.raca-nome-subtitulo {
    text-align: center;
    margin-bottom: 40px;
}

.raca-nome-subtitulo .nome_raca {
    font-family: 'Playfair Display', serif;
    font-size: 2.8em;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: 1px;
    color: var(--cor-titulo);
}

.raca-nome-subtitulo .subtitulo {
    font-style: italic;
    color: var(--cor-texto-secundario);
    margin-top: 0;
    font-size: 1em;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.conteudo-principal {
    display: flex;
    gap: 50px;
}

@media (max-width: 1024px) {
    .conteudo-principal {
        flex-direction: column;
        gap: 30px;
    }
}

.conteudo-principal .coluna-imagem {
    flex-shrink: 0;
    position: relative;
}

.conteudo-principal .coluna-imagem img {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.secao-info {
    margin-bottom: 25px;
}

.secao-info .titulo {
    font-weight: bold;
    font-size: 1em;
    color: var(--cor-titulo);
    margin: 0 0 5px 0;
    text-transform: uppercase;
}

.secao-info .conteudo {
    font-size: 1em;
    line-height: 1.6;
    color: var(--cor-texto-principal);
}

.secao-texto {
    margin-top: 50px;
}

.secao-texto h3 {
    font-size: 1.6em;
    font-weight: 500;
    border-bottom: 2px solid var(--cor-borda);
    padding-bottom: 8px;
    margin-bottom: 20px;
    color: var(--cor-titulo);
}

.secao-texto p {
    font-size: 1em;
    margin-bottom: 18px;
    line-height: 1.6;
}

.secao-texto ul {
    list-style-type: disc;
    margin-left: 25px;
    margin-bottom: 18px;
}

.secao-texto ul li {
    margin-bottom: 8px;
}

/* ================================================= */
/* 7. RODAPÉ                                        */
/* ================================================= */
.footer {
    text-align: center;
    padding: 30px;
    background-color: var(--cor-fundo-container);
    border-top: 1px solid var(--cor-borda);
    font-size: 0.85em;
    color: var(--cor-texto-secundario);
}