/* ==========================================================================
   HEADER.CSS — Header EcoBD Lab · Design D
   Barra sticky, logo, mega-menu desktop, acordeón mobile, admin bar.
   ========================================================================== */

/* ── Barra principal ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-light);
  transition:
    box-shadow 0.25s,
    border-color 0.25s;
}

/* ── Contenedor centrado del header ────────────────────────────────────────── */
.header-content {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-gray-light);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* ── Logo ──────────────────────────────────────────────────────────────────── */
.header-logo-block {
  flex-shrink: 0;
  border-left: 4px solid var(--color-primary);
  padding: 0 0 0 20px;
  margin-right: 32px;
  display: flex;
  align-items: center;
  height: 100%;
}

/* WP envuelve the_custom_logo() en <a class="custom-logo-link"> */
.header-logo-block .custom-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header-logo-block .custom-logo {
  height: 38px;
  width: auto;
  display: block;
}

/* Fallback cuando no hay logo configurado */
.header-logo-fallback {
  text-decoration: none;
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-display), Georgia, serif;
  font-size: 18px;
  font-weight: 700;
}

.header-logo-fallback small {
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-dark-text-muted);
}

/* ── Navegación desktop ────────────────────────────────────────────────────── */
.primary-navigation {
  display: flex;
  align-items: center;
  flex: 1;
  height: 100%;
}

.hd-nav-list {
  display: flex;
  align-items: center;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Wrapper de cada item */
.hd-nav-item {
  position: static; /* el dropdown usa fixed, no relative */
  height: 100%;
  display: flex;
  align-items: center;
}

/*
 * Alineación a la derecha — control explícito vía clase CSS en WP Admin.
 * En Apariencia → Menús → Screen Options → activar "Clases CSS".
 * Añadir la clase "nav-push-right" al primer item que quieras a la derecha.
 * Todos los items siguientes quedan también a la derecha (son sus hermanos en flex).
 */
.hd-nav-item.nav-push-right {
  margin-left: auto;
}

/* Botones de nav y links simples */
.hd-navbtn,
.hd-simple {
  color: var(--color-gray);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 12px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
  font-family: var(--font-body), system-ui, sans-serif;
  text-decoration: none;
  position: relative;
}

/* Anular button:hover { background: #3f4047 } de la hoja de GP */
.hd-navbtn:hover,
.hd-navbtn:focus,
.hd-navbtn:active,
.hd-navbtn[aria-expanded="true"] {
  background: transparent !important;
  color: var(--color-black);
  box-shadow: none;
}

.hd-simple:hover,
.hd-simple:focus {
  color: var(--color-black);
}

/* Subrayado amarillo cuando el dropdown está abierto */
.hd-navbtn[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--color-primary);
}

.hd-caret {
  font-size: 7px;
  opacity: 0.35;
  transition: transform 0.15s;
  line-height: 1;
}

.hd-navbtn[aria-expanded="true"] .hd-caret {
  transform: rotate(180deg);
}

/* ── Dropdown panel ────────────────────────────────────────────────────────── */
.hd-dropdown-panel {
  display: none;
  position: fixed; /* fixed = siempre ancho completo de viewport */
  top: var(--header-bottom, 68px); /* JS actualiza --header-bottom en scroll */
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 2px solid var(--color-primary);
  border-bottom: 1px solid var(--color-gray-light);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  z-index: 199;
  padding: 24px 28px 20px;
}

/* JS añade .is-open al .hd-nav-item padre */
.hd-nav-item.is-open > .hd-dropdown-panel {
  display: block;
}

/* Fallback sin JS: abrir al foco del botón dentro del item */
.hd-nav-item:focus-within > .hd-dropdown-panel {
  display: block;
}

/* Label de sección (Grupo, Investigación…) */
.hd-dropdown-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hd-accent, #111);
  margin: 0 0 14px 0;
  font-weight: 600;
  font-family: var(--font-body), system-ui, sans-serif;
}

/* Colores de acento por sección (CSS custom property, heredada por hijos) */
/* Compartido con el acordeón mobile (.mob-section), que recibe la misma
   clase nav-color-* desde EcoBD_Walker_Mobile_Nav. */
