.elementor-10 .elementor-element.elementor-element-1e63fde{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-dce0d49{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right: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 );}.elementor-10 .elementor-element.elementor-element-ba54516 img{width:40%;}.elementor-10 .elementor-element.elementor-element-9e9bcf4{--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;--justify-content:flex-end;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-menu-toggle{margin:0 auto;background-color:#02010100;}.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu .elementor-item{font-family:"Montserrat", Sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:2px;}.elementor-10 .elementor-element.elementor-element-fe9584b div.elementor-menu-toggle{color:var( --e-global-color-accent );}.elementor-10 .elementor-element.elementor-element-fe9584b div.elementor-menu-toggle svg{fill:var( --e-global-color-accent );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-10 .elementor-element.elementor-element-d5f1a51 .elementor-button{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;}.elementor-10 .elementor-element.elementor-element-52bef06{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-65f73f7{--display:flex;--min-height:90vh;--justify-content:center;--overlay-opacity:0.15;}.elementor-10 .elementor-element.elementor-element-65f73f7::before, .elementor-10 .elementor-element.elementor-element-65f73f7 > .elementor-background-video-container::before, .elementor-10 .elementor-element.elementor-element-65f73f7 > .e-con-inner > .elementor-background-video-container::before, .elementor-10 .elementor-element.elementor-element-65f73f7 > .elementor-background-slideshow::before, .elementor-10 .elementor-element.elementor-element-65f73f7 > .e-con-inner > .elementor-background-slideshow::before, .elementor-10 .elementor-element.elementor-element-65f73f7 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://www.casasaltopadraobh.com.br/wp-content/uploads/2026/06/luxo_residencial_obra.webp");--background-overlay:'';background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-10 .elementor-element.elementor-element-32a7cdd{--display:flex;}.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-10 .elementor-element.elementor-element-c14489e .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-c14489e .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-c14489e{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-c14489e .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-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-10 .elementor-element.elementor-element-0d45543{color:#DADADA;}.elementor-10 .elementor-element.elementor-element-1c58560{--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;}.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;}.elementor-10 .elementor-element.elementor-element-6817a51{--display:flex;--min-height:90vh;--justify-content:center;--overlay-opacity:0.15;}.elementor-10 .elementor-element.elementor-element-6817a51::before, .elementor-10 .elementor-element.elementor-element-6817a51 > .elementor-background-video-container::before, .elementor-10 .elementor-element.elementor-element-6817a51 > .e-con-inner > .elementor-background-video-container::before, .elementor-10 .elementor-element.elementor-element-6817a51 > .elementor-background-slideshow::before, .elementor-10 .elementor-element.elementor-element-6817a51 > .e-con-inner > .elementor-background-slideshow::before, .elementor-10 .elementor-element.elementor-element-6817a51 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://www.casasaltopadraobh.com.br/wp-content/uploads/2026/06/reforma_apartamento_luxo.webp");--background-overlay:'';background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-10 .elementor-element.elementor-element-89be1ad{--display:flex;}.elementor-10 .elementor-element.elementor-element-08e61db .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-08e61db .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-08e61db{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-08e61db .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-8865a89{color:#DADADA;}.elementor-10 .elementor-element.elementor-element-246f210{--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;}.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;}.elementor-10 .elementor-element.elementor-element-3b0189f{--display:flex;--min-height:90vh;--justify-content:center;--overlay-opacity:0.15;}.elementor-10 .elementor-element.elementor-element-3b0189f::before, .elementor-10 .elementor-element.elementor-element-3b0189f > .elementor-background-video-container::before, .elementor-10 .elementor-element.elementor-element-3b0189f > .e-con-inner > .elementor-background-video-container::before, .elementor-10 .elementor-element.elementor-element-3b0189f > .elementor-background-slideshow::before, .elementor-10 .elementor-element.elementor-element-3b0189f > .e-con-inner > .elementor-background-slideshow::before, .elementor-10 .elementor-element.elementor-element-3b0189f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://www.casasaltopadraobh.com.br/wp-content/uploads/2026/06/instalacao_paineis_eps.webp");--background-overlay:'';background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-10 .elementor-element.elementor-element-bb2f7ce{--display:flex;}.elementor-10 .elementor-element.elementor-element-caa1633 .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-caa1633 .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-caa1633{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-caa1633 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-80c7556{color:#DADADA;}.elementor-10 .elementor-element.elementor-element-3f23a92{--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-10 .elementor-element.elementor-element-b6be050 .elementor-button{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;}.elementor-10 .elementor-element.elementor-element-88d2f55{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-dots-horizontal-position:0px;--e-n-carousel-dots-horizontal-transform:0%;--e-n-carousel-dots-horizontal-offset:20%;--e-n-carousel-dots-vertical-position:100%;--e-n-carousel-dots-vertical-transform:-100%;--e-n-carousel-dots-vertical-offset:-100px;}.elementor-10 .elementor-element.elementor-element-a2cf826{--display:flex;--padding-top:6em;--padding-bottom:6em;--padding-left:1em;--padding-right:1em;}.elementor-10 .elementor-element.elementor-element-4fc5a7d{--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;}.elementor-10 .elementor-element.elementor-element-eca6da5{--display:flex;}.elementor-10 .elementor-element.elementor-element-ef0082c .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-ef0082c .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-ef0082c{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-ef0082c .elementor-icon-list-text{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-b955944{--display:flex;}.elementor-10 .elementor-element.elementor-element-15facdc{font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-10 .elementor-element.elementor-element-510a820 .elementor-button{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;}.elementor-10 .elementor-element.elementor-element-9578b7d{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-widget-call-to-action .elementor-cta__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-call-to-action .elementor-cta__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-call-to-action .elementor-cta__button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-call-to-action .elementor-ribbon-inner{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta .elementor-cta__bg, .elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-10 .elementor-element.elementor-element-11c5e97{grid-column:span 2;}.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__content{min-height:20em;text-align:start;}.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta .elementor-cta__bg, .elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-10 .elementor-element.elementor-element-5e39e19{grid-column:span 1;}.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__content{min-height:20em;text-align:start;}.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta .elementor-cta__bg, .elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-10 .elementor-element.elementor-element-b31fee3{grid-column:span 1;}.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__content{min-height:20em;text-align:start;}.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta .elementor-cta__bg, .elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-10 .elementor-element.elementor-element-e0ad7ba{grid-column:span 2;}.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__content{min-height:20em;text-align:start;}.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta .elementor-cta__bg, .elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-10 .elementor-element.elementor-element-0a1b413{grid-column:span 1;}.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__content{min-height:20em;text-align:start;}.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta .elementor-cta__bg, .elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-10 .elementor-element.elementor-element-7b4947a{grid-column:span 1;}.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__content{min-height:20em;text-align:start;}.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta .elementor-cta__bg, .elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-10 .elementor-element.elementor-element-e6ddcba{grid-column:span 3;}.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__content{min-height:20em;text-align:start;}.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta .elementor-cta__bg, .elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-10 .elementor-element.elementor-element-012db2a{grid-column:span 1;}.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta__content{min-height:20em;text-align:start;}.elementor-10 .elementor-element.elementor-element-2fabefc{--display:flex;--padding-top:6em;--padding-bottom:6em;--padding-left:1em;--padding-right:1em;}.elementor-10 .elementor-element.elementor-element-148da45{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:40px 40px;--row-gap:40px;--column-gap:40px;}.elementor-10 .elementor-element.elementor-element-fbea91e{--display:flex;}.elementor-10 .elementor-element.elementor-element-625bfd0 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-625bfd0 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-625bfd0{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-625bfd0 .elementor-icon-list-text{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-786ddbb{--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;--align-items:center;--gap:60px 60px;--row-gap:60px;--column-gap:60px;}.elementor-10 .elementor-element.elementor-element-4b0b892{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-4b0b892.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-a1b9c75 .elementor-wrapper{--video-aspect-ratio:0.5625;}.elementor-10 .elementor-element.elementor-element-ccb4864{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-ccb4864.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-518f9eb .elementor-wrapper{--video-aspect-ratio:0.5625;}.elementor-10 .elementor-element.elementor-element-15a1e9e{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-15a1e9e.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-abfe5b2.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-abfe5b2 .elementor-wrapper{--video-aspect-ratio:0.5625;}.elementor-10 .elementor-element.elementor-element-48b0f1a{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-swiper-slides-gap:10px;width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;}.elementor-widget-gallery .elementor-gallery-item__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-gallery .elementor-gallery-item__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-gallery{--galleries-title-color-normal:var( --e-global-color-primary );--galleries-title-color-hover:var( --e-global-color-secondary );--galleries-pointer-bg-color-hover:var( --e-global-color-accent );--gallery-title-color-active:var( --e-global-color-secondary );--galleries-pointer-bg-color-active:var( --e-global-color-accent );}.elementor-widget-gallery .elementor-gallery-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-10 .elementor-element.elementor-element-395a6ca .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-10 .elementor-element.elementor-element-395a6ca .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-10 .elementor-element.elementor-element-395a6ca{width:initial;max-width:initial;--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}.elementor-10 .elementor-element.elementor-element-e20304d{--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;--gap:80px 80px;--row-gap:80px;--column-gap:80px;--padding-top:6em;--padding-bottom:6em;--padding-left:1em;--padding-right:1em;}.elementor-10 .elementor-element.elementor-element-e20304d:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-e20304d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-9f70668 );}.elementor-10 .elementor-element.elementor-element-d3a037a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-2858659.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-2858659 img{width:100%;height:100%;object-fit:cover;object-position:center center;}.elementor-10 .elementor-element.elementor-element-902643f{--display:flex;}.elementor-10 .elementor-element.elementor-element-221390b .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-221390b .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-221390b{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-221390b .elementor-icon-list-text{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-af80e40{margin:8px 0px calc(var(--kit-widget-spacing, 0px) + 16px) 0px;font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-10 .elementor-element.elementor-element-92b0dbd{--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;--align-items:center;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
.elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{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-10 .elementor-element.elementor-element-f207635{width:var( --container-widget-width, 47% );max-width:47%;--container-widget-width:47%;--container-widget-flex-grow:0;}.elementor-10 .elementor-element.elementor-element-d395c6e{width:var( --container-widget-width, 47% );max-width:47%;--container-widget-width:47%;--container-widget-flex-grow:0;}.elementor-10 .elementor-element.elementor-element-485d5ba{width:var( --container-widget-width, 47% );max-width:47%;--container-widget-width:47%;--container-widget-flex-grow:0;}.elementor-10 .elementor-element.elementor-element-556a25d{width:var( --container-widget-width, 47% );max-width:47%;--container-widget-width:47%;--container-widget-flex-grow:0;}.elementor-10 .elementor-element.elementor-element-556a25d .elementor-icon-box-wrapper{gap:15px;}.elementor-10 .elementor-element.elementor-element-533ef03{--display:flex;--padding-top:6em;--padding-bottom:6em;--padding-left:1em;--padding-right:1em;}.elementor-10 .elementor-element.elementor-element-9f6e491 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-9f6e491 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-9f6e491{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-9f6e491 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-ff90931{font-family:"Poppins", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-widget-testimonial-carousel .elementor-testimonial__text{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 );}.elementor-widget-testimonial-carousel .elementor-testimonial__name{color:var( --e-global-color-text );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-testimonial-carousel .elementor-testimonial__title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-10 .elementor-element.elementor-element-c41b89d .elementor-swiper-button{font-size:20px;}.elementor-10 .elementor-element.elementor-element-c41b89d .elementor-testimonial__text{color:#CDCDCE;font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-c41b89d .elementor-testimonial__title{color:#949494;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-10 .elementor-element.elementor-element-0a9f09b{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--gap:60px 60px;--row-gap:60px;--column-gap:60px;--padding-top:6em;--padding-bottom:6em;--padding-left:1em;--padding-right:1em;}.elementor-10 .elementor-element.elementor-element-746a2af{--display:flex;}.elementor-10 .elementor-element.elementor-element-4a47151{--display:flex;}.elementor-10 .elementor-element.elementor-element-cd9afb9{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-bd5daba{--display:flex;}.elementor-10 .elementor-element.elementor-element-d1ece6f{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-89b5bfa{--display:flex;}.elementor-10 .elementor-element.elementor-element-63f34fc{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-a5fb6b3{--display:flex;}.elementor-10 .elementor-element.elementor-element-0f251d5{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-3bd1138{--display:flex;}.elementor-10 .elementor-element.elementor-element-8a2d717{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-2e43351{--display:flex;}.elementor-10 .elementor-element.elementor-element-1715660{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-b1878d4{--display:flex;}.elementor-10 .elementor-element.elementor-element-3115fb4{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-af10cba{--display:flex;}.elementor-10 .elementor-element.elementor-element-936f3b9{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-1c37003{--n-accordion-title-font-size:1rem;--n-accordion-title-justify-content:space-between;--n-accordion-title-flex-grow:1;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-icon-size:15px;--n-accordion-icon-hover-color:var( --e-global-color-accent );--n-accordion-icon-active-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-1c37003 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{border-style:none;}:where( .elementor-10 .elementor-element.elementor-element-1c37003 > .e-n-accordion > .e-n-accordion-item ) > .e-con{border-style:none;}.elementor-10 .elementor-element.elementor-element-0b3d4ff{--display:flex;--justify-content:center;}.elementor-10 .elementor-element.elementor-element-26af5aa .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-26af5aa .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-26af5aa{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-26af5aa .elementor-icon-list-text{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-2d28dc2{font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-10 .elementor-element.elementor-element-e6e0f59{--display:flex;--padding-top:6em;--padding-bottom:6em;--padding-left:1em;--padding-right:1em;}.elementor-10 .elementor-element.elementor-element-e6e0f59:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-e6e0f59 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-9f70668 );}.elementor-10 .elementor-element.elementor-element-fdf7815 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-fdf7815 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-fdf7815{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-fdf7815 .elementor-icon-list-text{transition:color 0.3s;}.elementor-widget-posts .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-posts .elementor-post__meta-data{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .elementor-post__excerpt p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-posts .elementor-post__read-more{color:var( --e-global-color-accent );}.elementor-widget-posts a.elementor-post__read-more{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__card .elementor-post__badge{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-10 .elementor-element.elementor-element-4cd1bd0{--item-display:flex;--read-more-alignment:1;--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-10 .elementor-element.elementor-element-4cd1bd0 > .elementor-widget-container{margin:16px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.66 * 100% );}.elementor-10 .elementor-element.elementor-element-4cd1bd0:after{content:"0.66";}.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__thumbnail__link{width:100%;}.elementor-10 .elementor-element.elementor-element-4cd1bd0.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:20px;}.elementor-10 .elementor-element.elementor-element-4cd1bd0.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:20px;}.elementor-10 .elementor-element.elementor-element-4cd1bd0.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:20px;}.elementor-10 .elementor-element.elementor-element-9849d27{--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:6em;--padding-bottom:6em;--padding-left:1em;--padding-right:1em;}.elementor-10 .elementor-element.elementor-element-053523b{--display:flex;}.elementor-10 .elementor-element.elementor-element-0aa0e0a .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-0aa0e0a .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-0aa0e0a{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-0aa0e0a .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-bd1550a{font-family:"Poppins", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-10 .elementor-element.elementor-element-fca1ef8{--display:flex;--justify-content:center;}.elementor-10 .elementor-element.elementor-element-fca1ef8.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-4db70ef .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-weight:600;}.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-10 .elementor-element.elementor-element-160246d{--divider-border-style:solid;--divider-color:#B01C2469;--divider-border-width:1px;}.elementor-10 .elementor-element.elementor-element-160246d .elementor-divider-separator{width:80%;margin:0 auto;margin-left:0;}.elementor-10 .elementor-element.elementor-element-160246d .elementor-divider{text-align:left;padding-block-start:0px;padding-block-end:0px;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{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 );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group{padding-right:calc( 30px/2 );padding-left:calc( 30px/2 );margin-bottom:30px;}.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-form-fields-wrapper{margin-left:calc( -30px/2 );margin-right:calc( -30px/2 );margin-bottom:-30px;}.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-type-html{padding-bottom:0px;}.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-10 .elementor-element.elementor-element-8a64f67 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-button[type="submit"]{color:#ffffff;}.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-10 .elementor-element.elementor-element-8a64f67 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-10 .elementor-element.elementor-element-8a64f67 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-10 .elementor-element.elementor-element-8a64f67 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-10 .elementor-element.elementor-element-8a64f67{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-10 .elementor-element.elementor-element-5f994d0{--display:flex;--padding-top:3em;--padding-bottom:3em;--padding-left:1em;--padding-right:1em;}.elementor-10 .elementor-element.elementor-element-4b214b5{--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;--gap:40px 40px;--row-gap:40px;--column-gap:40px;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#B4B1B18C;--border-color:#B4B1B18C;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:32px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-dc2a0d4{--display:flex;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:2em;}.elementor-10 .elementor-element.elementor-element-dc2a0d4.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-079bda3{text-align:center;}.elementor-10 .elementor-element.elementor-element-079bda3 img{width:50%;}.elementor-10 .elementor-element.elementor-element-6a45cfc{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-edb9e42{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-55a9509{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-text{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-4836c72{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-224aa9e{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-text{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-1b31ed9{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-10 .elementor-element.elementor-element-e95bff9{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-text{transition:color 0.3s;}.elementor-10 .elementor-element.elementor-element-b9b71df{--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;--justify-content:space-between;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-88892f4{font-family:"Poppins", Sans-serif;font-size:12px;font-weight:400;color:#969696;}.elementor-10 .elementor-element.elementor-element-ce42adf{font-family:"Poppins", Sans-serif;font-size:12px;font-weight:400;color:#969696;}@media(max-width:1024px){.elementor-10 .elementor-element.elementor-element-1e63fde{--margin-top:0em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-10 .elementor-element.elementor-element-ba54516 img{width:50%;}.elementor-10 .elementor-element.elementor-element-9e9bcf4{--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:2em;}.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:40px !important;}.elementor-10 .elementor-element.elementor-element-fe9584b{--nav-menu-icon-size:24px;}.elementor-10 .elementor-element.elementor-element-32a7cdd{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-1c58560{--justify-content:flex-start;}.elementor-10 .elementor-element.elementor-element-89be1ad{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-246f210{--justify-content:flex-start;}.elementor-10 .elementor-element.elementor-element-bb2f7ce{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-3f23a92{--justify-content:flex-start;}.elementor-10 .elementor-element.elementor-element-88d2f55{--e-n-carousel-swiper-slides-to-display:1;}.elementor-10 .elementor-element.elementor-element-eca6da5{--justify-content:flex-start;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-ef0082c.elementor-element{--align-self:flex-start;}.elementor-10 .elementor-element.elementor-element-9578b7d{--e-con-grid-template-columns:repeat(4, 1fr);--grid-auto-flow:row;}.elementor-10 .elementor-element.elementor-element-11c5e97{grid-column:span 2;}.elementor-10 .elementor-element.elementor-element-5e39e19{grid-column:span 2;}.elementor-10 .elementor-element.elementor-element-b31fee3{grid-column:span 2;}.elementor-10 .elementor-element.elementor-element-0a1b413{grid-column:span 2;}.elementor-10 .elementor-element.elementor-element-7b4947a{grid-column:span 2;}.elementor-10 .elementor-element.elementor-element-e6ddcba{grid-column:span 2;}.elementor-10 .elementor-element.elementor-element-012db2a{grid-column:span 2;}.elementor-10 .elementor-element.elementor-element-fbea91e{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-625bfd0.elementor-element{--align-self:flex-start;}.elementor-10 .elementor-element.elementor-element-786ddbb{--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;--gap:60px 60px;--row-gap:60px;--column-gap:60px;}.elementor-10 .elementor-element.elementor-element-48b0f1a{--e-n-carousel-swiper-slides-to-display:1;--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-10 .elementor-element.elementor-element-395a6ca{margin:0em 0em calc(var(--kit-widget-spacing, 0px) + 0em) 0em;--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-10 .elementor-element.elementor-element-e20304d{--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-2858659{text-align:center;}.elementor-10 .elementor-element.elementor-element-2858659 img{width:50%;}.elementor-10 .elementor-element.elementor-element-902643f{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-af80e40{text-align:center;font-size:15px;}.elementor-10 .elementor-element.elementor-element-533ef03{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-0b3d4ff{--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-e6e0f59{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-82f1833{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-10 .elementor-element.elementor-element-9849d27{--padding-top:4em;--padding-bottom:4em;--padding-left:1em;--padding-right:1em;}.elementor-10 .elementor-element.elementor-element-053523b{--justify-content:center;}.elementor-10 .elementor-element.elementor-element-4b214b5{--flex-wrap:wrap;}.elementor-10 .elementor-element.elementor-element-dc2a0d4{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0em;--padding-bottom:0em;--padding-left:4em;--padding-right:4em;}.elementor-10 .elementor-element.elementor-element-079bda3{text-align:center;}.elementor-10 .elementor-element.elementor-element-079bda3 img{width:30%;}.elementor-10 .elementor-element.elementor-element-6a45cfc{text-align:center;font-size:13px;}.elementor-10 .elementor-element.elementor-element-b9b71df{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:40px 40px;--row-gap:40px;--column-gap:40px;}}@media(max-width:767px){.elementor-10 .elementor-element.elementor-element-1e63fde{--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;}.elementor-10 .elementor-element.elementor-element-dce0d49{--width:45%;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-10 .elementor-element.elementor-element-ba54516{text-align:end;}.elementor-10 .elementor-element.elementor-element-ba54516 img{width:60%;}.elementor-10 .elementor-element.elementor-element-9e9bcf4{--width:45%;--justify-content:center;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:20px !important;}.elementor-10 .elementor-element.elementor-element-65f73f7{--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-10 .elementor-element.elementor-element-32a7cdd{--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-10 .elementor-element.elementor-element-1c58560{--justify-content:center;}.elementor-10 .elementor-element.elementor-element-246f210{--justify-content:center;}.elementor-10 .elementor-element.elementor-element-3f23a92{--justify-content:center;}.elementor-10 .elementor-element.elementor-element-88d2f55{--e-n-carousel-swiper-slides-to-display:1;}.elementor-10 .elementor-element.elementor-element-eca6da5{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-15facdc{text-align:center;font-size:14px;}.elementor-10 .elementor-element.elementor-element-9578b7d{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__content{min-height:25em;}.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__content{min-height:25em;}.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__content{min-height:25em;}.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__content{min-height:25em;}.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__content{min-height:25em;}.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__content{min-height:25em;}.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__content{min-height:25em;}.elementor-10 .elementor-element.elementor-element-fbea91e{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-4f79e62{text-align:center;}.elementor-10 .elementor-element.elementor-element-786ddbb{--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-10 .elementor-element.elementor-element-48b0f1a{--e-n-carousel-swiper-slides-to-display:1;}.elementor-10 .elementor-element.elementor-element-48b0f1a :is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {padding:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-2858659 img{width:100%;}.elementor-10 .elementor-element.elementor-element-f207635{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-10 .elementor-element.elementor-element-d395c6e{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-10 .elementor-element.elementor-element-485d5ba{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-10 .elementor-element.elementor-element-556a25d{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-10 .elementor-element.elementor-element-15d9f76{text-align:center;}.elementor-10 .elementor-element.elementor-element-ff90931{text-align:center;font-size:14px;}.elementor-10 .elementor-element.elementor-element-47212e4{text-align:center;}.elementor-10 .elementor-element.elementor-element-2d28dc2{text-align:center;font-size:14px;}.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-10 .elementor-element.elementor-element-4cd1bd0:after{content:"0.5";}.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__thumbnail__link{width:100%;}.elementor-10 .elementor-element.elementor-element-cab1298{text-align:center;}.elementor-10 .elementor-element.elementor-element-bd1550a{text-align:center;font-size:14px;}.elementor-10 .elementor-element.elementor-element-160246d .elementor-divider{text-align:center;padding-block-start:10px;padding-block-end:10px;}.elementor-10 .elementor-element.elementor-element-160246d .elementor-divider-separator{margin:0 auto;margin-center:0;}.elementor-10 .elementor-element.elementor-element-079bda3 img{width:80%;}.elementor-10 .elementor-element.elementor-element-88892f4{text-align:center;}.elementor-10 .elementor-element.elementor-element-ce42adf{text-align:center;}}@media(min-width:768px){.elementor-10 .elementor-element.elementor-element-dce0d49{--width:30%;}.elementor-10 .elementor-element.elementor-element-9e9bcf4{--width:70%;}.elementor-10 .elementor-element.elementor-element-053523b{--width:50%;}.elementor-10 .elementor-element.elementor-element-fca1ef8{--width:50%;}.elementor-10 .elementor-element.elementor-element-dc2a0d4{--width:30.533%;}.elementor-10 .elementor-element.elementor-element-edb9e42{--width:15%;}.elementor-10 .elementor-element.elementor-element-4836c72{--width:15%;}.elementor-10 .elementor-element.elementor-element-1b31ed9{--width:30%;}}@media(max-width:1024px) and (min-width:768px){.elementor-10 .elementor-element.elementor-element-dc2a0d4{--width:100%;}.elementor-10 .elementor-element.elementor-element-edb9e42{--width:28%;}.elementor-10 .elementor-element.elementor-element-4836c72{--width:28%;}.elementor-10 .elementor-element.elementor-element-1b31ed9{--width:28%;}}/* Start custom CSS for nav-menu, class: .elementor-element-fe9584b *//* ==========================================================================
WIDGET NAV MENU - GAVETA MOBILE DROPDOWN (GLASSMORPHISM & ACCELERATED)
========================================================================== */
/* 1. O CONTEINER SUSPENSO (A caixa do menu aberto) */
.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu--dropdown {
background-color: rgba(250, 248, 244, 0.95) !important; /* Creme caloroso translúcido */
backdrop-filter: blur(15px) !important; /* Desfoque de fundo premium */
-webkit-backdrop-filter: blur(15px) !important;
border-radius: 0px 0px 4px 4px !important; /* Arredondamento sutil na base */
border: 1px solid rgba(13, 34, 68, 0.06) !important;
border-top: none !important;
padding: 15px 0 !important;
box-shadow: 0 15px 35px rgba(13, 34, 68, 0.08) !important; /* Sombra de flutuação */
/* Posicionamento perfeito para não sobrepor o botão ou a logo */
top: 100% !important;
/* Transição suave de abertura */
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
/* 2. OS ITENS DO MENU (Links individuais) */
.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu--dropdown .elementor-item {
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #0d2244 !important; /* Azul Marinho Principal */
padding: 16px 24px !important;
border-bottom: 1px solid rgba(13, 34, 68, 0.03) !important; /* Linha técnica fina */
display: block !important;
position: relative !important;
/* Preparação de Hardware para animação ativa */
transform: translateZ(0);
will-change: background-color, color, padding-left;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Remove a linha divisória do último item da lista */
.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu--dropdown .elementor-item:last-child {
border-bottom: none !important;
}
/* 3. MICROINTERAÇÃO DE SELEÇÃO (Hover / Touch) */
/* Quando o usuário passa o mouse ou toca na opção, o link ganha
um recuo lateral técnico e destaca o vermelho institucional */
.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu--dropdown .elementor-item:focus,
.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
color: #b01c24 !important; /* Vermelho assinatura */
background-color: rgba(176, 28, 36, 0.02) !important; /* Fundo vermelho ultra translúcido */
padding-left: 32px !important; /* Deslocamento tátil suave */
}
/* Detalhe visual: adiciona uma pequena barra vertical vermelha no hover à esquerda */
.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu--dropdown .elementor-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background-color: #b01c24 !important;
transform: scaleY(0);
transition: transform 0.3s ease !important;
}
.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-nav-menu--dropdown .elementor-item:hover::before {
transform: scaleY(1);
}
/* 4. CUSTOMIZAÇÃO DO BOTÃO DE TOGGLE (O Ícone de Hambúrguer / Fechar) */
/* Alinha e suaviza a rotação do ícone de fechar (X) exibido em image_6eba84.png */
.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-menu-toggle {
background-color: transparent !important;
color: #0d2244 !important;
transition: color 0.3s ease, transform 0.3s ease !important;
}
.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-menu-toggle:hover {
color: #b01c24 !important;
}
.elementor-10 .elementor-element.elementor-element-fe9584b .elementor-menu-toggle.elementor-active {
transform: rotate(90deg); /* Giro suave ao abrir */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-d5f1a51 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-d5f1a51 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-d5f1a51 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-d5f1a51 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-d5f1a51 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-d5f1a51 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-d5f1a51 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1e63fde *//* ==========================================================================
HEADER PREMIUM CLEAN - CASA PADRÃO (GLASSMORPHISM ESTABILIZADO)
========================================================================== */
/* 1. ESTADO NATURAL (No topo da página) */
.elementor-10 .elementor-element.elementor-element-1e63fde {
width: 100% !important;
margin: 0 !important;
/* Fundo limpo e plano no início */
background-color: #FAF8F4 !important; /* Cor creme calorosa da marca */
border-bottom: 1px solid rgba(13, 34, 68, 0.05) !important;
z-index: 9999 !important;
transition: background-color 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease !important;
}
/* ==========================================================================
RESET COUGAR - CORREÇÃO DE ESPAÇO FANTASMA DO STICKY ELEMENTOR
========================================================================== */
/* Remove qualquer margem, espaçamento ou quebra forçada pelo tema/Elementor */
.elementor-10 .elementor-element.elementor-element-1e63fde {
position: sticky !important;
top: 0 !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
/* Força o container seguinte (a seção do Hero) a ignorar o placeholder do Elementor */
.elementor-10 .elementor-element.elementor-element-1e63fde + .elementor-section,
.elementor-10 .elementor-element.elementor-element-1e63fde + .e-con,
.elementor-10 .elementor-element.elementor-element-1e63fde + .e-container {
margin-top: 0 !important;
}
/*
Garante que o elemento "Spacer" invisível injetado pelo JavaScript do Elementor
(.elementor-sticky__spacer) seja forçado a ter altura zero ou seja ocultado
*/
.elementor-sticky__spacer {
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: none !important;
}
/* ==========================================================================
2. ESTADO STICKY ATIVO (Gatilho disparado ao rolar a página)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-1e63fde.elementor-sticky--active {
padding: 8px 0 !important; /* Reduz o preenchimento para o header encolher (shrink) */
margin: 0 !important;
/* Efeito Glassmorphism Premium: Fundo semi-transparente com desfoque de fundo */
background-color: rgba(250, 248, 244, 0.80) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-bottom: 1px solid rgba(13, 34, 68, 0.08) !important;
box-shadow: 0 10px 30px rgba(13, 34, 68, 0.04) !important; /* Sombra sutil de sustentação */
}
/* ==========================================================================
3. LINKS DO MENU & MICROINTERAÇÕES
========================================================================== */
.elementor-10 .elementor-element.elementor-element-1e63fde .elementor-nav-menu--main .elementor-item {
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #0D2244 !important; /* Azul Marinho da Logo */
letter-spacing: 0.5px !important;
padding: 10px 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
.elementor-10 .elementor-element.elementor-element-1e63fde .elementor-nav-menu--main .elementor-item:hover {
color: #B01C24 !important; /* Vermelho Destaque */
}
/* Efeito Underline Minimalista de Precisão Técnico-Arquitetônica */
.elementor-10 .elementor-element.elementor-element-1e63fde .elementor-nav-menu--main .elementor-item::after {
content: '';
position: absolute;
bottom: 2px;
left: 18px;
width: 0;
height: 2px;
background-color: #B01C24 !important;
transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.elementor-10 .elementor-element.elementor-element-1e63fde .elementor-nav-menu--main .elementor-item:hover::after,
.elementor-10 .elementor-element.elementor-element-1e63fde .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
width: calc(100% - 36px);
}
/* Redução proporcional do botão do cabeçalho */
.elementor-10 .elementor-element.elementor-element-1e63fde .elementor-button {
padding: 12px 24px !important;
font-size: 13px !important;
}
/* ==========================================================================
4. COMPORTAMENTO MÓVEL RESPONSIVO
========================================================================= */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-1e63fde {
padding: 10px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-1e63fde .elementor-menu-toggle {
color: #0D2244 !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-944f511 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-23cc5e7 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO SECUNDÁRIO PREMIUM (ELEGANTE & OUTLINE)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button {
position: relative !important;
background-color: transparent !important; /* Totalmente limpo e transparente */
color: #fff !important; /* Texto no Azul Marinho da sua logo */
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 15px 32px !important;
border-radius: 3px !important; /* Alinhado com a geometria do cabeçalho e botão principal */
border-bottom: 2px solid #fff !important; /* Borda precisa na cor marinho */
overflow: hidden !important; /* Necessário para conter o efeito de preenchimento interno */
z-index: 1 !important;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
box-shadow: none !important;
}
/* Pseudo-elemento para o efeito de Preenchimento Líquido (Slide-up Fill) */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button::before {
content: '';
position: absolute;
bottom: -100%; /* Começa escondido logo abaixo do botão */
left: 0;
width: 100%;
height: 100%;
background-color: #0D2244 !important; /* Cor que vai preencher o botão no hover */
z-index: -1 !important; /* Fica atrás do texto do botão */
transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O fundo sobe preenchendo o espaço e o texto vira branco */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button:hover {
color: #FAF8F4 !important; /* Texto muda para o Branco Caloroso para dar leitura */
border-color: #0D2244 !important;
transform: translateY(-2px); /* Leve elevação clean */
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.1) !important;
}
/* Ativa o preenchimento subindo de forma ultra fluida */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button:hover::before {
bottom: 0;
}
/* Feedback de clique real */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(13, 34, 68, 0.15) !important;
}
/* ==========================================================================
VERSÃO ADAPTATIVA PARA O HERO (SOBRE FUNDO ESCURO)
Se você usar este botão dentro do seu carrossel marinho, adicione a classe
'btn-hero-dark' no widget e este bloco abaixo vai clarear a borda automaticamente.
========================================================================== */
.elementor-10 .elementor-element.elementor-element-23cc5e7.btn-hero-dark .elementor-button {
color: #FAF8F4 !important;
border-color: rgba(254, 254, 254, 0.4) !important;
}
.elementor-10 .elementor-element.elementor-element-23cc5e7.btn-hero-dark .elementor-button::before {
background-color: #B01C24 !important; /* No Hero escuro, ele preenche com o Vermelho da marca */
}
.elementor-10 .elementor-element.elementor-element-23cc5e7.btn-hero-dark .elementor-button:hover {
color: #FFFFFF !important;
border-color: #B01C24 !important;
box-shadow: 0 6px 20px rgba(176, 28, 36, 0.3) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button {
width: 100% !important; /* Ocupa 100% da largura em telas touch */
text-align: center !important;
padding: 14px 24px !important;
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32a7cdd *//* ==========================================================================
CSS CUSTOMIZADO: CONTAINER DO HERO (MÁXIMA LEGIBILIDADE & RESPONSIVIDADE)
========================================================================== */
/* Configuração Base do Container Textos (Desktop) */
.elementor-10 .elementor-element.elementor-element-32a7cdd {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* Alinhamento à esquerda corporativo */
gap: 24px !important; /* Espaçamento idêntico e limpo entre os blocos de texto */
width: 100% !important;
max-width: 780px !important; /* Limita a largura para o texto não esticar demais */
padding: 60px 0 !important;
text-align: left !important;
z-index: 3 !important;
}
/* 1. EYEBROW / BADGE (Widget Lista de Ícones do Elementor) */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-widget-icon-list {
margin-bottom: -8px !important; /* Aproxima sutilmente do título */
}
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-item {
background-color: #B01C24 !important; /* Vermelho institucional da logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 2px !important;
box-shadow: 0 4px 10px rgba(176, 28, 36, 0.2) !important;
}
/* Ajuste do ícone dentro do badge */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-icon svg {
width: 12px !important;
height: 12px !important;
fill: #FFFFFF !important;
margin-right: 6px !important;
}
/* 2. TÍTULO PRINCIPAL (Widget Título H1) */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(42px, 5vw, 68px) !important; /* Tipografia fluida inteligente */
line-height: 1.05 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 !important;
}
/* Palavra de Destaque no H1 (Envolva com Texto no Elementor se desejar) */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title em {
font-style: normal !important;
color: #D42030 !important; /* Vermelho brilhante mapeado no HTML */
display: block !important; /* Força a quebra de linha estilizada */
}
/* 3. DESCRIÇÃO (Widget Editor de Texto) */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.85) !important; /* Branco caloroso com leve transparência premium */
max-width: 580px !important; /* Evita que a descrição ocupe toda a largura do H1 */
margin: 0 !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-32a7cdd {
max-width: 90% !important;
gap: 30px !important;
padding: 40px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-size: 46px !important; /* Trava uma escala intermediária confortável */
}
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-size: 15px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-32a7cdd {
max-width: 100% !important;
align-items: center !important; /* Centraliza todo o fluxo no mobile para melhor ergonomia */
text-align: center !important;
gap: 18px !important;
padding: 20px 10px !important;
}
/* Centraliza o Badge e remove quebras rígidas */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
padding: 5px 12px !important;
}
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-size: 34px !important; /* Tamanho seguro para não quebrar palavras na tela do celular */
letter-spacing: -0.5px !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title em {
display: inline !important; /* No mobile, deixa o texto corrido para poupar espaço vertical */
}
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Força os botões de baixo a se empilharem ou ocuparem 100% */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-widget-container {
justify-content: center !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA FILTRADA (MOBILE - RESOLVE OS BUGS DE IMAGE_6E4280.PNG)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-32a7cdd {
max-width: 100% !important;
align-items: center !important; /* Centralização ergonômica perfeita */
text-align: center !important;
gap: 20px !important; /* Espaçamento unificado e limpo entre blocos */
padding: 30px 16px !important; /* Respiro lateral de segurança para a tela */
}
/* 1. Correção do Badge */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
font-size: 10px !important;
padding: 6px 14px !important;
}
/* 2. Correção do H1 - Mata o estouro lateral da palavra "TRANSFORMAMOS" */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-size: 28px !important; /* Tamanho exato para encaixar os caracteres sem quebra feia */
line-height: 1.2 !important; /* Abre o entrelaçamento para as linhas respirarem */
letter-spacing: -0.5px !important;
text-align: center !important;
width: 100% !important;
}
/* 3. Correção do Destaque (Tag EM) - Mantém a estrutura limpa e imponente */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title em {
display: block !important; /* Mantém como bloco para isolar o "PROJETOS EM" e dar ritmo visual */
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* 4. Correção da Descrição */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 8px !important;
color: rgba(250, 248, 244, 0.90) !important;
}
/* 5. Alinhamento dos Botões de Ação na base */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-widget-container {
justify-content: center !important;
width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-65f73f7 *//* ==========================================================================
HERO CONTAINER - GRADIENTE BASE & OVERLAY BLINDADO (CASA PADRÃO)
========================================================================== */
/* Camada Base: O Container Pai com o Gradiente da Marca */
.elementor-10 .elementor-element.elementor-element-65f73f7 {
background: linear-gradient(105deg, #0d2244 0%, #1a3a6e 50%, #7a1a22 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* FORÇAR EXPANSÃO TOTAL DO OVERLAY NATIVO DO ELEMENTOR
========================================================================== */
.elementor-10 .elementor-element.elementor-element-65f73f7 > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-65f73f7 .elementor-background-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
/* Garante que qualquer imagem selecionada cubra todo o container sem cortes */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* Mantém a fusão de cores com o gradiente de trás */
mix-blend-mode: overlay !important;
opacity: 0.35 !important; /* Ajuste a opacidade no painel ou aqui se preferir mais escura/clara */
z-index: 1 !important;
}
/* ==========================================================================
GARANTIA DE VISIBILIDADE DO CONTEÚDO (TEXTOS E BOTÕES)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-65f73f7 .elementor-widget,
.elementor-10 .elementor-element.elementor-element-65f73f7 .e-con,
.elementor-10 .elementor-element.elementor-element-65f73f7 .e-container {
position: relative !important;
z-index: 2 !important; /* Fica acima do gradiente e do overlay de imagem */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-37358a3 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-01e71d2 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO SECUNDÁRIO PREMIUM (ELEGANTE & OUTLINE)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button {
position: relative !important;
background-color: transparent !important; /* Totalmente limpo e transparente */
color: #fff !important; /* Texto no Azul Marinho da sua logo */
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 15px 32px !important;
border-radius: 3px !important; /* Alinhado com a geometria do cabeçalho e botão principal */
border-bottom: 2px solid #fff !important; /* Borda precisa na cor marinho */
overflow: hidden !important; /* Necessário para conter o efeito de preenchimento interno */
z-index: 1 !important;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
box-shadow: none !important;
}
/* Pseudo-elemento para o efeito de Preenchimento Líquido (Slide-up Fill) */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button::before {
content: '';
position: absolute;
bottom: -100%; /* Começa escondido logo abaixo do botão */
left: 0;
width: 100%;
height: 100%;
background-color: #0D2244 !important; /* Cor que vai preencher o botão no hover */
z-index: -1 !important; /* Fica atrás do texto do botão */
transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O fundo sobe preenchendo o espaço e o texto vira branco */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button:hover {
color: #FAF8F4 !important; /* Texto muda para o Branco Caloroso para dar leitura */
border-color: #0D2244 !important;
transform: translateY(-2px); /* Leve elevação clean */
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.1) !important;
}
/* Ativa o preenchimento subindo de forma ultra fluida */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button:hover::before {
bottom: 0;
}
/* Feedback de clique real */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(13, 34, 68, 0.15) !important;
}
/* ==========================================================================
VERSÃO ADAPTATIVA PARA O HERO (SOBRE FUNDO ESCURO)
Se você usar este botão dentro do seu carrossel marinho, adicione a classe
'btn-hero-dark' no widget e este bloco abaixo vai clarear a borda automaticamente.
========================================================================== */
.elementor-10 .elementor-element.elementor-element-01e71d2.btn-hero-dark .elementor-button {
color: #FAF8F4 !important;
border-color: rgba(254, 254, 254, 0.4) !important;
}
.elementor-10 .elementor-element.elementor-element-01e71d2.btn-hero-dark .elementor-button::before {
background-color: #B01C24 !important; /* No Hero escuro, ele preenche com o Vermelho da marca */
}
.elementor-10 .elementor-element.elementor-element-01e71d2.btn-hero-dark .elementor-button:hover {
color: #FFFFFF !important;
border-color: #B01C24 !important;
box-shadow: 0 6px 20px rgba(176, 28, 36, 0.3) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button {
width: 100% !important; /* Ocupa 100% da largura em telas touch */
text-align: center !important;
padding: 14px 24px !important;
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89be1ad *//* ==========================================================================
CSS CUSTOMIZADO: CONTAINER DO HERO (MÁXIMA LEGIBILIDADE & RESPONSIVIDADE)
========================================================================== */
/* Configuração Base do Container Textos (Desktop) */
.elementor-10 .elementor-element.elementor-element-89be1ad {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* Alinhamento à esquerda corporativo */
gap: 24px !important; /* Espaçamento idêntico e limpo entre os blocos de texto */
width: 100% !important;
max-width: 780px !important; /* Limita a largura para o texto não esticar demais */
padding: 60px 0 !important;
text-align: left !important;
z-index: 3 !important;
}
/* 1. EYEBROW / BADGE (Widget Lista de Ícones do Elementor) */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-widget-icon-list {
margin-bottom: -8px !important; /* Aproxima sutilmente do título */
}
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-item {
background-color: #B01C24 !important; /* Vermelho institucional da logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 2px !important;
box-shadow: 0 4px 10px rgba(176, 28, 36, 0.2) !important;
}
/* Ajuste do ícone dentro do badge */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-icon svg {
width: 12px !important;
height: 12px !important;
fill: #FFFFFF !important;
margin-right: 6px !important;
}
/* 2. TÍTULO PRINCIPAL (Widget Título H1) */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(42px, 5vw, 68px) !important; /* Tipografia fluida inteligente */
line-height: 1.05 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 !important;
}
/* Palavra de Destaque no H1 (Envolva com Texto no Elementor se desejar) */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title em {
font-style: normal !important;
color: #D42030 !important; /* Vermelho brilhante mapeado no HTML */
display: block !important; /* Força a quebra de linha estilizada */
}
/* 3. DESCRIÇÃO (Widget Editor de Texto) */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.85) !important; /* Branco caloroso com leve transparência premium */
max-width: 580px !important; /* Evita que a descrição ocupe toda a largura do H1 */
margin: 0 !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-89be1ad {
max-width: 90% !important;
gap: 30px !important;
padding: 40px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-size: 46px !important; /* Trava uma escala intermediária confortável */
}
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-size: 15px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-89be1ad {
max-width: 100% !important;
align-items: center !important; /* Centraliza todo o fluxo no mobile para melhor ergonomia */
text-align: center !important;
gap: 18px !important;
padding: 20px 10px !important;
}
/* Centraliza o Badge e remove quebras rígidas */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
padding: 5px 12px !important;
}
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-size: 34px !important; /* Tamanho seguro para não quebrar palavras na tela do celular */
letter-spacing: -0.5px !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title em {
display: inline !important; /* No mobile, deixa o texto corrido para poupar espaço vertical */
}
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Força os botões de baixo a se empilharem ou ocuparem 100% */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-widget-container {
justify-content: center !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA FILTRADA (MOBILE - RESOLVE OS BUGS DE IMAGE_6E4280.PNG)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-89be1ad {
max-width: 100% !important;
align-items: center !important; /* Centralização ergonômica perfeita */
text-align: center !important;
gap: 20px !important; /* Espaçamento unificado e limpo entre blocos */
padding: 30px 16px !important; /* Respiro lateral de segurança para a tela */
}
/* 1. Correção do Badge */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
font-size: 10px !important;
padding: 6px 14px !important;
}
/* 2. Correção do H1 - Mata o estouro lateral da palavra "TRANSFORMAMOS" */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-size: 28px !important; /* Tamanho exato para encaixar os caracteres sem quebra feia */
line-height: 1.2 !important; /* Abre o entrelaçamento para as linhas respirarem */
letter-spacing: -0.5px !important;
text-align: center !important;
width: 100% !important;
}
/* 3. Correção do Destaque (Tag EM) - Mantém a estrutura limpa e imponente */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title em {
display: block !important; /* Mantém como bloco para isolar o "PROJETOS EM" e dar ritmo visual */
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* 4. Correção da Descrição */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 8px !important;
color: rgba(250, 248, 244, 0.90) !important;
}
/* 5. Alinhamento dos Botões de Ação na base */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-widget-container {
justify-content: center !important;
width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6817a51 *//* ==========================================================================
HERO CONTAINER - GRADIENTE BASE & OVERLAY BLINDADO (CASA PADRÃO)
========================================================================== */
/* Camada Base: O Container Pai com o Gradiente da Marca */
.elementor-10 .elementor-element.elementor-element-6817a51 {
background: linear-gradient(105deg, #0d2244 0%, #1a3a6e 50%, #7a1a22 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* FORÇAR EXPANSÃO TOTAL DO OVERLAY NATIVO DO ELEMENTOR
========================================================================== */
.elementor-10 .elementor-element.elementor-element-6817a51 > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-6817a51 .elementor-background-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
/* Garante que qualquer imagem selecionada cubra todo o container sem cortes */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* Mantém a fusão de cores com o gradiente de trás */
mix-blend-mode: overlay !important;
opacity: 0.35 !important; /* Ajuste a opacidade no painel ou aqui se preferir mais escura/clara */
z-index: 1 !important;
}
/* ==========================================================================
GARANTIA DE VISIBILIDADE DO CONTEÚDO (TEXTOS E BOTÕES)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-6817a51 .elementor-widget,
.elementor-10 .elementor-element.elementor-element-6817a51 .e-con,
.elementor-10 .elementor-element.elementor-element-6817a51 .e-container {
position: relative !important;
z-index: 2 !important; /* Fica acima do gradiente e do overlay de imagem */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b6be050 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-72c3e80 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO SECUNDÁRIO PREMIUM (ELEGANTE & OUTLINE)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button {
position: relative !important;
background-color: transparent !important; /* Totalmente limpo e transparente */
color: #fff !important; /* Texto no Azul Marinho da sua logo */
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 15px 32px !important;
border-radius: 3px !important; /* Alinhado com a geometria do cabeçalho e botão principal */
border-bottom: 2px solid #fff !important; /* Borda precisa na cor marinho */
overflow: hidden !important; /* Necessário para conter o efeito de preenchimento interno */
z-index: 1 !important;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
box-shadow: none !important;
}
/* Pseudo-elemento para o efeito de Preenchimento Líquido (Slide-up Fill) */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button::before {
content: '';
position: absolute;
bottom: -100%; /* Começa escondido logo abaixo do botão */
left: 0;
width: 100%;
height: 100%;
background-color: #0D2244 !important; /* Cor que vai preencher o botão no hover */
z-index: -1 !important; /* Fica atrás do texto do botão */
transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O fundo sobe preenchendo o espaço e o texto vira branco */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button:hover {
color: #FAF8F4 !important; /* Texto muda para o Branco Caloroso para dar leitura */
border-color: #0D2244 !important;
transform: translateY(-2px); /* Leve elevação clean */
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.1) !important;
}
/* Ativa o preenchimento subindo de forma ultra fluida */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button:hover::before {
bottom: 0;
}
/* Feedback de clique real */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(13, 34, 68, 0.15) !important;
}
/* ==========================================================================
VERSÃO ADAPTATIVA PARA O HERO (SOBRE FUNDO ESCURO)
Se você usar este botão dentro do seu carrossel marinho, adicione a classe
'btn-hero-dark' no widget e este bloco abaixo vai clarear a borda automaticamente.
========================================================================== */
.elementor-10 .elementor-element.elementor-element-72c3e80.btn-hero-dark .elementor-button {
color: #FAF8F4 !important;
border-color: rgba(254, 254, 254, 0.4) !important;
}
.elementor-10 .elementor-element.elementor-element-72c3e80.btn-hero-dark .elementor-button::before {
background-color: #B01C24 !important; /* No Hero escuro, ele preenche com o Vermelho da marca */
}
.elementor-10 .elementor-element.elementor-element-72c3e80.btn-hero-dark .elementor-button:hover {
color: #FFFFFF !important;
border-color: #B01C24 !important;
box-shadow: 0 6px 20px rgba(176, 28, 36, 0.3) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button {
width: 100% !important; /* Ocupa 100% da largura em telas touch */
text-align: center !important;
padding: 14px 24px !important;
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bb2f7ce *//* ==========================================================================
CSS CUSTOMIZADO: CONTAINER DO HERO (MÁXIMA LEGIBILIDADE & RESPONSIVIDADE)
========================================================================== */
/* Configuração Base do Container Textos (Desktop) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* Alinhamento à esquerda corporativo */
gap: 24px !important; /* Espaçamento idêntico e limpo entre os blocos de texto */
width: 100% !important;
max-width: 780px !important; /* Limita a largura para o texto não esticar demais */
padding: 60px 0 !important;
text-align: left !important;
z-index: 3 !important;
}
/* 1. EYEBROW / BADGE (Widget Lista de Ícones do Elementor) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-widget-icon-list {
margin-bottom: -8px !important; /* Aproxima sutilmente do título */
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-item {
background-color: #B01C24 !important; /* Vermelho institucional da logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 2px !important;
box-shadow: 0 4px 10px rgba(176, 28, 36, 0.2) !important;
}
/* Ajuste do ícone dentro do badge */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-icon svg {
width: 12px !important;
height: 12px !important;
fill: #FFFFFF !important;
margin-right: 6px !important;
}
/* 2. TÍTULO PRINCIPAL (Widget Título H1) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(42px, 5vw, 68px) !important; /* Tipografia fluida inteligente */
line-height: 1.05 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 !important;
}
/* Palavra de Destaque no H1 (Envolva com Texto no Elementor se desejar) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title em {
font-style: normal !important;
color: #D42030 !important; /* Vermelho brilhante mapeado no HTML */
display: block !important; /* Força a quebra de linha estilizada */
}
/* 3. DESCRIÇÃO (Widget Editor de Texto) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.85) !important; /* Branco caloroso com leve transparência premium */
max-width: 580px !important; /* Evita que a descrição ocupe toda a largura do H1 */
margin: 0 !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
max-width: 90% !important;
gap: 30px !important;
padding: 40px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-size: 46px !important; /* Trava uma escala intermediária confortável */
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-size: 15px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
max-width: 100% !important;
align-items: center !important; /* Centraliza todo o fluxo no mobile para melhor ergonomia */
text-align: center !important;
gap: 18px !important;
padding: 20px 10px !important;
}
/* Centraliza o Badge e remove quebras rígidas */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
padding: 5px 12px !important;
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-size: 34px !important; /* Tamanho seguro para não quebrar palavras na tela do celular */
letter-spacing: -0.5px !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title em {
display: inline !important; /* No mobile, deixa o texto corrido para poupar espaço vertical */
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Força os botões de baixo a se empilharem ou ocuparem 100% */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-widget-container {
justify-content: center !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA FILTRADA (MOBILE - RESOLVE OS BUGS DE IMAGE_6E4280.PNG)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
max-width: 100% !important;
align-items: center !important; /* Centralização ergonômica perfeita */
text-align: center !important;
gap: 20px !important; /* Espaçamento unificado e limpo entre blocos */
padding: 30px 16px !important; /* Respiro lateral de segurança para a tela */
}
/* 1. Correção do Badge */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
font-size: 10px !important;
padding: 6px 14px !important;
}
/* 2. Correção do H1 - Mata o estouro lateral da palavra "TRANSFORMAMOS" */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-size: 28px !important; /* Tamanho exato para encaixar os caracteres sem quebra feia */
line-height: 1.2 !important; /* Abre o entrelaçamento para as linhas respirarem */
letter-spacing: -0.5px !important;
text-align: center !important;
width: 100% !important;
}
/* 3. Correção do Destaque (Tag EM) - Mantém a estrutura limpa e imponente */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title em {
display: block !important; /* Mantém como bloco para isolar o "PROJETOS EM" e dar ritmo visual */
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* 4. Correção da Descrição */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 8px !important;
color: rgba(250, 248, 244, 0.90) !important;
}
/* 5. Alinhamento dos Botões de Ação na base */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-widget-container {
justify-content: center !important;
width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3b0189f *//* ==========================================================================
HERO CONTAINER - GRADIENTE BASE & OVERLAY BLINDADO (CASA PADRÃO)
========================================================================== */
/* Camada Base: O Container Pai com o Gradiente da Marca */
.elementor-10 .elementor-element.elementor-element-3b0189f {
background: linear-gradient(105deg, #0d2244 0%, #1a3a6e 50%, #7a1a22 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* FORÇAR EXPANSÃO TOTAL DO OVERLAY NATIVO DO ELEMENTOR
========================================================================== */
.elementor-10 .elementor-element.elementor-element-3b0189f > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-3b0189f .elementor-background-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
/* Garante que qualquer imagem selecionada cubra todo o container sem cortes */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* Mantém a fusão de cores com o gradiente de trás */
mix-blend-mode: overlay !important;
opacity: 0.35 !important; /* Ajuste a opacidade no painel ou aqui se preferir mais escura/clara */
z-index: 1 !important;
}
/* ==========================================================================
GARANTIA DE VISIBILIDADE DO CONTEÚDO (TEXTOS E BOTÕES)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-3b0189f .elementor-widget,
.elementor-10 .elementor-element.elementor-element-3b0189f .e-con,
.elementor-10 .elementor-element.elementor-element-3b0189f .e-container {
position: relative !important;
z-index: 2 !important; /* Fica acima do gradiente e do overlay de imagem */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-944f511 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-23cc5e7 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO SECUNDÁRIO PREMIUM (ELEGANTE & OUTLINE)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button {
position: relative !important;
background-color: transparent !important; /* Totalmente limpo e transparente */
color: #fff !important; /* Texto no Azul Marinho da sua logo */
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 15px 32px !important;
border-radius: 3px !important; /* Alinhado com a geometria do cabeçalho e botão principal */
border-bottom: 2px solid #fff !important; /* Borda precisa na cor marinho */
overflow: hidden !important; /* Necessário para conter o efeito de preenchimento interno */
z-index: 1 !important;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
box-shadow: none !important;
}
/* Pseudo-elemento para o efeito de Preenchimento Líquido (Slide-up Fill) */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button::before {
content: '';
position: absolute;
bottom: -100%; /* Começa escondido logo abaixo do botão */
left: 0;
width: 100%;
height: 100%;
background-color: #0D2244 !important; /* Cor que vai preencher o botão no hover */
z-index: -1 !important; /* Fica atrás do texto do botão */
transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O fundo sobe preenchendo o espaço e o texto vira branco */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button:hover {
color: #FAF8F4 !important; /* Texto muda para o Branco Caloroso para dar leitura */
border-color: #0D2244 !important;
transform: translateY(-2px); /* Leve elevação clean */
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.1) !important;
}
/* Ativa o preenchimento subindo de forma ultra fluida */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button:hover::before {
bottom: 0;
}
/* Feedback de clique real */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(13, 34, 68, 0.15) !important;
}
/* ==========================================================================
VERSÃO ADAPTATIVA PARA O HERO (SOBRE FUNDO ESCURO)
Se você usar este botão dentro do seu carrossel marinho, adicione a classe
'btn-hero-dark' no widget e este bloco abaixo vai clarear a borda automaticamente.
========================================================================== */
.elementor-10 .elementor-element.elementor-element-23cc5e7.btn-hero-dark .elementor-button {
color: #FAF8F4 !important;
border-color: rgba(254, 254, 254, 0.4) !important;
}
.elementor-10 .elementor-element.elementor-element-23cc5e7.btn-hero-dark .elementor-button::before {
background-color: #B01C24 !important; /* No Hero escuro, ele preenche com o Vermelho da marca */
}
.elementor-10 .elementor-element.elementor-element-23cc5e7.btn-hero-dark .elementor-button:hover {
color: #FFFFFF !important;
border-color: #B01C24 !important;
box-shadow: 0 6px 20px rgba(176, 28, 36, 0.3) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button {
width: 100% !important; /* Ocupa 100% da largura em telas touch */
text-align: center !important;
padding: 14px 24px !important;
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32a7cdd *//* ==========================================================================
CSS CUSTOMIZADO: CONTAINER DO HERO (MÁXIMA LEGIBILIDADE & RESPONSIVIDADE)
========================================================================== */
/* Configuração Base do Container Textos (Desktop) */
.elementor-10 .elementor-element.elementor-element-32a7cdd {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* Alinhamento à esquerda corporativo */
gap: 24px !important; /* Espaçamento idêntico e limpo entre os blocos de texto */
width: 100% !important;
max-width: 780px !important; /* Limita a largura para o texto não esticar demais */
padding: 60px 0 !important;
text-align: left !important;
z-index: 3 !important;
}
/* 1. EYEBROW / BADGE (Widget Lista de Ícones do Elementor) */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-widget-icon-list {
margin-bottom: -8px !important; /* Aproxima sutilmente do título */
}
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-item {
background-color: #B01C24 !important; /* Vermelho institucional da logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 2px !important;
box-shadow: 0 4px 10px rgba(176, 28, 36, 0.2) !important;
}
/* Ajuste do ícone dentro do badge */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-icon svg {
width: 12px !important;
height: 12px !important;
fill: #FFFFFF !important;
margin-right: 6px !important;
}
/* 2. TÍTULO PRINCIPAL (Widget Título H1) */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(42px, 5vw, 68px) !important; /* Tipografia fluida inteligente */
line-height: 1.05 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 !important;
}
/* Palavra de Destaque no H1 (Envolva com Texto no Elementor se desejar) */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title em {
font-style: normal !important;
color: #D42030 !important; /* Vermelho brilhante mapeado no HTML */
display: block !important; /* Força a quebra de linha estilizada */
}
/* 3. DESCRIÇÃO (Widget Editor de Texto) */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.85) !important; /* Branco caloroso com leve transparência premium */
max-width: 580px !important; /* Evita que a descrição ocupe toda a largura do H1 */
margin: 0 !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-32a7cdd {
max-width: 90% !important;
gap: 30px !important;
padding: 40px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-size: 46px !important; /* Trava uma escala intermediária confortável */
}
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-size: 15px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-32a7cdd {
max-width: 100% !important;
align-items: center !important; /* Centraliza todo o fluxo no mobile para melhor ergonomia */
text-align: center !important;
gap: 18px !important;
padding: 20px 10px !important;
}
/* Centraliza o Badge e remove quebras rígidas */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
padding: 5px 12px !important;
}
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-size: 34px !important; /* Tamanho seguro para não quebrar palavras na tela do celular */
letter-spacing: -0.5px !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title em {
display: inline !important; /* No mobile, deixa o texto corrido para poupar espaço vertical */
}
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Força os botões de baixo a se empilharem ou ocuparem 100% */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-widget-container {
justify-content: center !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA FILTRADA (MOBILE - RESOLVE OS BUGS DE IMAGE_6E4280.PNG)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-32a7cdd {
max-width: 100% !important;
align-items: center !important; /* Centralização ergonômica perfeita */
text-align: center !important;
gap: 20px !important; /* Espaçamento unificado e limpo entre blocos */
padding: 30px 16px !important; /* Respiro lateral de segurança para a tela */
}
/* 1. Correção do Badge */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
font-size: 10px !important;
padding: 6px 14px !important;
}
/* 2. Correção do H1 - Mata o estouro lateral da palavra "TRANSFORMAMOS" */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-size: 28px !important; /* Tamanho exato para encaixar os caracteres sem quebra feia */
line-height: 1.2 !important; /* Abre o entrelaçamento para as linhas respirarem */
letter-spacing: -0.5px !important;
text-align: center !important;
width: 100% !important;
}
/* 3. Correção do Destaque (Tag EM) - Mantém a estrutura limpa e imponente */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title em {
display: block !important; /* Mantém como bloco para isolar o "PROJETOS EM" e dar ritmo visual */
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* 4. Correção da Descrição */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 8px !important;
color: rgba(250, 248, 244, 0.90) !important;
}
/* 5. Alinhamento dos Botões de Ação na base */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-widget-container {
justify-content: center !important;
width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-65f73f7 *//* ==========================================================================
HERO CONTAINER - GRADIENTE BASE & OVERLAY BLINDADO (CASA PADRÃO)
========================================================================== */
/* Camada Base: O Container Pai com o Gradiente da Marca */
.elementor-10 .elementor-element.elementor-element-65f73f7 {
background: linear-gradient(105deg, #0d2244 0%, #1a3a6e 50%, #7a1a22 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* FORÇAR EXPANSÃO TOTAL DO OVERLAY NATIVO DO ELEMENTOR
========================================================================== */
.elementor-10 .elementor-element.elementor-element-65f73f7 > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-65f73f7 .elementor-background-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
/* Garante que qualquer imagem selecionada cubra todo o container sem cortes */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* Mantém a fusão de cores com o gradiente de trás */
mix-blend-mode: overlay !important;
opacity: 0.35 !important; /* Ajuste a opacidade no painel ou aqui se preferir mais escura/clara */
z-index: 1 !important;
}
/* ==========================================================================
GARANTIA DE VISIBILIDADE DO CONTEÚDO (TEXTOS E BOTÕES)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-65f73f7 .elementor-widget,
.elementor-10 .elementor-element.elementor-element-65f73f7 .e-con,
.elementor-10 .elementor-element.elementor-element-65f73f7 .e-container {
position: relative !important;
z-index: 2 !important; /* Fica acima do gradiente e do overlay de imagem */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-37358a3 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-01e71d2 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO SECUNDÁRIO PREMIUM (ELEGANTE & OUTLINE)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button {
position: relative !important;
background-color: transparent !important; /* Totalmente limpo e transparente */
color: #fff !important; /* Texto no Azul Marinho da sua logo */
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 15px 32px !important;
border-radius: 3px !important; /* Alinhado com a geometria do cabeçalho e botão principal */
border-bottom: 2px solid #fff !important; /* Borda precisa na cor marinho */
overflow: hidden !important; /* Necessário para conter o efeito de preenchimento interno */
z-index: 1 !important;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
box-shadow: none !important;
}
/* Pseudo-elemento para o efeito de Preenchimento Líquido (Slide-up Fill) */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button::before {
content: '';
position: absolute;
bottom: -100%; /* Começa escondido logo abaixo do botão */
left: 0;
width: 100%;
height: 100%;
background-color: #0D2244 !important; /* Cor que vai preencher o botão no hover */
z-index: -1 !important; /* Fica atrás do texto do botão */
transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O fundo sobe preenchendo o espaço e o texto vira branco */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button:hover {
color: #FAF8F4 !important; /* Texto muda para o Branco Caloroso para dar leitura */
border-color: #0D2244 !important;
transform: translateY(-2px); /* Leve elevação clean */
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.1) !important;
}
/* Ativa o preenchimento subindo de forma ultra fluida */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button:hover::before {
bottom: 0;
}
/* Feedback de clique real */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(13, 34, 68, 0.15) !important;
}
/* ==========================================================================
VERSÃO ADAPTATIVA PARA O HERO (SOBRE FUNDO ESCURO)
Se você usar este botão dentro do seu carrossel marinho, adicione a classe
'btn-hero-dark' no widget e este bloco abaixo vai clarear a borda automaticamente.
========================================================================== */
.elementor-10 .elementor-element.elementor-element-01e71d2.btn-hero-dark .elementor-button {
color: #FAF8F4 !important;
border-color: rgba(254, 254, 254, 0.4) !important;
}
.elementor-10 .elementor-element.elementor-element-01e71d2.btn-hero-dark .elementor-button::before {
background-color: #B01C24 !important; /* No Hero escuro, ele preenche com o Vermelho da marca */
}
.elementor-10 .elementor-element.elementor-element-01e71d2.btn-hero-dark .elementor-button:hover {
color: #FFFFFF !important;
border-color: #B01C24 !important;
box-shadow: 0 6px 20px rgba(176, 28, 36, 0.3) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button {
width: 100% !important; /* Ocupa 100% da largura em telas touch */
text-align: center !important;
padding: 14px 24px !important;
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89be1ad *//* ==========================================================================
CSS CUSTOMIZADO: CONTAINER DO HERO (MÁXIMA LEGIBILIDADE & RESPONSIVIDADE)
========================================================================== */
/* Configuração Base do Container Textos (Desktop) */
.elementor-10 .elementor-element.elementor-element-89be1ad {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* Alinhamento à esquerda corporativo */
gap: 24px !important; /* Espaçamento idêntico e limpo entre os blocos de texto */
width: 100% !important;
max-width: 780px !important; /* Limita a largura para o texto não esticar demais */
padding: 60px 0 !important;
text-align: left !important;
z-index: 3 !important;
}
/* 1. EYEBROW / BADGE (Widget Lista de Ícones do Elementor) */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-widget-icon-list {
margin-bottom: -8px !important; /* Aproxima sutilmente do título */
}
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-item {
background-color: #B01C24 !important; /* Vermelho institucional da logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 2px !important;
box-shadow: 0 4px 10px rgba(176, 28, 36, 0.2) !important;
}
/* Ajuste do ícone dentro do badge */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-icon svg {
width: 12px !important;
height: 12px !important;
fill: #FFFFFF !important;
margin-right: 6px !important;
}
/* 2. TÍTULO PRINCIPAL (Widget Título H1) */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(42px, 5vw, 68px) !important; /* Tipografia fluida inteligente */
line-height: 1.05 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 !important;
}
/* Palavra de Destaque no H1 (Envolva com Texto no Elementor se desejar) */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title em {
font-style: normal !important;
color: #D42030 !important; /* Vermelho brilhante mapeado no HTML */
display: block !important; /* Força a quebra de linha estilizada */
}
/* 3. DESCRIÇÃO (Widget Editor de Texto) */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.85) !important; /* Branco caloroso com leve transparência premium */
max-width: 580px !important; /* Evita que a descrição ocupe toda a largura do H1 */
margin: 0 !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-89be1ad {
max-width: 90% !important;
gap: 30px !important;
padding: 40px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-size: 46px !important; /* Trava uma escala intermediária confortável */
}
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-size: 15px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-89be1ad {
max-width: 100% !important;
align-items: center !important; /* Centraliza todo o fluxo no mobile para melhor ergonomia */
text-align: center !important;
gap: 18px !important;
padding: 20px 10px !important;
}
/* Centraliza o Badge e remove quebras rígidas */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
padding: 5px 12px !important;
}
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-size: 34px !important; /* Tamanho seguro para não quebrar palavras na tela do celular */
letter-spacing: -0.5px !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title em {
display: inline !important; /* No mobile, deixa o texto corrido para poupar espaço vertical */
}
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Força os botões de baixo a se empilharem ou ocuparem 100% */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-widget-container {
justify-content: center !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA FILTRADA (MOBILE - RESOLVE OS BUGS DE IMAGE_6E4280.PNG)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-89be1ad {
max-width: 100% !important;
align-items: center !important; /* Centralização ergonômica perfeita */
text-align: center !important;
gap: 20px !important; /* Espaçamento unificado e limpo entre blocos */
padding: 30px 16px !important; /* Respiro lateral de segurança para a tela */
}
/* 1. Correção do Badge */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
font-size: 10px !important;
padding: 6px 14px !important;
}
/* 2. Correção do H1 - Mata o estouro lateral da palavra "TRANSFORMAMOS" */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-size: 28px !important; /* Tamanho exato para encaixar os caracteres sem quebra feia */
line-height: 1.2 !important; /* Abre o entrelaçamento para as linhas respirarem */
letter-spacing: -0.5px !important;
text-align: center !important;
width: 100% !important;
}
/* 3. Correção do Destaque (Tag EM) - Mantém a estrutura limpa e imponente */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title em {
display: block !important; /* Mantém como bloco para isolar o "PROJETOS EM" e dar ritmo visual */
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* 4. Correção da Descrição */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 8px !important;
color: rgba(250, 248, 244, 0.90) !important;
}
/* 5. Alinhamento dos Botões de Ação na base */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-widget-container {
justify-content: center !important;
width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6817a51 *//* ==========================================================================
HERO CONTAINER - GRADIENTE BASE & OVERLAY BLINDADO (CASA PADRÃO)
========================================================================== */
/* Camada Base: O Container Pai com o Gradiente da Marca */
.elementor-10 .elementor-element.elementor-element-6817a51 {
background: linear-gradient(105deg, #0d2244 0%, #1a3a6e 50%, #7a1a22 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* FORÇAR EXPANSÃO TOTAL DO OVERLAY NATIVO DO ELEMENTOR
========================================================================== */
.elementor-10 .elementor-element.elementor-element-6817a51 > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-6817a51 .elementor-background-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
/* Garante que qualquer imagem selecionada cubra todo o container sem cortes */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* Mantém a fusão de cores com o gradiente de trás */
mix-blend-mode: overlay !important;
opacity: 0.35 !important; /* Ajuste a opacidade no painel ou aqui se preferir mais escura/clara */
z-index: 1 !important;
}
/* ==========================================================================
GARANTIA DE VISIBILIDADE DO CONTEÚDO (TEXTOS E BOTÕES)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-6817a51 .elementor-widget,
.elementor-10 .elementor-element.elementor-element-6817a51 .e-con,
.elementor-10 .elementor-element.elementor-element-6817a51 .e-container {
position: relative !important;
z-index: 2 !important; /* Fica acima do gradiente e do overlay de imagem */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b6be050 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-72c3e80 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO SECUNDÁRIO PREMIUM (ELEGANTE & OUTLINE)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button {
position: relative !important;
background-color: transparent !important; /* Totalmente limpo e transparente */
color: #fff !important; /* Texto no Azul Marinho da sua logo */
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 15px 32px !important;
border-radius: 3px !important; /* Alinhado com a geometria do cabeçalho e botão principal */
border-bottom: 2px solid #fff !important; /* Borda precisa na cor marinho */
overflow: hidden !important; /* Necessário para conter o efeito de preenchimento interno */
z-index: 1 !important;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
box-shadow: none !important;
}
/* Pseudo-elemento para o efeito de Preenchimento Líquido (Slide-up Fill) */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button::before {
content: '';
position: absolute;
bottom: -100%; /* Começa escondido logo abaixo do botão */
left: 0;
width: 100%;
height: 100%;
background-color: #0D2244 !important; /* Cor que vai preencher o botão no hover */
z-index: -1 !important; /* Fica atrás do texto do botão */
transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O fundo sobe preenchendo o espaço e o texto vira branco */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button:hover {
color: #FAF8F4 !important; /* Texto muda para o Branco Caloroso para dar leitura */
border-color: #0D2244 !important;
transform: translateY(-2px); /* Leve elevação clean */
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.1) !important;
}
/* Ativa o preenchimento subindo de forma ultra fluida */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button:hover::before {
bottom: 0;
}
/* Feedback de clique real */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(13, 34, 68, 0.15) !important;
}
/* ==========================================================================
VERSÃO ADAPTATIVA PARA O HERO (SOBRE FUNDO ESCURO)
Se você usar este botão dentro do seu carrossel marinho, adicione a classe
'btn-hero-dark' no widget e este bloco abaixo vai clarear a borda automaticamente.
========================================================================== */
.elementor-10 .elementor-element.elementor-element-72c3e80.btn-hero-dark .elementor-button {
color: #FAF8F4 !important;
border-color: rgba(254, 254, 254, 0.4) !important;
}
.elementor-10 .elementor-element.elementor-element-72c3e80.btn-hero-dark .elementor-button::before {
background-color: #B01C24 !important; /* No Hero escuro, ele preenche com o Vermelho da marca */
}
.elementor-10 .elementor-element.elementor-element-72c3e80.btn-hero-dark .elementor-button:hover {
color: #FFFFFF !important;
border-color: #B01C24 !important;
box-shadow: 0 6px 20px rgba(176, 28, 36, 0.3) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button {
width: 100% !important; /* Ocupa 100% da largura em telas touch */
text-align: center !important;
padding: 14px 24px !important;
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bb2f7ce *//* ==========================================================================
CSS CUSTOMIZADO: CONTAINER DO HERO (MÁXIMA LEGIBILIDADE & RESPONSIVIDADE)
========================================================================== */
/* Configuração Base do Container Textos (Desktop) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* Alinhamento à esquerda corporativo */
gap: 24px !important; /* Espaçamento idêntico e limpo entre os blocos de texto */
width: 100% !important;
max-width: 780px !important; /* Limita a largura para o texto não esticar demais */
padding: 60px 0 !important;
text-align: left !important;
z-index: 3 !important;
}
/* 1. EYEBROW / BADGE (Widget Lista de Ícones do Elementor) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-widget-icon-list {
margin-bottom: -8px !important; /* Aproxima sutilmente do título */
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-item {
background-color: #B01C24 !important; /* Vermelho institucional da logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 2px !important;
box-shadow: 0 4px 10px rgba(176, 28, 36, 0.2) !important;
}
/* Ajuste do ícone dentro do badge */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-icon svg {
width: 12px !important;
height: 12px !important;
fill: #FFFFFF !important;
margin-right: 6px !important;
}
/* 2. TÍTULO PRINCIPAL (Widget Título H1) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(42px, 5vw, 68px) !important; /* Tipografia fluida inteligente */
line-height: 1.05 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 !important;
}
/* Palavra de Destaque no H1 (Envolva com Texto no Elementor se desejar) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title em {
font-style: normal !important;
color: #D42030 !important; /* Vermelho brilhante mapeado no HTML */
display: block !important; /* Força a quebra de linha estilizada */
}
/* 3. DESCRIÇÃO (Widget Editor de Texto) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.85) !important; /* Branco caloroso com leve transparência premium */
max-width: 580px !important; /* Evita que a descrição ocupe toda a largura do H1 */
margin: 0 !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
max-width: 90% !important;
gap: 30px !important;
padding: 40px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-size: 46px !important; /* Trava uma escala intermediária confortável */
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-size: 15px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
max-width: 100% !important;
align-items: center !important; /* Centraliza todo o fluxo no mobile para melhor ergonomia */
text-align: center !important;
gap: 18px !important;
padding: 20px 10px !important;
}
/* Centraliza o Badge e remove quebras rígidas */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
padding: 5px 12px !important;
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-size: 34px !important; /* Tamanho seguro para não quebrar palavras na tela do celular */
letter-spacing: -0.5px !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title em {
display: inline !important; /* No mobile, deixa o texto corrido para poupar espaço vertical */
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Força os botões de baixo a se empilharem ou ocuparem 100% */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-widget-container {
justify-content: center !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA FILTRADA (MOBILE - RESOLVE OS BUGS DE IMAGE_6E4280.PNG)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
max-width: 100% !important;
align-items: center !important; /* Centralização ergonômica perfeita */
text-align: center !important;
gap: 20px !important; /* Espaçamento unificado e limpo entre blocos */
padding: 30px 16px !important; /* Respiro lateral de segurança para a tela */
}
/* 1. Correção do Badge */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
font-size: 10px !important;
padding: 6px 14px !important;
}
/* 2. Correção do H1 - Mata o estouro lateral da palavra "TRANSFORMAMOS" */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-size: 28px !important; /* Tamanho exato para encaixar os caracteres sem quebra feia */
line-height: 1.2 !important; /* Abre o entrelaçamento para as linhas respirarem */
letter-spacing: -0.5px !important;
text-align: center !important;
width: 100% !important;
}
/* 3. Correção do Destaque (Tag EM) - Mantém a estrutura limpa e imponente */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title em {
display: block !important; /* Mantém como bloco para isolar o "PROJETOS EM" e dar ritmo visual */
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* 4. Correção da Descrição */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 8px !important;
color: rgba(250, 248, 244, 0.90) !important;
}
/* 5. Alinhamento dos Botões de Ação na base */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-widget-container {
justify-content: center !important;
width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3b0189f *//* ==========================================================================
HERO CONTAINER - GRADIENTE BASE & OVERLAY BLINDADO (CASA PADRÃO)
========================================================================== */
/* Camada Base: O Container Pai com o Gradiente da Marca */
.elementor-10 .elementor-element.elementor-element-3b0189f {
background: linear-gradient(105deg, #0d2244 0%, #1a3a6e 50%, #7a1a22 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* FORÇAR EXPANSÃO TOTAL DO OVERLAY NATIVO DO ELEMENTOR
========================================================================== */
.elementor-10 .elementor-element.elementor-element-3b0189f > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-3b0189f .elementor-background-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
/* Garante que qualquer imagem selecionada cubra todo o container sem cortes */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* Mantém a fusão de cores com o gradiente de trás */
mix-blend-mode: overlay !important;
opacity: 0.35 !important; /* Ajuste a opacidade no painel ou aqui se preferir mais escura/clara */
z-index: 1 !important;
}
/* ==========================================================================
GARANTIA DE VISIBILIDADE DO CONTEÚDO (TEXTOS E BOTÕES)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-3b0189f .elementor-widget,
.elementor-10 .elementor-element.elementor-element-3b0189f .e-con,
.elementor-10 .elementor-element.elementor-element-3b0189f .e-container {
position: relative !important;
z-index: 2 !important; /* Fica acima do gradiente e do overlay de imagem */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-944f511 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-23cc5e7 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO SECUNDÁRIO PREMIUM (ELEGANTE & OUTLINE)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button {
position: relative !important;
background-color: transparent !important; /* Totalmente limpo e transparente */
color: #fff !important; /* Texto no Azul Marinho da sua logo */
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 15px 32px !important;
border-radius: 3px !important; /* Alinhado com a geometria do cabeçalho e botão principal */
border-bottom: 2px solid #fff !important; /* Borda precisa na cor marinho */
overflow: hidden !important; /* Necessário para conter o efeito de preenchimento interno */
z-index: 1 !important;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
box-shadow: none !important;
}
/* Pseudo-elemento para o efeito de Preenchimento Líquido (Slide-up Fill) */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button::before {
content: '';
position: absolute;
bottom: -100%; /* Começa escondido logo abaixo do botão */
left: 0;
width: 100%;
height: 100%;
background-color: #0D2244 !important; /* Cor que vai preencher o botão no hover */
z-index: -1 !important; /* Fica atrás do texto do botão */
transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O fundo sobe preenchendo o espaço e o texto vira branco */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button:hover {
color: #FAF8F4 !important; /* Texto muda para o Branco Caloroso para dar leitura */
border-color: #0D2244 !important;
transform: translateY(-2px); /* Leve elevação clean */
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.1) !important;
}
/* Ativa o preenchimento subindo de forma ultra fluida */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button:hover::before {
bottom: 0;
}
/* Feedback de clique real */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(13, 34, 68, 0.15) !important;
}
/* ==========================================================================
VERSÃO ADAPTATIVA PARA O HERO (SOBRE FUNDO ESCURO)
Se você usar este botão dentro do seu carrossel marinho, adicione a classe
'btn-hero-dark' no widget e este bloco abaixo vai clarear a borda automaticamente.
========================================================================== */
.elementor-10 .elementor-element.elementor-element-23cc5e7.btn-hero-dark .elementor-button {
color: #FAF8F4 !important;
border-color: rgba(254, 254, 254, 0.4) !important;
}
.elementor-10 .elementor-element.elementor-element-23cc5e7.btn-hero-dark .elementor-button::before {
background-color: #B01C24 !important; /* No Hero escuro, ele preenche com o Vermelho da marca */
}
.elementor-10 .elementor-element.elementor-element-23cc5e7.btn-hero-dark .elementor-button:hover {
color: #FFFFFF !important;
border-color: #B01C24 !important;
box-shadow: 0 6px 20px rgba(176, 28, 36, 0.3) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button {
width: 100% !important; /* Ocupa 100% da largura em telas touch */
text-align: center !important;
padding: 14px 24px !important;
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32a7cdd *//* ==========================================================================
CSS CUSTOMIZADO: CONTAINER DO HERO (MÁXIMA LEGIBILIDADE & RESPONSIVIDADE)
========================================================================== */
/* Configuração Base do Container Textos (Desktop) */
.elementor-10 .elementor-element.elementor-element-32a7cdd {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* Alinhamento à esquerda corporativo */
gap: 24px !important; /* Espaçamento idêntico e limpo entre os blocos de texto */
width: 100% !important;
max-width: 780px !important; /* Limita a largura para o texto não esticar demais */
padding: 60px 0 !important;
text-align: left !important;
z-index: 3 !important;
}
/* 1. EYEBROW / BADGE (Widget Lista de Ícones do Elementor) */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-widget-icon-list {
margin-bottom: -8px !important; /* Aproxima sutilmente do título */
}
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-item {
background-color: #B01C24 !important; /* Vermelho institucional da logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 2px !important;
box-shadow: 0 4px 10px rgba(176, 28, 36, 0.2) !important;
}
/* Ajuste do ícone dentro do badge */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-icon svg {
width: 12px !important;
height: 12px !important;
fill: #FFFFFF !important;
margin-right: 6px !important;
}
/* 2. TÍTULO PRINCIPAL (Widget Título H1) */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(42px, 5vw, 68px) !important; /* Tipografia fluida inteligente */
line-height: 1.05 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 !important;
}
/* Palavra de Destaque no H1 (Envolva com Texto no Elementor se desejar) */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title em {
font-style: normal !important;
color: #D42030 !important; /* Vermelho brilhante mapeado no HTML */
display: block !important; /* Força a quebra de linha estilizada */
}
/* 3. DESCRIÇÃO (Widget Editor de Texto) */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.85) !important; /* Branco caloroso com leve transparência premium */
max-width: 580px !important; /* Evita que a descrição ocupe toda a largura do H1 */
margin: 0 !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-32a7cdd {
max-width: 90% !important;
gap: 30px !important;
padding: 40px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-size: 46px !important; /* Trava uma escala intermediária confortável */
}
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-size: 15px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-32a7cdd {
max-width: 100% !important;
align-items: center !important; /* Centraliza todo o fluxo no mobile para melhor ergonomia */
text-align: center !important;
gap: 18px !important;
padding: 20px 10px !important;
}
/* Centraliza o Badge e remove quebras rígidas */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
padding: 5px 12px !important;
}
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-size: 34px !important; /* Tamanho seguro para não quebrar palavras na tela do celular */
letter-spacing: -0.5px !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title em {
display: inline !important; /* No mobile, deixa o texto corrido para poupar espaço vertical */
}
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Força os botões de baixo a se empilharem ou ocuparem 100% */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-widget-container {
justify-content: center !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA FILTRADA (MOBILE - RESOLVE OS BUGS DE IMAGE_6E4280.PNG)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-32a7cdd {
max-width: 100% !important;
align-items: center !important; /* Centralização ergonômica perfeita */
text-align: center !important;
gap: 20px !important; /* Espaçamento unificado e limpo entre blocos */
padding: 30px 16px !important; /* Respiro lateral de segurança para a tela */
}
/* 1. Correção do Badge */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
font-size: 10px !important;
padding: 6px 14px !important;
}
/* 2. Correção do H1 - Mata o estouro lateral da palavra "TRANSFORMAMOS" */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-size: 28px !important; /* Tamanho exato para encaixar os caracteres sem quebra feia */
line-height: 1.2 !important; /* Abre o entrelaçamento para as linhas respirarem */
letter-spacing: -0.5px !important;
text-align: center !important;
width: 100% !important;
}
/* 3. Correção do Destaque (Tag EM) - Mantém a estrutura limpa e imponente */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title em {
display: block !important; /* Mantém como bloco para isolar o "PROJETOS EM" e dar ritmo visual */
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* 4. Correção da Descrição */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 8px !important;
color: rgba(250, 248, 244, 0.90) !important;
}
/* 5. Alinhamento dos Botões de Ação na base */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-widget-container {
justify-content: center !important;
width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-65f73f7 *//* ==========================================================================
HERO CONTAINER - GRADIENTE BASE & OVERLAY BLINDADO (CASA PADRÃO)
========================================================================== */
/* Camada Base: O Container Pai com o Gradiente da Marca */
.elementor-10 .elementor-element.elementor-element-65f73f7 {
background: linear-gradient(105deg, #0d2244 0%, #1a3a6e 50%, #7a1a22 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* FORÇAR EXPANSÃO TOTAL DO OVERLAY NATIVO DO ELEMENTOR
========================================================================== */
.elementor-10 .elementor-element.elementor-element-65f73f7 > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-65f73f7 .elementor-background-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
/* Garante que qualquer imagem selecionada cubra todo o container sem cortes */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* Mantém a fusão de cores com o gradiente de trás */
mix-blend-mode: overlay !important;
opacity: 0.35 !important; /* Ajuste a opacidade no painel ou aqui se preferir mais escura/clara */
z-index: 1 !important;
}
/* ==========================================================================
GARANTIA DE VISIBILIDADE DO CONTEÚDO (TEXTOS E BOTÕES)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-65f73f7 .elementor-widget,
.elementor-10 .elementor-element.elementor-element-65f73f7 .e-con,
.elementor-10 .elementor-element.elementor-element-65f73f7 .e-container {
position: relative !important;
z-index: 2 !important; /* Fica acima do gradiente e do overlay de imagem */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-37358a3 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-01e71d2 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO SECUNDÁRIO PREMIUM (ELEGANTE & OUTLINE)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button {
position: relative !important;
background-color: transparent !important; /* Totalmente limpo e transparente */
color: #fff !important; /* Texto no Azul Marinho da sua logo */
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 15px 32px !important;
border-radius: 3px !important; /* Alinhado com a geometria do cabeçalho e botão principal */
border-bottom: 2px solid #fff !important; /* Borda precisa na cor marinho */
overflow: hidden !important; /* Necessário para conter o efeito de preenchimento interno */
z-index: 1 !important;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
box-shadow: none !important;
}
/* Pseudo-elemento para o efeito de Preenchimento Líquido (Slide-up Fill) */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button::before {
content: '';
position: absolute;
bottom: -100%; /* Começa escondido logo abaixo do botão */
left: 0;
width: 100%;
height: 100%;
background-color: #0D2244 !important; /* Cor que vai preencher o botão no hover */
z-index: -1 !important; /* Fica atrás do texto do botão */
transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O fundo sobe preenchendo o espaço e o texto vira branco */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button:hover {
color: #FAF8F4 !important; /* Texto muda para o Branco Caloroso para dar leitura */
border-color: #0D2244 !important;
transform: translateY(-2px); /* Leve elevação clean */
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.1) !important;
}
/* Ativa o preenchimento subindo de forma ultra fluida */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button:hover::before {
bottom: 0;
}
/* Feedback de clique real */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(13, 34, 68, 0.15) !important;
}
/* ==========================================================================
VERSÃO ADAPTATIVA PARA O HERO (SOBRE FUNDO ESCURO)
Se você usar este botão dentro do seu carrossel marinho, adicione a classe
'btn-hero-dark' no widget e este bloco abaixo vai clarear a borda automaticamente.
========================================================================== */
.elementor-10 .elementor-element.elementor-element-01e71d2.btn-hero-dark .elementor-button {
color: #FAF8F4 !important;
border-color: rgba(254, 254, 254, 0.4) !important;
}
.elementor-10 .elementor-element.elementor-element-01e71d2.btn-hero-dark .elementor-button::before {
background-color: #B01C24 !important; /* No Hero escuro, ele preenche com o Vermelho da marca */
}
.elementor-10 .elementor-element.elementor-element-01e71d2.btn-hero-dark .elementor-button:hover {
color: #FFFFFF !important;
border-color: #B01C24 !important;
box-shadow: 0 6px 20px rgba(176, 28, 36, 0.3) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button {
width: 100% !important; /* Ocupa 100% da largura em telas touch */
text-align: center !important;
padding: 14px 24px !important;
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89be1ad *//* ==========================================================================
CSS CUSTOMIZADO: CONTAINER DO HERO (MÁXIMA LEGIBILIDADE & RESPONSIVIDADE)
========================================================================== */
/* Configuração Base do Container Textos (Desktop) */
.elementor-10 .elementor-element.elementor-element-89be1ad {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* Alinhamento à esquerda corporativo */
gap: 24px !important; /* Espaçamento idêntico e limpo entre os blocos de texto */
width: 100% !important;
max-width: 780px !important; /* Limita a largura para o texto não esticar demais */
padding: 60px 0 !important;
text-align: left !important;
z-index: 3 !important;
}
/* 1. EYEBROW / BADGE (Widget Lista de Ícones do Elementor) */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-widget-icon-list {
margin-bottom: -8px !important; /* Aproxima sutilmente do título */
}
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-item {
background-color: #B01C24 !important; /* Vermelho institucional da logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 2px !important;
box-shadow: 0 4px 10px rgba(176, 28, 36, 0.2) !important;
}
/* Ajuste do ícone dentro do badge */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-icon svg {
width: 12px !important;
height: 12px !important;
fill: #FFFFFF !important;
margin-right: 6px !important;
}
/* 2. TÍTULO PRINCIPAL (Widget Título H1) */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(42px, 5vw, 68px) !important; /* Tipografia fluida inteligente */
line-height: 1.05 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 !important;
}
/* Palavra de Destaque no H1 (Envolva com Texto no Elementor se desejar) */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title em {
font-style: normal !important;
color: #D42030 !important; /* Vermelho brilhante mapeado no HTML */
display: block !important; /* Força a quebra de linha estilizada */
}
/* 3. DESCRIÇÃO (Widget Editor de Texto) */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.85) !important; /* Branco caloroso com leve transparência premium */
max-width: 580px !important; /* Evita que a descrição ocupe toda a largura do H1 */
margin: 0 !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-89be1ad {
max-width: 90% !important;
gap: 30px !important;
padding: 40px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-size: 46px !important; /* Trava uma escala intermediária confortável */
}
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-size: 15px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-89be1ad {
max-width: 100% !important;
align-items: center !important; /* Centraliza todo o fluxo no mobile para melhor ergonomia */
text-align: center !important;
gap: 18px !important;
padding: 20px 10px !important;
}
/* Centraliza o Badge e remove quebras rígidas */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
padding: 5px 12px !important;
}
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-size: 34px !important; /* Tamanho seguro para não quebrar palavras na tela do celular */
letter-spacing: -0.5px !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title em {
display: inline !important; /* No mobile, deixa o texto corrido para poupar espaço vertical */
}
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Força os botões de baixo a se empilharem ou ocuparem 100% */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-widget-container {
justify-content: center !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA FILTRADA (MOBILE - RESOLVE OS BUGS DE IMAGE_6E4280.PNG)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-89be1ad {
max-width: 100% !important;
align-items: center !important; /* Centralização ergonômica perfeita */
text-align: center !important;
gap: 20px !important; /* Espaçamento unificado e limpo entre blocos */
padding: 30px 16px !important; /* Respiro lateral de segurança para a tela */
}
/* 1. Correção do Badge */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
font-size: 10px !important;
padding: 6px 14px !important;
}
/* 2. Correção do H1 - Mata o estouro lateral da palavra "TRANSFORMAMOS" */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-size: 28px !important; /* Tamanho exato para encaixar os caracteres sem quebra feia */
line-height: 1.2 !important; /* Abre o entrelaçamento para as linhas respirarem */
letter-spacing: -0.5px !important;
text-align: center !important;
width: 100% !important;
}
/* 3. Correção do Destaque (Tag EM) - Mantém a estrutura limpa e imponente */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title em {
display: block !important; /* Mantém como bloco para isolar o "PROJETOS EM" e dar ritmo visual */
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* 4. Correção da Descrição */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 8px !important;
color: rgba(250, 248, 244, 0.90) !important;
}
/* 5. Alinhamento dos Botões de Ação na base */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-widget-container {
justify-content: center !important;
width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6817a51 *//* ==========================================================================
HERO CONTAINER - GRADIENTE BASE & OVERLAY BLINDADO (CASA PADRÃO)
========================================================================== */
/* Camada Base: O Container Pai com o Gradiente da Marca */
.elementor-10 .elementor-element.elementor-element-6817a51 {
background: linear-gradient(105deg, #0d2244 0%, #1a3a6e 50%, #7a1a22 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* FORÇAR EXPANSÃO TOTAL DO OVERLAY NATIVO DO ELEMENTOR
========================================================================== */
.elementor-10 .elementor-element.elementor-element-6817a51 > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-6817a51 .elementor-background-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
/* Garante que qualquer imagem selecionada cubra todo o container sem cortes */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* Mantém a fusão de cores com o gradiente de trás */
mix-blend-mode: overlay !important;
opacity: 0.35 !important; /* Ajuste a opacidade no painel ou aqui se preferir mais escura/clara */
z-index: 1 !important;
}
/* ==========================================================================
GARANTIA DE VISIBILIDADE DO CONTEÚDO (TEXTOS E BOTÕES)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-6817a51 .elementor-widget,
.elementor-10 .elementor-element.elementor-element-6817a51 .e-con,
.elementor-10 .elementor-element.elementor-element-6817a51 .e-container {
position: relative !important;
z-index: 2 !important; /* Fica acima do gradiente e do overlay de imagem */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b6be050 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-72c3e80 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO SECUNDÁRIO PREMIUM (ELEGANTE & OUTLINE)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button {
position: relative !important;
background-color: transparent !important; /* Totalmente limpo e transparente */
color: #fff !important; /* Texto no Azul Marinho da sua logo */
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 15px 32px !important;
border-radius: 3px !important; /* Alinhado com a geometria do cabeçalho e botão principal */
border-bottom: 2px solid #fff !important; /* Borda precisa na cor marinho */
overflow: hidden !important; /* Necessário para conter o efeito de preenchimento interno */
z-index: 1 !important;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
box-shadow: none !important;
}
/* Pseudo-elemento para o efeito de Preenchimento Líquido (Slide-up Fill) */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button::before {
content: '';
position: absolute;
bottom: -100%; /* Começa escondido logo abaixo do botão */
left: 0;
width: 100%;
height: 100%;
background-color: #0D2244 !important; /* Cor que vai preencher o botão no hover */
z-index: -1 !important; /* Fica atrás do texto do botão */
transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O fundo sobe preenchendo o espaço e o texto vira branco */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button:hover {
color: #FAF8F4 !important; /* Texto muda para o Branco Caloroso para dar leitura */
border-color: #0D2244 !important;
transform: translateY(-2px); /* Leve elevação clean */
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.1) !important;
}
/* Ativa o preenchimento subindo de forma ultra fluida */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button:hover::before {
bottom: 0;
}
/* Feedback de clique real */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(13, 34, 68, 0.15) !important;
}
/* ==========================================================================
VERSÃO ADAPTATIVA PARA O HERO (SOBRE FUNDO ESCURO)
Se você usar este botão dentro do seu carrossel marinho, adicione a classe
'btn-hero-dark' no widget e este bloco abaixo vai clarear a borda automaticamente.
========================================================================== */
.elementor-10 .elementor-element.elementor-element-72c3e80.btn-hero-dark .elementor-button {
color: #FAF8F4 !important;
border-color: rgba(254, 254, 254, 0.4) !important;
}
.elementor-10 .elementor-element.elementor-element-72c3e80.btn-hero-dark .elementor-button::before {
background-color: #B01C24 !important; /* No Hero escuro, ele preenche com o Vermelho da marca */
}
.elementor-10 .elementor-element.elementor-element-72c3e80.btn-hero-dark .elementor-button:hover {
color: #FFFFFF !important;
border-color: #B01C24 !important;
box-shadow: 0 6px 20px rgba(176, 28, 36, 0.3) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button {
width: 100% !important; /* Ocupa 100% da largura em telas touch */
text-align: center !important;
padding: 14px 24px !important;
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bb2f7ce *//* ==========================================================================
CSS CUSTOMIZADO: CONTAINER DO HERO (MÁXIMA LEGIBILIDADE & RESPONSIVIDADE)
========================================================================== */
/* Configuração Base do Container Textos (Desktop) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* Alinhamento à esquerda corporativo */
gap: 24px !important; /* Espaçamento idêntico e limpo entre os blocos de texto */
width: 100% !important;
max-width: 780px !important; /* Limita a largura para o texto não esticar demais */
padding: 60px 0 !important;
text-align: left !important;
z-index: 3 !important;
}
/* 1. EYEBROW / BADGE (Widget Lista de Ícones do Elementor) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-widget-icon-list {
margin-bottom: -8px !important; /* Aproxima sutilmente do título */
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-item {
background-color: #B01C24 !important; /* Vermelho institucional da logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 2px !important;
box-shadow: 0 4px 10px rgba(176, 28, 36, 0.2) !important;
}
/* Ajuste do ícone dentro do badge */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-icon svg {
width: 12px !important;
height: 12px !important;
fill: #FFFFFF !important;
margin-right: 6px !important;
}
/* 2. TÍTULO PRINCIPAL (Widget Título H1) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(42px, 5vw, 68px) !important; /* Tipografia fluida inteligente */
line-height: 1.05 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 !important;
}
/* Palavra de Destaque no H1 (Envolva com Texto no Elementor se desejar) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title em {
font-style: normal !important;
color: #D42030 !important; /* Vermelho brilhante mapeado no HTML */
display: block !important; /* Força a quebra de linha estilizada */
}
/* 3. DESCRIÇÃO (Widget Editor de Texto) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.85) !important; /* Branco caloroso com leve transparência premium */
max-width: 580px !important; /* Evita que a descrição ocupe toda a largura do H1 */
margin: 0 !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
max-width: 90% !important;
gap: 30px !important;
padding: 40px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-size: 46px !important; /* Trava uma escala intermediária confortável */
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-size: 15px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
max-width: 100% !important;
align-items: center !important; /* Centraliza todo o fluxo no mobile para melhor ergonomia */
text-align: center !important;
gap: 18px !important;
padding: 20px 10px !important;
}
/* Centraliza o Badge e remove quebras rígidas */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
padding: 5px 12px !important;
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-size: 34px !important; /* Tamanho seguro para não quebrar palavras na tela do celular */
letter-spacing: -0.5px !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title em {
display: inline !important; /* No mobile, deixa o texto corrido para poupar espaço vertical */
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Força os botões de baixo a se empilharem ou ocuparem 100% */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-widget-container {
justify-content: center !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA FILTRADA (MOBILE - RESOLVE OS BUGS DE IMAGE_6E4280.PNG)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
max-width: 100% !important;
align-items: center !important; /* Centralização ergonômica perfeita */
text-align: center !important;
gap: 20px !important; /* Espaçamento unificado e limpo entre blocos */
padding: 30px 16px !important; /* Respiro lateral de segurança para a tela */
}
/* 1. Correção do Badge */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
font-size: 10px !important;
padding: 6px 14px !important;
}
/* 2. Correção do H1 - Mata o estouro lateral da palavra "TRANSFORMAMOS" */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-size: 28px !important; /* Tamanho exato para encaixar os caracteres sem quebra feia */
line-height: 1.2 !important; /* Abre o entrelaçamento para as linhas respirarem */
letter-spacing: -0.5px !important;
text-align: center !important;
width: 100% !important;
}
/* 3. Correção do Destaque (Tag EM) - Mantém a estrutura limpa e imponente */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title em {
display: block !important; /* Mantém como bloco para isolar o "PROJETOS EM" e dar ritmo visual */
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* 4. Correção da Descrição */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 8px !important;
color: rgba(250, 248, 244, 0.90) !important;
}
/* 5. Alinhamento dos Botões de Ação na base */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-widget-container {
justify-content: center !important;
width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3b0189f *//* ==========================================================================
HERO CONTAINER - GRADIENTE BASE & OVERLAY BLINDADO (CASA PADRÃO)
========================================================================== */
/* Camada Base: O Container Pai com o Gradiente da Marca */
.elementor-10 .elementor-element.elementor-element-3b0189f {
background: linear-gradient(105deg, #0d2244 0%, #1a3a6e 50%, #7a1a22 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* FORÇAR EXPANSÃO TOTAL DO OVERLAY NATIVO DO ELEMENTOR
========================================================================== */
.elementor-10 .elementor-element.elementor-element-3b0189f > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-3b0189f .elementor-background-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
/* Garante que qualquer imagem selecionada cubra todo o container sem cortes */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* Mantém a fusão de cores com o gradiente de trás */
mix-blend-mode: overlay !important;
opacity: 0.35 !important; /* Ajuste a opacidade no painel ou aqui se preferir mais escura/clara */
z-index: 1 !important;
}
/* ==========================================================================
GARANTIA DE VISIBILIDADE DO CONTEÚDO (TEXTOS E BOTÕES)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-3b0189f .elementor-widget,
.elementor-10 .elementor-element.elementor-element-3b0189f .e-con,
.elementor-10 .elementor-element.elementor-element-3b0189f .e-container {
position: relative !important;
z-index: 2 !important; /* Fica acima do gradiente e do overlay de imagem */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-944f511 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-944f511 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-23cc5e7 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO SECUNDÁRIO PREMIUM (ELEGANTE & OUTLINE)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button {
position: relative !important;
background-color: transparent !important; /* Totalmente limpo e transparente */
color: #fff !important; /* Texto no Azul Marinho da sua logo */
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 15px 32px !important;
border-radius: 3px !important; /* Alinhado com a geometria do cabeçalho e botão principal */
border-bottom: 2px solid #fff !important; /* Borda precisa na cor marinho */
overflow: hidden !important; /* Necessário para conter o efeito de preenchimento interno */
z-index: 1 !important;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
box-shadow: none !important;
}
/* Pseudo-elemento para o efeito de Preenchimento Líquido (Slide-up Fill) */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button::before {
content: '';
position: absolute;
bottom: -100%; /* Começa escondido logo abaixo do botão */
left: 0;
width: 100%;
height: 100%;
background-color: #0D2244 !important; /* Cor que vai preencher o botão no hover */
z-index: -1 !important; /* Fica atrás do texto do botão */
transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O fundo sobe preenchendo o espaço e o texto vira branco */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button:hover {
color: #FAF8F4 !important; /* Texto muda para o Branco Caloroso para dar leitura */
border-color: #0D2244 !important;
transform: translateY(-2px); /* Leve elevação clean */
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.1) !important;
}
/* Ativa o preenchimento subindo de forma ultra fluida */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button:hover::before {
bottom: 0;
}
/* Feedback de clique real */
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(13, 34, 68, 0.15) !important;
}
/* ==========================================================================
VERSÃO ADAPTATIVA PARA O HERO (SOBRE FUNDO ESCURO)
Se você usar este botão dentro do seu carrossel marinho, adicione a classe
'btn-hero-dark' no widget e este bloco abaixo vai clarear a borda automaticamente.
========================================================================== */
.elementor-10 .elementor-element.elementor-element-23cc5e7.btn-hero-dark .elementor-button {
color: #FAF8F4 !important;
border-color: rgba(254, 254, 254, 0.4) !important;
}
.elementor-10 .elementor-element.elementor-element-23cc5e7.btn-hero-dark .elementor-button::before {
background-color: #B01C24 !important; /* No Hero escuro, ele preenche com o Vermelho da marca */
}
.elementor-10 .elementor-element.elementor-element-23cc5e7.btn-hero-dark .elementor-button:hover {
color: #FFFFFF !important;
border-color: #B01C24 !important;
box-shadow: 0 6px 20px rgba(176, 28, 36, 0.3) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-23cc5e7 .elementor-button {
width: 100% !important; /* Ocupa 100% da largura em telas touch */
text-align: center !important;
padding: 14px 24px !important;
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32a7cdd *//* ==========================================================================
CSS CUSTOMIZADO: CONTAINER DO HERO (MÁXIMA LEGIBILIDADE & RESPONSIVIDADE)
========================================================================== */
/* Configuração Base do Container Textos (Desktop) */
.elementor-10 .elementor-element.elementor-element-32a7cdd {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* Alinhamento à esquerda corporativo */
gap: 24px !important; /* Espaçamento idêntico e limpo entre os blocos de texto */
width: 100% !important;
max-width: 780px !important; /* Limita a largura para o texto não esticar demais */
padding: 60px 0 !important;
text-align: left !important;
z-index: 3 !important;
}
/* 1. EYEBROW / BADGE (Widget Lista de Ícones do Elementor) */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-widget-icon-list {
margin-bottom: -8px !important; /* Aproxima sutilmente do título */
}
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-item {
background-color: #B01C24 !important; /* Vermelho institucional da logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 2px !important;
box-shadow: 0 4px 10px rgba(176, 28, 36, 0.2) !important;
}
/* Ajuste do ícone dentro do badge */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-icon svg {
width: 12px !important;
height: 12px !important;
fill: #FFFFFF !important;
margin-right: 6px !important;
}
/* 2. TÍTULO PRINCIPAL (Widget Título H1) */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(42px, 5vw, 68px) !important; /* Tipografia fluida inteligente */
line-height: 1.05 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 !important;
}
/* Palavra de Destaque no H1 (Envolva com Texto no Elementor se desejar) */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title em {
font-style: normal !important;
color: #D42030 !important; /* Vermelho brilhante mapeado no HTML */
display: block !important; /* Força a quebra de linha estilizada */
}
/* 3. DESCRIÇÃO (Widget Editor de Texto) */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.85) !important; /* Branco caloroso com leve transparência premium */
max-width: 580px !important; /* Evita que a descrição ocupe toda a largura do H1 */
margin: 0 !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-32a7cdd {
max-width: 90% !important;
gap: 30px !important;
padding: 40px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-size: 46px !important; /* Trava uma escala intermediária confortável */
}
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-size: 15px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-32a7cdd {
max-width: 100% !important;
align-items: center !important; /* Centraliza todo o fluxo no mobile para melhor ergonomia */
text-align: center !important;
gap: 18px !important;
padding: 20px 10px !important;
}
/* Centraliza o Badge e remove quebras rígidas */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
padding: 5px 12px !important;
}
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-size: 34px !important; /* Tamanho seguro para não quebrar palavras na tela do celular */
letter-spacing: -0.5px !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title em {
display: inline !important; /* No mobile, deixa o texto corrido para poupar espaço vertical */
}
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Força os botões de baixo a se empilharem ou ocuparem 100% */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-widget-container {
justify-content: center !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA FILTRADA (MOBILE - RESOLVE OS BUGS DE IMAGE_6E4280.PNG)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-32a7cdd {
max-width: 100% !important;
align-items: center !important; /* Centralização ergonômica perfeita */
text-align: center !important;
gap: 20px !important; /* Espaçamento unificado e limpo entre blocos */
padding: 30px 16px !important; /* Respiro lateral de segurança para a tela */
}
/* 1. Correção do Badge */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
font-size: 10px !important;
padding: 6px 14px !important;
}
/* 2. Correção do H1 - Mata o estouro lateral da palavra "TRANSFORMAMOS" */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title {
font-size: 28px !important; /* Tamanho exato para encaixar os caracteres sem quebra feia */
line-height: 1.2 !important; /* Abre o entrelaçamento para as linhas respirarem */
letter-spacing: -0.5px !important;
text-align: center !important;
width: 100% !important;
}
/* 3. Correção do Destaque (Tag EM) - Mantém a estrutura limpa e imponente */
.elementor-10 .elementor-element.elementor-element-32a7cdd h1.elementor-heading-title em {
display: block !important; /* Mantém como bloco para isolar o "PROJETOS EM" e dar ritmo visual */
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* 4. Correção da Descrição */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 8px !important;
color: rgba(250, 248, 244, 0.90) !important;
}
/* 5. Alinhamento dos Botões de Ação na base */
.elementor-10 .elementor-element.elementor-element-32a7cdd .elementor-widget-container {
justify-content: center !important;
width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-65f73f7 *//* ==========================================================================
HERO CONTAINER - GRADIENTE BASE & OVERLAY BLINDADO (CASA PADRÃO)
========================================================================== */
/* Camada Base: O Container Pai com o Gradiente da Marca */
.elementor-10 .elementor-element.elementor-element-65f73f7 {
background: linear-gradient(105deg, #0d2244 0%, #1a3a6e 50%, #7a1a22 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* FORÇAR EXPANSÃO TOTAL DO OVERLAY NATIVO DO ELEMENTOR
========================================================================== */
.elementor-10 .elementor-element.elementor-element-65f73f7 > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-65f73f7 .elementor-background-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
/* Garante que qualquer imagem selecionada cubra todo o container sem cortes */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* Mantém a fusão de cores com o gradiente de trás */
mix-blend-mode: overlay !important;
opacity: 0.35 !important; /* Ajuste a opacidade no painel ou aqui se preferir mais escura/clara */
z-index: 1 !important;
}
/* ==========================================================================
GARANTIA DE VISIBILIDADE DO CONTEÚDO (TEXTOS E BOTÕES)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-65f73f7 .elementor-widget,
.elementor-10 .elementor-element.elementor-element-65f73f7 .e-con,
.elementor-10 .elementor-element.elementor-element-65f73f7 .e-container {
position: relative !important;
z-index: 2 !important; /* Fica acima do gradiente e do overlay de imagem */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-37358a3 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-37358a3 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-01e71d2 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO SECUNDÁRIO PREMIUM (ELEGANTE & OUTLINE)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button {
position: relative !important;
background-color: transparent !important; /* Totalmente limpo e transparente */
color: #fff !important; /* Texto no Azul Marinho da sua logo */
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 15px 32px !important;
border-radius: 3px !important; /* Alinhado com a geometria do cabeçalho e botão principal */
border-bottom: 2px solid #fff !important; /* Borda precisa na cor marinho */
overflow: hidden !important; /* Necessário para conter o efeito de preenchimento interno */
z-index: 1 !important;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
box-shadow: none !important;
}
/* Pseudo-elemento para o efeito de Preenchimento Líquido (Slide-up Fill) */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button::before {
content: '';
position: absolute;
bottom: -100%; /* Começa escondido logo abaixo do botão */
left: 0;
width: 100%;
height: 100%;
background-color: #0D2244 !important; /* Cor que vai preencher o botão no hover */
z-index: -1 !important; /* Fica atrás do texto do botão */
transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O fundo sobe preenchendo o espaço e o texto vira branco */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button:hover {
color: #FAF8F4 !important; /* Texto muda para o Branco Caloroso para dar leitura */
border-color: #0D2244 !important;
transform: translateY(-2px); /* Leve elevação clean */
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.1) !important;
}
/* Ativa o preenchimento subindo de forma ultra fluida */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button:hover::before {
bottom: 0;
}
/* Feedback de clique real */
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(13, 34, 68, 0.15) !important;
}
/* ==========================================================================
VERSÃO ADAPTATIVA PARA O HERO (SOBRE FUNDO ESCURO)
Se você usar este botão dentro do seu carrossel marinho, adicione a classe
'btn-hero-dark' no widget e este bloco abaixo vai clarear a borda automaticamente.
========================================================================== */
.elementor-10 .elementor-element.elementor-element-01e71d2.btn-hero-dark .elementor-button {
color: #FAF8F4 !important;
border-color: rgba(254, 254, 254, 0.4) !important;
}
.elementor-10 .elementor-element.elementor-element-01e71d2.btn-hero-dark .elementor-button::before {
background-color: #B01C24 !important; /* No Hero escuro, ele preenche com o Vermelho da marca */
}
.elementor-10 .elementor-element.elementor-element-01e71d2.btn-hero-dark .elementor-button:hover {
color: #FFFFFF !important;
border-color: #B01C24 !important;
box-shadow: 0 6px 20px rgba(176, 28, 36, 0.3) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-01e71d2 .elementor-button {
width: 100% !important; /* Ocupa 100% da largura em telas touch */
text-align: center !important;
padding: 14px 24px !important;
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89be1ad *//* ==========================================================================
CSS CUSTOMIZADO: CONTAINER DO HERO (MÁXIMA LEGIBILIDADE & RESPONSIVIDADE)
========================================================================== */
/* Configuração Base do Container Textos (Desktop) */
.elementor-10 .elementor-element.elementor-element-89be1ad {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* Alinhamento à esquerda corporativo */
gap: 24px !important; /* Espaçamento idêntico e limpo entre os blocos de texto */
width: 100% !important;
max-width: 780px !important; /* Limita a largura para o texto não esticar demais */
padding: 60px 0 !important;
text-align: left !important;
z-index: 3 !important;
}
/* 1. EYEBROW / BADGE (Widget Lista de Ícones do Elementor) */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-widget-icon-list {
margin-bottom: -8px !important; /* Aproxima sutilmente do título */
}
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-item {
background-color: #B01C24 !important; /* Vermelho institucional da logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 2px !important;
box-shadow: 0 4px 10px rgba(176, 28, 36, 0.2) !important;
}
/* Ajuste do ícone dentro do badge */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-icon svg {
width: 12px !important;
height: 12px !important;
fill: #FFFFFF !important;
margin-right: 6px !important;
}
/* 2. TÍTULO PRINCIPAL (Widget Título H1) */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(42px, 5vw, 68px) !important; /* Tipografia fluida inteligente */
line-height: 1.05 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 !important;
}
/* Palavra de Destaque no H1 (Envolva com Texto no Elementor se desejar) */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title em {
font-style: normal !important;
color: #D42030 !important; /* Vermelho brilhante mapeado no HTML */
display: block !important; /* Força a quebra de linha estilizada */
}
/* 3. DESCRIÇÃO (Widget Editor de Texto) */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.85) !important; /* Branco caloroso com leve transparência premium */
max-width: 580px !important; /* Evita que a descrição ocupe toda a largura do H1 */
margin: 0 !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-89be1ad {
max-width: 90% !important;
gap: 30px !important;
padding: 40px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-size: 46px !important; /* Trava uma escala intermediária confortável */
}
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-size: 15px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-89be1ad {
max-width: 100% !important;
align-items: center !important; /* Centraliza todo o fluxo no mobile para melhor ergonomia */
text-align: center !important;
gap: 18px !important;
padding: 20px 10px !important;
}
/* Centraliza o Badge e remove quebras rígidas */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
padding: 5px 12px !important;
}
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-size: 34px !important; /* Tamanho seguro para não quebrar palavras na tela do celular */
letter-spacing: -0.5px !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title em {
display: inline !important; /* No mobile, deixa o texto corrido para poupar espaço vertical */
}
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Força os botões de baixo a se empilharem ou ocuparem 100% */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-widget-container {
justify-content: center !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA FILTRADA (MOBILE - RESOLVE OS BUGS DE IMAGE_6E4280.PNG)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-89be1ad {
max-width: 100% !important;
align-items: center !important; /* Centralização ergonômica perfeita */
text-align: center !important;
gap: 20px !important; /* Espaçamento unificado e limpo entre blocos */
padding: 30px 16px !important; /* Respiro lateral de segurança para a tela */
}
/* 1. Correção do Badge */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
font-size: 10px !important;
padding: 6px 14px !important;
}
/* 2. Correção do H1 - Mata o estouro lateral da palavra "TRANSFORMAMOS" */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title {
font-size: 28px !important; /* Tamanho exato para encaixar os caracteres sem quebra feia */
line-height: 1.2 !important; /* Abre o entrelaçamento para as linhas respirarem */
letter-spacing: -0.5px !important;
text-align: center !important;
width: 100% !important;
}
/* 3. Correção do Destaque (Tag EM) - Mantém a estrutura limpa e imponente */
.elementor-10 .elementor-element.elementor-element-89be1ad h1.elementor-heading-title em {
display: block !important; /* Mantém como bloco para isolar o "PROJETOS EM" e dar ritmo visual */
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* 4. Correção da Descrição */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 8px !important;
color: rgba(250, 248, 244, 0.90) !important;
}
/* 5. Alinhamento dos Botões de Ação na base */
.elementor-10 .elementor-element.elementor-element-89be1ad .elementor-widget-container {
justify-content: center !important;
width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6817a51 *//* ==========================================================================
HERO CONTAINER - GRADIENTE BASE & OVERLAY BLINDADO (CASA PADRÃO)
========================================================================== */
/* Camada Base: O Container Pai com o Gradiente da Marca */
.elementor-10 .elementor-element.elementor-element-6817a51 {
background: linear-gradient(105deg, #0d2244 0%, #1a3a6e 50%, #7a1a22 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* FORÇAR EXPANSÃO TOTAL DO OVERLAY NATIVO DO ELEMENTOR
========================================================================== */
.elementor-10 .elementor-element.elementor-element-6817a51 > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-6817a51 .elementor-background-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
/* Garante que qualquer imagem selecionada cubra todo o container sem cortes */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* Mantém a fusão de cores com o gradiente de trás */
mix-blend-mode: overlay !important;
opacity: 0.35 !important; /* Ajuste a opacidade no painel ou aqui se preferir mais escura/clara */
z-index: 1 !important;
}
/* ==========================================================================
GARANTIA DE VISIBILIDADE DO CONTEÚDO (TEXTOS E BOTÕES)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-6817a51 .elementor-widget,
.elementor-10 .elementor-element.elementor-element-6817a51 .e-con,
.elementor-10 .elementor-element.elementor-element-6817a51 .e-container {
position: relative !important;
z-index: 2 !important; /* Fica acima do gradiente e do overlay de imagem */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b6be050 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-b6be050 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-72c3e80 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO SECUNDÁRIO PREMIUM (ELEGANTE & OUTLINE)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button {
position: relative !important;
background-color: transparent !important; /* Totalmente limpo e transparente */
color: #fff !important; /* Texto no Azul Marinho da sua logo */
font-family: 'Montserrat', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 15px 32px !important;
border-radius: 3px !important; /* Alinhado com a geometria do cabeçalho e botão principal */
border-bottom: 2px solid #fff !important; /* Borda precisa na cor marinho */
overflow: hidden !important; /* Necessário para conter o efeito de preenchimento interno */
z-index: 1 !important;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
box-shadow: none !important;
}
/* Pseudo-elemento para o efeito de Preenchimento Líquido (Slide-up Fill) */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button::before {
content: '';
position: absolute;
bottom: -100%; /* Começa escondido logo abaixo do botão */
left: 0;
width: 100%;
height: 100%;
background-color: #0D2244 !important; /* Cor que vai preencher o botão no hover */
z-index: -1 !important; /* Fica atrás do texto do botão */
transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O fundo sobe preenchendo o espaço e o texto vira branco */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button:hover {
color: #FAF8F4 !important; /* Texto muda para o Branco Caloroso para dar leitura */
border-color: #0D2244 !important;
transform: translateY(-2px); /* Leve elevação clean */
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.1) !important;
}
/* Ativa o preenchimento subindo de forma ultra fluida */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button:hover::before {
bottom: 0;
}
/* Feedback de clique real */
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(13, 34, 68, 0.15) !important;
}
/* ==========================================================================
VERSÃO ADAPTATIVA PARA O HERO (SOBRE FUNDO ESCURO)
Se você usar este botão dentro do seu carrossel marinho, adicione a classe
'btn-hero-dark' no widget e este bloco abaixo vai clarear a borda automaticamente.
========================================================================== */
.elementor-10 .elementor-element.elementor-element-72c3e80.btn-hero-dark .elementor-button {
color: #FAF8F4 !important;
border-color: rgba(254, 254, 254, 0.4) !important;
}
.elementor-10 .elementor-element.elementor-element-72c3e80.btn-hero-dark .elementor-button::before {
background-color: #B01C24 !important; /* No Hero escuro, ele preenche com o Vermelho da marca */
}
.elementor-10 .elementor-element.elementor-element-72c3e80.btn-hero-dark .elementor-button:hover {
color: #FFFFFF !important;
border-color: #B01C24 !important;
box-shadow: 0 6px 20px rgba(176, 28, 36, 0.3) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-72c3e80 .elementor-button {
width: 100% !important; /* Ocupa 100% da largura em telas touch */
text-align: center !important;
padding: 14px 24px !important;
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bb2f7ce *//* ==========================================================================
CSS CUSTOMIZADO: CONTAINER DO HERO (MÁXIMA LEGIBILIDADE & RESPONSIVIDADE)
========================================================================== */
/* Configuração Base do Container Textos (Desktop) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* Alinhamento à esquerda corporativo */
gap: 24px !important; /* Espaçamento idêntico e limpo entre os blocos de texto */
width: 100% !important;
max-width: 780px !important; /* Limita a largura para o texto não esticar demais */
padding: 60px 0 !important;
text-align: left !important;
z-index: 3 !important;
}
/* 1. EYEBROW / BADGE (Widget Lista de Ícones do Elementor) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-widget-icon-list {
margin-bottom: -8px !important; /* Aproxima sutilmente do título */
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-item {
background-color: #B01C24 !important; /* Vermelho institucional da logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
padding: 6px 16px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 2px !important;
box-shadow: 0 4px 10px rgba(176, 28, 36, 0.2) !important;
}
/* Ajuste do ícone dentro do badge */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-icon svg {
width: 12px !important;
height: 12px !important;
fill: #FFFFFF !important;
margin-right: 6px !important;
}
/* 2. TÍTULO PRINCIPAL (Widget Título H1) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(42px, 5vw, 68px) !important; /* Tipografia fluida inteligente */
line-height: 1.05 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 !important;
}
/* Palavra de Destaque no H1 (Envolva com Texto no Elementor se desejar) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title em {
font-style: normal !important;
color: #D42030 !important; /* Vermelho brilhante mapeado no HTML */
display: block !important; /* Força a quebra de linha estilizada */
}
/* 3. DESCRIÇÃO (Widget Editor de Texto) */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.85) !important; /* Branco caloroso com leve transparência premium */
max-width: 580px !important; /* Evita que a descrição ocupe toda a largura do H1 */
margin: 0 !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
max-width: 90% !important;
gap: 30px !important;
padding: 40px 20px !important;
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-size: 46px !important; /* Trava uma escala intermediária confortável */
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-size: 15px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
max-width: 100% !important;
align-items: center !important; /* Centraliza todo o fluxo no mobile para melhor ergonomia */
text-align: center !important;
gap: 18px !important;
padding: 20px 10px !important;
}
/* Centraliza o Badge e remove quebras rígidas */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
padding: 5px 12px !important;
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-size: 34px !important; /* Tamanho seguro para não quebrar palavras na tela do celular */
letter-spacing: -0.5px !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title em {
display: inline !important; /* No mobile, deixa o texto corrido para poupar espaço vertical */
}
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Força os botões de baixo a se empilharem ou ocuparem 100% */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-widget-container {
justify-content: center !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA FILTRADA (MOBILE - RESOLVE OS BUGS DE IMAGE_6E4280.PNG)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-bb2f7ce {
max-width: 100% !important;
align-items: center !important; /* Centralização ergonômica perfeita */
text-align: center !important;
gap: 20px !important; /* Espaçamento unificado e limpo entre blocos */
padding: 30px 16px !important; /* Respiro lateral de segurança para a tela */
}
/* 1. Correção do Badge */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-icon-list-item {
justify-content: center !important;
letter-spacing: 1.5px !important;
font-size: 10px !important;
padding: 6px 14px !important;
}
/* 2. Correção do H1 - Mata o estouro lateral da palavra "TRANSFORMAMOS" */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title {
font-size: 28px !important; /* Tamanho exato para encaixar os caracteres sem quebra feia */
line-height: 1.2 !important; /* Abre o entrelaçamento para as linhas respirarem */
letter-spacing: -0.5px !important;
text-align: center !important;
width: 100% !important;
}
/* 3. Correção do Destaque (Tag EM) - Mantém a estrutura limpa e imponente */
.elementor-10 .elementor-element.elementor-element-bb2f7ce h1.elementor-heading-title em {
display: block !important; /* Mantém como bloco para isolar o "PROJETOS EM" e dar ritmo visual */
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* 4. Correção da Descrição */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-text-editor {
font-size: 14px !important;
line-height: 1.6 !important;
text-align: center !important;
padding: 0 8px !important;
color: rgba(250, 248, 244, 0.90) !important;
}
/* 5. Alinhamento dos Botões de Ação na base */
.elementor-10 .elementor-element.elementor-element-bb2f7ce .elementor-widget-container {
justify-content: center !important;
width: 100% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3b0189f *//* ==========================================================================
HERO CONTAINER - GRADIENTE BASE & OVERLAY BLINDADO (CASA PADRÃO)
========================================================================== */
/* Camada Base: O Container Pai com o Gradiente da Marca */
.elementor-10 .elementor-element.elementor-element-3b0189f {
background: linear-gradient(105deg, #0d2244 0%, #1a3a6e 50%, #7a1a22 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}
/* FORÇAR EXPANSÃO TOTAL DO OVERLAY NATIVO DO ELEMENTOR
========================================================================== */
.elementor-10 .elementor-element.elementor-element-3b0189f > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-3b0189f .elementor-background-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
/* Garante que qualquer imagem selecionada cubra todo o container sem cortes */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* Mantém a fusão de cores com o gradiente de trás */
mix-blend-mode: overlay !important;
opacity: 0.35 !important; /* Ajuste a opacidade no painel ou aqui se preferir mais escura/clara */
z-index: 1 !important;
}
/* ==========================================================================
GARANTIA DE VISIBILIDADE DO CONTEÚDO (TEXTOS E BOTÕES)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-3b0189f .elementor-widget,
.elementor-10 .elementor-element.elementor-element-3b0189f .e-con,
.elementor-10 .elementor-element.elementor-element-3b0189f .e-container {
position: relative !important;
z-index: 2 !important; /* Fica acima do gradiente e do overlay de imagem */
}/* End custom CSS */
/* Start custom CSS for nested-carousel, class: .elementor-element-88d2f55 *//* ==========================================================================
ELEMENTOR CAROUSEL - NAVEGAÇÃO PREMIUM (FORCE RESET)
========================================================================== */
/* 1. FORÇAR ESTILO DAS SETAS (ARROWS) */
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-button-next,
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-button-prev,
.elementor-10 .elementor-element.elementor-element-88d2f55 .elementor-swiper-button {
background-color: rgba(13, 34, 68, 0.4) !important; /* Azul Marinho da logo com opacidade */
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
width: 50px !important;
height: 50px !important;
border-radius: 2px !important; /* Cantos retos corporativos */
border: 1px solid rgba(255, 255, 255, 0.15) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Forçar tamanho e cor dos ícones dentro das setas */
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-button-next::after,
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-button-prev::after,
.elementor-10 .elementor-element.elementor-element-88d2f55 .elementor-swiper-button::after {
font-size: 18px !important; /* Caso o Elementor use fontes de ícone */
color: #FAF8F4 !important;
}
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-button-next svg,
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-button-prev svg {
width: 18px !important;
height: 18px !important;
fill: #FAF8F4 !important; /* Caso use SVG */
transition: transform 0.3s ease !important;
}
/* --- HOVER DAS SETAS --- */
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-button-next:hover,
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-button-prev:hover,
.elementor-10 .elementor-element.elementor-element-88d2f55 .elementor-swiper-button:hover {
background-color: #B01C24 !important; /* Vermelho institucional */
border-color: #B01C24 !important;
box-shadow: 0 8px 20px rgba(176, 28, 36, 0.4) !important;
}
/* 2. FORÇAR ESTILO DA PAGINAÇÃO (DOTS EM BARRAS) */
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-pagination-bullets,
.elementor-10 .elementor-element.elementor-element-88d2f55 .elementor-swiper-pagination {
text-align: left !important;
width: auto !important;
}
/* Altera as bolinhas para o formato de traço técnico */
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-pagination-bullet {
width: 58px !important;
height: 3px !important;
background-color: rgba(255, 255, 255, 0.3) !important;
border-radius: 0px !important; /* Remove o arredondamento */
opacity: 1 !important;
margin: 0 6px 0 0 !important;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* --- ESTADO ATIVO DO DOT --- */
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-pagination-bullet-active {
background-color: #B01C24 !important; /* Vermelho assinatura */
width: 52px !important; /* Estica a barra */
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA MÓVEL
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-pagination-bullets,
.elementor-10 .elementor-element.elementor-element-88d2f55 .elementor-swiper-pagination {
left: 5% !important;
bottom: 30px !important;
}
}
@media (max-width: 768px) {
/* Esconde as setas no mobile por usabilidade */
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-button-next,
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-button-prev,
.elementor-10 .elementor-element.elementor-element-88d2f55 .elementor-swiper-button {
display: none !important;
}
/* Centraliza os dots no celular */
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-pagination-bullets,
.elementor-10 .elementor-element.elementor-element-88d2f55 .elementor-swiper-pagination {
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 25px !important;
width: 100% !important;
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-pagination-bullet {
width: 20px !important;
}
.elementor-10 .elementor-element.elementor-element-88d2f55 .swiper-pagination-bullet-active {
width: 38px !important;
}
}/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-ef0082c *//* ==========================================================================
CSS CUSTOMIZADO: EYEBROW / BADGE DE SERVIÇOS PREMIUM (CASA PADRÃO)
========================================================================== */
/* Remove margens internas nativas do Elementor e garante o alinhamento */
.elementor-10 .elementor-element.elementor-element-ef0082c .elementor-icon-list-items {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}
/* Estilização do Item da Lista */
.elementor-10 .elementor-element.elementor-element-ef0082c .elementor-icon-list-item {
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #B01C24 !important; /* O Vermelho institucional extraído da sua logo */
letter-spacing: 2px !important;
text-transform: uppercase !important; /* Força caixa alta para estética premium */
display: inline-flex !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}
/* --- DETALHE DA LINHA TÉCNICA À ESQUERDA (ESTILO HTML NATIVO) --- */
.elementor-10 .elementor-element.elementor-element-ef0082c .elementor-icon-list-item::before {
content: '';
display: inline-block;
width: 32px; /* Comprimento da linha rígida */
height: 3px; /* Espessura da linha */
background-color: #B01C24 !important; /* Vermelho assinatura */
margin-right: 12px; /* Afastamento entre a linha e o texto/ícone */
border-radius: 1px;
vertical-align: middle;
}
/* Ajuste e otimização para o ícone (caso decida usar um ícone junto ao texto) */
.elementor-10 .elementor-element.elementor-element-ef0082c .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
margin-right: 8px !important;
padding: 0 !important;
}
.elementor-10 .elementor-element.elementor-element-ef0082c .elementor-icon-list-icon svg {
width: 14px !important;
height: 14px !important;
fill: #B01C24 !important; /* Força o ícone a seguir o vermelho da logo */
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
/* Centraliza o Eyebrow no Mobile caso o seu container pai seja centralizado */
.elementor-10 .elementor-element.elementor-element-ef0082c {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
.elementor-10 .elementor-element.elementor-element-ef0082c .elementor-icon-list-items {
justify-content: center !important;
}
.elementor-10 .elementor-element.elementor-element-ef0082c .elementor-icon-list-item {
font-size: 11px !important; /* Reduz levemente a escala tipográfica no celular */
letter-spacing: 1.5px !important;
}
.elementor-10 .elementor-element.elementor-element-ef0082c .elementor-icon-list-item::before {
width: 24px; /* Encolhe a linha decorativa para telas menores */
margin-right: 8px;
}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-0bec8a8 *//* Custom CSS no Widget Título H2 */
.elementor-10 .elementor-element.elementor-element-0bec8a8 .elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: clamp(32px, 4vw, 48px) !important;
line-height: 1.1 !important;
color: #0D2244 !important;
letter-spacing: -0.5px !important;
}
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-0bec8a8 .elementor-heading-title { font-size: 28px !important; }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-510a820 *//* ==========================================================================
CSS CUSTOMIZADO: BOTÃO PRINCIPAL PREMIUM (MÁXIMA CONVERSÃO & CLEAN)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-510a820 .elementor-button {
position: relative !important;
background-color: #B01C24 !important; /* O Vermelho institucional da sua logo */
color: #FFFFFF !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 36px !important;
border-radius: 3px !important; /* Cantos levemente alinhados (linguagem da arquitetura) */
overflow: hidden !important; /* Obrigatório para conter o efeito de brilho */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(176, 28, 36, 0.25) !important;
border: none !important;
}
/* Pseudo-elemento para o efeito de Brilho Clean (Glint Effect) */
.elementor-10 .elementor-element.elementor-element-510a820 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg); /* Inclinação elegante de desenho técnico */
transition: none;
}
/* ==========================================================================
ESTADOS DE INTERAÇÃO (HOVER, FOCUS E ACTIVE)
========================================================================== */
/* Hover: O botão ganha vida, eleva-se e o brilho atravessa a extensão */
.elementor-10 .elementor-element.elementor-element-510a820 .elementor-button:hover {
background-color: #D42030 !important; /* Transiciona para o Vermelho vivo do seu HTML */
color: #FFFFFF !important;
transform: translateY(-3px); /* Elevação suave e limpa */
box-shadow: 0 8px 24px rgba(176, 28, 36, 0.45) !important; /* Sombra expande organicamente */
}
/* Gatilho que dispara a animação do brilho linear ao passar o mouse */
.elementor-10 .elementor-element.elementor-element-510a820 .elementor-button:hover::before {
left: 200%;
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Feedback tátil e físico ao clique real do cliente */
.elementor-10 .elementor-element.elementor-element-510a820 .elementor-button:active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(176, 28, 36, 0.35) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-510a820 .elementor-button {
width: 100% !important; /* Botão full-width melhora a conversão no dedão */
text-align: center !important;
padding: 15px 24px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
}
}/* End custom CSS */
/* Start custom CSS for call-to-action, class: .elementor-element-11c5e97 *//* ==========================================================================
WIDGET CALL TO ACTION - PERFORMANCE EXTREMA E FLUIDEZ (GPU ACCELERATED)
========================================================================== */
/* --- 1. CONFIGURAÇÕES DA CAMADA PAI E OVERLAY --- */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta {
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
background-color: #0d2244 !important; /* Cor marinho base da logo */
}
/* Zoom ultra fluido na imagem de fundo utilizando aceleração de hardware */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__bg {
transform: scale(1) translateZ(0);
will-change: transform;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta:hover .elementor-cta__bg {
transform: scale(1.06) translateZ(0) !important;
}
/* Transição de cores linear e contínua do Overlay (Desktop) */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13,34,68,0.15) 0%, rgba(13,34,68,0.55) 50%, rgba(13,34,68,0.92) 100%) !important;
will-change: background;
transition: background 0.5s ease-in-out !important;
opacity: 1 !important;
}
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta:hover .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(176,28,36,0.2) 0%, rgba(13,34,68,0.6) 40%, rgba(13,34,68,0.96) 100%) !important;
}
/* Barra técnica inferior vermelha expandindo de forma suave */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 0;
background-color: #b01c24 !important;
will-change: width;
transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: 3;
}
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta:hover .elementor-cta__content::after {
width: 100%;
}
/* --- 2. CONFIGURAÇÃO DE TEXTOS E ELEMENTOS INTERNOS --- */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__content {
padding: 32px !important;
justify-content: flex-end !important; /* Mantém tudo ancorado na base */
z-index: 2 !important;
}
/* Título Montserrat - Ajustado com leve elevação para abrir espaço para o texto */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 24px !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
line-height: 1.1 !important;
margin-bottom: 0 !important;
transform: translateY(45px) translateZ(0) !important; /* Empurra o título para o centro inicialmente */
will-change: transform;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Quando o mouse entra, o título sobe de forma ultra fluida para a sua posição original */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta:hover .elementor-cta__title {
transform: translateY(0) translateZ(0) !important;
}
/* --- 3. ENGENHARIA DE REVELAÇÃO OTIMIZADA: DESCRIÇÃO --- */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__description {
font-family: 'Poppins', sans-serif !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.75) !important;
margin: 12px 0 0 0 !important; /* Margem estática fixa para evitar quebras de caixa */
padding: 0 !important;
/* Substituição do max-height pelo fluxo de transform + opacity puro (GPU) */
opacity: 0 !important;
transform: translateY(20px) translateZ(0) !important; /* Começa rebaixado e invisível */
will-change: opacity, transform;
transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Revelação instantânea da descrição sem causar travamentos */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta:hover .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
/* --- 4. ENGENHARIA DE REVELAÇÃO OTIMIZADA: BOTÃO CTA --- */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__button {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11.5px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background-color: #b01c24 !important;
padding: 12px 24px !important;
border-radius: 2px !important;
border: none !important;
width: fit-content !important;
margin-top: 16px !important; /* Margem fixa e estável */
/* Escondido com deslocamento e transição com delay cirúrgico */
opacity: 0 !important;
transform: translateY(15px) translateZ(0) !important;
will-change: opacity, transform;
transition: opacity 0.35s 0.08s ease, transform 0.45s 0.08s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease !important;
}
/* Botão surge logo atrás da descrição com fluidez contínua */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta:hover .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__button:hover {
background-color: #d42030 !important;
}
/* ==========================================================================
CONFIGURAÇÃO RESPONSIVA ADAPTATIVA (TABLET & MOBILE)
========================================================================== */
@media (max-width: 1024px) {
/* Exibição fixa estabilizada em telas touch para evitar engasgos em celulares */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__title {
transform: translateY(0) !important;
}
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* 1. CORREÇÃO DE OVERLAY MOBILE EXTRA FORTE (Garante contraste em image_6e3edd.png) */
/* Substitui o gradiente leve por um bloco denso focado em destacar fontes brancas */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13, 34, 68, 0.45) 0%, rgba(13, 34, 68, 0.75) 45%, rgba(5, 11, 20, 0.96) 100%) !important;
}
/* 2. CORREÇÃO DA SETA DO BOTÃO NO MOBILE */
/* Diminui sutilmente a tipografia e o espaçamento para manter a seta (→) na mesma linha */
.elementor-10 .elementor-element.elementor-element-11c5e97 .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) !important;
width: 100% !important;
text-align: center !important;
font-size: 10.5px !important; /* Redução cirúrgica preventiva */
letter-spacing: 0.8px !important; /* Compactação para evitar o quebra de linha da seta */
padding: 12px 16px !important; /* Reduz padding lateral para dar margem interna ao texto */
white-space: nowrap !important; /* Força o botão inteiro a permanecer em uma linha única */
}
}/* End custom CSS */
/* Start custom CSS for call-to-action, class: .elementor-element-5e39e19 *//* ==========================================================================
WIDGET CALL TO ACTION - PERFORMANCE EXTREMA E FLUIDEZ (GPU ACCELERATED)
========================================================================== */
/* --- 1. CONFIGURAÇÕES DA CAMADA PAI E OVERLAY --- */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta {
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
background-color: #0d2244 !important; /* Cor marinho base da logo */
}
/* Zoom ultra fluido na imagem de fundo utilizando aceleração de hardware */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__bg {
transform: scale(1) translateZ(0);
will-change: transform;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta:hover .elementor-cta__bg {
transform: scale(1.06) translateZ(0) !important;
}
/* Transição de cores linear e contínua do Overlay (Desktop) */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13,34,68,0.15) 0%, rgba(13,34,68,0.55) 50%, rgba(13,34,68,0.92) 100%) !important;
will-change: background;
transition: background 0.5s ease-in-out !important;
opacity: 1 !important;
}
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta:hover .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(176,28,36,0.2) 0%, rgba(13,34,68,0.6) 40%, rgba(13,34,68,0.96) 100%) !important;
}
/* Barra técnica inferior vermelha expandindo de forma suave */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 0;
background-color: #b01c24 !important;
will-change: width;
transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: 3;
}
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta:hover .elementor-cta__content::after {
width: 100%;
}
/* --- 2. CONFIGURAÇÃO DE TEXTOS E ELEMENTOS INTERNOS --- */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__content {
padding: 32px !important;
justify-content: flex-end !important; /* Mantém tudo ancorado na base */
z-index: 2 !important;
}
/* Título Montserrat - Ajustado com leve elevação para abrir espaço para o texto */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 24px !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
line-height: 1.1 !important;
margin-bottom: 0 !important;
transform: translateY(45px) translateZ(0) !important; /* Empurra o título para o centro inicialmente */
will-change: transform;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Quando o mouse entra, o título sobe de forma ultra fluida para a sua posição original */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta:hover .elementor-cta__title {
transform: translateY(0) translateZ(0) !important;
}
/* --- 3. ENGENHARIA DE REVELAÇÃO OTIMIZADA: DESCRIÇÃO --- */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__description {
font-family: 'Poppins', sans-serif !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.75) !important;
margin: 12px 0 0 0 !important; /* Margem estática fixa para evitar quebras de caixa */
padding: 0 !important;
/* Substituição do max-height pelo fluxo de transform + opacity puro (GPU) */
opacity: 0 !important;
transform: translateY(20px) translateZ(0) !important; /* Começa rebaixado e invisível */
will-change: opacity, transform;
transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Revelação instantânea da descrição sem causar travamentos */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta:hover .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
/* --- 4. ENGENHARIA DE REVELAÇÃO OTIMIZADA: BOTÃO CTA --- */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__button {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11.5px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background-color: #b01c24 !important;
padding: 12px 24px !important;
border-radius: 2px !important;
border: none !important;
width: fit-content !important;
margin-top: 16px !important; /* Margem fixa e estável */
/* Escondido com deslocamento e transição com delay cirúrgico */
opacity: 0 !important;
transform: translateY(15px) translateZ(0) !important;
will-change: opacity, transform;
transition: opacity 0.35s 0.08s ease, transform 0.45s 0.08s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease !important;
}
/* Botão surge logo atrás da descrição com fluidez contínua */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta:hover .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__button:hover {
background-color: #d42030 !important;
}
/* ==========================================================================
CONFIGURAÇÃO RESPONSIVA ADAPTATIVA (TABLET & MOBILE)
========================================================================== */
@media (max-width: 1024px) {
/* Exibição fixa estabilizada em telas touch para evitar engasgos em celulares */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__title {
transform: translateY(0) !important;
}
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* 1. CORREÇÃO DE OVERLAY MOBILE EXTRA FORTE (Garante contraste em image_6e3edd.png) */
/* Substitui o gradiente leve por um bloco denso focado em destacar fontes brancas */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13, 34, 68, 0.45) 0%, rgba(13, 34, 68, 0.75) 45%, rgba(5, 11, 20, 0.96) 100%) !important;
}
/* 2. CORREÇÃO DA SETA DO BOTÃO NO MOBILE */
/* Diminui sutilmente a tipografia e o espaçamento para manter a seta (→) na mesma linha */
.elementor-10 .elementor-element.elementor-element-5e39e19 .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) !important;
width: 100% !important;
text-align: center !important;
font-size: 10.5px !important; /* Redução cirúrgica preventiva */
letter-spacing: 0.8px !important; /* Compactação para evitar o quebra de linha da seta */
padding: 12px 16px !important; /* Reduz padding lateral para dar margem interna ao texto */
white-space: nowrap !important; /* Força o botão inteiro a permanecer em uma linha única */
}
}/* End custom CSS */
/* Start custom CSS for call-to-action, class: .elementor-element-b31fee3 *//* ==========================================================================
WIDGET CALL TO ACTION - PERFORMANCE EXTREMA E FLUIDEZ (GPU ACCELERATED)
========================================================================== */
/* --- 1. CONFIGURAÇÕES DA CAMADA PAI E OVERLAY --- */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta {
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
background-color: #0d2244 !important; /* Cor marinho base da logo */
}
/* Zoom ultra fluido na imagem de fundo utilizando aceleração de hardware */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__bg {
transform: scale(1) translateZ(0);
will-change: transform;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta:hover .elementor-cta__bg {
transform: scale(1.06) translateZ(0) !important;
}
/* Transição de cores linear e contínua do Overlay (Desktop) */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13,34,68,0.15) 0%, rgba(13,34,68,0.55) 50%, rgba(13,34,68,0.92) 100%) !important;
will-change: background;
transition: background 0.5s ease-in-out !important;
opacity: 1 !important;
}
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta:hover .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(176,28,36,0.2) 0%, rgba(13,34,68,0.6) 40%, rgba(13,34,68,0.96) 100%) !important;
}
/* Barra técnica inferior vermelha expandindo de forma suave */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 0;
background-color: #b01c24 !important;
will-change: width;
transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: 3;
}
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta:hover .elementor-cta__content::after {
width: 100%;
}
/* --- 2. CONFIGURAÇÃO DE TEXTOS E ELEMENTOS INTERNOS --- */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__content {
padding: 32px !important;
justify-content: flex-end !important; /* Mantém tudo ancorado na base */
z-index: 2 !important;
}
/* Título Montserrat - Ajustado com leve elevação para abrir espaço para o texto */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 24px !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
line-height: 1.1 !important;
margin-bottom: 0 !important;
transform: translateY(45px) translateZ(0) !important; /* Empurra o título para o centro inicialmente */
will-change: transform;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Quando o mouse entra, o título sobe de forma ultra fluida para a sua posição original */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta:hover .elementor-cta__title {
transform: translateY(0) translateZ(0) !important;
}
/* --- 3. ENGENHARIA DE REVELAÇÃO OTIMIZADA: DESCRIÇÃO --- */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__description {
font-family: 'Poppins', sans-serif !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.75) !important;
margin: 12px 0 0 0 !important; /* Margem estática fixa para evitar quebras de caixa */
padding: 0 !important;
/* Substituição do max-height pelo fluxo de transform + opacity puro (GPU) */
opacity: 0 !important;
transform: translateY(20px) translateZ(0) !important; /* Começa rebaixado e invisível */
will-change: opacity, transform;
transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Revelação instantânea da descrição sem causar travamentos */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta:hover .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
/* --- 4. ENGENHARIA DE REVELAÇÃO OTIMIZADA: BOTÃO CTA --- */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__button {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11.5px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background-color: #b01c24 !important;
padding: 12px 24px !important;
border-radius: 2px !important;
border: none !important;
width: fit-content !important;
margin-top: 16px !important; /* Margem fixa e estável */
/* Escondido com deslocamento e transição com delay cirúrgico */
opacity: 0 !important;
transform: translateY(15px) translateZ(0) !important;
will-change: opacity, transform;
transition: opacity 0.35s 0.08s ease, transform 0.45s 0.08s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease !important;
}
/* Botão surge logo atrás da descrição com fluidez contínua */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta:hover .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__button:hover {
background-color: #d42030 !important;
}
/* ==========================================================================
CONFIGURAÇÃO RESPONSIVA ADAPTATIVA (TABLET & MOBILE)
========================================================================== */
@media (max-width: 1024px) {
/* Exibição fixa estabilizada em telas touch para evitar engasgos em celulares */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__title {
transform: translateY(0) !important;
}
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* 1. CORREÇÃO DE OVERLAY MOBILE EXTRA FORTE (Garante contraste em image_6e3edd.png) */
/* Substitui o gradiente leve por um bloco denso focado em destacar fontes brancas */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13, 34, 68, 0.45) 0%, rgba(13, 34, 68, 0.75) 45%, rgba(5, 11, 20, 0.96) 100%) !important;
}
/* 2. CORREÇÃO DA SETA DO BOTÃO NO MOBILE */
/* Diminui sutilmente a tipografia e o espaçamento para manter a seta (→) na mesma linha */
.elementor-10 .elementor-element.elementor-element-b31fee3 .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) !important;
width: 100% !important;
text-align: center !important;
font-size: 10.5px !important; /* Redução cirúrgica preventiva */
letter-spacing: 0.8px !important; /* Compactação para evitar o quebra de linha da seta */
padding: 12px 16px !important; /* Reduz padding lateral para dar margem interna ao texto */
white-space: nowrap !important; /* Força o botão inteiro a permanecer em uma linha única */
}
}/* End custom CSS */
/* Start custom CSS for call-to-action, class: .elementor-element-e0ad7ba *//* ==========================================================================
WIDGET CALL TO ACTION - PERFORMANCE EXTREMA E FLUIDEZ (GPU ACCELERATED)
========================================================================== */
/* --- 1. CONFIGURAÇÕES DA CAMADA PAI E OVERLAY --- */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta {
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
background-color: #0d2244 !important; /* Cor marinho base da logo */
}
/* Zoom ultra fluido na imagem de fundo utilizando aceleração de hardware */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__bg {
transform: scale(1) translateZ(0);
will-change: transform;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta:hover .elementor-cta__bg {
transform: scale(1.06) translateZ(0) !important;
}
/* Transição de cores linear e contínua do Overlay (Desktop) */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13,34,68,0.15) 0%, rgba(13,34,68,0.55) 50%, rgba(13,34,68,0.92) 100%) !important;
will-change: background;
transition: background 0.5s ease-in-out !important;
opacity: 1 !important;
}
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta:hover .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(176,28,36,0.2) 0%, rgba(13,34,68,0.6) 40%, rgba(13,34,68,0.96) 100%) !important;
}
/* Barra técnica inferior vermelha expandindo de forma suave */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 0;
background-color: #b01c24 !important;
will-change: width;
transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: 3;
}
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta:hover .elementor-cta__content::after {
width: 100%;
}
/* --- 2. CONFIGURAÇÃO DE TEXTOS E ELEMENTOS INTERNOS --- */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__content {
padding: 32px !important;
justify-content: flex-end !important; /* Mantém tudo ancorado na base */
z-index: 2 !important;
}
/* Título Montserrat - Ajustado com leve elevação para abrir espaço para o texto */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 24px !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
line-height: 1.1 !important;
margin-bottom: 0 !important;
transform: translateY(45px) translateZ(0) !important; /* Empurra o título para o centro inicialmente */
will-change: transform;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Quando o mouse entra, o título sobe de forma ultra fluida para a sua posição original */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta:hover .elementor-cta__title {
transform: translateY(0) translateZ(0) !important;
}
/* --- 3. ENGENHARIA DE REVELAÇÃO OTIMIZADA: DESCRIÇÃO --- */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__description {
font-family: 'Poppins', sans-serif !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.75) !important;
margin: 12px 0 0 0 !important; /* Margem estática fixa para evitar quebras de caixa */
padding: 0 !important;
/* Substituição do max-height pelo fluxo de transform + opacity puro (GPU) */
opacity: 0 !important;
transform: translateY(20px) translateZ(0) !important; /* Começa rebaixado e invisível */
will-change: opacity, transform;
transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Revelação instantânea da descrição sem causar travamentos */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta:hover .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
/* --- 4. ENGENHARIA DE REVELAÇÃO OTIMIZADA: BOTÃO CTA --- */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__button {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11.5px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background-color: #b01c24 !important;
padding: 12px 24px !important;
border-radius: 2px !important;
border: none !important;
width: fit-content !important;
margin-top: 16px !important; /* Margem fixa e estável */
/* Escondido com deslocamento e transição com delay cirúrgico */
opacity: 0 !important;
transform: translateY(15px) translateZ(0) !important;
will-change: opacity, transform;
transition: opacity 0.35s 0.08s ease, transform 0.45s 0.08s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease !important;
}
/* Botão surge logo atrás da descrição com fluidez contínua */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta:hover .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__button:hover {
background-color: #d42030 !important;
}
/* ==========================================================================
CONFIGURAÇÃO RESPONSIVA ADAPTATIVA (TABLET & MOBILE)
========================================================================== */
@media (max-width: 1024px) {
/* Exibição fixa estabilizada em telas touch para evitar engasgos em celulares */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__title {
transform: translateY(0) !important;
}
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* 1. CORREÇÃO DE OVERLAY MOBILE EXTRA FORTE (Garante contraste em image_6e3edd.png) */
/* Substitui o gradiente leve por um bloco denso focado em destacar fontes brancas */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13, 34, 68, 0.45) 0%, rgba(13, 34, 68, 0.75) 45%, rgba(5, 11, 20, 0.96) 100%) !important;
}
/* 2. CORREÇÃO DA SETA DO BOTÃO NO MOBILE */
/* Diminui sutilmente a tipografia e o espaçamento para manter a seta (→) na mesma linha */
.elementor-10 .elementor-element.elementor-element-e0ad7ba .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) !important;
width: 100% !important;
text-align: center !important;
font-size: 10.5px !important; /* Redução cirúrgica preventiva */
letter-spacing: 0.8px !important; /* Compactação para evitar o quebra de linha da seta */
padding: 12px 16px !important; /* Reduz padding lateral para dar margem interna ao texto */
white-space: nowrap !important; /* Força o botão inteiro a permanecer em uma linha única */
}
}/* End custom CSS */
/* Start custom CSS for call-to-action, class: .elementor-element-0a1b413 *//* ==========================================================================
WIDGET CALL TO ACTION - PERFORMANCE EXTREMA E FLUIDEZ (GPU ACCELERATED)
========================================================================== */
/* --- 1. CONFIGURAÇÕES DA CAMADA PAI E OVERLAY --- */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta {
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
background-color: #0d2244 !important; /* Cor marinho base da logo */
}
/* Zoom ultra fluido na imagem de fundo utilizando aceleração de hardware */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__bg {
transform: scale(1) translateZ(0);
will-change: transform;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta:hover .elementor-cta__bg {
transform: scale(1.06) translateZ(0) !important;
}
/* Transição de cores linear e contínua do Overlay (Desktop) */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13,34,68,0.15) 0%, rgba(13,34,68,0.55) 50%, rgba(13,34,68,0.92) 100%) !important;
will-change: background;
transition: background 0.5s ease-in-out !important;
opacity: 1 !important;
}
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta:hover .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(176,28,36,0.2) 0%, rgba(13,34,68,0.6) 40%, rgba(13,34,68,0.96) 100%) !important;
}
/* Barra técnica inferior vermelha expandindo de forma suave */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 0;
background-color: #b01c24 !important;
will-change: width;
transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: 3;
}
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta:hover .elementor-cta__content::after {
width: 100%;
}
/* --- 2. CONFIGURAÇÃO DE TEXTOS E ELEMENTOS INTERNOS --- */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__content {
padding: 32px !important;
justify-content: flex-end !important; /* Mantém tudo ancorado na base */
z-index: 2 !important;
}
/* Título Montserrat - Ajustado com leve elevação para abrir espaço para o texto */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 24px !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
line-height: 1.1 !important;
margin-bottom: 0 !important;
transform: translateY(45px) translateZ(0) !important; /* Empurra o título para o centro inicialmente */
will-change: transform;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Quando o mouse entra, o título sobe de forma ultra fluida para a sua posição original */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta:hover .elementor-cta__title {
transform: translateY(0) translateZ(0) !important;
}
/* --- 3. ENGENHARIA DE REVELAÇÃO OTIMIZADA: DESCRIÇÃO --- */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__description {
font-family: 'Poppins', sans-serif !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.75) !important;
margin: 12px 0 0 0 !important; /* Margem estática fixa para evitar quebras de caixa */
padding: 0 !important;
/* Substituição do max-height pelo fluxo de transform + opacity puro (GPU) */
opacity: 0 !important;
transform: translateY(20px) translateZ(0) !important; /* Começa rebaixado e invisível */
will-change: opacity, transform;
transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Revelação instantânea da descrição sem causar travamentos */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta:hover .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
/* --- 4. ENGENHARIA DE REVELAÇÃO OTIMIZADA: BOTÃO CTA --- */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__button {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11.5px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background-color: #b01c24 !important;
padding: 12px 24px !important;
border-radius: 2px !important;
border: none !important;
width: fit-content !important;
margin-top: 16px !important; /* Margem fixa e estável */
/* Escondido com deslocamento e transição com delay cirúrgico */
opacity: 0 !important;
transform: translateY(15px) translateZ(0) !important;
will-change: opacity, transform;
transition: opacity 0.35s 0.08s ease, transform 0.45s 0.08s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease !important;
}
/* Botão surge logo atrás da descrição com fluidez contínua */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta:hover .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__button:hover {
background-color: #d42030 !important;
}
/* ==========================================================================
CONFIGURAÇÃO RESPONSIVA ADAPTATIVA (TABLET & MOBILE)
========================================================================== */
@media (max-width: 1024px) {
/* Exibição fixa estabilizada em telas touch para evitar engasgos em celulares */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__title {
transform: translateY(0) !important;
}
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* 1. CORREÇÃO DE OVERLAY MOBILE EXTRA FORTE (Garante contraste em image_6e3edd.png) */
/* Substitui o gradiente leve por um bloco denso focado em destacar fontes brancas */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13, 34, 68, 0.45) 0%, rgba(13, 34, 68, 0.75) 45%, rgba(5, 11, 20, 0.96) 100%) !important;
}
/* 2. CORREÇÃO DA SETA DO BOTÃO NO MOBILE */
/* Diminui sutilmente a tipografia e o espaçamento para manter a seta (→) na mesma linha */
.elementor-10 .elementor-element.elementor-element-0a1b413 .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) !important;
width: 100% !important;
text-align: center !important;
font-size: 10.5px !important; /* Redução cirúrgica preventiva */
letter-spacing: 0.8px !important; /* Compactação para evitar o quebra de linha da seta */
padding: 12px 16px !important; /* Reduz padding lateral para dar margem interna ao texto */
white-space: nowrap !important; /* Força o botão inteiro a permanecer em uma linha única */
}
}/* End custom CSS */
/* Start custom CSS for call-to-action, class: .elementor-element-7b4947a *//* ==========================================================================
WIDGET CALL TO ACTION - PERFORMANCE EXTREMA E FLUIDEZ (GPU ACCELERATED)
========================================================================== */
/* --- 1. CONFIGURAÇÕES DA CAMADA PAI E OVERLAY --- */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta {
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
background-color: #0d2244 !important; /* Cor marinho base da logo */
}
/* Zoom ultra fluido na imagem de fundo utilizando aceleração de hardware */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__bg {
transform: scale(1) translateZ(0);
will-change: transform;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta:hover .elementor-cta__bg {
transform: scale(1.06) translateZ(0) !important;
}
/* Transição de cores linear e contínua do Overlay (Desktop) */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13,34,68,0.15) 0%, rgba(13,34,68,0.55) 50%, rgba(13,34,68,0.92) 100%) !important;
will-change: background;
transition: background 0.5s ease-in-out !important;
opacity: 1 !important;
}
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta:hover .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(176,28,36,0.2) 0%, rgba(13,34,68,0.6) 40%, rgba(13,34,68,0.96) 100%) !important;
}
/* Barra técnica inferior vermelha expandindo de forma suave */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 0;
background-color: #b01c24 !important;
will-change: width;
transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: 3;
}
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta:hover .elementor-cta__content::after {
width: 100%;
}
/* --- 2. CONFIGURAÇÃO DE TEXTOS E ELEMENTOS INTERNOS --- */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__content {
padding: 32px !important;
justify-content: flex-end !important; /* Mantém tudo ancorado na base */
z-index: 2 !important;
}
/* Título Montserrat - Ajustado com leve elevação para abrir espaço para o texto */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 24px !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
line-height: 1.1 !important;
margin-bottom: 0 !important;
transform: translateY(45px) translateZ(0) !important; /* Empurra o título para o centro inicialmente */
will-change: transform;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Quando o mouse entra, o título sobe de forma ultra fluida para a sua posição original */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta:hover .elementor-cta__title {
transform: translateY(0) translateZ(0) !important;
}
/* --- 3. ENGENHARIA DE REVELAÇÃO OTIMIZADA: DESCRIÇÃO --- */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__description {
font-family: 'Poppins', sans-serif !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.75) !important;
margin: 12px 0 0 0 !important; /* Margem estática fixa para evitar quebras de caixa */
padding: 0 !important;
/* Substituição do max-height pelo fluxo de transform + opacity puro (GPU) */
opacity: 0 !important;
transform: translateY(20px) translateZ(0) !important; /* Começa rebaixado e invisível */
will-change: opacity, transform;
transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Revelação instantânea da descrição sem causar travamentos */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta:hover .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
/* --- 4. ENGENHARIA DE REVELAÇÃO OTIMIZADA: BOTÃO CTA --- */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__button {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11.5px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background-color: #b01c24 !important;
padding: 12px 24px !important;
border-radius: 2px !important;
border: none !important;
width: fit-content !important;
margin-top: 16px !important; /* Margem fixa e estável */
/* Escondido com deslocamento e transição com delay cirúrgico */
opacity: 0 !important;
transform: translateY(15px) translateZ(0) !important;
will-change: opacity, transform;
transition: opacity 0.35s 0.08s ease, transform 0.45s 0.08s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease !important;
}
/* Botão surge logo atrás da descrição com fluidez contínua */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta:hover .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__button:hover {
background-color: #d42030 !important;
}
/* ==========================================================================
CONFIGURAÇÃO RESPONSIVA ADAPTATIVA (TABLET & MOBILE)
========================================================================== */
@media (max-width: 1024px) {
/* Exibição fixa estabilizada em telas touch para evitar engasgos em celulares */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__title {
transform: translateY(0) !important;
}
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* 1. CORREÇÃO DE OVERLAY MOBILE EXTRA FORTE (Garante contraste em image_6e3edd.png) */
/* Substitui o gradiente leve por um bloco denso focado em destacar fontes brancas */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13, 34, 68, 0.45) 0%, rgba(13, 34, 68, 0.75) 45%, rgba(5, 11, 20, 0.96) 100%) !important;
}
/* 2. CORREÇÃO DA SETA DO BOTÃO NO MOBILE */
/* Diminui sutilmente a tipografia e o espaçamento para manter a seta (→) na mesma linha */
.elementor-10 .elementor-element.elementor-element-7b4947a .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) !important;
width: 100% !important;
text-align: center !important;
font-size: 10.5px !important; /* Redução cirúrgica preventiva */
letter-spacing: 0.8px !important; /* Compactação para evitar o quebra de linha da seta */
padding: 12px 16px !important; /* Reduz padding lateral para dar margem interna ao texto */
white-space: nowrap !important; /* Força o botão inteiro a permanecer em uma linha única */
}
}/* End custom CSS */
/* Start custom CSS for call-to-action, class: .elementor-element-e6ddcba *//* ==========================================================================
WIDGET CALL TO ACTION - PERFORMANCE EXTREMA E FLUIDEZ (GPU ACCELERATED)
========================================================================== */
/* --- 1. CONFIGURAÇÕES DA CAMADA PAI E OVERLAY --- */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta {
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
background-color: #0d2244 !important; /* Cor marinho base da logo */
}
/* Zoom ultra fluido na imagem de fundo utilizando aceleração de hardware */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__bg {
transform: scale(1) translateZ(0);
will-change: transform;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta:hover .elementor-cta__bg {
transform: scale(1.06) translateZ(0) !important;
}
/* Transição de cores linear e contínua do Overlay (Desktop) */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13,34,68,0.15) 0%, rgba(13,34,68,0.55) 50%, rgba(13,34,68,0.92) 100%) !important;
will-change: background;
transition: background 0.5s ease-in-out !important;
opacity: 1 !important;
}
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta:hover .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(176,28,36,0.2) 0%, rgba(13,34,68,0.6) 40%, rgba(13,34,68,0.96) 100%) !important;
}
/* Barra técnica inferior vermelha expandindo de forma suave */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 0;
background-color: #b01c24 !important;
will-change: width;
transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: 3;
}
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta:hover .elementor-cta__content::after {
width: 100%;
}
/* --- 2. CONFIGURAÇÃO DE TEXTOS E ELEMENTOS INTERNOS --- */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__content {
padding: 32px !important;
justify-content: flex-end !important; /* Mantém tudo ancorado na base */
z-index: 2 !important;
}
/* Título Montserrat - Ajustado com leve elevação para abrir espaço para o texto */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 24px !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
line-height: 1.1 !important;
margin-bottom: 0 !important;
transform: translateY(45px) translateZ(0) !important; /* Empurra o título para o centro inicialmente */
will-change: transform;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Quando o mouse entra, o título sobe de forma ultra fluida para a sua posição original */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta:hover .elementor-cta__title {
transform: translateY(0) translateZ(0) !important;
}
/* --- 3. ENGENHARIA DE REVELAÇÃO OTIMIZADA: DESCRIÇÃO --- */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__description {
font-family: 'Poppins', sans-serif !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.75) !important;
margin: 12px 0 0 0 !important; /* Margem estática fixa para evitar quebras de caixa */
padding: 0 !important;
/* Substituição do max-height pelo fluxo de transform + opacity puro (GPU) */
opacity: 0 !important;
transform: translateY(20px) translateZ(0) !important; /* Começa rebaixado e invisível */
will-change: opacity, transform;
transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Revelação instantânea da descrição sem causar travamentos */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta:hover .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
/* --- 4. ENGENHARIA DE REVELAÇÃO OTIMIZADA: BOTÃO CTA --- */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__button {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11.5px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background-color: #b01c24 !important;
padding: 12px 24px !important;
border-radius: 2px !important;
border: none !important;
width: fit-content !important;
margin-top: 16px !important; /* Margem fixa e estável */
/* Escondido com deslocamento e transição com delay cirúrgico */
opacity: 0 !important;
transform: translateY(15px) translateZ(0) !important;
will-change: opacity, transform;
transition: opacity 0.35s 0.08s ease, transform 0.45s 0.08s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease !important;
}
/* Botão surge logo atrás da descrição com fluidez contínua */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta:hover .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__button:hover {
background-color: #d42030 !important;
}
/* ==========================================================================
CONFIGURAÇÃO RESPONSIVA ADAPTATIVA (TABLET & MOBILE)
========================================================================== */
@media (max-width: 1024px) {
/* Exibição fixa estabilizada em telas touch para evitar engasgos em celulares */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__title {
transform: translateY(0) !important;
}
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* 1. CORREÇÃO DE OVERLAY MOBILE EXTRA FORTE (Garante contraste em image_6e3edd.png) */
/* Substitui o gradiente leve por um bloco denso focado em destacar fontes brancas */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13, 34, 68, 0.45) 0%, rgba(13, 34, 68, 0.75) 45%, rgba(5, 11, 20, 0.96) 100%) !important;
}
/* 2. CORREÇÃO DA SETA DO BOTÃO NO MOBILE */
/* Diminui sutilmente a tipografia e o espaçamento para manter a seta (→) na mesma linha */
.elementor-10 .elementor-element.elementor-element-e6ddcba .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) !important;
width: 100% !important;
text-align: center !important;
font-size: 10.5px !important; /* Redução cirúrgica preventiva */
letter-spacing: 0.8px !important; /* Compactação para evitar o quebra de linha da seta */
padding: 12px 16px !important; /* Reduz padding lateral para dar margem interna ao texto */
white-space: nowrap !important; /* Força o botão inteiro a permanecer em uma linha única */
}
}/* End custom CSS */
/* Start custom CSS for call-to-action, class: .elementor-element-012db2a *//* ==========================================================================
WIDGET CALL TO ACTION - PERFORMANCE EXTREMA E FLUIDEZ (GPU ACCELERATED)
========================================================================== */
/* --- 1. CONFIGURAÇÕES DA CAMADA PAI E OVERLAY --- */
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta {
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
background-color: #0d2244 !important; /* Cor marinho base da logo */
}
/* Zoom ultra fluido na imagem de fundo utilizando aceleração de hardware */
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta__bg {
transform: scale(1) translateZ(0);
will-change: transform;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta:hover .elementor-cta__bg {
transform: scale(1.06) translateZ(0) !important;
}
/* Transição de cores linear e contínua do Overlay */
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(13,34,68,0.15) 0%, rgba(13,34,68,0.55) 50%, rgba(13,34,68,0.92) 100%) !important;
will-change: background;
transition: background 0.5s ease-in-out !important;
opacity: 1 !important;
}
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta:hover .elementor-cta__bg-overlay {
background: linear-gradient(180deg, rgba(176,28,36,0.2) 0%, rgba(13,34,68,0.6) 40%, rgba(13,34,68,0.96) 100%) !important;
}
/* Barra técnica inferior vermelha expandindo de forma suave */
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta__content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 0;
background-color: #b01c24 !important;
will-change: width;
transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: 3;
}
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta:hover .elementor-cta__content::after {
width: 100%;
}
/* --- 2. CONFIGURAÇÃO DE TEXTOS E ELEMENTOS INTERNOS --- */
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta__content {
padding: 32px !important;
justify-content: flex-end !important; /* Mantém tudo ancorado na base */
z-index: 2 !important;
}
/* Título Montserrat - Ajustado com leve elevação para abrir espaço para o texto */
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta__title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 24px !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
line-height: 1.1 !important;
margin-bottom: 0 !important;
transform: translateY(45px) translateZ(0) !important; /* Empurra o título para o centro inicialmente */
will-change: transform;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Quando o mouse entra, o título sobe de forma ultra fluida para a sua posição original */
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta:hover .elementor-cta__title {
transform: translateY(0) translateZ(0) !important;
}
/* --- 3. ENGENHARIA DE REVELAÇÃO OTIMIZADA: DESCRIÇÃO --- */
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta__description {
font-family: 'Poppins', sans-serif !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.75) !important;
margin: 12px 0 0 0 !important; /* Margem estática fixa para evitar quebras de caixa */
padding: 0 !important;
/* Substituição do max-height pelo fluxo de transform + opacity puro (GPU) */
opacity: 0 !important;
transform: translateY(20px) translateZ(0) !important; /* Começa rebaixado e invisível */
will-change: opacity, transform;
transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Revelação instantânea da descrição sem causar travamentos */
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta:hover .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
/* --- 4. ENGENHARIA DE REVELAÇÃO OTIMIZADA: BOTÃO CTA --- */
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta__button {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11.5px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background-color: #b01c24 !important;
padding: 12px 24px !important;
border-radius: 2px !important;
border: none !important;
width: fit-content !important;
margin-top: 16px !important; /* Margem fixa e estável */
/* Escondido com deslocamento e transição com delay cirúrgico */
opacity: 0 !important;
transform: translateY(15px) translateZ(0) !important;
will-change: opacity, transform;
transition: opacity 0.35s 0.08s ease, transform 0.45s 0.08s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease !important;
}
/* Botão surge logo atrás da descrição com fluidez contínua */
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta:hover .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) translateZ(0) !important;
}
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta__button:hover {
background-color: #d42030 !important;
}
/* ==========================================================================
CONFIGURAÇÃO RESPONSIVA ADAPTATIVA (TABLET & MOBILE)
========================================================================== */
@media (max-width: 1024px) {
/* Exibição fixa estabilizada em telas touch para evitar engasgos em celulares */
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta__title {
transform: translateY(0) !important;
}
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta__description {
opacity: 1 !important;
transform: translateY(0) !important;
}
.elementor-10 .elementor-element.elementor-element-012db2a .elementor-cta__button {
opacity: 1 !important;
transform: translateY(0) !important;
width: 100% !important;
text-align: center !important;
}
}/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-625bfd0 *//* ==========================================================================
CSS CUSTOMIZADO: EYEBROW / BADGE DE SERVIÇOS PREMIUM (CASA PADRÃO)
========================================================================== */
/* Remove margens internas nativas do Elementor e garante o alinhamento */
.elementor-10 .elementor-element.elementor-element-625bfd0 .elementor-icon-list-items {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}
/* Estilização do Item da Lista */
.elementor-10 .elementor-element.elementor-element-625bfd0 .elementor-icon-list-item {
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #B01C24 !important; /* O Vermelho institucional extraído da sua logo */
letter-spacing: 2px !important;
text-transform: uppercase !important; /* Força caixa alta para estética premium */
display: inline-flex !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}
/* --- DETALHE DA LINHA TÉCNICA À ESQUERDA (ESTILO HTML NATIVO) --- */
.elementor-10 .elementor-element.elementor-element-625bfd0 .elementor-icon-list-item::before {
content: '';
display: inline-block;
width: 32px; /* Comprimento da linha rígida */
height: 3px; /* Espessura da linha */
background-color: #B01C24 !important; /* Vermelho assinatura */
margin-right: 12px; /* Afastamento entre a linha e o texto/ícone */
border-radius: 1px;
vertical-align: middle;
}
/* Ajuste e otimização para o ícone (caso decida usar um ícone junto ao texto) */
.elementor-10 .elementor-element.elementor-element-625bfd0 .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
margin-right: 8px !important;
padding: 0 !important;
}
.elementor-10 .elementor-element.elementor-element-625bfd0 .elementor-icon-list-icon svg {
width: 14px !important;
height: 14px !important;
fill: #B01C24 !important; /* Força o ícone a seguir o vermelho da logo */
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
/* Centraliza o Eyebrow no Mobile caso o seu container pai seja centralizado */
.elementor-10 .elementor-element.elementor-element-625bfd0 {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
.elementor-10 .elementor-element.elementor-element-625bfd0 .elementor-icon-list-items {
justify-content: center !important;
}
.elementor-10 .elementor-element.elementor-element-625bfd0 .elementor-icon-list-item {
font-size: 11px !important; /* Reduz levemente a escala tipográfica no celular */
letter-spacing: 1.5px !important;
}
.elementor-10 .elementor-element.elementor-element-625bfd0 .elementor-icon-list-item::before {
width: 24px; /* Encolhe a linha decorativa para telas menores */
margin-right: 8px;
}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-4f79e62 *//* Custom CSS no Widget Título H2 */
.elementor-10 .elementor-element.elementor-element-4f79e62 .elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: clamp(32px, 4vw, 48px) !important;
line-height: 1.1 !important;
color: #0D2244 !important;
letter-spacing: -0.5px !important;
}
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-4f79e62 .elementor-heading-title { font-size: 28px !important; }
}/* End custom CSS */
/* Start custom CSS for nested-carousel, class: .elementor-element-48b0f1a *//* ==========================================================================
WIDGET CAROUSEL & VIDEO - DESIGN CORRIGIDO E DOTS PARA FORA
========================================================================== */
.elementor-10 .elementor-element.elementor-element-48b0f1a {
position: relative;
}
/* --- 1. COMPORTAMENTO EXCLUSIVO DESKTOP --- */
@media (min-width: 1025px) {
.elementor-10 .elementor-element.elementor-element-48b0f1a,
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-widget-container,
.elementor-10 .elementor-element.elementor-element-48b0f1a .swiper-container,
.elementor-10 .elementor-element.elementor-element-48b0f1a .swiper-wrapper,
.elementor-10 .elementor-element.elementor-element-48b0f1a .swiper-slide {
height: 100% !important; /* Mantém o alinhamento com a galeria */
}
}
/* --- 2. BLINDAGEM E ESTILIZAÇÃO DAS SETAS --- */
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-swiper-button {
background-color: rgba(13, 34, 68, 0.85) !important;
color: #ffffff !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 100 !important;
top: 50% !important;
transform: translateY(-50%) !important;
transition: background-color 0.3s ease, transform 0.3s ease !important;
}
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-swiper-button-prev { left: 15px !important; }
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-swiper-button-next { right: 15px !important; }
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-swiper-button svg,
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-swiper-button i {
width: 16px !important;
height: 16px !important;
fill: currentColor !important;
}
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-swiper-button:hover {
background-color: #b01c24 !important;
transform: translateY(-50%) scale(1.08) !important;
}
/* --- 3. CONTROLE REAL DOS DOTS (PAGINAÇÃO POR FORA) --- */
.elementor-10 .elementor-element.elementor-element-48b0f1a .swiper-pagination {
bottom: 0px !important; /* Alinha na base do respiro que criamos abaixo */
position: absolute !important;
z-index: 10 !important;
}
.elementor-10 .elementor-element.elementor-element-48b0f1a .swiper-pagination-bullet-active {
background: #b01c24 !important;
}
/* --- 4. PLAYER DE VÍDEO INTERNO --- */
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-video,
.elementor-10 .elementor-element.elementor-element-48b0f1a iframe {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 2px !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA TRAVADA (TABLET)
========================================================================== */
@media (max-width: 1024px) {
/* Define a área visível do Widget */
.elementor-10 .elementor-element.elementor-element-48b0f1a {
height: 435px !important; /* Altura do vídeo (400px) + espaço dos dots (35px) */
margin-bottom: 40px !important; /* Separação segura da galeria de baixo */
}
/* O vídeo ocupa apenas os 400px, deixando os 35px de sobra para os dots */
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-widget-container,
.elementor-10 .elementor-element.elementor-element-48b0f1a .swiper-container,
.elementor-10 .elementor-element.elementor-element-48b0f1a .swiper-wrapper,
.elementor-10 .elementor-element.elementor-element-48b0f1a .swiper-slide {
height: 400px !important;
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA TRAVADA (MOBILE)
========================================================================== */
@media (max-width: 767px) {
/* Define a área visível do Widget no celular */
.elementor-10 .elementor-element.elementor-element-48b0f1a {
height: 315px !important; /* Altura do vídeo (280px) + espaço dos dots (35px) */
margin-bottom: 35px !important;
}
/* O vídeo ocupa apenas os 280px */
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-widget-container,
.elementor-10 .elementor-element.elementor-element-48b0f1a .swiper-container,
.elementor-10 .elementor-element.elementor-element-48b0f1a .swiper-wrapper,
.elementor-10 .elementor-element.elementor-element-48b0f1a .swiper-slide {
height: 280px !important;
}
/* Ajuste fino das setas para telas menores */
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-swiper-button {
width: 34px !important;
height: 34px !important;
}
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-swiper-button-prev { left: 8px !important; }
.elementor-10 .elementor-element.elementor-element-48b0f1a .elementor-swiper-button-next { right: 8px !important; }
}/* End custom CSS */
/* Start custom CSS for gallery, class: .elementor-element-395a6ca *//* ==========================================================================
WIDGET GALERIA - MOSAICO COMPACTO PREMIUM
========================================================================== */
.elementor-10 .elementor-element.elementor-element-395a6ca {
height: 100% !important; /* Força a galeria a preencher a altura da coluna */
display: flex;
flex-direction: column;
}
.elementor-10 .elementor-element.elementor-element-395a6ca .elementor-gallery {
height: 100% !important;
}
.elementor-10 .elementor-element.elementor-element-395a6ca .elementor-gallery__container {
gap: 8px !important; /* Espaçamento fino e elegante entre as fotos */
}
/* Base do Card da Imagem */
.elementor-10 .elementor-element.elementor-element-395a6ca .elementor-gallery-item {
overflow: hidden !important;
position: relative !important;
background-color: #0d2244 !important;
border-radius: 2px !important;
}
/* Transição Fluida e Zoom Físico (Evitando Scale) */
.elementor-10 .elementor-element.elementor-element-395a6ca .elementor-gallery-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
margin-left: 0% !important;
margin-top: 0% !important;
will-change: width, height, margin-left, margin-top;
transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
height 0.6s cubic-bezier(0.25, 1, 0.5, 1),
margin-left 0.6s cubic-bezier(0.25, 1, 0.5, 1),
margin-top 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.elementor-10 .elementor-element.elementor-element-395a6ca .elementor-gallery-item:hover img {
width: 106% !important;
height: 106% !important;
margin-left: -3% !important;
margin-top: -3% !important;
}
/* Overlay sutil para as fotos ficarem mais corporativas */
.elementor-10 .elementor-element.elementor-element-395a6ca .elementor-gallery-item__overlay {
background-color: rgba(13, 34, 68, 0.3) !important;
transition: background-color 0.4s ease !important;
}
.elementor-10 .elementor-element.elementor-element-395a6ca .elementor-gallery-item:hover .elementor-gallery-item__overlay {
background-color: rgba(13, 34, 68, 0.05) !important;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2858659 *//* ==========================================================================
WIDGET IMAGEM - ACABAMENTO DE ARQUITETURA PREMIUM (GPU ACCELERATED)
========================================================================== */
/* Configuração Base da Imagem */
.elementor-10 .elementor-element.elementor-element-2858659 .elementor-image img,
.elementor-10 .elementor-element.elementor-element-2858659 img {
border-radius: 2px !important; /* Cantos retos, alinhados com linhas de projeto */
box-shadow: 0 8px 30px rgba(13, 34, 68, 0.04) !important; /* Sombra leve marinho */
/* Ativação de Aceleração de Hardware */
transform: translateY(0) scale(1) translateZ(0);
will-change: transform, box-shadow;
/* Curva Bezier idêntica às transições de interfaces Apple */
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Moldura Geométrica Fina Traseira (Detalhe de Desenho Técnico) */
.elementor-10 .elementor-element.elementor-element-2858659 .elementor-widget-container {
position: relative !important;
padding: 0 0 15px 15px !important; /* Abre espaço para a moldura sangrar */
}
.elementor-10 .elementor-element.elementor-element-2858659 .elementor-widget-container::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60%;
height: 60%;
border-left: 2px solid rgba(13, 34, 68, 0.08);
border-bottom: 2px solid rgba(13, 34, 68, 0.08);
z-index: -1;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.5s ease !important;
}
/* --- MICROINTERAÇÃO PREMIUM (HOVER) --- */
.elementor-10 .elementor-element.elementor-element-2858659:hover .elementor-image img,
.elementor-10 .elementor-element.elementor-element-2858659:hover img {
/* Elevação tátil milimétrica e extremamente macia */
transform: translateY(-6px) scale(1.01) translateZ(0) !important;
/* Sombra expande simulando distância real do plano de fundo */
box-shadow: 0 20px 40px rgba(13, 34, 68, 0.08) !important;
}
/* A moldura traseira se desloca levemente no sentido oposto para dar paralaxe */
.elementor-10 .elementor-element.elementor-element-2858659:hover .elementor-widget-container::before {
transform: translate(-4px, 4px);
border-color: rgba(176, 28, 36, 0.3); /* Vira um reflexo sutil do vermelho institucional */
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET & MOBILE)
========================================================================== */
@media (max-width: 1024px) {
/* Suaviza o recuo da moldura técnica em tablets */
.elementor-10 .elementor-element.elementor-element-2858659 .elementor-widget-container {
padding: 0 0 10px 10px !important;
}
}
@media (max-width: 768px) {
/* Desativa efeitos pesados e paralaxe em telas touch para poupar bateria e renderização móvel */
.elementor-10 .elementor-element.elementor-element-2858659:hover .elementor-image img,
.elementor-10 .elementor-element.elementor-element-2858659:hover img {
transform: none !important;
box-shadow: 0 8px 25px rgba(13, 34, 68, 0.05) !important;
}
.elementor-10 .elementor-element.elementor-element-2858659 .elementor-widget-container::before {
display: none !important; /* Remove a moldura no mobile para manter o carregamento limpo */
}
.elementor-10 .elementor-element.elementor-element-2858659 .elementor-widget-container {
padding: 0 !important;
}
}/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-221390b *//* ==========================================================================
CSS CUSTOMIZADO: EYEBROW / BADGE DE SERVIÇOS PREMIUM (CASA PADRÃO)
========================================================================== */
/* Remove margens internas nativas do Elementor e garante o alinhamento */
.elementor-10 .elementor-element.elementor-element-221390b .elementor-icon-list-items {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}
/* Estilização do Item da Lista */
.elementor-10 .elementor-element.elementor-element-221390b .elementor-icon-list-item {
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #B01C24 !important; /* O Vermelho institucional extraído da sua logo */
letter-spacing: 2px !important;
text-transform: uppercase !important; /* Força caixa alta para estética premium */
display: inline-flex !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}
/* --- DETALHE DA LINHA TÉCNICA À ESQUERDA (ESTILO HTML NATIVO) --- */
.elementor-10 .elementor-element.elementor-element-221390b .elementor-icon-list-item::before {
content: '';
display: inline-block;
width: 32px; /* Comprimento da linha rígida */
height: 3px; /* Espessura da linha */
background-color: #B01C24 !important; /* Vermelho assinatura */
margin-right: 12px; /* Afastamento entre a linha e o texto/ícone */
border-radius: 1px;
vertical-align: middle;
}
/* Ajuste e otimização para o ícone (caso decida usar um ícone junto ao texto) */
.elementor-10 .elementor-element.elementor-element-221390b .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
margin-right: 8px !important;
padding: 0 !important;
}
.elementor-10 .elementor-element.elementor-element-221390b .elementor-icon-list-icon svg {
width: 14px !important;
height: 14px !important;
fill: #B01C24 !important; /* Força o ícone a seguir o vermelho da logo */
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
/* Centraliza o Eyebrow no Mobile caso o seu container pai seja centralizado */
.elementor-10 .elementor-element.elementor-element-221390b {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
.elementor-10 .elementor-element.elementor-element-221390b .elementor-icon-list-items {
justify-content: center !important;
}
.elementor-10 .elementor-element.elementor-element-221390b .elementor-icon-list-item {
font-size: 11px !important; /* Reduz levemente a escala tipográfica no celular */
letter-spacing: 1.5px !important;
}
.elementor-10 .elementor-element.elementor-element-221390b .elementor-icon-list-item::before {
width: 24px; /* Encolhe a linha decorativa para telas menores */
margin-right: 8px;
}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-246f0bd *//* Custom CSS no Widget Título H2 */
.elementor-10 .elementor-element.elementor-element-246f0bd .elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: clamp(32px, 4vw, 48px) !important;
line-height: 1.1 !important;
color: #0D2244 !important;
letter-spacing: -0.5px !important;
}
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-246f0bd .elementor-heading-title { font-size: 28px !important; }
}/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-f207635 *//* ==========================================================================
WIDGET ICON BOX - PILARES CORPORATIVOS COM ACELERAÇÃO DE HARDWARE
========================================================================== */
/* 1. ESTADO NATURAL DO CARD (No topo do grid/layout) */
.elementor-10 .elementor-element.elementor-element-f207635 .elementor-icon-box-wrapper {
position: relative !important;
background-color: #ffffff !important; /* Fundo sólido branco limpo */
padding: 32px 32px 32px 40px !important; /* Respiro interno confortável */
border-radius: 0px !important; /* Geometria rígida alinhada à engenharia civil */
/* Configuração de transição otimizada para GPU */
transform: translateY(0) translateZ(0);
will-change: transform, box-shadow;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(13, 34, 68, 0.02) !important; /* Sombra base ultra sutil */
}
/* 2. BARRA TÉCNICA VERMELHA ESQUERDA (ASSINATURA VISUAL) */
.elementor-10 .elementor-element.elementor-element-f207635 .elementor-icon-box-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px; /* Espessura inicial sutil */
background-color: #b01c24 !important; /* Vermelho institucional estável */
will-change: width;
transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: 2;
}
/* --- MICROINTERAÇÕES PREMIUM (HOVER) --- */
.elementor-10 .elementor-element.elementor-element-f207635:hover .elementor-icon-box-wrapper {
transform: translateY(-4px) translateZ(0) !important; /* Elevação tátil limpa */
box-shadow: 0 12px 30px rgba(13, 34, 68, 0.06) !important; /* Sombra de sustentação elegante */
}
/* Expansão da barra vermelha ao passar o mouse, aumentando o foco na leitura */
.elementor-10 .elementor-element.elementor-element-f207635:hover .elementor-icon-box-wrapper::before {
width: 6px; /* Leve ganho de peso cirúrgico */
}
/* ==========================================================================
3. ESTILIZAÇÃO INTERNA DOS TEXTOS & ALINHAMENTO
========================================================================== */
/* Alinhamento do conteúdo à esquerda conforme referência */
.elementor-10 .elementor-element.elementor-element-f207635 .elementor-icon-box-content {
text-align: left !important;
}
/* Título do Pilar - Montserrat Bold */
.elementor-10 .elementor-element.elementor-element-f207635 .elementor-icon-box-title,
.elementor-10 .elementor-element.elementor-element-f207635 .elementor-icon-box-title a {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 20px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: #0d2244 !important; /* Azul Marinho Principal */
margin-bottom: 12px !important;
line-height: 1.2 !important;
}
/* Descrição do Pilar - Poppins Regular */
.elementor-10 .elementor-element.elementor-element-f207635 .elementor-icon-box-description {
font-family: 'Poppins', sans-serif !important;
font-size: 14.5px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #6e7e95 !important; /* Tom cinza azulado limpo de fácil leitura */
margin: 0 !important;
}
/* Ocultação inteligente do container de ícone nativo
(Caso você queira usar o widget puramente para os blocos de texto chapados da foto) */
.elementor-10 .elementor-element.elementor-element-f207635 .elementor-icon-box-icon {
display: none !important;
}
/* ==========================================================================
4. COMPORTAMENTO RESPONSIVO COMPLETO
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-f207635 .elementor-icon-box-wrapper {
padding: 24px 24px 24px 32px !important; /* Redução proporcional em telas touch */
}
.elementor-10 .elementor-element.elementor-element-f207635 .elementor-icon-box-title {
font-size: 18px !important; /* Otimização de escala tipográfica mobile */
}
.elementor-10 .elementor-element.elementor-element-f207635 .elementor-icon-box-description {
font-size: 13.5px !important;
}
}/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-d395c6e *//* ==========================================================================
WIDGET ICON BOX - PILARES CORPORATIVOS COM ACELERAÇÃO DE HARDWARE
========================================================================== */
/* 1. ESTADO NATURAL DO CARD (No topo do grid/layout) */
.elementor-10 .elementor-element.elementor-element-d395c6e .elementor-icon-box-wrapper {
position: relative !important;
background-color: #ffffff !important; /* Fundo sólido branco limpo */
padding: 32px 32px 32px 40px !important; /* Respiro interno confortável */
border-radius: 0px !important; /* Geometria rígida alinhada à engenharia civil */
/* Configuração de transição otimizada para GPU */
transform: translateY(0) translateZ(0);
will-change: transform, box-shadow;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(13, 34, 68, 0.02) !important; /* Sombra base ultra sutil */
}
/* 2. BARRA TÉCNICA VERMELHA ESQUERDA (ASSINATURA VISUAL) */
.elementor-10 .elementor-element.elementor-element-d395c6e .elementor-icon-box-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px; /* Espessura inicial sutil */
background-color: #b01c24 !important; /* Vermelho institucional estável */
will-change: width;
transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: 2;
}
/* --- MICROINTERAÇÕES PREMIUM (HOVER) --- */
.elementor-10 .elementor-element.elementor-element-d395c6e:hover .elementor-icon-box-wrapper {
transform: translateY(-4px) translateZ(0) !important; /* Elevação tátil limpa */
box-shadow: 0 12px 30px rgba(13, 34, 68, 0.06) !important; /* Sombra de sustentação elegante */
}
/* Expansão da barra vermelha ao passar o mouse, aumentando o foco na leitura */
.elementor-10 .elementor-element.elementor-element-d395c6e:hover .elementor-icon-box-wrapper::before {
width: 6px; /* Leve ganho de peso cirúrgico */
}
/* ==========================================================================
3. ESTILIZAÇÃO INTERNA DOS TEXTOS & ALINHAMENTO
========================================================================== */
/* Alinhamento do conteúdo à esquerda conforme referência */
.elementor-10 .elementor-element.elementor-element-d395c6e .elementor-icon-box-content {
text-align: left !important;
}
/* Título do Pilar - Montserrat Bold */
.elementor-10 .elementor-element.elementor-element-d395c6e .elementor-icon-box-title,
.elementor-10 .elementor-element.elementor-element-d395c6e .elementor-icon-box-title a {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 20px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: #0d2244 !important; /* Azul Marinho Principal */
margin-bottom: 12px !important;
line-height: 1.2 !important;
}
/* Descrição do Pilar - Poppins Regular */
.elementor-10 .elementor-element.elementor-element-d395c6e .elementor-icon-box-description {
font-family: 'Poppins', sans-serif !important;
font-size: 14.5px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #6e7e95 !important; /* Tom cinza azulado limpo de fácil leitura */
margin: 0 !important;
}
/* Ocultação inteligente do container de ícone nativo
(Caso você queira usar o widget puramente para os blocos de texto chapados da foto) */
.elementor-10 .elementor-element.elementor-element-d395c6e .elementor-icon-box-icon {
display: none !important;
}
/* ==========================================================================
4. COMPORTAMENTO RESPONSIVO COMPLETO
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-d395c6e .elementor-icon-box-wrapper {
padding: 24px 24px 24px 32px !important; /* Redução proporcional em telas touch */
}
.elementor-10 .elementor-element.elementor-element-d395c6e .elementor-icon-box-title {
font-size: 18px !important; /* Otimização de escala tipográfica mobile */
}
.elementor-10 .elementor-element.elementor-element-d395c6e .elementor-icon-box-description {
font-size: 13.5px !important;
}
}/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-485d5ba *//* ==========================================================================
WIDGET ICON BOX - PILARES CORPORATIVOS COM ACELERAÇÃO DE HARDWARE
========================================================================== */
/* 1. ESTADO NATURAL DO CARD (No topo do grid/layout) */
.elementor-10 .elementor-element.elementor-element-485d5ba .elementor-icon-box-wrapper {
position: relative !important;
background-color: #ffffff !important; /* Fundo sólido branco limpo */
padding: 32px 32px 32px 40px !important; /* Respiro interno confortável */
border-radius: 0px !important; /* Geometria rígida alinhada à engenharia civil */
/* Configuração de transição otimizada para GPU */
transform: translateY(0) translateZ(0);
will-change: transform, box-shadow;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(13, 34, 68, 0.02) !important; /* Sombra base ultra sutil */
}
/* 2. BARRA TÉCNICA VERMELHA ESQUERDA (ASSINATURA VISUAL) */
.elementor-10 .elementor-element.elementor-element-485d5ba .elementor-icon-box-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px; /* Espessura inicial sutil */
background-color: #b01c24 !important; /* Vermelho institucional estável */
will-change: width;
transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: 2;
}
/* --- MICROINTERAÇÕES PREMIUM (HOVER) --- */
.elementor-10 .elementor-element.elementor-element-485d5ba:hover .elementor-icon-box-wrapper {
transform: translateY(-4px) translateZ(0) !important; /* Elevação tátil limpa */
box-shadow: 0 12px 30px rgba(13, 34, 68, 0.06) !important; /* Sombra de sustentação elegante */
}
/* Expansão da barra vermelha ao passar o mouse, aumentando o foco na leitura */
.elementor-10 .elementor-element.elementor-element-485d5ba:hover .elementor-icon-box-wrapper::before {
width: 6px; /* Leve ganho de peso cirúrgico */
}
/* ==========================================================================
3. ESTILIZAÇÃO INTERNA DOS TEXTOS & ALINHAMENTO
========================================================================== */
/* Alinhamento do conteúdo à esquerda conforme referência */
.elementor-10 .elementor-element.elementor-element-485d5ba .elementor-icon-box-content {
text-align: left !important;
}
/* Título do Pilar - Montserrat Bold */
.elementor-10 .elementor-element.elementor-element-485d5ba .elementor-icon-box-title,
.elementor-10 .elementor-element.elementor-element-485d5ba .elementor-icon-box-title a {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 20px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: #0d2244 !important; /* Azul Marinho Principal */
margin-bottom: 12px !important;
line-height: 1.2 !important;
}
/* Descrição do Pilar - Poppins Regular */
.elementor-10 .elementor-element.elementor-element-485d5ba .elementor-icon-box-description {
font-family: 'Poppins', sans-serif !important;
font-size: 14.5px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #6e7e95 !important; /* Tom cinza azulado limpo de fácil leitura */
margin: 0 !important;
}
/* Ocultação inteligente do container de ícone nativo
(Caso você queira usar o widget puramente para os blocos de texto chapados da foto) */
.elementor-10 .elementor-element.elementor-element-485d5ba .elementor-icon-box-icon {
display: none !important;
}
/* ==========================================================================
4. COMPORTAMENTO RESPONSIVO COMPLETO
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-485d5ba .elementor-icon-box-wrapper {
padding: 24px 24px 24px 32px !important; /* Redução proporcional em telas touch */
}
.elementor-10 .elementor-element.elementor-element-485d5ba .elementor-icon-box-title {
font-size: 18px !important; /* Otimização de escala tipográfica mobile */
}
.elementor-10 .elementor-element.elementor-element-485d5ba .elementor-icon-box-description {
font-size: 13.5px !important;
}
}/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-556a25d *//* ==========================================================================
WIDGET ICON BOX - PILARES CORPORATIVOS COM ACELERAÇÃO DE HARDWARE
========================================================================== */
/* 1. ESTADO NATURAL DO CARD (No topo do grid/layout) */
.elementor-10 .elementor-element.elementor-element-556a25d .elementor-icon-box-wrapper {
position: relative !important;
background-color: #ffffff !important; /* Fundo sólido branco limpo */
padding: 32px 32px 32px 40px !important; /* Respiro interno confortável */
border-radius: 0px !important; /* Geometria rígida alinhada à engenharia civil */
/* Configuração de transição otimizada para GPU */
transform: translateY(0) translateZ(0);
will-change: transform, box-shadow;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(13, 34, 68, 0.02) !important; /* Sombra base ultra sutil */
}
/* 2. BARRA TÉCNICA VERMELHA ESQUERDA (ASSINATURA VISUAL) */
.elementor-10 .elementor-element.elementor-element-556a25d .elementor-icon-box-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px; /* Espessura inicial sutil */
background-color: #b01c24 !important; /* Vermelho institucional estável */
will-change: width;
transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
z-index: 2;
}
/* --- MICROINTERAÇÕES PREMIUM (HOVER) --- */
.elementor-10 .elementor-element.elementor-element-556a25d:hover .elementor-icon-box-wrapper {
transform: translateY(-4px) translateZ(0) !important; /* Elevação tátil limpa */
box-shadow: 0 12px 30px rgba(13, 34, 68, 0.06) !important; /* Sombra de sustentação elegante */
}
/* Expansão da barra vermelha ao passar o mouse, aumentando o foco na leitura */
.elementor-10 .elementor-element.elementor-element-556a25d:hover .elementor-icon-box-wrapper::before {
width: 6px; /* Leve ganho de peso cirúrgico */
}
/* ==========================================================================
3. ESTILIZAÇÃO INTERNA DOS TEXTOS & ALINHAMENTO
========================================================================== */
/* Alinhamento do conteúdo à esquerda conforme referência */
.elementor-10 .elementor-element.elementor-element-556a25d .elementor-icon-box-content {
text-align: left !important;
}
/* Título do Pilar - Montserrat Bold */
.elementor-10 .elementor-element.elementor-element-556a25d .elementor-icon-box-title,
.elementor-10 .elementor-element.elementor-element-556a25d .elementor-icon-box-title a {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 20px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: #0d2244 !important; /* Azul Marinho Principal */
margin-bottom: 12px !important;
line-height: 1.2 !important;
}
/* Descrição do Pilar - Poppins Regular */
.elementor-10 .elementor-element.elementor-element-556a25d .elementor-icon-box-description {
font-family: 'Poppins', sans-serif !important;
font-size: 14.5px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #6e7e95 !important; /* Tom cinza azulado limpo de fácil leitura */
margin: 0 !important;
}
/* Ocultação inteligente do container de ícone nativo
(Caso você queira usar o widget puramente para os blocos de texto chapados da foto) */
.elementor-10 .elementor-element.elementor-element-556a25d .elementor-icon-box-icon {
display: none !important;
}
/* ==========================================================================
4. COMPORTAMENTO RESPONSIVO COMPLETO
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-556a25d .elementor-icon-box-wrapper {
padding: 24px 24px 24px 32px !important; /* Redução proporcional em telas touch */
}
.elementor-10 .elementor-element.elementor-element-556a25d .elementor-icon-box-title {
font-size: 18px !important; /* Otimização de escala tipográfica mobile */
}
.elementor-10 .elementor-element.elementor-element-556a25d .elementor-icon-box-description {
font-size: 13.5px !important;
}
}/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-9f6e491 *//* ==========================================================================
CSS CUSTOMIZADO: EYEBROW EM MODO DARK (WIDGET LISTA DE ÍCONES)
========================================================================== */
/* Reseta e alinha a estrutura interna da lista do Elementor */
.elementor-10 .elementor-element.elementor-element-9f6e491 .elementor-icon-list-items {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}
/* Estilização do Item da Lista (Texto) */
.elementor-10 .elementor-element.elementor-element-9f6e491 .elementor-icon-list-item {
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #b01c24 !important; /* Vermelho institucional estável */
letter-spacing: 2px !important;
text-transform: uppercase !important; /* Caixa alta para visual corporativo */
display: inline-flex !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}
/* --- LINHA TÉCNICA DE PRECISÃO (ASSINATURA VISUAL) --- */
/* Renderizada diretamente via CSS para manter o carregamento ultra leve */
.elementor-10 .elementor-element.elementor-element-9f6e491 .elementor-icon-list-item::before {
content: '';
display: inline-block;
width: 28px; /* Comprimento do traço geométrico */
height: 2px; /* Espessura fina e elegante */
background-color: #b01c24 !important; /* Vermelho assinatura */
margin-right: 12px; /* Espaçamento entre o traço e o ícone/texto */
vertical-align: middle;
}
/* --- AJUSTE CIRÚRGICO DO ÍCONE NATIVO (SE HOUVER) --- */
.elementor-10 .elementor-element.elementor-element-9f6e491 .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
margin-right: 8px !important;
padding: 0 !important;
}
.elementor-10 .elementor-element.elementor-element-9f6e491 .elementor-icon-list-icon svg {
width: 14px !important;
height: 14px !important;
fill: #b01c24 !important; /* Sincroniza o ícone com o tom da marca */
}
/* ==========================================================================
COMPORTAMENTO RESPONSIVO
========================================================================== */
@media (max-width: 768px) {
/* Força o alinhamento centralizado no mobile se o cabeçalho for centralizado */
.elementor-10 .elementor-element.elementor-element-9f6e491 .elementor-icon-list-items {
justify-content: center !important;
}
.elementor-10 .elementor-element.elementor-element-9f6e491 .elementor-icon-list-item {
font-size: 11px !important; /* Redução sutil na escala tipográfica */
letter-spacing: 1.5px !important;
}
.elementor-10 .elementor-element.elementor-element-9f6e491 .elementor-icon-list-item::before {
width: 20px; /* Reduz o tamanho do traço em telas touch */
margin-right: 8px;
}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-15d9f76 *//* Custom CSS no Widget Título H2 */
.elementor-10 .elementor-element.elementor-element-15d9f76 h2.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: clamp(32px, 4vw, 46px) !important;
line-height: 1.1 !important;
color: #ffffff !important;
letter-spacing: -0.5px !important;
}
/* Destaque estilizado em vermelho */
.elementor-10 .elementor-element.elementor-element-15d9f76 h2.elementor-heading-title em {
font-style: normal !important;
color: #d42030 !important; /* Vermelho vibrante */
}
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-15d9f76 h2.elementor-heading-title { font-size: 28px !important; }
}/* End custom CSS */
/* Start custom CSS for testimonial-carousel, class: .elementor-element-c41b89d *//* Custom CSS no Widget Testimonial Carousel */
/* --- 4.1 O CARD EM ESTILO GLASSMORPHISM --- */
.elementor-10 .elementor-element.elementor-element-c41b89d .elementor-testimonial {
background: rgba(255, 255, 255, 0.02) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
padding: 40px !important;
border-radius: 2px !important; /* Ângulos retos corporativos */
/* Inicialização de Performance por Hardware */
transform: translateZ(0);
will-change: transform, border-color;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease !important;
}
/* Transição de borda ativa no hover do card */
.elementor-10 .elementor-element.elementor-element-c41b89d .elementor-testimonial:hover {
border-color: rgba(176, 28, 36, 0.3) !important; /* Brilho sutil em vermelho */
}
/* --- 4.2 TEXTO DO DEPOIMENTO --- */
.elementor-10 .elementor-element.elementor-element-c41b89d .elementor-testimonial__content {
font-family: 'Poppins', sans-serif !important;
font-size: 15px !important;
line-height: 1.7 !important;
color: rgba(250, 248, 244, 0.8) !important; /* Branco caloroso confortável */
font-style: normal !important;
margin-bottom: 24px !important;
}
/* --- 4.3 AVATAR, NOME E FUNÇÃO --- */
.elementor-10 .elementor-element.elementor-element-c41b89d .elementor-testimonial__image img {
width: 56px !important;
height: 56px !important;
border-radius: 50% !important;
border: 2px solid #b01c24 !important; /* Aro vermelho de destaque */
}
.elementor-10 .elementor-element.elementor-element-c41b89d .elementor-testimonial__name {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
color: #ffffff !important;
}
.elementor-10 .elementor-element.elementor-element-c41b89d .elementor-testimonial__job {
font-family: 'Poppins', sans-serif !important;
font-size: 12px !important;
color: #6e7e95 !important; /* Cinza azulado de suporte */
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
/* --- 4.4 PAGINAÇÃO (DOTS EM LINHA DO CARROSSEL) --- */
.elementor-10 .elementor-element.elementor-element-c41b89d .swiper-pagination-bullet {
width: 24px !important;
height: 3px !important;
background-color: rgba(255, 255, 255, 0.2) !important;
border-radius: 0px !important;
opacity: 1 !important;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.elementor-10 .elementor-element.elementor-element-c41b89d .swiper-pagination-bullet-active {
background-color: #b01c24 !important;
width: 44px !important; /* Efeito traço de progresso */
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-c41b89d .elementor-testimonial {
padding: 24px !important;
}
.elementor-10 .elementor-element.elementor-element-c41b89d .elementor-testimonial__content {
font-size: 14px !important;
line-height: 1.6 !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-533ef03 *//* Custom CSS no Container Pai da Seção */
.elementor-10 .elementor-element.elementor-element-533ef03 {
background: radial-gradient(circle at 50% 30%, #0a172c 0%, #050b14 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}/* End custom CSS */
/* Start custom CSS for nested-accordion, class: .elementor-element-1c37003 *//* ==========================================================================
WIDGET SANFONA ANINHADA (NESTED ACCORDION) - DESIGN PREMIUM
========================================================================== */
/* 1. ESTRUTURA BASE (A tag ) */
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item {
border: none !important;
border-bottom: 1px solid rgba(13, 34, 68, 0.1) !important; /* Linha técnica divisória */
background-color: transparent !important;
margin: 0 !important;
transition: background-color 0.3s ease !important;
}
/* Remove a seta nativa feia do navegador na tag summary */
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item-title::-webkit-details-marker {
display: none !important;
}
/* 2. O CABEÇALHO / PERGUNTA (A tag ) */
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item-title {
list-style: none !important;
padding: 20px 0 !important;
cursor: pointer !important;
outline: none !important;
transition: background-color 0.3s ease !important;
}
/* Microinteração de hover no item inteiro */
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item:hover .e-n-accordion-item-title {
background-color: rgba(13, 34, 68, 0.015) !important;
}
/* Tipografia do Título - Montserrat */
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item-title-text {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
color: #0d2244 !important; /* Azul Marinho Principal */
line-height: 1.4 !important;
transition: color 0.3s ease !important;
}
/* Título fica Vermelho quando o item é aberto ou recebe hover */
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item[open] .e-n-accordion-item-title-text,
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item-title:hover .e-n-accordion-item-title-text {
color: #b01c24 !important;
}
/* 3. O ÍCONE DE STATUS (A Seta) */
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item-title-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background-color: rgba(13, 34, 68, 0.04) !important; /* Fundo circular sutil */
color: #0d2244 !important;
will-change: background-color, color;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item-title-icon svg {
width: 14px !important;
height: 14px !important;
fill: currentColor !important;
}
/* Transformação do Ícone quando a sanfona ABRE ([open]) */
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
background-color: #b01c24 !important; /* Círculo vira vermelho da marca */
color: #ffffff !important; /* Ícone vira branco */
transform: rotate(180deg) translateZ(0) !important; /* Giro com aceleração de GPU */
}
/* 4. ANIMAÇÃO DE ENTRADA DO CONTEÚDO (O Container Interno) */
/* Quando o details recebe o atributo open, o container filho é animado */
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item[open] > div {
animation: fadeSlideIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
padding-bottom: 24px !important; /* Respiro inferior da resposta */
}
@keyframes fadeSlideIn {
0% {
opacity: 0;
transform: translateY(-8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA MÓVEL (TABLET & SMARTPHONE)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item-title {
padding: 16px 0 !important;
}
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item-title-text {
font-size: 14.5px !important;
line-height: 1.4 !important;
}
.elementor-10 .elementor-element.elementor-element-1c37003 .e-n-accordion-item-title-icon {
width: 32px !important;
height: 32px !important;
flex-shrink: 0 !important; /* Impede que o ícone esmague se o texto for longo */
}
}/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-26af5aa *//* ==========================================================================
CSS CUSTOMIZADO: EYEBROW / BADGE DE SERVIÇOS PREMIUM (CASA PADRÃO)
========================================================================== */
/* Remove margens internas nativas do Elementor e garante o alinhamento */
.elementor-10 .elementor-element.elementor-element-26af5aa .elementor-icon-list-items {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}
/* Estilização do Item da Lista */
.elementor-10 .elementor-element.elementor-element-26af5aa .elementor-icon-list-item {
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #B01C24 !important; /* O Vermelho institucional extraído da sua logo */
letter-spacing: 2px !important;
text-transform: uppercase !important; /* Força caixa alta para estética premium */
display: inline-flex !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}
/* --- DETALHE DA LINHA TÉCNICA À ESQUERDA (ESTILO HTML NATIVO) --- */
.elementor-10 .elementor-element.elementor-element-26af5aa .elementor-icon-list-item::before {
content: '';
display: inline-block;
width: 32px; /* Comprimento da linha rígida */
height: 3px; /* Espessura da linha */
background-color: #B01C24 !important; /* Vermelho assinatura */
margin-right: 12px; /* Afastamento entre a linha e o texto/ícone */
border-radius: 1px;
vertical-align: middle;
}
/* Ajuste e otimização para o ícone (caso decida usar um ícone junto ao texto) */
.elementor-10 .elementor-element.elementor-element-26af5aa .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
margin-right: 8px !important;
padding: 0 !important;
}
.elementor-10 .elementor-element.elementor-element-26af5aa .elementor-icon-list-icon svg {
width: 14px !important;
height: 14px !important;
fill: #B01C24 !important; /* Força o ícone a seguir o vermelho da logo */
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
/* Centraliza o Eyebrow no Mobile caso o seu container pai seja centralizado */
.elementor-10 .elementor-element.elementor-element-26af5aa {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
.elementor-10 .elementor-element.elementor-element-26af5aa .elementor-icon-list-items {
justify-content: center !important;
}
.elementor-10 .elementor-element.elementor-element-26af5aa .elementor-icon-list-item {
font-size: 11px !important; /* Reduz levemente a escala tipográfica no celular */
letter-spacing: 1.5px !important;
}
.elementor-10 .elementor-element.elementor-element-26af5aa .elementor-icon-list-item::before {
width: 24px; /* Encolhe a linha decorativa para telas menores */
margin-right: 8px;
}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-47212e4 *//* Custom CSS no Widget Título H2 */
.elementor-10 .elementor-element.elementor-element-47212e4 .elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: clamp(32px, 4vw, 48px) !important;
line-height: 1.1 !important;
color: #0D2244 !important;
letter-spacing: -0.5px !important;
}
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-47212e4 .elementor-heading-title { font-size: 28px !important; }
}/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-fdf7815 *//* ==========================================================================
CSS CUSTOMIZADO: EYEBROW / BADGE DE SERVIÇOS PREMIUM (CASA PADRÃO)
========================================================================== */
/* Remove margens internas nativas do Elementor e garante o alinhamento */
.elementor-10 .elementor-element.elementor-element-fdf7815 .elementor-icon-list-items {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}
/* Estilização do Item da Lista */
.elementor-10 .elementor-element.elementor-element-fdf7815 .elementor-icon-list-item {
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #B01C24 !important; /* O Vermelho institucional extraído da sua logo */
letter-spacing: 2px !important;
text-transform: uppercase !important; /* Força caixa alta para estética premium */
display: inline-flex !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}
/* --- DETALHE DA LINHA TÉCNICA À ESQUERDA (ESTILO HTML NATIVO) --- */
.elementor-10 .elementor-element.elementor-element-fdf7815 .elementor-icon-list-item::before {
content: '';
display: inline-block;
width: 32px; /* Comprimento da linha rígida */
height: 3px; /* Espessura da linha */
background-color: #B01C24 !important; /* Vermelho assinatura */
margin-right: 12px; /* Afastamento entre a linha e o texto/ícone */
border-radius: 1px;
vertical-align: middle;
}
/* Ajuste e otimização para o ícone (caso decida usar um ícone junto ao texto) */
.elementor-10 .elementor-element.elementor-element-fdf7815 .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
margin-right: 8px !important;
padding: 0 !important;
}
.elementor-10 .elementor-element.elementor-element-fdf7815 .elementor-icon-list-icon svg {
width: 14px !important;
height: 14px !important;
fill: #B01C24 !important; /* Força o ícone a seguir o vermelho da logo */
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE FIRST)
========================================================================== */
@media (max-width: 768px) {
/* Centraliza o Eyebrow no Mobile caso o seu container pai seja centralizado */
.elementor-10 .elementor-element.elementor-element-fdf7815 {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
.elementor-10 .elementor-element.elementor-element-fdf7815 .elementor-icon-list-items {
justify-content: center !important;
}
.elementor-10 .elementor-element.elementor-element-fdf7815 .elementor-icon-list-item {
font-size: 11px !important; /* Reduz levemente a escala tipográfica no celular */
letter-spacing: 1.5px !important;
}
.elementor-10 .elementor-element.elementor-element-fdf7815 .elementor-icon-list-item::before {
width: 24px; /* Encolhe a linha decorativa para telas menores */
margin-right: 8px;
}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-82f1833 *//* Custom CSS no Widget Título H2 */
.elementor-10 .elementor-element.elementor-element-82f1833 .elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: clamp(32px, 4vw, 48px) !important;
line-height: 1.1 !important;
color: #0D2244 !important;
letter-spacing: -0.5px !important;
}
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-82f1833 .elementor-heading-title { font-size: 28px !important; }
}/* End custom CSS */
/* Start custom CSS for posts, class: .elementor-element-4cd1bd0 *//* ==========================================================================
WIDGET POSTS / BLOG - DESIGN EDITORIAL PREMIUM (IMAGEM CORRIGIDA)
========================================================================== */
/* --- 1. ESTRUTURA DO CARD (MOLDURA INTEGRAL) --- */
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post {
background-color: #ffffff !important;
border: 1px solid rgba(13, 34, 68, 0.06) !important;
border-radius: 0px !important;
padding: 0 !important;
margin-bottom: 30px;
transform: translateY(0) translateZ(0);
will-change: transform, box-shadow;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
box-shadow: 0 4px 15px rgba(13, 34, 68, 0.02) !important;
}
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post:hover {
transform: translateY(-6px) translateZ(0) !important;
box-shadow: 0 16px 35px rgba(13, 34, 68, 0.08) !important;
}
/* --- 2. CONTROLLER DA IMAGEM EM DESTAQUE --- */
/* Deixa o painel do Elementor controlar a proporção (0.66), apenas blindamos o overflow para o zoom funcionar sem vazar */
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__thumbnail {
overflow: hidden !important;
position: relative !important;
margin: 0 !important;
background-color: #0d2244 !important; /* Cor de fallback elegante */
}
/* Garante o preenchimento da imagem respeitando o layout nativo */
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
will-change: transform;
transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* --- 3. ÁREA DE TEXTO E CONTEÚDO --- */
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__text {
padding: 30px !important;
}
/* Meta Dados */
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__meta-data {
font-family: 'Poppins', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #6e7e95 !important;
margin-bottom: 12px !important;
}
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__meta-data span {
color: rgba(110, 126, 149, 0.4) !important;
}
/* Título do Post */
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__title,
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__title a {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 20px !important;
line-height: 1.3 !important;
color: #0d2244 !important;
margin: 0 0 14px 0 !important;
transition: color 0.3s ease !important;
text-decoration: none !important;
}
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post:hover .elementor-post__title a,
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__title a:hover {
color: #b01c24 !important;
}
/* --- 4. EXCERTO (RESUMO LIMITADO E ALINHADO) --- */
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__excerpt p {
font-family: 'Poppins', sans-serif !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: #3d4a5c !important;
margin-bottom: 20px !important;
/* TRUQUE DE ENGENHARIA (LINE-CLAMP): Trava o texto em exatamente 2 linhas, mantendo todos os cards com a mesma altura. */
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* --- 5. LINK "LEIA MAIS" --- */
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__read-more {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #b01c24 !important;
display: inline-flex !important;
align-items: center !important;
transition: color 0.3s ease, transform 0.3s ease !important;
text-decoration: none !important;
}
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__read-more::after {
content: '→';
margin-left: 6px;
font-size: 14px;
transition: transform 0.3s ease !important;
display: inline-block;
}
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post:hover .elementor-post__read-more::after {
transform: translateX(4px);
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (TABLET & MOBILE)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__text {
padding: 24px !important;
}
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__title,
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post__title a {
font-size: 18px !important;
}
}
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post {
margin-bottom: 24px !important;
}
.elementor-10 .elementor-element.elementor-element-4cd1bd0 .elementor-post:hover {
transform: none !important;
box-shadow: 0 6px 20px rgba(13, 34, 68, 0.04) !important;
}
}/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-0aa0e0a *//* ==========================================================================
CSS CUSTOMIZADO: EYEBROW EM MODO DARK (WIDGET LISTA DE ÍCONES)
========================================================================== */
/* Reseta e alinha a estrutura interna da lista do Elementor */
.elementor-10 .elementor-element.elementor-element-0aa0e0a .elementor-icon-list-items {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}
/* Estilização do Item da Lista (Texto) */
.elementor-10 .elementor-element.elementor-element-0aa0e0a .elementor-icon-list-item {
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #b01c24 !important; /* Vermelho institucional estável */
letter-spacing: 2px !important;
text-transform: uppercase !important; /* Caixa alta para visual corporativo */
display: inline-flex !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}
/* --- LINHA TÉCNICA DE PRECISÃO (ASSINATURA VISUAL) --- */
/* Renderizada diretamente via CSS para manter o carregamento ultra leve */
.elementor-10 .elementor-element.elementor-element-0aa0e0a .elementor-icon-list-item::before {
content: '';
display: inline-block;
width: 28px; /* Comprimento do traço geométrico */
height: 2px; /* Espessura fina e elegante */
background-color: #b01c24 !important; /* Vermelho assinatura */
margin-right: 12px; /* Espaçamento entre o traço e o ícone/texto */
vertical-align: middle;
}
/* --- AJUSTE CIRÚRGICO DO ÍCONE NATIVO (SE HOUVER) --- */
.elementor-10 .elementor-element.elementor-element-0aa0e0a .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
margin-right: 8px !important;
padding: 0 !important;
}
.elementor-10 .elementor-element.elementor-element-0aa0e0a .elementor-icon-list-icon svg {
width: 14px !important;
height: 14px !important;
fill: #b01c24 !important; /* Sincroniza o ícone com o tom da marca */
}
/* ==========================================================================
COMPORTAMENTO RESPONSIVO
========================================================================== */
@media (max-width: 768px) {
/* Força o alinhamento centralizado no mobile se o cabeçalho for centralizado */
.elementor-10 .elementor-element.elementor-element-0aa0e0a .elementor-icon-list-items {
justify-content: center !important;
}
.elementor-10 .elementor-element.elementor-element-0aa0e0a .elementor-icon-list-item {
font-size: 11px !important; /* Redução sutil na escala tipográfica */
letter-spacing: 1.5px !important;
}
.elementor-10 .elementor-element.elementor-element-0aa0e0a .elementor-icon-list-item::before {
width: 20px; /* Reduz o tamanho do traço em telas touch */
margin-right: 8px;
}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-cab1298 *//* Custom CSS no Widget Título H2 */
.elementor-10 .elementor-element.elementor-element-cab1298 h2.elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: clamp(32px, 4vw, 46px) !important;
line-height: 1.1 !important;
color: #ffffff !important;
letter-spacing: -0.5px !important;
}
/* Destaque estilizado em vermelho */
.elementor-10 .elementor-element.elementor-element-cab1298 h2.elementor-heading-title em {
font-style: normal !important;
color: #d42030 !important; /* Vermelho vibrante */
}
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-cab1298 h2.elementor-heading-title { font-size: 28px !important; }
}/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-d9d35b5 *//* ==========================================================================
WIDGET CONTACT INFO - ESTÉTICA CORPORATIVA ULTRA CLEAN
========================================================================== */
/* Ajuste do Item Individual */
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-box-wrapper,
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-list-item {
display: flex !important;
align-items: center !important;
gap: 16px !important;
padding: 12px 0 !important;
background: transparent !important;
}
/* O Bloco Quadrado do Ícone (Identidade da Marca) */
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-box-icon,
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #b01c24 !important; /* Vermelho Institucional */
width: 42px !important;
height: 42px !important;
border-radius: 2px !important; /* Geometria rígida de engenharia */
flex-shrink: 0 !important;
/* Aceleração de Hardware */
transform: scale(1) translateZ(0);
will-change: transform, background-color;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease !important;
}
/* Tamanho e Cor do SVG Interno */
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-box-icon svg,
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-list-icon svg {
width: 16px !important;
height: 16px !important;
fill: #ffffff !important;
}
/* Microinteração de Hover no Bloco de Ícone */
.elementor-10 .elementor-element.elementor-element-d9d35b5:hover .elementor-icon-box-icon,
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-list-item:hover .elementor-icon-list-icon {
background-color: #d42030 !important; /* Vermelho vibrante */
transform: scale(1.05) translateZ(0) !important;
}
/* --- ESTILIZAÇÃO TEXTUAL --- */
/* Rótulo / Subtítulo Técnico (Ex: LOCALIZAÇÃO) */
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-box-title,
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-list-text span:first-child {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #6e7e95 !important; /* Cinza azulado técnico */
margin-bottom: 4px !important;
display: block !important;
}
/* Conteúdo Principal (Ex: Região do Grande Rio...) */
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-box-description,
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-list-text,
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-list-text a {
font-family: 'Poppins', sans-serif !important;
font-size: 14.5px !important;
font-weight: 500 !important;
color: #faf8f4 !important; /* Branco caloroso para máximo contraste dark */
line-height: 1.4 !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
}
/* Links ativos em hover */
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-list-text a:hover {
color: #b01c24 !important;
}
/* ==========================================================================
RESPONSIVIDADE (MOBILE)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-box-description,
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-list-text,
.elementor-10 .elementor-element.elementor-element-d9d35b5 .elementor-icon-list-text a {
font-size: 13.5px !important;
}
}/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-792947a *//* ==========================================================================
WIDGET CONTACT INFO - ESTÉTICA CORPORATIVA ULTRA CLEAN
========================================================================== */
/* Ajuste do Item Individual */
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-box-wrapper,
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-list-item {
display: flex !important;
align-items: center !important;
gap: 16px !important;
padding: 12px 0 !important;
background: transparent !important;
}
/* O Bloco Quadrado do Ícone (Identidade da Marca) */
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-box-icon,
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #b01c24 !important; /* Vermelho Institucional */
width: 42px !important;
height: 42px !important;
border-radius: 2px !important; /* Geometria rígida de engenharia */
flex-shrink: 0 !important;
/* Aceleração de Hardware */
transform: scale(1) translateZ(0);
will-change: transform, background-color;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease !important;
}
/* Tamanho e Cor do SVG Interno */
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-box-icon svg,
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-list-icon svg {
width: 16px !important;
height: 16px !important;
fill: #ffffff !important;
}
/* Microinteração de Hover no Bloco de Ícone */
.elementor-10 .elementor-element.elementor-element-792947a:hover .elementor-icon-box-icon,
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-list-item:hover .elementor-icon-list-icon {
background-color: #d42030 !important; /* Vermelho vibrante */
transform: scale(1.05) translateZ(0) !important;
}
/* --- ESTILIZAÇÃO TEXTUAL --- */
/* Rótulo / Subtítulo Técnico (Ex: LOCALIZAÇÃO) */
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-box-title,
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-list-text span:first-child {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #6e7e95 !important; /* Cinza azulado técnico */
margin-bottom: 4px !important;
display: block !important;
}
/* Conteúdo Principal (Ex: Região do Grande Rio...) */
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-box-description,
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-list-text,
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-list-text a {
font-family: 'Poppins', sans-serif !important;
font-size: 14.5px !important;
font-weight: 500 !important;
color: #faf8f4 !important; /* Branco caloroso para máximo contraste dark */
line-height: 1.4 !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
}
/* Links ativos em hover */
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-list-text a:hover {
color: #b01c24 !important;
}
/* ==========================================================================
RESPONSIVIDADE (MOBILE)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-box-description,
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-list-text,
.elementor-10 .elementor-element.elementor-element-792947a .elementor-icon-list-text a {
font-size: 13.5px !important;
}
}/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-04f55f4 *//* ==========================================================================
WIDGET CONTACT INFO - ESTÉTICA CORPORATIVA ULTRA CLEAN
========================================================================== */
/* Ajuste do Item Individual */
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-box-wrapper,
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-list-item {
display: flex !important;
align-items: center !important;
gap: 16px !important;
padding: 12px 0 !important;
background: transparent !important;
}
/* O Bloco Quadrado do Ícone (Identidade da Marca) */
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-box-icon,
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #b01c24 !important; /* Vermelho Institucional */
width: 42px !important;
height: 42px !important;
border-radius: 2px !important; /* Geometria rígida de engenharia */
flex-shrink: 0 !important;
/* Aceleração de Hardware */
transform: scale(1) translateZ(0);
will-change: transform, background-color;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease !important;
}
/* Tamanho e Cor do SVG Interno */
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-box-icon svg,
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-list-icon svg {
width: 16px !important;
height: 16px !important;
fill: #ffffff !important;
}
/* Microinteração de Hover no Bloco de Ícone */
.elementor-10 .elementor-element.elementor-element-04f55f4:hover .elementor-icon-box-icon,
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-list-item:hover .elementor-icon-list-icon {
background-color: #d42030 !important; /* Vermelho vibrante */
transform: scale(1.05) translateZ(0) !important;
}
/* --- ESTILIZAÇÃO TEXTUAL --- */
/* Rótulo / Subtítulo Técnico (Ex: LOCALIZAÇÃO) */
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-box-title,
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-list-text span:first-child {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #6e7e95 !important; /* Cinza azulado técnico */
margin-bottom: 4px !important;
display: block !important;
}
/* Conteúdo Principal (Ex: Região do Grande Rio...) */
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-box-description,
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-list-text,
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-list-text a {
font-family: 'Poppins', sans-serif !important;
font-size: 14.5px !important;
font-weight: 500 !important;
color: #faf8f4 !important; /* Branco caloroso para máximo contraste dark */
line-height: 1.4 !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
}
/* Links ativos em hover */
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-list-text a:hover {
color: #b01c24 !important;
}
/* ==========================================================================
RESPONSIVIDADE (MOBILE)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-box-description,
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-list-text,
.elementor-10 .elementor-element.elementor-element-04f55f4 .elementor-icon-list-text a {
font-size: 13.5px !important;
}
}/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-6623f73 *//* ==========================================================================
WIDGET CONTACT INFO - ESTÉTICA CORPORATIVA ULTRA CLEAN
========================================================================== */
/* Ajuste do Item Individual */
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-box-wrapper,
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-list-item {
display: flex !important;
align-items: center !important;
gap: 16px !important;
padding: 12px 0 !important;
background: transparent !important;
}
/* O Bloco Quadrado do Ícone (Identidade da Marca) */
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-box-icon,
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #b01c24 !important; /* Vermelho Institucional */
width: 42px !important;
height: 42px !important;
border-radius: 2px !important; /* Geometria rígida de engenharia */
flex-shrink: 0 !important;
/* Aceleração de Hardware */
transform: scale(1) translateZ(0);
will-change: transform, background-color;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease !important;
}
/* Tamanho e Cor do SVG Interno */
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-box-icon svg,
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-list-icon svg {
width: 16px !important;
height: 16px !important;
fill: #ffffff !important;
}
/* Microinteração de Hover no Bloco de Ícone */
.elementor-10 .elementor-element.elementor-element-6623f73:hover .elementor-icon-box-icon,
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-list-item:hover .elementor-icon-list-icon {
background-color: #d42030 !important; /* Vermelho vibrante */
transform: scale(1.05) translateZ(0) !important;
}
/* --- ESTILIZAÇÃO TEXTUAL --- */
/* Rótulo / Subtítulo Técnico (Ex: LOCALIZAÇÃO) */
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-box-title,
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-list-text span:first-child {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #6e7e95 !important; /* Cinza azulado técnico */
margin-bottom: 4px !important;
display: block !important;
}
/* Conteúdo Principal (Ex: Região do Grande Rio...) */
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-box-description,
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-list-text,
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-list-text a {
font-family: 'Poppins', sans-serif !important;
font-size: 14.5px !important;
font-weight: 500 !important;
color: #faf8f4 !important; /* Branco caloroso para máximo contraste dark */
line-height: 1.4 !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
}
/* Links ativos em hover */
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-list-text a:hover {
color: #b01c24 !important;
}
/* ==========================================================================
RESPONSIVIDADE (MOBILE)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-box-description,
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-list-text,
.elementor-10 .elementor-element.elementor-element-6623f73 .elementor-icon-list-text a {
font-size: 13.5px !important;
}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-4db70ef *//* ==========================================================================
WIDGET TÍTULO H3 - FORMULÁRIO DE CONTATO (MODO DARK)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-4db70ef .elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 22px !important;
line-height: 1.2 !important;
text-transform: uppercase !important; /* Caixa alta idêntica ao seu design final */
letter-spacing: 0.5px !important;
color: #ffffff !important; /* Força o contraste máximo sobre o marinho */
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* Ajuste de escala tipográfica para smartphones */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-4db70ef .elementor-heading-title {
font-size: 17px !important;
text-align: center !important; /* Centraliza no mobile se o fluxo do formulário for centralizado */
}
}/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-8a64f67 *//* ==========================================================================
WIDGET FORMULÁRIO PRO - DESIGN DARK PREMIUM & GLASSFIELDS
========================================================================== */
/* --- 2.1 ESTRUTURA DOS CAMPOS DE ENTRADA (INPUTS & SELECT) --- */
.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group .elementor-field-textual,
.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group .elementor-select-wrapper select {
background-color: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 2px !important; /* Cantos retos institucionais */
padding: 14px 18px !important;
font-family: 'Poppins', sans-serif !important;
font-size: 14px !important;
color: #faf8f4 !important;
will-change: border-color, background-color;
transition: border-color 0.3s ease, background-color 0.3s ease !important;
}
/* Estilização dos Placeholders (Textos fantasmas internos) */
.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group .elementor-field-textual::placeholder {
color: rgba(250, 248, 244, 0.3) !important;
}
/* --- ESTADO DE FOCO (CLIQUE NO CAMPO) --- */
.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group .elementor-field-textual:focus,
.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group .elementor-select-wrapper select:focus {
border-color: #b01c24 !important; /* Borda assume o vermelho no clique */
background-color: rgba(255, 255, 255, 0.05) !important;
outline: none !important;
box-shadow: 0 0 10px rgba(176, 28, 36, 0.15) !important;
}
/* --- 2.2 ESTILIZAÇÃO DOS LABELS (RÓTULOS SUPERIORES) --- */
.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group > label {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 11px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #6e7e95 !important;
margin-bottom: 8px !important;
}
/* Asterisco de campo obrigatório */
.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-required-mark {
color: #b01c24 !important;
}
/* --- 2.3 O BOTÃO DE ENVIO PRINCIPAL (SUBMIT) --- */
.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-button[type="submit"] {
background-color: #b01c24 !important; /* Vermelho assinatura */
color: #ffffff !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 16px 32px !important;
border-radius: 2px !important;
width: 100% !important; /* Força largura total idêntico à imagem */
border: none !important;
cursor: pointer !important;
/* Configuração de performance para interações */
transform: translateY(0) translateZ(0);
will-change: transform, background-color, box-shadow;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, box-shadow 0.3s ease !important;
}
/* Microinteração de Hover no Botão */
.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-button[type="submit"]:hover {
background-color: #d42030 !important;
box-shadow: 0 8px 25px rgba(176, 28, 36, 0.35) !important;
transform: translateY(-2px) translateZ(0) !important;
}
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA E AJUSTES DE TELA
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group .elementor-field-textual,
.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-field-group .elementor-select-wrapper select {
padding: 12px 16px !important;
font-size: 13.5px !important;
}
.elementor-10 .elementor-element.elementor-element-8a64f67 .elementor-button[type="submit"] {
padding: 14px 28px !important;
font-size: 12px !important;
}
}
/* ==========================================================================
FORM COMPONENT - CORREÇÃO DO SELECT BUG (OPTIONS CONTRAST)
========================================================================== */
/* Alvo direto na tag select para garantir que a caixa principal continue dark */
.elementor-10 .elementor-element.elementor-element-8a64f67 select.elementor-field-textual {
background-color: rgba(255, 255, 255, 0.03) !important;
color: #ffffff !important;
}
/* Força todas as opções internas do menu a terem um fundo escuro corporativo
e o texto em branco caloroso, matando o bug nativo do navegador */
.elementor-10 .elementor-element.elementor-element-8a64f67 select.elementor-field-textual option {
background-color: #0d2244 !important; /* Azul Marinho Principal da marca */
color: #ffffff !important; /* Texto visível e contrastado */
font-family: 'Poppins', sans-serif !important;
padding: 12px !important;
}
/* Remove qualquer opacidade cinza que navegadores iOS ou Android
costumam forçar em campos de seleção */
.elementor-10 .elementor-element.elementor-element-8a64f67 select.elementor-field-textual {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fca1ef8 *//* ==========================================================================
CONTAINER CARD - ENVELOPADOR DO FORMULÁRIO DE CONTATO
========================================================================== */
.elementor-10 .elementor-element.elementor-element-fca1ef8 {
background-color: rgba(255, 255, 255, 0.01) !important; /* Vidro ultra sutil */
border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Linha de contorno fina */
padding: 44px !important; /* Espaçamento interno premium para valorizar o formulário */
border-radius: 0px !important; /* Ângulos retos alinhados à engenharia civil */
display: flex !important;
flex-direction: column !important;
gap: 28px !important; /* Espaço perfeito entre o H3 e o início dos campos */
/* Inicialização de Performance por Hardware */
transform: translateZ(0);
will-change: box-shadow, border-color;
transition: box-shadow 0.4s ease, border-color 0.4s ease !important;
}
/* Microinteração elegante quando o usuário interagir com o formulário */
.elementor-10 .elementor-element.elementor-element-fca1ef8:focus-within {
border-color: rgba(176, 28, 36, 0.2) !important; /* Brilho sutil vermelho na moldura */
box-shadow: 0 20px 50px rgba(5, 11, 20, 0.3) !important; /* Sombra profunda de sustentação */
}
/* ==========================================================================
RESPONSIVIDADE (TABLET & MOBILE)
========================================================================== */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-fca1ef8 {
padding: 32px !important; /* Reduz ligeiramente o respiro em tablets */
}
}
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-fca1ef8 {
padding: 24px 20px !important; /* Compactação cirúrgica para telas touch mobile */
gap: 20px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9849d27 *//* Custom CSS no Container Pai da Seção */
.elementor-10 .elementor-element.elementor-element-9849d27 {
background: radial-gradient(circle at 50% 30%, #0a172c 0%, #050b14 100%) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-6a495ca *//* ==========================================================================
WIDGET TÍTULO H3 - CABEÇALHOS DE COLUNA DO FOOTER CLEAN
========================================================================== */
.elementor-10 .elementor-element.elementor-element-6a495ca .elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 1.2 !important;
text-transform: uppercase !important; /* Caixa alta para hierarquia de arquitetura */
letter-spacing: 1px !important; /* Espaçamento fino entre as letras */
color: #0d2244 !important; /* Azul Marinho Principal para contraste máximo */
margin: 0 0 20px 0 !important; /* Margem inferior fixa para afastar da lista de links */
padding: 0 !important;
text-align: left !important;
}
/* --- DETALHE VISUAL OPCIONAL (LINHA SUBTIL DE SUPORTE) --- */
/* Se quiser ativar uma micro-linha decorativa abaixo do título, descomente o bloco abaixo:
.elementor-10 .elementor-element.elementor-element-6a495ca .elementor-heading-title::after {
content: '';
display: block;
width: 20px;
height: 2px;
background-color: #b01c24;
margin-top: 8px;
}
*/
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-6a495ca .elementor-heading-title {
font-size: 15px !important;
margin-bottom: 12px !important; /* Compactação cirúrgica para telas touch */
text-align: center !important; /* Centraliza no mobile se o fluxo do rodapé for empilhado */
}
}/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-55a9509 *//* ==========================================================================
WIDGET LISTA DE ÍCONES - NAVEGAÇÃO TEXTUAL CLEAN (CASA PADRÃO)
========================================================================== */
/* --- 1. RESET E OCULTAÇÃO DOS ÍCONES --- */
/* Força a remoção física e estrutural de qualquer ícone ou marcador nativo */
.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-icon {
display: none !important;
}
/* Espaçamento vertical equilibrado entre os links da lista */
.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-item {
margin-bottom: 12px !important;
padding: 0 !important;
}
.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-item:last-child {
margin-bottom: 0 !important;
}
/* --- 2. ESTILIZAÇÃO CORPORATIVA DOS LINKS --- */
.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-item a,
.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-text {
font-family: 'Poppins', sans-serif !important;
font-size: 14.5px !important;
font-weight: 500 !important;
color: #3d4a5c !important; /* Cinza azulado escuro corporativo */
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 2px !important;
/* Configuração de transição contínua */
transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* --- 3. MICROINTERAÇÃO DE HOVER (LINHA DE PRECISÃO EXPANSIVA) --- */
/* Cria um traço invisível na base que se expande horizontalmente via GPU */
.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-item a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5px; /* Espessura fina e elegante */
background-color: #b01c24 !important; /* Vermelho institucional assinatura */
/* Estado inicial: encolhido no centro/esquerda */
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Ativação do estado de Hover sincronizado */
.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-item:hover a,
.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-item a:hover {
color: #b01c24 !important; /* Transiciona a cor para o vermelho da logo */
}
.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-item:hover a::after {
transform: scaleX(1); /* Expande a linha perfeitamente a 60FPS */
}
/* ==========================================================================
4. OTIMIZAÇÃO ADAPTATIVA MOBILE
========================================================================== */
@media (max-width: 768px) {
/* Caso as colunas do seu rodapé sejam centralizadas no smartphone,
garante que a linha expansiva acompanhe o centro do texto */
.elementor-10 .elementor-element.elementor-element-55a9509 {
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-items {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-item a::after {
transform-origin: center center;
}
.elementor-10 .elementor-element.elementor-element-55a9509 .elementor-icon-list-text {
font-size: 14px !important; /* Conforto visual para telas touch */
}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-20ba854 *//* ==========================================================================
WIDGET TÍTULO H3 - CABEÇALHOS DE COLUNA DO FOOTER CLEAN
========================================================================== */
.elementor-10 .elementor-element.elementor-element-20ba854 .elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 1.2 !important;
text-transform: uppercase !important; /* Caixa alta para hierarquia de arquitetura */
letter-spacing: 1px !important; /* Espaçamento fino entre as letras */
color: #0d2244 !important; /* Azul Marinho Principal para contraste máximo */
margin: 0 0 20px 0 !important; /* Margem inferior fixa para afastar da lista de links */
padding: 0 !important;
text-align: left !important;
}
/* --- DETALHE VISUAL OPCIONAL (LINHA SUBTIL DE SUPORTE) --- */
/* Se quiser ativar uma micro-linha decorativa abaixo do título, descomente o bloco abaixo:
.elementor-10 .elementor-element.elementor-element-20ba854 .elementor-heading-title::after {
content: '';
display: block;
width: 20px;
height: 2px;
background-color: #b01c24;
margin-top: 8px;
}
*/
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-20ba854 .elementor-heading-title {
font-size: 15px !important;
margin-bottom: 12px !important; /* Compactação cirúrgica para telas touch */
text-align: center !important; /* Centraliza no mobile se o fluxo do rodapé for empilhado */
}
}/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-224aa9e *//* ==========================================================================
WIDGET LISTA DE ÍCONES - NAVEGAÇÃO TEXTUAL CLEAN (CASA PADRÃO)
========================================================================== */
/* --- 1. RESET E OCULTAÇÃO DOS ÍCONES --- */
/* Força a remoção física e estrutural de qualquer ícone ou marcador nativo */
.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-icon {
display: none !important;
}
/* Espaçamento vertical equilibrado entre os links da lista */
.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-item {
margin-bottom: 12px !important;
padding: 0 !important;
}
.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-item:last-child {
margin-bottom: 0 !important;
}
/* --- 2. ESTILIZAÇÃO CORPORATIVA DOS LINKS --- */
.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-item a,
.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-text {
font-family: 'Poppins', sans-serif !important;
font-size: 14.5px !important;
font-weight: 500 !important;
color: #3d4a5c !important; /* Cinza azulado escuro corporativo */
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 2px !important;
/* Configuração de transição contínua */
transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* --- 3. MICROINTERAÇÃO DE HOVER (LINHA DE PRECISÃO EXPANSIVA) --- */
/* Cria um traço invisível na base que se expande horizontalmente via GPU */
.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-item a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5px; /* Espessura fina e elegante */
background-color: #b01c24 !important; /* Vermelho institucional assinatura */
/* Estado inicial: encolhido no centro/esquerda */
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Ativação do estado de Hover sincronizado */
.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-item:hover a,
.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-item a:hover {
color: #b01c24 !important; /* Transiciona a cor para o vermelho da logo */
}
.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-item:hover a::after {
transform: scaleX(1); /* Expande a linha perfeitamente a 60FPS */
}
/* ==========================================================================
4. OTIMIZAÇÃO ADAPTATIVA MOBILE
========================================================================== */
@media (max-width: 768px) {
/* Caso as colunas do seu rodapé sejam centralizadas no smartphone,
garante que a linha expansiva acompanhe o centro do texto */
.elementor-10 .elementor-element.elementor-element-224aa9e {
text-align: center !important;
}
.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-items {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-item a::after {
transform-origin: center center;
}
.elementor-10 .elementor-element.elementor-element-224aa9e .elementor-icon-list-text {
font-size: 14px !important; /* Conforto visual para telas touch */
}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-5b26ebd *//* ==========================================================================
WIDGET TÍTULO H3 - CABEÇALHOS DE COLUNA DO FOOTER CLEAN
========================================================================== */
.elementor-10 .elementor-element.elementor-element-5b26ebd .elementor-heading-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 1.2 !important;
text-transform: uppercase !important; /* Caixa alta para hierarquia de arquitetura */
letter-spacing: 1px !important; /* Espaçamento fino entre as letras */
color: #0d2244 !important; /* Azul Marinho Principal para contraste máximo */
margin: 0 0 20px 0 !important; /* Margem inferior fixa para afastar da lista de links */
padding: 0 !important;
text-align: left !important;
}
/* --- DETALHE VISUAL OPCIONAL (LINHA SUBTIL DE SUPORTE) --- */
/* Se quiser ativar uma micro-linha decorativa abaixo do título, descomente o bloco abaixo:
.elementor-10 .elementor-element.elementor-element-5b26ebd .elementor-heading-title::after {
content: '';
display: block;
width: 20px;
height: 2px;
background-color: #b01c24;
margin-top: 8px;
}
*/
/* ==========================================================================
OTIMIZAÇÃO RESPONSIVA (MOBILE)
========================================================================== */
@media (max-width: 768px) {
.elementor-10 .elementor-element.elementor-element-5b26ebd .elementor-heading-title {
font-size: 15px !important;
margin-bottom: 12px !important; /* Compactação cirúrgica para telas touch */
text-align: center !important; /* Centraliza no mobile se o fluxo do rodapé for empilhado */
}
}/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-e95bff9 *//* ==========================================================================
WIDGET LISTA DE ÍCONES DE CONTATO - RODAPÉ CLEAN (CASA PADRÃO)
========================================================================== */
/* Espaçamento vertical sutil entre os itens de contato */
.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-item {
margin-bottom: 12px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
}
.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-item:last-child {
margin-bottom: 0 !important;
}
/* --- 1. ESTILIZAÇÃO DO ÍCONE NATIVO --- */
.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 10px !important; /* Espaço perfeito entre o ícone e o texto */
color: #0d2244 !important; /* Azul Marinho Principal da logo */
flex-shrink: 0 !important;
/* Aceleração de hardware para microinteração macia */
transform: scale(1) translateZ(0);
will-change: transform, color;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease !important;
}
.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-icon svg {
width: 14px !important;
height: 14px !important;
fill: currentColor !important;
}
/* --- 2. ESTILIZAÇÃO DO TEXTO --- */
.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-text {
font-family: 'Poppins', sans-serif !important;
font-size: 14.5px !important;
font-weight: 500 !important;
color: #3d4a5c !important; /* Cinza azulado escuro */
line-height: 1.4 !important;
transition: color 0.3s ease !important;
}
/* --- 3. MICROINTERAÇÃO DE HOVER (SINCRONIZADA) --- */
/* Quando o usuário passa o mouse em qualquer parte do item,
o ícone ganha um leve pulso e ambos mudam para o vermelho da marca */
.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-item:hover .elementor-icon-list-icon {
color: #b01c24 !important; /* Transiciona para o vermelho institucional */
transform: scale(1.1) translateZ(0) !important;
}
.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-item:hover .elementor-icon-list-text {
color: #b01c24 !important;
}
/* ==========================================================================
4. OTIMIZAÇÃO ADAPTATIVA MOBILE
========================================================================== */
@media (max-width: 768px) {
/* Alinha a lista de ícones ao centro se as colunas do rodapé
estiverem centralizadas no mobile */
.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-items {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-item {
justify-content: center !important;
}
.elementor-10 .elementor-element.elementor-element-e95bff9 .elementor-icon-list-text {
font-size: 14px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f994d0 *//* ==========================================================================
CONTAINER DO FOOTER - ESTÉTICA PREMIUM CLARA E CLEAN (ESTILO HEADER)
========================================================================== */
.elementor-10 .elementor-element.elementor-element-5f994d0 {
/* Fundo creme caloroso institucional para um acabamento leve e clean */
background-color: #FAF8F4 !important;
/* Linha técnica superior sutil para delimitar o início do rodapé */
border-top: 1px solid rgba(13, 34, 68, 0.08) !important;
position: relative !important;
z-index: 1 !important;
}/* End custom CSS */