@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · ECOSISTEMA v14
   Se carga después de v11.css en la portada y en /ecosistema/.
     · .reco    recorrido guiado: cada paso es una tarjeta con su número (sin
                líneas verticales) y un dispositivo fijo (sticky) que cruza las capturas.
                Sin avance automático: el paso activo es el que cruza el centro.
     · .orbita--v12, .cap--*, .actores, .eco-cierre: página /ecosistema/
   Los acentos de cada espacio (--c) se usan solo sobre fondo oscuro.
   ========================================================================== */

/* overflow:hidden de .eco rompe position:sticky; clip recorta sin crear desplazamiento */
.eco{ overflow:clip }

/* CTA principal en oro */
.boton--sol,.oscuro .boton--sol{ background:var(--sol); border-color:var(--sol); color:var(--tinta) }
.boton--sol:hover,.oscuro .boton--sol:hover{ background:var(--sol-2); border-color:var(--sol-2); color:var(--tinta) }

/* ===================================================================== RECORRIDO */
.reco{ --alto-lado: calc(100vh - var(--alto-nav) - 3rem); margin-top:clamp(2.5rem,5vw,4rem); display:grid; grid-template-columns:minmax(0,1fr); gap:0 clamp(2rem,4vw,4.5rem); position:relative }
.reco__lado{ position:sticky; top:var(--alto-nav); z-index:2; align-self:start }

/* Índice: tira de espacios */
.reco__indice ol{ list-style:none; margin:0; padding:0; display:flex; gap:.45rem }
.reco__indice a{ display:inline-flex; align-items:center; gap:.55rem; min-height:var(--toque); padding:.55rem .95rem; border-radius:999px; white-space:nowrap;
  font-family:var(--sans); font-size:.86rem; font-weight:600; color:#C9D4D7; text-decoration:none; background:rgba(244,242,238,.05);
  box-shadow:inset 0 0 0 1px rgba(244,242,238,.12); transition:background .3s ease, box-shadow .3s ease, color .3s ease }
.reco__indice a i{ width:.55rem; height:.55rem; border-radius:50%; background:var(--c); flex:0 0 auto; transition:box-shadow .3s ease }
.reco__indice a:hover{ color:var(--papel); background:rgba(244,242,238,.1) }
.reco__indice a[aria-current="step"]{ color:var(--papel); background:color-mix(in srgb, var(--c) 16%, rgba(6,17,31,.6)); box-shadow:inset 0 0 0 1.5px var(--c) }
.reco__indice a[aria-current="step"] i{ box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent) }

/* Pasos: cada espacio es una tarjeta con su número; la activa se enciende con su color */
.reco__pasos{ list-style:none; margin:0; padding:0; position:relative; display:grid; gap:clamp(1rem,2.5vw,1.4rem) }
.reco__paso{ position:relative; display:grid }
.reco__punto{ flex:0 0 auto; width:2.4rem; height:2.4rem; border-radius:.7rem; display:grid; place-items:center;
  font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.02em; color:var(--c); background:color-mix(in srgb, var(--c) 12%, var(--noche-hondo));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); transition:box-shadow .4s ease, background .4s ease, color .4s ease }
.reco__paso[data-on] .reco__punto{ background:var(--c); color:var(--tinta); box-shadow:0 10px 26px -10px color-mix(in srgb, var(--c) 80%, transparent) }
.reco__texto{ min-width:0; padding:clamp(1.25rem,3vw,1.9rem); border-radius:var(--r-lg); background:rgba(244,242,238,.035);
  box-shadow:inset 0 0 0 1px rgba(244,242,238,.09); transition:background .4s ease, box-shadow .4s ease }
