/* v32 · Salud · una sola pieza propia (agente SALUD): «Alrededor de quien crece», en una banda noche.
   Tres anillos de cuidado (en casa, en la comunidad, en el distrito y la región) con quien crece al centro y ocho
   actores. Al elegir un problema se encienden los actores que sostienen una parte y los hilos entre ellos; al lado,
   la cifra oficial con su brecha, qué hace cada actor y dónde entra Conecta.
   Acento verde hoja (#A8C97F): como texto solo sobre noche; sobre papel, solo en trazos.
   Sin JS se leen los cuatro problemas seguidos. Comportamiento: v32-salud.js. */

.cm-pieza{ --sa:#A8C97F; --sa-hondo:#4E6B2E; --sa-t2:#C9D4D7 }

.sa-pieza{ position:relative; isolation:isolate; overflow:clip }

/* Foto de fondo en capas: arriba a la derecha, fundida con la noche */
.sa-fondo{ position:absolute; z-index:-1; top:0; right:0; width:min(62%, 58rem); height:min(34rem, 60%); margin:0; pointer-events:none; overflow:hidden }
.sa-fondo picture{ position:absolute; inset:0; display:block }
.sa-fondo__img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; display:block; opacity:.42 }
.sa-fondo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--noche) 0, rgba(10,26,47,.6) 34%, rgba(10,26,47,0) 72%),
             linear-gradient(0deg, var(--noche) 0, rgba(10,26,47,0) 60%),
             linear-gradient(180deg, var(--noche) 0, rgba(10,26,47,0) 20%) }
@media (max-width:40rem){ .sa-fondo{ width:100%; height:24rem } .sa-fondo__img{ opacity:.3 } }

/* Cabecera */
.sa-cab{ max-width:46rem; margin:0 0 clamp(2rem,4vw,3rem) }
.sa-cab .antetitulo{ margin:0 0 var(--e-xs); color:var(--sa) }
.sa-cab .h2{ margin:0; max-width:20ch; font-size:clamp(2.1rem,1.4rem + 2.8vw,3.7rem); line-height:1.04; letter-spacing:-.03em; color:var(--papel); text-wrap:balance;
  text-shadow:0 2px 20px rgba(6,17,31,.55) }
