.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
   BRUNO JACOBSEN — CSS GLOBAL
   Elementor Pro
   ========================================================= */


/* =========================================================
   01. VARIÁVEIS GLOBAIS
========================================================= */

:root {

    /* Background */
    --bg-main: #050508;
    --bg-secondary: #09070d;
    --bg-surface: #0d0a13;

    /* Textos */
    --text-main: #f7f4ff;
    --text-soft: rgba(247, 244, 255, 0.78);
    --text-muted: #aaa1bd;

    /* Roxos */
    --purple: #8b5cf6;
    --purple-light: #c084fc;
    --purple-dark: #6d3ee8;

    /* Superfícies */
    --surface:
        rgba(255, 255, 255, 0.055);

    --surface-strong:
        rgba(255, 255, 255, 0.085);

    /* Bordas */
    --border:
        rgba(255, 255, 255, 0.10);

    --border-purple:
        rgba(192, 132, 252, 0.28);

    /* Sombras */
    --shadow:
        0 24px 80px rgba(0, 0, 0, 0.42);

    /* Border Radius */
    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 32px;

    /* Animação */
    --ease:
        cubic-bezier(.16, 1, .3, 1);

}


/* =========================================================
   02. CONFIGURAÇÕES GERAIS
========================================================= */

html {
    width: 100%;
    min-height: 100%;

    scroll-behavior: smooth;

    background:
        var(--bg-main);
}


body {
    width: 100%;
    min-width: 320px;
    min-height: 100%;

    margin: 0;

    overflow-x: hidden;

    color:
        var(--text-main);

    background:
        var(--bg-main);

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


/* Elementor ocupa toda a largura */

.elementor {
    position: relative;

    z-index: 1;

    width: 100%;
}


/* =========================================================
   03. FUNDO GLOBAL
========================================================= */

body {

    background:

        /* Glow superior esquerdo */
        radial-gradient(
            circle at 10% 8%,
            rgba(139, 92, 246, 0.22) 0%,
            rgba(139, 92, 246, 0.08) 22%,
            transparent 42%
        ),

        /* Glow lateral direito */
        radial-gradient(
            circle at 90% 28%,
            rgba(192, 132, 252, 0.11) 0%,
            transparent 34%
        ),

        /* Background principal */
        linear-gradient(
            135deg,
            #050508 0%,
            #09070d 48%,
            #050508 100%
        );

}


/* =========================================================
   04. GRID SUTIL DE FUNDO
========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, 0.024) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.024) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    opacity:
        0.75;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.55) 55%,
            transparent 92%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.55) 55%,
            transparent 92%
        );
}


/* =========================================================
   05. GLOW AMBIENTE
========================================================= */

body::after {

    content: "";

    position: fixed;

    width: 700px;
    height: 700px;

    top: -350px;
    left: 50%;

    transform:
        translateX(-50%);

    z-index: 0;

    pointer-events: none;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(139, 92, 246, 0.08),
            transparent 68%
        );

    filter:
        blur(30px);
}


/* =========================================================
   06. LINKS
========================================================= */

a {

    color:
        inherit;

    text-decoration:
        none;

    -webkit-tap-highlight-color:
        transparent;
}


/* =========================================================
   07. BOTÕES
========================================================= */

button,
.elementor-button {

    -webkit-tap-highlight-color:
        transparent;
}


/* =========================================================
   08. FOCO — ACESSIBILIDADE
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {

    outline:
        2px solid var(--purple-light);

    outline-offset:
        4px;
}


/* =========================================================
   09. SELEÇÃO DE TEXTO
========================================================= */

::selection {

    color:
        #ffffff;

    background:
        rgba(139, 92, 246, 0.72);
}


::-moz-selection {

    color:
        #ffffff;

    background:
        rgba(139, 92, 246, 0.72);
}


/* =========================================================
   10. SCROLLBAR
========================================================= */


/* Firefox */

html {

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--purple)
        var(--bg-main);
}


/* Chrome / Edge / Safari */

html::-webkit-scrollbar {

    width:
        9px;
}


html::-webkit-scrollbar-track {

    background:
        #050508;
}


html::-webkit-scrollbar-thumb {

    border:
        2px solid #050508;

    border-radius:
        999px;

    background:

        linear-gradient(
            180deg,
            var(--purple-light),
            var(--purple)
        );

    box-shadow:

        0 0 14px
        rgba(139, 92, 246, 0.26);
}


