/* v28 · /ecosistema/ · se carga después de ecosistema.css, v22- y v25-ecosistema.css.
   La página vuelve con el diseño de la v25. Esta hoja solo:
     · añade las piezas nuevas (migas, «vive en la comunidad», dónde vive cada espacio, fuentes plegadas);
     · quita rastros de la lista negra sin tocar la composición: punto de color en el índice del
       recorrido, brillos de color alrededor de cajas, degradados de relleno y puntitos de lista;
     · dibuja una sola vez, al entrar, las barras de minutos de Brújula y las 16 celdas del Lab. */

/* ---------- Migas (sustituyen al chip con punto de color) ---------- */
.eco-migas ol{ list-style:none; margin:0 0 var(--e-md); padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .55rem;
  font-family:var(--sans); font-size:.86rem; font-weight:600; color:#9FB4B8 }
.eco-migas li{ display:flex; align-items:center; gap:.55rem }
.eco-migas li + li::before{ content:"/"; color:rgba(244,242,238,.32); font-weight:400 }
.eco-migas a{ color:#C9D4D7; text-decoration:none; min-height:var(--toque); display:inline-flex; align-items:center }
.eco-migas a:hover{ color:var(--papel); text-decoration:underline; text-underline-offset:.25em }
.eco-migas a[aria-current="page"]{ color:var(--sol-2) }

/* ---------- Recorrido: el ícono del espacio en lugar del punto de color ---------- */
.reco__indice a i{ width:1.05rem; height:1.05rem; border-radius:0; background:none; color:var(--c); display:grid; place-items:center; box-shadow:none !important }
.reco__indice a i svg{ width:100%; height:100%; display:block }
/* el ícono ocupa algo más que el punto: se recorta el aire para que la tira siga en una línea a 1440 */
.reco__indice ol{ gap:.35rem }
.reco__indice a{ gap:.45rem; padding-inline:.8rem }
/* sin halo de color alrededor de la tarjeta activa: basta el filete de su color */
.reco__paso[data-on] .reco__texto{ box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent) }
.reco__paso[data-on] .reco__punto{ box-shadow:none }
.reco__ventana{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent) }

/* ---------- Sin brillos ni degradados de relleno en cajas ---------- */
.cap__prog li{ background:color-mix(in srgb, var(--c) 6%, rgba(244,242,238,.03)) }
.prog__ico,.cap__cal{ box-shadow:none }
.cap__grande b{ text-shadow:none }
.lab-puerta{ box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ac-lab) 50%, transparent) }
.lab-puerta:hover,.lab-puerta:focus-visible{ box-shadow:inset 0 0 0 2px var(--ac-lab) }
.prop__base{ background:rgba(244,242,238,.04) }
.prop[data-capa="base"] .prop__base{ filter:none; background:rgba(217,164,65,.1) }

/* ---------- Cifras: número que cuenta una vez y unidad aparte ---------- */
.cap__cifras b > .cifra__n,.cap__cifras b > .cifra__u,.cap__grande b > .cifra__n,.lineas16__cab b > .cifra__n{
  display:inline; margin:0; padding:0; font:inherit; color:inherit; letter-spacing:inherit }
