/* ==========================================================================
   Cabecera de familia · Noir Cósmico v2
   Fuente: docs/NOIR-COSMICO-V2.md §4–7 del repo de Firmamento
   (vse-elbuenmai/bortle-cero-firmamento). Misma cabecera que las cuatro
   experiencias: enlaces 16 px / 400, menú «Experiencias» como panel y el
   último elemento del menú principal («Evalúa tu impacto») como botón.
   El prefijo #masthead / #mobile-drawer gana al CSS dinámico de Kadence
   sin tocar sus ajustes del Personalizador.
   ========================================================================== */

:root {
  --bc-texto: #c8d8ec;
  --bc-muted-v2: #96a6ba;
}

/* ── Barra (escritorio) ─────────────────────────────────────────────────── */
#masthead #main-header .site-main-header-inner-wrap {
  min-height: 80px;
}

#masthead .site-branding a.brand {
  gap: 12px;
  align-items: center;
}

#masthead .site-branding a.brand img.custom-logo {
  width: 40px;
  height: 40px;
  max-width: 40px;
}

#masthead .site-branding .site-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bc-blanco, #f0f6ff);
  line-height: 1.2;
}

#masthead .main-navigation .primary-menu-container > ul {
  align-items: center;
}

#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bc-texto);
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
#masthead .main-navigation .primary-menu-container > ul > li.menu-item:focus-within > a,
#masthead .main-navigation .primary-menu-container > ul > li.current-menu-item > a,
#masthead .main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a {
  color: var(--bc-blanco, #f0f6ff);
}

/* ── Desplegable «Experiencias» ─────────────────────────────────────────── */
#masthead .header-navigation .header-menu-container ul ul.sub-menu {
  background: var(--bc-noche, #0d1625);
  border: 1px solid rgba(123, 168, 212, 0.22);
  border-radius: 12px;
  padding: 8px;
  min-width: 280px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

#masthead .header-navigation .header-menu-container ul ul li.menu-item {
  border: 0;
}

#masthead .header-navigation .header-menu-container ul ul li.menu-item > a {
  width: auto;
  min-width: 262px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bc-texto);
  background: transparent;
}

/* Las cuatro experiencias son sitios propios: flecha de salida como en ellas. */
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a::after {
  content: "↗";
  color: var(--bc-acento, #7ba8d4);
  font-size: 15px;
}

#masthead .header-navigation .header-menu-container ul ul li.menu-item > a:hover,
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a:focus-visible {
  background: rgba(123, 168, 212, 0.1);
  color: var(--bc-blanco, #f0f6ff);
}

/* ── Último elemento del menú: botón «Evalúa tu impacto» ────────────────── */
#masthead .main-navigation .primary-menu-container > ul > li.menu-item:last-child {
  margin-left: 8px;
}

#masthead .main-navigation .primary-menu-container > ul > li.menu-item:last-child > a {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--bc-acento, #7ba8d4);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--bc-blanco, #f0f6ff);
  transition: background-color 0.2s ease, color 0.2s ease;
}

#masthead .main-navigation .primary-menu-container > ul > li.menu-item:last-child > a:hover,
#masthead .main-navigation .primary-menu-container > ul > li.menu-item:last-child > a:focus-visible,
#masthead .main-navigation .primary-menu-container > ul > li.current-menu-item:last-child > a {
  background: var(--bc-acento, #7ba8d4);
  color: var(--bc-cosmos, #080c14);
}

/* Entre el menú de Kadence (1025 px) y 1280 px no caben ocho enlaces a 16 px. */
@media (max-width: 1280px) {
  #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a {
    padding: 0 8px;
  }
  #masthead .main-navigation .primary-menu-container > ul > li.menu-item:last-child > a {
    padding: 0 16px;
  }
}

/* ── Foco visible ───────────────────────────────────────────────────────── */
#masthead a:focus-visible,
#mobile-toggle:focus-visible,
#mobile-drawer a:focus-visible,
#mobile-drawer button:focus-visible {
  outline: 2px solid var(--bc-estrella, #b8d4f0);
  outline-offset: 3px;
}

/* ── Barra móvil (≤ 1024 px, cabecera móvil de Kadence) ─────────────────── */
#mobile-header .site-main-header-inner-wrap {
  min-height: 64px;
}

#mobile-header .site-branding a.brand {
  gap: 10px;
  align-items: center;
}

#mobile-header .site-branding a.brand img.custom-logo {
  width: 34px;
  height: 34px;
  max-width: 34px;
}

#mobile-header .site-branding .site-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bc-blanco, #f0f6ff);
}

#mobile-toggle {
  min-width: 44px;
  min-height: 44px;
}

/* ── Cajón móvil ────────────────────────────────────────────────────────── */
#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bc-texto);
  min-height: 48px;
}

#mobile-drawer .mobile-navigation ul ul li > a {
  font-size: 16px;
}

#mobile-drawer .mobile-navigation ul li > a:hover,
#mobile-drawer .mobile-navigation ul li.current-menu-item > a {
  color: var(--bc-blanco, #f0f6ff);
}

#mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item:last-child {
  border: 0;
  margin-top: 16px;
}

#mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item:last-child > a {
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--bc-acento, #7ba8d4);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  color: var(--bc-blanco, #f0f6ff);
}

/* ==========================================================================
   Contraste y piso de texto (auditoría del 1-oct-2026)
   ========================================================================== */

/* Pie: #4a6080 sobre #0d1625 daba 2.83:1. */
footer.site-footer,
#colophon a,
.site-footer a {
  color: var(--bc-muted-v2) !important;
}

#colophon .footer-navigation .footer-menu-container > ul li a {
  font-size: 13px !important;
  font-weight: 400 !important;
}

#colophon a:hover,
.site-footer a:hover {
  color: var(--bc-blanco, #f0f6ff) !important;
}

/* Indicador «scroll» (Inicio y pilares): 9 px en #2a4060 daba 1.86:1. */
.bc-hero__scroll-hint span,
.bc-pilar-header__scroll span {
  font-size: 11px;
  color: var(--bc-muted-v2);
}

/* Explicador de la escala, «01», «02»…: 4.12:1. */
.bc-bortle-explainer__why-num {
  color: var(--bc-acento, #7ba8d4) !important;
}

/* Eyebrows y etiquetas de 9–10 px: piso de 12 px (11 px en rótulos de datos). */
.bc-tag,
.bc-eyebrow,
.bc-hero__eyebrow,
.bc-pilar-header__eyebrow,
.bc-pilar-header__tag,
.bc-page-header__eyebrow {
  font-size: 12px !important;
}

.bc-card-ph__label,
.bc-bortle-explainer__bar-num {
  font-size: 11px;
}