/* ---------- Placa Anatomy y figura ---------- */
.iso-plate {
  position: relative; border-radius: 22px; background-color: var(--card); padding: 54px 14px 62px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-2), var(--lift);
  background-image:
    linear-gradient(var(--reg), var(--reg)), linear-gradient(var(--reg), var(--reg)),
    linear-gradient(var(--reg), var(--reg)), linear-gradient(var(--reg), var(--reg)),
    linear-gradient(var(--reg), var(--reg)), linear-gradient(var(--reg), var(--reg)),
    linear-gradient(var(--reg), var(--reg)), linear-gradient(var(--reg), var(--reg)),
    radial-gradient(circle at 1px 1px, var(--dots) 1px, transparent 1.4px);
  background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 24px 24px;
  background-position: 10px 10px, 14px 6px, calc(100% - 10px) 10px, calc(100% - 14px) 6px, 10px calc(100% - 10px), 14px calc(100% - 6px), calc(100% - 10px) calc(100% - 10px), calc(100% - 14px) calc(100% - 6px), 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}
.iso-plate .corner { position: absolute; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; margin: 0; }
.iso-fig { top: 24px; left: 26px; color: var(--text); }
.iso-title { top: 24px; right: 26px; text-transform: uppercase; letter-spacing: .1em !important; color: var(--muted); }
.iso-hint { bottom: 26px; left: 26px; text-transform: uppercase; letter-spacing: .1em !important; color: var(--muted); }
.iso-readout { bottom: 26px; right: 26px; color: var(--strong); font-variant-numeric: tabular-nums; max-width: 62%; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.visual-ring { width: 100%; max-width: 760px; margin: 0 auto; }
.ring-stage { width: 100%; }
@keyframes nb-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.nb-fig { display: block; width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-select: none; }
.nb-k-feature { --k: var(--sky); --gl: var(--gl-feature); }
.nb-k-addon { --k: var(--mint); --gl: var(--gl-addon); }
.nb-k-integration { --k: var(--int); --gl: var(--gl-integration); }
.nb-k-branch { --k: var(--teal); --gl: var(--gl-branch); }
.nb-k-pack { --k: var(--amber); }
.nb-k-core { --k: var(--sky); }
.nb-body { outline: none; cursor: pointer; }
.nb-body.is-static { cursor: default; pointer-events: none; }
.nb-body .f-t { fill: color-mix(in srgb, var(--k) var(--mt), var(--face-t)); }
.nb-body .f-l { fill: color-mix(in srgb, var(--k) var(--ml), var(--face-l)); }
.nb-body .f-m { fill: color-mix(in srgb, var(--k) calc((var(--ml) + var(--mr)) / 2), var(--face-m)); }
.nb-body .f-r { fill: color-mix(in srgb, var(--k) var(--mr), var(--face-r)); }
.nb-body .f-e { fill: none; stroke: color-mix(in srgb, var(--k) 35%, var(--edge)); stroke-opacity: .8; stroke-width: .9; stroke-linejoin: round; stroke-linecap: round; }
.nb-body .f-c { stroke: rgba(0, 0, 0, .28); stroke-width: .7; }
.nb-core .f-t { fill: var(--navy-k); }
.nb-core .f-l { fill: #072A57; }
.nb-core .f-r { fill: #04173A; }
.nb-core .f-e { stroke: #BFE6FA; stroke-opacity: .9; }
.nb-core .f-side { stroke: none; }
.nb-glyph { fill: var(--gl, #06223F); pointer-events: none; opacity: .92; }
.nb-more { font-family: var(--mono); font-weight: 700; }
.nb-times { fill: var(--amber); font-family: var(--mono); font-weight: 600; pointer-events: none; }
.nb-shadow { pointer-events: none; }
.sh0 { stop-color: #000; stop-opacity: var(--shadow-a); }
.sh1 { stop-color: #000; stop-opacity: 0; }
.gl0 { stop-color: var(--sky); stop-opacity: var(--glow-a); }
.gl1 { stop-color: var(--sky); stop-opacity: 0; }
.nb-grad-addon { --gk: var(--mint); }
.nb-grad-branch { --gk: var(--teal); }
.nb-grad-pack { --gk: var(--amber); }
.nb-grad-integration { --gk: var(--int); }
.nb-grad-addon .s0,
.nb-grad-branch .s0,
.nb-grad-pack .s0,
.nb-grad-integration .s0 { stop-color: color-mix(in srgb, var(--gk) calc(var(--ml) + 22%), var(--face-t)); }
.nb-grad-addon .s1,
.nb-grad-branch .s1,
.nb-grad-pack .s1,
.nb-grad-integration .s1 { stop-color: color-mix(in srgb, var(--gk) calc(var(--ml) + 4%), var(--face-l)); }
.nb-grad-addon .s2,
.nb-grad-branch .s2,
.nb-grad-pack .s2,
.nb-grad-integration .s2 { stop-color: color-mix(in srgb, var(--gk) var(--mr), var(--face-r)); }
.nb-grad-addon .s3,
.nb-grad-branch .s3,
.nb-grad-pack .s3,
.nb-grad-integration .s3 { stop-color: color-mix(in srgb, var(--gk) calc(var(--mr) - 6%), var(--face-r)); }
.nb-grad-core .s0 { stop-color: #0F3F80; }
.nb-grad-core .s1 { stop-color: #0A3166; }
.nb-grad-core .s2 { stop-color: #06214A; }
.nb-grad-core .s3 { stop-color: #041636; }
.nb-grad-plate .s0 { stop-color: var(--plate-s0); }
.nb-grad-plate .s1 { stop-color: var(--plate-s1); }
.nb-grad-plate .s2 { stop-color: var(--plate-s2); }
.nb-grad-plate .s3 { stop-color: var(--plate-s3); }
.nb-plate .p-top { fill: var(--plate-top); fill-opacity: .8; }
.nb-plate .p-groove { fill: none; stroke: var(--line-2); stroke-width: 1; }
.nb-plate .p-edge { fill: none; stroke: var(--plate-edge); stroke-width: 1; }
.nb-plate .p-screw { fill: none; stroke: var(--line-2); }
.nb-track .tk-line { fill: none; stroke: var(--k); stroke-opacity: .18; stroke-width: 1; }
.nb-track .tk-dots { fill: none; stroke: var(--k); stroke-opacity: .6; stroke-width: 1.6; stroke-dasharray: .01 9; stroke-linecap: round; }
.nb-track.is-empty .tk-line { stroke-dasharray: 3 7; stroke-opacity: .14; }
.nb-track.is-empty .tk-dots { stroke-opacity: .16; }
.nb-track .tk-hit { cursor: pointer; }
.nb-tether { fill: none; stroke: var(--k); stroke-opacity: .55; stroke-width: 1.1; stroke-dasharray: 2 6; stroke-linecap: round; }
@keyframes nb-flow { to { stroke-dashoffset: -16; } }
.nb-corering { stroke: var(--sky); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 3 8; }
.nb-sel { stroke: var(--k); stroke-width: 1.4; opacity: 0; transition: opacity .28s var(--ease); }
.nb-body.is-hover .nb-sel,
.nb-body.is-selected .nb-sel,
.nb-body:focus-visible .nb-sel { opacity: .95; }
.nb-core.is-hover .nb-corering,
.nb-core.is-selected .nb-corering { stroke-opacity: 1; stroke-width: 1.6; }
.nb-lift { transition: opacity var(--d2) var(--ease); }
.nb-fig.has-hover .nb-body:not(.is-hover) .nb-lift { opacity: .55; }
.nb-fig[data-spot] .nb-body .nb-lift { opacity: .2; }
.nb-fig[data-spot="feature"] .nb-k-feature .nb-lift,
.nb-fig[data-spot="addon"] .nb-k-addon .nb-lift,
.nb-fig[data-spot="integration"] .nb-k-integration .nb-lift,
.nb-fig[data-spot="branch"] .nb-k-branch .nb-lift,
.nb-fig[data-spot="core"] .nb-core .nb-lift { opacity: 1; }
.nb-fig[data-spot="pack"] .nb-body .nb-lift { opacity: .45; }
.nb-fig[data-spot] .nb-tether { stroke-opacity: .08; }
.nb-fig[data-spot="feature"] .nb-tether.nb-k-feature,
.nb-fig[data-spot="addon"] .nb-tether.nb-k-addon,
.nb-fig[data-spot="integration"] .nb-tether.nb-k-integration,
.nb-fig[data-spot="branch"] .nb-tether.nb-k-branch { stroke-opacity: .95; }
.nb-fig[data-spot] .nb-track { opacity: .25; }
.nb-fig[data-spot="feature"] .nb-track.nb-k-feature,
.nb-fig[data-spot="addon"] .nb-track.nb-k-addon,
.nb-fig[data-spot="integration"] .nb-track.nb-k-integration,
.nb-fig[data-spot="branch"] .nb-track.nb-k-branch { opacity: 1; }
.nb-fig[data-spot="pack"] .nb-stack .f-t { stroke: var(--amber); stroke-width: 1.4; }
.nb-stack { cursor: pointer; outline: none; }
.nb-stack:hover .f-t,
.nb-stack:focus-visible .f-t { filter: brightness(1.25); }

/* Leyenda */
.orbit-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 14px 0 4px; min-height: 34px; }
.nb-key {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 9px; border-radius: 999px; background: var(--hair); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--text); transition: all .28s var(--ease); white-space: nowrap;
}
button.nb-key:hover { border-color: var(--line-2); color: var(--strong); background: var(--card-2); transform: translateY(-1px); }
.nb-key b { font: 600 11px/1 var(--mono); color: var(--strong); background: var(--line); padding: 3px 6px; border-radius: 6px; }
.nb-key-dot { width: 9px; height: 9px; border-radius: 3px; display: block; transform: rotate(45deg) skew(10deg, 10deg); background: var(--dot); }
.nb-key--feature { --dot: var(--sky); }
.nb-key--addon { --dot: var(--mint); }
.nb-key--integration { --dot: var(--int); }
.nb-key--branch { --dot: var(--teal); }
.nb-key--pack { --dot: var(--amber); }
@media (max-width: 720px) {
  .iso-plate { padding: 46px 8px 54px; border-radius: 18px; }
  .iso-fig,
  .iso-title { top: 18px; }
  .iso-fig { left: 18px; }
  .iso-title { right: 18px; }
  .iso-hint { display: none; }
  .iso-readout { left: 18px; right: 18px; bottom: 20px; max-width: none; text-align: left; }
}

/* Trazabilidad dentro de la figura */
.nb-fig.has-trace .nb-body .nb-lift { opacity: .14; }
.nb-fig.has-trace .nb-body.is-traced .nb-lift { opacity: 1; }
.nb-fig.has-trace .nb-tether { stroke-opacity: .05; }
.nb-fig.has-trace .nb-tether.is-traced { stroke-opacity: 1; stroke-width: 2; stroke-dasharray: 3 5; animation: nb-flow .9s linear infinite; }
.nb-fig.has-trace .nb-track { opacity: .3; }
.nb-badge circle { fill: var(--amber); stroke: var(--card); stroke-width: 1.5; }
.nb-badge text { fill: #06223F; font-family: var(--mono); font-weight: 700; }
.ring-readout { display: block; min-height: 1.6em; margin: 0; text-align: center; font: 500 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--strong); }
.visual-ring { position: relative; }

/* Nebulosa dentro de la figura: capas apiladas (cielo · suelo · cuerpos) */
.nb-layers { position: relative; width: 100%; animation: fig-in var(--d3) var(--ease) both; }
@keyframes fig-in { from { opacity: 0; } to { opacity: 1; } }
.nb-stage.is-lazy { aspect-ratio: 680 / 384; }
.nb-layers > .nb-fig { position: relative; }
.nb-under { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nb-cosmos { pointer-events: none; }
:root[data-theme="light"] .nb-clouds { opacity: .8; }
.nb-cg .c0 { stop-color: var(--cc); stop-opacity: var(--ca, .34); }
.nb-cg .c1 { stop-color: var(--cc); stop-opacity: calc(var(--ca, .34) * .4); }
.nb-cg .c2 { stop-color: var(--cc); stop-opacity: 0; }
.nb-cg-sky { --cc: var(--sky); --ca: .46; }
.nb-cg-teal { --cc: var(--teal); --ca: .42; }
.nb-cg-mint { --cc: var(--mint); --ca: .32; }
.nb-cg-amber { --cc: var(--amber); --ca: .3; }
.nb-cg-dust { --cc: #01040a; --ca: .6; }
:root[data-theme="light"] .nb-cg-sky { --ca: .26; }
:root[data-theme="light"] .nb-cg-teal { --ca: .22; }
:root[data-theme="light"] .nb-cg-mint { --ca: .2; }
:root[data-theme="light"] .nb-cg-amber { --ca: .16; }
:root[data-theme="light"] .nb-cg-dust { --cc: #0a2a55; --ca: .1; }
.nb-stars .st { fill: #dcebff; }
.nb-stars .sb-glow { fill: rgba(170, 220, 255, .16); }
.nb-stars .sb-spike { stroke: #d6ecff; stroke-width: .6; stroke-linecap: round; opacity: .8; }
.nb-stars .sb-core { fill: #fff; }
:root[data-theme="light"] .nb-stars { display: none; }
.nb-hg .h0 { stop-color: var(--k); stop-opacity: var(--halo-a, .5); }
.nb-hg .h1 { stop-color: var(--k); stop-opacity: 0; }
.nb-hg.nb-k-core .h0 { stop-color: var(--amber); stop-opacity: calc(var(--halo-a, .5) * .8); }
.nb-halo { transition: opacity var(--d2) var(--ease); }
.nb-fig.has-hover .nb-body:not(.is-hover) .nb-halo { opacity: .35; }
.nb-body.is-hover .nb-halo,
.nb-body.is-selected .nb-halo { opacity: 1; }
.nb-tether { stroke-width: 1.3; stroke-opacity: .6; }

/* Gas por delante de la placa (capa del suelo) */
.nb-clouds--front { opacity: 1; }
:root[data-theme="light"] .nb-clouds--front { opacity: .55; }
.nb-dustlanes { opacity: .8; }
:root[data-theme="light"] .nb-dustlanes { opacity: .3; }
.nb-plate .p-top { fill-opacity: .66; }