/* v28-v31 · Plantilla de comunidad y /comunidades/ (agente COMUNIDADES).
   v29: al lenguaje del Ecosistema. Fotos a sangre con texto en capas, dispositivos fijos que acompañan
   un recorrido (anillo de los cuatro frentes, foto de «Quiénes la forman»), la red con fotos circulares
   y grosor de hilos, ritmo oscuro y claro. Sin barras ni rayitas laterales.
   v31: ocho bloques (apertura con acción, quiénes, frentes en banda, pieza, lo que ya funciona, herramientas,
   cómo empezar con preguntas, las otras comunidades). Salen el anillo fijo, el visor de capturas, la mini-red,
   la banda de datos con foto y las historias a sangre. En el hub salen la franja de nombres, el mazo de
   capturas, el Observatorio en detalle y las caras del cierre.
   --cm: acento de la comunidad (lo fija <main class="cm" style="--cm:…">). Sobre papel, --cm-hondo. */
.cm{ --cm:var(--piedra); --cm-hondo:color-mix(in oklab, var(--cm) 46%, var(--tinta)); --cm-velo:color-mix(in srgb, var(--cm) 14%, transparent) }
.cm .liga{ --ac:var(--cm-hondo) }
.cm .oscuro .liga,.cm.oscuro .liga{ --ac:var(--cm) }
.cm .boton.cm-boton,.cm .oscuro .boton.cm-boton{ background:var(--cm); border-color:var(--cm); color:var(--tinta) }
.cm .boton.cm-boton:hover{ background:color-mix(in srgb, var(--cm) 80%, white); border-color:transparent }
.cm-sale{ display:inline-flex; align-items:center; gap:.4em }
.cm-sale svg{ flex:0 0 auto }

/* ---------- Encabezados de sección ---------- */
.cm-cab{ display:grid; gap:var(--e-sm); max-width:46rem; margin-bottom:clamp(2rem,4vw,3rem) }
.cm-cab > *{ margin:0 }
.cm-cab .h2{ text-wrap:balance; max-width:24ch }
.cm .antetitulo{ color:var(--cm-hondo) }
.cm .oscuro .antetitulo{ color:var(--cm) }
.cm-cab .entrada{ text-wrap:pretty }
@media (min-width:62rem){
  .cm-cab--lado{ position:sticky; top:calc(var(--alto-nav) + 5.5rem); align-self:start; margin-bottom:0 }
  .cm-cab--ancha{ max-width:none; grid-template-columns:minmax(0,6fr) minmax(0,5fr); column-gap:var(--e-2xl); align-items:end }
  .cm-cab--ancha .antetitulo{ grid-column:1 / -1 }
  .cm-cab--ancha .entrada{ grid-column:2; grid-row:2; align-self:end }
}

/* ---------- 1 · Apertura ---------- */
.cm-ap.portada--v11{ min-height:max(38rem, 92svh) }
.cm-ap .portada__in{ padding-bottom:clamp(1.5rem,4vh,2.5rem) }
.cm-ap h1{ max-width:19ch }
.cm-migas ol{ display:flex; flex-wrap:wrap; gap:.25rem .5rem; margin:0 0 var(--e-sm); padding:0; list-style:none; font-family:var(--sans); font-size:.88rem }
.cm-migas li + li::before{ content:"›"; margin-right:.5rem; color:rgba(244,242,238,.6) }
.cm-migas a{ color:rgba(244,242,238,.85); text-decoration:none; display:inline-flex; min-height:1.75rem; align-items:center }
.cm-migas a:hover{ color:var(--papel); text-decoration:underline; text-underline-offset:.2em }
.cm-migas a[aria-current]{ color:var(--papel); font-weight:600 }
/* La responsabilidad: el ícono de la comunidad y la frase en cursiva grande. Sin línea al costado. */
.cm-resp{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.9rem; row-gap:.2rem; align-items:center; margin-top:var(--e-lg); max-width:42ch;
  text-shadow:0 1px 2px rgba(6,17,31,.6) }
.cm-resp__ico{ grid-row:span 2; align-self:start; width:2.9rem; height:2.9rem; border-radius:50%; display:grid; place-items:center; color:var(--tinta); background:var(--cm) }
.cm-resp__ico svg{ width:1.4rem; height:1.4rem }
.cm-resp__k{ font-family:var(--sans); font-size:.84rem; font-weight:650; color:var(--cm) }
.cm-resp__t{ font-family:var(--lee); font-style:italic; font-size:clamp(1.2rem,1.05rem + .55vw,1.5rem); line-height:1.35; color:var(--papel); text-wrap:balance }
.cm-ap__base{ display:flex; justify-content:space-between; align-items:end; gap:var(--e-md); margin-top:clamp(2rem,6vh,3.5rem); padding-top:var(--e-sm);
  border-top:1px solid rgba(244,242,238,.18) }
.cm-corto{ margin:0; font-family:var(--sans); font-size:.82rem; color:rgba(244,242,238,.72); text-shadow:0 1px 2px rgba(6,17,31,.6) }
.cm-corto b{ font-weight:600; color:var(--papel); letter-spacing:.01em; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--cm) 70%, transparent); text-underline-offset:.25em }
.cm-ap__pie{ margin:0; font-family:var(--sans); font-size:.76rem; color:rgba(244,242,238,.66); text-align:right; text-shadow:0 1px 2px rgba(6,17,31,.6) }
.cm-ap__ante{ margin:0 0 var(--e-sm); font-family:var(--sans); font-size:.95rem; font-weight:650; color:var(--sol-2) }
.cm-ap .portada__velo{ background:
    linear-gradient(to bottom, rgba(10,26,47,.55) 0, rgba(10,26,47,0) 18%),
    linear-gradient(90deg, rgba(10,26,47,.82) 0, rgba(10,26,47,.55) 38%, rgba(10,26,47,0) 66%),
    linear-gradient(to top, rgba(10,26,47,.8) 0, rgba(10,26,47,0) 46%) }
@media (max-width:40rem){
  .cm-ap__base{ flex-direction:column; align-items:start; gap:.4rem }
  .cm-ap__pie{ text-align:left }
  /* En celular: la foto se ve arriba y el texto empieza más abajo, con el velo solo en la mitad inferior */
  .cm-ap.portada--v11{ min-height:0; height:auto; display:flex; flex-direction:column }
  .cm-ap .portada__fotos{ position:relative; inset:auto; height:clamp(15rem, 44svh, 22rem); z-index:0; flex:0 0 auto }
  .cm-ap .portada__velo{ z-index:0; background:linear-gradient(to bottom, rgba(10,26,47,.55) 0, rgba(10,26,47,0) 22%, rgba(10,26,47,0) 18rem, var(--noche) 22rem) }
  .cm-ap .portada__in{ position:relative; inset:auto; margin-top:-4.5rem; padding-top:0; z-index:1;
    background:linear-gradient(to bottom, rgba(10,26,47,0) 0, var(--noche) 4.5rem) }
  .cm-ap .portada__foto img{ animation:none; transform:none }
}

/* ---------- Índice fijo: marca la sección en la que se está ---------- */
.cm-indice{ position:sticky; top:var(--alto-nav); z-index:40; background:color-mix(in srgb, var(--papel) 94%, transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--filete);
  transition:box-shadow .3s ease }
.cm-indice--pegado{ box-shadow:0 10px 24px -20px rgba(10,26,47,.45) }
.cm-indice__in{ position:relative; display:flex; align-items:center; gap:var(--e-md) }
.cm-indice__k{ margin:0; flex:0 0 auto; font-family:var(--sans); font-size:.9rem; font-weight:700; color:var(--tinta);
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap; transition:max-width .4s var(--curva), opacity .3s ease }
.cm-indice--pegado .cm-indice__k{ max-width:14rem; opacity:1 }
.cm-indice ol{ display:flex; gap:0 var(--e-md); margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; font-family:var(--sans); font-size:.86rem; min-width:0 }
.cm-indice ol::-webkit-scrollbar{ display:none }
.cm-indice a{ display:inline-flex; align-items:center; min-height:3rem; color:var(--tinta-2); text-decoration:none; white-space:nowrap; transition:color .2s ease }
.cm-indice a:hover,.cm-indice a[aria-current]{ color:var(--tinta) }
.cm-indice a:focus-visible{ outline-offset:-3px }
.cm-indice__marca{ position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--cm-hondo); opacity:0; pointer-events:none;
  transition:transform .35s var(--curva), width .35s var(--curva), opacity .2s ease }
@media (max-width:40rem){ .cm-indice__k{ display:none } }

/* Fuentes y créditos: en un desplegable, una sola línea a la vista */
.cm-fuentes{ margin-top:var(--e-xl); font-family:var(--sans); font-size:.84rem; color:var(--mudo); max-width:60rem }
.cm-fuentes summary{ cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; min-height:2.5rem; list-style:none; font-weight:600; color:var(--tinta-2) }
.cm-fuentes summary::-webkit-details-marker{ display:none }
.cm-fuentes 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 ease }
.cm-fuentes[open] summary::after{ transform:rotate(-135deg) translateY(-1px) }
.cm-fuentes summary:hover{ color:var(--tinta) }
.cm-fuentes ul{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.45rem; line-height:1.5 }
.cm-fuentes b{ font-weight:600; color:var(--tinta-2) }
.cm-fuentes a{ color:var(--mudo); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--cm-hondo) 55%, transparent); text-underline-offset:.2em }
.cm-fuentes a:hover{ color:var(--tinta) }

/* =====================================================================================
   v29 · Al lenguaje del Ecosistema: foto a sangre, texto en capas, dispositivos fijos,
   ritmo oscuro y claro, tipografía grande.
   ===================================================================================== */
.cm-ir{ width:1.15rem; height:1.15rem; flex:0 0 auto; transition:transform .25s var(--curva) }
a:hover > .cm-ir,a:focus-visible > .cm-ir{ transform:translateX(.25rem) }
.cm-cab--ancha .h2,.cm-con__t{ font-size:clamp(1.9rem,1.25rem + 2.4vw,3.4rem); line-height:1.06; letter-spacing:-.02em; max-width:20ch }

