/* ============================================================
   Aprende, base
   Compartilhado por todas as telas e mecânicas.
   Regra do projeto: nenhuma tela carrega estilo de mecânica sem
   carregar este arquivo antes. O shell único garante isso.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  /* Anton só tem um peso. Sem isto o navegador engorda a letra
     por conta própria em h1 e h2, e o resultado fica borrado. */
  font-synthesis: none;
  display: flex;
  flex-direction: column;
  transition: background var(--transicao), color var(--transicao);
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

/* Regra de classe empata com o [hidden] do navegador e vence.
   Sem isto, botão com .botao ignora o hidden. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------- topbar ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--fundo-2);
  border-bottom: 2px solid var(--marca-preto);
}

.topbar__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  background: none;
  border: 0;
  padding: var(--e2);
  margin-left: calc(var(--e2) * -1);
  cursor: pointer;
  flex-shrink: 0;
}

.topbar__logo {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--fonte-display);
  font-size: 1rem;
  color: #ffffff;
  background: var(--marca-magenta);
  box-shadow: 3px 3px 0 var(--marca-preto);
}

.topbar__nome {
  font-family: var(--fonte-display);
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.topbar__centro { flex: 1 1 16rem; min-width: 0; }

/* No projetor a base e 21px, e com quatro botoes no topo a barra
   inteira dobrava de altura, comendo um quinto da tela de aula.
   Os botoes do topo sao controle do professor no notebook, nao
   texto pra turma ler do fundo da sala: aqui eles voltam pro
   tamanho de leitura de perto. */
[data-tema="sala"] .topbar__acoes .botao {
  font-size: 0.62rem;
  padding: var(--e2) var(--e3);
}

.topbar__titulo {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto-suave);
  margin-bottom: var(--e1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__acoes {
  display: flex;
  gap: var(--e2);
  margin-left: auto;
  flex-shrink: 0;
}

.progresso { display: flex; align-items: center; gap: var(--e3); }
.progresso[hidden] { display: none !important; }

.progresso__trilho {
  flex: 1;
  height: 8px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  overflow: hidden;
}

.progresso__preenchimento {
  height: 100%;
  width: 100%;
  background: var(--marca-magenta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transicao);
}

.progresso__rotulo {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: var(--e2); }
  .topbar__centro { order: 3; flex: 1 0 100%; }
  .topbar__titulo { display: none; }
  /* O bloco de acoes tem flex-shrink: 0, entao no tamanho normal
     ele nunca e apertado e por isso nunca quebra sozinho: os botoes
     simplesmente vazavam pra fora da tela. Aqui ele passa a ocupar
     a linha inteira, e ai sim os botoes quebram dentro dela. */
  .topbar__acoes {
    gap: var(--e1);
    flex: 1 0 100%;
    flex-wrap: wrap;
    margin-left: 0;
    order: 2;
  }
  .topbar__acoes .botao { padding: var(--e2); font-size: 0.72rem; }
}

/* ---------------- barra das etapas ----------------
   A turma joga, para, e volta mais difícil. A barra existe para
   todo mundo saber em que ponto está, não só quantas faltam. */

.ciclo {
  /* flex-shrink: 0 é obrigatório aqui. O body é flex column, e o
     overflow-x zera o min-height automático, então sem isto a
     barra é esmagada até sobrar só a borda. */
  flex-shrink: 0;
  border-bottom: 2px solid var(--marca-preto);
  background: var(--fundo-2);
  overflow-x: auto;
}

.ciclo[hidden] { display: none !important; }

.ciclo__lista {
  display: flex;
  max-width: var(--largura-larga);
  margin: 0 auto;
  padding: 0 var(--e4);
}

.ciclo__item {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e5) var(--e3) 0;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto-fraco);
}

.ciclo__numero {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-family: var(--fonte-display);
  font-size: 0.72rem;
  background: var(--superficie-alta);
  color: var(--texto-fraco);
}

.ciclo__item[data-estado="atual"] { color: var(--texto); }
.ciclo__item[data-estado="atual"] .ciclo__numero {
  background: var(--marca-magenta);
  color: #ffffff;
  box-shadow: 2px 2px 0 var(--marca-preto);
}
.ciclo__item[data-estado="atual"][data-campo="pensar"] .ciclo__numero { background: var(--marca-amarelo); color: var(--marca-preto); }
.ciclo__item[data-estado="atual"][data-campo="dificil"] .ciclo__numero { background: var(--marca-laranja); }

