/* =============================================================
   Background Circuit Board — SESMT Digital
   Pattern tecnológico inspirado no site sesmtdigital.seg.br/sipat.
   Trilhas + nodes + glow em cima do gradiente teal-petróleo oficial.
   Uso: aplicar classe .sd-bg-circuit no elemento que vai receber.
   ============================================================= */

.sd-bg-circuit {
    position: relative;
    isolation: isolate;
}

/* ── Layer 1: pattern de trilhas SVG (tile 240×240) ────────────────── */
.sd-bg-circuit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    /* SVG pattern: PCB-style traces + nodes em teal claro */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'>\
<g stroke='%2393D5E0' stroke-width='1' fill='none' opacity='0.55'>\
<path d='M0 30 L48 30 L48 72 L96 72 L96 110'/>\
<path d='M32 0 L32 50 L70 50 L70 90 L130 90'/>\
<path d='M130 0 L130 28 L180 28 L180 64 L240 64'/>\
<path d='M0 120 L40 120 L40 156 L92 156 L92 200'/>\
<path d='M120 110 L120 140 L165 140 L165 180 L210 180'/>\
<path d='M170 200 L170 168 L205 168 L205 130 L240 130'/>\
<path d='M0 200 L24 200 L24 240'/>\
<path d='M60 240 L60 215 L100 215'/>\
<path d='M140 240 L140 220 L185 220 L185 240'/>\
</g>\
<g fill='%2393D5E0' opacity='0.85'>\
<circle cx='32' cy='50' r='2.3'/>\
<circle cx='70' cy='50' r='2.3'/>\
<circle cx='48' cy='72' r='2.3'/>\
<circle cx='96' cy='72' r='2.3'/>\
<circle cx='130' cy='28' r='2.3'/>\
<circle cx='180' cy='28' r='2.3'/>\
<circle cx='180' cy='64' r='2.3'/>\
<circle cx='40' cy='120' r='2.3'/>\
<circle cx='40' cy='156' r='2.3'/>\
<circle cx='92' cy='156' r='2.3'/>\
<circle cx='120' cy='140' r='2.3'/>\
<circle cx='165' cy='140' r='2.3'/>\
<circle cx='165' cy='180' r='2.3'/>\
<circle cx='205' cy='168' r='2.3'/>\
<circle cx='205' cy='130' r='2.3'/>\
<circle cx='24' cy='200' r='2.3'/>\
<circle cx='60' cy='215' r='2.3'/>\
<circle cx='100' cy='215' r='2.3'/>\
<circle cx='140' cy='220' r='2.3'/>\
<circle cx='185' cy='220' r='2.3'/>\
</g>\
<g fill='%23D4A155' opacity='0.7'>\
<circle cx='130' cy='90' r='3'/>\
<circle cx='70' cy='90' r='3'/>\
</g>\
</svg>");
    background-repeat: repeat;
    background-size: 240px 240px;
    opacity: 0.55;
    mix-blend-mode: screen;
}

/* ── Layer 2: glow pontual + textura sutil ─────────────────────────── */
.sd-bg-circuit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        /* glow turquesa no canto superior direito */
        radial-gradient(circle 380px at 88% 12%, rgba(125, 211, 252, 0.18) 0 50%, transparent 65%),
        /* glow amber no canto inferior esquerdo */
        radial-gradient(circle 320px at 10% 92%, rgba(212, 161, 85, 0.14) 0 50%, transparent 65%),
        /* grid técnico fininho */
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 28px);
}

/* Garante que o conteúdo direto fique acima das camadas */
.sd-bg-circuit > * { position: relative; z-index: 1; }

/* ── Variação compacta para hero/banner (sem grid técnico) ─────────── */
.sd-bg-circuit--soft::after {
    background-image:
        radial-gradient(circle 320px at 88% 12%, rgba(125, 211, 252, 0.14) 0 50%, transparent 65%),
        radial-gradient(circle 280px at 10% 92%, rgba(212, 161, 85, 0.12) 0 50%, transparent 65%);
}
.sd-bg-circuit--soft::before { opacity: 0.45; }