/* Demo pública (pista 8): la página /demo.php, el aviso «En la demo, no» y el banner del panel.
   La portada de elección se rehízo el 27-sep con el sistema público (tarjetas con el avatar de cada local). */
.demo-pag{min-height:100vh;margin:0;font-family:'Instrument Sans',system-ui,sans-serif;color:var(--tx);background:radial-gradient(60% 50% at 8% 0%,rgba(145,72,251,.16),transparent 70%),radial-gradient(50% 50% at 95% 10%,rgba(40,66,233,.12),transparent 70%),#f6f5fd}
.demo-cab{max-width:1100px;margin:12px auto 0;padding:0 16px;display:flex;align-items:center;gap:12px}
.demo-cab{height:62px;padding:0 10px 0 18px;background:rgba(255,255,255,.85);border:1px solid #fff;border-radius:20px;box-shadow:0 10px 30px -12px rgba(50,40,150,.22);width:calc(100% - 32px)}
.demo-logo{display:flex;width:max-content;align-items:center;gap:9px;color:var(--tx);text-decoration:none}
.demo-logo span{display:flex;flex-direction:column;line-height:1.02}.demo-logo b{font-size:17px;font-weight:600}.demo-logo small{font-size:12.5px;font-weight:600}.demo-logo em{font-style:normal;background:linear-gradient(90deg,#9b3cf5,#5b4cf2 45%,#1fb2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.demo-cab-alta{margin-left:auto;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:12px;background:#5849e8;color:#fff;font-weight:600;font-size:14.5px;text-decoration:none;box-shadow:0 10px 24px -10px rgba(88,73,232,.75)}
.demo-cab-alta:hover{background:#4a3cd6;color:#fff}
.demo-caja{max-width:1100px;margin:0 auto;padding:40px 16px 60px}
.demo-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:10px}
.demo-av-intro{width:150px;flex-shrink:0;margin-bottom:-8px}
.demo-av-intro img,.demo-av-dentro img{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 18px rgba(40,32,120,.22))}
.demo-chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 14px;border-radius:99px;background:#fff;border:1px solid var(--pr-b);color:#5849e8;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.demo-chip::before{content:'';width:7px;height:7px;border-radius:50%;background:#6564f4;box-shadow:0 0 0 4px rgba(101,100,244,.18)}
.demo-caja h1{font-size:clamp(34px,6vw,58px);line-height:1;margin:0 0 14px;letter-spacing:-.045em;font-weight:600}
.demo-lead{color:var(--md);margin:0 0 18px;max-width:58ch;font-size:18px;line-height:1.55}
.demo-caja .nota{margin:0 0 14px}
.nota.bien{background:var(--jd-s);border-color:var(--jd-b);color:var(--jd-t)}
.demo-elige{font-weight:600;margin:18px 0 14px;font-size:17px}
.demo-elige .dm{font-weight:400;font-size:14.5px}
.demo-sectores{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.demo-sector{margin:0}
.demo-sector button{position:relative;width:100%;height:100%;display:flex;align-items:stretch;gap:0;text-align:left;padding:0;min-height:170px;border-radius:24px;overflow:hidden;
  border:1px solid #e6e5f2;background:radial-gradient(90% 90% at 0% 100%,#efedfb,transparent 70%),#fff;box-shadow:0 1px 2px rgba(16,19,34,.04),0 10px 26px -14px rgba(50,40,150,.25);color:var(--tx);font:inherit;cursor:pointer;transition:border-color .2s,box-shadow .25s,transform .25s}
.demo-sector button:hover,.demo-sector button:focus-visible{border-color:var(--pr-b);box-shadow:0 26px 50px -24px rgba(50,40,150,.45);transform:translateY(-3px);outline:none}
.demo-sector button:focus-visible{outline:3px solid #5849e8;outline-offset:2px}
.demo-sector.on button{border-color:#6564f4;box-shadow:0 0 0 3px var(--pr-s),0 26px 50px -24px rgba(50,40,150,.45)}
.demo-av{flex:none;width:118px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(160deg,#ece8ff,#d9d4ff);padding:10px 6px 0}
.demo-av img{width:100%;height:auto;max-height:150px;object-fit:contain;display:block;filter:drop-shadow(0 10px 12px rgba(40,32,120,.22))}
.demo-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:18px 18px 44px}
.demo-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--pr-s);color:#5849e8;margin-bottom:4px}
.demo-tx b{font-size:19px;font-weight:600;letter-spacing:-.02em}.demo-tx small{color:var(--md);font-size:14.5px;line-height:1.45}
.demo-ir{position:absolute;right:16px;bottom:14px;color:#5849e8;font-size:14.5px;font-weight:600}
.demo-pie{margin:26px 0 0;font-size:15px}
.demo-dentro{max-width:560px;text-align:left}
.demo-av-dentro{width:140px;margin:0 0 8px}
.demo-acciones{display:grid;gap:10px;max-width:420px}
.demo-acciones form{margin:0}
.demo-grande{width:100%;min-height:50px;font-size:16px;border-radius:14px}
.demo-salir{justify-self:start;font-size:14.5px;margin-top:4px;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:640px){
  .demo-cab{width:calc(100% - 20px);margin-top:8px;padding:0 8px 0 14px}
  .demo-cab-alta{padding:0 12px;font-size:14px}
  .demo-caja{padding:26px 16px 48px}
  .demo-av-intro{width:96px}
  .demo-sectores{grid-template-columns:1fr}
  .demo-av{width:100px}
}
@media (max-width:380px){.demo-cab-alta{display:none}}

/* «Esto no se puede hacer en la demo» */
.demo-corte{min-height:100vh;display:grid;place-items:center;padding:16px;background:var(--bg)}
.demo-corte-card{max-width:440px;padding:26px}
.demo-corte-card h1{font-size:var(--t-h2);margin:0 0 8px}
.demo-corte-card p{color:var(--md)}
.demo-corte-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* Banner del panel: arriba del todo, empuja la página (no flota: no tapa nada del panel ni del tour).
   Fijo no se puede: html y body miden el 100 % y el sticky se acaba con el body. En el móvil,
   el menú lleva además el grupo «Estás en la demo» con la misma salida. */
.demo-banda{position:relative;z-index:60;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;
  padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));
  background:linear-gradient(90deg,#4f46f0,#6564f4 55%,#8b5cf6);color:#fff;font-size:var(--t-s);line-height:1.3}
.demo-banda b{font-weight:700}
.demo-banda .demo-banda-tx{flex:1;min-width:180px}
.demo-banda .demo-banda-tx span{opacity:.85}
.demo-banda a,.demo-banda button{display:inline-flex;align-items:center;min-height:34px;padding:6px 12px;border-radius:9px;font:600 var(--t-s)/1 inherit;cursor:pointer;
  text-decoration:none;white-space:nowrap}
.demo-banda .demo-b-alta{background:#fff;color:#3b35d6;border:0}
.demo-banda .demo-b-rein{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.demo-banda .demo-b-rein:hover{background:rgba(255,255,255,.12)}
@media (max-width:620px){
  .demo-banda{flex-wrap:nowrap;gap:8px;padding-top:7px;padding-bottom:7px}
  .demo-banda .demo-banda-tx{min-width:0}
  .demo-banda .demo-banda-tx span,.demo-banda .demo-b-rein-tx{display:none}
  .demo-banda .demo-b-rein{padding:6px 11px;font-size:16px}
}