/* ==================================================================
   MEDIDAS  (widget fp-medidas; no lab, "SEO e performance")

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

.perf{
  position:relative;
  background:var(--bg);
  color:var(--fg);
  padding-block:clamp(6rem,15vh,11rem);
}
.perf__caixa{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gutter);
}

.perf__h2{
  grid-column:1 / span 9;
  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;
}

.perf__textos{
  grid-column:5 / span 7;
  display:grid;
  gap:1em;
  max-width:52ch;
  margin-top:clamp(2.5rem,6vh,4rem);
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--fg-2);
  text-wrap:pretty;
}

/* ---- as tres medidas ---------------------------------------------- */

.perf__metricas{
  grid-column:1 / -1;
  position:relative;
  container-type:inline-size;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(4rem,10vh,7rem);
  padding-block:clamp(2rem,5vh,3.5rem);
}
/* Fios de cima e de baixo, desenhados na entrada. */
.perf__metricas::before,.perf__metricas::after{
  content:'';
  position:absolute;
  left:0;right:0;
  height:1px;
  background:var(--fg);
  transform:scaleX(var(--fio,1));
  transform-origin:left;
}
.perf__metricas::before{top:0}
.perf__metricas::after{bottom:0}

.metrica{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(.75rem,2vh,1.25rem);
  padding-inline:clamp(1rem,2.4vw,2.75rem);
}
.metrica:first-child{padding-left:0}
/* Fio vertical entre as medidas. */
.metrica + .metrica::before{
  content:'';
  position:absolute;
  top:0;bottom:0;left:0;
  width:1px;
  background:var(--linha-forte);
}
.metrica__nome{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--t-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-ink);
}
.metrica__ate{color:var(--fg-3)}
.metrica__fenda{display:block}
/* A fenda: o limite de baixo fica .32em abaixo da linha de base, onde a
   virgula de "2,5" e "0,1" termina (na Outfit 900 ela desce cerca de .25em).
   Assim a virgula nunca e cortada, nem durante nem depois da subida. */
.perf.anima .metrica__fenda{clip-path:inset(-.4em -.3em -.32em -.3em)}
.metrica__valor{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  font-size:min(100cqw / 3 / 3.4, 22vh, 11rem);
  line-height:.8;
  letter-spacing:-.05em;
  color:var(--fg);
  font-variant-numeric:lining-nums;
  white-space:nowrap;
}
.metrica__unidade{
  margin-left:.12em;
  font-size:.42em;
  font-weight:700;
  letter-spacing:-.02em;
}

.perf__textos--fim{margin-top:clamp(3rem,8vh,5rem)}

/* .texto-link (os links das fontes): em widgets.css, que outros widgets usam. */

@media (max-width:1099.98px){
  .perf{padding-block:clamp(4.5rem,14vw,7rem)}
  .perf__caixa{grid-template-columns:minmax(0,1fr)}
  .perf__h2,.perf__textos,.perf__metricas{grid-column:1}
  .perf__h2{font-size:clamp(2.25rem,9.5vw,4rem)}
  .perf__metricas{
    grid-template-columns:minmax(0,1fr);
    margin-top:clamp(2.5rem,10vw,4rem);
    padding-block:0;
  }
  .metrica{
    flex-direction:row;
    align-items:baseline;
    justify-content:space-between;
    padding:1.5rem 0;
  }
  .metrica + .metrica::before{top:0;bottom:auto;left:0;right:0;width:auto;height:1px}
  .metrica__valor{font-size:clamp(3.5rem,18vw,5.5rem)}
}