/* ===========================================================================
   MÁQUINA DE FRASES — ESTILO
   Identidade tirada do deck da Aula 02 do L21, pelos mesmos tokens que a
   plataforma da Aula 03 usa. A pessoa reconhece o sistema em meio segundo.

   REGRA ESTRUTURAL DO DECK: zero box-shadow em qualquer lugar. Profundidade
   vem de borda fina, régua dourada e cor.
   =========================================================================== */

@font-face{
  font-family:'Lora';
  src:url('../assets/fontes/lora.woff2') format('woff2-variations');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../assets/fontes/cormorant.woff2') format('woff2-variations');
  font-weight:300 700; font-style:normal; font-display:swap;
}
/* O itálico é real, não sintético: a tradução do deck é toda em Cormorant
   itálico, e itálico falso num serifado fica torto. */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../assets/fontes/cormorant-italico.woff2') format('woff2-variations');
  font-weight:300 700; font-style:italic; font-display:swap;
}

:root{
  /* Superfícies */
  --bg:#f7f5f5;
  --superficie:#f3f2f2;
  --creme:#fff3e4;
  --linha:#eae9e9;

  /* Tinta */
  --tinta:#201f1d;
  --corpo:#605d5d;
  --suave:#6b6767;
  --apagado:#9b9797;

  /* Dourado */
  --ouro:#a06f24;
  --ouro-texto:#7d5411;
  --ouro-regua:#b68235;
  --ouro-claro:#dbaf70;
  --ouro-solido:#8c601b;
  --ouro-solido-hover:#6f4c14;
  --sobre-ouro:#fff;

  /* Código de cor pedagógico, o mesmo da aula ao vivo.
     O azul do infinitivo veio do slide 14 da Aula 02, onde o segundo verbo
     ganha bloco azul e a legenda "Infinitivo". Ele é a única cor que o deck
     reserva para uma função só, e por isso vale ouro aqui. */
  --vinho:#7a2f3a;
  --petroleo:#3a3a3a;
  --azul:#4472c4;
  /* Tipo branco em cima dos blocos cheios, como nos slides. */
  --sobre-bloco:#f7f5f5;
  /* O negador é o único tom novo. Vem do deck (#9e252b) e entra só como
     borda e texto: vermelho cheio leria como erro, e aqui não existe erro. */
  --negador:#9e252b;

  /* Tipografia — DUAS serifadas, e nenhuma sans em lugar nenhum, inclusive nos
     botões e nos rótulos. É o que o GIV faz, e é metade do motivo de ele
     parecer editorial enquanto isto aqui parecia protótipo. O `--ui` continua
     existindo pelo nome, mas aponta para a Lora. */
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --alemao:'Lora',Georgia,'Times New Roman',serif;
  --ui:'Lora',Georgia,'Times New Roman',serif;

  /* Métrica */
  --raio:4px;
  --raio-g:10px;
  --margem:clamp(1.25rem,5vw,3.5rem);
  /* 74rem era largura de painel, não de leitura: virava uma coluna solta de
     tipo gigante no meio de um monitor. 49rem é a medida do GIV, calibrada
     para a frase alemã mais longa caber sem hifenizar composto. */
  --leitura:49rem;
  --sidebar:19rem;
  --prosa:38rem;
  --veu:rgb(32 31 29 / 35%);
  --transicao:160ms cubic-bezier(.22,.61,.36,1);

  /* Certo e errado. Entram só no treino e no resultado dos desafios, onde a
     pessoa precisa saber na hora se acertou — em todo o resto continua valendo
     que aqui não existe erro, e nenhuma peça fica vermelha por existir. */
  --certo:#1f6f43;
  --errado:#9e252b;

  /* Movimento pedagógico. A viagem da peça é a informação, por isso ela é
     longa de propósito: o olho precisa acompanhar. */
  --voo:480ms;
  --voo-easing:cubic-bezier(.34,.8,.3,1);
}

/* =========================================================================
   MODO ESCURO

   Aqui estava o pior defeito de leitura da ferramenta. No claro os blocos da
   frase são fundos ESCUROS com tipo branco. No escuro, as mesmas cores
   clareiam para se destacar do fundo preto, mas o tipo continuava branco:
   branco sobre dourado claro dá 1,9:1, que é literalmente ilegível.

   A correção é inverter junto: no escuro o tipo em cima do bloco é o
   quase-preto do fundo, não o branco. Todos os pares abaixo foram medidos e
   ficam acima de 6:1 nos dois sentidos, porque cada cor é usada das duas
   formas: como fundo de bloco no alemão e como tinta na tradução.
   ========================================================================= */

@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']){
    --bg:#16130f; --superficie:#1e1a15; --creme:#3a2e1b; --linha:#2c261e;
    --tinta:#f2efea; --corpo:#c6bdb1; --suave:#a8a094; --apagado:#8a8078;
    --ouro:#dbaf70; --ouro-texto:#e3be85; --ouro-regua:#8c6d3c; --ouro-claro:#dbaf70;
    --ouro-solido:#dbaf70; --ouro-solido-hover:#ecc999; --sobre-ouro:#16130f;
    --vinho:#d98a96; --petroleo:#a8a49f; --azul:#8fb0ea; --negador:#e08b95;
    --sobre-bloco:#16130f;
  }
}
:root[data-tema='escuro']{
  --bg:#16130f; --superficie:#1e1a15; --creme:#3a2e1b; --linha:#2c261e;
  --tinta:#f2efea; --corpo:#c6bdb1; --suave:#a8a094; --apagado:#8a8078;
  --ouro:#dbaf70; --ouro-texto:#e3be85; --ouro-regua:#8c6d3c; --ouro-claro:#dbaf70;
  --ouro-solido:#dbaf70; --ouro-solido-hover:#ecc999; --sobre-ouro:#16130f;
  --vinho:#d98a96; --petroleo:#a8a49f; --azul:#8fb0ea; --negador:#e08b95;
  --sobre-bloco:#16130f;
  --veu:rgb(0 0 0 / 60%);
  --certo:#6fc493; --errado:#e08b95;
}

/* ------------------------------------------------------------------ reset */

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

