/* ===== #stack — nao vaza para fora de .bl-stack ===== */
/* Malha de fio de cabelo: o `gap: 1px` sobre um fundo de borda desenha a
   grade inteira sem uma linha de `border` por celula.
   A contagem de colunas e FIXA por faixa, nao `auto-fit`. Com `auto-fit` a
   ultima fileira sobrava incompleta e o fundo de borda aparecia crua na
   celula vazia: um retangulo cinza no fim da malha, que a captura de
   02/09/2026 pegou. 2, 3 e 6 dividem tanto os 12 icones da home quanto os 6
   das paginas de servico, entao as tres faixas fecham sempre. Trocar essas
   contagens exige rever os CONJUNTOS que alimentam as parciais. */
.bl-stack__nota { color: var(--bl-texto-fraco); max-width: 56ch; }

.bl-stack__lista {
  list-style: none; padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--bl-borda);
  border: 1px solid var(--bl-borda);
}
@media (min-width: 640px) {
  .bl-stack__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .bl-stack__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.bl-stack__item {
  display: flex; align-items: center; gap: var(--bl-e2);
  padding: var(--bl-e3) var(--bl-e2);
  background: var(--bl-fundo);
  min-width: 0;
}
@media (min-width: 640px) {
  .bl-stack__item { padding: var(--bl-e3); }
}
/* O icone fica monocromatico em repouso e so acende a cor da marca no
   ponteiro. Treze marcas coloridas ao mesmo tempo viram mural de adesivo e
   disputam com o ambar, que e a unica cor que a pagina promete. */
.bl-stack__icone {
  flex: none; width: 1.75rem; height: 1.75rem;
  color: var(--bl-texto-fraco);
  transition: color .18s ease;
}
@media (hover: hover) {
  .bl-stack__item:hover .bl-stack__icone { color: var(--bl-marca); }
}
@media (prefers-reduced-motion: reduce) {
  .bl-stack__icone { transition: none; }
}
/* Sem `overflow-wrap: anywhere`: com ele "PostgreSQL" quebrava em
   "PostgreSQ / L" e "Cloudflare" em "Cloudflar / e". Nome de ferramenta
   quebrado no meio nao e reconhecido, e o objetivo da faixa e justamente ser
   reconhecida de relance. Quebra so no espaco de "GitHub Actions". */
.bl-stack__nome {
  font-family: var(--bl-fonte-mono); font-size: .75rem; line-height: 1.3;
  color: var(--bl-texto-fraco);
  min-width: 0;
}

/* Separacao dos dois grupos. O rotulo nao e enfeite: sem ele a segunda
   malha leria como continuacao da primeira, e a promessa ("pode entrar")
   passaria por prova ("esta rodando"). */
.bl-stack__grupo { margin-top: var(--bl-e5); }
.bl-stack__grupo + .bl-stack__grupo { margin-top: var(--bl-e6); }

.bl-stack__rotulo {
  font-family: var(--bl-fonte-mono); font-size: .6875rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--bl-texto-fraco);
  margin: 0 0 var(--bl-e2);
}

/* O segundo grupo fecha num <details> nativo (14/10/2026). Eram 24 logos a
   vista na home e 12 em cada servico, e quem nao e tecnico nao le nome de
   ferramenta: le a frase. O que roda fica aberto porque e prova; o resto
   abre no resumo, que diz quantas sao e para que servem. Abre sem JS, pelo
   teclado e pelo leitor de tela, e a busca da pagina acha o que esta dentro.

   Fechado, o grupo nao precisa do vao de 88px que separava duas malhas: o
   rotulo e o resumo ja leem como outra coisa, e o vao volta aos 56px do
   primeiro. O marcador e o mesmo cursor da marca das objecoes, preenchido
   em ambar-700 (grafico de estado, pede 3:1), e gira 90 graus ao abrir. O
   summary tem 44px de altura minima, que e o alvo de toque. */
.bl-stack__grupo + .bl-stack__mais { margin-top: var(--bl-e5); }
.bl-stack__mais > summary {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--bl-e2);
  min-height: 2.75rem;
}
.bl-stack__mais > summary::-webkit-details-marker { display: none; }
.bl-stack__mais > summary .bl-stack__rotulo { grid-column: 1 / -1; grid-row: 1; }
/* O marcador fica na altura da primeira linha do resumo, e nao no meio do
   bloco: a 390px o resumo quebra em duas linhas. */
.bl-stack__mais > summary::before {
  content: ""; grid-column: 1; grid-row: 2;
  width: .6875rem; height: .5011rem;
  margin-top: calc((.9375rem * 1.5 - .5011rem) / 2);
  background: var(--bl-ambar-700);
  clip-path: polygon(0% 0%, 100% 57.68%, 36.57% 100%, 36.57% 56.66%);
  transition: transform .2s var(--bl-ease-mov);
}
.bl-stack__mais[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .bl-stack__mais > summary::before { transition: none; }
}
.bl-stack__resumo {
  grid-column: 2; grid-row: 2;
  font-size: .9375rem; line-height: 1.5; color: var(--bl-texto);
}
.bl-stack__mais[open] > summary { margin-bottom: var(--bl-e3); }

/* A cor de marca de cada icone, do proprio Simple Icons. */
.bl-stack__item[data-marca="python"]          { --bl-marca: #3776AB; }
.bl-stack__item[data-marca="postgresql"]      { --bl-marca: #4169E1; }
.bl-stack__item[data-marca="fastapi"]         { --bl-marca: #009688; }
.bl-stack__item[data-marca="supabase"]        { --bl-marca: #3FCF8E; }
.bl-stack__item[data-marca="docker"]          { --bl-marca: #2496ED; }
.bl-stack__item[data-marca="telegram"]        { --bl-marca: #26A5E4; }
.bl-stack__item[data-marca="whatsapp"]        { --bl-marca: #25D366; }
.bl-stack__item[data-marca="traefikproxy"]    { --bl-marca: #24A1C1; }
.bl-stack__item[data-marca="cloudflare"]      { --bl-marca: #F38020; }
.bl-stack__item[data-marca="githubactions"]   { --bl-marca: #2088FF; }
.bl-stack__item[data-marca="ubuntu"]          { --bl-marca: #E95420; }
.bl-stack__item[data-marca="typescript"]      { --bl-marca: #3178C6; }
.bl-stack__item[data-marca="react"]           { --bl-marca: #61DAFB; }
.bl-stack__item[data-marca="tailwindcss"]     { --bl-marca: #06B6D4; }
.bl-stack__item[data-marca="redis"]           { --bl-marca: #FF4438; }
.bl-stack__item[data-marca="celery"]          { --bl-marca: #37814A; }
.bl-stack__item[data-marca="rabbitmq"]        { --bl-marca: #FF6600; }
.bl-stack__item[data-marca="mongodb"]         { --bl-marca: #47A248; }
.bl-stack__item[data-marca="nginx"]           { --bl-marca: #009639; }
.bl-stack__item[data-marca="grafana"]         { --bl-marca: #F46800; }
.bl-stack__item[data-marca="n8n"]             { --bl-marca: #EA4B71; }
.bl-stack__item[data-marca="googlesheets"]    { --bl-marca: #34A853; }
/* Next.js e pandas tem marca preta ou quase preta (#000000 e #150458):
   somem no fundo escuro e nao se distinguem do repouso no claro. Ficam com a
   cor do texto da pagina, que e a leitura honesta de um logotipo
   monocromatico. */
.bl-stack__item[data-marca="nextdotjs"],
.bl-stack__item[data-marca="pandas"]        { --bl-marca: var(--bl-texto); }