:root{
  /* papel e tinta — o mundo do documento oficial */
  --papel:#EEF0EC; --papel-2:#FAFBF8; --papel-3:#E3E7E1;
  --tinta:#16211C; --tinta-2:#5C6660; --tinta-3:#8E958F;
  --linha:#D7DCD6;
  /* carimbo — a cor da ação */
  --carimbo:#1F7A4C; --carimbo-forte:#14563A; --carimbo-fraco:#E4F0E7;
  /* estados */
  --erro:#B23A2B; --erro-forte:#8A2C20; --erro-fraco:#F7E7E4;
  --ocre:#B7861A; --ocre-fraco:#F6EEDA;
  /* disciplinas */
  --d-const:#2E6FAE; --d-adm:#6E4AA8; --d-port:#B2455C; --d-rlm:#0E7F72;
  --raio:18px;
  /* tokens novos — revisão visual da Home, ago/2026 */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  --motion-fast:120ms; --motion-base:220ms; --motion-slow:420ms;
  --ease-out:cubic-bezier(.22,.8,.32,1); --ease-spring:cubic-bezier(.34,1.35,.64,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:#C9CFC8;
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  color:var(--tinta);
  display:flex; justify-content:center; align-items:flex-start;
  min-height:100vh; padding:20px 12px 90px;
}
button{font-family:inherit;color:inherit;cursor:pointer}

/* ---------- moldura do aparelho ---------- */
.fone{
  width:100%; max-width:400px; background:var(--papel);
  border-radius:30px; border:1px solid #B9C0B8;
  box-shadow:0 2px 4px rgba(20,30,25,.10), 0 24px 50px rgba(20,30,25,.20);
  overflow:hidden; position:relative;
  min-height:760px; display:flex; flex-direction:column;
}

/* ---------- cabeçalho de protocolo (assinatura) ---------- */
.protocolo{
  display:flex; align-items:center; gap:10px;
  padding:16px 14px 12px; border-bottom:1px solid var(--linha);
  background:var(--papel-2);
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.03em;
  color:var(--tinta-2); flex-shrink:0;
}
.protocolo .chama{color:var(--ocre); font-weight:600; display:inline-flex; align-items:center; gap:4px}
.protocolo .prazo{margin-left:auto; font-weight:500; white-space:nowrap}
.protocolo .eng{background:none;border:none;padding:0 0 0 6px;font-size:15px;opacity:.55}
.protocolo.oculto{display:none}

/* ---------- barra de progresso do treino ---------- */
.trilho{display:flex;align-items:center;gap:12px;padding:14px 18px 10px;flex-shrink:0}
.trilho .sair{background:none;border:none;font-size:20px;color:var(--tinta-3);line-height:1;padding:0 2px}
.barra{flex:1;height:9px;background:var(--papel-3);border-radius:5px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--carimbo);border-radius:5px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.contagem{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tinta-3)}

/* ---------- área de conteúdo ---------- */
.palco{flex:1;display:flex;flex-direction:column;padding:0 18px 20px;position:relative;overflow-y:auto}
.palco.centro{justify-content:center;text-align:center;align-items:center}

