/* ============================================================
   FLASH — Sistema de Aceleração  (seção #mecanismo)

   Substitui o funil de chevrons por uma composição de sistema: um
   núcleo PACE ao centro, as 10 frentes como nós ao redor e fios SVG
   ligando cada nó ao núcleo.

   Por que assim: o funil dizia "dez etapas em fila". A leitura que a
   seção precisa dar e "dez frentes alimentando um mesmo motor" -- e
   isso e uma questao de topologia, nao de estilo. Enquanto os itens
   estiverem lado a lado numa grade, qualquer tratamento visual continua
   lendo como lista de servicos.

   O React nao e tocado: o JS esconde o conteudo antigo do .container e
   pendura este componente ao lado.
   ============================================================ */

/* -------- o conteudo antigo sai, o nosso fica ------------------- */
/* A regra mira os filhos diretos do container: se o React reconciliar
   a arvore dele, o que voltar continua escondido sem precisar de JS. */
#allomni-root #mecanismo .container > *:not(.sysx) { display: none !important; }
#allomni-root #mecanismo .container { max-width: 1280px; }

.sysx {
  --sysx-azul: #1F6FFF;
  --sysx-azul-claro: #4D8FFF;
  --sysx-ciano: #4FD8FF;
  --sysx-titulo: #EEF3FA;
  --sysx-corpo: #C2CCDA;
  --sysx-fio: rgba(120, 150, 200, .30);
  --sysx-borda: rgba(140, 170, 220, .16);
  --sysx-chapa: rgba(12, 18, 32, .72);

  position: relative;
  color: var(--sysx-corpo);
}

/* ------------------------- cabecalho ---------------------------- */
.sysx__head { max-width: 720px; margin: 0 auto clamp(28px, 4vh, 52px); text-align: center; }
.sysx__eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sysx-azul-claro);
}
.sysx__eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 22px; height: 1px; margin-right: 10px;
  background: linear-gradient(90deg, transparent, var(--sysx-azul-claro));
}
.sysx__title {
  margin: 0 0 14px; color: var(--sysx-titulo);
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.02em;
}
.sysx__sub {
  margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6;
  text-wrap: balance;
}

/* ===================== PALCO (desktop) ========================== */
.sysx__stage {
  position: relative;
  width: 100%; max-width: 1120px; margin: 0 auto;
  aspect-ratio: 1120 / 600;
}

/* --- fios ------------------------------------------------------- */
/* preserveAspectRatio="none" faz a geometria acompanhar a mesma grade
   percentual dos nos, entao a ponta do fio nunca desencontra do chip.
   O preco seria a espessura esticar junto -- o vector-effect no path
   resolve isso. */
.sysx__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sysx__link {
  fill: none; stroke: var(--sysx-fio); stroke-width: 1.15;
  transition: stroke .3s ease, stroke-width .3s ease;
}
.sysx__link--on { stroke: var(--sysx-azul-claro); stroke-width: 1.9; }
/* o rastro e um tracejado longo correndo pelo fio: como e traco, ele
   acompanha o vector-effect e nao vira elipse quando o palco estica */
.sysx__spark {
  fill: none; stroke: var(--sysx-ciano); stroke-width: 2.2; stroke-linecap: round;
  opacity: 0;
}
.sysx__spark--on { opacity: .95; animation: sysx-correr 1.5s linear infinite; }
@keyframes sysx-correr { to { stroke-dashoffset: 0; } }

/* --- nucleo ----------------------------------------------------- */
.sysx__core {
  position: absolute; left: 49%; top: 49%; transform: translate(-50%, -50%);
  width: clamp(126px, 13.4%, 168px); aspect-ratio: 1;
  display: grid; place-content: center; gap: 4px; text-align: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(31, 111, 255, .30), rgba(8, 14, 28, .92) 70%);
  box-shadow: 0 0 0 1px rgba(120, 160, 235, .28), 0 0 44px rgba(31, 111, 255, .22);
}
.sysx__core-k {
  font-size: clamp(19px, 2vw, 27px); font-weight: 700; letter-spacing: .12em;
  color: #fff;
}
.sysx__core-l {
  font-size: clamp(8.5px, .78vw, 10px); letter-spacing: .13em; text-transform: uppercase;
  color: rgba(200, 216, 240, .72); line-height: 1.35; max-width: 12ch; margin: 0 auto;
}
/* anel girando devagar: e o unico movimento permanente do palco */
.sysx__ring {
  position: absolute; inset: -9%;
  border-radius: 50%; pointer-events: none;
  border: 1px dashed rgba(120, 160, 235, .26);
  animation: sysx-girar 46s linear infinite;
}
@keyframes sysx-girar { to { transform: rotate(360deg); } }

