/* ===== #portfolio — nao vaza para fora de .bl-portfolio / .bl-caso ===== */
/* Tres cartoes de largura igual viraram tres registros. Junto com a moldura
   saiu a inclinacao 3D no hover (data-inclinavel): sem cartao ela nao tem
   superficie para inclinar, e era o gesto mais generico da pagina. */
.bl-portfolio__lista { margin-top: var(--bl-e5); display: grid; gap: var(--bl-e5); }
.bl-caso { padding-top: var(--bl-e5); --bl-regua-y: var(--bl-e5); }
.bl-caso:first-child { padding-top: 0; }
.bl-caso:first-child::before { content: none; }
.bl-caso__corpo { display: grid; gap: var(--bl-e3); }
@media (min-width: 900px) {
  .bl-caso__corpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--bl-e4); row-gap: var(--bl-e3);
  }
  .bl-caso__topo { grid-column: 1 / -1; }
  .bl-caso__numero { grid-column: 1; }
  .bl-caso__stack { grid-column: 2; align-self: end; }
}
.bl-caso__topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--bl-e3); }
.bl-caso__topo h3 { margin: 0; }
.bl-caso__setor {
  font-size: .75rem; letter-spacing: var(--bl-track-marca);
  text-transform: uppercase; color: var(--bl-texto-fraco); margin: 0;
}
.bl-caso__problema, .bl-caso__feito {
  font-size: .9375rem; color: var(--bl-texto-fraco); margin: 0; max-width: 44ch;
}
.bl-caso__feito { color: var(--bl-texto); }
.bl-caso__numero {
  margin: 0;
  font-family: var(--bl-fonte-titulo); font-weight: 700;
  font-size: 1.125rem; font-variant-numeric: tabular-nums;
}
.bl-caso__stack {
  margin: 0; font-family: var(--bl-fonte-mono); font-size: .75rem;
  color: var(--bl-ambar-700);   /* 4,80:1 no branco */
}

/* A linha que diz que os tres casos sao amostra, nao cardapio. Medida em
   64ch porque ela e argumento corrido, nao rotulo. */
.bl-portfolio__nota { color: var(--bl-texto-fraco); max-width: 64ch; }