.cap__cifras b > .cifra__u{ font-size:.72em; margin-left:.04em }
.cap__fuente{ font-family:var(--sans); font-size:.8rem; line-height:1.5; color:#A9B9BD; margin:.85rem 0 0 }
.cap__fuente a{ color:#DCE3E6; text-underline-offset:.2em }
.cap__fuente a:hover{ color:var(--papel) }

/* ---------- Origen de las marcas hermanas y comunidad de cada espacio ---------- */
.cap__foto-origen{ font-family:var(--sans); font-size:.95rem; font-weight:600; line-height:1.45; color:#E7E2D6; margin:.7rem 0 0; max-width:40ch;
  text-shadow:0 1px 12px rgba(6,17,31,.75) }
.cap__casa{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1.1rem; margin:var(--e-md) 0 0; font-family:var(--sans); font-size:.92rem; line-height:1.5; color:#C9D4D7 }
.cap__casa--centro{ justify-content:center; text-align:center; margin-top:clamp(1.4rem,3vw,2rem) }
.cap__casa a{ color:var(--papel); font-weight:650; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--c) 70%, transparent); text-underline-offset:.22em;
  min-height:var(--toque); display:inline-flex; align-items:center; transition:text-decoration-color .2s ease }
.cap__casa a:hover{ text-decoration-color:var(--c); text-decoration-thickness:2px }
.casa__origen{ flex-basis:100%; color:#E7E2D6; font-weight:600 }
.cap__casa--centro .casa__origen{ flex-basis:auto }

/* ---------- Brújula: marca de visto dibujada en lugar del puntito ---------- */
.cap__recibe li::before{ content:none; display:none }
.cap__recibe li{ grid-template-columns:1.1rem minmax(0,1fr); align-items:start }
.cap__recibe svg{ width:1.1rem; height:1.1rem; color:var(--c); margin-top:.08rem }
.cap__recibe li > span{ display:inline; margin:0; font-size:inherit; color:inherit }

/* Barras de minutos: se dibujan una vez cuando el bloque entra en pantalla */
.bmods li:nth-child(2){ --k:1 } .bmods li:nth-child(3){ --k:2 } .bmods li:nth-child(4){ --k:3 } .bmods li:nth-child(5){ --k:4 } .bmods li:nth-child(6){ --k:5 }
.bmods i::after{ transition:width .9s var(--salida) calc(var(--k, 0) * 90ms + .15s) }
.rv .cap__modulos:not(.visto) .bmods i::after{ width:0 }

/* Lab: las 16 celdas se encienden en orden, una sola vez */
.lineas16__celdas i{ transition:opacity .35s ease calc(var(--i, 0) * 45ms + .2s), transform .45s var(--salida) calc(var(--i, 0) * 45ms + .2s) }
.rv .cap__tablero:not(.visto) .lineas16__celdas i{ opacity:0; transform:scale(.6) }

/* ---------- Dónde vive cada espacio (puente a Comunidades y Observatorio) ---------- */
.eco-casas__cab{ max-width:46rem; margin-inline:auto }
.eco-casas__cab .h2{ text-wrap:balance }
.eco-casas__cab .entrada{ color:#C9D4D7; margin:var(--e-md) auto 0; max-width:52ch }
.casas{ display:grid; gap:clamp(2rem,4vw,3rem) clamp(1.5rem,3.5vw,3rem); margin:clamp(2.5rem,5vw,3.75rem) auto 0; max-width:76rem; text-align:left }
@media (min-width:62rem){ .casas{ grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1fr) } }
@media (min-width:40rem) and (max-width:61.99rem){ .casas{ grid-template-columns:1fr 1fr } .casas__c--3{ grid-column:1 / -1 } }
.casas__c{ display:flex; flex-direction:column; gap:.6rem; padding-top:1.15rem; border-top:1px solid rgba(244,242,238,.16) }
.casas__t{ font-family:var(--sans); font-size:clamp(1.35rem,1.15rem + .7vw,1.75rem); font-weight:650; letter-spacing:-.02em; line-height:1.15; margin:0 }
.casas__t a{ color:var(--papel); text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:1.5px; text-underline-offset:.2em; transition:text-decoration-color .25s ease }
.casas__t a:hover,.casas__t a:focus-visible{ text-decoration-color:currentColor }
.casas__d{ font-family:var(--lee); font-size:1rem; line-height:1.55; color:#C9D4D7; margin:0; max-width:40ch; text-wrap:pretty }
.casas__l{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.35rem }
@media (min-width:62rem){ .casas__c--3 .casas__l{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem } }
@media (min-width:40rem) and (max-width:61.99rem){ .casas__c--3 .casas__l{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem } }
.casas__esp{ display:flex; align-items:center; gap:.85rem; min-height:var(--toque); padding:.4rem 0; text-decoration:none; color:var(--papel); border-radius:.9rem; outline-offset:4px }
.casas__ico{ flex:0 0 auto; width:2.9rem; height:2.9rem; border-radius:50%; display:grid; place-items:center; color:var(--c);
  background:color-mix(in srgb, var(--c) 14%, var(--noche-hondo)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent);
  transition:transform .3s var(--salida), background .3s ease }
.casas__ico svg{ width:46%; height:46% } .casas__ico img{ width:48%; height:auto }
.casas__txt{ display:grid; gap:.1rem; min-width:0; font-family:var(--sans) }
.casas__txt b{ font-size:.98rem; font-weight:650; line-height:1.25 }
.casas__txt > span{ display:inline-flex; align-items:center; gap:.3rem; font-size:.82rem; color:#AFC0C4; overflow-wrap:anywhere; transition:color .2s ease }
.casas__esp:hover .casas__ico,.casas__esp:focus-visible .casas__ico{ transform:scale(1.08); background:color-mix(in srgb, var(--c) 26%, var(--noche-hondo)) }
.casas__esp:hover .casas__txt > span,.casas__esp:focus-visible .casas__txt > span{ color:var(--c) }

.casas__puente{ list-style:none; padding:0; margin:clamp(2.5rem,5vw,3.5rem) auto 0; max-width:76rem; display:grid; text-align:left;
  border-top:1px solid rgba(244,242,238,.12) }
@media (min-width:48rem){ .casas__puente{ grid-template-columns:1fr 1fr; column-gap:clamp(1.5rem,3.5vw,3rem) } }
.casas__puente li{ border-bottom:1px solid rgba(244,242,238,.12) }
.casas__puente a{ display:flex; align-items:center; gap:1rem; padding:1.15rem .25rem; color:var(--papel); text-decoration:none; border-radius:.75rem; outline-offset:2px;
  transition:background .25s ease }
.casas__puente a:hover{ background:rgba(244,242,238,.04) }
.casas__pico{ flex:0 0 auto; width:2.6rem; height:2.6rem; display:grid; place-items:center; color:var(--sol-2) }
.casas__pico svg{ width:1.6rem; height:1.6rem; transition:transform .3s var(--salida) }
.casas__puente a:hover .casas__pico svg,.casas__puente a:focus-visible .casas__pico svg{ transform:translateY(-2px) }
.casas__puente b{ font-size:1.08rem; font-weight:650 }
.casas__puente .casas__txt > span{ font-size:.92rem; color:#C9D4D7 }
.eco-cierre__cab--fin{ margin-top:clamp(4rem,8vw,6rem) }

/* ---------- Fuentes y créditos, plegados ---------- */
.eco-fuentes{ padding-block:clamp(1.5rem,3vw,2.25rem) 0 }
.eco-fuentes__det{ font-family:var(--sans); color:var(--tinta-2, #3A4554); border-bottom:1px solid var(--filete) }
.eco-fuentes__det summary{ display:inline-flex; align-items:center; gap:.55rem; min-height:var(--toque); cursor:pointer; list-style:none; font-size:.92rem; font-weight:650; color:var(--tinta) }
.eco-fuentes__det summary::-webkit-details-marker{ display:none }
.eco-fuentes__det summary::after{ content:""; width:.42rem; height:.42rem; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .25s ease }
.eco-fuentes__det[open] summary::after{ transform:translateY(2px) rotate(-135deg) }
.eco-fuentes__det summary:focus-visible{ outline:2px solid var(--petroleo); outline-offset:3px; border-radius:.4rem }
.eco-fuentes__det ul{ list-style:none; margin:.3rem 0 1.3rem; padding:0; display:grid; gap:.55rem; max-width:62rem; font-size:.86rem; line-height:1.55 }
.eco-fuentes__det a{ color:var(--petroleo); text-underline-offset:.2em }
:target.eco-fuentes__det summary{ color:var(--petroleo) }

@media (prefers-reduced-motion:reduce){
  .bmods i::after,.lineas16__celdas i,.casas__ico,.casas__t a,.casas__pico svg,.eco-fuentes__det summary::after{ transition:none !important }
  .rv .cap__modulos:not(.visto) .bmods i::after{ width:calc(var(--min) / 8 * 100%) }
  .rv .cap__tablero:not(.visto) .lineas16__celdas i{ opacity:1; transform:none }
  .casas__esp:hover .casas__ico,.casas__puente a:hover .casas__pico svg{ transform:none }
}

/* ==========================================================================
   v31 · Guion: cada iniciativa se presenta a fondo una sola vez
   ========================================================================== */
/* Apertura: la firma en una línea, con enlace a Nosotros (reemplaza la sección «El propósito») */
.eco-apertura__firma{ margin:clamp(1.4rem,3vw,2rem) 0 0; max-width:52ch; font-family:var(--lee); font-style:italic; font-size:1rem; line-height:1.6; color:#AEBBC0; text-wrap:pretty }
.eco-apertura__firma a{ color:var(--papel); font-style:normal; font-family:var(--sans); font-size:.92rem; font-weight:600; text-decoration:underline; text-decoration-color:var(--sol-2); text-underline-offset:.24em; white-space:nowrap }
.eco-apertura__firma a:hover{ text-decoration-thickness:2px }
.orb__rotulo a{ color:inherit; text-decoration:underline; text-decoration-color:rgba(217,164,65,.6); text-underline-offset:.2em }
.orb__rotulo a:hover{ text-decoration-color:var(--sol-2) }

/* Recorrido: la frase de presentación, un poco más cerca del lema */
.reco--pagina .reco__d{ margin-top:var(--e-sm); color:#C9D4D7 }

/* Puente de una línea, en cursiva, al pie de una sección */
.eco-puente{ margin:clamp(2.5rem,5vw,3.5rem) auto 0; max-width:46ch; text-align:center; font-family:var(--lee); font-style:italic; font-size:clamp(1.02rem,.98rem + .25vw,1.15rem); line-height:1.55; color:#AEBBC0; text-wrap:balance }

/* Capítulo: estado según el glosario y avance corto hacia la ficha */
.cap__estado{ font-weight:650; color:var(--papel) }
.cap__avance{ margin:var(--e-md) 0 0; max-width:40rem; font-family:var(--sans); font-size:.98rem; line-height:1.6; color:#C9D4D7; text-wrap:pretty }
.cap__avance--centro{ margin-inline:auto; text-align:center; margin-top:clamp(1.4rem,3vw,2rem) }
.cap__avance a,.cap__bases a{ color:var(--papel); font-weight:600; text-decoration:underline; text-decoration-color:var(--c, var(--sol-2)); text-underline-offset:.22em }
.cap__avance a:hover,.cap__bases a:hover{ text-decoration-thickness:2px }

/* Matriz: cada actor termina en su comunidad (puente a /comunidades/) */
.actores__casa{ margin:clamp(1.5rem,3vw,2rem) auto 0; max-width:62rem; display:grid; gap:.6rem; justify-items:center; font-family:var(--sans) }
.actores__casa-k{ margin:0; font-size:.86rem; font-weight:650; color:var(--petroleo) }
.actores__casa-l{ list-style:none; margin:0; padding:0; width:100%; display:grid; gap:.75rem; grid-template-columns:minmax(0,1fr) }
@media (min-width:48rem){ .actores__casa-l--1{ max-width:40rem; margin-inline:auto } .actores__casa-l--2{ grid-template-columns:1fr 1fr } }
.actores__casa-l a{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:1rem; row-gap:.15rem; align-items:center; height:100%;
  padding:1.05rem 1.35rem; border-radius:var(--r-lg); text-decoration:none; color:var(--papel); background:var(--noche);
  box-shadow:0 14px 30px -22px rgba(10,26,47,.7); transition:background .25s ease, box-shadow .25s ease }
.actores__casa-l a:hover,.actores__casa-l a:focus-visible{ background:var(--noche-hondo, #08121F); box-shadow:0 20px 40px -22px rgba(10,26,47,.8) }
.actores__casa-l b{ font-size:1.12rem; font-weight:650; letter-spacing:-.01em }
.actores__casa-l span{ grid-column:1; font-family:var(--lee); font-size:.95rem; line-height:1.5; color:#C9D4D7; text-wrap:pretty }
.actores__casa-l i{ grid-column:2; grid-row:1 / span 2; display:inline-flex; color:var(--sol-2); transition:transform .25s var(--salida) }
.actores__casa-l a:hover i,.actores__casa-l a:focus-visible i{ transform:translateX(3px) }

/* Salto: la pregunta que responde la página de destino, y su nombre */
.eco-salto .salto__a b{ text-wrap:balance; max-width:22ch }
.eco-salto .salto__a--sig b{ margin-left:auto }
.eco-salto .eco-salto__pag{ font:inherit; font-size:.62em; font-weight:600; letter-spacing:0; color:var(--piedra); white-space:nowrap }

@media (prefers-reduced-motion:reduce){
  .actores__casa-l a,.actores__casa-l i{ transition:none }
  .actores__casa-l a:hover i,.actores__casa-l a:focus-visible i{ transform:none }
}
/* v31 · el visor fijo acompaña hasta la última tarjeta: sin el colchón inferior de .3 × alto, el visor
   se suelta cuando la última tarjeta termina y no queda columna vacía ni vacío largo antes de COAR */
@media (min-width:64rem){
  .reco--pagina .reco__pasos{ padding-bottom:clamp(1rem,2vw,1.5rem) }
  .eco-reco .eco-puente{ margin-top:clamp(1.5rem,3vw,2.25rem) }
}
.eco-salto .salto__a b{ line-height:1.18 }