/* v28 · Plantilla de comunidad y /comunidades/ (agente COMUNIDADES). Reemplaza a v26-comunidad.css.
   --cm: acento de la comunidad (lo fija <main class="cm" style="--cm:…">).
   Sin barras ni rayitas laterales: el énfasis viene de la tipografía, el espacio, la foto o un dibujo propio.
   Los acentos son claros (pasteles): sobre papel se usa --cm-hondo, mezclado con tinta, para texto y trazos finos. */
.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 } }

/* ---------- 2 · Quiénes la forman: composición de cifras, cada una del tamaño de su peso ---------- */
.cm-q__lista{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--e-xl) var(--e-xl) }
.cm-q{ --t:.5; flex:1 1 calc(12rem + var(--t) * 18rem); max-width:100%; display:grid; align-content:end; gap:.45rem; min-width:0 }
.cm-q > *{ margin:0 }
.cm-q__cifra{ display:block; font-family:var(--lee); font-weight:400; line-height:.92; letter-spacing:-.035em; color:var(--tinta);
  font-size:calc(2.4rem + var(--t) * clamp(1.4rem, -.4rem + 6.4vw, 5.6rem)); font-variant-numeric:lining-nums tabular-nums; overflow-wrap:anywhere }
.cm-q__num{ display:inline-block }
.cm-q__n{ font-size:calc(1rem + var(--t) * .3rem); line-height:1.3; font-weight:650; color:var(--cm-hondo); max-width:24ch; padding-top:.35rem }
.cm-q__d{ color:var(--tinta-2); font-size:var(--t-nota); line-height:1.55; max-width:40ch; text-wrap:pretty }
/* Las que no tienen número: texto, en columnas */
.cm-q__mas{ margin-top:clamp(2.5rem,5vw,4rem); display:grid; gap:var(--e-sm) }
.cm-q__k{ margin:0; font-family:var(--sans); font-size:.9rem; font-weight:650; color:var(--mudo) }
.cm-q__otros{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-md) var(--e-xl) }
@media (min-width:44rem){ .cm-q__otros{ grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)) } }
.cm-q--sin{ flex:none; align-content:start; gap:.3rem }
.cm-q--sin .cm-q__n{ font-size:1.08rem; color:var(--tinta); padding:0 }
/* 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) }

/* ---------- 3 · Lo que hacemos juntos: recorrido con trazo (una secuencia real: 1 a 4) ---------- */
.cm-f__rec{ position:relative; --g:var(--e-lg) }
.cm-f__lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-xl); position:relative; z-index:1 }
.cm-f__trazo{ display:none }
.cm-f{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:1rem; row-gap:.5rem; align-content:start; min-width:0 }
.cm-f > *{ margin:0; grid-column:2 }
.cm-f__n{ grid-column:1; grid-row:1 / span 2; width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center;
  font-family:var(--lee); font-size:1.25rem; color:var(--tinta); background:var(--cm); border:1px solid var(--cm);
  transition:background-color .45s ease, color .45s ease, border-color .45s ease; transition-delay:calc(var(--k) * .45s + .15s) }
.cm-f__v{ font-family:var(--lee); font-style:italic; font-size:1.05rem; color:var(--cm); align-self:center }
.cm-f__t{ font-size:1.22rem; line-height:1.25; font-weight:650; color:var(--papel) }
.cm-f__d{ color:#DCE3E6; font-size:var(--t-nota); line-height:1.6; max-width:38ch }
.cm-f__v,.cm-f__t,.cm-f__d,.cm-f__ir{ transition:opacity .6s ease, transform .6s var(--curva); transition-delay:calc(var(--k) * .45s + .2s) }
.cm-f__ir{ font-family:var(--sans); font-size:.84rem; color:var(--suave-claro); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--cm) 55%, transparent);
  text-underline-offset:.22em; justify-self:start; display:inline-flex; align-items:center; min-height:2rem; margin-top:.2rem }
.cm-f__ir:hover{ color:var(--papel) }
.cm-f:hover .cm-f__n{ background:var(--papel); border-color:var(--papel); transition-delay:0s }
.cm-f__rec--espera .cm-f__n{ background:var(--noche); color:var(--suave); border-color:var(--filete-oscuro) }
.cm-f__rec--espera :is(.cm-f__v,.cm-f__t,.cm-f__d,.cm-f__ir){ opacity:0; transform:translateY(8px) }
@media (min-width:62rem){
  .cm-f__lista{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--g) }
  .cm-f{ display:grid; grid-template-columns:minmax(0,1fr); padding-top:3.9rem }
  .cm-f > *{ grid-column:1 }
  /* grid-row/column en auto: si no, el contenedor del absoluto es el área de la rejilla (bajo el padding) */
  .cm-f__n{ grid-column:auto; grid-row:auto; position:absolute; left:0; top:0; box-shadow:0 0 0 6px var(--noche) }
  .cm-f__trazo{ display:block; position:absolute; left:1.3rem; top:1.3rem; height:1px; right:calc(25% - var(--g) * .75 - 1.3rem); background:var(--filete-oscuro) }
  .cm-f__trazo i{ position:absolute; inset:0; background:var(--cm); transform-origin:left; transition:transform 1.9s cubic-bezier(.45,.05,.3,1) }
  .cm-f__rec--espera .cm-f__trazo i{ transform:scaleX(0) }
}

/* ---------- 4 · Iniciativas: glifos de estado, pantallas de las plataformas y filas de texto ---------- */
.cm-fil{ margin:0 0 var(--e-xl); display:grid; gap:.7rem; max-width:52rem }
.cm-fil__k{ margin:0; font-family:var(--sans); font-size:.86rem; color:var(--mudo) }
.cm-fil__barra{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:stretch }
.cm-fil__s{ flex:var(--n) 1 6rem; display:grid; gap:.5rem; align-content:start; padding:.25rem 0 .5rem; border:0; background:none; cursor:pointer;
  font:inherit; text-align:left; color:var(--tinta-2); border-radius:6px; transition:opacity .25s ease }
