/* =========================================================
   FUMEC CIW 2026
   IDENTIDADE VISUAL PRINCIPAL
   Arquivo: assets/css/style.css
   ========================================================= */


/* =========================================================
   1. VARIÁVEIS DO PROJETO
   ========================================================= */

:root {

    /* -----------------------------------------------------
       CORES INSTITUCIONAIS
       ----------------------------------------------------- */

    --fumec-azul: #0B4E97;

    --fumec-azul-escuro: #083B73;

    --fumec-azul-claro: #EAF2FA;

    --fumec-laranja: #F39623;

    --fumec-laranja-escuro: #EB6C24;

    --fumec-branco: #FFFFFF;

    --fumec-cinza: #59595B;

    --fumec-cinza-claro: #F4F6F8;

    --fumec-borda: #D9E1EA;


    /* -----------------------------------------------------
       CORES DE ESTADO
       ----------------------------------------------------- */

    --cor-sucesso: #16834B;

    --cor-erro: #C62828;

    --cor-alerta: #F39623;


    /* -----------------------------------------------------
       FONTE PRINCIPAL
       ----------------------------------------------------- */

    --fonte-principal:
        Arial,
        Helvetica,
        sans-serif;


    /* -----------------------------------------------------
       ARREDONDAMENTO DOS ELEMENTOS
       ----------------------------------------------------- */

    --raio-pequeno: 6px;

    --raio-medio: 12px;

    --raio-grande: 18px;


    /* -----------------------------------------------------
       SOMBRA DOS CARTÕES
       ----------------------------------------------------- */

    --sombra-card:
        0 8px 25px
        rgba(
            8,
            59,
            115,
            0.10
        );

}


/* =========================================================
   2. CONFIGURAÇÃO GERAL DA PÁGINA
   ========================================================= */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    padding: 0;

    font-family:
        var(--fonte-principal);

    color:
        var(--fumec-cinza);

    background:
        var(--fumec-cinza-claro);

    min-height: 100vh;

    line-height: 1.5;

}


/* =========================================================
   3. CABEÇALHO INSTITUCIONAL FUMEC
   ========================================================= */

.fumec-header {

    width: 100%;

    background:
        var(--fumec-branco);

    border-bottom:
        4px solid var(--fumec-laranja);

    box-shadow:
        0 2px 10px
        rgba(
            8,
            59,
            115,
            0.08
        );

}


