/* ---------- Popup da promoção (<dialog>) ----------
   O <dialog> já cuida do foco, do Esc e de ficar por cima de tudo. */

.pop {
  width: min(92vw, 520px); max-height: 92vh; overflow: auto; margin: auto; padding: clamp(26px, 4vw, 40px);
  background: radial-gradient(70% 50% at 100% 0%, var(--glow) 0%, transparent 70%), var(--coal);
  color: var(--white); border: 1px solid var(--gold); text-align: center;
  box-shadow: 0 0 0 6px var(--glow-soft), 0 40px 120px var(--shadow);
}
.pop::backdrop { background: var(--veil); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pop[open] { animation: popEntra .6s var(--ease); }
.pop[open]::backdrop { animation: veuEntra .4s ease; }
@keyframes popEntra { from { opacity: 0; transform: translateY(24px) scale(.94); } }
@keyframes veuEntra { from { opacity: 0; } }

.pop__fechar {
  position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  color: var(--mute); font-size: 1.8rem; line-height: 1; transition: color .2s, transform .3s var(--ease);
}
.pop__fechar:hover { color: var(--gold); transform: rotate(90deg); }

.pop .selo-promo { margin-bottom: 18px; }
.pop__titulo { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 14px; text-transform: uppercase; }
.pop__texto { color: var(--mute); font-size: 1.02rem; margin-top: 6px; }
.pop__texto strong { color: var(--white); }
.pop .contagem__grade { margin: 22px 0; }
.pop__acoes { display: grid; gap: 10px; }