/* Development Inovation Growth — "Tecnologias que usamos" na página inicial (dentro do .stack)
   Órbita: anéis inclinados com os logos e os nomes girando em volta de "Inovação" (a pá do logo é o I). Ao escolher uma categoria,
   os logos dela se juntam numa grade com todos os itens; o resto esmaece.
   O movimento é todo do assets/orbita.js (giro com requestAnimationFrame só com o bloco na tela; voo com a
   técnica FLIP, só transform e opacity). Sem JS fica a lista em grade, por categoria.
   Classes com prefixo orbita__. Pontos de quebra (os mesmos do JS):
   - de 1000 px para cima: a grade da categoria se forma no centro da órbita e os botões ficam embaixo;
   - até 999 px: logos sem nome na órbita (o nome aparece no mouse) e a grade fica embaixo dos botões;
   - até 760 px: órbita menor, com 2 anéis. */

/* ---------- Pílula: a mesma na órbita e na grade (o voo troca uma pela outra sem emenda) ---------- */
.orbita__lista li,
.orbita__pilula {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 14px 6px 10px;
  border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-dark);
  font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: rgba(255, 255, 255, .88);
}
.orbita__lista svg,
.orbita__pilula svg { width: 18px; height: 18px; flex: none; } /* os logos largos (AWS, Oracle, .NET) mantêm a medida do style */
.orbita__img { width: 18px; height: 18px; flex: none; border-radius: 22.37%; pointer-events: none; }
.orbita__so-logo,
.orbita__lista li.orbita__so-logo { padding-inline: 14px; }

/* ---------- Sem JS: a lista inteira, um grupo por linha (no celular, o nome em cima) ---------- */
.orbita { position: relative; }
.orbita__grupos { display: grid; gap: 26px; }
.orbita__grupo { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.orbita__grupo-nome { margin: 0; padding-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--roxo); }
.orbita__grupo-n { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .12em; color: var(--muted-on-dark); }
.orbita__lista { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
  .orbita__grupo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .orbita__lista li { font-size: 13px; }
}

/* ---------- Com JS ---------- */
.orbita.is-pronta { display: grid; grid-template-areas: "palco" "controles"; }
.orbita.is-pronta .orbita__palco,
.orbita.is-pronta .orbita__grupos { grid-area: palco; min-width: 0; }
.orbita.is-pronta .orbita__controles { grid-area: controles; }

/* Palco da órbita (decorativo). Os anéis e as pílulas são posicionados pelo JS */
.orbita__palco {
  position: relative; z-index: 1; min-height: clamp(500px, 48vw, 580px);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.orbita__brilho {
  position: absolute; left: 50%; top: 50%; width: 560px; height: 320px; margin: -160px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 85, 247, .22), rgba(168, 85, 247, .07) 55%, transparent);
  pointer-events: none; transition: opacity .4s;
}
/* Anéis inclinados: a parte de trás (em cima) mais apagada que a da frente */
.orbita__anel {
  position: absolute; left: 50%; top: 50%; width: 200px; height: 100px; transform: translate(-50%, -50%);
  border: 1px solid rgba(168, 85, 247, .34); border-radius: 50%; pointer-events: none; transition: opacity .4s;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3), #000 75%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3), #000 75%);
}
.orbita__anel--2 { border-style: dashed; border-color: rgba(255, 255, 255, .16); }
.orbita__anel--3 { border-color: rgba(168, 85, 247, .24); }

/* Centro: "Inovação" com a pá do logo no lugar do I; a pá é maior que as letras (1.15em) e desce um pouco abaixo da linha */
.orbita__centro {
  position: absolute; left: 50%; top: 50%; z-index: 0; display: flex; align-items: center; gap: 14px;
  transform: translate(-50%, -50%); pointer-events: none; transition: opacity .35s, transform .35s;
}
.orbita__inovacao { margin: 0; font-size: clamp(30px, 2.7vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--branco); white-space: nowrap; }
.orbita__pa { display: inline-block; width: auto; height: 1.15em; margin-right: .07em; vertical-align: -.08em; filter: drop-shadow(0 0 .32em rgba(168, 85, 247, .5)); }