.sa-cab .entrada{ margin-top:var(--e-md); max-width:56ch; color:#DCE3E6; text-wrap:pretty; text-shadow:0 1px 12px rgba(6,17,31,.7) }

/* Los cuatro problemas */
.sa-tabs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin:0 0 clamp(1.5rem,3vw,2.5rem) }
@media (min-width:52rem){ .sa-tabs{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.sa-tab{ appearance:none; display:grid; gap:.2rem; align-content:start; text-align:left; min-height:4.4rem; padding:.85rem 1rem; border-radius:.9rem;
  border:1px solid rgba(216,203,179,.24); background:rgba(17,37,63,.72); color:var(--papel); font:inherit; cursor:pointer;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease }
.sa-tab:hover{ border-color:rgba(168,201,127,.6) }
.sa-tab:focus-visible{ outline:2px solid var(--sa); outline-offset:3px }
.sa-tab__n{ font-family:var(--sans); font-weight:650; font-size:1rem; line-height:1.25 }
.sa-tab__c{ font-family:var(--lee); font-size:.92rem; color:var(--sa-t2) }
.sa-tab[aria-selected="true"]{ background:var(--sa); border-color:var(--sa); color:var(--noche) }
.sa-tab[aria-selected="true"] .sa-tab__c{ color:#1F2E14 }
/* sin JS las pestañas no hacen nada: se leen los cuatro paneles */
.sa-pieza:not(.sa-js) .sa-tabs{ display:none }

/* Cuerpo: el dibujo y los paneles */
.sa-cuerpo{ display:grid; gap:clamp(1.5rem,3vw,3rem); align-items:start }
@media (min-width:62rem){
  .sa-cuerpo{ grid-template-columns:minmax(0,11fr) minmax(0,9fr) }
  .sa-js .sa-fig{ position:sticky; top:calc(var(--alto-nav, 4.5rem) + 3.5rem) }
}
.sa-fig{ margin:0 }
.sa-red{ display:block; width:100%; height:auto; max-width:36rem; margin-inline:auto; overflow:visible }

.sa-anillo{ fill:none; stroke:rgba(216,203,179,.24); stroke-width:1.2; stroke-dasharray:2 6; stroke-linecap:round }
.sa-anillo--0{ fill:rgba(168,201,127,.05) }
.sa-anillo__t{ font-family:var(--lee); font-style:italic; font-size:14px; fill:#94A6B0 }

.sa-radio{ stroke:rgba(216,203,179,.14); stroke-width:1; transition:stroke .35s ease, stroke-width .35s ease }
.sa-radio.es-on{ stroke:rgba(168,201,127,.7); stroke-width:2 }
.sa-hilo{ fill:none; stroke:var(--sa); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:1; opacity:0;
  transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1), opacity .3s ease }
.sa-hilo.es-on{ stroke-dashoffset:0; opacity:.9 }

.sa-centro__f{ fill:rgba(168,201,127,.16); stroke:var(--sa); stroke-width:1.5 }
.sa-centro__p{ fill:none; stroke:var(--papel); stroke-width:2; stroke-linecap:round }
.sa-centro__t{ font-family:var(--sans); font-weight:650; font-size:13px; fill:var(--papel) }

.sa-actor__f{ fill:var(--noche-2); stroke:rgba(216,203,179,.32); stroke-width:1.2; transition:fill .35s ease, stroke .35s ease }
.sa-actor__i{ fill:none; stroke:#8A9CA8; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:stroke .35s ease }
.sa-actor__t{ font-family:var(--sans); font-weight:600; font-size:15px; fill:#8A9CA8; transition:fill .35s ease;
  paint-order:stroke; stroke:var(--noche); stroke-width:6px; stroke-linejoin:round }
.sa-actor.es-on .sa-actor__f{ fill:var(--sa); stroke:var(--sa) }
.sa-actor.es-on .sa-actor__i{ stroke:var(--noche) }
.sa-actor.es-on .sa-actor__t{ fill:var(--papel) }
.sa-actor.es-foco .sa-actor__f{ stroke:var(--papel); stroke-width:3 }
.sa-actor.es-foco .sa-actor__t{ fill:var(--sa) }

@media (max-width:40rem){
  .sa-actor__t{ font-size:21px; stroke-width:7px }
  .sa-anillo__t{ font-size:18px }
  .sa-centro__t{ font-size:17px }
}

.sa-ley{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; justify-content:center; margin-top:var(--e-sm);
  font-family:var(--lee); font-size:.9rem; color:var(--sa-t2) }
.sa-ley__i{ display:inline-block; width:.85rem; height:.85rem; border-radius:50%; border:1.2px solid rgba(216,203,179,.5); background:var(--noche-2) }
.sa-ley__i--on{ background:var(--sa); border-color:var(--sa) }
.sa-ley__e{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap }
.sa-ley{ gap:.4rem 1.2rem }

/* Paneles */
.sa-paneles{ display:grid; gap:clamp(2.5rem,5vw,3.5rem) }
.sa-js .sa-paneles{ gap:0 }
.sa-panel[hidden]{ display:none }
.sa-panel:focus{ outline:none }
.sa-panel:focus-visible{ outline:2px solid var(--sa); outline-offset:6px; border-radius:.4rem }
.sa-pieza:not(.sa-js) .sa-panel + .sa-panel{ padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--filete-oscuro) }
.sa-panel__t{ margin:0 0 var(--e-sm); font-family:var(--sans); font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); line-height:1.15; font-weight:650; color:var(--papel); letter-spacing:-.015em }
.sa-js .sa-panel__t{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

.sa-cifra{ margin:0; display:grid; gap:.35rem }
.sa-cifra b{ font-family:var(--sans); font-weight:700; font-size:clamp(3rem,2rem + 4vw,4.6rem); line-height:.95; letter-spacing:-.04em; color:var(--sa); font-variant-numeric:tabular-nums }
.sa-cifra span{ font-family:var(--lee); font-size:1.05rem; line-height:1.5; color:#DCE3E6; max-width:40ch }

.sa-barras{ list-style:none; margin:var(--e-md) 0 0; padding:0; display:grid; gap:.6rem; max-width:30rem }
.sa-barras li{ display:grid; grid-template-columns:7.5rem minmax(0,1fr) 3.6rem; align-items:center; gap:.75rem }
.sa-barra__k{ font-family:var(--sans); font-size:.92rem; color:var(--sa-t2) }
.sa-barra__p{ position:relative; height:.7rem; border-radius:.35rem; background:rgba(216,203,179,.14); overflow:hidden }
.sa-barra__p i{ position:absolute; inset:0 auto 0 0; width:var(--p); border-radius:inherit; background:var(--sa); transform-origin:left; transition:transform .8s cubic-bezier(.2,.7,.2,1) }
.sa-js .sa-panel:not([hidden]) .sa-barra__p i{ animation:sa-barra .9s cubic-bezier(.2,.7,.2,1) both }
@keyframes sa-barra{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.sa-barra__v{ font-family:var(--sans); font-weight:650; font-size:.95rem; color:var(--papel); text-align:right; font-variant-numeric:tabular-nums }
@media (max-width:24rem){ .sa-barras li{ grid-template-columns:6.4rem minmax(0,1fr) 3.4rem; gap:.5rem } }

.sa-dato{ margin:var(--e-md) 0 0; font-family:var(--lee); font-size:1rem; line-height:1.6; color:#DCE3E6; max-width:46ch; text-wrap:pretty }
.sa-fuente{ margin:.6rem 0 0; font-family:var(--sans); font-size:.84rem; line-height:1.5; color:#94A6B0 }
.sa-fuente a{ color:inherit; text-decoration:underline; text-underline-offset:.18em; text-decoration-color:rgba(168,201,127,.6) }
.sa-fuente a:hover{ color:var(--papel) }

.sa-roles__k, .sa-conecta__k{ margin:var(--e-md) 0 var(--e-xs); font-family:var(--sans); font-weight:650; font-size:.95rem; color:var(--sa) }
.sa-roles{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
.sa-roles li{ display:block; padding:.55rem .5rem .55rem 0; font-family:var(--lee); font-size:.95rem; line-height:1.5; border-top:1px solid var(--filete-oscuro); cursor:default; border-radius:.2rem;
  transition:background-color .2s ease }
.sa-roles li:last-child{ border-bottom:1px solid var(--filete-oscuro) }
.sa-roles li b{ font-family:var(--sans); font-weight:650; font-size:.95rem; color:var(--papel) }
.sa-roles li b::after{ content:"." }
.sa-roles li span{ font-family:var(--lee); font-size:.95rem; line-height:1.55; color:var(--sa-t2) }
.sa-roles li:hover, .sa-roles li:focus-visible, .sa-roles li.es-foco{ background:rgba(168,201,127,.08) }
.sa-roles li:focus-visible{ outline:2px solid var(--sa); outline-offset:2px }

.sa-conecta{ margin-top:var(--e-md); padding:1.1rem 1.25rem 1.2rem; border-radius:1rem; background:rgba(17,37,63,.9); border:1px solid rgba(168,201,127,.35) }
.sa-conecta .sa-conecta__k{ margin:0 0 .4rem }
.sa-conecta p:last-child{ margin:0; font-family:var(--lee); font-size:1rem; line-height:1.6; color:#DCE3E6 }

.sa-puente{ margin:clamp(2.5rem,5vw,4rem) 0 0; max-width:60ch; font-family:var(--lee); font-style:italic; font-size:1.05rem; line-height:1.6; color:var(--sa-t2) }
.sa-puente a{ color:var(--papel); text-decoration:underline; text-underline-offset:.18em; text-decoration-color:var(--sa) }

@media (prefers-reduced-motion:reduce){
  .sa-hilo, .sa-radio, .sa-actor__f, .sa-actor__i, .sa-actor__t, .sa-barra__p i{ transition:none }
  .sa-js .sa-panel:not([hidden]) .sa-barra__p i{ animation:none }
}

/* ============ Fuera de la pieza (solo se carga en /salud/) ============ */
/* Apertura: el texto cae sobre el grupo de familias; un velo más hondo a la izquierda le da contraste. */
@media (min-width:40.01rem){
  .cm .cm-ap .portada__velo{ background:
    linear-gradient(to bottom, rgba(10,26,47,.6) 0, rgba(10,26,47,0) 18%),
    linear-gradient(90deg, rgba(10,26,47,.96) 0, rgba(10,26,47,.93) 38%, rgba(10,26,47,.72) 50%, rgba(10,26,47,.25) 64%, rgba(10,26,47,0) 76%),
    linear-gradient(to top, rgba(10,26,47,.85) 0, rgba(10,26,47,0) 42%) }
  .cm .cm-ap .portada__lede, .cm .cm-ap .cm-resp{ text-shadow:0 1px 14px rgba(6,17,31,.85) }
}
/* Herramientas: IDT-5, ICT-5 y Observatorio son herramientas de Conecta, no plataformas del Ecosistema */
.cm #herramientas .cm-her__b--eco{ display:none }
.cm #funciona .cm-ok__her{ display:none }