/* ============================================================================
   Operação comercial — o que é só desta página.
   ========================================================================== */

/* Escada do hero: quatro degraus, cada um um nível a mais de mão na operação.
   Esquema, não gráfico de dado — a altura só ordena, não mede. */
.st-escada {
  margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end; gap: var(--ct-space-2);
  min-block-size: calc(var(--ct-space-16) * 4);
}
.st-escada__degrau {
  display: flex; align-items: flex-start;
  block-size: calc(var(--ct-space-16) * var(--_n));
  padding: var(--ct-space-4) var(--ct-space-3);
  background: var(--ct-bg-surface);
  border-block-start: var(--ct-border-width-accent) solid var(--ct-border-strong);
  border-radius: var(--ct-radius-sm);
  color: var(--ct-text-tertiary);
}
.st-escada__degrau--topo {
  background: var(--ct-bg-accent-subtle);
  border-block-start-color: var(--ct-border-accent);
  color: var(--ct-text-accent);
}
@media (width < 640px) {
  .st-escada__degrau { padding-inline: var(--ct-space-2); }
  .st-escada__degrau .ct-text-overline { font-size: var(--ct-font-size-xs); letter-spacing: var(--ct-font-tracking-wide); }
}

/* Níveis: sequência real — a numeração é informação. Mesma régua do percurso. */
.st-niveis { list-style: none; margin-inline: 0; margin-block-end: 0; padding: 0; display: grid; gap: var(--ct-space-8) var(--ct-space-6); }
@media (width >= 640px) { .st-niveis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width >= 1024px) { .st-niveis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-nivel {
  position: relative; display: grid; gap: var(--ct-space-3); align-content: start;
  padding-block-start: var(--ct-space-5);
  border-block-start: var(--ct-border-width-thick) solid var(--ct-border-strong);
}
.st-nivel::before {
  content: ""; position: absolute; inset-inline-start: 0;
  inset-block-start: calc(-1 * var(--ct-border-width-thick));
  inline-size: var(--ct-space-8); block-size: var(--ct-border-width-thick);
  background: var(--ct-border-accent);
}
.st-nivel--topo::before { inline-size: 100%; }
.st-nivel__num {
  font-family: var(--ct-font-family-display); font-weight: var(--ct-font-weight-bold);
  font-size: var(--ct-font-size-4xl); line-height: var(--ct-font-line-height-tight);
  color: var(--ct-text-tertiary); font-variant-numeric: tabular-nums;
}
.st-nivel--topo .st-nivel__num { color: var(--ct-text-accent); }
.st-nivel p { color: var(--ct-text-secondary); }

/* Degraus viram atalhos: cada um desce até os níveis com aquele já escolhido. */
a.st-escada__degrau { text-decoration: none; transition: var(--ct-transition-colors), transform var(--ct-motion-duration-base) var(--ct-motion-easing-standard); }
a.st-escada__degrau:hover { background: var(--ct-bg-accent-subtle); border-block-start-color: var(--ct-border-accent); color: var(--ct-text-accent); }
a.st-escada__degrau:focus-visible { outline: var(--ct-size-focus-width) solid var(--ct-border-focus); outline-offset: var(--ct-size-focus-offset); }

/* ── seletor de nível ────────────────────────────────────────────────────────
   Os níveis viram um grupo de botões; ao lado, a matriz do que entra. Cada
   nível inclui o anterior, então a matriz é cumulativa e a barra só cresce. */
.st-seletor { display: grid; gap: var(--ct-space-8); align-items: start; }
@media (width >= 1024px) { .st-seletor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ct-space-12); } }
.st-seletor .st-niveis { grid-template-columns: 1fr; gap: var(--ct-space-3); }
.st-seletor .st-nivel { padding: 0; border: 0; }
.st-seletor .st-nivel::before { content: none; }
.st-nivel__botao {
  inline-size: 100%; display: grid; grid-template-columns: auto 1fr; gap: var(--ct-space-1) var(--ct-space-5); align-items: baseline;
  padding: var(--ct-space-5) var(--ct-space-6);
  background: transparent; color: var(--ct-text-primary);
  border: var(--ct-border-width-hairline) solid var(--ct-border-default);
  border-radius: var(--ct-radius-card);
  text-align: start; cursor: pointer; font: inherit;
  transition: var(--ct-transition-colors), transform var(--ct-motion-duration-base) var(--ct-motion-easing-standard);
}
.st-nivel__botao .st-nivel__num { grid-row: span 2; }
.st-nivel__texto { color: var(--ct-text-secondary); }
.st-nivel__botao:hover { border-color: var(--ct-border-control-hover); background: var(--ct-bg-surface); }
.st-nivel__botao.is-incluso { border-color: color-mix(in srgb, var(--ct-text-accent) 35%, transparent); }
.st-seletor .st-nivel--topo .st-nivel__num { color: var(--ct-text-tertiary); }
.st-seletor .st-nivel__botao:is(.is-incluso, [aria-pressed="true"]) .st-nivel__num { color: var(--ct-text-accent); }
.st-nivel__botao[aria-pressed="true"] { background: var(--ct-bg-surface); border-color: var(--ct-border-accent); box-shadow: var(--ct-shadow-2); }
.st-nivel__botao:focus-visible { outline: var(--ct-size-focus-width) solid var(--ct-border-focus); outline-offset: var(--ct-size-focus-offset); }

