/* ============================================================
   23-lang.css · Selector de idioma ES / EN
   Valor Proyectos · Dreamweavers Co · 2026-08-24
   Archivo aislado: no modifica 02-nav.css.
   ============================================================ */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 24px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.lang-switch__opt {
  color: #171717;
  opacity: 0.45;
  text-decoration: none;
  padding: 4px 2px;
  line-height: 1;
  transition: opacity 0.18s ease, color 0.18s ease;
}

.lang-switch__opt:hover,
.lang-switch__opt:focus-visible {
  opacity: 0.8;
}

.lang-switch__opt.is-active {
  color: #3F3477;
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

.lang-switch__sep {
  width: 1px;
  height: 12px;
  background: #171717;
  opacity: 0.2;
}

/* Sobre el hero, la nav es transparente y el texto va en blanco.
   Se hereda el color del contenedor para no romper el contraste. */
.nav--over-hero:not(.is-scrolled) .lang-switch__opt {
  color: #FFFFFF;
}

.nav--over-hero:not(.is-scrolled) .lang-switch__opt.is-active {
  color: #FFFFFF;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav--over-hero:not(.is-scrolled) .lang-switch__sep {
  background: #FFFFFF;
}

/* El selector del inner se oculta en móvil; el del overlay toma su lugar. */
.lang-switch--overlay {
  display: none;
}

@media (max-width: 900px) {
  .nav__inner .lang-switch {
    display: none;
  }

  .lang-switch--overlay {
    display: inline-flex;
    margin-left: 0;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(23, 23, 23, 0.12);
    width: 100%;
    justify-content: center;
    font-size: 15px;
  }

  .nav--over-hero:not(.is-scrolled) .lang-switch--overlay .lang-switch__opt {
    color: inherit;
  }

  .nav--over-hero:not(.is-scrolled) .lang-switch--overlay .lang-switch__sep {
    background: currentColor;
  }
}