h1{font-size:27px;line-height:1.12;font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
h2{font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.sub{font-family:'Newsreader',serif;font-size:17.5px;line-height:1.6;color:#4A544E;margin:0 0 22px;max-width:32ch}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--tinta-3);text-transform:uppercase;margin-bottom:8px}

/* ---------- botões ---------- */
.acao{
  width:100%;background:var(--carimbo);color:#fff;border:none;
  border-bottom:4px solid var(--carimbo-forte);border-radius:14px;
  padding:16px 0;font-size:15px;font-weight:700;letter-spacing:.01em;
  transition:transform .08s ease;
}
.acao:active{transform:translateY(3px);border-bottom-width:1px}
.acao.fantasma{background:none;color:var(--carimbo);border:2px solid var(--linha);border-bottom-width:4px}
.acao[disabled]{background:var(--papel-3);border-bottom-color:var(--linha);color:var(--tinta-3)}
.link{background:none;border:none;font-size:13px;color:var(--tinta-2);text-decoration:underline;padding:12px 0;display:block;margin:0 auto}
.rodape{margin-top:auto;padding-top:18px}

/* ---------- opções de onboarding ---------- */
.opcao{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--papel-2);border:1.5px solid var(--linha);border-bottom-width:3px;
  border-radius:14px;padding:15px 16px;margin-bottom:9px;font-size:15px;font-weight:600;
}
.opcao:active{transform:translateY(2px);border-bottom-width:1.5px}
.opcao .glifo{width:26px;height:26px;flex-shrink:0;color:var(--carimbo)}
.explicador{background:none;border:none;display:inline-flex;align-items:center;gap:6px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--tinta-2);
  text-decoration:underline;text-underline-offset:3px;padding:8px 0;margin:0 auto}
.explicador svg{width:14px;height:14px;flex-shrink:0}
.saida{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid var(--linha);
  border-radius:9px;padding:5px 10px 5px 7px;font-size:12px;font-weight:600;color:var(--tinta-2)}
.saida svg{width:14px;height:14px}
.cab-card{display:flex;flex-direction:column;gap:7px;margin:4px 0 16px}
.materia{font-size:12.5px;font-weight:700;letter-spacing:.01em;display:flex;align-items:center;gap:7px}
.materia .pino{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.graf-num{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--tinta-3);
  text-align:center;margin-bottom:3px;height:11px}
.col-graf{flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.eixo{display:flex;gap:3px;margin-top:5px}
.eixo span{flex:1;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:var(--tinta-3)}
.linha-acerto{display:flex;align-items:flex-end;gap:6px;height:74px;margin-top:6px}
.linha-acerto .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}
.linha-acerto .val{font-family:'IBM Plex Mono',monospace;font-size:9.5px;text-align:center;color:var(--tinta-2)}
.linha-acerto .haste{background:var(--d-const);border-radius:3px 3px 0 0;opacity:.9}
.opcao .aparte{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--tinta-3);text-align:right;line-height:1.7}
.opcao.marcada{border-color:var(--carimbo);background:var(--carimbo-fraco)}

/* ---------- carimbo de memória (elemento-assinatura) ---------- */
.carimbo-wrap{position:relative;width:186px;height:186px;margin:0 auto}
.carimbo-wrap svg{transform:rotate(-90deg);display:block}
.carimbo-anel{fill:none;stroke:var(--papel-3);stroke-width:11}
.carimbo-arco{fill:none;stroke:var(--carimbo);stroke-width:11;stroke-linecap:round;
  transition:stroke-dashoffset 1.1s cubic-bezier(.34,1.2,.42,1)}
.carimbo-miolo{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px}
.carimbo-num{font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.carimbo-rot{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;color:var(--tinta-3);text-transform:uppercase}
.carimbo-tracejado{position:absolute;inset:24px;border:1.5px dashed var(--linha);border-radius:50%}

/* ---------- blocos da casa ---------- */
.bloco{background:var(--papel-2);border:1.5px solid var(--linha);border-radius:var(--raio);padding:18px;margin-bottom:14px}
.bloco-rot{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--tinta-3);text-transform:uppercase;margin-bottom:10px}
.contador-dia{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums}
.contador-dia small{font-size:15px;font-weight:600;color:var(--tinta-3);letter-spacing:0}
.calha{height:10px;background:var(--papel-3);border-radius:5px;overflow:hidden;margin-bottom:16px}
.calha i{display:block;height:100%;background:var(--carimbo);border-radius:5px}
.risco{font-family:'Newsreader',serif;font-size:16px;line-height:1.5;color:#4A544E;margin:12px 0 0;text-align:center}
.esmaece{-webkit-mask-image:linear-gradient(90deg,#000 74%,transparent);mask-image:linear-gradient(90deg,#000 74%,transparent)}

/* ---------- cobertura ---------- */
.linha-cob{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-size:13.5px;font-weight:600}
.linha-cob .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha-cob .calha{flex:0 0 82px;height:8px;margin:0}
.linha-cob .frac{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tinta-3);flex-shrink:0;width:56px;text-align:right}
.recorde{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--linha);font-size:13.5px}
.recorde:last-child{border-bottom:none}
.recorde b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;min-width:52px}
.sparks{display:flex;align-items:flex-end;gap:3px;height:52px;margin-top:4px}
.sparks i{flex:1;background:var(--carimbo);border-radius:2px 2px 0 0;min-height:3px;opacity:.85}
.sparks i.vazio{background:var(--papel-3)}