/* ---------- Hub · Todas conectadas: cabecera y ficha con foto (la red de cada comunidad salió en v31) ---------- */
.cm-con{ position:relative; overflow:clip; background:radial-gradient(ellipse 55% 60% at 32% 58%, rgba(217,164,65,.09), transparent 70%), var(--noche) }
.cm-con__cab{ display:grid; gap:var(--e-md); margin-bottom:clamp(2rem,4vw,3.5rem) }
.cm-con__cab > div > *,.cm-con__cab > p{ margin:0 }
.cm-con__cab .antetitulo{ margin-bottom:var(--e-sm) }
.cm-con__cab .entrada{ color:#C9D4D7 }
.cm-con__cab .liga{ display:inline-block; margin-top:var(--e-sm) }
@media (min-width:62rem){ .cm-con__cab{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e-2xl); align-items:end } }

/* Ficha lateral con foto real */
.cm-red__ffoto{ position:relative; margin:0; aspect-ratio:16 / 8; overflow:hidden; isolation:isolate }
.cm-red__ffoto picture{ position:absolute; inset:0; z-index:-2 }
.cm-red__ffoto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block }
.cm-red__ffoto::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, var(--noche-2) 0, rgba(17,37,63,.55) 38%, rgba(17,37,63,0) 72%) }
.cm-red__ffoto figcaption{ position:absolute; left:1.4rem; right:1.4rem; bottom:.9rem; display:flex; align-items:center; gap:.75rem }
.cm-red__fico{ width:2.3rem; height:2.3rem; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:var(--c); color:var(--tinta) }
.cm-red__fico svg{ width:1.2rem; height:1.2rem }
.cm-red__t{ margin:0; font-size:clamp(1.45rem,1.2rem + .9vw,2rem); line-height:1.05; letter-spacing:-.015em; font-weight:650; color:var(--papel); text-shadow:0 2px 12px rgba(6,17,31,.7) }

/* ---------- Preguntas (bloque 7, junto a «Cómo empezar») ---------- */
.cm-p__lista{ border-bottom:1px solid var(--filete-firme) }
.cm-p{ border-top:1px solid var(--filete-firme) }
.cm-p summary{ display:grid; grid-template-columns:minmax(0,1fr) 2.4rem; align-items:center; gap:1rem; padding:1.35rem 0; cursor:pointer; list-style:none }
.cm-p summary::-webkit-details-marker{ display:none }
.cm-p summary::after{ content:""; grid-column:2; grid-row:1; justify-self:end; width:2.4rem; height:2.4rem; border-radius:50%; box-shadow:inset 0 0 0 1px var(--filete-firme);
  background:linear-gradient(var(--cm-hondo), var(--cm-hondo)) center / .85rem 1.5px no-repeat, linear-gradient(var(--cm-hondo), var(--cm-hondo)) center / 1.5px .85rem no-repeat;
  transition:transform .3s var(--curva), background-color .25s ease }
.cm-p[open] summary::after{ transform:rotate(45deg) }
.cm-p__q{ grid-column:1; grid-row:1; font-size:clamp(1.08rem,1rem + .35vw,1.3rem); line-height:1.35; font-weight:600; color:var(--tinta); text-wrap:balance }
.cm-p summary:hover .cm-p__q{ color:var(--cm-hondo) }
.cm-p summary:focus-visible{ outline:3px solid var(--petroleo); outline-offset:4px; border-radius:6px }
.cm-p__r{ padding:0 3.4rem 1.6rem 0 }
.cm-p__r p{ margin:0; font-size:var(--t-cuerpo); line-height:1.7; color:var(--tinta-2); max-width:62ch }

/* ---------- Pieza propia: sin estilos impuestos ---------- */
.cm-pieza{ display:block }
@keyframes cm-aparece{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ---------- Hub · Apertura (v31: sin la franja de los cinco nombres) ---------- */
@media (max-width:40rem){ .cm-ap--hub .portada__velo{ background:
    linear-gradient(to bottom, rgba(10,26,47,.6) 0, rgba(10,26,47,.3) 30%, rgba(10,26,47,.5) 50%),
    linear-gradient(to top, rgba(10,26,47,.96) 0, rgba(10,26,47,.85) 45%, rgba(10,26,47,.3) 80%) } }

/* ---------- La idea ---------- */
.cm-idea__cab .antetitulo{ margin-bottom:var(--e-md) }
.cm-idea__t{ margin:0; max-width:22ch; font-family:var(--lee); font-weight:400; font-size:clamp(2rem,1.2rem + 3vw,4rem); line-height:1.1; letter-spacing:-.02em; color:var(--tinta); text-wrap:balance }
.cm-idea__t em{ font-style:italic; color:var(--cm-hondo) }

/* ---------- v32 · Qué entendemos por comunidad: una foto real de una comunidad reunida ----------
   El titular y la definición en dos columnas; la asamblea de Ticumpinía a sangre; los tres pasos debajo. */
:root{ --ac-salud:#A8C97F }
.cm-idea__cab{ display:grid; gap:var(--e-lg); margin-bottom:clamp(2rem,4vw,3.25rem) }
@media (min-width:62rem){ .cm-idea__cab{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); column-gap:var(--e-2xl); align-items:end } }
.cm-idea__def{ display:grid; gap:.8rem }
.cm-idea__def > *{ margin:0 }
.cm-idea__dk{ font-family:var(--sans); font-size:.86rem; font-weight:650; color:var(--cm-hondo) }
.cm-idea__dd{ font-family:var(--lee); font-size:clamp(1.2rem,1rem + .7vw,1.55rem); line-height:1.45; color:var(--tinta-2); text-wrap:pretty }
.cm-idea__suma{ color:var(--tinta) }
.cm-idea__suma strong{ font-weight:600; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--sol) 75%, transparent); text-decoration-thickness:.14em; text-underline-offset:.18em }
.cm-idea__dn{ font-size:.95rem; line-height:1.6; color:var(--mudo); max-width:46ch }
.cm-idea__foto{ position:relative; margin:0; isolation:isolate; overflow:clip; background:var(--noche);
  height:clamp(22rem, 52vw, 46rem); max-height:82svh }
.cm-idea__foto picture{ position:absolute; inset:0; z-index:-2 }
.cm-idea__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block }
.cm-idea__foto::after{ content:""; position:absolute; inset:auto 0 0; height:34%; z-index:-1; background:linear-gradient(to top, rgba(10,26,47,.78), rgba(10,26,47,0)) }
.cm-idea__foto figcaption{ position:absolute; left:0; right:0; bottom:clamp(1rem,2.4vw,1.6rem); font-family:var(--lee); font-style:italic; font-size:.98rem; line-height:1.45; color:var(--papel) }
.cm-idea__foto figcaption span{ display:block; max-width:44ch; text-shadow:0 1px 10px rgba(6,17,31,.7) }
@media (max-width:40rem){
  .cm-idea__foto{ height:auto; aspect-ratio:4 / 3.4 }
  .cm-idea__foto img{ object-position:var(--pos-m,var(--pos)) }
  .cm-idea__foto figcaption{ font-size:.9rem }
}
.cm-idea__pasos{ list-style:none; margin:0; padding:clamp(2rem,4vw,3rem) 0 0; display:grid; gap:var(--e-lg) }
@media (min-width:52rem){ .cm-idea__pasos{ grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:clamp(1.5rem,3.5vw,3rem) } }
.cm-idea__paso{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:1rem; row-gap:.3rem; align-content:start; padding-top:1.1rem; border-top:1px solid var(--filete-firme) }
.cm-idea__paso > *{ margin:0; grid-column:2 }
.cm-idea__n{ grid-column:1 !important; grid-row:1 / span 3; font-family:var(--lee); font-size:clamp(2.4rem,1.8rem + 1.6vw,3.4rem); line-height:.9; color:var(--cm-hondo); font-variant-numeric:lining-nums }
.cm-idea__pk{ font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--mudo) }
.cm-idea__paso:not(:first-child) .cm-idea__pk{ color:var(--cm-hondo) }
.cm-idea__pt{ font-family:var(--sans); font-size:1.22rem; line-height:1.2; font-weight:650; color:var(--tinta) }
.cm-idea__pd{ font-size:.97rem; line-height:1.6; color:var(--tinta-2); text-wrap:pretty }

/* ---------- La idea: el trabajo doble, en dos fotos a sangre con el texto en capas ---------- */
.cm-idea{ padding-block:var(--banda) 0; background:var(--papel); overflow:hidden }
.cm-doble{ margin-top:clamp(4rem,8vw,7rem) }
.cm-doble__k{ margin:0 auto var(--e-lg); font-family:var(--sans); font-size:.95rem; font-weight:650; color:var(--tinta) }
.cm-doble__lista{ list-style:none; margin:0; padding:0; display:grid; gap:3px; background:var(--noche) }
@media (min-width:52rem){ .cm-doble__lista{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.cm-doble__p{ position:relative; isolation:isolate; overflow:clip; display:grid; align-items:end; min-height:clamp(24rem, 42vw, 36rem) }
.cm-doble__foto{ position:absolute; inset:0; z-index:-1 }
.cm-doble__foto picture{ display:block; height:100% }
.cm-doble__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block; transition:transform 1.2s var(--curva) }
.cm-doble__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,26,47,.94) 0, rgba(10,26,47,.6) 36%, rgba(10,26,47,0) 66%) }
.cm-doble__p:hover .cm-doble__foto img{ transform:scale(1.03) }
.cm-doble__txt{ display:grid; gap:.7rem; padding:2.5rem var(--canal) clamp(2rem,4vw,3rem); max-width:40rem }
.cm-doble__lista li:first-child .cm-doble__txt{ padding-left:max(var(--canal), calc((100vw - var(--ancho)) / 2 + var(--canal))) }
.cm-doble__txt b{ font-family:var(--lee); font-weight:400; font-size:clamp(1.5rem,1.1rem + 1.4vw,2.4rem); line-height:1.15; letter-spacing:-.01em; color:var(--papel); text-wrap:balance }
.cm-doble__txt span{ color:#E3E8EA; line-height:1.6; max-width:44ch }
@media (max-width:51.99rem){ .cm-doble__lista li:first-child .cm-doble__txt{ padding-left:var(--canal) } }

/* ---------- v30 · Todas conectadas (hub): el fin al centro, las cinco en círculo, diez hilos numerados ----------
   data-vista: "todo" (números y leyenda) · "com" (una comunidad y sus cuatro hilos con palabras) ·
   "par" (una conexión: qué fluye en cada sentido; recorrido guiado). Sin JS: las diez conexiones en lista. */
.cm-con--hub{ background:
  radial-gradient(ellipse 50% 55% at 30% 58%, rgba(217,164,65,.1), transparent 70%),
  radial-gradient(ellipse 40% 40% at 85% 20%, rgba(124,196,190,.06), transparent 70%), var(--noche-hondo) }
.hr{ display:grid; gap:var(--e-lg) }
.hr__mando{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem }
.hr__mando[hidden]{ display:none }
.hr__modo{ min-height:2.75rem; padding:0 1.2rem; border-radius:99px; border:1px solid rgba(244,242,238,.3); background:rgba(244,242,238,.04); color:var(--papel);
  font:inherit; font-family:var(--sans); font-size:.92rem; font-weight:600; cursor:pointer; transition:background-color .25s ease, color .25s ease, border-color .25s ease }
.hr__modo:hover{ border-color:rgba(244,242,238,.6); background:rgba(244,242,238,.1) }
.hr__modo[aria-pressed="true"]{ background:var(--papel); border-color:var(--papel); color:var(--tinta) }
.hr__modo:focus-visible{ outline:3px solid var(--piedra); outline-offset:3px }
.hr__ayuda{ margin:0; font-family:var(--lee); font-style:italic; font-size:.95rem; color:var(--suave-claro) }
.hr__escena{ display:grid; gap:var(--e-xl); align-items:start }
@media (min-width:62rem){
  .hr__escena{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem) }
  .hr__lado{ position:sticky; top:calc(var(--alto-nav) + 1.5rem) }
}
.hr__lado{ display:grid; gap:var(--e-sm); min-width:0 }
.hr__estado{ margin:0; min-height:1.6em; text-align:center; font-family:var(--sans); font-size:.92rem; color:var(--suave-claro) }
.hr__estado b{ color:var(--papel); font-weight:650 }
.hr:not(.hr--vivo) .hr__estado{ display:none }

