@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · NOSOTROS v32 · Los tres anillos (#anillos)
   El dibujo se lee desde el centro: la escuela (punto de partida), la confianza
   (condición, con sus cinco dimensiones) y el desarrollo territorial (fin, con
   sus siete sistemas). A su lado, un texto por anillo.
   · En pantalla ancha el dibujo queda fijo y se construye con la lectura: cada
     texto que llega al centro de la pantalla dibuja su anillo (y lo deshace al
     volver arriba). El anillo del texto que se lee queda resaltado.
   · En celular el dibujo va arriba y se construye solo, una vez, al entrar.
   · Sin JS o con movimiento reducido: el dibujo completo y quieto.
   Los estados iniciales existen solo bajo [data-an32-js]. Prefijo .an32
   ========================================================================== */

.an32{ --an32-ter:#1D6B68; --an32-con:#E3D7BE; --an32-esc:var(--sol);
  display:grid; gap:clamp(2.5rem,6vw,4rem); margin:clamp(2.5rem,5vw,4rem) auto 0; max-width:76rem }

/* ---------------------------------------------------------------- el dibujo */
.an32__fig{ margin:0; display:grid; justify-items:center; gap:1rem }
.an32-svg{ display:block; width:min(100%, 36rem); height:auto; overflow:visible;
  filter:drop-shadow(0 38px 50px rgba(0,0,0,.42)) }
.an32__pie{ max-width:34ch; text-align:center; font-family:var(--sans); font-size:.9rem; line-height:1.5; color:#A9B9BD; text-wrap:balance }

.an32-guias circle{ fill:none; stroke:rgba(197,211,213,.16); stroke-width:1; stroke-dasharray:2 5 }
.an32-guia-txt{ fill:none; stroke:none }

.an32-a{ transition:opacity .5s var(--curva) }
.an32-a__zona{ fill:none; stroke:transparent; pointer-events:stroke }
.an32-seg{ fill:none; stroke-dasharray:1 1; stroke-dashoffset:0 }
.an32-a--ter .an32-seg{ stroke:url(#an32-g-ter) }
.an32-a--ter .an32-seg--tit{ stroke:url(#an32-g-ter-t) }
.an32-a--con .an32-seg{ stroke:url(#an32-g-con) }
.an32-a--con .an32-seg--tit{ stroke:url(#an32-g-con-t) }

.an32-curvas path{ fill:none; stroke:rgba(214,236,232,.13); stroke-width:1 }
.an32-hilo circle{ fill:none; stroke:rgba(14,23,38,.22); stroke-width:1.1; stroke-dasharray:1.5 5.5; stroke-linecap:round }

.an32-tit,.an32-rot{ font-family:var(--sans); letter-spacing:.01em }
.an32-tit{ font-size:21px; font-weight:680 }
.an32-rot{ font-size:16.5px; font-weight:600 }
.an32-a--ter .an32-tit{ fill:var(--sol-2) }
.an32-a--ter .an32-rot{ fill:#D4E6E2 }
.an32-a--con .an32-tit{ fill:var(--tinta) }
.an32-a--con .an32-rot{ fill:#36404D }
.an32-tit--esc{ fill:var(--papel); font-size:21px }

.an32-esc__foto image{ filter:saturate(.85) }
.an32-esc__borde{ fill:none; stroke:var(--sol); stroke-width:4.5; stroke-dasharray:1 1; stroke-dashoffset:0;
  transform-box:view-box; transform-origin:320px 320px; transform:rotate(-90deg) }

/* con JS: clic en un anillo lleva a su texto */
[data-an32-js] .an32-a{ cursor:pointer }
[data-an32-js] .an32-a:hover .an32-seg{ filter:brightness(1.08) }

/* --------------------------------------------- el anillo del texto que se lee */
.an32[data-activo] .an32-a{ opacity:.8 }
.an32[data-activo] .an32-a :is(.an32-tit,.an32-rot){ fill-opacity:.8 }
.an32[data-activo="0"] .an32-a--esc :is(.an32-tit,.an32-rot),
.an32[data-activo="1"] .an32-a--con :is(.an32-tit,.an32-rot),
.an32[data-activo="2"] .an32-a--ter :is(.an32-tit,.an32-rot){ fill-opacity:1 }
.an32[data-activo="0"] .an32-a--esc,
.an32[data-activo="1"] .an32-a--con,
.an32[data-activo="2"] .an32-a--ter{ opacity:1 }
.an32[data-activo="0"] .an32-esc__borde{ stroke-width:7 }

/* ------------------------------------------------------- se construye (JS) */
[data-an32-js] .an32-seg{ transition:stroke-dashoffset .45s cubic-bezier(.5,0,.75,0) }
[data-an32-js] .an32-tit,
[data-an32-js] .an32-rot,
[data-an32-js] .an32-curvas,
[data-an32-js] .an32-hilo{ transition:opacity .25s var(--curva) }
[data-an32-js] .an32-esc__foto{ transform-box:view-box; transform-origin:320px 320px; transition:opacity .4s var(--curva), transform .5s var(--curva) }
[data-an32-js] .an32-esc__borde{ transition:stroke-dashoffset .45s var(--curva), stroke-width .35s var(--curva) }

/* anillo n sin dibujar cuando data-paso < n */
.an32[data-paso="-1"] .an32-a--esc .an32-esc__foto{ opacity:0; transform:scale(.82) }
.an32[data-paso="-1"] .an32-a--esc .an32-esc__borde{ stroke-dashoffset:1 }
.an32[data-paso="-1"] .an32-a--esc .an32-tit,
.an32[data-paso="-1"] .an32-a--con .an32-seg,
.an32[data-paso="0"] .an32-a--con .an32-seg,
.an32[data-paso="-1"] .an32-a--ter .an32-seg,
.an32[data-paso="0"] .an32-a--ter .an32-seg,
.an32[data-paso="1"] .an32-a--ter .an32-seg{ stroke-dashoffset:1 }
.an32[data-paso="-1"] .an32-a--con :is(.an32-tit,.an32-rot,.an32-hilo),
.an32[data-paso="0"] .an32-a--con :is(.an32-tit,.an32-rot,.an32-hilo),
.an32[data-paso="-1"] .an32-a--ter :is(.an32-tit,.an32-rot,.an32-curvas),
.an32[data-paso="0"] .an32-a--ter :is(.an32-tit,.an32-rot,.an32-curvas),
.an32[data-paso="1"] .an32-a--ter :is(.an32-tit,.an32-rot,.an32-curvas),
.an32[data-paso="-1"] .an32-a--esc .an32-tit{ opacity:0 }
.an32[data-paso="-1"] .an32-a,
.an32[data-paso="0"] :is(.an32-a--con,.an32-a--ter),
.an32[data-paso="1"] .an32-a--ter{ pointer-events:none }

/* al dibujarse: los tramos uno tras otro, en el sentido del reloj; luego los nombres */
.an32[data-paso="0"] .an32-a--esc .an32-esc__foto,
.an32[data-paso="1"] .an32-a--esc .an32-esc__foto,
.an32[data-paso="2"] .an32-a--esc .an32-esc__foto{ transition:opacity .9s var(--curva), transform 1.2s cubic-bezier(.2,.9,.25,1) }
.an32:is([data-paso="0"],[data-paso="1"],[data-paso="2"]) .an32-a--esc .an32-esc__borde{ transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) .15s, stroke-width .35s var(--curva) }
.an32:is([data-paso="0"],[data-paso="1"],[data-paso="2"]) .an32-a--esc .an32-tit{ transition:opacity .6s var(--curva) .8s }
.an32:is([data-paso="1"],[data-paso="2"]) .an32-a--con .an32-seg{ transition:stroke-dashoffset .5s cubic-bezier(.3,.1,.3,1) calc(var(--i) * .13s) }
.an32:is([data-paso="1"],[data-paso="2"]) .an32-a--con :is(.an32-tit,.an32-rot){ transition:opacity .5s var(--curva) calc(.3s + var(--i) * .13s) }
.an32:is([data-paso="1"],[data-paso="2"]) .an32-a--con .an32-hilo{ transition:opacity .8s var(--curva) .9s }
.an32[data-paso="2"] .an32-a--ter .an32-seg{ transition:stroke-dashoffset .5s cubic-bezier(.3,.1,.3,1) calc(var(--i) * .1s) }
.an32[data-paso="2"] .an32-a--ter :is(.an32-tit,.an32-rot){ transition:opacity .5s var(--curva) calc(.3s + var(--i) * .1s) }
.an32[data-paso="2"] .an32-a--ter .an32-curvas{ transition:opacity 1.2s var(--curva) 1s }

/* ----------------------------------------------------------- los textos */
.an32__pasos{ list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:none }
.an32-paso{ display:grid; gap:.55rem; align-content:start; padding-block:clamp(1.8rem,4vw,2.4rem); border-top:1px solid rgba(244,242,238,.14) }
.an32-paso:first-child{ border-top:0; padding-top:0 }
.an32-paso__k{ display:flex; align-items:center; gap:.75rem; margin:0; font-family:var(--sans); font-size:.95rem; font-weight:650; color:var(--sol-2) }
.an32-glifo{ flex:0 0 auto; width:2.4rem; height:2.4rem }
.an32-glifo circle{ fill:none; stroke:rgba(244,242,238,.2) }
.an32-glifo .an32-glifo__c{ fill:rgba(244,242,238,.2); stroke:none }
#anillo-escuela .an32-glifo .si{ fill:var(--sol) }
#anillo-confianza .an32-glifo .si{ stroke:var(--an32-con) }
#anillo-territorio .an32-glifo .si{ stroke:#2C8E89 }
.an32-paso__t{ margin:0; font-family:var(--sans); font-weight:650; font-size:clamp(1.6rem,1.2rem + 1.2vw,2.4rem); line-height:1.08; letter-spacing:-.02em; color:var(--papel) }
.an32-paso__d{ margin:0; max-width:34ch; font-family:var(--sans); font-size:clamp(1.08rem,1rem + .35vw,1.28rem); font-weight:560; line-height:1.4; color:var(--papel); text-wrap:pretty }
.an32-paso__dl{ display:grid; margin:.6rem 0 0; max-width:46ch }
.an32-paso__dl > div{ display:grid; gap:.15rem; padding:.7rem 0; border-top:1px solid rgba(244,242,238,.12) }
.an32-paso__dl dt{ font-family:var(--sans); font-size:.86rem; font-weight:700; color:var(--sol-2) }
.an32-paso__dl dd{ margin:0; font-family:var(--lee); font-size:1rem; line-height:1.55; color:#C9D4D7 }
.an32-paso__dl .liga,.an32-paso__ligas .liga{ color:var(--papel) }
.an32-paso__ligas{ margin:.2rem 0 0; font-family:var(--sans); font-size:.95rem; line-height:1.9; color:#A9B9BD }
.an32-paso :focus-visible{ outline-color:var(--sol-2) }

/* --------------------------------------------- pantalla ancha: dibujo fijo */
@media (min-width:60rem){
  .an32{ grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); column-gap:clamp(3rem,6vw,6rem); align-items:start }
  .an32__fig{ position:sticky; top:max(calc(var(--alto-nav) + 1.25rem), calc(50vh - 20rem + var(--alto-nav) / 2)); align-self:start }
  .an32-paso{ min-height:min(72vh, 40rem); align-content:center; border-top:0; padding-block:2.5rem }
  .an32-paso:first-child{ padding-top:2.5rem }
  .an32-paso + .an32-paso::before{ content:""; display:block; width:2.4rem; height:1px; margin-bottom:1rem; background:rgba(244,242,238,.24) }
  [data-an32-js] .an32-paso{ transition:opacity .45s var(--curva) }
  .an32[data-activo] .an32-paso:not(.es-activo){ opacity:.5 }
}
@media (min-width:60rem) and (max-height:46rem){
  .an32-svg{ width:min(100%, 28rem) }
  .an32__fig{ top:calc(var(--alto-nav) + 1rem) }
}

/* ------------------------------------------------------- celular */
@media (max-width:59.99rem){
  .an32-svg{ width:min(100%, 30rem) }
  .an32-tit{ font-size:26px }
  .an32-tit--esc{ font-size:25px }
  .an32-rot{ font-size:21px; letter-spacing:0 }
}
@media (max-width:23.5rem){
  .an32-tit{ font-size:25px; letter-spacing:-.005em }
}

@media (prefers-reduced-motion:reduce){
  .an32 *,.an32-paso{ transition:none !important }
  .an32 .an32-seg,.an32 .an32-esc__borde{ stroke-dashoffset:0 !important }
  .an32 .an32-tit,.an32 .an32-rot,.an32 .an32-curvas,.an32 .an32-hilo,.an32 .an32-esc__foto{ opacity:1 !important; transform:none !important }
}