/* ===================================================================
   ÍMPETO INVESTIMENTOS — QUIZ
   Arquivo: quiz.css
   Objetivo: Estilos exclusivos do Quiz interativo (quiz.html).
   Depende de: variables.css, reset.css, base.css (já carregados
   antes deste arquivo).

   Visual de referência: tela cheia em verde institucional profundo,
   um único card branco flutuando no centro — imersivo, silencioso,
   premium. Segue rigorosamente o Design Guide aprovado (seção 7 —
   Estilo do Quiz).

   -------------------------------------------------------------
   ÍNDICE DESTE ARQUIVO
   -------------------------------------------------------------
   1. Fundo da página
   2. Container principal (tela cheia)
   3. Card do Quiz
   4. Logo
   5. Barra de progresso
   6. Área da pergunta
   7. Área das respostas
   8. Área de navegação
   9. Espaçamentos gerais
   10. Estilo das Alternativas (aparência padrão)
   11. Estados das Alternativas (hover, selecionado, active, focus, disabled)
   12. Formulário de Captura (visual dos campos)
   13. Botões do Quiz (primário e secundário)
   =================================================================== */


/* ===================================================================
   1. FUNDO DA PÁGINA
   Verde institucional profundo — cor de imersão/decisão, conforme
   o Design Guide. Ocupa 100% da viewport, sem scroll indesejado.
   =================================================================== */

.quiz-body {
    background-color: var(--color-dark-bg);
    min-height: 100vh;
}


/* ===================================================================
   2. CONTAINER PRINCIPAL (TELA CHEIA)
   Centraliza o card na tela, tanto horizontal quanto verticalmente,
   com respiro lateral mínimo garantido em qualquer largura.
   =================================================================== */

.quiz-screen {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100vh;

    padding: var(--space-6);
    background-color: var(--color-dark-bg);
}


/* ===================================================================
   3. CARD DO QUIZ
   Único protagonista visual da tela. Fundo branco, cantos discretos,
   sombra extremamente suave — aparência de painel premium, nunca de
   cartão chamativo.

   Reservado para o futuro: um pequeno detalhe de identidade da
   ÍMPETO (ex.: um filete superior sutil ou marca d'água discreta)
   poderá ser adicionado aqui via ::before/::after sem alterar a
   estrutura do card nem o HTML.
   =================================================================== */

.quiz-card {
    width: 100%;
    max-width: var(--width-card);

    background-color: var(--color-white);
    border-radius: calc(var(--radius-card) * 0.86);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);

    padding: calc(var(--space-7) * 1.05);

    transition: box-shadow var(--transition-default);
}


/* ===================================================================
   4. LOGO
   Apenas o símbolo "I" da ÍMPETO, centralizado horizontalmente,
   com bom espaço em branco acima e abaixo para reforçar o visual
   premium. Tamanho ampliado nesta rodada (60px) para ganhar mais
   presença. Microinteração de hover extremamente sutil.
   =================================================================== */

.quiz-logo {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: var(--space-4);
}

.quiz-logo img {
    width: 76px;
    height: auto;
    display: block;
    margin-inline: auto;

    transition: transform 0.35s ease;
}

.quiz-logo:hover img {
    transform: scale(1.05) translateY(-2px);
}


/* ===================================================================
   5. BARRA DE PROGRESSO
   Discreta, posicionada logo abaixo do símbolo — informa sem decorar.
   Trilha em tom neutro com leve profundidade interna, preenchimento
   em verde institucional (controlado via JS). Barra fina, com
   transição do preenchimento suave. Cantos totalmente arredondados.
   Cores mantidas exatamente como estavam.
   =================================================================== */

.quiz-progress {
    width: 100%;
    margin-bottom: var(--space-6);
}