/* El dibujo: un solo sistema de coordenadas (1000 × 1000) para el SVG y las capas HTML */
.hr__dibujo{ position:relative; width:100%; max-width:44rem; margin-inline:auto; aspect-ratio:1; container-type:inline-size;
  --dn:clamp(3rem, 12cqi, 6.4rem); --dc:clamp(4.6rem, 17cqi, 9rem) }
.hr__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.hr-marco{ fill:rgba(216,203,179,.025); stroke:rgba(216,203,179,.16); stroke-width:1; stroke-dasharray:2 6; stroke-linejoin:round; vector-effect:non-scaling-stroke }
.hr-radio{ fill:none; stroke:var(--sol); stroke-width:1.2; stroke-dasharray:2 5; opacity:.35; vector-effect:non-scaling-stroke; transition:opacity .4s ease }
.hr-h path{ fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round }
.hr-h__base{ stroke:rgba(216,203,179,.14); stroke-width:1.5 }
.hr-h__t{ stroke-width:3px; opacity:.6; transition:opacity .4s ease, stroke-width .3s ease }
.hr-h__ida,.hr-h__vuelta{ stroke-width:5px; stroke-dasharray:2.5 97.5; opacity:0 }
/* Centro: el fin */
.hr-centro{ position:absolute; left:50%; top:50%; width:var(--dc); aspect-ratio:1; translate:-50% -50%; border-radius:50%; overflow:hidden; isolation:isolate; z-index:1;
  background:var(--noche-2); box-shadow:0 0 0 2px var(--sol), 0 0 0 9px rgba(217,164,65,.14), 0 24px 60px -16px rgba(0,0,0,.75) }
.hr-centro__foto,.hr-centro__foto picture{ position:absolute; inset:0; z-index:-2 }
.hr-centro__foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; display:block }
.hr-centro::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 50% 55%, rgba(10,26,47,.6) 0, rgba(10,26,47,.85) 72%) }
.hr-centro__t{ position:absolute; inset:10%; display:grid; place-content:center; justify-items:center; gap:.15rem; text-align:center; color:var(--papel) }
.hr-centro__ico{ width:clamp(1.1rem, 3.6cqi, 1.8rem); height:clamp(1.1rem, 3.6cqi, 1.8rem); color:var(--sol) }
.hr-centro__ico svg{ width:100%; height:100%; display:block }
.hr-centro__t b{ font-family:var(--sans); font-weight:650; font-size:clamp(.72rem, 2.1cqi, 1.1rem); line-height:1.1; text-wrap:balance }
.hr-centro__t small{ font-family:var(--lee); font-style:italic; font-size:clamp(.62rem, 1.55cqi, .82rem); color:#E7DCC2 }
/* Las cinco */
.hr-nodos{ list-style:none; margin:0; padding:0 }
.hr-nodo{ position:absolute; left:var(--x); top:var(--y); translate:-50% calc(var(--dn) / -2); z-index:3 }
/* Las de arriba llevan el nombre sobre la foto; las de abajo, debajo: así ninguna palabra de un hilo lo tapa */
.hr-nodo:not(.hr-nodo--abajo){ translate:-50% calc(-100% + var(--dn) / 2) }
.hr-nodo:not(.hr-nodo--abajo) .hr-nodo__nom{ order:-1; margin:0 0 .6rem }
.hr-nodo__disco{ position:relative; display:block }
.hr-nodo button{ position:relative; display:grid; justify-items:center; padding:0; border:0; background:none; color:var(--papel); font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent }
.hr-nodo__foto{ display:block; width:var(--dn); aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--noche-2);
  box-shadow:0 0 0 3px var(--c), 0 0 0 7px var(--noche-hondo), 0 16px 32px -12px rgba(0,0,0,.75); transition:box-shadow .35s ease, scale .45s var(--curva) }
.hr-nodo__foto picture{ display:block; height:100% }
.hr-nodo__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block; transition:filter .4s ease }
.hr-nodo__ico{ position:absolute; right:-.3rem; bottom:-.2rem; width:1.8rem; height:1.8rem; border-radius:50%;
  display:grid; place-items:center; background:var(--c); color:var(--tinta); box-shadow:0 0 0 3px var(--noche-hondo) }
.hr-nodo__ico svg{ width:1rem; height:1rem }
.hr-nodo__nom{ margin-top:.6rem; font-family:var(--sans); font-size:clamp(.74rem, 2cqi, .98rem); font-weight:650; white-space:nowrap; text-shadow:0 1px 8px rgba(6,17,31,.95), 0 0 2px rgba(6,17,31,.9) }
.hr-nodo button:hover .hr-nodo__foto{ scale:1.05 }
.hr-nodo button:focus-visible{ outline:none }
.hr-nodo button:focus-visible .hr-nodo__foto{ outline:3px solid var(--papel); outline-offset:7px }
.hr-nodo button[aria-pressed="true"] .hr-nodo__foto{ scale:1.1; box-shadow:0 0 0 3px var(--c), 0 0 0 11px color-mix(in srgb, var(--c) 32%, transparent), 0 20px 40px -12px rgba(0,0,0,.8) }
.hr-nodo button[aria-pressed="true"] .hr-nodo__nom{ color:var(--c) }
@media (max-width:40rem){
  .hr-centro__t small{ display:none }
  .hr-nodo__nom{ font-size:.72rem }
  .hr-nodo__ico{ width:1.45rem; height:1.45rem; right:-.35rem }
  .hr-nodo__ico svg{ width:.8rem; height:.8rem }
}
/* Números y palabras sobre los hilos (capa HTML: no se achican con el dibujo) */
.hr-capa{ position:absolute; inset:0; pointer-events:none; z-index:2 }
.hr-num{ display:inline-grid; place-items:center; flex:0 0 auto; width:1.65rem; height:1.65rem; border-radius:50%; font-family:var(--sans); font-size:.76rem; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--papel); background:var(--noche-hondo); box-shadow:inset 0 0 0 1.5px rgba(216,203,179,.55) }
.hr-num--hilo{ position:absolute; left:var(--x); top:var(--y); translate:-50% -50%; width:clamp(1.3rem, 4.2cqi, 1.75rem); height:clamp(1.3rem, 4.2cqi, 1.75rem);
  font-size:clamp(.66rem, 1.8cqi, .8rem); transition:opacity .3s ease, background-color .3s ease, color .3s ease, scale .3s var(--curva) }
.hr-rot{ position:absolute; left:var(--x); top:var(--y); translate:-50% -50%; display:flex; align-items:center; gap:.45rem; width:max-content; max-width:9.5rem;
  padding:.3rem .6rem .3rem .3rem; border-radius:8px; font-family:var(--sans); font-size:.78rem; font-weight:600; line-height:1.25; color:var(--papel);
  background:rgba(6,17,31,.94); box-shadow:0 0 0 1px rgba(216,203,179,.32), 0 10px 24px -12px rgba(0,0,0,.9); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s }
.hr-rot--fuera{ max-width:12rem }
.hr-rot--izq{ left:0; translate:0 -50% }
.hr-rot--der{ left:auto; right:0; translate:0 -50% }
.hr-rot i{ display:grid; place-items:center; flex:0 0 auto; width:1.35rem; height:1.35rem; border-radius:50%; font-style:normal; font-size:.7rem; font-weight:700; background:var(--sol); color:var(--tinta) }

