/* WVportalOK.psd — lienzo de 1920 × 1252; activos separados del archivo maestro. */
html:has(.page-lunasangre),
html:has(.page-payment--green),
body.page-lunasangre,
body.page-payment--green {
  background: #000;
}

body:is(.page-lunasangre, .page-payment--green)::after { display: none; }

body:is(.page-lunasangre, .page-payment--green)::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  background: url('/assets/portal-blood-tears.webp') center center / cover no-repeat;
  content: '';
  pointer-events: none;
}

body:is(.page-lunasangre, .page-payment--green) .site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: auto;
  left: 50%;
  display: block;
  width: min(100vw, 153.3546svh, 1920px);
  height: 9vw;
  min-height: 0;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  container-type: inline-size;
  pointer-events: none;
}

body:is(.page-lunasangre, .page-payment--green) .header-left {
  position: absolute;
  top: 2.96875cqw;
  left: 2.76042cqw;
  display: flex;
  align-items: flex-start;
  gap: 2.39583cqw;
}

body:is(.page-lunasangre, .page-payment--green) .rating-mark {
  display: block;
  width: 10.9375cqw;
  max-width: none;
  height: auto;
}

body:is(.page-lunasangre, .page-payment--green) .powered-mark {
  display: block;
  width: 21.14583cqw;
  max-width: none;
  height: auto;
  margin: 1.97917cqw 0 0;
}

body:is(.page-lunasangre, .page-payment--green) .header-logo-link {
  position: absolute;
  top: 2.5cqw;
  right: 1.61458cqw;
}

body:is(.page-lunasangre, .page-payment--green) .header-logo {
  display: block;
  width: 11.19792cqw;
  max-width: none;
  height: auto;
  filter: none;
}

body:is(.page-lunasangre, .page-payment--green) .header-sign-in {
  position: absolute;
  top: 4.73958cqw;
  right: 14.63542cqw;
  z-index: 1;
  color: #fff;
  max-width: 22cqw;
  overflow: hidden;
  font: 400 0.94cqw/1 var(--font-bank);
  letter-spacing: .08em;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
}

body:is(.page-lunasangre, .page-payment--green) .header-sign-in:focus-visible,
body:is(.page-lunasangre, .page-payment--green) .header-logo-link:focus-visible,
.page-lunasangre .creator-encounter__activation:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

/* La figura y sus lunas conservan los dos WebP y las posiciones ya aprobadas. */
.page-lunasangre .luna-main { position: relative; z-index: 1; }
.page-lunasangre .creator-encounter__activation {
  position: absolute;
  z-index: 3;
  top: 90.57508%;
  left: 50%;
  width: max-content;
  max-width: 95%;
  transform: translateX(-50%);
  color: #e20b0d;
  font: 400 clamp(12px, 1.04167cqw, 20px)/1 var(--font-eurostar);
  letter-spacing: .10em;
  white-space: nowrap;
  text-shadow: 0 0 .35cqw rgba(0, 249, 0, .75);
  transition: opacity 1.6s ease 450ms;
}

.page-lunasangre .creator-encounter.is-intro-playing:not(.is-revealed) .creator-encounter__activation {
  opacity: 0;
  pointer-events: none;
}

/* El tamaño del marco vuelve a ser 1433/1920 del ancho del lienzo. */
.page-payment--green .payment-stage {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100vw, 153.3546svh, 1920px);
  min-height: 0;
  aspect-ratio: 1920 / 1252;
  margin: 0 auto;
  padding: 0;
}

.page-payment--green .payment-terminal {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
}

.page-payment--green .green-checkout__surface {
  position: absolute;
  top: 10.94249%;
  left: 12.70833%;
  width: 74.63542%;
  aspect-ratio: 1433 / 1059;
  margin: 0;
  container-type: inline-size;
}

.page-payment--green .green-checkout__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.page-payment--green .checkout-layout { position: absolute; inset: 0; margin: 0; }
.page-payment--green .checkout-piece {
  position: absolute;
  top: 24.36261%;
  left: 18.00419%;
  width: 25.40126%;
  height: 43.81492%;
  margin: 0;
  text-align: center;
}

.page-payment--green .checkout-piece .selection-view,
.page-payment--green .selection-view > div { width: 100%; height: 100%; margin: 0; }
.page-payment--green .checkout-piece .payment-moon {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 1.2cqw rgba(255, 255, 255, .18));
}