/* ---------- card de questão ---------- */
.selo-fonte{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  color:var(--tinta-2);background:var(--papel-2);border:1px solid var(--linha);
  border-radius:6px;padding:4px 9px;display:inline-block;margin:4px 0 18px;align-self:flex-start}
.enunciado{font-family:'Newsreader',serif;font-size:21px;line-height:1.5;margin:0 0 26px}
.enunciado.lei{font-size:20px;line-height:1.85}
.vazio-lei{display:inline-block;min-width:104px;border-bottom:2.5px solid var(--carimbo);
  text-align:center;font-weight:600;color:var(--carimbo-forte);padding:0 3px;font-family:'Bricolage Grotesque',sans-serif;font-size:17px}
.vazio-lei.certa{border-color:var(--carimbo);color:var(--carimbo-forte)}
.vazio-lei.errada{border-color:var(--erro);color:var(--erro-forte)}
.respostas{margin-top:auto;padding-top:14px}
.dupla{display:flex;gap:11px}
.dupla .escolha{flex:1;justify-content:center;text-align:center;font-size:16px}
.escolha{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:var(--papel-2);
  border:1.5px solid var(--linha);border-bottom-width:3px;border-radius:13px;padding:14px 15px;
  margin-bottom:9px;font-size:14.5px;font-weight:600;line-height:1.3;
}
.escolha:active:not(:disabled){transform:translateY(2px);border-bottom-width:1.5px}
.escolha .letra{width:26px;height:26px;border-radius:7px;border:1.5px solid var(--linha);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;
  color:var(--tinta-3);flex-shrink:0;font-family:'IBM Plex Mono',monospace}