.ciclo__item[data-estado="feito"] { color: var(--texto-suave); }
.ciclo__item[data-estado="feito"] .ciclo__numero {
  background: var(--marca-verde);
  color: var(--marca-preto);
}

@media (max-width: 560px) {
  .ciclo__item { font-size: 0.64rem; padding-right: var(--e3); }
}

/* ---------------- cartaz ----------------
   O elemento assinatura. Campo de cor cheio com trama de
   bolinhas, tarja preta e display pesado com sombra dura.
   A cor muda conforme a etapa, então dá para ver da última
   carteira que a atividade mudou de marcha. */

.cartaz {
  --cartaz-texto: #ffffff;
  --cartaz-sombra: var(--marca-preto);
  background-color: var(--campo);
  background-image: radial-gradient(var(--campo-trama) 2px, transparent 2.2px);
  background-size: 26px 26px;
  border-bottom: 4px solid var(--marca-preto);
  padding: var(--e7) 0 var(--e6);
}

.cartaz[data-campo="acao"]    { --campo: var(--marca-magenta); }
.cartaz[data-campo="dificil"] { --campo: var(--marca-laranja); }
.cartaz[data-campo="fim"]     { --campo: var(--marca-roxo); }
.cartaz[data-campo="guia"]    { --campo: var(--marca-marinho); }
/* Campo claro pede texto preto, e aí a sombra dura tem que ser
   branca. Anton é condensada demais pra aguentar sombra colorida
   no meio das letras: os vãos fecham e o título vira mancha. */
.cartaz[data-campo="pensar"] {
  --campo: var(--marca-amarelo);
  --cartaz-texto: var(--marca-preto);
  --cartaz-sombra: #ffffff;
}

.cartaz[data-campo="pensar"] .titulo,
.cartaz[data-campo="projeto"] .titulo {
  text-shadow: var(--sombra-dura-p);
}

.cartaz__interno {
  max-width: var(--largura-larga);
  margin: 0 auto;
  padding: 0 var(--e4);
}

.cartaz .olho {
  background: var(--marca-preto);
  color: #ffffff;
}

.cartaz .titulo {
  color: var(--cartaz-texto);
  text-shadow: var(--sombra-dura);
  margin-bottom: 0;
}

/* ---------------- telas ---------------- */

.palco { flex: 1; }

.tela { display: none; }
.tela--ativa { display: block; animation: entrar 220ms ease both; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.conteudo {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--e6) var(--e4) var(--e7);
}

.conteudo--largo { max-width: var(--largura-larga); }

/* tarja de rótulo, igual ao PROGRAMA das peças */
.olho {
  display: inline-block;
  padding: var(--e1) var(--e3);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento-contraste);
  background: var(--acento);
  margin-bottom: var(--e3);
}

/* Anton já é condensada de fábrica, então não leva tracking
   negativo pesado. Um toque de folga em caixa alta é o que
   mantém a leitura no projetor. */
/* Entrelinha 1 é a cara do cartaz e fica certa enquanto o título
   cabe numa linha só. Quando quebra, no celular, a sombra dura de
   6px da primeira linha cai dentro da letra da segunda e o título
   fica sujo. 1.06 abre o suficiente pra sombra passar e não chega
   perto de parecer texto corrido. */
.titulo {
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.1rem + 3.9vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: var(--e4);
}

.subtitulo {
  font-size: 1.02rem;
  color: var(--texto-suave);
  max-width: 50ch;
  margin-bottom: var(--e6);
}

.secao__titulo {
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: var(--e6) 0 var(--e3);
}

