/* ==== Seletor de idioma PT | ES — Albras ==== */
.albras-lang{
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-right:16px;
  vertical-align:middle;
  font-family:'Titillium Web',-apple-system,Arial,sans-serif;
  line-height:1;
}
.albras-lang__btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:4px;
  cursor:pointer;
  border-radius:6px;
  line-height:0;
  opacity:.55;
  transition:opacity .15s ease,transform .15s ease;
}
.albras-lang__btn:hover{opacity:1;transform:translateY(-1px);}
.albras-lang__btn.is-active{
  opacity:1;
}
/* Bandeira (SVG) */
.albras-flag{
  display:block;
  width:28px;
  height:20px;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.25);
}
/* Idioma ativo ganha um anel de destaque em volta da bandeira */
.albras-lang__btn.is-active .albras-flag{
  box-shadow:0 0 0 2px #9c1f22, 0 1px 3px rgba(0,0,0,.3);
}
.albras-lang__btn:focus-visible{
  outline:2px solid #9c1f22;
  outline-offset:2px;
}

/* Quando o header está com fundo claro (ex.: home), reforça a borda das
   bandeiras para não sumirem. A classe .on-light é aplicada pelo lang.js. */
.albras-lang.on-light .albras-flag{
  box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.2);
}
.albras-lang.on-light .albras-lang__btn.is-active .albras-flag{
  box-shadow:0 0 0 2px #9c1f22, 0 1px 3px rgba(0,0,0,.3);
}

/* Garante que o seletor apareça também no mobile, ao lado do menu */
@media (max-width:900px){
  .albras-lang{margin-right:10px;}
  .albras-flag{width:26px;height:18px;}
}