.escolha.certa{background:var(--carimbo-fraco);border-color:var(--carimbo)}
.escolha.certa .letra{background:var(--carimbo);border-color:var(--carimbo);color:#fff}
.escolha.errada{background:var(--erro-fraco);border-color:var(--erro)}
.escolha.errada .letra{background:var(--erro);border-color:var(--erro);color:#fff}
.fichas{display:flex;flex-wrap:wrap;gap:9px}
.ficha{background:var(--papel-2);border:1.5px solid var(--linha);border-bottom-width:3px;
  border-radius:11px;padding:11px 15px;font-size:14.5px;font-weight:600}
.ficha:active:not(:disabled){transform:translateY(2px);border-bottom-width:1.5px}
.ficha.gasta{opacity:.3}
.ficha.certa{background:var(--carimbo-fraco);border-color:var(--carimbo);color:var(--carimbo-forte)}
@keyframes tremor{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.tremor{animation:tremor .26s ease 2}

/* ---------- gaveta de feedback ---------- */
.gaveta{position:absolute;left:0;right:0;bottom:0;transform:translateY(101%);
  transition:transform .3s cubic-bezier(.3,0,.2,1);padding:20px 18px 22px;
  border-radius:22px 22px 0 0;border-top:1.5px solid;z-index:20}
.gaveta.aberta{transform:translateY(0)}
.gaveta.ok{background:var(--carimbo-fraco);border-top-color:var(--carimbo)}
.gaveta.nao{background:var(--erro-fraco);border-top-color:var(--erro)}
.gaveta-topo{display:flex;align-items:center;gap:9px;margin-bottom:6px;font-size:17px;font-weight:700}
.gaveta.ok .gaveta-topo{color:var(--carimbo-forte)}
.gaveta.nao .gaveta-topo{color:var(--erro-forte)}
.gabarito{font-family:'IBM Plex Mono',monospace;font-size:11.5px;background:var(--papel-2);
  border-radius:7px;padding:5px 9px;display:inline-block;margin-bottom:9px}
.explica{font-family:'Newsreader',serif;font-size:15px;line-height:1.55;margin:0 0 12px}
.gaveta-pe{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.gaveta-pe button{background:none;border:none;font-size:12.5px;font-weight:600;
  text-decoration:underline;padding:0;color:var(--tinta-2)}
.agenda{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tinta-2);margin-left:auto}
.gaveta.ok .acao{background:var(--carimbo);border-bottom-color:var(--carimbo-forte)}
.gaveta.nao .acao{background:var(--erro);border-bottom-color:var(--erro-forte)}

/* ---------- modal ---------- */
.veu{position:absolute;inset:0;background:rgba(22,33,28,.55);display:flex;align-items:center;
  justify-content:center;padding:26px;z-index:60}
.caixa{background:var(--papel);border-radius:20px;padding:26px 22px 20px;width:100%;max-width:310px;text-align:center}
.caixa h2{margin-bottom:8px}

/* ---------- selo carimbado ---------- */
.selo{width:172px;height:172px;border-radius:50%;border:4px solid var(--carimbo-forte);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--carimbo-forte);position:relative;margin:0 auto 24px;
  animation:bate .5s cubic-bezier(.2,1.5,.4,1) both}
.selo::before{content:'';position:absolute;inset:8px;border:1.5px dashed currentColor;border-radius:50%;opacity:.5}
@keyframes bate{0%{transform:scale(2) rotate(-16deg);opacity:0}
  62%{transform:scale(.94) rotate(-7deg);opacity:1}100%{transform:scale(1) rotate(-7deg)}}
.selo .marca{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.24em}
.selo .grande{font-size:18px;font-weight:800;line-height:1.1;text-align:center;letter-spacing:-.01em}
.selo .quando{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em}

.numerao{font-size:60px;font-weight:800;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.numerao.ocre{color:var(--ocre)}
.salto{display:flex;align-items:center;justify-content:center;gap:14px;font-size:38px;
  font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-bottom:6px}
.salto .de{color:var(--tinta-3)}
.salto .seta{font-size:20px;color:var(--tinta-3)}
.salto .para{color:var(--carimbo)}

/* ---------- resumo de lei ---------- */
.capa-lei{background:var(--carimbo);color:#fff;margin:0 -18px 16px;padding:18px 18px 20px;
  border-bottom:4px solid var(--carimbo-forte)}
.capa-lei .volta{background:none;border:none;color:rgba(255,255,255,.8);font-size:20px;padding:0;margin-bottom:8px}
.capa-lei h2{margin-bottom:7px}
.capa-lei .cod{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;
  border:1px solid rgba(255,255,255,.45);border-radius:6px;padding:3px 8px;display:inline-block}
.secao-lei{background:var(--papel-2);border:1.5px solid var(--linha);border-radius:var(--raio);
  padding:15px 16px;margin-bottom:12px;text-align:left}
.secao-lei h3{font-size:13px;font-weight:700;margin:0 0 8px;letter-spacing:.01em}
.secao-lei p{font-family:'Newsreader',serif;font-size:15px;line-height:1.65;margin:0}
.secao-lei.aviso{border-color:var(--ocre);background:var(--ocre-fraco)}
.grifo{background:linear-gradient(transparent 48%,#F3DE9A 48%);font-weight:600;padding:0 2px}

/* ---------- ajustes ---------- */
.grupo-rot{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
  color:var(--tinta-3);text-transform:uppercase;margin:20px 0 8px}
.item{width:100%;display:flex;align-items:center;gap:10px;background:var(--papel-2);
  border:1.5px solid var(--linha);border-radius:12px;padding:13px 15px;margin-bottom:7px;
  font-size:14px;font-weight:600;text-align:left}
.item .valor{margin-left:auto;color:var(--tinta-3);font-weight:500;font-size:13px}
.interruptor{width:40px;height:23px;border-radius:12px;background:var(--carimbo);position:relative;flex-shrink:0;margin-left:auto}
.interruptor::after{content:'';position:absolute;top:3px;right:3px;width:17px;height:17px;border-radius:50%;background:#fff}
.interruptor.off{background:var(--papel-3)}
.interruptor.off::after{right:auto;left:3px}

/* ---------- controles de composição ---------- */
.mix{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.mix .pino{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.mix .rot{flex:1;font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mix .pct{font-family:'IBM Plex Mono',monospace;font-size:13px;width:38px;text-align:right}
.mix input{flex:0 0 96px;accent-color:var(--carimbo)}
.traducao{background:var(--carimbo-fraco);border-radius:12px;padding:13px 15px;margin-top:6px;
  font-size:13.5px;line-height:1.5;text-align:center}
.traducao b{font-family:'IBM Plex Mono',monospace}

/* ---------- índice do protótipo ---------- */
.indice-btn{position:fixed;right:14px;bottom:16px;z-index:200;background:var(--tinta);color:var(--papel);
  border:none;border-radius:22px;padding:11px 17px;font-size:12.5px;font-weight:700;
  box-shadow:0 6px 18px rgba(20,30,25,.3)}
.indice{position:fixed;inset:0;background:rgba(22,33,28,.75);z-index:210;display:none;
  padding:26px 16px;overflow-y:auto}
.indice.aberto{display:block}
.indice-cx{max-width:400px;margin:0 auto;background:var(--papel);border-radius:20px;padding:20px}
.indice-cx h2{margin-bottom:4px}
.indice-cx .nota{font-family:'Newsreader',serif;font-size:13.5px;color:var(--tinta-2);margin:0 0 16px;line-height:1.5}
.indice-cx button.ir{width:100%;text-align:left;background:var(--papel-2);border:1.5px solid var(--linha);
  border-radius:10px;padding:10px 13px;margin-bottom:6px;font-size:13.5px;font-weight:600;display:flex;gap:10px}
.indice-cx button.ir span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tinta-3);flex-shrink:0}

.etiqueta-causa{display:inline-block;margin-top:8px;font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;letter-spacing:.06em;padding:3px 8px;border-radius:6px;text-transform:lowercase}
.etiqueta-causa.atencao{background:var(--ocre-fraco);color:#8A6410;border:1px solid var(--ocre)}
.etiqueta-causa.memoria{background:var(--papel-3);color:var(--tinta-2);border:1px solid var(--linha)}
@media (prefers-reduced-motion:reduce){
  .selo,.tremor{animation:none}
  .carimbo-arco,.gaveta,.barra i{transition:none}
}
/* ---------- fala do coach ---------- */
.fala-coach{font-family:'Newsreader',serif;font-size:17px;line-height:1.55;
  color:var(--tinta);margin:0 0 16px}
.fala-coach b{font-weight:600}
.linha-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tinta-3);
  text-align:center;margin-bottom:14px;letter-spacing:.04em}

/* ---------- score e delta ---------- */
.score-linha{display:flex;align-items:baseline;justify-content:center;gap:12px}
.delta{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600}
.delta.sobe{color:var(--carimbo)}
.delta.cai{color:var(--erro)}

/* ---------- mapa de força ---------- */
.forca-linha{display:flex;align-items:center;gap:10px;padding:7px 0}
.forca-nome{flex:1;font-size:14.5px;font-weight:600}
.forca-pct{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600}
.forca-pct.fraco{color:var(--erro)}
.forca-pct.forte{color:var(--carimbo)}

/* ---------- caderno de erros ---------- */
.bloco-toque{width:100%;text-align:left;cursor:pointer;display:block;font-family:inherit;color:inherit}
.linha-erro{display:flex;align-items:center;gap:8px;font-size:14.5px}
.linha-erro b{font-size:20px;font-weight:800}
.seta-ir{margin-left:auto;color:var(--tinta-3)}

/* ---------- barra segmentada e placar da sessão ---------- */
.segmentos{flex:1;display:none;gap:3px;align-items:center}
.segmentos i{flex:1;height:8px;border-radius:2px;background:var(--papel-3);transition:background .2s}
.segmentos i.ok{background:var(--carimbo)}
.segmentos i.nao{background:var(--erro)}
.segmentos i.agora{background:var(--tinta-3)}
.placar{display:none;gap:7px;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600}
.placar .pc{display:inline-flex;align-items:center;gap:3px}
.placar .pc.ok{color:var(--carimbo)}
.placar .pc.ok::before{content:'✓'}
.placar .pc.nao{color:var(--erro)}
.placar .pc.nao::before{content:'✕'}

/* ---------- combo ---------- */
.combo-flutua{position:absolute;top:64px;left:50%;transform:translateX(-50%);
  background:var(--carimbo);color:#fff;border-radius:20px;padding:7px 16px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.02em;z-index:30;animation:sobeSome 1.5s ease forwards;pointer-events:none}
@keyframes sobeSome{
  0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.9)}
  15%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  75%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(1)}
}
@media (prefers-reduced-motion:reduce){ .combo-flutua{animation:none;opacity:1} }

.cenario{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--linha);font-size:14px}
.cenario span{flex:1;color:var(--tinta-2)}
.cenario b{font-family:'IBM Plex Mono',monospace;font-size:14.5px}
.cenario b.sobe{color:var(--carimbo)}
.cenario b.cai{color:var(--erro)}

:focus-visible{outline:3px solid var(--carimbo);outline-offset:2px;border-radius:6px}

/* ================================================================
   HOME — nova hierarquia pós-login (revisão visual, ago/2026)
   Exclusivo da tela inicial. Não redefine nenhuma classe genérica
   existente (.bloco, .acao, .risco, .palco etc.) — só usa tokens de
   paleta e tipografia já existentes, mais os tokens de raio/espaço/
   movimento adicionados acima ao :root.
   ================================================================ */

.home-wrap{
  display:flex; flex-direction:column; gap:20px;
  padding-top:var(--s-4);
}

.home-saudacao{ margin:0; }

/* hero — dentro da Home o texto do coach é interface, não editorial.
   Escopado em .home-treino: a regra global .fala-coach segue intacta
   e continua valendo em qualquer outra tela que a use. */
.home-treino .fala-coach{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:15.5px;
  line-height:1.48;
  letter-spacing:-.005em;
}

/* rótulo de seção — mesma linguagem tipográfica do .eyebrow/.bloco-rot
   já existentes (mono, versalete, letter-spacing largo), isolado em
   classe própria para não acoplar a Home a nenhuma outra tela */
.home-secao-rot{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-3); margin-bottom:var(--s-3);
}
.home-compacta .home-secao-rot{ margin-bottom:var(--s-2); }

/* -------- 3. Sua memória — métrica editorial, sem moldura de card -------- */
.home-metrica{
  text-align:center;
  padding:4px 0 0;
}
.home-score-linha{
  display:flex; align-items:baseline; justify-content:center; gap:var(--s-3);
}
.home-score-num{
  font-size:52px; font-weight:800; letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--tinta);
}
.home-score-delta{
  font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600;
}
.home-score-delta.sobe{ color:var(--carimbo); }
.home-score-delta.cai{ color:var(--erro); }
.home-score-legenda{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:14px; font-weight:500; color:var(--tinta-2);
  margin:6px 0 4px;
}
.home-link-sec{
  background:none; border:none; padding:var(--s-1) 0; margin:0 auto;
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:12.5px; font-weight:600;
  color:var(--tinta-2); text-decoration:none;
  display:block; cursor:pointer;
  transition:color var(--motion-fast) var(--ease-out);
}
.home-link-sec:active{ color:var(--tinta); }

/* -------- 4/5. seções compactas — bem menores que .bloco -------- */
.home-compacta{
  background:var(--papel-2); border:1px solid var(--linha);
  border-radius:var(--r-md); padding:var(--s-3) var(--s-4);
}

/* -------- 4. Para reforçar -------- */
.home-reforco-linha{
  display:flex; align-items:baseline; gap:var(--s-2);
}
/* pino da disciplina — mesma linguagem de .materia .pino e .mix .pino,
   em classe própria para não acoplar a Home àquelas telas */
.home-reforco-pino{
  width:9px; height:9px; border-radius:3px;
  flex-shrink:0; align-self:center;
}
.home-reforco-nome{
  flex:1; font-size:14.5px; font-weight:600; color:var(--tinta);
}
.home-reforco-pct{
  font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600;
  color:var(--ocre);
}
.home-reforco-nota{
  font-family:'Newsreader',serif; font-size:13.5px; line-height:1.5;
  color:var(--tinta-2); margin:var(--s-1) 0 0;
}

/* -------- 5. Seus erros — compacta e inteiramente clicável -------- */
.home-erros{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-2); width:100%; text-align:left; cursor:pointer;
  transition:transform var(--motion-fast) var(--ease-out);
}
.home-erros:active{ transform:translateY(1px); }
.home-erros-corpo{ min-width:0; }
.home-erros-txt{ font-size:13.5px; font-weight:600; color:var(--tinta); }