/* A raiz fica em 16px e PONTO. Antes ela ia até 20px com a largura da tela, e
   como quase todo tamanho deste arquivo está em rem, isso esticava a interface
   inteira em 25% no desktop: a frase alemã chegava a 62px e o título a 64px.
   O GIV não tem essa regra, e é por isso que ele cabe num notebook. */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tinta);
  font-family:var(--alemao);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}

/* Alvo de toque mínimo de 44px em tudo que se toca. */
button,[role='radio'],[role='tab']{min-height:44px}

/* --------------------------------------------------------------- estrutura */

/* A CASCA. No celular: barra de topo de 3,5rem e menu em gaveta. A partir de
   64rem o MESMO menu vira barra lateral fixa e a barra de topo some. Uma
   marcação, dois comportamentos, nenhuma duplicação. */
.app{min-height:100vh;min-height:100dvh}
.app[hidden]{display:none}
@media (min-width:64rem){
  .app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}
}
/* min-width:0 impede que um composto alemão comprido estoure a coluna. */
.coluna{min-width:0}

.barra-topo{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:.6rem;
  height:3.5rem;padding:0 .75rem;padding-top:env(safe-area-inset-top);
  background:var(--bg);border-bottom:1px solid var(--linha);
}
.barra-topo-logo{height:1.5rem;width:auto}
.barra-topo-tela{
  margin-left:auto;font-family:var(--ui);font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ouro-texto);
}
/* Alvo de 48px, mas puxado para trás para o ÍCONE alinhar com a margem. */
.hamburguer{
  width:3rem;height:3rem;display:grid;place-items:center;
  margin-left:-.35rem;border-radius:var(--raio);color:var(--corpo);
}
.hamburguer:hover{background:var(--superficie)}

.menu{
  position:fixed;inset:0 auto 0 0;z-index:50;
  width:min(84vw,20rem);
  display:flex;flex-direction:column;
  background:var(--bg);border-right:1px solid var(--linha);
  transform:translateX(-100%);visibility:hidden;
  transition:transform 220ms cubic-bezier(.22,.61,.36,1),visibility 0s 220ms;
}
.menu[data-aberto]{transform:none;visibility:visible;transition-delay:0s}
.veu{
  position:fixed;inset:0;z-index:40;background:var(--veu);
  opacity:0;visibility:hidden;transition:opacity 220ms,visibility 0s 220ms;
}
.veu[data-aberto]{opacity:1;visibility:visible;transition-delay:0s}

@media (min-width:64rem){
  .barra-topo{display:none}
  .menu{
    position:sticky;inset:auto;top:0;height:100dvh;width:auto;
    transform:none;visibility:visible;transition:none;
  }
  .veu{display:none}
}

/* Espaçamento apertado de propósito: são três itens e um rodapé, e cada corte
   aqui é pequeno, mas junto é o que faz a lista caber sem rolagem própria. */
.menu-topo{padding:1.25rem 1.5rem .9rem}
.menu-logo{width:10.5rem;height:auto;margin-bottom:.9rem}
.menu-nome{
  font-family:var(--display);font-size:1.25rem;font-weight:600;
  line-height:1.2;margin:.2rem 0 0;
}
.menu-lista{display:flex;flex-direction:column;gap:.15rem;padding:0 .75rem .75rem}

/* O alvo continua com 56px; quem encolhe é o respiro interno. */
.item{
  position:relative;display:grid;grid-template-columns:1.75rem 1fr;gap:.85rem;
  align-items:start;min-height:3.5rem;padding:.6rem .75rem;
  border-radius:var(--raio);text-align:left;
  transition:background var(--transicao);
}
.item:hover{background:var(--superficie)}
.item-num{
  font-family:var(--display);font-size:1.15rem;color:var(--ouro-regua);
  font-variant-numeric:tabular-nums;line-height:1.3;
}
.item-texto{min-width:0}
.item-titulo{
  display:block;font-family:var(--display);font-size:1.25rem;font-weight:600;
  line-height:1.2;
}
.item-sub{
  display:block;font-family:var(--ui);font-size:.8125rem;line-height:1.4;
  color:var(--suave);
}
/* Ativo: barra dourada de 2px e fundo creme. Sem pílula, sem sombra. */
.item[aria-selected='true']{background:var(--creme)}
.item[aria-selected='true']::before{
  content:'';position:absolute;inset:.5rem auto .5rem 0;
  width:2px;background:var(--ouro);
}
.item[aria-selected='true'] .item-num{color:var(--ouro-texto)}

.menu-rodape{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;padding:.6rem 1.15rem .6rem 1.5rem;
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha);
}
.menu-creditos{font-family:var(--ui);font-size:.75rem;color:var(--suave);line-height:1.35}
.botao-tema{
  width:3rem;height:3rem;flex:0 0 auto;display:grid;place-items:center;
  margin-right:-.35rem;border-radius:var(--raio);color:var(--corpo);
}
.botao-tema:hover{background:var(--superficie)}

.palcos{
  padding:0 var(--margem) calc(4rem + env(safe-area-inset-bottom));
}
.tela{display:none;max-width:var(--leitura);margin:0 auto}
.tela.ativa{display:block}
/* A tela recebe foco na troca por teclado, mas ela não é um controle: o anel
   ficaria em volta da página inteira. */
.tela:focus{outline:none}
/* Apertado de propósito, igual ao menu do GIV: cada corte aqui é pequeno, mas
   junto com os das faixas é o que faz o Construir caber numa tela de notebook
   em vez de pedir rolagem antes da primeira peça. */
.tela-cabeca{padding:clamp(1.1rem,3vw,1.6rem) 0 0;margin-bottom:1rem}
.tela-cabeca .regua{margin:.65rem 0 0}
.tela-cabeca .titulo{margin-top:.15rem}

/* --------------------------------------------------------- assinatura --- */

/* A assinatura: sobrancelha → título com uma palavra dourada → régua de 54×1px.
   O tracking de .28em sobra no fim da última letra, então ele é descontado. */
.sobrancelha{
  font-family:var(--ui);text-transform:uppercase;letter-spacing:.28em;
  font-size:.75rem;font-weight:600;color:var(--ouro-texto);
  margin-right:-.28em;
}
/* TETO DE 38px. O tamanho anterior, clamp(2rem,7vw,3.2rem), dava 64px e era
   exatamente a classe que o GIV declara e nunca usa. A hierarquia aqui vem de
   caixa alta, tracking, cor e entrelinha — não de tamanho. */
