/* HireAIJob · sistema de marca compartido
   Un solo acento (turquesa), un solo fondo y el logo nuevo en todas las páginas.
   Se carga DESPUÉS del CSS de cada página: sólo fija tokens y el logo, no layout. */

:root {
  --hj-ink: #06070a;
  --hj-ink-2: #0a0c10;
  --hj-surface: #0d1015;
  --hj-accent: #5eead4;
  --hj-accent-2: #8ff5e3;
  --hj-accent-ink: #04211c;
  --hj-accent-soft: rgba(94, 234, 212, 0.12);
  --hj-accent-line: rgba(94, 234, 212, 0.34);
  --hj-text: #f3f6f8;
  --hj-text-soft: #bac4ce;
  --hj-line: rgba(255, 255, 255, 0.09);
}

/* --- acento y fondos unificados (mismos nombres que usa cada página) ------ */
:root {
  --accent: var(--hj-accent);
  --accent-hover: var(--hj-accent-2);
  --accent-strong: var(--hj-accent);
  --accent-2: var(--hj-accent-2);
  --accent-ink: var(--hj-accent-ink);
  --accent-soft: var(--hj-accent-soft);
  --accent-tint: var(--hj-accent-soft);
  --accent-line: var(--hj-accent-line);
  --brand: var(--hj-accent);
  --bg: var(--hj-ink);
  --bg-alt: var(--hj-ink-2);
  --bg-soft: var(--hj-ink-2);
  --bg-elev: var(--hj-surface);
  --ink-2: var(--hj-ink-2);
  --surf: var(--hj-surface);
  --panel: #0f1319;
  --panel-2: #141a21;
}

/* el logo: siempre el mismo trazo, heredando el color del texto */
.brand__mark,
.brand-mark {
  display: inline-block;
  width: 30px;
  height: 26px;
  flex: none;
  background-color: currentColor;
  color: var(--hj-accent);
  -webkit-mask: url("/brand/mark-2k.png") center / contain no-repeat;
  mask: url("/brand/mark-2k.png") center / contain no-repeat;
}

/* el sufijo "AI" del logotipo */
.brand__name em { font-style: normal; color: var(--hj-accent); }

/* el logo nunca cambia de color, aunque la página use otro acento */
.brand__mark,
.brand-mark { color: var(--hj-accent) !important; }

/* selector de idioma compartido */
.lang-select { display: inline-flex; align-items: center; }
.lang-select select {
  color-scheme: dark;
  min-height: 34px;
  padding: 0.25rem 1.6rem 0.25rem 0.55rem;
  border: 1px solid var(--hj-line);
  border-radius: 999px;
  background-color: #151921;
  color: var(--hj-text-soft);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23bac4ce' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
}
.lang-select select:hover { border-color: var(--hj-accent-line); color: var(--hj-text); }
.lang-select select:focus-visible { outline: 2px solid var(--hj-accent); outline-offset: 2px; }

.lang-select option { background: #151921; color: #f4f6f9; }

/* selector de idioma con burbuja deslizante */
.lang-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 84px;
  padding: 3px;
  border: 1px solid var(--hj-line);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.lang-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: var(--hj-accent);
  box-shadow: 0 4px 12px rgba(94, 234, 212, .28);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
html[lang="es"] .lang-switch::before { transform: translateX(100%); }
.lang-switch a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 .3rem;
  border-radius: 999px;
  background: transparent !important;
  color: var(--hj-text-soft);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  transition: color .2s ease;
}
html[lang="en"] .lang-switch a[data-lang="en"],
html[lang="es"] .lang-switch a[data-lang="es"] { color: var(--hj-accent-ink); }
.lang-switch a:hover { color: var(--hj-text); }
html[lang="en"] .lang-switch a[data-lang="en"]:hover,
html[lang="es"] .lang-switch a[data-lang="es"]:hover { color: var(--hj-accent-ink); }