/* ================================================================
   TREINO — refinamento visual da sessão (set/2026)
   Tudo aqui é escopado em .treino-card, wrapper que só telaCard()
   cria. A amostra do onboarding usa corpoCard() sem esse wrapper,
   então nada abaixo a alcança.
   ================================================================ */

.treino-card{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  padding-top:4px;
}

.treino-card .cab-card{
  margin:6px 0 18px;
}

.treino-card .enunciado{
  font-size:19.5px;
  line-height:1.46;
  margin-bottom:0;
}

/* tira o margin-top:auto que colava as respostas no fundo da tela */
.treino-card .respostas{
  margin-top:clamp(28px,7vh,56px);
  padding-top:0;
}

.treino-card .escolha{
  min-height:58px;
  padding:14px 16px;
  font-size:15.5px;
  line-height:1.32;
  transition:
    transform var(--motion-fast) var(--ease-out),
    background var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out);
}

/* -------- resposta certa -------- */
@keyframes treinoAcerto{
  0%{transform:scale(.985)}
  60%{transform:scale(1.01)}
  100%{transform:scale(1)}
}
.treino-card.estado-ok .escolha.certa,
.treino-card.estado-ok .ficha.certa{
  animation:treinoAcerto 220ms var(--ease-spring);
}

/* -------- resposta errada -------- */
@keyframes treinoErro{
  0%,100%{transform:translateX(0)}
  35%{transform:translateX(-3px)}
  70%{transform:translateX(3px)}
}
.treino-card.estado-erro .tremor{
  animation:treinoErro 180ms ease 1;
}

