:root {
    --bg-app: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #334155;
    --accent: #6366f1;
    --success-bg: #dcfce7;
    --success-text: #166534;
    --error-bg: #fee2e2;
    --error-text: #991b1b;
}

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

body { 
    font-family: 'Inter', sans-serif; 
    font-size: 14px; 
    line-height: 1.5; 
    background: var(--bg-app); 
    color: var(--text-main); 
}

/* Justifica todo o texto do site para um visual de revista/livro */
p {
    text-align: justify;
    /* Melhora o hifenização para o texto ficar fluido e sem buracos */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    /* Melhora a quebra de palavras */
    word-break: break-word;
}

/* --- ESTILO DE LINKS EM TEXTOS --- */
p a {
    color: var(--accent); /* Usa a cor roxa do seu logo/botões */
    text-decoration: none; /* Remove o sublinhado padrão que é feio */
    border-bottom: 1px solid var(--accent); /* Coloca uma linha fina e elegante */
    transition: all 0.3s ease;
}

p a:hover {
    filter: brightness(1.2); /* O link dá um leve "brilho" ao passar o mouse */
    border-bottom: 2px solid var(--accent); /* Aumenta um pouco a espessura da linha */
}

/* --- PADRONIZAÇÃO DE CONTEÚDO --- */
.enunciado-container, .comentario-box { font-size: 14px; margin-bottom: 15px; }
.enunciado-container p, .comentario-box p { margin-bottom: 10px; }
.enunciado-container strong, .comentario-box strong { font-weight: 700; font-size: 1em; }
.enunciado-container small, .fonte { font-size: 0.85em; color: #64748b; font-style: italic; }
.texto-apoio { background: #f8fafc; padding: 15px; border-left: 4px solid var(--accent); margin: 15px 0; }

/* --- ESTRUTURA --- */
.navbar { 
    position: sticky; 
    top: 0; 
    left: 0;
    width: 100%; /* Garante que a barra ocupe toda a largura */
    background: #ffffff; 
    border-bottom: 1px solid #e2e8f0; 
    padding: 15px 0; 
    z-index: 1000;
}

.nav-container { 
    width: 100%;
    max-width: 450px; /* Alinhado exatamente com o .container */
    margin: 0 auto;  /* Centraliza o container */
    display: flex; 
    align-items: center; 
    padding: 0 20px; 
    justify-content: space-between;
}

.logo { font-size: 1.4rem; font-weight: 800; color: var(--accent); text-decoration: none; }
.container { 
    width: 100%; 
    max-width: 450px; 
    margin: 20px auto; 
    padding: 0 20px; 
}

.card { 
    background: var(--card-bg); 
    padding: 24px; 
    margin-top: 10px;
    border-radius: 16px; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
    margin-bottom: 25px; 
}

/* Ajuste no Título do Card para ficar mais leve */
.card h2 {
    font-size: 1.2rem;
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.02em; /* Título mais compacto e moderno */
}

/* Deixamos o texto alinhado à esquerda para leitura fluida */
.card p {
    text-align: left;
    margin-bottom: 16px;
    line-height: 1.6; /* Aumentei um pouco o espaçamento para leitura confortável */
    color: #475569; /* Um cinza um pouco mais suave que o text-main */
    font-size: 0.95rem;
}

.meta { font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }

/* Alternativas */
.alternativa { font-size: 0.95em; padding: 14px; background: #f1f5f9; margin: 8px 0; border-radius: 10px; cursor: pointer; position: relative; transition: all 0.2s; }
.alternativa.ativa { background: #e0e7ff; }
.alternativa.correta { background: var(--success-bg) !important; color: var(--success-text); }
.alternativa.errada { background: var(--error-bg) !important; color: var(--error-text); }

/* Botões */
.btn-action { 
    width: 100%; padding: 14px; background: var(--accent); color: white; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; margin-top: 20px; 
    position: relative; overflow: hidden;
}
.btn-action .progress {
    position: absolute; top: 0; left: 0; height: 100%; width: 0%;
    background: rgba(0,0,0,0.2); z-index: 0; pointer-events: none; transition: width 0.1s linear;
}
/* Garante que o texto fique por cima da barra */
.btn-action span { position: relative; z-index: 2; }

.btn-coment { display: none; width: 100%; padding: 12px; background: #f1f5f9; color: #475569; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; margin-top: 10px; }
.btn-coment-destaque { background-color: #f97316 !important; color: white !important; }
.btn-coment-destaque:hover { background-color: #ea580c !important; }

.comentario-box { max-height: 0; opacity: 0; overflow: hidden; padding: 0 20px; margin-top: 0; background: #f1f5f9; border-radius: 10px; border-left: 4px solid var(--accent); transition: all 0.4s ease-in-out; }
.comentario-box.aberto { max-height: 1000px; opacity: 1; padding: 20px; margin-top: 15px; }

/* --- MENU HAMBÚRGUER ANIMADO --- */
.menu-toggle { 
    cursor: pointer; padding: 10px; display: flex; flex-direction: column; gap: 5px; 
    transition: transform 0.3s;
}

.menu-toggle span { 
    display: block; width: 25px; height: 2px; background: var(--accent); 
    border-radius: 2px; transition: all 0.3s ease;
}

/* Transformação em X quando ativo */
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-overlay { 
    position: fixed; top: 60px; right: -100%; width: 250px; height: 100%; 
    background: white; box-shadow: -5px 0 25px rgba(0,0,0,0.1); 
    padding: 30px; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999;
}
.menu-overlay.active { right: 0; }

.menu-overlay a { display: block; padding: 15px 0; text-decoration: none; color: var(--text-main); font-weight: 600; border-bottom: 1px solid #f1f5f9; }
/* Ajuste na navbar */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- RESPONSIVIDADE PARA TELAS MAIORES --- */
@media (min-width: 768px) {
    /* Aumenta a largura máxima do site */
    .container, .nav-container {
        max-width: 650px; /* De 450px para 650px fica muito mais equilibrado */
    }

    /* Ajusta o tamanho da fonte para leitura mais confortável em desktop */
    body { font-size: 16px; }
    
    .card h2 { font-size: 1.5rem; }
    
    .logo { font-size: 1.8rem; }
}

/* Opcional: Para telas grandes (Monitores) */
@media (min-width: 1024px) {
    .container, .nav-container {
        max-width: 800px;
    }
}