/* bloco governanca: lista de compromissos com luz que segue o ponteiro */
.governanca { background: var(--paper); overflow: hidden; }
.governanca .grade { position: relative; z-index: 1; }

.governanca__elo { position: absolute; z-index: 0; right: 0; top: 0; width: 17%; height: 100%; color: var(--teal); opacity: .55; }
.governanca__elo path { stroke-width: 3; }

.governanca__cabeca { grid-column: 1 / span 7; }
.governanca__titulo { margin: clamp(30px, 3.2vw, 48px) 0 20px; font-size: var(--t-secao); }

.compromissos { grid-column: 1 / -1; position: relative; margin-top: clamp(52px, 6vw, 84px); box-shadow: inset 0 1px 0 var(--line); }

/* a luz do ponteiro percorre a lista inteira */
.compromissos::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%);
  transition: opacity .6s var(--suave);
  pointer-events: none;
}
.compromissos:hover::before { opacity: 1; }

.compromisso {
  position: relative; z-index: 1;
  min-height: 132px; padding-block: 26px;
  box-shadow: inset 0 -1px 0 var(--line);
  display: grid; grid-template-columns: 76px minmax(240px, 3fr) 4fr 24px; gap: 30px; align-items: center;
  transition: padding-left .55s var(--mola), color .4s var(--suave);
}
.compromisso:hover { padding-left: 14px; color: var(--vermelho); }
.compromisso b { font-family: var(--display); font-weight: 900; font-size: calc(clamp(26px, 2.4vw, 34px) * var(--escala-texto, 1)); color: var(--teal); }
.compromisso strong { font-family: var(--display); font-weight: 900; font-size: calc(clamp(22px, 2.1vw, 30px) * var(--escala-texto, 1)); line-height: 1.1; }
.compromisso span { color: var(--muted); font-size: calc(15px * var(--escala-texto, 1)); line-height: 1.6; }
.compromisso svg { color: var(--teal); transition: transform .45s var(--mola); }
.compromisso:hover svg { transform: translateX(6px); }

@media (max-width: 1080px) {
  .governanca__cabeca { grid-column: 1 / -1; }
  .compromisso { grid-template-columns: 60px 1fr 22px; gap: 16px 18px; }
  .compromisso span { grid-column: 2 / 4; }
}

@media (max-width: 680px) {
  .governanca__elo { display: none; }
  .compromisso { grid-template-columns: 48px 1fr 20px; min-height: 0; }
}