.titulo{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.65rem,5.5vw,2.4rem);line-height:1.06;letter-spacing:.01em;
  margin:.5rem 0 0;
}
.titulo em{font-style:italic;color:var(--ouro-texto)}
.titulo-tela{font-size:clamp(1.35rem,4.5vw,1.75rem)}
.regua{width:54px;height:1px;background:var(--ouro);margin:1.1rem 0;border:0}

/* ================================================================= BOTÕES */

/* Um só jeito de fazer botão, em três pesos. Tudo em Lora, caixa alta e
   tracking largo — nada de sans. A altura é fixa; quem varia é o preenchimento. */
.botao{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3.25rem;padding:0 1.75rem;
  font-family:var(--ui);font-size:.8125rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
  background:var(--ouro-solido);color:var(--sobre-ouro);
  border:0;border-radius:var(--raio);
  transition:background var(--transicao);
}
.botao:hover{background:var(--ouro-solido-hover)}
.botao-largo{width:100%}
.botao-vazado{
  background:transparent;color:var(--ouro-texto);
  border:1px solid var(--ouro-regua);
}
.botao-vazado:hover{background:var(--creme)}

/* Chip: menor que o botão principal, para a página não virar pilha de CTA. */
.acao{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2.9rem;padding:0 .9rem;
  font-family:var(--ui);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--ouro-texto);background:transparent;
  border:1px solid var(--ouro-regua);border-radius:var(--raio);
  transition:background var(--transicao),border-color var(--transicao);
}
.acao:hover{background:var(--creme)}
.acao[aria-pressed='true']{background:var(--creme);border-color:var(--ouro)}
.acao[disabled]{opacity:.4;cursor:not-allowed}
/* Resolveu: o Próximo vira o caminho evidente para a frente, sem precisar de
   um segundo botão grande em outro canto da tela. */
.acao-destaque{
  background:var(--ouro-solido);color:var(--sobre-ouro);border-color:var(--ouro-solido);
}
.acao-destaque:hover{background:var(--ouro-solido-hover);border-color:var(--ouro-solido-hover)}
.acao-destaque::after{content:'  →';letter-spacing:.05em}

/* ================================================================= PORTÃO */

/* Grid centrado com min-height, e NÃO position:fixed: com o teclado do iOS
   aberto, fixed corta o campo que está sendo digitado. */
.portao{
  min-height:100vh;min-height:100dvh;
  display:grid;place-items:center;
  padding:calc(2rem + env(safe-area-inset-top)) var(--margem)
          calc(2rem + env(safe-area-inset-bottom));
}
.portao[hidden]{display:none}
.portao-caixa{
  max-width:27rem;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;
}
.portao-logo{width:clamp(11rem,46vw,14rem);height:auto}
.portao-form{
  display:flex;flex-direction:column;align-items:stretch;
  gap:1.15rem;width:100%;margin-top:.25rem;
}
.corpo{font-size:1.0625rem;line-height:1.7;color:var(--corpo);margin:0}
.lgpd{font-family:var(--ui);font-size:.75rem;line-height:1.5;color:var(--suave);margin:0}

/* Aperta SÓ o espaçamento em tela baixa; tamanho de letra e alvo de toque
   ficam iguais, para o portão caber sem rolagem num celular deitado. */
@media (max-height:900px){
  .portao-caixa{gap:1.1rem}
  .portao-form{gap:.9rem;margin-top:0}
  .portao-logo{margin-bottom:0}
}

/* Duas barras douradas nos cantos opostos. É a moldura do deck. */
.barra-canto{
  position:fixed;width:min(24vw,15rem);height:8px;background:var(--ouro);
  pointer-events:none;z-index:1;
}
.barra-canto--topo{top:0;left:0}
.barra-canto--base{bottom:0;right:0}

/* Campo é sublinhado, não caixa. */
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo-rotulo{
  font-family:var(--ui);font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--ouro-texto);
}
.campo-entrada{
  width:100%;min-height:3rem;padding:.55rem .15rem;
  font-family:var(--ui);font-size:1rem;color:var(--tinta);
  background:transparent;border:0;border-bottom:1px solid var(--ouro-regua);
  border-radius:0;scroll-margin-block:6rem;
}
.campo-entrada::placeholder{color:var(--apagado)}
.campo-entrada:focus{outline:none;border-bottom-width:2px;border-bottom-color:var(--ouro)}
.campo-erro{
  font-family:var(--ui);font-size:.8125rem;line-height:1.4;
  color:var(--negador);margin:0;
}
.campo--erro .campo-entrada{border-bottom-color:var(--negador)}

.campo-linha{display:grid;grid-template-columns:5.75rem minmax(0,1fr);gap:.6rem;align-items:end}
.campo-pais{position:relative;display:flex;align-items:flex-end}
/* O select nativo fica invisível por cima do visor, para o popup ser o do
   sistema e o desenho ser o nosso. */
.campo-ddi{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;font-size:1rem;
}
.campo-pais-visor{
  display:flex;align-items:center;gap:.3rem;width:100%;min-height:3rem;
  padding:.55rem .15rem;font-family:var(--ui);font-size:1rem;
  border-bottom:1px solid var(--ouro-regua);color:var(--tinta);
}
.campo-pais-visor::after{
  content:'';margin-left:auto;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--ouro-regua);
}
.campo-ddi:focus + .campo-pais-visor{border-bottom-width:2px;border-bottom-color:var(--ouro)}

/* ====================================================== TELA 1: CONSTRUTOR */

/* O palco NÃO é mais grudado no topo em tela grande.

   Ele era, e virou o pior defeito da ferramenta: 570px fixos travados, que num
   notebook de 760px de altura são 75% da tela e deixavam 190px para os bancos.
   A ideia original — a frase nunca sai de vista enquanto você rola as peças —
   só faz sentido quando a página rola. Com a escala corrigida e a coluna de
   49rem, no desktop tudo cabe junto e não há o que grudar.

   No celular ele volta a grudar, mas atrás da barra de topo de 3,5rem, que é
   medida e não escrita na mão. */