/* Itens que giram: o .orbita__no leva a posição (JS); a .orbita__pilula leva o destaque e o esmaecer (CSS) */
.orbita__no { position: absolute; left: 0; top: 0; will-change: transform, opacity; cursor: pointer; }
.orbita__pilula {
  position: relative; white-space: nowrap; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9);
  transition: transform .25s ease, background-color .2s, border-color .2s, color .2s, box-shadow .25s, opacity .45s;
}
.orbita__no.is-destaque .orbita__pilula {
  transform: scale(1.14); background: var(--bg-3); border-color: var(--roxo); color: var(--branco);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, .18), 0 14px 30px -12px rgba(168, 85, 247, .55);
}
/* Categoria aberta: a órbita para e esmaece; os itens da categoria "voaram" para a grade */
.orbita__palco.is-focada .orbita__pilula { opacity: .04; }
.orbita__palco.is-focada .orbita__no { pointer-events: none; }
.orbita__palco.is-focada .orbita__anel { opacity: .35; }
.orbita__palco .orbita__no.is-voando .orbita__pilula { opacity: 0; transition: none; }

/* Grade da categoria escolhida: todos os grupos no mesmo lugar; só o ativo aparece */
.orbita.is-pronta .orbita__grupos { position: relative; z-index: 2; display: grid; place-items: center; gap: 0; padding-block: 28px; pointer-events: none; }
.orbita.is-pronta .orbita__grupo { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; visibility: hidden; }
.orbita.is-pronta .orbita__grupo.is-ativo { visibility: visible; pointer-events: auto; }
.orbita.is-pronta .orbita__grupo.is-saindo { pointer-events: none; }
.orbita.is-pronta .orbita__grupo-nome { padding: 0; text-align: center; transition: opacity .25s; }
.orbita.is-pronta .orbita__grupo-n { display: inline; margin: 0 0 0 10px; }
.orbita.is-pronta .orbita__grupo.is-ativo:not(.is-saindo) .orbita__grupo-nome { animation: orbita-surge .45s .12s both; }
.orbita.is-pronta .orbita__grupo.is-saindo .orbita__grupo-nome { opacity: 0; }
.orbita.is-pronta .orbita__lista {
  --orbita-colunas: 6;
  display: grid; grid-template-columns: repeat(var(--orbita-colunas), minmax(0, 1fr)); justify-items: start; gap: 10px;
  width: 100%;
}
.orbita.is-pronta .orbita__lista li { max-width: 100%; transition: border-color .2s, color .2s; }
@media (hover: hover) { .orbita.is-pronta .orbita__lista li:hover { border-color: rgba(168, 85, 247, .7); color: var(--branco); } }

/* Botões das categorias */
.orbita__controles { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; }
/* Os botões de categoria saíram da vista (pedido do dono): com mouse ou toque, clicar num logo da órbita abre a
   categoria dele. Para teclado e leitor de tela os botões continuam no lugar e aparecem quando recebem foco. */
.orbita.is-pronta .orbita__controles:not(:focus-within) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.orbita__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.orbita__cat {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 16px; border-radius: 999px;
  border: 1px solid var(--line-dark); background: transparent; color: var(--muted-on-dark);
  font-size: 14px; font-weight: 600; line-height: 1.2; transition: background-color .2s, border-color .2s, color .2s;
}
.orbita__cat-n {
  min-width: 28px; height: 24px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .08);
  font-size: 12px; font-weight: 700; line-height: 24px; text-align: center; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s;
}
@media (hover: hover) { .orbita__cat:hover { border-color: rgba(168, 85, 247, .7); color: var(--branco); } }
.orbita__cat.is-previa { border-color: var(--roxo); background: rgba(168, 85, 247, .16); color: var(--branco); }
.orbita__cat[aria-pressed="true"] { border-color: var(--roxo); background: var(--roxo); color: var(--preto); }
.orbita__cat[aria-pressed="true"] .orbita__cat-n { background: rgba(255, 255, 255, .25); color: var(--preto); }

