/* O tour guiado do Compasso, por papel (01/11/2026, camada 2 da D0 do plano da Interpartner; padrão da casa,
   DESENHO.md §6): o furo em volta do alvo, o balão ao lado no computador e a folha embaixo no celular.
   Vale nos DOIS visuais (o visual de sempre não desliga este arquivo): só usa os tokens que o styles.css tem, e cada
   visual pinta com os seus (o marca.css troca os valores no visual novo). Nenhuma cor escrita aqui. */
.tour-mascara { position: fixed; inset: 0; z-index: 1200; background: transparent; } /* só segura o clique fora do furo */
.tour-furo { position: fixed; z-index: 1201; left: var(--fx, -40px); top: var(--fy, -40px); width: var(--fw, 0); height: var(--fh, 0);
  border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--ip-green), 0 0 0 9px color-mix(in srgb, var(--ip-green) 25%, transparent),
              0 0 0 9999px color-mix(in srgb, var(--text) 62%, transparent); }
.tour-furo.sem-alvo { box-shadow: 0 0 0 9999px color-mix(in srgb, var(--text) 62%, transparent); }
.tour-balao { position: fixed; z-index: 1202; box-sizing: border-box; width: 340px; max-width: calc(100vw - 24px);
  padding: 14px 18px 14px; background: var(--surface); color: var(--text); border-radius: 16px; box-shadow: var(--shadow-lg); }
.tour-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tour-passo { font-size: 12px; font-weight: 800; color: var(--ip-green-dark); }
.tour-x { width: 36px; height: 36px; margin: -6px -8px -6px 0; border: 0; border-radius: 8px; background: transparent;
  color: var(--text-3); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.tour-balao h3 { margin: 2px 0 6px; font-size: 16px; font-weight: 800; color: var(--text); }
.tour-balao p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.tour-pe { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.tour-pontos { display: flex; gap: 5px; }
.tour-pontos i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.tour-pontos i.atual { width: 18px; border-radius: 4px; background: var(--ip-green); }
.tour-botoes { display: flex; gap: 6px; }
.tour-botao { min-height: 44px; padding: 9px 14px; white-space: nowrap; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--ip-green-light); color: var(--ip-green-dark); font: inherit; font-size: 13.5px; font-weight: 700; }
.tour-botao.principal { background: var(--ip-green); color: var(--white); }
.tour-botao.fantasma { background: transparent; }
.tour-sair { display: inline-block; min-height: 32px; margin-top: 8px; padding: 6px 0; border: 0; background: transparent; cursor: pointer;
  color: var(--ip-green-dark); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; }
.tour-botao:focus-visible, .tour-x:focus-visible, .tour-sair:focus-visible, .tour-papel:focus-visible { outline: 2px solid var(--ip-green-dark); outline-offset: 2px; }

/* a escolha do papel: o mesmo balão, no meio da tela */
.tour-balao.escolha { left: 50%; top: 50%; width: 420px; transform: translate(-50%, -50%); }
.tour-papeis { display: grid; gap: 8px; margin-top: 12px; }
.tour-papel { display: block; width: 100%; padding: 11px 14px; text-align: left; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.tour-papel b { display: block; font-size: 14px; font-weight: 800; }
.tour-papel span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.tour-papel:hover { border-color: var(--ip-green); }

/* celular (até 640 px): folha embaixo, com a alça; o furo continua em volta do alvo */
.tour-balao.folha { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; transform: none;
  border-radius: 22px 22px 0 0; padding: 10px 18px 18px; }
.tour-balao.folha::before { content: ""; display: block; width: 44px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--border-strong); }