.elementor-kit-8{--e-global-color-primary:#030712;--e-global-color-secondary:#54595F;--e-global-color-text:#141414;--e-global-color-accent:#478FE5;--e-global-typography-primary-font-family:"Space Grotesk";--e-global-typography-primary-font-size:120px;--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Urbanist";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-text );}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1499px;}.e-con{--container-max-width:1499px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:10px;}.elementor-element{--widgets-spacing:10px 10px;--widgets-spacing-row:10px;--widgets-spacing-column:10px;}{}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;}}:root { --Azul_Digno:#478FE5; --Branco:#ffffff; --Fonte_Principal:Urbanist; }
/* Start custom CSS *//* Define que o container base não vai cortar os pontos */
.square-dots {
    position: relative;
    overflow: visible;
}

/* Cria os 4 pontos nos cantos */
.square-dots::after {
    content: "";
    position: absolute;
    /* Ajuste negativo para centralizar o ponto de 6px bem em cima da borda */
    top: -3px; 
    bottom: -3px; 
    left: -3px; 
    right: -3px; 
    
    pointer-events: none;
    z-index: 999;
    
    background-image: 
        linear-gradient(#000000, #000000), 
        linear-gradient(#000000, #000000), 
        linear-gradient(#000000, #000000), 
        linear-gradient(#000000, #000000);
        
    background-size: 6px 6px; /* Tamanho dos quadrados */
    
    background-position: 
        top left, 
        top right, 
        bottom left, 
        bottom right;
        
    background-repeat: no-repeat;
}


/* BTN BRANCO */



.btn-branco {
      transition: var(--transition);
    background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF !important;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.04), inset 0px 1px 0px rgba(255, 255, 255, 0.6), inset 0px -5px 0px #E4E4E4, inset 0px -6px 0px 1px #FAFAFA;
    border-radius: 12px !important;
    transition: var(--transition);
}


.btn-branco:hover {
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.18), inset 0px 1px 0px rgba(255, 255, 255, 0.6), inset 0px -6px 0px #E4E4E4, inset 0px 0px 0px 1px #FAFAFA;
}

/* BTN DARK */
.btn-dark {
   
}

.section-title-area .sub-title::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    top: 50%;
    transform: translateY(-50%);
    left: 4px;
    background: #4d89c7 !important;
}


.wpr-services-area .section-bottom-content .service-wrapper .content .top .tag::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    top: 50%;
    transform: translateY(-50%);
    left: 4px;
    background: #0d6efd !important;
}

.wpr-services-area .section-bottom-content .service-wrapper .content .bottom ul {
    border-left: 2px solid #0d6efd !important;
    padding: 0;
    padding-left: 16px !important;
    margin: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#goTop .border-progress {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 99px;
    border: 2px solid #478fe5 !important;
    mask-image: conic-gradient(#478fe5 var(--progress-angle, 0deg), transparent 0);
    -webkit-mask-image: conic-gradient(#478fe5 var(--progress-angle, 0deg), transparent 0) !important;
    content: "";
    z-index: 1;
    transition: var(--transition);
}

/* BOTÃO DIGNO - aplicar no Atomic Button com a classe: btn-servicos-dd */

.btn-servicos-dd {
    position: relative !important;
    overflow: hidden !important;
    min-height: 66px;
    padding: 0 24px 0 78px !important;
    border-radius: 12px !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    line-height: 1;
    background:
        radial-gradient(
            62.56% 62.56% at 28.14% -10.42%,
            rgba(255,255,255,.20) 0%,
            rgba(255,255,255,0) 100%
        ),
        linear-gradient(
            137.66deg,
            #40454A 21.13%,
            #292C2E 80.53%
        ) !important;
    box-shadow:
        0 3px 3px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.60),
        inset 0 -3px 0 #1A1A1A,
        inset 0 -4px 0 1px rgba(255,255,255,.10);
    transition: transform .25s ease, box-shadow .35s ease;
}

/* Área azul */
.btn-servicos-dd::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 52px;
    height: 52px;
    transform: translateY(-50%);
    border-radius: 8px;
    background: linear-gradient(
        178.82deg,
        #4D89C7 1.01%,
        #97BCE2 105.12%
    );
    box-shadow:
        4px 8px 2px rgba(0,0,0,.08),
        inset 0 -2px .5px #0D6EFD,
        inset 0 1px 0 #FFFFFF;
    transition: width .55s cubic-bezier(.22,1,.36,1);
    z-index: 1;
    pointer-events: none;
}

/* Setas */
.btn-servicos-dd::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 50%;
    width: 19px;
    height: 19px;
    transform: translateY(-50%);
    background-image: url("https://dignodesign.com.br/wp-content/themes/agenio/assets/images/icon/button-arrow.svg");
    background-repeat: repeat-x;
    background-size: 19px 19px;
    z-index: 2;
    pointer-events: none;
    transition:
        width .55s cubic-bezier(.22,1,.36,1),
        opacity .35s ease;
}

