/* ============================================================
   06 · ECOSISTEMA — carrusel rotativo sin fin de «puertas»
   Base (sin JS): lista horizontal nativa con scroll-snap.
   .is-car   → carrusel rotativo (coverflow sobrio con perspectiva); lo activa el JS, también en celular.
   .is-still → movimiento reducido: mismo carrusel, sin autoavance ni transiciones.
   .is-flow  → táctil: ola de oro al asentarse la puerta activa.
   ============================================================ */
#ecosistema{
  --eco-pad:max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
  --eco-gap:clamp(14px,1.6vw,26px);
  --eco-k:3;--eco-n:3.4; /* caben k puertas completas y se asoma ~40 % de la siguiente */
  --eco-w:max(260px, calc((100vw - var(--eco-pad) - var(--eco-k) * var(--eco-gap)) / var(--eco-n)));
  --eco-h:clamp(420px,56vh,680px);
  --eco-st:28px;           /* ritmo: las puertas pares arrancan un poco más abajo */
  overflow:clip;
  background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 50%,var(--ink) 100%);
  padding-block:clamp(76px,8vw,124px);
}
#ecosistema .eco__glow{
  position:absolute;left:50%;top:38%;width:min(1500px,130vw);aspect-ratio:2.2/1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(216,166,70,.13),rgba(216,166,70,.04) 55%,transparent 100%);
  pointer-events:none;
}

/* ---------- Cabecera ---------- */
#ecosistema .eco__head{
  position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:32px 48px;flex-wrap:wrap;
  margin-bottom:clamp(26px,2.8vw,44px);
}
#ecosistema .eco__title{margin-top:20px;font-size:clamp(2.5rem,5.4vw,5.2rem)}
#ecosistema .eco__title .tn-line{padding-bottom:.12em;margin-bottom:-.12em}
#ecosistema .eco__lead{margin-top:18px;max-width:64ch}

#ecosistema .eco__ctrl{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);padding-bottom:6px}
#ecosistema .eco__count{
  margin:0;display:flex;align-items:center;gap:12px;
  font:700 .82rem/1 var(--sans);letter-spacing:.14em;font-variant-numeric:tabular-nums lining-nums;color:var(--mute);
}
#ecosistema .eco__count b{color:var(--gold-2);font-size:1.5rem;letter-spacing:-.01em;font-weight:700;min-width:2ch;text-align:right;white-space:nowrap}
#ecosistema .eco__count i{width:34px;height:1px;background:var(--line-2)}
#ecosistema .eco__play{display:none}
#ecosistema.is-car:not(.is-still) .eco__play{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;min-width:11.6em;padding:0 20px 0 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(243,234,219,.03);color:var(--cream);
  font:700 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .5s var(--ease),color .5s var(--ease),background-color .5s var(--ease);
}
#ecosistema .eco__play svg{width:18px;height:18px;flex:none;color:var(--gold-2)}
#ecosistema .eco__play .eco__ic-b{fill:currentColor;stroke-width:1.2}
#ecosistema .eco__play-b,#ecosistema .eco__play .eco__ic-b{display:none}
#ecosistema.is-paused .eco__play-a,#ecosistema.is-paused .eco__play .eco__ic-a{display:none}
#ecosistema.is-paused .eco__play-b,#ecosistema.is-paused .eco__play .eco__ic-b{display:inline}
#ecosistema.is-paused .eco__play{border-color:var(--hair);color:var(--gold-2)}
@media (hover:hover){ #ecosistema .eco__play:hover{border-color:var(--gold-2);color:var(--gold-2);background:rgba(244,213,138,.06)} }
#ecosistema .eco__play:focus-visible,#ecosistema .eco__arrow:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
#ecosistema .eco__arrows{display:flex;gap:10px}
#ecosistema .eco__arrow{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(243,234,219,.03);color:var(--cream);
  transition:border-color .5s var(--ease),color .5s var(--ease),background-color .5s var(--ease),opacity .4s,transform .6s var(--ease);
}
#ecosistema .eco__arrow svg{width:20px;height:20px;transition:transform .6s var(--ease)}
@media (hover:hover){
  #ecosistema .eco__arrow:hover{border-color:var(--gold-2);color:var(--ink);background:var(--gold-2)}
  #ecosistema .eco__arrow--next:hover svg{transform:translateX(3px)}
  #ecosistema .eco__arrow--prev:hover svg{transform:translateX(-3px)}
}
#ecosistema .eco__arrow:active{transform:scale(.94)}
#ecosistema .eco__arrow:disabled{opacity:.3;cursor:default;pointer-events:none}

