/* ============ LEMBRETE · JANTAR — Mês de Doar EPM 2026 ============
   Notificação fixa no canto superior esquerdo.
   - Aparece 3,5s após carregar, fica 16s, reaparece a cada 45s (máx. 3 vezes).
   - Não aparece se a seção #jantar estiver visível na tela.
   - Hover pausa; ao sair, some em 6s. Fechar (×) ou clicar no link encerra de vez.
   - Mobile (<640px): layout horizontal compacto, abaixo do menu.
   Classes com prefixo .jn- para não conflitar com o site.
   Ajuste a imagem em src="fotos/jantar.jpg" e o link em href="#jantar". */
.jn{position:fixed;z-index:61;top:88px;left:20px;width:312px;opacity:0;transform:translateX(-28px) scale(.92);filter:blur(8px);transform-origin:top left;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.9,.25,1.15),filter .5s ease;pointer-events:none;font-family:'Work Sans',system-ui,sans-serif}
.jn.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.jn-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:20px;background:#fff;border:1px solid rgba(19,64,21,.1);box-shadow:0 22px 48px -22px rgba(19,64,21,.45),0 2px 6px rgba(19,64,21,.06);box-sizing:border-box}
.jn-img{position:relative;flex:none;width:100%;height:156px;border-radius:14px;overflow:hidden;background:#e9f0cf}
.jn-img img{width:100%;height:100%;object-fit:cover;display:block}
.jn-bell{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:#134015;display:grid;place-items:center;box-shadow:0 0 0 3px #fff}
.jn-bell svg{transform-origin:50% 10%}
.jn.on .jn-bell svg{animation:jnWave 1.6s ease-in-out .5s 4}
@keyframes jnWave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(-7deg)}20%,40%{transform:rotate(5deg)}}
.jn-body{display:flex;flex-direction:column;gap:2px;padding:4px 8px 6px;min-width:0;flex:1}
.jn-kicker{font:700 12px 'Work Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#336600}
.jn-title{font:700 21px/1.2 'Lora',serif;color:#134015;text-wrap:balance}
.jn-text{font:400 15px/1.4 'Work Sans',sans-serif;color:#3f5240;text-wrap:pretty}
.jn-foot{display:flex;align-items:center;gap:12px;margin-top:8px}
.jn-track{flex:1;height:3px;border-radius:3px;background:#eef2e4;overflow:hidden}
.jn-bar{display:block;height:100%;width:100%;background:#9fbf16}
.jn-link{display:inline-flex;align-items:center;gap:6px;font:700 14px 'Work Sans',sans-serif;color:#134015;text-decoration:none;white-space:nowrap}
.jn-link:hover{color:#336600}
.jn-close{position:absolute;top:-10px;left:-10px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(19,64,21,.12);background:#fff;color:#5f6d60;font-size:16px;line-height:1;cursor:pointer;box-shadow:0 4px 10px -4px rgba(19,64,21,.3);padding:0}
.jn-close:hover{background:#f2f5ea}
@media (max-width:639px){
  .jn{top:76px;left:12px;right:12px;width:auto}
  .jn-card{flex-direction:row;gap:12px}
  .jn-img{width:92px;height:92px}
  .jn-body{padding:2px 4px 2px 0}
}
@media (prefers-reduced-motion:reduce){.jn{transition:opacity .3s}.jn.on .jn-bell svg{animation:none}}

.jn{top:calc(var(--campaign-nav-height,76px) + 12px)}.jn-close{width:44px;height:44px;top:-12px;left:-12px;font-size:22px}.jn-link{min-height:44px}.jn[aria-hidden="true"]{visibility:hidden}.jn.on{visibility:visible}@media(max-width:639px){.jn{top:calc(var(--campaign-nav-height,76px) + 8px)}.jn-card{gap:10px;padding:10px 12px 10px 10px}.jn-img{width:72px;height:88px}.jn-title{font-size:17px;line-height:1.2;text-wrap:pretty}.jn-kicker{font-size:10px;letter-spacing:.03em}.jn-text{font-size:12px;line-height:1.35}.jn-foot{margin-top:3px;gap:8px}.jn-link{font-size:12px;min-height:32px}.jn-body{padding:0}.jn-close{left:auto;right:-6px;top:-16px}.jn-track{min-width:20px}}

@media(max-width:639px){.jn{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(24px) scale(.96);transform-origin:bottom center}.jn.on{transform:none}}
.jn-bell{top:8px;left:8px;right:auto}

@media(min-width:640px){.jn-close{left:auto;right:-12px;top:-12px;display:grid;place-items:center;padding:0}}