/* Círculo 3D · cubos en órbita (CSS 3D, sin librerías) */
.c3d{position:absolute;inset:0;container-type:size;overflow:hidden;color:#8FD3F4;
 background:radial-gradient(circle at 50% 46%,#16294F 0,#0A1330 62%,#070D22 100%)}
.c3d::before{content:"";position:absolute;inset:0;opacity:.5;
 background:radial-gradient(1px 1px at 12% 18%,#8FD3F4 50%,transparent 51%),radial-gradient(1px 1px at 82% 12%,#fff 50%,transparent 51%),
 radial-gradient(1.5px 1.5px at 90% 70%,#8FD3F4 50%,transparent 51%),radial-gradient(1px 1px at 8% 80%,#fff 50%,transparent 51%),
 radial-gradient(1px 1px at 30% 92%,#8FD3F4 50%,transparent 51%),radial-gradient(1px 1px at 66% 90%,#fff 50%,transparent 51%),
 radial-gradient(1px 1px at 55% 8%,#8FD3F4 50%,transparent 51%)}
.c3d__stage{position:absolute;left:50%;top:50%;width:0;height:0;perspective:150cqmin;scale:.88}
.c3d,.c3d *{box-sizing:border-box}
.c3d__tilt,.c3d__plane,.orbit,.arm,.abill,.bill,.up,.bob,.cube,.hub{transform-style:preserve-3d}
.c3d__tilt{transform:rotateX(var(--rx,-4deg)) rotateY(var(--ry,0deg));transition:transform .35s ease-out}
.c3d__plane{transform:rotateX(58deg)}
.rg{position:absolute;left:0;top:0;border-radius:50%;border:1px solid rgba(143,211,244,.55);transform:translate(-50%,-50%)}
.rg1{width:34cqmin;height:34cqmin;border-color:rgba(143,211,244,.7);box-shadow:0 0 2.5cqmin rgba(57,148,239,.4),inset 0 0 2.5cqmin rgba(57,148,239,.3)}
.rg2{width:60cqmin;height:60cqmin;border-color:rgba(143,211,244,.7);box-shadow:0 0 2.5cqmin rgba(57,148,239,.4),inset 0 0 2.5cqmin rgba(57,148,239,.3)}
.rg3{width:86cqmin;height:86cqmin;border-color:rgba(143,211,244,.7);box-shadow:0 0 2.5cqmin rgba(57,148,239,.4),inset 0 0 2.5cqmin rgba(57,148,239,.3)}
.rg4{width:98cqmin;height:98cqmin;border-style:dashed;border-color:rgba(143,211,244,.25)}
.grid{position:absolute;left:0;top:0;width:96cqmin;height:96cqmin;border-radius:50%;transform:translate(-50%,-50%);opacity:.5;
 background:repeating-linear-gradient(0deg,rgba(143,211,244,.14) 0 1px,transparent 1px 6cqmin),repeating-linear-gradient(90deg,rgba(143,211,244,.14) 0 1px,transparent 1px 6cqmin);
 -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);mask-image:radial-gradient(circle,#000 30%,transparent 70%)}
.orbit{position:absolute;left:0;top:0;animation:c3sp var(--dur) linear infinite var(--d1)}
.ln{position:absolute;left:0;top:0;width:var(--r);height:2px;transform-origin:0 50%;transform:rotateZ(var(--a));
 background:linear-gradient(90deg,rgba(57,148,239,0),rgba(143,211,244,.85));box-shadow:0 0 6px rgba(143,211,244,.6)}
.arm{position:absolute;left:0;top:0;transform:rotateZ(var(--a)) translateX(var(--r))}
.abill{transform:rotateZ(calc(var(--a) * -1))}
.bill{animation:c3sp var(--dur) linear infinite var(--d2)}
.up{transform:translateZ(calc(var(--s,8cqmin) * .65)) rotateX(-58deg)}
.bob{animation:c3bob 5s ease-in-out infinite;animation-delay:var(--d,0s)}
.hub{position:absolute;left:0;top:0}
.hub .up{transform:translateZ(8cqmin) rotateX(-58deg)}
.cube{will-change:transform;position:relative;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);animation:c3cube 26s linear infinite}
.cube--s{animation-duration:22s}
.cube--c{--s:14cqmin;animation-duration:34s}
.f{position:absolute;inset:-.4px;outline:1px solid transparent;backface-visibility:hidden;display:grid;place-items:center;font-style:normal;
 background:linear-gradient(145deg,#16294F,#0B1636);border:.35cqmin solid rgba(143,211,244,.9);
 box-shadow:inset 0 0 3cqmin rgba(57,148,239,.55),0 0 2cqmin rgba(57,148,239,.35)}
.f svg.lg{width:70%;height:70%;color:#fff;filter:drop-shadow(0 0 1.2cqmin #3994EF)}
.f svg{width:62%;height:62%;color:#8FD3F4;filter:drop-shadow(0 0 .8cqmin rgba(143,211,244,.8))}
.f b{font:700 7cqmin/1 Inter,system-ui,sans-serif;color:#fff;letter-spacing:.04em;text-shadow:0 0 2cqmin #3994EF}
.cube--c .f{border-color:#fff;box-shadow:inset 0 0 5cqmin rgba(57,148,239,.8),0 0 5cqmin rgba(57,148,239,.7)}
.fr{transform:translateZ(calc(var(--s) / 2))}
.bk{transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
.rt{transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.lf{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
.tp{transform:rotateX(90deg) translateZ(calc(var(--s) / 2))}
.bt{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}
@keyframes c3sp{to{transform:rotateZ(360deg)}}
@keyframes c3cube{to{transform:rotateY(360deg)}}
@keyframes c3bob{0%,100%{transform:translateZ(0)}50%{transform:translateZ(1.6cqmin)}}
@media (prefers-reduced-motion:reduce){.orbit,.bill,.bob,.cube{animation:none!important}.c3d__tilt{transition:none}}

/* Color por miembro · gradientes de marca (--g-azul, --g-teal, --g-violeta, --g-verde) */
.cube--s.k1{--c1:#1D4ED8;--c2:#0EA5E9;--gl:14,165,233}
.cube--s.k2{--c1:#0F766E;--c2:#14B8A6;--gl:20,184,166}
.cube--s.k3{--c1:#6D28D9;--c2:#4F46E5;--gl:109,40,217}
.cube--s.k4{--c1:#047857;--c2:#10B981;--gl:16,185,129}
.cube--s .f{background:linear-gradient(145deg,var(--c1),var(--c2));border-color:rgba(255,255,255,.6);
 box-shadow:inset 0 0 2.5cqmin rgba(255,255,255,.18),0 0 3cqmin rgba(var(--gl),.65)}
.cube--s .f svg{color:#fff;filter:drop-shadow(0 0 .6cqmin rgba(0,0,0,.25))}
.cube--s .lf,.cube--s .rt{filter:brightness(.8)}
.cube--s .tp{filter:brightness(1.18)}.cube--s .bt{filter:brightness(.6)}
.cube--c .f{background:linear-gradient(145deg,#1A1A2E,#16213E 55%,#0F3460)}

.cube--s.k5{--c1:#EA580C;--c2:#FF9500;--gl:255,149,0}
.cube--s.k6{--c1:#1A1A2E;--c2:#0F3460;--gl:57,148,239}
.cube--s.k7{--c1:#3994EF;--c2:#4DC0DF;--gl:77,192,223}
/* Cubo central: caras claras, logo ISAA en azul, centrado */
.cube--c .f{background:linear-gradient(145deg,#FFFFFF,#DCE8F8);border-color:#fff;
 box-shadow:inset 0 0 3cqmin rgba(57,148,239,.35),0 0 5cqmin rgba(57,148,239,.8)}
.cube--c .f svg.lg{width:60%;height:60%;color:#0075BE;filter:none;display:block;margin:auto}
.cube--c .f b{color:#0F68C0;text-shadow:none}
.cube--c .lf,.cube--c .rt{filter:brightness(.9)}

/* Número del miembro en Nulshock (caras trasera e izquierda: aparece al girar) */
.cube--s .f b.nm{font:700 calc(var(--s) * .6)/1 Nulshock,Inter,system-ui,sans-serif;letter-spacing:0;color:#fff;
 text-shadow:0 0 1.2cqmin rgba(0,0,0,.35)}

/* Cubo central TRON: solo aristas luminosas; logo y "TÚ" flotan al centro, siempre de frente */
.c3d .cube--w{--s:15cqmin;animation-duration:30s}
.c3d .cube--w .f{background:repeating-linear-gradient(0deg,rgba(77,192,223,.16) 0 1px,transparent 1px 25%),repeating-linear-gradient(90deg,rgba(77,192,223,.16) 0 1px,transparent 1px 25%);
 border:.5cqmin solid #7FE7FF;filter:none;
 box-shadow:0 0 2.2cqmin rgba(77,192,223,.95),inset 0 0 3cqmin rgba(77,192,223,.55)}


/* Marca central: logo en azul sobre caras wire (sin relleno, nada lo tapa) */
.c3d .cube--w .f svg.lg{width:58%;height:58%;color:#3AA0F5;filter:drop-shadow(0 0 1.4cqmin rgba(77,192,223,.95));display:block}
.c3d .cube--w .f b{font:700 4.2cqmin/1 Nulshock,Inter,system-ui,sans-serif;color:#fff;letter-spacing:.06em;text-shadow:0 0 1.4cqmin #4DC0DF}

/* Cada cara lateral lleva su número 1-4 (Nulshock) y un ícono pequeño, intercalados */
.cube--s .f b.nm{font-size:calc(var(--s) * .5)}
.cube--s .f svg.mi{position:absolute;top:10%;right:10%;width:26%;height:26%;color:#fff;opacity:.9}

.cube--s .f b.nm{font-size:calc(var(--s) * .62)}
.c3d .cube--w .f b{font-size:5cqmin}

/* Rejilla espacio-tiempo: pozo gravitacional en todo el fondo */
.well{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.c3d .cube--w .f svg{width:52%;height:52%;color:#7FE7FF;filter:drop-shadow(0 0 1.4cqmin rgba(77,192,223,.95))}
/* Cubo central: caras translúcidas, un poco más opacas */
.c3d .cube--w .f{background:repeating-linear-gradient(0deg,rgba(77,192,223,.2) 0 1px,transparent 1px 25%),repeating-linear-gradient(90deg,rgba(77,192,223,.2) 0 1px,transparent 1px 25%),linear-gradient(145deg,rgba(30,90,150,.42),rgba(15,45,95,.42))}