/* ---------- Galería ---------- */
#ecosistema .eco__view{position:relative}
#ecosistema .eco__track{
  list-style:none;margin:0;display:flex;gap:var(--eco-gap);
  padding:10px var(--eco-pad) 72px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--eco-pad);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
#ecosistema .eco__track::-webkit-scrollbar{display:none}
#ecosistema .eco__item{flex:0 0 auto;width:var(--eco-w);scroll-snap-align:start}

#ecosistema .eco__door{
  position:relative;display:block;height:var(--eco-h);border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:var(--ink-3);color:var(--cream);
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);
  --eco-b:.88;--eco-s:.96;   /* luz de la imagen (registradas con @property para poder transicionarlas junto al filtro de aceite) */
  transition:transform .9s var(--ease),box-shadow .9s var(--ease),--eco-b 1.1s var(--ease),--eco-s 1.1s var(--ease);
}
#ecosistema .eco__door::after{ /* hilo base */
  content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--line);pointer-events:none;z-index:3;
}
#ecosistema .eco__door:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px;border-radius:var(--r)}

#ecosistema .eco__media{position:absolute;inset:0;z-index:0;overflow:hidden}
/* .eco__pan: lo que viaja (parallax), se abre y recibe el aceite; dentro van la imagen y, encima, el video */
#ecosistema .eco__pan{
  position:absolute;top:0;left:-9%;width:118%;height:100%;display:block;
  filter:brightness(var(--eco-b)) saturate(var(--eco-s));transform:scale(1.04);
  transition:scale 1.6s var(--ease);pointer-events:none;
}
#ecosistema .eco__pan picture{display:contents}
#ecosistema .eco__pan img,#ecosistema .eco__pan video{
  position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;
  object-position:var(--eco-fx,50%) var(--eco-fy,50%);-webkit-user-drag:none;pointer-events:none;
}
/* video de la puerta: funde sobre su imagen (mismo encuadre, primer cuadro idéntico) */
#ecosistema .eco__vid{opacity:0;transition:opacity .6s ease;background:transparent}
#ecosistema .eco__vid.is-on{opacity:1}
@media (max-width:899px){
  #ecosistema .eco__media--v{--eco-fx:50% !important;--eco-fy:50% !important}   /* imagen y video verticales: sin recorte lateral */
}
#ecosistema .eco__shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,9,15,.82) 0%,rgba(5,9,15,.46) 12%,rgba(5,9,15,0) 28%),
    linear-gradient(180deg,rgba(5,9,15,0) 36%,rgba(5,9,15,.5) 52%,rgba(5,9,15,.8) 66%,rgba(5,9,15,.96) 100%);
}

/* hilo de oro que se dibuja */
#ecosistema .eco__ring{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
#ecosistema .eco__ring rect{
  x:.75px;y:.75px;width:calc(100% - 1.5px);height:calc(100% - 1.5px);rx:23px;
  fill:none;stroke:var(--gold-2);stroke-width:1.5;stroke-dasharray:1 1.2;stroke-dashoffset:1.1;   /* oculto con holgura: sin pelo en la costura del trazo */
  transition:stroke-dashoffset 1.5s var(--ease-io);
}

#ecosistema .eco__top{
  position:absolute;z-index:2;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;
  padding:clamp(18px,1.7vw,26px) clamp(20px,1.9vw,30px);
}
#ecosistema .eco__n{font:700 .8rem/1 var(--sans);letter-spacing:.2em;color:var(--gold-2);font-variant-numeric:tabular-nums lining-nums;text-shadow:0 0 14px rgba(5,9,15,.95),0 1px 4px rgba(5,9,15,.9),0 0 2px rgba(5,9,15,.8)}