@keyframes orbita-surge { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- De 1000 px para cima: a grade da categoria toma o centro ---------- */
@media (min-width: 1000px) {
  .orbita__palco.is-focada .orbita__centro { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  .orbita__palco.is-focada .orbita__brilho { opacity: .5; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .orbita.is-pronta .orbita__lista { --orbita-colunas: 5; }
}

/* ---------- Até 999 px: órbita só com os logos; a grade vai para baixo dos botões ---------- */
@media (max-width: 999.98px) {
  .orbita.is-pronta { grid-template-areas: "palco" "controles" "grupos"; }
  .orbita.is-pronta .orbita__grupos { grid-area: grupos; place-items: start center; padding-block: 0; margin-top: 28px; } /* topo fixo: a grade que sai não pula quando a outra entra */
  .orbita.is-pronta .orbita__grupo { display: none; visibility: visible; }
  .orbita.is-pronta .orbita__grupo.is-ativo { display: flex; }
  .orbita.is-pronta .orbita__lista { display: flex; flex-wrap: wrap; justify-content: center; }

  .orbita__palco { min-height: 0; height: clamp(330px, 44vw, 440px); }
  /* a grade fica embaixo: a órbita esmaece menos, segue girando devagar (JS) e os logos continuam clicáveis */
  .orbita__palco.is-focada .orbita__pilula { opacity: .22; }
  .orbita__palco.is-focada .orbita__no { pointer-events: auto; }
  .orbita__palco.is-focada .orbita__no.is-destaque:not(.is-voando) .orbita__pilula { opacity: 1; }
  .orbita__controles { margin-top: 4px; }
  .orbita__pilula { width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; gap: 0; }
  .orbita__pilula > span { display: none; }
  .orbita__pilula svg,
  .orbita__pilula .orbita__img { width: 20px !important; height: 20px !important; }
  /* o nome aparece embaixo do logo com o mouse em cima */
  .orbita__no.is-destaque .orbita__pilula > span:not(.sr-only) {
    display: block; position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
    padding: 3px 9px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--roxo);
    font-size: 12px; white-space: nowrap; color: var(--branco);
  }
  .orbita__inovacao { font-size: clamp(28px, 4.2vw, 38px); }
  .orbita__brilho { width: 420px; height: 240px; margin: -120px 0 0 -210px; }
}

/* ---------- Até 760 px: celular ---------- */
@media (max-width: 760px) {
  .orbita__palco { height: clamp(230px, 62vw, 330px); }
  .orbita__anel--3 { display: none; }
  .orbita__pilula { width: 36px; height: 36px; }
  .orbita__pilula svg,
  .orbita__pilula .orbita__img { width: 18px !important; height: 18px !important; }
  .orbita__inovacao { font-size: clamp(20px, 6.2vw, 30px); }
  .orbita__brilho { width: 300px; height: 180px; margin: -90px 0 0 -150px; }
  .orbita__cats { gap: 6px; }
  .orbita__cat { min-height: 38px; padding: 0 5px 0 11px; font-size: 12.5px; gap: 5px; }
  .orbita__cat-n { min-width: 22px; height: 20px; padding: 0 6px; line-height: 20px; font-size: 10.5px; }
  .orbita.is-pronta .orbita__grupos { margin-top: 24px; }
  .orbita.is-pronta .orbita__lista { gap: 8px; }
}

/* Celular estreito: sem o número nos botões (ele aparece no título da grade) para caberem dois por linha */
@media (max-width: 380px) {
  .orbita__cat { padding: 0 10px; font-size: 12px; }
  .orbita__cat-n { display: none; }
}

/* ---------- Movimento reduzido: sem giro, sem voo, troca na hora (o JS liga esta classe) ---------- */
.orbita--quieta .orbita__pilula,
.orbita--quieta .orbita__centro,
.orbita--quieta .orbita__anel,
.orbita--quieta .orbita__brilho,
.orbita--quieta .orbita__cat,
.orbita--quieta .orbita__cat-n,
.orbita--quieta .orbita__grupo-nome,
.orbita--quieta .orbita__lista li { transition: none !important; animation: none !important; }