/* =========================================================
   Produtos construídos · one-page

   Reusa o shell de css/llm.css (trilho + palco) e as variáveis
   de cor de lá. O que mora aqui: a barra de progresso, a banda
   de frente, a seção dedicada de cada produto, o trilho com os
   catálogo inteiro e as treze maquetes de preview.

   Duas armadilhas do CSS global (css/styles.css) que este
   arquivo desarma:
     · `section` é dobra de tela cheia, centralizada, com
       min-height: 100vh e padding vertical;
     · `* { background: white }` pinta todo elemento, então
       bloco escuro precisa zerar o fundo dos filhos (`.sh *`).
   ========================================================= */

:root {
  /* o verde de preenchimento (--prompt-green) fica em 2.5:1 como texto
     sobre branco; texto verde usa este, que passa em AA */
  --verde-txt: #1c7a32;
}

/* o palco é mais largo aqui: cada seção é texto e maquete lado a lado */
.pr-page .llm-stage {
  max-width: 1180px;
  padding-top: var(--md);
}

/* =========================
   Barra de progresso e busca
   ========================= */
.pr-topo {
  position: sticky;
  top: 0;
  z-index: 9;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hair);
}

.pr-topo__fill {
  height: 3px;
  background: rgba(14, 16, 22, 0.06);
}

.pr-topo__fill span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--prompt-green);
  /* escala em vez de largura: a barra anda a cada rolagem e
     animar width refaz layout em toda a página */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.pr-topo__linha {
  display: flex;
  align-items: center;
  gap: var(--sm);
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(var(--sm) / 1.3) var(--lg);
}

.pr-topo__passo {
  font-size: calc(var(--sm) / 1.02);
  color: var(--ink-45);
  white-space: nowrap;
}

.pr-topo__atual {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(var(--md) / 1.08);
  font-weight: 700;
}

.pr-busca {
  flex: 1 1 200px;
  max-width: 340px;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--sm) / 1.4);
  padding: calc(var(--sm) / 1.8) var(--sm);
  border: 1px solid var(--hair);
  border-radius: 999px;
}

.pr-busca svg {
  display: block;
  width: 13px;
  height: 13px;
  color: var(--ink-45);
}

.pr-busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font-size: calc(var(--md) / 1.12);
  color: var(--bg);
}

.pr-busca input::placeholder { color: var(--ink-45); }

.pr-conta {
  font-size: calc(var(--sm) / 1.02);
  color: var(--ink-45);
  white-space: nowrap;
}

/* =========================
   Abertura
   ========================= */
.pr-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm);
  margin-top: var(--md);
}

.pr-stat {
  flex: 1 1 130px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: calc(var(--sm) / 1.2) var(--sm);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  font-size: calc(var(--sm) / 1.06);
  line-height: 1.3;
  color: var(--ink-45);
}

.pr-stat b {
  font-size: calc(var(--lg) * 1.15);
  line-height: 1.1;
  color: var(--bg);
}

.pr-metodo { margin-top: var(--md); }
.pr-metodo .llm-text + .llm-text { margin-top: calc(var(--sm) / 1.2); }

/* =========================
   O <section> global não manda nesta página
   ========================= */
.pd,
.pr-banda,
.pr-bloco,
.sb-fam {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
}

/* =========================
   Banda de frente
   ========================= */
.pr-banda {
  margin-top: calc(var(--lg) * 2.4);
  padding: var(--lg) 0 var(--md);
  border-top: 2px solid var(--bg);
  scroll-margin-top: 76px;
}

.pr-banda[hidden] { display: none; }

.pr-banda__olho {
  font-size: calc(var(--sm) / 1.08);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-45);
}

.pr-banda__nome {
  margin-top: calc(var(--sm) / 2);
  font-size: clamp(26px, 3.4vw, calc(var(--lg) * 1.9));
  line-height: 1.1;
}

.pr-banda__sub {
  font-size: var(--md);
  color: var(--ink-60);
}

.pr-banda__nums {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md);
  margin-top: var(--sm);
  font-size: calc(var(--md) / 1.14);
  color: var(--ink-45);
}

.pr-banda__nums b {
  font-size: calc(var(--md) * 1.1);
  color: var(--bg);
}

.pr-banda__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 1.6);
  margin-top: var(--md);
}

