.kb-demo-back{position:fixed;z-index:10000;left:18px;bottom:18px;display:inline-flex;align-items:center;min-height:42px;padding:10px 15px;border:1px solid rgba(255,255,255,.65);border-radius:999px;background:rgba(10,31,57,.9);box-shadow:0 10px 30px rgba(0,0,0,.18);color:#fff!important;font:600 14px/1.2 Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.01em;text-decoration:none!important;backdrop-filter:blur(10px);transition:transform .2s ease,background .2s ease}
.kb-demo-back:hover,.kb-demo-back:focus-visible{background:#0047aa;transform:translateY(-2px)}
.kb-demo-back:focus-visible{outline:3px solid #f28901;outline-offset:3px}
@media(max-width:600px){.kb-demo-back{left:12px;right:12px;bottom:12px;justify-content:center;min-height:46px}}
.footer-bottom .kb-demo-back{position:static;display:inline;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit!important;font:inherit;text-decoration:none!important;backdrop-filter:none;transform:none}
.footer-bottom .kb-demo-back:hover,.footer-bottom .kb-demo-back:focus-visible{background:transparent;transform:none}
@media(max-width:600px){.footer-bottom .kb-demo-back{display:inline;min-height:0}}

/* Kobaltica · reglas de lectura compartidas por las cuatro demos (22-09-2026).
   Cada negocio conserva su titular propio; el texto de lectura es Barlow, como en la galería de Kobaltica. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-kerning:normal;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3{font-synthesis:none;text-wrap:balance}
p,li,dd,blockquote,figcaption{text-wrap:pretty}
input,select,textarea,button{font-family:inherit}
/* Kobaltica · encabezado global sobre cada demo (24-09-2026). La barra de Kobaltica (kb-frame.css) queda fija
   arriba; el encabezado propio de cada negocio se coloca justo debajo y sus anclas y paneles fijos se recorren
   la misma altura, para que nada quede tapado. */
body[data-kb-frame="landing"] .site-header,
body[data-kb-frame="landing"] .header{top:var(--kb-frame-h)}
html:has(body[data-kb-frame="landing"]){scroll-padding-top:calc(var(--kb-frame-h) + 24px)}
html:has(body[data-kb-frame="landing"] .site-header){scroll-padding-top:calc(var(--kb-frame-h) + 90px)}
html:has(body[data-kb-frame="landing"] .cart-shortcut){scroll-padding-top:calc(var(--kb-frame-h) + 84px)}
@media(max-width:760px){html:has(body[data-kb-frame="landing"] .site-header){scroll-padding-top:calc(var(--kb-frame-h) + 72px)}}
body[data-kb-frame="landing"] .pizza-preview,
body[data-kb-frame="landing"] .cart{top:calc(105px + var(--kb-frame-h))}
body[data-kb-frame="landing"] .header:has(.cart-shortcut)+main .hero{height:calc(100vh - 76px - var(--kb-frame-h))}
/* Lumbre reserved room for the theme button inside its own header; the button now lives in the Kobaltica bar. */
body[data-kb-frame="landing"] .header:not(:has(>.kb-theme-toggle)) .header-link{margin-right:0}

/* Lumbre · dark mode: «Pedir flores» sits on the cream column of the hero, so it keeps the dark ink (24-09-2026). */
@media(min-width:701px){html[data-theme="dark"] body[data-kb-frame="landing"] .header .header-link{color:#30251f}}