/* -------------------------------------------------------------------------- */
/* Continuidade pós-entrega: trajetória ascendente vinculada ao scroll        */
/* -------------------------------------------------------------------------- */

/* O percurso amplo dá tempo para os três benefícios formarem a composição. */
.aftercare-evolution {
  position: relative;
  height: 320vh;
  color: var(--color-paper);
  background: var(--color-ink);
}

/* O palco fixa a narrativa enquanto a rolagem controla somente camadas compostas. */
.aftercare-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 68rem;
  overflow: hidden;
  isolation: isolate;
}

/* A luz radial cria profundidade sem gradientes coloridos fora da paleta. */
.aftercare-stage::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 76% 42%, rgb(230 235 245 / 13%), transparent 28%),
    linear-gradient(135deg, rgb(31 47 90 / 26%), transparent 52%);
  content: "";
}

/* A grade pontual sugere um campo de direção sem competir com a mensagem. */
.aftercare-stage::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgb(247 245 235 / 15%) 0.08rem, transparent 0.09rem);
  background-size: 4.8rem 4.8rem;
  content: "";
  mask-image: linear-gradient(90deg, transparent 4%, #000 58%, transparent 98%);
  opacity: 0.48;
}

/* A copy ocupa o lado editorial e permanece legível durante toda a evolução. */
.aftercare-copy {
  position: absolute;
  z-index: 4;
  top: clamp(8rem, 13vh, 13rem);
  left: var(--gutter, 4vw);
  width: min(45vw, 70rem);
}

/* O metadado repete a gramática das demais seções espaciais da landing page. */
.aftercare-copy__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgb(247 245 235 / 22%);
}

/* O contador comunica a etapa ativa sem adicionar controles ao palco. */
.aftercare-step {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
}

/* O título usa escala editorial ampla para manter o tom premium do projeto. */
.aftercare-copy h2 {
  max-width: 10ch;
  margin: clamp(3rem, 5vh, 5rem) 0 0;
  font-size: clamp(5rem, 6.2vw, 10rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

/* O apoio explica a continuidade sem revelar a operação interna da empresa. */
.aftercare-copy > p {
  max-width: 48ch;
  margin: clamp(2.6rem, 4vh, 4rem) 0 0;
  color: rgb(247 245 235 / 68%);
  font-size: clamp(1.4rem, 1.15vw, 1.8rem);
  line-height: 1.6;
}

/* A ilustração conceitual domina o lado direito sem depender de bitmap. */
.aftercare-visual {
  position: absolute;
  z-index: 2;
  top: 7vh;
  right: 2vw;
  width: min(51vw, 88rem);
  height: min(72vh, 78rem);
}

/* O campo contém órbitas, módulos e a trajetória em uma única camada visual. */
.aftercare-orbit {
  position: relative;
  width: 100%;
  height: 100%;
}

/* As órbitas estabelecem o zênite como ponto de convergência. */
.aftercare-orbit__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border: 1px solid rgb(247 245 235 / 17%);
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(-22deg);
  will-change: transform, opacity;
}

/* A órbita externa cria o limite amplo da composição. */
.aftercare-orbit__ring--outer {
  width: min(44vw, 70rem);
  aspect-ratio: 1;
}

/* A órbita interna concentra a leitura em torno dos módulos. */
.aftercare-orbit__ring--inner {
  width: min(27vw, 44rem);
  aspect-ratio: 1;
  border-style: dashed;
  opacity: 0.72;
}

/* A rota cresce do ponto de origem ao ápice por meio de scaleX. */
.aftercare-route {
  position: absolute;
  top: 80%;
  left: 10%;
  width: 82%;
  height: 1px;
  background: linear-gradient(90deg, rgb(230 235 245 / 12%), var(--color-soft));
  box-shadow: 0 0 2.6rem rgb(230 235 245 / 45%);
  transform: rotate(-43deg) scaleX(0.08);
  transform-origin: left center;
  will-change: transform, opacity;
}

/* Cada módulo funciona como um marco compacto da trajetória. */
.aftercare-module {
  position: absolute;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  width: clamp(12rem, 11vw, 17rem);
  min-height: 5.2rem;
  gap: 1.2rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid rgb(247 245 235 / 24%);
  border-radius: 999px;
  color: var(--color-paper);
  background: rgb(10 26 58 / 78%);
  box-shadow: 0 1.6rem 4rem rgb(0 0 0 / 16%);
  backdrop-filter: blur(0.8rem);
  will-change: transform, opacity;
}

/* O índice circular reforça a progressão 01–03. */
.aftercare-module b {
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--color-ink);
  background: var(--color-soft);
  font-size: 0.9rem;
  font-weight: 600;
  place-items: center;
}

/* O nome do módulo permanece curto para não parecer uma interface de produto. */
.aftercare-module small {
  overflow: hidden;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

/* As posições iniciais dispersas tornam visível a organização provocada pelo scroll. */
.aftercare-module--autonomy {
  top: 72%;
  left: 5%;
}

.aftercare-module--agility {
  top: 74%;
  left: 66%;
}

.aftercare-module--continuity {
  top: 18%;
  left: 70%;
}

/* A estrela de quatro pontas é desenhada em CSS e acompanha a frente da trajetória. */
.aftercare-zenith {
  position: absolute;
  z-index: 0;
  top: 78%;
  left: 7%;
  display: grid;
  justify-items: center;
  gap: 1rem;
  color: var(--color-paper);
  will-change: transform, opacity;
}

/* O losango principal cria o eixo vertical do símbolo de zênite. */
.aftercare-zenith i {
  position: relative;
  display: block;
  width: 5.8rem;
  height: 5.8rem;
  background: var(--color-paper);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 1.6rem rgb(230 235 245 / 55%));
}