.hd-nav-item.nav-color-grupo,
.mob-section.nav-color-grupo         { --hd-accent: var(--color-black); }
.hd-nav-item.nav-color-investigacion,
.mob-section.nav-color-investigacion { --hd-accent: #d4a800; }
.hd-nav-item.nav-color-publicaciones,
.mob-section.nav-color-publicaciones { --hd-accent: #4a6741; }
.hd-nav-item.nav-color-actividades,
.mob-section.nav-color-actividades   { --hd-accent: #8b4a3b; }
.hd-nav-item.nav-color-recursos,
.mob-section.nav-color-recursos      { --hd-accent: #555555; }

/* Grid de sub-items */
.hd-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 3px;
  margin-bottom: 16px;
}

/* Tarjeta de sub-item — grid: texto izq, flecha amarilla der */
.hd-dd-item {
  background: #fafafa;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: start;
  text-decoration: none;
  transition:
    background 0.12s,
    border-color 0.12s;
  overflow: hidden;
}

.hd-dd-item:hover {
  background: var(--color-white);
  border-color: var(--color-primary);
}

.hd-dd-title {
  grid-column: 1;
  grid-row: 1;
  display: block;
  color: var(--color-black);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 3px;
  font-family: var(--font-display), Georgia, serif;
}

.hd-dd-desc {
  grid-column: 1;
  grid-row: 2;
  display: block;
  color: #aaa;
  font-size: 11.5px;
  line-height: 1.45;
}

/* Flecha amarilla → que aparece en hover con slide-in */
.hd-dd-item::after {
  content: "→";
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--color-primary);
  font-size: 15px;
  padding-left: 10px;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity var(--transition-base)-out,
    transform var(--transition-base)-out;
}

/* Solo para la tarjeta del grid de escritorio. Sin este scope, la misma
   clase (viene del item de menú, la reutiliza también EcoBD_Walker_Mobile_Nav
   en .mob-sub-item) pintaba una franja crema suelta y sin relación con el
   color de la sección en el acordeón mobile — ruido, no jerarquía. */
.hd-dd-item.nav-item-destacado {
  background-color: color-mix(in srgb, var(--color-primary), white 95%);
  border-color: var(--color-primary);
}

.hd-dd-item:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* "Ver todo" al pie del panel */
.hd-dropdown-footer {
  border-top: 1px solid var(--color-gray-light);
  padding-top: 12px;
}

.hd-ver-todo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-dark-text-muted);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.15s;
  font-family: var(--font-body), system-ui, sans-serif;
}

.hd-ver-todo:hover {
  color: var(--color-black);
}

/* La línea se alarga/desplaza hacia la izquierda en hover */
.hd-ver-todo-line {
  width: 16px;
  height: 1.5px;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
  transition: transform var(--transition-base)-out;
}

.hd-ver-todo:hover .hd-ver-todo-line {
  transform: translateX(-4px);
}

/* Flecha → añadida por CSS (el PHP ya no la incluye), se desplaza en hover */
.hd-ver-todo::after {
  content: "→";
  display: inline-block;
  transform: translateX(0);
  transition:
    transform var(--transition-base)-out,
    color 0.15s;
  margin-left: 2px;
}

.hd-ver-todo:hover::after {
  transform: translateX(5px);
}

/* ── Hamburger ─────────────────────────────────────────────────────────────── */
.hamburger-toggle {
  display: none; /* oculto en desktop */
  margin-left: auto;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}

/* GP inyecta `button:hover, button:focus { color:#fff; background:#55555e }`
   inline (wp_add_inline_style('generate-style')) — igual que ya se anula en
   .hd-navbtn más arriba, aquí hace falta lo mismo o el botón se ve con un
   fondo gris apagado en cuanto se toca o recibe foco. */
.hamburger-toggle:hover,
.hamburger-toggle:focus {
  background: none;
  color: inherit;
}

/* Toque/click real (:active) — tinte propio, mismo lenguaje que el hover de
   .card-persona (color-mix con --color-primary). Distinto del foco por
   teclado: no debe depender de si el foco es "visible" o no. */