.cm-fil__b{ display:block; height:.7rem; border-radius:3px; background:var(--petroleo); transition:transform .3s var(--curva), box-shadow .25s ease; transform-origin:left }
.cm-fil__s--piloto .cm-fil__b{ background:color-mix(in srgb, var(--petroleo) 55%, var(--blanco)) }
.cm-fil__s--entregado .cm-fil__b{ background:var(--petroleo-hondo) }
.cm-fil__s--diseno .cm-fil__b{ background:transparent; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--petroleo) 70%, transparent) }
.cm-fil__t{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--sans); font-size:.86rem; line-height:1.3 }
.cm-fil__g{ display:inline-grid; width:1rem; height:1rem; color:var(--petroleo) }
.cm-fil__g svg{ width:100%; height:100% }
.cm-fil__t b{ font-weight:650; color:var(--tinta) }
.cm-fil__s:hover .cm-fil__b{ transform:scaleY(1.35) }
.cm-fil__s:focus-visible{ outline:3px solid var(--petroleo); outline-offset:3px }
.cm-fil[data-filtro]:not([data-filtro=""]) .cm-fil__s[aria-pressed="false"]{ opacity:.42 }
.cm-fil__s[aria-pressed="true"] .cm-fil__t{ color:var(--tinta); text-decoration:underline; text-decoration-color:var(--cm-hondo); text-underline-offset:.25em; text-decoration-thickness:2px }
.cm-fil__todas{ align-self:start; flex:0 0 auto; margin-left:var(--e-sm); min-height:2.25rem; padding:0 .9rem; border-radius:99px; border:1px solid var(--filete-firme);
  background:none; font:inherit; font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--tinta); cursor:pointer; transition:background-color .2s ease, opacity .2s ease }
.cm-fil__todas:hover{ background:var(--papel) }
.cm-fil__todas[aria-pressed="true"]{ opacity:.5 }

.cm-est__rej{ display:grid; gap:clamp(2.5rem,5vw,4rem) }
.cm-est{ display:grid; gap:var(--e-md) }
.cm-est[hidden]{ display:none }
.cm-est--entra{ animation:cm-aparece .4s var(--curva) both }
.cm-est__k{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .75rem; font-family:var(--sans) }
.cm-est__m{ display:inline-grid; width:2rem; height:2rem; color:var(--petroleo) }
.cm-est__m svg{ width:100%; height:100% }
.cm-est__k b{ font-size:clamp(1.25rem,1.1rem + .5vw,1.6rem); font-weight:650; letter-spacing:-.01em; color:var(--tinta) }
.cm-est__k > span:last-child{ font-size:.88rem; line-height:1.45; color:var(--mudo) }
.cm-i__lista{ list-style:none; margin:0; padding:0; display:grid; column-gap:var(--e-xl) }
@media (min-width:48rem){ .cm-i__lista{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.cm-i{ display:grid; align-content:start; gap:.45rem; padding:1.3rem 0 1.5rem; border-top:1px solid var(--filete) }
.cm-i > *{ margin:0 }
.cm-i__n{ font-size:1.18rem; line-height:1.25; font-weight:650 }
.cm-i__d{ color:var(--tinta-2); font-size:var(--t-nota); line-height:1.55; max-width:46ch }
.cm-i .liga{ justify-self:start; font-size:.92rem; margin-top:.15rem }
.cm-est--diseno .cm-i__n{ color:var(--tinta-2) }
/* Con pantalla: ocupa el ancho, la captura a un lado y el texto al otro (alternando) */
.cm-i--cap{ grid-column:1 / -1; border-top:0; padding:0 0 var(--e-lg); gap:var(--e-md) }
.cm-i--cap .cm-i__txt{ display:grid; align-content:center; gap:.55rem }
.cm-i--cap .cm-i__txt > *{ margin:0 }
.cm-i--cap .cm-i__n{ font-size:var(--t-titular); line-height:1.1; letter-spacing:-.01em }
.cm-i--cap .cm-i__d{ font-size:var(--t-cuerpo); max-width:40ch }
@media (min-width:48rem){
  .cm-i--cap{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:var(--e-2xl); align-items:center; padding-bottom:var(--e-xl) }
  .cm-i--cap.cm-i--al{ grid-template-columns:minmax(0,5fr) minmax(0,7fr) }
  .cm-i--cap.cm-i--al .cm-cap{ order:2 }
}

/* Pantalla de una plataforma: ventana con su dirección y, encima, el celular */
.cm-i--cap > *{ min-width:0 }
.cm-cap{ position:relative; margin:0; min-width:0; max-width:100%; border-radius:12px; background:var(--noche); box-shadow:0 0 0 1px var(--filete), 0 24px 48px -30px rgba(10,26,47,.55) }
.cm-cap__barra{ display:block; line-height:1.9rem; height:1.9rem; padding:0 .85rem; min-width:0; max-width:100%; border-radius:12px 12px 0 0; font-family:var(--sans); font-size:.72rem;
  color:var(--suave-claro); background:var(--noche-hondo); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cm-cap__pc{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:0 0 12px 12px }
.cm-cap__movil{ position:absolute; right:-.9rem; bottom:-1.4rem; width:21%; max-width:7.5rem; height:auto; aspect-ratio:520/1125; object-fit:cover; object-position:top;
  border-radius:12px; box-shadow:0 0 0 4px var(--noche), 0 18px 30px -16px rgba(10,26,47,.7); transition:transform .45s var(--curva) }
.cm-i--cap:hover .cm-cap__movil,.cm-i--cap:focus-within .cm-cap__movil{ transform:translateY(-.6rem) rotate(-2deg) }
.cm-i--al .cm-cap__movil{ right:auto; left:-.9rem }
@media (max-width:30rem){ .cm-cap__movil{ right:-.3rem } .cm-i--al .cm-cap__movil{ left:-.3rem } }

/* ---------- 6 · Con quién se conecta: hilos que se dibujan ---------- */
.cm-con__rej{ display:grid; gap:var(--e-lg) }
@media (min-width:62rem){ .cm-con__rej{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--e-2xl) } }
.cm-red{ --sel:var(--cm); display:grid; gap:var(--e-lg); align-items:center }
@media (min-width:48rem){ .cm-red{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) } }
.cm-red__lado{ display:grid; gap:var(--e-md); min-width:0 }
.cm-red__dibujo{ position:relative; width:100%; max-width:32rem; aspect-ratio:1; margin-inline:auto }
.cm-red__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.cm-red__anillo{ fill:none; stroke:var(--filete); stroke-width:1 }
.cm-red__l,.cm-red__f{ fill:none; stroke-linecap:round }
.cm-red__l{ stroke-width:1.4; transition:opacity .3s ease, stroke-width .3s ease }
.cm-red__l--c{ stroke:color-mix(in oklab, var(--c) 60%, var(--tinta)); opacity:.55 }
.cm-red__l--m{ stroke:var(--filete-firme); opacity:.5 }
.cm-red[data-sel] .cm-red__l{ opacity:.16 }
.cm-red .cm-red__l.on{ opacity:1; stroke-width:2.6; stroke-dasharray:100; stroke-dashoffset:0; animation:cm-traza .8s var(--curva) both; animation-delay:calc(var(--i, 0) * 110ms) }
.cm-red .cm-red__l--m.on{ stroke:color-mix(in oklab, var(--sel) 62%, var(--tinta)) }
.cm-red[data-par] .cm-red__l.on{ opacity:.35 }
.cm-red[data-par] .cm-red__l.on.par{ opacity:1; stroke-width:4 }
@keyframes cm-traza{ from{ stroke-dashoffset:100 } to{ stroke-dashoffset:0 } }
.cm-red__f{ stroke:var(--blanco); stroke-width:1.6; stroke-dasharray:12 88; stroke-dashoffset:12; opacity:0; pointer-events:none }
.cm-red__f.on{ animation:cm-fluye 1.6s cubic-bezier(.45,0,.55,1) 2 both; animation-delay:calc(var(--i, 0) * 110ms + .7s) }
@keyframes cm-fluye{ 0%{ opacity:0; stroke-dashoffset:12 } 12%,80%{ opacity:.85 } 100%{ opacity:0; stroke-dashoffset:-88 } }
.cm-red__centro{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:31%; aspect-ratio:1; border-radius:50%;
  display:grid; place-content:center; justify-items:center; gap:.2rem; text-align:center; padding:.6rem;
  background:var(--noche); color:var(--papel); box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 30%, transparent), 0 18px 40px -18px rgba(10,26,47,.55) }