/* Vista «ver todo»: todos los hilos con su número; al pasar por la leyenda se marca uno */
.hr--vivo[data-ver] .hr-h__t{ opacity:.12 }
.hr--vivo[data-ver] .hr-h.ver .hr-h__t{ opacity:1; stroke-width:5px }
.hr--vivo[data-ver] .hr-num--hilo:not(.ver){ opacity:.3 }
.hr-num--hilo.ver{ background:var(--sol); color:var(--tinta); box-shadow:none; scale:1.15 }
/* Vista «una comunidad»: sus cuatro hilos encendidos, con palabras; los demás casi apagados */
.hr--vivo:is([data-vista="com"],[data-vista="par"]) .hr-h__t{ opacity:.07 }
.hr--vivo:is([data-vista="com"],[data-vista="par"]) .hr-radio{ opacity:.12 }
.hr--vivo:is([data-vista="com"],[data-vista="par"]) .hr-num--hilo{ opacity:0 }
.hr--vivo .hr-h.on .hr-h__t{ opacity:1; stroke-width:4.5px; stroke-dasharray:100; animation:hr-traza .9s var(--curva) both }
.hr--vivo .hr-radio.on{ opacity:.9; stroke-dasharray:none }
.hr--vivo .hr-rot.on{ opacity:1; visibility:visible; transition-delay:.25s, 0s }
.hr--vivo:is([data-vista="com"],[data-vista="par"]) .hr-nodo:not(.implicada) .hr-nodo__foto img{ filter:saturate(.35) brightness(.6) }
.hr--vivo:is([data-vista="com"],[data-vista="par"]) .hr-nodo:not(.implicada) .hr-nodo__nom{ opacity:.6 }
/* Vista «una conexión»: el hilo más grueso y lo que va y vuelve, en movimiento */
.hr--vivo[data-vista="par"] .hr-h.on .hr-h__t{ stroke-width:6px }
.hr--vivo[data-vista="par"] .hr-h.on :is(.hr-h__ida,.hr-h__vuelta){ opacity:1; animation:hr-fluye 3.2s linear infinite }
.hr--vivo[data-vista="par"] .hr-h.on .hr-h__vuelta{ animation-direction:reverse; animation-delay:-1.6s }
@keyframes hr-traza{ from{ stroke-dashoffset:100 } to{ stroke-dashoffset:0 } }
@keyframes hr-fluye{ from{ stroke-dashoffset:100 } to{ stroke-dashoffset:0 } }
/* v32 · El hexágono: los seis lados se ven siempre; los nueve hilos de dentro, solo al elegir (no hay estrella) */
.hr-h--lado .hr-h__base{ stroke:rgba(216,203,179,.22); stroke-width:2 }
.hr-h--lado .hr-h__t{ stroke-width:3.5px; opacity:.75 }
.hr-h--dentro .hr-h__base,.hr-h--dentro .hr-h__t{ opacity:0 }
.hr--vivo .hr-h--dentro:not(.on):not(.ver) .hr-h__t{ opacity:0 }
.hr .hr-num--dentro:not(.ver):not(.on){ opacity:0 }
.hr--vivo[data-vista="todo"] .hr-num--dentro.on{ opacity:0 }
.hr-num--hilo.ver{ opacity:1 }
.hr-ley__g{ margin:1.1rem 0 .35rem; font-family:var(--sans); font-size:.78rem; font-weight:650; color:var(--piedra) }
.hr-v--todo .hr-v__k + .hr-ley__g{ margin-top:.3rem }
.hr-ley--dentro{ border-bottom:0 }
@media (min-width:62rem){ .hr-v--todo .hr-ley__b{ padding:.5rem .5rem } .hr-v--todo .hr-ley__t{ gap:.05rem } }
/* En celular las palabras van en el panel: en el dibujo quedan los números de los hilos activos */
@media (max-width:47.99rem){
  .hr-rot{ display:none }
  .hr--vivo:is([data-vista="com"],[data-vista="par"]) .hr-num--hilo.on{ opacity:1; background:var(--sol); color:var(--tinta); box-shadow:none }
}

/* Panel */
.hr__panel{ display:grid; min-width:0 }
.hr-v[hidden]{ display:none }
.hr--vivo .hr-v{ display:none }
.hr--vivo .hr-v.on{ display:block; animation:cm-aparece .4s var(--curva) both }
.hr:not(.hr--vivo) .hr-v--com{ display:none }
.hr-v__k{ margin:0 0 .6rem; font-family:var(--sans); font-size:.86rem; font-weight:650; color:var(--suave-claro) }
.hr-ley{ list-style:none; margin:0; padding:0; border-bottom:1px solid rgba(216,203,179,.16) }
.hr-ley__b{ width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.9rem; padding:.7rem .5rem; border:0; border-top:1px solid rgba(216,203,179,.16);
  background:none; color:var(--papel); font:inherit; text-align:left; cursor:pointer; transition:background-color .2s ease }
.hr-ley__b:hover,.hr-ley__b:focus-visible{ background:rgba(244,242,238,.06) }
.hr-ley__b:focus-visible{ outline:3px solid var(--piedra); outline-offset:-3px; border-radius:6px }
.hr-ley__b:hover .hr-num,.hr-ley__b:focus-visible .hr-num{ background:var(--sol); color:var(--tinta); box-shadow:none }
.hr-ley__t{ display:grid; gap:.15rem; min-width:0 }
.hr-ley__t b{ font-family:var(--sans); font-size:1rem; font-weight:650; line-height:1.3 }
.hr-par{ display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .45rem; font-family:var(--sans); font-size:.82rem; color:var(--suave-claro) }
.hr-par__a,.hr-par__b{ display:inline-flex; align-items:center; gap:.3rem }
.hr-par svg{ width:.95rem; height:.95rem; flex:0 0 auto }
.hr-par__a svg{ color:var(--ca) }
.hr-par__b svg{ color:var(--cb) }
.hr-par__y{ color:var(--piedra) }
/* Ficha de una comunidad */
.hr-v--com{ border-radius:18px; overflow:hidden; background:var(--noche-2); box-shadow:0 0 0 1px rgba(216,203,179,.14), 0 34px 70px -34px rgba(0,0,0,.85) }
.hr-v--com .cm-red__ffoto{ aspect-ratio:16 / 6 }
.hr-v__cuerpo{ display:grid; gap:.8rem; padding:.9rem 1.3rem 1.4rem }
.hr-v__cuerpo > *{ margin:0 }
.hr-resp{ font-family:var(--lee); font-style:italic; font-size:1.06rem; line-height:1.45; color:#EEF1F2 }
.hr-resp span{ display:block; margin-bottom:.15rem; font-family:var(--sans); font-style:normal; font-size:.78rem; font-weight:650; color:var(--c) }
.hr-v--com .hr-v__k{ margin:0 }
.hr-hilos{ list-style:none; margin:0; padding:0 }
.hr-hilo{ width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.85rem; row-gap:.35rem; padding:.75rem .45rem; border:0; border-top:1px solid rgba(216,203,179,.14);
  background:none; color:var(--papel); font:inherit; text-align:left; cursor:pointer; transition:background-color .2s ease }
.hr-hilo:hover,.hr-hilo:focus-visible{ background:rgba(244,242,238,.05) }
.hr-hilo:focus-visible{ outline:3px solid var(--piedra); outline-offset:-3px; border-radius:6px }
.hr-hilo .hr-num{ grid-row:span 2; align-self:start; background:var(--sol); color:var(--tinta); box-shadow:none }
.hr-hilo__t{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .5rem }
.hr-hilo__t b{ font-family:var(--sans); font-size:.98rem; font-weight:650 }
.hr-hilo__t span{ font-family:var(--sans); font-size:.84rem; color:var(--suave-claro) }
.hr-hilo__f{ grid-column:2; display:grid; gap:.15rem; font-size:.88rem; line-height:1.45; color:#C9D4D7 }
.hr-hilo__f i{ font-family:var(--sans); font-style:normal; font-size:.74rem; font-weight:650; color:var(--c); margin-right:.3rem }
.hr-hilo__f span + span i{ color:var(--c2) }
.hr-v__ir .liga{ font-size:.92rem }
/* Ficha de una conexión */
.hr-v--par{ padding:clamp(1.3rem,2.5vw,1.8rem); border-radius:18px; background:var(--noche-2); box-shadow:0 0 0 1px rgba(216,203,179,.14), 0 34px 70px -34px rgba(0,0,0,.85) }
.hr-v--par > *{ margin:0 }
.hr-v--par > * + *{ margin-top:.85rem }
.hr-pares{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-md) }
.hr--vivo .hr-pares{ display:block }
.hr-v__paso{ display:flex; align-items:center; gap:.6rem; font-family:var(--sans); font-size:.84rem; color:var(--suave-claro) }
.hr--vivo .hr-v__paso .hr-num{ background:var(--sol); color:var(--tinta); box-shadow:none }
.hr-v__t{ font-size:clamp(1.45rem,1.15rem + 1vw,2rem); line-height:1.1; letter-spacing:-.015em; font-weight:650; color:var(--papel); text-wrap:balance }
.hr-v__t:focus{ outline:none }
.hr-v--par .hr-par{ font-size:.9rem }
.hr-flujo{ list-style:none; padding:0; display:grid; gap:.5rem }
.hr-flujo li{ display:grid; gap:.25rem; padding:.8rem 1rem; border-radius:12px; background:color-mix(in srgb, var(--c) 11%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent) }
.hr-flujo__de{ display:flex; align-items:center; gap:.45rem; font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--suave-claro) }
.hr-flujo__de svg{ width:1rem; height:1rem; flex:0 0 auto; color:var(--c) }
.hr-flujo b{ font-family:var(--lee); font-weight:400; font-size:1.12rem; line-height:1.4; color:var(--papel) }
.hr-v__txt{ font-size:.92rem; line-height:1.6; color:#C9D4D7 }
.hr-juntas{ display:block; font-family:var(--sans); font-size:.8rem; color:var(--suave-claro) }
.hr-juntas a{ color:var(--papel); text-decoration:underline; text-decoration-color:rgba(216,203,179,.5); text-underline-offset:.2em }
.hr-v--par .hr-v__ir{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem }
/* Recorrido guiado */
.hr-guia{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:var(--e-sm) }
.hr-guia[hidden]{ display:none }
.hr-guia__b,.hr-guia__play{ display:inline-flex; align-items:center; gap:.4rem; min-height:2.75rem; padding:0 1rem; border-radius:99px; border:1px solid rgba(244,242,238,.28);
  background:rgba(244,242,238,.05); color:var(--papel); font:inherit; font-family:var(--sans); font-size:.88rem; font-weight:600; cursor:pointer; transition:background-color .2s ease, border-color .2s ease }
.hr-guia__b svg{ width:1.1rem; height:1.1rem }
.hr-guia__play{ padding-left:.4rem }
.hr-guia__b:hover,.hr-guia__play:hover{ background:rgba(244,242,238,.12); border-color:rgba(244,242,238,.5) }
.hr-guia__b:focus-visible,.hr-guia__play:focus-visible{ outline:3px solid var(--piedra); outline-offset:3px }
.hr-guia__i{ width:1.9rem; height:1.9rem; border-radius:50%; display:grid; place-items:center; background:var(--sol); color:var(--tinta) }
.hr-guia__i svg{ width:.75rem; height:.75rem; grid-area:1 / 1 }
.hr-guia__play .i-pausa,.hr-guia__play[aria-pressed="true"] .i-play{ display:none }
.hr-guia__play[aria-pressed="true"] .i-pausa{ display:block }
.hr-guia__barra{ flex:1 1 100%; display:grid; grid-template-columns:repeat(var(--np,10), minmax(0,1fr)); gap:3px; margin-top:.2rem }
.hr-guia__barra i{ height:3px; border-radius:2px; background:rgba(216,203,179,.2); transition:background-color .3s ease }
.hr-guia__barra i.hecho{ background:rgba(217,164,65,.5) }
.hr-guia__barra i.on{ background:var(--sol) }
@media (prefers-reduced-motion:reduce){
  .hr *{ transition:none !important }
  .hr--vivo .hr-h.on .hr-h__t,.hr--vivo .hr-v.on{ animation:none }
  .hr-h__ida,.hr-h__vuelta{ display:none }
  .hr-nodo button:hover .hr-nodo__foto{ scale:none }
}

/* ---------- Las cinco puertas: índice sobre papel; la foto de la elegida, con texto en capas ---------- */
.cm-pt__lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-xl) }
.cm-pt a{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:1rem; row-gap:.35rem; align-items:center; color:var(--tinta); text-decoration:none }
.cm-pt__foto{ grid-column:1 / -1; position:relative; display:block; overflow:hidden; isolation:isolate; border-radius:16px; aspect-ratio:16/7; background:var(--noche); margin-bottom:.7rem }
.cm-pt__foto picture{ position:absolute; inset:0; z-index:-2 }
.cm-pt__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 45%); display:block }
.cm-pt__foto::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(10,26,47,.88) 0, rgba(10,26,47,.35) 34%, rgba(10,26,47,0) 60%) }
.cm-pt__capa{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:end; gap:.8rem; padding:1.2rem 1.4rem; font-family:var(--lee); font-style:italic; font-size:1rem; line-height:1.45; color:var(--papel) }
.cm-pt__cico{ flex:0 0 auto; width:2.2rem; height:2.2rem; border-radius:50%; display:grid; place-items:center; background:var(--c); color:var(--tinta) }
.cm-pt__cico svg{ width:1.15rem; height:1.15rem }
.cm-pt__ico{ width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center; color:color-mix(in oklab, var(--c) 45%, var(--tinta));
  box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--c) 70%, var(--tinta)); transition:background-color .3s ease, color .3s ease }
