* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;

  color: #181724;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-weight: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
button {
  font-weight: 600;
}



:root {

  --button-color: #5119c4;
  --button-height: clamp(52px, 7.4dvh, 64px);

  --purple: #5721d8;

  --purple-dark: #4915ca;

  --purple-light: #eee8ff;

  --lavender: #f0efff;

  --border: #b7bdd9;

  --gray: #696b7c;

  --light-gray: #e6e7ee;

  --background: #ffffff;

}




.phone-page {

  width: 100%;
  max-width: 430px;

  min-height: 100vh;

  margin: 0 auto;

  padding:
    env(safe-area-inset-top)
    14px
    env(safe-area-inset-bottom);

  background: white;

}




.welcome-page {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  overscroll-behavior: none;
  background: linear-gradient(180deg, #E7E2FF 0%, #F8F7FF 65%, #F0ECFF 100%);
}

.welcome-viewport {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
}

.welcome-scenery {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.welcome-scenery-layer { animation: welcome-scenery-drift 18s ease-in-out infinite alternate; }
.welcome-scenery-layer-right { animation-delay: -8s; animation-duration: 22s; animation-direction: alternate-reverse; }

.welcome-container {
  --welcome-scale: 1;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(120px, 1fr) auto auto auto;
  gap: clamp(5px, 1dvh, 10px);
  width: 100%;
  max-width: 460px;
  height: 100%;
  min-height: 0;
  padding: clamp(6px, 1.2dvh, 12px) clamp(14px, 4vw, 22px);
  transform: translateX(-50%) scale(var(--welcome-scale));
  transform-origin: top center;
  background: transparent;
}

.welcome-header { text-align: center; line-height: 0; }

.marca-logo {
  display: inline-block;
  width: clamp(68px, 9dvh, 92px);
  height: auto;
  object-fit: contain;
}

.welcome-illustration {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-width: 0;
  min-height: 120px;
}

.welcome-illustration::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 6%;
  background: radial-gradient(ellipse at 50% 46%, rgba(172, 147, 239, .13), rgba(216, 204, 250, .05) 43%, transparent 73%);
  pointer-events: none;
}

.welcome-orbit {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.welcome-orbit-front { z-index: 4; }

.welcome-icon-definitions { position: absolute; pointer-events: none; }

.welcome-illustration > img {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 50%;
  display: block;
  width: 86%;
  height: 100%;
  max-height: 360px;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 75%, rgba(0, 0, 0, .7) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 75%, rgba(0, 0, 0, .7) 88%, transparent 100%);
}

.welcome-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #5920FD;
}

.welcome-float-card {
  --card-tilt: -5deg;
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  width: clamp(80px, 23vw, 98px);
  padding: clamp(6px, 1.8vw, 9px);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 5px 16px rgba(87, 47, 156, .06);
  color: #373046;
  font-size: clamp(9.5px, 2.5vw, 11px);
  line-height: 1.3;
  transform: rotate(var(--card-tilt));
  animation: welcome-card-float 7s ease-in-out infinite alternate;
}

