/* A abordagem da Bianca precede o atendimento com LPF. */
.como-trabalho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(var(--espaco-8), 6vw, var(--espaco-20));
  border-top: var(--fio);
  scroll-margin-top: var(--espaco-24);
}

/* A regra geral entre seções zera este recuo; a linha precisa de respiro. */
.secao.como-trabalho { padding-top: var(--espaco-6); }

/* "começa com uma" em terracota (Lucas, 24/09): o mesmo tom fixo de
   "trajetória" no título de cima, 5,20:1 sobre o fundo. */
.como-trabalho__destaque { color: var(--cor-titulo-trajetoria); }

.como-trabalho__titulo {
  max-width: 20ch;
  font-size: clamp(var(--fs-30), 3.4vw, var(--fs-48));
  line-height: 1.08;
}

.como-trabalho__resumo {
  max-width: 45ch;
  margin: 0 0 var(--espaco-8);
  color: var(--cor-texto-suave);
  font-size: var(--fs-18);
  line-height: 1.65;
}

.como-trabalho__etapas {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.como-trabalho__etapa {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--espaco-4);
  padding: var(--espaco-6) 0;
  border-top: var(--fio);
}

.como-trabalho__etapa:first-child {
  padding-top: 0;
  border-top: 0;
}

.como-trabalho__etapa:last-child { padding-bottom: 0; }

.como-trabalho__numero {
  padding-top: var(--espaco-1);
  color: var(--cor-texto-marca);
  font-family: var(--fonte-mono);
  font-size: var(--fs-18);
  line-height: var(--lh-24);
}

.como-trabalho__nome {
  margin: 0 0 var(--espaco-2);
  font-size: var(--fs-24);
  font-weight: var(--peso-forte);
  line-height: 1.25;
}

.como-trabalho__etapa p {
  margin: 0;
  color: var(--cor-texto-suave);
  line-height: 1.65;
}

.como-trabalho__etapa p + p {
  margin-top: var(--espaco-4);
}

/* O DIAGRAMA ORBITAL
   O centro e cinco nos em volta, sobre dois aneis; as bolinhas giram nos aneis
   (dois grupos, em sentidos opostos). Em tela estreita os nos ficam parados
   para as legendas continuarem legiveis. Tudo em tokens: terracota nos aneis e nos
   nos, o texto do centro na cor de texto da marca. Referencia de Lucas,
   22/09/2026. */
.orbita {
  position: relative;
  width: min(100%, 28rem);
  aspect-ratio: 1;
  /* Os nos de cima e de baixo saem do quadrado (o icone senta no anel): a
     margem de baixo e o que impede o de baixo de invadir a lista de etapas. */
  margin: var(--espaco-10) auto var(--espaco-10);
  padding: 0;
}
.orbita__aneis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.orbita__anel {
  fill: none;
  stroke: color-mix(in srgb, var(--marca) 55%, transparent);
  stroke-width: 1;
}
.orbita__anel--tracejado { stroke-dasharray: 2 6; stroke: color-mix(in srgb, var(--marca) 40%, transparent); }
.orbita__bolinha { fill: var(--marca); }
.orbita__giro {
  transform-origin: 200px 200px;
  animation: orbita-giro 48s linear infinite;
}
.orbita__giro--contra { animation-duration: 64s; animation-direction: reverse; }
@keyframes orbita-giro {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.orbita__centro {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--marca) 34%, transparent), transparent 70%),
    color-mix(in srgb, var(--marca) 8%, var(--cor-fundo));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 30%, transparent), 0 0 60px color-mix(in srgb, var(--marca) 18%, transparent);
  color: var(--cor-texto-marca);
  font-size: var(--fs-12);
  font-weight: var(--peso-medio);
  letter-spacing: .22em;
  line-height: 1.7;
  text-align: center;
  text-transform: uppercase;
}
.orbita__centro span { position: relative; padding-bottom: var(--espaco-3); }
.orbita__centro span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2rem;
  height: 1px;
  translate: -50%;
  background: var(--marca);
}
/* Os nos orbitam: o grupo gira devagar e cada no gira ao contrario, na mesma
   duracao, em torno do proprio ponto de ancoragem (o centro do icone, a 32% da
   altura do bloco) - o icone anda pelo anel e a legenda fica em pe. */