.page-payment--green .selection-code,
.page-payment--green .selection-meta,
.page-payment--green .payment-actions,
.page-payment--green .checkout-progress,
.page-payment--green .checkout-privacy,
.page-payment--green .field-note,
.page-payment--green .payment-method small,
.page-payment--green #checkoutBack,
.page-payment--green .green-checkout__footer { display: none !important; }

.page-payment--green .checkout-form--progressive {
  position: absolute;
  top: 33.89991%;
  left: 46.54571%;
  display: block;
  width: 37%;
  height: 46%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}

.page-payment--green .checkout-form--progressive .checkout-step {
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
}

.page-payment--green .checkout-step legend,
.page-payment--green .step-note {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-payment--green .checkout-form--progressive .field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.6cqw;
}

.page-payment--green .checkout-form--progressive .field {
  display: grid;
  grid-column: 1;
  gap: .8cqw;
  min-width: 0;
}

.page-payment--green .field > span,
.page-payment--green .checkout-payment-kicker {
  color: #df0010;
  font: 400 .84cqw/1 var(--font-eurostar);
  letter-spacing: .16em;
  text-shadow: 0 0 .75cqw rgba(0, 249, 0, .7);
}

.page-payment--green .field > span small { font-size: .7em; }
.page-payment--green .checkout-form--progressive .field input {
  display: block;
  width: 100%;
  height: 1.7cqw;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font: 700 1.35cqw/1.2 'Times New Roman', Times, serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 0 .3cqw rgba(0, 249, 0, .8), 0 0 1.25cqw rgba(0, 249, 0, .6);
}

.page-payment--green .field input::placeholder { color: rgba(255, 255, 255, .37); opacity: 1; text-shadow: none; }
.page-payment--green .field input:focus { outline: 0; border-bottom-color: #b50013; }

.page-payment--green .checkout-payment-kicker { margin: 0 0 1.35cqw; }
.page-payment--green .checkout-form--progressive .payment-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 .65cqw;
  border: 0;
}

.page-payment--green .checkout-form--progressive .payment-method {
  display: flex;
  align-items: center;
  gap: .65cqw;
  width: 100%;
  min-height: 3.07cqw;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
}

.page-payment--green .payment-method:has(input:checked) { border: 0; background: none; }
.page-payment--green .payment-method input,
.page-payment--green .checkout-consent input {
  flex: 0 0 auto;
  width: 1.1cqw;
  height: 1.1cqw;
  margin: 0;
  accent-color: #ae0010;
}

.page-payment--green .payment-method span { display: block; }
.page-payment--green .payment-method strong,
.page-payment--green .checkout-consent {
  color: #fff;
  font: 700 1.3cqw/1.1 'Times New Roman', Times, serif;
  letter-spacing: .17em;
  text-shadow: 0 0 .4cqw rgba(0, 249, 0, .8), 0 0 1.25cqw rgba(0, 249, 0, .5);
}

.page-payment--green .checkout-form--progressive .checkout-summary {
  display: grid;
  gap: .12cqw;
  width: 100%;
  margin: 0 0 0 1.25cqw;
  padding: 0;
  border: 0;
}

.page-payment--green .checkout-summary div,
.page-payment--green .checkout-summary .summary-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: .7cqw;
  margin: 0;
  padding: 0;
  border: 0;
}

.page-payment--green .checkout-summary .summary-total { margin-top: 1.2cqw; }
.page-payment--green .checkout-summary dt,
.page-payment--green .checkout-summary dd,
.page-payment--green .checkout-summary .summary-total dd {
  font: 700 1.07cqw/1.15 'Times New Roman', Times, serif;
  letter-spacing: .18em;
  white-space: nowrap;
  text-align: left;
  text-shadow: 0 0 .38cqw rgba(0, 249, 0, .65);
}