.hamburger-toggle:active {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Indicador de foco por teclado — se mantiene, es accesibilidad real (solo
   aparece con Tab, nunca con click ni con touch, por eso no hace falta
   tocarlo para el problema del fondo gris). */
.hamburger-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.hamburger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-black);
  transition:
    transform 0.2s,
    opacity 0.15s;
  transform-origin: center;
}

.hamburger-toggle[aria-expanded="true"] .bar-1 {
  transform: rotate(45deg) translate(5px, 5px);
  background: var(--color-primary);
}
.hamburger-toggle[aria-expanded="true"] .bar-2 {
  opacity: 0;
}
.hamburger-toggle[aria-expanded="true"] .bar-3 {
  transform: rotate(-45deg) translate(5px, -5px);
  background: var(--color-primary);
}

/* ── Menú mobile ───────────────────────────────────────────────────────────── */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-bottom, 68px);
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 3px solid var(--color-primary);
  max-height: calc(100vh - var(--header-bottom, 68px));
  overflow-y: auto;
  z-index: 198;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.mobile-menu.is-open {
  display: block;
}

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--header-bottom, 68px);
  background: rgba(0, 0, 0, 0.3);
  z-index: 197;
}
.mobile-overlay.is-visible {
  display: block;
}

/* Sin esto, .mob-nav-list hereda el margin: 0 0 1.5em 3em de la lista de GP
   (48px) MÁS el padding-left: 1.25em de listas del propio tema (main.css,
   20px) — 68px de desplazamiento sin ninguna razón de diseño. .hd-nav-list
   (desktop) ya tenía este mismo reset; aquí faltaba. */
.mob-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Secciones mobile. --hd-accent llega por la clase nav-color-* (misma que el
   mega-menú de escritorio, ver EcoBD_Walker_Mobile_Nav) y por defecto cae al
   negro para items sin color asignado (p. ej. Noticias, Contacto). */
.mob-section {
  --hd-accent: var(--color-black);
  border-bottom: 1px solid var(--color-gray-light);
}

.mob-section-btn,
.mob-section-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* --container-pad: mismo gutter que usa el resto de la web en móvil, no
     un valor propio del menú — así el texto arranca alineado con el resto
     del contenido de la página, no más adentro. */
  padding: 16px var(--container-pad);
  font-family: var(--font-display), Georgia, serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-black);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.12s,
    border-color 0.12s;
}

.mob-section-btn:hover,
.mob-section-link:hover,
.mob-section-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--hd-accent) 7%, var(--color-white));
  color: var(--color-black);
  border-left-color: var(--hd-accent);
}

/* .mob-section-btn es un <button> real: GP inyecta
   `button:hover, button:focus { color:#fff; background:#55555e }` inline
   (wp_add_inline_style('generate-style')) — es lo mismo que ya se anula en
   .hd-navbtn más arriba. Sin esto, CUALQUIER foco (click, tap o teclado)
   deja el texto en blanco sobre gris en vez del tinte de color de sección.
   .mob-section-link es un <a>, no le afecta ese selector de GP, pero se
   iguala aquí por consistencia. */
.mob-section-btn:focus,
.mob-section-link:focus {
  background: color-mix(in srgb, var(--hd-accent) 7%, var(--color-white));
  color: var(--color-black);
  border-left-color: var(--hd-accent);
  outline: none;
}

/* Indicador de foco por teclado — real y visible (Tab), no el touch/click.
   Hacia dentro (offset negativo) porque la fila ocupa todo el ancho: un
   outline hacia fuera quedaría cortado por las filas vecinas. */
.mob-section-btn:focus-visible,
.mob-section-link:focus-visible {
  outline: 2px solid var(--hd-accent);
  outline-offset: -3px;
}

.mob-caret {
  font-size: 9px;
  transition:
    transform 0.2s,
    color 0.12s;
  color: #bbb;
  line-height: 1;
  flex-shrink: 0;
}

.mob-section-btn[aria-expanded="true"] .mob-caret {
  transform: rotate(180deg);
  color: var(--hd-accent);
}

