/* ============================================================================
   Percurso de Letramento para Empresas — Programa Empresa Compromissada.

   Folha própria, e não um bloco em `base.css`, pelo critério da casa: o modo
   de leitura é outro. O resto do painel institucional é trabalho — listas,
   filtros, formulários que se preenchem depressa. Aqui a pessoa **lê**, e
   quatro parágrafos por bloco pedem medida de linha, respiro e um foco que
   as telas de operação não pedem.

   Carregada por `{% block css_extra %}` nas quatro telas do percurso e na
   página pública de materiais.
   ========================================================================== */

/* --- 1. moldura da leitura ---------------------------------------------- */

/* A medida vem do conteúdo: 68 caracteres é onde a linha ainda se lê sem o
   olho perder o começo da seguinte. O painel usa a largura inteira porque
   ali se compara linha a linha; aqui se lê do início ao fim. */
.letramento-leitura { max-inline-size: 44rem; }

.letramento-olho {
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-violet);
  margin-bottom: var(--space-3);
}

.letramento h1 { max-inline-size: 22ch; text-wrap: balance; }

.letramento-lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
  max-inline-size: 60ch;
}

.letramento-texto {
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-block: var(--space-8);
}

.letramento-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block: var(--space-8);
}

/* --- 2. sumário do percurso --------------------------------------------- */

.letramento-sumario {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  counter-reset: bloco;
  border-block-start: 1px solid var(--line);
}

.letramento-item {
  counter-increment: bloco;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--line);
}

/* O número é desenhado pelo contador, e não escrito no HTML: assim ele
   acompanha a ordem real dos blocos, que o CMS pode mudar. */
.letramento-item::before {
  content: counter(bloco);
  flex: 0 0 auto;
  inline-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--muted);
}

.letramento-item-feito::before { color: var(--brand-violet); }

/* Bloco travado não é link — e também não é cinza-claro ilegível. Ele é
   texto comum: quem não pode entrar ainda precisa conseguir ler o título
   para saber o que vem pela frente. */
.letramento-item-travado { color: var(--muted); }

.letramento-marca {
  margin-inline-start: auto;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-violet);
}
.letramento-marca-leve { color: var(--muted); font-weight: 400; }

/* --- 3. trilha e barra de progresso ------------------------------------- */

.letramento-trilha {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .875rem;
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.letramento-contador { font-weight: 700; color: var(--ink); }

/* `role="img"` com `aria-label` no HTML: a barra diz "3 de 6" a quem a
   enxerga, e precisa dizer o mesmo a quem usa leitor de tela. */
.letramento-barra {
  block-size: 6px;
  border-radius: 999px;
  background: var(--brand-violet-soft);
  overflow: hidden;
  margin-bottom: var(--space-8);
}
.letramento-barra span {
  display: block;
  block-size: 100%;
  background: var(--espectro-ink);
  transition: inline-size .3s ease;
}

/* --- 4. pergunta e alternativas ----------------------------------------- */

.letramento-pergunta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-block: var(--space-8);
}
.letramento-pergunta h2 {
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-violet);
  margin-bottom: var(--space-4);
}
.letramento-enunciado {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: var(--space-5);
}

.letramento-alternativas {
  border: 0;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

/* O rótulo inteiro é o alvo do clique — no celular, acertar um radio de
   16 px com o polegar é o tipo de atrito que faz alguém abandonar o
   percurso na metade. */
.letramento-alternativa {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.letramento-alternativa:hover { border-color: var(--brand-violet); }
.letramento-alternativa input { margin-block-start: .2rem; flex: 0 0 auto; }

/* A escolhida é marcada por **borda e fundo**, nunca só por cor de texto:
   quem não distingue a cor precisa ver a diferença de outra forma — e o
   `checked` do radio continua sendo o que o leitor de tela anuncia. */
.letramento-alternativa-escolhida {
  border-color: var(--brand-violet);
  background: var(--brand-violet-soft);
}

/* --- 5. resposta pedagógica --------------------------------------------- */

/* Nenhum verde de acerto, nenhum vermelho de erro: não há acerto. A resposta
   aparece igual para as três alternativas, e a cor precisa dizer
   "explicação", não "resultado". */
.letramento-resposta {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-inline-start: 4px solid var(--brand-violet);
  background: var(--brand-violet-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.letramento-resposta h3 {
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-violet-deep);
  margin-bottom: var(--space-3);
}
.letramento-resposta p { margin: 0; line-height: 1.65; }

/* --- 6. navegação entre blocos ------------------------------------------ */

.letramento-navegacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-block: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--line);
}

/* Texto, e não botão desabilitado: botão inerte convida ao clique e não
   explica por que não funciona. */
.letramento-aguardando {
  font-size: .9375rem;
  color: var(--muted);
}

.letramento-rodape {
  margin-top: var(--space-8);
  font-size: .9375rem;
}

/* --- 7. tela "Antes de clicar em concordo" ------------------------------ */

.assentimento {
  list-style: none;
  margin: var(--space-8) 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.assentimento li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.5;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.assentimento-marca {
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--brand-violet);
}
.assentimento-marca svg { inline-size: 100%; block-size: 100%; display: block; }

.letramento-ressalva { margin-block: var(--space-8); }

/* --- 8. materiais de formação ------------------------------------------- */

.materiais { list-style: none; margin: var(--space-8) 0 0; padding: 0; }

.material {
  padding-block: var(--space-6);
  border-block-start: 1px solid var(--line);
}
.material:last-child { border-block-end: 1px solid var(--line); }

.material-titulo { font-size: 1.1875rem; margin-bottom: var(--space-2); }
.material-descricao { color: var(--muted); margin-bottom: var(--space-2); max-inline-size: 60ch; }
.material-meta {
  font-size: .8125rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0;
}

/* --- 9. celular ---------------------------------------------------------- */

@media (max-width: 600px) {
  .letramento-pergunta { padding: var(--space-5) var(--space-4); }
  /* A ação ocupa a linha inteira: no celular, botão estreito ao lado de um
     link de voltar vira alvo pequeno justamente na hora de avançar. */
  .letramento-navegacao > * { inline-size: 100%; }
  .letramento-navegacao .btn { inline-size: 100%; }
  .letramento-acoes .btn { inline-size: 100%; }
}