/* Cabecera de todo el sitio al hacer scroll: se compacta y el logo completo se pliega para dejar paso al icono de la «O»,
   que entra girando como un medidor. La clase .kc-scrolled la pone cabecera.js. */
html body #ketocis-main-header { transition: height .45s cubic-bezier(.16,1,.3,1), background .45s ease, box-shadow .45s ease !important; }
html body #ketocis-main-header .nav-brand { transition: padding .45s cubic-bezier(.16,1,.3,1), border-radius .45s ease, transform .1s ease-in-out !important; }
html body #ketocis-main-header .logo-desktop { max-width: 160px; transition: max-width .5s cubic-bezier(.16,1,.3,1), opacity .3s ease, transform .5s ease !important; }
@media (min-width: 969px) {
	html body #ketocis-main-header .logo-mobile { display: block !important; max-width: 0; opacity: 0; transform: rotate(-200deg) scale(.4);
		transition: max-width .5s cubic-bezier(.16,1,.3,1), opacity .4s ease .1s, transform .7s cubic-bezier(.34,1.56,.64,1) !important; }
	html body #ketocis-main-header.kc-scrolled { height: 64px !important; background: rgba(11, 17, 32, .82) !important; box-shadow: 0 12px 30px rgba(0,0,0,.35) !important; }
	html body #ketocis-main-header.kc-scrolled .nav-brand { padding: 6px !important; border-radius: 50% !important; }
	html body #ketocis-main-header.kc-scrolled .logo-desktop { max-width: 0; opacity: 0; transform: translateX(-12px); }
	html body #ketocis-main-header.kc-scrolled .logo-mobile { max-width: 40px; opacity: 1; transform: rotate(0) scale(1); height: 32px !important; }
}
@media (max-width: 968px) {
	html body #ketocis-main-header .logo-mobile { transition: transform .7s cubic-bezier(.34,1.56,.64,1) !important; }
	html body #ketocis-main-header.kc-scrolled { height: 64px !important; background: rgba(11, 17, 32, .85) !important; }
	html body #ketocis-main-header.kc-scrolled .logo-mobile { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	html body #ketocis-main-header, html body #ketocis-main-header .nav-brand, html body #ketocis-main-header .logo-desktop, html body #ketocis-main-header .logo-mobile { transition: none !important; }
}