/* =====================================================================
   Missão: Fiscal do Futuro — painel administrativo
   Direção visual: livro-razão municipal. Papel frio, tinta verde-escura,
   régua de tabulação, e um único elemento assinatura: o carimbo de
   protocolo que exibe o código de acesso da turma.
   O vermelho é reservado exclusivamente a ações destrutivas.
   ===================================================================== */

:root {
  --tinta:      #12302B;
  --tinta-fraca:#4A6660;
  --papel:      #EEF1EC;
  --papel-alto: #FFFFFF;
  --linha:      #C6D0C7;
  --ouro:       #A9761C;   /* ação principal */
  --carimbo:    #96301F;   /* somente destrutivo */
  --confere:    #2C6A4C;   /* somente confirmação */


  --avatar-ameixa:    #6E4C6B;
  --avatar-ardosia:   #3B5A73;
  --avatar-terracota: #8C4A2F;
--avatar-ameixa:    #88Cc6B;
  --avatar-ardosia:   #1d5A73;
  --avatar-terracota: #8C4A2F;

  --display: "Zilla Slab", Georgia, serif;
  --corpo:   "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --raio: 3px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/1.55 var(--corpo);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------- topo ------------------------------ */

.topo {
  border-bottom: 1px solid var(--linha);
  background: var(--papel-alto);
}

.faixa {
  max-width: 62rem;
  margin: 0 auto;
  padding: .85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.marca { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; color: inherit; }

.marca-sigla {
  font: 700 .8rem/1 var(--mono);
  letter-spacing: .12em;
  border: 1.5px solid var(--tinta);
  padding: .32rem .4rem;
  border-radius: var(--raio);
}

.marca-nome { font: 600 1.05rem/1 var(--display); }

.nav { display: flex; align-items: center; gap: 1.1rem; font-size: .875rem; }
.nav a { color: var(--tinta); text-decoration: none; border-bottom: 1.5px solid transparent; padding-bottom: 1px; }
.nav a:hover, .nav a:focus-visible { border-bottom-color: var(--ouro); }
.nav a[aria-current="page"] { border-bottom-color: var(--tinta); }
.nav-quem { color: var(--tinta-fraca); font-size: .8rem; }

/* ------------------------------ folha ------------------------------ */

.folha { max-width: 62rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

h1 { font: 600 1.75rem/1.2 var(--display); margin: 0 0 .35rem; }
h2 { font: 600 1.15rem/1.3 var(--display); margin: 2.25rem 0 .75rem; }
.sub { color: var(--tinta-fraca); margin: 0 0 1.75rem; max-width: 100rem;  text-align: center; }

.eyebrow {
  font: 500 .7rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 0 0 .5rem;
}

.centralizar {
  font: 500 .7rem/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 0 0 .5rem;
 text-align: center;
}

/* ------------------------------ cartão ----------------------------- */

.cartao {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.5rem;
 text-align: center;
}

.cartao + .cartao { margin-top: 1rem; }
.cartao--estreito { max-width: 100%; }

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

/* ------------------------------ carimbo ---------------------------- */
/* Elemento assinatura: protocolo municipal com o código da turma.     */

.carimbo {
  display: inline-block;
  border: 2px solid var(--ouro);
  outline: 1px solid var(--ouro);
  outline-offset: 3px;
  border-radius: var(--raio);
  padding: .6rem 1rem .5rem;
  text-align: center;
  transform: rotate(-1.4deg);
  background: var(--papel-alto);
}

.carimbo-rotulo {
  display: block;
  font: 500 .6rem/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: .25rem;
}

.carimbo-codigo {
  font: 500 1.6rem/1 var(--mono);
  letter-spacing: .22em;
  color: var(--tinta);
}

/* ------------------------------ tabela ----------------------------- */

.tabela-envolve { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }

th {
  text-align: left;
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  padding: 0 .7rem .55rem;
  border-bottom: 1.5px solid var(--tinta);
}

td { padding: .6rem .7rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tbody tr:hover { background: #F7F9F6; }
.num { font-family: var(--mono); font-size: .85rem; }

/* ------------------------------ estados ---------------------------- */

.selo {
  display: inline-block;
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .06em;
  padding: .28rem .45rem;
  border-radius: var(--raio);
  border: 1px solid currentColor;
}
.selo--nao   { color: var(--tinta-fraca); }
.selo--anda  { color: var(--ouro); }
.selo--ok    { color: var(--confere); }

/* ---------------------------- formulários -------------------------- */

label { display: block; font-size: .82rem; font-weight: 500; margin: 1rem 0 .3rem; }
label:first-of-type { margin-top: 0; }

input[type=text], input[type=email], input[type=password], input[type=number], select {
  width: 100%;
  padding: .6rem .7rem;
  font: 400 .95rem var(--corpo);
  color: var(--tinta);
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
}

.codigo-entrada { font: 500 1.15rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; text-align: center; }

.dica { font-size: .78rem; color: var(--tinta-fraca); margin: .35rem 0 0; }

.linha-dupla { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 34rem) { .linha-dupla { grid-template-columns: 1fr; } }

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

.btn {
  display: inline-block;
  font: 500 .88rem var(--corpo);
  padding: .6rem 1.05rem;
  border-radius: var(--raio);
  border: 1.5px solid var(--tinta);
  background: var(--tinta);
  color: var(--papel-alto);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #0B211E; }

.btn--secundario { background: transparent; color: var(--tinta); }
.btn--secundario:hover { background: #E3E8E2; }

.btn--perigo { background: var(--carimbo); border-color: var(--carimbo); color: #fff; }
.btn--perigo:hover { background: #7C2417; }

.btn--mini { font-size: .78rem; padding: .35rem .6rem; }

.acoes { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem; align-items: center; }

/* ------------------------------ avisos ----------------------------- */

.aviso {
  border-left: 3px solid var(--tinta-fraca);
  background: var(--papel-alto);
  padding: .7rem .9rem;
  margin: 0 0 1rem;
  font-size: .9rem;
}
.aviso--ok   { border-left-color: var(--confere); }
.aviso--erro { border-left-color: var(--carimbo); }
.aviso--nota { border-left-color: var(--ouro); }

/* ------------------------- zona de perigo -------------------------- */

.perigo {
  border: 1px solid var(--carimbo);
  border-radius: var(--raio);
  padding: 1.35rem;
  margin-top: 2.5rem;
  background: #FCF6F4;
}
.perigo h2 { margin-top: 0; color: var(--carimbo); }
.perigo p { font-size: .875rem; }

/* ------------------------------ vazio ------------------------------ */

.vazio {
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--tinta-fraca);
  background: var(--papel-alto);
}

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

.rodape {
  border-top: 1px solid var(--linha);
  padding: .55rem 1.25rem;
  text-align: center;
  font-size: .68rem;
  color: var(--tinta-fraca);
}
.rodape p { margin: 0; }

/* --------------------------- instruções ----------------------------- */

.instrucoes { margin-bottom: 1.5rem; }
.instrucoes ol { margin: 0; padding-left: 1.15rem; font-size: .875rem; }
.instrucoes li { margin: 0 0 .45rem; }
.instrucoes li:last-child { margin-bottom: 0; }
.instrucoes li::marker { font: 500 .8rem var(--mono); color: var(--ouro); }

/* ------------------------- lista de códigos ------------------------ */
/* Folha que o professor imprime e recorta.                            */

.tiras { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); margin-top: 1rem; }
.tira {
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  padding: .55rem;
  text-align: center;
  background: var(--papel-alto);
}
.tira b { display: block; font: 500 1rem/1.3 var(--mono); letter-spacing: .1em; }
.tira span { font-size: .68rem; color: var(--tinta-fraca); }

@media print {
  .topo, .rodape, .acoes, .perigo, .nav { display: none; }
  body { background: #fff; }
  .tira { border-style: solid; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ------------------------------ avatares ---------------------------- */

.avatares {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: .6rem;
  margin: .5rem 0 0;
}

.avatar-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .8rem .5rem;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  cursor: pointer;
  text-align: center;
  background: var(--papel-alto);
}

.avatar-opcao:has(input:checked) {
  border-color: var(--ouro);
  outline: 1px solid var(--ouro);
  outline-offset: 1px;
}
.avatar-mini { width: 5.25rem; height: 5.25rem; flex-shrink: 0; }
.avatar-mini svg { width: 100%; height: 100%; }
.avatar-opcao input { margin: 0; }

.avatar-figura { width: 2.5rem; height: 2.5rem; }
.avatar-figura svg { width: 100%; height: 100%; }

.avatar-rotulo { font-size: .74rem; color: var(--tinta-fraca); }

.cores { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 0; }

.cor-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
}

.cor-opcao input { margin: 0; }

.cor-amostra {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1.5px solid var(--linha);
  display: block;
}

.cor-opcao:has(input:checked) .cor-amostra {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

.cor-rotulo { font-size: .68rem; color: var(--tinta-fraca); }

/* =====================================================================
   Acrescentado sem alterar nada acima — nenhuma linha existente foi
   tocada. São só as classes que faltavam para o que já está no PHP:
   os 3 passos da página inicial e o editor do boneco com prévia ao vivo.
   ===================================================================== */

/* --------------------------- passos (index) -------------------------- */

.grade--passos { margin-bottom: 2.5rem; }

.passo {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.35rem 1.5rem 1.5rem;
}

.passo-icone {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: .85rem;
}

.passo-texto { font-size: .9rem; margin: 0; color: var(--tinta); }

/* ------------------------------ boneco ------------------------------ */

.boneco-editor {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.boneco-editor-previa { flex: 0 0 auto; position: sticky; top: 1rem; }

.boneco-editor-campos { flex: 1 1 18rem; min-width: 0; }

.boneco-previa {
  width: 9rem;
  height: 9rem;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  padding: .5rem;
}

.boneco-previa svg { width: 100%; height: 100%; }

.cor-opcao--texto {
  padding: .5rem 1rem;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-alto);
  flex-direction: row;
}

.cor-opcao--texto:has(input:checked) {
  border-color: var(--ouro);
  background: var(--papel);
}
/* =====================================================================
   Missão 1 — progressão, nota fiscal, quiz e configuração por turma.
   Classes acrescentadas ao final para preservar todo o CSS existente.
   ===================================================================== */

.missao-subtitulo { max-width: 48rem; text-align: left; }

.missao-progresso { max-width: 48rem; margin: 1.25rem 0 1.5rem; }
.barra-progresso {
  width: 100%;
  height: .72rem;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--papel-alto);
}
.barra-progresso-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--ouro);
  transition: width .25s ease;
}
.missao-progresso-texto {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: center;
  margin-top: .45rem;
  color: var(--tinta-fraca);
  font: 500 .72rem/1.3 var(--mono);
}
.missao-progresso-texto strong { color: var(--tinta); text-align: center; }

.cartao--missao { max-width: 48rem; text-align: left; }
.cartao--missao h2 { margin-top: 0; }
.cartao--missao p { max-width: 44rem; }
.cartao--conquista { text-align: center; }
.cartao--conquista p { margin-left: auto; margin-right: auto; }

.grade--tributos { margin: 1.25rem 0; }
.mini-cartao {
  position: relative;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1rem;
  background: var(--papel);
}
.mini-cartao h3 { margin: 0 0 .35rem; font: 600 1rem/1.25 var(--display); }
.mini-cartao p { margin: 0; font-size: .85rem; color: var(--tinta-fraca); }
.mini-cartao-numero {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-bottom: .55rem;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel-alto);
  font: 600 .75rem/1 var(--mono);
}

.nota-fiscal {
  max-width: 29rem;
  margin: 1.35rem auto;
  padding: 1.2rem;
  border: 1px dashed var(--tinta-fraca);
  background: #FFFDF7;
  box-shadow: 0 5px 18px rgba(18, 48, 43, .08);
  color: #26332F;
  font: 400 .8rem/1.45 var(--mono);
}
.nota-cabecalho { text-align: center; padding-bottom: .8rem; border-bottom: 1px dashed #7A817F; }
.nota-cabecalho strong, .nota-cabecalho span { display: block; }
.nota-cabecalho span { margin-top: .25rem; font-size: .65rem; }
.nota-linha { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; }
.nota-total { border-top: 1px dashed #7A817F; font-weight: 700; }
.nota-tributos {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .65rem;
  padding: .65rem;
  border: 2px solid var(--ouro);
  background: #FFF7E8;
}
.nota-observacao { margin: .7rem 0 0 !important; font-size: .65rem; color: #59635F; }
.passos-nota { padding-left: 1.25rem; }
.passos-nota li { margin-bottom: .4rem; }

.quiz-formulario { margin-top: 1.25rem; }
.quiz-questao, .escolha-modo, .editor-questao {
  min-width: 0;
  margin: 0 0 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1rem 1.1rem 1.1rem;
}
.quiz-questao legend, .escolha-modo legend, .editor-questao legend {
  padding: 0 .35rem;
  font: 600 1rem/1.3 var(--display);
}
.quiz-questao legend span {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-right: .55rem;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel-alto);
  font: 600 .72rem/1 var(--mono);
}
.quiz-opcao {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  width: 100%;
  margin: .55rem 0 0;
  padding: .7rem .8rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-alto);
  cursor: pointer;
  font-weight: 400;
}
.quiz-opcao:hover, .quiz-opcao:has(input:checked) { border-color: var(--ouro); background: #FBF7ED; }
.quiz-opcao input { margin-top: .25rem; flex: 0 0 auto; }

.medalha--grande { display: inline-block; width: 5rem; height: 5rem; }
.medalha--grande svg { width: 100%; height: 100%; }
.acoes--centro { justify-content: center; }
.revisao-quiz { display: grid; gap: 1rem; max-width: 48rem; }
.revisao-item { text-align: left; }
.revisao-item h3 { margin: .2rem 0 .75rem; font: 600 1rem/1.35 var(--display); }
.revisao-explicacao { font-size: .85rem; }

textarea {
  width: 100%;
  resize: vertical;
  padding: .6rem .7rem;
  font: 400 .95rem/1.45 var(--corpo);
  color: var(--tinta);
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
textarea:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

.config-quiz { max-width: 48rem; }
.escolha-modo { text-align: left; }
.editor-questao { text-align: left; }
.editor-questao + .editor-questao { margin-top: 1rem; }
.alternativa-editor { margin-bottom: .7rem; }
.editor-desativado { opacity: .48; filter: grayscale(.35); }
.referencia-quiz { text-align: left; }
.referencia-quiz h3 { margin: .2rem 0 .65rem; font: 600 .95rem/1.4 var(--display); }

@media (max-width: 34rem) {
  .missao-progresso-texto { grid-template-columns: 1fr auto; }
  .missao-progresso-texto strong { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .nota-tributos { flex-direction: column; }
}


/* =====================================================================
   Missão 2 — investigação fiscal e reconhecimento de padrões.
   ===================================================================== */

.grade--pistas {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: 1.25rem 0;
}

.pista-fiscal {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1rem;
  background: var(--papel-alto);
  box-shadow: 0 3px 12px rgba(18, 48, 43, .05);
}
.pista-fiscal--destaque { border: 2px solid var(--ouro); background: #FFF9EE; }
.pista-fiscal h3 { margin: .55rem 0 .8rem; font: 600 1rem/1.3 var(--display); }
.pista-numero {
  display: inline-block;
  padding: .28rem .48rem;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel-alto);
  font: 600 .68rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pista-fiscal dl { margin: 0; }
.pista-fiscal dl div {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .46rem 0;
  border-top: 1px dashed var(--linha);
}
.pista-fiscal dt { color: var(--tinta-fraca); }
.pista-fiscal dd { margin: 0; font: 600 .84rem/1.3 var(--mono); }

.quadro-padroes { margin: 1.25rem 0; }
.quadro-padroes table { min-width: 42rem; }
.passos-detetive { margin: 1.25rem 0; }

.badge-detetive {
  width: 6rem;
  height: 6rem;
  filter: drop-shadow(0 6px 8px rgba(18, 48, 43, .16));
}
.badge-detetive svg { display: block; width: 100%; height: 100%; }
.conquista-detetive { border-top: 4px solid var(--ouro); }
.conquista-mini { margin: .65rem 0 0; color: var(--confere); }

@media (max-width: 34rem) {
  .grade--pistas { grid-template-columns: 1fr; }
}

/* =====================================================================
   Missão 1 — narrativa, conceitos, conteúdo, quiz e badge persistente.
   ===================================================================== */

.secao-configuracao {
  max-width: 52rem;
  scroll-margin-top: 1rem;
}
.cabecalho-configuracao {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.cabecalho-configuracao h2 { margin: .15rem 0 .35rem; }
.cabecalho-configuracao--interno {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--linha);
}
.cabecalho-configuracao--interno h3 { margin: 0 0 .25rem; }
.contador-editor {
  flex: 0 0 auto;
  padding: .45rem .65rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--papel-alto);
  color: var(--tinta-fraca);
  font: 600 .7rem/1 var(--mono);
}
.divisor-configuracao {
  max-width: 52rem;
  margin: 2.2rem 0;
  border: 0;
  border-top: 1px solid var(--linha);
}
.lista-editores { display: grid; gap: 1rem; }
.editor-conteudo { text-align: left; }
.editor-conteudo label,
.editor-questao label { margin-top: .75rem; }
.remover-item { margin-top: 1rem; }

.conteudos-complementares {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0;
}
.conteudo-extra {
  padding: 1rem 1.1rem;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--tinta-fraca);
  border-radius: var(--raio);
  background: var(--papel-alto);
}
.conteudo-extra h3 {
  margin: .2rem 0 .55rem;
  font: 600 1.05rem/1.35 var(--display);
}
.conteudo-extra p:last-child { margin-bottom: 0; }
.conteudo-extra--exemplo { border-left-color: var(--ouro); background: #FFF9EE; }
.conteudo-extra--atividade { border-left-color: var(--confere); background: #F4FAF6; }
.conteudo-extra--atencao { border-left-color: var(--carimbo); background: #FFF7F4; }

.badge-fiscal-iniciante {
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto .8rem;
  filter: drop-shadow(0 8px 10px rgba(18, 48, 43, .18));
  animation: badge-entrada .45s ease-out both;
}
.badge-fiscal-iniciante svg { width: 100%; height: 100%; display: block; }
.badge-mensagem {
  display: inline-block;
  margin-top: -.35rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: #F1F8F3;
  color: var(--confere);
  font: 600 .72rem/1.2 var(--mono);
}
.conquista-mini--badge {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: .75rem;
  color: var(--confere);
  font-size: .8rem;
}
.badge-fiscal-mini {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
}
.badge-fiscal-mini svg { width: 100%; height: 100%; display: block; }

@keyframes badge-entrada {
  from { opacity: 0; transform: translateY(8px) scale(.88); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .badge-fiscal-iniciante { animation: none; }
}

@media (max-width: 34rem) {
  .cabecalho-configuracao { flex-direction: column; }
}

/* =====================================================================
   Missão 2 — sequência didática ampliada e badge persistente.
   ===================================================================== */

.treinamento-padroes {
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}

.tutorial-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .8rem;
  margin: 1.25rem 0;
}
.tutorial-dados section {
  padding: .9rem 1rem;
  border: 1px solid var(--linha);
  border-top: 3px solid var(--ouro);
  border-radius: var(--raio);
  background: var(--papel-alto);
}
.tutorial-dados strong,
.tutorial-dados span { display: block; }
.tutorial-dados strong {
  margin-bottom: .35rem;
  font: 600 .92rem/1.25 var(--display);
}
.tutorial-dados span {
  color: var(--tinta-fraca);
  font-size: .8rem;
}

.comparacao-exemplo {
  margin: 1.2rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--ouro);
  border-radius: var(--raio);
  background: #FFF9EE;
}
.comparacao-exemplo h3 { margin: .15rem 0 .5rem; }
.comparacao-exemplo p:last-child { margin-bottom: 0; }

.pergunta-investigacao {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 1.15rem 0 .65rem;
  padding: .85rem 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #F4FAF6;
}
.pergunta-investigacao strong { flex: 0 0 auto; color: var(--confere); }

.dica-revelavel {
  margin: .65rem 0 1.2rem;
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  padding: .75rem .9rem;
  background: var(--papel-alto);
}
.dica-revelavel summary {
  cursor: pointer;
  color: var(--tinta);
  font-weight: 600;
}
.dica-revelavel p { margin: .75rem 0 0; color: var(--tinta-fraca); }

.badge-detetive--grande {
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto .8rem;
  animation: badge-entrada .45s ease-out both;
}
.badge-detetive-mini {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
}
.badge-detetive-mini svg { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  .badge-detetive--grande { animation: none; }
}

@media (max-width: 34rem) {
  .pergunta-investigacao { flex-direction: column; }
}

/* =====================================================================
   Missão 1 — domínio de 100%, resultado proporcional e ranking.
   ===================================================================== */

.resultado-tentativa {
  text-align: center;
}
.resultado-percentual {
  width: 9rem;
  height: 9rem;
  margin: 1.25rem auto;
  display: grid;
  place-content: center;
  gap: .2rem;
  border: .65rem solid var(--ouro);
  border-radius: 50%;
  background: var(--papel-alto);
  box-shadow: 0 0 0 1px var(--linha);
}
.resultado-percentual strong {
  font: 700 2rem/1 var(--display);
  color: var(--tinta);
}
.resultado-percentual span {
  color: var(--tinta-fraca);
  font-size: .78rem;
}

.ranking-missao {
  margin: 2rem 0;
  padding: 1.2rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-alto);
}
.ranking-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.ranking-cabecalho h2 { margin: .2rem 0 .35rem; }
.ranking-cabecalho .sub { margin-bottom: 0; }
.ranking-codigo {
  display: block;
  margin-top: .2rem;
}
.ranking-percentual {
  min-width: 10rem;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.ranking-barra {
  width: 7rem;
  height: .6rem;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--papel);
}
.ranking-barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ouro);
}
.ranking-aprovado {
  background: #F4FAF6;
}
.ranking-posicao {
  font-weight: 700;
  color: var(--tinta);
}

@media (max-width: 34rem) {
  .ranking-percentual { min-width: 8rem; }
  .ranking-barra { width: 5rem; }
}

/* =====================================================================
   Missões 3 e 4 — abstração, pensamento algorítmico e novos badges.
   ===================================================================== */

.badge-missao,
.badge-missao-mini {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.badge-missao svg { width: 8.75rem; height: 8.75rem; display: block; }
.badge-missao-mini svg { width: 3.4rem; height: 3.4rem; display: block; }
.badge-missao--grande { margin: 0 auto .75rem; }

.linha-prioridade {
  background: #F4FAF6;
  box-shadow: inset .25rem 0 0 var(--confere);
}

.protocolo-decisao {
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
  counter-reset: protocolo;
  display: grid;
  gap: .75rem;
}
.protocolo-decisao li {
  counter-increment: protocolo;
  position: relative;
  min-height: 3.4rem;
  padding: .85rem 1rem .85rem 4rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-alto);
}
.protocolo-decisao li::before {
  content: counter(protocolo);
  position: absolute;
  left: .85rem;
  top: .7rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel-alto);
  font: 700 1rem/1 var(--display);
}

.painel-decisao {
  margin: 1.25rem 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--papel-alto);
}
.painel-decisao > div {
  padding: 1rem;
  display: grid;
  gap: .3rem;
  border-right: 1px solid var(--linha);
}
.painel-decisao > div:last-child { border-right: 0; }
.painel-decisao span {
  color: var(--tinta-fraca);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.painel-decisao strong { color: var(--tinta); }

.rankings-grade {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.rankings-grade .ranking-missao { margin: 0; }

@media (max-width: 48rem) {
  .painel-decisao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-decisao > div:nth-child(2) { border-right: 0; }
  .painel-decisao > div:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
}

@media (max-width: 30rem) {
  .painel-decisao { grid-template-columns: 1fr; }
  .painel-decisao > div { border-right: 0; border-bottom: 1px solid var(--linha); }
  .painel-decisao > div:last-child { border-bottom: 0; }
}

/* =====================================================================
   Página inicial — cartões ilustrados em área total
   ===================================================================== */

.grade--passos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.passo--imagem {
  position: relative;
  min-height: 23rem;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(18, 48, 43, .22);
  box-shadow: 0 .5rem 1.25rem rgba(18, 48, 43, .08);
}

.passo-imagem {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .35s ease;
}

.passo--imagem::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to bottom,
      rgba(8, 30, 26, .03) 18%,
      rgba(8, 30, 26, .26) 56%,
      rgba(8, 30, 26, .94) 100%
    );
}

.passo--imagem:hover .passo-imagem {
  transform: scale(1.025);
}

.passo-sobreposicao {
  min-height: 23rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.passo--imagem .eyebrow {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 .65rem;
  padding: .38rem .58rem;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(18, 48, 43, .78);
  color: #fff;
  backdrop-filter: blur(4px);
}

.passo--imagem .passo-texto {
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .42);
}

.manual-chamada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--ouro);
  border-radius: var(--raio);
  background: var(--papel-alto);
}

.manual-chamada p {
  margin: .25rem 0 0;
  color: var(--tinta-fraca);
  font-size: .875rem;
}

.manual-chamada .eyebrow {
  margin: 0 0 .3rem;
}

.manual-chamada .btn {
  flex: 0 0 auto;
}

@media (max-width: 48rem) {
  .grade--passos {
    grid-template-columns: 1fr;
  }

  .passo--imagem,
  .passo-sobreposicao {
    min-height: 20rem;
  }

  .manual-chamada {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =====================================================================
   Painel do professor — navegação lateral fixa.
   A navegação pública e a área do estudante continuam inalteradas.
   ===================================================================== */

:root {
  --largura-menu-professor: 16.5rem;
  --altura-topo-professor: 4.6rem;
}

.topo-marca-grupo {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
}

.professor-identificacao {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}

.professor-identificacao > span:last-child {
  display: grid;
  line-height: 1.2;
}

.professor-identificacao strong {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9rem;
}

.professor-identificacao small {
  max-width: 22rem;
  margin-top: .18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta-fraca);
  font-size: .72rem;
}

.professor-avatar {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel-alto);
  font: 600 .9rem/1 var(--mono);
}

.com-menu-professor .topo {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--altura-topo-professor);
  background: var(--papel-alto);
  box-shadow: 0 1px 8px rgba(18, 48, 43, .07);
}

.com-menu-professor .faixa {
  max-width: none;
  min-height: var(--altura-topo-professor);
  margin: 0;
  padding: .7rem 1.4rem;
}

.menu-lateral-professor {
  position: fixed;
  z-index: 30;
  top: var(--altura-topo-professor);
  bottom: 0;
  left: 0;
  width: var(--largura-menu-professor);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  overflow-y: auto;
  padding: 1rem .85rem;
  border-right: 1px solid var(--linha);
  background: var(--papel-alto);
  box-shadow: 4px 0 16px rgba(18, 48, 43, .04);
}

.menu-lateral-navegacao,
.menu-lateral-rodape {
  display: grid;
  gap: .28rem;
}

.menu-lateral-rodape {
  padding-top: .8rem;
  border-top: 1px solid var(--linha);
}

.menu-lateral-link {
  display: flex;
  align-items: center;
  gap: .78rem;
  min-height: 2.8rem;
  padding: .68rem .78rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  color: var(--tinta);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.menu-lateral-link:hover,
.menu-lateral-link:focus-visible {
  border-color: var(--linha);
  background: var(--papel);
}

.menu-lateral-link--ativo {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--papel-alto);
}

.menu-lateral-link--ativo:hover,
.menu-lateral-link--ativo:focus-visible {
  border-color: var(--tinta);
  background: #0B211E;
}

.menu-lateral-link--desabilitado {
  cursor: not-allowed;
  color: #8B9B96;
  opacity: .68;
}

.menu-lateral-icone {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
}

.menu-lateral-icone svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.com-menu-professor .folha--professor {
  max-width: none;
  min-height: calc(100vh - var(--altura-topo-professor));
  margin: 0 0 0 var(--largura-menu-professor);
  padding: 2rem clamp(1.25rem, 3vw, 3rem) 4rem;
}

.com-menu-professor .folha--professor > * {
  max-width: 76rem;
}

.com-menu-professor .folha--professor > .tabela-envolve,
.com-menu-professor .folha--professor > .rankings-grade,
.com-menu-professor .folha--professor > .ranking-missao {
  max-width: none;
}

.com-menu-professor .rodape {
  margin-left: var(--largura-menu-professor);
}

.menu-toggle {
  display: none;
  width: 2.55rem;
  height: 2.55rem;
  padding: .55rem;
  border: 1px solid var(--linha);
  border-radius: .45rem;
  background: var(--papel-alto);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 999px;
  background: var(--tinta);
}

.menu-overlay {
  display: none;
}

@media (max-width: 54rem) {
  .menu-toggle { display: block; }

  .professor-identificacao small { max-width: 12rem; }

  .menu-lateral-professor {
    z-index: 60;
    top: 0;
    width: min(18rem, 86vw);
    transform: translateX(-105%);
    transition: transform .2s ease;
  }

  .menu-aberto .menu-lateral-professor { transform: translateX(0); }

  .menu-overlay {
    position: fixed;
    z-index: 55;
    inset: 0;
    border: 0;
    background: rgba(18, 48, 43, .42);
  }

  .menu-aberto .menu-overlay { display: block; }

  .com-menu-professor .folha--professor {
    margin-left: 0;
    padding-inline: 1.1rem;
  }

  .com-menu-professor .rodape { margin-left: 0; }
}

@media (max-width: 34rem) {
  .com-menu-professor .faixa { padding-inline: .8rem; }
  .com-menu-professor .marca-nome { display: none; }
  .professor-identificacao strong { max-width: 8rem; }
  .professor-identificacao small { display: none; }
}

@media print {
  .menu-lateral-professor,
  .menu-toggle,
  .menu-overlay { display: none !important; }

  .com-menu-professor .folha--professor,
  .com-menu-professor .rodape { margin-left: 0; }
}

.ancora-secao {
  display: block;
  position: relative;
  top: -1rem;
  visibility: hidden;
}

#turmas,
#nova-turma,
#participantes,
#missoes,
#personalizacoes,
#rankings,
#reiniciar {
  scroll-margin-top: calc(var(--altura-topo-professor) + 1rem);
}

/* =====================================================================
   Identidade visual — logo integrado ao cabeçalho compartilhado.
   ===================================================================== */
.marca {
  align-items: center;
  gap: .72rem;
  min-width: 0;
}

.marca-logo {
  width: 8rem;
  height: 8rem;
  flex: 0 0 auto;
  display: block;
  object-fit: cover;
  border-radius: .65rem;
  box-shadow: 0 0 0 1px rgba(169, 118, 28, .28), 0 4px 12px rgba(18, 48, 43, .16);
}

.marca-textos {
  display: grid;
  gap: .4rem;
  min-width: 0;
}

.marca-nome {
  display: block;
  font: 700 3.08rem/1.05 var(--display);
  letter-spacing: .015em;
  white-space: nowrap;
}

.marca-temas {
  display: block;
  max-width: 33rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta-fraca);
  font-size: .99rem;
  line-height: 2.2;
  
}

