/* Árbol v9: tinte anatómico y llamadas fuera de la ilustración. */
[data-tree-v2] .knowledge-tree-v2-base { opacity: 1; filter: none; }
[data-tree-v2] .knowledge-tree-v2-wash { display: none; }

/* El degradado modula solo el alfa de la zona: nunca colorea hojas vecinas. */
[data-tree-v2] [data-tree-layer="trunk"] {
  mask-image: url("arbol-v11-trunk-fade.svg?v=eb50dbe00f");
  -webkit-mask-image: url("arbol-v11-trunk-fade.svg?v=eb50dbe00f");
}
[data-tree-v2] [data-tree-layer="roots"] {
  mask-image: url("arbol-v9-roots-fade.svg?v=bffe681c4d");
  -webkit-mask-image: url("arbol-v9-roots-fade.svg?v=bffe681c4d");
}
[data-tree-v2] [data-tree-layer="branches"] {
  mask-image: none;
  -webkit-mask-image: none;
}
[data-tree-v2] .knowledge-tree-v2-layer {
  mask-size: contain; mask-position: center; mask-repeat: no-repeat;
  -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
}
[data-tree-v2] .knowledge-tree-v2-stage { transition-duration: 720ms; }
[data-tree-v2] .knowledge-tree-layout { width: min(1600px, 100%); grid-template-columns: minmax(0, 3fr) minmax(270px, 1fr); }
[data-tree-v2] .knowledge-tree-panel { min-width: 0; width: auto; max-width: 100%; }
[data-tree-v2] .knowledge-tree-panel p { width: auto; max-width: 100%; }
[data-tree-v2] .knowledge-tree-panel h3 { font-size: clamp(1.8rem, 2.35vw, 3rem); line-height: 1.12; }
[data-tree-v2] .knowledge-tree-visual { width: 100%; aspect-ratio: 1.45; }
[data-tree-v2] .knowledge-tree-photo-v2 { inset: 0 11% 0 11%; transform: none; }
[data-tree-v2] .knowledge-tree-visual > .tree-zone {
  width: 21%; min-height: 44px; text-shadow: none; transform: none;
  padding-top: 0; gap: 12px;
}
[data-tree-v2] .knowledge-tree-visual > .tree-zone::after {
  display: block; top: 16px; left: var(--guide-left, 0); right: auto; width: var(--guide-width, 100%);
  height: 1px; border: 0; background: var(--gray); opacity: .6;
  transform: none; transition: background-color 200ms ease;
}
[data-tree-v2] .knowledge-tree-visual > .tree-zone:hover::after,
[data-tree-v2] .knowledge-tree-visual > .tree-zone:focus-visible::after,
[data-tree-v2] .knowledge-tree-visual > .tree-zone[aria-pressed="true"]::after { width: var(--guide-width, 100%); background: var(--wine); }
[data-tree-v2] .knowledge-tree-visual > .tree-zone:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; }
[data-tree-v2] .knowledge-tree-visual > .tree-zone-branches { top: 43%; left: 0; width: 16%; --guide-width: 240%; }
[data-tree-v2] .knowledge-tree-visual > .tree-zone-leaves { top: 22%; right: 0; left: auto; --guide-left: -95%; --guide-width: 195%; }
[data-tree-v2] .knowledge-tree-visual > .tree-zone-trunk {
  bottom: 19%;
  top: auto;
  right: 0;
  left: auto;
  --guide-left: -150%;
  --guide-width: 250%;
}
[data-tree-v2] .knowledge-tree-visual > .tree-zone-roots { bottom: 14%; top: auto; left: 0; --guide-width: 210%; }
@media (max-width: 1100px) {
  [data-tree-v2] .knowledge-tree-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 601px) and (max-width: 1100px) {
  [data-tree-v2] .knowledge-tree-visual > .tree-zone-trunk {
    width: min(32%, 15rem);
    --guide-left: -105%;
    --guide-width: 205%;
  }
}
@media (max-width: 600px) {
  [data-tree-v2] .knowledge-tree-visual {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px; aspect-ratio: auto; padding-top: 76%; margin-block: 12px 24px;
  }
  [data-tree-v2] .knowledge-tree-photo-v2 { inset: 0 auto auto -4%; width: 108%; height: auto; aspect-ratio: 3 / 2; }
  [data-tree-v2] .knowledge-tree-visual > .tree-zone { position: relative; inset: auto; width: 100%; align-self: start; --guide-left: 0; --guide-width: 100%; }
  [data-tree-v2] .knowledge-tree-visual > .tree-zone strong { font-size: clamp(.9rem, 3.7vw, 1rem); }
  [data-tree-v2] .knowledge-tree-visual > .tree-zone-roots { order: 4; }
  [data-tree-v2] .knowledge-tree-visual > .tree-zone-trunk { order: 3; }
  [data-tree-v2] .knowledge-tree-visual > .tree-zone-branches { order: 2; }
  [data-tree-v2] .knowledge-tree-visual > .tree-zone-leaves { order: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-tree-v2] .knowledge-tree-v2-stage { transition: none; }
}