/* The interactive "Como funciona" section. All artwork is HTML/CSS/SVG. */
.process-section {
  isolation: isolate;
  overflow: hidden;
  padding: 49px 0 70px;
  background:
    radial-gradient(ellipse 48% 78% at -5% 35%, rgba(118, 28, 198, .25), transparent 78%),
    radial-gradient(ellipse 40% 60% at 105% 71%, rgba(113, 23, 184, .17), transparent 75%),
    #0b0618;
}
.process-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: url("process-landscape.svg") center bottom / cover no-repeat;
  opacity: .9;
}
.process-section .process-container { position: relative; z-index: 1; width: min(calc(100% - 48px), 1286px); max-width: 1286px; }
.process-section .process-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 422px;
  align-items: end;
  gap: 40px;
  margin-right: -50px;
  margin-bottom: 8px;
}
.process-section .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  color: #dda5ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
}
.process-section .process-kicker-dot { width: 9px; height: 9px; border-radius: 50%; background: #bf4ff7; box-shadow: 0 0 13px #ba53ff; }
.process-section .section-kicker i { width: 34px; background: linear-gradient(90deg, #be6afa, rgba(190, 106, 250, .12)); }
.process-section .section-heading h2 {
  margin-top: 20px;
  color: #fff;
  font-size: clamp(46px, 4.3vw, 70px);
  line-height: .99;
  letter-spacing: -.064em;
  text-shadow: 0 0 20px rgba(235, 205, 255, .08);
}
.process-section .section-heading h2 em {
  color: #b457f5;
  background: linear-gradient(110deg, #e7aeff 0%, #be5dff 45%, #9b46ed 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(178, 71, 255, .25));
}
.process-section .section-heading > p {
  max-width: 422px;
  margin: 0 0 4px;
  padding-left: 24px;
  border-left: 2px solid #c05cff;
  color: #d1c7db;
  font-size: 16px;
  line-height: 1.62;
}
.process-section .process-grid {
  display: grid;
  grid-template-columns: minmax(0, 630px) minmax(0, 1fr);
  align-items: start;
  gap: 55px;
  margin-right: -58px;
  min-height: 670px;
}
.process-section .process-grid::before { content: none; }
.process-section .process-device-stage { position: relative; min-width: 0; height: 670px; isolation: isolate; }
.process-section .process-device-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 47%;
  width: 670px;
  height: 670px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(156, 47, 242, .23), rgba(118, 28, 207, .12) 41%, transparent 67%);
  filter: blur(10px);
  transform: translate(-50%, -50%);
}
.process-section .process-orbit {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 48%;
  width: 565px;
  height: 565px;
  border: 1px solid rgba(185, 69, 255, .65);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(130, 34, 204, .1), 0 0 0 47px rgba(153, 54, 223, .065), inset 0 0 28px rgba(181, 70, 255, .25), 0 0 38px rgba(186, 60, 252, .26);
  transform: translate(-50%, -50%);
}
.process-section .process-orbit::before,
.process-section .process-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #e98aff;
  box-shadow: 0 0 8px #d46bff, 0 0 23px #af45fa;
}
.process-section .process-orbit::before { width: 9px; height: 9px; right: 4%; top: 23%; }
.process-section .process-orbit::after { width: 7px; height: 7px; left: -1%; top: 60%; }
.process-section .process-orbit i { position: absolute; inset: 21px; border: 1px solid rgba(169, 72, 238, .27); border-radius: 50%; }
.process-section .process-orbit i:nth-child(2) { inset: 63px; border-color: rgba(188, 91, 255, .14); }
.process-section .process-orbit i:nth-child(3) { inset: 112px; border-color: rgba(188, 91, 255, .1); }
.process-section .process-visual {
  position: absolute;
  z-index: 2;
  top: 34px;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: 386px;
  height: 615px;
  min-height: 0;
  padding: 22px 22px 20px;
  overflow: hidden;
  border: 8px solid #09050e;
  border-radius: 51px;
  background:
    radial-gradient(ellipse 85% 43% at 52% 5%, rgba(91, 25, 158, .58), transparent 74%),
    linear-gradient(160deg, #1d0c35 0%, #150923 48%, #0d071a 100%);
  box-shadow: 0 0 0 2px rgba(175, 118, 204, .83), 0 0 0 5px rgba(31, 12, 51, .78), 0 30px 60px rgba(2, 0, 8, .72), 0 0 55px rgba(164, 53, 245, .45), inset 0 1px rgba(255, 255, 255, .15);
  transform: translateX(-50%) rotate(-6deg);
  transform-origin: center;
}
.process-section .process-visual::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  width: 113px;
  height: 26px;
  border-radius: 0 0 16px 16px;
  background: #05030a;
  box-shadow: inset 0 -2px 4px rgba(255, 255, 255, .07);
  transform: translateX(-50%);
}
.process-section .process-visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 42px;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, .065), transparent 22%, transparent 73%, rgba(193, 112, 255, .035));
}
.process-section .process-visual > * { position: relative; z-index: 1; }
.process-section .process-phone-status { display: flex; justify-content: space-between; padding: 2px 5px 18px; color: #d9c9e6; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.process-section .process-phone-status span:last-child { font-size: 8px; }
.process-section .visual-head { display: flex; align-items: center; gap: 11px; justify-content: flex-start; color: #c9b6dc; font-size: 10px; letter-spacing: .12em; }
.process-section .visual-head > span:first-child { color: #bc5ef7; font-size: 25px; line-height: .7; }
.process-section .visual-head strong { font-size: 10px; font-weight: 800; }
.process-section .visual-head > span:last-child { margin-left: auto; color: #b456ef; font-size: 13px; }
.process-section .process-visual .process-panel { flex: 1; min-height: 0; animation: process-panel-in .32s ease both; }
.process-section .process-visual .visual-user { gap: 13px; margin-top: 31px; padding-bottom: 15px; border-bottom: 0; }
.process-section .process-visual .visual-user > div { width: 55px; height: 55px; border-radius: 15px; background: linear-gradient(145deg, #c370fa, #9a36ea); color: #160820; font-size: 35px; box-shadow: 0 8px 20px rgba(155, 57, 231, .18); }
.process-section .process-visual .visual-user > span { color: #b9a5cb; font-size: 10px; letter-spacing: .08em; }
.process-section .process-visual .visual-user strong { margin-top: 4px; color: #fff; font-size: 19px; letter-spacing: -.035em; }
.process-section .process-visual .visual-choice { min-height: 58px; gap: 12px; margin-top: 9px; padding: 7px 10px; border: 1px solid rgba(176, 125, 215, .42); border-radius: 12px; background: linear-gradient(120deg, rgba(70, 44, 95, .52), rgba(35, 20, 56, .7)); color: #fff; font-size: 12px; box-shadow: inset 0 1px rgba(255, 255, 255, .09); }
.process-section .process-visual .visual-choice:first-of-type { margin-top: 16px; }
.process-section .process-option-icon { display: grid; place-items: center; flex: none; width: 39px; height: 39px; border: 1px solid rgba(175, 79, 252, .28); border-radius: 10px; background: linear-gradient(145deg, #7432af, #3c1963); color: #d57cff; font-size: 25px; }
.process-section .process-option-icon svg { width: 23px; height: 23px; }
.process-section .process-visual .visual-choice b { margin-left: auto; color: #c867fa; font-size: 21px; font-weight: 500; }
.process-section .visual-footer { align-items: flex-end; margin-top: auto; padding-top: 19px; color: #c9b7db; font-size: 11px; letter-spacing: .06em; }
.process-section .visual-footer span { display: block; color: #c9b7db; }
.process-section .visual-footer small { display: block; margin-top: 3px; color: #9784ac; font-size: 9px; font-weight: 500; letter-spacing: 0; }
.process-section .visual-footer b { color: #c857ff; font-size: 16px; }
.process-section .visual-form { margin-top: 35px; padding: 17px; border-radius: 15px; background: rgba(68, 30, 98, .35); }
.process-section .visual-form > div { background: #a855f7; color: #1a0b25; }
.process-section .visual-order { margin-top: 40px; padding: 15px; border-radius: 13px; background: rgba(68, 30, 98, .35); }
.process-section .visual-order .process-option-icon { width: 43px; height: 43px; font-size: 29px; }
.process-section .visual-lines i { background: rgba(173, 99, 245, .44); }
.process-section .process-device-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 154px;
  min-height: 70px;
  padding: 10px 13px;
  border: 1px solid rgba(185, 79, 247, .48);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(52, 20, 82, .92), rgba(16, 7, 35, .92));
  color: #fff;
  box-shadow: 0 12px 27px rgba(5, 0, 14, .48), inset 0 1px rgba(255, 255, 255, .09);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.process-section .process-device-chip > span { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(141, 47, 218, .25); color: #c75dff; font-size: 26px; }
.process-section .process-device-chip strong { font-size: 12px; line-height: 1.22; }
.process-section .process-device-chip small { display: block; color: #c2aecf; font-size: 10px; }
.process-section .process-chip-site { top: 158px; left: -58px; }
.process-section .process-chip-panel { right: -33px; bottom: 78px; }
.process-section .process-copy { align-self: start; width: 100%; max-width: none; padding-top: 85px; }
.process-section .process-copy .steps { position: relative; display: grid; gap: 27px; margin-top: 0; }
.process-section .process-copy .steps::before { content: ""; position: absolute; left: -36px; top: 56px; bottom: 56px; border-left: 1px dotted rgba(183, 104, 245, .44); }
.process-section .process-step,
.process-section .process-step:last-child {
  position: relative;
  display: grid;
  grid-template-columns: 63px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 25px;
  width: 100%;
  min-height: 125px;
  padding: 21px 30px;
  border: 1px solid rgba(159, 112, 196, .49);
  border-radius: 22px;
  background: linear-gradient(120deg, rgba(37, 21, 56, .79), rgba(20, 10, 36, .85));
  color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 17px 28px rgba(3, 0, 13, .19);
  text-align: left;
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
}
.process-section .process-step::before {
  content: "";
  position: absolute;
  inset: auto auto auto -44px;
  width: 14px;
  height: 14px;
  border: 3px solid #5b416f;
  border-radius: 50%;
  background: #372246;
  box-shadow: 0 0 0 6px rgba(167, 87, 229, .12);
}
.process-section .process-step.active,
.process-section .process-step:hover,
.process-section .process-step:focus-visible {
  padding-left: 30px;
  border-color: #d063ff;
  background: linear-gradient(105deg, rgba(85, 31, 125, .63), rgba(35, 16, 58, .82) 70%);
  box-shadow: 0 0 0 1px rgba(198, 94, 255, .3), 0 0 22px rgba(184, 66, 250, .39), inset 0 1px rgba(255, 255, 255, .12), inset -4px 0 12px rgba(182, 72, 252, .16);
}
.process-section .process-step.active::before { border-color: #bd6af2; background: #ab43f5; box-shadow: 0 0 0 5px rgba(167, 87, 229, .2), 0 0 18px rgba(197, 88, 255, .65); }
.process-section .process-step:hover { transform: translateX(4px); }
.process-section .process-step .process-step-number { display: grid; place-items: center; width: 63px; height: 63px; border: 1px solid rgba(163, 75, 236, .73); border-radius: 15px; background: rgba(111, 42, 173, .28); color: #d696ff; font: 700 22px Outfit, sans-serif; }
.process-section .process-step.active .process-step-number { border-color: #b75bfa; background: linear-gradient(145deg, #ce76ff, #aa4cf3); color: #190a2c; }
.process-section .process-step .process-step-text { min-width: 0; }
.process-section .process-step strong { color: #fff; font: 700 23px/1.1 Outfit, sans-serif; letter-spacing: -.036em; }
.process-section .process-step.active strong { color: #d268ff; }
.process-section .process-step small { max-width: 395px; margin-top: 9px; color: #d2c6dc; font-size: 15px; line-height: 1.48; }
.process-section .process-step .process-step-arrow { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(195, 153, 224, .6); border-radius: 50%; color: #fff; font-size: 29px; font-weight: 400; line-height: 1; }
.process-section .process-step.active .process-step-arrow { border-color: #c464fa; }
.process-section .process-step:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@keyframes process-phone-float { 50% { transform: translateX(-50%) translateY(-7px) rotate(-6deg); } }
@keyframes process-orbit-breathe { 50% { opacity: .7; filter: brightness(1.15); } }
@keyframes process-panel-in { from { opacity: .35; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .process-section .process-visual { animation: process-phone-float 8s ease-in-out infinite; }
  .process-section .process-orbit { animation: process-orbit-breathe 9s ease-in-out infinite; }
}
@media (max-width: 1100px) {
  .process-section .process-heading { grid-template-columns: 1fr; gap: 18px; margin-right: 0; }
  .process-section .section-heading h2 { font-size: clamp(46px, 5.2vw, 60px); }
  .process-section .section-heading > p { max-width: 560px; margin: 0; }
  .process-section .process-grid { grid-template-columns: minmax(0, 46%) minmax(0, 54%); gap: 20px; margin-right: 0; }
  .process-section .process-device-stage { height: 610px; }
  .process-section .process-orbit { width: 440px; height: 440px; }
  .process-section .process-visual { width: 326px; height: 554px; padding: 20px 16px 16px; }
  .process-section .process-phone-status { padding-bottom: 13px; }
  .process-section .process-visual .visual-user { margin-top: 19px; }
  .process-section .process-visual .visual-user > div { width: 44px; height: 44px; font-size: 27px; }
  .process-section .process-visual .visual-user strong { font-size: 16px; }
  .process-section .process-visual .visual-choice { min-height: 50px; margin-top: 7px; font-size: 10px; }
  .process-section .process-option-icon { width: 33px; height: 33px; }
  .process-section .process-copy { padding-top: 58px; }
  .process-section .process-step, .process-section .process-step:last-child { grid-template-columns: 50px minmax(0,1fr) 42px; gap: 15px; min-height: 118px; padding: 18px; }
  .process-section .process-step:hover, .process-section .process-step.active { padding-left: 18px; }
  .process-section .process-step .process-step-number { width: 50px; height: 50px; font-size: 18px; }
  .process-section .process-step .process-step-arrow { width: 42px; height: 42px; font-size: 23px; }
  .process-section .process-step strong { font-size: 19px; }
  .process-section .process-step small { font-size: 12px; }
  .process-section .process-chip-site { left: -12px; }
  .process-section .process-chip-panel { right: -12px; }
}
@media (max-width: 900px) {
  .process-section { padding-block: 72px 76px; }
  .process-section .process-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 32px; }
  .process-section .section-heading h2 { font-size: clamp(43px, 6.8vw, 60px); }
  .process-section .section-heading > p { max-width: 580px; margin: 0; }
  .process-section .process-grid { grid-template-columns: 1fr; gap: 10px; }
  .process-section .process-device-stage { width: min(100%, 620px); margin-inline: auto; }
  .process-section .process-copy { width: min(100%, 660px); margin-inline: auto; padding-top: 15px; }
  .process-section .process-copy .steps::before { left: -21px; }
  .process-section .process-step::before { left: -29px; }
}
@media (max-width: 620px) {
  .process-section { padding-block: 66px 72px; }
  .process-section .process-container { width: min(calc(100% - 28px), 1300px); }
  .process-section .process-heading { gap: 20px; margin-bottom: 19px; }
  .process-section .section-heading h2 { font-size: clamp(35px, 9.2vw, 47px); line-height: 1.02; }
  .process-section .section-heading h2 br { display: none; }
  .process-section .section-heading > p { padding-left: 14px; font-size: 13px; }
  .process-section .process-device-stage { height: 550px; }
  .process-section .process-device-stage::before { width: 500px; height: 500px; }
  .process-section .process-orbit { width: 390px; height: 390px; top: 49%; }
  .process-section .process-visual { top: 10px; width: min(305px, calc(100vw - 58px)); height: 520px; padding: 18px 14px 15px; border-width: 7px; border-radius: 39px; }
  .process-section .process-visual::before { width: 88px; height: 20px; }
  .process-section .process-phone-status { padding-bottom: 12px; font-size: 8px; }
  .process-section .visual-head strong { font-size: 8px; }
  .process-section .process-visual .visual-user { gap: 9px; margin-top: 18px; padding-bottom: 8px; }
  .process-section .process-visual .visual-user > div { width: 39px; height: 39px; font-size: 24px; }
  .process-section .process-visual .visual-user > span { font-size: 8px; }
  .process-section .process-visual .visual-user strong { font-size: 14px; }
  .process-section .process-visual .visual-choice { min-height: 47px; padding: 5px 8px; font-size: 9px; }
  .process-section .process-option-icon { width: 31px; height: 31px; }
  .process-section .process-option-icon svg { width: 19px; height: 19px; }
  .process-section .visual-footer { padding-top: 11px; font-size: 9px; }
  .process-section .visual-footer small { font-size: 8px; }
  .process-section .process-device-chip { min-width: 0; min-height: 52px; padding: 7px 9px; gap: 7px; }
  .process-section .process-device-chip > span { width: 28px; height: 28px; font-size: 19px; }
  .process-section .process-device-chip strong { font-size: 9px; }
  .process-section .process-device-chip small { font-size: 8px; }
  .process-section .process-chip-site { top: 149px; left: 0; }
  .process-section .process-chip-panel { right: 0; bottom: 42px; }
  .process-section .process-copy { padding-top: 4px; }
  .process-section .process-copy .steps { gap: 13px; }
  .process-section .process-copy .steps::before, .process-section .process-step::before { display: none; }
  .process-section .process-step, .process-section .process-step:last-child { grid-template-columns: 43px minmax(0,1fr) 32px; min-height: 104px; gap: 11px; padding: 13px; border-radius: 17px; }
  .process-section .process-step:hover, .process-section .process-step.active { padding-left: 13px; }
  .process-section .process-step .process-step-number { width: 43px; height: 43px; border-radius: 11px; font-size: 15px; }
  .process-section .process-step .process-step-arrow { width: 32px; height: 32px; font-size: 19px; }
  .process-section .process-step strong { font-size: 16px; }
  .process-section .process-step small { margin-top: 5px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-section .process-visual,
  .process-section .process-orbit,
  .process-section .process-visual .process-panel { animation: none; }
  .process-section .process-step { transition: none; }
  .process-section .process-step:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .process-section .process-step,
  .process-section .process-device-chip { background: #160b29; backdrop-filter: none; -webkit-backdrop-filter: none; }
}