.metodo{
  --vao:clamp(24px,2.6vw,40px);
  --ponto-l:46px;--ponto-a:36px;
  --linha:rgba(239,237,238,.42);
}
#metodo .rot,#metodo .lede,.metodo__passo p{color:var(--branco)}
#metodo .tit{color:var(--papel)}
.metodo__cabeca{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--vao);align-items:end;margin-bottom:clamp(56px,6.5vw,92px)}
.metodo__cabeca > div{grid-column:1 / 3}
.metodo__cabeca .lede{grid-column:3 / 5;margin:0;max-width:46ch}
.metodo__tese{margin:14px 0 0;max-width:15ch}
.metodo__passos{position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--vao)}
.metodo__passos::before{content:'';position:absolute;left:-100vw;right:-100vw;
  top:calc(var(--ponto-a) / 2 - .75px);height:1.5px;
  background:repeating-linear-gradient(90deg,var(--linha) 0 7px,transparent 7px 13px)}
.metodo__passo{position:relative}
.metodo__ponto{position:relative;z-index:1;display:grid;place-items:center;
  width:var(--ponto-l);height:var(--ponto-a);
  background:var(--papel);color:var(--tinta);
  font-family:var(--serif);font-size:19px;line-height:1;
  box-shadow:0 1px 0 rgba(46,42,50,.10),0 6px 14px rgba(46,42,50,.28);
  transform:rotate(var(--giro,0deg))}
.metodo__passo:nth-child(1){--giro:-1.6deg}
.metodo__passo:nth-child(2){--giro:1.2deg}
.metodo__passo:nth-child(3){--giro:-.8deg}
.metodo__passo:nth-child(4){--giro:1.5deg}
/* piso de 24px: abaixo disso o papel sobre o campo verde reprova contraste */
.metodo__nome{font-size:clamp(24px,2.1vw,28px);line-height:1.15;
  margin:clamp(22px,2.4vw,30px) 0 12px}
.metodo__passo p{font-size:16px;line-height:1.62;margin:0;max-width:34ch}
@media (max-width:1080px){
  .metodo__cabeca{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .metodo__cabeca > div,.metodo__cabeca .lede{grid-column:auto}
  .metodo__cabeca .lede{max-width:54ch}
  .metodo__passos{--fila:clamp(34px,5vw,44px);
    grid-template-columns:minmax(0,1fr);row-gap:var(--fila)}
  .metodo__passos::before{display:none}
  .metodo__passo{display:grid;grid-template-columns:var(--ponto-l) minmax(0,1fr);
    column-gap:clamp(18px,2.4vw,26px)}
  .metodo__ponto{grid-row:1 / 3;font-size:16px}
  .metodo__nome{margin:2px 0 8px}
  .metodo__passo p{max-width:54ch}
  .metodo__passo:not(:last-child)::before{content:'';position:absolute;
    left:calc(var(--ponto-l) / 2 - .75px);width:1.5px;
    top:calc(var(--ponto-a) / 2);bottom:calc(-1 * (var(--fila) + var(--ponto-a) / 2));
    background:repeating-linear-gradient(180deg,var(--linha) 0 7px,transparent 7px 13px)}
}

