/* v31 · Sociedad · una sola pieza propia (agente SOC-SP): «La asamblea y el telar», en una banda noche.
   1 · La comunidad, por dentro: la asamblea de Ticumpinía como fondo en capas, el título y el gobierno comunal
       (asamblea, junta y organizaciones) en una tarjeta clara, con los tres papeles al lado.
   2 · El telar del ICT‑5 (el gran momento): la junta sostiene tres relaciones; cada una es un tejido de cinco hebras.
       Al elegir una relación se enciende esa institución en el dibujo de la asamblea.
   Salen: los 44 hilos y sus cifras (ya en «Quiénes»), el bloque de Ticumpinía y la banda de la red de mentores.
   Acento achiote (#E07A5F): como texto solo sobre noche (5,6:1); sobre la tarjeta clara, solo en trazos y rellenos.
   Comportamiento: v27-sociedad.js. */

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

/* ============ La banda ============ */
.soc-pieza{ position:relative; isolation:isolate; overflow:clip; padding-block:0 }
.soc-paso{ position:relative; isolation:isolate }
.soc-paso--asa{ padding-block:clamp(4.5rem,8vw,7rem) clamp(2.5rem,5vw,4rem) }
.soc-paso--telar{ padding-block:clamp(2.5rem,5vw,4rem) clamp(4.5rem,8vw,7rem) }

/* Fotos de fondo en capas: a la derecha, fundidas con la noche */
.soc-fondo{ position:absolute; z-index:-1; top:0; right:0; width:min(64%, 60rem); height:min(40rem, 100%); margin:0; pointer-events:none; overflow:hidden }
.soc-fondo picture{ position:absolute; inset:0; display:block }
.soc-fondo__img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.5 }
.soc-fondo--asa .soc-fondo__img{ object-position:50% 40% }
.soc-fondo--telar{ height:min(34rem, 100%) }
.soc-fondo--telar .soc-fondo__img{ object-position:42% 40%; opacity:.46 }
@supports (animation-timeline:view()){ .soc-fondo__img{ scale:1.06; animation:soc-paralaje linear both; animation-timeline:view() } }
@keyframes soc-paralaje{ from{ transform:translateY(-3%) } to{ transform:translateY(3%) } }
.soc-fondo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--noche) 0, rgba(10,26,47,.6) 32%, rgba(10,26,47,0) 70%),
             linear-gradient(0deg, var(--noche) 0, rgba(10,26,47,0) 55%),
             linear-gradient(180deg, var(--noche) 0, rgba(10,26,47,0) 22%) }

/* Cabecera de la pieza */
.soc-cab{ max-width:44rem; margin:0 0 clamp(2.25rem,4.5vw,3.5rem) }
.soc-cab .antetitulo{ margin:0 0 var(--e-xs); color:var(--soc-ac) }
.soc-cab .h2{ margin:0; max-width:19ch; font-size:clamp(2.2rem,1.4rem + 3vw,4rem); line-height:1.03; letter-spacing:-.03em; color:var(--papel); text-wrap:balance;
  text-shadow:0 2px 20px rgba(6,17,31,.55) }