/* ---------------- botões ---------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--toque);
  padding: var(--e3) var(--e5);
  border: 2px solid var(--marca-preto);
  border-radius: var(--raio-p);
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: transform var(--transicao), background var(--transicao), box-shadow var(--transicao);
}

.botao:disabled { opacity: 0.5; cursor: not-allowed; }

.botao--primario {
  color: #ffffff;
  background: var(--marca-magenta);
  box-shadow: var(--sombra-botao);
}
.botao--primario:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 0 var(--marca-preto); }
.botao--primario:not(:disabled):active { transform: translateY(4px); box-shadow: 0 1px 0 var(--marca-preto); }

.botao--secundario {
  background: var(--fundo-2);
  color: var(--texto);
  box-shadow: var(--sombra-botao);
}
.botao--secundario:not(:disabled):hover { background: var(--superficie-alta); }
.botao--secundario:not(:disabled):active { transform: translateY(4px); box-shadow: 0 1px 0 var(--marca-preto); }

.botao--fantasma {
  background: transparent;
  border-color: var(--borda-forte);
  color: var(--texto-suave);
  font-weight: 800;
}
.botao--fantasma:not(:disabled):hover { background: var(--superficie); color: var(--texto); }

.botao--pequeno {
  min-height: 2.35rem;
  padding: var(--e2) var(--e3);
  font-size: 0.76rem;
  border-width: 1px;
}

.rodape-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e6);
}

/* Frase que prepara a próxima etapa, logo acima do botão. Leva
   tarja em vez de barra lateral, que é a linguagem das peças. */
.chamada {
  margin-top: var(--e6);
  color: var(--texto-suave);
  font-size: 0.96rem;
  line-height: 1.7;
}

.chamada:empty { display: none; }

.chamada::before {
  content: "A seguir";
  display: inline-block;
  margin-right: var(--e2);
  padding: 0 var(--e2);
  background: var(--acento);
  color: var(--acento-contraste);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

/* ---------------- caixas de conteúdo ---------------- */

.cartao {
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e5);
}

.cartao__titulo {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: var(--e3);
}

.cartao__nota { color: var(--texto-suave); font-size: 0.92rem; }

/* O assunto da atividade. É o primeiro bloco de leitura da tela
   e o único que o aluno precisa levar embora, então ganha o peso
   que antes era da descrição da empresa fictícia. */
.cartao--tema {
  background: var(--fundo-2);
  border-color: var(--marca-preto);
  box-shadow: 6px 6px 0 var(--marca-preto);
  font-size: 1.04rem;
}
.cartao--tema .cartao__titulo {
  background: var(--acento);
  color: #ffffff;
  padding: var(--e1) var(--e3);
}

/* A empresa onde a história se passa. Contexto, não conteúdo:
   corpo menor, sem caixa, marcado por uma tarja curta em vez de
   moldura, que é como o resto do material sinaliza aparte. */
.onde {
  margin-top: var(--e4);
  color: var(--texto-suave);
  font-size: 0.94rem;
  line-height: 1.55;
}

.onde::before {
  content: "ONDE";
  display: inline-block;
  margin-right: var(--e2);
  padding: 0 var(--e2);
  background: var(--marca-preto);
  color: var(--fundo);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  vertical-align: 0.12em;
}

/* O que este jogo entrega de concreto pro projeto da turma.
   É a costura entre o jogo e a empresa que eles estão montando. */
.cartao--entrega {
  margin-bottom: var(--e6);
  background: var(--superficie);
  border-color: var(--marca-preto);
  box-shadow: 6px 6px 0 var(--marca-preto);
  font-size: 1.04rem;
}
.cartao--entrega .cartao__titulo {
  background: var(--marca-ciano);
  color: var(--marca-preto);
  padding: var(--e1) var(--e3);
}

.cartao--observacao {
  margin-top: var(--e6);
  background: var(--superficie-alta);
  border-color: var(--marca-preto);
}
.cartao--observacao .cartao__titulo {
  background: var(--destaque);
  color: var(--destaque-contraste);
  padding: var(--e1) var(--e3);
}

/* Convite pra batizar a empresa. Discreto de propósito: aparece
   em todo briefing até a turma escolher o nome, então não pode
   competir com o assunto da aula. */
.batismo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie-alta);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
}

.batismo__texto {
  flex: 1 1 18rem;
  color: var(--texto-suave);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ---------------- tamanho da rodada ----------------
   Duas caixas grandes, não um seletor. A decisão é tomada com a
   turma esperando e o professor olhando o relógio da parede: tem
   que dar pra ler e tocar de longe, sem mirar. */

.tamanho { margin-top: var(--e6); }

.tamanho__titulo {
  margin-bottom: var(--e3);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.tamanho__opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--e3);
}

.tamanho__botao {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  min-height: var(--toque);
  padding: var(--e4);
  text-align: left;
  background: var(--superficie);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}

.tamanho__botao:hover { border-color: var(--marca-preto); }

.tamanho__botao[aria-pressed="true"] {
  background: var(--fundo-2);
  border-color: var(--marca-preto);
  box-shadow: 4px 4px 0 var(--marca-preto);
}