/* --- rotulos dos pilares ---------------------------------------- */
.sysx__pilar {
  position: absolute; transform: translate(-50%, -50%);
  font-size: clamp(9px, .82vw, 11px); letter-spacing: .17em; text-transform: uppercase;
  color: rgba(150, 172, 205, .58); white-space: nowrap; pointer-events: none;
}
.sysx__pilar b {
  display: inline-block; margin-right: 7px; font-weight: 700;
  color: var(--sysx-azul-claro);
}

/* --- nos -------------------------------------------------------- */
.sysx__node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px 9px 11px;
  font: inherit; text-align: left; cursor: pointer;
  color: var(--sysx-titulo);
  background: var(--sysx-chapa);
  border: 1px solid var(--sysx-borda);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: border-color .25s ease, background .25s ease,
              opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sysx__node-n {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: rgba(160, 182, 214, .8);
  transition: color .25s ease;
}
.sysx__node-t {
  font-size: clamp(11px, 1.02vw, 13.5px); font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
}
.sysx__node:hover,
.sysx__node:focus-visible {
  border-color: rgba(77, 143, 255, .55);
  transform: translate(-50%, -50%) scale(1.04);
}
.sysx__node:focus-visible { outline: 2px solid var(--sysx-ciano); outline-offset: 3px; }
.sysx__node[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(31, 111, 255, .30), rgba(10, 18, 36, .86));
  border-color: rgba(120, 175, 255, .72);
  box-shadow: 0 0 26px rgba(31, 111, 255, .26);
  transform: translate(-50%, -50%) scale(1.06);
}
.sysx__node[aria-pressed="true"] .sysx__node-n { color: var(--sysx-ciano); }
/* enquanto um no esta ativo, os outros recuam -- sem sumir */
.sysx__stage.is-focado .sysx__node:not([aria-pressed="true"]) { opacity: .48; }

/* ====================== PAINEL DE DETALHE ======================= */
.sysx__panel {
  position: relative;
  max-width: 1120px; margin: clamp(30px, 4.4vh, 56px) auto 0;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 52px);
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.8vw, 38px);
  border: 1px solid var(--sysx-borda); border-radius: 18px;
  background: linear-gradient(180deg, rgba(14, 21, 38, .74), rgba(9, 13, 24, .58));
}
/* o tracinho no topo desliza ate a coluna do no ativo: e o que amarra
   o painel ao palco em vez de virar um bloco solto embaixo */
