/* ============================================================
   Recorrido guiado — estilos sobre tokens de wp-base.css.
   Sin url() (WhiteNoise-safe).
   ============================================================ */
.wp-tour-overlay{ position:fixed; inset:0; z-index:1000; }
.wp-tour-spot{ position:fixed; border-radius:10px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(20,24,33,.55); transition:top .2s ease, left .2s ease,
  width .2s ease, height .2s ease; }
.wp-tour-card{ position:fixed; z-index:1001; width:300px; max-width:calc(100vw - 24px);
  background:var(--wp-surface); border:1px solid var(--wp-line); border-radius:var(--wp-r-lg);
  box-shadow:var(--wp-shadow); padding:16px 18px; }
.wp-tour-h{ font-family:var(--wp-display); font-weight:400; font-size:1.05rem; color:var(--wp-ink); margin-bottom:6px; }
.wp-tour-p{ font-size:.9rem; color:var(--wp-ink-soft); line-height:1.5; margin-bottom:14px; }
.wp-tour-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wp-tour-prog{ font-size:.78rem; color:var(--wp-ink-mute); flex:none; }
.wp-tour-btns{ display:flex; gap:6px; }
.wp-tour-btn{ font:inherit; font-size:.82rem; font-weight:500; padding:7px 12px;
  border-radius:var(--wp-r-btn); cursor:pointer; border:1px solid transparent; }
.wp-tour-btn--ghost{ background:none; border-color:var(--wp-line); color:var(--wp-ink-soft); }
.wp-tour-btn--ghost:hover{ background:var(--wp-surface-2); }
.wp-tour-btn--ghost:disabled{ opacity:.4; cursor:default; }
.wp-tour-btn--primary{ background:var(--wp-accent); color:#fff; }
.wp-tour-btn--primary:hover{ background:var(--wp-accent-deep); }

.wp-tour-fab{ position:fixed; right:18px; bottom:18px; z-index:900; width:46px; height:46px;
  border-radius:50%; border:1px solid var(--wp-line); background:var(--wp-surface);
  color:var(--wp-accent); box-shadow:var(--wp-shadow-sm); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:22px; transition:background var(--wp-t), color var(--wp-t); }
.wp-tour-fab:hover{ background:var(--wp-accent); color:#fff; }
@media (max-width:640px){ .wp-tour-fab{ bottom:76px; } }
@media (prefers-reduced-motion:reduce){ .wp-tour-spot{ transition:none; } }