:root{}
@font-face{font-family:'NotoMusicLocal';src:url('../fonts/noto-music-sub.woff2') format('woff2');font-display:swap;unicode-range:U+1D100-1D1FF,U+2669-266F}

:root{--azul:#1F3864;--azul2:#2e57a3;--fundo:#f6f7fb;--ok:#1e7e34;--erro:#b02a37;--cinza:#5a6270;}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,Arial,'Noto Music','NotoMusicLocal',sans-serif;background:var(--fundo);color:#222;line-height:1.55}
header.topo{background:var(--azul);color:#fff;padding:18px 20px}
header.topo a{color:#cdd9f2;text-decoration:none;font-size:.9rem}
header.topo h1{margin:6px 0 2px;font-size:1.35rem}
header.topo p{margin:0;color:#cdd9f2;font-size:.95rem}
.progresso{position:sticky;top:0;z-index:9;background:#fff;border-bottom:1px solid #dde2ec;padding:8px 20px;display:flex;align-items:center;gap:12px}
.barra{flex:1;height:10px;background:#e6eaf3;border-radius:6px;overflow:hidden}
.barra>div{height:100%;width:0;background:var(--azul2);transition:width .4s}
.progresso span{font-size:.85rem;color:var(--cinza);white-space:nowrap}
main{max-width:860px;margin:0 auto;padding:24px 20px 80px}
section.passo{background:#fff;border:1px solid #dde2ec;border-radius:12px;padding:22px 24px;margin:0 0 22px;box-shadow:0 1px 3px rgba(20,40,80,.05)}
section.passo.bloqueado{display:none}
section.passo h2{margin:0 0 10px;color:var(--azul);font-size:1.15rem}
section.passo h2 .num{display:inline-block;background:var(--azul);color:#fff;border-radius:50%;width:28px;height:28px;line-height:28px;text-align:center;font-size:.9rem;margin-right:10px}
figure{margin:14px 0;text-align:left}
figure img{max-width:100%;height:auto;background:#fff;border:1px solid #eef0f6;border-radius:8px;padding:10px 14px}
figcaption{font-size:.85rem;color:var(--cinza);margin-top:4px}
.quiz{border:1px solid #dde2ec;border-radius:10px;padding:14px 16px;margin:16px 0;background:#fafbfe}
.quiz p.qq{margin:0 0 10px;font-weight:600}
.quiz p.qq::before{content:"✎ Consolidação — ";color:var(--azul2);font-weight:700}
.quiz button.op{display:block;width:100%;text-align:left;margin:6px 0;padding:9px 12px;border:1px solid #ccd4e4;border-radius:8px;background:#fff;cursor:pointer;font-size:.95rem}
.quiz button.op:hover{border-color:var(--azul2)}
.quiz button.op.certo{background:#e6f4ea;border-color:var(--ok);color:var(--ok);font-weight:600}
.quiz button.op.errado{background:#fdecee;border-color:var(--erro);color:var(--erro)}
.quiz .expl{display:none;margin-top:10px;padding:10px 12px;border-left:4px solid var(--ok);background:#f0f8f2;font-size:.92rem;border-radius:0 8px 8px 0}
.quiz.done .expl{display:block}
.continuar{display:none;margin:8px 0 0;padding:11px 22px;border:0;border-radius:8px;background:var(--azul2);color:#fff;font-size:1rem;cursor:pointer}
.continuar:hover{background:var(--azul)}
section.passo.completa .continuar{display:inline-block}
section.passo.terminada .continuar{display:none}
.selo{display:none;color:var(--ok);font-weight:700;font-size:.9rem;margin-left:8px}
section.passo.terminada .selo{display:inline}
.fim{background:#e9f0fb;border:1px solid #c6d4ee;border-radius:12px;padding:20px 24px;margin-top:10px}
.fim h2{color:var(--azul);margin-top:0}
nav.rodape{display:flex;justify-content:space-between;margin-top:26px;gap:12px;flex-wrap:wrap}
nav.rodape a{background:#fff;border:1px solid #ccd4e4;border-radius:8px;padding:10px 16px;text-decoration:none;color:var(--azul);font-weight:600}
nav.rodape a:hover{border-color:var(--azul2)}
.grelha{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:20px}
.cartao{background:#fff;border:1px solid #dde2ec;border-radius:12px;padding:18px;text-decoration:none;color:inherit;display:block;box-shadow:0 1px 3px rgba(20,40,80,.05)}
.cartao:hover{border-color:var(--azul2)}
.cartao h3{margin:0 0 6px;color:var(--azul)}
.cartao p{margin:0 0 12px;font-size:.88rem;color:var(--cinza)}
.cartao .mini{height:8px;background:#e6eaf3;border-radius:5px;overflow:hidden}
.cartao .mini>div{height:100%;background:var(--azul2)}
.cartao .pct{font-size:.8rem;color:var(--cinza);margin-top:5px;display:block}
.aviso{background:#fff;border:1px solid #dde2ec;border-left:5px solid var(--azul2);border-radius:8px;padding:14px 18px;margin-top:22px;font-size:.93rem}
.reiniciar{margin-top:30px;font-size:.85rem}
.reiniciar button{background:none;border:1px solid #ccd4e4;border-radius:6px;padding:6px 12px;color:var(--cinza);cursor:pointer}

/* ——— Otimizações para ecrãs táteis e mobile ——— */
button{font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:rgba(46,87,163,.15)}
.quiz button.op{min-height:44px}
html{-webkit-text-size-adjust:100%}
@media (max-width:600px){
  header.topo{padding:14px 16px}
  header.topo h1{font-size:1.15rem}
  header.topo p{font-size:.88rem}
  .progresso{padding:8px 14px}
  main{padding:16px 12px 70px}
  section.passo{padding:16px 14px;border-radius:10px}
  section.passo h2{font-size:1.05rem}
  figure img{padding:6px 8px}
  .quiz{padding:12px 12px}
  .quiz button.op{font-size:1rem;padding:12px 12px}
  .continuar{width:100%;padding:14px 22px;font-size:1.05rem}
  section.passo.completa .continuar{display:block}
  section.passo.terminada .continuar{display:none}
  nav.rodape a{flex:1;text-align:center}
  .grelha{grid-template-columns:1fr;gap:12px}
  .fim{padding:16px 14px}
}

/* símbolos musicais como SVG inline (independentes de fontes) */
.glifo{height:.95em;width:auto;vertical-align:-.08em;display:inline-block}

/* contraditório pedagógico da opção errada */
.porque{display:none;margin:8px 0 4px;padding:9px 12px;border-left:3px solid var(--erro);
  background:#fdf3f4;border-radius:0 10px 10px 0;font-size:.92rem;color:#7a2830;line-height:1.5}
.porque.on{display:block;animation:porque-in .18s ease-out}
.quiz.done .porque{display:none}
@keyframes porque-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* ===== Camada pedagógica ===== */
.ideia{background:#eef3fc;border-left:4px solid var(--azul2);border-radius:0 10px 10px 0;padding:10px 14px;margin:6px 0 14px;font-size:1rem}
.passos{margin:14px 0}
.passos h3,.pratica h3,.tabela h3,.demos h3,.pautas h3{margin:0 0 6px;font-size:.95rem;color:var(--azul2);text-transform:uppercase;letter-spacing:.04em}
.passos ol{margin:0;padding-left:1.25em}
.passos li{margin:6px 0}
.passos li strong{color:var(--azul)}
.ouvir{display:inline-flex;align-items:center;gap:6px;margin:6px 8px 6px 0;padding:8px 14px;border:1px solid var(--azul2);border-radius:999px;background:#fff;color:var(--azul2);font-weight:600;font-size:.92rem;cursor:pointer;min-height:40px}
.ouvir:hover,.ouvir.a-tocar{background:var(--azul2);color:#fff}
.ouvir.a-tocar{box-shadow:0 0 0 4px rgba(46,87,163,.2)}
figure .ouvir{margin-top:8px}
/* demonstrações de conceitos (separadas das pautas) e figuras com o seu próprio som fiel */
.demos{margin:14px 0;padding:10px 12px;border:1px dashed #c9d3ea;border-radius:10px;background:#fafbfe}
.demos .sons{margin:0}
.pautas{margin:14px 0}
.pautas figure{margin:10px 0 18px}
.ouvir.pauta{display:flex;width:100%;justify-content:center;margin:8px 0 0;border-style:solid;background:#f3f6fc}
.ouvir.pauta:hover,.ouvir.pauta.a-tocar{background:var(--azul2);color:#fff}
.teclado{width:100%;max-width:420px;height:auto;display:block;margin:10px auto;touch-action:manipulation;user-select:none}
.tecla{cursor:pointer}
.tecla.branca.premida{fill:#dbe6fb}.tecla.preta.premida{fill:#2e57a3}
dfn[data-def]{font-style:normal;border-bottom:1px dotted var(--azul2);color:var(--azul2);cursor:pointer;font-weight:600}
.def{display:block;margin:8px 0 2px;padding:8px 12px;background:#fffbe6;border-left:3px solid #d9a400;border-radius:0 8px 8px 0;font-size:.9rem;color:#5a4a00}
.pratica{border:1px dashed #b9c4dc;border-radius:10px;padding:12px 14px;margin:16px 0;background:#fbfcff}
.pratica .nota{font-size:.82rem;color:var(--cinza);margin:0 0 8px}
.treino{margin:10px 0}
.treino p{margin:0 0 6px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 14px;border:1px solid #ccd4e4;border-radius:999px;background:#fff;cursor:pointer;font-size:.95rem;min-height:40px}
.chip.certo{background:#e6f4ea;border-color:var(--ok);color:var(--ok);font-weight:600}
.chip.errado{background:#fdecee;border-color:var(--erro);color:var(--erro)}
.fb{margin:8px 0 0;font-size:.9rem;min-height:1.2em}
.fb.ok{color:var(--ok)}.fb.ko{color:#7a2830}
.truque{background:#fff8e1;border:1px solid #f2dd9a;border-radius:10px;padding:10px 14px;margin:14px 0;font-size:.95rem}
.tabela table{border-collapse:collapse;width:100%;font-size:.92rem;margin:6px 0 10px}
.tabela th,.tabela td{border:1px solid #dde2ec;padding:6px 8px;text-align:center}
.tabela th{background:#eef3fc;color:var(--azul)}
details.resumo{margin:14px 0 4px;background:#f6f7fb;border:1px solid #dde2ec;border-radius:10px;padding:8px 14px}
details.resumo summary{cursor:pointer;font-weight:700;color:var(--azul)}
details.resumo ul{margin:8px 0 4px;padding-left:1.2em}
dfn[data-def].aberto{background:#fffbe6;border-radius:4px}