.sysx__seta {
  position: absolute; top: -1px; width: 46px; height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--sysx-azul-claro), transparent);
  transition: left .45s cubic-bezier(.4, 0, .2, 1);
}
.sysx__etapa {
  display: inline-block; margin-bottom: 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sysx-azul-claro);
}
.sysx__panel h3 {
  margin: 0 0 12px; color: var(--sysx-titulo);
  font-size: clamp(21px, 2.2vw, 28px); line-height: 1.14; letter-spacing: -.01em;
}
.sysx__panel p { margin: 0; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.62; max-width: 54ch; }
.sysx__tools-lbl {
  display: block; margin-bottom: 13px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(150, 172, 205, .62);
}
.sysx__tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sysx__tools li {
  padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; color: var(--sysx-corpo);
  border: 1px solid rgba(140, 170, 220, .18);
  background: rgba(120, 160, 220, .06);
}
/* troca de etapa: o conteudo entra, nao pisca */
.sysx__fade { animation: sysx-entrar .42s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes sysx-entrar {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* ==================== ÍNDICE DO SISTEMA ========================= */
/* O painel mostra uma frente por vez; este bloco mostra as dez juntas,
   para quem quer a visao geral sem ter que clicar em cada no.
   Nao e um grid de cards solto: cada ficha comanda o no la em cima e
   reflete qual esta ativo, entao continua sendo o mesmo componente. */
.sysx__indice {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  max-width: 1120px; margin: clamp(16px, 2vh, 26px) auto 0;
}
.sysx__ficha {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 15px 15px 17px;
  font: inherit; text-align: left; cursor: pointer;
  border: 1px solid rgba(140, 170, 220, .12); border-radius: 13px;
  background: rgba(120, 160, 220, .035);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.sysx__ficha:hover { border-color: rgba(77, 143, 255, .4); background: rgba(31, 111, 255, .07); }
.sysx__ficha:focus-visible { outline: 2px solid var(--sysx-ciano); outline-offset: 2px; }
.sysx__ficha-n {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  color: rgba(150, 172, 205, .6);
  transition: color .25s ease;
}
.sysx__ficha-t {
  font-size: 13.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sysx-titulo);
}
.sysx__ficha-d { font-size: 12.5px; line-height: 1.5; color: rgba(194, 204, 218, .78); margin: 0; }
.sysx__ficha[aria-pressed="true"] {
  border-color: rgba(120, 175, 255, .6);
  background: linear-gradient(180deg, rgba(31, 111, 255, .16), rgba(120, 160, 220, .03));
}
.sysx__ficha[aria-pressed="true"] .sysx__ficha-n { color: var(--sysx-ciano); }

/* ====================== ESPINHA (mobile) ======================== */
/* centrada e com largura de leitura: em tablet a espinha ocupando os
   980px inteiros viraria uma fileira de rotulos perdidos no vazio */
.sysx__spine {
  list-style: none; margin: 0 auto; padding: 0; position: relative;
  max-width: 620px;
}
/* o fio continuo atras dos nos: e ele que diz "isto e um sistema", nao
   uma pilha de cards */
.sysx__spine::before {
  content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px;
  width: 1px; background: linear-gradient(180deg,
    transparent, var(--sysx-fio) 8%, var(--sysx-fio) 92%, transparent);
}
.sysx__step { position: relative; }
.sysx__trigger {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 10px 12px 10px 0;
  font: inherit; text-align: left; color: var(--sysx-titulo);
  background: none; border: 0; cursor: pointer;
}
.sysx__bolha {
  flex: 0 0 auto; width: 31px; height: 31px; border-radius: 50%;
  display: grid; place-content: center;
  font-size: 10.5px; font-weight: 700;
  color: rgba(170, 192, 224, .9);
  background: #0B1120;
  border: 1px solid var(--sysx-borda);
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease, background .25s ease;
}
.sysx__rotulo { font-size: 14.5px; font-weight: 600; letter-spacing: .01em; }
.sysx__pilar-tag {
  margin-left: auto; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(150, 172, 205, .5);
}
.sysx__mais {
  flex: 0 0 auto; width: 11px; height: 11px; margin-left: 10px;
  border-right: 1.5px solid rgba(150, 172, 205, .6);
  border-bottom: 1.5px solid rgba(150, 172, 205, .6);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s ease, border-color .3s ease;
}
.sysx__step.is-aberto .sysx__bolha {
  color: #fff; border-color: rgba(120, 175, 255, .8);
  background: linear-gradient(180deg, rgba(31, 111, 255, .55), rgba(10, 18, 36, .9));
  box-shadow: 0 0 18px rgba(31, 111, 255, .3);
}
.sysx__step.is-aberto .sysx__mais {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--sysx-azul-claro);
}
.sysx__trigger:focus-visible { outline: 2px solid var(--sysx-ciano); outline-offset: -2px; border-radius: 10px; }

.sysx__drop { overflow: hidden; height: 0; transition: height .34s cubic-bezier(.4, 0, .2, 1); }
.sysx__drop-in { padding: 2px 4px 18px 43px; }
.sysx__drop p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; }
.sysx__drop .sysx__tools li { font-size: 12px; padding: 5px 10px; }
.sysx__step + .sysx__step .sysx__trigger { border-top: 1px solid rgba(140, 170, 220, .10); }

/* =========================== TROCA ============================== */
/* Uma composicao espacial nao cabe em 390px sem virar ilegivel, e a
   espinha em 1440 seria uma lista magra no meio da tela. Sao dois
   desenhos, nao um comprimido. O JS marca qual esta em uso. */
.sysx__spine, .sysx__stage { display: none; }
.sysx[data-modo="palco"] .sysx__stage { display: block; }
.sysx[data-modo="espinha"] .sysx__spine { display: block; }
.sysx[data-modo="espinha"] .sysx__panel { display: none; }
/* na espinha o indice seria a mesma informacao duas vezes: a propria
   espinha ja lista as dez frentes e abre a descricao de cada uma */
.sysx[data-modo="espinha"] .sysx__indice { display: none; }

/* --------------------------- ajustes ---------------------------- */
@media (max-width: 1180px) {
  .sysx__node { padding: 8px 12px 8px 10px; gap: 7px; }
  /* cinco colunas so cabem no palco largo. Duas -- e nao tres -- porque
     com dez fichas as tres deixariam uma orfa sozinha na ultima linha */
  .sysx__indice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sysx__panel { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .sysx__head { margin-bottom: 26px; }
  .sysx__drop-in { padding-left: 43px; padding-bottom: 16px; }
  .sysx__pilar-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sysx__ring { animation: none; }
  .sysx__spark--on { animation: none; opacity: .55; stroke-dasharray: none; }
  .sysx__fade { animation: none; }
  .sysx__drop { transition: none; }
  .sysx__node, .sysx__link, .sysx__bolha, .sysx__mais, .sysx__seta { transition: none; }
}