.quiz-progress__bar {
    width: 100%;
    height: 0.4rem;
    border-radius: 999px;
    background-color: var(--color-gray-100);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.quiz-progress__fill {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: 999px;

    transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ===================================================================
   6. ÁREA DA PERGUNTA
   A legenda "ETAPA X DE 4" (gerada via CSS a partir do atributo
   data-step já presente em cada .quiz-step — nenhuma alteração de
   HTML ou JavaScript) fica discreta e próxima da pergunta,
   reforçando a leitura como um único bloco visual. O texto
   introdutório (.quiz-intro) tem largura ajustada para quebrar em
   apenas duas linhas de forma equilibrada. A pergunta é o elemento
   de maior peso visual do card, com tamanho levemente reduzido para
   caber mais conteúdo sem rolagem.
   =================================================================== */

.quiz-intro {
    max-width: 38rem;
    margin-inline: auto;

    font-size: calc(var(--font-size-sm) * 0.85);
    line-height: calc(var(--line-height-relaxed) * 1.08);
    color: var(--color-gray-400);
    text-align: center;
    text-wrap: balance;

    margin-bottom: var(--space-6);
}

/* ---- Numeração original — mantida no DOM, oculta visualmente ---- */
.quiz-step__number {
    display: none;
}

/* ---- Legenda "ETAPA X DE 4" — gerada via CSS, sem tocar em HTML/JS ---- */
.quiz-step[data-step]::before {
    content: "ETAPA " attr(data-step) " DE 4";
    display: block;

    font-size: calc(var(--font-size-xs) * 0.85);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-300);

    margin-bottom: var(--space-1);
}

.quiz-step__question {
    font-size: calc(var(--font-size-2xl) * 0.71);
    font-weight: var(--font-weight-bold);
    line-height: calc(var(--line-height-tight) * 0.94);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;

    margin-bottom: var(--space-5);
}


/* ===================================================================
   7. ÁREA DAS RESPOSTAS
   Alternativas empilhadas, ocupando toda a largura do card.
   =================================================================== */

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);

    margin-bottom: var(--space-7);
}


/* ===================================================================
   8. ÁREA DE NAVEGAÇÃO
   Botões Voltar/Continuar lado a lado, com respiro claro em
   relação às alternativas acima.
   =================================================================== */

.quiz-step__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}


/* ===================================================================
   9. ESPAÇAMENTOS GERAIS
   Resumo da hierarquia vertical dentro do card, seguindo a escala
   de variables.css e o Design Guide:

   Símbolo                  → margin-bottom: var(--space-6)
   Barra de progresso       → margin-bottom: var(--space-6)
   Introdução (etapa 1)     → margin-bottom: var(--space-6)
   Legenda "ETAPA X DE 4"   → margin-bottom: var(--space-1)
   Pergunta                 → margin-bottom: var(--space-5)
   Alternativas (grupo)     → margin-bottom: var(--space-7)
   Navegação                → último bloco, sem margin

   A legenda e a pergunta ficam próximas, formando um único bloco
   visual coeso, mantendo respiro maior antes das alternativas.

   O padding do próprio .quiz-card garante respiro generoso entre
   o conteúdo e a borda do card em qualquer etapa do quiz.
   =================================================================== */


/* ===================================================================
   PREPARAÇÃO PARA RESPONSIVIDADE
   Nenhuma media query é escrita neste arquivo. A estrutura já usa
   unidades relativas (rem) e largura fluida (width: 100% com
   max-width em --width-card), permitindo que o card se adapte
   naturalmente antes mesmo dos ajustes finos de responsive.css.

   - Desktop/Notebook: .quiz-card respeita max-width: var(--width-card)
     (56rem) e fica centralizado com respiro lateral (--space-6) do
     .quiz-screen — nunca encosta nas bordas da viewport.

   - Tablet (~768–1024px): o card já se ajusta fluidamente à largura
     disponível; responsive.css deve apenas revisar pontualmente o
     padding do .quiz-card e o tamanho da pergunta, sem alterar a
     estrutura.

   - Celulares (<576px): o padding lateral do .quiz-screen
     (--space-6) garante respiro mínimo mesmo em telas pequenas;
     responsive.css deve reduzir esse padding e o padding interno
     do .quiz-card um nível na escala, além de reduzir levemente o
     tamanho da pergunta, mantendo a mesma estrutura vertical.

   Toda regra acima é apenas a fundação — os ajustes finos por
   breakpoint serão feitos exclusivamente em responsive.css.
   =================================================================== */


/* ===================================================================
   10. ESTILO DAS ALTERNATIVAS (APARÊNCIA PADRÃO)
   Cada alternativa é um componente premium: fundo branco, borda
   extremamente delicada, sombra quase imperceptível em repouso,
   cantos levemente arredondados, largura total do card, transição
   muito suave entre estados. Espaço à direita reservado para o
   indicador de seleção.
   =================================================================== */

.quiz-option {
    position: relative;
    display: block;
    width: 100%;

    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: calc(var(--radius-md) * 0.9);

    padding: calc(var(--space-4) * 1.25) calc(var(--space-5) + 1.75rem) calc(var(--space-4) * 1.25) var(--space-5);

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);

    text-align: left;
    cursor: pointer;

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

.quiz-option__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.quiz-option__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

/* Preparado para uso futuro — texto de apoio opcional abaixo do
   título da alternativa (não utilizado nas perguntas atuais). */
.quiz-option__description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-secondary);
}