.palco{
  background:var(--bg);
  padding:.2rem 0 .8rem;border-bottom:1px solid var(--linha);
}
@media (max-width:63.99rem){
  .palco{
    position:sticky;top:calc(3.5rem + env(safe-area-inset-top));z-index:20;
    padding-top:.6rem;
  }
}
/* Tela baixa: aperta SÓ o espaçamento do palco. Tamanho de letra e alvo de
   toque ficam iguais — é o que sobra da tela para trabalhar que aumenta. */
@media (max-height:760px) and (max-width:63.99rem){
  .palco{padding:.35rem 0 .5rem}
  .trilha{padding-top:.95rem;margin-bottom:.35rem}
  .frases{padding-top:1.15rem}
  .legenda{min-height:2.6em;margin-top:.35rem}
  .estados{gap:.35rem;margin-top:.4rem}
  .tela-cabeca{padding-top:.9rem;margin-bottom:.7rem}
}
.palco .instrucao{font-size:.875rem;margin:.7rem 0 0}
body.ja-viu-estados .palco .instrucao{display:none}
.palco .sub-pergunta{margin:.45rem 0 0}

/* -------- trilha de posições -------- */

/* A TRILHA é a linha de estrutura dos slides ("Sujeito + Verbo + Complemento"),
   com as caixas contornadas na cor da função. O padding de cima é onde o
   rótulo "a casa do verbo" fica pendurado. */
.trilha{display:flex;gap:.5rem;margin-bottom:.5rem;align-items:stretch;padding-top:1.15rem}
.slot{
  flex:0 0 auto;text-align:center;position:relative;
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:.3rem .2rem .25rem;overflow:hidden;
  transition:border-color var(--transicao);
}
.slot-papel{
  display:block;font-family:var(--ui);font-size:.6rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.2;
  color:var(--corpo);white-space:nowrap;
}
.slot-numero{
  font-family:var(--ui);font-size:.55rem;letter-spacing:.12em;
  color:var(--apagado);display:block;margin-top:.1rem;
}
.slot[data-papel='sujeito']    .slot-papel{color:var(--vinho)}
.slot[data-papel='verbo']      .slot-papel,
.slot[data-papel='modal']      .slot-papel{color:var(--ouro-texto)}
.slot[data-papel='complemento'].slot-papel,
.slot[data-papel='complemento'] .slot-papel{color:var(--petroleo)}
.slot[data-papel='infinitivo'] .slot-papel{color:var(--azul)}
.slot[data-papel='negador']    .slot-papel{color:var(--negador)}

/* A casa do verbo fica marcada sempre, inclusive quando o verbo saiu dela.
   É a casa vazia que conta a história na pergunta Ja/Nein. */
.slot.casa{border-color:var(--ouro-regua);background:var(--creme)}
.slot.casa.vazia{border-style:dashed;background:transparent}
/* O rótulo sai do fluxo para não empurrar a largura da casa: a casa precisa
   ter exatamente a largura da palavra que está nela, senão a trilha desalinha
   da frase e a coluna deixa de ser coluna. */
.slot-rotulo{
  position:absolute;left:50%;transform:translateX(-50%);bottom:100%;
  margin-bottom:.2rem;
  font-family:var(--ui);font-size:.6rem;font-weight:600;letter-spacing:.06em;
  color:var(--ouro-texto);text-transform:lowercase;
  white-space:nowrap;pointer-events:none;
}
.slot.casa.vazia{border-bottom-style:dashed}

/* -------- as duas linhas da frase -------- */

/* O padding de cima é o espaço onde o arco do abraço é desenhado. */
.frases{position:relative;padding-top:1.6rem}
.linha{display:flex;gap:.5rem;align-items:stretch;flex-wrap:nowrap}
.linha-de{
  font-family:var(--alemao);
  font-size:clamp(1.3rem,5.8vw,2.3rem);line-height:1.15;font-weight:600;
  min-height:1.9em;align-items:center;
}
/* A tradução é itálica e COLORIDA IGUAL AOS BLOCOS, exatamente como nos
   slides. É essa cor repetida que faz a pessoa entender qual palavra é qual
   antes mesmo de seguir a linha com o olho: a linha vira confirmação, não a
   única pista. Foi o que tirou a confusão do cruzamento. */
.linha-pt{
  font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(1.05rem,4.4vw,1.6rem);line-height:1.25;
  min-height:1.4em;align-items:baseline;
}

/* No deck as peças da frase NÃO são texto colorido: são blocos cheios com o
   tipo em branco. É isso que dá o peso e a leitura à distância, e é o que
   estava faltando aqui. O bloco é a peça, não a palavra. */
.linha-de .bloco{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:.16em .42em .2em;border-radius:5px;
  color:var(--sobre-bloco);background:var(--petroleo);
  transition:background var(--transicao);
}
.linha-de .bloco[data-papel='sujeito']{background:var(--vinho)}
.linha-de .bloco[data-papel='verbo'],
.linha-de .bloco[data-papel='modal']{background:var(--ouro)}
.linha-de .bloco[data-papel='complemento']{background:var(--petroleo)}
.linha-de .bloco[data-papel='infinitivo']{background:var(--azul)}
.linha-de .bloco[data-papel='negador']{background:var(--negador)}
.linha-de .bloco[data-papel='wfrage']{background:var(--ouro-solido)}

/* Na tradução a cor volta como TINTA, não como fundo: dois blocos cheios
   empilhados brigariam entre si, e quem tem que pesar mais é o alemão. */
.linha-pt .bloco{display:inline-block;white-space:nowrap;color:var(--petroleo)}
.linha-pt .bloco[data-papel='sujeito']{color:var(--vinho)}
.linha-pt .bloco[data-papel='verbo'],
.linha-pt .bloco[data-papel='modal']{color:var(--ouro-texto)}
.linha-pt .bloco[data-papel='infinitivo']{color:var(--azul)}
.linha-pt .bloco[data-papel='negador']{color:var(--negador)}
.linha-pt .bloco[data-papel='wfrage']{color:var(--ouro-texto)}

.pontuacao{color:var(--corpo);align-self:center;font-weight:600}