#ecosistema .eco__body{
  position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  padding:clamp(20px,1.9vw,30px);
}
#ecosistema .eco__name{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.55rem,2.05vw,2.15rem);line-height:1.04;letter-spacing:-.02em;
  text-wrap:balance;text-shadow:0 2px 22px rgba(5,9,15,.6);
}
#ecosistema .eco__text{
  margin-top:12px;font-size:clamp(.94rem,1vw,1.02rem);line-height:1.5;color:var(--cream);opacity:.86;max-width:32ch;text-wrap:pretty;text-shadow:0 1px 14px rgba(5,9,15,.7);
}
#ecosistema .eco__cta{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:border-color .8s var(--ease);
}
#ecosistema .eco__cta-t{font:700 .7rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2)}
#ecosistema .eco__cta-i{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--hair);color:var(--gold-2);
  transition:background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease);
}
#ecosistema .eco__cta-i svg{width:18px;height:18px;transition:transform .7s var(--ease)}

/* estado activo: mouse o teclado */
@media (hover:hover){
  #ecosistema .eco__door:hover{transform:translateY(-8px);box-shadow:0 34px 56px -38px rgba(216,166,70,.42)}
  #ecosistema .eco__door:hover{--eco-b:1.06;--eco-s:1.06}
  #ecosistema .eco__door:hover .eco__pan{scale:1.05}
  #ecosistema .eco__door:hover .eco__ring rect{stroke-dashoffset:0}
  #ecosistema .eco__door:hover .eco__cta{border-color:var(--hair)}
  #ecosistema .eco__door:hover .eco__cta-i{background:var(--gold-2);border-color:var(--gold-2);color:var(--ink)}
  #ecosistema .eco__door:hover .eco__cta-i svg{transform:translateX(3px)}
  #ecosistema .eco__door:hover .eco__cta-i--ext svg{transform:translate(2px,-2px)}
}
#ecosistema .eco__door:focus-visible{--eco-b:1.06;--eco-s:1.06}
#ecosistema .eco__door:focus-visible .eco__pan{scale:1.05}
#ecosistema .eco__door:focus-visible .eco__ring rect{stroke-dashoffset:0}
#ecosistema .eco__door:focus-visible .eco__cta-i{background:var(--gold-2);border-color:var(--gold-2);color:var(--ink)}

/* ---------- Pie: progreso (un segmento por puerta, clicable; el de la activa se llena mientras descansa al frente) ---------- */
#ecosistema .eco__foot{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(20px,3vw,48px)}
#ecosistema .eco__dots{flex:1;display:flex;gap:clamp(4px,.6vw,10px);list-style:none;margin:0;padding:0;min-width:0}
#ecosistema:not(.is-car) .eco__dots{visibility:hidden}
#ecosistema .eco__dots li{flex:1;min-width:0}
#ecosistema .eco__dot{position:relative;display:block;width:100%;height:44px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#ecosistema .eco__dot::before,#ecosistema .eco__dot i{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px}
#ecosistema .eco__dot::before{background:var(--line-2);transition:background-color .6s var(--ease),box-shadow .6s var(--ease),transform .5s var(--ease)}
#ecosistema .eco__dot i{background:var(--gold-grad);transform:scaleX(0);transform-origin:left center;box-shadow:0 0 12px rgba(244,213,138,.55);opacity:0}
@media (hover:hover){ #ecosistema .eco__dot:hover::before{background:var(--gold-3);transform:scaleY(2)} }
#ecosistema .eco__dot.is-on::before{background:var(--gold-2);box-shadow:0 0 12px rgba(244,213,138,.5)}
#ecosistema.is-run .eco__dot.is-on::before{background:rgba(244,213,138,.28);box-shadow:none}
#ecosistema.is-run .eco__dot.is-on i{opacity:1}
#ecosistema .eco__dot:focus-visible{outline:2px solid var(--gold-2);outline-offset:-8px;border-radius:10px}
#ecosistema .eco__hint{
  margin:0;display:flex;align-items:center;gap:12px;flex:none;
  font:600 .7rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
}
#ecosistema .eco__hint svg{width:34px;height:12px;color:var(--gold-2)}
#ecosistema .eco__hint-m{display:none}