@media (max-width: 52rem) {
  .marca-temas { display: none; }
}

@media (max-width: 34rem) {
  .marca-logo { width: 2.55rem; height: 2.55rem; border-radius: .52rem; }
  .com-menu-professor .marca-nome { display: block; max-width: 10.5rem; overflow: hidden; text-overflow: ellipsis; }
  .marca-nome { font-size: .94rem; }
}

@media (max-width: 25rem) {
  .com-menu-professor .marca-nome { display: none; }
}



/* =====================================================================
   CÓDIGO DA TURMA — CARIMBO + BOTÃO COPIAR
   ===================================================================== */

.codigo-turma-controle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.codigo-turma-controle .carimbo {
  flex: 0 0 auto;
}

.btn-copiar-codigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 2.65rem;
  padding: .58rem .75rem;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--papel-alto);
  color: var(--tinta);
  font: 700 .74rem/1 var(--corpo);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(18,48,43,.05);
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

.btn-copiar-codigo:hover {
  transform: translateY(-1px);
  border-color: var(--ouro);
  background: #FFF8E8;
  box-shadow: 0 5px 11px rgba(18,48,43,.08);
}

.btn-copiar-codigo:focus-visible {
  outline: 3px solid rgba(169,118,28,.22);
  outline-offset: 2px;
  border-color: var(--ouro);
}