.cm-pt__ico svg{ width:1.3rem; height:1.3rem }
.cm-pt__n{ font-family:var(--sans); font-size:clamp(1.6rem,1.1rem + 1.8vw,2.8rem); line-height:1.05; font-weight:650; letter-spacing:-.025em }
.cm-pt__r,.cm-pt__pronto{ grid-column:2 }
.cm-pt__r{ font-family:var(--lee); font-style:italic; font-size:1.06rem; line-height:1.4; color:var(--tinta-2); max-width:36ch }

.cm-pt__pronto{ font-family:var(--sans); font-size:.74rem; color:var(--mudo) }
.cm-pt a:hover .cm-pt__ico,.cm-pt a:focus-visible .cm-pt__ico{ background:var(--c); color:var(--tinta) }
.cm-pt a:hover .cm-pt__n{ text-decoration:underline; text-decoration-color:var(--c); text-underline-offset:.15em; text-decoration-thickness:3px }
.cm-pt a:focus-visible{ outline:3px solid var(--petroleo); outline-offset:6px; border-radius:6px }
@media (min-width:64rem){
  .cm-pt__lista{ position:relative; gap:0; padding-right:calc(50% + var(--e-xl)); min-height:38rem }
  .cm-pt,.cm-pt a{ position:static }
  .cm-pt{ border-top:1px solid var(--filete-firme) }
  .cm-pt:last-child{ border-bottom:1px solid var(--filete-firme) }
  .cm-pt a{ grid-template-columns:3.2rem minmax(0,1fr); padding:1.2rem .5rem 1.2rem 0; transition:padding .35s var(--curva) }
  .cm-pt__foto{ grid-column:auto; grid-row:auto; position:absolute; top:0; right:0; bottom:0; width:50%; height:auto; aspect-ratio:auto; margin:0; border-radius:20px;
    opacity:0; transform:scale(.985); transition:opacity .5s ease, transform .7s var(--curva); pointer-events:none;
    box-shadow:0 40px 80px -40px rgba(10,26,47,.55) }
  .cm-pt__capa{ padding:2rem 2.2rem; font-size:1.2rem }
  .cm-pt__pronto{ max-height:0; opacity:0; overflow:hidden; transition:max-height .45s var(--curva), opacity .3s ease }
  .cm-pt__lista:not(.cm-pt__lista--vivo) .cm-pt:first-child .cm-pt__foto{ opacity:1; transform:none }
  .cm-pt__lista:not(.cm-pt__lista--vivo):has(.cm-pt:hover,.cm-pt:focus-within) .cm-pt .cm-pt__foto{ opacity:0 }
  .cm-pt__lista:not(.cm-pt__lista--vivo) .cm-pt:is(:hover,:focus-within) .cm-pt__foto{ opacity:1; transform:none }
  .cm-pt__lista--vivo .cm-pt.on .cm-pt__foto{ opacity:1; transform:none }
  .cm-pt.on a{ padding-left:.6rem }
  .cm-pt.on .cm-pt__ico{ background:var(--c); color:var(--tinta); box-shadow:none }
  .cm-pt:not(.on) .cm-pt__n{ color:var(--tinta-2) }
}

/* ---------- Movimiento reducido: todo en su estado final ---------- */
@media (prefers-reduced-motion:reduce){
  .cm-indice__marca,.cm-indice__k,.cm-pt a,.cm-pt__foto,.cm-pt__pronto,.cm-pt__ico,.cm-doble__foto img,.cm-ir{ transition:none !important }
  .cm-doble__p:hover .cm-doble__foto img{ transform:none; scale:none }
}

/* ---------- Ajustes de celular ---------- */
@media (max-width:40rem){
  .cm-pt__capa > span:last-child{ display:none }
}


/* =====================================================================================
   v31 · Plantilla en ocho bloques. Menos alto, más oficio: cada bloque cabe en una o dos pantallas.
   ===================================================================================== */

/* ---------- 1 · Apertura: el botón de acción ---------- */
.cm-ap.portada--v11{ min-height:max(36rem, 86svh) }
.cm-ap__acc{ margin-top:var(--e-lg) }
.cm-ap .cm-resp{ margin-top:var(--e-md) }
@media (max-width:40rem){ .cm-ap__acc{ margin-top:var(--e-md) } .cm-ap__acc .boton{ flex:1 1 auto; justify-content:center } }

/* Estado de una iniciativa: glifo propio y la palabra del glosario (En uso · Piloto · Entregado · En diseño) */
.cm-est-t{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--sans); font-size:.8rem; font-weight:650; line-height:1.2; color:var(--tinta-2) }
.cm-est-t__g{ display:inline-grid; width:1.05rem; height:1.05rem; color:var(--c, var(--cm-hondo)) }
.cm-est-t__g svg{ width:100%; height:100% }
.oscuro .cm-est-t{ color:var(--suave-claro) }
.oscuro .cm-est-t__g{ color:var(--c, var(--cm)) }
.cm-est-t--diseno .cm-est-t__g{ color:var(--mudo) }

/* ---------- 2 · Quiénes la forman: el titular y una foto; las cifras en una rejilla ---------- */
.cm-qq__rej{ display:grid; gap:var(--e-xl) }
.cm-qq__cab{ margin-bottom:var(--e-lg) }
.cm-qq__cab .h2{ font-size:clamp(1.9rem,1.3rem + 2vw,3.1rem); line-height:1.06; letter-spacing:-.02em; max-width:18ch }
.cm-qq__foto{ position:relative; margin:0; aspect-ratio:4 / 3; border-radius:14px; overflow:hidden; background:var(--noche) }
.cm-qq__foto picture{ display:block; height:100% }
.cm-qq__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block }
.cm-qq__foto figcaption{ position:absolute; left:.8rem; bottom:.8rem; padding:.25rem .6rem; border-radius:6px; background:rgba(10,26,47,.64);
  font-family:var(--sans); font-size:.74rem; color:var(--papel) }