.cm-red__centro .cm-red__ico{ width:1.7rem; height:1.7rem; color:var(--c) }
.cm-red__centro b{ font-family:var(--sans); font-size:clamp(.82rem,.7rem + .5vw,1.05rem); line-height:1.2; font-weight:650 }
.cm-red__centro small{ font-family:var(--lee); font-style:italic; font-size:.8rem; color:var(--suave-claro) }
.cm-red__nodos{ list-style:none; margin:0; padding:0 }
.cm-red__nodo{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); display:grid; justify-items:center; gap:.35rem;
  width:7.4rem; padding:.3rem; border:0; background:none; cursor:pointer; font:inherit; color:var(--tinta); border-radius:12px }
.cm-red__nodo .cm-red__ico{ width:3.2rem; height:3.2rem; border-radius:50%; display:grid; place-items:center; background:var(--blanco);
  color:color-mix(in oklab, var(--c) 55%, var(--tinta)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 75%, transparent), 0 6px 18px -10px rgba(10,26,47,.4);
  transition:background-color .25s ease, box-shadow .3s ease, transform .3s var(--curva) }
.cm-red__nodo .cm-red__ico svg{ width:1.45rem; height:1.45rem }
.cm-red__nom{ font-family:var(--sans); font-size:.86rem; font-weight:650; line-height:1.2; text-align:center; transition:color .2s ease;
  padding:.1rem .45rem; border-radius:6px; background:color-mix(in srgb, var(--niebla) 88%, transparent) }
.cm-red__nodo:hover .cm-red__ico{ transform:scale(1.07) }
.cm-red__nodo[aria-pressed="true"] .cm-red__ico{ background:var(--c); color:var(--tinta); transform:scale(1.1);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 32%, transparent), 0 10px 24px -12px rgba(10,26,47,.5) }
.cm-red__nodo:focus-visible{ outline:3px solid var(--petroleo); outline-offset:2px }
.cm-red__panel{ display:grid; gap:var(--e-md); min-width:0 }
.cm-red__ficha{ display:grid; gap:.6rem; padding:.2rem 0 1rem }
.cm-red__ficha > *{ margin:0 }
.cm-red__t{ display:flex; align-items:center; gap:.7rem; font-size:1.3rem; line-height:1.2; font-weight:650 }
.cm-red__t .cm-red__ico{ flex:0 0 auto; width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; color:var(--tinta); background:var(--c) }
.cm-red__t .cm-red__ico svg{ width:1.25rem; height:1.25rem }
.cm-red__ficha p{ color:var(--tinta-2); line-height:1.6; max-width:46ch }
.cm-red__ficha .liga{ justify-self:start }
.cm-red__k{ font-family:var(--sans); font-size:.82rem; font-weight:650; color:var(--mudo) }
.cm-red__con{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem }
.cm-red__con li{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.75rem; row-gap:.1rem; padding:.55rem .6rem; border-radius:12px; transition:background-color .2s ease }
.cm-red__ci{ grid-row:span 2; width:1.9rem; height:1.9rem; border-radius:50%; display:grid; place-items:center; color:color-mix(in oklab, var(--c) 50%, var(--tinta));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 80%, transparent) }
.cm-red__ci svg{ width:1rem; height:1rem }
.cm-red__con li:hover,.cm-red__con li:focus-within{ background:color-mix(in srgb, var(--c) 16%, transparent) }
.cm-red__con li:hover .cm-red__ci,.cm-red__con li:focus-within .cm-red__ci{ background:var(--c); color:var(--tinta) }
.cm-red__con a{ font-family:var(--sans); font-weight:600; font-size:.95rem; color:var(--tinta); text-decoration:underline; text-decoration-color:var(--filete-firme); text-underline-offset:.2em; justify-self:start }
.cm-red__con span:not(.cm-red__ci){ grid-column:2; font-size:.9rem; line-height:1.5; color:var(--tinta-2) }
.cm-red--vivo .cm-red__ficha{ display:none }
.cm-red--vivo .cm-red__ficha.on{ display:grid; animation:cm-aparece .45s var(--curva) both }
@keyframes cm-aparece{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@media (max-width:30rem){
  .cm-red__nodo{ width:5.6rem }
  .cm-red__nodo .cm-red__ico{ width:2.6rem; height:2.6rem }
  .cm-red__nom{ font-size:.78rem }
  .cm-red__centro{ width:38% }
}
/* Recorrido (solo en /comunidades/) */
.cm-red__mando{ display:flex; align-items:center; justify-content:center; gap:.9rem; flex-wrap:wrap }
.cm-red__mando[hidden]{ display:none }
.cm-red__play{ display:inline-flex; align-items:center; gap:.6rem; min-height:2.75rem; padding:0 1.15rem 0 .5rem; border-radius:99px; cursor:pointer;
  border:1px solid var(--filete-firme); background:var(--blanco); font:inherit; font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--tinta);
  transition:background-color .2s ease, border-color .2s ease }
