/* ========================================================================
   SOLES v2.2.7 · Inscripción · gama de naranjas
   Capa exclusivamente visual. No modifica estructura, eventos, validaciones,
   formularios, consultas, pagos, envío de datos ni lógica JavaScript/PHP.
   ======================================================================== */

/* ---------- Paleta de inscripción ---------- */
.demo3 .pse-overlay,
.guest-body,
.payment-body {
  --reg-cocoa: #672502;
  --reg-burnt: #8f3108;
  --reg-rust: #b8430d;
  --reg-deep: #d84f18;
  --reg-main: #f25822;
  --reg-orange: #f57421;
  --reg-amber: #f8951e;
  --reg-cream: #fff8f3;
  --reg-soft: #fff0e7;
  --reg-soft-2: #ffe3d2;
  --reg-soft-3: #ffd0b7;
  --reg-line: rgba(143, 49, 8, 0.18);
  --reg-line-strong: rgba(242, 88, 34, 0.36);
  --reg-shadow: rgba(103, 37, 2, 0.18);
}

/* ---------- Modal principal: persona / empresa / resumen / pago ---------- */
.demo3 .pse-backdrop {
  background:
    radial-gradient(circle at 84% 14%, rgba(248, 149, 30, 0.16), transparent 28%),
    rgba(59, 25, 9, 0.91) !important;
}

.demo3 .pse-modal {
  background: var(--reg-cream) !important;
  border-color: rgba(248, 149, 30, 0.58) !important;
  box-shadow: 0 44px 130px rgba(62, 25, 8, 0.62) !important;
}

.demo3 .pse-modal-head {
  background:
    radial-gradient(circle at 92% 0%, rgba(248, 149, 30, 0.32), transparent 34%),
    linear-gradient(108deg, var(--reg-cocoa) 0%, var(--reg-burnt) 44%, var(--reg-main) 100%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

.demo3 .pse-modal-head > span {
  color: #ffc15b !important;
}

.demo3 .pse-modal-head > span i {
  background: var(--reg-amber) !important;
  box-shadow: 0 0 0 6px rgba(248, 149, 30, 0.18) !important;
}

.demo3 .pse-modal-head > p {
  color: rgba(255, 255, 255, 0.72) !important;
}

.demo3 .pse-modal-head > p b {
  color: #ffb740 !important;
}

.demo3 .pse-modal-head > a {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

.demo3 .pse-modal-head > a:hover {
  background: var(--reg-amber) !important;
  border-color: var(--reg-amber) !important;
  color: var(--reg-cocoa) !important;
}

.demo3 .registration-aside {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 190, 75, 0.34), transparent 25%),
    radial-gradient(circle at 86% 88%, rgba(248, 149, 30, 0.20), transparent 32%),
    linear-gradient(155deg, var(--reg-cocoa) 0%, var(--reg-burnt) 38%, var(--reg-rust) 70%, var(--reg-main) 100%) !important;
}

.demo3 .registration-aside .aside-overline {
  color: #ffb33b !important;
}

.demo3 .registration-aside h3,
.demo3 .registration-aside .steps strong {
  color: #ffffff !important;
}

.demo3 .registration-aside .steps small,
.demo3 .registration-aside > div:first-child > p,
.demo3 .privacy-note p {
  color: rgba(255, 244, 235, 0.72) !important;
}

.demo3 .registration-aside .steps li::before,
.demo3 .registration-aside .steps li::after {
  border-color: rgba(255, 194, 109, 0.24) !important;
  background-color: rgba(255, 194, 109, 0.24) !important;
}

.demo3 .step-icon {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 218, 177, 0.30) !important;
  color: rgba(255, 244, 235, 0.68) !important;
}

.demo3 .step-icon.active {
  background: linear-gradient(145deg, var(--reg-amber), #ffb33b) !important;
  border-color: #ffb33b !important;
  box-shadow: 0 0 0 6px rgba(248, 149, 30, 0.16) !important;
  color: var(--reg-cocoa) !important;
}

.demo3 .step-icon.done {
  background: linear-gradient(145deg, var(--reg-main), var(--reg-orange)) !important;
  border-color: var(--reg-orange) !important;
  color: #fff !important;
}

.demo3 .registration-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(248, 149, 30, 0.08), transparent 26%),
    var(--reg-cream) !important;
}