.page-payment--green .checkout-summary dt { color: #091c02; }
.page-payment--green .checkout-summary dd { color: #fff; }
.page-payment--green .checkout-form--progressive .checkout-consent {
  display: flex;
  align-items: center;
  gap: .7cqw;
  margin: 2.1cqw 0 0;
  cursor: pointer;
}
.page-payment--green .checkout-consent a { color: inherit; text-decoration: none; }
.page-payment--green .checkout-consent a:focus-visible { outline: 1px solid #fff; }

.page-payment--green .checkout-navigation {
  position: absolute;
  top: 19.19cqw;
  left: 23.59cqw;
  display: block;
  width: 12.21cqw;
  height: 5.38cqw;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.page-payment--green .checkout-navigation #checkoutNext,
.page-payment--green .checkout-form--progressive #checkoutSubmit {
  z-index: 2;
  display: grid;
  place-items: center;
  width: 12.21cqw;
  height: 5.38cqw;
  min-height: 0;
  margin: 0;
  padding: 0 1cqw;
  border: 0;
  background: url('/assets/portal-red-button.png') center / 100% 100% no-repeat;
  color: #fff;
  font: 700 1.08cqw/1.1 'Times New Roman', Times, serif;
  letter-spacing: .17em;
  text-shadow: 0 0 .42cqw rgba(0, 249, 0, .65);
  cursor: pointer;
}

.page-payment--green .checkout-form--progressive #checkoutSubmit {
  position: absolute;
  top: 19.19cqw;
  left: 23.59cqw;
}

.page-payment--green .checkout-form--progressive #checkoutSubmit:disabled {
  opacity: .65;
  cursor: wait;
}

.page-payment--green #checkoutNext:focus-visible,
.page-payment--green #checkoutSubmit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.page-payment--green .checkout-form--progressive .checkout-status {
  position: absolute;
  z-index: 3;
  top: 26cqw;
  right: 1cqw;
  bottom: auto;
  left: 0;
  max-height: 14cqw;
  overflow: auto;
  padding: 1cqw;
  border: 1px solid #401517;
  background: rgba(18, 38, 10, .96);
  color: #fff;
}

/* El PSD conserva el mismo marco y la misma posición incluso en el pago. */
.page-payment--green .green-checkout:has([data-checkout-panel="3"]:not([hidden])) .green-checkout__surface {
  min-height: 0;
}