.st-matriz {
  padding: var(--ct-space-8);
  background: var(--ct-bg-canvas); color: var(--ct-text-primary);
  border-radius: var(--ct-radius-card); box-shadow: var(--ct-shadow-3);
}
@media (width >= 1024px) { .st-matriz { position: sticky; inset-block-start: calc(var(--ct-space-20) + var(--ct-space-4)); } }
.st-matriz__cabecalho { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ct-space-4); }
.st-matriz__conta { display: flex; align-items: baseline; gap: var(--ct-space-1); font-variant-numeric: tabular-nums; }
.st-matriz__barra {
  margin-block: var(--ct-space-5) var(--ct-space-6);
  block-size: var(--ct-space-1); border-radius: var(--ct-radius-full); overflow: hidden;
  background: color-mix(in srgb, var(--ct-text-primary) 14%, transparent);
}
.st-matriz__barra span {
  display: block; block-size: 100%; background: var(--ct-bg-accent);
  transform: scaleX(var(--_frac, 0.55)); transform-origin: 0 50%;
  transition: transform var(--ct-motion-duration-slower) var(--ct-motion-easing-emphasized);
}
.st-matriz__lista { list-style: none; margin: 0; padding: 0; }
.st-matriz__item {
  display: grid; grid-template-columns: var(--ct-space-6) 1fr auto; gap: var(--ct-space-4); align-items: center;
  padding-block: var(--ct-space-3);
  border-block-start: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
  color: var(--ct-text-primary);
  transition: opacity var(--ct-motion-duration-slow) var(--ct-motion-easing-standard);
  transition-delay: calc(var(--_k, 0) * var(--ct-motion-duration-fast) / 5);
}
.st-matriz__nivel { color: var(--ct-text-tertiary); white-space: nowrap; }
.st-matriz__marca {
  display: grid; place-items: center;
  inline-size: var(--ct-space-6); block-size: var(--ct-space-6);
  border: var(--ct-border-width-thick) solid var(--ct-border-strong);
  border-radius: var(--ct-radius-full);
  color: var(--ct-text-on-accent);
  transition: var(--ct-transition-colors);
}
.st-matriz__marca .ct-icon { inline-size: var(--ct-size-icon-xs); block-size: var(--ct-size-icon-xs); opacity: 0; transition: opacity var(--ct-motion-duration-base) var(--ct-motion-easing-standard); }
.st-matriz__item.is-incluso .st-matriz__marca { background: var(--ct-bg-accent); border-color: var(--ct-border-accent); }
.st-matriz__item.is-incluso .st-matriz__marca .ct-icon { opacity: 1; }
.st-matriz__item:not(.is-incluso) { opacity: 0.4; }
@media (width < 640px) { .st-matriz__nivel { display: none; } .st-matriz__item { grid-template-columns: var(--ct-space-6) 1fr; } }

@media (prefers-reduced-motion: no-preference) {
  a.st-escada__degrau:hover { transform: translateY(calc(-1 * var(--ct-space-1))); }
  .st-nivel__botao:hover { transform: translateX(var(--ct-space-1)); }
}