/* ===== GAMA · Ecosistema de canales · bloque visual del hero =====
   Los nodos y el núcleo van a tamaño FIJO: nunca se escalan, así que el gráfico
   se ve nítido a cualquier ancho. Lo único que se recalcula es el radio del
   círculo, con un ResizeObserver.
   Todo lleva prefijo gc- para no chocar con nada del sitio. */
.gc{position:relative;container-type:inline-size;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1/1;
  --morado:#80358A;--morado-300:#C79BCE;--menta:#95E6C1;
  --node:#16121E;--line:rgba(255,255,255,.12);--tx3:rgba(255,255,255,.42);
  --gm:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --e:cubic-bezier(.16,1,.3,1)}
.gc *{box-sizing:border-box;margin:0;padding:0}

.gc-halo{position:absolute;left:50%;top:50%;width:62%;height:62%;transform:translate(-50%,-50%);
  border-radius:50%;filter:blur(30px);pointer-events:none;
  background:radial-gradient(circle,rgba(160,70,175,.62),rgba(128,53,138,.2) 46%,transparent 72%)}
.gc-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(199,155,206,.17);pointer-events:none}
.gc-ring.b{border-color:rgba(199,155,206,.09)}

.gc-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:92px;height:92px;border-radius:25px;display:grid;place-items:center;z-index:5;
  background:linear-gradient(155deg,#fff,#F1E8F4);
  box-shadow:0 20px 44px -12px rgba(0,0,0,.85),0 0 58px -8px rgba(180,90,195,.85),
             inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow .32s var(--e)}
.gc-core.hit{box-shadow:0 20px 44px -12px rgba(0,0,0,.85),0 0 76px -2px rgba(149,230,193,.85),
             inset 0 1px 0 rgba(255,255,255,.9)}
.gc-core img{width:50px;height:50px;display:block}

.gc-n{position:absolute;width:60px;height:60px;border-radius:18px;display:grid;place-items:center;
  background:var(--node);border:1px solid var(--line);transform:translate(-50%,-50%);z-index:4;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.9);
  transition:border-color .5s var(--e),background .5s var(--e),box-shadow .5s var(--e)}
.gc-n.on{border-color:rgba(149,230,193,.6);background:#1C1826;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.9),0 0 30px -6px rgba(149,230,193,.55)}
.gc-n svg{width:26px;height:26px;display:block}
.gc-gl{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gc-web{stroke:#8FB0D8}.gc-tel{stroke:var(--morado-300)}
.gc-n b{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  font-family:var(--gm);font-size:8.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx3);white-space:nowrap;transition:color .45s var(--e)}
.gc-n.on b{color:var(--menta)}
.gc-wa{fill:#25D366}.gc-ig{fill:url(#gcIg)}.gc-ms{fill:#0866FF}.gc-hs{fill:#FF7A59}

.gc-p{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--menta);
  transform:translate(-50%,-50%);opacity:0;z-index:3;pointer-events:none;
  box-shadow:0 0 12px 2px rgba(149,230,193,.75)}

@media (prefers-reduced-motion:no-preference){
  .gc-halo{animation:gc-breathe 5s ease-in-out infinite alternate}
  .gc-n{animation:gc-in .7s var(--e) both,gc-drift 6.5s ease-in-out infinite alternate;
        animation-delay:var(--d,0s),var(--f,0s)}
  .gc-core{animation:gc-in .8s var(--e) both}
  .gc-p.go{animation:gc-travel .8s cubic-bezier(.4,0,.2,1) both}
}
@keyframes gc-breathe{from{opacity:.62;scale:.9}to{opacity:1;scale:1.07}}
@keyframes gc-in{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
@keyframes gc-drift{from{translate:0 -3px}to{translate:0 3px}}
@keyframes gc-travel{0%{opacity:0;translate:0 0}14%{opacity:1}100%{opacity:0;translate:var(--tx) var(--ty)}}

/* pantallas angostas: nodos algo menores para que las etiquetas no se toquen */
@container (max-width: 400px){
  .gc-n{width:50px;height:50px;border-radius:15px}
  .gc-n svg{width:22px;height:22px}
  .gc-n b{font-size:7.5px;letter-spacing:.08em;top:calc(100% + 6px)}
  .gc-core{width:76px;height:76px;border-radius:21px}
  .gc-core img{width:41px;height:41px}
}

/* ===== caja en el hero de GAMA ===== */
#eco-canales{width:100%;max-width:560px;margin:0 auto}
@media(max-width:1024px){#eco-canales{max-width:520px;margin-top:8px;order:2}}
@media(max-width:760px){#eco-canales{display:none}}