/* SaaS da loja · Ajuda: Central de ajuda (#/ajuda), tour de boas-vindas e o botão "?". Só as variáveis de app.css
   (valem no claro e no escuro), celular primeiro, nada passa da borda em 320 px. Sem estilo inline: as fases das
   mini ilustrações chegam por variáveis CSS (--fase, --em, --ate, --enche) postas por CSSOM. */

/* ------------------------------------------------------------------ botão "?" */
.ajuda-q { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px -4px; border-radius: 50%; color: var(--muted); flex: none; vertical-align: middle;
  transition: color .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.ajuda-q-o { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 12px; font-weight: 600; line-height: 1;
  transition: background .2s var(--ease), transform .2s var(--ease); }
.ajuda-q:hover { color: var(--ink); }
.ajuda-q:hover .ajuda-q-o { background: var(--sunk); }
.ajuda-q:active .ajuda-q-o { transform: scale(.92); }
.ajuda-q:focus-visible { outline-offset: -6px; border-radius: 50%; }
.card.inv .ajuda-q { color: var(--inv-muted); }
.card.inv .ajuda-q:hover { color: var(--inv-ink); }
.card.inv .ajuda-q:hover .ajuda-q-o { background: var(--inv-sunk); }
.card.inv .ajuda-q:focus-visible { outline-color: var(--inv-ink); }
@media (min-width: 900px) and (pointer: fine) { .ajuda-q { width: 32px; height: 32px; margin: -6px -2px; } }
.ajuda-expl p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.ajuda-expl p + p { margin-top: 10px; }

/* ------------------------------------------------------------------ Central de ajuda */
.ajuda-busca { position: relative; margin-bottom: 12px; }
.ajuda-busca .i { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.ajuda-busca .entrada { min-height: 52px; padding-left: 46px; background: var(--card); box-shadow: var(--shadow); }
.ajuda-busca .entrada:focus { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); }

.ajuda-atalhos { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -16px 14px; padding: 2px 16px 6px; scroll-padding-inline: 16px; }
.ajuda-atalhos::-webkit-scrollbar { display: none; }
.ajuda-atalho { min-height: 44px; padding: 0 14px; font-size: 13px; color: var(--ink); flex: none; transition: transform .2s var(--ease), background .2s var(--ease); }
.ajuda-atalho .i { color: var(--muted); }
.ajuda-atalho:hover { background: var(--hover); }
.ajuda-atalho:active { transform: scale(.97); }
@media (min-width: 900px) {
  .ajuda-atalhos { flex-wrap: wrap; overflow: visible; margin: 0 0 16px; padding: 0; }
  .ajuda-atalho { min-height: 38px; }
}

.ajuda-grade { align-items: start; }
.ajuda-secao { scroll-margin-top: calc(var(--topo) + 12px); }
.ajuda-secao .titulo-card { margin-bottom: 4px; }
.ajuda-secao .titulo-card h2 { display: flex; align-items: center; gap: 10px; }
.ajuda-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); color: var(--ink-2); flex: none; }

.ajuda-lista { display: grid; }
.ajuda-item { border-top: 1px solid var(--line); }
.ajuda-item:first-child { border-top: 0; }
.ajuda-item summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 6px; margin: 0 -6px; border-radius: 12px; cursor: pointer;
  font-weight: 500; font-size: 15px; line-height: 1.35; transition: background .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.ajuda-item summary::-webkit-details-marker { display: none; }