/* a correta aparece um instante depois do erro, não junto */
@keyframes treinoRevelaCorreta{
  from{opacity:.55;transform:scale(.99)}
  to{opacity:1;transform:scale(1)}
}
.treino-card.estado-erro .escolha.certa,
.treino-card.estado-erro .ficha.certa{
  animation:treinoRevelaCorreta 220ms 180ms both var(--ease-out);
}

/* -------- gaveta de feedback, só no treino -------- */
.treino-card .gaveta{
  transition:transform 240ms var(--ease-out);
  padding:16px 18px 18px;
  border-radius:20px 20px 0 0;
}
.treino-card .gaveta-topo{
  font-size:17px;
  margin-bottom:7px;
}
.treino-card .explica{
  font-size:15px;
  line-height:1.48;
  margin-bottom:10px;
}
.treino-card .gaveta-pe{
  margin-bottom:12px;
}

/* mesma cortesia que o resto do app já pratica */
@media (prefers-reduced-motion:reduce){
  .treino-card.estado-ok .escolha.certa,
  .treino-card.estado-ok .ficha.certa,
  .treino-card.estado-erro .tremor,
  .treino-card.estado-erro .escolha.certa,
  .treino-card.estado-erro .ficha.certa{ animation:none }
  .treino-card .escolha,
  .treino-card .gaveta{ transition:none }
}

