/* O ícone de informação. Discreto e semitransparente ao lado do texto, como
   ele pediu — só ganha contraste no hover, no foco e enquanto está aberto. */
.ix {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  line-height: 0;
}

.ix__bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .45;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: opacity .15s ease;
}

.ix__bt:hover,
.ix__bt:focus-visible,
.ix__bt[aria-expanded="true"] { opacity: 1; }
.ix__bt:focus-visible { outline: 2px solid var(--red, #6E1423); outline-offset: 2px; }

/* NO CELULAR O ALVO É MAIOR DO QUE O DESENHO. 16px é confortável de ler e
   pequeno demais para o dedo; o ::before estica a área de toque para 40px sem
   engordar o ícone. Sem isto, o padrão "toque para abrir" falha justamente no
   aparelho para o qual ele foi feito. */
.ix__bt::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
}

/* O [hidden] SOZINHO NÃO ESCONDE ISTO. O display:none que o navegador dá ao
   atributo é regra de folha do agente; um display:flex escrito aqui ganha dele,
   e os balões ficam TODOS na tela e no layout — foi o que aconteceu, e o que
   denunciou não foi o olho: foi a página passar a rolar de lado no celular.
   Eu tinha conferido o ATRIBUTO e não o que aparece. */
.ix__pop[hidden] { display: none; }

.ix__pop {
  position: absolute;
  z-index: 40;
  bottom: calc(100% + 9px);
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  max-width: min(300px, calc(100vw - 32px));
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--char, #2A2A30);
  color: #fff;
  box-shadow: 0 8px 26px -10px rgba(20, 22, 30, .5);
  text-align: left;
  font-size: 12.5px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

/* a seta e posicionada pelo JS (--seta), porque o balao escorrega para
   caber na tela e ela precisa continuar apontando para o icone */
.ix__pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--seta, 50%);
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--char, #2A2A30);
}

.ix__txt { display: block; }
.ix__txt b { color: #fff; }
.ix__txt a { color: #E9A7AF; }

.ix__x {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: -2px -3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

.ix__x:hover { background: rgba(255, 255, 255, .24); }
.ix__x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* O × SÓ APARECE ONDE ELE É NECESSÁRIO. No computador o balão fecha sozinho ao
   tirar o ponteiro, e um botão de fechar ali seria ruído; no celular ele é a
   única saída. A pergunta certa não é a largura da tela, é se a pessoa
   consegue fazer hover. */
@media (hover: hover) and (pointer: fine) {
  .ix__x { display: none; }
  .ix__bt::before { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .ix__bt { transition: none; }
}