.ajuda-item summary::marker { content: ""; }
.ajuda-item summary:hover { background: var(--sunk); }
.ajuda-item summary .tag { flex: none; }
.ajuda-p { min-width: 0; overflow-wrap: anywhere; }
.ajuda-seta { margin-left: auto; width: 18px; height: 18px; color: var(--muted); transition: rotate .3s var(--ease); }
.ajuda-item[open] .ajuda-seta { rotate: 180deg; }
.ajuda-r { padding: 2px 0 16px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; max-width: 68ch; }
.ajuda-r p + p { margin-top: 8px; }
.ajuda-item[open] .ajuda-r { animation: ajuda-abre .4s var(--ease); }
@keyframes ajuda-abre { from { opacity: 0; translate: 0 -4px; filter: blur(3px); } }
@supports (interpolate-size: allow-keywords) {
  .ajuda-item { interpolate-size: allow-keywords; }
  .ajuda-item::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
  .ajuda-item[open]::details-content { height: auto; }
}
.ajuda-item mark { background: var(--warn-bg); color: inherit; border-radius: 4px; padding: 0 1px; }
.ajuda-nada { margin-top: 12px; }
.ajuda-fim { margin-top: 12px; }
@media (min-width: 900px) { .ajuda-fim { margin-top: 14px; } }

/* ------------------------------------------------------------------ tour: a janela */
.folha.tour-folha { padding-top: 10px; }
@media (min-width: 700px) { .folha.tour-folha { max-width: 460px; padding: 18px 22px 22px; } }
.tour { display: grid; gap: 14px; min-width: 0; }
.tour > * { animation: tour-entra .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 80ms + 90ms); }
@keyframes tour-entra { from { opacity: 0; filter: blur(8px); translate: 0 14px; } }
.tour-topo { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.tour-ola { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-ola b { color: var(--ink); font-weight: 600; }
.tour-pular { margin-left: auto; min-height: 44px; }
.tour-meio { min-width: 0; overflow: hidden; }
.tour-passo { display: grid; gap: 14px; touch-action: pan-y; min-width: 0; }
.tour-titulo { font-size: 22px; font-weight: 500; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.tour-txt { color: var(--ink-2); font-size: 15px; line-height: 1.5; margin-top: 6px; min-height: 4.5em; }
.tour-pe { display: flex; align-items: center; gap: 8px; }
.tour-pontos { flex: 1; display: flex; gap: 6px; align-items: center; }
.tour-pontos span { width: 7px; height: 7px; border-radius: 4px; background: var(--line); transition: width .45s var(--ease), background .3s var(--ease); }
.tour-pontos span[data-feito] { background: var(--faint); }
.tour-pontos span[data-on] { width: 24px; background: var(--ink); }
.tour-voltar { box-shadow: none; background: var(--sunk); }
.tour-proximo { min-width: 132px; }
@media (min-width: 900px) and (pointer: fine) { .tour-pular { min-height: 36px; } }

/* ------------------------------------------------------------------ tour: o palco e as fases */
.tour-cena { position: relative; height: 236px; border-radius: 22px; background: var(--sunk); overflow: hidden; display: grid; place-items: center; padding: 14px;
  transition: opacity .35s var(--ease); }
.tour-cena.tour-zera { opacity: 0; }
.tour-cena.sem-trans, .tour-cena.sem-trans * { transition: none !important; }
/* Visível de --em até antes de --ate. */
.tour-v { --on: calc(clamp(0, var(--fase, 0) - var(--em, 0) + 1, 1) * clamp(0, var(--ate, 99) - var(--fase, 0), 1));
  opacity: var(--on); translate: 0 calc((1 - var(--on)) * 10px); filter: blur(calc((1 - var(--on)) * 3px));
  transition: opacity .45s var(--ease), translate .6s var(--ease), filter .45s var(--ease); }

/* peças pequenas */
.tour-tela { width: 100%; max-width: 264px; display: grid; gap: 7px; min-width: 0; }
.tour-mini { background: var(--card); border-radius: 16px; padding: 10px 12px; box-shadow: var(--shadow); }
.tour-mini.inv { background: var(--inv); color: var(--inv-ink); box-shadow: none; }
.tour-lbl { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.tour-mini.inv .tour-lbl { color: var(--inv-muted); }
.tour-lbl .i { width: 14px; height: 14px; }
.tour-num { display: flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 30px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.tour-odo { display: inline-block; height: 1em; overflow: hidden; }
.tour-odo-fita { display: block; translate: 0 calc(min(var(--fase, 0), 3) * -25%); transition: translate .6s cubic-bezier(.3, 1.35, .5, 1); }
.tour-odo-fita span { display: block; height: 1em; line-height: 1; }
.tour-ping { width: 8px; height: 8px; border-radius: 50%; background: var(--down); animation: pulsar 1.6s var(--ease) infinite; }
.tour-linha { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 10px 6px 6px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); font-size: 12px; }
.tour-linha .corpo, .tour-pessoa .corpo { min-width: 0; flex: 1; line-height: 1.25; }
.tour-linha .corpo > *, .tour-pessoa .corpo > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-linha b, .tour-pessoa b { font-weight: 500; }
.tour-linha .s, .tour-pessoa .s, .tour-s { color: var(--muted); font-size: 11px; }
.tour-linha .q { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; flex: none; }
.tour-linha .q.mal { color: var(--down); font-weight: 600; }
.tour-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--canvas); font-size: 9.5px; font-weight: 600; flex: none; }
.tour-av.mal { background: var(--down-bg); color: var(--down); }
.tour-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--ink); color: var(--canvas); font-size: 12px; font-weight: 500; white-space: nowrap; flex: none; transition: scale .25s var(--ease), opacity .3s var(--ease); }
.tour-btn.quieto { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.tour-btn .i { width: 14px; height: 14px; }
.tour-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow);
  color: var(--ink); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.tour-chip .i { width: 13px; height: 13px; color: var(--up); stroke-width: 2.2; }
