/* Las imágenes aprobadas se conservan intactas. El encuadre CSS elimina solo
   la página de ejemplo exterior; los controles HTML coinciden con el arte. */
#promotion-dialog {
  width: min(1140px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid #ffffff38;
  border-radius: 22px;
  background: #0c0b0a;
  color: #fff8eb;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #898077 #151311;
}
#promotion-dialog::backdrop { background: #080705bb; backdrop-filter: blur(6px); }
.promotion-frame { position: relative; isolation: isolate; }
.promotion-art { position: relative; width: 100%; aspect-ratio: 1373 / 886; overflow: hidden; }
.promotion-art picture { display: contents; }
.promotion-art img {
  position: absolute;
  display: block;
  max-width: none;
  width: 111.8718%;
  height: auto;
  left: -5.9723%;
  top: -7.6749%;
  pointer-events: none;
  user-select: none;
}
#promotion-close {
  position: absolute;
  z-index: 3;
  left: calc(97.09% - 22px);
  top: calc(5.30% - 22px);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
#promotion-dialog[data-campaign="october"] #promotion-close svg { visibility: hidden; }
#promotion-cta {
  position: absolute;
  z-index: 2;
  left: 4.59%;
  top: 78.55%;
  width: 40.06%;
  height: 9.82%;
  min-height: 44px;
  border-radius: 24px;
  color: transparent;
}
#promotion-close:focus-visible, #promotion-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: 0 0 0 3px #ff5a09;
}
#promotion-cta:hover { box-shadow: inset 0 0 0 2px #fff9; }
.promotion-fallback { padding: 56px 40px 38px; text-align: center; }
.promotion-fallback-brand { display: block; width: min(290px, 78%); height: auto; margin: 0 auto 28px; filter: invert(1); }
.promotion-fallback [data-promotion-month] { margin: 0 0 20px; color: #ff702b; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.promotion-fallback-title { margin: 0 0 20px; font-family: Georgia, serif; font-size: clamp(32px, 5vw, 54px); line-height: 1.05; }
.promotion-fallback-offer { margin: 0; font-size: clamp(38px, 6vw, 66px); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; }
.promotion-fallback-offer strong { color: #ff5a09; }
.promotion-fallback-plans { margin: 12px 0 28px; font-size: 18px; }
.promotion-fallback [data-promotion-plans] { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px; border-radius: 16px; background: #ff5a09; color: #17100b; font-size: 16px; font-weight: 700; }
.promotion-fallback [data-promotion-plans]:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.promotion-fallback-terms { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #d9d4cc; }
#promotion-dialog[data-campaign="default"] { width: min(580px, calc(100vw - 32px)); }
#promotion-dialog[data-campaign="default"] #promotion-close { left: auto; top: 8px; right: 8px; background: #ffffff12; }
.promotion-reopen { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.promotion-reopen:hover { text-decoration: underline; }
.promotion-reopen:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 700px), (orientation: portrait) {
  #promotion-dialog { width: min(480px, calc(100vw - 24px)); max-width: calc(100vw - 24px); border-radius: 20px; }
  .promotion-art { aspect-ratio: 844 / 1551; }
  .promotion-art img { width: 112.3223%; left: -6.1611%; top: -4.5777%; }
  #promotion-close { left: calc(92.42% - 22px); top: calc(4.32% - 22px); }
  #promotion-cta { left: 6.87%; top: 85.30%; width: 86.14%; height: 7.29%; border-radius: 22px; }
  .promotion-fallback { padding: 58px 24px 28px; }
}
@media print { #promotion-dialog, .promotion-reopen { display: none !important; } }