feat(web): guia do painel com botão ⓘ em cada seção

Um ⓘ ao lado do título de cada seção (Ao vivo, Vida, Eventos, Ajustes,
Reações, Conversa, Movimento) abre a explicação daquela parte: o que faz
cada opção, onde fica e uma dica. No cartão Vida também há ⓘ para
humores, cuidados e ritmo. O ⓘ do topo explica a tela atual.

A página Guia (#/guia) junta todos os 21 tópicos em ordem de tutorial,
com índice e busca; cada tópico também aparece no Ctrl+K e há atalho em
Ajustes › Sistema.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/telas/AoVivo.svelte

@@ -125,12 +125,12 @@ const pirAtivo = $derived(
   <div class="lista">
     <VidaCartao />
 
-    <Grupo titulo="Celular">
+    <Grupo titulo="Celular" ajuda="celular">
       <Celular />
       <Linha icone={RefreshCw} cor="#0a84ff" rotulo="Recarregar tela do celular" onclick={recarregarCelular} disabled={!estado.celularOnline} />
     </Grupo>
 
-    <Grupo titulo="Câmera" rodape={transmitindo && rastreio ? rastreio.texto : 'O vídeo vai direto do celular para este navegador (WebRTC); nada é gravado.'}>
+    <Grupo titulo="Câmera" ajuda="camera" rodape={transmitindo && rastreio ? rastreio.texto : 'O vídeo vai direto do celular para este navegador (WebRTC); nada é gravado.'}>
       <Linha icone={Video} cor="#34c759" rotulo="Transmitir câmera do celular" detalhe={video?.exibindo ? video.qualidade : ''}>
         {#snippet acessorio()}
           <Interruptor rotulo="Transmitir câmera do celular" checked={transmitindo} disabled={!cfg} onchange={(v) => salvarApp({ preview: v })} />
@@ -161,14 +161,14 @@ const pirAtivo = $derived(
       <Linha icone={Settings2} cor="#8e8e93" rotulo="Qualidade, câmera frontal/traseira e sensores" href="#/ajustes" />
     </Grupo>
 
-    <Grupo titulo="Gestos" rodape="Teclas 1 a 9 disparam os nove primeiros. Ctrl+K busca qualquer gesto.">
+    <Grupo titulo="Gestos" ajuda="gestos" rodape="Teclas 1 a 9 disparam os nove primeiros. Ctrl+K busca qualquer gesto.">
       <Linha icone={Smile} cor="#ffcc00" rotulo="Favoritos">
         <Gestos />
       </Linha>
       <Linha icone={Sparkles} cor="#ff2d55" rotulo="Todos os gestos e reações" href="#/reacoes" />
     </Grupo>
 
-    <Grupo titulo="Aparência">
+    <Grupo titulo="Aparência" ajuda="aparencia">
       <Linha
         icone={Palette}
         cor="#ff9500"
@@ -182,7 +182,7 @@ const pirAtivo = $derived(
       </Linha>
     </Grupo>
 
-    <Grupo titulo="Personalidade" rodape={estado.ia?.erro || 'Qwen escolhe expressões a partir de sons e movimentos do celular.'}>
+    <Grupo titulo="Personalidade" ajuda="personalidade" rodape={estado.ia?.erro || 'Qwen escolhe expressões a partir de sons e movimentos do celular.'}>
       <Linha
         icone={Brain}
         cor="#5e5ce6"
@@ -195,7 +195,7 @@ const pirAtivo = $derived(
       </Linha>
     </Grupo>
 
-    <Grupo titulo="Acontecimentos">
+    <Grupo titulo="Acontecimentos" ajuda="acontecimentos">
       <Linha icone={Footprints} cor="#34c759" rotulo="Sensor de presença (PIR)">
         {#snippet acessorio()}<PresencaPir />{/snippet}
       </Linha>