/* v27 · Sociedad · pieza propia (agente SOCIEDAD).
   Tres bandas: la comunidad por dentro (papel), cómo se teje la confianza (noche, el gran momento)
   y la red de mentores y diáspora (papel).
   Acento achiote (#E07A5F): sobre papel solo en trazos y rellenos; como texto solo sobre noche (5,6:1). */

.cm-pieza{ --soc-ac:#E07A5F; --soc-ac-hondo:#9C3F27 }

/* ============ 1 · La comunidad, por dentro ============ */
.soc-casa__cab{ max-width:46rem }
.soc-casa__cab .antetitulo{ margin:0 0 var(--e-xs) }
.soc-casa__cab .h2{ margin:0; text-wrap:balance }
.soc-casa__cab .entrada{ margin-top:var(--e-sm); max-width:58ch }

.soc-casa__foto{ margin:clamp(2rem,4vw,3.25rem) 0 0 }
.soc-casa__foto img{
  display:block; width:100%; height:auto; aspect-ratio:16/7; object-fit:cover; object-position:50% 58%;
  border-radius:.375rem;
}
.soc-casa__foto figcaption,.soc-casa__chica figcaption{ margin-top:.6rem; font-size:var(--t-nota); color:var(--t3); text-align:right }

.soc-casa__rej{
  display:grid; gap:clamp(2rem,5vw,5rem); margin-top:clamp(2.25rem,4.5vw,3.75rem);
  grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start;
}
.soc-casa__cifras{ display:grid; gap:var(--e-md) }
.soc-cifra{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.25rem 1.1rem; align-items:center }
.soc-cifra__n{
  font-family:var(--sans); font-weight:700; font-size:clamp(3rem,2.2rem + 3vw,4.75rem); line-height:.9;
  letter-spacing:-.03em; color:var(--t1); font-variant-numeric:tabular-nums; min-width:2ch;
}
.soc-cifra__t{ line-height:1.5; max-width:30ch }
.soc-casa__fuente{ font-size:var(--t-nota); color:var(--t2); text-decoration-thickness:1px; text-underline-offset:.18em }
.soc-casa__fuente:hover{ text-decoration-thickness:2px }

.soc-casa__org{ margin:0; display:grid }
.soc-casa__org div{ display:grid; grid-template-columns:minmax(9rem,13rem) minmax(0,1fr); gap:.35rem 1.5rem; padding:var(--e-sm) 0; border-top:1px solid var(--fl) }
.soc-casa__org div:last-child{ border-bottom:1px solid var(--fl) }
.soc-casa__org dt{ font-family:var(--sans); font-weight:650; color:var(--t1); line-height:1.35 }
.soc-casa__org dd{ margin:0; line-height:1.6; max-width:54ch }

.soc-casa__tic{
  display:grid; gap:clamp(1.75rem,4vw,4rem); margin-top:clamp(2.75rem,5vw,4.5rem);
  grid-template-columns:minmax(0,6fr) minmax(0,6fr); align-items:center;
}
.soc-casa__chica{ margin:0 }
.soc-casa__chica img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:50% 60%; border-radius:.375rem }
.soc-casa__h3{ margin:0 0 var(--e-sm); font-family:var(--sans); font-size:var(--t-seccion); line-height:1.25; color:var(--t1); text-wrap:balance; max-width:24ch }
.soc-casa__tic-txt > p{ margin:0; line-height:1.65; max-width:54ch }
.soc-casa__pasos{ list-style:none; margin:var(--e-md) 0 0; padding:0; display:grid; gap:.85rem; counter-reset:soc }
.soc-casa__pasos li{ counter-increment:soc; display:grid; grid-template-columns:1.6rem minmax(0,1fr); gap:.6rem; align-items:baseline; line-height:1.55; max-width:52ch }
.soc-casa__pasos li::before{ content:counter(soc); font-family:var(--sans); font-weight:650; font-size:1.15rem; color:var(--soc-ac-hondo); font-variant-numeric:tabular-nums }
.soc-casa__pasos b{ font-weight:650; color:var(--t1) }

