/* ============================================================
   Fondo "Gráficos" (ver public/js/fondos.js). Capa fija detrás de
   todo el contenido; las secciones son transparentes y la dejan ver.
   ============================================================ */

.fondo-dinamico {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.fondo-dinamico canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Viñeta: oscurece bordes para que el texto nunca pelee con el fondo */
.fondo-dinamico::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(10, 9, 8, .75) 100%);
}

/* Grilla estática en CSS: el canvas no la repinta en cada cuadro */
.fondo-graficos {
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Los paneles se atenúan en la columna central, donde va el contenido */
.fondo-graficos canvas {
    -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .45) 30%, rgba(0, 0, 0, .45) 70%, #000 100%);
            mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .45) 30%, rgba(0, 0, 0, .45) 70%, #000 100%);
}

@media (max-width: 1099px) {
    /* Sin márgenes libres: los paneles caen detrás del texto, van más tenues */
    .fondo-graficos canvas { -webkit-mask-image: none; mask-image: none; opacity: .35; }
}