/* Kobaltica · encabezado global compacto (24-09-2026).
   Para páginas con identidad propia que no cargan pages.css: las cuatro demos de landing pages y Kobalti Citas.
   El marcado es el mismo que genera site.js → renderChrome() en todo el sitio; este archivo solo define su
   versión compacta, siempre visible (sticky) y separada de la navegación del negocio de ejemplo. */
:root{--kb-frame-h:56px}
@media(max-width:760px){:root{--kb-frame-h:52px}}

.kb-frame{position:sticky;top:0;z-index:100;height:var(--kb-frame-h)}
.kb-frame .kb-header{position:relative;height:var(--kb-frame-h);box-sizing:border-box;background:rgba(255,255,255,.97);border-bottom:1px solid #dfe8f2;box-shadow:0 1px 0 rgba(10,43,82,.03),0 6px 18px rgba(10,43,82,.05);color:#163252;font-family:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.kb-frame .kb-header__inner{display:flex;align-items:center;gap:20px;width:min(calc(100% - 40px),1320px);height:100%;margin:0 auto}
.kb-frame .kb-header__brand{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0;text-decoration:none}
.kb-frame .kb-header__logo{display:block;width:124px;max-width:none;height:auto;aspect-ratio:2886/808;object-fit:contain}
.kb-frame .kb-header__context{flex:0 0 auto;padding:5px 10px;border-radius:999px;background:#fff3e2;color:#8a4600;font:600 11.5px/1.1 Poppins,system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap}
.kb-frame .kb-nav{display:flex;align-items:center;gap:20px;margin:0 0 0 4px;font:500 13.5px/1 Poppins,system-ui,sans-serif}
.kb-frame .kb-nav a{position:relative;padding:10px 0;color:#34587f;text-decoration:none;white-space:nowrap}
.kb-frame .kb-nav a:hover,.kb-frame .kb-nav a[aria-current]{color:#0047aa}
.kb-frame .kb-nav a[aria-current]:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:#f28901}
.kb-frame .kb-nav-dropdown{position:relative;display:flex;align-items:center;align-self:stretch}
.kb-frame .kb-nav-dropdown:after{content:"";position:absolute;z-index:1;left:-8px;right:-8px;top:calc(100% - 3px);height:13px}
.kb-frame .kb-nav-dropdown__trigger{display:inline-flex;align-items:center;gap:5px}
.kb-frame .kb-nav-chevron{display:block;width:10px;height:7px;max-width:none;transition:transform .18s ease}
.kb-frame .kb-nav-dropdown.is-open .kb-nav-chevron,.kb-frame .kb-mobile-resources__toggle[aria-expanded=true] .kb-nav-chevron{transform:rotate(180deg)}
.kb-frame .kb-resources-menu{position:absolute;z-index:3;top:calc(100% + 6px);left:-18px;width:294px;padding:8px;border:1px solid #dfe8f2;border-radius:14px;background:#fff;box-shadow:0 16px 34px rgba(18,55,96,.13);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.kb-frame .kb-nav-dropdown.is-open .kb-resources-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
.kb-frame .kb-nav .kb-resources-menu__item{display:block;padding:10px 11px;border-radius:9px;color:#163252}
.kb-frame .kb-nav .kb-resources-menu__item:hover,.kb-frame .kb-nav .kb-resources-menu__item:focus-visible,.kb-frame .kb-resources-menu__item[aria-current]{background:#edf4fc;color:#0047aa}
.kb-frame .kb-resources-menu__item strong{display:block;font:600 13.5px/1.25 Poppins,system-ui,sans-serif}
.kb-frame .kb-resources-menu__item small{display:block;margin-top:3px;color:#5e7088;font:400 12px/1.35 Barlow,system-ui,sans-serif}
.kb-frame .kb-resources-menu__item[aria-current]:after{display:none!important}
.kb-frame .kb-mobile-resources__toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:13px 2px;border:0;border-bottom:1px solid #edf2f8;background:transparent;color:#163252;font:600 16px/1.2 Poppins,system-ui,sans-serif;text-align:left;cursor:pointer}
.kb-frame .kb-mobile-resources__menu{display:grid;padding:3px 0 7px 14px;border-left:2px solid #dfe8f2}
.kb-frame .kb-mobile-resources__menu[hidden]{display:none}
.kb-frame .kb-mobile-nav .kb-mobile-resources__menu a{padding:10px;border-bottom:0;border-radius:8px;font-size:14px}
.kb-frame .kb-mobile-nav .kb-mobile-resources__menu small{font-size:12px}
.kb-frame .kb-mobile-resources__toggle[data-current=true]{color:#0047aa}
.kb-frame .kb-header__inner>.kb-theme-toggle{flex:0 0 auto;width:38px;height:38px;min-width:38px;margin:0 0 0 auto;border-radius:11px}
.kb-frame .kb-header__inner>.kb-theme-toggle svg{width:22px;height:22px}
.kb-frame .kb-btn{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:38px;margin:0;padding:0 16px;border:0;border-radius:8px;background:linear-gradient(135deg,#064bb2,#0064cf);color:#fff;font:600 13px/1 Poppins,system-ui,sans-serif;text-decoration:none;box-shadow:0 6px 14px rgba(0,71,170,.18);transition:background .2s ease,transform .2s ease}
.kb-frame .kb-btn:after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 24h29M28 14l10 10-10 10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 24h29M28 14l10 10-10 10'/%3E%3C/svg%3E") center/contain no-repeat}
.kb-frame .kb-btn:hover{background:#0047aa;transform:translateY(-1px)}
.kb-frame .kb-menu{display:none;place-items:center;flex:0 0 auto;width:40px;height:40px;margin:0;padding:0;border:1px solid #cbdcf0;border-radius:10px;background:#fff;color:#0047aa;cursor:pointer}
.kb-frame .kb-menu svg{display:block;width:22px;height:22px}
.kb-frame .kb-menu__close{display:none!important}
.kb-frame .kb-menu[aria-expanded=true] .kb-menu__open{display:none!important}
.kb-frame .kb-menu[aria-expanded=true] .kb-menu__close{display:block!important}
.kb-frame .kb-mobile-nav{display:none;position:absolute;left:0;right:0;top:100%;box-sizing:border-box;max-height:calc(100vh - var(--kb-frame-h));overflow:auto;padding:8px max(20px,calc((100% - 1320px)/2)) 20px;background:#fff;border-bottom:1px solid #dfe8f2;box-shadow:0 22px 40px rgba(10,43,82,.16)}
.kb-frame .kb-mobile-nav.is-open{display:grid}
.kb-frame .kb-mobile-nav a{display:block;padding:13px 2px;border-bottom:1px solid #edf2f8;color:#163252;font:600 16px/1.2 Poppins,system-ui,sans-serif;text-decoration:none}
.kb-frame .kb-mobile-nav a[aria-current]{color:#0047aa}
.kb-frame .kb-mobile-nav a[aria-current]:before{content:"";display:inline-block;width:6px;height:6px;margin:0 10px 2px 0;border-radius:50%;background:#f28901;vertical-align:middle}
.kb-frame .kb-mobile-nav .kb-whatsapp{margin-top:14px;padding:14px 16px;border:0;border-radius:10px;background:#25d366;color:#fff;text-align:center}
.kb-frame a:focus-visible,.kb-frame button:focus-visible{outline:3px solid #f28901;outline-offset:2px;border-radius:6px}
@media(max-width:1239px){
  .kb-frame .kb-nav,.kb-frame .kb-header__inner>.kb-btn{display:none}
  .kb-frame .kb-menu{display:grid}
  .kb-frame .kb-header__inner>.kb-theme-toggle{margin-left:auto}
}
@media(max-width:760px){
  .kb-frame .kb-header__inner{width:calc(100% - 24px);gap:10px}
  .kb-frame .kb-header__logo{width:106px}
  .kb-frame .kb-header__context{padding:4px 8px;font-size:10.5px}
  .kb-frame .kb-mobile-nav{padding-inline:16px}
}
/* On very narrow phones the context pill keeps a short version of its text (screen readers get the full one). */
@media(max-width:400px){
  .kb-frame .kb-header__context[data-short]{font-size:0}
  .kb-frame .kb-header__context[data-short]:after{content:attr(data-short);font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){.kb-frame .kb-btn,.kb-frame .kb-nav-chevron,.kb-frame .kb-resources-menu{transition:none}}

html[data-theme="dark"] .kb-frame .kb-header{background:rgba(7,17,31,.95);border-color:rgba(191,213,237,.16);box-shadow:0 1px 0 rgba(255,255,255,.02),0 6px 18px rgba(0,0,0,.3);color:#f5f8fc}
html[data-theme="dark"] .kb-frame .kb-header__context{background:rgba(242,137,1,.16);color:#ffc47d}
html[data-theme="dark"] .kb-frame .kb-nav a{color:#b5c2d1}
html[data-theme="dark"] .kb-frame .kb-nav a:hover,html[data-theme="dark"] .kb-frame .kb-nav a[aria-current]{color:#8fbcff}
html[data-theme="dark"] .kb-frame .kb-resources-menu{background:#0c1928;border-color:rgba(191,213,237,.16);box-shadow:0 18px 38px rgba(0,0,0,.4)}
html[data-theme="dark"] .kb-frame .kb-nav .kb-resources-menu__item{color:#f5f8fc}
html[data-theme="dark"] .kb-frame .kb-nav .kb-resources-menu__item:hover,html[data-theme="dark"] .kb-frame .kb-nav .kb-resources-menu__item:focus-visible,html[data-theme="dark"] .kb-frame .kb-resources-menu__item[aria-current]{background:#112337;color:#8fbcff}
html[data-theme="dark"] .kb-frame .kb-resources-menu__item small{color:#b5c2d1}
html[data-theme="dark"] .kb-frame .kb-mobile-resources__toggle{color:#f5f8fc;border-color:rgba(191,213,237,.12)}
html[data-theme="dark"] .kb-frame .kb-mobile-resources__toggle[data-current=true]{color:#8fbcff}
html[data-theme="dark"] .kb-frame .kb-mobile-resources__menu{border-color:rgba(191,213,237,.2)}
html[data-theme="dark"] .kb-frame .kb-btn{background:#1672ea}
html[data-theme="dark"] .kb-frame .kb-menu{background:#0c1928;border-color:rgba(191,213,237,.28);color:#8fbcff}
html[data-theme="dark"] .kb-frame .kb-mobile-nav{background:#0c1928;border-color:rgba(191,213,237,.16);box-shadow:0 22px 40px rgba(0,0,0,.45)}
html[data-theme="dark"] .kb-frame .kb-mobile-nav a{color:#f5f8fc;border-color:rgba(191,213,237,.12)}
html[data-theme="dark"] .kb-frame .kb-mobile-nav a[aria-current]{color:#8fbcff}
html[data-theme="dark"] .kb-frame .kb-mobile-nav .kb-whatsapp{background:#1f9e53;color:#fff}

/* Kobalti Citas · the product keeps its own bars; they now sit below the Kobaltica bar. */
/* kobalti-citas.css hides horizontal overflow on html and body, which turns body into a scroll container and
   switches off every position:sticky. clip keeps the same clipping without that side effect. */
html:has(body[data-kb-frame^="citas"]),body[data-kb-frame^="citas"]{overflow-x:clip}
/* The demo bar was never sticky in practice (the overflow rule above disabled it); it keeps scrolling with the page. */
body[data-kb-frame="citas"] .kc-demo-bar{position:relative;top:auto}
body[data-kb-frame="citas"] .kc-highlights{top:calc(78px + var(--kb-frame-h))}
body[data-kb-frame="citas"] .kc-owner{min-height:calc(100vh - 60px - var(--kb-frame-h))}
body[data-kb-frame="citas"] .kc-owner-nav{top:var(--kb-frame-h);height:calc(100vh - 60px - var(--kb-frame-h))}
body[data-kb-frame="citas"] .kc-panel-backdrop{top:calc(64px + var(--kb-frame-h))}
body[data-kb-frame="citas"] .kc-side-panel{top:calc(64px + var(--kb-frame-h));height:calc(100vh - 64px - var(--kb-frame-h))}
@media(max-width:760px){
  body[data-kb-frame="citas"] .kc-highlights{top:auto}
  body[data-kb-frame="citas"] .kc-owner{min-height:calc(100vh - 84px - var(--kb-frame-h))}
  body[data-kb-frame="citas"] .kc-panel-backdrop{top:calc(84px + var(--kb-frame-h))}
  body[data-kb-frame="citas"] .kc-side-panel{top:calc(84px + var(--kb-frame-h));height:calc(100vh - 84px - var(--kb-frame-h))}
}
/* Service page and demo hub: the product bar under the Kobaltica bar names the product instead of repeating the logo. */
body[data-kb-frame="citas-site"] .kc-site-product{display:inline-flex;align-items:baseline;gap:5px;padding:0;background:none!important;color:#163252!important;font:600 18px/1 Poppins,system-ui,sans-serif!important;letter-spacing:-.01em;text-decoration:none}
body[data-kb-frame="citas-site"] .kc-site-product b{color:#0047aa;font-weight:700}
html[data-theme="dark"] body[data-kb-frame="citas-site"] .kc-site-product{color:#f5f8fc!important}
html[data-theme="dark"] body[data-kb-frame="citas-site"] .kc-site-product b{color:#8fbcff}