.tamanho__rotulo {
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--texto);
}

.tamanho__detalhe { color: var(--texto-suave); font-size: 0.9rem; }

/* Jogo que não tem como cortar: no lugar dos dois botões, a
   explicação. Recuado com uma barra pra não parecer botão
   desligado. */
.tamanho__unico {
  color: var(--texto-suave);
  font-size: 0.95rem;
  border-left: 4px solid var(--acento);
  padding-left: var(--e3);
}

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--e5);
}

/* Divisória de unidade curricular dentro da mesma grade. Atravessa
   todas as colunas pra não virar um cartão órfão no meio da
   fileira. A margem de cima é maior que a de baixo de propósito:
   o título tem que grudar no bloco dele, não flutuar entre dois. */
.grade__secao {
  grid-column: 1 / -1;
  margin-top: var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 3px solid var(--marca-preto);
}

.grade__secao:first-child { margin-top: 0; }

.grade__titulo {
  font-family: var(--fonte-display);
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--texto);
}

.grade__conta {
  margin-top: var(--e1);
  color: var(--texto-fraco);
  font-size: 0.86rem;
  line-height: 1.4;
}

/* ---------------- cartão de atividade ---------------- */

.atividade {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  background: var(--superficie);
  border: 2px solid var(--marca-preto);
  border-radius: var(--raio);
  padding: var(--e5);
  box-shadow: 6px 6px 0 var(--marca-preto);
}

.atividade--breve {
  box-shadow: none;
  border-style: dashed;
  border-color: var(--borda-forte);
  opacity: 0.72;
}

.atividade__topo { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; padding-right: 2.6rem; }

.atividade__nome {
  font-family: var(--fonte-display);
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: uppercase;
  max-width: 11ch;
}

.atividade__linha { color: var(--texto-suave); font-size: 0.94rem; flex: 1; }

.atividade__pe { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: auto; padding-top: var(--e2); }
.atividade__pe .botao { flex: 1 1 8rem; padding-inline: var(--e3); font-size: 0.78rem; }

.atividade--breve .cartao__nota { margin-top: auto; }

/* estrela explosiva, o mesmo papel do GRATUITO! nas peças.
   Usada uma vez por cartão e em mais lugar nenhum. */
.estrela {
  position: absolute;
  top: -1.15rem;
  right: -1.15rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  background: var(--marca-amarelo);
  color: var(--marca-preto);
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-9deg);
  clip-path: polygon(
    50% 0%, 58% 12%, 72% 6%, 73% 21%, 88% 20%, 82% 33%, 97% 38%,
    86% 48%, 98% 58%, 84% 63%, 90% 77%, 75% 76%, 71% 90%, 59% 82%,
    50% 96%, 41% 82%, 29% 90%, 25% 76%, 10% 77%, 16% 63%, 2% 58%,
    14% 48%, 3% 38%, 18% 33%, 12% 20%, 27% 21%, 28% 6%, 42% 12%
  );
}

/* ---------------- selos ---------------- */

.selos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }

.selo {
  display: inline-flex;
  align-items: center;
  padding: var(--e1) var(--e3);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--superficie-alta);
  color: var(--texto-suave);
}

.selo--uc { background: var(--marca-ciano); color: var(--marca-preto); }
.selo--guiada { background: var(--destaque); color: var(--destaque-contraste); }
.selo--reforco { background: var(--marca-verde); color: var(--marca-preto); }

/* ---------------- mapa da empresa ---------------- */

.mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--e3); }

.mapa__item {
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e4);
}

.mapa__nome { font-weight: 900; margin-bottom: var(--e1); }
.mapa__resumo { font-size: 0.88rem; color: var(--texto-suave); line-height: 1.5; }

/* ---------------- perguntas ---------------- */

.perguntas { display: grid; gap: var(--e3); counter-reset: p; }

.perguntas li {
  counter-increment: p;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--e4);
  align-items: start;
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e4);
  font-size: 1.02rem;
}

.perguntas li::before {
  content: counter(p);
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  font-family: var(--fonte-display);
  font-size: 0.9rem;
  color: #ffffff;
  background: var(--marca-magenta);
}

/* ---------------- três leituras do desempenho ---------------- */

.niveis { display: grid; gap: var(--e4); margin-top: var(--e4); }