.fumec-header-inner {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding:
        14px 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.fumec-logo {

    width: 170px;

    max-width: 100%;

    height: auto;

    display: block;

}


.fumec-header-title {

    color:
        var(--fumec-azul);

    font-size:
        1.15rem;

    font-weight:
        700;

    text-align:
        right;

}


.fumec-header-title span {

    display: block;

    color:
        var(--fumec-laranja-escuro);

    font-size:
        0.85rem;

    font-weight:
        600;

    margin-top:
        3px;

}


/* =========================================================
   4. ÁREA PRINCIPAL
   ========================================================= */

.home {

    width: 100%;

    min-height:
        calc(100vh - 100px);

    display: flex;

    justify-content: center;

    align-items: center;

    box-sizing: border-box;

    padding:
        40px 20px;

}


/* =========================================================
   5. CARTÃO PRINCIPAL
   ========================================================= */

.card {

    width: 450px;

    max-width: 100%;

    box-sizing: border-box;

    background:
        var(--fumec-branco);

    border-radius:
        var(--raio-grande);

    padding:
        40px;

    text-align:
        center;

    box-shadow:
        var(--sombra-card);

    animation:
        fade .7s;

}


/* =========================================================
   6. LOGO DA PÁGINA
   ========================================================= */

.logo {

    width: 180px;

    max-width: 100%;

    height: auto;

    margin-bottom: 25px;

}


/* =========================================================
   7. TÍTULOS
   ========================================================= */

h1 {

    font-size:
        34px;

    margin-top:
        0;

    margin-bottom:
        10px;

    color:
        var(--fumec-azul);

    font-weight:
        700;

}


h2 {

    color:
        var(--fumec-azul);

    margin-top:
        0;

    margin-bottom:
        25px;

    font-weight:
        700;

}


/* =========================================================
   8. PARÁGRAFOS
   ========================================================= */

p {

    margin-top:
        0;

    margin-bottom:
        30px;

    font-size:
        18px;

    color:
        var(--fumec-cinza);

}


/* =========================================================
   9. BOTÕES
   ========================================================= */

button {

    width: 100%;

    padding:
        16px 20px;

    border: none;

    border-radius:
        var(--raio-medio);

    background:
        var(--fumec-laranja);

    color:
        var(--fumec-branco);

    font-family:
        var(--fonte-principal);

    font-size:
        18px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


/* =========================================================
   10. EFEITO DO BOTÃO AO PASSAR O MOUSE
   ========================================================= */

button:hover {

    transform:
        translateY(-2px);

    background:
        var(--fumec-laranja-escuro);

    box-shadow:
        0 6px 14px
        rgba(
            235,
            108,
            36,
            0.25
        );

}


/* =========================================================
   11. BOTÃO DESABILITADO
   ========================================================= */

button:disabled {

    opacity:
        0.6;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;

}


/* =========================================================
   12. LINKS
   ========================================================= */

a {

    color:
        var(--fumec-azul);

    text-decoration:
        none;

}


a:hover {

    color:
        var(--fumec-laranja-escuro);

    text-decoration:
        underline;

}


/* =========================================================
   13. MENSAGENS DE SUCESSO
   ========================================================= */

.success {

    color:
        var(--cor-sucesso);

}


/* =========================================================
   14. MENSAGENS DE ERRO
   ========================================================= */

.error {

    color:
        var(--cor-erro);

}


/* =========================================================
   15. DESTAQUE AZUL
   ========================================================= */

.fumec-destaque {

    color:
        var(--fumec-azul);

    font-weight:
        700;

}


/* =========================================================
   16. DESTAQUE LARANJA
   ========================================================= */

.fumec-destaque-laranja {

    color:
        var(--fumec-laranja-escuro);

    font-weight:
        700;

}


/* =========================================================
   17. CARTÃO INSTITUCIONAL
   ========================================================= */

.fumec-card {

    background:
        var(--fumec-branco);

    border:
        1px solid var(--fumec-borda);

    border-radius:
        var(--raio-grande);

    box-shadow:
        var(--sombra-card);

    padding:
        30px;

}


/* =========================================================
   18. ANIMAÇÃO DE ENTRADA
   ========================================================= */

@keyframes fade {

    from {

        opacity:
            0;

        transform:
            translateY(40px);

    }


    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   19. RESPONSIVIDADE
   ========================================================= */

@media (
    max-width: 768px
) {

    .fumec-header-inner {

        padding:
            12px 16px;

    }


    .fumec-logo {

        width:
            135px;

    }


    .fumec-header-title {

        font-size:
            1rem;

    }


    .fumec-header-title span {

        font-size:
            0.75rem;

    }


    .home {

        padding:
            25px 15px;

        align-items:
            flex-start;

    }


    .card {

        width:
            100%;

        padding:
            28px 22px;

    }


    h1 {

        font-size:
            28px;

    }


    h2 {

        font-size:
            22px;

    }


    p {

        font-size:
            16px;

    }


    button {

        font-size:
            17px;

    }

}


/* =========================================================
   20. CELULARES PEQUENOS
   ========================================================= */

@media (
    max-width: 480px
) {

    .fumec-header-inner {

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

    }


    .fumec-header-title {

        text-align:
            center;

    }


    .fumec-logo {

        width:
            145px;

    }


    .home {

        padding:
            20px 12px;

    }


    .card {

        padding:
            24px 18px;

        border-radius:
            14px;

    }


    h1 {

        font-size:
            25px;

    }


    p {

        font-size:
            15px;

    }

}

/* =========================================================
   FUMEC CIW 2026
   ESTILOS DO QUIZ
   ========================================================= */


/* =========================================================
   1. CONTAINER PRINCIPAL DO QUIZ
   ========================================================= */

.quiz-container {

    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    background:
        var(--fumec-branco);

    border-radius:
        var(--raio-grande);

    padding:
        35px;

    box-sizing:
        border-box;

    box-shadow:
        var(--sombra-card);

}


/* =========================================================
   2. CABEÇALHO DO QUIZ
   ========================================================= */

.quiz-header {

    text-align:
        center;

    margin-bottom:
        25px;

}


/* =========================================================
   3. LOGO DO QUIZ
   ========================================================= */

.quiz-logo {

    width:
        160px;

    max-width:
        100%;

    height:
        auto;

    margin:
        0 auto 15px;

    display:
        block;

}


/* =========================================================
   4. TÍTULO DO QUIZ
   ========================================================= */

.quiz-title {

    margin:
        0;

    color:
        var(--fumec-azul);

    font-size:
        28px;

    font-weight:
        700;

}


/* =========================================================
   5. SUBTÍTULO
   ========================================================= */

.quiz-subtitle {

    margin:
        5px 0 0;

    color:
        var(--fumec-cinza);

    font-size:
        15px;

}


/* =========================================================
   6. CÓDIGO DE PARTICIPAÇÃO
   ========================================================= */

#quizCode {

    display:
        inline-block;

    margin:
        0 auto 25px;

    padding:
        8px 15px;

    border-radius:
        30px;

    background:
        var(--fumec-azul-claro);

    color:
        var(--fumec-azul);

    font-size:
        14px;

    font-weight:
        700;

}


#quizCode strong {

    color:
        var(--fumec-laranja-escuro);

}


/* =========================================================
   7. ÁREA DO PROGRESSO
   ========================================================= */

.quiz-progress {

    margin-bottom:
        30px;

}


/* =========================================================
   8. TEXTO DO PROGRESSO
   ========================================================= */

#progressText {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--fumec-azul);

    font-size:
        14px;

    font-weight:
        700;

    text-align:
        left;

}


/* =========================================================
   9. FUNDO DA BARRA
   ========================================================= */