/* O rastro que fica na cor do verbo depois que ele pousa. Não usa currentColor
   porque dentro do bloco cheio a tinta agora é branca. */
.bloco.rastro::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--ouro);opacity:.7;
  animation:apagar 300ms 180ms forwards;
}
.bloco.rastro{position:relative}
@keyframes apagar{to{opacity:0}}

/* O arco do abraço dos dois verbos. */
.arco{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:2}
.arco path{
  fill:none;stroke:var(--ouro);stroke-width:1.6;stroke-linecap:round;opacity:.85;
}
.arco.tracando path{animation:tracar 620ms var(--voo-easing) forwards}
@keyframes tracar{from{stroke-dashoffset:var(--comprimento)}to{stroke-dashoffset:0}}

.legenda{
  font-family:var(--ui);font-size:.8125rem;line-height:1.45;color:var(--corpo);
  margin:.45rem 0 0;min-height:2.9em;
}
.legenda strong{color:var(--ouro-texto);font-weight:600}

/* -------- botões de estado -------- */

/* Afirmativa, Pergunta e Negativa são a MESMA frase em três formas, então
   moram grudados num seletor só e só um acende por vez. Dois Verbos é outra
   coisa, é uma camada que se soma a qualquer uma das três, então fica
   separado e com cara de interruptor. A forma dos controles conta essa
   diferença sem precisar de texto explicando. */
/* Largura cheia, e em duas fileiras no celular: o seletor das três formas
   ocupa a linha inteira, e o interruptor de camada fica embaixo, separado.
   Eles são o objeto principal da tela agora, não a moldura dela. */
.estados{display:flex;flex-direction:column;gap:.45rem;margin:.55rem 0 0;align-items:stretch}
.grupo-base{
  display:flex;width:100%;
  border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;background:var(--superficie);
}
/* Altura fixa em vez de respiro interno: o alvo continua com 46px e o bloco
   para de crescer com a entrelinha de 1,7 do corpo. São dois botões de altura
   dentro de uma faixa que fica grudada no topo do celular — cada pixel aqui
   sai da área onde a pessoa trabalha. */
.botao-estado{
  display:flex;align-items:center;justify-content:center;
  min-height:2.9rem;padding:0 .9rem;line-height:1.2;
  font-family:var(--ui);font-size:.875rem;font-weight:600;letter-spacing:.04em;
  color:var(--corpo);
  border:1px solid var(--linha);border-radius:var(--raio);
  transition:all var(--transicao);
}
.grupo-base .botao-estado{flex:1 1 0;min-width:0}
.botao-camada{align-self:flex-start;padding-inline:1.1rem}
.grupo-base .botao-estado{border:none;border-radius:0;background:transparent}
.grupo-base .botao-estado + .botao-estado{border-left:1px solid var(--linha)}

/* Selecionado no seletor: preenchido, não só tingido. Precisa ser óbvio à
   distância qual das três está no ar. */
.grupo-base .botao-estado[aria-checked='true']{
  background:var(--ouro-solido);color:var(--sobre-ouro);font-weight:600;
}
.botao-estado[aria-pressed='true']{
  background:var(--creme);color:var(--ouro-texto);
  border-color:var(--ouro-regua);font-weight:600;
}
.botao-estado:hover:not([disabled]){color:var(--tinta)}
.grupo-base .botao-estado[aria-checked='true']:hover{color:var(--sobre-ouro)}
.botao-estado[disabled]{opacity:.4;cursor:not-allowed}

/* O empurrão da primeira visita. Os quatro botões são a razão da ferramenta
   existir e não convidavam a ser apertados: eram a coisa mais discreta da tela.
   O anel pisca três vezes e some no primeiro toque, para sempre. */
@keyframes convidar{
  0%,100%{outline-color:transparent}
  50%{outline-color:var(--ouro-regua)}
}
.estados.convite .grupo-base{
  outline:2px solid transparent;outline-offset:3px;
  animation:convidar 1800ms ease-in-out 3;
}

/* O interruptor ganha um sinal de mais, porque ele SOMA à forma escolhida. */
.botao-camada::before{
  content:'+';margin-right:.4rem;color:var(--ouro-regua);font-weight:700;
}
.botao-estado[aria-pressed='true'].botao-camada::before{color:var(--ouro-texto)}

.sub-pergunta{display:flex;gap:.35rem;flex-wrap:wrap;margin:.25rem 0 .75rem}
.chip-w{
  font-family:var(--ui);font-size:.75rem;padding:.45rem .7rem;
  border:1px solid var(--linha);border-radius:999px;color:var(--corpo);
  min-height:38px;
}
.chip-w[aria-checked='true']{background:var(--creme);color:var(--ouro-texto);border-color:var(--ouro-regua)}
.chip-w[disabled]{opacity:.35;cursor:not-allowed}

/* -------- os três nãos -------- */

/* Os três nãos eram um cartão cinza de raio 10px num produto onde todo o resto
   tem raio 4px e nenhuma superfície é preenchida: parecia recortado de outro
   aplicativo. O cartão saiu. Agora é uma faixa como as outras, e os negadores
   usam a mesma forma das peças.

   Eles continuam SEM preenchimento, e isso não é descuido: vermelho cheio leria
   como erro, e nesta ferramenta não existe erro. O negador é a variante vazia
   do sistema de blocos — mesma forma, contorno em vez de fundo. */
.negadores{margin:1rem 0 .4rem}
.negadores-titulo{
  font-family:var(--ui);font-size:.7rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--negador);margin-bottom:.45rem;
}
.negadores-lista{display:flex;gap:.5rem;flex-wrap:wrap}
.negador{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  padding:0;text-align:left;background:none;border:none;
}
.negador .peca-bloco{
  background:transparent;font-size:1.1rem;
  transition:color var(--transicao),border-color var(--transicao),
             background var(--transicao);
}
/* O QUE ENCAIXA nesta frase: cor cheia, fundo creme, anel. O que não encaixa
   perde a cor e vira contorno cinza. Antes os três eram idênticos e dava para
   achar que qualquer um servia. Os dois que não encaixam continuam clicáveis,
   porque tocar neles é o que explica a diferença. */
