/* estilo.css — segue DESIGN.md.
   5 cores · 1 família · escala 4px · fio 1px · sem sombra · sem emoji.

   A IDEIA: desafinado é onda, afinado é linha reta.
   Todo desenho do app é a mesma linha em estados diferentes — na marca, nos sinais
   das telas, na régua do afinômetro e no gráfico da voz. Nada de ícone decorativo. */

:root {
  --tinta: #1A1A18;
  --fundo: #FAF8F5;
  --acao: #1F4B43;
  --alerta: #A8431E;
  --papel: #FFFFFF;
  /* fio e véu derivados, como no tema.css do Ressoar Disartria — nunca hex solto */
  --linha: color-mix(in srgb, var(--tinta) 15%, var(--fundo));
  --veu: color-mix(in srgb, var(--acao) 6%, var(--fundo));
  --brando: color-mix(in srgb, var(--tinta) 72%, var(--fundo));
  --degrade: linear-gradient(135deg, #1F4B43 0%, #2E6F63 100%);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 20px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.envolucro {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}

/* ---------- marca ---------- */
.topo { margin-bottom: 56px; }
.marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linha);
}
.marca .assinatura { display: flex; align-items: center; gap: 12px; }
.marca .nome {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}
.marca .selo {
  font-size: var(--t-peq);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brando);
  white-space: nowrap;
}
.sinal { display: block; color: var(--acao); flex: none; }

/* ---------- telas ---------- */
.tela { display: none; }
.tela.ativa { display: block; }

h2 {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.18;
  margin: 0 0 12px;
}
.ajuda { font-size: 20px; margin: 0 0 48px; max-width: 44ch; }
.rotulo {
  font-size: var(--t-peq);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acao);
  margin: 0 0 16px;
}

/* ---------- lista de escolhas ---------- */
.escolha {
  display: grid;
  /* minmax(0,1fr): sem isto um texto comprido empurra o botao para fora da tela.
     Achado do Filipe, receita tela-nao-quebrar-no-celular. */
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  width: 100%;
  min-height: 64px;
  padding: 24px;
  margin-bottom: 16px;
  text-align: left;
  font-family: var(--fonte);
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 4px;
  cursor: pointer;
}
.escolha .sinal { margin-top: 4px; }
.escolha .titulo { display: block; font-size: var(--t-gr); font-weight: 600; letter-spacing: -0.012em; }
.escolha .nota { display: block; font-size: var(--t-base); margin-top: 4px; color: var(--brando); }
.escolha:hover, .escolha:focus-visible { border-color: var(--acao); background: var(--veu); outline: none; }

/* ---------- botões ---------- */
.botao {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 16px 24px;
  margin-bottom: 16px;
  font-family: var(--fonte);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--papel);
  background: var(--degrade);
  border: 1px solid var(--acao);
  border-radius: 4px;
  cursor: pointer;
}
.botao.calmo { color: var(--tinta); background: transparent; border-color: var(--linha); }
.botao.calmo:hover { border-color: var(--acao); background: var(--veu); }
/* Desligado não pode virar fantasma: aos 70 anos "apagado" lê como quebrado,
   não como "espere". Some o preenchimento, o texto continua legível. */
.botao:disabled {
  color: var(--brando);
  background: var(--veu);
  border-color: var(--linha);
  cursor: default;
}
/* `display:block` do .botao vence o atributo [hidden] — sem esta linha o botão
   de instalar aparecia mesmo quando o navegador não tinha oferecido instalação. */
.botao[hidden] { display: none; }
.dupla { display: flex; gap: 16px; }
.dupla .botao { text-align: center; }
.voltar { margin-top: 40px; }

/* ---------- painel ---------- */
.painel {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 32px 24px;
  margin-bottom: 40px;
}

.gigante {
  font-size: 88px;
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 4px;
}
.sob { text-align: center; font-size: var(--t-base); color: var(--brando); margin: 0 0 40px; }