.pr-banda__chips a {
  padding: calc(var(--sm) / 2) calc(var(--sm) / 1.1);
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: calc(var(--sm) / 1.02);
  color: var(--ink-60);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}

.pr-banda__chips a[hidden] { display: none; }
.pr-banda__chips a b { color: var(--ink-45); }

.pr-banda__chips a:hover {
  border-color: var(--bg);
  color: var(--bg);
}

/* =========================
   Seção dedicada de um produto
   ========================= */
.pd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: calc(var(--lg) * 1.6);
  align-items: center;
  padding: calc(var(--lg) * 1.8) 0;
  border-top: 1px solid var(--hair-soft);
  scroll-margin-top: 68px;
}

.pd[hidden] { display: none; }
.pd--inv .pd__figura { order: -1; }

.pd__corpo {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sm) / 1.3);
  min-width: 0;
}

.pd__olho {
  display: flex;
  align-items: center;
  gap: calc(var(--sm) / 1.4);
  font-size: calc(var(--sm) / 1.06);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-45);
}

.pd__n {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg);
  color: #fff;
  letter-spacing: .08em;
}

.pd__nome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sm);
  font-size: clamp(22px, 2.6vw, calc(var(--lg) * 1.5));
  line-height: 1.15;
  word-break: break-word;
}

.pd__repo {
  font-size: calc(var(--sm) / 1.02);
  color: var(--ink-45);
}

.pd__repo code {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(14, 16, 22, 0.05);
  color: var(--ink-60);
}

.pd__oque {
  margin-top: calc(var(--sm) / 2);
  font-size: calc(var(--md) * 1.02);
  line-height: 1.55;
  color: var(--bg);
}

.pd__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--md);
  margin-top: calc(var(--sm) / 2);
  padding: var(--md);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

.pd__duo p {
  font-size: calc(var(--md) / 1.14);
  line-height: 1.5;
  color: var(--ink-60);
}

.pd__rot {
  display: block;
  margin-bottom: 4px;
  font-size: calc(var(--sm) / 1.1);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-45);
}

.pd__fatos {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sm) / 2.2);
  list-style: none;
  margin-top: calc(var(--sm) / 2);
}

.pd__fatos li {
  position: relative;
  padding-left: var(--md);
  font-size: calc(var(--md) / 1.14);
  line-height: 1.45;
  color: var(--ink-60);
}

.pd__fatos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--prompt-green);
}

.pr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 2.4);
  margin-top: calc(var(--sm) / 2);
}

.pr-tags span {
  padding: 2px 8px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: calc(var(--sm) / 1.14);
  color: var(--ink-60);
}

.pd__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md);
  margin-top: calc(var(--sm) / 1.6);
  padding-top: var(--sm);
  border-top: 1px solid var(--hair-soft);
  font-size: calc(var(--sm) / 1.06);
  color: var(--ink-45);
}

.pd__meta span,
.pd__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pd__meta svg {
  display: block;
  width: 12px;
  height: 12px;
}

.pd__link {
  margin-left: auto;
  color: var(--verde-txt);
  font-weight: 700;
  text-decoration: none;
}

.pd__link:hover { text-decoration: underline; }

.pr-chip {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: calc(var(--sm) / 1.1);
  font-weight: 400;
  white-space: nowrap;
}

.pr-chip--green { background: rgba(28, 122, 50, .12); color: var(--verde-txt); }
.pr-chip--blue { background: rgba(47, 111, 237, .12); color: var(--c-blue); }
.pr-chip--amber { background: rgba(167, 106, 0, .14); color: var(--c-amber); }

/* =========================
   Maquete
   ========================= */
.pd__figura { min-width: 0; }

.pr-shot {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 10;
  padding: calc(var(--sm) / 1.2);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #f6f7f9, #e9ecf1);
  box-shadow: 0 16px 40px rgba(14, 16, 22, 0.08);
  overflow: hidden;
}

/* tudo dentro da maquete é medido em em: o mesmo desenho serve a um
   quadro de 320px e a um de 620px sem virar letra de formiga */
.sh {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: .7em;
  overflow: hidden;
  font-size: clamp(8.5px, 2.05cqi, 15px);
  line-height: 1.4;
}

.sh * { background: transparent; }