@media (max-width: 820px) {
  body:is(.page-lunasangre, .page-payment--green) .site-header {
    width: 100vw;
    height: 76px;
    container-type: normal;
  }
  body:is(.page-lunasangre, .page-payment--green) .header-left {
    top: 18px;
    left: 14px;
    gap: 9px;
  }
  body:is(.page-lunasangre, .page-payment--green) .rating-mark { width: clamp(42px, 12vw, 54px); }
  body:is(.page-lunasangre, .page-payment--green) .powered-mark {
    width: clamp(85px, 26vw, 130px);
    margin-top: 11px;
  }
  body:is(.page-lunasangre, .page-payment--green) .header-logo-link { top: 16px; right: 12px; }
  body:is(.page-lunasangre, .page-payment--green) .header-logo { width: clamp(60px, 16vw, 85px); }
  body:is(.page-lunasangre, .page-payment--green) .header-sign-in {
    top: 33px;
    right: clamp(81px, 20vw, 108px);
    font-size: clamp(8px, 2vw, 11px);
    letter-spacing: 0;
    text-shadow: 0 0 8px rgba(0, 249, 0, .55);
  }
  .page-lunasangre .creator-encounter__activation {
    font-size: clamp(12px, 2.6vw, 17px);
    letter-spacing: .06em;
  }

  .page-payment--green .payment-stage {
    width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    padding: 105px 12px 28px;
  }
  .page-payment--green .payment-terminal { position: relative; }
  .page-payment--green .green-checkout__surface {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 520px);
    min-height: 870px;
    aspect-ratio: auto;
    margin: 0 auto;
    padding: 62px 22px 48px;
    border: 32px solid transparent;
    border-image-source: url('/assets/portal-green-frame.png');
    border-image-slice: 240 210 230 210 fill;
    border-image-width: 64px 46px 74px 46px;
    border-image-repeat: stretch;
    container-type: normal;
  }
  .page-payment--green .green-checkout__frame { display: none; }
  .page-payment--green .checkout-layout {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
  }
  .page-payment--green .checkout-piece {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 242px;
    margin: 0 auto 26px;
  }
  .page-payment--green .checkout-piece .payment-moon {
    width: auto;
    height: 100%;
    margin: auto;
    filter: drop-shadow(0 0 13px rgba(255, 255, 255, .2));
  }
  .page-payment--green .checkout-form--progressive {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 425px;
    margin: 0;
  }
  .page-payment--green .checkout-form--progressive .field-grid { gap: 24px; }
  .page-payment--green .checkout-form--progressive .field { gap: 7px; }
  .page-payment--green .field > span,
  .page-payment--green .checkout-payment-kicker {
    font-size: 10px;
    text-shadow: 0 0 9px rgba(0, 249, 0, .7);
  }
  .page-payment--green .checkout-form--progressive .field input {
    height: 27px;
    font-size: clamp(13px, 3.5vw, 17px);
    text-shadow: 0 0 5px rgba(0, 249, 0, .7);
  }
  .page-payment--green .checkout-payment-kicker { margin-bottom: 13px; }
  .page-payment--green .checkout-form--progressive .payment-method {
    gap: 8px;
    min-height: 48px;
  }
  .page-payment--green .payment-method input,
  .page-payment--green .checkout-consent input { width: 15px; height: 15px; }
  .page-payment--green .payment-method strong,
  .page-payment--green .checkout-consent { font-size: clamp(13px, 3.4vw, 17px); }
  .page-payment--green .checkout-form--progressive .checkout-summary {
    gap: 4px;
    margin: 12px 0 0 15px;
  }
  .page-payment--green .checkout-summary div,
  .page-payment--green .checkout-summary .summary-total { gap: 10px; }
  .page-payment--green .checkout-summary .summary-total { margin-top: 14px; }
  .page-payment--green .checkout-summary dt,
  .page-payment--green .checkout-summary dd,
  .page-payment--green .checkout-summary .summary-total dd {
    font-size: clamp(12px, 3.15vw, 16px);
    letter-spacing: .1em;
  }
  .page-payment--green .checkout-form--progressive .checkout-consent {
    gap: 9px;
    margin: 24px 0 0;
  }
  .page-payment--green .checkout-navigation,
  .page-payment--green .checkout-form--progressive #checkoutSubmit {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    width: 140px;
    height: 62px;
  }
  .page-payment--green .checkout-navigation #checkoutNext,
  .page-payment--green .checkout-form--progressive #checkoutSubmit {
    width: 140px;
    height: 62px;
    padding: 0 10px;
    font-size: 13px;
  }
  .page-payment--green .checkout-form--progressive .checkout-status {
    top: auto;
    right: 0;
    bottom: 65px;
    left: 0;
    max-height: 140px;
    padding: 10px;
  }
  .page-payment--green .green-checkout:has([data-checkout-panel="3"]:not([hidden])) .green-checkout__surface {
    min-height: 870px;
  }
  .page-payment--green .green-checkout:has([data-checkout-panel="3"]:not([hidden])) .checkout-form--progressive {
    height: 425px;
  }
}

@media (max-width: 370px) {
  body:is(.page-lunasangre, .page-payment--green) .powered-mark { width: 72px; }
  body:is(.page-lunasangre, .page-payment--green) .header-sign-in { right: 76px; font-size: 8px; }
  .page-payment--green .green-checkout__surface { padding-right: 12px; padding-left: 12px; }
  .page-payment--green .checkout-form--progressive .field input { font-size: 12px; letter-spacing: .13em; }
}

/* La ruta nueva /adquirir conserva el encabezado a escala del portal. */
@media (max-width: 720px) {
  body.page-lunasangre .site-header { height: 108px; }
  body.page-lunasangre .header-left { top: 17px; left: 15px; display: block; }
  body.page-lunasangre .rating-mark { width: 92px; }
  body.page-lunasangre .powered-mark {
    position: absolute;
    top: 34px;
    left: 104px;
    width: min(40vw,164px);
    margin: 0;
    max-width: none;
  }
  body.page-lunasangre .header-logo-link { top: 16px; right: 13px; }
  body.page-lunasangre .header-logo { width: 93px; }
  body.page-lunasangre .header-sign-in {
    top: 82px;
    right: 14px;
    max-width: 55vw;
    font-size: 8px;
    letter-spacing: .08em;
    text-shadow: none;
  }
}

@media (max-width: 360px) {
  body.page-lunasangre .rating-mark { width: 78px; }
  body.page-lunasangre .powered-mark {
    top: 26px;
    left: 91px;
    width: min(128px, calc(100vw - 199px));
  }
  body.page-lunasangre .header-logo { width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-lunasangre .creator-encounter__activation { transition: none; }
}