.elementor-1200 .elementor-element.elementor-element-73565c87{--display:flex;--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;--justify-content:center;--align-items:center;--margin-top:0px;--margin-bottom:-125px;--margin-left:0px;--margin-right:0px;--padding-top:21px;--padding-bottom:25px;--padding-left:0px;--padding-right:0px;--z-index:9999;overflow:visible;}.elementor-1200 .elementor-element.elementor-element-7a1d4ecf{--display:flex;--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;--justify-content:flex-start;--align-items:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-1200 .elementor-element.elementor-element-5e3ace8 img{width:36%;}.elementor-1200 .elementor-element.elementor-element-5e3ace8:hover img{opacity:0.4;}.elementor-1200 .elementor-element.elementor-element-1233128{--display:flex;--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;--justify-content:flex-end;--align-items:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-1200 .elementor-element.elementor-element-1233128.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1200 .elementor-element.elementor-element-09b73d2 .elementor-menu-toggle{margin:0 auto;}.elementor-1200 .elementor-element.elementor-element-30ef6afd{--display:flex;--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;--justify-content:flex-end;--align-items:flex-end;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-1200 .elementor-element.elementor-element-4030b992 .elementor-button{background-color:#FFEC00;font-size:38px;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);border-radius:10px 10px 10px 10px;padding:15px 25px 15px 25px;}.elementor-1200 .elementor-element.elementor-element-4030b992 .elementor-button:hover, .elementor-1200 .elementor-element.elementor-element-4030b992 .elementor-button:focus{background-color:#54595F;}.elementor-1200 .elementor-element.elementor-element-4030b992 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1200 .elementor-element.elementor-element-4030b992 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1200 .elementor-element.elementor-element-4030b992 .elementor-button .elementor-button-content-wrapper{gap:15px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-1200 .elementor-element.elementor-element-73565c87{--padding-top:25px;--padding-bottom:25px;--padding-left:15px;--padding-right:15px;}.elementor-1200 .elementor-element.elementor-element-1233128{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-1200 .elementor-element.elementor-element-73565c87{--padding-top:30px;--padding-bottom:25px;--padding-left:15px;--padding-right:15px;}.elementor-1200 .elementor-element.elementor-element-7a1d4ecf{--width:67%;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1200 .elementor-element.elementor-element-1233128{--width:26%;--justify-content:flex-end;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-1200 .elementor-element.elementor-element-73565c87{--content-width:1280px;}.elementor-1200 .elementor-element.elementor-element-7a1d4ecf{--width:14%;}.elementor-1200 .elementor-element.elementor-element-1233128{--width:64%;}.elementor-1200 .elementor-element.elementor-element-30ef6afd{--width:18%;}}@media(max-width:1024px) and (min-width:768px){.elementor-1200 .elementor-element.elementor-element-7a1d4ecf{--width:38%;}.elementor-1200 .elementor-element.elementor-element-1233128{--width:62%;}.elementor-1200 .elementor-element.elementor-element-30ef6afd{--width:0%;}}/* Start custom CSS for theme-site-logo, class: .elementor-element-5e3ace8 *//* =====================================================================
DUAL G UI — EFEITO NEON NA LOGO
---------------------------------------------------------------------
Como usar:
1. Cole este código no Aparência → Personalizar → CSS Adicional
(ou no Customizer do seu tema WordPress).
2. O efeito é aplicado automaticamente em qualquer ![]()
da logo
que use os seletores comuns do WordPress (custom-logo, site-logo,
logo, etc.) e também em qualquer elemento com a classe .dualg-neon.
3. Se sua logo NÃO for pega automaticamente, adicione a classe
"dualg-neon" no ![]()
da sua logo manualmente.
===================================================================== */
/* =========================================================
1. SELETORES — alvos comuns onde a logo aparece
========================================================= */
.custom-logo,
.site-logo img,
.site-branding img,
.logo img,
header .logo img,
.header-logo img,
.elementor-widget-theme-site-logo img,
img.dualg-neon,
.dualg-neon img {
/* Inverte a logo PRETA para BRANCA mantendo todos os detalhes */
filter:
brightness(0) invert(1)
drop-shadow(0 0 6px rgba(0, 229, 255, 0.85))
drop-shadow(0 0 14px rgba(0, 229, 255, 0.55))
drop-shadow(0 0 26px rgba(212, 175, 55, 0.35));
transition: filter 0.5s ease, transform 0.5s ease;
animation: dualg-neon-pulse 3.5s ease-in-out infinite;
will-change: filter, transform;
}
/* =========================================================
2. HOVER — intensifica o glow ao passar o mouse
========================================================= */
.custom-logo:hover,
.site-logo img:hover,
.site-branding img:hover,
.logo img:hover,
header .logo img:hover,
.header-logo img:hover,
.elementor-widget-theme-site-logo img:hover,
img.dualg-neon:hover,
.dualg-neon img:hover {
transform: scale(1.04);
filter:
brightness(0) invert(1)
drop-shadow(0 0 10px rgba(0, 229, 255, 1))
drop-shadow(0 0 22px rgba(0, 229, 255, 0.85))
drop-shadow(0 0 44px rgba(212, 175, 55, 0.6));
}
/* =========================================================
3. ANIMAÇÃO — respiração neon contínua e sutil
========================================================= */
@keyframes dualg-neon-pulse {
0%, 100% {
filter:
brightness(0) invert(1)
drop-shadow(0 0 6px rgba(0, 229, 255, 0.85))
drop-shadow(0 0 14px rgba(0, 229, 255, 0.55))
drop-shadow(0 0 26px rgba(212, 175, 55, 0.35));
}
50% {
filter:
brightness(0) invert(1)
drop-shadow(0 0 9px rgba(0, 229, 255, 1))
drop-shadow(0 0 20px rgba(0, 229, 255, 0.7))
drop-shadow(0 0 36px rgba(212, 175, 55, 0.5));
}
}
/* =========================================================
4. ACESSIBILIDADE — desativa animação para quem prefere
menos movimento (boa prática WCAG)
========================================================= */
@media (prefers-reduced-motion: reduce) {
.custom-logo,
.site-logo img,
.site-branding img,
.logo img,
header .logo img,
.header-logo img,
.elementor-widget-theme-site-logo img,
img.dualg-neon,
.dualg-neon img {
animation: none;
}
}
/* =========================================================
5. VARIANTES OPCIONAIS — descomente a que preferir
========================================================= */
/* >>> VARIANTE A: NEON SÓ CIANO (mais limpa, sem o bronze)
.custom-logo,
.site-logo img,
img.dualg-neon {
filter:
brightness(0) invert(1)
drop-shadow(0 0 6px rgba(0, 229, 255, 0.9))
drop-shadow(0 0 16px rgba(0, 229, 255, 0.6))
drop-shadow(0 0 30px rgba(0, 229, 255, 0.3));
}
*/
/* >>> VARIANTE B: NEON BRONZE (luxo industrial)
.custom-logo,
.site-logo img,
img.dualg-neon {
filter:
brightness(0) invert(1)
drop-shadow(0 0 6px rgba(212, 175, 55, 0.9))
drop-shadow(0 0 16px rgba(212, 175, 55, 0.6))
drop-shadow(0 0 30px rgba(212, 175, 55, 0.3));
}
*/
/* >>> VARIANTE C: NEON FORTE (mais dramático, para fundos pretos)
.custom-logo,
.site-logo img,
img.dualg-neon {
filter:
brightness(0) invert(1)
drop-shadow(0 0 10px rgba(0, 229, 255, 1))
drop-shadow(0 0 22px rgba(0, 229, 255, 0.8))
drop-shadow(0 0 44px rgba(212, 175, 55, 0.5));
}
*/
/* >>> VARIANTE D: NEON SUTIL (sem animação, só glow leve)
.custom-logo,
.site-logo img,
img.dualg-neon {
filter:
brightness(0) invert(1)
drop-shadow(0 0 4px rgba(0, 229, 255, 0.7))
drop-shadow(0 0 10px rgba(0, 229, 255, 0.3));
animation: none;
}
*//* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-09b73d2 *//* ============================================================
MENU DE NAVEGAÇÃO PREMIUM - DUAL G UI
============================================================ */
/* 1. Estilo base dos links (Início, Serviços, Portfólio, etc) */
.dual-menu-pro .elementor-nav-menu a.elementor-item {
color: rgba(255, 255, 255, 0.65) !important; /* Prata sutil */
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
transition: color 0.3s ease, text-shadow 0.3s ease !important;
position: relative;
padding-bottom: 5px !important;
}
/* 2. Remove a linha padrão do Elementor */
.dual-menu-pro .elementor-nav-menu a.elementor-item::before,
.dual-menu-pro .elementor-nav-menu a.elementor-item::after {
display: none !important;
}
/* 3. A mágica do Hover: Texto acende e barra Ciano cresce do centro */
.dual-menu-pro .elementor-nav-menu a.elementor-item:hover,
.dual-menu-pro .elementor-nav-menu a.elementor-item.elementor-item-active {
color: #ffffff !important;
text-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important;
}
/* Criando a nova linha Neon personalizada */
.dual-menu-pro .elementor-nav-menu .elementor-item-anchor {
position: relative;
}
.dual-menu-pro .elementor-nav-menu a.elementor-item > span::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: #00E5FF; /* Ciano Neon */
box-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
border-radius: 2px;
}
/* A linha expande no Hover e no link ativo */
.dual-menu-pro .elementor-nav-menu a.elementor-item:hover > span::after,
.dual-menu-pro .elementor-nav-menu a.elementor-item.elementor-item-active > span::after {
width: 100%;
}
/* ============================================================
SUBMENU (Dropdown) E MOBILE (Hambúrguer)
============================================================ */
/* Fundo do Dropdown (Glassmorphism) */
.dual-menu-pro .elementor-nav-menu--dropdown {
background: rgba(15, 15, 15, 0.85) !important;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
padding: 10px !important;
}
/* Links do Dropdown */
.dual-menu-pro .elementor-nav-menu--dropdown a {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 13px !important;
border-radius: 6px;
transition: all 0.2s ease !important;
}
/* Hover no Dropdown (Fundo Ciano super transparente) */
.dual-menu-pro .elementor-nav-menu--dropdown a:hover {
color: #00E5FF !important;
background: rgba(0, 229, 255, 0.05) !important;
}
/* Ícone do menu Mobile (Hambúrguer) */
.dual-menu-pro .elementor-menu-toggle {
color: rgba(255, 255, 255, 0.8) !important;
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}
.dual-menu-pro .elementor-menu-toggle:hover {
color: #00E5FF !important;
border-color: rgba(0, 229, 255, 0.4) !important;
box-shadow: 0 0 10px rgba(0, 229, 255, 0.2) !important;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4030b992 *//* ============================================================
BOTÃO LUMINOSO (FALE CONOSCO) - DUAL G UI
============================================================ */
/* 1. Resetando o botão padrão do Elementor e aplicando o formato base */
.dual-btn-glow .elementor-button {
background: rgba(20, 15, 10, 0.6) !important; /* Fundo escuro levemente quente */
border: 1px solid rgba(212, 175, 55, 0.5) !important; /* Borda Dourada/Bronze */
color: #E8C872 !important; /* Texto Bronze Claro */
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
border-radius: 30px !important; /* Formato de pílula */
padding: 12px 28px !important;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
/* O brilho inicial do botão parado */
box-shadow:
0 0 15px rgba(212, 175, 55, 0.15),
inset 0 0 10px rgba(212, 175, 55, 0.05) !important;
/* Animação de pulsação suave contínua */
animation: dual-pulse-glow 3s infinite alternate;
}
/* 2. O Efeito Hover (Quando passa o mouse) */
.dual-btn-glow .elementor-button:hover {
background: rgba(212, 175, 55, 0.15) !important; /* Fundo acende um pouco */
border: 1px solid rgba(212, 175, 55, 0.9) !important; /* Borda fica forte */
color: #FFFFFF !important; /* Texto fica branco puro */
transform: translateY(-3px) scale(1.02); /* Levanta e cresce minimamente */
/* O brilho explode para fora e para dentro (Efeito Neon Tátil) */
box-shadow:
0 8px 25px rgba(212, 175, 55, 0.4),
0 0 15px rgba(212, 175, 55, 0.3),
inset 0 0 15px rgba(212, 175, 55, 0.2) !important;
}
/* 3. Efeito ao Clicar (Para dar sensação física / Tátil) */
.dual-btn-glow .elementor-button:active {
transform: translateY(1px) scale(0.98);
box-shadow: 0 2px 10px rgba(212, 175, 55, 0.2) !important;
}
/* 4. Animação de Pulsação (Cria vida no Header) */
@keyframes dual-pulse-glow {
0% {
box-shadow: 0 0 10px rgba(212, 175, 55, 0.1), inset 0 0 5px rgba(212, 175, 55, 0.05);
}
100% {
box-shadow: 0 0 20px rgba(212, 175, 55, 0.3), inset 0 0 10px rgba(212, 175, 55, 0.1);
}
}/* End custom CSS */