/* O rótulo final identifica a metáfora sem explicar mecanismos internos. */
.aftercare-zenith small {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  opacity: 0;
  text-transform: uppercase;
  will-change: opacity;
}

/* Os três benefícios formam a base editorial do palco. */
.aftercare-benefits {
  position: absolute;
  z-index: 5;
  right: var(--gutter, 4vw);
  bottom: clamp(3rem, 5vh, 5rem);
  left: var(--gutter, 4vw);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}

/* Cada benefício recebe apenas linha, índice e tipografia para preservar leveza. */
.aftercare-benefit {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgb(247 245 235 / 20%);
  opacity: 0.36;
  transition: opacity 280ms var(--ease-expo), border-color 280ms var(--ease-expo);
}

/* A etapa ativa ganha contraste, mas não altera o layout. */
.aftercare-benefit.is-active {
  border-color: var(--color-paper);
  opacity: 1;
}

/* O índice mantém a mesma linguagem técnica usada no restante da landing page. */
.aftercare-benefit > span {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

/* A frase fica compacta para caber na base do viewport sem colisões. */
.aftercare-benefit p {
  max-width: 39ch;
  margin: 0;
  color: rgb(247 245 235 / 68%);
  font-size: clamp(1.15rem, 0.9vw, 1.4rem);
  line-height: 1.5;
}

/* O benefício principal mantém o contraste integral dentro da frase. */
.aftercare-benefit strong {
  color: var(--color-paper);
  font-weight: 500;
}

/* -------------------------------------------------------------------------- */
/* Mobile e preferência por movimento reduzido                               */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  /* O palco deixa de ser sticky para eliminar o percurso artificial. */
  .aftercare-evolution {
    height: auto;
  }

  /* Todo o conteúdo volta ao fluxo natural e permanece visível. */
  .aftercare-stage {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 9rem 2rem 8rem;
    overflow: hidden;
  }

  /* A copy ocupa toda a largura útil no layout estático. */
  .aftercare-copy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }

  /* O título reduz a escala e mantém uma quebra editorial controlada. */
  .aftercare-copy h2 {
    max-width: 11ch;
    margin-top: 3.2rem;
    font-size: clamp(4.6rem, 13.5vw, 7rem);
  }

  /* O texto de apoio ganha largura confortável para leitura móvel. */
  .aftercare-copy > p {
    max-width: 42ch;
    margin-top: 2.8rem;
    font-size: 1.5rem;
  }

  /* A ilustração assume proporção vertical e exibe o quadro final da animação. */
  .aftercare-visual {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    margin-top: 5rem;
  }

  /* As órbitas cabem no quadro estreito sem criar rolagem horizontal. */
  .aftercare-orbit__ring--outer {
    width: 92%;
  }

  .aftercare-orbit__ring--inner {
    width: 58%;
  }

  /* A rota permanece completa como representação estática de continuidade. */
  .aftercare-route {
    top: 83%;
    left: 7%;
    width: 103%;
    transform: rotate(-51deg) scaleX(1);
  }

  /* Os módulos formam uma escada ascendente sem animação contínua. */
  .aftercare-module {
    width: 15rem;
    min-height: 4.8rem;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    backdrop-filter: none;
    transform: none !important;
    opacity: 1 !important;
  }

  /* O índice encolhe ligeiramente para preservar os nomes por extenso. */
  .aftercare-module b {
    width: 2.4rem;
  }

  /* Tracking compacto evita abreviações sem perder a linguagem técnica. */
  .aftercare-module small {
    font-size: 0.9rem;
    letter-spacing: 0.06em;
  }

  .aftercare-module--autonomy {
    top: 69%;
    left: 4%;
  }

  .aftercare-module--agility {
    top: 48%;
    left: 27%;
  }

  .aftercare-module--continuity {
    top: 27%;
    left: 47%;
  }

  /* A estrela encerra a trajetória na região superior direita. */
  .aftercare-zenith {
    top: 7%;
    left: 76%;
    transform: none !important;
    opacity: 1 !important;
  }

  /* O quadro estático exibe o destino da trajetória sem depender do JavaScript. */
  .aftercare-zenith small {
    opacity: 1 !important;
  }

  /* Os benefícios são empilhados para preservar área de toque e leitura. */
  .aftercare-benefits {
    position: relative;
    inset: auto;
    grid-template-columns: 1fr;
    gap: 2.4rem;
    margin-top: 4rem;
  }

  /* Todas as frases recebem o mesmo peso no modo sem timeline. */
  .aftercare-benefit {
    opacity: 1;
  }

  /* O texto dos benefícios recupera a escala de leitura padrão. */
  .aftercare-benefit p {
    font-size: 1.4rem;
  }
}

/* Telas muito estreitas evitam colisão entre o terceiro módulo e a estrela. */
@media (max-width: 390px) {
  .aftercare-module {
    width: 14.5rem;
  }

  /* O terceiro módulo recua para manter o símbolo do zênite livre. */
  .aftercare-module--continuity {
    left: 45%;
  }
}

/* O fallback desliga transições e pistas de composição quando há sensibilidade a movimento. */
@media (prefers-reduced-motion: reduce) {
  .aftercare-benefit {
    transition: none;
  }

  /* Remove promoções de camada desnecessárias no quadro estático. */
  .aftercare-orbit__ring,
  .aftercare-route,
  .aftercare-module,
  .aftercare-zenith {
    will-change: auto;
  }

  /* O rótulo estático não precisa manter uma camada de composição. */
  .aftercare-zenith small {
    will-change: auto;
  }
}