@media (min-width:62rem){
  .cm-qq__rej{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(3rem,6vw,6rem); align-items:start }
  .cm-qq__lado{ position:sticky; top:calc(var(--alto-nav) + 4.5rem) }
  .cm-qq__datos{ padding-top:.4rem }
}
.cm-q__lista{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(1.6rem,3vw,2.2rem) clamp(1.6rem,3vw,2.6rem) }
@media (min-width:40rem){ .cm-q__lista{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.cm-q{ display:grid; align-content:start; gap:.35rem; padding-top:1rem; border-top:1px solid var(--filete-firme); position:relative }
.cm-q > *{ margin:0 }
.cm-q__cifra{ font-family:var(--sans); font-size:clamp(2rem,1.5rem + 1.6vw,2.9rem); line-height:1; font-weight:650; letter-spacing:-.03em; color:var(--tinta); font-variant-numeric:tabular-nums }
.cm-q__n{ font-size:1.06rem; line-height:1.3; font-weight:650; color:var(--tinta) }
.cm-q__d{ font-size:.94rem; line-height:1.55; color:var(--tinta-2); max-width:40ch }
.cm-q__mas{ margin-top:var(--e-xl) }
.cm-q__k,.cm-ok__k{ margin:0 0 .7rem; font-family:var(--sans); font-size:.84rem; font-weight:650; color:var(--tinta-2) }
.oscuro .cm-ok__k{ color:var(--suave-claro) }
.cm-q__otros{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem 2rem }
@media (min-width:40rem){ .cm-q__otros{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.cm-q__otros li > *{ margin:0 }
.cm-q__otros li{ display:grid; align-content:start; gap:.1rem; font-size:.94rem; line-height:1.45; color:var(--tinta-2) }
.cm-q__otros b{ font-family:var(--sans); font-weight:650; color:var(--tinta) }
.cm-qq .cm-fuentes{ margin-top:var(--e-lg) }

/* ---------- 3 · Los cuatro frentes: una banda con un hilo y cuatro nudos ---------- */
.cm-fb .cm-cab{ margin-bottom:clamp(2rem,4vw,3.2rem) }
.cm-fb__lista{ --g:clamp(1.4rem,2.6vw,2.6rem); list-style:none; margin:0; padding:0; display:grid; gap:var(--e-xl) var(--g); counter-reset:fb }
@media (min-width:40rem){ .cm-fb__lista{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:62rem){ .cm-fb__lista{ grid-template-columns:repeat(4, minmax(0,1fr)) } }
.cm-fb__p{ position:relative; display:flex; flex-direction:column; gap:.55rem; min-width:0 }
.cm-fb__p > *{ margin:0 }
.cm-fb__nudo{ position:relative; z-index:1; display:grid; place-items:center; width:2.8rem; height:2.8rem; margin-bottom:.5rem; border-radius:50%;
  font-family:var(--sans); font-size:1.05rem; font-weight:700; color:var(--tinta); background:var(--cm);
  box-shadow:0 0 0 6px var(--noche), 0 0 0 7px color-mix(in srgb, var(--cm) 40%, transparent) }
.cm-fb__v{ font-family:var(--sans); font-size:.84rem; font-weight:650; color:var(--cm) }
.cm-fb__t{ font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem); line-height:1.15; font-weight:650; letter-spacing:-.01em; color:var(--papel); text-wrap:balance }
.cm-fb__d{ font-size:.97rem; line-height:1.6; color:#C9D4D7; flex:1 1 auto }
.cm-fb__ir{ display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; margin-top:.3rem; font-family:var(--sans); font-size:.86rem; font-weight:600;
  color:var(--papel); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--cm) 60%, transparent); text-underline-offset:.25em }
.cm-fb__ir:hover{ text-decoration-color:var(--cm) }
.cm-fb__ir .cm-ir{ width:1rem; height:1rem; color:var(--cm) }
/* El hilo que une los cuatro nudos (solo en una fila de cuatro) */
@media (min-width:62rem){
  .cm-fb__p:not(:last-child)::after{ content:""; position:absolute; top:1.4rem; left:3.6rem; width:calc(100% + var(--g) - 4.4rem); height:2px;
    background:linear-gradient(90deg, var(--cm), color-mix(in srgb, var(--cm) 35%, transparent)); transform-origin:0 50% }
  .rv .cm-fb__lista:not(.visto) .cm-fb__p::after{ transform:scaleX(0) }
  .rv .cm-fb__lista .cm-fb__p::after{ transition:transform .7s var(--curva) calc(.25s + var(--k) * .3s) }
  .rv .cm-fb__lista:not(.visto) .cm-fb__nudo{ background:transparent; color:var(--cm); box-shadow:0 0 0 6px var(--noche), inset 0 0 0 1.5px var(--cm) }
  .rv .cm-fb__lista .cm-fb__nudo{ transition:background-color .4s ease calc(var(--k) * .3s), color .4s ease calc(var(--k) * .3s) }
}
@media (max-width:61.99rem){ .cm-fb__p{ padding-top:1.2rem; border-top:1px solid rgba(216,203,179,.18) } .cm-fb__nudo{ width:2.4rem; height:2.4rem; font-size:.95rem } }
.cm-fb__fin{ margin:clamp(2.2rem,4vw,3rem) 0 0; padding-top:var(--e-md); border-top:1px solid rgba(216,203,179,.16);
  font-family:var(--lee); font-style:italic; font-size:1.02rem; line-height:1.55; color:var(--suave-claro); max-width:none }
.cm-fb__fin .liga{ font-family:var(--sans); font-style:normal; font-size:.92rem; margin-left:.4rem; white-space:nowrap }
@media (max-width:40rem){ .cm-fb__fin .liga{ white-space:normal; margin-left:0; display:inline-block; margin-top:.4rem } }

/* ---------- 5 · Lo que ya funciona: historia, iniciativas y lo que se diseña, plegado ---------- */
.cm-ok .cm-cab{ margin-bottom:clamp(1.8rem,3.5vw,2.6rem) }
.cm-hp{ margin:0 0 clamp(2rem,4vw,3rem) }
.cm-hp__a{ display:grid; border-radius:18px; overflow:hidden; text-decoration:none; color:var(--papel); background:var(--noche-2);
  box-shadow:0 30px 60px -40px rgba(6,17,31,.7) }
.cm-hp__foto{ display:block; aspect-ratio:16 / 10; overflow:hidden }
.cm-hp__foto picture{ display:block; height:100% }
.cm-hp__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 40%); display:block; transition:transform .8s var(--curva) }
.cm-hp__a:hover .cm-hp__foto img{ transform:scale(1.03) }
.cm-hp__txt{ display:grid; align-content:center; gap:.7rem; padding:clamp(1.5rem,3vw,2.8rem) }
.cm-hp__k{ font-family:var(--sans); font-size:.84rem; font-weight:650; color:var(--cm) }
.cm-hp__t{ font-family:var(--sans); font-size:clamp(1.6rem,1.2rem + 1.4vw,2.5rem); line-height:1.06; letter-spacing:-.02em; font-weight:650; text-wrap:balance }
.cm-hp__d{ font-family:var(--lee); font-size:1.06rem; line-height:1.6; color:#D5DDE0; max-width:46ch }
.cm-hp__ir{ display:inline-flex; align-items:center; gap:.45rem; margin-top:.4rem; font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--cm) }
.cm-hp__a:focus-visible{ outline:3px solid var(--piedra); outline-offset:5px }
@media (min-width:52rem){ .cm-hp__a{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) } .cm-hp__foto{ aspect-ratio:auto; min-height:22rem; max-height:28rem } }

