/* =========================================================================
   Desafio que destrava o preço promocional (2026-09-06).
   Usa só os tokens de ec/tokens.css — nada de cor solta, para os dois temas
   (night/day) virarem juntos sem manutenção paralela.
   ========================================================================= */

.desafio__inner {
    max-width: var(--ec-reading);
}

.desafio__titulo {
    font-family: var(--ec-font-display);
    font-size: var(--ec-step-3);
    line-height: 1.1;
    margin: var(--ec-space-3) 0 var(--ec-space-4);
}

.desafio__lede {
    color: var(--ec-text-muted);
    font-size: var(--ec-step-1);
    line-height: 1.55;
    margin-bottom: var(--ec-space-7);
}

/* ── Perguntas ───────────────────────────────────────────────────────── */

.desafio__q {
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius-lg);
    background: var(--ec-surface);
    padding: var(--ec-space-5);
    margin: 0 0 var(--ec-space-5);
}

.desafio__q legend {
    /* legend flutua fora do fluxo em alguns motores; padding-inline evita o
       texto colar na borda arredondada do fieldset. */
    padding-inline: var(--ec-space-2);
    font-size: var(--ec-step-1);
    line-height: 1.4;
    font-weight: 600;
}

.desafio__q-num {
    font-family: var(--ec-font-mono);
    font-size: var(--ec-step--1);
    color: var(--ec-accent);
    margin-right: var(--ec-space-2);
}

.desafio__alt {
    display: flex;
    gap: var(--ec-space-3);
    align-items: flex-start;
    padding: var(--ec-space-3) var(--ec-space-4);
    margin-top: var(--ec-space-3);
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius-md);
    cursor: pointer;
    line-height: 1.45;
    transition: border-color var(--ec-duration-fast) var(--ec-ease),
                background var(--ec-duration-fast) var(--ec-ease);
}

.desafio__alt:hover {
    border-color: var(--ec-line-strong);
    background: var(--ec-bg-elevated);
}

/* :has() dá o estado "marcado" no rótulo inteiro, e não só no bolinha. */
.desafio__alt:has(input:checked) {
    border-color: var(--ec-accent);
    background: var(--ec-bg-elevated);
}

.desafio__alt:has(input:focus-visible) {
    outline: 2px solid var(--ec-focus);
    outline-offset: 2px;
}

.desafio__alt input {
    margin-top: 0.28em;   /* alinha o radio com a primeira linha do texto */
    accent-color: var(--ec-accent);
    flex: none;
}

/* ── Correção depois do erro ─────────────────────────────────────────── */

.desafio__correcao {
    border: 1px solid var(--ec-line-strong);
    border-radius: var(--ec-radius-lg);
    background: var(--ec-bg-elevated);
    padding: var(--ec-space-5);
    margin-bottom: var(--ec-space-6);
}

.desafio__correcao h2 {
    font-size: var(--ec-step-1);
    margin: 0 0 var(--ec-space-4);
}

.desafio__correcao-item {
    padding-left: var(--ec-space-4);
    border-left: 2px solid var(--ec-line);
    margin-bottom: var(--ec-space-4);
}

.desafio__correcao-item.is-certa { border-left-color: var(--ec-green); }
.desafio__correcao-item.is-errada { border-left-color: var(--ec-copper); }

.desafio__correcao-q { font-weight: 600; margin: 0 0 var(--ec-space-2); line-height: 1.4; }
.desafio__correcao-r { margin: 0 0 var(--ec-space-2); }

.desafio__correcao-e {
    color: var(--ec-text-muted);
    font-size: var(--ec-step-0);
    line-height: 1.55;
    margin: 0;
}

.desafio__correcao-nota {
    color: var(--ec-text-faint);
    font-size: var(--ec-step--1);
    margin: var(--ec-space-4) 0 0;
}

/* ── Fecho ───────────────────────────────────────────────────────────── */

.desafio__cta { margin-top: var(--ec-space-4); }

.desafio__nota,
.desafio__vagas {
    display: block;
    color: var(--ec-text-faint);
    font-size: var(--ec-step--1);
    margin-top: var(--ec-space-4);
}