.sh-line {
  display: block;
  height: .4em;
  border-radius: .25em;
  background: rgba(14, 16, 22, .12);
}

.sh-line--s { width: 62%; }

.sh-tag {
  padding: 0 .4em;
  border-radius: .35em;
  font-size: .82em;
  font-style: normal;
}

.sh-tag--green { background: rgba(47, 158, 68, .16); color: var(--verde-txt); }
.sh-tag--blue { background: rgba(47, 111, 237, .16); color: var(--c-blue); }
.sh-tag--amber { background: rgba(167, 106, 0, .18); color: var(--c-amber); }
.sh-tag--purple { background: rgba(124, 58, 237, .16); color: var(--c-purple); }
.sh-tag--pink { background: rgba(209, 67, 107, .16); color: var(--c-pink); }

/* ---------- navegador ---------- */
.sh-browser { border: 1px solid var(--hair); background: #fff; }

.sh-browser__bar {
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .5em .7em;
  background: #f1f3f6;
  border-bottom: 1px solid var(--hair-soft);
}

.sh-browser__bar i {
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: rgba(14, 16, 22, .18);
}

.sh-browser__url {
  margin-left: .5em;
  padding: .1em .9em;
  border-radius: 99em;
  background: #fff;
  color: var(--ink-45);
  font-size: .86em;
}

.sh-browser__page {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .6em;
  padding: .7em;
}

.sh-browser__nav {
  display: flex;
  align-items: center;
  gap: .6em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--hair-soft);
}

.sh-browser__nav span { color: var(--ink-45); font-size: .86em; }

.sh-browser__nav em {
  margin-left: auto;
  padding: .15em .7em;
  border-radius: 99em;
  background: var(--prompt-green);
  color: #fff;
  font-style: normal;
  font-size: .86em;
}

.sh-browser__hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .45em;
  padding: .5em 0;
}

.sh-browser__hero p {
  font-size: 1.24em;
  font-weight: 700;
  line-height: 1.25;
}

.sh-browser__cards {
  flex: 0 0 44%;
  display: grid;
  grid-auto-flow: column;
  gap: .5em;
  margin-top: auto;
}