.nivel { display: grid; grid-template-columns: 7rem 1fr; gap: var(--e4); align-items: start; }

.nivel__marca {
  padding: var(--e1) var(--e2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.nivel__marca[data-nivel="a"]  { background: var(--marca-verde); color: var(--marca-preto); }
.nivel__marca[data-nivel="pa"] { background: var(--marca-amarelo); color: var(--marca-preto); }
.nivel__marca[data-nivel="na"] { background: var(--marca-laranja); color: #ffffff; }

.nivel__texto { font-size: 0.94rem; color: var(--texto-suave); line-height: 1.55; }

@media (max-width: 560px) {
  .nivel { grid-template-columns: 1fr; gap: var(--e2); }
  .nivel__marca { justify-self: start; }
}

/* ---------------- revisão da rodada ---------------- */

.lista-revisao { display: grid; gap: var(--e3); }

.revisao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e3);
  align-items: start;
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e4);
}

.revisao[data-acertou="nao"] {
  background: var(--erro-veu);
  border-color: var(--erro);
}

.revisao__icone {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  font-weight: 900;
  font-size: 0.9rem;
}

.revisao[data-acertou="sim"] .revisao__icone { background: var(--marca-verde); color: var(--marca-preto); }
.revisao[data-acertou="nao"] .revisao__icone { background: var(--marca-laranja); color: #ffffff; }

.revisao__fala { font-weight: 700; margin-bottom: var(--e1); }
.revisao__nota { font-size: 0.9rem; color: var(--texto-suave); }

/* ---------------- placar do fim ---------------- */

.placar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--e4);
  margin-bottom: var(--e6);
}

.placar__caixa {
  background: var(--superficie);
  border: 2px solid var(--marca-preto);
  border-radius: var(--raio);
  padding: var(--e5);
}

.placar__rotulo {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: var(--e2);
}

.placar__valor {
  font-family: var(--fonte-display);
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--acento-texto);
}

.placar__nota { font-size: 0.82rem; color: var(--texto-suave); margin-top: var(--e2); }

/* ---------------- guia ---------------- */

.guia-bloco { margin-bottom: var(--e6); }
.guia-bloco h2 {
  font-family: var(--fonte-display);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: var(--e3);
}

.guia-lista { display: grid; gap: var(--e2); }

.guia-lista li {
  display: grid;
  grid-template-columns: 0.5rem 1fr;
  gap: var(--e3);
  align-items: start;
  color: var(--texto-suave);
  line-height: 1.6;
}

.guia-lista li::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  margin-top: 0.62em;
  background: var(--marca-magenta);
}

.guia-lista--passos { counter-reset: g; }
.guia-lista--passos li { grid-template-columns: 1.75rem 1fr; }
.guia-lista--passos li::before {
  counter-increment: g;
  content: counter(g);
  width: 1.75rem; height: 1.75rem;
  margin-top: 0;
  display: grid;
  place-items: center;
  font-family: var(--fonte-display);
  font-size: 0.78rem;
  color: #ffffff;
  background: var(--marca-magenta);
}

/* ---------------- filtro ---------------- */

/* Empilhado, uma linha por critério. Lado a lado, o professor
   não enxergava que os chips de unidade e os de momento eram
   dois recortes diferentes e achava que um desligava o outro. */
.filtro {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-bottom: var(--e6);
}

.filtro__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}

.filtro__rotulo {
  min-width: 5.5rem;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.filtro__conta {
  display: inline-block;
  margin-left: var(--e2);
  padding: 0 0.4em;
  border-radius: 999px;
  background: var(--borda);
  color: var(--texto-suave);
  font-size: 0.74rem;
  font-weight: 900;
}

.filtro__botao[aria-pressed="true"] .filtro__conta {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.busca {
  width: 100%;
  min-height: var(--toque);
  padding: var(--e2) var(--e4);
  font-family: var(--fonte);
  font-size: 0.98rem;
  color: var(--texto);
  background: var(--fundo-2);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio-p);
}

.busca::placeholder { color: var(--texto-fraco); }

.sem-resultado {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e4);
  padding: var(--e6);
  text-align: center;
  color: var(--texto-suave);
  border: 2px dashed var(--borda);
  border-radius: var(--raio);
}

.filtro__botao {
  min-height: 2.75rem;
  padding: var(--e2) var(--e4);
  border: 2px solid var(--borda);
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--texto-suave);
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.filtro__botao:hover { background: var(--superficie); color: var(--texto); }

