.elementor-28 .elementor-element.elementor-element-4675d00{--display:flex;--min-height:258px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-4675d00:not(.elementor-motion-effects-element-type-background), .elementor-28 .elementor-element.elementor-element-4675d00 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0F151D;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-28 .elementor-element.elementor-element-fcc24e1 .elementor-icon-list-icon i{color:#FF0000;transition:color 0.3s;}.elementor-28 .elementor-element.elementor-element-fcc24e1 .elementor-icon-list-icon svg{fill:#FF0000;transition:fill 0.3s;}.elementor-28 .elementor-element.elementor-element-fcc24e1{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-28 .elementor-element.elementor-element-fcc24e1 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-28 .elementor-element.elementor-element-ebadd5e{text-align:center;}.elementor-28 .elementor-element.elementor-element-ebadd5e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:30px;font-weight:600;text-transform:uppercase;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-28 .elementor-element.elementor-element-df2b881{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;text-align:center;font-family:"Poppins", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-28 .elementor-element.elementor-element-ed41c18{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:40px;--padding-bottom:80px;--padding-left:10px;--padding-right:10px;}.elementor-28 .elementor-element.elementor-element-ed41c18:not(.elementor-motion-effects-element-type-background), .elementor-28 .elementor-element.elementor-element-ed41c18 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FEF8F8;}.elementor-28 .elementor-element.elementor-element-2cf346e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-28 .elementor-element.elementor-element-2cf346e:not(.elementor-motion-effects-element-type-background), .elementor-28 .elementor-element.elementor-element-2cf346e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-28 .elementor-element.elementor-element-2cf346e.e-con{--align-self:flex-start;}.elementor-28 .elementor-element.elementor-element-45a894a{--display:flex;--min-height:501px;--justify-content:flex-end;--border-radius:10px 10px 10px 10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-28 .elementor-element.elementor-element-45a894a:not(.elementor-motion-effects-element-type-background), .elementor-28 .elementor-element.elementor-element-45a894a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://desenvolvesmssites.com.br/transrefer/wp-content/uploads/2026/05/cotacao-.webp");background-position:center center;background-size:cover;}.elementor-28 .elementor-element.elementor-element-b49fd42{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-28 .elementor-element.elementor-element-7fb9b5f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-669f1cc{--display:flex;--justify-content:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-1aba897{width:initial;max-width:initial;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:1;text-align:center;}.elementor-28 .elementor-element.elementor-element-1aba897.elementor-element{--align-self:center;}.elementor-28 .elementor-element.elementor-element-1aba897 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:48px;font-weight:700;line-height:50px;letter-spacing:0.4px;color:#000C20;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-28 .elementor-element.elementor-element-4ab1d85{--divider-border-style:solid;--divider-color:#FF1010;--divider-border-width:5px;}.elementor-28 .elementor-element.elementor-element-4ab1d85 .elementor-divider-separator{width:20%;margin:0 auto;margin-center:0;}.elementor-28 .elementor-element.elementor-element-4ab1d85 .elementor-divider{text-align:center;padding-block-start:0px;padding-block-end:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}:root{--page-title-display:none;}@media(min-width:768px){.elementor-28 .elementor-element.elementor-element-4675d00{--content-width:1240px;}.elementor-28 .elementor-element.elementor-element-ed41c18{--content-width:1240px;}.elementor-28 .elementor-element.elementor-element-2cf346e{--width:58%;}}@media(max-width:1024px){.elementor-28 .elementor-element.elementor-element-4675d00{--min-height:163px;}.elementor-28 .elementor-element.elementor-element-ed41c18{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-28 .elementor-element.elementor-element-1aba897{text-align:start;}.elementor-28 .elementor-element.elementor-element-1aba897 .elementor-heading-title{font-size:30px;line-height:1.3em;}.elementor-28 .elementor-element.elementor-element-4ab1d85 .elementor-divider{text-align:left;}.elementor-28 .elementor-element.elementor-element-4ab1d85 .elementor-divider-separator{margin:0 auto;margin-left:0;}}@media(max-width:767px){.elementor-28 .elementor-element.elementor-element-ebadd5e .elementor-heading-title{font-size:20px;}.elementor-28 .elementor-element.elementor-element-df2b881{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;font-size:13px;}.elementor-28 .elementor-element.elementor-element-ed41c18{--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-28 .elementor-element.elementor-element-45a894a{--min-height:270px;}.elementor-28 .elementor-element.elementor-element-1aba897{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-28 .elementor-element.elementor-element-1aba897 .elementor-heading-title{font-size:25px;}.elementor-28 .elementor-element.elementor-element-4ab1d85 .elementor-divider{text-align:center;}.elementor-28 .elementor-element.elementor-element-4ab1d85 .elementor-divider-separator{margin:0 auto;margin-center:0;}.elementor-28 .elementor-element.elementor-element-0dd18ea img{width:100%;border-radius:10px 10px 10px 10px;}}/* Start custom CSS for container, class: .elementor-element-ed41c18 */<div id="transrefer-bg-container">
    <canvas id="transrefer-canvas"></canvas>
</div>

<style>
    /* Garante que o container ocupe a tela toda e fique ao fundo */
    #transrefer-bg-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; /* Fica atrás de tudo */
        overflow: hidden;
        background-color: #ffffff; /* Cor de fundo padrão do site */
    }

    #transrefer-canvas {
        width: 100%;
        height: 100%;
        display: block;
    }
    
    /* Proteção para garantir que o conteúdo do Elementor apareça */
    .elementor-section, .elementor-container, .elementor-column {
        z-index: 1;
        position: relative;
    }
