/* ---------- trilha (estilo Duolingo) ---------- */
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c) }
.c-mat { --c: var(--mat); --cs: var(--mat-soft) } .c-bio { --c: var(--bio); --cs: var(--bio-soft) }
.c-qui { --c: var(--qui); --cs: var(--qui-soft) } .c-fis { --c: var(--fis); --cs: var(--fis-soft) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--paper); border-radius: 14px; padding: 10px 18px; cursor: pointer; font: 700 15px/1.2 var(--f-body); text-decoration: none; color: var(--ink) }
.btn:hover { border-color: var(--c, var(--accent)) }
.btn:active { transform: translateY(2px); border-bottom-width: 2px }
.btn.primario { background: var(--c, var(--accent)); color: var(--paper); border-color: color-mix(in srgb, var(--c, var(--accent)) 70%, black) }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none }
.btn.grande { font-size: 17px; padding: 14px 22px }
.barra-topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line) }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg) }
.bt-in { max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)) }
.logo { font: 800 20px/1 var(--f-head); margin-right: auto }
.logo span { color: var(--accent) }
.chip { font: 700 13px/1 var(--f-body); border: 2px solid var(--line); border-radius: 999px; padding: 7px 11px; background: var(--paper); color: var(--ink) }
.chip.xp { color: var(--fis) }
.btn-livre { cursor: pointer }
.btn-livre[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }
.prog-geral { height: 5px; background: var(--soft) }
.prog-geral i { display: block; height: 100%; background: var(--ok); transition: width .3s }
.trilha-wrap { max-width: 760px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right, 0px)) 60px max(16px, env(safe-area-inset-left, 0px)) }
.intro h1 { font: 800 clamp(28px, 5vw, 40px)/1.08 var(--f-head); margin: 8px 0 8px; text-wrap: balance; letter-spacing: -.01em }
.intro p { color: var(--muted); max-width: 62ch; margin: 0 0 16px }
.unidade { margin-top: 30px }
.u-banner { background: var(--mat); border-radius: 16px; padding: 14px 18px; display: flex; gap: 12px; align-items: center; justify-content: space-between }
.unidade:nth-of-type(4n+3) .u-banner { background: var(--qui) } .unidade:nth-of-type(4n) .u-banner { background: var(--bio) } .unidade:nth-of-type(4n+1) .u-banner { background: var(--fis) }
.u-banner h2 { font: 800 21px/1.15 var(--f-head); margin: 2px 0 2px; color: var(--paper) }
.u-banner p { margin: 0; font-size: 14.5px; opacity: .92; color: var(--paper) }
.u-num { font: 700 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); opacity: .85 }
.u-cont { font: 700 15px var(--f-mono); background: rgba(255,255,255,.22); color: var(--paper); border-radius: 999px; padding: 6px 10px; white-space: nowrap }
.caminho { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px }
.no { display: flex; align-items: center; gap: 14px; margin-left: calc(var(--off) * min(18%, 120px)) }
.bolha { width: 70px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--paper); box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 65%, black); text-decoration: none; flex: none; font: 800 22px var(--f-head) }
a.bolha:hover { filter: brightness(1.06) }
a.bolha:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 65%, black) }
.no.feito .bolha { background: var(--ok); box-shadow: 0 6px 0 color-mix(in srgb, var(--ok) 60%, black) }
.no.bloq .bolha { background: var(--soft); color: var(--muted); box-shadow: 0 6px 0 var(--line); font-size: 20px }
.no.atual .bolha { outline: 4px solid var(--cs); outline-offset: 4px; animation: pulsa 1.6s ease-in-out infinite }
@keyframes pulsa { 50% { outline-offset: 8px } }
.no-txt { display: grid; gap: 2px; min-width: 0 }
.no-txt .sig { font: 700 11.5px/1.2 var(--f-mono); color: var(--c); letter-spacing: .05em }
.no-txt .sig b { color: var(--fis) }
.no-txt .tit { font: 700 16px/1.25 var(--f-head) }
.no.bloq .tit { color: var(--muted) }
.balao { justify-self: start; background: var(--c); color: var(--paper); font: 700 12px var(--f-body); padding: 4px 8px; border-radius: 6px; margin-top: 2px }
.no.trofeu .bolha { background: var(--soft); color: var(--muted); box-shadow: 0 6px 0 var(--line); border-radius: 18px }
.no.trofeu.feito .bolha { background: #f5b301; color: #4a3500; box-shadow: 0 6px 0 #b98500 }
.rodape { margin-top: 40px; font-size: 13.5px; color: var(--muted) }
.fim { font-weight: 700; color: var(--ok) }

/* ---------- lição ---------- */
.licao { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto }
.l-topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); display: flex; align-items: center; gap: 14px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); max-width: 852px; width: 100%; margin: 0 auto }
.fechar { font: 700 22px/1 var(--f-body); color: var(--muted); text-decoration: none; padding: 4px 8px }
.l-prog { flex: 1; height: 14px; background: var(--soft); border-radius: 999px; overflow: hidden }
.l-prog i { display: block; height: 100%; background: var(--c); border-radius: 999px; transition: width .3s }
.l-cont { font: 600 13px var(--f-mono); color: var(--muted) }
.l-corpo { padding: 6px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)) }
.l-in { max-width: 820px; margin: 0 auto }
.l-rodape { position: sticky; bottom: 0; background: var(--paper); border-top: 2px solid var(--line); padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) }
.rod { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end }
.rod .fb { margin-right: auto; font-weight: 700; color: var(--muted) }
.fb.ok { color: var(--ok) } .fb.no { color: var(--bad) }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 13px/1.2 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--c); margin: 4px 0 6px }
.licao h1 { font: 800 clamp(28px, 5vw, 42px)/1.06 var(--f-head); margin: 6px 0 6px; letter-spacing: -.015em; text-wrap: balance }
.licao h2 { font: 800 clamp(22px, 3.6vw, 28px)/1.15 var(--f-head); margin: 4px 0 12px; text-wrap: balance }
.licao h1:focus, .licao h2:focus, .kicker:focus { outline: none }
.sub { color: var(--muted); font-size: 18.5px; margin: 0 0 14px }
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; align-items: center }
.stats.centro { justify-content: center }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px }
.stat b { font-family: var(--f-mono) }
.pri { font: 700 11.5px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px }
.pri-max { background: var(--fis); color: var(--paper) } .pri-alta { background: var(--cs); color: var(--c) } .pri-media { border: 1px solid var(--line); color: var(--muted) } .pri-comp { color: var(--muted) }
.cartao { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 10px 0 }
.cartao.roteiro { border-left: 5px solid var(--c) }
.ideia { font-size: 18px }
.ideia p, .ideia li { max-width: 66ch }
.ideia b { background: linear-gradient(transparent 62%, var(--hl) 62%) }
.ideia ul, .ideia ol { padding-left: 22px }
.ideia li { margin-bottom: 8px }
.formulas { display: grid; gap: 14px }
.fcard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; border-top: 5px solid var(--c); min-width: 0 }
.fnome { font: 700 13px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--c) }
.feq { font: 700 clamp(16px, 3vw, 21px)/1.45 var(--f-mono); background: var(--cs); border-radius: 10px; padding: 12px 14px; margin: 10px 0; overflow-wrap: anywhere }
.fcard dl { display: grid; grid-template-columns: minmax(48px, auto) 1fr; gap: 6px 14px; margin: 0 0 10px }
.fcard dt { font: 700 15px var(--f-mono); color: var(--c) }
.fcard dd { margin: 0 }
.fcard p { margin: 8px 0 0 }
.fex { background: var(--soft); border-radius: 8px; padding: 8px 10px; font-family: var(--f-mono); font-size: 14.5px }
.bolso { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px }
.bolso li { font: 500 15px/1.45 var(--f-mono); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; border-left: 4px solid var(--c) }
.pergunta { font-size: 19px; font-weight: 700; margin: 6px 0 14px }
.ex-passos { padding-left: 24px; font-size: 18px; display: grid; gap: 8px }
.ex-passos li { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px }
.ex-passos li[hidden] { display: none }
.peg { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.peg li { background: var(--bad-soft); border-radius: 12px; padding: 12px 14px 12px 44px; position: relative; font-size: 17px }
.peg li::before { content: "!"; position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--bad); color: var(--paper); font: 700 13px/20px var(--f-mono); text-align: center }
.qtag { font: 600 13px/1 var(--f-mono); color: var(--muted); margin: 2px 0 10px }
.qimg { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px }
.qimg img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto }
.qimg img.larga { max-width: 100% }
.dica-zoom { font-size: 13px; color: var(--muted); margin: 6px 0 12px }
.opcoes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-width: 520px }
.op { font: 800 22px/1 var(--f-head); height: 58px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 5px; background: var(--paper); color: var(--ink); cursor: pointer }
.op:hover:not(:disabled) { border-color: var(--c) }
.op.certa { background: var(--ok-soft); border-color: var(--ok); color: var(--ok) }
.op.errada { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); text-decoration: line-through }
.op:disabled { cursor: default }
.fim-licao { text-align: center; padding-top: 20px }
.fim-licao .cartao { text-align: left }
.medalha { width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; background: #f5b301; color: #4a3500; display: grid; place-items: center; font-size: 56px; box-shadow: 0 8px 0 #b98500 }
.edcley { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 10px 0 0 }
.edcley li { font: 500 13.5px/1 var(--f-mono); background: var(--cs); padding: 8px 10px; border-radius: 6px }
.nota { color: var(--muted); font-size: 15px }
@media (max-width: 600px) {
  .bolha { width: 60px; height: 58px; font-size: 19px }
  .no { margin-left: calc(var(--off) * 12%) }
  .ideia, .ex-passos { font-size: 17px }
  .op { height: 52px; font-size: 20px }
  .opcoes { gap: 6px }
}
@media (prefers-reduced-motion: reduce) { .no.atual .bolha { animation: none } * { transition: none !important } }
.c-int { --c: var(--accent); --cs: var(--soft) }
table.matriz { width: auto; font: 600 16px var(--f-mono) }
table.matriz td, table.matriz th { text-align: center; min-width: 54px }
table.matriz td.hl { background: var(--c); color: var(--paper) }
.espectro { display: flex; flex-wrap: wrap; gap: 4px }
.espectro span { flex: 1 1 80px; text-align: center; padding: 10px 6px; border-radius: 8px; background: var(--soft); font-size: 14px; font-weight: 700 }
.espectro .vis { background: linear-gradient(90deg, #e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #5e35b1); color: #fff }
.espectro .ion { background: var(--bad-soft); color: var(--bad) }