/* ============================================================
   KERUTO — CABECERA GLOBAL
   Logo + menú de la home para todas las páginas que no usan la
   carcasa fija (blog, contacto, legales, fichas…). En las páginas
   con ker-shell se oculta porque ya llevan su propia barra.
   ============================================================ */

#brx-header .ker-header{
  /* La misma escala que section.ker-shell: así el logo, los botones y el
     área (20u del marco + 210u del topbar) se ven igual que en Sobre mí,
     categorías y proyectos. */
  --u: min( calc(100vw / 1480), calc(100vh / 1064) );
  position:relative;
  /* 20u del marco + 210u del área del topbar. */
  height:calc(230 * var(--u));
  background:transparent;
  border-bottom:0;
}
#brx-header .ker-header::after{
  content:"";
  position:absolute; inset:0; z-index:0;
  /* Mismo degradado que la ficha (ker-explorar .ker-topbar::after). */
  background: linear-gradient(to bottom,
    #ffffff 0%, #ffffff 30%, rgba(255, 255, 255, .75) 62%, rgba(255, 255, 255, 0) 100%);
  pointer-events:none;
}
/* El topbar compartido (plantilla "Cabecera Keruto") se coloca igual que
   en la ficha: 20u del marco + 48u del topbar. */
#brx-header .ker-header .ker-topbar{
  z-index:1;
  top:calc(68 * var(--u));
  left:calc(76 * var(--u));
  right:calc(76 * var(--u));
}

/* La cabecera global flota por encima del marco fijo (ker-shell, z-index:1). */
#brx-header{
  position:sticky; top:0;
  z-index:100;
}

/* La home es la excepción: lleva su propio logo + tagline dentro del lienzo. */
body:has(section.ker-home) #brx-header,
body:has(section.ker-home) #brx-footer,
body:has(section.ker-explorar) #brx-footer,
body:has(section.ker-sobre) #brx-footer,
body:has(section.ker-blog) #brx-footer{
  display:none !important;
}

@media (max-width:767px){
  #brx-header .ker-header{ height:auto; }
  #brx-header .ker-header .ker-topbar{
    position:static;
    padding:20px 16px 14px; box-sizing:border-box;
  }
  #brx-header .ker-header .ker-topbar .ker-topbar__logo{ width:190px; margin:0 auto; }
  #brx-header .ker-header .ker-topbar .ker-topbar__menu{ justify-content:center; }
  #brx-header .ker-header .ker-topbar .ker-btn{ font-size:20px !important; }
}