.cm-red__play:hover{ border-color:var(--tinta) }
.cm-red__play:focus-visible{ outline:3px solid var(--petroleo); outline-offset:3px }
.cm-red__play-i{ width:1.9rem; height:1.9rem; border-radius:50%; display:grid; place-items:center; background:var(--noche); color:var(--papel) }
.cm-red__play-i svg{ width:.7rem; height:.7rem; grid-area:1/1 }
.cm-red__play .i-pausa,.cm-red__play[aria-pressed="true"] .i-play{ display:none }
.cm-red__play[aria-pressed="true"] .i-pausa{ display:block }
.cm-red__paso{ margin:0; font-family:var(--sans); font-size:.84rem; color:var(--mudo); font-variant-numeric:tabular-nums }
.cm-red__paso b{ color:var(--tinta); font-weight:650 }
.cm-red__barra{ width:5rem; height:2px; background:var(--filete); border-radius:2px; overflow:hidden }
.cm-red__barra i{ display:block; height:100%; background:var(--sel); transform:scaleX(0); transform-origin:left }
.cm-red__mando.corre .cm-red__barra i{ animation:cm-barra 6s linear both }
@keyframes cm-barra{ to{ transform:none } }
/* Diagrama grande de /comunidades/ */
.cm-con--hub{ padding-block:clamp(5rem,9vw,8.5rem) }
.cm-con__cab{ display:grid; gap:var(--e-md); margin-bottom:clamp(2rem,4vw,3.5rem) }
.cm-con__cab > div{ display:grid; gap:var(--e-sm) }
.cm-con__cab p,.cm-con__cab h2{ margin:0 }
.cm-con__cab .h2{ font-size:var(--t-monumento); max-width:16ch; text-wrap:balance }
@media (min-width:62rem){ .cm-con__cab{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e-2xl); align-items:end } }
.cm-red--malla{ gap:var(--e-xl) }
@media (min-width:62rem){ .cm-red--malla{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--e-2xl) } }
.cm-red--malla .cm-red__dibujo{ max-width:40rem }
.cm-red--malla .cm-red__nodo{ width:8.6rem }
.cm-red--malla .cm-red__nodo .cm-red__ico{ width:4rem; height:4rem }
.cm-red--malla .cm-red__nodo .cm-red__ico svg{ width:1.7rem; height:1.7rem }
.cm-red--malla .cm-red__nom{ font-size:.95rem }
.cm-red--malla .cm-red__centro{ width:30% }
.cm-red--malla .cm-red__centro b{ font-size:clamp(.82rem,.7rem + .5vw,1.1rem) }
.cm-red--malla .cm-red__panel{ align-self:start }
.cm-red--malla .cm-red__ficha{ gap:.8rem }
.cm-red--malla .cm-red__t{ font-size:var(--t-titular); letter-spacing:-.01em }
.cm-red--malla .cm-red__t .cm-red__ico{ width:3rem; height:3rem }
.cm-red--malla .cm-red__t .cm-red__ico svg{ width:1.5rem; height:1.5rem }
.cm-red--malla .cm-red__txt{ font-family:var(--lee); font-style:italic; font-size:1.12rem; color:var(--tinta) }
@media (max-width:30rem){
  .cm-red--malla .cm-red__nodo{ width:5.4rem }
  .cm-red--malla .cm-red__nodo .cm-red__ico{ width:2.9rem; height:2.9rem }
  .cm-red--malla .cm-red__nodo .cm-red__ico svg{ width:1.3rem; height:1.3rem }
  .cm-red--malla .cm-red__nom{ font-size:.78rem }
  .cm-red--malla .cm-red__centro{ width:34% }
  .cm-red--malla .cm-red__centro b{ font-size:.74rem }
  .cm-red--malla .cm-red__centro .cm-red__ico{ width:1.2rem; height:1.2rem }
}

/* ---------- 7 · Datos ---------- */
.cm-datos__rej{ display:grid; gap:var(--e-lg) }
@media (min-width:62rem){ .cm-datos__rej{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--e-2xl); align-items:center } }
.cm-datos .cm-cab{ margin:0 }
.cm-datos__lista{ list-style:none; margin:0; padding:0; border-top:1px solid var(--filete-oscuro) }
.cm-datos__lista a{ display:flex; justify-content:flex-start; align-items:center; gap:var(--e-md); padding:1.15rem 0; border-bottom:1px solid var(--filete-oscuro);
  color:var(--papel); text-decoration:none; font-size:1.05rem; line-height:1.45 }
.cm-datos__lista a span{ text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--cm) 55%, transparent); text-underline-offset:.22em }
.cm-datos__lista a:hover span{ text-decoration-color:var(--cm) }

