/* ============================================================
   COPE — Fondo global del sitio: círculos "marca de agua" elegantes.
   Se carga en TODAS las páginas públicas (vía header.php), detrás del contenido.

   Rendimiento: se usa un PSEUDO-ELEMENTO FIJO (body::before) en lugar de
   background-attachment: fixed. El navegador lo compone en su propia capa y
   NO repinta el fondo al hacer scroll -> mucho más fluido, sobre todo en
   páginas con muchas imágenes (Galería) y en móviles.
   ============================================================ */

/* Color base siempre presente (respaldo) */
html {
    background-color: #f5f8f7;
}

/* Marca de agua de círculos, fija y compuesta (sin costo de repintado al scrollear) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #f5f8f7;
    background-image:
        /* glows suaves en las esquinas */
        radial-gradient(circle 520px at 86% 4%,  rgba(52,152,219,.08), transparent 62%),
        radial-gradient(circle 460px at 8% 22%,   rgba(46,204,113,.08), transparent 62%),
        radial-gradient(circle 560px at 82% 80%,  rgba(46,204,113,.06), transparent 62%),
        radial-gradient(circle 420px at 20% 96%,  rgba(52,152,219,.06), transparent 62%),
        /* aros finos (marca de agua) */
        radial-gradient(circle 300px at 66% 34%,  transparent 67%, rgba(52,152,219,.05) 68.5%, transparent 70.5%),
        radial-gradient(circle 230px at 30% 64%,  transparent 65%, rgba(46,204,113,.05) 66.5%, transparent 68.5%),
        radial-gradient(circle 180px at 90% 55%,  transparent 64%, rgba(52,152,219,.04) 65.5%, transparent 67.5%);
    background-repeat: no-repeat;
}