/* Seletor PT | EN e a faixa que sugere o outro idioma. Serve ao hub (escuro) e ao portfólio (claro). */
.idioma{ display:flex; align-items:center; gap:2px; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.14em; }
.idioma a, .idioma span{ display:inline-flex; align-items:center; min-height:44px; padding:0 10px; }
.idioma a{ transition:color .16s ease; }

/* hub: canto superior direito da coluna */
.pagina{ position:relative; }
.pagina > .idioma{ position:absolute; top:16px; right:14px; color:var(--tinta3); }
.pagina > .idioma span{ color:var(--claro); }
@media (hover:hover){ .pagina > .idioma a:hover{ color:var(--claro); } }
@media (max-width:640px){ .pagina > .idioma{ top:8px; right:6px; } }

/* portfólio: dentro da faixa do cabeçalho, entre o lugar e o botão */
.cabecalho .idioma{ color:var(--tinta3-txt); }
.cabecalho .idioma span{ color:var(--tinta); }
@media (hover:hover){ .cabecalho .idioma a:hover{ color:var(--sinal); } }
@media (max-width:640px){ .cabecalho .dentro{ gap:8px; } .cabecalho .idioma a, .cabecalho .idioma span{ padding:0 7px; } }

/* faixa de sugestão: fixa embaixo, não empurra o conteúdo */
.sugestao{
  position:fixed; left:0; right:0; margin:0 auto; bottom:16px; z-index:40;
  display:flex; align-items:center; gap:4px; width:fit-content; max-width:calc(100vw - 24px);
  background:var(--sinal); color:#FFFFFF; border-radius:10px; padding:4px 4px 4px 16px;
  font-family:var(--mono); font-size:12.5px; line-height:1.4;
}
.sugestao a{ color:#FFFFFF; font-weight:600; text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; min-height:44px; padding:0 4px; }
.sugestao button{ appearance:none; border:0; background:transparent; color:#FFFFFF; font:inherit; font-size:20px; line-height:1; min-width:44px; min-height:44px; cursor:pointer; border-radius:8px; }
.sugestao button:hover{ background:rgba(255,255,255,.14); }
.sugestao :focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; }