:root { --demo-header-height: 80px; --demo-nav-height: 0px; }
html { scroll-padding-top: calc(var(--demo-header-height) + var(--demo-sales-height, 0px) + 12px); }
.demo-sales-bar { position: sticky; top: var(--demo-header-height); z-index: 1010; background: #102c46; border-bottom: 2px solid #ffc221; color: #fff; }
.demo-sales-bar[hidden] { display: none; }
.demo-sales-inner { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 42px; padding: 5px 16px; font-size: 13px; line-height: 1.3; }
.demo-sales-inner > span { font-weight: 600; }
.demo-sales-inner a { color: #172330; background: #ffc221; padding: 5px 9px; border-radius: 5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.demo-sales-inner a:hover { color: #172330; background: #ffd45a; }
.demo-sales-inner button { display: grid; place-items: center; flex: none; border: 0; background: transparent; color: #fff; width: 32px; height: 32px; font-size: 23px; line-height: 1; }
.demo-sales-inner a:focus-visible, .demo-sales-inner button:focus-visible, .demo-contact-icon:focus-visible { outline: 3px solid #1678bf; outline-offset: 4px; }
.demo-contact-float { position: fixed; right: max(22px, env(safe-area-inset-right, 0px)); bottom: calc(var(--demo-nav-height) + 24px); display: flex; flex-direction: column; gap: 20px; z-index: 1041; }
.demo-contact-icon { position: relative; isolation: isolate; display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid #fff; border-radius: 50%; color: white; box-shadow: 0 5px 18px #10213230; text-decoration: none; }
.demo-call { background: #1689d7; --contact-ring: #1689d7; }
.demo-whatsapp { background: #19b956; --contact-ring: #19b956; }
.demo-contact-icon:hover { color: #fff; filter: brightness(1.08); }
.demo-contact-icon::before, .demo-contact-icon::after { content: ''; position: absolute; inset: -3px; z-index: -1; border: 2px solid var(--contact-ring); border-radius: 50%; pointer-events: none; animation: demo-contact-pulse 2.8s ease-out infinite; }
.demo-contact-icon::after { animation-delay: 1.4s; }
.demo-contact-icon svg { width: 25px; height: 25px; animation: demo-contact-ring 3.4s ease-in-out infinite; }
.demo-whatsapp svg { animation-delay: .8s; }
body.modal-open .demo-contact-float, body.modal-open .demo-sales-bar, body.demo-editing .demo-contact-float, body.demo-contact-obscured .demo-contact-float { visibility: hidden; pointer-events: none; }
@keyframes demo-contact-pulse { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.55); opacity: 0; } }
@keyframes demo-contact-ring { 0%, 30%, 100% { transform: rotate(0); } 4%, 12%, 20% { transform: rotate(15deg); } 8%, 16%, 24% { transform: rotate(-15deg); } }
@media (max-width: 767px) {
  .demo-sales-inner { gap: 8px; padding: 4px 8px 4px 12px; font-size: 11px; }
  .demo-sales-inner > span { max-width: 180px; }
  .demo-sales-inner button { width: 28px; height: 32px; }
  .demo-contact-float { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(var(--demo-nav-height) + 18px + env(safe-area-inset-bottom, 0px)); gap: 17px; }
  .demo-contact-icon { width: 44px; height: 44px; }
  .demo-contact-icon svg { width: 21px; height: 21px; }
  body.demo-contact-space { padding-bottom: max(150px, calc(var(--demo-nav-height) + 125px)); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-contact-icon svg, .demo-contact-icon::before, .demo-contact-icon::after { animation: none; }
  .demo-contact-icon::before, .demo-contact-icon::after { display: none; }
}