.cm-ok__lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-md) }
@media (min-width:44rem){ .cm-ok__lista:not(.cm-ok__lista--1){ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:72rem){ .cm-ok__lista--3,.cm-ok__lista--5,.cm-ok__lista--6{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
.cm-ok__i{ display:flex; flex-direction:column; gap:.55rem; padding:clamp(1.3rem,2.4vw,1.8rem); border-radius:16px; background:var(--blanco, #fff);
  box-shadow:0 0 0 1px var(--filete), 0 18px 36px -30px rgba(10,26,47,.45) }
.cm-ok__i > *{ margin:0 }
.cm-ok__n{ font-size:1.28rem; line-height:1.2; font-weight:650; color:var(--tinta); letter-spacing:-.01em }
.cm-ok__d{ font-size:.96rem; line-height:1.6; color:var(--tinta-2); flex:1 1 auto }
.cm-ok__i .liga{ align-self:flex-start; font-size:.92rem }
.oscuro .cm-ok__i{ background:rgba(244,242,238,.045); box-shadow:inset 0 0 0 1px rgba(216,203,179,.16) }
.oscuro .cm-ok__n{ color:var(--papel) }
.oscuro .cm-ok__d{ color:#C9D4D7 }
.cm-ok__her{ margin:var(--e-md) 0 0; font-family:var(--lee); font-style:italic; font-size:1rem; color:var(--tinta-2) }
.oscuro .cm-ok__her{ color:var(--suave-claro) }

.cm-hs__caja{ margin-top:clamp(2rem,4vw,2.8rem) }
.cm-hs__lista{ list-style:none; margin:0; padding:0; display:grid; gap:0 var(--e-xl); border-top:1px solid var(--filete-firme) }
@media (min-width:52rem){ .cm-hs__lista{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.cm-hs a{ display:grid; grid-template-columns:4.6rem minmax(0,1fr) auto; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--filete-firme);
  color:var(--tinta); text-decoration:none }
.cm-hs--sin a{ grid-template-columns:minmax(0,1fr) auto }
.cm-hs__foto{ display:block; width:4.6rem; aspect-ratio:1; border-radius:10px; overflow:hidden }
.cm-hs__foto picture{ display:block; height:100% }
.cm-hs__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 40%); display:block }
.cm-hs__txt{ display:grid; gap:.15rem; min-width:0 }
.cm-hs__txt b{ font-family:var(--sans); font-size:1.02rem; font-weight:650 }
.cm-hs__txt span{ font-size:.9rem; line-height:1.5; color:var(--tinta-2) }
.cm-hs .cm-ir{ color:var(--cm-hondo) }
.cm-hs a:hover b{ text-decoration:underline; text-decoration-color:var(--cm-hondo); text-underline-offset:.2em }
.cm-hs a:focus-visible{ outline:3px solid var(--petroleo); outline-offset:3px; border-radius:6px }
.cm-hs__mas{ margin:var(--e-md) 0 0 }
.oscuro .cm-hs__lista,.oscuro .cm-hs a{ border-color:rgba(216,203,179,.16) }
.oscuro .cm-hs a{ color:var(--papel) }
.oscuro .cm-hs__txt span{ color:#C9D4D7 }
.oscuro .cm-hs .cm-ir{ color:var(--cm) }

.cm-dis{ margin-top:clamp(2rem,4vw,2.8rem); border-radius:14px; box-shadow:inset 0 0 0 1px var(--filete-firme); background:color-mix(in srgb, var(--papel) 60%, transparent) }
.oscuro .cm-dis{ background:rgba(244,242,238,.03); box-shadow:inset 0 0 0 1px rgba(216,203,179,.18) }
.cm-dis summary{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; padding:1.05rem 1.3rem; min-height:3rem; cursor:pointer; list-style:none;
  font-family:var(--sans); font-size:1rem; font-weight:650; color:var(--tinta) }
.oscuro .cm-dis summary{ color:var(--papel) }
.cm-dis summary::-webkit-details-marker{ display:none }
.cm-dis summary::after{ content:""; margin-left:auto; width:.55rem; height:.55rem; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .25s ease }
.cm-dis[open] summary::after{ transform:rotate(-135deg) translateY(-1px) }
.cm-dis summary b{ display:inline-grid; place-items:center; min-width:1.6rem; height:1.6rem; margin-left:.3rem; padding:0 .4rem; border-radius:99px; font-size:.82rem; background:var(--filete); color:var(--tinta) }
.oscuro .cm-dis summary b{ background:rgba(244,242,238,.14); color:var(--papel) }
.cm-dis__g{ display:inline-grid; width:1.3rem; height:1.3rem; color:var(--mudo) }
.cm-dis__g svg{ width:100%; height:100% }
.cm-dis__n{ font-weight:500; font-size:.86rem; color:var(--mudo) }
.oscuro .cm-dis__n{ color:var(--suave-claro) }
.cm-dis summary:focus-visible{ outline:3px solid var(--petroleo); outline-offset:3px; border-radius:12px }
.cm-dis__lista{ list-style:none; margin:0; padding:0 1.3rem 1.3rem; display:grid; gap:1.1rem 2.2rem }
@media (min-width:52rem){ .cm-dis__lista{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.cm-dis__lista li{ display:grid; gap:.25rem; padding-top:.9rem; border-top:1px dashed var(--filete-firme) }
.oscuro .cm-dis__lista li{ border-top-color:rgba(216,203,179,.2) }
.cm-dis__lista h4{ margin:0; font-size:1.02rem; font-weight:650; color:var(--tinta) }
.cm-dis__lista p{ margin:0; font-size:.92rem; line-height:1.55; color:var(--tinta-2) }
.oscuro .cm-dis__lista h4{ color:var(--papel) }
.oscuro .cm-dis__lista p{ color:#C9D4D7 }
.cm-dis__lista .liga{ justify-self:start; font-size:.88rem }

/* ---------- 6 · Herramientas: rail de enlaces, sin capturas ---------- */
.cm-her{ background:var(--niebla) }
.cm-her__cab{ display:grid; gap:var(--e-sm) var(--e-2xl); margin-bottom:clamp(1.8rem,3.5vw,2.6rem) }
.cm-her__cab > div > *,.cm-her__cab > p{ margin:0 }
.cm-her__cab .antetitulo{ margin-bottom:var(--e-sm) }
.cm-her__cab .h2{ font-size:clamp(1.8rem,1.3rem + 1.8vw,2.8rem); line-height:1.06; letter-spacing:-.02em; max-width:22ch; text-wrap:balance }
.cm-her__todo{ font-family:var(--lee); font-size:1.05rem; line-height:1.55; color:var(--tinta-2); max-width:44ch }
.cm-her__todo .liga{ font-family:var(--sans); font-size:.94rem }
@media (min-width:62rem){ .cm-her__cab{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end } }
.cm-her__rail{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-md) }
@media (min-width:44rem){ .cm-her__rail:not(.cm-her__rail--1){ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:62rem){ .cm-her__rail.cm-her__rail--3{ grid-template-columns:repeat(3, minmax(0,1fr)) } .cm-her__rail--1{ max-width:40rem } }
.cm-her__i{ display:grid; grid-template-columns:3rem minmax(0,1fr); column-gap:1rem; row-gap:.4rem; align-content:start; padding:1.3rem 1.4rem;
  border-radius:16px; background:var(--papel); box-shadow:0 0 0 1px var(--filete), 0 18px 36px -32px rgba(10,26,47,.5) }
.cm-her__i > *{ margin:0; grid-column:2 }
.cm-her__ico{ grid-column:1; grid-row:1 / span 2; display:grid; place-items:center; width:3rem; height:3rem; border-radius:12px; color:var(--papel); background:var(--c) }
.cm-her__ico svg{ width:1.45rem; height:1.45rem }
.cm-her__n{ align-self:end; font-size:1.18rem; line-height:1.15; font-weight:650; color:var(--tinta) }
.cm-her__d{ font-size:.92rem; line-height:1.5; color:var(--tinta-2) }
.cm-her__acc{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem !important }
.cm-her__b{ display:inline-flex; align-items:center; gap:.4rem; min-height:2.5rem; padding:0 1rem; border-radius:99px; font-family:var(--sans); font-size:.86rem; font-weight:600;
  color:var(--tinta); text-decoration:none; box-shadow:inset 0 0 0 1px var(--filete-firme); transition:background-color .2s ease, box-shadow .2s ease }
.cm-her__b:hover{ background:var(--blanco, #fff); box-shadow:inset 0 0 0 1.5px var(--c) }
.cm-her__b--eco{ background:var(--tinta); color:var(--papel); box-shadow:none }
.cm-her__b--eco:hover{ background:color-mix(in srgb, var(--tinta) 82%, var(--c)); box-shadow:none }
.cm-her__b:focus-visible{ outline:3px solid var(--petroleo); outline-offset:2px }
.cm-her__sin{ margin:0; font-family:var(--lee); font-size:1.05rem; color:var(--tinta-2); max-width:60ch }
.cm-her__med{ margin-top:clamp(1.8rem,3.5vw,2.6rem) }
.cm-her__lista{ list-style:none; margin:0; padding:0; border-bottom:1px solid var(--filete-firme) }
@media (min-width:62rem){ .cm-her__lista{ display:grid; grid-template-columns:repeat(var(--n,1), minmax(0,1fr)); column-gap:var(--e-xl) } }
.cm-her__lista a{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; height:100%; padding:.95rem 0; border-top:1px solid var(--filete-firme);
  font-family:var(--lee); font-size:1rem; line-height:1.45; color:var(--tinta); text-decoration:none; transition:color .2s ease }
.cm-her__lista a:hover{ color:var(--cm-hondo) }
.cm-her__lista .cm-ir{ color:var(--cm-hondo) }
.cm-her__lista a:focus-visible{ outline:3px solid var(--petroleo); outline-offset:2px; border-radius:4px }

/* v32 · Hub: las cinco iniciativas en un registro. Cada fila: quién es (ícono, nombre, estado), qué es,
   para quién, qué aporta, su comunidad y sus enlaces. Sin capturas: viven en el Ecosistema. */
.cm-rg{ list-style:none; margin:0; padding:0; border-bottom:1px solid var(--filete-firme) }
.cm-rg__i{ display:grid; gap:.9rem 1.2rem; padding:clamp(1.4rem,2.6vw,2rem) 0; border-top:1px solid var(--filete-firme); scroll-margin-top:calc(var(--alto-nav) + 1rem) }
.cm-rg__i > *{ margin:0 }
.cm-rg__id{ display:grid; grid-template-columns:3rem minmax(0,1fr); column-gap:1rem; row-gap:.3rem; align-items:center; align-content:start }
.cm-rg__id > *{ margin:0; grid-column:2 }
.cm-rg__ico{ grid-column:1 !important; grid-row:1 / span 3; align-self:start; display:grid; place-items:center; width:3rem; height:3rem; border-radius:12px; color:var(--tinta); background:var(--c) }
.cm-rg__ico svg{ width:1.45rem; height:1.45rem }
.cm-rg__n{ font-family:var(--sans); font-size:clamp(1.25rem,1.1rem + .5vw,1.55rem); line-height:1.12; font-weight:650; letter-spacing:-.012em; color:var(--tinta) }
.cm-rg__o{ font-family:var(--lee); font-style:italic; font-size:.92rem; line-height:1.35; color:var(--mudo) }
.cm-rg__id .cm-est-t{ justify-self:start; margin-top:.15rem }
.cm-rg__que{ font-family:var(--lee); font-size:clamp(1.08rem,1rem + .3vw,1.22rem); line-height:1.5; color:var(--tinta); text-wrap:pretty; max-width:42ch }
.cm-rg__dl{ display:grid; gap:.65rem; margin:0 }
.cm-rg__dl > div{ display:grid; gap:.1rem }
.cm-rg__dl dt{ font-family:var(--sans); font-size:.76rem; font-weight:650; color:var(--mudo) }
.cm-rg__dl dd{ margin:0; font-size:.94rem; line-height:1.5; color:var(--tinta-2) }
.cm-rg__dl dd a{ font-family:var(--sans); font-weight:600; color:var(--tinta); text-decoration:underline; text-decoration-color:var(--c); text-decoration-thickness:2px; text-underline-offset:.22em }
.cm-rg__dl dd a:hover{ text-decoration-color:var(--tinta) }
.cm-rg__acc{ display:flex; flex-wrap:wrap; gap:.5rem; align-content:start }
.cm-rg__b{ display:inline-flex; align-items:center; gap:.45rem; min-height:2.6rem; padding:0 1rem; border-radius:10px; font-family:var(--sans); font-size:.86rem; font-weight:600;
  color:var(--tinta); text-decoration:none; background:var(--papel); box-shadow:inset 0 0 0 1px var(--filete-firme); transition:box-shadow .2s ease, background-color .2s ease }
.cm-rg__b:hover{ box-shadow:inset 0 0 0 1.5px var(--c); background:var(--blanco, #fff) }
.cm-rg__b--ficha{ background:var(--tinta); color:var(--papel); box-shadow:none }
.cm-rg__b--ficha:hover{ background:color-mix(in srgb, var(--tinta) 80%, var(--c)); box-shadow:none }
.cm-rg__b svg{ flex:0 0 auto }
.cm-rg + .cm-rh__med{ border-top:0 }
.cm-rg__b:focus-visible{ outline:3px solid var(--petroleo); outline-offset:2px }
@media (min-width:48rem) and (max-width:71.99rem){
  .cm-rg__i{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start }
  .cm-rg__id{ grid-row:1 / span 3 }
}
@media (min-width:72rem){
  .cm-rg__i{ grid-template-columns:minmax(0,3.1fr) minmax(0,3.9fr) minmax(0,4.2fr) minmax(14.5rem,2.8fr); column-gap:clamp(1.5rem,2.4vw,2.4rem); align-items:start }
  .cm-rg__acc{ flex-direction:column; align-items:stretch }
  .cm-rg__b{ width:100%; justify-content:space-between }
}
.cm-rg__i:hover .cm-rg__n{ text-decoration:underline; text-decoration-color:var(--c); text-decoration-thickness:3px; text-underline-offset:.18em }

/* Hub: el rail de las cinco iniciativas, compacto (v31, ya no se usa en el hub) */
.cm-rh__rail{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-sm) }
@media (min-width:44rem){ .cm-rh__rail{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:72rem){ .cm-rh__rail{ grid-template-columns:repeat(5, minmax(0,1fr)) } }
.cm-rh__rail a{ display:grid; grid-template-columns:2.6rem minmax(0,1fr); column-gap:.8rem; row-gap:.35rem; align-content:start; height:100%; padding:1.1rem 1.1rem 1.2rem;
  border-radius:14px; background:var(--papel); color:var(--tinta); text-decoration:none; box-shadow:0 0 0 1px var(--filete); transition:box-shadow .25s ease, transform .3s var(--curva) }
.cm-rh__rail a > *{ grid-column:2 }
.cm-rh__rail .cm-her__ico{ grid-column:1; width:2.6rem; height:2.6rem; border-radius:10px; grid-row:1 / span 2 }
.cm-rh__rail .cm-her__ico svg{ width:1.3rem; height:1.3rem }
.cm-rh__n{ align-self:end; font-family:var(--sans); font-size:1.02rem; font-weight:650; line-height:1.2 }
.cm-rh__d{ grid-column:1 / -1 !important; margin-top:.35rem; font-size:.9rem; line-height:1.45; color:var(--tinta-2) }
.cm-rh__com{ grid-column:1 / -1 !important; font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--mudo) }
.cm-rh__rail a:hover{ box-shadow:0 0 0 1.5px var(--c), 0 18px 34px -26px rgba(10,26,47,.5); transform:translateY(-2px) }
.cm-rh__rail a:hover .cm-rh__n{ text-decoration:underline; text-decoration-color:var(--c); text-underline-offset:.2em; text-decoration-thickness:2px }
.cm-rh__rail a:focus-visible{ outline:3px solid var(--petroleo); outline-offset:3px }
.cm-rh__med{ margin:clamp(1.6rem,3vw,2.2rem) 0 0; padding-top:var(--e-md); border-top:1px solid var(--filete-firme); font-size:.98rem; line-height:1.65; color:var(--tinta-2); max-width:78ch }
.cm-rh__med b{ font-family:var(--sans); font-weight:650; color:var(--tinta) }
.cm-rh__med a{ color:var(--tinta); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--cm-hondo) 55%, transparent); text-underline-offset:.2em }
.cm-rh__med a:hover{ text-decoration-color:var(--tinta) }

/* ---------- 7 · Cómo empezar: las vías y, al lado, las preguntas ---------- */
.cm-emp{ position:relative; isolation:isolate; overflow:clip; background:var(--noche); padding-block:clamp(4.5rem,9vw,7rem) }
.cm-emp__foto{ position:absolute; inset:0 0 auto; height:min(70%, 34rem); z-index:-1; opacity:.5 }
.cm-emp__foto picture{ display:block; height:100% }
.cm-emp__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block }
.cm-emp__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,26,47,.45) 0, var(--noche) 100%), linear-gradient(90deg, var(--noche) 0, rgba(10,26,47,.2) 60%) }
.cm-emp__rej{ display:grid; gap:clamp(2.5rem,5vw,4rem) }
@media (min-width:62rem){ .cm-emp__rej:not(.cm-emp__rej--sola){ grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(3rem,6vw,6rem); align-items:start } }
.cm-emp .cm-cab{ margin-bottom:var(--e-lg) }
.cm-emp .cm-cab .h2{ font-size:clamp(2rem,1.3rem + 2.4vw,3.4rem); line-height:1.04; letter-spacing:-.02em; color:var(--papel); max-width:16ch }
.cm-emp .entrada{ color:#DCE3E6 }
.cm-v__lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-sm) }
.cm-v{ display:grid; gap:.55rem; align-content:start; padding:clamp(1.2rem,2.2vw,1.6rem); border-radius:16px; background:rgba(10,26,47,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15); box-shadow:inset 0 0 0 1px rgba(244,242,238,.16) }
.cm-v > *{ margin:0 }
.cm-v__t{ font-size:1.22rem; line-height:1.2; font-weight:650; color:var(--papel) }
.cm-v p{ color:#DCE3E6; line-height:1.6; font-size:var(--t-nota) }
.cm-v .boton{ justify-self:start; margin-top:.3rem }
.cm-emp__faq{ scroll-margin-top:calc(var(--alto-nav) + 4rem) }
.cm-emp__faq > .antetitulo{ margin:0 0 .5rem }
.cm-emp__ft{ margin:0 0 var(--e-md); font-size:clamp(1.4rem,1.15rem + .9vw,1.9rem); line-height:1.15; font-weight:650; letter-spacing:-.01em; color:var(--papel); text-wrap:balance }
.cm-emp .cm-p__lista{ border-bottom-color:rgba(216,203,179,.2) }
.cm-emp .cm-p{ border-top-color:rgba(216,203,179,.2) }
.cm-emp .cm-p summary{ padding:1.1rem 0 }
.cm-emp .cm-p summary::after{ box-shadow:inset 0 0 0 1px rgba(216,203,179,.35);
  background:linear-gradient(var(--cm), var(--cm)) center / .85rem 1.5px no-repeat, linear-gradient(var(--cm), var(--cm)) center / 1.5px .85rem no-repeat }
.cm-emp .cm-p__q{ color:var(--papel); font-size:clamp(1.02rem,.96rem + .25vw,1.15rem) }
.cm-emp .cm-p summary:hover .cm-p__q{ color:var(--cm) }
.cm-emp .cm-p summary:focus-visible{ outline-color:var(--piedra) }
.cm-emp .cm-p__r{ padding-right:3rem }
.cm-emp .cm-p__r p{ color:#C9D4D7; font-size:.98rem }
.cm-emp .cm-p__r a{ color:var(--papel) }
#preguntas:target .cm-emp__ft{ text-decoration:underline; text-decoration-color:var(--cm); text-underline-offset:.25em }

/* ---------- 8 · Las otras comunidades: cada una con el hilo que la une a esta ---------- */
.cm-otras{ background:var(--noche-hondo); padding-block:clamp(3rem,6vw,4.5rem) clamp(2.5rem,5vw,3.5rem) }
.cm-otras__cab{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.4rem 2rem; margin-bottom:var(--e-lg) }
.cm-otras__k{ margin:0; font-family:var(--sans); font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem); font-weight:650; letter-spacing:-.01em; color:var(--papel) }
.cm-otras__e{ margin:0; font-family:var(--lee); font-style:italic; font-size:.98rem; color:var(--suave-claro); max-width:56ch }
.cm-otras__e a{ white-space:nowrap; font-family:var(--sans); font-style:normal; font-size:.9rem; font-weight:600; color:var(--papel); margin-left:.3rem; text-decoration:underline; text-decoration-color:rgba(216,203,179,.5); text-underline-offset:.22em }
.cm-otras__e a:hover{ text-decoration-color:var(--papel) }
.cm-otras ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-sm) }
@media (min-width:40rem){ .cm-otras ul{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:40rem) and (max-width:61.99rem){ .cm-otras li:nth-child(odd):last-child{ grid-column:1 / -1 } }
/* v32 · Cinco vecinas (seis comunidades): tres arriba y dos abajo, sin una sola suelta */
@media (min-width:62rem){ .cm-otras ul{ grid-template-columns:repeat(6, minmax(0,1fr)) } .cm-otras li{ grid-column:span 2 }
  .cm-otras li:nth-child(4):nth-last-child(2),.cm-otras li:nth-child(5):last-child{ grid-column:span 3 } }
.cm-otras li a{ display:grid; grid-template-columns:3.4rem minmax(0,1fr); column-gap:.9rem; row-gap:.3rem; align-content:start; height:100%; padding:1.1rem;
  border-radius:16px; color:var(--papel); text-decoration:none; background:rgba(244,242,238,.035); box-shadow:inset 0 0 0 1px rgba(216,203,179,.14);
  transition:background-color .25s ease, box-shadow .25s ease }
.cm-otras li a > *{ grid-column:2 }
.cm-otras__foto{ grid-column:1 !important; grid-row:1 / span 2; position:relative; width:3.4rem; aspect-ratio:1; border-radius:50%; box-shadow:0 0 0 2px var(--c); transition:box-shadow .3s ease }
.cm-otras__foto picture{ display:block; height:100%; border-radius:50%; overflow:hidden }
.cm-otras__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block }
.cm-otras__ico{ position:absolute; right:-.3rem; bottom:-.3rem; width:1.4rem; height:1.4rem; border-radius:50%; display:grid; place-items:center; background:var(--c); color:var(--tinta); box-shadow:0 0 0 2px var(--noche-hondo) }
.cm-otras__ico svg{ width:.82rem; height:.82rem }
.cm-otras li b{ align-self:end; font-family:var(--sans); font-size:1.08rem; font-weight:650 }
.cm-otras__hilo{ align-self:start; display:flex; align-items:center; gap:.5rem; font-family:var(--lee); font-size:.95rem; line-height:1.35; color:var(--papel) }
.cm-otras__hilo i{ font-style:italic }
.cm-otras__f{ grid-column:1 / -1 !important; display:grid; gap:.15rem; margin-top:.5rem; padding-top:.6rem; border-top:1px solid rgba(216,203,179,.14);
  font-size:.84rem; line-height:1.45; color:var(--suave-claro) }
.cm-otras li a:hover{ background:rgba(244,242,238,.06); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent) }
.cm-otras li a:hover b{ text-decoration:underline; text-decoration-color:var(--c); text-underline-offset:.2em; text-decoration-thickness:2px }
.cm-otras li a:hover .cm-otras__foto{ box-shadow:0 0 0 2px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 25%, transparent) }
.cm-otras li a:focus-visible{ outline:3px solid var(--piedra); outline-offset:3px }
.cm-otras__fin{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e-sm) var(--e-lg); margin:var(--e-xl) 0 0; padding-top:var(--e-lg);
  border-top:1px solid rgba(216,203,179,.14); font-family:var(--lee); font-size:1.08rem; color:var(--papel) }