.welcome-float-card span { min-width: 0; }
.welcome-float-card .welcome-icon { width: 16px; height: 16px; }
.welcome-float-send {
  top: 36%;
  left: 2%;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.welcome-float-send .welcome-icon,
.welcome-float-receive .welcome-icon,
.welcome-float-phone .welcome-icon {
  width: clamp(24px, 3.8dvh, 30px);
  height: clamp(24px, 3.8dvh, 30px);
  color: #5920FD;
}
.welcome-float-receive { --card-tilt: 5deg; top: max(0px, calc(15% - 18px)); right: 2%; animation-delay: -2s; animation-duration: 8s; }
.welcome-float-phone {
  --card-tilt: 3deg;
  right: 2%;
  bottom: 4%;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  animation-delay: -4s;
  animation-duration: 6s;
}

.welcome-content { min-width: 0; text-align: center; }

.welcome-content h1 {
  max-width: 400px;
  margin: 0 auto clamp(16px, 2dvh, 20px);
  font-size: clamp(24px, min(8vw, 4.1dvh), 34px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.6px;
}

.welcome-title-accent { position: relative; display: inline-block; }
.welcome-title-accent::after {
  content: "";
  position: absolute;
  left: 16%;
  bottom: -6px;
  width: 68%;
  height: 9px;
  background: url("img/marker-underline.svg") center / 100% 100% no-repeat;
  transform: rotate(-1deg);
  pointer-events: none;
}

.welcome-content p { font-size: clamp(12px, min(3.7vw, 1.9dvh), 15px); line-height: 1.35; color: #696277; }
.welcome-actions { display: flex; flex-direction: column; gap: clamp(8px, 1.4dvh, 12px); }

.welcome-actions .btn {
  position: relative;
  padding: 12px 36px;
  border-radius: 999px;
  font-size: clamp(14px, 3.9vw, 16px);
  font-weight: 600;
  text-align: center;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

.welcome-actions .btn-primary { box-shadow: 0 4px 12px rgba(89, 32, 253, .12); }
.welcome-actions .btn-secondary { background: rgba(255, 255, 255, .8); color: var(--button-color); border: 1.5px solid var(--button-color); }
.welcome-actions .btn:active { transform: scale(.985); }
.welcome-actions .btn:focus-visible { outline: 2px solid var(--button-color); outline-offset: 2px; }

@keyframes welcome-card-float {
  from { transform: translateY(0) rotate(var(--card-tilt)); }
  to { transform: translateY(-3px) rotate(var(--card-tilt)); }
}

@keyframes welcome-scenery-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-scenery-layer,
  .welcome-float-card { animation: none; }
  .welcome-actions .btn { transition: none; }
}



.btn {

  width: 100%;

  min-height: var(--button-height);

  border-radius: 30px;

  border: none;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

  transition:
    transform .15s ease,
    opacity .15s ease;

}


.btn:active {

  transform: scale(.98);

}


.btn-primary {

  background: var(--button-color);

  color: white;

}


.btn-secondary {

  background: transparent;

  color: var(--button-color);

  border: 1.5px solid var(--button-color);

}



.welcome-footer {
  text-align: center;
  font-size: 9px;
  line-height: 1.35;
  color: #9A93AA;
  padding: 0 6px;
}



.form-page {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #f4f4f6;
}

.form-viewport {
  --form-visible-height: 100dvh;
  --form-layout-height: 100svh;
  --form-gap: clamp(6px, calc(var(--form-layout-height) * .014), 12px);
  --form-button-height: clamp(52px, calc(var(--form-layout-height) * .074), 64px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.form-fit-area { position: relative; width: 100%; height: 100%; }

.form-container {
  --form-scale: 1;
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(var(--form-step-height, 0px), 1fr);
  gap: var(--form-gap);
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(6px, calc(var(--form-layout-height) * .018), 16px) clamp(16px, 4.5vw, 22px);
  transform: translateX(-50%) scale(var(--form-scale));
  transform-origin: top center;
}

.form-header { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: none; background: transparent; line-height: 1; cursor: pointer; color: #11111a; }
.icon-button svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.back-button { width: auto; min-width: 44px; font-size: 14px; }

.progress-container { display: flex; align-items: center; gap: 10px; margin: 0; }
.progress-bars { display: flex; gap: 5px; flex: 1; }
.progress-segment { height: 5px; flex: 1; background: #e0e1e9; border-radius: 10px; transition: background .25s ease; }
.progress-segment.active { background: var(--purple); }
#progressText { color: #67697c; font-size: 12px; white-space: nowrap; }

.form-step {
  display: none;
  grid-area: 3 / 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--form-gap);
  align-self: center;
  height: var(--form-step-height, auto);
  min-width: 0;
  min-height: 0;
  text-align: center;
}
.form-step.active { display: grid; }
.form-step-content { display: flex; flex-direction: column; gap: var(--form-gap); min-width: 0; min-height: 0; }
.form-step:not(.simple-step) .form-step-content { gap: clamp(10px, calc(var(--form-layout-height) * .045 - 20px), 20px); }
.form-step-content > * { flex-shrink: 0; }
.form-step-content > :first-child { margin-top: auto; }
.form-step-content > :last-child { margin-bottom: auto; }
.form-step-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--form-terms-height, 44px) var(--form-button-height) minmax(20px, auto);
  gap: 8px;
  height: var(--form-footer-height, auto);
  min-width: 0;
  align-items: center;
}
.form-step-footer > .terms-confirmation-group { grid-row: 1; }
.form-step-footer > .btn { grid-row: 2; }
.form-step-footer > .security-caption { grid-row: 3; }

.form-title h1 { font-size: clamp(20px, 6.5vw, 28px); line-height: 1.15; font-weight: 600; margin-bottom: 6px; letter-spacing: -.4px; }
.form-title p { font-size: clamp(13px, 3.7vw, 16px); color: #656779; line-height: 1.35; }

.card-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: clamp(52px, calc(var(--form-layout-height) * .55 - 200px), 280px);
  margin: 0;
  border-radius: 16px;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.input-group { min-width: 0; margin: 0; }
.input-group label { display: block; font-size: clamp(13px, 3.8vw, 16px); font-weight: 600; line-height: 1.3; margin-bottom: 6px; text-align: left; }
.input-wrapper { position: relative; }

.input-wrapper input,
.expiration-row select {
  width: 100%;
  min-width: 0;
  height: clamp(44px, calc(var(--form-layout-height) * .073), 60px);
  border: 1.3px solid var(--border);
  border-radius: 12px;
  background: white;
  padding: 0 14px;
  outline: none;
  font-size: 16px;
  text-align: left;
  color: #363646;
  transition: border-color .2s, box-shadow .2s;
}

.input-wrapper input,
.expiration-row select { font-weight: 300; }

.cvv-input-wrapper {
  width: min(100%, 220px);
  margin-inline: auto;
}

#cvv {
  height: clamp(60px, calc(var(--form-layout-height) * .073 + 16px), 76px);
  padding-inline: 14px;
  text-align: center;
  color: transparent;
  caret-color: transparent;
}

#cvv::placeholder { color: transparent; }
.cvv-placeholder {
  display: grid;
  grid-template-columns: repeat(3, 24px);
  justify-content: center;
  gap: 14px;
  position: absolute;
  inset-inline: 0;
  bottom: 12px;
  color: #777b91;
  font-size: 24px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}
.cvv-placeholder .is-filled { color: #363646; }
.help-text.cvv-help-text { text-align: center; }

.input-wrapper input:focus,
.expiration-row select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(87, 33, 216, .08); }
.input-wrapper input[aria-invalid="true"],
.expiration-row select[aria-invalid="true"] { border-color: #c43238; }
.input-wrapper input[aria-invalid="true"]:focus,
.expiration-row select[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(196, 50, 56, .1); }
.input-wrapper input::placeholder { color: #777b91; font-weight: 300; text-align: left; }
.expiration-row { display: flex; gap: 10px; }
.expiration-row select {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  padding: 0 44px 0 12px;
  background-image: url("img/select-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
  text-align-last: left;
}

@media (forced-colors: active) {
  .expiration-row select { -webkit-appearance: auto; appearance: auto; background-image: none; }
}

.security-box { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 0; padding: clamp(10px, calc(var(--form-layout-height) * .014), 14px) 14px; border: 1px solid #e1e4e8; border-radius: 12px; background: #f4f5f6; text-align: left; }
.security-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; color: #444b57; }
.security-icon svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.security-box-text { min-width: 0; }
.security-box strong { display: block; margin-bottom: 3px; color: #303540; font-size: clamp(13px, 3.6vw, 14px); font-weight: 600; line-height: 1.3; }
.security-box p { color: #616773; font-size: clamp(11.5px, 3.2vw, 12.5px); line-height: 1.35; }

.help-text { display: block; font-size: clamp(11px, 3.1vw, 12px); line-height: 1.3; color: #61677c; margin-top: 6px; text-align: left; }

.form-step-footer > .btn { height: var(--form-button-height); min-height: var(--form-button-height); margin: 0; padding: 10px 36px; font-size: clamp(15px, 4.1vw, 17px); }
.form-page .next-button:disabled,
.form-page .next-button[aria-disabled="true"] { background: #dfe2e8; color: #626978; opacity: 1; cursor: not-allowed; box-shadow: none; transform: none; }
.terms-confirmation { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 24px; color: #656779; font-size: clamp(10px, 3.1vw, 12px); line-height: 1.3; white-space: nowrap; cursor: pointer; }
.terms-confirmation-group { display: grid; gap: 3px; min-width: 0; }
.terms-error { visibility: hidden; margin: 0; color: #9d5159; font-size: clamp(10px, 2.7vw, 11px); font-weight: 400; line-height: 1.35; text-align: center; }
.terms-confirmation input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--purple); cursor: pointer; }
.terms-confirmation input:focus-visible { outline: none; }
.terms-confirmation input:focus-visible + span { text-decoration: underline; text-underline-offset: 3px; }
.terms-link { color: #5920FD; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.security-caption { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; text-align: center; font-size: 10px; line-height: 1.35; color: #7c758b; }
.security-caption span { min-width: 0; }
.security-caption-icon { display: block; width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.form-page .security-caption { font-size: clamp(10px, 2.8vw, 11px); }

.simple-step { text-align: center; }
.simple-card { margin: 0; padding: clamp(16px, calc(var(--form-layout-height) * .035), 28px) clamp(14px, 4vw, 22px); background: transparent; text-align: center; }
.simple-icon { width: clamp(56px, calc(var(--form-layout-height) * .115), 104px); height: clamp(56px, calc(var(--form-layout-height) * .115), 104px); margin: 0 auto clamp(12px, calc(var(--form-layout-height) * .024), 22px); color: var(--purple); }
.confirmation-animation { display: block; width: 100%; height: 100%; overflow: hidden; }
.confirmation-track,
.confirmation-ring { fill: none; stroke: currentColor; stroke-width: 2; }
.confirmation-track { opacity: .16; }
.confirmation-ring { opacity: .7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.confirmation-check { transform-box: view-box; transform-origin: 50% 50%; transform: scale(2); }
.form-step.active .confirmation-ring { animation: confirmationRingDraw 1.5s ease-out both; }
.form-step.active .confirmation-check { animation: confirmationCheckOrbit 1.8s ease-in-out both; }

@keyframes confirmationRingDraw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes confirmationCheckOrbit {
  0% { opacity: 0; transform: rotate(-90deg) translateX(22px) rotate(90deg) scale(.8); }
  8% { opacity: 1; transform: rotate(-90deg) translateX(22px) rotate(90deg) scale(1); }
  80% { opacity: 1; transform: rotate(270deg) translateX(22px) rotate(-270deg) scale(1); }
  100% { opacity: 1; transform: rotate(270deg) translateX(0) rotate(-270deg) scale(2); }
}

.confirmation-title { margin-bottom: 10px; color: #11111a; font-size: clamp(22px, 6.5vw, 28px); font-weight: 600; line-height: 1.25; }
.confirmation-status { margin-bottom: 8px; color: #000; font-size: clamp(16px, 4.6vw, 18px); font-weight: 400; line-height: 1.35; }
.confirmation-note { color: #777; font-size: clamp(13px, 3.7vw, 15px); font-weight: 400; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .form-step.active .confirmation-ring,
  .form-step.active .confirmation-check { animation: none; }
  .progress-segment,
  .form-container .btn,
  .form-container input,
  .form-container select { transition: none; }
}



@media (max-height: 500px) and (min-width: 500px) {
  .welcome-container {
    max-width: 900px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    column-gap: 20px;
  }
  .welcome-header { grid-column: 1; grid-row: 1; }
  .welcome-illustration { grid-column: 1; grid-row: 2 / 5; }
  .welcome-content { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .welcome-actions { grid-column: 2; grid-row: 3; }
  .welcome-footer { grid-column: 2; grid-row: 4; }
}