.btn-copiar-codigo__icone {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
}

.btn-copiar-codigo--copiado {
  border-color: var(--confere);
  background: #EAF6EF;
  color: var(--confere);
  box-shadow: 0 4px 10px rgba(44,106,76,.10);
}

.btn-copiar-codigo--erro {
  border-color: var(--carimbo);
  background: #FFF2EF;
  color: var(--carimbo);
}

.copiar-codigo-feedback {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  z-index: 3;
  max-width: 19rem;
  color: var(--tinta-fraca);
  font-size: .66rem;
  line-height: 1.35;
  text-align: right;
}

@media (max-width: 700px) {
  .codigo-turma-controle {
    width: 100%;
    justify-content: flex-start;
  }

  .copiar-codigo-feedback {
    position: static;
    flex-basis: 100%;
    max-width: none;
    margin-top: -.25rem;
    text-align: left;
  }
}

@media (max-width: 430px) {
  .codigo-turma-controle {
    display: grid;
    justify-items: start;
  }

  .btn-copiar-codigo {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-copiar-codigo {
    transition: none;
  }
}



/* =====================================================================
   Cabeçalho público — contador de visitas do projeto
   ===================================================================== */

.topo-visitas {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .42rem .68rem;
  border: 1px solid var(--linha);
  border-radius: .55rem;
  background: #F7F9F6;
  color: var(--tinta);
  white-space: nowrap;
}

.topo-visitas__icone {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .45rem;
  background: var(--papel-alto);
  font-size: 1rem;
}

.topo-visitas__texto {
  display: grid;
  gap: .08rem;
  line-height: 1;
}

.topo-visitas__texto small {
  color: var(--tinta-fraca);
  font: 500 .56rem/1.15 var(--mono);
  letter-spacing: .08em;
}

.topo-visitas__texto strong {
  color: var(--tinta);
  font: 700 1rem/1.1 var(--display);
}

@media (max-width: 40rem) {
  .faixa {
    align-items: center;
  }

  .topo-visitas {
    margin-left: auto;
    min-height: 2.45rem;
    padding: .35rem .52rem;
  }

  .topo-visitas__icone {
    width: 1.8rem;
    height: 1.8rem;
    font-size: .9rem;
  }

  .topo-visitas__texto small {
    font-size: .5rem;
  }

  .topo-visitas__texto strong {
    font-size: .92rem;
  }
}

@media (max-width: 31rem) {
  .topo-visitas {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }
}



/* =====================================================================
   Página pública — Fiscal do Futuro em números
   ===================================================================== */

.topo-visitas__icone svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.produto-numeros {
  position: relative;
  margin: 2.4rem 0 2.7rem;
  padding: 1.45rem;
  border: 1px solid var(--linha);
  border-radius: .8rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.96)),
    var(--papel);
  box-shadow: 0 8px 26px rgba(18,48,43,.06);
}

