/* =====================================================================
   SELETOR DE IDIOMA — bandeiras do Brasil, dos EUA e da Espanha.
   ---------------------------------------------------------------------
   As bandeiras sao SVG inline, NUNCA emoji: no Windows o emoji de
   bandeira nao tem glifo e o navegador mostra as duas letras do pais
   ("BR", "US") em vez do desenho.
   Compartilhado pelas tres versoes do site.
   ===================================================================== */
.lang-sel {
  display: flex; align-items: center;
  gap: 0; flex: 0 0 auto;
}
/* O link e o alvo de toque: 44x44 mesmo com a bandeira ocupando 24x16. */
.lang-sel a {
  min-width: 44px; min-height: 44px; padding: 14px 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  /* As outras bandeiras recuam; a atual fica cheia. */
  opacity: .6;
  transition: opacity .2s, background .2s;
}
.lang-sel a:hover,
.lang-sel a:focus-visible { opacity: 1; }
.lang-sel a[aria-current="page"] {
  opacity: 1;
  background: var(--tint-graphite, #F1F1F1);
}
.lang-sel a:focus-visible {
  outline: 2px solid var(--accent-ink, #B84400);
  outline-offset: -2px;
}

/* Borda fina para a bandeira nao sumir no fundo branco (a da Espanha
   tem vermelho nas bordas, mas a dos EUA termina em listra branca). */
.lang-sel .bandeira {
  display: block; width: 24px; height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 15, 15, .14);
}

/* CELULAR — o seletor sobe para a linha do logo.
   O header ja empilha em duas linhas (logo em cima, menu rolavel embaixo);
   deixar o seletor como terceiro filho do flex em coluna criava uma
   TERCEIRA linha e empurrava a pagina. Virando grade, o logo e as
   bandeiras dividem a primeira linha e o menu ocupa a segunda inteira.
   Vem depois do CSS da pagina, entao ganha no desempate. */
@media (max-width: 760px) {
  .nav-in, .nav-inner {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
  }
  .nav-in > a:first-child, .nav-inner > .nav-logo { grid-column: 1; grid-row: 1; }
  .lang-sel { grid-column: 2; grid-row: 1; justify-self: end; }
  .nav-menu, .nav-links { grid-column: 1 / -1; grid-row: 2; }

  /* 44x44 tambem no celular: tres bandeiras ocupam 132px e o logo ~110px,
     entao cabem lado a lado em 375px de largura util. */
  .lang-sel a { min-width: 44px; padding: 14px 10px; }
}

/* =====================================================================
   AVISO DE IDIOMA — uma linha por pagina, perto dos botoes que levam
   para o album, a loja, o Megacard ou o EU FUI, que so existem em
   portugues. Discreto de proposito: nao e um alerta.
   ===================================================================== */
.nota-idioma {
  font-size: 13px; line-height: 1.45;
  color: var(--dim, #6B6B6B);
  margin-top: 10px;
}