/* =========================================
   PALETA DA ARMADURA (Frio e Ouro Envelhecido)
   ========================================= */
:root {
    /* Ouro extraído da ombreira do anão */
    --gold: #c5a977;
    --gold-dark: #8e764a;
    --gold-dim: #544426;
    
    /* Fundo dos Painéis - Azul Marinho muito escuro (Vidro Fumê) */
    --bg-panel: rgba(10, 15, 28, 0.75); 
    
    /* Textos Gélidos */
    --text-white: #e6eaf0;
    --text-dim: #8897a8;
    
    /* Cores de Status ajustadas para não brigar com o fundo */
    --online-green: #3ab577; /* Verde suave */
    --upcoming-orange: var(--gold); /* Laranja substituído pelo ouro da armadura */
    
    /* Bordas e Linhas - Dourado suave para os painéis */
    --border-neutral: rgba(197, 169, 119, 0.25);
    --border-neutral-hover: var(--gold);
}

html {
    scroll-behavior: smooth; /* Faz a tela deslizar suavemente até a âncora */
}

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

/* --- BACKGROUND E BODY (Estrutura Flex para fixar o footer) --- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Garante que o body ocupe 100% da tela no mínimo */
    font-family: 'Montserrat', sans-serif;
    color: var(--text-white);
    background: 
        linear-gradient(90deg, rgba(5,8,12,0.95) 0%, rgba(5,8,12,0.1) 50%, rgba(5,8,12,0.85) 100%),
        url('img/bartz.jpg') center top/cover no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;
}

/* --- CABEÇALHO --- */
.top-nav {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 20px 60px;
    background-color: #000000; /* Fundo preto sólido */
    border-bottom: 1px solid var(--border-neutral);
    flex-shrink: 0; /* Impede que o header amasse */
}

.logo-area { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    font-family: 'Cinzel', serif; 
    font-size: 24px; 
    color: var(--gold); 
}

/* Tamanho máximo para a imagem da logo não quebrar o layout */
.logo-img {
    max-height: 50px;
    width: auto;
}

.main-menu { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
}

.main-menu a { 
    text-decoration: none; 
    color: var(--text-dim); 
    font-family: 'Cinzel', serif; 
    font-size: 14px; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    transition: color 0.3s; 
}

.main-menu a:hover { 
    color: var(--gold); 
}

.separator { 
    color: var(--border-neutral); 
    font-size: 10px; 
}

.nav-right { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
}

.lang-selector { 
    display: flex; 
    gap: 10px; 
}

.lang-selector a { 
    text-decoration: none; 
    color: var(--text-dim); 
    font-size: 12px; 
    font-weight: 600; 
    position: relative; 
}

.lang-selector a.active, .lang-selector a:hover { 
    color: var(--text-white); 
}

.lang-selector a.active::after { 
    content: ''; 
    position: absolute; 
    bottom: -5px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 4px; 
    height: 4px; 
    background-color: var(--text-white); 
    border-radius: 50%; 
}

.btn-panel {
    text-decoration: none; 
    color: var(--text-white); 
    font-family: 'Cinzel', serif; 
    font-size: 13px;
    letter-spacing: 2px; 
    padding: 12px 30px; 
    border: 1px solid var(--border-neutral); 
    transition: all 0.3s;
}

.btn-panel:hover { 
    background: rgba(197, 169, 119, 0.1); /* Brilho dourado suave */
    border-color: var(--border-neutral-hover); 
    color: var(--gold);
}

/* --- CONTEÚDO PRINCIPAL --- */
.hero-container {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 80px 60px; 
    max-width: 1600px; 
    margin: 0 auto;
    width: 100%;
    flex-grow: 1; /* Faz o conteúdo expandir e empurrar o footer pra baixo */
}

/* COLUNA ESQUERDA */
.hero-left { 
    max-width: 600px; 
}

