/* Diapositiva 5 · Ecoesfera. La esfera de cristal es vuestro software; los servicios giran dentro.
   data-phase en .eco-layout: 1, 2, 3 (paso activo) o all (imagen fija completa). */
.eco-wrap{container-type:inline-size;width:100%}
.eco-wrap .eco-note{position:relative;z-index:1}
.ecos{--d:min(100cqw,calc(100dvh - var(--header) - var(--footer) - 150px));position:relative;width:var(--d);aspect-ratio:1;margin:0 auto}
.ecos-sphere{position:absolute;inset:0;border-radius:50%;isolation:isolate}
.ecos-floor{position:absolute;left:14%;right:14%;bottom:-6%;height:14%;border-radius:50%;background:radial-gradient(closest-side,#2cdcff3d,#1066ff1a 55%,transparent);filter:blur(10px);z-index:-2;pointer-events:none}
.ecos-body{position:absolute;inset:0;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 50%,#2cdcff1c 0 18%,transparent 40%),radial-gradient(120% 80% at 50% 108%,#1066ff5e,transparent 56%),radial-gradient(circle at 50% 42%,#0b3368 0%,#062652 42%,#041d42 70%,#021431 100%);box-shadow:inset 0 0 0 1px #9fe6ff42,inset 0 -26px 60px #2cdcff1f,inset 0 30px 70px #0000005c,0 40px 100px #000000a6,0 0 70px #2cdcff14;transition:box-shadow .9s}
.ecos-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ecos-meridian,.ecos-equator{fill:none;stroke:#8fdcff;stroke-opacity:.09;stroke-width:.25}
.ecos-orbit{fill:none;stroke-width:.45}
.ecos-pinlink{fill:none;stroke:#2cdcff;stroke-opacity:.35;stroke-width:.3;stroke-dasharray:.8 1.4;transition:stroke-opacity .5s}
.ecos-outer{fill:none;stroke:#c9b8ff;stroke-opacity:.3;stroke-width:.35;stroke-dasharray:1 1.7;transition:stroke-opacity .5s}
.ecos-dial{fill:none;stroke:#9fe9ff;stroke-opacity:.45;stroke-width:.3;stroke-dasharray:.5 1.5;transform-box:fill-box;transform-origin:center;animation:ecos-turn 40s linear infinite}
.ecos-flow{position:absolute;inset:-8%;width:116%;height:116%;pointer-events:none}
.ecos-shine{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:4;overflow:hidden}
.ecos-shine:before{content:'';position:absolute;left:15%;top:7.5%;width:31%;height:11%;border-radius:50%;background:radial-gradient(closest-side,#ffffff4a,#ffffff12 62%,#ffffff00);transform:rotate(-31deg)}
.ecos-shine:after{content:'';position:absolute;right:16%;bottom:6.5%;width:18%;height:4.5%;border-radius:50%;background:radial-gradient(closest-side,#bdf2ff38,#bdf2ff00);transform:rotate(-31deg)}
.ecos-rim{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:4;background:conic-gradient(from 215deg,transparent 0deg,#c8f3ffb8 42deg,transparent 108deg,transparent 200deg,#2cdcff45 262deg,transparent 322deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px))}

/* Núcleo: solo la marca. Su brillo respira con lo que entra. */
.ecos-core{--energy:.45;position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:2;display:grid;place-items:center;background:radial-gradient(circle at 36% 28%,#fff 0%,#f1fbff 24%,#c9f1ff 50%,#79d6f8 78%,#2ea9e8 100%);box-shadow:inset 0 -10px 22px #1066ff4d,inset 0 6px 12px #ffffffcc,0 0 36px #2cdcff59,0 18px 40px #00102e80}
.ecos-core:before{content:'';position:absolute;inset:-42%;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,#2cdcff8c,#2cdcff26 55%,#2cdcff00);opacity:var(--energy);transform:scale(calc(.82 + .3 * var(--energy)))}
.ecos-core img{width:66%;height:auto;filter:drop-shadow(0 1px 0 #ffffffa6)}

/* Servicios: cápsulas de cristal en una órbita inclinada; las de delante, más grandes. */
.ecos-node{position:absolute;left:var(--x);top:var(--y);z-index:3;max-width:46%;transform:translate(-50%,-50%) scale(var(--s));opacity:var(--o);display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:linear-gradient(180deg,#ffffff21,#ffffff08);border:1px solid #bfeaff3d;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 10px 26px #00081f75,inset 0 1px 0 #ffffff30;color:#eef7ff;font-size:max(13px,.903vw);font-weight:550;line-height:1.2;letter-spacing:-.1px}
.ecos-node i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#001439;background:radial-gradient(circle at 35% 30%,#c4f4ff,#2cdcff 56%,#1a9fe0)}
.ecos-node i svg{width:15px;height:15px;stroke-width:1.8}
.ecos-node span{min-width:0}
.ecos-node em{flex:none;font-style:normal;font-size:12px;font-weight:600;color:#e6dcff;background:#a78bfa2e;border:1px solid #a78bfa85;border-radius:20px;padding:2px 7px}
.ecos-node.is-next{border-color:#c9b8ff4d}
.ecos-node.is-next i{background:radial-gradient(circle at 35% 30%,#f1ebff,#c9b8ff 56%,#9b7cf5)}

/* Paso 2: un club nuevo entra en la esfera, como los marcadores del mapa. */
.ecos-pin{position:absolute;left:50%;top:13.5%;z-index:3;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;transition:opacity .4s}
.ecos-pin b{display:grid;place-items:center;width:clamp(64px,16.5%,98px);aspect-ratio:2.2;border-radius:10px;background:linear-gradient(180deg,#2f86ff,#1066ff);box-shadow:0 8px 22px #0010338c,inset 0 1px 0 #ffffff59}
.ecos-pin b img{width:78%;height:auto}
.ecos-pin i{width:11px;height:6px;background:#1066ff;clip-path:polygon(0 0,100% 0,50% 100%)}
.ecos-pin s{width:7px;height:7px;margin-top:3px;border-radius:50%;background:#2cdcff;box-shadow:0 0 12px #2cdcff}

/* Paso 3: puertos libres en la superficie, para módulos futuros. */
.ecos-port{position:absolute;left:var(--x);top:var(--y);z-index:3;width:clamp(26px,6.6%,40px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;border:1.5px dashed #c9b8ff8f;background:#120c33b8;color:#ddd1ff;opacity:.5;transition:opacity .6s,background .6s,box-shadow .6s}
.ecos-port svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* Estados por paso */
.eco-loop li{outline:none;transition:background .45s}
.eco-loop li>span{transition:background .45s,color .45s,border-color .45s,box-shadow .45s}
.eco-loop strong{transition:color .45s}
.eco-loop li:focus-visible{box-shadow:0 0 0 2px #2cdcff8c;border-radius:12px}
.eco-layout[data-phase="1"] li[data-step="1"]>span,.eco-layout[data-phase="2"] li[data-step="2"]>span{background:var(--cyan);border-color:var(--cyan);color:#001439;box-shadow:0 0 0 5px #2cdcff1f,0 0 22px #2cdcff66}
.eco-layout[data-phase="3"] li[data-step="3"]>span{background:#c9b8ff;border-color:#c9b8ff;color:#1a1040;box-shadow:0 0 0 5px #a78bfa1f,0 0 22px #a78bfa66}
.eco-layout[data-phase="1"] li[data-step="1"] strong,.eco-layout[data-phase="2"] li[data-step="2"] strong,.eco-layout[data-phase="3"] li[data-step="3"] strong{color:#fff}
.panel-access span{transition:border-color .45s,background .45s,color .45s}
.eco-layout[data-phase="1"] .panel-access span:not([data-access="2"]),.eco-layout[data-phase="2"] .panel-access span[data-access="2"]{border-color:#2cdcffc2;background:#2cdcff1f;color:#fff}
.eco-layout[data-phase="1"] .ecos-node{animation:ecos-wave 1.6s calc(.2s + var(--i) * .14s) both}
.eco-layout[data-phase="1"] .ecos-pin{opacity:0}
.eco-layout[data-phase="1"] .ecos-pinlink{stroke-opacity:0}
.eco-layout[data-phase="2"] .ecos-pin{animation:ecos-drop .8s cubic-bezier(.2,.9,.3,1.2) .2s both}
.eco-layout[data-phase="2"] .ecos-pinlink{stroke-opacity:.6}
.eco-layout[data-phase="3"] .ecos-port,.eco-layout[data-phase="all"] .ecos-port{opacity:1}
.eco-layout[data-phase="3"] .ecos-port{background:#2a1d63eb;box-shadow:0 0 0 4px #a78bfa1f,0 0 20px #a78bfa6b;animation:ecos-port 1.1s calc(.25s + var(--k) * .18s) both}
.eco-layout[data-phase="3"] .ecos-outer{stroke-opacity:.75;animation:ecos-dash 1.4s linear infinite}
.eco-layout[data-phase="3"] .ecos-body{box-shadow:inset 0 0 0 1px #c9b8ff5c,inset 0 -26px 60px #2cdcff1f,inset 0 30px 70px #0000005c,0 40px 100px #000000a6,0 0 0 10px #a78bfa12,0 0 90px #a78bfa30}
@keyframes ecos-wave{0%,100%{border-color:#bfeaff3d}35%{border-color:#2cdcffdb;box-shadow:0 0 0 1px #2cdcff5c,0 0 26px #2cdcff69,inset 0 1px 0 #ffffff30}}
@keyframes ecos-drop{from{opacity:0;transform:translate(-50%,-200%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes ecos-port{0%{opacity:.25;transform:translate(-50%,-50%) scale(.6)}60%{transform:translate(-50%,-50%) scale(1.12)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes ecos-dash{to{stroke-dashoffset:-5.4}}
@keyframes ecos-turn{to{transform:rotate(360deg)}}
.motion-paused .eco-layout *{animation:none!important}
@media(prefers-reduced-motion:reduce){.eco-layout *{animation:none!important;transition:none!important}}

@media(max-height:800px) and (min-width:761px){.ecos{--d:min(100cqw,calc(100dvh - var(--header) - var(--footer) - 105px))}.ecos-node{padding:5px 12px 5px 5px;gap:7px}.ecos-node i{width:25px;height:25px}}
@media(min-width:761px) and (max-width:900px){.eco-layout{grid-template-columns:minmax(0,1fr);gap:34px}.ecos{--d:min(100cqw,560px)}}
@media(max-width:760px){.ecos{--d:min(100cqw,470px)}.ecos-node{gap:6px;padding:4px 9px 4px 4px;font-size:12px;max-width:42%}.ecos-node i{width:22px;height:22px}.ecos-node i svg{width:13px;height:13px}.ecos-node em{padding:1px 5px}}
/* Esferas pequeñas (móvil): iconos en la órbita y los nombres en una leyenda debajo. */
.ecos-legend{display:none;position:relative;z-index:1}
@container (max-width:430px){
.ecos-node{padding:3px;gap:0;border-radius:50%}
.ecos-node span,.ecos-node em{display:none}
.ecos-node i{width:30px;height:30px}.ecos-node i svg{width:16px;height:16px}
.ecos-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px;width:100%;margin:22px 0 0;padding:0;list-style:none}
.ecos-legend li{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:8px;font-size:13px;line-height:1.3;color:#dce9fb}
.ecos-legend i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#001439;background:radial-gradient(circle at 35% 30%,#c4f4ff,#2cdcff 56%,#1a9fe0)}
.ecos-legend i svg{width:13px;height:13px;stroke-width:1.8}
.ecos-legend span{min-width:0}
.ecos-legend .is-next i{background:radial-gradient(circle at 35% 30%,#f1ebff,#c9b8ff 56%,#9b7cf5)}
.ecos-legend em{display:inline-block;font-style:normal;font-size:12px;font-weight:600;color:#e6dcff;background:#a78bfa2e;border:1px solid #a78bfa85;border-radius:20px;padding:1px 6px}
}