.produto-numeros::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.45rem;
  right: 1.45rem;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--ouro);
  opacity: .82;
}

.produto-numeros__cabecalho {
  max-width: 43rem;
  margin: 0 auto 1.2rem;
  text-align: center;
}

.produto-numeros__cabecalho .eyebrow {
  margin-bottom: .3rem;
  color: var(--ouro);
  font-size: .64rem;
  letter-spacing: .11em;
}

.produto-numeros__cabecalho h2 {
  margin: 0;
  color: var(--tinta);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.produto-numeros__cabecalho > p:last-child {
  margin: .45rem 0 0;
  color: var(--tinta-fraca);
  font-size: .92rem;
  line-height: 1.55;
}

.produto-numeros__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.produto-numero {
  display: grid;
  grid-template-columns: 3.65rem minmax(0,1fr);
  gap: .85rem;
  align-items: center;
  min-height: 6.4rem;
  padding: .9rem;
  border: 1px solid #D5DFD8;
  border-radius: .68rem;
  background: var(--papel-alto);
}

.produto-numero__icone {
  display: grid;
  place-items: center;
  width: 3.65rem;
  height: 3.65rem;
  border: 1px solid #C9D8CF;
  border-radius: .68rem;
  background: #F1F6F2;
  color: var(--tinta);
}

.produto-numero__icone svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.produto-numero__conteudo strong {
  display: block;
  color: var(--tinta);
  font: 700 clamp(1.65rem, 4vw, 2.15rem)/1 var(--display);
  letter-spacing: -.025em;
}

.produto-numero__conteudo span {
  display: block;
  margin-top: .28rem;
  color: var(--tinta-fraca);
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.3;
}

@media (max-width: 760px) {
  .produto-numeros__grade {
    grid-template-columns: 1fr;
  }

  .produto-numero {
    min-height: 5.8rem;
  }
}

@media (max-width: 430px) {
  .produto-numeros {
    padding: 1.1rem;
  }

  .produto-numero {
    grid-template-columns: 3.15rem minmax(0,1fr);
  }

  .produto-numero__icone {
    width: 3.15rem;
    height: 3.15rem;
  }

  .produto-numero__icone svg {
    width: 1.7rem;
    height: 1.7rem;
  }
}



/* =====================================================================
   Fiscal do Futuro em números — versão compacta e com mais presença
   ===================================================================== */

.topo-visitas__icone {
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: .45rem;
  background: var(--tinta);
  color: #fff;
}

.topo-visitas__icone svg {
  width: .95rem;
  height: .95rem;
  stroke-width: 2.15;
}

.produto-numeros {
  margin: 2.1rem 0 2.45rem;
  padding: 1.25rem 1.35rem 1.35rem;
}

.produto-numeros__cabecalho { margin-bottom: 1rem; }
.produto-numeros__cabecalho .eyebrow { font-size: .60rem; }
.produto-numeros__cabecalho h2 { font-size: clamp(1.28rem, 2.7vw, 1.65rem); }
.produto-numeros__cabecalho > p:last-child { margin-top: .35rem; font-size: .84rem; }

.produto-numeros__grade { gap: .7rem; }

.produto-numero {
  position: relative;
  grid-template-columns: 2.7rem minmax(0,1fr);
  gap: .72rem;
  min-height: 5.15rem;
  padding: .78rem .85rem;
  overflow: hidden;
  border-color: #CFDBD3;
  box-shadow: 0 4px 12px rgba(18,48,43,.045);
}

.produto-numero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--ouro);
  opacity: .85;
}