.progress-bar {

    width:
        100%;

    height:
        10px;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        #E1E7EE;

}


/* =========================================================
   10. PREENCHIMENTO DA BARRA
   ========================================================= */

#progressFill {

    width:
        0%;

    height:
        100%;

    border-radius:
        20px;

    background:
        var(--fumec-laranja);

    transition:
        width 0.4s ease;

}


/* =========================================================
   11. ÁREA DA PERGUNTA
   ========================================================= */

.quiz-question {

    margin-bottom:
        25px;

    padding:
        25px;

    border-left:
        5px solid var(--fumec-azul);

    border-radius:
        0 var(--raio-medio)
        var(--raio-medio) 0;

    background:
        var(--fumec-azul-claro);

}


/* =========================================================
   12. TEXTO DA PERGUNTA
   ========================================================= */

#question {

    margin:
        0;

    color:
        var(--fumec-azul-escuro);

    font-size:
        22px;

    line-height:
        1.45;

    font-weight:
        700;

}


/* =========================================================
   13. ÁREA DAS ALTERNATIVAS
   ========================================================= */

#answers {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    margin-bottom:
        25px;

}


/* =========================================================
   14. ALTERNATIVAS
   ========================================================= */

.answer {

    width:
        100%;

    min-height:
        70px;

    padding:
        16px 20px;

    border:
        2px solid var(--fumec-borda);

    border-radius:
        var(--raio-medio);

    background:
        var(--fumec-branco);

    color:
        var(--fumec-cinza);

    font-family:
        var(--fonte-principal);

    font-size:
        16px;

    font-weight:
        600;

    text-align:
        left;

    line-height:
        1.45;

    cursor:
        pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


/* =========================================================
   15. ALTERNATIVA AO PASSAR O MOUSE
   ========================================================= */

.answer:hover {

    border-color:
        var(--fumec-azul);

    background:
        var(--fumec-azul-claro);

    color:
        var(--fumec-azul-escuro);

    transform:
        translateY(-1px);

}


/* =========================================================
   16. ALTERNATIVA SELECIONADA
   ========================================================= */

.answer.selected {

    border-color:
        var(--fumec-laranja);

    background:
        #FFF4E5;

    color:
        var(--fumec-azul-escuro);

    box-shadow:
        0 0 0 3px
        rgba(
            243,
            150,
            35,
            0.15
        );

}


/* =========================================================
   17. ÁREA DO BOTÃO PRÓXIMA
   ========================================================= */

.quiz-actions {

    margin-top:
        10px;

}


/* =========================================================
   18. BOTÃO PRÓXIMA / FINALIZAR
   ========================================================= */

#btnProxima {

    width:
        100%;

    min-height:
        54px;

    padding:
        15px 25px;

    border:
        none;

    border-radius:
        var(--raio-medio);

    background:
        var(--fumec-laranja);

    color:
        var(--fumec-branco);

    font-family:
        var(--fonte-principal);

    font-size:
        17px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


/* =========================================================
   19. HOVER DO BOTÃO
   ========================================================= */

#btnProxima:hover {

    background:
        var(--fumec-laranja-escuro);

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 16px
        rgba(
            235,
            108,
            36,
            0.25
        );

}


/* =========================================================
   20. FOCO DO BOTÃO
   ========================================================= */

#btnProxima:focus {

    outline:
        none;

    box-shadow:
        0 0 0 4px
        rgba(
            243,
            150,
            35,
            0.25
        );

}


/* =========================================================
   21. TEXTO DE INSTRUÇÃO
   ========================================================= */

.quiz-instruction {

    margin-top:
        20px;

    color:
        var(--fumec-cinza);

    font-size:
        13px;

    text-align:
        center;

}


/* =========================================================
   22. RESPONSIVIDADE
   ========================================================= */

@media (
    max-width: 768px
) {

    .quiz-container {

        width:
            100%;

        padding:
            28px 22px;

        border-radius:
            14px;

    }


    .quiz-logo {

        width:
            140px;

    }


    .quiz-title {

        font-size:
            24px;

    }


    #question {

        font-size:
            19px;

    }


    .quiz-question {

        padding:
            20px;

    }


    .answer {

        min-height:
            65px;

        padding:
            14px 16px;

        font-size:
            15px;

    }

}


/* =========================================================
   23. CELULAR
   ========================================================= */

@media (
    max-width: 480px
) {

    .quiz-container {

        padding:
            22px 16px;

    }


    .quiz-header {

        margin-bottom:
            20px;

    }


    .quiz-logo {

        width:
            130px;

    }


    .quiz-title {

        font-size:
            22px;

    }


    .quiz-subtitle {

        font-size:
            14px;

    }


    #quizCode {

        font-size:
            12px;

        padding:
            7px 12px;

    }


    #question {

        font-size:
            18px;

    }


    .quiz-question {

        padding:
            18px;

    }


    .answer {

        min-height:
            60px;

        padding:
            13px 14px;

        font-size:
            14px;

    }


    #btnProxima {

        min-height:
            50px;

        font-size:
            16px;

    }

}