/* =========================================================
   Clikea Web — Barra de aviso + WhatsApp flotante
   Es lo ÚNICO compartido entre los ejemplos: el marco de Clikea.
   El diseño de cada demo vive en su propio archivo.
   ========================================================= */

.demobar{
  position:fixed;top:0;left:0;right:0;z-index:900;height:44px;
  background:#0B1220;color:#fff;display:flex;align-items:center;justify-content:center;
  gap:1rem;font:600 .85rem/1 "Manrope",system-ui,sans-serif;padding:0 1rem;
}
.demobar b{color:#F5B700}
.demobar .sep{opacity:.3}
.demobar a{color:#fff;text-decoration:none;font-weight:700;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.3)}
.demobar a:hover{color:#F5B700;border-color:#F5B700}
.demobar__cta{
  background:#25D366;color:#04220F !important;padding:.4rem .9rem;border-radius:999px;
  border:0 !important;font-weight:800;font-size:.82rem;
}
.demobar__cta:hover{background:#1EBE5B;color:#04220F !important}
@media(max-width:760px){.demobar__hide{display:none}}

.flota{
  position:fixed;right:18px;bottom:18px;z-index:800;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#04220F;display:grid;place-items:center;font-size:1.6rem;
  text-decoration:none;box-shadow:0 12px 28px rgba(37,211,102,.45);transition:transform .2s;
}
.flota:hover{transform:translateY(-3px)}

/* Todos los demos empiezan debajo de la barra */
body{padding-top:44px}