.produto-numero__icone {
  width: 2.7rem;
  height: 2.7rem;
  border: 0;
  border-radius: .58rem;
  background: var(--tinta);
  color: #fff;
  box-shadow: 0 3px 8px rgba(18,48,43,.16);
}

.produto-numero__icone svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke-width: 2.05;
}

.produto-numero__conteudo strong {
  font-size: clamp(1.75rem, 3.5vw, 2.2rem);
  line-height: .95;
  letter-spacing: -.03em;
}

.produto-numero__conteudo span {
  margin-top: .22rem;
  color: #435E58;
  font-size: .78rem;
  font-weight: 700;
}

@media (hover: hover) {
  .produto-numero {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .produto-numero:hover {
    transform: translateY(-2px);
    border-color: #B8C9BE;
    box-shadow: 0 8px 18px rgba(18,48,43,.08);
  }
}

@media (max-width: 760px) {
  .produto-numero { grid-template-columns: 2.6rem minmax(0,1fr); min-height: 4.9rem; }
  .produto-numero__icone { width: 2.6rem; height: 2.6rem; }
}

@media (max-width: 430px) {
  .produto-numeros { padding: 1rem; }
  .produto-numero { grid-template-columns: 2.5rem minmax(0,1fr); padding: .72rem .78rem; }
  .produto-numero__icone { width: 2.5rem; height: 2.5rem; }
  .produto-numero__icone svg { width: 1.25rem; height: 1.25rem; }
  .produto-numero__conteudo strong { font-size: 1.7rem; }
}