/* Grafo de los 13 cubos en la portada (tarea 0ae481c0). El comportamiento está en /assets/grafo-suite.js.
   El color sale de los cubos; todo lo demás son neutros del fondo oscuro de las landings. */
.gs-escena{position:relative;overflow:hidden;touch-action:none;cursor:grab}
.gs-escena:active{cursor:grabbing}
.gs-escena canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gs-escena .nodo{position:absolute;left:0;top:0;width:84px;margin:-44px 0 0 -42px;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:0;padding:0;color:#C9D3DE;font:inherit;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  will-change:transform,opacity;transform-origin:50% 44%;pointer-events:none}
.gs-escena .nodo img{width:64px;height:auto;display:block;pointer-events:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.gs-escena .nodo span{font-size:11px;font-weight:700;letter-spacing:.06em}
.gs-escena .nodo.elegido img{filter:drop-shadow(0 0 14px rgba(255,255,255,.45))}
.gs-escena .nodo:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:10px}
.gs-detalle{background:rgba(16,18,34,.92);border:1px solid #23263d;border-radius:12px;padding:14px 16px;color:#C9D3DE;max-width:360px;font-size:13px;line-height:1.45}
.gs-detalle h2{font-size:16px;font-weight:800;margin:0 0 6px;color:#fff}
.gs-detalle p{margin:0 0 8px;color:#9AA4B2}
.gs-detalle ul{list-style:none;margin:0;padding:0;max-height:220px;overflow:auto}
.gs-detalle li{padding:6px 0;border-top:1px solid #23263d}
.gs-detalle li b{color:#fff}
.gs-hero{background:#0a0a14;color:#fff;position:relative}
.gs-hero h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;line-height:1.08;margin:0 0 14px;color:#fff}
.gs-hero .gs-bajada{font-size:clamp(1rem,1.4vw,1.2rem);color:#9AA4B2;margin:0 0 26px;max-width:34ch}
.gs-hero .btn-green{display:inline-block}
/* el texto ocupa su ancho, no el de la columna: medir_pantalla.js cuenta la caja del elemento */
.gs-hero h1,.gs-hero .gs-bajada{width:fit-content;max-width:100%}
@media (prefers-reduced-motion: reduce){.gs-escena .nodo{transition:none}}
/* Cubos chicos según el tamaño de la ESCENA, no de la ventana: la clase la pone grafo-suite.js con la misma
   regla que usa para separar los cubos (un solo corte; antes el CSS cortaba a 820 px de ventana y el JS por escena). */
.gs-escena.chica .nodo{width:60px;margin:-32px 0 0 -30px}
.gs-escena.chica .nodo img{width:40px}
.gs-escena.chica .nodo span{font-size:9px;letter-spacing:.03em}