/* ===== Tour guiado + tooltips "i" ===== */

/* ícone "i" e balãozinho de dica */
.infodot{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--cream-2);color:var(--green-d);font-size:12px;font-weight:800;cursor:pointer;border:1px solid var(--line);font-family:var(--serif);flex-shrink:0;vertical-align:middle;line-height:1;transition:.15s}
.infodot:hover{background:var(--green);color:#fff;border-color:var(--green)}
.balloon{position:absolute;z-index:130;width:235px;max-width:80%;background:var(--ink);color:#fff;font-size:12.5px;line-height:1.45;font-weight:500;padding:12px 14px;border-radius:13px;box-shadow:var(--shadow);opacity:0;transform:translateY(4px);transition:.18s;pointer-events:none}
.balloon.show{opacity:1;transform:none}
.balloon::after{content:"";position:absolute;width:12px;height:12px;background:var(--ink);transform:rotate(45deg)}
.balloon.top::after{bottom:-5px;left:var(--ax,40px)}
.balloon.bottom::after{top:-5px;left:var(--ax,40px)}
.balloon b{display:block;font-family:var(--serif);font-size:13.5px;margin-bottom:3px}

/* botão flutuante de ajuda / tour */
.help-fab{position:absolute;left:16px;bottom:82px;width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--green-d);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);z-index:45;font-family:var(--serif);font-weight:900;font-size:21px;font-style:italic;transition:.18s}
.help-fab:hover{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(-2px)}
body.desktop .help-fab{left:auto;right:24px;bottom:92px}

/* spotlight do tour */
.tour-catch{position:absolute;inset:0;z-index:118}
.tour-spot{position:absolute;border-radius:16px;box-shadow:0 0 0 4000px rgba(20,16,12,.74);outline:2.5px solid var(--coral);outline-offset:2px;z-index:120;pointer-events:none;transition:all .35s cubic-bezier(.4,0,.2,1)}
.tour-balloon{position:absolute;z-index:122;width:270px;max-width:84%;background:#fff;border-radius:18px;box-shadow:0 22px 55px -16px rgba(0,0,0,.55);padding:18px 18px 15px;transition:all .35s cubic-bezier(.4,0,.2,1)}
.tour-balloon::after{content:"";position:absolute;width:16px;height:16px;background:#fff;transform:rotate(45deg)}
.tour-balloon.top::after{bottom:-7px;left:var(--ax,40px)}
.tour-balloon.bottom::after{top:-7px;left:var(--ax,40px)}
.tour-balloon .step{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.tour-balloon h4{font-family:var(--serif);font-weight:700;font-size:18px;margin:6px 0 6px;letter-spacing:-.01em}
.tour-balloon p{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.tour-foot{display:flex;align-items:center;justify-content:space-between;margin-top:15px;gap:10px}
.tour-dots{display:flex;gap:5px}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:.2s}
.tour-dots i.on{background:var(--coral);width:18px;border-radius:4px}
.tour-prog{flex:1;max-width:120px;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.tour-prog span{display:block;height:100%;background:var(--coral);border-radius:3px;transition:width .3s}
.tour-btns{display:flex;gap:6px}
.tour-btns button{border:0;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:13px;border-radius:10px;padding:9px 13px;transition:.15s}
.tb-skip{background:transparent;color:var(--ink-soft)}
.tb-skip:hover{background:var(--cream-2)}
.tb-next{background:var(--coral);color:#fff}
.tb-next:hover{background:var(--coral-d)}
.tour-x{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:8px;border:0;background:var(--cream-2);color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;font-size:13px;line-height:1}
.tour-x:hover{background:#ecdfca}