/* Seção que apresenta o fluxo antes de enfrentar a fila do sistema público. */
.journey-section {
  display: flex;
  justify-content: center;
  padding: 84px 0 120px;
  background: #fafafa;
}

/* Container principal com a largura do frame desktop do Figma. */
.journey-shell {
  width: 1280px;
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* Coluna esquerda com texto e CTA. */
.journey-content {
  width: 552px;
  min-height: 394px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
}

/* Bloco textual principal da seção. */
.journey-copy {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Título com gradiente do Figma. */
.journey-title {
  margin: 0;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.356;
  letter-spacing: 0.76px;
  background-image: linear-gradient(163.26deg, #57d4ff 0%, #845cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Destaques em negrito preservados dentro do título. */
.journey-title strong {
  font-weight: 700;
}

/* Texto de apoio abaixo do título. */
.journey-description {
  width: 422px;
  margin: 0;
  color: var(--text);
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.47;
}

/* CTA específico da seção com largura do componente desktop. */
.journey-cta {
  width: 328.612px;
}

/* Largura interna do texto do CTA. */
.journey-cta-label {
  width: 240px;
}

/* Wrapper e ícone do CTA desktop. */
.journey-cta-icon,
.journey-cta-icon-img {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
}

/* Visual desktop à direita da seção. */
.journey-visual {
  width: 661px;
  height: 505px;
  position: relative;
}

/* Card base roxo atrás da personagem. */
.journey-visual-card {
  position: absolute;
  inset: 0;
}

.journey-visual-card::before {
  content: "";
  position: absolute;
  left: 136px;
  top: 111px;
  width: 414px;
  height: 394px;
  border-radius: 53px;
  background: var(--violet);
}

/* Foto da personagem principal. */
.journey-visual-photo {
  position: absolute;
  left: 149px;
  top: 0;
  width: 387px;
  height: 505px;
  object-fit: cover;
  object-position: center top;
}

/* Badges brancos que orbitam a personagem. */
.journey-badge {
  position: absolute;
  height: 72.503px;
  display: inline-flex;
  align-items: center;
  gap: 6.106px;
  padding: 19.08px;
  border-radius: 122.111px;
  background: #ffffff;
  box-shadow: 0 16.159px 18.987px rgba(0, 0, 0, 0.1);
  transform-origin: center;
  will-change: transform;
}

.journey-badge--discover {
  left: 65px;
  top: 188px;
  width: 244.221px;
  animation: journey-float-a 7.4s ease-in-out infinite;
}

.journey-badge--receive {
  left: 385px;
  top: 240px;
  width: 275.512px;
  animation: journey-float-b 8.6s ease-in-out infinite;
}

.journey-badge--write {
  left: 0;
  top: 318px;
  width: 283.144px;
  animation: journey-float-c 7.9s ease-in-out infinite;
}

.journey-badge--need {
  left: 351px;
  top: 404px;
  width: 286.197px;
  animation: journey-float-d 9.1s ease-in-out infinite;
}

@keyframes journey-float-a {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  25% {
    transform: translate3d(4px, -8px, 0) rotate(-1deg);
  }

  50% {
    transform: translate3d(-6px, -15px, 0) rotate(1deg);
  }

  75% {
    transform: translate3d(3px, -5px, 0) rotate(-0.6deg);
  }
}

@keyframes journey-float-b {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  20% {
    transform: translate3d(-5px, -7px, 0) rotate(0.8deg);
  }

  50% {
    transform: translate3d(6px, -14px, 0) rotate(-1deg);
  }

  80% {
    transform: translate3d(-4px, -4px, 0) rotate(0.5deg);
  }
}

@keyframes journey-float-c {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  30% {
    transform: translate3d(5px, -10px, 0) rotate(0.9deg);
  }

  60% {
    transform: translate3d(-4px, -16px, 0) rotate(-0.8deg);
  }

  85% {
    transform: translate3d(2px, -6px, 0) rotate(0.4deg);
  }
}

@keyframes journey-float-d {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  22% {
    transform: translate3d(3px, -6px, 0) rotate(-0.7deg);
  }

  52% {
    transform: translate3d(-7px, -13px, 0) rotate(1deg);
  }

  78% {
    transform: translate3d(4px, -8px, 0) rotate(-0.4deg);
  }
}

/* Cápsula roxa com check usada em todos os badges. */
.journey-badge-icon {
  width: 30.787px;
  height: 30.118px;
  flex: 0 0 30.787px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ícone interno do badge. */
.journey-badge-icon img {
  width: 30.787px;
  height: 30.118px;
  display: block;
}

/* Texto interno dos badges desktop. */
.journey-badge-label {
  color: var(--text);
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 15.264px;
  font-weight: 700;
  line-height: 1.47;
  white-space: nowrap;
}

/* Visual mobile fica oculto fora do breakpoint. */
.journey-visual-mobile {
  display: none;
}

/* Tablet: mantém a lógica do desktop, mas empilha o conteúdo. */
@media (max-width: 1024px) and (min-width: 481px) {
  .journey-section {
    padding: 64px 24px 88px;
  }

  .journey-shell {
    width: min(100%, 900px);
    flex-direction: column;
    align-items: center;
    gap: 44px;
  }

  .journey-content {
    width: min(100%, 720px);
    min-height: auto;
    align-items: center;
    text-align: center;
  }

  .journey-copy {
    align-items: center;
    gap: 28px;
  }

  .journey-title {
    width: 100%;
    font-size: 34px;
    letter-spacing: 0.68px;
    text-align: center;
  }

  .journey-description {
    width: min(100%, 520px);
    font-size: 18px;
    text-align: center;
  }

  .journey-cta {
    width: 296px;
    height: auto;
    padding: 13px;
    gap: 7.5px;
  }

  .journey-cta-label {
    width: 215px;
    font-size: 16px;
    letter-spacing: 0.24px;
  }

  .journey-cta-icon,
  .journey-cta-icon-img {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .journey-visual {
    width: 560px;
    height: 428px;
  }

  .journey-visual-card::before {
    left: 116px;
    top: 94px;
    width: 350px;
    height: 333px;
    border-radius: 45px;
  }

  .journey-visual-photo {
    left: 128px;
    width: 327px;
    height: 428px;
  }

  .journey-badge--discover {
    left: 55px;
    top: 159px;
    width: 206px;
  }

  .journey-badge--receive {
    left: 326px;
    top: 202px;
    width: 233px;
  }

  .journey-badge--write {
    left: 0;
    top: 270px;
    width: 212px;
  }

  .journey-badge--need {
    left: 298px;
    top: 342px;
    width: 242px;
  }

  .journey-badge {
    height: 61px;
    gap: 5px;
    padding: 16px;
    border-radius: 102px;
  }

  .journey-badge-icon,
  .journey-badge-icon img {
    width: 26px;
    height: 25px;
    flex-basis: 26px;
  }

  .journey-badge-label {
    font-size: 13px;
  }
}

/* Mobile fiel ao frame mobile específico do Figma. */
@media (max-width: 480px) {
  .journey-section {
    padding: 78px 21px 96px;
  }

  .journey-shell {
    width: 327px;
    flex-direction: column;
    align-items: center;
    gap: 27px;
  }

  .journey-visual {
    display: none;
  }

  .journey-content {
    width: 327px;
    min-height: auto;
    align-items: center;
    gap: 27px;
  }

  .journey-copy {
    width: 327px;
    align-items: center;
    gap: 20px;
  }

  .journey-title {
    width: 327px;
    font-size: 28px;
    letter-spacing: 0.56px;
    line-height: 1.356;
    text-align: center;
  }

  .journey-visual-mobile {
    display: block;
    width: 327px;
  }

  .journey-visual-mobile-card {
    position: relative;
    width: 327px;
    height: 250.011px;
  }

  .journey-visual-mobile-card::before {
    content: "";
    position: absolute;
    left: 67.583px;
    top: 54.953px;
    width: 204.959px;
    height: 195.058px;
    border-radius: 26.229px;
    background: var(--violet);
  }

  .journey-visual-mobile-photo {
    position: absolute;
    left: 74.02px;
    top: 0;
    width: 191.592px;
    height: 250.01px;
    object-fit: cover;
    object-position: center top;
  }

  .journey-badge--discover-mobile {
    left: 32.18px;
    top: 93.073px;
    width: 120.907px;
    animation: journey-float-a 7.4s ease-in-out infinite;
  }

  .journey-badge--receive-mobile {
    left: 190.602px;
    top: 118.817px;
    width: 136.398px;
    animation: journey-float-b 8.6s ease-in-out infinite;
  }

  .journey-badge--write-mobile {
    left: 0;
    top: 157.432px;
    width: 140.176px;
    animation: journey-float-c 7.9s ease-in-out infinite;
  }

  .journey-badge--need-mobile {
    left: 173.77px;
    top: 200.008px;
    width: 141.688px;
    animation: journey-float-d 9.1s ease-in-out infinite;
  }

  .journey-badge--discover-mobile,
  .journey-badge--receive-mobile,
  .journey-badge--write-mobile,
  .journey-badge--need-mobile {
    height: 35.894px;
    gap: 3.023px;
    padding: 9.446px;
    border-radius: 60.453px;
    box-shadow: 0 8px 9.4px rgba(0, 0, 0, 0.1);
  }

  .journey-badge-icon--mobile,
  .journey-badge-icon--mobile img {
    width: 15.242px;
    height: 14.911px;
    flex-basis: 15.242px;
  }

  .journey-badge-label--mobile {
    font-size: 7.557px;
    line-height: 1.47;
  }

  .journey-description {
    width: 319px;
    font-size: 16px;
    text-align: center;
  }

  .journey-cta {
    width: 272.308px;
    height: auto;
    padding: 12.43px;
    gap: 7.136px;
  }

  .journey-cta-label {
    width: 198.879px;
    font-size: 14.92px;
    letter-spacing: 0.2984px;
  }

  .journey-cta-icon,
  .journey-cta-icon-img {
    width: 41.433px;
    height: 41.433px;
    flex-basis: 41.433px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-badge {
    animation: none;
  }
}