.subtitle { 
    font-family: 'Cinzel', serif; 
    color: var(--gold); 
    font-size: 18px; 
    letter-spacing: 3px; 
    text-transform: uppercase; 
    margin-bottom: 10px; 
}

.main-title { 
    font-family: 'Cinzel', serif; 
    font-size: 52px; 
    color: var(--text-white); 
    line-height: 1.1; 
    letter-spacing: 2px; 
    text-shadow: 2px 2px 15px rgba(0,0,0,0.9); 
    margin-bottom: 40px; 
}

.action-buttons { 
    display: flex; 
    gap: 20px; 
    margin-bottom: 30px; 
    width: 100%; /* Garante que a caixa de botões ocupe o máximo do espaço permitido */
}

.btn-main { 
    text-decoration: none; 
    font-family: 'Cinzel', serif; 
    font-size: 14px; 
    letter-spacing: 1px; /* Reduzido de 2px para 1px para o texto respirar melhor */
    
    /* O SEGREDO DO ALINHAMENTO PERFEITO: */
    display: flex;
    justify-content: center; /* Centraliza o texto horizontalmente */
    align-items: center; /* Centraliza o texto verticalmente */
    flex: 1 1 0; /* Força os dois botões a terem EXATAMENTE a mesma largura (50/50) */
    
    padding: 15px 15px; /* Reduzimos o padding lateral para não esmagar o texto */
    min-height: 60px; /* Trava a altura mínima. Se um botão crescer, o outro acompanha */
    
    text-transform: uppercase; 
    text-align: center; 
    border: 1px solid var(--border-neutral); 
    transition: all 0.3s; 
    line-height: 1.3; /* Dá um espaço elegante caso o texto quebre em duas linhas */
}

/* Botão Principal (Download) - Fundo Sólido Dourado */
.btn-filled { 
    background: linear-gradient(to right, var(--gold-dark), var(--gold)); 
    color: #05080f; /* Texto escuro para dar contraste perfeito */
    border-color: var(--gold); 
    font-weight: 700;
}

.btn-filled:hover { 
    background: var(--gold); 
    color: #000; 
    box-shadow: 0 0 20px rgba(197, 169, 119, 0.4); 
    border-color: var(--gold);
}

/* Botão Secundário (Detalhes da Forja) - Vidro Escuro */
.btn-outline { 
    background: var(--bg-panel); 
    color: var(--text-white); 
    backdrop-filter: blur(6px); 
}

.btn-outline:hover { 
    background: rgba(197, 169, 119, 0.15); 
    border-color: var(--border-neutral-hover); 
    color: var(--gold);
}

/* COLUNA DIREITA */
.hero-right { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    width: 380px; 
}

.server-card { 
    background: var(--bg-panel); 
    border: 1px solid var(--border-neutral); 
    padding: 20px; 
    backdrop-filter: blur(5px); 
    transition: border-color 0.3s; 
}

.server-card:hover { 
    border-color: var(--border-neutral-hover); 
}

.card-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 15px; 
}