/* ---------- 8 · Historias: la primera, con foto grande ---------- */
.cm-h__lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-xl) var(--e-lg) }
@media (min-width:52rem){ .cm-h__lista:not(.cm-h__lista--1){ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.cm-h--mayor{ grid-column:1 / -1 }
.cm-h a{ display:grid; gap:var(--e-sm); color:inherit; text-decoration:none; align-content:start }
.cm-h__foto{ display:block; overflow:hidden; border-radius:14px; aspect-ratio:4/3; background:var(--piedra) }
.cm-h__foto picture{ display:block; height:100% }
.cm-h__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 32%); transition:transform 1s var(--curva) }
.cm-h a:hover .cm-h__foto img{ transform:scale(1.04) }
.cm-h__txt{ display:grid; gap:.4rem; align-content:start }
.cm-h__t{ font-family:var(--sans); font-size:1.3rem; line-height:1.25; font-weight:650; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.18em; transition:text-decoration-color .25s ease }
.cm-h a:hover .cm-h__t{ text-decoration-color:var(--cm-hondo) }
.cm-h__d{ color:var(--tinta-2); font-size:var(--t-nota); line-height:1.6; max-width:52ch }
.cm-h__ir{ justify-self:start; font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--tinta); margin-top:.3rem;
  text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--cm-hondo) 50%, transparent); text-underline-offset:.22em; transition:text-decoration-color .25s ease }
.cm-h a:hover .cm-h__ir{ text-decoration-color:var(--cm-hondo) }
.cm-h--mayor .cm-h__foto{ aspect-ratio:4/3; border-radius:18px }
.cm-h--mayor .cm-h__t{ font-size:var(--t-titular); line-height:1.12; letter-spacing:-.01em }
.cm-h--mayor .cm-h__d{ font-size:var(--t-cuerpo) }
.cm-h--sin a{ padding-top:var(--e-sm); border-top:1px solid var(--filete-firme) }
@media (min-width:52rem){
  /* 16:9 y encuadre alto: en 21:9 se cortaban cabezas y letreros */
  .cm-h--mayor .cm-h__foto{ aspect-ratio:16/9 }
  .cm-h--mayor .cm-h__txt{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--e-2xl); padding-top:var(--e-sm) }
  .cm-h--mayor .cm-h__t{ grid-row:span 2 }
  .cm-h__lista--mayor .cm-h:not(.cm-h--mayor) a{ grid-template-columns:minmax(0,12rem) minmax(0,1fr); gap:var(--e-md); align-items:start }
  .cm-h__lista--mayor .cm-h:not(.cm-h--mayor) .cm-h__foto{ aspect-ratio:4/3 }
  .cm-h__lista--mayor .cm-h--sin:not(.cm-h--mayor) a{ grid-template-columns:1fr }
}
.cm-hist__mas{ margin:var(--e-xl) 0 0 }

/* ---------- Preguntas ---------- */
.cm-faq__rej{ display:grid; gap:var(--e-lg) }
@media (min-width:62rem){ .cm-faq__rej{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--e-2xl) } }
.cm-p__lista{ border-top:1px solid var(--filete-firme) }
.cm-p{ border-bottom:1px solid var(--filete) }
.cm-p summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:var(--e-md); align-items:center; min-height:3.5rem; padding:1rem 0;
  font-family:var(--sans); font-size:1.05rem; font-weight:600; line-height:1.4; color:var(--tinta) }
.cm-p summary::-webkit-details-marker{ display:none }
.cm-p summary::after{ content:""; flex:0 0 auto; width:.6rem; height:.6rem; border-right:1.6px solid var(--cm-hondo); border-bottom:1.6px solid var(--cm-hondo); transform:rotate(45deg) translateY(-2px); transition:transform .25s }
.cm-p[open] summary::after{ transform:rotate(-135deg) translateY(-2px) }
.cm-p__r{ padding:0 0 1.2rem }
.cm-p__r p{ margin:0; color:var(--tinta-2); line-height:1.65; max-width:60ch }

/* ---------- 9 · Participar: cierre con la foto de la apertura ---------- */
.cm-part{ position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(5rem,9vw,8rem) }
.cm-part__foto{ position:absolute; z-index:-1; top:0; right:0; bottom:0; width:48%; opacity:.62;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 55%); mask-image:linear-gradient(to right, transparent 0, #000 55%) }
.cm-part__foto picture{ display:block; height:100% }
.cm-part__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%) }
.cm-part__rej{ display:grid; gap:var(--e-xl); max-width:none }
.cm-part__rej > *{ max-width:48rem }
.cm-part .cm-cab{ margin:0 }
.cm-part .h2{ font-size:var(--t-monumento); max-width:18ch }
.cm-v__lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-sm) }
@media (min-width:44rem){ .cm-v__lista--2{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.cm-v{ display:grid; align-content:start; gap:.6rem; padding:1.5rem 1.5rem 1.6rem; border-radius:16px;
  background:rgba(10,26,47,.78); box-shadow:inset 0 0 0 1px var(--filete-oscuro); transition:box-shadow .25s ease, transform .3s var(--curva) }
.cm-v:first-child{ background:color-mix(in srgb, var(--cm) 16%, var(--noche)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cm) 45%, transparent) }
.cm-v:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cm) 70%, transparent) }
.cm-v > *{ margin:0 }
.cm-v__t{ font-size:1.3rem; line-height:1.25; font-weight:650; color:var(--papel) }
.cm-v p{ color:#DCE3E6; line-height:1.6; max-width:40ch }
.cm-v .boton{ justify-self:start; margin-top:.5rem }
@media (max-width:61.99rem){
  .cm-part__foto{ width:100%; bottom:auto; height:16rem; opacity:.5;
    -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent); mask-image:linear-gradient(to bottom, #000 30%, transparent) }
  .cm-part{ padding-top:clamp(11rem,40vw,13rem) }
}

/* ---------- Las otras comunidades ---------- */
.cm-otras{ background:var(--noche-hondo); color:var(--papel); padding-block:clamp(2rem,4vw,3rem); border-top:1px solid rgba(216,203,179,.12); --foco:var(--piedra) }
.cm-otras__k{ margin:0 0 var(--e-md); display:flex; justify-content:space-between; gap:var(--e-md); font-family:var(--sans); font-size:.86rem; font-weight:650; color:var(--suave-claro) }
.cm-otras__k a{ color:var(--papel); font-weight:600; text-underline-offset:.22em }
.cm-otras ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-xs) }
@media (min-width:40rem){ .cm-otras ul{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:62rem){ .cm-otras ul{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--e-md) } }
.cm-otras ul a{ display:grid; grid-template-columns:auto 1fr; gap:.15rem .7rem; align-items:center; padding:.8rem 0; color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(216,203,179,.14) }
.cm-otras__ico{ grid-row:span 2; width:2.3rem; height:2.3rem; border-radius:50%; display:grid; place-items:center; color:var(--c); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent);
  transition:background-color .25s ease, color .25s ease }