/* Panel acordeón */
.mob-section-panel {
  display: none;
  background: color-mix(in srgb, var(--hd-accent) 4%, #fafafa);
}

.mob-section-panel.is-open {
  display: block;
}

/* Sub-enlaces mobile — el borde izquierdo hereda el acento de la sección,
   igual que la tarjeta del dropdown de escritorio. Mismo padding horizontal
   que .mob-section-btn (--container-pad): el texto arranca alineado con el
   título de la sección Y con el margen estándar del resto de la página, no
   más adentro. */
.mob-sub-item {
  display: block;
  padding: 11px var(--container-pad);
  font-size: 13px;
  color: var(--color-gray-mid);
  text-decoration: none;
  border-top: 1px solid var(--color-gray-light);
  border-left: 3px solid transparent;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.1s,
    background 0.1s,
    border-color 0.1s;
}

.mob-sub-item:hover {
  color: var(--color-black);
  background: var(--color-white);
  border-left-color: var(--hd-accent);
}

/* Indicador de foco por teclado — real y visible (Tab), aparte del hover. */
.mob-sub-item:focus-visible {
  color: var(--color-black);
  background: var(--color-white);
  border-left-color: var(--hd-accent);
  outline: 2px solid var(--hd-accent);
  outline-offset: -3px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
/* 1180px, no 900px: con 7 items de primer nivel + selector de idioma (+ logo
   Creative Campus en el layout "lang") el contenido del nav no cabe antes de
   ~1100px de ancho — comprobado midiendo el ancho mínimo real de
   .header-logo-block + .hd-nav-item + .header-cc-block + .lang-switch. Por
   debajo del breakpoint anterior (900px) el nav se encogía más allá de su
   contenido y el selector de idioma / logo CC quedaban empujados fuera de la
   pantalla. Si se añaden o quitan items del menú principal, revisar que el
   nav siga cabiendo por encima de este valor. */
@media (max-width: 1180px) {
  .primary-navigation {
    display: none;
  }
  .hamburger-toggle {
    display: flex;
  }
}

@media (min-width: 1181px) {
  .hamburger-toggle {
    display: none !important;
  }
  .mobile-menu {
    display: none !important;
  }
}

/* Mobile: logo más pequeño en pantallas muy estrechas */
@media (max-width: 480px) {
  .header-logo-block .custom-logo {
    height: 30px;
  }
}

/* ── WP Admin Bar — el JS ya computa getBoundingClientRect().bottom          */
/* que incluye el desplazamiento del admin bar, así que no se necesita        */
/* ningún override de top aquí. La variable --header-bottom lo cubre todo.   */

/* ==========================================================================
   AVISO DE DESARROLLO (.site-notice)
   ========================================================================== */

.site-notice {
  background: var(--color-cream);
  border-bottom: 2px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 44px;
  position: relative;
}

.site-notice__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.site-notice__text {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-gray);
  line-height: 1.4;
  text-align: center;
}

.site-notice__close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-gray-mid);
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  transition: color 0.15s;
}

/* GP inyecta button:hover/:focus { color:#fff; background:#55555e } inline
   — aquí solo se anulaba color, así que quedaba un fondo gris detrás de la
   "×" al tocar o pasar el ratón (y sin tocar en absoluto el foco). */
.site-notice__close:hover,
.site-notice__close:focus {
  background: none;
  color: var(--color-black);
  outline: none;
}

.site-notice__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.site-notice[hidden] {
  display: none;
}

/* ── Selector de idioma ────────────────────────────────────────────────────── */
/* Reutiliza el lenguaje tipográfico de .hd-navbtn (11px, uppercase, tracking
   ancho) para que se lea como parte de la barra y no como un añadido. En
   desktop el margin-left auto lo empuja a la derecha; el hamburger, que usa
   el mismo truco, sigue funcionando porque en desktop está oculto. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding-right: 16px;
  flex-shrink: 0;
}

.lang-switch__item {
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray);
  text-decoration: none;
  padding: 4px 6px;
  transition: color 0.15s;
}

.lang-switch__item:hover,
.lang-switch__item:focus-visible {
  color: var(--color-black);
}

.lang-switch__item.is-active {
  color: var(--color-black);
  font-weight: 700;
}

/* Separador vertical entre idiomas, dibujado por el segundo elemento. */
.lang-switch__item + .lang-switch__item {
  border-left: 1px solid var(--color-gray-light);
}