.server-info { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.status-dot { 
    font-size: 18px; 
    line-height: 0; 
}

.status-dot.online { 
    color: var(--online-green); 
}

.status-dot.upcoming-dot { 
    color: var(--upcoming-orange); 
}

.server-name { 
    font-family: 'Cinzel', serif; 
    font-size: 16px; 
    color: var(--text-white); 
    letter-spacing: 1px; 
}

.server-pop { 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 600; 
    color: var(--text-white); 
}

.progress-bar-bg { 
    width: 100%; 
    height: 4px; 
    background: rgba(255,255,255,0.1); 
}

.progress-bar-fill { 
    height: 100%; 
    background: var(--gold); 
    box-shadow: 0 0 10px rgba(197, 169, 119, 0.6); 
}

.server-card.upcoming { 
    margin-top: 15px; 
}

/* Tag NOVO com o dourado da armadura e fonte escura */
.badge-new { 
    background: var(--gold); 
    color: #05080f; 
    font-size: 10px; 
    font-weight: bold; 
    padding: 3px 6px; 
    border-radius: 2px; 
    letter-spacing: 1px;
}

.timer-box { 
    display: flex; 
    justify-content: flex-start; /* Mudado de flex-end para flex-start */
    gap: 15px; 
    border-top: 1px solid rgba(255,255,255,0.1); 
    padding-top: 15px; 
}

.time-unit { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    background: rgba(0,0,0,0.5); 
    border: 1px solid rgba(255,255,255,0.1); 
    padding: 5px 10px; 
    min-width: 50px; 
}

.time-unit .number { 
    font-family: 'Cinzel', serif; 
    font-size: 18px; 
    color: var(--text-white); 
}

.time-unit .label { 
    font-size: 9px; 
    color: var(--text-dim); 
    letter-spacing: 1px; 
}

/* --- RODAPÉ --- */
.bottom-footer {
    display: flex; 
    justify-content: space-between; 
    padding: 20px 60px; 
    font-size: 11px;
    color: var(--text-dim); 
    border-top: 1px solid var(--border-neutral); 
    background: rgba(0, 0, 0, 0.95); /* Fundo preto pra combinar com o header */
    width: 100%;
    flex-shrink: 0; /* Impede que o footer amasse */
}

.footer-links a { 
    color: var(--text-dim); 
    text-decoration: none; 
    margin: 0 5px; 
    transition: color 0.3s; 
}

.footer-links a:hover { 
    color: var(--gold); 
}

/* =========================================
   SEÇÕES DE CONTEÚDO (Download / Info)
   ========================================= */
.content-section {
    padding: 100px 60px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    min-height: 80vh; /* Garante que a seção tenha um bom tamanho de rolagem */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-title {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    color: var(--gold);
    text-align: center;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cards-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap; /* Faz quebrar a linha se a tela for pequena */
}

/* Painéis de Informação (Vidro Quadrado) */
.info-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-neutral);
    padding: 30px;
    backdrop-filter: blur(5px);
    transition: all 0.3s;
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
}

.info-panel:hover {
    border-color: var(--border-neutral-hover);
}

/* Estilo para links de download */
a.info-panel {
    text-decoration: none;
    align-items: center;
    text-align: center;
}

a.info-panel:hover {
    background: rgba(197, 169, 119, 0.05); /* Brilho dourado ao passar o mouse */
    transform: translateY(-5px); /* Efeito de levantar levemente ao passar o mouse */
}

.panel-subtitle {
    font-family: 'Cinzel', serif;
    color: var(--text-white);
    font-size: 18px;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.panel-desc {
    color: var(--text-dim);
    font-size: 13px;
    margin-bottom: 20px;
    flex-grow: 1;
}

.panel-highlight {
    color: var(--gold);
    font-weight: bold;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
}

/* Lista de Informações (Rates/Config) */
.info-list {
    list-style: none;
    width: 100%;
}

.info-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--text-dim);
    font-size: 14px;
}

.info-list li:last-child {
    border-bottom: none;
}

.highlight-text {
    color: var(--text-white);
    font-weight: 600;
}

/* =========================================
   RESPONSIVIDADE (Telas Menores / Celulares)
   ========================================= */
@media (max-width: 992px) {
    /* Empilha o Header */
    .top-nav {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    
    .nav-right {
        flex-direction: column;
        gap: 15px;
    }

    /* Empilha o Centro (Hero) */
    .hero-container {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
        gap: 50px;
    }

    .hero-left {
        max-width: 100%;
    }

    .main-title {
        font-size: 38px; /* Diminui um pouco o título no celular */
    }

    /* Ajusta os Botões */
    .action-buttons {
        flex-direction: column; /* Coloca um botão embaixo do outro */
    }

    /* Ajusta os Cards da Direita */
    .hero-right {
        width: 100%;
        max-width: 450px;
    }

    /* Empilha o Rodapé */
    .bottom-footer {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        text-align: center;
    }
}