/* ==========================================================
   GOVERNANCA — Konecta Governança & Pessoas (index, após #frentes)
   ========================================================== */

.governanca {
  position: relative;
  background-color: #fcfcfc;
  padding: 100px 0;
  box-shadow: 0 18px 30px -22px rgba(10, 0, 52, .14);
}
.governanca__grid {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 80px;
  align-items: center;
  margin-bottom: 90px;
}
.governanca__foto { position: relative; }
.governanca__foto::before {

}
.governanca__foto img {
  position: relative;
  width: 100%;
  border-radius: 25px;
  
}
.governanca__socia {
  position: absolute;
  right: -30px;
  bottom: 40px;
  background-color: #271c62;
  color: #fff;
  border-radius: 18px;
  padding: 18px 24px;
  line-height: 1.2;
  box-shadow: 0 14px 30px rgba(10, 0, 52, .35);
  max-width: 260px;
}
.governanca__socia strong { display: block; font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.governanca__socia span { font-size: 13px; font-weight: 500; color: #fff0e5; }

.governanca__logo { width: 235px; height: auto; margin-bottom: 28px; }
.governanca__eyebrow { color: #fc6800; margin-bottom: 14px; }
.governanca__titulo {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: #2c2c2c;
  margin-bottom: 20px;
  text-wrap: pretty;
}
.governanca__p { margin-bottom: 18px; text-wrap: pretty; }
.governanca__anos {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 28px 0;
}
.governanca__anos strong {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: #4a2a80;
  letter-spacing: -.02em;
}
.governanca__anos span {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #2c2c2c;
  max-width: 300px;
}
.governanca__frase {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #4a2a80;
  text-wrap: balance;
}

/* Entregáveis ---------------------------------------------- */
.governanca__cab { text-align: center; margin-bottom: 40px; }
.governanca__cab .governanca__eyebrow { margin-bottom: 8px; }
.governanca__sub {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  color: #2c2c2c;
  text-wrap: balance;
}
.governanca__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.governanca__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #f3f1fb;
  border-radius: 25px;
  padding: 40px 32px 36px;
  color: #2c2c2c;
  transition: transform .35s ease, box-shadow .35s ease, background-color .35s;
}
.governanca__card:hover {
  transform: translateY(-8px);
  background-color: #fff;
  box-shadow: 0 22px 45px rgba(10, 0, 52, .14);
}
.governanca__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(10, 0, 52, .08);
  margin-bottom: 20px;
  transition: background-color .35s;
}
.governanca__card:hover .governanca__ico { background-color: #f3f1fb; }
.governanca__ico img { width: 40px; height: 40px; object-fit: contain; }
.governanca__card h3 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #2e1381;
  margin-bottom: 26px;
}
.governanca__card ul { display: grid; gap: 16px; width: 100%; }
.governanca__card li {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: #2c2c2c;
}
.governanca__card li img {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  background-color: #ff680d;
  object-fit: contain;
}

/* Responsivo ----------------------------------------------- */
@media (max-width: 1200px) {
  .governanca__grid { grid-template-columns: 400px minmax(0, 1fr); gap: 60px; }
}
@media (max-width: 1024px) {
  .governanca__grid { grid-template-columns: 1fr; gap: 70px; margin-bottom: 70px; }
  .governanca__foto { max-width: 480px; margin: 0 auto; }
  .governanca__cards { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .governanca { padding: 70px 0; }
  .governanca__titulo { font-size: 30px; }
  .governanca__sub { font-size: 24px; }
  .governanca__frase { font-size: 20px; }
  .governanca__anos strong { font-size: 44px; }
  .governanca__card { padding: 30px 24px; }
  .governanca__card h3 { font-size: 24px; }
}
@media (max-width: 480px) {
  .governanca__foto::before { inset: -14px 14px 14px -14px; }
  .governanca__socia { right: -6px; padding: 14px 18px; max-width: 220px; }
  .governanca__logo { width: 190px; }
}