/* bloco identity: missao, visao e proposito mais a faixa de numeros */
.identity { background: var(--dark); color: #fff; overflow: hidden; }
.identity .grade { position: relative; z-index: 5; }

.identity__eyebrow { grid-column: 1 / -1; margin-bottom: clamp(46px, 5vw, 76px); }

.identity__item {
  grid-column: span 4;
  display: grid; grid-template-columns: clamp(72px, 7vw, 104px) 1fr; align-items: start;
  padding-bottom: 34px;
  box-shadow: inset 0 -1px 0 var(--dark-line);
  transition: box-shadow .6s var(--suave);
}
.identity__item:hover { box-shadow: inset 0 -1px 0 var(--teal); }
.identity__item strong { grid-row: 1 / 3; font-family: var(--display); font-weight: 900; font-size: calc(clamp(56px, 5.4vw, 78px) * var(--escala-texto, 1)); line-height: 1; color: #404347; transition: color .6s var(--suave); }
.identity__item:hover strong { color: var(--teal); }

.identity__item h3 { margin: 8px 0 14px; font-family: var(--display); font-weight: 900; font-size: var(--t-titulo); line-height: 1; }
.identity__item p { color: #a8abaf; font-size: calc(15px * var(--escala-texto, 1)); line-height: 1.6; }

/* ---------- faixa de numeros ---------- */
.identity__numeros {
  grid-column: 1 / -1;
  position: relative;
  margin-top: clamp(64px, 7vw, 108px);
  min-height: 240px;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch;
}
.identity__curva { position: absolute; inset: 0 0 auto; width: 100%; height: 62%; color: color-mix(in srgb, var(--teal) 50%, transparent); }
.identity__curva path { stroke-width: 2; }

/* O texto de todos fica na mesma linha de base. Quem segue a curva e o
   ponto, posicionado por --y, que e a altura da curva naquela coluna
   (medida no proprio path: 46%, 66%, 27,4% e 39,4% de 190px). */
.identity__numeros article { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; }
/* --x e o centro de cada coluna, --y a altura da curva ali, os dois em
   relacao a caixa do SVG. O ponto e absoluto contra .identity__numeros. */
.identity__numeros article:nth-of-type(1) { --y: 28.5%; }
.identity__numeros article:nth-of-type(2) { --y: 40.9%; }
.identity__numeros article:nth-of-type(3) { --y: 17%; }
.identity__numeros article:nth-of-type(4) { --y: 24.4%; }
.identity__numeros strong { font-family: var(--display); font-weight: 900; font-size: calc(clamp(24px, 2.2vw, 32px) * var(--escala-texto, 1)); }
.identity__numeros span { margin-top: 8px; color: #888b8f; font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; }

.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); margin-bottom: 18px; }
.identity__numeros .ponto { position: absolute; top: var(--y, 50%); left: 50%; translate: -50% -50%; margin: 0; }
.ponto--amarelo { background: var(--yellow); }
.ponto--vermelho { background: var(--red); }

@media (max-width: 1080px) {
  .identity__item { grid-column: span 6; }
  .identity__numeros { gap: 44px 24px; grid-template-columns: repeat(2, 1fr); min-height: 0; }
  .identity__numeros article { padding-top: 0; }
  .identity__numeros .ponto { position: static; translate: none; margin-bottom: 18px; }
  .identity__curva { display: none; }
}

@media (max-width: 680px) {
  .identity__item { grid-column: 1 / -1; }
}

/* grafismo da marca em canvas, atras do conteudo da secao */
.identity__grafismo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}