/* Trilha · estudo em fases curtas. App Stars Ventures. */
:root {
  --roxo: #4F25FF; --roxo-2: #6F4BFF; --roxo-f: #EEE9FF; --roxo-e: #3A17D6;
  --verde: #18A865; --verde-e: #11804C; --verde-f: #E2F7EC;
  --sol: #FFC233; --sol-e: #D99A00; --sol-f: #FFF5D6;
  --fogo: #FF7A1A; --vermelho: #D93652; --vermelho-e: #A82239; --vermelho-f: #FDE8EC;
  --tinta: #15122B; --tinta-2: #3B3755; --cinza: #6E6A85; --linha: #E6E3F0; --fundo: #F7F6FB; --card: #fff; --apagado: #E3E1EC; --apagado-e: #C9C6D6;
  --raio: 18px; --sombra: 0 1px 2px rgba(21,18,43,.05), 0 10px 28px rgba(21,18,43,.07);
  --fonte: "Nunito", "Inter", ui-rounded, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box }
html, body { margin: 0; background: var(--fundo); color: var(--tinta); font: 16px/1.5 var(--fonte); -webkit-font-smoothing: antialiased }
a { color: var(--roxo); text-decoration: none }
button, input, textarea, select { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--roxo) 50%, transparent); outline-offset: 2px; border-radius: 10px }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.01em }
h1 { font-size: 28px; font-weight: 800 } h2 { font-size: 20px; font-weight: 800 } h3 { font-size: 16px; font-weight: 800 }
p { margin: 0 }
.mudo { color: var(--cinza) } .peq { font-size: 13.5px } .num { font-variant-numeric: tabular-nums }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* botões "de apertar" (sombra embaixo, afunda no clique) */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 12px 18px; font-weight: 800; letter-spacing: .02em; background: var(--roxo); color: #fff; box-shadow: 0 4px 0 var(--roxo-e); transition: transform .06s, box-shadow .06s, filter .15s; text-transform: uppercase; font-size: 14.5px; min-height: 46px }
.bt:hover { filter: brightness(1.06) }
.bt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--roxo-e) }
.bt.verde { background: var(--verde); box-shadow: 0 4px 0 var(--verde-e) } .bt.verde:active { box-shadow: 0 1px 0 var(--verde-e) }
.bt.vermelho { background: var(--vermelho); box-shadow: 0 4px 0 var(--vermelho-e) }
.bt.claro { background: #fff; color: var(--roxo); border: 2px solid var(--linha); box-shadow: 0 3px 0 var(--linha) }
.bt.fantasma { background: transparent; color: var(--roxo); box-shadow: none; text-transform: none; letter-spacing: 0; padding: 8px 10px; min-height: 0 }
.bt.largo { width: 100% }
.bt[disabled] { background: var(--apagado); color: var(--cinza); box-shadow: 0 4px 0 var(--apagado-e); cursor: not-allowed; filter: none }
.bt.peq { padding: 8px 12px; min-height: 36px; font-size: 13px; border-radius: 12px }

input.campo, textarea.campo, select.campo { width: 100%; border: 2px solid var(--linha); border-radius: 14px; padding: 12px 14px; background: #fff; outline: none }
input.campo:focus, textarea.campo:focus, select.campo:focus { border-color: var(--roxo-2) }
textarea.campo { resize: vertical; min-height: 120px }
label.rot { display: block; font-weight: 800; font-size: 14px; margin: 14px 0 6px }

.card { background: var(--card); border: 2px solid var(--linha); border-radius: var(--raio); padding: 18px; min-width: 0 }
.pilula { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: var(--roxo-f); color: var(--roxo) }
.pilula.verde { background: var(--verde-f); color: var(--verde-e) } .pilula.sol { background: var(--sol-f); color: #8A5A00 } .pilula.vermelho { background: var(--vermelho-f); color: var(--vermelho-e) } .pilula.cinza { background: var(--apagado); color: var(--tinta-2) }

/* estrutura: lateral (desktop) · centro · painel direito */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr) 330px; min-height: 100vh }
.app.sem-painel { grid-template-columns: 240px minmax(0, 1fr) }
.lado { border-right: 2px solid var(--linha); padding: 22px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; background: #fff }
.marca { display: flex; align-items: center; gap: 10px; padding: 2px 10px 20px; color: var(--roxo) }
.marca b { font-size: 26px; font-weight: 900; letter-spacing: -.02em }
.lado a.item { display: flex; align-items: center; gap: 12px; color: var(--tinta-2); padding: 11px 12px; border-radius: 14px; font-weight: 800; font-size: 14.5px; text-transform: uppercase; letter-spacing: .03em; border: 2px solid transparent }
.lado a.item:hover { background: var(--fundo) }
.lado a.item.ativo { background: var(--roxo-f); color: var(--roxo); border-color: #CFC4FF }
.lado .rodape { margin-top: auto; padding: 10px; font-size: 12px; color: var(--cinza) }
.lado .rodape img { width: 118px; display: block; margin-top: 6px; opacity: .85 }
.centro { padding: 26px 32px 90px; min-width: 0; display: flex; flex-direction: column; align-items: center }
.centro > * { width: 100%; max-width: 640px }
.centro.largo > * { max-width: 920px }
.painel { padding: 26px 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px }
.topo-mob, .nav-mob { display: none }

/* status: ofensiva, xp, meta */
.stats { display: flex; gap: 8px; justify-content: space-between }
.stat { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 16px; padding: 6px 10px; border-radius: 12px }
.stat.fogo { color: var(--fogo) } .stat.fogo.apagado { color: var(--apagado-e) } .stat.xp { color: var(--sol-e) } .stat.cong { color: #2D8CFF }
.meta-barra { height: 16px; border-radius: 99px; background: var(--apagado); overflow: hidden }
.meta-barra > i { display: block; height: 100%; background: var(--sol); border-radius: 99px; transition: width .5s }
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: 12px; font-weight: 800; color: var(--cinza) }
.semana .d { display: grid; place-items: center; gap: 4px }
.semana .bola { width: 30px; height: 30px; border-radius: 50%; background: var(--apagado); display: grid; place-items: center }
.semana .bola.on { background: var(--fogo); color: #fff }
.semana .bola.hoje { box-shadow: 0 0 0 3px #FFD9BD }

/* caminho */
.cab-unidade { border-radius: var(--raio); padding: 16px 18px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 10px; box-shadow: 0 4px 0 rgba(0,0,0,.18) }
.cab-unidade small { display: block; opacity: .85; font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .06em }
.cab-unidade h2 { font-size: 19px }
.cab-unidade p { font-size: 14px; opacity: .92; margin-top: 2px }
.cor-0 { background: var(--verde) } .cor-1 { background: var(--roxo) } .cor-2 { background: #FF8A3D } .cor-3 { background: #1CB0F6 } .cor-4 { background: #CE57E8 } .cor-5 { background: #E0A100 }
.caminho { position: relative; display: flex; flex-direction: column; align-items: center; gap: 44px; padding: 40px 0 14px }
.no-wrap { --k: 0; --amp: min(92px, 19vw); position: relative; display: flex; align-items: center; justify-content: center; width: 100%; transform: translateX(calc(var(--k) * var(--amp))) }
.no { position: relative; width: 76px; height: 70px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: var(--verde); box-shadow: 0 7px 0 var(--verde-e); transition: transform .08s }
.no:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--verde-e) }
.no.feita { background: var(--sol); box-shadow: 0 7px 0 var(--sol-e) }
.no.bloqueada { background: var(--apagado); box-shadow: 0 7px 0 var(--apagado-e); color: #A9A5BB; cursor: not-allowed }
.no.preparando { background: var(--apagado); box-shadow: 0 7px 0 var(--apagado-e); color: var(--cinza) }
.no.atual::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 5px solid color-mix(in srgb, var(--verde) 35%, transparent); animation: pulso 1.6s infinite }
@keyframes pulso { 50% { transform: scale(1.07); opacity: .5 } }
.no .coroa { position: absolute; right: -6px; bottom: -6px; background: #fff; border-radius: 99px; font-size: 11px; font-weight: 900; color: var(--sol-e); padding: 1px 6px; border: 2px solid var(--sol) }
.balao-comecar { position: absolute; top: -50px; background: #fff; border: 2px solid var(--linha); color: var(--verde); font-weight: 900; padding: 6px 12px; border-radius: 12px; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; animation: boia 1.8s ease-in-out infinite; white-space: nowrap; z-index: 2 }
.balao-comecar::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; background: #fff; border-right: 2px solid var(--linha); border-bottom: 2px solid var(--linha); transform: translateX(-50%) rotate(45deg) }
@keyframes boia { 50% { transform: translateY(-5px) } }
.no-titulo { position: absolute; font-size: 13px; font-weight: 800; color: var(--tinta-2); width: 160px; line-height: 1.25 }
.no-wrap.aberto { z-index: 30 }
.no-titulo.dir { left: calc(50% + 52px) } .no-titulo.esq { right: calc(50% + 52px); text-align: right }
.mascote-lado { position: absolute; width: 104px }
.pop { position: absolute; z-index: 25; top: 86px; left: 50%; transform: translateX(calc(-50% - var(--k) * var(--amp))); width: min(320px, 92vw); background: var(--verde); color: #fff; border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra) }
.pop.feita { background: var(--sol); color: var(--tinta) }
.pop.bloqueada { background: #fff; color: var(--tinta); border: 2px solid var(--linha) }
.pop h3 { font-size: 17px } .pop p { font-size: 14px; margin: 4px 0 12px; opacity: .95 }
.pop .bt { width: 100%; background: #fff; color: var(--verde); box-shadow: 0 4px 0 rgba(0,0,0,.15) }
.pop.feita .bt { color: var(--sol-e) }

/* lição */
.licao { min-height: 100vh; display: flex; flex-direction: column; background: #fff }
.licao-topo { display: flex; align-items: center; gap: 14px; padding: 18px max(20px, calc(50% - 400px)) }
.fechar { border: 0; background: none; color: var(--cinza); padding: 4px; display: grid; place-items: center }
.progresso { flex: 1; height: 16px; background: var(--apagado); border-radius: 99px; overflow: hidden }
.progresso > i { display: block; height: 100%; background: var(--verde); border-radius: 99px; transition: width .4s; box-shadow: inset 0 -4px 0 rgba(0,0,0,.08) }
.licao-corpo { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 18px }
.licao-corpo h1 { font-size: 24px }
.cartao { border: 2px solid var(--linha); border-radius: var(--raio); padding: 22px; font-size: 18px; line-height: 1.55 }
.cartao h2 { margin-bottom: 8px; color: var(--roxo) }
.fala { display: flex; align-items: flex-end; gap: 12px }
.fala .bolha { position: relative; border: 2px solid var(--linha); border-radius: 16px; padding: 12px 14px; font-weight: 700; background: #fff }
.opcoes { display: grid; gap: 12px }
.opcao { text-align: left; border: 2px solid var(--linha); background: #fff; border-radius: 14px; padding: 14px 16px; font-size: 16.5px; font-weight: 700; box-shadow: 0 3px 0 var(--linha); display: flex; gap: 12px; align-items: center }
.opcao .tecla { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--linha); display: grid; place-items: center; font-size: 13px; color: var(--cinza) }
.opcao:hover { background: var(--fundo) }
.opcao.sel { border-color: #A796FF; background: var(--roxo-f); color: var(--roxo-e); box-shadow: 0 3px 0 #A796FF }
.opcao.certa { border-color: var(--verde); background: var(--verde-f); color: var(--verde-e); box-shadow: 0 3px 0 var(--verde) }
.opcao.errada { border-color: var(--vermelho); background: var(--vermelho-f); color: var(--vermelho-e); box-shadow: 0 3px 0 var(--vermelho) }
.opcao[disabled] { cursor: default }
.tipo-q { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--roxo) }
.lacuna { display: inline-block; min-width: 90px; border-bottom: 3px solid var(--roxo-2); margin: 0 4px; color: var(--roxo); text-align: center }
.licao-rodape { border-top: 2px solid var(--linha); padding: 18px max(20px, calc(50% - 400px)); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap }
.licao-rodape.ok { background: var(--verde-f); border-color: transparent }
.licao-rodape.ruim { background: var(--vermelho-f); border-color: transparent }
.retorno { display: flex; gap: 12px; align-items: flex-start; min-width: 0; flex: 1 }
.retorno h3 { font-size: 20px }
.licao-rodape.ok .retorno h3 { color: var(--verde-e) } .licao-rodape.ruim .retorno h3 { color: var(--vermelho-e) }
.retorno p { font-size: 14.5px }
.fonte-mini { margin-top: 6px; font-size: 12.5px; color: var(--tinta-2); background: rgba(255,255,255,.7); border-radius: 10px; padding: 6px 10px }
.fonte-mini b { color: var(--roxo) }
.fim { text-align: center; align-items: center; justify-content: center }
.fim .placas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
.placa { border: 2px solid; border-radius: 16px; min-width: 128px; overflow: hidden; font-weight: 900 }
.placa small { display: block; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 4px }
.placa b { display: block; padding: 10px; font-size: 22px; background: #fff }
.placa.sol { border-color: var(--sol) } .placa.sol small { background: var(--sol) } .placa.sol b { color: var(--sol-e) }
.placa.verde { border-color: var(--verde) } .placa.verde small { background: var(--verde) } .placa.verde b { color: var(--verde-e) }
.placa.fogo { border-color: var(--fogo) } .placa.fogo small { background: var(--fogo) } .placa.fogo b { color: var(--fogo) }
.confete { position: fixed; inset: 0; pointer-events: none; overflow: hidden }
.confete i { position: absolute; top: -12px; width: 10px; height: 14px; border-radius: 3px; animation: cai 2.4s ease-in forwards }
@keyframes cai { to { transform: translateY(110vh) rotate(540deg) } }

/* mascote */
.lume { display: block }
.lume .olho { transform-origin: center; animation: pisca 4.5s infinite }
@keyframes pisca { 0%, 92%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }
.lume.pula { animation: pula .6s ease-out 2 }
@keyframes pula { 40% { transform: translateY(-14px) rotate(-6deg) } }

/* trilhas (início) */
.lista-trilhas { display: grid; gap: 14px }
.trilha-card { display: flex; gap: 16px; align-items: center; border: 2px solid var(--linha); border-radius: var(--raio); padding: 16px; background: #fff; color: var(--tinta); box-shadow: 0 4px 0 var(--linha) }
.trilha-card:hover { border-color: #CFC4FF }
.trilha-card .ico { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; color: #fff }
.trilha-card .meio { flex: 1; min-width: 0 }
.trilha-card h3 { overflow-wrap: anywhere }
.barra-mini { height: 10px; border-radius: 99px; background: var(--apagado); overflow: hidden; margin-top: 8px }
.barra-mini > i { display: block; height: 100%; background: var(--verde) }
.vazio { text-align: center; padding: 34px 20px; display: grid; justify-items: center; gap: 10px }
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px }
.topo .sub { color: var(--cinza); margin-top: 4px }

/* nova trilha */
.passos { display: flex; gap: 8px; margin-bottom: 14px }
.passos span { flex: 1; height: 6px; border-radius: 99px; background: var(--apagado) } .passos span.on { background: var(--roxo) }
.abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px }
.aba { border: 2px solid var(--linha); background: #fff; border-radius: 12px; padding: 8px 14px; font-weight: 800; font-size: 14px; display: inline-flex; gap: 8px; align-items: center }
.aba.on { border-color: var(--roxo); color: var(--roxo); background: var(--roxo-f) }
.soltar { border: 2px dashed #CFC4FF; border-radius: var(--raio); padding: 26px; text-align: center; background: #FBFAFF; display: grid; gap: 8px; justify-items: center }
.soltar.sobre { background: var(--roxo-f) }
.mat { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 2px solid var(--linha) }
.mat:first-child { border-top: 0 }
.mat .meio { flex: 1; min-width: 0 }
.mat .meio b { display: block; overflow-wrap: anywhere }
.mat input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--roxo) }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.niveis { display: flex; gap: 8px; flex-wrap: wrap }
.nivel { flex: 1; min-width: 120px; border: 2px solid var(--linha); background: #fff; border-radius: 14px; padding: 10px; font-weight: 800; text-align: center }
.nivel.on { border-color: var(--roxo); background: var(--roxo-f); color: var(--roxo) }

/* tutor */
.chat { display: flex; flex-direction: column; gap: 14px; padding-bottom: 12px }
.msg { max-width: 88%; border-radius: 18px; padding: 12px 15px; font-size: 15.5px; white-space: pre-wrap; overflow-wrap: anywhere }
.msg.aluno { align-self: flex-end; background: var(--roxo); color: #fff; border-bottom-right-radius: 6px }
.msg.tutor { align-self: flex-start; background: #fff; border: 2px solid var(--linha); border-bottom-left-radius: 6px }
.msg.tutor.nao { background: var(--sol-f); border-color: #FFE29A }
.cit { display: inline-block; background: var(--roxo-f); color: var(--roxo); font-weight: 900; border-radius: 6px; padding: 0 5px; font-size: 12px; border: 0; vertical-align: 1px }
.fontes-msg { margin-top: 10px; display: grid; gap: 6px }
.fontes-msg details { background: var(--fundo); border-radius: 10px; padding: 6px 10px; font-size: 13px }
.fontes-msg summary { cursor: pointer; font-weight: 800 }
.caixa-chat { position: sticky; bottom: 0; background: var(--fundo); padding: 12px 0 8px; display: flex; gap: 10px }
.caixa-chat textarea { min-height: 52px; height: 52px; flex: 1 }
.sugestoes { display: flex; gap: 8px; flex-wrap: wrap }
.sugestoes button { border: 2px solid var(--linha); background: #fff; border-radius: 99px; padding: 6px 12px; font-size: 13.5px; font-weight: 700 }

/* tabelas simples */
.tab { width: 100%; border-collapse: collapse; font-size: 14.5px }
.tab th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza); padding: 8px 6px; border-bottom: 2px solid var(--linha) }
.tab td { padding: 10px 6px; border-bottom: 1px solid var(--linha); vertical-align: middle }
.codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--fundo); border: 2px solid var(--linha); border-radius: 10px; padding: 10px; overflow-wrap: anywhere; user-select: all }

/* entrada */
.entrada { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.entrada .arte { background: var(--roxo); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 22px; position: relative; overflow: hidden }
.entrada .arte h1 { font-size: 44px; line-height: 1.05; font-weight: 900 }
.entrada .arte p { font-size: 18px; opacity: .92; max-width: 520px }
.entrada .arte .marca { color: #fff; padding: 0 }
.entrada .forms { padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 16px; max-width: 520px; width: 100%; margin: 0 auto }
.mini-caminho { display: flex; gap: 14px; align-items: center }
.mini-caminho i { width: 46px; height: 42px; border-radius: 50%; background: var(--verde); box-shadow: 0 5px 0 var(--verde-e); display: block }
.mini-caminho i.s { background: var(--sol); box-shadow: 0 5px 0 var(--sol-e) } .mini-caminho i.c { background: rgba(255,255,255,.25); box-shadow: 0 5px 0 rgba(0,0,0,.15) }
.ou { display: flex; align-items: center; gap: 10px; color: var(--cinza); font-weight: 800; font-size: 13px }
.ou::before, .ou::after { content: ""; flex: 1; height: 2px; background: var(--linha) }
.aviso-chave { background: var(--sol-f); border: 2px solid #FFE29A; border-radius: 14px; padding: 14px }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: .25s; z-index: 60; max-width: 92vw }
#toast.on { opacity: 1; transform: translate(-50%, 0) }
.carregando { display: grid; place-items: center; padding: 60px; color: var(--cinza); gap: 10px }
.gira { width: 30px; height: 30px; border-radius: 50%; border: 4px solid var(--apagado); border-top-color: var(--roxo); animation: gira 1s linear infinite }
@keyframes gira { to { transform: rotate(360deg) } }

/* telas médias: sem painel direito */
@media (max-width: 1180px) { .app { grid-template-columns: 220px minmax(0, 1fr) } .painel { display: none } .painel-inline { display: flex !important } }
.painel-inline { display: none; flex-direction: column; gap: 12px; margin-bottom: 12px }
/* celular */
@media (max-width: 760px) {
  .app, .app.sem-painel { grid-template-columns: minmax(0, 1fr) }
  .lado { display: none }
  .topo-mob { display: flex; position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 2px solid var(--linha); padding: 10px 14px; align-items: center; justify-content: space-between; gap: 8px }
  .topo-mob .marca { padding: 0 } .topo-mob .marca b { font-size: 20px }
  .nav-mob { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: #fff; border-top: 2px solid var(--linha); justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) }
  .nav-mob a { display: grid; justify-items: center; gap: 2px; color: var(--cinza); font-size: 11px; font-weight: 800; padding: 6px 8px; border-radius: 12px; min-width: 60px }
  .nav-mob a.ativo { color: var(--roxo); background: var(--roxo-f) }
  .centro { padding: 16px 14px 96px }
  h1 { font-size: 23px }
  .entrada { grid-template-columns: 1fr } .entrada .arte { padding: 28px 22px } .entrada .arte h1 { font-size: 32px } .entrada .forms { padding: 24px 18px 40px }
  .grade2 { grid-template-columns: 1fr }
  .no-titulo { display: none }
  .caminho { gap: 58px; overflow-x: clip } /* o zigue-zague desloca a caixa inteira de cada nó; no celular ela passava da tela */
  .mascote-lado { display: none }
  .cartao { font-size: 17px; padding: 18px }
  .licao-rodape .bt { width: 100% }
  .msg { max-width: 94% }
  .stat { padding: 4px 6px; font-size: 15px }
}

/* Auditoria BaitaOS 13/10/2026 (celular): sem "elástico" no iPhone e campo com 16 px no toque (o iOS não dá zoom ao digitar). */
html, body { overscroll-behavior: none; }
@media (pointer: coarse), (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select { font-size: max(16px, 1em) !important; }
}

/* Auditoria 13/10/2026 (contraste AA): botão verde com texto branco a 4,5:1 */
.bt.verde { background: #12804C }

/* conta BaitaOS: escolha de empresa, faixa da demonstração e edição da trilha */
.bt-link { background: none; border: 0; padding: 0; color: var(--roxo); font-weight: 800; text-decoration: underline; text-underline-offset: 3px }
.lista-empresas { display: flex; flex-direction: column; gap: 10px }
.empresa { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; text-align: left; background: var(--card); border: 2px solid var(--linha); border-bottom-width: 4px; border-radius: 16px; transition: border-color .15s, transform .06s }
.empresa:hover { border-color: var(--roxo-2) }
.empresa:active { transform: translateY(2px) }
.empresa b { min-width: 0; overflow-wrap: anywhere }
.entrada .forms > .card h3 + .peq { margin: 4px 0 6px }
.faixa-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 18px; background: var(--sol-f); border-bottom: 2px solid var(--sol); color: var(--tinta); font-size: 14px }
.faixa-demo b { text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; color: #8A5A00 }
.faixa-demo a { margin-left: auto; font-weight: 800 }
.editar-trilha { display: grid; gap: 2px; max-width: 520px }
@media (prefers-reduced-motion: no-preference) { .entrada .forms.conta > *, .editar-trilha { animation: subir .28s ease-out both } }
@keyframes subir { from { opacity: 0; transform: translateY(6px) } }