/* espaco.css — o RITMO do PRUMO, refeito (12/09/2026).

   Pedido dele ao aprovar o profundidade: "melhorar os espaçamentos entre as
   seções". Carregado DEPOIS do tema-prumo.css, e só nas páginas novas: a
   `/` continua com o espaçamento antigo, para a comparação ser honesta.

   O diagnóstico não era "falta ar". Era ar mal distribuído: a seção tinha uma
   margem externa grande e, dentro dela, rótulo, título e conteúdo quase
   colados. O olho lê isso como bloco apertado dentro de espaço vazio, e a
   impressão é de aperto, não de calma.

   Então em vez de só aumentar o número, o espaçamento virou ESCALA. Cada
   degrau é ~1,6x o anterior (perto da razão áurea), o que faz duas distâncias
   vizinhas nunca parecerem "quase iguais" — que é o que borra a hierarquia:

     --e1  0,5rem    encostado      (rótulo e seu fio)
     --e2  0,8rem    próximo        (linha e sua legenda)
     --e3  1,3rem    junto          (entre blocos da mesma grade)
     --e4  2,1rem    separado       (título e conteúdo da seção)
     --e5  3,4rem    outro assunto  (topo da seção e a grade)
     --e6  5,5rem    outra seção    (respiro entre seções)
     --e7  8,9rem    outro capítulo (hero e o corpo da página)                */

:root {
  --e1: .5rem;
  --e2: .8rem;
  --e3: 1.3rem;
  --e4: 2.1rem;
  --e5: 3.4rem;
  --e6: 5.5rem;
  --e7: 8.9rem;
}

/* ------------------------------------------------------------- seções ---- */
/* O respiro entre duas seções é a SOMA dos dois paddings. Por isso o valor de
   cada uma é metade do respiro desejado, e não o respiro inteiro: com 5,5rem
   em cima e embaixo o intervalo daria 11rem, que não é calma, é buraco. */
.secao { padding: clamp(var(--e5), 7.5vh, var(--e6)) 0; }

/* Seção que troca de fundo não precisa do mesmo ar: a mudança de cor já separa.
   Onde o fundo NÃO muda, o espaço é a única marca, então ele cresce. */
.secao + .secao:not(.secao--alt):not(.poco) { padding-top: clamp(var(--e6), 9vh, var(--e7)); }

/* ------------------------------------------------------- dentro da seção -- */
.rotulo { margin-bottom: var(--e4); }        /* era 1rem  */
.secao__topo { margin-bottom: var(--e5); }   /* era 1,6rem */
.secao__topo h2 { margin-bottom: var(--e2); }
.secao__topo p { margin-bottom: 0; }

/* ---------------------------------------------------------------- hero --- */
.hero { padding: clamp(var(--e6), 11vh, var(--e7)) 0 clamp(var(--e5), 6vh, var(--e6)); }
.hero .rotulo { margin-bottom: var(--e5); }
.hero h1 { margin-bottom: var(--e3); }
.hero__sub { margin-bottom: 0; }
.medidas { margin-top: var(--e5); }          /* era 2rem */
.botoes { margin-top: var(--e4); }

/* ----------------------------------------------------------- respiração -- */
/* Bloco apertado por dentro faz a página parecer apertada mesmo com margem
   grande por fora. O ar de dentro sobe junto com o de fora. */
.grade { gap: var(--e3); }
.bloco { padding: 1.6rem 1.7rem; }
.bloco h3 { margin-bottom: var(--e2); }
.bloco p:last-child { margin-bottom: 0; }
.medida { padding: 1.4rem 1.5rem 1.3rem; }
.medida__rotulo { margin-bottom: var(--e2); }
.medida__nota { margin-top: var(--e2); }

.rodape { padding: clamp(var(--e5), 6vh, var(--e6)) 0 var(--e6); }

/* ------------------------------------------------------------- celular --- */
/* Num tela estreita a escala inteira encolhe um degrau: o que é calma no
   monitor vira rolagem vazia no telefone. */
@media (max-width: 620px) {
  :root {
    --e4: 1.6rem; --e5: 2.4rem; --e6: 3.6rem; --e7: 5rem;
  }
  .bloco { padding: 1.35rem 1.4rem; }
}