/* estado do exercício: a mesma linha da marca, não um emoji */
.estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 92px;
  justify-content: center;
  margin-bottom: 24px;
}
.estado .dizer { font-size: 20px; color: var(--brando); }
.estado .sinal { color: var(--acao); }

/* ---------- régua do afinômetro ---------- */
.regua { position: relative; height: 64px; margin-bottom: 12px; }
.regua .zona {
  position: absolute; left: 40%; width: 20%; top: 4px; bottom: 4px;
  background: var(--veu); border-left: 1px solid var(--linha); border-right: 1px solid var(--linha);
}
.regua .eixo { position: absolute; left: 0; right: 0; top: 31px; height: 1px; background: var(--linha); }
.regua .t { position: absolute; top: 26px; width: 1px; height: 11px; background: var(--linha); }
.regua .t.alta { top: 20px; height: 23px; }
.regua .t.zero { top: 10px; height: 43px; background: var(--tinta); }
.agulha {
  position: absolute; top: 4px; bottom: 4px; width: 3px;
  background: var(--alerta);
  left: 50%;
  transform: translateX(-1px);
  transition: left 90ms linear;
}
.agulha.ok { background: var(--degrade); }
.marcas {
  display: flex; justify-content: space-between;
  font-size: var(--t-peq); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brando);
}
.veredito {
  text-align: center; font-size: var(--t-gr); font-weight: 600;
  margin: 32px 0 0; min-height: 34px;
}
.veredito.ok { color: var(--acao); }
.veredito.fora { color: var(--alerta); }

/* ---------- exercícios ---------- */
.passo {
  font-size: var(--t-peq); letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; color: var(--brando); margin: 0 0 32px;
}
.resposta { font-size: 20px; font-weight: 600; margin: 0; min-height: 62px; text-align: center; }
.resposta.ok { color: var(--acao); }
.resposta.fora { color: var(--alerta); }

/* sequência: três casas ligadas pelo mesmo fio da marca */
.trilha {
  position: relative;
  display: flex; gap: 12px; justify-content: center;
  margin: 8px 0 32px;
}
.trilha::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: 50%;
  height: 1px; background: var(--linha);
}
.trilha span {
  position: relative;
  width: 88px; height: 72px; line-height: 70px; text-align: center;
  background: var(--papel);
  border: 1px solid var(--linha); border-radius: 4px;
  font-size: var(--t-base); color: var(--brando);
}
.trilha span.cheio { border-color: var(--acao); color: var(--acao); font-weight: 600; }

canvas {
  display: block; width: 100%; height: 140px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 4px;
}

/* ---------- relatório ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
td { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--linha); vertical-align: top; }
td:first-child { width: 34%; white-space: nowrap; padding-right: 16px; color: var(--brando); }
td strong { font-size: var(--t-med); }
tr:last-child td { border-bottom: 0; }

.rodape {
  font-size: var(--t-peq);
  color: var(--brando);
  border-top: 1px solid var(--linha);
  padding-top: 24px;
  margin-top: 96px;
}

/* ---------- convite para instalar ---------- */
.instalar {
  border: 1px solid var(--acao);
  border-radius: 4px;
  background: var(--veu);
  padding: 32px 24px;
  margin-bottom: 56px;
}
.instalar[hidden] { display: none; }
.instalar .sinal { color: var(--acao); margin-bottom: 16px; }
.instalar h3 {
  font-size: var(--t-tit);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 0 0 8px;
}
.instalar p { font-size: var(--t-base); color: var(--brando); margin: 0 0 24px; max-width: 40ch; }
.instalar .botao { min-height: 72px; font-size: var(--t-gr); margin-bottom: 0; }
.instalar.so-texto p { margin-bottom: 0; }

/* "em construção" — deixa claro que a obra segue, sem parecer inacabada */
.obra { margin-top: 48px; }
.obra ul { list-style: none; margin: 0; padding: 0; }
.obra li {
  position: relative;
  font-size: var(--t-base);
  color: var(--brando);
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--linha);
}
.obra li:last-child { border-bottom: 0; }
.obra li::before {
  content: ''; position: absolute; left: 0; top: 24px;
  width: 16px; height: 1px; background: var(--acao);
}

