/* Tour MEMOrIA XR · v1.0 · 10/11/2026 · estilos do tutorial de entrada padrão.
   Usa as cores do app quando existem (--accent, --raised, --ink…). Para ajustar, defina --tour-* no :root do app.
   O app pode encolher a tela no celular com var(--tourh) quando html.tour-on. */
.tour-mxr,.tour-mxr-b{
  --ta:var(--tour-accent,var(--accent,#C04E2A));
  --ta-soft:var(--tour-accent-soft,var(--accent-soft,#F6E1D7));
  --ta-ink:var(--tour-accent-ink,var(--accent-ink,#FFFFFF));
  --tbg:var(--tour-surface,var(--raised,#FFFFFF));
  --tbg2:var(--tour-surface-2,var(--surface,#FBFAF6));
  --tink:var(--tour-ink,var(--ink,#1A1916));
  --tink2:var(--tour-ink-2,var(--ink-2,#57534B));
  --tink3:var(--tour-ink-3,var(--ink-3,#8A857A));
  --tline:var(--tour-line,var(--line,#DDD8CC));
  --tline2:var(--tour-line-2,var(--line-2,#E9E5DB));
  --tdim:var(--tour-dim,rgba(16,12,9,.48));
  --tf-disp:var(--tour-font-display,var(--f-disp,"Instrument Serif","Iowan Old Style",Georgia,serif));
  --tf-ui:var(--tour-font-ui,var(--f-ui,"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif));
  --tf-mono:var(--tour-font-mono,var(--f-mono,"IBM Plex Mono",ui-monospace,Menlo,monospace));
  --tease:cubic-bezier(.23,1,.32,1);
}
.tour-mxr *{box-sizing:border-box}
.tour-mxr .btn{font:500 14px/1.2 var(--tf-ui);border:1px solid var(--tline);background:var(--tbg);color:var(--tink);border-radius:8px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.tour-mxr .btn.pri{background:var(--ta);border-color:var(--ta);color:var(--ta-ink)}
.tour-mxr .btn.pri:hover{filter:brightness(1.06)}

/* botão "Como funciona" no topo do app */
.tourb{display:flex;align-items:center;gap:7px;border:1px solid var(--tline);background:var(--tbg2);border-radius:999px;padding:4px 12px 4px 5px;font:12.5px var(--tf-ui);color:var(--tink2);white-space:nowrap;cursor:pointer}
.tourb:hover{color:var(--tink);border-color:var(--tink3)}
.tourb .q{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--tink);color:var(--tbg2);font:600 11.5px var(--tf-ui)}
.tourb b{font-weight:500}

/* apresentação */
.tintro{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:20px;background:rgba(18,14,11,.5);backdrop-filter:blur(3px);opacity:0;transition:opacity .4s var(--tease);font-family:var(--tf-ui);color:var(--tink)}
.tintro.on{opacity:1}
.tintro .tcard{width:min(560px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:var(--tbg);border:1px solid var(--tline);border-radius:18px;box-shadow:0 40px 100px rgba(20,14,8,.32);padding:30px 32px 24px;transform:translateY(14px) scale(.98);opacity:.6;transition:transform .6s var(--tease),opacity .5s var(--tease)}
.tintro.on .tcard{transform:none;opacity:1}
.tintro .tk,.tcartao .tk{font:500 11px var(--tf-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ta)}
.tintro h2{font-family:var(--tf-disp);font-weight:400;font-size:42px;line-height:1.02;margin:10px 0 12px}
.tintro p{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--tink2)}
.tmapa{display:block;width:100%;height:auto;margin:6px 0 18px}
.tmapa rect{fill:var(--tbg2);stroke:var(--tline);stroke-width:1.2}
.tmapa .base rect{fill:var(--tline2)}
.tmapa .on rect{fill:var(--ta-soft);stroke:var(--ta)}
.tmapa .l{font:500 6.5px var(--tf-mono);letter-spacing:.06em;fill:var(--tink3)}
.tmapa .n{font:400 22px var(--tf-disp);fill:var(--tink)}
.tmapa .base .n{fill:var(--tink3)}
.tmapa circle{fill:var(--ta)}
.tmapa .volta{fill:none;stroke:var(--ta);stroke-width:1.3;stroke-dasharray:3 4}
.tmapa .ponta{stroke-dasharray:none}
.tmapa .vl{font:500 6.5px var(--tf-mono);letter-spacing:.12em;fill:var(--tink3)}
.tintro.on .tmapa g{animation:tm-in .55s var(--tease) both;animation-delay:calc(220ms + var(--k,0) * 55ms)}
.tintro.on .tmapa .vg{animation-delay:900ms}
.tintro.on .tmapa .on rect{animation:tm-on 1.8s ease-in-out 1.2s infinite}
@keyframes tm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes tm-on{50%{fill:color-mix(in srgb,var(--ta) 26%,var(--ta-soft))}}
.tacoes{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 16px}
.tacoes .btn{padding:10px 16px;font-size:14px}
.tacoes .btn.pri span{font-weight:400;opacity:.8;margin-left:6px;font-size:12.5px}
.tintro .tnota{font-size:12.5px;color:var(--tink3);margin:0}

/* holofote: o buraco mostra o alvo; a sombra enorme escurece o resto */
.tspot{position:fixed;left:0;top:0;width:0;height:0;z-index:2147482900;pointer-events:none;opacity:0;border-radius:14px;will-change:transform,width,height;
  box-shadow:0 0 0 2px var(--ta),0 0 0 7px color-mix(in srgb,var(--ta) 20%,transparent),0 0 0 200vmax var(--tdim);
  transition:opacity .5s var(--tease),box-shadow .5s var(--tease),border-radius .4s var(--tease)}
.tspot.on{opacity:1}
.tspot.leve{box-shadow:0 0 0 2px var(--ta),0 0 0 7px color-mix(in srgb,var(--ta) 22%,transparent),0 0 0 200vmax rgba(16,12,9,0)}
.tspot::after{content:"";position:absolute;inset:-2px;border-radius:inherit;box-shadow:0 0 30px 6px color-mix(in srgb,var(--ta) 42%,transparent);animation:ts-resp 2.6s ease-in-out infinite}
@keyframes ts-resp{50%{opacity:.3}}

/* cursor que mostra o clique (no celular, um toque) */
.tcur{position:fixed;left:0;top:0;z-index:2147482950;pointer-events:none;opacity:0;transition:opacity .35s var(--tease);will-change:transform}
.tcur.on{opacity:1}
.tcur .seta{display:block;width:24px;height:24px;margin:-2px 0 0 -3px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));transform-origin:4px 3px;transition:transform .15s var(--tease)}
.tcur .seta path{fill:#fff;stroke:#1A1916;stroke-width:1.4;stroke-linejoin:round}
.tcur.press .seta{transform:scale(.8)}
.tcur .dedo{display:none;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:color-mix(in srgb,var(--ta) 30%,transparent);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .15s var(--tease)}
.tcur.toque .seta{display:none}.tcur.toque .dedo{display:block}
.tcur.toque.press .dedo{transform:scale(.8)}
.trip{position:fixed;z-index:2147482940;pointer-events:none;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid var(--ta);animation:ts-rip .65s ease-out forwards}
@keyframes ts-rip{from{transform:scale(.2);opacity:.9}to{transform:scale(1.5);opacity:0}}

/* cartão */
.tcartao{position:fixed;left:0;top:0;z-index:2147482990;width:368px;font-family:var(--tf-ui);color:var(--tink);background:color-mix(in srgb,var(--tbg) 93%,transparent);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);border:1px solid var(--tline);border-radius:18px;box-shadow:0 28px 70px rgba(20,14,8,.26),0 2px 6px rgba(20,14,8,.08);padding:20px 20px 14px;overflow:hidden;transition:transform .8s var(--tease)}
.tc-barra{position:absolute;left:0;right:0;top:0;height:3px;background:var(--tline2)}
.tc-barra i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--ta);transition:width .7s var(--tease)}
.tc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tc-x{border:0;background:none;width:28px;height:28px;margin:-6px -8px -6px 0;border-radius:50%;color:var(--tink3);font-size:20px;line-height:1;cursor:pointer}
.tc-x:hover{background:var(--tline2);color:var(--tink)}
.tcartao h2{font-family:var(--tf-disp);font-weight:400;font-size:27px;line-height:1.04;margin:8px 0 6px}
.tc-p{margin:0;font-size:13.5px;line-height:1.5;color:var(--tink2)}
.tc-nota{margin:14px 0 0;padding:11px 13px;border-radius:12px;background:var(--ta-soft);color:var(--tink);font-size:13.5px;line-height:1.45;display:flex;gap:10px;align-items:flex-start;min-height:42px}
.tc-nota i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ta);margin-top:6px;animation:ts-ping 1.8s ease-out infinite}
@keyframes ts-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ta) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.tc-nota.troca span{animation:tc-in .45s var(--tease)}
@keyframes tc-in{from{opacity:0;transform:translateY(4px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.tc-cenas{display:flex;gap:4px;margin-top:12px}
.tc-cenas i{flex:1;height:3px;border-radius:3px;background:var(--tline);position:relative;overflow:hidden}
.tc-cenas i.on{background:var(--ta)}
.tc-cenas i.agora{background:color-mix(in srgb,var(--ta) 22%,var(--tline))}
.tc-cenas i.enche::after{content:"";position:absolute;inset:0;background:var(--ta);transform-origin:left;animation:tc-carga var(--d,4s) linear forwards}
@keyframes tc-carga{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tc-b{display:flex;align-items:center;gap:8px;margin-top:14px}
.tc-b .sp{flex:1}
.tc-rever{border:0;background:none;padding:4px 2px;font:12.5px var(--tf-ui);color:var(--tink3);display:flex;gap:5px;align-items:center;cursor:pointer}
.tc-rever:hover{color:var(--tink)}
.tc-b .btn{padding:7px 13px;font-size:13px}
.tc-b .btn:disabled{opacity:.4;cursor:default}
.tcartao.troca h2,.tcartao.troca .tc-p{animation:tc-in .5s var(--tease)}
.tcartao.compacto .tc-p{display:none}
.tcartao.compacto h2{font-size:23px}
.tcartao.parado .tc-nota{opacity:.5}
.tcartao.parado .tc-cenas i.enche::after{animation-play-state:paused}
.tcartao.parado .tc-rever,.tcartao.feito .tc-rever{color:var(--ta)}

@media (max-width:900px){
  .tourb{padding:4px}.tourb b{display:none}
  .tcartao{left:8px;right:8px;top:auto;bottom:calc(var(--tour-base-celular,12px) + env(safe-area-inset-bottom,0px));width:auto;transform:none!important;padding:16px 16px 12px;border-radius:16px}
  .tcartao.alto{top:calc(10px + env(safe-area-inset-top,0px));bottom:auto}
  .tc-p{display:none}
  .tcartao h2{font-size:22px;margin:6px 0 0}
  .tc-nota{margin-top:10px}
  .tintro .tcard{padding:24px 20px 18px}
  .tintro h2{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  .tintro,.tintro .tcard,.tcartao,.tspot,.tcur{transition:none}
  .tintro.on .tmapa g,.tintro.on .tmapa .on rect,.tspot::after,.tc-nota i,.tc-cenas i.enche::after{animation:none}
}