/* ===== #metodo — nao vaza para fora de .bl-metodo ===== */
/* Era a secao mais alta e a menos densa da pagina: 1.264px de altura, 2,4%
   de tinta, painel sticky de 562x216 com 79,3% de caixa vazia e 641px de
   coluna direita em branco embaixo. O vao entre estagios caiu de 12rem para
   5,5rem e o painel perdeu a moldura: agora e leitura, nao cartao. */
.bl-metodo__palco { margin-top: var(--bl-e5); display: grid; gap: var(--bl-e4); }
/* O trilho abre em 720, junto com o de `.bl-registro` — nao em 960. Enquanto
   ele so abria aqui embaixo, a faixa de 720 a 959px punha o <h2> do metodo na
   espinha e os tres estagios de 166 a 172px A ESQUERDA dela: o leitor
   recomecava a varredura no meio da pagina. Medido nas quatro larguras.
   Quem precisa dos 960 e a TERCEIRA faixa, a leitura ao vivo — o trilho nao. */
@media (min-width: 720px) {
  .bl-metodo__palco {
    grid-template-columns: var(--bl-margem) minmax(0, 1fr);
    column-gap: var(--bl-margem-vao);
    align-items: start;
  }
  /* mesmo padrao de .bl-registro: tudo cai na leitura, so a margem sobe */
  .bl-metodo__palco > * { grid-column: 2; }
  .bl-metodo__palco > .bl-fonte { grid-column: 1; grid-row: 1; margin-top: 3.6rem; }
}
@media (min-width: 960px) {
  .bl-metodo__palco {
    /* Tres medidas: margem de procedencia, estagios, leitura ao vivo. */
    grid-template-columns: var(--bl-margem) minmax(0, 1fr) minmax(0, .8fr);
    row-gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  }
  .bl-metodo__sentinela[data-estagio="1"] { grid-area: 1 / 2; }
  .bl-metodo__sentinela[data-estagio="2"] { grid-area: 2 / 2; }
  .bl-metodo__sentinela[data-estagio="3"] { grid-area: 3 / 2; }
  /* vence `.bl-metodo__palco > *` por vir depois, com a mesma especificidade */
  .bl-metodo__visual { grid-area: 1 / 3 / 4 / 4; }
}
/* Classe dobrada, como em investimento.css ja faz. Sozinho,
   .bl-metodo__num e (0,1,0) e perde para .bl-metodo__sentinela p (0,1,1), que
   vem depois: o ambar ficava no arquivo e nunca chegava a tela. */
.bl-metodo__sentinela .bl-metodo__num {
  font-family: var(--bl-fonte-mono); font-weight: 700; font-size: .9375rem;
  letter-spacing: .12em;
  line-height: 1; margin: 0 0 var(--bl-e2); color: var(--bl-ambar-700);   /* 4,80:1 no branco */
}
.bl-metodo__sentinela h3 { margin-bottom: var(--bl-e2); max-width: 22ch; }
.bl-metodo__sentinela p { color: var(--bl-texto-fraco); font-size: .9375rem; }
.bl-metodo__sentinela strong { color: var(--bl-texto); }
.bl-metodo code { font-family: var(--bl-fonte-mono); font-size: .8125rem; }
/* O painel deixou de ser cartao e deixou de ser crossfade. Os tres estagios
   ficam SEMPRE legiveis, empilhados: e o indice das tres entradas do metodo,
   e o que rola marca qual delas esta sendo lida agora. O que a caixa antiga
   fazia — 562x216px para repetir duas linhas que o <h3> ao lado ja dizia,
   79,3% de vazio — some junto com ela.

   Trocar opacidade por peso tambem elimina uma fragilidade real: paineis
   sobrepostos em crossfade saem embaralhados em captura de pagina inteira,
   porque o navegador refaz o layout com a janela gigante no meio da
   transicao. Aqui nao ha o que embaralhar. */
.bl-metodo__visual { display: grid; gap: var(--bl-e4); align-content: start; }
@media (min-width: 960px) {
  .bl-metodo__visual { position: sticky; top: 140px; }
}
.bl-metodo__painel { transition: color .35s ease, transform .35s ease; }
html.js .bl-metodo__painel { color: var(--bl-texto-fraco); }        /* 5,22:1 */
html.js .bl-metodo__painel[data-ativo="1"] {
  color: var(--bl-texto); transform: translateX(.35rem);            /* 14,92:1 */
}
@media (prefers-reduced-motion: reduce) {
  .bl-metodo__painel { transition: none; }
  html.js .bl-metodo__painel[data-ativo="1"] { transform: none; }
}
.bl-metodo__rotulo {
  font-family: var(--bl-fonte-mono); font-size: .75rem;
  letter-spacing: var(--bl-track-marca);
  text-transform: uppercase; color: var(--bl-ambar-700);   /* 4,80:1 no branco */
}
.bl-metodo__painel p {
  margin: var(--bl-e1) 0 0; color: inherit;
  font-family: var(--bl-fonte-titulo); font-weight: 700;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.4375rem);
  line-height: 1.2; letter-spacing: -.02em;
}