/* "Canta Certo" é nome de duas palavras: em tela estreita o espaçamento de marca
   estoura a linha. Encolhe o traço e o rastreamento antes de deixar quebrar. */
@media (max-width: 430px) {
  .marca .nome { font-size: var(--t-base); letter-spacing: 0.1em; }
  .marca .assinatura svg { width: 40px; }
  .marca .selo { font-size: var(--t-peq); }
}

@media (max-width: 380px) {
  .trilha span { width: 76px; }
  .gigante { font-size: 72px; }
}

/* ===================== teclado (dar o tom) =====================
   Fio de 1px em vez de sombra, como manda o DESIGN.md. A tecla preta é a
   própria tinta do app, não um preto novo — a paleta continua com 5 cores. */

.oitavas {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
}
.oitavas button {
  flex: 1;
  padding: 12px 4px;
  font: inherit;
  font-size: var(--t-peq);
  color: var(--brando);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 8px;
  cursor: pointer;
}
.oitavas button.on {
  color: var(--acao);
  background: var(--veu);
  border-color: var(--acao);
}

.teclado {
  position: relative;
  display: flex;
  height: 180px;
  margin: 0 0 16px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  overflow: hidden;
  background: var(--papel);
  touch-action: none;          /* sem isso o toque rola a página e engole a tecla */
  user-select: none;
}
.teclado .tecla {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 10px;
  font: inherit;
  font-size: var(--t-mini);
  color: var(--brando);
  background: var(--papel);
  border: 0;
  border-right: 1px solid var(--linha);
  cursor: pointer;
}
.teclado .tecla:last-of-type { border-right: 0; }
.teclado .tecla.soando { background: var(--veu); color: var(--acao); }

.teclado .tecla.preta {
  position: absolute;
  top: 0;
  width: 9%;
  height: 62%;
  padding-bottom: 8px;
  font-size: var(--t-nano);
  color: var(--fundo);
  background: var(--tinta);
  border: 0;
  border-radius: 0 0 6px 6px;
}
.teclado .tecla.preta.soando {
  background: var(--acao);
  color: var(--fundo);
}

.opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: var(--t-base);
  color: var(--brando);
}
.opcao input { width: 22px; height: 22px; accent-color: var(--acao); }

/* Celular estreito: teclado mais baixo para o botão de voltar não sumir. */
@media (max-height: 700px) {
  .teclado { height: 150px; }
}

/* A dica das letras só faz sentido onde existe teclado físico. */
.dica-pc { font-size: var(--t-peq); color: var(--brando); margin: 0 0 12px; }
@media (pointer: coarse) { .dica-pc { display: none; } }

/* ===================== achar a minha voz ===================== */
.fita {
  display: flex;
  gap: 1px;
  height: 64px;
  margin: 16px 0 12px;
  padding: 4px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--papel);
}
.fita .barra {
  flex: 1;
  border-radius: 2px;
  background: var(--linha);
}
.fita .barra.preta { background: color-mix(in srgb, var(--tinta) 30%, var(--fundo)); }
.fita .barra.alcancada { background: var(--acao); }

.faixa-voz {
  margin: 0 0 12px;
  text-align: center;
  font-size: var(--t-gr);
  color: var(--acao);
}

/* ===================== dois botões lado a lado ===================== */
.duplo { display: flex; gap: 8px; }
.duplo[hidden] { display: none; }
.duplo .botao { flex: 1; }

/* ===================== repita a sequência ===================== */
/* Reaproveita o .teclado; .escala é a variação sem teclas pretas. */
.teclado.escala { height: 140px; }
.teclado.escala .tecla { font-size: var(--t-peq); }

/* ===================== modo sala de aula =====================
   Uma tela, vista de longe pelo coral inteiro. Aqui a letra cresce
   até onde a tela deixa — é o único lugar do app que foge da escala. */