.reco__paso[data-on] .reco__texto{ background:color-mix(in srgb, var(--c) 8%, rgba(244,242,238,.03)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 50%, transparent), 0 30px 60px -36px color-mix(in srgb, var(--c) 60%, transparent) }
.reco__etapa{ display:flex; align-items:center; gap:.85rem; font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.01em; line-height:1.4; text-transform:none; color:var(--c); margin:0 0 var(--e-md) }
.reco__t{ font-family:var(--sans); font-weight:620; font-size:clamp(1.4rem,1.1rem + 1vw,2rem); line-height:1.12; letter-spacing:-.02em; margin-top:var(--e-sm); color:var(--papel); text-wrap:balance; transition:color .4s ease }
.reco__d{ font-family:var(--sans); font-size:.98rem; line-height:1.62; color:#C9D4D7; margin-top:var(--e-sm); max-width:46ch }
.reco__ligas{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin-top:var(--e-md); font-family:var(--sans); font-size:.92rem; font-weight:600 }
.reco__ligas a{ color:var(--papel); min-height:var(--toque); display:inline-flex; align-items:center; gap:.4rem }
.reco__fin{ margin-top:clamp(2.5rem,5vw,4rem) }

/* Ventana móvil: la captura del celular asomando, con fundido inferior */
.reco__ventana{ margin:var(--e-md) 0 0; height:clamp(19rem, 92vw, 26rem); overflow:hidden; border-radius:1.4rem; position:relative;
  background:#0B1220; padding:.35rem .35rem 0; max-width:24rem;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 0 60px -10px color-mix(in srgb, var(--c) 40%, transparent);
  -webkit-mask-image:linear-gradient(transparent, #000 14%, #000 66%, transparent); mask-image:linear-gradient(transparent, #000 14%, #000 66%, transparent) }
.reco__ventana picture{ display:block }
.reco__ventana img{ width:100%; height:auto; border-radius:1.1rem; display:block; transform:translateY(-14%) }
/* v17 · tableta (600–1023 px): la captura de escritorio con marco de navegador llena la tarjeta */
@media (min-width:37.5rem) and (max-width:63.99rem){
  .reco__ventana{ height:auto; max-width:none; border-radius:1rem; padding:1.7rem .5rem .5rem;
    -webkit-mask-image:none; mask-image:none }
  .reco__ventana::before{ content:""; position:absolute; top:.6rem; left:.8rem; width:2.25rem; height:.5rem;
    background:radial-gradient(circle, rgba(255,255,255,.2) .25rem, transparent .26rem) 0 0 / .75rem .5rem repeat-x }
  .reco__ventana::after{ content:""; position:absolute; top:.45rem; left:3.6rem; right:1rem; height:.8rem; border-radius:999px; background:rgba(255,255,255,.06) }
  .reco__ventana img{ transform:none; border-radius:.45rem; aspect-ratio:16 / 10; object-fit:cover; object-position:top }
}

/* Dispositivo: navegador grande y celular encima */
.reco__disp{ display:block; position:relative; text-decoration:none; color:inherit }
.reco__disp .disp__pc{ display:block; position:relative; border-radius:1rem; background:#0B1220; padding:.6rem .6rem 0;
  box-shadow:var(--sombra-honda), inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1.5px color-mix(in srgb, var(--eco-c, var(--piedra)) 55%, transparent), 0 40px 120px -40px color-mix(in srgb, var(--eco-c, var(--piedra)) 55%, transparent);
  transition:box-shadow .6s ease }
.reco__disp .disp__barra{ display:flex; align-items:center; gap:.35rem; padding:.2rem .4rem .6rem }
.reco__disp .disp__barra > i{ width:.5rem; height:.5rem; border-radius:50%; background:rgba(255,255,255,.18) }
.disp__url{ margin-left:.7rem; flex:1; position:relative; height:1.5rem; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden }
.disp__url span{ position:absolute; inset:0; padding:0 .9rem; display:flex; align-items:center; font-family:var(--sans); font-size:.74rem; color:#B7C6C9;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity .4s ease }
.disp__url span[data-on]{ opacity:1 }
.disp__pila{ display:grid; overflow:hidden }
.disp__pila img{ grid-area:1/1; width:100%; height:auto; opacity:0; transform:translateY(10px) scale(1.01); filter:blur(4px) saturate(.8); transition:opacity .55s ease, transform .8s var(--salida), filter .6s ease }
.disp__pila img.on{ opacity:1; transform:none; filter:none }
.reco__disp .disp__pc .disp__pila{ border-radius:.4rem .4rem 0 0; aspect-ratio:16/10 }
.reco__disp .disp__movil{ display:block; position:absolute; right:-2%; bottom:-9%; width:19%; min-width:7rem; border-radius:1.5rem; padding:.34rem; background:#0B1220;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1), 0 0 0 1.5px color-mix(in srgb, var(--eco-c, var(--piedra)) 55%, transparent) }
.reco__disp .disp__movil .disp__pila{ border-radius:1.2rem; aspect-ratio:9/19.5 }
.reco__disp .disp__movil img{ object-fit:cover; object-position:top; height:100% }

/* Pie del dispositivo: número de paso y dominio que se está viendo */
.reco__pie{ display:none; align-items:center; gap:.9rem; font-family:var(--sans); font-size:.8rem; color:#AFC0C4; letter-spacing:.02em }
.reco__pie b{ font-weight:700; color:var(--eco-c, var(--piedra)); font-variant-numeric:tabular-nums; letter-spacing:.08em; transition:color .4s ease }
.reco__pie i{ width:2.5rem; height:2px; border-radius:2px; background:rgba(244,242,238,.14); overflow:hidden; position:relative }
.reco__pie i::after{ content:""; position:absolute; inset:0; background:var(--eco-c, var(--piedra)); transform:scaleX(var(--avance, .2)); transform-origin:left; transition:transform .5s var(--salida), background .4s ease }

/* Escritorio: pasos a la izquierda, dispositivo fijo a la derecha */
@media (min-width:64rem){
  .reco{ grid-template-columns:minmax(0,24rem) minmax(0,1fr) }
  .reco__lado{ grid-column:2; grid-row:1 / span 2; top:calc(var(--alto-nav) + 1.5rem); height:var(--alto-lado); display:grid; grid-template-rows:auto 1fr auto; gap:1rem; justify-items:center }
  .reco__indice ol{ flex-wrap:wrap; justify-content:center }
  .reco__indice a{ font-size:.82rem; padding:.5rem .85rem }
  .reco__disp{ align-self:center; width:min(92%, calc((var(--alto-lado) - 9rem) * 1.6)); margin-right:4% }
  .reco__pie{ display:flex }
  .reco__pasos{ grid-column:1; grid-row:1; gap:0; padding-block:calc(var(--alto-lado) * .14) calc(var(--alto-lado) * .3) }
  .reco__paso{ min-height:calc(var(--alto-lado) * .78); align-content:center; padding-block:.8rem }
  .reco__paso:not([data-on]) .reco__t{ color:#AFC0C4 }
  .reco__ventana{ display:none }
  .reco__fin{ grid-column:1 }
  .reco--pagina .reco__paso,.reco--corto .reco__paso{ min-height:calc(var(--alto-lado) * .6) }
}
@media (min-width:64rem) and (max-height:46rem){ .reco__indice,.reco__pie{ display:none } .reco__lado{ grid-template-rows:1fr } }

/* Celular y tableta: tira de espacios fija bajo la navegación, con fundido de continuación */
@media (max-width:63.99rem){
  .reco__lado{ margin-inline:calc(-1 * var(--canal)); padding:.6rem var(--canal); margin-bottom:var(--e-lg);
    background:rgba(6,17,31,.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(244,242,238,.08) }
  .reco__indice{ overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; margin-inline:calc(-1 * var(--canal)); padding-inline:var(--canal);
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--canal), #000 calc(100% - 3.5rem), transparent);
            mask-image:linear-gradient(90deg, transparent 0, #000 var(--canal), #000 calc(100% - 3.5rem), transparent) }
  .reco__indice::-webkit-scrollbar{ display:none }
  .reco__indice ol{ width:max-content; padding-right:3rem }
  .reco__indice li{ scroll-snap-align:start; scroll-margin-left:var(--canal) }
  .reco__disp{ display:none }
  .reco__paso{ scroll-margin-top:calc(var(--alto-nav) + 5rem) }
}
@media (max-width:30rem){ .reco__punto{ width:2.2rem; height:2.2rem; font-size:.78rem } .reco__etapa{ font-size:.72rem; letter-spacing:.1em } }
@media (min-width:64rem){ .reco__paso{ scroll-margin-top:calc(var(--alto-nav) + 4rem) } }

@media (prefers-reduced-motion:reduce){
  .disp__pila img,.disp__url span,.reco__punto,.reco__texto,.reco__disp .disp__pc{ transition:none }
}


/* ===================================================================== /ECOSISTEMA/ */
/* Apertura */
.eco-apertura{ padding-top:calc(var(--alto-nav) + clamp(2.5rem,6vw,4.5rem)); padding-bottom:clamp(3rem,6vw,5rem) }
.eco-apertura::before{ background:radial-gradient(45% 55% at 72% 45%, rgba(217,164,65,.14), transparent 70%) }
.eco-apertura__rej{ display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:center }
@media (min-width:62rem){ .eco-apertura__rej{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.eco-apertura__t{ margin-top:var(--e-md); text-wrap:balance; max-width:22ch }
.eco-apertura__t .eco-frase{ display:inline-block }
.eco-apertura__lede{ margin-top:var(--e-md); color:#C9D4D7; max-width:52ch }
.eco-apertura__lede b{ color:var(--papel); font-weight:600 }

/* Órbita: un solo sistema de coordenadas (viewBox 400) para círculos, centro y nodos */
.orb-cont{ display:grid; justify-items:center; gap:clamp(1rem,2.5vw,1.6rem); width:100% }
.orb{ --d:clamp(3rem, 2.2rem + 2.4vw, 4.1rem); position:relative; width:min(100%, 34rem); aspect-ratio:1; container-type:inline-size }
.orb__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.orb__anillo{ fill:none; stroke:rgba(216,203,179,.18); stroke-width:.8 }
.orb__anillo--giro{ stroke:rgba(217,164,65,.5); stroke-width:1.1; stroke-dasharray:1.2 3.8; animation:orb-giro 90s linear infinite }
.orb__anillo--int{ stroke:rgba(217,164,65,.24); stroke-width:.7; stroke-dasharray:2 4 }
@keyframes orb-giro{ to{ stroke-dashoffset:-100 } }
.orb__satelite{ transform-box:view-box; transform-origin:50% 50%; animation:orb-sat 40s linear infinite }
.orb__satelite circle{ fill:var(--sol-2); filter:drop-shadow(0 0 4px rgba(217,164,65,.9)) }
@keyframes orb-sat{ to{ transform:rotate(360deg) } }
.orb__l{ stroke:color-mix(in srgb, var(--c) 38%, transparent); stroke-width:1.1; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:0;
  transition:stroke .35s ease, stroke-width .35s ease, opacity .35s ease }
/* Nodo o verbo activo: su línea se ilumina y corre; las demás se apagan */
.orb[data-k] .orb__l,.orb[data-verbo] .orb__l{ opacity:.25 }
.orb[data-k="0"] .orb__l[data-k="0"],.orb[data-k="1"] .orb__l[data-k="1"],.orb[data-k="2"] .orb__l[data-k="2"],.orb[data-k="3"] .orb__l[data-k="3"],.orb[data-k="4"] .orb__l[data-k="4"],
.orb[data-verbo="formar"] .orb__l:is([data-k="0"],[data-k="2"],[data-k="3"]),.orb[data-verbo="confiar"] .orb__l[data-k="1"],.orb[data-verbo="transformar"] .orb__l[data-k="4"]{
  opacity:1; stroke:var(--c); stroke-width:2.2; stroke-dasharray:6 4; animation:orb-flujo 1.2s linear infinite; filter:drop-shadow(0 0 3px var(--c)) }
@keyframes orb-flujo{ to{ stroke-dashoffset:-20 } }

.orb__nav ul{ list-style:none; margin:0; padding:0 }
.orb__nodo{ position:absolute; left:var(--x); top:var(--y); width:var(--d); height:var(--d); margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius:50%; text-decoration:none; color:var(--papel); outline-offset:6px; z-index:1 }
.orb__ico{ position:absolute; inset:0; 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 34px color-mix(in srgb, var(--c) 26%, transparent);
  transition:transform .4s var(--salida), box-shadow .4s ease, opacity .35s ease }
.orb__ico svg{ width:44%; height:44% }
.orb__ico img{ width:46%; height:auto }
.orb__nombre{ position:absolute; left:50%; top:calc(100% + .55rem); transform:translateX(-50%); width:max-content; max-width:9.5rem; text-align:center;
  font-family:var(--sans); font-size:.84rem; font-weight:650; line-height:1.25; color:var(--papel); padding:.15rem .5rem; border-radius:999px; background:rgba(6,17,31,.72); transition:color .35s ease, opacity .35s ease }
.orb__nodo:hover .orb__ico,.orb__nodo:focus-visible .orb__ico,.orb__nodo.es-verbo .orb__ico{ transform:scale(1.12);
  box-shadow:inset 0 0 0 2px var(--c), 0 0 0 9px color-mix(in srgb, var(--c) 18%, transparent), 0 0 54px color-mix(in srgb, var(--c) 50%, transparent) }
.orb__nodo:hover .orb__nombre,.orb__nodo:focus-visible .orb__nombre,.orb__nodo.es-verbo .orb__nombre{ color:var(--c) }
.orb[data-verbo] .orb__nodo:not(.es-verbo) .orb__ico,.orb[data-verbo] .orb__nodo:not(.es-verbo) .orb__nombre{ opacity:.4 }

/* Centro: logotipo vectorial centrado; al activar un nodo o un verbo, su ficha */
.orb__centro{ position:absolute; left:50%; top:50%; width:33%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  display:grid; place-items:center; background:radial-gradient(circle at 50% 35%, #142C4A, var(--noche) 70%);
  box-shadow:inset 0 0 0 1px rgba(217,164,65,.45), 0 0 0 10px rgba(217,164,65,.05), 0 30px 80px -20px rgba(0,0,0,.6) }
.orb__logo,.orb__fichas{ grid-area:1/1 }
.orb__logo{ width:70%; height:auto; transition:opacity .35s ease, transform .5s var(--salida) }
.orb__fichas{ display:grid; width:84%; height:84%; place-items:center }
.orb__ficha{ grid-area:1/1; display:grid; gap:.2em; justify-items:center; text-align:center; font-family:var(--sans); opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .4s var(--salida); pointer-events:none; font-size:clamp(.62rem, 2.6cqi, .86rem) }
.orb__ficha b{ font-size:1.18em; font-weight:700; color:var(--c, var(--sol-2)); line-height:1.15 }
.orb__ficha span{ font-size:1em; line-height:1.3; color:#DCE3E6 }
.orb__ficha small{ font-size:.82em; letter-spacing:.01em; text-transform:none; color:#9FB4B8; margin-top:.15em }
.orb__ficha--verbo b{ color:var(--sol-2) }
.orb[data-k] .orb__logo,.orb[data-verbo] .orb__logo{ opacity:0; transform:scale(.92) }
.orb[data-k="0"] .orb__ficha[data-k="0"],.orb[data-k="1"] .orb__ficha[data-k="1"],.orb[data-k="2"] .orb__ficha[data-k="2"],.orb[data-k="3"] .orb__ficha[data-k="3"],.orb[data-k="4"] .orb__ficha[data-k="4"],
.orb[data-verbo="formar"]:not([data-k]) .orb__ficha[data-verbo="formar"],.orb[data-verbo="confiar"]:not([data-k]) .orb__ficha[data-verbo="confiar"],.orb[data-verbo="transformar"]:not([data-k]) .orb__ficha[data-verbo="transformar"]{ opacity:1; transform:none }

/* Propósito: tres verbos que resaltan sus espacios */
.orb__proposito{ display:grid; justify-items:center; gap:.7rem; text-align:center }
.orb__rotulo{ font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:#9FB4B8; margin:0 }
.orb__verbos{ display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem }
.orb__verbo{ min-height:var(--toque); padding:.5rem 1.05rem; border-radius:999px; border:0; cursor:pointer; font-family:var(--lee); font-style:italic; font-size:1rem; color:#E7E2D6;
  background:rgba(244,242,238,.05); box-shadow:inset 0 0 0 1px rgba(217,164,65,.35); transition:background .3s ease, box-shadow .3s ease, color .3s ease }
.orb__verbo:hover{ background:rgba(217,164,65,.12); color:var(--papel) }
.orb__verbo[aria-pressed="true"]{ background:var(--sol); color:var(--tinta); box-shadow:none }
@media (max-width:40rem){
  .orb{ --d:2.75rem }
  .orb__nombre{ font-size:.7rem; max-width:6.2rem; top:calc(100% + .35rem) }
  .orb__verbo{ font-size:.9rem; padding:.45rem .85rem }
}
@media (prefers-reduced-motion:reduce){
  .orb__anillo--giro,.orb__satelite,.orb__l{ animation:none !important }
  .orb__ico,.orb__logo,.orb__ficha{ transition:none }
}

/* Recorrido de la página */
.eco-reco{ padding-block:clamp(4rem,8vw,6.5rem); background:var(--noche) }
.eco-reco__cab{ max-width:46rem; margin-inline:auto; text-align:center }
.eco-reco__cab .entrada{ color:#C9D4D7; margin:var(--e-sm) auto 0; max-width:44ch }

/* Capítulos: base común */
.cap{ position:relative; isolation:isolate; color:var(--papel); background:var(--noche-hondo); padding-block:clamp(4.5rem,8vw,7rem); --ac:var(--c); overflow:clip }
.cap__etapa{ display:flex; align-items:center; gap:.8rem; line-height:1.4; font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--c); margin:0 }
.cap__n{ flex:0 0 auto; display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%; background:var(--c); color:var(--tinta); letter-spacing:0; font-size:.8rem;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 20%, transparent) }
.cap__t{ font-family:var(--sans); font-weight:640; font-size:var(--t-h2); line-height:1.05; letter-spacing:-.025em; margin-top:var(--e-sm); color:var(--papel); text-wrap:balance }
.cap__lead{ font-family:var(--lee); font-size:clamp(1.05rem,1rem + .35vw,1.25rem); line-height:1.55; color:#DCE3E6; margin-top:var(--e-md); max-width:44ch }
.cap__sub{ font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:#C9D4D7; margin:0 0 var(--e-sm) }
.cap__nota{ font-family:var(--sans); font-size:.86rem; line-height:1.55; color:#AFC0C4; margin-top:var(--e-md); max-width:52ch }
.mt-lg{ margin-top:var(--e-lg) }
.cap__fondo{ position:absolute; inset:0; z-index:-2 }
.cap__fondo img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); scale:1.08 }
@supports (animation-timeline:view()){ .cap__fondo img{ animation:paralaje linear both; animation-timeline:view() } }
@media (prefers-reduced-motion:reduce){ .cap__fondo img{ animation:none; scale:1 } }
.cap__rej{ display:grid; gap:clamp(2.5rem,4vw,4rem); align-items:center }
@media (min-width:62rem){ .cap__rej{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) } }

/* Cifras con fuente */
.cap__cifras{ list-style:none; padding:0; margin:var(--e-lg) 0 0; display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 12rem), 1fr)) }
.cap__cifras li{ padding:1.25rem 1.3rem 1.3rem; border-radius:var(--r-lg); background:color-mix(in srgb, var(--c) 7%, rgba(244,242,238,.03)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, rgba(244,242,238,.06)) }
.cap__cifras b{ display:block; font-family:var(--sans); font-weight:640; font-size:clamp(1.7rem,1.3rem + 1.2vw,2.3rem); letter-spacing:-.025em; line-height:1; color:var(--c); font-variant-numeric:tabular-nums }
.cap__cifras span{ display:block; font-family:var(--sans); font-size:.86rem; line-height:1.45; color:#DCE3E6; margin-top:.5rem }
.cap__cifras small{ display:block; font-family:var(--sans); font-size:.74rem; color:#A9B9BD; margin-top:.4rem }
.cap__cifras--franja{ margin-top:clamp(2.5rem,5vw,4rem) }

/* 1 · COAR: foto a sangre, nítida y sin desenfoque; velo solo en la franja del texto */
.cap--coar{ padding:0 0 clamp(4.5rem,8vw,6.5rem); background:var(--noche-hondo) }
.cap__foto{ position:relative; isolation:isolate; overflow:clip; min-height:min(86vh, 50rem); display:grid; align-items:end }
.cap__foto picture{ display:block; position:absolute; inset:0; z-index:-2 }
.cap__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 40%); display:block }
.cap__foto::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg, var(--noche-hondo) 0, rgba(6,17,31,.62) 18%, rgba(6,17,31,0) 42%), linear-gradient(180deg, rgba(6,17,31,.38), rgba(6,17,31,0) 16%) }
.cap__foto-txt{ width:100%; padding-block:6rem clamp(1.8rem,3.5vw,2.8rem) }
.cap__foto-txt .cap__t,.cap__foto-lema{ text-shadow:0 2px 18px rgba(6,17,31,.55) }
.cap__foto-txt .cap__etapa{ text-shadow:0 1px 10px rgba(6,17,31,.7) }
.cap__foto-lema{ font-family:var(--lee); font-size:clamp(1.15rem,1rem + .6vw,1.5rem); line-height:1.35; color:var(--papel); margin:var(--e-sm) 0 0; max-width:34ch }
@media (max-width:47.99rem){
  .cap__foto{ min-height:0; display:block }
  .cap__foto picture{ position:relative; display:block; aspect-ratio:4 / 3 }
  .cap__foto::after{ inset:auto 0 0; height:calc(100vw * .75); background:linear-gradient(0deg, var(--noche-hondo) 0, rgba(6,17,31,0) 30%) }
  .cap__foto-txt{ padding-block:.4rem 0 }
}
.cap__coar{ padding-top:clamp(2.2rem,4vw,3.2rem) }
.cap__coar-intro{ display:grid; gap:1rem 3.5rem; align-items:start }
.cap__coar-intro .cap__lead{ margin-top:0 }
.cap__coar-d{ font-family:var(--sans); font-size:.98rem; line-height:1.65; color:#C9D4D7; max-width:60ch; margin:0 auto; text-align:center; text-wrap:balance }
@media (min-width:62rem){ .cap__coar-intro{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.cap__sub--centro{ text-align:center; margin:clamp(3rem,6vw,4.5rem) 0 clamp(1.2rem,2.5vw,1.8rem) }
/* Programas: tarjetas con ícono, nombre, una línea y un dato; rejilla centrada */
.cap__prog{ list-style:none; padding:0; margin:0 auto; display:grid; gap:1rem; grid-template-columns:repeat(5, minmax(0,1fr)); max-width:76rem }
.cap__prog li{ display:flex; flex-direction:column; gap:.55rem; padding:1.5rem 1.3rem 1.4rem; border-radius:var(--r-lg); font-family:var(--sans); text-align:left;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, rgba(244,242,238,.04)), rgba(244,242,238,.025)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, rgba(244,242,238,.08)) }
.prog__ico{ width:2.9rem; height:2.9rem; border-radius:.85rem; display:grid; place-items:center; margin-bottom:.35rem; color:var(--tinta); background:var(--c);
  box-shadow:0 12px 28px -14px color-mix(in srgb, var(--c) 85%, transparent) }
.prog__ico svg{ width:1.45rem; height:1.45rem }
.prog__t{ font-size:1.08rem; font-weight:650; line-height:1.25; color:var(--papel); letter-spacing:-.01em }
.prog__d{ font-size:.92rem; line-height:1.55; color:#DCE3E6 }
.prog__dato{ margin-top:auto; padding-top:.75rem; font-size:.8rem; line-height:1.45; color:#B7C6C9; border-top:1px solid rgba(244,242,238,.1) }
@media (max-width:74.99rem){ .cap__prog{ grid-template-columns:repeat(6, minmax(0,1fr)); max-width:56rem } .cap__prog li{ grid-column:span 2 } .cap__prog li:nth-child(4){ grid-column:2 / span 2 } }
@media (max-width:47.99rem){ .cap__prog{ grid-template-columns:repeat(2, minmax(0,1fr)) } .cap__prog li,.cap__prog li:nth-child(4){ grid-column:auto } .cap__prog li:nth-child(5){ grid-column:1 / -1 } }
@media (max-width:34rem){
  .cap__prog{ grid-template-columns:1fr } .cap__prog li:nth-child(5){ grid-column:auto }
  .cap__prog li{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:1rem; row-gap:.35rem; padding:1.2rem 1.15rem }
  .prog__ico{ grid-row:span 3; margin:0; width:2.6rem; height:2.6rem }
  .prog__dato{ margin-top:.3rem }
}
.cap__acciones-centro{ justify-content:center; margin-top:clamp(2rem,4vw,3rem) }
/* v16: dos programas a la vista y tres en “Ver más” (details nativo, accesible por teclado) */
.cap__prog--2,.cap__prog--3{ grid-template-columns:repeat(var(--cols), minmax(0,1fr)) }
.cap__prog--2{ --cols:2; max-width:50rem } .cap__prog--3{ --cols:3; max-width:76rem }
.cap__prog--2 li,.cap__prog--3 li,.cap__prog--2 li:nth-child(n),.cap__prog--3 li:nth-child(n){ grid-column:auto }
@media (max-width:62rem){ .cap__prog--3{ --cols:1; max-width:34rem } }
@media (max-width:40rem){ .cap__prog--2{ --cols:1; max-width:34rem } }
.cap__mas{ margin:1rem auto 0; max-width:76rem; text-align:center }
.cap__mas summary{ display:inline-flex; align-items:center; gap:.55rem; min-height:var(--toque); padding:.55rem 1.2rem; border-radius:999px; cursor:pointer; list-style:none;
  font-family:var(--sans); font-size:.92rem; font-weight:650; color:var(--papel); background:rgba(244,242,238,.05); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); transition:background .25s ease }
.cap__mas summary::-webkit-details-marker{ display:none }
.cap__mas summary::after{ content:""; width:.45rem; height:.45rem; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .25s ease }
.cap__mas[open] summary::after{ transform:translateY(2px) rotate(-135deg) }
.cap__mas summary:hover{ background:color-mix(in srgb, var(--c) 14%, transparent) }
.cap__mas summary:focus-visible{ outline:2px solid var(--c); outline-offset:3px }
.cap__mas .cap__prog{ margin-top:1rem }
@media (prefers-reduced-motion:reduce){ .cap__mas summary,.cap__mas summary::after{ transition:none } }

/* 2 · Escuela */
.cap--vistas{ background:radial-gradient(60% 50% at 85% 30%, color-mix(in srgb, var(--c) 13%, transparent), transparent 70%), var(--noche) }
.cap__vistas{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) }
.cap__vistas li{ padding:1.3rem 1.3rem 1.4rem; border-radius:var(--r-lg); background:rgba(244,242,238,.04); box-shadow:inset 0 0 0 1px rgba(244,242,238,.1) }
.vista__ico{ display:grid !important; place-items:center; width:2.5rem; height:2.5rem; margin:0 0 .8rem !important; border-radius:.75rem; color:var(--c); background:color-mix(in srgb, var(--c) 15%, var(--noche)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent) }
.vista__ico svg{ width:1.3rem; height:1.3rem }
.cap__vistas b{ display:block; font-family:var(--sans); font-size:1.1rem; font-weight:650; color:var(--papel) }
.cap__vistas span{ display:block; font-family:var(--sans); font-size:.9rem; line-height:1.55; color:#C9D4D7; margin-top:.4rem }
.cap__semanas{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem }
.cap__semanas li{ display:grid; grid-template-columns:auto 6rem minmax(0,1fr); gap:.2rem 1rem; align-items:center; padding:.85rem 1.1rem; border-radius:var(--r-lg);
  font-family:var(--sans); font-size:.9rem; line-height:1.5; background:rgba(244,242,238,.04); box-shadow:inset 0 0 0 1px rgba(244,242,238,.09) }
.sem__n{ display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:.6rem; font-weight:700; font-size:.85rem; color:var(--tinta); background:var(--c) }
.cap__semanas b{ color:var(--c); font-weight:700 }
.cap__semanas span{ color:#DCE3E6 }
.cap__semanas .sem__n{ color:var(--tinta) }
@media (max-width:30rem){ .cap__semanas li{ grid-template-columns:auto minmax(0,1fr) } .cap__semanas li > span:last-child{ grid-column:2 } }

/* 3 · Brújula: centrada */
.cap--centro{ text-align:center }
.cap__fondo--tenue img{ opacity:.3 }
.cap--centro::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(55% 50% at 50% 40%, color-mix(in srgb, var(--c) 15%, transparent), transparent 70%), linear-gradient(rgba(6,17,31,.72), rgba(6,17,31,.92)) }
.cap__centro{ display:grid; justify-items:center; gap:clamp(2rem,4vw,3rem) }
.cap--centro .cap__etapa{ flex-direction:column; justify-content:center; gap:.7rem }
.cap--centro .cap__lead{ margin-inline:auto; border-left:0; padding-left:0; max-width:48ch; text-wrap:pretty }
.cap__grande b{ display:block; font-family:var(--sans); font-weight:640; font-size:clamp(4.2rem,2.6rem + 5.5vw,7.5rem); letter-spacing:-.045em; line-height:.9; color:var(--c);
  text-shadow:0 0 80px color-mix(in srgb, var(--c) 40%, transparent) }
.cap__grande span{ display:block; font-family:var(--sans); font-size:clamp(.98rem,.95rem + .25vw,1.12rem); color:#DCE3E6; margin-top:.8rem }
.cap__grande small{ display:block; font-family:var(--sans); font-size:.76rem; color:#A9B9BD; margin-top:.4rem }
.cap__modulos{ width:min(100%, 56rem) }
.bmods{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; grid-template-columns:repeat(6, minmax(0,1fr)) }
.bmods li{ display:grid; grid-template-rows:auto 1fr auto; gap:.45rem; padding:1rem .9rem .95rem; border-radius:var(--r-lg); text-align:left; font-family:var(--sans);
  background:rgba(6,17,31,.6); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent) }
.bmods__min{ font-size:1.5rem; font-weight:650; line-height:1; letter-spacing:-.02em; color:var(--c); font-variant-numeric:tabular-nums }
.bmods__min small{ font-size:.72rem; font-weight:600; letter-spacing:0; margin-left:.15rem; color:#DCE3E6 }
.bmods b{ font-size:.86rem; font-weight:650; color:var(--papel); line-height:1.25; align-self:start }
.bmods i{ display:block; height:4px; border-radius:4px; background:rgba(244,242,238,.1); overflow:hidden }
.bmods i::after{ content:""; display:block; height:100%; width:calc(var(--min) / 8 * 100%); background:var(--c); border-radius:4px }
.cap__bases{ font-family:var(--sans); font-size:.8rem; line-height:1.55; color:#A9B9BD; margin:.9rem auto 0; max-width:64ch }
@media (max-width:63.99rem){ .bmods{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
@media (max-width:30rem){ .bmods{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.cap__par{ display:grid; gap:1rem; width:min(100%, 56rem); text-align:left }
@media (min-width:48rem){ .cap__par{ grid-template-columns:1fr 1fr } }
.cap__ficha{ padding:1.35rem 1.45rem; border-radius:var(--r-lg); background:rgba(6,17,31,.72); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); font-family:var(--sans) }
.cap__ficha b{ display:block; font-size:1.08rem; font-weight:650; color:var(--papel) }
.cap__ficha span{ display:block; font-size:.9rem; line-height:1.55; color:#C9D4D7; margin-top:.35rem }
.cap__recibe{ list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.45rem }
.cap__recibe li{ display:grid; grid-template-columns:auto 1fr; gap:.65rem; align-items:baseline; font-size:.9rem; line-height:1.45; color:#DCE3E6 }
.cap__recibe li::before{ content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--c); transform:translateY(-.1rem) }
.cap__ficha--fecha{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.2rem; align-items:center }
.cap__cal{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; width:4.4rem; height:4.6rem; margin:0 !important; border-radius:.9rem;
  background:var(--c); color:var(--tinta) !important; text-align:center; box-shadow:0 12px 30px -10px color-mix(in srgb, var(--c) 70%, transparent) }
.cap__cal-d{ display:block; margin:0 !important; font-size:1.85rem !important; font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--tinta) !important }
.cap__cal-m{ display:block; margin:.25rem 0 0 !important; padding-left:.14em; font-size:.7rem !important; font-weight:700; line-height:1; letter-spacing:.01em; text-transform:none; color:var(--tinta) !important }
.cap--centro .eco__acciones{ justify-content:center }

/* 4 · Propósito (v15): foto a sangre como fondo del capítulo con velo degradado.
   Escritorio: la foto ocupa la mitad izquierda, entera (3:2, sin recortar a nadie) y se funde
   arriba, abajo y hacia la derecha; el velo es casi transparente sobre los profesores y noche
   plena bajo la columna de texto, de modo que el contraste del texto no depende de la foto.
   Móvil: la foto arriba, a todo el ancho, fundida hacia abajo; el texto debajo sobre color liso. */
.cap--velo{ background:var(--noche) }
.cap__velo-foto{ margin:0; position:relative; z-index:-2 }
.cap__velo-foto picture{ display:block }
.cap__velo-foto img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; object-position:var(--pos,50% 50%);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent); mask-image:linear-gradient(180deg,#000 62%,transparent) }
.cap__velo-foto figcaption{ font-family:var(--sans); font-size:.76rem; line-height:1.4; color:#C9D4D7; padding:.5rem var(--canal) 0; margin-top:-1.6rem; position:relative }
@media (max-width:61.99rem){
  .cap--velo{ padding-top:0 }
  .cap__velo-rej{ margin-top:var(--e-lg) }
}
@media (min-width:62rem){
  .cap--velo{ display:grid; align-items:center; min-height:min(60rem, 100vh) }
  .cap__velo-foto{ position:absolute; left:0; top:50%; translate:0 -50%; width:58vw; max-width:74rem }
  .cap__velo-foto img{
    -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent), linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,#000 80%,transparent), linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
    mask-composite:intersect }
  .cap__velo-foto figcaption{ position:absolute; left:var(--canal); bottom:.4rem; margin:0; padding:0; color:#B8C6CA }
  /* velo: ligero sobre los profesores, denso bajo el texto */
  .cap--velo::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(90deg, rgba(10,26,47,.06) 0, rgba(10,26,47,.08) 45%, rgba(10,26,47,.84) 54.5%, var(--noche) 62%),
               radial-gradient(40% 55% at 82% 50%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%) }
  .cap__velo-rej{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,34rem); width:min(100%, var(--ancho)) }
  .cap__velo-rej .cap__texto{ grid-column:2 }
}
@media (min-width:62rem) and (max-width:79.99rem){
  .cap__velo-foto{ width:50vw }
  .cap--velo::before{ background:linear-gradient(90deg, rgba(10,26,47,.06) 0, rgba(10,26,47,.08) 40%, rgba(10,26,47,.84) 49%, var(--noche) 55%) }
  .cap__velo-rej{ grid-template-columns:minmax(0,1fr) minmax(0,28rem) }
}
.cap__texto{ max-width:36rem }
.cap__formatos{ list-style:none; padding:0; margin:var(--e-lg) 0 0; display:grid }
.cap__formatos li{ display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:.3rem 1.2rem; padding:.95rem 0; border-top:1px solid rgba(244,242,238,.12); font-family:var(--sans) }
.cap__formatos li:last-child{ border-bottom:1px solid rgba(244,242,238,.12) }
.cap__formatos b{ font-size:.98rem; font-weight:650; color:var(--c) }
.cap__formatos span{ font-size:.9rem; line-height:1.55; color:#C9D4D7 }
@media (max-width:30rem){ .cap__formatos li{ grid-template-columns:1fr } }
.cap__ejes{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem }
.cap__ejes li{ font-family:var(--lee); font-style:italic; font-size:.92rem; padding:.3rem .8rem; border-radius:999px; color:#E9E3F7; background:color-mix(in srgb, var(--c) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent) }

/* 5 · Lab */
.cap--datos{ background:linear-gradient(160deg, #0B2A30, var(--noche-hondo) 60%) }
@media (min-width:62rem){ .cap__rej--lab{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:start } }
.ciclo{ list-style:none; padding:0; margin:0 0 var(--e-sm); display:grid; gap:0; counter-reset:ci }
.ciclo li{ counter-increment:ci; position:relative; display:grid; grid-template-columns:2rem minmax(0,9rem) minmax(0,1fr); gap:.2rem .9rem; align-items:baseline; padding:.6rem 0; font-family:var(--sans); font-size:.88rem; line-height:1.45; border-top:1px solid rgba(244,242,238,.08) }
.ciclo li::before{ content:counter(ci, decimal-leading-zero); font-size:.74rem; font-weight:700; color:var(--c); letter-spacing:.06em }
.ciclo b{ color:var(--papel); font-weight:650 }
.ciclo span{ color:#C9D4D7 }
.ciclo li:last-child b{ color:var(--c) }
@media (max-width:30rem){ .ciclo li{ grid-template-columns:2rem minmax(0,1fr) } .ciclo span{ grid-column:2 } }
.cap__tablero{ display:grid; gap:1rem }
.cap__nivel{ font-family:var(--sans); font-size:.95rem; line-height:1.6; color:#DCE3E6; margin:0; padding:1.1rem 1.3rem; border-radius:var(--r-lg); background:rgba(244,242,238,.04); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent) }
.cap__nivel a{ color:var(--papel); font-weight:650; display:inline-flex; align-items:center; gap:.4rem; min-height:var(--toque) }
.cap__tablero .lab-escena__fuente,.lineas16 .lab-escena__fuente{ color:#A9B9BD; font-family:var(--sans); font-size:.74rem; margin:0 }
.lineas16{ border-radius:var(--r-lg); padding:clamp(1.2rem,2.5vw,1.8rem); background:rgba(244,242,238,.04); box-shadow:inset 0 0 0 1px rgba(244,242,238,.1); display:grid; gap:1rem; font-family:var(--sans) }
.lineas16__cab{ display:flex; align-items:baseline; gap:.7rem }
.lineas16__cab b{ font-size:2.2rem; font-weight:650; letter-spacing:-.03em; color:var(--c); line-height:1 }
.lineas16__cab span{ color:#DCE3E6; font-size:.92rem }
.lineas16__celdas{ display:grid; grid-template-columns:repeat(16,1fr); gap:clamp(3px,.6vw,7px) }
.lineas16 i{ display:block; aspect-ratio:1; border-radius:.3rem; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent) }
.lineas16 i.cerrada{ background:var(--c) }
.lineas16 i.curso{ background:linear-gradient(90deg, var(--c) 50%, transparent 50%) }
.lineas16__ley{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-size:.84rem; color:#DCE3E6 }
.lineas16__ley li{ display:flex; align-items:center; gap:.5rem }
.lineas16__ley i{ width:.9rem; flex:0 0 auto }
.lineas16 a{ color:var(--papel) }

/* Cada actor encuentra su espacio: selector de actor y tarjetas */
.eco-matriz{ padding-block:clamp(4.5rem,8vw,7rem) }
.eco-matriz__cab{ max-width:46rem; margin:0 auto; text-align:center }
.eco-matriz__cab .entrada{ margin:var(--e-sm) auto 0; max-width:48ch }
.actores{ margin-top:clamp(2rem,4vw,3rem) }
.actores__tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-bottom:clamp(1.5rem,3vw,2.2rem) }
.actores__tabs[hidden]{ display:none }
.actores__tabs button{ display:grid; place-items:center; min-height:3rem; padding:.6rem 1.35rem; border:0; border-radius:999px; cursor:pointer;
  font-family:var(--sans); font-size:.95rem; font-weight:650; color:var(--tinta); background:var(--blanco); box-shadow:inset 0 0 0 1px var(--filete); transition:background .25s ease, color .25s ease, box-shadow .25s ease }
.actores__tabs button span{ font-size:.7rem; font-weight:600; color:var(--mudo); letter-spacing:.02em }
.actores__tabs button:hover{ box-shadow:inset 0 0 0 1.5px var(--petroleo) }
.actores__tabs button[aria-selected="true"]{ background:var(--noche); color:var(--papel); box-shadow:0 10px 26px -12px rgba(10,26,47,.6) }
.actores__tabs button[aria-selected="true"] span{ color:var(--piedra) }
.actores__p + .actores__p{ margin-top:2.5rem }
.actores[data-listo] .actores__p + .actores__p{ margin-top:0 }
.actores__h{ font-family:var(--lee); font-weight:400; font-size:clamp(1.05rem,1rem + .3vw,1.22rem); color:var(--tinta-2, var(--tinta)); text-align:center; margin:0 auto 1.3rem; max-width:52ch }
.actores__h span{ font-family:var(--sans); font-weight:650; color:var(--tinta) }
.actores[data-listo] .actores__h span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.sirven{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr)) }
.actores__p:not([hidden]) .sirve{ animation:sirve-entra .5s var(--salida) both; animation-delay:calc(var(--n, 0) * 60ms) }
.sirve:nth-child(2){ --n:1 } .sirve:nth-child(3){ --n:2 } .sirve:nth-child(4){ --n:3 }
@keyframes sirve-entra{ from{ opacity:0; transform:translateY(10px) } }
.sirve a{ height:100%; display:grid; grid-template-rows:auto auto 1fr auto; gap:.55rem; padding:1.3rem 1.3rem 1.2rem; border-radius:var(--r-lg); text-decoration:none; color:var(--tinta);
  background:var(--blanco); box-shadow:inset 0 0 0 1px var(--filete), 0 1px 2px rgba(14,23,38,.04); position:relative; overflow:hidden; font-family:var(--sans);
  transition:box-shadow .3s ease, transform .3s var(--salida) }
.sirve a:hover,.sirve a:focus-visible{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--filete-firme), 0 22px 44px -24px rgba(14,23,38,.35) }
.sirve__cab{ display:flex; align-items:center; gap:.65rem }
.sirve__ico{ width:2.3rem; height:2.3rem; border-radius:.7rem; display:grid; place-items:center; flex:0 0 auto; background:var(--noche); color:var(--c) }
.sirve__ico svg{ width:1.2rem; height:1.2rem } .sirve__ico img{ width:1.2rem; height:auto }
.sirve__esp{ font-size:.74rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--mudo) }
.sirve__t{ font-size:1.08rem; font-weight:650; line-height:1.25; color:var(--tinta) }
.sirve__d{ font-size:.9rem; line-height:1.55; color:var(--tinta-2, #3A4554) }
.sirve__ir{ display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:650; color:var(--petroleo); margin-top:.3rem }
@media (prefers-reduced-motion:reduce){ .actores__p:not([hidden]) .sirve{ animation:none } .sirve a{ transition:none } .sirve a:hover{ transform:none } }

/* Cierre */
.eco-cierre{ padding-block:clamp(5rem,9vw,7.5rem); background:radial-gradient(45% 55% at 50% 0%, rgba(217,164,65,.14), transparent 70%), var(--noche-hondo); text-align:center }
.eco-cierre::before{ display:none }
.eco-cierre__cab{ max-width:44rem; margin-inline:auto }
.eco-cierre__cab .h2{ text-wrap:balance }
.eco-cierre__cab .entrada{ color:#C9D4D7; margin:var(--e-md) auto 0; max-width:50ch }
.eco-cierre__puertas{ list-style:none; padding:0; margin:clamp(2.5rem,5vw,3.5rem) auto 0; display:grid; gap:.8rem; grid-template-columns:repeat(5, minmax(0,1fr)); max-width:76rem }
.eco-cierre__puertas li{ display:flex }
.eco-cierre__puertas a{ flex:1; display:grid; grid-template-rows:auto auto 1fr auto; justify-items:center; gap:.35rem; padding:1.6rem 1.1rem 1.2rem; border-radius:var(--r-lg); text-decoration:none; color:var(--papel); font-family:var(--sans);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, rgba(244,242,238,.03)), rgba(244,242,238,.02)); box-shadow:inset 0 0 0 1px rgba(244,242,238,.1);
  transition:background .3s ease, box-shadow .3s ease, transform .3s var(--salida) }
.eco-cierre__puertas a:hover,.eco-cierre__puertas a:focus-visible{ background:color-mix(in srgb, var(--c) 14%, rgba(244,242,238,.04)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 24px 50px -24px color-mix(in srgb, var(--c) 55%, transparent); transform:translateY(-4px) }
.eco-cierre__puertas .iso{ width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center; color:var(--c); margin-bottom:.4rem;
  background:color-mix(in srgb, var(--c) 16%, var(--noche)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent) }
.eco-cierre__puertas .iso svg{ width:1.35rem; height:1.35rem } .eco-cierre__puertas .iso img{ width:1.4rem; height:auto }
.eco-cierre__puertas b{ font-size:1rem; font-weight:650 }
.puerta__d{ font-size:.84rem; color:#B7C6C9; line-height:1.45 }
.puerta__dom{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.7rem; padding-top:.7rem; border-top:1px solid color-mix(in srgb, var(--c) 30%, transparent); font-size:.72rem; color:var(--c); letter-spacing:.01em; overflow-wrap:anywhere }
.eco-cierre__acc{ justify-content:center; margin-top:clamp(2rem,4vw,3rem) }
@media (max-width:63.99rem){ .eco-cierre__puertas{ grid-template-columns:repeat(6, minmax(0,1fr)) } .eco-cierre__puertas li{ grid-column:span 2 } .eco-cierre__puertas li:nth-child(4){ grid-column:2 / span 2 } }
@media (max-width:40rem){
  .eco-cierre__puertas{ grid-template-columns:1fr } .eco-cierre__puertas li,.eco-cierre__puertas li:nth-child(4){ grid-column:auto }
  .eco-cierre__puertas a{ grid-template-columns:auto minmax(0,1fr); grid-template-rows:none; justify-items:start; text-align:left; column-gap:1rem; align-items:center; padding:1rem 1.1rem }
  .eco-cierre__puertas .iso{ grid-row:span 3; margin:0 }
  .puerta__dom{ margin-top:.2rem; padding-top:0; border-top:0 }
}
@media (prefers-reduced-motion:reduce){ .eco-cierre__puertas a{ transition:none } .eco-cierre__puertas a:hover{ transform:none } }

/* El foco nunca queda debajo de la navegación ni de la tira fija */
.reco__paso a{ scroll-margin-top:calc(var(--alto-nav) + 2rem); scroll-margin-bottom:2rem }
@media (max-width:63.99rem){ .reco__paso a{ scroll-margin-top:calc(var(--alto-nav) + 6rem) } }

/* v24 · rótulos en tipo de oración con cuerpo propio. Clases que solo usa /ecosistema/. */
.orb__ficha small{ font-size:.9em; font-weight:600; color:#B7C6C9 }
.sirve__esp{ font-size:.9rem; letter-spacing:0 }
.cap__cal-m{ font-size:.8rem; letter-spacing:0 }