/* v25 · /ecosistema/ (se carga después de ecosistema.css y v22-ecosistema.css).
   1. «El propósito»: la banda deja de ser un bloque claro aparte y habla el idioma de la órbita
      (nodos de color, líneas que se encienden, centro dorado). El dibujo se lee de abajo arriba:
      base educativa, puertas de entrada, fin.
   2. Conecta Lab: acceso visible a su página propia desde su capítulo. */

/* ---------- 1. El propósito ---------- */
.eco-prop{ --eco-c:var(--sol); padding-block:clamp(4rem,8vw,6.5rem); background:linear-gradient(180deg, var(--noche-hondo), var(--noche) 85%) }
.eco-prop::before{ inset:10% -10% auto; background:radial-gradient(40% 55% at 72% 40%, rgba(217,164,65,.10), transparent 70%) }
.eco-prop__rej{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:center }
@media (min-width:62rem){ .eco-prop__rej{ grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) } }
.eco-prop__cab .h2{ max-width:21ch; text-wrap:balance }
.eco-prop__cab .h2 .eco-frase{ display:block }
.eco-prop__cab .h2 .eco-frase + .eco-frase{ margin-top:.18em }
.eco-prop__cab .entrada{ margin-top:var(--e-md); color:#C9D4D7; max-width:48ch }
.eco-prop__liga{ margin:var(--e-md) 0 0; font-family:var(--sans) }

/* Las tres capas del dibujo, explicadas */
.prop__capas{ list-style:none; margin:clamp(1.5rem,3vw,2.25rem) 0 0; padding:0; display:grid; gap:.35rem }
.prop__capas li{ display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:.15rem 1rem; align-items:start; padding:.8rem .9rem; margin-inline:-.9rem;
  border-radius:1rem; font-family:var(--sans); transition:background .3s ease }
.prop__capa-ico{ grid-row:1 / span 2; width:2.5rem; height:2.5rem; border-radius:50%; display:grid; place-items:center; color:var(--sol-2);
  background:radial-gradient(circle at 35% 30%, rgba(217,164,65,.22), var(--noche-hondo) 75%); box-shadow:inset 0 0 0 1.2px rgba(217,164,65,.55);
  transition:box-shadow .35s ease, transform .35s var(--salida) }
.prop__capa-ico svg{ width:1.2rem; height:1.2rem }
.prop__capas b{ font-size:1.06rem; font-weight:650; line-height:1.35; color:var(--papel) }
.prop__capas li > span:last-child{ font-family:var(--lee); font-size:.98rem; line-height:1.55; color:#C9D4D7; text-wrap:pretty }
.prop__capas li.on{ background:rgba(244,242,238,.05) }
.prop__capas li.on .prop__capa-ico{ transform:scale(1.06); box-shadow:inset 0 0 0 1.6px var(--sol-2), 0 0 0 6px rgba(217,164,65,.10), 0 0 26px rgba(217,164,65,.3) }

/* El dibujo */
.prop{ --d:clamp(3rem, 2.3rem + 2vw, 4rem); width:100%; max-width:40rem; justify-self:center }
.prop__dibujo{ position:relative; display:grid; justify-items:center; padding-top:clamp(1rem,2.5vw,1.75rem) }
.prop__relieve{ position:absolute; inset:0 -4% 46% -4%; width:108%; height:54%; overflow:visible; pointer-events:none }
.prop__relieve path{ fill:none; stroke:rgba(216,203,179,.13); stroke-width:1; vector-effect:non-scaling-stroke }
.prop__fin{ position:relative; z-index:1; display:grid; justify-items:center; gap:.1rem; padding:1.05rem 1.9rem 1rem; border-radius:999px; text-align:center;
  background:radial-gradient(120% 140% at 50% 20%, #142C4A, var(--noche-hondo) 75%);
  box-shadow:inset 0 0 0 1.2px rgba(217,164,65,.6), 0 0 0 10px rgba(217,164,65,.05), 0 24px 60px -24px rgba(0,0,0,.7);
  transition:box-shadow .4s ease, transform .4s var(--salida) }
.prop__fin span{ font-family:var(--sans); font-size:clamp(1.05rem, .95rem + .5vw, 1.3rem); font-weight:700; line-height:1.2; color:var(--papel) }
.prop__fin small{ font-family:var(--lee); font-style:italic; font-size:.9rem; color:var(--sol-2) }
.prop__lineas{ display:block; width:100%; height:clamp(6.5rem, 4rem + 8vw, 10rem); margin-top:-.2rem; overflow:visible }
.prop__l{ fill:none; stroke:color-mix(in srgb, var(--c) 48%, transparent); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:0;
  transition:stroke .35s ease, stroke-width .35s ease, opacity .35s ease }
/* Un solo momento al entrar: las cinco líneas suben de la base al fin */
.rv .prop:not(.visto) .prop__l{ stroke-dashoffset:100 }
.rv .prop.visto .prop__l{ transition:stroke-dashoffset 1.3s var(--salida), stroke .35s ease, stroke-width .35s ease, opacity .35s ease }
.rv .prop.visto .prop__l[data-k="1"],.rv .prop.visto .prop__l[data-k="3"]{ transition-delay:.12s, 0s, 0s, 0s }
.rv .prop.visto .prop__l[data-k="2"]{ transition-delay:.24s, 0s, 0s, 0s }

.prop__nodos{ list-style:none; margin:0; padding:0; width:100%; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)) }
.prop__nodos li{ display:grid; justify-items:center }
.prop__nodo{ display:grid; justify-items:center; align-content:start; gap:.6rem; padding:0 .15rem .2rem; border:0; background:none; cursor:pointer; color:var(--papel);
  font:inherit; border-radius:1rem; outline-offset:4px; transition:opacity .35s ease }
.prop__ico{ width:var(--d); height:var(--d); border-radius:50%; display:grid; place-items:center; color:var(--c);
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 26%, var(--noche-2)), var(--noche-hondo) 75%);
  box-shadow:inset 0 0 0 1.5px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 9%, transparent), 0 0 30px color-mix(in srgb, var(--c) 22%, transparent);
  transition:transform .4s var(--salida), box-shadow .4s ease }