.sala { text-align: center; margin: 0 0 24px; }
.enorme {
  margin: 0;
  font-size: clamp(72px, 26vw, 180px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--acao);
}
.regua.grande { height: 56px; margin-top: 24px; }

/* ===================== grupos do menu =====================
   Com nove opções soltas a tela virou lista de telefone. O grupo diz QUANDO
   usar cada coisa: no ensaio, sozinho com microfone, sozinho sem microfone. */
.grupo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linha);
}
.grupo:first-of-type { margin-top: 16px; }
.grupo-nome {
  font-size: var(--t-peq);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
}
.grupo-nota { font-size: var(--t-peq); color: var(--brando); }

/* O verde é a cor do "no tom". Usá-lo também no menu tira o significado,
   então o sinal fica na tinta e o verde só aparece no toque. */
.escolha .sinal { color: var(--brando); }
.escolha:hover .sinal, .escolha:active .sinal { color: var(--acao); }

/* ===================== capa: o conceito ===================== */
.capa {
  margin: 0 0 40px;
  padding: 32px 0 28px;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  text-align: center;
}
.capa-linha {
  display: block;
  width: 100%;
  height: 60px;
  color: var(--acao);
}
.capa-frase {
  margin: 20px 0 0;
  font-size: var(--t-med);
  line-height: 1.45;
  color: var(--brando);
}
.capa-frase em { font-style: normal; color: var(--tinta); }

/* ⛔ Quem pediu menos movimento no aparelho não vê a linha se mexer.
   O JS remove a animação; isto é a rede de segurança do CSS. */
@media (prefers-reduced-motion: reduce) {
  .capa-linha animate { display: none; }
}

/* ===================== refino geral =====================
   Escala tipográfica com passo fixo, em vez de tamanho escolhido a olho.
   É o que faz o conjunto parecer um sistema e não uma soma de telas. */
h2 { font-size: var(--t-tit); line-height: 1.25; letter-spacing: -0.015em; }
.ajuda { font-size: var(--t-base); line-height: 1.5; }

/* O toque tem que ter resposta imediata, senão o dedo repete e dispara duas vezes. */
.escolha, .botao, .oitavas button {
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.escolha:active { background: var(--veu); }

/* Foco visível de verdade: quem usa teclado ou leitor de tela precisa enxergar onde está. */
.escolha:focus-visible, .botao:focus-visible, .tecla:focus-visible, .oitavas button:focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 2px;
}

/* ===================== quem está treinando ===================== */
.quem {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 24px;
  font-size: var(--t-base);
  color: var(--brando);
}
.quem strong { color: var(--tinta); font-weight: 600; }
.quem-botao {
  margin-left: auto;
  padding: 4px 12px;
  font: inherit;
  font-size: var(--t-peq);
  color: var(--acao);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 999px;
  cursor: pointer;
}
.quem-botao:hover { border-color: var(--acao); background: var(--veu); }

.campo {
  width: 100%;
  padding: 16px;
  font: inherit;
  font-size: var(--t-med);
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 8px;
}
.campo:focus { outline: 2px solid var(--acao); outline-offset: 1px; }

/* ===================== caderno do coral ===================== */
#cd-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
#cd-tabela th {
  padding: 0 8px 8px 0;
  text-align: left;
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brando);
  border-bottom: 1px solid var(--linha);
}
#cd-tabela td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--linha); }
#cd-tabela td.fraco { color: var(--brando); font-size: var(--t-peq); }
#cd-vazio { margin: 16px 0 0; color: var(--brando); }

/* ===================== ajustar a marca ===================== */
.cor-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}
.cor-linha:last-child { border-bottom: 0; }
.cor-linha input[type="color"] {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 1px solid var(--linha);
  border-radius: 8px;
  cursor: pointer;
}
.cor-texto { flex: 1; min-width: 0; }   /* ⛔ sem min-width:0 o texto empurra a tela para fora */
.cor-nome { display: block; font-size: var(--t-base); }
.cor-papel { display: block; font-size: var(--t-mini); line-height: 1.4; color: var(--brando); }
.cor-hex {
  flex: none;
  width: 96px;
  padding: 10px 8px;
  font: inherit;
  font-size: var(--t-peq);
  text-align: center;
  color: var(--brando);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 8px;
}
.ajuda.pequena { margin: 12px 0 0; font-size: var(--t-mini); }

