/* ============================================================
   ARX Cyber — Template das páginas de missão (ex.: Continuar Operando)
   Medidas do Figma (nó 368-7927). Reusa civitas.css (chip, luz, botões).
   ============================================================ */

/* ---- Hero compacto ---- */
.mo-hero { position: relative; min-height: 820px; overflow: hidden; background: #151515; }
.mo-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.mo-hero__bg img {   /* enquadramento do Figma: 120.06% × 110.28%, deslocada -14.17% / -10.28% */
  position: absolute; left: -14.17%; top: -10.28%;
  width: 120.06%; height: 110.28%; max-width: none;
}
.mo-hero__grad {
  position: absolute; left: 0; right: 0; bottom: 0; top: 51%;
  background: linear-gradient(180deg, rgba(21,21,21,0) 56.94%, #151515 97.65%);
}
/* A copy nova é bem mais longa que a do Figma (eyebrow + 3 linhas de título +
   2 parágrafos + 2 CTAs), então o miolo saiu das posições absolutas medidas e
   virou fluxo à esquerda. O fundo, o gradiente e a altura seguem os mesmos. */
.mo-hero__inner {
  position: relative; z-index: 2; min-height: 820px;
  display: flex; align-items: center;
  /* desconta o header flutuante, senão o eyebrow nasce atrás dele */
  padding: var(--arx-header-h) 0 56px;
}
.mo-hero__caixa { width: 100%; }
.mo-hero__title {
  margin-top: 14px; max-width: 640px;
  font-size: 56px; line-height: 62px; letter-spacing: -0.68px;
  font-weight: var(--fw-regular); color: var(--arx-white);
}
.mo-hero__title b { color: var(--arx-blue); font-weight: var(--fw-extrabold); }
.mo-hero__sub {
  margin-top: 20px; max-width: 552px;
  font-size: 16px; line-height: 25px; color: var(--arx-grey-90);
}
.mo-hero__acoes { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Carrossel da história ---- */
.mo-story { padding-top: 98px; position: relative; overflow-x: clip; }
.mo-story__head { position: relative; }
.mo-story__title { margin-top: 23px; width: 540px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.mo-story__nav { position: absolute; right: 0; bottom: 8px; display: flex; gap: 6px; }
.mo-navbtn {
  width: 30px; height: 28px; border-radius: 6px; cursor: pointer;
  border: 1px solid #1574ff; background: rgba(72,72,72,.2);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s var(--arx-ease), box-shadow .25s var(--arx-ease), transform .25s var(--arx-ease);
}
.mo-navbtn:hover { background: rgba(21,116,255,.28); box-shadow: 0 0 14px -2px rgba(21,116,255,.6); }
.mo-navbtn--prev:hover { transform: translateX(-2px); }
.mo-navbtn--next:hover { transform: translateX(2px); }
.mo-navbtn img { width: 8px; height: 8px; max-width: none; }
.mo-navbtn--prev img { transform: scaleX(-1); }
.mo-navbtn[disabled] { opacity: .35; pointer-events: none; }
.mo-story__bleed { margin-right: calc((100% - 100vw) / 2); overflow: hidden; padding-bottom: 10px; }
.mo-story__viewport { margin-top: 60px; overflow: hidden; }
.mo-story__track {
  display: flex; width: max-content;
  transition: transform .6s var(--arx-ease);
}
.mo-scard {
  width: 335.25px; flex: none; box-sizing: border-box;
  padding: 0 33px 60px 32px;
  border-right: 1px solid #171e2c;
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--arx-ease), transform .6s var(--arx-ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.mo-story__bleed.is-in .mo-scard { opacity: 1; transform: none; }
.mo-scard { transition: background-color .35s var(--arx-ease), opacity .6s var(--arx-ease), transform .6s var(--arx-ease); }
.mo-scard:hover { background: linear-gradient(180deg, rgba(21,116,255,.07), rgba(21,116,255,0)); }
.mo-scard:hover .mo-scard__title { color: #ffffff; }
.mo-scard:hover .mo-scard__num { color: var(--arx-blue); }
.mo-scard__num { font-size: 17px; line-height: 28px; letter-spacing: -0.4px; color: #eaeaea; transition: color .3s var(--arx-ease); }
.mo-scard__title { transition: color .3s var(--arx-ease); }
.mo-scard__body { margin-top: 100px; }
.mo-scard__title { font-size: 30px; line-height: 38px; letter-spacing: -0.6px; color: #eaeaea; font-weight: var(--fw-regular); }
.mo-scard__desc { margin-top: 12px; font-size: 16px; line-height: 26px; letter-spacing: -0.36px; color: #9ea6b6; }
.mo-story__rail { position: relative; height: 3px; margin-top: 17px; }
.mo-story__rail-base { position: absolute; inset: 0; background: #171e2c; border-radius: 3px; }
.mo-story__rail-fill {   /* Figma: gradiente contínuo transparente → #1574ff em toda a linha */
  position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(90deg, rgba(21,116,255,0), #1574ff);
}
.mo-story__rail-glow {   /* cópia desfocada (1280px) sobreposta, como no comp */
  position: absolute; left: 0; top: 0; height: 3px; width: 1280px; max-width: 100%;
  background: linear-gradient(90deg, rgba(21,116,255,0), #1574ff);
  filter: blur(4.35px); pointer-events: none;
}
.mo-story__dots { position: absolute; inset: 0; pointer-events: none; }
.mo-dot {   /* medido do Figma: anel claro sobre a linha, centro translúcido */
  position: absolute; top: 50%; margin-top: -9px; width: 18px; height: 18px;
  border-radius: 50%; box-sizing: border-box;
  border: 2px solid rgba(255,255,255,.45); background: rgba(255,255,255,.10);
  transition: border-color .4s var(--arx-ease), background .4s var(--arx-ease), box-shadow .4s var(--arx-ease);
}
.mo-dot.is-on {
  border-color: #ffffff; background: rgba(255,255,255,.5);
  box-shadow: 0 0 10px rgba(120,180,255,.55);
}

/* ---- Painel "Pergunta" ---- */
.mo-ask { padding-top: 107px; position: relative; overflow-x: clip; }
.mo-ask__panel {   /* medido do Figma: interior #131313, borda azul só na aresta esquerda */
  position: relative; height: 512px; border-radius: 20px; overflow: hidden;
  background: url("../img/missoes/chip-bg.png") 50% 0 / 126.91% 100% no-repeat;
}
.mo-ask__panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(107deg,
    #1a6ad8 0%, #17407e 11%, #1b2b45 24%,
    rgba(30,44,70,.55) 42%, rgba(255,255,255,.05) 72%, rgba(255,255,255,.03) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 3;
}
.mo-ask__panel .arx-eyebrow { position: absolute; left: 132px; top: 123px; }
.mo-ask__title {
  position: absolute; left: 132px; top: 171px; width: 421px;
  font-size: 64px; line-height: 60px; font-weight: var(--fw-regular); color: var(--arx-white);
}
.mo-ask__title b { font-weight: var(--fw-bold); color: var(--arx-blue); }
.mo-ask__sub { position: absolute; left: 132px; top: 326px; width: 435px; font-size: 20px; line-height: 22.4px; color: var(--arx-white); }
.mo-ask__media {
  position: absolute; left: 52.11%; right: 10.39%; top: 61px; height: 390px;
  border-radius: 12px;
}
.mo-ask__media::before {
  content: ""; position: absolute; inset: -14% -18%;
  background: radial-gradient(52% 55% at 50% 50%, rgba(21,116,255,.4), rgba(21,116,255,.12) 55%, transparent 78%);
  pointer-events: none;
}
.mo-ask__media img.foto {
  position: relative; width: 100%; height: 100%; object-fit: cover;
  border-radius: 12px; transform: scaleX(-1);
}
.mo-ask__3d { position: absolute; left: 994px; top: 290px; width: 181px; height: 204px; max-width: none; z-index: 2; }

/* ---- Cards de solução (5) ---- */
.mo-sol { padding-top: 102px; }
.mo-sol .cv-head { margin-bottom: 45px; }
.mo-sol__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22.7px 25px; }
.mo-card {
  position: relative; width: 406px; height: 356px; border-radius: 10px; padding: 1px;
  background: linear-gradient(131.4deg, #1574ff 0%, rgba(112,112,112,.2) 24%);
  transition: transform .3s var(--arx-ease);
}
.mo-card:hover { transform: translateY(-4px); }
.mo-card__in { position: relative; height: 100%; border-radius: 10px; overflow: hidden; background: #1b1b1b; }
.mo-card__ico { position: absolute; left: 66px; top: 50px; height: 55px; max-width: none; }
.mo-card__num {
  position: absolute; right: 110px; top: 277px; transform: translate(50%, -50%);
  font-size: 128px; line-height: 128px; font-weight: var(--fw-medium);
  letter-spacing: -5px; white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 13%, rgba(255,255,255,0) 87%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .2; pointer-events: none;
}
.mo-card h3 {
  position: absolute; left: 66px; top: 129px; right: 52px;
  font-size: 32px; line-height: 28px; font-weight: var(--fw-semibold); color: var(--arx-white);
}
.mo-card p { position: absolute; left: 66px; top: 177px; width: 288px; font-size: 16px; line-height: 18px; color: rgba(255,255,255,.6); }
.mo-card p b { display: block; margin-top: 18px; font-weight: var(--fw-regular); color: var(--arx-white); }
.mo-card__more {
  position: absolute; left: 66px; top: 296px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 16px; line-height: 18px; color: var(--arx-blue);
}
.mo-card__more::after {
  content: ""; width: 9px; height: 9px; background: var(--arx-blue);
  -webkit-mask: url("../img/civitas/mod-arrow.svg") center / contain no-repeat;
          mask: url("../img/civitas/mod-arrow.svg") center / contain no-repeat;
  transition: transform .25s var(--arx-ease);
}
.mo-card:hover .mo-card__more::after { transform: translate(2px, -2px); }

/* ---- O Resultado ---- */
.mo-res { padding-top: 128px; position: relative; overflow-x: clip; }
.mo-res__grid { position: relative; min-height: 523px; }
.mo-res .arx-eyebrow { position: absolute; left: 1px; top: 0; }
.mo-res__title { position: absolute; left: 0; top: 45px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.mo-res__txt { position: absolute; left: 1px; top: 113px; width: 435px; font-size: 20px; line-height: 22.4px; color: var(--arx-white); }
.mo-res__sign {
  display: block; margin-top: 22px;
  font-size: 24px; line-height: 22.4px;
  font-weight: var(--fw-semibold); color: var(--arx-blue);
}
.mo-res__list { position: absolute; left: 670px; top: 0; width: 598px; display: flex; flex-direction: column; gap: 17px; }
.mo-row {
  position: relative; height: 91px; border-radius: 10px; padding: 1px;
  background: linear-gradient(168.8deg, #1574ff 0%, rgba(112,112,112,.2) 24%);
  transition: transform .3s var(--arx-ease);
}
.mo-row:hover { transform: translateX(6px); }
.mo-row__in { position: relative; height: 100%; border-radius: 10px; overflow: hidden; background: #1b1b1b; display: flex; align-items: center; }
.mo-row__in img { position: absolute; left: 59px; width: 28.6px; height: 31px; max-width: none; }
.mo-row__in span { margin-left: 106px; font-size: 24px; line-height: 22.4px; color: var(--arx-white); }

/* ---- Próxima missão ---- */
.mo-next { padding-top: 163px; }
.mo-next__grid { margin-top: 60px; display: flex; justify-content: space-between; }
.mo-ncard {
  position: relative; width: 301px; height: 343px; border-radius: 10px; padding: 1px;
  background: linear-gradient(124.2deg, #1574ff 0%, rgba(112,112,112,.2) 24%);
  transition: transform .3s var(--arx-ease);
}
.mo-ncard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--arx-beam),
    transparent 0deg, transparent 78%,
    rgba(88,150,255,.55) 88%, rgba(160,200,255,.85) 92%, rgba(88,150,255,.55) 96%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--arx-ease); pointer-events: none; z-index: 2;
}
.mo-ncard:hover { transform: translateY(-4px); }
.mo-ncard:hover::after { opacity: 1; animation: arx-beam-spin 3.5s linear infinite; }
.mo-ncard__ico { transition: transform .35s var(--arx-ease); }
.mo-ncard:hover .mo-ncard__ico { transform: scale(1.08); }
.mo-ncard__in { position: relative; height: 100%; border-radius: 10px; overflow: hidden; background: #1b1b1b; }
.mo-ncard__ico { position: absolute; left: 26px; top: 45px; height: 44px; max-width: none; }
.mo-ncard h3 {
  position: absolute; left: 24px; right: 24px; top: 119px;
  font-size: 24px; line-height: 28px; font-weight: var(--fw-semibold); color: var(--arx-white);
}
.mo-ncard p { position: absolute; left: 24px; right: 24px; font-size: 14px; line-height: 18px; color: rgba(255,255,255,.6); }
.mo-ncard--1l p { top: 167px; }
.mo-ncard--2l p { top: 195px; }
.mo-ncard__link {
  position: absolute; left: 25px; top: 277px;
  width: 30px; height: 28px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.4); background: rgba(72,72,72,.2);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s var(--arx-ease), border-color .25s var(--arx-ease);
}
.mo-ncard:hover .mo-ncard__link {
  background: var(--arx-blue); border-color: var(--arx-blue);
  transform: translate(2px, -2px); box-shadow: 0 4px 18px -6px rgba(21,116,255,.6);
}
.mo-ncard__link img { width: 8px; height: 8px; max-width: none; transition: transform .25s var(--arx-ease); }
.mo-ncard:hover .mo-ncard__link img { transform: translate(1px, -1px); }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .mo-scard { opacity: 1; transform: none; transition: none; }
  .mo-ncard:hover::after { animation: none; opacity: .5; }
}

/* ---- feixe no hover dos boxes de solução e das linhas do resultado ---- */
.mo-card::after, .mo-row::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--arx-beam),
    transparent 0deg, transparent 78%,
    rgba(88,150,255,.55) 88%, rgba(160,200,255,.85) 92%, rgba(88,150,255,.55) 96%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--arx-ease); pointer-events: none; z-index: 2;
}
.mo-card:hover::after, .mo-row:hover::after { opacity: 1; animation: arx-beam-spin 3.5s linear infinite; }
.mo-card { box-shadow: 0 0 0 0 rgba(21,116,255,0); }
.mo-card:hover { box-shadow: 0 16px 44px -22px rgba(21,116,255,.5); }
.mo-card__ico { transition: transform .35s var(--arx-ease); }
.mo-card:hover .mo-card__ico { transform: scale(1.08); }
.mo-row__in img { transition: transform .35s var(--arx-ease); }
.mo-row:hover .mo-row__in img { transform: scale(1.12); }
html.arx-anim .mo-ask__panel[data-reveal] {
  transition: opacity .7s var(--arx-ease), transform .7s var(--arx-ease), box-shadow .4s var(--arx-ease);
}
.mo-ask__panel { transition: box-shadow .4s var(--arx-ease); }
.mo-ask__panel:hover { box-shadow: 0 0 60px -20px rgba(21,116,255,.45); }

@media (prefers-reduced-motion: reduce) {
  .mo-card:hover::after, .mo-row:hover::after { animation: none; opacity: .5; }
}

/* ============================================================
   Em um dia qualquer — linha de quatro momentos.
   Substitui o carrossel da História: a leitura é de uma vez só,
   sem esconder três quartos do conteúdo atrás de setas.
   ============================================================ */
.mo-dia { padding-block: 96px; position: relative; overflow-x: clip; }
.mo-dia__head { max-width: 720px; }
.mo-dia__h2 {
  font-size: 40px; line-height: 46px;
  font-weight: var(--fw-regular); color: var(--arx-white);
}
.mo-dia__sub { margin-top: 14px; font-size: 16px; line-height: 24px; color: var(--arx-grey-90); }

.mo-dia__linha {
  /* --vao vive aqui porque a seta entre os cards se posiciona a partir dele:
     mudar o vão sem mexer na seta a deixaria fora do meio. */
  --vao: 32px;
  margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vao);
}
.mo-dia__passo {
  --recuo: 28px;
  position: relative; display: flex; flex-direction: column;
  padding: 32px var(--recuo) 34px; border-radius: 18px;
  background: rgba(255,255,255,.022);
  transition: transform .35s var(--arx-ease), border-color .35s var(--arx-ease),
              background-color .35s var(--arx-ease);
}
.mo-dia__passo:hover {
  transform: translateY(-6px); border-color: rgba(21,116,255,.55); background: rgba(21,116,255,.05);
}
/* Seta no vão, na altura da arte — mesma receita dos cards da home.
   Ancorada na própria ilustração, não num top fixo: a arte é 16:11 fluida,
   então metade da altura só se acerta com 50% dela. left = recuo do card (26)
   + metade do vão (13), com meia seta de correção. */
.mo-dia__passo + .mo-dia__passo .mo-dia__arte::before {
  content: ""; position: absolute; top: 50%;
  /* recuo do card + metade do vão + meia seta: o cálculo acompanha os dois */
  left: calc(-1 * (var(--recuo) + var(--vao) / 2 + 7px));
  width: 14px; height: 14px; margin-top: -7px;
  border-top: 1.5px solid rgba(21,116,255,.5);
  border-right: 1.5px solid rgba(21,116,255,.5); transform: rotate(45deg);
}
.mo-dia__arte { position: relative; }
.mo-dia__hora {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 22px; line-height: 26px; letter-spacing: -.4px;
  font-weight: var(--fw-semibold); color: var(--arx-blue);
  font-variant-numeric: tabular-nums;
}
.mo-dia__relogio { flex: none; width: 24px; height: 24px; max-width: none; opacity: .8; }
/* Sem caixa atrás: a cena assenta direto no card.
   As ilustrações vêm do handoff (viewBox 320x220, 16:11) e são transparentes —
   a superfície é o próprio card. O handoff pede largura renderizada >= 240px,
   senão os traços finos fecham; a coluna entrega ~280px em 1440. */
.mo-dia__arte {
  margin: 26px 0 0; display: block;
}
.arx-ilustracao svg { display: block; width: 100%; height: auto; }
/* SMIL herda a cor declarada no próprio SVG (#1574FF/#2A4A85/#16274A);
   currentColor aqui serve só ao que ainda usa stroke="currentColor". */
.mo-dia__cena { width: 166px; height: 116px; max-width: none; color: var(--arx-blue-border); }
.mo-dia__titulo {
  margin-top: 26px; font-size: 16px; line-height: 23px;
  font-weight: var(--fw-semibold); color: var(--arx-white);
}
.mo-dia__desc { margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--arx-grey-70); }

html.arx-anim .mo-dia__passo {
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s var(--arx-ease), transform .55s var(--arx-ease),
              border-color .35s var(--arx-ease), background-color .35s var(--arx-ease);
  transition-delay: calc(var(--i, 0) * 100ms);
}
html.arx-anim .mo-dia__linha.is-revealed .mo-dia__passo { opacity: 1; transform: none; }
html.arx-anim .mo-dia__linha.is-revealed .mo-dia__passo:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  html.arx-anim .mo-dia__passo { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   O que isso causa ao seu negócio — rosca + cinco impactos
   ============================================================ */
.mo-imp { padding-block: 96px; position: relative; overflow-x: clip; }
.mo-imp__head { max-width: 720px; }
.mo-imp__h2 { font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.mo-imp__sub { margin-top: 14px; font-size: 16px; line-height: 24px; color: var(--arx-grey-90); }

.mo-imp__grid {
  margin-top: 64px; display: grid; grid-template-columns: 296px 1fr; gap: 32px; align-items: stretch;
}
/* quadro da rosca: mesmo cartão dos impactos, para a fileira ler como uma coisa só */
.mo-imp__quadro {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 34px 26px; border-radius: 18px;
  background: rgba(255,255,255,.022);
}
.mo-imp__grafico { position: relative; width: 180px; height: 180px; }
.mo-imp__rosca { width: 100%; height: 100%; max-width: none; }
.mo-imp__centro {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 12px; line-height: 16px; color: var(--arx-grey-90);
}
.mo-imp__legenda { margin-top: 28px; width: 100%; list-style: none; padding: 0; }
.mo-imp__legenda li {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; line-height: 26px; color: var(--arx-grey-90);
}
.mo-imp__legenda b { margin-left: auto; font-weight: var(--fw-semibold); color: var(--arx-white); }
.mo-imp__legenda i { flex: none; width: 9px; height: 9px; border-radius: 50%; }

.mo-imp__cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.mo-imp__card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 34px 22px 30px; border-radius: 18px;
  background: rgba(255,255,255,.022);
  transition: transform .35s var(--arx-ease), border-color .35s var(--arx-ease),
              background-color .35s var(--arx-ease);
}
.mo-imp__card:hover { transform: translateY(-6px); border-color: rgba(21,116,255,.55); background: rgba(21,116,255,.05); }
/* anel da casa, no tamanho menor */
.mo-imp__anel {
  position: relative; display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  background:
    radial-gradient(72% 72% at 50% 18%, rgba(255,255,255,.055), transparent 62%),
    rgba(24,24,24,.2);
}
.mo-imp__anel::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1px;
  background: linear-gradient(100deg, var(--arx-blue) 0%, var(--arx-blue) 35%,
    color-mix(in srgb, var(--arx-blue) 30%, #181818) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
/* o anel de 62px não muda: cresce só o desenho */
.mo-imp__ico { width: 38px; height: 38px; color: var(--arx-blue); }
.mo-imp__nome {
  margin-top: 16px; font-size: 15px; line-height: 21px;
  font-weight: var(--fw-semibold); color: var(--arx-white);
}
.mo-imp__desc { margin-top: 10px; flex: 1; font-size: 12.5px; line-height: 18px; color: var(--arx-grey-70); }
.mo-imp__pct {
  margin-top: 16px; font-size: 26px; line-height: 30px;
  font-weight: var(--fw-semibold); color: var(--arx-blue);
  font-variant-numeric: tabular-nums;
}

html.arx-anim .mo-imp__card {
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s var(--arx-ease), transform .55s var(--arx-ease),
              border-color .35s var(--arx-ease), background-color .35s var(--arx-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.arx-anim .mo-imp__grid.is-revealed .mo-imp__card { opacity: 1; transform: none; }
html.arx-anim .mo-imp__grid.is-revealed .mo-imp__card:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  html.arx-anim .mo-imp__card { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Como a ARX resolveria — quatro etapas com o selo Civitas.
   O anel usa pathLength=100, então o traço é porcentagem e o
   tamanho do selo pode mudar sem recalcular nada.
   ============================================================ */
.mo-como { padding-block: 96px; position: relative; overflow-x: clip; }
.mo-como__head { max-width: 720px; }
.mo-como__h2 { font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.mo-como__h2 b { color: var(--arx-blue); font-weight: var(--fw-extrabold); }
.mo-como__sub { margin-top: 14px; font-size: 16px; line-height: 24px; color: var(--arx-grey-90); }

.mo-como__grid {
  /* Conector por aproximação NA LARGURA CHEIA do box: com colunas iguais ao
     selo, o encaixe pede vão = 0,0548·selo; para preencher os 1392px do
     container (1440 de conteúdo) isso dá selo 345,8 e vão 18,9 — a última
     bolinha de um anel continua a exatamente um passo (~26px) da primeira do
     vizinho. */
  --selo: 345.8px; --vao: 18.9px;
  position: relative; margin-top: 72px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vao);
}
/* Três faixas por etapa: texto em cima, selo no meio, texto embaixo. As faixas
   de texto são 1fr iguais, então o selo fica sempre no centro vertical — é o
   que mantém os quatro círculos alinhados com o texto trocando de lado. */
.mo-como__etapa {
  position: relative;
  display: grid; grid-template-rows: 1fr var(--selo) 1fr;
  justify-items: center; text-align: center;
}
.mo-como__texto { max-width: 306px; }
.mo-como__etapa[data-lado="cima"]  .mo-como__texto { grid-row: 1; align-self: end;   padding-bottom: 40px; }
.mo-como__etapa[data-lado="baixo"] .mo-como__texto { grid-row: 3; align-self: start; padding-top: 40px; }

/* Nó de conexão: as trilhas param um passo antes do equador e um ponto MAIOR
   no meio do vão emenda as duas — a bolinha que saiu de cada lado virou ele.
   Fica a ~30px das pontas novas, praticamente o passo da corrente. */
.mo-como__etapa + .mo-como__etapa::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(var(--vao) / -2); top: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: rgba(255,255,255,.6);
  box-shadow: 0 0 10px rgba(255,255,255,.3);
}
.mo-como__num {
  display: block; font-size: 15px; line-height: 20px; letter-spacing: .7px;
  text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--arx-blue);
}
.mo-como__desc { margin-top: 14px; font-size: 15.5px; line-height: 23px; color: var(--arx-grey-70); }

/* ── O selo ──
   Anel pontilhado dá a volta inteira; por cima dele um arco azul grosso cobre
   pouco mais da metade. O arco alterna de lado — topo, base, topo, base — e é
   isso que faz a fileira ler como uma onda contínua. pathLength=100 mantém o
   traço em porcentagem, então mudar o tamanho do selo não recalcula nada. */
.mo-como__selo { position: relative; grid-row: 2; z-index: 1; width: var(--selo); height: var(--selo); }
.mo-como__anel { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.mo-como__anel circle, .mo-como__anel path { fill: none; }
.mo-como__anel-base {
  /* U pontilhado de 200° abraçando o círculo por fora (r=49), com as pontas
     10° além do equador; invertido nos selos de arco embaixo. É a alternância
     desses "abraços" que desenha a onda — o path já vem orientado do HTML. */
  stroke: rgba(255,255,255,.5); stroke-width: 2.1; stroke-linecap: round;
  stroke-dasharray: .1 33.23;   /* 4 bolinhas por trilha, mesmo passo de 25,9px */
}
.mo-como__anel-arco {
  stroke: var(--arx-blue); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 27 73; stroke-dashoffset: 13.5;   /* ~97°, centrado no ápice */
  filter: drop-shadow(0 0 10px rgba(21,116,255,.5));
}
/* "cima": partida às 12h. "baixo": às 6h — meia volta de diferença. */
.mo-como__etapa[data-arco="cima"]  .mo-como__anel-arco { transform: rotate(-90deg); transform-origin: 50% 50%; }
.mo-como__etapa[data-arco="baixo"] .mo-como__anel-arco { transform: rotate(90deg);  transform-origin: 50% 50%; }

/* a conta no meio do arco, do lado que ele estiver */
.mo-como__selo::before {
  /* z-index acima do SVG: o ::before é o primeiro filho do selo, então sem
     isso o arco pinta por cima e só sobra a franja escura da conta */
  content: ""; position: absolute; z-index: 2; left: 50%; margin-left: -16.5px;
  width: 33px; height: 33px; border-radius: 50%;
  /* alvo, como no recorte do cliente: núcleo azul, anel branco, aro azul */
  /* paradas simples, sem sintaxe dupla — funciona em qualquer navegador */
  background: radial-gradient(circle,
    var(--arx-blue) 4.5px, #fff 4.7px, #fff 9.2px, var(--arx-blue) 9.4px);
  box-shadow: 0 0 0 4px #101114, 0 0 20px rgba(21,116,255,.8);
}
.mo-como__etapa[data-arco="cima"]  .mo-como__selo::before { top: -6.1px; }
.mo-como__etapa[data-arco="baixo"] .mo-como__selo::before { bottom: -6.1px; }

.mo-como__miolo {
  position: absolute; inset: 22px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 36px; text-align: center;
  /* disco visível contra o fundo da página, com luz vinda de cima */
  background:
    radial-gradient(78% 78% at 50% 12%, rgba(255,255,255,.055), transparent 66%),
    #17181c;
}
.mo-como__ico { width: 70px; height: 70px; color: var(--arx-blue-border); }
.mo-como__marca {
  margin-top: 20px; font-size: 19px; letter-spacing: 1.8px;
  text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--arx-white);
}
.mo-como__servico {
  margin-top: 9px; font-size: 15px; line-height: 20px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--arx-grey-90);
}

/* ── Entrada: a corrente se acende da esquerda para a direita ──
   Por etapa: o disco cresce, o arco desenha do ápice para os dois lados, a
   conta salta, as pérolas escorrem pelas laterais e o nó fecha a ligação com
   o vizinho — o nó de cada vão entra exatamente quando as pérolas do selo
   anterior terminam, para a corrente ler como um fio só sendo puxado.
   --t é o intervalo entre selos; todo o resto é offset dentro da etapa. */
html.arx-anim .mo-como__grid { --t: 560ms; }

html.arx-anim .mo-como__texto { opacity: 0; }
html.arx-anim .mo-como__miolo { opacity: 0; }
html.arx-anim .mo-como__anel-arco { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0; }
html.arx-anim .mo-como__anel-base { opacity: 0; }
html.arx-anim .mo-como__selo::before { opacity: 0; }
html.arx-anim .mo-como__etapa + .mo-como__etapa::before { opacity: 0; }

html.arx-anim .mo-como__grid.is-revealed .mo-como__texto {
  animation: mo-txt .55s var(--arx-ease) both;
  animation-delay: calc(var(--i, 0) * var(--t));
}
html.arx-anim .mo-como__grid.is-revealed .mo-como__miolo {
  animation: mo-disco .5s var(--arx-ease) both;
  animation-delay: calc(var(--i, 0) * var(--t) + 40ms);
}
html.arx-anim .mo-como__grid.is-revealed .mo-como__anel-arco {
  animation: mo-arco .62s var(--arx-ease) both;
  animation-delay: calc(var(--i, 0) * var(--t) + 140ms);
}
html.arx-anim .mo-como__grid.is-revealed .mo-como__selo::before {
  animation: mo-conta .44s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc(var(--i, 0) * var(--t) + 560ms);
}
html.arx-anim .mo-como__grid.is-revealed .mo-como__anel-base {
  animation: mo-perolas .52s var(--arx-ease) both;
  animation-delay: calc(var(--i, 0) * var(--t) + 660ms);
}
/* o nó pertence ao vão que ENTRA neste selo: entra quando as pérolas do
   anterior fecham, ou seja (i−1)·t + 1180ms */
html.arx-anim .mo-como__grid.is-revealed .mo-como__etapa + .mo-como__etapa::before {
  animation: mo-no .42s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc((var(--i, 1) - 1) * var(--t) + 1180ms);
}

@keyframes mo-txt    { from { opacity: 0; transform: translateY(18px); }
                       to   { opacity: 1; transform: none; } }
@keyframes mo-disco  { from { opacity: 0; transform: scale(.88); }
                       to   { opacity: 1; transform: none; } }
@keyframes mo-arco   { from { stroke-dasharray: 0 100;  stroke-dashoffset: 0;    opacity: 0; }
                       15%  { opacity: 1; }
                       to   { stroke-dasharray: 27 73;  stroke-dashoffset: 13.5; opacity: 1; } }
@keyframes mo-conta  { from { opacity: 0; transform: scale(0); }
                       to   { opacity: 1; transform: scale(1); } }
@keyframes mo-perolas{ from { opacity: 0; stroke-dashoffset: -33.23; }
                       to   { opacity: 1; stroke-dashoffset: 0; } }
@keyframes mo-no     { from { opacity: 0; transform: scale(0); }
                       to   { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  html.arx-anim .mo-como__texto,
  html.arx-anim .mo-como__miolo,
  html.arx-anim .mo-como__anel-base,
  html.arx-anim .mo-como__selo::before,
  html.arx-anim .mo-como__etapa + .mo-como__etapa::before { opacity: 1; }
  html.arx-anim .mo-como__anel-arco { stroke-dasharray: 27 73; stroke-dashoffset: 13.5; opacity: 1; }
  html.arx-anim .mo-como__grid.is-revealed :is(.mo-como__texto, .mo-como__miolo,
    .mo-como__anel-arco, .mo-como__anel-base) { animation: none; }
  html.arx-anim .mo-como__grid.is-revealed .mo-como__selo::before,
  html.arx-anim .mo-como__grid.is-revealed .mo-como__etapa + .mo-como__etapa::before { animation: none; }
}


/* ── Rosca: desenho animado, rótulo por fatia e vínculo com os cards ── */
.mo-imp__fatia {
  stroke-dasharray: var(--dash) var(--vao);
  transition: opacity .3s var(--arx-ease), stroke-width .3s var(--arx-ease),
              filter .3s var(--arx-ease);
  cursor: pointer;
}
.mo-imp__rotulo {
  font-size: 8.4px; font-weight: 700; letter-spacing: -.2px;
  font-family: var(--ff-body, sans-serif); pointer-events: none;
}

/* desenho: o arco cresce de zero, um depois do outro, e o rótulo entra atrás */
html.arx-anim .mo-imp__fatia { stroke-dasharray: 0 100; }
html.arx-anim .mo-imp__rotulo { opacity: 0; }
html.arx-anim .mo-imp__grid.is-revealed .mo-imp__fatia {
  animation: mo-fatia .9s var(--arx-ease) both;
  animation-delay: calc(var(--i, 0) * 130ms);
}
html.arx-anim .mo-imp__grid.is-revealed .mo-imp__rotulo {
  animation: mo-rotulo .5s var(--arx-ease) both;
  animation-delay: calc(var(--i, 0) * 130ms + 560ms);
}
@keyframes mo-fatia { from { stroke-dasharray: 0 100; } to { stroke-dasharray: var(--dash) var(--vao); } }
@keyframes mo-rotulo { from { opacity: 0; } to { opacity: 1; } }

/* Vínculo card ⇄ fatia. O :has() é o que permite sair da coluna dos cards e
   alcançar o SVG do outro lado da grade — nenhum seletor clássico faz isso.
   Com o mouse em qualquer um dos dois, as outras fatias recuam. */
.mo-imp__grid:has(.mo-imp__card:hover) .mo-imp__fatia,
.mo-imp__grid:has(.mo-imp__fatia:hover) .mo-imp__fatia { opacity: .25; }
.mo-imp__grid:has(.mo-imp__card[data-fatia="financeiro"]:hover) .mo-imp__fatia[data-fatia="financeiro"],
.mo-imp__fatia[data-fatia="financeiro"]:hover,
.mo-imp__grid:has(.mo-imp__card[data-fatia="operacional"]:hover) .mo-imp__fatia[data-fatia="operacional"],
.mo-imp__fatia[data-fatia="operacional"]:hover,
.mo-imp__grid:has(.mo-imp__card[data-fatia="cliente"]:hover) .mo-imp__fatia[data-fatia="cliente"],
.mo-imp__fatia[data-fatia="cliente"]:hover,
.mo-imp__grid:has(.mo-imp__card[data-fatia="reputacao"]:hover) .mo-imp__fatia[data-fatia="reputacao"],
.mo-imp__fatia[data-fatia="reputacao"]:hover,
.mo-imp__grid:has(.mo-imp__card[data-fatia="compliance"]:hover) .mo-imp__fatia[data-fatia="compliance"],
.mo-imp__fatia[data-fatia="compliance"]:hover {
  opacity: 1; stroke-width: 21; filter: drop-shadow(0 0 7px rgba(21,116,255,.55));
}
/* e o caminho de volta: mouse na fatia realça o card e a legenda */
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="financeiro"]:hover) .mo-imp__card[data-fatia="financeiro"],
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="operacional"]:hover) .mo-imp__card[data-fatia="operacional"],
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="cliente"]:hover) .mo-imp__card[data-fatia="cliente"],
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="reputacao"]:hover) .mo-imp__card[data-fatia="reputacao"],
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="compliance"]:hover) .mo-imp__card[data-fatia="compliance"] {
  transform: translateY(-6px); border-color: rgba(21,116,255,.55); background: rgba(21,116,255,.05);
}
.mo-imp__grid:has(.mo-imp__card[data-fatia="financeiro"]:hover) .mo-imp__legenda li[data-fatia="financeiro"],
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="financeiro"]:hover) .mo-imp__legenda li[data-fatia="financeiro"],
.mo-imp__grid:has(.mo-imp__card[data-fatia="operacional"]:hover) .mo-imp__legenda li[data-fatia="operacional"],
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="operacional"]:hover) .mo-imp__legenda li[data-fatia="operacional"],
.mo-imp__grid:has(.mo-imp__card[data-fatia="cliente"]:hover) .mo-imp__legenda li[data-fatia="cliente"],
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="cliente"]:hover) .mo-imp__legenda li[data-fatia="cliente"],
.mo-imp__grid:has(.mo-imp__card[data-fatia="reputacao"]:hover) .mo-imp__legenda li[data-fatia="reputacao"],
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="reputacao"]:hover) .mo-imp__legenda li[data-fatia="reputacao"],
.mo-imp__grid:has(.mo-imp__card[data-fatia="compliance"]:hover) .mo-imp__legenda li[data-fatia="compliance"],
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="compliance"]:hover) .mo-imp__legenda li[data-fatia="compliance"] { color: var(--arx-white); }