/* Tenta manter o conteúdo textual acima das pseudo-camadas */
.btn-servicos-dd > *,
.btn-servicos-dd .e-button-text,
.btn-servicos-dd .elementor-button-text {
    position: relative;
    z-index: 3;
    transition: opacity .25s ease;
}

.btn-servicos-dd:hover::before {
    width: calc(100% - 14px);
}

.btn-servicos-dd:hover::after {
    width: calc(100% - 45px);
    background-repeat: space;
    opacity: .25;
    animation: setasDD 1.1s ease-in-out infinite;
}

.btn-servicos-dd:hover > *,
.btn-servicos-dd:hover .e-button-text,
.btn-servicos-dd:hover .elementor-button-text {
    opacity: 0;
}

.btn-servicos-dd:active {
    transform: translateY(1px);
}

@keyframes setasDD {
    0%, 100% {
        transform: translateY(-50%) translateX(-2px);
        opacity: .12;
    }
    50% {
        transform: translateY(-50%) translateX(4px);
        opacity: .40;
    }
}

/* =========================================
   BOTÃO "COMEÇAR AGORA!" — DIGNO
   Elementor Atomic / V4
   Classe: btn-comecar-dd
========================================= */

.btn-comecar-dd {
    /* Estrutura */
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 253px !important;
    min-height: 52px;

    margin-inline: auto !important;
    padding: 16px 24px 20px !important;

    box-sizing: border-box;
    overflow: visible;

    /* Texto */
    color: #FFFFFF !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 600;
    line-height: 1;

    /* Visual */
    border: none !important;
    border-radius: 12px !important;

    background:
        radial-gradient(
            62.56% 62.56% at 28.14% -10.42%,
            rgba(255,255,255,.20) 0%,
            rgba(255,255,255,0) 100%
        ),
        linear-gradient(
            137.66deg,
            #40454A 21.13%,
            #292C2E 80.53%
        ) !important;

    box-shadow:
        0px 3px 3px rgba(0,0,0,.10),
        60px 50px 80px rgba(0,0,0,.15),
        20px 41.7776px 33.4221px rgba(0,0,0,.1503),
        10px 22.3363px 17.869px rgba(0,0,0,.1417),
        4px 12.5216px 10.0172px rgba(0,0,0,.135),
        0px 6.6501px 5.32008px rgba(0,0,0,.1283),
        0px 2.76726px 2.21381px rgba(0,0,0,.1197),
        inset 0px 1px 0px rgba(255,255,255,.60),
        inset 0px -5px 0px #1A1A1A,
        inset 0px -6px 0px 1px rgba(255,255,255,.10) !important;

    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        box-shadow .28s cubic-bezier(.22,1,.36,1),
        filter .28s ease !important;
}


/* Mantém o texto centralizado caso o Atomic crie elemento interno */
.btn-comecar-dd > *,
.btn-comecar-dd .e-button-text,
.btn-comecar-dd .elementor-button-text {
    position: relative;
    z-index: 2;
}


/* HOVER: leve elevação e brilho, sem perder o efeito 3D */
.btn-comecar-dd:hover {
    transform: translateY(-2px);

    filter: brightness(1.06);

    box-shadow:
        0px 4px 4px rgba(0,0,0,.12),
        60px 54px 82px rgba(0,0,0,.16),
        20px 43px 35px rgba(0,0,0,.15),
        10px 24px 19px rgba(0,0,0,.14),
        4px 14px 11px rgba(0,0,0,.135),
        0px 7px 6px rgba(0,0,0,.13),
        0px 3px 2px rgba(0,0,0,.12),
        inset 0px 1px 0px rgba(255,255,255,.68),
        inset 0px -5px 0px #171717,
        inset 0px -6px 0px 1px rgba(255,255,255,.12) !important;
}


/* CLICK: sensação física de botão pressionado */
.btn-comecar-dd:active {
    transform: translateY(2px);

    box-shadow:
        0px 2px 2px rgba(0,0,0,.10),
        18px 22px 30px rgba(0,0,0,.13),
        6px 10px 14px rgba(0,0,0,.11),
        inset 0px 1px 0px rgba(255,255,255,.45),
        inset 0px -2px 0px #1A1A1A,
        inset 0px -3px 0px 1px rgba(255,255,255,.08) !important;
}


/* Acessibilidade */
.btn-comecar-dd:focus-visible {
    outline: 2px solid #97BCE2 !important;
    outline-offset: 4px;
}


/* Mobile */
@media (max-width: 767px) {
    .btn-comecar-dd {
        max-width: 253px !important;
    }
}


/* Respeita preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
    .btn-comecar-dd {
        transition: none !important;
    }
}/* End custom CSS */