/* ===================== sirene ===================== */
.tela-desenho {
  display: block;
  width: 100%;
  height: 220px;
  margin: 16px 0;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--papel);
}

/* ===================== fileira de notas (modo sala) ===================== */
.fileira { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; }
.fileira button {
  flex: 1 1 auto;
  min-width: 56px;
  padding: 14px 4px;
  font: inherit;
  font-size: var(--t-peq);
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 8px;
  cursor: pointer;
}
.fileira button.on { color: var(--fundo); background: var(--acao); border-color: var(--acao); }

/* ===================== o comeco (primeira vez) =====================
   ⚠️ Chamava-se .trilha e colidia com uma .trilha que já existia no protótipo,
   cuja regra `.trilha span` empurrava o título para 18px. Nome de classe é
   espaço compartilhado: ⛔ não reaproveitar palavra genérica. */
.comeco { margin: 0 0 32px; }
.comeco[hidden] { display: none; }
.comeco ol { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: passo; }
.comeco li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linha);
  cursor: pointer;
}
.comeco li::before {
  counter-increment: passo;
  content: counter(passo);
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: var(--t-peq);
  color: var(--brando);
  border: 1px solid var(--linha);
  border-radius: 999px;
}
.comeco li.feito { color: var(--brando); }
.comeco li.feito::before {
  content: '';
  color: var(--fundo);
  background: var(--acao);
  border-color: var(--acao);
}
.comeco .passo-nome { flex: 1; min-width: 0; }
.comeco .passo-nota { display: block; font-size: var(--t-peq); color: var(--brando); }


/* ══════════════════════════════════════════════════════════════════════
   O SISTEMA
   Escrito depois de tudo, de propósito: esta seção NORMALIZA o que foi
   crescendo solto. Daqui para a frente, valor novo sai daqui — ⛔ número
   solto em px no meio do arquivo é dívida que aparece na tela.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── TIPOGRAFIA ──────────────────────────────────────────────────────
     Escala geométrica de razão 1.2 (terça menor), ancorada em 17px. Sete
     degraus e nada entre eles. É o que faz telas diferentes parecerem o
     mesmo produto. */
  --t-nano: 12px;   /* rodapé legal, o que quase não se lê */
  --t-mini: 14px;   /* rótulo de grupo, dado secundário */
  --t-peq:  15px;   /* apoio, nota abaixo do título */
  --t-base: 17px;   /* o texto corrido do app */
  --t-med:  20px;   /* entrada de tela, campo */
  --t-gr:   24px;   /* destaque dentro do painel */
  --t-tit:  29px;   /* título de tela */

  /* ── ESPAÇO ──────────────────────────────────────────────────────────
     Múltiplos de 4, com nome. O nome importa: "--e6" força a escolher um
     degrau; "24px" convida a inventar 22 na próxima linha. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px;

  /* ── CANTO ───────────────────────────────────────────────────────────
     Três raios, um por família de elemento. Misturar quatro raios na
     mesma tela é o erro que mais entrega trabalho amador. */
  --r-peq: 6px;    /* teclas, marcas pequenas */
  --r-med: 10px;   /* painéis, campos, botões */
  --r-pil: 999px;  /* só o que é etiqueta */
}