/* ---------- Hub: puente, cierre y «Siguiente» ---------- */
.cm-puente{ margin:clamp(1.8rem,3.5vw,2.6rem) 0 0; font-family:var(--lee); font-size:1.06rem; color:var(--tinta-2) }
.cm-cierre{ padding-bottom:var(--banda) }
.cm-cierre__rej{ display:grid; gap:var(--e-md); align-items:end }
.cm-cierre .cm-cab{ margin:0 }
.cm-cierre .cm-cab .h2{ font-size:clamp(1.9rem,1.3rem + 2vw,3rem); line-height:1.06; letter-spacing:-.02em }
@media (min-width:62rem){ .cm-cierre__rej{ grid-template-columns:minmax(0,1fr) auto } }
.cm-sig{ margin-top:clamp(2.5rem,5vw,3.5rem) }
.cm-sig__a{ position:relative; isolation:isolate; overflow:hidden; display:grid; align-content:end; gap:.25rem; min-height:clamp(12rem,22vw,16rem); padding:clamp(1.4rem,3vw,2.4rem);
  border-radius:18px; color:var(--papel); text-decoration:none; background:var(--noche) }
.cm-sig__foto{ position:absolute; inset:0; z-index:-1 }
.cm-sig__foto picture{ display:block; height:100% }
.cm-sig__foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; display:block; transition:transform .9s var(--curva) }
.cm-sig__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,26,47,.9) 0, rgba(10,26,47,.55) 50%, rgba(10,26,47,.2) 100%) }
.cm-sig__k{ font-family:var(--sans); font-size:.84rem; font-weight:650; color:var(--sol-2) }
.cm-sig__q{ font-family:var(--sans); font-size:clamp(1.7rem,1.2rem + 2vw,2.9rem); line-height:1.05; letter-spacing:-.02em; font-weight:650; text-wrap:balance }
.cm-sig__p{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-size:1.05rem; font-weight:600 }
.cm-sig__a:hover .cm-sig__foto img{ transform:scale(1.03) }
.cm-sig__a:focus-visible{ outline:3px solid var(--petroleo); outline-offset:4px }

@media (prefers-reduced-motion:reduce){
  .cm-fb__p::after,.cm-fb__nudo,.cm-hp__foto img,.cm-rh__rail a,.cm-sig__foto img,.cm-her__b,.cm-otras li a,.cm-dis summary::after{ transition:none !important }
  .cm-hp__a:hover .cm-hp__foto img,.cm-sig__a:hover .cm-sig__foto img,.cm-rh__rail a:hover{ transform:none }
}