.sh-browser__cards i {
  height: 100%;
  border-radius: .45em;
  border: 1px solid var(--hair-soft);
  background: linear-gradient(160deg, #f7f8fa, #eef0f4);
}

/* ---------- terminal ---------- */
.sh-term { background: #11141b; }

.sh-term__bar {
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .5em .7em;
  background: #1a1f29;
  font-size: .86em;
}

.sh-term__bar i {
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}

.sh-term__bar span { margin-left: .5em; color: rgba(255, 255, 255, .45); }

.sh-term__body {
  flex: 1;
  padding: .7em .9em;
  color: rgba(255, 255, 255, .82);
}

.sh-term__ln { color: rgba(255, 255, 255, .82); }
.sh-term__ln b { color: var(--prompt-green); }
.sh-term__ln.is-green { color: var(--prompt-green); }
.sh-term__ln.is-muted { color: rgba(255, 255, 255, .45); }
.sh-term__ln.is-amber { color: #e3b341; }

.sh-caret {
  display: inline-block;
  width: .5em;
  height: .95em;
  vertical-align: -.1em;
  background: var(--prompt-green);
  animation: prBlink 1.1s steps(1) infinite;
}

@keyframes prBlink { 50% { opacity: 0; } }

/* ---------- app de desktop ---------- */
.sh-app { border: 1px solid var(--hair); background: #fff; }

.sh-app__bar {
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .5em .7em;
  background: #21262e;
  font-size: .86em;
}

.sh-app__bar i {
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
}

.sh-app__bar span { margin-left: .5em; color: rgba(255, 255, 255, .6); }

.sh-app__body { flex: 1; display: flex; min-height: 0; }

.sh-app__side {
  flex: 0 0 34%;
  display: flex;
  flex-direction: column;
  gap: .3em;
  padding: .6em;
  border-right: 1px solid var(--hair-soft);
  background: #f7f8fa;
}

.sh-app__item {
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .2em .4em;
  border-radius: .35em;
  font-size: .86em;
  color: var(--ink-60);
}

.sh-app__item i {
  width: .4em;
  height: .4em;
  border-radius: 50%;
  background: rgba(14, 16, 22, .22);
}

.sh-app__item.is-on { background: #fff; color: var(--bg); }
.sh-app__item.is-on i { background: var(--prompt-green); }

.sh-app__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5em;
  padding: .6em;
  min-width: 0;
}

.sh-app__pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .4em;
  padding: .5em;
  border: 1px solid var(--hair-soft);
  border-radius: .45em;
}

.sh-app__tag { font-size: .86em; color: var(--ink-45); }

/* ---------- kanban ---------- */
.sh-board {
  flex-direction: row;
  gap: .5em;
  padding: .7em;
  border: 1px solid var(--hair);
  background: #f7f8fa;
}

.sh-board__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .4em;
  min-width: 0;
  padding: .4em;
  border-radius: .5em;
  background: rgba(14, 16, 22, .035);
}

.sh-board__head {
  display: flex;
  justify-content: space-between;
  font-size: .86em;
  color: var(--ink-45);
}

.sh-board__head b { color: var(--ink-60); }

.sh-board__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .3em;
  padding: .4em .5em;
  border: 1px solid var(--hair-soft);
  border-radius: .45em;
  background: #fff;
  font-size: .86em;
  line-height: 1.25;
  color: var(--ink-60);
}

/* ---------- planeta ---------- */
.sh-world { position: relative; background: #0e1016; }
.sh-world svg { width: 100%; height: 100%; display: block; }

.sh-world__tag {
  position: absolute;
  left: .8em;
  bottom: .7em;
  padding: .15em .7em;
  border-radius: 99em;
  background: rgba(14, 16, 22, .65);
  color: rgba(255, 255, 255, .82);
  font-size: .86em;
}

.sh-world__star { animation: prTwinkle 3.4s ease-in-out infinite; }

@keyframes prTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }

/* ---------- malha low-poly ---------- */
.sh-poly {
  position: relative;
  border: 1px solid var(--hair);
  background: #fff;
}

.sh-poly svg { width: 100%; height: 100%; display: block; }

.sh-poly__f { opacity: 0; }
.pr-shot.is-in .sh-poly__f { animation: prPop .5s ease forwards; }

@keyframes prPop { from { opacity: 0; } to { opacity: 1; } }

.sh-poly__tag {
  position: absolute;
  left: .8em;
  bottom: .7em;
  font-size: .86em;
  color: var(--ink-45);
}

/* ---------- celular ---------- */
.sh-phone {
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #eef0f4, #e3e6ec);
}

.sh-phone__frame {
  position: relative;
  width: 46%;
  height: 92%;
  display: flex;
  flex-direction: column;
  gap: .4em;
  padding: 1em .7em .7em;
  border: 1px solid rgba(14, 16, 22, .3);
  border-radius: .9em;
  background: #fff;
}

.sh-phone__notch {
  position: absolute;
  top: .35em;
  left: 50%;
  transform: translateX(-50%);
  width: 26%;
  height: .28em;
  border-radius: 99em;
  background: rgba(14, 16, 22, .25);
}

.sh-phone__head {
  font-size: 1em;
  font-weight: 700;
  padding-bottom: .3em;
  border-bottom: 1px solid var(--hair-soft);
}

.sh-phone__row {
  padding: .3em .4em;
  border-radius: .35em;
  background: #f6f7f9;
  font-size: .86em;
  line-height: 1.3;
  color: var(--ink-60);
}

.sh-phone__badge {
  margin-top: auto;
  padding: .35em;
  border-radius: .45em;
  background: rgba(209, 67, 107, .12);
  color: var(--c-pink);
  font-size: .86em;
  text-align: center;
}

/* ---------- painel ---------- */
.sh-panel {
  gap: .6em;
  padding: .8em;
  border: 1px solid var(--hair);
  background: #fff;
}

.sh-panel__head { font-size: .86em; color: var(--ink-45); }

.sh-panel__tiles { display: flex; gap: .5em; }

.sh-panel__tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: .4em .5em;
  border: 1px solid var(--hair-soft);
  border-radius: .45em;
  font-size: .86em;
  color: var(--ink-45);
}

.sh-panel__tile b { font-size: 1.5em; color: var(--bg); }

.sh-panel__bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: .4em;
  padding-top: .4em;
  border-bottom: 1px solid var(--hair-soft);
}