/* En mobile manda el selector que vive dentro del menú desplegable. */
@media (max-width: 1180px) {
  .lang-switch:not(.lang-switch--mobile) {
    display: none;
  }
}

/* ── Selector de idioma dentro del menú mobile ─────────────────────────────── */
/* Segmented control (píldoras), no el subrayado de texto del desktop: en un
   panel táctil se lee mejor como un control que como un par de enlaces. */
.lang-switch--mobile {
  display: flex;
  margin: 8px 0 0;
  padding: 20px var(--container-pad) 24px;
  border-top: 1px solid var(--color-gray-light);
  gap: 8px;
}

.lang-switch--mobile .lang-switch__item {
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid var(--color-gray-light);
  border-radius: 999px;
  color: var(--color-gray-mid);
  -webkit-tap-highlight-color: transparent;
}

.lang-switch--mobile .lang-switch__item.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #171105;
}

.lang-switch--mobile .lang-switch__item:hover {
  border-color: var(--color-black);
  color: var(--color-black);
}

/* Indicador de foco por teclado — real y visible (Tab), aparte del hover. */
.lang-switch--mobile .lang-switch__item:focus-visible {
  border-color: var(--color-black);
  color: var(--color-black);
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* ==========================================================================
   LOGO CREATIVE CAMPUS EN EL HEADER
   Tres layouts alternativos, elegidos en Customizer → EcoBDLab — Identidad
   visual → Logo Creative Campus (header). Solo se imprime el markup del
   layout activo (inc/helpers.php · ecobdlab_header_cc_layout()), así que
   estas reglas nunca compiten entre sí en el DOM.

   El layout "lang" es responsive por sí mismo: en desktop se dibuja junto
   al selector de idioma (.header-cc-block); al mismo ancho en que el nav
   colapsa a hamburger (1180px, donde .lang-switch también se oculta) el
   bloque desaparece y lo sustituye la franja superior
   (.header-cc-topbar--responsive), que es un elemento aparte del header y
   por tanto siempre visible, con o sin el menú móvil abierto.
   ========================================================================== */

.header-cc__link {
  display: inline-flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}

.header-cc__img {
  width: auto;
  display: block;
}

/* ── Layout "lang" — junto al selector de idioma (desktop) ── */
.header-cc-block {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 16px;
}

.header-cc-block__divider {
  width: 1px;
  height: 22px;
  background: var(--color-gray-light);
  margin-right: 16px;
}

.header-cc-block .header-cc__img {
  height: 24px;
}

/* Por debajo de 1180px el bloque de escritorio cede el sitio a la franja
   superior responsive (misma regla que ya aplica a .lang-switch). */
@media (max-width: 1180px) {
  .header-cc-block {
    display: none;
  }
}

/* ── Layout "logo" — junto al logo de EcoBD Lab, mismo bloque ── */
.header-logo-block__divider {
  width: 1px;
  align-self: stretch;
  margin: 14px 16px;
  background: var(--color-gray-light);
}

.header-cc__link--inline .header-cc__img {
  height: 24px;
}

@media (max-width: 480px) {
  .header-cc__link--inline .header-cc__img {
    height: 19px;
  }
}

/* ── Layout "topbar" — franja separada encima del header sticky ── */
.header-cc-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: var(--color-black);
}

.header-cc-topbar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

.header-cc-topbar__label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dark-text-muted);
  white-space: nowrap;
}

.header-cc-topbar .header-cc__img {
  height: 19px;
}

@media (max-width: 480px) {
  .header-cc-topbar__label {
    display: none;
  }
  .header-cc-topbar__inner {
    justify-content: center;
  }
  .header-cc-topbar .header-cc__img {
    height: 21px;
  }
}

/* Variante responsive del layout "lang": la franja solo existe para cubrir
   el hueco que deja .header-cc-block al ocultarse por debajo de 1180px. */
@media (min-width: 1181px) {
  .header-cc-topbar--responsive {
    display: none;
  }
}