/* /desarrollo-territorial/ · «Nuestro enfoque»: el árbol del territorio y su panel (v21). Prefijo ar-. */
.ar-sec .qcab{ margin-bottom:var(--e-xl) }
.ar{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(19rem, .9fr); gap:clamp(1.5rem, 3.5vw, 3.5rem); align-items:start }
.ar-fig{ margin:0; position:relative; min-width:0 }
.ar-svg{ display:block; width:100%; height:auto; overflow:visible; -webkit-tap-highlight-color:transparent }

/* ---------- lámina (v22: el fondo y sus estilos viven en dt-arbol-lamina.svg) */
.ar-corte{ fill:none; stroke:#8C7258; stroke-width:1.6; opacity:.8 }
.ar-raiz{ fill:url(#arRaiz); transition:opacity .45s ease }
.ar-pa1{ fill:#3F7A4E } .ar-pa2{ fill:#5C9A5E } .ar-pa3{ fill:#2B5A3C }
.ar-rot{ font-family:var(--sans); font-size:19px; font-weight:620; fill:var(--suave-claro, #C5D3D5); letter-spacing:.01em; paint-order:stroke; stroke:rgba(8,20,34,.75); stroke-width:4px; stroke-linejoin:round }

/* ---------- trazas: la rama o la raíz elegida se ilumina desde el tronco */
.ar-traza{ fill:none; stroke:var(--c, var(--papel)); stroke-width:3.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  transition:stroke-dashoffset .9s var(--salida), opacity .3s ease }
.ar-traza.es-on{ stroke-dashoffset:0; opacity:.95 }

/* ---------- puntos */
.ar-n{ cursor:pointer; outline:none }
.ar-n__toque{ fill:transparent }
.ar-n__halo{ fill:none; stroke:var(--c); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; transition:opacity .3s ease, transform .5s var(--salida) }
.ar-n__base{ fill:#0B1B2C }
.ar-n__aro{ fill:none; stroke:var(--c); stroke-width:3.5; transition:stroke-width .25s ease, stroke .25s ease }
.ar-n image{ transform-box:fill-box; transform-origin:center; transition:transform .45s var(--salida), opacity .3s ease }
.ar-n__rot{ transform:translate(0, var(--dy)) }
.ar-n__esc{ transform-box:fill-box; transform-origin:center; transition:transform .3s var(--salida) }
.ar-n__rot rect{ fill:rgba(8,20,34,.84); stroke:rgba(216,203,179,.22); stroke-width:1 }
.ar-n__rot text{ font-family:var(--sans); font-size:21px; font-weight:620; fill:var(--papel); letter-spacing:.005em }
.ar-n--raiz .ar-n__rot text{ fill:var(--piedra-2, #E6DCC9) }
.ar-n:hover .ar-n__aro,.ar-n.es-on .ar-n__aro{ stroke-width:6 }
.ar-n:hover image,.ar-n.es-on image{ transform:scale(1.07) }
.ar-n.es-on .ar-n__halo{ opacity:.9; transform:scale(1.16) }
.ar-n.es-on .ar-n__rot rect{ fill:var(--c); stroke:none }
.ar-n.es-on .ar-n__rot text{ fill:var(--noche) }
.ar-n:focus-visible .ar-n__halo{ opacity:1; stroke:var(--papel); stroke-width:3; transform:scale(1.2) }
.ar.es-foco .ar-n:not(.es-on) image{ opacity:.62 }
.ar.es-foco .ar-n:not(.es-on) .ar-n__aro{ stroke-opacity:.55 }
.ar.es-raiz .ar-raiz:not(.es-on){ opacity:.5 }

/* ---------- panel */
.ar-panel{ position:sticky; top:calc(var(--alto-nav, 4.25rem) + 1.25rem); display:flex; flex-direction:column; height:0; min-height:min(100%, calc(100vh - var(--alto-nav, 4.25rem) - 2.5rem)); max-height:calc(100vh - var(--alto-nav, 4.25rem) - 2.5rem); overflow:auto; overscroll-behavior:contain;
  --fondo:#132236; background:var(--fondo); border:1px solid rgba(216,203,179,.16); border-radius:20px; box-shadow:0 30px 60px -30px rgba(2,8,18,.6);
  --pad:clamp(1.25rem, 2.2vw, 1.9rem); padding:var(--pad); color:#DCE3E6; scrollbar-width:thin; scrollbar-color:rgba(216,203,179,.3) transparent; outline:none }
.ar-panel::after{ content:""; position:sticky; bottom:0; flex:none; display:block; height:2.75rem; margin:-2.75rem calc(-1 * var(--pad)) 0; background:linear-gradient(rgba(19,34,54,0), rgba(19,34,54,.92)); pointer-events:none; opacity:0; transition:opacity .25s ease }
.ar-panel.es-mas::after{ opacity:1 }
.ar-panel:focus-visible{ outline:3px solid var(--piedra); outline-offset:3px }
.ar-intro,.ar-f{ animation:ar-entra .45s var(--salida) both }
@keyframes ar-entra{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.ar-intro{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:space-between }
.ar-intro__k{ font-family:var(--sans); font-size:.86rem; font-weight:620; color:var(--suave); margin:0 0 .4rem }
.ar-intro__t{ font-family:var(--sans); font-size:clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height:1.15; font-weight:650; color:var(--papel); margin:0; outline:none }
.ar-intro__d{ font-size:1rem; line-height:1.6; margin:.75rem 0 0; color:#C9D4D7 }
.ar-intro__g{ margin-top:1.4rem }
.ar-intro__g h4{ display:flex; align-items:baseline; gap:.5rem; font-family:var(--sans); font-size:.98rem; font-weight:650; color:var(--piedra); margin:0 0 .65rem }
.ar-intro__g h4 span{ font-weight:500; font-size:.86rem; color:var(--suave) }
.ar-chips{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(9.4rem, 1fr)); gap:.5rem }
.ar-chip{ display:flex; align-items:center; gap:.6rem; width:100%; min-height:var(--toque, 44px); padding:.3rem .8rem .3rem .3rem; border-radius:999px;
  background:rgba(10,26,47,.55); border:1px solid rgba(216,203,179,.14); color:var(--papel); font:600 .95rem/1.2 var(--sans); text-align:left; cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease, transform .2s var(--salida) }
.ar-chip img{ width:2.25rem; height:2.25rem; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--c); flex:none }
.ar-chip:hover{ border-color:var(--c); background:rgba(10,26,47,.85); transform:translateY(-1px) }
.ar-chip:focus-visible{ outline:3px solid var(--piedra); outline-offset:2px }

.ar-f__barra{ position:sticky; z-index:2; top:calc(-1 * var(--pad)); display:flex; align-items:center; gap:.5rem; margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) .75rem; padding:calc(var(--pad) - .35rem) calc(var(--pad) - .35rem) .5rem; background:var(--fondo); border-radius:20px 20px 0 0 }
.ar-f__volver{ display:inline-flex; align-items:center; gap:.35rem; min-height:var(--toque, 44px); padding:0 .85rem 0 .5rem; border-radius:999px; border:0; background:transparent;
  color:var(--suave-claro); font:600 .92rem var(--sans); cursor:pointer; transition:background-color .2s ease, color .2s ease }
.ar-f__volver svg,.ar-f__paso svg{ width:1.15rem; height:1.15rem }
.ar-f__volver:hover{ background:rgba(216,203,179,.1); color:var(--papel) }
.ar-f__cont{ margin-left:auto; font:600 .86rem var(--sans); color:var(--suave); font-variant-numeric:tabular-nums }
.ar-f__pasos{ display:flex; gap:.25rem }
.ar-f__paso{ display:grid; place-items:center; width:var(--toque, 44px); height:var(--toque, 44px); border-radius:50%; border:1px solid rgba(216,203,179,.2); background:transparent; color:var(--papel); cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease }
.ar-f__paso:hover{ background:rgba(216,203,179,.1); border-color:rgba(216,203,179,.45) }
.ar-f__volver:focus-visible,.ar-f__paso:focus-visible,.ar-f__ir:focus-visible,.ar-f__ev a:focus-visible{ outline:3px solid var(--piedra); outline-offset:2px }
.ar-f__foto{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9; background:#11253F; box-shadow:0 18px 40px rgba(2,8,18,.45) }
.ar-f__foto img{ display:block; width:100%; height:100%; object-fit:cover; animation:ar-foto 1.1s var(--salida) both }
.ar-f__foto::after{ content:""; position:absolute; inset:auto 0 0; height:4px; background:var(--c) }
@keyframes ar-foto{ from{ transform:scale(1.06) } to{ transform:none } }
.ar-f__txt{ padding:1.05rem 0 .1rem }
.ar-f__k{ display:flex; align-items:center; gap:.5rem; font:600 .88rem var(--sans); color:var(--suave); margin:0 }
.ar-f__k i{ width:.6rem; height:.6rem; border-radius:50%; background:var(--c); flex:none }
.ar-f__t{ font-family:var(--sans); font-size:clamp(1.6rem, 1.25rem + 1vw, 2.1rem); line-height:1.08; font-weight:650; letter-spacing:-.01em; color:var(--papel); margin:.35rem 0 0; outline:none }
.ar-f__q{ font-family:var(--lee); font-size:1.06rem; line-height:1.5; color:var(--piedra); margin:.45rem 0 0 }
.ar-f__d{ font-size:1rem; line-height:1.62; color:#DCE3E6; margin:.8rem 0 0 }
.ar-f__bloque{ margin-top:1rem; padding-top:.9rem; border-top:1px solid rgba(216,203,179,.14) }
.ar-f__bloque h4{ font:650 .95rem var(--sans); color:var(--papel); margin:0 0 .5rem }
.ar-f__bloque p{ font-size:.97rem; line-height:1.6; margin:0; color:#C9D4D7 }
.ar-f__incl{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem }
.ar-f__incl li{ position:relative; padding-left:1.1rem; font-size:.97rem; line-height:1.5; color:#C9D4D7 }
.ar-f__incl li::before{ content:""; position:absolute; left:.1rem; top:.62em; width:.38rem; height:.38rem; border-radius:50%; background:var(--c) }
.ar-f__vias{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem }
.ar-f__vias li{ font:550 .86rem/1.35 var(--sans); color:var(--suave-claro); padding:.4rem .7rem; border-radius:8px; background:rgba(10,26,47,.6); border:1px solid rgba(216,203,179,.12) }
.ar-f__ev{ font-size:.88rem; line-height:1.55; color:var(--suave); margin:.95rem 0 0 }
.ar-f__ev a{ color:var(--suave-claro); text-decoration:underline; text-decoration-color:rgba(197,211,213,.4); text-underline-offset:3px }
.ar-f__ev a:hover{ color:var(--papel) }
.ar-f__ir{ display:inline-flex; align-items:center; gap:.6rem; min-height:var(--toque, 44px); margin-top:1.1rem; padding:.55rem 1.15rem; border-radius:999px;
  background:var(--piedra); color:var(--noche); font:650 .94rem var(--sans); text-decoration:none; transition:background-color .2s ease, transform .2s var(--salida) }
.ar-f__ir:hover{ background:var(--papel); transform:translateY(-1px) }
.ar-f__ir svg{ transition:transform .25s var(--salida) }
.ar-f__ir:hover svg{ transform:translateX(3px) }

/* ---------- entrada al hacer scroll */
.ar-n{ transition:opacity .6s ease; transition-delay:calc(.35s + var(--k, 0) * 70ms) }
.rv .ar:not(.visto) .ar-n{ opacity:0 }

/* ---------- tamaños */
@media (max-width:960px){
  .ar-panel::after{ display:none }
  .ar{ grid-template-columns:1fr }
  .ar-fig{ max-width:44rem; margin-inline:auto; width:100% }
  .ar-panel{ position:relative; top:auto; height:auto; min-height:0; max-height:none; overflow:visible; scroll-margin-top:calc(var(--alto-nav, 4.25rem) + 1rem) }
  /* la barra de la ficha queda a la vista bajo el menú mientras se lee: volver y pasar sin subir */
  .ar-f__barra{ top:var(--alto-nav, 4.25rem) }
}
@media (min-width:1280px){
  .ar-chips{ gap:.65rem }
  .ar-chip{ min-height:3.5rem; gap:.75rem; font-size:1.02rem }
  .ar-chip img{ width:2.75rem; height:2.75rem }
}
@media (min-width:961px){
  .ar-f__foto{ aspect-ratio:2/1 }
}
@media (max-width:1200px){
  .ar-n__esc{ transform:scale(1.18) }
  .ar-rot{ font-size:23px }
}
@media (max-width:600px){
  .ar-fig{ margin-inline:calc(var(--canal) * -1); width:auto; overflow:hidden }
  .ar-svg{ width:122%; max-width:none; margin-left:-11% }
  .ar-n__rot{ transform:translate(var(--mx), var(--my)) }
  .ar-n__esc{ transform:scale(1.5) }
  .ar-rot{ font-size:24px; transform:translateX(-72px) }
  .ar-chips{ grid-template-columns:1fr 1fr }
}
@media (prefers-reduced-motion:reduce){
  .ar-intro,.ar-f,.ar-f__foto img{ animation:none }
  .ar-traza,.ar-n,.ar-n__halo,.ar-n image,.ar-n__esc,.ar-chip,.ar-f__ir,.ar-f__ir svg,.ar-raiz,.ar-panel::after{ transition:none }
}
.ar-rfl,.ar-rfs{ fill:none; stroke-linecap:round; stroke-linejoin:round }
.ar-rfl{ stroke:#E2CDAA; stroke-width:2; opacity:.45 } .ar-rfs{ stroke:#3D2C1F; stroke-width:2.4; opacity:.5 }
.ar-f__barra[hidden],.ar-intro[hidden],.ar-f[hidden]{ display:none }