/* Six connected principles. Scoped to the Institute, with touch-sized nodes. */
.principles-network-section { padding-block: 72px 64px; scroll-margin-top: 156px; background: #f5fafc; }
.principles-network-section .section-heading { text-align: center; margin-bottom: 16px; }
.principles-network-section .section-heading h2 { max-width: none; }
.principles-network-intro { max-width: 580px; margin: 20px auto 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.principles-network { position: relative; width: min(100%, 880px); aspect-ratio: 1.48; margin: 0 auto; isolation: isolate; }
.principles-connections { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.principles-connections line { stroke: #a9c2d6; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.principles-connections .network-ring { fill: none; stroke: #adcbd7; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.principles-connections-mobile { display: none; }
.principles-network-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 18px; text-align: center; background: #f5fafc; color: var(--navy); border-radius: 32%; pointer-events: none; }
.principles-network-center strong { display: block; font-size: 21px; font-weight: 650; letter-spacing: -.04em; line-height: 1.2; }
.principles-network-center span { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.principle-node { --node-color: #1672b6; --node-tint: #eaf5fc; position: absolute; width: clamp(148px, 18vw, 172px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 16px 10px; transform: translate(-50%, -50%); border: 1.5px solid var(--node-color); border-radius: 50%; background: var(--node-tint); color: var(--navy); cursor: pointer; box-shadow: 0 8px 22px #10164f09, inset 0 0 0 7px #ffffff75; transition: box-shadow .18s ease, background .18s ease; -webkit-tap-highlight-color: transparent; }
.principle-node:hover { background: #fff; box-shadow: 0 8px 25px #10164f1a, inset 0 0 0 7px var(--node-tint); }
.principle-node:focus-visible { outline: 3px solid var(--navy); outline-offset: 5px; }
.principle-node[aria-expanded="true"] { background: #fff; box-shadow: 0 0 0 5px var(--node-tint); }
.principle-node-number { font-size: 10px; font-weight: 750; letter-spacing: .12em; color: var(--node-color); }
.principle-node-label { max-width: 100%; font-size: 15px; font-weight: 750; line-height: 1.3; letter-spacing: -.025em; }
.principle-node-action { color: var(--node-color); font-size: 11px; font-weight: 600; }
.principle-node[data-approach-article="sistemico"] { left: 28%; top: 19%; }
.principle-node[data-approach-article="multiprofesional"] { left: 72%; top: 19%; --node-color: #7255a3; --node-tint: #f1edf8; }
.principle-node[data-approach-article="interdisciplinario"] { left: 88%; top: 50%; --node-color: #247c87; --node-tint: #e7f4f4; }
.principle-node[data-approach-article="comunitario"] { left: 72%; top: 81%; --node-color: #1672b6; --node-tint: #eaf5fc; }
.principle-node[data-approach-article="territorial"] { left: 28%; top: 81%; --node-color: #7255a3; --node-tint: #f1edf8; }
.principle-node[data-approach-article="evidencia"] { left: 12%; top: 50%; --node-color: #247c87; --node-tint: #e7f4f4; }
.principles-network-note { margin: 10px auto 0; max-width: 620px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 700px) {
  .principles-network-section { padding-block: 52px 44px; scroll-margin-top: 132px; }
  .principles-network-section .section-heading { margin-bottom: 24px; }
  .principles-network-intro { font-size: 15px; }
  .principles-network { width: min(100%, 400px); height: 480px; aspect-ratio: auto; }
  .principles-connections-desktop, .principles-network-center { display: none; }
  .principles-connections-mobile { display: block; }
  .principle-node { width: clamp(124px, 40vw, 154px); padding: 14px 7px; gap: 7px; box-shadow: 0 5px 16px #10164f08, inset 0 0 0 5px #ffffff75; }
  .principle-node-label { font-size: clamp(12px, 3.5vw, 14px); letter-spacing: -.035em; }
  .principle-node-number { font-size: 10px; }
  .principle-node-action { font-size: 10px; }
  .principle-node[data-approach-article="sistemico"] { left: 24%; top: 16%; }
  .principle-node[data-approach-article="multiprofesional"] { left: 76%; top: 16%; }
  .principle-node[data-approach-article="interdisciplinario"] { left: 24%; top: 50%; }
  .principle-node[data-approach-article="comunitario"] { left: 76%; top: 50%; }
  .principle-node[data-approach-article="territorial"] { left: 24%; top: 84%; }
  .principle-node[data-approach-article="evidencia"] { left: 76%; top: 84%; }
  .principles-network-note { margin-top: 20px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .principle-node { transition: none; } }

/* Link semantics preserve the connected-circle design and no-JS navigation. */
a.principle-node { text-decoration: none; text-align: center; }