.orbita__nos {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  animation: orbita-giro-nos 120s linear infinite;
}
@keyframes orbita-giro-nos { to { rotate: 360deg; } }
@keyframes orbita-contragiro { to { rotate: -360deg; } }
.orbita__no {
  position: absolute;
  display: grid;
  justify-items: center;
  width: 9rem;
  transform-origin: 50% 32%;
  animation: orbita-contragiro 120s linear infinite;
  /* O no e alto (icone + duas linhas): sobe menos que a metade para o ICONE
     cair sobre o anel, e nao o centro do bloco. */
  translate: -50% -32%;
  text-align: center;
}
.orbita__icone {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--espaco-2);
  border: 1px solid var(--marca);
  border-radius: 50%;
  background: var(--cor-fundo);
  color: var(--marca);
  box-shadow: 0 0 18px color-mix(in srgb, var(--marca) 25%, transparent);
}
.orbita__icone svg { width: 1.4rem; height: 1.4rem; }
.orbita__no strong {
  color: var(--cor-texto-luz); /* o ambar da sobrancelha "Como eu trabalho": Lucas, 22/09 */
  font-size: var(--fs-12);
  font-weight: var(--peso-forte);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.orbita__no small {
  color: var(--cor-texto); /* branco, e nao o suave: Lucas, 22/09 */
  font-size: var(--fs-12);
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Os cinco nos, no pentagono do anel de fora (raio 40%), a partir do topo. */
.orbita__no--1 { left: 50%; top: 10%; }
.orbita__no--2 { left: 88%; top: 37.6%; }
.orbita__no--3 { left: 73.5%; top: 82.4%; }
.orbita__no--4 { left: 26.5%; top: 82.4%; }
.orbita__no--5 { left: 12%; top: 37.6%; }

/* Em tela estreita a orbita encolhe um pouco: girando, a legenda do no que passa
   pela borda chegava a 4 px fora da tela em 320 px (28/09). */
@media (max-width: 24rem) {
  .orbita { width: min(100% - var(--espaco-6), 28rem); }
}
@media (prefers-reduced-motion: reduce) {
  .orbita__giro,
  .orbita__nos,
  .orbita__no { animation: none; }
}
@media (forced-colors: active) {
  .orbita__anel { stroke: CanvasText; }
  .orbita__bolinha { fill: CanvasText; }
  .orbita__centro, .orbita__icone { border: 1px solid CanvasText; box-shadow: none; }
}

@media (max-width: 56rem) {
  .como-trabalho { grid-template-columns: minmax(0, 1fr); }
  .orbita { margin-top: var(--espaco-8); margin-bottom: var(--espaco-12); }
}
@media (max-width: 30rem) {
  /* O diagrama ocupa o visor estreito sem alargar a pagina. O centro e os
     rotulos laterais deixam de disputar o mesmo espaco. */
  .orbita {
    left: 50%;
    width: min(calc(100vw - 2px), 20rem);
    max-width: none;
    margin-top: var(--espaco-12);
    margin-inline: 0;
    translate: -50% 0;
  }
  .orbita__centro { width: 32%; }
  /* O giro joga rotulos para fora da tela; os aneis continuam animados. */
  .orbita__nos,
  .orbita__no { animation: none; }
  .orbita__no { width: 6.5rem; }
  .orbita__no--1 { top: 0; }
  .orbita__no--2 { left: 83%; }
  .orbita__no--5 { left: 17%; }
  .orbita__icone { width: 2.75rem; height: 2.75rem; }
  .orbita__no strong { max-width: 100%; overflow-wrap: anywhere; letter-spacing: .1em; }
  .orbita__no small { max-width: 100%; overflow-wrap: anywhere; letter-spacing: 0; }
}