@media (max-width:860px){
  .soc-casa__rej,.soc-casa__tic{ grid-template-columns:minmax(0,1fr) }
  .soc-casa__foto img{ aspect-ratio:4/3; object-position:50% 60% }
  .soc-casa__org div{ grid-template-columns:minmax(0,1fr) }
}

/* ============ 2 · Cómo se teje la confianza ============ */
.soc-telar{
  --soc-urd:#55606D;           /* urdimbre: piedra apagada sobre noche, opaca para tapar la trama */
  --soc-trama:var(--piedra);
  --soc-enj:#8A949E;
  max-width:var(--ancho,86rem); margin-inline:auto; color:var(--t2);
}
.soc-telar a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em }
.soc-telar a:hover{ text-decoration-thickness:2px }

.soc-telar__cab{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(1.75rem,4vw,4.5rem); align-items:end;
  margin-bottom:clamp(2.25rem,4.5vw,3.75rem);
}
.soc-telar__cab .antetitulo{ margin:0 0 var(--e-xs) }
.soc-telar__cab .h2{ margin:0; text-wrap:balance }
.soc-telar__cab .entrada{ margin-top:var(--e-sm); max-width:56ch }
.soc-telar__hilado{ margin:0 }
.soc-telar__hilado img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:30% 45%; border-radius:.375rem }
.soc-telar__hilado figcaption{ margin-top:.55rem; font-size:var(--t-nota); color:var(--t3); text-align:right }

.soc-telar__cuerpo{
  display:grid; gap:clamp(1.75rem,4vw,4rem);
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start;
}

/* Relaciones */
.soc-telar__fig{ margin:0; display:grid; gap:var(--e-md) }
.soc-telar__rels{ display:flex; flex-wrap:wrap; gap:.5rem }
.soc-telar__rel{
  font:inherit; font-family:var(--sans); font-size:.95rem; font-weight:560; cursor:pointer;
  min-height:44px; padding:.45rem 1rem; border-radius:999px;
  display:inline-flex; align-items:baseline; gap:.55rem;
  background:transparent; color:var(--t1); border:1px solid var(--fl);
  transition:background-color .2s var(--curva), border-color .2s var(--curva), color .2s var(--curva);
}
.soc-telar__rel:hover{ border-color:var(--t2) }
.soc-telar__rel[aria-pressed="true"]{ background:var(--papel); border-color:var(--papel); color:var(--tinta) }
.soc-telar__rel-n{ font-size:.82rem; font-weight:500; color:var(--t3); font-variant-numeric:tabular-nums }
.soc-telar__rel[aria-pressed="true"] .soc-telar__rel-n{ color:var(--tinta-2) }

/* El telar */
.soc-tela{ display:grid; gap:.6rem }
.soc-tela__lados{ margin:0; display:flex; justify-content:space-between; gap:1rem; font-family:var(--sans); font-size:.92rem; font-weight:620; color:var(--t1) }
.soc-tela__lado--com{ color:var(--soc-ac) }
.soc-tela__lado{ transition:opacity .25s var(--curva) }
.soc-tela__lado.es-cambia{ opacity:0 }
.soc-tela__marco{ position:relative }
.soc-tela__svg{ display:block; width:100%; height:auto; overflow:visible }
.soc-tela__urd line{ stroke:var(--soc-urd); stroke-width:2.2 }
.soc-tela__enj{ fill:var(--soc-enj) }
.soc-tela__enj--com{ fill:var(--soc-ac) }
.soc-tela__trama{
  stroke:var(--soc-trama); stroke-linecap:butt; opacity:.78;
  stroke-width:calc(var(--n) * 3.5px + 1px);
  transition:stroke-width .3s var(--curva), stroke .25s var(--curva), opacity .25s var(--curva);
}
.soc-tela__sobre rect{
  fill:var(--soc-urd); stroke:var(--noche); stroke-width:.8; vector-effect:non-scaling-stroke;
  transform:scaleY(calc(var(--n) * 3.5 + 5));
  transition:transform .3s var(--curva);
}
.soc-tela__fila.es-dim .soc-tela__trama{ stroke:var(--papel); opacity:1 }
.soc-tela__fila.es-manda .soc-tela__trama{ stroke:var(--soc-ac); opacity:1 }

