/* Container, ritmo vertical e a medida do registro. Nenhuma regra de secao. */
:root {
  --bl-e1: .375rem;  --bl-e2: .75rem;  --bl-e3: 1.25rem;
  --bl-e4: 2rem;     --bl-e5: 3.5rem;  --bl-e6: 5.5rem;  --bl-e7: 8rem;
  --bl-largura: 1180px;

  /* A medida assimetrica da pagina. Uma so, calculada uma vez, usada por
     TODO .bl-registro — e o que garante que a coluna de anotacao caia no
     mesmo x do topo ao rodape. Se cada secao escolhesse a sua, a coluna
     deixaria de ser coluna. */
  --bl-margem: clamp(9rem, 15vw, 13rem);
  --bl-margem-vao: clamp(1.25rem, 3vw, 2.75rem);
}
.bl-container {
  width: min(100% - 2 * var(--bl-e4), var(--bl-largura));
  margin-inline: auto;
}
@media (max-width: 640px) {
  .bl-container { width: calc(100% - 2 * var(--bl-e3)); }
}
.bl-secao { padding-block: clamp(3.5rem, 2rem + 6vw, 8rem); }
/* Eram sete alternancias branco/nevoa de ~1.000px cada, uma por secao, sem
   codificar nada — paridade de indice. Sobraram tres eventos tonais, e cada
   um significa uma coisa: branco = o argumento, nevoa = a prova (em #prova),
   ambar-100 = a oferta (investimento, objecoes, contato, que sao um bloco
   so), grafite-900 = o rodape.

   --bl-ambar-100 (#FBF1E0) tinha zero usos. Aqui ele e SUPERFICIE, nao
   texto: 13,33:1 com o grafite-900, 4,66:1 com o cinza de apoio, 8,95:1 com
   o grafite-700 — medido. O ambar-700 escrito da 4,29:1 aqui e por isso NAO
   entra no bloco (so como forma preenchida, que pede 3:1). Cor literal
   porque --bl-fundo-alt tem papel proprio e o tema e claro fixo. */
.bl-secao--alt { background: var(--bl-ambar-100); }

/* ===== registro =====================================================
   A coluna estreita da esquerda guarda de onde a afirmacao veio; a da
   direita guarda a afirmacao. Empilhado abaixo de 720px: a nota vira
   rodape da propria afirmacao, que e o comportamento natural dela em
   coluna estreita.

   Regra dura: a coluna da esquerda nao ganha regua, borda nem fundo. Ela
   e irregular e quase sempre vazia — e so existe onde ha fato datado. No
   dia em que ela ficar bonita e regular, virou decoracao e sai. */
.bl-registro { display: grid; gap: var(--bl-e2); }
@media (min-width: 720px) {
  .bl-registro {
    grid-template-columns: var(--bl-margem) minmax(0, 1fr);
    column-gap: var(--bl-margem-vao);
    align-items: start;
  }
  /* tudo cai na coluna de leitura; so o que for .bl-margem sobe para a margem */
  .bl-registro > * { grid-area: 1 / 2; }
  .bl-registro > .bl-margem { grid-area: 1 / 1; }
}

/* ===== a regua de linha ==============================================
   A regua horizontal que separa linhas de um registro pertence a COLUNA DE
   LEITURA. Atravessando a margem, ela transformaria a margem em celula de
   tabela e o registro em jornal — que e exatamente o que esta direcao nao
   e. Por isso ela nao e border no elemento do registro: e um pseudo
   posicionado na coluna 2. Abaixo de 720px, onde nao ha margem, ela volta a
   atravessar a linha inteira, que ali e o certo.
   O deslocamento (--bl-regua-y) e de quem usa: cada secao sabe onde estava
   a sua borda. */
.bl-regua { position: relative; }
.bl-regua::before, .bl-regua--fim::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: 1px; background: var(--bl-borda);
}
.bl-regua::before { top: calc(var(--bl-regua-y, 0px) * -1); }
.bl-regua--fim::after { bottom: calc(var(--bl-regua-y, 0px) * -1); }
@media (min-width: 720px) {
  /* `.bl-registro > *` nao alcanca pseudo-elemento: o grid-area vai aqui.
     Com posicao de grade declarada, o bloco continente do absoluto passa a
     ser a area 1/2 — e a regua para de existir sobre a margem. */
  .bl-regua::before, .bl-regua--fim::after { grid-column: 2; grid-row: 1; }
}

/* .bl-grade--3 e .bl-grade--4 sairam junto com as quatro grades de largura
   igual que usavam: prova, servicos, portfolio e investimento viraram
   registro. Regra sem cliente e mentira sobre a pagina.

   Isso tambem fecha o buraco do tablet (641-899px, onde nao existia grade
   de duas colunas em lugar nenhum e a pagina ia de 7.318px para 9.280px):
   o registro liga em 720px, nao em 900. */

/* Secoes alternadas em sequencia sao UM bloco, nao tres secoes: o vao
   interno encolhe para metade. E a unica alternancia de fundo que sobrou
   codifica alguma coisa — argumento em branco, oferta em nevoa. */
.bl-secao--alt + .bl-secao--alt { padding-top: clamp(2rem, 1rem + 3vw, 4rem); }