/* Barra superior (todas las páginas, ambos temas) — diseño v67/v68.
   Negro translúcido con textos e íconos claros, también en tema claro: sobre
   la página clara se ve gris, que es la composición normal de la
   transparencia. Mismo tamaño, disposición, enlaces y botón «Hablemos».
   El botón de tema (.theme-toggle) es del sitio, no del diseño: usa
   .icon-button y por eso toma estos mismos colores.

   Va DESPUÉS de tema-claro-v64.css y header-green-v63.css (misma
   especificidad con !important: gana la última). El logo es el wordmark
   original para fondos oscuros (el archivo blanco, clase brand-word--light):
   se elige cuál mostrar, no se invierte ni se recolorea.

   Solo el header (.site-header); el pie sigue con su logo y colores por tema.
   Los selectores llevan #top (el id del header) a propósito: el tema claro
   define el color de los botones con :not(#agent-start-v46), que cuenta como
   un id, y sin este refuerzo «Hablemos» quedaba verde oscuro sobre la barra
   negra en tema claro. */
html[data-theme] body .site-header#top {
  background: rgba(0, 0, 0, 0.64) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
  color: #f4f7fa !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html[data-theme] body .site-header#top .brand-word--dark {
  display: none !important;
}

html[data-theme] body .site-header#top .brand-word--light {
  display: block !important;
}

html[data-theme] body .site-header#top :is(.desktop-nav a, .mobile-nav a, .icon-button, .header-talk) {
  color: #f4f7fa !important;
}

/* Menú móvil desplegable: más opaco para que se lea sobre cualquier fondo. */
html[data-theme] body .site-header#top .mobile-nav {
  background: rgba(0, 0, 0, 0.9) !important;
  color: #f4f7fa !important;
}

html[data-theme] body .site-header#top :is(.header-talk, .icon-button) {
  background: rgba(16, 185, 129, 0.09) !important;
  border-color: rgba(190, 226, 214, 0.25) !important;
}

html[data-theme] body .site-header#top a:focus-visible,
html[data-theme] body .site-header#top button:focus-visible {
  outline: 2px solid #6ee7b7 !important;
  outline-offset: 4px;
}