/* Ícone "i" e caixa de informação (shared/info.js) */
.com-info { position: relative; }
.com-info .head, .com-info > h2 { padding-right: 30px; }   /* folga para o botão no canto */
.info-btn { position: absolute; top: 10px; right: 10px; z-index: 2; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font: italic 600 13px/1 Georgia, "Times New Roman", serif;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); }
.info-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (pointer: coarse) { .info-btn::after { content: ""; position: absolute; inset: -10px; } }   /* área de toque maior */
.info-caixa { position: fixed; inset: auto; margin: 0; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 14px 40px 14px 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22); font-size: 13.5px; line-height: 1.45; text-align: left; }
.info-caixa strong { display: block; font-family: var(--display); font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.info-caixa p { margin: 0 0 8px; }
.info-caixa p:last-child { margin-bottom: 0; }
.info-caixa em { font-style: normal; font-weight: 600; }
.info-fechar { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; background: transparent;
  font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; }
.info-fechar:hover { color: var(--ink); }
.info-caixa.bloco { position: static; width: auto; max-width: none; max-height: none; box-shadow: none; }