.cm-otras__ico svg{ width:1.15rem; height:1.15rem }
.cm-otras b{ font-family:var(--sans); font-size:.98rem; font-weight:650 }
.cm-otras ul a span:last-child{ font-size:.82rem; line-height:1.4; color:var(--suave-claro) }
.cm-otras ul a:hover b{ text-decoration:underline; text-decoration-color:var(--c); text-underline-offset:.22em }
.cm-otras ul a:hover .cm-otras__ico{ background:var(--c); color:var(--tinta) }

/* ---------- Pieza propia: sin estilos impuestos ---------- */
.cm-pieza{ display:block }

/* =================================== /comunidades/ =================================== */
/* ---------- Apertura: los cinco nombres, cada uno con su ícono ---------- */
@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%) } }
.cm-ap__base--hub{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--e-sm); align-items:end }
.cm-ap__nombres{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--e-md) }
.cm-ap__nombres li{ animation:cm-nombre .8s var(--salida, var(--curva)) both; animation-delay:calc(1.05s + var(--k) * .2s) }
.cm-ap__nombres a{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.6rem; row-gap:.15rem; align-items:center; color:var(--papel); text-decoration:none; text-shadow:0 1px 3px rgba(6,17,31,.7) }
.cm-ap__ico{ width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; color:var(--c); background:rgba(6,17,31,.5);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent); transition:background-color .25s ease, color .25s ease }
.cm-ap__ico svg{ width:1.05rem; height:1.05rem }
.cm-ap__nom{ font-family:var(--sans); font-size:clamp(1rem,.9rem + .35vw,1.2rem); font-weight:650; letter-spacing:-.005em }
.cm-ap__resp{ grid-column:1 / -1; font-family:var(--lee); font-style:italic; font-size:.86rem; line-height:1.4; color:rgba(244,242,238,.82) }
.cm-ap__nombres a:hover .cm-ap__ico,.cm-ap__nombres a:focus-visible .cm-ap__ico{ background:var(--c); color:var(--tinta) }
.cm-ap__nombres a:hover .cm-ap__nom{ text-decoration:underline; text-decoration-color:var(--c); text-underline-offset:.22em; text-decoration-thickness:2px }
.cm-ap__nombres a:focus-visible{ outline:3px solid var(--piedra); outline-offset:4px; border-radius:4px }
@keyframes cm-nombre{ from{ opacity:0; clip-path:inset(0 100% 0 0); transform:translateX(-6px) } to{ opacity:1; clip-path:inset(0 0 0 0); transform:none } }
.cm-ap__base--hub .cm-ap__pie{ justify-self:end }
@media (max-width:61.99rem){ .cm-ap__nombres{ grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:var(--e-sm) } }
@media (max-width:40rem){
  .cm-ap__nombres{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:.9rem var(--e-sm) }
  .cm-ap__resp{ font-size:.8rem }
  .cm-ap__base--hub .cm-ap__pie{ justify-self:start }
}

/* ---------- La idea: dos capas que se superponen ---------- */
.cm-idea{ padding-block:clamp(5rem,10vw,9rem); overflow:hidden }
.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) }
.cm-capas{ --dur:.9s; margin-top:clamp(2.5rem,5vw,4rem) }
.cm-capas__mando{ display:inline-flex; padding:.3rem; gap:.25rem; border-radius:99px; background:color-mix(in srgb, var(--piedra) 38%, var(--papel)); margin-bottom:var(--e-lg) }
.cm-capas__mando[hidden]{ display:none }
.cm-capas__b{ min-height:2.75rem; padding:0 1.15rem; border:0; border-radius:99px; background:none; cursor:pointer; font:inherit; font-family:var(--sans); font-size:.92rem; font-weight:600;
  color:var(--tinta-2); transition:background-color .25s ease, color .25s ease, box-shadow .25s ease }
.cm-capas__b:hover{ color:var(--tinta) }
.cm-capas__b[aria-pressed="true"]{ background:var(--blanco); color:var(--tinta); box-shadow:0 4px 14px -8px rgba(10,26,47,.45) }
.cm-capas__b:focus-visible{ outline:3px solid var(--petroleo); outline-offset:2px }
.cm-capas__escena{ display:grid; gap:var(--e-xl); align-items:center }
@media (min-width:62rem){ .cm-capas__escena{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:var(--e-2xl) } }
.cm-capas__texto{ display:grid; gap:var(--e-md) }
.cm-capas__texto > p{ margin:0 }
.cm-capas__k{ position:relative; font-family:var(--sans); font-size:.95rem; font-weight:650; color:var(--petroleo); min-height:1.4em }
.cm-capas__k span{ transition:opacity .35s ease }
.cm-capas .k-siempre{ position:absolute; left:0; top:0; opacity:0; color:var(--mudo) }
.cm-capas__def{ font-family:var(--lee); font-size:clamp(1.45rem,1.05rem + 1.6vw,2.5rem); line-height:1.3; letter-spacing:-.01em; color:var(--tinta); text-wrap:pretty }
.cm-capas__uno{ transition:color var(--dur) ease }
.cm-capas__punto{ display:none }
.cm-capas__dos{ transition:opacity var(--dur) ease, filter var(--dur) ease }
.cm-capas__giro{ position:relative; display:inline-block; font-style:italic; font-weight:600; color:var(--petroleo) }
.cm-capas__trazo{ position:absolute; left:-2%; bottom:-.32em; width:104%; height:.5em; overflow:visible; pointer-events:none }
.cm-capas__trazo path{ fill:none; stroke:var(--sol); stroke-width:5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:0; vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 1s var(--curva) .45s }
.cm-capas__nota{ font-family:var(--lee); font-style:italic; font-size:1.05rem; line-height:1.6; color:var(--mudo); max-width:50ch }
/* Estado «la definición de siempre»: la segunda mitad queda en blanco, el dibujo en gris */
.cm-capas[data-capa="siempre"] .k-siempre{ opacity:1 }
.cm-capas[data-capa="siempre"] .k-conecta{ opacity:0 }
.cm-capas[data-capa="siempre"] .cm-capas__dos{ opacity:.13; filter:blur(1.5px) }
.cm-capas[data-capa="siempre"] .cm-capas__trazo path{ stroke-dashoffset:100; transition-delay:0s }
/* El dibujo */
.cm-capas__dib{ width:100%; height:auto; max-width:36rem; justify-self:center; overflow:visible }
.cm-capas__terr{ fill:color-mix(in srgb, var(--sol) 26%, var(--papel)); stroke:color-mix(in srgb, var(--sol) 70%, var(--tinta)); stroke-width:1.2; transition:fill var(--dur) ease, stroke var(--dur) ease }
.cm-capas__curva{ fill:none; stroke:color-mix(in srgb, var(--sol) 55%, transparent); stroke-width:1; transition:stroke var(--dur) ease }
.cm-capas__hilo{ fill:none; stroke:color-mix(in oklab, var(--petroleo) 75%, var(--sol)); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:0;
  transition:stroke-dashoffset 1.1s var(--curva); transition-delay:calc(.25s + var(--i) * .09s) }