</style>

<script>
(function() {
    const canvas = document.getElementById('transrefer-canvas');
    const ctx = canvas.getContext('2d');
    let particles = [];
    const properties = {
        // --- CONFIGURAÇÕES PERSONALIZÁVEIS ---
        bgColor: '#ffffff',             // Cor de fundo do canvas (igual ao CSS)
        particleColor: 'rgba(227, 30, 36, 0.5)', // Cor dos pontos (Vermelho Transrefer suave)
        lineColor: 'rgba(13, 19, 28, 0.15)',    // Cor das linhas conectoras (Azul escuro quase transparente)
        particleRadius: 1.5,            // Tamanho dos pontos
        particleCount: 80,              // Quantidade de pontos (muitos pesam o site)
        particleMaxVelocity: 0.3,       // Velocidade máxima
        lineMaxDist: 150,               // Distância máxima para conectar
        // -------------------------------------
    };

    // Ajusta o tamanho do canvas
    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }

    // Classe das Partículas
    class Particle {
        constructor() {
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;
            this.setVelocity();
        }

        setVelocity() {
            this.velocityX = (Math.random() - 0.5) * properties.particleMaxVelocity;
            this.velocityY = (Math.random() - 0.5) * properties.particleMaxVelocity;
        }

        update() {
            // Move a partícula
            this.x += this.velocityX;
            this.y += this.velocityY;

            // Rebate nas bordas
            if (this.x< 0 || this.x > canvas.width) this.velocityX *= -1;
            if (this.y< 0 || this.y > canvas.height) this.velocityY *= -1;
        }

        draw() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, properties.particleRadius, 0, Math.PI * 2);
            ctx.fillStyle = properties.particleColor;
            ctx.fill();
        }
    }

    // Desenha as linhas conectoras
    function drawLines() {
        let x1, y1, x2, y2, length, opacity;
        for (let i = 0; i < particles.length; i++) {
            for (let j = i + 1; j < particles.length; j++) {
                x1 = particles[i].x;
                y1 = particles[i].y;
                x2 = particles[j].x;
                y2 = particles[j].y;
                length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));

                if (length < properties.lineMaxDist) {
                    // Calcula opacidade baseada na distância (mais perto = mais forte)
                    opacity = 1 - (length / properties.lineMaxDist);
                    ctx.lineWidth = '0.5';
                    // Aplica a cor das linhas com a opacidade dinâmica
                    ctx.strokeStyle = properties.lineColor.replace('0.15', opacity * 0.15); 
                    ctx.beginPath();
                    ctx.moveTo(x1, y1);
                    ctx.lineTo(x2, y2);
                    ctx.stroke();
                }
            }
        }
    }

    // Loop de animação
    function loop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Desenha o fundo (necessário para o ClearRect não limpar o fundo do site)
        ctx.fillStyle = properties.bgColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        particles.forEach(p => {
            p.update();
            p.draw();
        });
        drawLines();
        requestAnimationFrame(loop);
    }

    // Inicialização
    function init() {
        resizeCanvas();
        particles = [];
        for (let i = 0; i < properties.particleCount; i++) {
            particles.push(new Particle());
        }
        loop();
    }

    window.addEventListener('resize', resizeCanvas);
    init();

})();
</script>/* End custom CSS */