/* ---------- Carrusel rotativo (.is-car) ---------- */
#ecosistema.is-car{--eco-w:min(30vw, calc(var(--eco-h) * .94), 540px)}
#ecosistema.is-car .eco__view{overflow:hidden;padding:26px 0 50px;cursor:grab;touch-action:pan-y}
#ecosistema.is-car .eco__view:active{cursor:grabbing}
#ecosistema.is-car .eco__track{
  display:block;position:relative;height:var(--eco-h);padding:0;overflow:visible;scroll-snap-type:none;
  perspective:1700px;perspective-origin:50% 46%;touch-action:pan-y;
}
#ecosistema.is-car .eco__item{
  position:absolute;left:50%;top:0;width:var(--eco-w);margin-left:calc(var(--eco-w) / -2);
  will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
#ecosistema.is-car .eco__media,#ecosistema.is-car .eco__pan{will-change:transform}
/* las vecinas se apagan un punto; la activa queda nítida, con su marco de oro */
#ecosistema.is-car .eco__door{--eco-b:.86;--eco-s:.92}
#ecosistema.is-car .eco__door.is-act{--eco-b:1.03;--eco-s:1.03;box-shadow:0 44px 70px -46px rgba(216,166,70,.55),0 30px 60px -40px rgba(0,0,0,.9)}
#ecosistema.is-car .eco__door.is-act .eco__ring rect{stroke-dashoffset:0}
#ecosistema.is-car .eco__door.is-act .eco__cta{border-color:var(--hair)}
#ecosistema.is-car .eco__door.is-act .eco__cta-i{background:var(--gold-2);border-color:var(--gold-2);color:var(--ink)}
#ecosistema.is-car .eco__door:not(.is-act) .eco__text{opacity:.7}
@media (hover:hover){
  #ecosistema.is-car .eco__door:not(.is-act):hover{--eco-b:1;--eco-s:1}
}
/* salidas a sangre: las puertas que se alejan se funden con la tinta (y no chocan con el riel de capítulos) */
@media (min-width:900px){
  #ecosistema.is-car .eco__view{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  }
}
#ecosistema.is-dragging .eco__door{pointer-events:none}

/* ---------- Movimiento reducido (.is-still): mismo carrusel, en seco ---------- */
#ecosistema.is-still .eco__door,#ecosistema.is-still .eco__pan,#ecosistema.is-still .eco__ring rect,#ecosistema.is-still .eco__dot::before{transition-duration:.01s}
#ecosistema.is-still .eco__door:hover{transform:none}
@media (prefers-reduced-motion:reduce){
  #ecosistema .eco__door,#ecosistema .eco__pan,#ecosistema .eco__ring rect{transition-duration:.01s}
}

