/* Selector de idioma ES/EN — reglas compartidas por todas las páginas */
:root[data-lang="es"] .i18n-en,
html:not([data-lang]) .i18n-en {
  display: none !important;
}
:root[data-lang="en"] .i18n-es {
  display: none !important;
}
/* Los spans en inglés llevan el atributo HTML "hidden" para que el contenido
   quede oculto incluso sin CSS (accesibilidad / sin JS). Al pasar a inglés,
   esta regla los vuelve a mostrar por encima de esa hoja de estilo del navegador. */
:root[data-lang="en"] .i18n-en[hidden] {
  display: inline;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .5rem;
  border-radius: 20px;
  border: 1px solid var(--line, #DEDBD1);
  background: #fff;
  flex-shrink: 0;
}
.lang-toggle:hover {
  border-color: var(--navy, #0C1F35);
}
.lang-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: .2rem;
  border: none;
  background: none;
  border-radius: 3px;
  cursor: pointer;
  opacity: .4;
  filter: grayscale(65%);
  transition: opacity .15s ease, filter .15s ease, transform .15s ease;
}
.lang-flag svg {
  display: block;
  width: 20px;
  height: 14px;
  border-radius: 2px;
}
.lang-flag:hover {
  opacity: .8;
}
.lang-flag.active {
  opacity: 1;
  filter: none;
  transform: scale(1.18);
}