.mo-imp__legenda li[data-fatia="financeiro"] i { background: #1574ff; }
.mo-imp__legenda li[data-fatia="operacional"] i { background: #3d8bff; }
.mo-imp__legenda li[data-fatia="cliente"] i { background: #67a6ff; }
.mo-imp__legenda li[data-fatia="reputacao"] i { background: #93c1ff; }
.mo-imp__legenda li[data-fatia="compliance"] i { background: #c2ddff; }
.mo-imp__legenda li { transition: color .25s var(--arx-ease); }

@media (prefers-reduced-motion: reduce) {
  html.arx-anim .mo-imp__fatia { stroke-dasharray: var(--dash) var(--vao); }
  html.arx-anim .mo-imp__rotulo { opacity: 1; }
  html.arx-anim .mo-imp__grid.is-revealed .mo-imp__fatia,
  html.arx-anim .mo-imp__grid.is-revealed .mo-imp__rotulo { animation: none; }
}


/* o aro e o feixe vêm de .arx-caixa (base.css) — aqui fica só o que é
   próprio desta página */
/* o feixe acompanha o vínculo: fatia em hover acende o aro do card também */
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="financeiro"]:hover) .mo-imp__card[data-fatia="financeiro"]::after,
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="operacional"]:hover) .mo-imp__card[data-fatia="operacional"]::after,
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="cliente"]:hover) .mo-imp__card[data-fatia="cliente"]::after,
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="reputacao"]:hover) .mo-imp__card[data-fatia="reputacao"]::after,
.mo-imp__grid:has(.mo-imp__fatia[data-fatia="compliance"]:hover) .mo-imp__card[data-fatia="compliance"]::after {
  opacity: 1; animation: arx-beam-spin 3.5s linear infinite;
}


/* citação de cada momento e o remate da missão 05 */
.mo-dia__frase {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13px; line-height: 19px; font-style: italic; color: var(--arx-blue-border);
}
.mo-dia__remate {
  margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 26px 34px; border-radius: 18px;
  background: rgba(255,255,255,.022);
  text-align: center;
}
.mo-dia__remate-ico { flex: none; width: 34px; height: 34px; color: var(--arx-blue); }
.mo-dia__remate p { font-size: 15.5px; line-height: 23px; color: var(--arx-grey-90); }
.mo-dia__remate b { color: var(--arx-blue-border); font-weight: var(--fw-semibold); }