/* Tejer: cada trama pasa de izquierda a derecha, una tras otra (solo con movimiento) */
@keyframes soc-pasa{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
.soc-tela.es-espera .soc-tela__trama{ stroke-dasharray:1 1; stroke-dashoffset:1 }
.soc-tela.es-teje .soc-tela__trama{
  stroke-dasharray:1 1; animation:soc-pasa .62s cubic-bezier(.45,.05,.3,1) both; animation-delay:calc(var(--k) * .085s);
}

/* Las hebras son las pestañas: cada fila del telar es un botón */
.soc-tela__tabs{ position:absolute; inset:0 }
.soc-tela__tab{
  position:absolute; left:0; right:0; top:calc(var(--y) - 8.3%); height:16.6%;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:0 7.4% 0 7.4%; cursor:pointer; font:inherit; font-family:var(--sans);
  background:transparent; border:0; border-radius:.5rem; color:var(--t1);
}
.soc-tela__tab:focus-visible{ outline:3px solid var(--foco); outline-offset:0 }
.soc-tela__et,.soc-tela__n{
  pointer-events:none; background:var(--noche); border:1px solid var(--fl);
  transition:background-color .2s var(--curva), color .2s var(--curva), border-color .2s var(--curva);
}
.soc-tela__et{ font-size:.88rem; font-weight:560; padding:.22rem .7rem .25rem; border-radius:999px; white-space:nowrap }
.soc-tela__cod{ color:var(--t3); font-variant-numeric:tabular-nums; margin-right:.15rem }
.soc-tela__n{
  min-width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center;
  font-size:.92rem; font-weight:650; font-variant-numeric:tabular-nums;
}
.soc-tela__tab:hover .soc-tela__et{ border-color:var(--t2) }
.soc-tela__tab[aria-selected="true"] .soc-tela__et{ background:var(--papel); color:var(--tinta); border-color:var(--papel) }
.soc-tela__tab[aria-selected="true"] .soc-tela__cod{ color:var(--tinta-2) }
.soc-tela__tab.es-manda .soc-tela__n{ background:var(--soc-ac); border-color:var(--soc-ac); color:var(--tinta) }
.soc-telar__ley{ font-size:var(--t-nota); color:var(--t3); line-height:1.5; max-width:52ch }

/* Panel: el resultado arriba, luego la hebra elegida */
.soc-telar__panel{ display:grid; gap:var(--e-md); align-content:start }
.soc-res{ display:grid; gap:.35rem; padding-bottom:var(--e-md); border-bottom:1px solid var(--fl) }
.soc-res__k{ margin:0; font-family:var(--sans); font-size:.98rem; color:var(--t2) }
.soc-res__k span{ color:var(--t1); font-weight:620 }
.soc-res__n{ margin:0; display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap }
.soc-res__num{
  font-family:var(--sans); font-weight:700; font-size:clamp(3.5rem,2.6rem + 3vw,5.25rem); line-height:.95;
  color:var(--soc-ac); font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.soc-res__nom{ font-family:var(--sans); font-weight:650; font-size:var(--t-titular); color:var(--t1); line-height:1.1 }
.soc-res__escala{ list-style:none; margin:.4rem 0 .2rem; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:.3rem; max-width:22rem }
.soc-res__escala li{ display:grid; gap:.3rem }
.soc-res__escala li::before{ content:""; height:6px; border-radius:3px; background:var(--fl); transition:background-color .25s var(--curva) }
.soc-res__escala li.es-on::before{ background:var(--soc-ac) }
.soc-res__escala span{ font-family:var(--sans); font-size:.78rem; color:var(--t3); font-variant-numeric:tabular-nums }
.soc-res__t{ margin:.35rem 0 0; line-height:1.6; max-width:52ch; color:var(--t1) }

.soc-telar__fichas{ display:grid; gap:var(--e-md) }
.soc-telar__ficha{ display:grid; gap:var(--e-sm) }
.soc-telar__ficha + .soc-telar__ficha{ border-top:1px solid var(--fl); padding-top:var(--e-md) } /* sin JS: todas visibles */
.js-telar .soc-telar__ficha + .soc-telar__ficha{ border-top:0; padding-top:0 }
.soc-telar__ficha[hidden]{ display:none }
.js-telar .soc-telar__ficha:not([hidden]){ animation:soc-aparece .22s var(--curva) both }
@keyframes soc-aparece{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }
.soc-telar__pregunta{ margin:0; font-family:var(--lee); font-size:var(--t-seccion); line-height:1.3; color:var(--t1); text-wrap:balance }
.soc-telar__pregunta span{ display:block; font-family:var(--sans); font-size:var(--t-rotulo); font-weight:600; color:var(--t2); margin-bottom:.35rem }
.soc-telar__dl{ margin:0; display:grid; gap:var(--e-sm) }
.soc-telar__dl div{ display:grid; gap:.2rem }
.soc-telar__dl dt{ font-family:var(--sans); font-size:var(--t-nota); font-weight:600; color:var(--t2) }
.soc-telar__dl dd{ margin:0; line-height:1.6; max-width:52ch; color:var(--t1) }
.soc-telar__dl div + div dd{ color:var(--t2) }

.soc-telar__nivel{ flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1.25rem; padding-top:var(--e-sm); border-top:1px solid var(--fl) }
.soc-telar__nivel-t{ font-family:var(--sans); font-size:var(--t-nota); color:var(--t2) }
.soc-telar__paso{ display:flex; align-items:center; gap:.5rem }
.soc-telar__btn{
  width:44px; height:44px; border-radius:50%; cursor:pointer; font:inherit; font-size:1.3rem; line-height:1;
  display:grid; place-items:center; background:transparent; color:var(--t1); border:1px solid var(--fl);
  transition:border-color .2s var(--curva), background-color .2s var(--curva);
}
.soc-telar__btn:hover:not([aria-disabled="true"]){ border-color:var(--t1); background:rgba(244,242,238,.06) }
.soc-telar__btn[aria-disabled="true"]{ opacity:.35; cursor:not-allowed }
.soc-telar__valor{ min-width:9.5rem; text-align:center; font-family:var(--sans); font-weight:600; color:var(--t1); font-variant-numeric:tabular-nums }
.soc-telar__volver{
  flex-basis:100%; justify-self:start; width:max-content; min-height:44px; padding:0; cursor:pointer;
  background:none; border:0; font:inherit; font-family:var(--sans); font-size:var(--t-nota); color:var(--t1);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
}
.soc-telar__volver:hover{ text-decoration-thickness:2px }
.soc-telar__volver[hidden]{ display:none }
[data-solo-js]{ display:none }
.js-telar [data-solo-js]{ display:flex }

.soc-telar__nota{ margin:clamp(2rem,4vw,3rem) 0 0; font-size:var(--t-nota); color:var(--t3); line-height:1.55; max-width:72ch }

@media (max-width:960px){
  .soc-telar__cuerpo{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:760px){
  .soc-telar__cab{ grid-template-columns:minmax(0,1fr) }
  .soc-telar__hilado img{ aspect-ratio:3/2 }
}
@media (max-width:520px){
  .soc-tela__tab{ padding:0 6.6% }
  .soc-tela__et{ font-size:.8rem; padding:.16rem .55rem .18rem }
  .soc-tela__n{ min-width:1.65rem; height:1.65rem; font-size:.82rem }
  .soc-telar__rel{ padding:.4rem .8rem; font-size:.9rem }
}

/* ============ 3 · Red de mentores y diáspora ============ */
.soc-red__rej{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,5rem); align-items:center }
.soc-red__txt .antetitulo{ margin:0 0 var(--e-xs) }
.soc-red__txt .h2{ margin:0; text-wrap:balance; max-width:22ch }
.soc-red__txt .entrada{ margin-top:var(--e-sm); max-width:56ch }
.soc-red__txt .entrada a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em }
.soc-red__cta{ margin:var(--e-md) 0 0 }
.soc-red__nudos{ position:relative }
.soc-red__hilo{ display:block; width:100%; height:3.75rem; overflow:visible }
.soc-red__hilo path{ fill:none; stroke:var(--soc-ac); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke }
.soc-red__hilo circle{ fill:var(--soc-ac) }
.soc-red.es-espera .soc-red__hilo path{ stroke-dasharray:1 1; stroke-dashoffset:1 }
.soc-red.es-visto .soc-red__hilo path{ stroke-dasharray:1 1; animation:soc-pasa 1.1s var(--curva) both }
.soc-red__k{ margin:0 0 .6rem; font-family:var(--sans); font-weight:650; color:var(--t1) }
.soc-red__lista{ list-style:none; margin:-1.9rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem }
.soc-red__lista li{ display:grid; gap:.7rem; line-height:1.5; font-size:.97rem }
.soc-red__lista b{ font-family:var(--sans); font-weight:650; color:var(--t1) }
.soc-red__nudo{ width:1.05rem; height:1.05rem; border-radius:50%; background:var(--papel); border:3px solid var(--soc-ac); justify-self:start }
.soc-red__lista li:nth-child(2) .soc-red__nudo{ justify-self:center }
.soc-red__lista li:nth-child(3) .soc-red__nudo{ justify-self:end }
@media (max-width:520px){
  .soc-red__lista{ grid-template-columns:minmax(0,1fr); margin-top:.5rem }
  .soc-red__lista li{ grid-template-columns:1.05rem minmax(0,1fr); gap:.75rem; align-items:baseline }
  .soc-red__lista li .soc-red__nudo{ justify-self:start !important; transform:translateY(.15rem) }
}
@media (max-width:860px){ .soc-red__rej{ grid-template-columns:minmax(0,1fr) } }

/* Movimiento reducido: todo en su lugar, sin tejer ni desvanecer */
@media (prefers-reduced-motion:reduce){
  .soc-tela__trama,.soc-tela__sobre rect,.soc-telar__rel,.soc-tela__lado,.soc-res__escala li::before{ transition:none }
  .soc-tela.es-teje .soc-tela__trama,.soc-tela.es-espera .soc-tela__trama,
  .soc-red.es-espera .soc-red__hilo path,.soc-red.es-visto .soc-red__hilo path{ animation:none; stroke-dasharray:none; stroke-dashoffset:0 }
  .js-telar .soc-telar__ficha:not([hidden]){ animation:none }
}
@media (forced-colors:active){
  .soc-tela__fila.es-manda .soc-tela__trama{ stroke:Highlight }
  .soc-telar__rel[aria-pressed="true"],.soc-tela__tab[aria-selected="true"] .soc-tela__et{ outline:2px solid Highlight }
}

/* Celular: el telar gana altura (las etiquetas son HTML y no se deforman) */
@media (max-width:520px){
  .soc-tela__svg{ height:21rem }
  .soc-tela__urd line{ stroke-width:2.6 }
}

/* ============ v28 · urdimbre de los 44 pueblos, gobierno comunal y fuentes plegadas ============ */
.soc-casa__urd{ margin:-.25rem 0 0; display:grid; gap:.4rem }
.soc-urd{ display:block; width:100%; max-width:22rem; height:auto; overflow:visible }
.soc-urd line{ stroke:var(--t2); stroke-width:2; stroke-linecap:round; opacity:.55 }
.soc-urd line.es-mats{ stroke:var(--soc-ac); stroke-width:4.5; opacity:1 }
.soc-urd__trama{ fill:none; stroke:var(--t1); stroke-width:2.2; stroke-linecap:round; opacity:.8 }
.soc-casa__urd figcaption{ font-size:var(--t-nota); color:var(--t3) }
.soc-casa.es-espera .soc-urd__trama{ stroke-dasharray:1 1; stroke-dashoffset:1 }
.soc-casa.es-visto .soc-urd__trama{ stroke-dasharray:1 1; animation:soc-pasa 1.2s var(--curva) .2s both }

.soc-casa__gob{ display:grid; gap:var(--e-md) }
.soc-gob{ display:block; width:100%; height:auto; overflow:visible }
.soc-gob text{ font-family:var(--sans); font-size:15px; font-weight:650; fill:var(--t1) }
.soc-gob .soc-gob__s, .soc-gob .soc-gob__v{ font-family:var(--lee); font-style:italic; font-weight:400; font-size:13.5px; fill:var(--t2) }
.soc-gob__n circle{ fill:var(--blanco); stroke:var(--t1); stroke-width:1.5; transition:fill .3s var(--curva) }
.soc-gob__n--asa circle{ fill:color-mix(in srgb, var(--soc-ac) 22%, var(--papel)); stroke:var(--soc-ac-hondo) }
.soc-gob__f{ fill:none; stroke:var(--t1); stroke-width:1.5 }
.soc-gob__f--fino{ stroke:var(--t3); stroke-dasharray:3 4 }
.soc-gob marker path{ fill:none; stroke:var(--t1); stroke-width:1.5 }
.soc-gob__afuera text{ font-weight:600; font-size:14px; fill:var(--t2) }
.soc-gob__org circle{ fill:var(--papel); stroke:var(--soc-ac-hondo); stroke-width:1.5 }
.soc-casa__gob:has(.soc-casa__org div:nth-child(1):hover) .soc-gob__n--asa circle,
.soc-casa__gob:has(.soc-casa__org div:nth-child(2):hover) .soc-gob__n--jun circle{ fill:color-mix(in srgb, var(--soc-ac) 45%, var(--papel)) }
.soc-casa__gob:has(.soc-casa__org div:nth-child(3):hover) .soc-gob__org circle{ fill:var(--soc-ac) }

.soc-fyc{ margin-top:clamp(2rem,4vw,3rem); max-width:72ch; font-family:var(--sans); font-size:.84rem; line-height:1.55; color:var(--t3) }
.soc-fyc summary{ display:inline-flex; align-items:center; gap:.55rem; min-height:44px; cursor:pointer; list-style:none; font-weight:600; color:var(--t1); border-radius:.3rem }
.soc-fyc summary::-webkit-details-marker{ display:none }
.soc-fyc summary::after{ content:""; width:.45rem; height:.45rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--curva) }
.soc-fyc[open] summary::after{ transform:rotate(-135deg) translateY(-1px) }
.soc-fyc summary:focus-visible{ outline:2px solid var(--foco); outline-offset:3px }
.soc-fyc ul{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.45rem }
.soc-fyc p{ margin:.4rem 0 0; font-family:var(--lee); font-size:.92rem }
.soc-fyc a{ color:inherit; text-decoration:underline; text-underline-offset:.2em }
.soc-telar .soc-fyc{ margin-top:.75rem }
@media (prefers-reduced-motion:reduce){
  .soc-casa.es-espera .soc-urd__trama, .soc-casa.es-visto .soc-urd__trama{ animation:none; stroke-dasharray:none; stroke-dashoffset:0 }
  .soc-gob__n circle, .soc-fyc summary::after{ transition:none }
}
@media (max-width:520px){
  .soc-gob text{ font-size:19px }
  .soc-gob .soc-gob__s, .soc-gob .soc-gob__v{ font-size:17px }
  .soc-gob__afuera text{ font-size:18px }
  .soc-gob{ margin-inline:-.25rem; width:calc(100% + .5rem) }
}