/* ---------- Móvil / tableta ---------- */
@media (max-width:899px){
  #ecosistema{--eco-w:78vw;--eco-h:clamp(420px,112vw,560px);--eco-gap:14px}
  #ecosistema.is-car{--eco-w:76vw}
  #ecosistema.is-car .eco__view{padding:14px 0 22px}
  #ecosistema.is-car .eco__door:not(.is-act) .eco__text{opacity:.86}
  #ecosistema .eco__head{flex-direction:column;align-items:flex-start;gap:26px;margin-bottom:22px}
  #ecosistema .eco__ctrl{width:100%;justify-content:space-between;padding-bottom:0;gap:12px}
  #ecosistema.is-car:not(.is-still) .eco__play{min-width:0;padding:0 16px 0 12px;font-size:.8rem;letter-spacing:.12em}
  #ecosistema .eco__count{gap:9px}
  #ecosistema .eco__eyebrow{font-size:.75rem}
  #ecosistema .eco__count i{width:18px}
  #ecosistema .eco__arrow{width:48px;height:48px}
  #ecosistema .eco__name{font-size:clamp(1.7rem,7.2vw,2.1rem)}
  #ecosistema .eco__text{font-size:.98rem}
  #ecosistema .eco__door{--eco-b:.86;--eco-s:.95}
  #ecosistema .eco__track{padding-bottom:26px}
  #ecosistema .eco__dots{flex:none;width:100%;gap:5px}
  #ecosistema .eco__hint-d{display:none}
  #ecosistema .eco__hint-m{display:inline}
  #ecosistema .eco__foot{flex-direction:column;align-items:flex-start;gap:6px}
  #ecosistema .eco__hint{font-size:.94rem;letter-spacing:.12em;transition:opacity .6s var(--ease)}
  #ecosistema .eco__cta-t{font-size:.94rem;letter-spacing:.14em}
  #ecosistema .eco__n{font-size:.94rem;letter-spacing:.14em}
  #ecosistema .eco__count{font-size:.94rem}
}
@media (min-width:600px) and (max-width:899px){
  #ecosistema{--eco-w:46vw;--eco-h:clamp(440px,64vw,560px)}
  #ecosistema.is-car{--eco-w:46vw}
}
/* riel de capítulos: aire a la derecha en lo que va pegado al borde */
@media (min-width:1100px){
  /* cabecera en una sola línea: titular a la izquierda, controles (contador, pausa, flechas) a la derecha */
  #ecosistema .eco__head{flex-wrap:nowrap}
  #ecosistema .eco__intro{flex:1 1 auto;min-width:0}
  #ecosistema .eco__ctrl{flex:none}
  #ecosistema .eco__title{font-size:clamp(2.5rem,4.6vw,4.25rem)}
  #ecosistema .eco__foot,#ecosistema .eco__head{padding-right:calc(var(--gut) + 40px)}
}
/* pantallas bajas: que cabecera + galería + pie quepan en una vista */
@media (min-width:900px) and (max-height:920px){
  #ecosistema{--eco-h:clamp(400px,50vh,680px);padding-block:clamp(64px,6.4vw,96px)}
  #ecosistema .eco__title{font-size:clamp(2.4rem,4.9vw,4.7rem)}
  #ecosistema .eco__head{margin-bottom:26px}
}
@media (min-width:900px) and (max-height:780px){
  #ecosistema{--eco-h:clamp(330px,48vh,700px);--eco-st:20px;padding-block:clamp(56px,5.6vw,84px)}
  #ecosistema .eco__title{font-size:clamp(2.2rem,4.2vw,4rem);margin-top:14px}
  #ecosistema .eco__lead{margin-top:12px}
  #ecosistema .eco__head{margin-bottom:18px}
  #ecosistema .eco__cta{margin-top:14px;padding-top:12px}
  #ecosistema .eco__text{margin-top:8px}
  /* tarjeta baja: el texto ocupa más proporción, el velo empieza antes */
  #ecosistema .eco__shade{background:
    linear-gradient(180deg,rgba(5,9,15,.82) 0%,rgba(5,9,15,.46) 14%,rgba(5,9,15,0) 31%),
    linear-gradient(180deg,rgba(5,9,15,0) 24%,rgba(5,9,15,.56) 44%,rgba(5,9,15,.84) 60%,rgba(5,9,15,.96) 100%)}
}

/* ============================================================
   ORO LÍQUIDO — carácter «aceite» (nada de esto corre con movimiento reducido)
   ============================================================ */
@property --eco-b{syntax:"<number>";inherits:true;initial-value:.88}
@property --eco-s{syntax:"<number>";inherits:true;initial-value:.96}
#ecosistema .eco__defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
#ecosistema .eco__media{transform-origin:50% 50%}

/* (c) reflejo de oro líquido que recorre el hilo del marco de la puerta activa.
   Cometa de trazos sobre el mismo recorrido del hilo (velocidad uniforme en lados y esquinas): cola larga de oro viejo que se
   afina hasta un núcleo casi blanco, un eco más tenue en el lado opuesto y un halo que derrama luz hacia dentro de la imagen.
   El SVG va espejado: los trazos avanzan «hacia atrás» y así todas las capas comparten la cabeza. */
#ecosistema .eco__sheen{
  position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;overflow:visible;
  transform:scaleX(-1);opacity:0;transition:opacity .9s var(--ease);
}
#ecosistema .eco__sh{
  x:.75px;y:.75px;width:calc(100% - 1.5px);height:calc(100% - 1.5px);rx:23px;
  fill:none;stroke-linecap:butt;stroke-dashoffset:0;
}
/* cola: 18 capas de largo decreciente que comparten la cabeza; al apilarse la opacidad cae de forma continua (sin escalones)
   y el color pasa de oro viejo a oro pálido. Extremos redondos + desenfoque mínimo: se lee como un reflejo, no como una barra. */