.prop__ico svg{ width:44%; height:44% }
.prop__ico img{ width:46%; height:auto }
.prop__nombre{ font-family:var(--sans); font-size:.84rem; font-weight:650; line-height:1.25; text-align:center; max-width:8rem; transition:color .3s ease }
.prop__nodo:hover .prop__ico,.prop__nodo:focus-visible .prop__ico,.prop__nodo[aria-pressed="true"] .prop__ico{ transform:scale(1.1);
  box-shadow:inset 0 0 0 2px var(--c), 0 0 0 9px color-mix(in srgb, var(--c) 18%, transparent), 0 0 50px color-mix(in srgb, var(--c) 48%, transparent) }
.prop__nodo:hover .prop__nombre,.prop__nodo:focus-visible .prop__nombre,.prop__nodo[aria-pressed="true"] .prop__nombre{ color:var(--c) }

.prop__base{ width:100%; margin-top:1.1rem; padding:.7rem 1rem; border-radius:999px; text-align:center;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--ac-coar) 20%, transparent), color-mix(in srgb, var(--ac-escuela) 20%, transparent),
    color-mix(in srgb, var(--ac-brujula) 20%, transparent), color-mix(in srgb, var(--ac-proposito) 20%, transparent),
    color-mix(in srgb, var(--ac-lab) 20%, transparent));
  box-shadow:inset 0 0 0 1px rgba(216,203,179,.24); transition:box-shadow .4s ease, filter .4s ease }
