/* ==================================================================
   ETAPAS NUMERADAS  (widget fp-etapas; no lab, "Redesign e migracao")

   Copiado do lab (lab/desenvolvimento/secoes/redesign/redesign.css), que fica congelado como
   referencia aprovada (2026-09-27). A partir daqui, este arquivo e o que
   vale. Cores pelas variaveis do tema da secao (--bg, --fg...): o controle
   "Fundo" do widget troca papel e navy.
   ================================================================== */

.redesign{
  position:relative;
  background:var(--bg);
  color:var(--fg);
  padding-block:clamp(6rem,15vh,11rem);
}

.redesign__h2{
  max-width:12em;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.5rem,5vw,5.5rem);
  line-height:.94;
  letter-spacing:-.04em;
  color:var(--fg);
  text-wrap:balance;
}
.redesign__abertura{
  margin-top:clamp(1.25rem,3vh,2rem);
  max-width:52ch;
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--fg-2);
  text-wrap:pretty;
}

/* ---- etapas -------------------------------------------------------- */

.redesign__etapas{
  --vao:clamp(2.5rem,4.5vw,5.5rem);
  container-type:inline-size;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--vao);
  margin-top:clamp(4rem,11vh,8rem);
}
/* Cada etapa herda tres linhas da grade: numeros, titulos e textos das
   quatro comecam na mesma altura. */
.passo{
  position:relative;
  grid-row:span 3;
  display:grid;
  grid-template-rows:subgrid;
  row-gap:0;
}
/* Numero em contorno, com o miolo na cor do fundo (como o titulo de Como
   trabalhamos). */
.passo__num{
  --traco:clamp(1.25px,.1vw,2px);
  font-family:var(--font-display);
  font-weight:900;
  font-size:min(clamp(4rem,8vw,9rem), (100cqw - 3 * var(--vao)) / 4 / 1.25);
  line-height:.8;
  letter-spacing:-.03em;
  -webkit-text-fill-color:var(--bg);
  -webkit-text-stroke:calc(2 * var(--traco)) var(--fg-2);
  paint-order:stroke fill;
  font-variant-numeric:lining-nums;
}
.passo__h3{
  margin-top:clamp(1.5rem,3.6vh,2.5rem);
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.25rem,1.8vw,1.875rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--fg);
  text-wrap:balance;
}
.passo__texto{
  margin-top:clamp(.75rem,1.8vh,1.125rem);
  max-width:34ch;
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--fg-2);
  text-wrap:pretty;
}
/* Chevron no meio do vao ate a proxima etapa, na altura do numero. */
.passo__seta{
  position:absolute;
  top:calc(min(clamp(4rem,8vw,9rem), (100cqw - 3 * var(--vao)) / 4 / 1.25) * .4);
  right:calc(-.5 * var(--vao));
  translate:50% -50%;
  color:var(--accent);
}
.passo__chevron{width:auto;height:clamp(1.125rem,1.6vw,1.75rem)}

/* ---- fechamento ---------------------------------------------------- */

.redesign__fim{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gutter);
  margin-top:clamp(4rem,10vh,7rem);
  padding-top:clamp(1.75rem,4vh,2.75rem);
}
.redesign__fim::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:var(--linha-forte);
  transform:scaleX(var(--fio,1));
  transform-origin:left;
}
.redesign__fechamento{
  grid-column:7 / -1;
  max-width:46ch;
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--fg);
  text-wrap:pretty;
}

@media (max-width:1099.98px){
  .redesign{padding-block:clamp(4.5rem,14vw,7rem)}
  .redesign__h2{font-size:clamp(2.25rem,9.5vw,4rem)}
  .redesign__etapas{
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(3.5rem,14vw,5rem);
    margin-top:clamp(2.5rem,10vw,4rem);
  }
  .passo{grid-row:auto;display:block}
  .passo__num{font-size:clamp(3.5rem,18vw,5rem)}
  .passo__h3{margin-top:1rem;font-size:clamp(1.375rem,6.4vw,2rem)}
  /* Entre as etapas, o chevron aponta para baixo, no meio do vao. */
  .passo__seta{
    top:auto;
    bottom:calc(-.5 * clamp(3.5rem,14vw,5rem));
    right:auto;
    left:0;
    translate:0 50%;
    rotate:90deg;
  }
  .redesign__fim{display:block;margin-top:clamp(3rem,12vw,4.5rem);padding-top:1.5rem}
}