/**
 * @versao_deploy 2026-10-16-h-a-casa-diz-astionbooks
 * ⚠️ Trocar a data acima ao editar — o painel `</>` lê este marcador do disco.
 * F4 · 16/10: a marca — as páginas, os pacotes e o aviso dizem AstionBooks (lotes 2 e 3 da marca)
 * aviso_marca.css — o card do aviso «agora somos AstionBooks» para o visitante (js/aviso_marca.js; F4, 16/10/2026).
 * O molde é o aviso_stripe.css, com cores PRÓPRIAS e neutras: é uma notícia, não um alarme, e lê-se igual no tema claro e
 * no escuro das três páginas públicas (landing, login, cadastro).
 */
[data-aviso-marca][hidden] { display: none !important; }
/* O slot é FIXO no fundo do ecrã, centrado: as três páginas têm layouts diferentes (a landing com hero, o login em duas
   colunas, o cadastro com scripts inline no topo), e um aviso por cima do conteúdo não mexe em nenhum. O slot não apanha
   cliques fora do card. */
[data-aviso-marca] {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
  display: flex; justify-content: center; pointer-events: none;
}
[data-aviso-marca] > .aviso-marca { pointer-events: auto; }

.aviso-marca {
  --am-fundo: #eef4ff;
  --am-borda: #a9c1f2;
  --am-faixa: #2f5fbf;
  --am-texto: #0f1d3a;
  --am-suave: #34466b;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  width: 100%;
  max-width: 560px;
  padding: 14px 44px 14px 16px;
  background: var(--am-fundo);
  color: var(--am-texto);
  border: 1px solid var(--am-borda);
  border-left: 5px solid var(--am-faixa);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(15, 29, 58, 0.22);
  text-align: left;
}
.aviso-marca *, .aviso-marca *::before, .aviso-marca *::after { box-sizing: border-box; }
.aviso-marca-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aviso-marca-titulo { font-size: 1rem; line-height: 1.3; font-weight: 800; color: var(--am-texto); }
.aviso-marca-texto { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--am-suave); }
.aviso-marca-link { align-self: flex-start; font-size: 0.9rem; font-weight: 700; color: var(--am-faixa); text-decoration: underline; }
.aviso-marca-link:focus-visible { outline: 3px solid #93b4f5; outline-offset: 2px; border-radius: 4px; }
.aviso-marca-fechar {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--am-suave);
  font: 700 1.3rem/1 system-ui, sans-serif; cursor: pointer;
}
.aviso-marca-fechar:hover, .aviso-marca-fechar:focus-visible { background: rgba(47, 95, 191, 0.12); color: var(--am-texto); }
.aviso-marca-fechar:focus-visible { outline: 3px solid #93b4f5; outline-offset: 1px; }

@media (max-width: 640px) {
  [data-aviso-marca] { left: 12px; right: 12px; bottom: 12px; }
  .aviso-marca { padding: 12px 40px 12px 14px; }
}