/* WEB-020 — estilos para bloques nuevos (rol, sinergy-meaning, cómo trabajamos, red, crecer juntos).
   Tema claro: body es blanco (--ink oscuro), salvo hero/CTA que son navy.
   Los bloques nuevos van sobre fondo navy propio para mantener coherencia con la identidad. */
.role-block,
.synergy-meaning,
.how-block,
.network-block,
.grow-block {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--navy);
  color: #fff;
  border-radius: 0;
}
.role-block h2,
.synergy-meaning h2,
.how-block h2,
.network-block h2,
.grow-block h2 { color: #fff; margin-bottom: 26px; }
.eyebrow { color: var(--gold); }
.role-text,
.network-text,
.grow-text { max-width: 900px; margin: 0 0 16px; color: rgba(255,255,255,.86); font-size: 1.02rem; line-height: 1.65; }
.meaning-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; }
.meaning-item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 26px 24px; }
.meaning-item h3 { color: var(--gold); font-size: 1.05rem; letter-spacing: .14em; margin: 0 0 12px; }
.meaning-item p { color: rgba(255,255,255,.88); line-height: 1.6; font-size: .98rem; margin: 0; }
.meaning-close { margin-top: 28px; font-size: 1.15rem; color: #fff; font-weight: 700; letter-spacing: .02em; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.how-item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 22px; }
.how-num { display: inline-block; color: var(--gold); font-weight: 700; font-size: 1rem; margin-bottom: 10px; }
.how-item h3 { margin: 0 0 8px; font-size: 1.08rem; color: #fff; }
.how-item p { color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.55; margin: 0; }
.network-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 18px; }
.network-chips li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 16px; font-size: .9rem; color: rgba(255,255,255,.9); }
.network-note { color: rgba(255,255,255,.65); font-size: .9rem; }
.hero-support { max-width: 690px; margin: 0 auto 18px; color: rgba(255,255,255,.75); font-size: .98rem; }
.grow-block .cta-actions { margin-top: 6px; }
@media (max-width: 900px) {
  .meaning-grid, .how-grid { grid-template-columns: 1fr; }
}