.negador.cabe .peca-bloco{
  color:var(--negador);border-color:var(--negador);background:var(--creme);
}
.negador.cabe small{color:var(--negador)}
.negador.nao-cabe .peca-bloco{color:var(--suave);border-color:var(--linha)}
.negador.nao-cabe small{color:var(--apagado)}
.negador.nao-cabe:hover .peca-bloco{color:var(--corpo);border-color:var(--ouro-regua)}
.negador small{
  display:block;font-family:var(--ui);font-size:.66rem;font-weight:400;
  letter-spacing:.04em;color:var(--apagado);padding-left:.15rem;
}
.negador[aria-pressed='true'] .peca-bloco{
  outline:2px solid var(--negador);outline-offset:2px;
}
/* "Fora" é o Nein, que responde a frase inteira e nunca entra dentro dela. */
.negador.fora .peca-bloco{border-style:dashed}
.negador-explica{
  font-family:var(--ui);font-size:.82rem;line-height:1.5;
  color:var(--corpo);margin-top:.55rem;min-height:1.2em;
}
.negador-explica strong{color:var(--tinta)}

/* -------- bancos de peças -------- */

/* Uma linha curta dizendo o que fazer, na tinta cheia. Sem isso a tela abria
   com quatro botões e quatro bancos e ninguém sabia por onde começar. */
.instrucao{
  font-family:var(--ui);font-size:.875rem;line-height:1.5;color:var(--corpo);
  margin:.8rem 0 .2rem;
}
.instrucao strong{color:var(--tinta);font-weight:600}
.instrucao-bancos{
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  color:var(--suave);margin:1rem 0 .1rem;padding-top:.85rem;
  border-top:1px solid var(--linha);
}

.faixa{margin:.75rem 0;position:relative}
.faixa-titulo{
  font-family:var(--ui);font-size:.6875rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;color:var(--ouro-texto);margin-bottom:.35rem;line-height:1.3;
}

/* A FITA. Antes cada banco era um flex-wrap, e trinta peças viravam um muro de
   quatro fileiras: o Construir tinha 2,1 telas de rolagem e o banco de
   complementos, que é o que mais se troca, nascia abaixo da dobra. Agora cada
   categoria é UMA linha que rola de lado. Nada fica escondido, e a página
   inteira encurta porque a altura de cada banco passa a ser fixa. */
.pecas{
  display:flex;gap:.45rem;align-items:flex-start;
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  padding:.15rem .1rem .5rem;margin:0 -.1rem;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  /* A rolagem lateral não pode virar rolagem da página no meio de um arrasto. */
  overscroll-behavior-x:contain;
}
.pecas > *{flex:0 0 auto;scroll-snap-align:start}

/* Quando a fita tem mais do que cabe, a borda direita desmancha. É o único
   jeito honesto de dizer "tem mais para o lado" sem gastar altura, e some
   sozinho quando a fita cabe inteira (a classe é posta na medição). */
.pecas.tem-mais{
  mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent);
}

/* A PEÇA É O BLOCO. Este é o ponto: na frase a palavra é um bloco cheio com o
   tipo por cima, mas no banco ela era um retângulo branco de borda cinza. Era
   o mesmo objeto em duas linguagens visuais, e cinquenta retângulos iguais não
   se organizam sozinhos. Agora a peça no banco é idêntica ao bloco que ela
   vira na frase, então a cor organiza o banco e o caminho da peça até a frase
   dispensa explicação. */
.peca{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  text-align:left;padding:0;background:none;border:none;
  min-height:0;                      /* o alvo de 44px vem do bloco + tradução */
}
.peca-bloco{
  display:block;
  font-family:var(--alemao);font-size:1.15rem;font-weight:600;line-height:1.25;
  padding:.34em .5em .38em;border-radius:5px;
  background:var(--petroleo);color:var(--sobre-bloco);
  border:1px solid transparent;white-space:nowrap;
  transition:background var(--transicao),color var(--transicao),
             border-color var(--transicao);
}
.peca[data-papel='sujeito'] .peca-bloco{background:var(--vinho)}
/* Verbo e modal usam o ouro SÓLIDO, não o ouro da frase: na frase o bloco é
   tipo grande e o ouro claro passa, mas em corpo de peça o branco sobre
   #a06f24 fica em 4,1:1 e reprova. O sólido dá 5,2:1 com o mesmo matiz e a
   mesma forma, e no escuro os dois tokens são a mesma cor. */
.peca[data-papel='verbo'] .peca-bloco,
.peca[data-papel='modal'] .peca-bloco{background:var(--ouro-solido);color:var(--sobre-ouro)}
.peca[data-papel='complemento'] .peca-bloco{background:var(--petroleo)}
.peca[data-papel='infinitivo'] .peca-bloco{background:var(--azul)}

/* A tradução fica FORA do bloco, embaixo dele, como o rótulo dos slides. Dentro
   do bloco ela não alcançaria contraste de leitura neste corpo. */
.peca small{
  display:block;font-family:var(--display);font-style:italic;
  font-size:.95rem;font-weight:600;
  color:var(--corpo);padding-left:.15rem;
}

/* Escolhida: anel por fora do bloco. Anel, e não sombra, porque a regra de
   zero box-shadow do deck continua valendo. */
.peca[aria-pressed='true'] .peca-bloco{
  outline:2px solid var(--ouro-regua);outline-offset:2px;
}
.peca:hover:not(.indisponivel) .peca-bloco{border-color:var(--ouro-regua)}

/* Indisponível deixa de ser "apagada" e passa a ser VAZIA: o mesmo bloco, sem
   preenchimento. Lê como "esta ainda não entra", não como "esta quebrou", e
   para de formar muro cinza — o que separa os dois grupos agora é cheio contra
   vazio, que o olho resolve sem legenda. Continua visível e clicável, porque
   tocar nela explica por que ela não cabe. */
.peca.indisponivel{cursor:default}
.peca.indisponivel .peca-bloco{
  background:transparent;color:var(--suave);border-color:var(--linha);
  font-size:1rem;padding:.3em .45em .34em;
}
.peca.indisponivel small{font-size:.85rem;color:var(--suave)}

/* Na fita a divisória não pode mais quebrar a linha: ela vira uma coluna
   estreita de texto encostada numa régua vertical. */
