/* ==========================================================================
   Fondo global de datos — sitio público (assets/js/data-background.js)
   --------------------------------------------------------------------------
   Color de página muy claro + unas pocas constelaciones de nodos azules
   fijas al viewport, siempre detrás del contenido.

   Apilamiento: body.public-site crea su contexto (isolation: isolate); la
   capa va con z-index -1 dentro de él, así que queda sobre el color del body
   y bajo todo lo demás, incluido el contenido sin posicionar. Los bloques con
   fondo propio (hero con foto, bandas azules, footer, tarjetas blancas) la
   tapan de forma natural.
   ========================================================================== */

body.public-site {
    isolation: isolate;
    background-color: var(--ladum-page-bg);
    background-image: none;
}

.global-data-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    --gdb-scale: 1;
    --gdb-line: rgba(13, 83, 145, 0.07);
    --gdb-node: rgba(30, 120, 190, 0.10);
    --gdb-ring: rgba(35, 113, 179, 0.09);
}

.gdb-group {
    position: absolute;
    width: var(--gdb-size, 320px);
    height: var(--gdb-size, 320px);
    will-change: transform;
}

.gdb-group__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: var(--gdb-scale);
    animation: gdbDrift var(--gdb-duration, 24s) ease-in-out var(--gdb-delay, 0s) infinite alternate;
}

.gdb-line {
    stroke: var(--gdb-line);
    stroke-width: 1;
    /* Grosor constante aunque el grupo cambie de tamaño. */
    vector-effect: non-scaling-stroke;
}

.gdb-node { fill: var(--gdb-node); }

.gdb-node--ring {
    fill: none;
    stroke: var(--gdb-ring);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* Deriva de 3–4 px y un respiro de opacidad: apenas se percibe. */
@keyframes gdbDrift {
    from { transform: translate3d(0, 0, 0); opacity: var(--gdb-scale); }
    to   { transform: translate3d(3px, -4px, 0); opacity: calc(var(--gdb-scale) * 0.82); }
}

/* --- Responsive: menos grupos cuanto menos pantalla ---------------------- */

@media (max-width: 1023px) {
    .gdb-group[data-tablet="0"] { display: none; }
}

@media (max-width: 767px) {
    .gdb-group[data-mobile="0"] { display: none; }
    .gdb-group {
        width: var(--gdb-size-mobile, 200px);
        height: var(--gdb-size-mobile, 200px);
    }
}

/* --- Movimiento reducido ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .gdb-group__svg { animation: none; }
    .gdb-group { transform: none !important; will-change: auto; }
}