html::-webkit-scrollbar-thumb:hover {

    background:

        linear-gradient(
            180deg,
            #d5a4ff,
            #9d6bfa
        );
}


/* =========================================================
   11. CURSOR PERSONALIZADO
========================================================= */


/*
   IMPORTANTE:

   Mais adiante adicionaremos apenas:

   <div id="custom-cursor"></div>

   + um pequeno JavaScript.

   Este CSS já deixa o visual preparado.
*/


@media (hover: hover) and (pointer: fine) {


    body.custom-cursor-active,
    body.custom-cursor-active * {

        cursor:
            none !important;
    }


    #custom-cursor {

        position:
            fixed;

        top:
            0;

        left:
            0;

        width:
            12px;

        height:
            12px;

        z-index:
            999999;

        pointer-events:
            none;

        opacity:
            0;

        border-radius:
            50%;

        background:

            linear-gradient(
                135deg,
                var(--purple),
                var(--purple-light)
            );

        box-shadow:

            0 0 12px
            rgba(139, 92, 246, 0.70),

            0 0 28px
            rgba(139, 92, 246, 0.30);

        transform:

            translate(
                -50%,
                -50%
            );

        transition:

            width
            .25s
            var(--ease),

            height
            .25s
            var(--ease),

            opacity
            .18s ease,

            background
            .25s ease,

            border-color
            .25s ease,

            box-shadow
            .25s ease;

        will-change:

            left,
            top,
            width,
            height;
    }


    /* Cursor aparece */

    body.cursor-visible
    #custom-cursor {

        opacity:
            1;
    }


    /* Cursor em elementos clicáveis */

    body.cursor-hover
    #custom-cursor {

        width:
            38px;

        height:
            38px;

        border:

            1px solid
            rgba(192, 132, 252, 0.75);

        background:

            rgba(139, 92, 246, 0.18);

        box-shadow:

            0 0 22px
            rgba(139, 92, 246, 0.42),

            0 0 48px
            rgba(139, 92, 246, 0.18);

        -webkit-backdrop-filter:
            blur(3px);

        backdrop-filter:
            blur(3px);
    }

}


/* =========================================================
   12. CURSOR — TOUCH
========================================================= */

@media (hover: none),
(pointer: coarse) {

    #custom-cursor {

        display:
            none !important;
    }

}


/* =========================================================
   13. CLASSE UTILITÁRIA — GLASS
========================================================= */

.glass {

    border:

        1px solid
        var(--border);

    background:

        rgba(255, 255, 255, 0.055);

    -webkit-backdrop-filter:

        blur(16px);

    backdrop-filter:

        blur(16px);

    box-shadow:

        0 18px 50px
        rgba(0, 0, 0, 0.20);
}


/* =========================================================
   14. CLASSE UTILITÁRIA — GLOW ROXO
========================================================= */

.purple-glow {

    box-shadow:

        0 20px 70px
        rgba(139, 92, 246, 0.18);
}


/* =========================================================
   15. TEXTO GRADIENTE
========================================================= */

.text-gradient {

    display:
        inline-block;

    color:
        transparent;

    background:

        linear-gradient(
            135deg,
            #ffffff 0%,
            #eee7ff 30%,
            #c084fc 65%,
            #8b5cf6 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;
}


/* =========================================================
   16. TABLET
========================================================= */

@media (max-width: 1024px) {

    body {

        background:

            radial-gradient(
                circle at 8% 8%,
                rgba(139, 92, 246, 0.18),
                transparent 36%
            ),

            radial-gradient(
                circle at 95% 26%,
                rgba(192, 132, 252, 0.08),
                transparent 34%
            ),

            linear-gradient(
                150deg,
                #050508 0%,
                #09070d 52%,
                #050508 100%
            );
    }


    body::before {

        background-size:
            56px 56px;
    }

}


/* =========================================================
   17. MOBILE
========================================================= */

@media (max-width: 767px) {

    body {

        background:

            radial-gradient(
                circle at 5% 5%,
                rgba(139, 92, 246, 0.16),
                transparent 38%
            ),

            linear-gradient(
                160deg,
                #050508,
                #09070d 55%,
                #050508
            );
    }


    body::before {

        background-size:
            48px 48px;

        opacity:
            0.55;
    }


    body::after {

        width:
            420px;

        height:
            420px;

        top:
            -220px;
    }

}


/* =========================================================
   18. REDUÇÃO DE MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto !important;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}/* End custom CSS */