.tour-tag { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.tour-tag.ok { background: var(--up-bg); color: var(--up); }
.tour-tag.aviso { background: var(--warn-bg); color: var(--warn); margin-left: auto; flex: none; }
@keyframes tour-brilha { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 30%, transparent); } 60% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ink) 0%, transparent); } }
.tour-cena[data-fase="3"] .tour-assumir,
.tour-cena[data-fase="1"] .tour-conv .tour-mandar,
.tour-cena[data-fase="2"] .tour-ret .tour-mandar { animation: tour-brilha 1.5s var(--ease) infinite; }
.tour-cena[data-fase="4"] .tour-assumir,
.tour-cena[data-fase="2"] .tour-conv .tour-mandar,
.tour-cena[data-fase="3"] .tour-ret .tour-mandar { scale: .95; }

/* cena 2: conversa */
.tour-chat { width: 100%; max-width: 264px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tour-chat-cab { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 2px; }
.tour-chat-cab b { font-weight: 500; }
.tour-chat-cab .ao-vivo { margin-left: auto; font-size: 11px; }
.tour-bal { max-width: 84%; padding: 6px 10px; border-radius: 14px; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.tour-bal.cli { align-self: flex-start; background: var(--card); color: var(--ink); border-bottom-left-radius: 5px; box-shadow: var(--shadow); }
.tour-bal.loja { align-self: flex-end; background: var(--ink); color: var(--canvas); border-bottom-right-radius: 5px; }
.tour-chat-pe { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; }

/* cena 3: prova */
.tour-prova { width: 100%; max-width: 264px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; padding: 14px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.tour-hora { font-size: 18px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.tour-prova-corpo { min-width: 0; }
.tour-nome { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; }
.tour-nome b { font-weight: 500; }
.tour-troca { display: inline-grid; }
.tour-troca > * { grid-area: 1 / 1; justify-self: start; }
.tour-acoes { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 10px; min-width: 0; }
.tour-veio { width: 62px; padding: 0; transition: width .5s var(--ease), background .4s var(--ease), color .4s var(--ease); }
.tour-rot { transition: opacity .2s var(--ease); }
.tour-check { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .5s var(--ease) .18s; }
.tour-outro { padding: 0 10px; }
.tour-dedo { position: absolute; right: -9px; bottom: -11px; width: 26px; height: 26px; border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--ink) 16%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 45%, transparent); }
.tour-cena[data-fase="2"] .tour-dedo { animation: tour-toque .55s var(--ease); }
@keyframes tour-toque { 40% { scale: .72; } 100% { scale: 1; } }
.tour-cena:is([data-fase="2"], [data-fase="3"]) .tour-veio { width: 32px; background: var(--up); color: var(--card); }
.tour-cena:is([data-fase="2"], [data-fase="3"]) .tour-rot { opacity: 0; }
.tour-cena:is([data-fase="2"], [data-fase="3"]) .tour-check { stroke-dashoffset: 0; }
.tour-cena:is([data-fase="2"], [data-fase="3"]) .tour-outro { opacity: .4; }
.tour-cena:is([data-fase="2"], [data-fase="3"]) .tour-hora { color: var(--muted); transition: color .4s var(--ease); }

/* cena 4: franquia */
.tour-medidor { width: 100%; max-width: 232px; display: grid; justify-items: center; gap: 8px; padding: 14px 14px 12px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); text-align: center; }
.tour-medidor svg { width: 100%; max-width: 190px; height: auto; }
.tour-arco { fill: none; stroke-width: 16; stroke-linecap: round; }
.tour-arco.fundo { stroke: var(--line); }
.tour-arco.cheio { stroke: var(--ink); stroke-dasharray: 100 200; stroke-dashoffset: calc(100 - var(--enche, 0)); transition: stroke-dashoffset .9s var(--ease); }
.tour-val { margin-top: -42px; display: grid; line-height: 1.1; }
.tour-val b { font-size: 28px; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tour-val span { font-size: 11px; color: var(--muted); }

/* cena 5: convite (caixa de 252 px, peças em posição fixa para o voo do convite) */
.tour-conv { position: relative; width: 252px; height: 172px; flex: none; }
.tour-conv-card { position: absolute; left: 0; top: 0; width: 142px; display: grid; gap: 7px; padding: 10px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.tour-pessoa { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; }
.tour-link { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 9px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.tour-link .i { width: 12px; height: 12px; flex: none; }
.tour-mandar { justify-self: start; }
.tour-fone { position: absolute; right: 0; top: 0; width: 92px; height: 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 7px 8px;
  border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 2px var(--ink), var(--shadow); }
.tour-fone::before { content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 22px; height: 4px; border-radius: 2px; background: var(--ink); }
.tour-fone .tour-bal { max-width: 100%; font-size: 10px; padding: 5px 7px; align-self: flex-start; border-bottom-right-radius: 14px; border-bottom-left-radius: 5px; }
.tour-entrar { min-height: 24px; padding: 0 10px; font-size: 10.5px; }
.tour-voa { --p: clamp(0, var(--fase, 0) - 1, 1); position: absolute; left: 56px; top: 98px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--up); color: var(--card); box-shadow: var(--shadow-up);
  opacity: calc(var(--p) * clamp(0, 3 - var(--fase, 0), 1)); translate: calc(var(--p) * 134px) calc(var(--p) * -62px); scale: calc(.7 + var(--p) * .3);
  transition: translate .9s cubic-bezier(.5, 0, .25, 1), opacity .3s var(--ease), scale .9s var(--ease); }
.tour-voa .i { width: 15px; height: 15px; }
.tour-entrou { position: absolute; left: 0; top: 144px; }

/* cena 6: retomada */
.tour-msg { padding: 9px 11px; border-radius: 14px; background: var(--card); color: var(--ink-2); font-size: 11.5px; line-height: 1.4; box-shadow: inset 0 0 0 1.5px var(--line); overflow-wrap: anywhere; }
.tour-ret .tour-acoes { margin-top: 2px; }

/* ------------------------------------------------------------------ movimento reduzido */
/* app.css já desliga animações e transições; aqui o tour fica no quadro final, sem desfoque nem deslocamento. */
@media (prefers-reduced-motion: reduce) {
  .tour > * { opacity: 1; filter: none; translate: none; }
  .tour-v { filter: none; translate: none; }
  .tour-cena.tour-zera { opacity: 1; }
}