/* --- Reset e Configurações Globais --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Roboto, Arial, sans-serif; 
}

body { 
    background-color: #ffffff; 
    color: #000000; 
    line-height: 1.6;
}

/* --- Navegação Superior (Navbar) --- */
.top-nav { 
    border-bottom: 2px solid #000000; 
    padding: 15px 0; 
}

.top-nav nav { 
    max-width: 1000px; 
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between; /* Separa Título à esquerda e Links à direita */
    align-items: center;
}

/* Lado Esquerdo: Marca/Título */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Lado Direito: Menu */
.nav-links {
    display: flex;
    align-items: center;
}

.nav-links a { 
    text-decoration: none; 
    color: #000000; 
    margin-left: 25px; 
    font-size: 14px; 
    font-weight: 600;
    transition: 0.2s;
}

.nav-links a:hover {
    opacity: 0.6;
}

.nav-links a.active { 
    border-bottom: 3px solid #000000; 
    padding-bottom: 5px; 
}

/* --- Conteúdo Principal --- */
.container { 
    max-width: 1000px; 
    margin: 40px auto; 
    padding: 0 20px; 
}

/* Botão/Link de Voltar (Corrigindo o azul da imagem) */
.back-link {
    display: inline-block;
    text-decoration: none;
    color: #000000; /* Força o preto no lugar do azul */
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 30px;
    transition: 0.2s;
}

.back-link:hover {
    text-decoration: underline;
    opacity: 0.7;
}

/* --- Grid de Categorias (Home) --- */
.category-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 50px; 
}

.category-box h3 { 
    font-size: 18px; 
    color: #000000; 
    margin-bottom: 20px; 
    border-bottom: 1px solid #000000; 
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-box .count { 
    color: #888; 
    font-weight: normal; 
    font-size: 13px; 
}

.category-box ul { 
    list-style: none; 
}

.category-box li { 
    margin-bottom: 15px; 
    padding-left: 28px; 
    position: relative; 
}

/* Ícone de folha/documento */
.category-box li::before {
    content: "📄"; 
    position: absolute; 
    left: 0; 
    font-size: 14px; 
    opacity: 0.7;
}

.category-box a { 
    text-decoration: none; 
    color: #000000; 
    font-size: 15px; 
    font-weight: 500;
    transition: 0.2s;
}

.category-box a:hover { 
    text-decoration: underline; 
}

.see-all { 
    display: block; 
    margin-top: 20px; 
    color: #000000; 
    font-size: 11px; 
    text-decoration: none; 
    font-weight: 800; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Página de Artigo Interna --- */
.article-body { 
    max-width: 800px; 
    margin: 0 auto; 
    color: #000000; 
}

.breadcrumb { 
    font-size: 13px; 
    color: #666; 
    margin-bottom: 20px; 
}

h1 { 
    font-size: 32px;
    color: #000000; 
    font-weight: 800; 
    margin-bottom: 25px; 
    line-height: 1.2;
}

.step-image { 
    display: block;
    margin: 30px auto;
    /* Alteração: 90% em telas pequenas, mas respeita os 500px em telas grandes */
    width: 100%; 
    max-width: 500px; 
    height: auto;
    border: 2px solid #000000;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Se quiser manter exatamente 50% no desktop, use isto: */
@media (min-width: 768px) {
    .step-image {
        width: 100%;
    }
}

/* Responsividade Básica */
@media (max-width: 768px) {
    .category-grid { grid-template-columns: 1fr; }
    .top-nav nav { flex-direction: column; gap: 15px; text-align: center; }
    .nav-links a { margin: 0 10px; }
}