/*
 * promo.css: popup de promoción (Tienda\PromoPopup, promo.js). `<dialog>` modal que es solo la imagen con una X en la
 * esquina: el ancho sale de la pantalla y también de la altura (la imagen es 16:9 y nunca se corta en un celular acostado).
 * Se carga solo mientras hay una promo vigente.
 */
.sv-promo { border: 0; padding: 0; margin: auto; width: min(960px, calc(100vw - 32px)); max-width: none; max-height: none; background: transparent; color: inherit; overflow: visible; }
@supports (height: 100dvh) {
  .sv-promo { width: min(960px, calc(100vw - 32px), calc((100dvh - 48px) * 1.777)); }
}
.sv-promo::backdrop { background: rgba(8, 10, 24, .74); }
.sv-promo__img { display: block; width: 100%; height: auto; border-radius: 18px; background: #0B0D1F; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.sv-promo__cerrar { position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; padding: 0; border: 2px solid #FFFFFF; border-radius: 50%; background: #0F1433; color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.sv-promo__cerrar:hover { background: #E11D2E; }
.sv-promo__cerrar:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
@media (max-width: 700px) {
  .sv-promo__cerrar { top: -12px; right: -12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sv-promo[open] { animation: sv-promo-entra .3s ease-out; }
  .sv-promo[open]::backdrop { animation: sv-promo-fondo .3s ease-out; }
}
@keyframes sv-promo-entra { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes sv-promo-fondo { from { opacity: 0; } }