/* (v186) Os efeitos de datas do site (static/js/efeitos.js, app/efeitos.py): o canvas por cima da página, que não
   pega o toque nem o clique. Fica acima do conteúdo e abaixo do topo, da sacola e das janelas (o topo é 30 ou 40, a
   sacola 40 e as janelas de 60 para cima). */
.ef-canvas { display: block; margin: 0; padding: 0; border: 0; pointer-events: none !important; user-select: none; }
.ef-canvas-janela { position: fixed; left: 0; right: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 25; contain: strict; }
.ef-canvas-caixa { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .ef-canvas-janela { display: none; } }

/* A prévia do dono (?efeito=...): só ele vê, com o caminho de volta ao Visual da página. */
.ef-previa-faixa {
  position: fixed; left: 12px; bottom: 12px; z-index: 210; max-width: min(560px, calc(100% - 100px));
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 10px 16px; border-radius: 22px;
  background: #12294A; color: #FFFFFF; font: 600 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 10px 28px rgba(10, 20, 40, .28);
}
.ef-previa-faixa a { color: #FFFFFF; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ef-previa-faixa em { font-style: normal; font-weight: 700; color: #FFD166; }
@media (max-width: 600px) {
  .ef-previa-faixa { left: 10px; bottom: 10px; max-width: calc(100% - 92px); padding: 8px 13px; border-radius: 18px; font-size: 12px; line-height: 1.3; }
}