#ecosistema .eco__sh--t{stroke-opacity:.22;stroke-linecap:round}
#ecosistema .eco__tail{filter:blur(.45px)}
#ecosistema .eco__sh--t:nth-child(1){stroke:#B88830;stroke-width:1.60;stroke-dasharray:0.3720 0.6280}
#ecosistema .eco__sh--t:nth-child(2){stroke:#C08F35;stroke-width:1.64;stroke-dasharray:0.3417 0.6583}
#ecosistema .eco__sh--t:nth-child(3){stroke:#C7963A;stroke-width:1.68;stroke-dasharray:0.3123 0.6877}
#ecosistema .eco__sh--t:nth-child(4){stroke:#CF9D40;stroke-width:1.72;stroke-dasharray:0.2837 0.7163}
#ecosistema .eco__sh--t:nth-child(5){stroke:#D6A445;stroke-width:1.76;stroke-dasharray:0.2560 0.7440}
#ecosistema .eco__sh--t:nth-child(6){stroke:#DDAE52;stroke-width:1.81;stroke-dasharray:0.2293 0.7707}
#ecosistema .eco__sh--t:nth-child(7){stroke:#E4B962;stroke-width:1.85;stroke-dasharray:0.2035 0.7965}
#ecosistema .eco__sh--t:nth-child(8){stroke:#EAC472;stroke-width:1.89;stroke-dasharray:0.1788 0.8212}
#ecosistema .eco__sh--t:nth-child(9){stroke:#F1CF82;stroke-width:1.93;stroke-dasharray:0.1552 0.8448}
#ecosistema .eco__sh--t:nth-child(10){stroke:#F5D78F;stroke-width:1.97;stroke-dasharray:0.1327 0.8673}
#ecosistema .eco__sh--t:nth-child(11){stroke:#F6DC9A;stroke-width:2.01;stroke-dasharray:0.1114 0.8886}
#ecosistema .eco__sh--t:nth-child(12){stroke:#F8E1A5;stroke-width:2.05;stroke-dasharray:0.0915 0.9085}
#ecosistema .eco__sh--t:nth-child(13){stroke:#FAE5B0;stroke-width:2.09;stroke-dasharray:0.0730 0.9270}
#ecosistema .eco__sh--t:nth-child(14){stroke:#FBEABA;stroke-width:2.14;stroke-dasharray:0.0562 0.9438}
#ecosistema .eco__sh--t:nth-child(15){stroke:#FCEDC3;stroke-width:2.18;stroke-dasharray:0.0411 0.9589}
#ecosistema .eco__sh--t:nth-child(16){stroke:#FDF0CB;stroke-width:2.22;stroke-dasharray:0.0282 0.9718}
#ecosistema .eco__sh--t:nth-child(17){stroke:#FEF3D4;stroke-width:2.26;stroke-dasharray:0.0179 0.9821}
#ecosistema .eco__sh--t:nth-child(18){stroke:#FFF6DC;stroke-width:2.30;stroke-dasharray:0.0120 0.9880}
/* eco en el lado opuesto: mismo desvanecido, ~30 % de presencia */
#ecosistema .eco__sh--e{stroke:#F4D58A;stroke-opacity:.07;stroke-width:1.6;stroke-linecap:round;stroke-dashoffset:.5}
#ecosistema .eco__echo{filter:blur(.6px)}
#ecosistema .eco__sh--e:nth-child(1){stroke-dasharray:0.1820 0.8180}
#ecosistema .eco__sh--e:nth-child(2){stroke-dasharray:0.1310 0.8690}
#ecosistema .eco__sh--e:nth-child(3){stroke-dasharray:0.0871 0.9129}
#ecosistema .eco__sh--e:nth-child(4){stroke-dasharray:0.0512 0.9488}
#ecosistema .eco__sh--e:nth-child(5){stroke-dasharray:0.0249 0.9751}
#ecosistema .eco__sh--e:nth-child(6){stroke-dasharray:0.0120 0.9880}
#ecosistema .eco__sh--t4{stroke:#FFE9B4;stroke-opacity:.4;stroke-width:2.3;stroke-linecap:round;stroke-dasharray:.012 .988}
#ecosistema .eco__sh--core{
  stroke:#FFEFC4;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.003 .997;
  filter:drop-shadow(0 0 3px #FFE09A) drop-shadow(0 0 10px rgba(244,205,120,.95)) drop-shadow(0 0 20px rgba(232,186,96,.55));
}
#ecosistema .eco__sh--glow{stroke:#F4D58A;stroke-opacity:.72;stroke-width:20;stroke-linecap:round;stroke-dasharray:.1 .9;filter:blur(14px)}
/* mientras corre el reflejo, el anillo fijo baja a oro viejo: el destello se lee encima */
#ecosistema .eco__ring rect{transition:stroke-dashoffset 1.5s var(--ease-io),stroke 1.2s var(--ease),stroke-opacity 1.2s var(--ease)}
@media (hover:hover){
  #ecosistema:not(.is-still) .eco__door:hover .eco__ring rect{stroke:var(--gold-3);stroke-opacity:.5}
}
#ecosistema:not(.is-still) .eco__door:focus-visible .eco__ring rect{stroke:var(--gold-3);stroke-opacity:.5}
#ecosistema:not(.is-still) .eco__door.is-lit .eco__ring rect{stroke:var(--gold);stroke-opacity:.62}
@keyframes eco-run{to{stroke-dashoffset:1}}
@keyframes eco-run-b{from{stroke-dashoffset:.5}to{stroke-dashoffset:1.5}}
@media (hover:hover){
  #ecosistema:not(.is-still) .eco__door:hover .eco__sheen{opacity:1}
  #ecosistema:not(.is-still) .eco__door:hover .eco__sh{animation:eco-run 6.4s linear infinite}
  #ecosistema:not(.is-still) .eco__door:hover .eco__sh--e{animation-name:eco-run-b}
}
#ecosistema:not(.is-still) .eco__door:focus-visible .eco__sheen,
#ecosistema:not(.is-still) .eco__door.is-lit .eco__sheen{opacity:1}
#ecosistema:not(.is-still) .eco__door:focus-visible .eco__sh,
#ecosistema:not(.is-still) .eco__door.is-lit .eco__sh{animation:eco-run 6.4s linear infinite}
#ecosistema:not(.is-still) .eco__door:focus-visible .eco__sh--e,
#ecosistema:not(.is-still) .eco__door.is-lit .eco__sh--e{animation-name:eco-run-b}
#ecosistema.is-dragging .eco__sheen{opacity:0}
@media (max-width:899px){
  #ecosistema .eco__sh--glow{display:none}
  /* cabeza corta y suave: en el borde del teléfono no debe leerse como una barrita blanca */
  #ecosistema .eco__sh--core{stroke-width:2.1;stroke-opacity:.85;stroke-dasharray:.002 .998;filter:drop-shadow(0 0 3px rgba(255,224,154,.95)) drop-shadow(0 0 7px rgba(232,186,96,.6))}
  #ecosistema .eco__sh--t4{stroke-opacity:.22;stroke-dasharray:.007 .993}
  #ecosistema .eco__tail,#ecosistema .eco__echo{filter:none}
}
/* celular: al asentarse la puerta centrada, una ola de oro líquido barre la imagen una vez (bajo el velo: el texto no se toca) */
#ecosistema.is-flow .eco__media::after{
  content:"";position:absolute;inset:-12% -70%;pointer-events:none;opacity:0;mix-blend-mode:screen;transform:translate3d(-62%,0,0);
  background:
    linear-gradient(104deg,transparent 49.2%,rgba(255,236,180,.85) 50.1%,rgba(255,224,150,.5) 50.6%,transparent 51.4%),
    linear-gradient(104deg,transparent 30%,rgba(216,166,70,.1) 38%,rgba(232,186,96,.3) 46%,rgba(244,205,120,.5) 50%,rgba(216,166,70,.08) 52.5%,transparent 56%);
}
#ecosistema.is-flow.is-seen .eco__door.is-lit .eco__media::after{animation:eco-wash 2.1s cubic-bezier(.45,.05,.2,1) .2s 1 both}
@keyframes eco-wash{0%{transform:translate3d(-62%,0,0);opacity:0}16%{opacity:1}80%{opacity:1}100%{transform:translate3d(62%,0,0);opacity:0}}
@media (prefers-reduced-motion:reduce){ #ecosistema .eco__sheen{display:none} }
#ecosistema.is-still .eco__sheen{display:none}

/* (d) titular: cada palabra es un cauce grabado que se llena de oro; el oro se enfría a crema (el acento se queda en oro) */
#ecosistema .eco__title.is-liq em{background:none;animation:none}
#ecosistema .eco__title.is-liq .tn-word{
  padding:.17em .07em;margin:-.17em -.07em;
  background:var(--gold-grad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:tn-shine 8s ease-in-out infinite;
}
#ecosistema .eco__title.is-pour .tn-word{
  --eco-ly:1.5;--eco-wx:0;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 300' preserveAspectRatio='none'%3E%3Cpath d='M0 8Q25 -3 50 8T100 8V300H0Z'/%3E%3C/svg%3E"),linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2));
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 300' preserveAspectRatio='none'%3E%3Cpath d='M0 8Q25 -3 50 8T100 8V300H0Z'/%3E%3C/svg%3E"),linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2));
  -webkit-mask-size:1.5em 3.2em,100% 100%;mask-size:1.5em 3.2em,100% 100%;
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-position:calc(var(--eco-wx) * 1em) calc(var(--eco-ly) * 1em),0 0;mask-position:calc(var(--eco-wx) * 1em) calc(var(--eco-ly) * 1em),0 0;
}
#ecosistema .eco__title.is-liq .tn-word.is-cool{-webkit-text-fill-color:var(--cream);transition:-webkit-text-fill-color 1.3s ease}
#ecosistema .eco__title.is-done .tn-word.is-cool{background:none;animation:none}