.demo3 .flow-screen > h3,
.demo3 .block-title > strong,
.demo3 .attendees-title > strong,
.demo3 .checkout-head > b,
.demo3 .summary-profile strong,
.demo3 .price-box strong {
  color: var(--reg-cocoa) !important;
}

.demo3 .screen-step,
.demo3 .block-title > span,
.demo3 .attendee-number,
.demo3 .field > span {
  color: var(--reg-main) !important;
}

/* Selección persona / empresa */
.demo3 .profile-tabs button {
  background: #fffdfb !important;
  border-color: var(--reg-line) !important;
  color: var(--reg-cocoa) !important;
  box-shadow: 0 8px 22px rgba(103, 37, 2, 0.035) !important;
}

.demo3 .profile-tabs button:hover {
  background: var(--reg-soft) !important;
  border-color: rgba(245, 116, 33, 0.46) !important;
}

.demo3 .profile-tabs button.selected {
  background: linear-gradient(135deg, #fff3eb 0%, #ffe2d1 100%) !important;
  border-color: var(--reg-main) !important;
  box-shadow: inset 0 -2px var(--reg-main), 0 10px 24px rgba(242, 88, 34, 0.10) !important;
}

.demo3 .profile-tabs button small {
  color: #91604a !important;
}

.demo3 .profile-symbol {
  background: var(--reg-soft) !important;
  color: var(--reg-main) !important;
}

.demo3 .profile-tabs button.selected .profile-symbol {
  background: linear-gradient(145deg, var(--reg-main), var(--reg-orange)) !important;
  color: #fff !important;
}

.demo3 .profile-tabs button > i {
  border-color: rgba(143, 49, 8, 0.36) !important;
}

.demo3 .profile-tabs button.selected > i {
  border-color: var(--reg-main) !important;
}

.demo3 .profile-tabs button.selected > i::after {
  background: var(--reg-main) !important;
}

/* Campos de todas las pantallas */
.demo3 .field input,
.demo3 .field select,
.demo3 .attendees-title select,
.demo3 textarea {
  background: #fffdfb !important;
  border-color: rgba(143, 49, 8, 0.20) !important;
  color: var(--reg-cocoa) !important;
}

.demo3 .field input::placeholder,
.demo3 textarea::placeholder {
  color: rgba(103, 37, 2, 0.42) !important;
}

.demo3 .field input:hover,
.demo3 .field select:hover,
.demo3 .attendees-title select:hover,
.demo3 textarea:hover {
  border-color: rgba(245, 116, 33, 0.42) !important;
}

.demo3 .field input:focus,
.demo3 .field select:focus,
.demo3 .attendees-title select:focus,
.demo3 textarea:focus {
  border-color: var(--reg-main) !important;
  box-shadow: 0 0 0 3px rgba(242, 88, 34, 0.13) !important;
  outline: none !important;
}

/* Botones de navegación */
.demo3 .flow-primary,
.demo3 .add-attendee {
  background: linear-gradient(115deg, var(--reg-main), var(--reg-orange)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 25px rgba(242, 88, 34, 0.18) !important;
}

.demo3 .flow-primary:not(:disabled):hover,
.demo3 .add-attendee:hover {
  background: linear-gradient(115deg, var(--reg-orange), var(--reg-amber)) !important;
  color: var(--reg-cocoa) !important;
}

.demo3 .flow-primary:disabled {
  background: linear-gradient(115deg, #ffd1bc, #ffbea0) !important;
  color: rgba(103, 37, 2, 0.38) !important;
  box-shadow: none !important;
}

.demo3 .flow-secondary {
  background: #fffaf6 !important;
  border-color: rgba(242, 88, 34, 0.30) !important;
  color: var(--reg-burnt) !important;
}

.demo3 .flow-secondary:hover {
  background: var(--reg-soft) !important;
  border-color: var(--reg-main) !important;
  color: var(--reg-cocoa) !important;
}

/* Avisos, coincidencias y bloques de asistentes */
.demo3 .identity-guidance,
.demo3 .match-banner {
  background: linear-gradient(110deg, #fff0e7, #ffe0ce) !important;
  border-color: rgba(245, 116, 33, 0.28) !important;
  color: var(--reg-cocoa) !important;
}

.demo3 .identity-guidance > span,
.demo3 .match-banner b {
  background: linear-gradient(145deg, var(--reg-amber), #ffb63f) !important;
  color: var(--reg-cocoa) !important;
}

.demo3 .identity-guidance p,
.demo3 .match-banner small,
.demo3 .photo-field small,
.demo3 .summary-profile small,
.demo3 .summary-profile p,
.demo3 .summary-attendees small,
.demo3 .price-box span,
.demo3 .checkout-head small,
.demo3 .checkout-amount small {
  color: #8c6755 !important;
}

.demo3 .photo-field,
.demo3 .attendee-row,
.demo3 .summary-profile,
.demo3 .checkout-amount,
.demo3 .checkout-card,
.demo3 .price-box {
  background: #fffaf6 !important;
  border-color: rgba(143, 49, 8, 0.15) !important;
}

.demo3 .attendee-row:hover,
.demo3 .checkout-card:hover {
  border-color: rgba(245, 116, 33, 0.34) !important;
}

.demo3 .attendee-count {
  background: var(--reg-soft) !important;
  border-color: rgba(245, 116, 33, 0.30) !important;
  color: var(--reg-rust) !important;
}

.demo3 .remove-attendee {
  color: var(--reg-rust) !important;
}

.demo3 .remove-attendee:hover {
  background: #fff0e7 !important;
  color: var(--reg-main) !important;
}

.demo3 .company-discount-hint {
  background: linear-gradient(110deg, #fff0dd 0%, #ffd29d 100%) !important;
  border-color: rgba(248, 149, 30, 0.42) !important;
}

.demo3 .company-discount-hint strong,
.demo3 .company-discount-hint span {
  color: var(--reg-cocoa) !important;
}

/* Resumen / tarifa */
.demo3 .summary-profile > span,
.demo3 .checkout-logo {
  background: linear-gradient(145deg, var(--reg-cocoa), var(--reg-rust)) !important;
  color: #ffd06c !important;
}

.demo3 .summary-profile button,
.demo3 .checkout-amount strong,
.demo3 .checkout-methods b {
  color: var(--reg-main) !important;
}

.demo3 .summary-attendees {
  background: linear-gradient(110deg, #fff0e7, #ffe3d2) !important;
  border-color: rgba(245, 116, 33, 0.20) !important;
}

.demo3 .price-box > div:not(.price-demo-tag),
.demo3 .checkout-head {
  border-color: rgba(143, 49, 8, 0.12) !important;
}

.demo3 .price-demo-tag {
  background: var(--reg-soft) !important;
  color: var(--reg-burnt) !important;
}

.demo3 .price-box .discount-line,
.demo3 .simulation-message {
  background: linear-gradient(110deg, #fff0e7, #ffe4d4) !important;
  border-color: rgba(245, 116, 33, 0.22) !important;
}

.demo3 .price-box .discount-line span,
.demo3 .price-box .discount-line strong,
.demo3 .simulation-message strong {
  color: var(--reg-main) !important;
}

.demo3 .price-box .price-total {
  background:
    radial-gradient(circle at 92% 10%, rgba(248, 149, 30, 0.24), transparent 32%),
    linear-gradient(115deg, var(--reg-cocoa), var(--reg-burnt)) !important;
}

.demo3 .price-box .price-total span {
  color: rgba(255, 245, 237, 0.76) !important;
}

.demo3 .price-box .price-total strong {
  color: #ffc15b !important;
}

/* Pago */
.demo3 .checkout-card {
  box-shadow: 0 18px 45px rgba(103, 37, 2, 0.08) !important;
}

.demo3 .checkout-methods button {
  background: #fffdfb !important;
  border-color: rgba(143, 49, 8, 0.17) !important;
  color: var(--reg-cocoa) !important;
}

.demo3 .checkout-methods button:hover {
  background: var(--reg-soft) !important;
  border-color: rgba(245, 116, 33, 0.40) !important;
}

.demo3 .checkout-methods i {
  background: linear-gradient(145deg, #fff0e7, #ffd9c3) !important;
  color: var(--reg-main) !important;
}

.demo3 .simulation-message > span {
  background: linear-gradient(145deg, var(--reg-main), var(--reg-orange)) !important;
  color: #fff !important;
}

.demo3 .terms-check input,
.guest-body .terms-check input {
  accent-color: var(--reg-main) !important;
}

.demo3 .terms-check a {
  color: var(--reg-main) !important;
}

/* Error: conserva lectura semántica, pero dentro de la identidad cálida. */
.demo3 .flow-error,
.guest-body .flow-error {
  background: #fff0ec !important;
  border-color: rgba(211, 65, 26, 0.32) !important;
  color: #963314 !important;
}

/* ---------- Invitados: misma familia visual de inscripción ---------- */
.guest-body {
  background:
    radial-gradient(circle at 95% 5%, rgba(248, 149, 30, 0.13), transparent 25%),
    var(--reg-cream) !important;
  color: var(--reg-cocoa) !important;
}

.guest-body .guest-brand {
  background: linear-gradient(105deg, var(--reg-cocoa), var(--reg-burnt), var(--reg-main)) !important;
  border-bottom-color: rgba(248, 149, 30, 0.34) !important;
}

.guest-body .guest-brand span,
.guest-body .guest-overline,
.guest-body .guest-form-heading > span,
.guest-body .guest-help a,
.guest-body .field > span {
  color: var(--reg-main) !important;
}

.guest-body .guest-intro {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 196, 99, 0.30), transparent 26%),
    linear-gradient(150deg, var(--reg-cocoa) 0%, var(--reg-burnt) 40%, var(--reg-main) 100%) !important;
}

.guest-body .guest-zero {
  background: linear-gradient(145deg, var(--reg-amber), #ffb63f) !important;
  color: var(--reg-cocoa) !important;
}

.guest-body .guest-card,
.guest-body .guest-form {
  background: var(--reg-cream) !important;
}

.guest-body .field input,
.guest-body .field select,
.guest-body textarea {
  background: #fffdfb !important;
  border-color: rgba(143, 49, 8, 0.20) !important;
  color: var(--reg-cocoa) !important;
}

.guest-body .field input:focus,
.guest-body .field select:focus,
.guest-body textarea:focus {
  border-color: var(--reg-main) !important;
  box-shadow: 0 0 0 3px rgba(242, 88, 34, 0.13) !important;
  outline: none !important;
}

.guest-body .guest-submit,
.guest-body .guest-success a {
  background: linear-gradient(115deg, var(--reg-main), var(--reg-orange)) !important;
  color: #fff !important;
}

.guest-body .guest-submit:hover,
.guest-body .guest-success a:hover {
  background: linear-gradient(115deg, var(--reg-orange), var(--reg-amber)) !important;
  color: var(--reg-cocoa) !important;
}

/* ---------- Estado de pago ---------- */
.payment-body {
  background:
    radial-gradient(circle at 90% 8%, rgba(248, 149, 30, 0.15), transparent 28%),
    linear-gradient(145deg, #fff8f3, #ffe9dc) !important;
  color: var(--reg-cocoa) !important;
}

.payment-body .payment-card {
  background: #fffdfb !important;
  border-color: rgba(245, 116, 33, 0.26) !important;
  box-shadow: 0 28px 80px rgba(103, 37, 2, 0.15) !important;
}

.payment-body .payment-brand {
  color: var(--reg-main) !important;
}

.payment-body .payment-status {
  background: linear-gradient(145deg, #fff0e7, #ffd8c0) !important;
  color: var(--reg-main) !important;
}

.payment-body .payment-details {
  background: var(--reg-soft) !important;
  border-color: rgba(143, 49, 8, 0.12) !important;
}

.payment-body .payment-back {
  background: linear-gradient(115deg, var(--reg-main), var(--reg-orange)) !important;
  color: #fff !important;
}

.payment-body .payment-back:hover {
  background: linear-gradient(115deg, var(--reg-orange), var(--reg-amber)) !important;
  color: var(--reg-cocoa) !important;
}

/* Mantener foco accesible en toda la experiencia de inscripción. */
.demo3 .pse-overlay :where(a, button, input, select, textarea):focus-visible,
.guest-body :where(a, button, input, select, textarea):focus-visible,
.payment-body :where(a, button):focus-visible {
  outline: 3px solid var(--reg-amber) !important;
  outline-offset: 3px !important;
}


/* ========================================================================
   SOLES v2.4.2 · Formularios de inscripción a pantalla completa
   - Se elimina el encapsulado visual en inscripción, invitados y estado pago.
   - Se usa la base crema institucional a pantalla completa.
   - Se mantiene intacta toda la lógica de inscripción/pago.
   - El CTA “Inscribir una empresa” se recentra dentro del diámetro circular.
   ======================================================================== */
.demo3 .pse-overlay,
.guest-body,
.payment-body {
  --reg-cream-flat: #e7dfda;
  --reg-cocoa: #6f2f0f;
  --reg-burnt: #9a3f12;
  --reg-rust: #d8621f;
  --reg-deep: #ee6b24;
  --reg-main: #f55a23;
  --reg-orange: #f67725;
  --reg-amber: #f89c1d;
}

.demo3 .pse-backdrop {
  background: var(--reg-cream-flat) !important;
}

.demo3 .pse-overlay {
  inset: 0 !important;
  padding: 0 !important;
}

.demo3 .pse-modal {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: none !important;
  min-height: 100vh !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  background: var(--reg-cream-flat) !important;
}

.demo3 .pse-modal-head {
  min-height: 72px !important;
  padding: 14px 20px !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 92% 4%, rgba(248, 156, 29, 0.22), transparent 34%),
    linear-gradient(95deg, var(--reg-burnt) 0%, var(--reg-main) 52%, var(--reg-orange) 100%) !important;
}

.demo3 .registration-app {
  display: grid !important;
  grid-template-columns: minmax(292px, 0.84fr) minmax(0, 3.16fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  background: var(--reg-cream-flat) !important;
}

.demo3 .registration-aside,
.demo3 .registration-panel {
  min-height: 0 !important;
  height: 100% !important;
  border-radius: 0 !important;
}

.demo3 .registration-aside {
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 42px) !important;
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 199, 113, 0.22), transparent 24%),
    linear-gradient(160deg, var(--reg-burnt) 0%, var(--reg-rust) 54%, var(--reg-main) 100%) !important;
}

.demo3 .registration-panel {
  padding: clamp(32px, 4vw, 52px) clamp(30px, 5vw, 72px) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(248, 156, 29, 0.10), transparent 24%),
    var(--reg-cream-flat) !important;
}

.demo3 .flow-screen {
  max-width: 930px !important;
}

.guest-body {
  background:
    radial-gradient(circle at 100% 0%, rgba(248, 156, 29, 0.08), transparent 20%),
    var(--reg-cream-flat) !important;
}

.guest-page {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

.guest-card {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 92px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--reg-cream-flat) !important;
}

.guest-form,
.guest-body .guest-card,
.guest-body .guest-form {
  background: var(--reg-cream-flat) !important;
}

.payment-body {
  min-height: 100vh !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(248, 156, 29, 0.10), transparent 22%),
    var(--reg-cream-flat) !important;
}

.payment-card {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(38px, 5vw, 72px) clamp(24px, 6vw, 88px) !important;
  background: var(--reg-cream-flat) !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
}

.payment-card > * {
  max-width: 760px !important;
}

.payment-body .payment-details,
.payment-body .payment-card {
  color: var(--reg-cocoa) !important;
}

/* Recentrado del CTA empresa dentro del diámetro circular. */
.demo3 .company-rate-cta {
  width: 232px !important;
  min-width: 232px !important;
  height: 174px !important;
  min-height: 174px !important;
  background-position: center !important;
  background-size: contain !important;
  text-align: center !important;
}

.demo3 .company-rate-cta > span {
  width: 118px !important;
  max-width: 118px !important;
  margin: 0 auto !important;
  font-size: 15px !important;
  line-height: 1.04 !important;
  text-align: center !important;
  transform: translateX(-16px) !important;
}

@media (max-width: 900px) {
  .demo3 .registration-app {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
  }

  .demo3 .registration-aside {
    min-height: auto !important;
  }

  .demo3 .registration-panel {
    padding: 28px 20px 34px !important;
  }

  .guest-card {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .payment-card {
    padding: 28px 20px 40px !important;
    align-content: start !important;
  }

  .demo3 .company-rate-cta {
    width: 218px !important;
    min-width: 218px !important;
    height: 164px !important;
    min-height: 164px !important;
  }

  .demo3 .company-rate-cta > span {
    width: 112px !important;
    max-width: 112px !important;
    font-size: 14px !important;
    transform: translateX(-14px) !important;
  }
}


/* ========================================================================
   SOLES v2.4.8 · Ajustes gerencia
   - "Inscríbete en esta etapa" vuelve a una escala visual similar a "15 % de descuento".
   - La banda de "Tendrás acceso a" usa el naranja profundo del sitio.
   - El texto "Tendrás acceso a" vuelve al marrón general de la página.
   - Sin tocar lógica ni estructura funcional.
   ======================================================================== */

/* Tarjetas de etapas: CTA más contenido, mismo orden visual que las tarifas */
.demo3 .stage-card > a {
  font-size: 18px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
}

.demo3 .stage-card > a span {
  font-size: 18px !important;
  line-height: 1 !important;
}

@media (max-width: 900px) {
  .demo3 .stage-card > a {
    font-size: 18px !important;
  }

  .demo3 .stage-card > a span {
    font-size: 18px !important;
  }
}

/* Franja naranja de beneficios */
.demo3 #beneficios .d7-panel-title {
  background: var(--soles-orange-deep) !important;
}

.demo3 #beneficios .d7-panel-title h3 {
  color: var(--soles-cocoa) !important;
}

/* ========================================================================
   SOLES v2.4.8 · Corrección de scroll del formulario en dispositivos móviles
   - Mantiene bloqueado el documento principal mientras la inscripción está abierta.
   - Permite desplazamiento vertical táctil dentro del overlay de inscripción.
   - No modifica el comportamiento de escritorio ni la lógica del formulario.
   ======================================================================== */
@media (max-width: 900px) {
  .demo3 .pse-overlay {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  .demo3 .pse-modal {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-rows: auto auto !important;
  }

  .demo3 .registration-app {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto auto !important;
    overflow: visible !important;
  }

  .demo3 .registration-aside,
  .demo3 .registration-panel {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* ========================================================================
   SOLES v2.5.0 · Scroll estable del formulario en escritorio y móviles
   - El documento de fondo permanece bloqueado mientras el modal está abierto.
   - El formulario completo puede desplazarse verticalmente en cualquier tamaño.
   - Evita el bloqueo causado por height:100vh + overflow:hidden.
   ======================================================================== */
.demo3 .pse-overlay {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.demo3 .pse-modal {
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow: visible !important;
  grid-template-rows: auto auto !important;
}

.demo3 .registration-app {
  height: auto !important;
  min-height: calc(100vh - 72px) !important;
  min-height: calc(100dvh - 72px) !important;
  overflow: visible !important;
}

.demo3 .registration-aside,
.demo3 .registration-panel {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

@media (min-width: 901px) {
  .demo3 .registration-aside {
    align-self: stretch !important;
  }
}

/* SOLES v2.6.0 · Aviso de tarifa según fecha efectiva de pago */
.demo3 .tariff-payment-notice {
  margin: 16px 0 18px;
  padding: 15px 17px;
  border: 1px solid rgba(245, 116, 33, .32);
  border-radius: 12px;
  background: #fff4ec;
  color: #7a3410;
}
.demo3 .tariff-payment-notice strong {
  display: block;
  margin-bottom: 5px;
  color: #6f2f0f;
  font-size: 14px;
}
.demo3 .tariff-payment-notice p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

/* ========================================================================
   SOLES v2.7.0 · Etapas automáticas por fecha
   - Solo la etapa vigente abre el formulario.
   - Las demás conservan el aspecto del CTA pero no navegan.
   - Al intentar usarlas se informa cuál es la etapa correcta.
   ======================================================================== */
.demo3 .stage-card > .stage-cta {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 25px 0 0;
  font-family: inherit;
  font-size: 18px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  text-align: left;
  text-decoration: none;
}

.demo3 .stage-card > .stage-cta span {
  color: var(--soles-yellow, #f8b51e);
  font-size: 18px !important;
  line-height: 1 !important;
}

.demo3 .stage-card > .stage-cta-enabled {
  cursor: pointer;
}

.demo3 .stage-card > .stage-cta-unavailable {
  cursor: not-allowed;
  opacity: .52;
}

.demo3 .stage-card:not(.current) > .stage-cta-unavailable:hover,
.demo3 .stage-card:not(.current) > .stage-cta-unavailable:focus-visible {
  opacity: .72;
}

.demo3 .stage-availability-message {
  margin: 18px auto 0;
  width: min(880px, 100%);
  padding: 14px 18px;
  border: 1px solid rgba(245, 116, 33, .42);
  border-radius: 14px;
  background: #fff4ec;
  color: #71300f;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 12px 30px rgba(72, 34, 15, .08);
}

.demo3 .stage-availability-message[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .demo3 .stage-card > .stage-cta {
    font-size: 18px !important;
  }
  .demo3 .stage-card > .stage-cta span {
    font-size: 18px !important;
  }
  .demo3 .stage-availability-message {
    margin-top: 14px;
    padding: 13px 14px;
    font-size: 14px;
  }
}