/* ── aplicação da escala ─────────────────────────────────────────────── */
h2                       { font-size: var(--t-tit); margin-bottom: var(--e3); }
.ajuda                   { font-size: var(--t-base); margin-bottom: var(--e6); }
.ajuda.pequena           { font-size: var(--t-peq); }
.sob                     { font-size: var(--t-peq); }
.rodape                  { font-size: var(--t-mini); }
.grupo-nome, .grupo-nota { font-size: var(--t-mini); }
.escolha .titulo         { font-size: var(--t-base); }
.escolha .nota           { font-size: var(--t-peq); }
.veredito                { font-size: var(--t-base); }
.faixa-voz               { font-size: var(--t-gr); }
.campo                   { font-size: var(--t-med); }
.quem                    { font-size: var(--t-base); }
.quem-botao              { font-size: var(--t-peq); }
.cor-nome                { font-size: var(--t-base); }
.cor-papel               { font-size: var(--t-mini); }
.cor-hex, .oitavas button, .fileira button { font-size: var(--t-peq); }
.comeco .passo-nota      { font-size: var(--t-peq); }

/* ── aplicação do ritmo vertical ─────────────────────────────────────── */
.painel  { padding: var(--e5); margin-bottom: var(--e6); }
.capa    { margin-bottom: var(--e10); padding: var(--e8) 0 var(--e6); }
.grupo   { margin: var(--e8) 0 var(--e3); padding-bottom: var(--e2); }
.comeco  { margin-bottom: var(--e8); }
.quem    { margin-bottom: var(--e6); }
.botao   { margin-bottom: var(--e3); }

/* ── aplicação do canto ──────────────────────────────────────────────── */
.painel, .campo, .botao, .teclado, .fita, .tela-desenho,
.oitavas button, .fileira button, .cor-linha input[type="color"] { border-radius: var(--r-med); }
.teclado .tecla.preta, .fita .barra { border-radius: var(--r-peq); }
.quem-botao, .selo { border-radius: var(--r-pil); }

/* ── o detalhe que um olho treinado procura ──────────────────────────
   Números tabulares: sem isto, "440.0 Hz" e "523.3 Hz" dançam na tela
   porque o 1 é mais estreito que o 8. Em painel que atualiza dez vezes
   por segundo, isso vira tremor. */
.gigante, .enorme, .sob, .faixa-voz, .cor-hex, #cd-tabela, #rel-tabela {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Título com entrelinha curta e letra levemente fechada: texto grande
   pede menos espaço entre letras, não mais. */
h2, .gigante, .enorme { letter-spacing: -0.02em; }
h2 { line-height: 1.2; }

/* A referência do coral tem peso próprio na fileira do modo sala. */
.fileira button.referencia { border-color: var(--acao); color: var(--acao); }
.fileira button.referencia.on { color: var(--fundo); }

/* ⛔ Elemento de formulário NÃO herda fonte por padrão: sem esta linha o
   navegador enfia 13,3px do sistema no meio da escala e ninguém acha de onde
   veio. Foi exatamente o que apareceu na medição da tela inicial. */
button, input, select, textarea { font: inherit; }

/* Fileira que rola de lado quando não cabe: com cinco medidas, quebrar em
   duas linhas empurraria o gráfico para fora da primeira tela do celular. */
.fileira.rolante {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: var(--e1);
  scrollbar-width: thin;
}
.fileira.rolante button { flex: 0 0 auto; }

/* ===================== nuvem do professor ===================== */
#nv-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
#nv-tabela th {
  padding: 0 var(--e2) var(--e2) 0;
  text-align: left;
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brando);
  border-bottom: 1px solid var(--linha);
}
#nv-tabela td { padding: var(--e3) var(--e2) var(--e3) 0; border-bottom: 1px solid var(--linha); }
#nv-tabela td.fraco { color: var(--brando); font-size: var(--t-peq); }
#nv-vazio { margin: var(--e4) 0 0; color: var(--brando); }
#nv-porta[hidden], #nv-dentro[hidden] { display: none; }
.rodape .quem-botao + .quem-botao { margin-left: var(--e2); }


/* ══════════════════════════════════════════════════════════════════════
   O ACABAMENTO
   A crítica era justa: estava organizado, não estava bonito. Faltavam três
   coisas — letra com voz própria, um momento de contraste, e respiro.
   ⚠️ Tudo aqui é PROVISÓRIO até o Antônio decidir a marca. As cinco cores
   continuam editáveis por ele em "Ajustar a marca".
   ══════════════════════════════════════════════════════════════════════ */

