/* ==================================================================
   RESUMO  (widget fp-resumo)

   Copiado do lab (lab/desenvolvimento/secoes/resumo/resumo.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.
   ================================================================== */

.resumo{
  position:relative;
  background:var(--bg);
  color:var(--fg);
  /* Sobe por cima do hero ate o topo da tela: o titulo comeca abaixo da
     barra fixa. */
  padding-block:calc(var(--topo) + clamp(2rem,6vh,4.5rem)) clamp(6rem,15vh,11rem);
}

.resumo__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;
}

.resumo__lista{
  counter-reset:resumo;
  display:grid;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  column-gap:clamp(2rem,4vw,5rem);
  row-gap:clamp(2.5rem,6vh,4rem);
  margin-top:clamp(3.5rem,9vh,6.5rem);
}

.resumo__item{
  counter-increment:resumo;
  position:relative;
  padding-top:clamp(1.25rem,2.8vh,1.75rem);
}
/* Fio de cada frase, desenhado da esquerda na entrada (--fio de 0 a 1). */
.resumo__item::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:var(--linha-forte);
  transform:scaleX(var(--fio,1));
  transform-origin:left;
}
/* Numero em mono, no vermelho de texto pequeno; nao e sequencia de etapas,
   e so o indice do resumo. */
.resumo__item::after{
  content:counter(resumo,decimal-leading-zero);
  position:absolute;
  top:clamp(1.25rem,2.8vh,1.75rem);
  left:0;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--t-mono);
  letter-spacing:.14em;
  line-height:1.4;
  color:var(--accent-ink);
  opacity:var(--num,1);
}
.resumo__frase{
  padding-top:calc(var(--t-mono) * 1.4 + clamp(.875rem,2vh,1.25rem));
  max-width:34ch;
  font-size:var(--t-lead);
  font-weight:500;
  line-height:1.45;
  letter-spacing:-.005em;
  color:var(--fg);
  text-wrap:pretty;
}

@media (max-width:1099.98px){
  .resumo{padding-block:clamp(3.5rem,12vw,5.5rem) clamp(4.5rem,14vw,7rem)}
  .resumo__h2{font-size:clamp(2.25rem,9.5vw,4rem)}
  .resumo__lista{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.75rem,7vw,2.5rem);margin-top:clamp(2.5rem,10vw,4rem)}
}

/* Cortina: o Resumo sobe por cima do hero preso (resumo.js poe as classes,
   so quando a cortina cabe). O hero preso vem de hero.css. */
.cortina .fp-cortina-resumo{position:relative;z-index:2}