.cm-capas__brote{ fill:none; stroke:var(--petroleo); stroke-width:1.6; stroke-linecap:round; transform:none; opacity:1;
  transition:transform .6s var(--curva), opacity .4s ease; transition-delay:calc(.8s + var(--i) * .07s) }
.cm-capas__brote .h{ fill:color-mix(in srgb, var(--petroleo) 70%, var(--sol)); stroke:none }
.cm-capas__nodo circle{ fill:var(--c); stroke:color-mix(in oklab, var(--c) 70%, var(--tinta)); stroke-width:1.5; transition:fill var(--dur) ease, stroke var(--dur) ease }
.cm-capas__nodo{ color:var(--tinta); transition:color var(--dur) ease }
.cm-capas[data-capa="siempre"] .cm-capas__terr{ fill:color-mix(in srgb, var(--piedra) 22%, var(--papel)); stroke:var(--filete-firme) }
.cm-capas[data-capa="siempre"] .cm-capas__curva{ stroke:var(--filete) }
.cm-capas[data-capa="siempre"] .cm-capas__hilo{ stroke-dashoffset:100; transition-delay:0s; transition-duration:.4s }
.cm-capas[data-capa="siempre"] .cm-capas__brote{ transform:scale(0); opacity:0; transition-delay:0s }
.cm-capas[data-capa="siempre"] .cm-capas__nodo circle{ fill:var(--blanco); stroke:var(--filete-firme) }
.cm-capas[data-capa="siempre"] .cm-capas__nodo{ color:var(--mudo) }

.cm-doble{ margin-top:clamp(3.5rem,7vw,6rem); padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--filete-firme) }
.cm-doble__k{ margin:0 0 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:var(--e-xl) }
@media (min-width:52rem){ .cm-doble__lista{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--e-2xl) } }
.cm-doble__lista li{ display:grid; gap:.6rem; align-content:start }
.cm-doble__dib{ width:7.5rem; height:auto; margin-bottom:.4rem; overflow:visible }
.cm-doble__dib .t{ fill:none; stroke:var(--petroleo); stroke-width:1.8; stroke-linecap:round }
.cm-doble__dib .n{ fill:var(--sol-2); stroke:var(--tinta); stroke-width:1.4 }
.cm-doble__dib .h{ fill:var(--petroleo) }
.cm-doble__lista b{ font-family:var(--lee); font-weight:400; font-size:clamp(1.4rem,1.15rem + .9vw,2rem); line-height:1.2; letter-spacing:-.01em; color:var(--tinta); text-wrap:balance }
.cm-doble__lista span{ color:var(--tinta-2); line-height:1.6; max-width:46ch }

/* ---------- Las cinco puertas: índice tipográfico con la foto entera al lado ---------- */
.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(--papel); text-decoration:none }
.cm-pt__foto{ grid-column:1 / -1; display:block; overflow:hidden; border-radius:14px; aspect-ratio:3/2; background:var(--noche-hondo); margin-bottom:.6rem }
.cm-pt__foto picture{ display:block; height:100% }
.cm-pt__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 45%) }
.cm-pt__ico{ width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center; color:var(--c);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent); transition:background-color .3s ease, color .3s ease }
.cm-pt__ico svg{ width:1.3rem; height:1.3rem }
.cm-pt__n{ font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem); line-height:1.05; font-weight:650; letter-spacing:-.02em }
.cm-pt__r,.cm-pt__q,.cm-pt__dir,.cm-pt__pronto{ grid-column:2 }
.cm-pt__r{ font-family:var(--lee); font-style:italic; font-size:1.08rem; line-height:1.4; color:#EEF1F2; max-width:34ch }
.cm-pt__q{ font-size:.9rem; line-height:1.5; color:var(--suave-claro); max-width:40ch }
.cm-pt__dir{ font-family:var(--sans); font-size:.78rem; color:rgba(244,242,238,.6) }
.cm-pt__pronto{ font-family:var(--sans); font-size:.74rem; color:rgba(244,242,238,.55) }
.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(--piedra); outline-offset:6px; border-radius:6px }
@media (min-width:64rem){
  /* La lista ocupa la mitad izquierda; la foto de la comunidad elegida se ve a la derecha, completa */
  .cm-pt__lista{ position:relative; gap:0; grid-template-columns:minmax(0,1fr); padding-right:calc(50% + var(--e-xl)); min-height:36rem }
  .cm-pt,.cm-pt a{ position:static }
  .cm-pt{ border-top:1px solid var(--filete-oscuro) }
  .cm-pt:last-child{ border-bottom:1px solid var(--filete-oscuro) }
  .cm-pt a{ grid-template-columns:3.2rem minmax(0,1fr); padding:1.15rem .5rem 1.15rem 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:18px;
    opacity:0; transform:scale(.985); transition:opacity .5s ease, transform .7s var(--curva); pointer-events:none }
  .cm-pt__r{ font-size:1.02rem }
  .cm-pt__q,.cm-pt__dir,.cm-pt__pronto{ max-height:0; opacity:0; overflow:hidden; transition:max-height .45s var(--curva), opacity .3s ease }
  /* Sin JS: la primera, o la que tiene el puntero o el foco */
  .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 }
  /* Con JS: la última elegida se queda */
  .cm-pt__lista--vivo .cm-pt.on .cm-pt__foto{ opacity:1; transform:none }
  .cm-pt.on a,.cm-pt__lista:not(.cm-pt__lista--vivo) .cm-pt:is(:hover,:focus-within) a{ padding-left:.6rem }
  .cm-pt.on :is(.cm-pt__q,.cm-pt__dir,.cm-pt__pronto){ max-height:5rem; opacity:1 }
  .cm-pt.on .cm-pt__ico{ background:var(--c); color:var(--tinta) }
  .cm-pt:not(.on) .cm-pt__n{ color:rgba(244,242,238,.78) }
}
.cm-cinco__dir{ margin:var(--e-xl) 0 0; max-width:60ch; font-family:var(--sans); font-size:.95rem; line-height:1.6; color:var(--suave-claro) }
.cm-cinco__dir a{ color:var(--papel); font-weight:600; text-decoration:underline; text-decoration-color:var(--sol); text-underline-offset:.22em }
.cm-cinco__dir a:hover{ text-decoration-thickness:2px }