/* O marinho era a cor do chip ligado, e no celular o fundo da
   tela também é marinho: o filtro ativo sumia justo no tema em
   que o professor mais usa. Magenta é a cor de ação da campanha e
   contrasta nos dois temas. */
.filtro__botao[aria-pressed="true"] {
  background: var(--acento);
  color: var(--acento-contraste);
  border-color: var(--marca-preto);
  box-shadow: var(--sombra-dura-p);
}

/* ---------------- rodapé ---------------- */

.rodape {
  flex-shrink: 0;
  border-top: 2px solid var(--marca-preto);
  background: var(--fundo-2);
  padding: var(--e5) var(--e4);
}

.rodape p {
  max-width: var(--largura);
  margin: 0 auto;
  font-size: 0.8rem;
  color: var(--texto-fraco);
  line-height: 1.6;
}

/* ---------------- movimento reduzido ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------- como usar ---------------- */

.rodape__interno {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  align-items: center;
  justify-content: space-between;
  max-width: var(--largura);
  margin: 0 auto;
}

.rodape__interno p { margin: 0; }

.ajuda {
  display: flex;
  flex-direction: column;
  gap: var(--e6);
}

.ajuda__bloco {
  padding: var(--e5);
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
}

.ajuda__bloco .secao__titulo { margin-top: 0; }

.ajuda__texto {
  margin: 0 0 var(--e3);
  color: var(--texto-suave);
  line-height: 1.65;
}

.ajuda__texto:last-child { margin-bottom: 0; }

.ajuda__passos {
  margin: 0 0 var(--e4);
  padding-left: var(--e5);
  list-style: decimal;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  color: var(--texto-suave);
  line-height: 1.6;
}

.ajuda__passos strong { color: var(--texto); }

.ajuda__itens {
  margin: 0 0 var(--e4);
  padding-left: var(--e5);
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  color: var(--texto-suave);
  line-height: 1.6;
}

.ajuda__passos:last-child,
.ajuda__itens:last-child { margin-bottom: 0; }

.ajuda__sql {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

/* Bloco largo de código no celular: rola dentro da própria caixa
   em vez de empurrar a página inteira pro lado. */
.ajuda__codigo {
  margin: 0;
  padding: var(--e4);
  overflow-x: auto;
  background: var(--fundo-2);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio-p);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--texto);
  white-space: pre;
  max-height: 22rem;
}

.ajuda__aviso {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-fraco);
  min-height: 1.2rem;
}

.ajuda__sql .barra-turma__botoes { justify-content: flex-start; }


/* ---------------- escolha do curso ----------------
   Primeira tela quando a instalação atende mais de um curso. São
   dois ou três cartões grandes, porque quem chega aqui está com a
   aula pra começar e não pode caçar link pequeno. */

.cursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--e4);
  margin-top: var(--e5);
}

.curso {
  display: grid;
  gap: var(--e2);
  align-content: start;
  text-align: left;
  padding: var(--e5);
  background: var(--superficie);
  border: 2px solid var(--marca-preto);
  border-radius: var(--raio);
  box-shadow: 6px 6px 0 var(--marca-preto);
  cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.curso:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--marca-preto); }
.curso:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--marca-preto); }

.curso__selo {
  justify-self: start;
  padding: var(--e1) var(--e2);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--marca-amarelo);
  color: var(--marca-preto);
}

.curso__nome {
  font-family: var(--fonte-display);
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.curso__linha { color: var(--texto-suave); font-size: 0.92rem; line-height: 1.5; }

.curso__conta {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/* Trocar de curso.
   Vive dentro do cartaz colorido do inicio, logo abaixo do nome do
   curso, porque e ali que a pessoa olha quando percebe que abriu a
   turma errada. Fundo branco solido sobre o campo colorido: e o
   unico elemento claro do cartaz, entao ele salta sem precisar de
   tamanho. */
.troca-curso {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e4);
  padding: var(--e2) var(--e4);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--marca-preto);
  background: #ffffff;
  border: 2px solid var(--marca-preto);
  box-shadow: 4px 4px 0 var(--marca-preto);
  cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.troca-curso[hidden] { display: none; }

.troca-curso:hover,
.troca-curso:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--marca-preto);
}

.troca-curso__icone { font-size: 1.1em; line-height: 1; }