.soc-cab .entrada{ margin-top:var(--e-md); max-width:52ch; color:#DCE3E6; text-shadow:0 1px 12px rgba(6,17,31,.7) }

/* 1 · La asamblea: tarjeta clara con el dibujo y los tres papeles al lado */
.soc-asa{ display:grid; gap:clamp(1.5rem,3vw,3rem); align-items:center }
@media (min-width:62rem){ .soc-asa{ grid-template-columns:minmax(0,7fr) minmax(0,4fr) } }
.soc-h3{ margin:0 0 var(--e-md); font-family:var(--sans); font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem); line-height:1.15; letter-spacing:-.015em; font-weight:650; color:var(--papel); text-wrap:balance; max-width:22ch }
.soc-org{ margin:0; display:grid; gap:1rem }
.soc-org div{ display:grid; gap:.3rem; padding-top:.85rem; border-top:1px solid var(--fl) }
.soc-org dt{ font-family:var(--sans); font-weight:650; color:var(--papel); line-height:1.35 }
.soc-org dd{ margin:0; font-family:var(--lee); line-height:1.6; color:#C9D4D7; max-width:46ch }
@media (min-width:40rem) and (max-width:61.99rem){ .soc-org{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem 1.5rem } }

.soc-gob__fig{ margin:0; padding:clamp(.9rem,2.4vw,2rem); border-radius:1.4rem; background:var(--blanco); box-shadow:0 40px 80px -50px rgba(0,0,0,.7) }
.soc-gob{ display:block; width:100%; height:auto; overflow:visible }
.soc-gob--movil{ display:none }
@media (max-width:40rem){ .soc-gob--ancho{ display:none } .soc-gob--movil{ display:block } }
.soc-gob text{ font-family:var(--sans); font-size:13px; font-weight:600; fill:var(--tinta) }
.soc-gob .soc-gob__t{ font-size:19px; font-weight:650 }
.soc-gob .soc-gob__t--j{ font-size:14px }
.soc-gob .soc-gob__s, .soc-gob .soc-gob__v{ font-family:var(--lee); font-style:italic; font-weight:400; font-size:14px; fill:var(--tinta-2);
  paint-order:stroke; stroke:var(--blanco); stroke-width:6px; stroke-linejoin:round }
.soc-gob__asa-f{ fill:color-mix(in srgb, var(--soc-ac) 14%, var(--blanco)); stroke:color-mix(in srgb, var(--soc-ac) 45%, transparent); stroke-width:1.2; stroke-dasharray:3 5 }
.soc-gob__p circle, .soc-gob__p path{ fill:none; stroke:var(--soc-ac-hondo); stroke-width:1.6; stroke-linecap:round }
.soc-gob__p--b circle, .soc-gob__p--b path{ stroke:var(--tinta-2) }
.soc-gob__p--j circle, .soc-gob__p--j path{ stroke:var(--papel) }
.soc-gob__jun rect{ fill:var(--noche); stroke:none }
.soc-gob__jun text{ fill:var(--papel) }
.soc-gob__f{ fill:none; stroke:var(--tinta); stroke-width:1.6 }
.soc-gob__f--fino{ stroke:var(--mudo); stroke-width:1.3; stroke-dasharray:3 4 }
.soc-gob marker path{ fill:none; stroke:var(--tinta); stroke-width:1.6 }
.soc-gob__org path{ fill:none; stroke:color-mix(in srgb, var(--soc-ac) 60%, transparent); stroke-width:1.4 }
.soc-gob__org circle{ fill:var(--papel); stroke:var(--soc-ac-hondo); stroke-width:1.4; transition:fill .3s var(--curva) }
.soc-gob__org text{ font-size:11.5px; fill:var(--tinta); letter-spacing:-.01em }
.soc-gob__af circle{ fill:var(--blanco); stroke:var(--tinta); stroke-width:1.4 }
.soc-gob__af g{ fill:none; stroke:var(--tinta); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round }
.soc-gob__af text{ font-size:13px; fill:var(--tinta-2) }
@media (max-width:40rem){
  .soc-gob text{ font-size:15px }
  .soc-gob .soc-gob__t{ font-size:18px }
  .soc-gob .soc-gob__t--j{ font-size:15px }
  .soc-gob .soc-gob__s, .soc-gob .soc-gob__v{ font-size:14px }
  .soc-gob__org text{ font-size:11.5px }
}
/* Las tres relaciones de la junta: la que muestra el telar se enciende en el dibujo */
.soc-gob__af circle, .soc-gob__af text, .soc-gob__f--fino{ transition:fill .3s var(--curva), stroke .3s var(--curva), opacity .3s var(--curva) }
[data-rel-on] .soc-gob__af{ opacity:.55 }
[data-rel-on="escuela"] .soc-gob__af[data-rel="escuela"], [data-rel-on="empresa"] .soc-gob__af[data-rel="empresa"], [data-rel-on="estado"] .soc-gob__af[data-rel="estado"]{ opacity:1 }
[data-rel-on="escuela"] .soc-gob__af[data-rel="escuela"] circle, [data-rel-on="empresa"] .soc-gob__af[data-rel="empresa"] circle, [data-rel-on="estado"] .soc-gob__af[data-rel="estado"] circle{ fill:color-mix(in srgb, var(--soc-ac) 26%, var(--blanco)); stroke:var(--soc-ac-hondo); stroke-width:2 }
[data-rel-on="escuela"] .soc-gob__f--fino[data-rel="escuela"], [data-rel-on="empresa"] .soc-gob__f--fino[data-rel="empresa"], [data-rel-on="estado"] .soc-gob__f--fino[data-rel="estado"]{ stroke:var(--soc-ac-hondo); stroke-width:2; stroke-dasharray:none }
[data-rel-on="escuela"] .soc-gob__af[data-rel="escuela"] text, [data-rel-on="empresa"] .soc-gob__af[data-rel="empresa"] text, [data-rel-on="estado"] .soc-gob__af[data-rel="estado"] text{ fill:var(--tinta); font-weight:700 }
.soc-asa:has(.soc-org div:nth-child(1):hover) .soc-gob__asa-f{ fill:color-mix(in srgb, var(--soc-ac) 30%, var(--blanco)) }
.soc-asa:has(.soc-org div:nth-child(2):hover) .soc-gob__jun rect{ fill:var(--soc-ac-hondo) }
.soc-asa:has(.soc-org div:nth-child(3):hover) .soc-gob__org circle{ fill:color-mix(in srgb, var(--soc-ac) 45%, var(--blanco)) }

.soc-telar{
  --soc-trama:var(--piedra);
  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{ max-width:40rem; padding-block:clamp(2rem,6vw,6rem) clamp(2.5rem,5vw,4rem) }
.soc-telar__cab .antetitulo{ margin:0 0 var(--e-xs); color:var(--soc-ac) }
.soc-telar__cab .h2{ margin:0; font-size:clamp(2.4rem,1.5rem + 3.4vw,4.4rem); line-height:1.02; letter-spacing:-.03em; text-wrap:balance; text-shadow:0 2px 20px rgba(10,26,47,.6) }
.soc-telar__cab .entrada{ margin-top:var(--e-md); max-width:52ch; color:#DCE3E6; text-shadow:0 1px 12px rgba(10,26,47,.8) }

.soc-telar__cuerpo{
  display:grid; gap:clamp(1.75rem,4vw,4rem); grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start;
  padding:clamp(1.25rem,3vw,2.5rem); border-radius:1.5rem; background:rgba(6,17,31,.55); box-shadow:inset 0 0 0 1px rgba(244,242,238,.1);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)
}

/* 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:rgba(244,242,238,.04); 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) }
.soc-telar__rel:focus-visible{ outline:2px solid var(--papel); outline-offset:3px }

/* 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; --izq:9.4rem; --der:2.75rem; padding:0 var(--der) 0 var(--izq) }
/* v30: los rótulos de cada hebra van fuera del telar, a la izquierda del enjulio de la comunidad, y el nivel a la
   derecha del otro enjulio. Así ningún rótulo tapa la urdimbre ni la trama. */
.soc-tela__lados{ padding:0 var(--der, 2.75rem) 0 var(--izq, 9.4rem) }
.soc-tela__svg{ display:block; width:100%; height:clamp(17rem, 22vw, 19rem); overflow:visible } /* v30: alto fijo para que los cinco rótulos nunca se encimen */
/* urdimbre: hebras torcidas en listas de tres, como una cushma */
.soc-tela__h line{ stroke-width:3.2 }
.soc-tela__h--0 line{ stroke:#4E5A68 }
.soc-tela__h--1 line{ stroke:#66717E }
.soc-tela__h .soc-tela__tz{ stroke:rgba(244,242,238,.16); stroke-dasharray:1.6 3 }
/* enjulios con veta */
.soc-tela__enj{ fill:#7B8591 }
.soc-tela__enj--com{ fill:var(--soc-ac) }
.soc-tela__veta{ fill:none; stroke:rgba(6,17,31,.28); stroke-width:1.4; stroke-linecap:round; stroke-dasharray:28 10 14 8 }
/* tramas: el grosor es el nivel; un brillo torcido encima */
.soc-tela__trama{
  stroke:var(--soc-trama); stroke-linecap:butt; opacity:.8;
  stroke-width:calc(var(--n) * 5px + 2px);
  transition:stroke-width .3s var(--curva), stroke .25s var(--curva), opacity .25s var(--curva);
}
.soc-tela__brillo{ stroke:rgba(255,255,255,.28); stroke-width:calc(var(--n) * 1.6px); stroke-dasharray:3 4; stroke-linecap:round; pointer-events:none;
  transition:stroke-width .3s var(--curva), opacity .3s var(--curva) }
.soc-tela__sobre rect{
  fill:#5A6573; stroke:var(--noche); stroke-width:.8; vector-effect:non-scaling-stroke;
  transform:scaleY(calc(var(--n) * 5 + 6));
  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-espera .soc-tela__brillo, .soc-tela.es-espera .soc-tela__sobre{ opacity:0 }
.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);
}
.soc-tela.es-teje .soc-tela__brillo, .soc-tela.es-teje .soc-tela__sobre{ animation:soc-luce .3s var(--curva) both; animation-delay:calc(.45s + 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; 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-family:var(--sans); 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.5rem); 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__btn:focus-visible, .soc-telar__volver:focus-visible{ outline:2px solid var(--papel); outline-offset:3px }
.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(1.5rem,3vw,2.25rem) 0 0; font-family:var(--sans); 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:47.99rem){
  .soc-telar__cuerpo{ padding:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none }
}
@media (max-width:520px){
  .soc-tela__marco, .soc-tela__lados{ --izq:8.1rem; --der:2.2rem }
  .soc-tela__lados{ padding:0; font-size:.84rem; white-space:nowrap }
  .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 }
  .soc-tela__svg{ height:21rem }
  .soc-tela__h line{ stroke-width:3.6 }
}

/* ============ 2 · El telar (v31: cabecera más corta; es la continuación de la asamblea) ============ */
.soc-telar__cab{ max-width:44rem; padding-block:0 clamp(1.75rem,3.5vw,2.75rem) }
.soc-puente{ margin:0 0 var(--e-sm); font-family:var(--lee); font-style:italic; font-size:clamp(1.05rem,1rem + .3vw,1.2rem); line-height:1.5; color:var(--soc-ac); text-shadow:0 1px 10px rgba(6,17,31,.9) }
.soc-telar__t{ margin:0; font-family:var(--sans); font-weight:650; font-size:clamp(1.8rem,1.25rem + 2vw,3rem); line-height:1.06; letter-spacing:-.025em; color:var(--papel); text-wrap:balance; max-width:20ch;
  text-shadow:0 2px 18px rgba(10,26,47,.6) }
.soc-telar__cab .entrada{ margin-top:var(--e-sm); max-width:54ch; color:#DCE3E6; text-shadow:0 1px 12px rgba(10,26,47,.8) }
.soc-telar__pie{ display:grid; gap:.25rem; margin-top:clamp(1.25rem,2.5vw,1.75rem) }
.soc-telar__pie .soc-telar__nota{ margin:0 }
.soc-fyc p + p{ margin-top:.55rem }
@media (max-width:47.99rem){
  .soc-fondo{ width:100%; height:24rem }
  .soc-fondo::after{ background:linear-gradient(0deg, var(--noche) 0, rgba(10,26,47,.35) 60%, rgba(10,26,47,.6) 100%) }
  .soc-paso--asa{ padding-top:clamp(9rem,40vw,12rem) }
  .soc-fondo--telar{ height:16rem }
  .soc-paso--telar .soc-telar__cab{ padding-top:6rem }
}

/* ============ Fuentes plegadas ============ */
.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 }

/* Movimiento reducido: todo en su lugar, sin tejer ni desvanecer */
@media (prefers-reduced-motion:reduce){
  .soc-fondo__img{ animation:none !important; scale:1 }
  .soc-tela__trama,.soc-tela__brillo,.soc-tela__sobre rect,.soc-telar__rel,.soc-tela__lado,.soc-res__escala li::before,.soc-gob__org circle{ transition:none }
  .soc-tela.es-teje .soc-tela__trama,.soc-tela.es-espera .soc-tela__trama{ animation:none; stroke-dasharray:none; stroke-dashoffset:0 }
  .soc-tela .soc-tela__brillo, .soc-tela .soc-tela__sobre{ animation:none !important; opacity:1 !important; transform:none !important }
  .js-telar .soc-telar__ficha:not([hidden]){ animation:none }
  .soc-fyc summary::after{ transition: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 }
}
@media (prefers-reduced-motion:reduce){ .soc-gob__af circle, .soc-gob__af text, .soc-gob__f--fino{ transition:none } }