.prop__base span{ font-family:var(--sans); font-size:.86rem; font-weight:650; line-height:1.3; color:#E7E2D6 }

/* Estados: un espacio elegido, o una capa señalada desde la lista */
.prop[data-k] .prop__l{ opacity:.22 }
.prop[data-k] .prop__nodo[aria-pressed="false"]{ opacity:.5 }
.prop[data-k="0"] .prop__l[data-k="0"],.prop[data-k="1"] .prop__l[data-k="1"],.prop[data-k="2"] .prop__l[data-k="2"],
.prop[data-k="3"] .prop__l[data-k="3"],.prop[data-k="4"] .prop__l[data-k="4"],.prop[data-capa="puerta"] .prop__l{
  opacity:1; stroke:var(--c); stroke-width:2.4; stroke-dasharray:6 4; animation:orb-flujo 1.2s linear infinite; filter:drop-shadow(0 0 3px var(--c)) }
.prop[data-k] .prop__fin,.prop[data-capa="fin"] .prop__fin{ transform:scale(1.03);
  box-shadow:inset 0 0 0 1.6px var(--sol-2), 0 0 0 10px rgba(217,164,65,.10), 0 0 48px rgba(217,164,65,.28) }
.prop[data-capa="base"] .prop__base{ filter:saturate(1.6) brightness(1.15); box-shadow:inset 0 0 0 1.4px rgba(232,194,112,.7), 0 0 30px rgba(217,164,65,.18) }

/* Por dónde entra cada espacio */
.prop__puerta{ display:grid; margin-top:1.25rem; min-height:6.4rem; align-content:start }
.prop__txt{ display:grid; gap:.35rem; margin:0; padding:1rem 1.25rem; border-radius:1.1rem; font-family:var(--sans);
  background:color-mix(in srgb, var(--c, var(--sol)) 7%, rgba(244,242,238,.03)); box-shadow:inset 0 0 0 1.2px color-mix(in srgb, var(--c, var(--sol)) 42%, transparent) }
.prop__txt b{ font-size:1rem; font-weight:700; color:var(--c) }
.prop__txt > span:not(.prop__ligas){ font-family:var(--lee); font-size:1.02rem; line-height:1.5; color:#DCE3E6 }
.prop__ligas{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin-top:.2rem; font-size:.92rem }
.prop__txt--inicio{ display:block; text-align:center; font-family:var(--lee); font-style:italic; font-size:1rem; color:#AFC0C4; background:none; box-shadow:inset 0 0 0 1px rgba(216,203,179,.16) }
.prop__txt[hidden]{ display:none }
.prop__puerta > .prop__txt + .prop__txt:not([hidden]){ margin-top:.5rem }

@media (max-width:40rem){
  .prop{ --d:2.75rem }
  .prop__nombre{ font-size:.68rem; max-width:4.4rem }
  .prop__fin{ padding:.85rem 1.4rem .8rem }
  .prop__base{ padding:.6rem .8rem }
  .prop__base span{ font-size:.76rem }
  .prop__txt{ padding:.9rem 1rem }
}
@media (prefers-reduced-motion:reduce){
  .prop__l{ animation:none !important; transition:none !important }
  .rv .prop:not(.visto) .prop__l{ stroke-dashoffset:0 }
  .prop__ico,.prop__fin,.prop__base,.prop__capa-ico{ transition:none }
}

/* ---------- 2. Conecta Lab: acceso a su página ---------- */
.lab-puerta{ display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden; border-radius:1.25rem; text-decoration:none; color:var(--papel);
  background:color-mix(in srgb, var(--ac-lab) 9%, rgba(244,242,238,.03)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ac-lab) 50%, transparent), 0 30px 60px -36px color-mix(in srgb, var(--ac-lab) 55%, transparent);
  transition:box-shadow .3s ease, background .3s ease; outline-offset:4px }
.lab-puerta__foto{ display:block; overflow:hidden; aspect-ratio:16 / 7 }
.lab-puerta__foto img{ display:block; width:100%; height:100%; object-fit:cover; object-position:35% 40%; transition:transform .6s var(--salida) }
.lab-puerta__txt{ display:grid; gap:.45rem; align-content:center; padding:1.15rem 1.35rem 1.3rem; font-family:var(--sans) }
.lab-puerta__t{ font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight:700; line-height:1.2; color:var(--ac-lab);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.2em; transition:text-decoration-color .25s ease }
.lab-puerta__d{ font-size:.98rem; line-height:1.55; color:#DCE3E6; text-wrap:pretty }
.lab-puerta:hover,.lab-puerta:focus-visible{ background:color-mix(in srgb, var(--ac-lab) 14%, rgba(244,242,238,.04));
  box-shadow:inset 0 0 0 2px var(--ac-lab), 0 30px 60px -30px color-mix(in srgb, var(--ac-lab) 70%, transparent) }
.lab-puerta:hover .lab-puerta__t,.lab-puerta:focus-visible .lab-puerta__t{ text-decoration-color:var(--ac-lab) }
.lab-puerta:hover .lab-puerta__foto img{ transform:scale(1.04) }
@media (min-width:36rem){
  .lab-puerta{ grid-template-columns:minmax(0,11rem) minmax(0,1fr) }
  .lab-puerta__foto{ aspect-ratio:auto; min-height:100% }
}
@media (prefers-reduced-motion:reduce){ .lab-puerta__foto img{ transition:none } }

/* En celular el dibujo sube: va justo después del párrafo y antes de la explicación de las capas */
@media (max-width:61.99rem){
  .eco-prop__rej{ gap:0 }
  .eco-prop__cab{ display:contents }
  .eco-prop__cab > .antetitulo,.eco-prop__cab > .h2,.eco-prop__cab > .entrada{ order:0 }
  .eco-prop .prop{ order:1; margin-top:clamp(2rem,6vw,3rem) }
  .prop__capas{ order:2; margin-top:clamp(2rem,6vw,2.75rem) }
  .eco-prop__liga{ order:3 }
}