.sh-panel__bars i {
  flex: 1;
  height: var(--h);
  border-radius: .25em .25em 0 0;
  background: var(--prompt-green);
  opacity: .8;
  transform: scaleY(0);
  transform-origin: bottom;
}

.pr-shot.is-in .sh-panel__bars i { animation: prBar .6s cubic-bezier(.16, 1, .3, 1) forwards; }

@keyframes prBar { to { transform: scaleY(1); } }

/* ---------- superfície de API ---------- */
.sh-api {
  gap: .4em;
  padding: .8em;
  border: 1px solid var(--hair);
  background: #fff;
}

.sh-api__head { font-size: .86em; color: var(--ink-45); }

.sh-api__row {
  flex: 1;
  max-height: 3.4em;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .4em .5em;
  border: 1px solid var(--hair-soft);
  border-radius: .45em;
  font-size: .86em;
}

.sh-api__row code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-60);
}

.sh-api__row b { color: var(--ink-45); }

/* ---------- conversa ---------- */
.sh-chat {
  gap: .5em;
  padding: .8em;
  border: 1px solid var(--hair);
  background: #fff;
}

.sh-chat__head {
  font-size: .86em;
  color: var(--ink-45);
  padding-bottom: .4em;
  border-bottom: 1px solid var(--hair-soft);
}

.sh-chat__msg {
  max-width: 82%;
  padding: .4em .6em;
  border-radius: .8em;
  font-size: .86em;
  line-height: 1.35;
}

.sh-chat__msg--a {
  align-self: flex-start;
  background: #f2f4f7;
  color: var(--ink-60);
  border-bottom-left-radius: .2em;
}

.sh-chat__msg--b {
  align-self: flex-end;
  background: rgba(63, 185, 80, .14);
  color: var(--verde-txt);
  border-bottom-right-radius: .2em;
}

.sh-chat__campo {
  margin-top: auto;
  padding: .4em .6em;
  border: 1px solid var(--hair-soft);
  border-radius: 99em;
  font-size: .86em;
  color: var(--ink-45);
}

/* ---------- documento ---------- */
.sh-doc {
  gap: .5em;
  padding: .9em 1em;
  border: 1px solid var(--hair);
  background: #fff;
}

.sh-doc__h {
  font-size: 1.15em;
  font-weight: 700;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--hair-soft);
}

.sh-doc__li {
  position: relative;
  padding-left: .9em;
  font-size: .86em;
  color: var(--ink-60);
}

.sh-doc__li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .3em;
  height: .3em;
  border-radius: 50%;
  background: var(--prompt-green);
}

.sh-doc__fim {
  display: flex;
  flex-direction: column;
  gap: .4em;
  margin-top: auto;
}

/* ---------- galeria ---------- */
.sh-tiles {
  position: relative;
  padding: .7em;
  border: 1px solid var(--hair);
  background: #fff;
}

.sh-tiles__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4em;
}

.sh-tiles__t {
  display: flex;
  align-items: flex-end;
  padding: .3em;
  border-radius: .35em;
  background: linear-gradient(160deg, hsl(calc(150 + var(--i) * 26) 26% 82%), hsl(calc(150 + var(--i) * 26) 22% 66%));
  opacity: 0;
}

.pr-shot.is-in .sh-tiles__t {
  animation: prPop .45s ease forwards;
  animation-delay: calc(var(--i) * .05s);
}

.sh-tiles__t em {
  font-style: normal;
  font-size: .78em;
  color: rgba(14, 16, 22, .62);
}

.sh-tiles__tag {
  padding-top: .5em;
  font-size: .86em;
  color: var(--ink-45);
}

/* ---------- topologia ---------- */
.sh-flow {
  gap: .6em;
  justify-content: center;
  padding: .8em;
  border: 1px solid var(--hair);
  background: #fff;
}

.sh-flow__row {
  flex: 0 0 56%;
  display: flex;
  align-items: stretch;
  gap: .4em;
}

.sh-flow__node {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .15em;
  padding: .5em .45em;
  border: 1px solid var(--hair-soft);
  border-radius: .45em;
  background: linear-gradient(160deg, #f8f9fb, #eff1f5);
  font-size: .82em;
  line-height: 1.25;
  color: var(--ink-45);
  opacity: 0;
  transform: translateY(4px);
}

.pr-shot.is-in .sh-flow__node {
  animation: prUp .45s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--i) * .08s);
}