/* ================================================================
   LACUNA — encaixe da palavra (set/2026)
   Escopado em .treino-card.treino-lacuna, classe que telaCard() só
   aplica quando c.tipo === 'lacuna'. Múltipla escolha, certo/errado
   e a amostra do onboarding não recebem nada daqui.
   ================================================================ */

.treino-card.treino-lacuna .enunciado.lei{
  font-size:19.5px;
  line-height:1.65;
}

.treino-card.treino-lacuna .vazio-lei{
  min-width:100px;
  padding:0 5px 2px;
  transition:
    color var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    background var(--motion-base) var(--ease-out);
}

.treino-card.treino-lacuna .fichas{
  margin-top:clamp(32px,8vh,64px);
}

.treino-card.treino-lacuna .ficha{
  min-height:48px;
  padding:11px 16px;
  transition:
    transform var(--motion-fast) var(--ease-out),
    opacity var(--motion-base) var(--ease-out),
    background var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out);
}

/* a ficha escolhida recua enquanto o clone voa */
.treino-card.treino-lacuna .ficha.gasta{
  opacity:.25;
  transform:scale(.96);
}

/* -------- a PALAVRA que voa da ficha até a lacuna --------
   Não é o botão: é texto puro, já no tamanho e no peso que terá
   dentro da lacuna. Só um fundo levemente translúcido, para
   continuar legível ao passar por cima da frase.               */
.treino-card .lacuna-voo{
  position:fixed;
  z-index:400;
  pointer-events:none;
  will-change:transform;
  display:inline-block;
  margin:0;
  border:none;
  box-shadow:none;
  white-space:nowrap;
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-weight:600;
  font-size:17px;
  line-height:1.1;
  color:var(--carimbo-forte);
  padding:4px 7px;
  border-radius:6px;
  background:rgba(250,251,248,.9);
  background:color-mix(in srgb, var(--papel-2) 90%, transparent);
}

