/* V81 - o botão "Como usar esta tela" e a janela da explicação. */
.ex-botao {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 8px;
  border: 0; border-radius: 999px; background: #1b1426; color: #fff; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 800; box-shadow: 0 10px 30px rgba(27, 20, 38, .35);
}
.ex-botao-icone {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #f5b83d; color: #1b1426; font-size: 22px; font-weight: 900;
}
.ex-botao:hover { background: #2a1f3a; }
.ex-botao:focus-visible { outline: 3px solid #f5b83d; outline-offset: 3px; }
.ex-botao.chamando .ex-botao-icone { animation: ex-chamar 1.6s ease-in-out infinite; }
@keyframes ex-chamar { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 61, .7); } 50% { box-shadow: 0 0 0 10px rgba(245, 184, 61, 0); } }

.ex-janela {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0;
  border-radius: 22px; box-shadow: 0 30px 80px rgba(26, 9, 48, .35); color: #1b1426; overflow: hidden;
}
.ex-janela::backdrop { background: rgba(16, 10, 19, .6); }
.ex-janela[open] { display: flex; flex-direction: column; }
.ex-conteudo { padding: 22px 22px 8px; overflow-y: auto; }
.ex-topo { margin-bottom: 12px; }
.ex-rotulo { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6f2aa8; }
.ex-topo h2 { margin: 2px 0 0; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.ex-bloco { margin: 0 0 14px; }
.ex-bloco h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 17px; }
.ex-bloco h3 i { font-style: normal; }
.ex-bloco p, .ex-bloco li { font-size: 18px; line-height: 1.55; color: #2b2436; margin: 0; }
.ex-bloco ol { margin: 0; padding-left: 24px; display: grid; gap: 8px; }
.ex-cuidado { padding: 12px 14px; border-radius: 14px; background: #fff4da; }
.ex-acoes { display: flex; gap: 10px; padding: 12px 22px 18px; border-top: 1px solid #efe9f4; background: #fff; }
.ex-ouvir, .ex-fechar {
  flex: 1; min-height: 52px; border-radius: 14px; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer;
}
.ex-ouvir { border: 1.5px solid #e3dcea; background: #fff; color: #2b2436; }
.ex-ouvir.lendo { background: #f4ecfb; border-color: #6f2aa8; color: #6f2aa8; }
.ex-fechar { border: 0; background: #6f2aa8; color: #fff; }
@media (max-width: 620px) {
  .ex-botao { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); min-height: 48px; font-size: 15px; }
  .ex-botao-icone { width: 34px; height: 34px; font-size: 20px; }
  .ex-conteudo { padding: 18px 16px 6px; }
  .ex-topo h2 { font-size: 21px; }
  .ex-bloco p, .ex-bloco li { font-size: 17px; }
  .ex-acoes { flex-direction: column-reverse; padding: 10px 16px 16px; }
  /* o botão fixo não pode cobrir o fim da página */
  body { padding-bottom: 72px; }
}
/* no celular, depois de rolar, vira só o círculo: não cobre o volante */
@media (max-width: 620px) {
  .ex-botao.recolhido { padding: 0 7px; }
  .ex-botao.recolhido .ex-botao-texto { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ex-botao.chamando .ex-botao-icone { animation: none; } }

/* V83 - a janela do cartão para compartilhar */
.cc-barra-compartilhar { display: flex; justify-content: flex-end; padding-top: 4px; }
.cc-compartilhar {
  width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 16px; border: 0;
  border-radius: 22px; box-shadow: 0 30px 80px rgba(26, 9, 48, .35); overflow-y: auto;
}
.cc-compartilhar::backdrop { background: rgba(16, 10, 19, .6); }
.cc-compartilhar img { display: block; width: 100%; height: auto; border-radius: 14px; }
.cc-compartilhar-acoes { display: grid; gap: 8px; margin-top: 12px; }
.cc-compartilhar-acoes button, .cc-compartilhar-acoes a {
  min-height: 50px; display: grid; place-items: center; border-radius: 14px; font: inherit; font-size: 17px;
  font-weight: 800; text-decoration: none; cursor: pointer; border: 1.5px solid #e3dcea; background: #fff; color: #2b2436;
}
.cc-compartilhar-acoes [data-cc-enviar] { background: #1f9d63; border-color: #1f9d63; color: #fff; }
.cc-compartilhar-acoes [data-cc-enviar][hidden] { display: none; }
.cc-compartilhar-dica { margin: 10px 0 0; font-size: 15px; color: #4f475c; text-align: center; }
.nt-compartilhar { width: 100%; min-height: 48px; }
.sa-compartilhar { justify-self: start; }

/* V89 - enquanto a voz lê, o trecho da vez fica marcado */
.ex-bloco, .ex-bloco li, .ex-topo h2 { transition: background-color .2s ease, box-shadow .2s ease; border-radius: 10px; }
.ex-falando { background: #f4ecfb; box-shadow: 0 0 0 6px #f4ecfb; }
.ex-cuidado.ex-falando { background: #ffe9b8; box-shadow: 0 0 0 4px #ffe9b8; }