/* Quadraconto — Demo · guida interattiva */
.btn-guida { display: inline-flex; align-items: center; gap: 6px; }

.tour-root[hidden] { display: none; }
.tour-block { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.tour-root.tour-dim .tour-block { background: rgba(7, 22, 38, 0.55); }
.tour-spot {
  position: fixed; z-index: 1001; pointer-events: none; border-radius: 10px;
  box-shadow: 0 0 0 3px #0cacb4, 0 0 0 9999px rgba(7, 22, 38, 0.55);
  will-change: transform, opacity;
  transition: opacity .16s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.tour-box {
  position: fixed; z-index: 1002; width: min(380px, calc(100vw - 16px));
  max-height: calc(100vh - 16px); overflow-y: auto;
  background: #fff; color: #071626; border-radius: 12px; padding: 18px 18px 14px;
  box-shadow: 0 18px 50px rgba(7, 22, 38, 0.35);
  font-family: Inter, system-ui, sans-serif;
}
.tour-box.tour-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 24px)); }
.tour-box.tour-sheet { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; max-height: 45vh; }
.tour-count { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0a8a91; }
.tour-title { margin: 4px 0 6px; font-size: 16px; font-weight: 800; outline: none; }
.tour-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: #324659; }
.tour-note { margin: 8px 0 0; font-size: 12px; color: #8a5a00; background: #fff6e5; border-radius: 6px; padding: 6px 8px; }
.tour-count, .tour-title, .tour-text, .tour-note {
  transition: opacity .16s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
}
.tour-copy-in { animation: tour-copy-in .2s cubic-bezier(.22, 1, .36, 1); }
@keyframes tour-copy-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tour-spacer { flex: 1; }
.tour-actions .btn {
  transition: transform .14s ease, opacity .14s ease, background-color .18s ease, border-color .18s ease;
  will-change: transform;
}
.tour-actions .btn:hover { transform: translateY(-1px); }
.tour-actions .btn:active { transform: translateY(0) scale(.98); opacity: .88; }
.tour-actions .btn:focus-visible { outline: 2px solid #0cacb4; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tour-spot { transition: opacity .1s linear; }
  .tour-count, .tour-title, .tour-text, .tour-note { transition: opacity .1s linear; }
  .tour-copy-in { animation: tour-copy-fade .1s linear; }
  .tour-actions .btn { transition: opacity .1s linear, background-color .1s linear, border-color .1s linear; }
  .tour-actions .btn:hover, .tour-actions .btn:active { transform: none; }
  body.tour-open .drawer { transition: none !important; }
}

@keyframes tour-copy-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}