/* ── as letras ────────────────────────────────────────────────────────
   Fraunces (serifa variável) só no que é grande: título, marca, número.
   Inter no que se lê corrido. Duas famílias com papéis separados é sistema;
   duas famílias no mesmo papel é bagunça — a regra do DESIGN.md continua de pé.
   ⛔ Arquivos LOCAIS, nunca a CDN do Google: o app tem que abrir sem internet
   no ensaio, e chamar fora também entrega quem usou o app para um terceiro. */
@font-face {
  font-family: 'Fraunces';
  src: url('fontes/fraunces.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;      /* mostra na fonte do sistema até a nossa chegar */
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('fontes/inter.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

:root {
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Paleta com mais corpo. O verde continua sendo o "no tom" — só o preto e o
     creme ganharam temperatura, porque cinza puro com quase-branco é o que
     fazia tudo parecer papel de cartório. */
  --tinta: #16211D;
  --fundo: #F4F1EA;
  --papel: #FFFDF8;
  --alerta: #B4471F;
}

h2, .gigante, .enorme, .nome, .faixa-voz, .capa-frase em, .grupo-nome {
  font-family: var(--fonte-titulo);
  font-optical-sizing: auto;
}
h2 { font-weight: 600; letter-spacing: -0.01em; }
.nome { font-weight: 600; letter-spacing: 0.02em; }
.grupo-nome { font-weight: 600; letter-spacing: 0.1em; }
.gigante, .enorme, .faixa-voz { font-weight: 500; }

/* ── o momento de contraste ───────────────────────────────────────────
   A tela inteira era clara do começo ao fim, sem nenhuma pausa. A capa vira
   um bloco escuro: o conceito ganha palco e o olho tem onde descansar. */
.capa {
  margin: 0 calc(var(--e6) * -1) var(--e10);
  padding: var(--e10) var(--e6) var(--e8);
  color: var(--fundo);
  background: var(--tinta);
  border: 0;
  border-radius: 0 0 var(--e6) var(--e6);
}
.capa-linha { color: color-mix(in srgb, var(--fundo) 82%, var(--acao)); height: 72px; }
.capa-frase {
  margin-top: var(--e6);
  font-size: var(--t-med);
  color: color-mix(in srgb, var(--fundo) 62%, var(--tinta));
}
.capa-frase em {
  display: block;
  margin-top: var(--e1);
  font-size: var(--t-gr);
  color: var(--fundo);
}

/* O cabeçalho encosta na capa, então some a linha que os separava. */
.topo { border-bottom: 0; padding-bottom: var(--e4); }
.envolucro { padding-top: var(--e6); }

/* ── respiro ──────────────────────────────────────────────────────────
   Card de 12px de padding com 9 cards seguidos vira parede. */
.escolha { padding: var(--e5); gap: var(--e4); }
.escolha + .escolha { margin-top: var(--e2); }
.escolha .titulo { font-weight: 600; }
.grupo { margin-top: var(--e10); }

/* O primeiro cartão de cada grupo puxa a atenção, os outros seguem. Sem isso
   nove retângulos idênticos empilhados não têm por onde o olho entrar. */
.grupo + .escolha { border-color: color-mix(in srgb, var(--tinta) 30%, var(--fundo)); }
.grupo + .escolha .sinal { color: var(--acao); }

/* ── acabamento ───────────────────────────────────────────────────────  */
.botao { font-weight: 600; letter-spacing: 0.01em; }
.selo {
  font-family: var(--fonte);
  font-size: var(--t-nano);
  letter-spacing: 0.14em;
}
::selection { background: var(--acao); color: var(--fundo); }

/* A barra de rolagem do celular não pode brigar com o creme. */
html { scrollbar-color: color-mix(in srgb, var(--tinta) 25%, var(--fundo)) transparent; }