/* =========================================
   IMPORTAÇÃO DA FONTE (POPPINS)
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,700&display=swap');

/* =========================================
   PALETA DE CORES E RESET
   ========================================= */
:root {
    --azul-navy: #150578;      
    --azul-bell: #449DD1;      
    --azul-sky: #78C0E0;       
    --fundo-site: #FFFAFA;     
    --branco: #FFFFFF;         
    --texto-escuro: #000000;   
    --texto-claro: #FFFFFF;    
    --roxo-realeza: #4b006e;   
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background-color: var(--fundo-site); color: var(--texto-escuro); overflow-x: hidden; }
.escondido { display: none !important; }

/* Remove o botão hambúrguer de qualquer tela */
.menu-toggle { display: none !important; }

/* =========================================
   HEADER E NAVEGAÇÃO
   ========================================= */
header {
    background-color: var(--azul-sky); 
    display: flex; align-items: center; 
    padding: 20px 50px; 
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.texto-logo {
    font-weight: 700; font-style: italic; text-decoration: none;
    display: inline-block; transition: transform 0.3s ease;
}
.texto-logo:hover { transform: scale(1.03); }
.logo-qual { color: var(--azul-navy); font-size: 32px; }
.logo-profissao { color: var(--azul-bell); font-size: 32px; }
.logo-com { color: var(--roxo-realeza); font-size: 20px; }

nav { position: absolute; left: 50%; transform: translateX(-50%); }
nav ul { display: flex; list-style: none; gap: 40px; }
nav a { text-decoration: none; color: var(--azul-navy); font-weight: 600; transition: color 0.3s; }
nav a:hover { color: var(--roxo-realeza); }
nav a.ativo { color: var(--azul-navy); border-bottom: 3px solid var(--roxo-realeza); padding-bottom: 5px; }

/* =========================================
   LAYOUT PRINCIPAL E CARDS
   ========================================= */
main { padding: 60px 50px 50px 50px; max-width: 1200px; margin: 0 auto; }
main > section > div:first-child { margin-bottom: 45px !important; }

.grid-destaques { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
.destaque-principal { grid-column: 1 / 2; grid-row: 1 / 4; } 
.destaque-secundario { grid-column: 2 / 3; }

.card {
    background-color: var(--branco); border-radius: 12px; overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s, box-shadow 0.3s;
    display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(21, 5, 120, 0.15); }
.card-imagem { width: 100%; background-color: var(--azul-bell); background-size: cover; background-position: center; }
.destaque-principal .card-imagem { height: 350px; }
.destaque-secundario .card-imagem { height: 150px; }

.noticia-img { background-image: url('noticiaimg.png'); }
.jogo-img { background-image: url('qualeaprofissaoimg.png'); }
.teste-img { background-image: url('testeimg.png'); }
.auditor-img { background-image: url('auditorimg.png'); } 
.dignidade-img { background-image: url('dignidadeimg.png'); } 

.card-conteudo { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }

.tag {
    background-color: var(--roxo-realeza); color: var(--texto-claro); padding: 5px 15px;
    border-radius: 20px; font-size: 12px; font-weight: bold; align-self: flex-start;
    margin-bottom: 15px; letter-spacing: 0.5px;
}
h2 { margin-bottom: 20px; font-size: 28px; color: var(--azul-navy); }
h3 { margin-bottom: 15px; font-size: 20px; color: var(--azul-navy); }
p { margin-bottom: 20px; color: #333; line-height: 1.6; flex-grow: 1; }

/* =========================================
   BOTÕES E FORMULÁRIOS
   ========================================= */
button {
    padding: 12px 20px; border: none; border-radius: 8px; font-weight: bold;
    cursor: pointer; transition: background 0.3s, transform 0.1s; font-size: 14px;
}
button:active { transform: scale(0.98); }
.btn-primario { background-color: var(--azul-navy); color: var(--texto-claro); width: fit-content; margin: 0 auto;}
.btn-primario:hover { background-color: var(--azul-bell); }
.btn-secundario { background-color: var(--azul-navy); color: var(--texto-claro); width: 100%; }
.btn-secundario:hover { background-color: var(--azul-bell); color: var(--texto-claro); }

.bloco-teste {
    border: 2px solid var(--azul-bell); border-radius: 12px; padding: 30px;
    margin-bottom: 35px; background-color: var(--branco); box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.bloco-teste legend {
    background-color: var(--azul-navy); color: var(--texto-claro); padding: 10px 20px;
    border-radius: 25px; font-weight: bold; font-size: 14px;
}
.pergunta-bloco { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px dashed var(--azul-bell); }
.pergunta-bloco:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pergunta-bloco h3 { font-size: 16px; color: var(--texto-escuro); margin-bottom: 15px; font-weight: 600; }

.input-select {
    width: 100%; padding: 12px 15px; border: 2px solid var(--azul-bell); border-radius: 8px;
    font-size: 14px; outline: none; color: var(--texto-escuro); background-color: var(--fundo-site);
    transition: border-color 0.3s;
}
.input-select:focus { border-color: var(--azul-sky); }

.escala-likert { display: flex; flex-direction: column; gap: 8px; }
.escala-likert label {
    cursor: pointer; background-color: var(--fundo-site); border: 1px solid var(--azul-bell);
    padding: 12px 15px; border-radius: 8px; transition: all 0.2s ease; font-size: 14px;
    color: var(--texto-escuro); display: flex; align-items: center; gap: 10px;
}
.escala-likert label:hover { background-color: var(--azul-bell); border-color: var(--azul-sky); color: var(--texto-claro); }
.escala-likert input[type="radio"] { transform: scale(1.2); cursor: pointer; accent-color: var(--azul-navy); }

.navegacao-wizard { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }

/* =========================================
   WIKIPROFISSÕES (Área de Artigos)
   ========================================= */
.wiki-section {
    background-color: var(--branco); border-radius: 12px; padding: 40px;
    margin-top: 40px; box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* =========================================
   MINIGAME E MODAL
   ========================================= */
.jogo-container { overflow: visible !important; }

.autocomplete-dropdown {
    position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--branco);
    border: 2px solid var(--azul-bell); border-top: none; border-radius: 0 0 8px 8px;
    max-height: 300px; overflow-y: auto; list-style: none; z-index: 10;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}
.autocomplete-dropdown li { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid var(--fundo-site); color: var(--texto-escuro); font-size: 14px; }
.autocomplete-dropdown li:hover { background-color: var(--azul-sky); color: var(--azul-navy); }

.autocomplete-dropdown::-webkit-scrollbar { width: 10px; }
.autocomplete-dropdown::-webkit-scrollbar-track { background: var(--fundo-site); border-radius: 0 0 8px 0; }
.autocomplete-dropdown::-webkit-scrollbar-thumb { background-color: var(--azul-bell); border-radius: 10px; border: 2px solid var(--fundo-site); }
.autocomplete-dropdown::-webkit-scrollbar-thumb:hover { background-color: var(--azul-navy); }

.palpite-tag {
    padding: 10px 15px; border-radius: 8px; font-weight: bold; display: flex;
    justify-content: space-between; align-items: center; color: var(--texto-claro);
    animation: slideIn 0.3s ease;
}
.palpite-correto { background-color: #22c55e; color: #ffffff; } 
.palpite-quase { background-color: #eab308; color: #000000; } 
.palpite-errado { background-color: #ef4444; color: #ffffff; }

.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(21, 5, 120, 0.8); display: flex; justify-content: center;
    align-items: center; z-index: 1000;
}
.modal-conteudo { width: 90%; max-width: 500px; padding: 40px; text-align: center; position: relative; animation: scaleUp 0.3s ease; }

@keyframes slideIn { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes scaleUp { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.card-emojis {
    background-color: var(--fundo-site); border: 2px solid var(--azul-bell);
    border-radius: 12px; padding: 30px 10px; font-size: 45px; text-align: center;
    letter-spacing: 10px; margin-bottom: 30px; box-shadow: inset 0 4px 10px rgba(0,0,0,0.03);
}

/* =========================================
   RESPONSIVIDADE (O EFEITO BUZZFEED / PORTAL)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Header Fino com Scroll Suave */
    header { flex-direction: column; align-items: flex-start; padding: 12px 15px; }
    .texto-logo { font-size: 0.8em; margin-bottom: 8px; }
    
    nav { width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 5px; position: relative; left: 0; transform: none; }
    nav::-webkit-scrollbar { display: none; }
    nav ul { display: inline-flex; gap: 15px; justify-content: flex-start; }
    nav a { font-size: 14px; padding: 5px 0; }
    nav a.ativo { border-bottom: 2px solid var(--roxo-realeza); padding-bottom: 3px; }

    /* 2. Compactação do Site (Zoom Out) */
    main { padding: 15px 12px; }
    .grid-destaques { display: flex; flex-direction: column; gap: 12px; }

    /* 3. A Notícia Principal (Mais curta) */
    .destaque-principal .card-imagem { height: 160px; } /* Imagem bem menor */
    .destaque-principal .card-conteudo { padding: 15px; }
    .destaque-principal h2 { font-size: 20px; margin-bottom: 10px; line-height: 1.3; }
    .destaque-principal p { font-size: 13px; margin-bottom: 10px; }
    .destaque-principal h4 { font-size: 15px; margin: 15px 0 8px 0; }
    .destaque-principal blockquote { font-size: 14px; padding: 10px; margin: 15px 0; }
    .destaque-principal p:last-child { font-size: 14px !important; padding: 10px !important; } /* A frase de impacto */

/* 4. A MÁGICA: CARDS SECUNDÁRIOS HORIZONTAIS (Thumbnail + Texto) */
    .destaque-secundario {
        flex-direction: row; 
        align-items: center;
        height: 125px; /* Altura exata para caber a imagem, título, 2 linhas e botão */
    }
    .destaque-secundario .card-imagem {
        width: 35%; 
        height: 100%;
    }
    .destaque-secundario .card-conteudo {
        width: 65%;
        padding: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .destaque-secundario h3 { font-size: 16px; margin-bottom: 4px; line-height: 1.2; }
    
    .destaque-secundario p {
        font-size: 12px; 
        margin-bottom: 8px; 
        line-height: 1.3;
        /* CORREÇÃO DO ERRO: Método 100% Padrão CSS Universal */
        max-height: 2.6em; /* Trava a altura em exatas 2 linhas (1.3em x 2) */
        overflow: hidden;  /* Esconde qualquer texto que passar da segunda linha */
    }
    
    .destaque-secundario .btn-secundario { padding: 8px 10px; font-size: 12px; width: fit-content; }

    /* 5. Seções de Conteúdo (Wiki, Form, Jogo) */
    .wiki-section, .jogo-container, #form-iqvp, #resultado-iqvp, #form-auditor, #resultado-auditor {
        padding: 20px 15px; margin-top: 15px; border-radius: 8px;
    }
    
    /* Auditores e Jogo compactados */
    .bloco-teste { padding: 15px; margin-bottom: 15px; }
    .pergunta-bloco h3 { font-size: 14px; margin-bottom: 10px; }
    .escala-likert label { padding: 10px; font-size: 12px; margin-bottom: 4px; }
    .input-select { font-size: 16px !important; padding: 10px; min-height: 42px; } /* 16px impede o zoom do iPhone */
    button.btn-primario { padding: 12px; font-size: 14px; }
    
    /* Emojis e Placar */
    .card-emojis { font-size: 28px; letter-spacing: 2px; padding: 15px 5px; margin-bottom: 15px; }
    #iqvp-percentil-renda, #iqvp-score-total, #auditor-probabilidade { font-size: 45px !important; }
    
    /* Dropdown do Minigame */
    .autocomplete-dropdown { max-height: 200px; }
    .autocomplete-dropdown li { padding: 12px; font-size: 14px; }
    
    div[style*="grid-template-columns: 1fr 1fr;"] { grid-template-columns: 1fr !important; }
}