.divisoria-banco{
  flex:0 0 auto;align-self:stretch;max-width:6.5rem;
  display:flex;align-items:center;
  font-family:var(--ui);font-size:.62rem;line-height:1.3;letter-spacing:.05em;
  color:var(--apagado);
  border-left:1px solid var(--linha);
  padding-left:.55rem;margin-left:.2rem;
}

.aviso{
  font-family:var(--ui);font-size:.78rem;color:var(--ouro-texto);
  background:var(--creme);border-radius:var(--raio);
  padding:.5rem .7rem;margin:.5rem 0;
}

/* ========================================================= TELA: DESAFIOS */

.desafio-n{
  font-family:var(--ui);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ouro-texto);font-weight:600;
  margin:0;line-height:1.3;
}
.desafio-pedido{
  font-family:var(--display);font-size:clamp(1.35rem,4.5vw,1.75rem);
  line-height:1.25;color:var(--tinta);margin:.35rem 0 1.25rem;
}
/* A frase montada usa os mesmos blocos cheios do construtor. */
.desafio-resultado{margin:1.1rem 0}
.desafio-resultado .de{
  display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;
  font-family:var(--alemao);font-size:clamp(1.1rem,4vw,1.4rem);font-weight:600;
}
.desafio-resultado .de .peca-montada{
  background:var(--petroleo);color:var(--sobre-bloco);
  padding:.14em .4em .18em;border-radius:5px;
  transition:background var(--transicao);
}

/* Acertou e errou têm cor agora. Antes tudo ficava dourado e a pessoa tinha
   que LER para saber se tinha acertado. Isto vale só aqui e no treino: no
   Construir continua não existindo erro. */
.desafio-resultado.certo .de .peca-montada{background:var(--certo)}
.desafio-resultado.errado .de .peca-montada{background:var(--errado)}
.desafio-resultado .pt{
  font-family:var(--display);font-style:italic;color:var(--corpo);
  font-size:1.0625rem;margin-top:.5rem;
}
/* Inline, dentro da própria linha da frase montada: é a frase que está certa
   ou errada, então o sinal encosta nela em vez de virar um parágrafo abaixo. */
.veredito{
  display:inline-flex;align-items:center;gap:.4rem;margin-left:.5rem;
  font-family:var(--ui);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;
}
.veredito.certo{color:var(--certo)}
.veredito.errado{color:var(--errado)}
.veredito-marca{
  width:1.5rem;height:1.5rem;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;
  border:1.5px solid currentColor;font-size:.8rem;letter-spacing:0;
}

.botao-tirar{
  font-family:var(--ui);font-size:.75rem;color:var(--corpo);
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:.4rem .7rem;margin-top:.6rem;min-height:2.25rem;
  transition:all var(--transicao);
}
.botao-tirar::before{content:'← ';color:var(--apagado)}
.botao-tirar:hover{border-color:var(--ouro-regua);color:var(--ouro-texto)}
.desafio-nota{
  font-family:var(--ui);font-size:.875rem;line-height:1.55;color:var(--tinta);
  border-left:2px solid var(--ouro-regua);
  padding:.15rem 0 .15rem .85rem;margin:.9rem 0;
}
.desafio-nota strong{color:var(--ouro-texto)}

.desafio-nav{display:flex;gap:.5rem;margin-top:1.5rem;flex-wrap:wrap;align-items:center}

/* Acertou: aparece UM botão dourado logo abaixo da resposta. É o único caminho
   para a frente naquele momento. A fileira Anterior/Próximo continua embaixo. */
.botao-avancar{margin:1.1rem 0 .4rem}
.botao-avancar::after{content:'  →';letter-spacing:.05em}
.trilha-desafios{display:flex;gap:.25rem;flex-wrap:wrap;margin:1rem 0}
.ponto{
  width:26px;height:26px;min-height:26px;border-radius:50%;
  border:1px solid var(--linha);font-family:var(--ui);font-size:.68rem;
  display:grid;place-items:center;color:var(--apagado);
}
.ponto.feito{background:var(--ouro-solido);border-color:var(--ouro-solido);color:var(--sobre-ouro)}
.ponto[aria-current='true']{border-color:var(--ouro);color:var(--ouro-texto);border-width:2px}

/* ==================================================== TELA: OS TRÊS NÃOS */

/* Substituiu o diálogo do Thomas e da Ana, que pedia verbo conjugado em quase
   toda lacuna — e conjugação não foi ensinada em nenhuma das duas aulas. Aqui a
   pessoa só escolhe QUAL não entra, que é o conteúdo da aula. */
.treino-placar{
  display:flex;align-items:baseline;gap:.75rem;
  font-family:var(--ui);font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:1rem;
}
.treino-conta{color:var(--ouro-texto)}
.treino-acertos{color:var(--suave);letter-spacing:.1em}

.treino-pedido{
  font-family:var(--display);font-size:clamp(1.35rem,4.5vw,1.75rem);
  line-height:1.25;color:var(--tinta);margin:0 0 1.1rem;
}
/* A frase do treino usa os mesmos blocos da máquina, com uma lacuna no lugar
   onde o não vai entrar. */
.treino-frase{
  display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;
  font-family:var(--alemao);font-size:clamp(1.2rem,4.4vw,1.6rem);font-weight:600;
  min-height:2.4em;
}
.treino-frase .bloco{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:.16em .42em .2em;border-radius:5px;
  color:var(--sobre-bloco);background:var(--petroleo);
}
.treino-frase .bloco[data-papel='sujeito']{background:var(--vinho)}
.treino-frase .bloco[data-papel='verbo'],
.treino-frase .bloco[data-papel='modal']{background:var(--ouro)}
.treino-frase .bloco[data-papel='infinitivo']{background:var(--azul)}
/* A lacuna é do tamanho de um bloco, tracejada, para a pessoa ver que falta
   uma peça ali e não uma palavra qualquer. */
