.cnx-root{
  background: #fff;
  padding: clamp(64px, 8vw, 96px) clamp(20px, 3.2vw, 32px);
}
.cnx-root .cnx-wrap{ max-width: var(--max-w, 1200px); margin: 0 auto; }

.cnx-root .cnx-titulo{
  font-size: clamp(1.582rem, 2.712vw, 2.091rem);
  font-weight: 900; font-family: var(--font-titulo) !important; letter-spacing: -.028em; line-height: 1.14;
  color: var(--black, #111);
  max-width: 24ch; text-wrap: balance;
}
.cnx-root .cnx-lead{
  margin-top: 12px;
  font-size: 1.123rem; letter-spacing: .02em; font-family: var(--font-texto) !important; line-height: 1.68;
  color: var(--gray-700, #374151);
  max-width: 58ch;
}
.cnx-root .cnx-grade{
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 12px;
}
.cnx-root .cnx-rede{
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--gray-200, #E2E4E8);
  padding: 22px 20px;
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
.cnx-root .cnx-rede:hover{
  border-color: var(--green-dark, #0B8A00);
  background: var(--bg, #FAFBFC);
}
.cnx-root .cnx-rede svg{
  flex: none; width: 22px; height: 22px;
  color: var(--black, #111);
}
.cnx-root .cnx-rede > span{
  display: flex; flex-direction: column;
  min-width: 0;
}
.cnx-root .cnx-rede > svg{ flex: 0 0 auto; }
.cnx-root .cnx-nome{
  font-size: .98rem; font-weight: 700; line-height: 1.2;
  color: var(--black, #111);
}
.cnx-root .cnx-arroba{
  margin-top: 3px;
  font-size: .83rem;
  color: var(--gray-500, #6B7280);
  overflow-wrap: anywhere;
}

.cnx-root .cnx-adiante{
  margin-top: 64px;
  padding-top: 44px;
  border-top: 1px solid var(--gray-200, #E2E4E8);
}
.cnx-root .cnx-adiante h2{
  font-size: clamp(1.265rem, 2.2vw, 1.595rem);
  font-weight: 900; font-family: var(--font-titulo) !important; letter-spacing: -.024em; line-height: 1.16;
  color: var(--black, #111);
}
.cnx-root .cnx-atalhos{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.cnx-root .cnx-atalho{
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--gray-200, #E2E4E8);
  border-top: 3px solid var(--green, #16e000);
  padding: 22px 20px;
  text-decoration: none;
  transition: background .2s;
}
.cnx-root .cnx-atalho:hover{ background: var(--bg, #FAFBFC); }
.cnx-root .cnx-atalho-nome{
  font-size: 1rem; font-weight: 700;
  color: var(--black, #111);
}
.cnx-root .cnx-atalho-desc{
  font-size: .93rem; line-height: 1.45;
  color: var(--gray-500, #6B7280);
}

@media (max-width: 480px){
  .cnx-root .cnx-grade{ grid-template-columns: 1fr; }
}