/* ---------- Ecosistema: un mazo de pantallas; la que se elige pasa al frente ---------- */
.cm-eco{ overflow:hidden }
.cm-eco__rej{ display:grid; gap:var(--e-xl); align-items:center }
@media (min-width:62rem){ .cm-eco__rej{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--e-2xl) } }
.cm-eco .cm-cab{ margin-bottom:var(--e-lg) }
.cm-eco__lista{ list-style:none; margin:0; padding:0; border-top:1px solid var(--filete-oscuro) }
.cm-eco__lista a{ display:grid; gap:.15rem; padding:.85rem .2rem; border-bottom:1px solid var(--filete-oscuro); color:var(--papel); text-decoration:none; transition:padding .3s var(--curva), background-color .25s ease }
.cm-eco__lista b{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--sans); font-size:1.12rem; font-weight:650 }
.cm-eco__lista span{ font-family:var(--lee); font-style:italic; font-size:.92rem; color:var(--suave-claro) }
.cm-eco__lista li.on a,.cm-eco__lista a:hover,.cm-eco__lista a:focus-visible{ padding-left:.7rem; background:color-mix(in srgb, var(--c) 10%, transparent) }
.cm-eco__lista li.on b,.cm-eco__lista a:hover b{ color:var(--c) }
.cm-eco__ir{ margin:var(--e-lg) 0 0 }
.cm-mazo{ position:relative; aspect-ratio:16/12; width:100%; max-width:42rem; justify-self:center }
.cm-mazo__c{ --o:0; position:absolute; left:0; top:0; width:84%; z-index:calc(10 - var(--o));
  transform:translate(calc(var(--o) * 4%), calc(var(--o) * 5.2%)) scale(calc(1 - var(--o) * .045)); transform-origin:top left;
  opacity:calc(1 - var(--o) * .14); transition:transform .6s var(--curva), opacity .45s ease; box-shadow:0 0 0 1px rgba(216,203,179,.18), 0 30px 50px -30px rgba(0,0,0,.8) }
.cm-mazo__c .cm-cap__barra{ background:color-mix(in srgb, var(--c) 22%, var(--noche-hondo)); color:var(--papel) }

/* ---------- Observatorio ---------- */
.cm-obs__rej{ display:grid; gap:var(--e-md); align-items:end }
@media (min-width:62rem){ .cm-obs__rej{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--e-2xl) } }
.cm-obs .cm-cab{ margin:0 }
.cm-obs .antetitulo{ color:var(--ac-lab) }
.cm-obs .h2{ font-size:var(--t-monumento) }
.cm-obs__txt{ display:grid; gap:var(--e-md) }
.cm-obs__txt p{ margin:0; color:#DCE3E6; line-height:1.6; font-size:var(--t-lede); max-width:48ch }
.cm-obs__txt .acciones{ align-items:center; gap:var(--e-md) }
.cm-obs__dir{ font-family:var(--sans); font-size:.82rem; color:var(--suave-claro) }
.cm-obs__dir b{ font-weight:600; color:var(--papel) }

/* Cierre */
.cm-cierre .qcab{ margin-bottom:var(--e-lg) }
.cm-cierre__acc{ justify-content:center; align-items:center; gap:var(--e-md) }

/* ---------- Movimiento reducido: todo en su estado final ---------- */
@media (prefers-reduced-motion:reduce){
  .cm-ap__nombres li{ animation:none }
  .cm-indice__marca,.cm-indice__k,.cm-f__trazo i,.cm-f__n,.cm-f__v,.cm-f__t,.cm-f__d,.cm-f__ir,.cm-fil__b,.cm-fil__s,
  .cm-pt a,.cm-pt__foto,.cm-pt__q,.cm-pt__dir,.cm-pt__pronto,.cm-pt__ico,.cm-h__foto img,.cm-cap__movil,.cm-mazo__c,.cm-eco__lista a,
  .cm-red__l,.cm-red__nodo .cm-red__ico,.cm-v,.cm-red__con li,.cm-ap__ico,.cm-otras__ico,
  .cm-capas *,.cm-capas__trazo path{ transition:none !important }
  .cm-red .cm-red__l.on,.cm-red__f.on,.cm-red--vivo .cm-red__ficha.on,.cm-est--entra,.cm-red__mando.corre .cm-red__barra i{ animation:none }
  .cm-red__f{ display:none }
  .cm-h a:hover .cm-h__foto img,.cm-v:hover,.cm-i--cap:hover .cm-cap__movil,.cm-i--cap:focus-within .cm-cap__movil{ transform:none }
}