/*
 * Ukari — componentes das páginas novas.
 *
 * O `bridge.css` faz o Bootstrap falar a língua dos tokens; este arquivo é o
 * que existe além do Bootstrap: a moldura de tela de produto, o quadro de
 * estágios, a lua e o ritmo vertical das seções.
 *
 * REGRA DE COR
 * Nada aqui declara cor literal. Preto e branco não é ausência de sistema, é
 * um sistema com dois valores — e ele já está em `tokens.css`. Um `#fff` solto
 * aqui é exatamente o que quebra o tema escuro, e já quebrou uma vez.
 */

/* --- Ritmo --------------------------------------------------------------- */

.st-section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.st-section + .st-section { border-top: 1px solid var(--st-line); }

.st-kicker {
  color: var(--st-ink-muted);
  font: 700 .72rem/1.2 var(--st-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.st-title {
  margin: .9rem 0 1.5rem;
  font-family: var(--st-font-display);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.st-lead {
  max-width: 46rem;
  color: var(--st-ink-muted);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
}

/* --- Selo de estágio -----------------------------------------------------
   Diz em que pé o produto está, na primeira dobra. Um produto em construção
   descrito no presente é descoberto em cinco minutos de conversa, e quem
   descobre não volta. */
.st-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border: 1px solid currentColor;
  border-radius: 2rem;
  font: 600 .74rem var(--st-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- Tela de produto ------------------------------------------------------
   A moldura que mostra o sistema funcionando. Sem sombra difusa: borda de 1px
   e um deslocamento sólido, que é a linguagem do resto do site. */
.st-panel {
  background: var(--st-surface);
  border: 1px solid var(--st-line-strong);
  border-radius: var(--st-radius);
  overflow: hidden;
}

.st-panel-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--st-line);
  color: var(--st-ink-muted);
  font: 600 .72rem var(--st-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.st-panel-body { padding: .25rem; }

/* Tabela de dados: colunas numéricas alinhadas, linhas separadas por 1px.
   `tabular-nums` é o que faz uma coluna de quantidades ler como coluna. */
.st-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .9rem; }
.st-table th, .st-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--st-line); text-align: left; }
.st-table th { color: var(--st-ink-faint); font: 600 .7rem var(--st-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.st-table tr:last-child td { border-bottom: 0; }
.st-table .st-num { font-family: var(--st-font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* --- Quadro de estágios --------------------------------------------------- */

.st-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13rem, 1fr);
  gap: .75rem;
  padding: .75rem;
  /* No telefone o quadro rola na horizontal, como o quadro rola no produto.
     Encolher as colunas até caber transformaria quatro estágios em quatro
     tiras ilegíveis. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.st-column {
  min-width: 0;
  padding: .75rem;
  background: var(--st-bg-sunken);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
}

.st-column-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .7rem;
  color: var(--st-ink);
  font: 600 .78rem var(--st-font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.st-card {
  padding: .6rem .7rem;
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: .375rem;
  font-size: .88rem;
  line-height: 1.35;
}
.st-card + .st-card { margin-top: .5rem; }

/* --- A lua ---------------------------------------------------------------- */

.st-moon { display: block; flex: none; width: 1em; height: 1em; color: currentColor; }
.st-moon-lg { width: 1.75rem; height: 1.75rem; }

/* --- Lista de recursos ---------------------------------------------------- */

.st-feature {
  height: 100%;
  padding: 1.4rem 0 0;
  border-top: 2px solid var(--st-ink);
}
.st-feature h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 650; letter-spacing: -.02em; }
.st-feature p { max-width: 34ch; margin: 0; color: var(--st-ink-muted); font-size: .95rem; line-height: 1.55; }

/* --- Faixa de chamada final ----------------------------------------------- */

.st-callout {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--st-ink);
}
.st-callout p { max-width: 34rem; margin: .7rem 0 0; color: var(--st-ink-muted); }

@media (max-width: 767.98px) {
  .st-callout { display: block; }
  .st-callout .btn { margin-top: 1.5rem; }
}

/* --- Superfície de marca --------------------------------------------------
   Escura nos dois temas: é assinatura, não superfície de leitura. As cores
   ficam declaradas juntas, de propósito — quando fundo e texto vinham de
   tokens diferentes, uma troca de tema já produziu preto sobre preto. */
.st-dark {
  position: relative;
  /* A camada de paralaxe é maior que a seção de propósito — precisa sobrar
     desenho para se mover. Sem o corte aqui, ela escapa e a grade aparece
     riscando a seção branca de baixo. */
  overflow: hidden;
  background: #0d0d0f;
  color: #ffffff;
  --ukari-halo: #0d0d0f;
}
.st-dark > .container { position: relative; z-index: 1; }
.st-dark .st-kicker, .st-dark .st-lead { color: #b9b9c0; }
.st-dark h1, .st-dark h2, .st-dark h3, .st-dark .st-title { color: #ffffff; }
.st-dark .st-panel { background: #151517; border-color: #33333a; }
.st-dark .st-panel-head { border-color: #33333a; color: #b9b9c0; }
.st-dark .st-table th { color: #8f8f98; }
.st-dark .st-table th, .st-dark .st-table td { border-color: #26262b; }
.st-dark .st-feature { border-top-color: #ffffff; }
.st-dark .st-feature p { color: #b9b9c0; }
.st-dark .st-badge { color: #ffffff; }
.st-dark .btn-outline-dark { color: #ffffff; border-color: rgba(255, 255, 255, .45); }
.st-dark .btn-outline-dark:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }

/* --- Faixa de confiança ---------------------------------------------------
   Cada item é uma afirmação com link para a prova — e é por isso que são
   links, e não imagens. Um selo é uma figura: não leva a lugar nenhum, não
   envelhece junto com o fato que representa e, quando o fato muda, continua
   dizendo a mesma coisa. Aqui, se o TLS cair de nota, o relatório do SSL Labs
   passa a mostrar a nota nova no mesmo endereço. */
.st-selos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--st-line);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  overflow: hidden;
}

.st-selo {
  display: block;
  padding: 1.1rem 1rem;
  background: var(--st-surface);
  color: inherit;
  text-decoration: none;
  transition: background-color .16s ease;
}
.st-selo:hover, .st-selo:focus { background: var(--st-bg-sunken); color: inherit; }
.st-selo i { display: block; margin-bottom: .55rem; font-size: 1.15rem; }
.st-selo-nome { display: block; font-size: .92rem; font-weight: 650; letter-spacing: -.01em; }
.st-selo-prova { display: block; margin-top: .2rem; color: var(--st-ink-muted); font-size: .8rem; line-height: 1.4; }

.st-dark .st-selos { background: #33333a; border-color: #33333a; }
.st-dark .st-selo { background: #151517; }
.st-dark .st-selo:hover, .st-dark .st-selo:focus { background: #1c1c20; }
.st-dark .st-selo-prova { color: #b9b9c0; }

/* O Bootstrap pinta `<code>` de magenta (`#d63384`). Numa página em preto e
   branco isso é a única cor da tela, e ela cai justamente sobre nome de
   algoritmo — o dado que o revisor técnico veio ler. */
code, .article-content code { color: var(--st-ink); }


/* O MOVIMENTO SAIU DAQUI, e a separação é o ponto: este arquivo descreve o que
   os componentes SÃO — a moldura de tela, o quadro de estágios, a faixa de
   confiança. O que eles FAZEM (entrar, revelar, acompanhar a rolagem, seguir o
   ponteiro) mora em `movimento.css`, ao lado do `movimento.js` que o liga.
   Enquanto as duas coisas estavam no mesmo arquivo, uma regra de entrada e uma
   regra de aparência disputavam a mesma propriedade em dois lugares. */