/* respondida, a lacuna volta a ter a largura do próprio conteúdo:
   nenhuma largura mínima sobrando empurrando a pontuação adiante */
.treino-card.treino-lacuna .vazio-lei.certa,
.treino-card.treino-lacuna .vazio-lei.errada{
  min-width:0;
}

/* -------- estados finais da lacuna -------- */
.treino-card.treino-lacuna .vazio-lei.certa{
  background:var(--carimbo-fraco);
  color:var(--carimbo-forte);
  border-color:var(--carimbo);
}
.treino-card.treino-lacuna .vazio-lei.errada{
  background:var(--erro-fraco);
  color:var(--erro-forte);
  border-color:var(--erro);
}

@keyframes lacunaFixou{
  0%{transform:scale(.985)}
  60%{transform:scale(1.018)}
  100%{transform:scale(1)}
}
.treino-card.treino-lacuna.estado-ok .vazio-lei.certa{
  animation:lacunaFixou 200ms var(--ease-spring);
}

/* -------- retenção durante o voo --------
   marcar() já pintou tudo; estas regras seguram a revelação até o
   clone chegar. O JS remove as classes por tempo.                */
.treino-card.treino-lacuna.lacuna-animando .vazio-lei,
.treino-card.treino-lacuna.lacuna-animando .vazio-lei.certa,
.treino-card.treino-lacuna.lacuna-animando .vazio-lei.errada{
  color:transparent;
  background:transparent;
  border-color:var(--carimbo);
  animation:none;
}
.treino-card.treino-lacuna.lacuna-animando .tremor{
  animation:none;
}
.treino-card.treino-lacuna.lacuna-oculta-correta .ficha.certa{
  background:var(--papel-2);
  border-color:var(--linha);
  color:var(--tinta);
}

@media (prefers-reduced-motion:reduce){
  .treino-card.treino-lacuna.estado-ok .vazio-lei.certa{ animation:none }
  .treino-card.treino-lacuna .vazio-lei,
  .treino-card.treino-lacuna .ficha{ transition:none }
}

/* ================================================================
   CERTO/ERRADO — clareza do feedback (set/2026)
   Escopado em .treino-card.treino-ce, classe que telaCard() só aplica
   quando c.tipo === 'ce'. Múltipla escolha, lacuna e a amostra do
   onboarding não recebem nada daqui. O layout neutro (posição, tamanho
   e tipografia dos botões) não é tocado — só o estado pós-resposta.
   ================================================================ */

.treino-card.treino-ce .dupla .escolha{
  position:relative;
}

/* ícones de confirmação por pseudo-elemento: fora do fluxo, então o
   texto CERTO/ERRADO continua exatamente centralizado como antes */
.treino-card.treino-ce .escolha.errada::before,
.treino-card.treino-ce .escolha.certa::before{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:17px;
  font-weight:800;
  line-height:1;
}
.treino-card.treino-ce .escolha.errada::before{
  content:'✕';
  color:var(--erro-forte);
}
.treino-card.treino-ce .escolha.certa::before{
  content:'✓';
  color:var(--carimbo-forte);
}

/* a revelação genérica de múltipla escolha não vale aqui: no
   certo/errado ela é comandada por tempo, em dois momentos */
.treino-card.treino-ce.estado-erro .escolha.certa{
  animation:none;
}

/* -------- 1º tempo: o correto ainda não existe -------- */
.treino-card.treino-ce.ce-aguardando-correta .escolha.certa{
  background:var(--papel-2);
  border-color:var(--linha);
  color:var(--tinta);
  animation:none;
}
.treino-card.treino-ce.ce-aguardando-correta .escolha.certa::before{
  content:none;
}

/* -------- 2º tempo: o correto aparece -------- */
@keyframes ceRevelaCorreta{
  0%{
    opacity:.65;
    transform:scale(.985);
  }
  70%{
    opacity:1;
    transform:scale(1.015);
  }
  100%{
    opacity:1;
    transform:scale(1);
  }
}
.treino-card.treino-ce.estado-erro.ce-correta-revelada .escolha.certa{
  animation:ceRevelaCorreta 180ms var(--ease-out) both;
}

@media (prefers-reduced-motion:reduce){
  .treino-card.treino-ce.estado-erro.ce-correta-revelada .escolha.certa{
    animation:none;
  }
}