@keyframes prUp { to { opacity: 1; transform: none; } }

.sh-flow__node b { font-size: 1.2em; color: var(--bg); }

.sh-flow__arrow {
  display: flex;
  align-items: center;
  color: var(--ink-45);
  font-size: 1em;
}

.sh-flow__note {
  text-align: center;
  font-size: .86em;
  color: var(--ink-45);
}

/* =========================
   Trilho com o catálogo
   ========================= */
.pr-aside { gap: var(--sm); }

.tr {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--sm) / 1.2);
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.tr::-webkit-scrollbar { display: none; }

.tr__grupo {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tr__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--sm) / 1.4);
  padding: calc(var(--sm) / 2) calc(var(--sm) / 1.4);
  font-size: calc(var(--sm) / 1.04);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-45);
  text-decoration: none;
}

.tr__cab span { color: var(--ink-45); }
.tr__cab:hover { color: var(--bg); }

.tr__item {
  display: flex;
  align-items: center;
  gap: calc(var(--sm) / 1.6);
  padding: calc(var(--sm) / 2.4) calc(var(--sm) / 1.4);
  border-radius: 8px;
  font-size: calc(var(--md) / 1.2);
  color: var(--ink-60);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.tr__item[hidden] { display: none; }
.tr__item:hover { background: rgba(14, 16, 22, .05); }

.tr__item.is-on {
  background: rgba(63, 185, 80, .12);
  color: var(--bg);
}

.tr__n {
  flex: 0 0 auto;
  font-size: calc(var(--sm) / 1.1);
  color: var(--ink-45);
}

.tr__item.is-on .tr__n { color: var(--verde-txt); }

.tr__nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tr__dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.tr__dot--green { background: var(--prompt-green); }
.tr__dot--blue { background: var(--c-blue); }
.tr__dot--amber { background: var(--c-amber); }

/* =========================
   Blocos de fecho
   ========================= */
.pr-bloco {
  margin-top: calc(var(--lg) * 2.2);
  scroll-margin-top: 76px;
}

.pr-bloco__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sm);
  padding-bottom: calc(var(--sm) / 1.4);
  border-bottom: 2px solid var(--bg);
}

.pr-bloco__nome { font-size: calc(var(--lg) * 1.2); }

.pr-bloco__sub {
  font-size: calc(var(--sm) / 1.02);
  color: var(--ink-45);
}

.pr-vazio {
  margin-top: var(--lg);
  font-size: var(--md);
  color: var(--ink-45);
}

.pr-vazio[hidden] { display: none; }

.pr-tab {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--md);
  font-size: calc(var(--md) / 1.16);
}

.pr-tab th,
.pr-tab td {
  padding: calc(var(--sm) / 1.4) calc(var(--sm) / 1.2);
  border-bottom: 1px solid var(--hair-soft);
  text-align: left;
  vertical-align: top;
  color: var(--ink-60);
}

.pr-tab th {
  font-size: calc(var(--sm) / 1.08);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-45);
}

.pr-tab code { color: var(--bg); }
.pr-tab__num { white-space: nowrap; color: var(--ink-45); }
.pr-tab-wrap { overflow-x: auto; }

.pr-leitura {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--md);
  margin-top: var(--md);
}

.pr-leitura__bloco {
  padding: var(--md);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

.pr-leitura__bloco h3 {
  font-size: calc(var(--md) * 1.02);
  margin-bottom: calc(var(--sm) / 1.6);
}

.pr-leitura__bloco p {
  font-size: calc(var(--md) / 1.14);
  line-height: 1.55;
  color: var(--ink-60);
}

.pr-fecho { margin-top: var(--lg); }

/* =========================
   Dentro do monorepo

   Só a seção do services.steply.pm2 tem este bloco. Ele ocupa
   as duas colunas da grade da seção e vem depois da maquete,
   para o leitor que quer o detalhe descer até ele, e não
   tropeçar nele antes de saber o que é o produto.
   ========================= */
.pd__dentro {
  grid-column: 1 / -1;
  margin-top: var(--lg);
  padding-top: var(--md);
  border-top: 1px solid var(--hair);
}

.sb-cab__nome {
  font-size: calc(var(--md) * 1.1);
  line-height: 1.2;
}

.sb-cab__sub {
  max-width: 62ch;
  margin-top: calc(var(--sm) / 2.4);
  font-size: calc(var(--md) / 1.14);
  line-height: 1.5;
  color: var(--ink-60);
}

.sb-cab__sub b { color: var(--bg); }

.sb-cab__sub code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(14, 16, 22, 0.05);
  font-size: .92em;
}