/* ---------- Ronda 3 · pulido ---------- */
/* texto según la distancia al frente (--eco-t lo pone el JS): las puertas lejanas quedan solo como imagen, sin letras cortadas en los bordes */
#ecosistema.is-car .eco__body,#ecosistema.is-car .eco__top{opacity:var(--eco-t,1);will-change:opacity}   /* capa propia: el fundido no repinta la puerta */
/* una sola puerta con marco de oro: en las vecinas el mouse solo sube la luz (y da vida al video); marco, reflejo y botón lleno son de la activa */
@media (hover:hover){
  #ecosistema.is-car .eco__door:not(.is-act):hover{transform:none;box-shadow:0 30px 60px -40px rgba(0,0,0,.9)}
  #ecosistema.is-car .eco__door:not(.is-act):hover .eco__pan{scale:1.02}
  #ecosistema.is-car .eco__door:not(.is-act):hover .eco__ring rect{stroke-dashoffset:1.1;stroke:var(--gold-2);stroke-opacity:1}
  #ecosistema.is-car .eco__door:not(.is-act):hover .eco__cta{border-color:var(--line)}
  #ecosistema.is-car .eco__door:not(.is-act):hover .eco__cta-i{background:transparent;border-color:var(--hair);color:var(--gold-2)}
  #ecosistema.is-car .eco__door:not(.is-act):hover .eco__cta-i svg{transform:none}
  #ecosistema.is-car .eco__door:not(.is-act):hover .eco__sheen{opacity:0}
  #ecosistema.is-car .eco__door:not(.is-act):hover .eco__sh{animation:none}
}
/* «Pausar» detiene todo el movimiento: también el reflejo que recorre el marco (el video lo pausa el JS) */
#ecosistema.is-paused.is-car .eco__door.eco__door .eco__sheen .eco__sh{animation-play-state:paused}
/* imagen clara (papel): velo más alto y denso para que el titular en crema caiga siempre sobre sombra */
#ecosistema .eco__door--deep .eco__shade{background:
  linear-gradient(180deg,rgba(5,9,15,.82) 0%,rgba(5,9,15,.46) 12%,rgba(5,9,15,0) 28%),
  linear-gradient(180deg,rgba(5,9,15,0) 22%,rgba(5,9,15,.62) 40%,rgba(5,9,15,.9) 56%,rgba(5,9,15,.97) 100%)}
/* Fuera de pantalla (sin .is-seen, la pone el JS con IntersectionObserver) no corren los trazos del marco ni el brillo del titular */
#ecosistema:not(.is-seen) .eco__sh,
#ecosistema:not(.is-seen) .tn-word,
#ecosistema:not(.is-seen) .eco__title em{animation-play-state:paused!important}