/* =====================================================================
   BOCATITOS · POP-UP DE PROMOCIONES (assets/promo.js)
   Misma estética que el aviso de reparto (.dpop-*): fondo oscuro, borde amarillo.
   Sin capa que tape la página: en móvil es una tarjeta inferior de 45 % del alto
   como máximo (Google desaconseja los intersticiales intrusivos); en escritorio,
   una tarjeta compacta abajo a la derecha. Hoja aparte para no tocar styles.css.
   ===================================================================== */
@keyframes promoEntra{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.promo{
  position:fixed;z-index:250;right:20px;bottom:20px;width:min(360px,calc(100vw - 40px));
  max-height:min(70vh,520px);overflow:auto;
  background:var(--bg-2);color:var(--paper);border:3px solid var(--accent);border-radius:18px;
  box-shadow:0 22px 50px -12px rgba(0,0,0,.7);text-align:center;
  animation:promoEntra .35s var(--t-base);
}
.promo:focus{outline:none}
.promo:focus-visible{outline:none}
.promo-x{
  position:absolute;top:8px;right:8px;z-index:2;width:40px;height:40px;
  display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;
}
.promo-x:hover{color:var(--accent)}
.promo-x svg{width:18px;height:18px}
.promo-img{display:block;width:100%;height:140px;object-fit:cover}
.promo-txt{padding:20px 22px 22px}
.promo-tag{
  display:inline-block;background:var(--accent);color:var(--ink);padding:4px 12px;border-radius:999px;
  font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
}
.promo-txt h2{font-size:clamp(20px,5vw,26px);font-weight:900;text-transform:uppercase;line-height:1.1;margin:12px 0 0;padding-right:0}
.promo-txt p{color:var(--muted);font-size:14px;line-height:1.5;margin:10px 0 0}
.promo-txt .promo-cta{margin-top:16px;width:100%;justify-content:center;min-height:44px}
@media (max-width:560px){
  .promo{
    left:0;right:0;bottom:0;width:auto;max-height:45vh;max-height:45dvh;
    border-width:3px 0 0;border-radius:18px 18px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .promo-img{height:90px}
  .promo-txt{padding:16px 18px 18px}
  .promo-txt h2{padding:0 44px;margin-top:10px}
  .promo-txt p{margin-top:8px;font-size:13.5px}
  .promo-txt .promo-cta{margin-top:12px;padding:12px 20px}
}