.treino-lacuna{
  display:inline-block;min-width:4.5em;
  padding:.16em .42em .2em;border-radius:5px;
  border:1.5px dashed var(--negador);color:var(--negador);
  text-align:center;
}
.treino-frase.certo .treino-lacuna{
  border-style:solid;border-color:var(--certo);
  background:var(--certo);color:var(--sobre-bloco);
}
.treino-frase.errado .treino-lacuna{
  border-style:solid;border-color:var(--errado);
  background:var(--errado);color:var(--sobre-bloco);
}
.treino-frase-pt{
  font-family:var(--display);font-style:italic;color:var(--corpo);
  font-size:1.0625rem;margin:.4rem 0 0;
}
/* O treino não usa fita: são três opções e elas cabem. */
.treino-opcoes{flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none}
/* O SELO DE RESPOSTA.

   Cada peça já carrega a cor da função dela, então a cor da peça nunca pode
   servir de resposta: verde e vermelho no próprio bloco brigariam com o código
   de cor da aula. O sinal sai por FORA, no canto de cima à direita, onde não
   existe nada competindo. E ele é o único jeito de a pessoa saber que acertou
   nas frases em que a resposta é o Nein, porque ali não há lacuna para pintar. */
.treino-opcoes .peca{position:relative;overflow:visible}
.treino-opcoes .peca[aria-disabled='true']{cursor:default}

.respondida-certa .peca-bloco,
.respondida-errada .peca-bloco,
.era-esta .peca-bloco{position:relative}

.respondida-certa .peca-bloco::after,
.respondida-errada .peca-bloco::after,
.era-esta .peca-bloco::after{
  position:absolute;top:-.55rem;right:-.55rem;
  width:1.35rem;height:1.35rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--ui);font-size:.7rem;font-weight:700;line-height:1;
  border:1.5px solid var(--bg);
}
.respondida-certa .peca-bloco::after{
  content:'✓';background:var(--certo);color:var(--bg);
}
.respondida-errada .peca-bloco::after{
  content:'✕';background:var(--errado);color:var(--bg);
}
/* Errou: a certa também se acende, senão a pessoa sabe que errou e não sabe
   qual era. Ela ganha o mesmo selo verde, mas contornado em vez de cheio. */
.era-esta .peca-bloco::after{
  content:'✓';background:var(--bg);color:var(--certo);
  border-color:var(--certo);
}
.era-esta .peca-bloco{outline:2px solid var(--certo);outline-offset:2px}
.respondida-certa .peca-bloco{outline:2px solid var(--certo);outline-offset:2px}
.respondida-errada .peca-bloco{outline:2px solid var(--errado);outline-offset:2px}
/* As que não foram escolhidas saem da frente, sem sumir. */
.treino-opcoes .apagada{opacity:.4}

.treino-nota{
  font-family:var(--ui);font-size:.875rem;line-height:1.55;color:var(--tinta);
  border-left:2px solid var(--ouro-regua);
  padding:.15rem 0 .15rem .85rem;margin:1rem 0;
}
.treino-nota strong{color:var(--ouro-texto)}

/* ===================================================== MOVIMENTO REDUZIDO */

/* Aqui a animação NÃO é simplesmente desligada: o movimento é a informação.
   As transições viram corte seco, e a peça que mudou de casa ganha um selo
   estático dizendo de onde ela veio. A informação de posição continua legível,
   que é o que o item 6.6 do briefing pede. */
@media (prefers-reduced-motion:reduce){
  :root{--voo:1ms}
  .arco.tracando path{animation:none}
  .bloco.rastro::after{animation:none;opacity:0}
  .peca,.peca-bloco,.botao-estado,.chip-w,.negador{transition:none}
  .topo-linha{transition:none}
  /* O convite não pisca: fica aceso. O empurrão continua existindo, sem
     movimento — que é o que o item 6.6 do briefing pede em todo lugar. */
  .estados.convite .grupo-base{animation:none;outline-color:var(--ouro-regua)}
}
.veio-de{position:relative}
.veio-de::before{
  content:'veio da casa ' attr(data-veio-de);
  position:absolute;left:0;top:-1.15em;white-space:nowrap;
  font-family:var(--ui);font-size:.6rem;letter-spacing:.06em;
  color:var(--ouro-texto);background:var(--creme);
  padding:.1rem .35rem;border-radius:2px;
}

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

@media (max-width:22.5rem){       /* 360px e abaixo, inclui o alvo de 320px */
  :root{--margem:.75rem}
  /* Em tela estreita quem cede é o VÃO, não a letra. Apertar o espaço entre
     as peças e o respiro interno delas devolve uns 45px de linha, que é a
     diferença entre a frase mais longa caber com letra legível ou virar
     letrinha de bula. */
  .linha{gap:.25rem}
  .trilha{gap:.25rem}
  .linha-de .bloco{padding:.12em .28em .16em;border-radius:4px}
  .peca-bloco{font-size:1rem;padding:.3em .42em .34em}
  .peca small{font-size:.85rem}
  .marca-nome{font-size:.95rem}
  .nav button{font-size:.72rem;padding:.5rem .5rem}
}

/* Em tela larga, que é o caso da demonstração ao vivo com a tela
   compartilhada, tudo cresce: o movimento precisa ler bem em vídeo. */
/* A coluna larga vale para as peças e para a frase, que ganham com o espaço.
   Texto corrido não: linha de 74rem ninguém lê. Cada bloco de prosa fica
   preso em --prosa, então a largura extra vai toda para o que precisa dela. */
.instrucao,.legenda,.desafio-nota,.treino-nota,
.aviso,.negador-explica{max-width:var(--prosa)}
.desafio-pedido,.treino-pedido{max-width:30rem}

/* Aqui existia um bloco que aumentava TUDO acima de 960px, "porque a
   demonstração ao vivo é com a tela compartilhada". Num projetor talvez; num
   notebook virou tipografia de outdoor — a frase alemã chegava a 62px — e,
   junto com a faixa grudada no topo, sobravam 190px de 760 para trabalhar.

   Em tela larga o que muda agora é o LAYOUT, não o tamanho da letra. */
@media (min-width:60rem){
  /* Os quatro estados cabem numa fileira só. */
  .estados{flex-direction:row;align-items:center;gap:.75rem}
  .grupo-base{width:auto;flex:0 1 auto}
  .grupo-base .botao-estado{flex:1 1 auto;padding-inline:1.4rem}
  .botao-camada{align-self:auto}
}