/* Cabecera: marca, selector de idioma y botón de tema. */
header.top {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 1.25rem;
  text-decoration: none;
  letter-spacing: -0.02em;
}

/* Logo: uno por tema. Si la imagen no carga, js/logo.js muestra el nombre en texto. */
.logo { height: 64px; width: auto; display: none; }
html[data-dalia-theme="light"] .logo-light { display: block; }
html[data-dalia-theme="dark"] .logo-dark { display: block; }
.brand-fallback { display: none; }
.brand.no-logo .logo { display: none !important; }
.brand.no-logo .brand-fallback { display: block; }

.tools { display: flex; align-items: center; gap: 8px; }

/* Botón de volver a la portada: solo en las páginas sueltas (p. ej. /privacidad). La cabecera es fija, así que queda a la vista mientras se desplaza la página. */
.btn.back { gap: 6px; padding: 8px 16px 8px 12px; white-space: nowrap; }
.btn.back svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .btn.back { width: 38px; height: 38px; padding: 0; }
  .btn.back span { display: none; }
}

/* Selector de idioma (enlaces: el servidor renderiza cada idioma) */
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg2);
}
.seg a {
  color: var(--muted);
  font: 700 0.8rem "Plus Jakarta Sans", sans-serif;
  padding: 9px 12px;
  text-decoration: none;
}
.seg a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }

/* Icono del tema: sol en claro, luna en oscuro */
html[data-dalia-theme="light"] .icon-moon { display: none; }
html[data-dalia-theme="dark"] .icon-sun { display: none; }

/* Significado de las siglas bajo el logo (siempre en inglés). Va en el hueco transparente de abajo de la imagen del logo (el dibujo visible
   termina a 47,6 px de sus 64) y alineado con su borde izquierdo (14,4 px), para no cambiar la altura de la cabecera. */
.brand { position: relative; }
.brand-tag {
  position: absolute;
  left: 14px;
  bottom: 4px;
  color: var(--muted);
  font: 600 7.5px/10px "Plus Jakarta Sans", sans-serif;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.brand-tag mark { padding: 0; background: none; color: var(--teal); font-weight: 800; }
.brand.no-logo .brand-tag { display: none; }
@media (max-width: 720px) { .brand-tag { display: none; } }