/* DEMO — banda superior en todas las páginas y menú del admin reducido al portal de comerciales. */
.fn-demo-banda {
  position: relative; z-index: 2147483000;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px;
  padding: 7px 14px; padding-top: max(7px, env(safe-area-inset-top));
  background: #F2C94C; color: #2E2D2C;
  font: 500 12px/1.35 Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .01em; text-align: center;
}
.fn-demo-banda b { font-weight: 700; letter-spacing: .08em; }
.fn-demo-banda .fn-demo-enl { display: inline-flex; gap: 14px; }
.fn-demo-banda a { color: #2E2D2C; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Admin: etiqueta fija abajo a la derecha (la maqueta del admin es una rejilla con barra lateral). */
.fn-demo-banda.fn-demo-admin {
  position: fixed; right: 14px; bottom: 14px; left: auto; top: auto; max-width: calc(100vw - 28px);
  border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 8px 14px; justify-content: flex-start; text-align: left;
}

/* Admin: en la demo solo existe el portal de comerciales; el resto del menú se oculta. */
.sb-nav .sb-group:not(:has(a[href^="comerciales"])) { display: none !important; }
.sb-nav a.sb-item:not([href^="comerciales"]) { display: none !important; }
.fn-demo-guia-btn { appearance: none; border: 0; background: none; padding: 0; color: #2E2D2C; font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ── Visita guiada (guia.js) ───────────────────────────────────────── */
.fg-capa { position: fixed; inset: 0; z-index: 2147483600; background: transparent; }
.fg-capa.fg-oscura { background: rgba(28, 27, 26, .62); }
.fg-foco { position: fixed; z-index: 2147483601; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 3px #F2C94C, 0 0 0 9999px rgba(28, 27, 26, .62); transition: top .25s, left .25s, width .25s, height .25s; }
.fg-foco.fg-oculto { display: none; }
.fg-tarjeta { position: fixed; z-index: 2147483602; width: min(340px, calc(100vw - 24px)); box-sizing: border-box;
  background: #fff; color: #2E2D2C; border-radius: 16px; padding: 16px 18px 14px; box-shadow: 0 14px 40px rgba(0,0,0,.28);
  font: 400 14px/1.5 Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-align: left; }
.fg-tarjeta.fg-centro { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 32px)); }
.fg-num { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8A8784; margin-bottom: 4px; }
.fg-tit { margin: 0 0 6px; font-size: 18px; font-weight: 500; line-height: 1.25; }
.fg-txt { margin: 0 0 14px; }
.fg-botones { display: flex; align-items: center; gap: 8px; }
.fg-hueco { flex: 1; }
.fg-btn { appearance: none; border: 0; border-radius: 999px; background: #2E2D2C; color: #fff; font: 500 14px Montserrat, sans-serif;
  padding: 9px 16px; cursor: pointer; }
.fg-btn.fg-ghost { background: #fff; color: #2E2D2C; box-shadow: inset 0 0 0 1px #CFCCC8; }
.fg-saltar, .fg-nunca { appearance: none; border: 0; background: none; padding: 4px 0; color: #6F6D6B; font: 500 13px Montserrat, sans-serif;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fg-nunca { display: block; margin-top: 8px; font-size: 12px; }