/* ===================================================================
   11. ESTADOS DAS ALTERNATIVAS
   Hover elegante: elevação sutil, sombra pequena e discreta em tom
   institucional, borda em verde institucional. Seleção evidente com
   fundo verde muito suave, borda verde institucional, texto levemente
   mais forte e um check (✓) discreto alinhado à direita, sem
   animação exagerada. Active com pequena resposta de clique, focus
   totalmente acessível e disabled claramente indisponível. Nenhuma
   alteração de estrutura, espaçamento base ou tipografia.
   =================================================================== */

/* ---- Hover — elevação sutil, sombra discreta, borda institucional ---- */
.quiz-option:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 10px rgba(15, 92, 63, 0.06);
    transform: translateY(-1px);
    cursor: pointer;
}

/* ---- Selecionado — evidente, identidade da ÍMPETO ---- */
.quiz-option--selected {
    background-color: var(--color-hover-light);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: none;
}

.quiz-option--selected,
.quiz-option--selected .quiz-option__title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* ---- Check discreto no lado direito, apenas quando selecionado ---- */
.quiz-option--selected::after {
    content: "✓";
    position: absolute;
    top: 50%;
    right: var(--space-5);
    transform: translateY(-50%);

    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* ---- Active — pequena sensação de clique ---- */
.quiz-option:active {
    background-color: var(--color-hover-light);
    transform: scale(0.99);
}

/* ---- Focus — acessibilidade via teclado ---- */
.quiz-option:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---- Disabled — visualmente indisponível ---- */
.quiz-option:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}


/* ===================================================================
   12. FORMULÁRIO DE CAPTURA
   Visual premium e limpo, preparado para os campos Nome, WhatsApp
   e E-mail (etapa 4). Inputs com boa altura e espaçamento interno,
   labels discretas, muito espaço entre os campos, excelente leitura
   no mobile. Placeholder discreto e foco sofisticado, com halo
   suave em verde institucional.
   =================================================================== */

.quiz-form {
    display: flex;
    flex-direction: column;
}

/* ---- Grupo de campo — rótulo + input + apoio ---- */
.quiz-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    margin-bottom: var(--space-6);
}

.quiz-form__group:last-of-type {
    margin-bottom: var(--space-7);
}

/* ---- Label — discreta, acima do campo ---- */
.quiz-form__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    color: var(--color-text-secondary);
}

/* ---- Input — grande, confortável, ótima leitura no mobile ---- */
.quiz-form__input {
    display: block;
    width: 100%;

    padding: calc(var(--space-4) * 1.15) calc(var(--space-5) * 1.05);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    background-color: var(--color-white);
    cursor: text;

    transition:
        border-color var(--transition-default),
        box-shadow var(--transition-default);
}

.quiz-form__input::placeholder {
    color: var(--color-gray-300);
}

.quiz-form__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15, 92, 63, 0.10);
}

/* ---- Helper — texto de apoio discreto abaixo do input ---- */
.quiz-form__helper {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
    color: var(--color-gray-500);
}

/* ---- Error — mensagem de erro, tom neutro e instrutivo ---- */
.quiz-form__error {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
    color: var(--color-error);
}


/* ===================================================================
   13. BOTÕES DO QUIZ
   Botão principal em verde institucional, botão secundário discreto
   (Voltar). Altura confortável, texto do botão principal com bom
   peso visual, hover discreto em ambas as variantes. Cores mantidas
   exatamente como estavam.
   =================================================================== */

.quiz-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: calc(calc(var(--space-4) * 0.85) + 1px) var(--space-6);
    border-radius: calc(var(--radius-md) * 0.7);
    border: 1px solid transparent;

    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-align: center;

    cursor: pointer;
    user-select: none;

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

.quiz-button:active:not(:disabled) {
    transform: scale(0.98);
}

.quiz-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.quiz-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

/* ---- Variante primária — ação principal (Continuar / Enviar) ---- */
.quiz-button--primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-sm);
}

.quiz-button--primary:hover:not(:disabled) {
    background-color: var(--color-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.quiz-button--primary:active:not(:disabled) {
    transform: scale(0.98);
    box-shadow: var(--shadow-sm);
}

/* ---- Variante secundária — ação discreta (Voltar) ---- */
.quiz-button--secondary {
    background-color: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-gray-300);
}

.quiz-button--secondary:hover:not(:disabled) {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-400);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.quiz-button--secondary:active:not(:disabled) {
    transform: scale(0.98);
}
/**
 * ==========================================================
 * PRIVACIDADE DO FORMULÁRIO
 * ==========================================================
 */

.quiz-step__privacy-note {
    margin-top: 1rem;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
    color: var(--color-gray-500);
    text-align: center;
}