.sb-fam { margin-top: var(--lg); }

.sb-fam__cab {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 1.4);
  padding-bottom: calc(var(--sm) / 1.6);
  border-bottom: 1px solid var(--hair-soft);
}

.sb-fam__nome {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--sm) / 1.6);
  font-size: calc(var(--md) / 1.02);
  line-height: 1.2;
}

.sb-fam__nome b {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg);
  color: #fff;
  font-size: calc(var(--sm) / 1.1);
  font-weight: 400;
}

.sb-fam__sub {
  font-size: calc(var(--sm) / 1.04);
  color: var(--ink-45);
}

.sb-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--md);
  margin-top: var(--md);
}

.sb {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sm) / 2.6);
  padding: var(--md);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  min-width: 0;
}

.sb__topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 1.6);
}

.sb__nome {
  font-size: calc(var(--md) / 1.04);
  line-height: 1.25;
  word-break: break-word;
}

.sb__path code {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(14, 16, 22, 0.05);
  font-size: calc(var(--sm) / 1.1);
  color: var(--ink-60);
  word-break: break-all;
}

.sb__desc {
  font-size: calc(var(--md) / 1.18);
  line-height: 1.5;
  color: var(--ink-60);
}

.sb__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 2.6);
  margin-top: auto;
  padding-top: calc(var(--sm) / 2.6);
}

.sb__tags span {
  padding: 2px 8px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: calc(var(--sm) / 1.16);
  color: var(--ink-60);
}

.sb__meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 1.2);
  padding-top: calc(var(--sm) / 1.8);
  border-top: 1px solid var(--hair-soft);
  font-size: calc(var(--sm) / 1.06);
  color: var(--ink-45);
}

.sb__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sb__meta svg {
  display: block;
  width: 12px;
  height: 12px;
}

/* =========================
   Responsivo
   ========================= */
@media (max-width: 1040px) {
  .pd { gap: var(--lg); }
}

@media (max-width: 900px) {
  /* o trilho vira cabeçalho no empilhamento: mostra só as frentes, porque
     dezenas de itens em faixa horizontal não é navegação, é rolagem lateral */
  .tr__item { display: none; }

  .tr {
    flex-direction: row;
    gap: calc(var(--sm) / 1.4);
    overflow-x: auto;
  }

  .tr__grupo { flex: 0 0 auto; }

  .tr__cab {
    border: 1px solid var(--hair);
    border-radius: 999px;
    white-space: nowrap;
  }

  .pr-topo { position: static; }
  .pr-topo__linha { padding: calc(var(--sm) / 1.3) var(--md); }

  .pd {
    grid-template-columns: 1fr;
    gap: var(--md);
    padding: var(--lg) 0;
  }

  /* empilhado, a maquete vem sempre antes do texto: a imagem abre a seção */
  .pd__figura,
  .pd--inv .pd__figura { order: -1; }

  .pd,
  .pr-banda,
  .pr-bloco { scroll-margin-top: 112px; }

  .pr-banda { margin-top: calc(var(--lg) * 1.6); }
}

@media (max-width: 640px) {
  .pd__duo,
  .pr-leitura,
  .sb-grade { grid-template-columns: 1fr; }

  .pr-stat { flex-basis: 44%; }

  .pr-topo__atual { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-caret,
  .sh-world__star,
  .pr-shot.is-in .sh-poly__f,
  .pr-shot.is-in .sh-panel__bars i,
  .pr-shot.is-in .sh-tiles__t,
  .pr-shot.is-in .sh-flow__node { animation: none; }

  .sh-poly__f,
  .sh-tiles__t,
  .sh-flow__node { opacity: 1; transform: none; }

  .sh-panel__bars i { transform: none; }
}