.elementor-23 .elementor-element.elementor-element-b8227b2{--display:flex;--position:fixed;--min-height:80px;--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:space-between;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;--z-index:999;}body:not(.rtl) .elementor-23 .elementor-element.elementor-element-b8227b2{left:0px;}body.rtl .elementor-23 .elementor-element.elementor-element-b8227b2{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-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-3920df5 img{width:200px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.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-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-23 .elementor-element.elementor-element-172e362{width:var( --container-widget-width, 51.998% );max-width:51.998%;--container-widget-width:51.998%;--container-widget-flex-grow:0;--e-nav-menu-horizontal-menu-item-margin:calc( 48px / 2 );}.elementor-23 .elementor-element.elementor-element-172e362 > .elementor-widget-container{margin:0px 28px 0px 0px;}.elementor-23 .elementor-element.elementor-element-172e362.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-7317bb8-font-family ), Sans-serif;font-size:var( --e-global-typography-7317bb8-font-size );font-weight:var( --e-global-typography-7317bb8-font-weight );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu--main .elementor-item{color:#F4F6F8;fill:#F4F6F8;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;}.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu--main .elementor-item:hover,
					.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu--main .elementor-item:focus{color:#9DBBD6;fill:#9DBBD6;}.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#9DBBD6;}.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:48px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-9ecb7ec .elementor-icon-wrapper{text-align:center;}.elementor-23 .elementor-element.elementor-element-9ecb7ec.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-text );}.elementor-23 .elementor-element.elementor-element-9ecb7ec.elementor-view-framed .elementor-icon, .elementor-23 .elementor-element.elementor-element-9ecb7ec.elementor-view-default .elementor-icon{color:var( --e-global-color-text );border-color:var( --e-global-color-text );}.elementor-23 .elementor-element.elementor-element-9ecb7ec.elementor-view-framed .elementor-icon, .elementor-23 .elementor-element.elementor-element-9ecb7ec.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-text );}.elementor-23 .elementor-element.elementor-element-9ecb7ec .elementor-icon{padding:6px;}.elementor-23 .elementor-element.elementor-element-41e280b{--display:flex;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#EAEAEA17;--border-color:#EAEAEA17;--padding-top:64px;--padding-bottom:64px;--padding-left:64px;--padding-right:64px;}.elementor-23 .elementor-element.elementor-element-41e280b:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-41e280b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}body:not(.rtl) .elementor-23 .elementor-element.elementor-element-376bd8a{right:64px;}body.rtl .elementor-23 .elementor-element.elementor-element-376bd8a{left:64px;}.elementor-23 .elementor-element.elementor-element-376bd8a{top:64px;}.elementor-23 .elementor-element.elementor-element-376bd8a .elementor-icon-wrapper{text-align:center;}.elementor-23 .elementor-element.elementor-element-376bd8a.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-376bd8a.elementor-view-framed .elementor-icon, .elementor-23 .elementor-element.elementor-element-376bd8a.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-376bd8a.elementor-view-framed .elementor-icon, .elementor-23 .elementor-element.elementor-element-376bd8a.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-376bd8a.elementor-view-stacked .elementor-icon:hover{background-color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-376bd8a.elementor-view-framed .elementor-icon:hover, .elementor-23 .elementor-element.elementor-element-376bd8a.elementor-view-default .elementor-icon:hover{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-376bd8a.elementor-view-framed .elementor-icon:hover, .elementor-23 .elementor-element.elementor-element-376bd8a.elementor-view-default .elementor-icon:hover svg{fill:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-376bd8a .elementor-icon{font-size:32px;}.elementor-23 .elementor-element.elementor-element-376bd8a .elementor-icon svg{height:32px;}.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-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.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-23 .elementor-element.elementor-element-b2ee75c{--divider-border-style:solid;--divider-color:#9DBBD629;--divider-border-width:1px;}.elementor-23 .elementor-element.elementor-element-b2ee75c .elementor-divider-separator{width:100%;}.elementor-23 .elementor-element.elementor-element-b2ee75c .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-23 .elementor-element.elementor-element-fecf572.elementor-element{--align-self:flex-start;}.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown{background-color:#F5F2EE00;}.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown a:hover,
					.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown a:focus,
					.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown a.highlighted{background-color:#02010100;}.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown a.elementor-item-active{background-color:#02010100;}.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown .elementor-item, .elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-7317bb8-font-family ), Sans-serif;font-size:var( --e-global-typography-7317bb8-font-size );font-weight:var( --e-global-typography-7317bb8-font-weight );}.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown a{padding-left:0px;padding-right:0px;padding-top:12px;padding-bottom:12px;}.elementor-23 .elementor-element.elementor-element-6870103{--divider-border-style:solid;--divider-color:#9DBBD629;--divider-border-width:1px;}.elementor-23 .elementor-element.elementor-element-6870103 .elementor-divider-separator{width:100%;}.elementor-23 .elementor-element.elementor-element-6870103 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-23 .elementor-element.elementor-element-f526813{--grid-template-columns:repeat(0, auto);--icon-size:20px;--grid-column-gap:6px;--grid-row-gap:0px;}.elementor-23 .elementor-element.elementor-element-f526813 .elementor-widget-container{text-align:right;}.elementor-23 .elementor-element.elementor-element-f526813.elementor-element{--align-self:flex-start;}.elementor-23 .elementor-element.elementor-element-f526813 .elementor-social-icon{background-color:var( --e-global-color-primary );--icon-padding:0.3em;border-style:solid;border-width:1px 1px 1px 1px;border-color:#EAEEF240;}.elementor-23 .elementor-element.elementor-element-f526813 .elementor-social-icon i{color:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-f526813 .elementor-social-icon svg{fill:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-40d0246{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23 .elementor-element.elementor-element-c763c28{--display:flex;}.elementor-23 .elementor-element.elementor-element-baa07fd{--display:flex;--border-radius:64px 64px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:128px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-23 .elementor-element.elementor-element-baa07fd:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-baa07fd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-a8c374b{--display:flex;}.elementor-23 .elementor-element.elementor-element-a8c374b.e-con{--align-self:center;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-b73d462{text-align:center;}.elementor-23 .elementor-element.elementor-element-b73d462 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-509e64b );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );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-23 .elementor-element.elementor-element-3c1bb78{text-align:center;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-590638a{--display:flex;}.elementor-23 .elementor-element.elementor-element-590638a.e-con{--align-self:center;}.elementor-23 .elementor-element.elementor-element-a522fae{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:96px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;}.elementor-23 .elementor-element.elementor-element-a522fae:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-a522fae > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-c98686a{--display:flex;}.elementor-23 .elementor-element.elementor-element-c98686a.e-con{--align-self:center;}.elementor-23 .elementor-element.elementor-element-3e7e699{text-align:center;}.elementor-23 .elementor-element.elementor-element-3e7e699 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );color:var( --e-global-color-509e64b );}.elementor-23 .elementor-element.elementor-element-28fc870{text-align:center;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-b54eb1d{--display:flex;}.elementor-23 .elementor-element.elementor-element-ea77724{--display:flex;}.elementor-23 .elementor-element.elementor-element-bbf67bf{--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:64px 64px;--row-gap:64px;--column-gap:64px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:32px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-23 .elementor-element.elementor-element-bbf67bf:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-bbf67bf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-4e2cbfe{--display:flex;}.elementor-23 .elementor-element.elementor-element-4e2cbfe.e-con{--align-self:center;}.elementor-23 .elementor-element.elementor-element-928343c.elementor-element{--align-self:flex-start;}.elementor-23 .elementor-element.elementor-element-18269b3{text-align:start;}.elementor-23 .elementor-element.elementor-element-18269b3 .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-6a40fc9{--display:flex;}.elementor-23 .elementor-element.elementor-element-6a40fc9.e-con{--align-self:center;}.elementor-23 .elementor-element.elementor-element-ca56daa{--display:flex;--margin-top:0px;--margin-bottom:-160px;--margin-left:0px;--margin-right:0px;--padding-top:96px;--padding-bottom:0px;--padding-left:32px;--padding-right:32px;--z-index:1;}.elementor-23 .elementor-element.elementor-element-ca56daa:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-ca56daa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-601103d{--display:flex;}.elementor-23 .elementor-element.elementor-element-601103d.e-con{--align-self:center;}.elementor-23 .elementor-element.elementor-element-4bd215f.elementor-element{--align-self:center;}.elementor-23 .elementor-element.elementor-element-71ee661{text-align:center;}.elementor-23 .elementor-element.elementor-element-71ee661 .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-1b49654{text-align:center;color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-92a2902{--display:flex;}.elementor-23 .elementor-element.elementor-element-2c7527d{--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:64px 64px;--row-gap:64px;--column-gap:64px;--border-radius:0px 128px 128px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:128px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;}.elementor-23 .elementor-element.elementor-element-2c7527d:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-2c7527d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-ab5d3ad{--display:flex;}.elementor-23 .elementor-element.elementor-element-ab5d3ad.e-con{--align-self:center;}.elementor-23 .elementor-element.elementor-element-9ae54df{--display:flex;}.elementor-23 .elementor-element.elementor-element-9ae54df.e-con{--align-self:center;}.elementor-23 .elementor-element.elementor-element-0f9a668.elementor-element{--align-self:flex-start;}.elementor-23 .elementor-element.elementor-element-b0d66ad{text-align:start;}.elementor-23 .elementor-element.elementor-element-b0d66ad .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );color:var( --e-global-color-509e64b );}.elementor-23 .elementor-element.elementor-element-ad0ec9c{font-family:var( --e-global-typography-7317bb8-font-family ), Sans-serif;font-size:var( --e-global-typography-7317bb8-font-size );font-weight:var( --e-global-typography-7317bb8-font-weight );line-height:var( --e-global-typography-7317bb8-line-height );color:var( --e-global-color-176cdd8 );}.elementor-23 .elementor-element.elementor-element-ad0ec9c a{color:var( --e-global-color-b6bd608 );}.elementor-23 .elementor-element.elementor-element-927c27d{--display:flex;--overlay-opacity:0.07;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:128px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;--z-index:1;}.elementor-23 .elementor-element.elementor-element-927c27d:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-927c27d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-927c27d::before, .elementor-23 .elementor-element.elementor-element-927c27d > .elementor-background-video-container::before, .elementor-23 .elementor-element.elementor-element-927c27d > .e-con-inner > .elementor-background-video-container::before, .elementor-23 .elementor-element.elementor-element-927c27d > .elementor-background-slideshow::before, .elementor-23 .elementor-element.elementor-element-927c27d > .e-con-inner > .elementor-background-slideshow::before, .elementor-23 .elementor-element.elementor-element-927c27d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-23 .elementor-element.elementor-element-3724c1d{--display:flex;}.elementor-23 .elementor-element.elementor-element-3724c1d.e-con{--align-self:center;}.elementor-23 .elementor-element.elementor-element-acaa6ff.elementor-element{--align-self:center;}.elementor-23 .elementor-element.elementor-element-5a58f0b{text-align:center;}.elementor-23 .elementor-element.elementor-element-5a58f0b .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-a9d4fcf{text-align:center;color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-0a11962{--display:flex;}.elementor-23 .elementor-element.elementor-element-0a11962.e-con{--align-self:center;}.elementor-23 .elementor-element.elementor-element-a985cdc{--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:64px 64px;--row-gap:64px;--column-gap:64px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:96px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;}.elementor-23 .elementor-element.elementor-element-a985cdc:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-a985cdc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-0e187d9{--display:flex;}.elementor-23 .elementor-element.elementor-element-0e187d9.e-con{--align-self:center;}.elementor-23 .elementor-element.elementor-element-847c8ae.elementor-element{--align-self:flex-start;}.elementor-23 .elementor-element.elementor-element-9eed66b{text-align:start;}.elementor-23 .elementor-element.elementor-element-9eed66b .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-e9cd220{--display:flex;}.elementor-23 .elementor-element.elementor-element-e9cd220.e-con{--align-self:center;}.elementor-23 .elementor-element.elementor-element-98e5130{--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;border-style:solid;--border-style:solid;border-width:1px 0px 0px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#CDD1D038;--border-color:#CDD1D038;--border-radius:32px 32px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:128px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;}.elementor-23 .elementor-element.elementor-element-98e5130:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-98e5130 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-23 .elementor-element.elementor-element-4201681{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23 .elementor-element.elementor-element-2c4efc3{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23 .elementor-element.elementor-element-2c4efc3.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-23 .elementor-element.elementor-element-f868dc9{text-align:start;}.elementor-23 .elementor-element.elementor-element-f868dc9 img{width:300px;}.elementor-23 .elementor-element.elementor-element-5090f4f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23 .elementor-element.elementor-element-0b634e2 > .elementor-widget-container{margin:0px 28px 0px 0px;padding:0px 0px 0px 0px;}.elementor-23 .elementor-element.elementor-element-0b634e2 .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-7317bb8-font-family ), Sans-serif;font-size:var( --e-global-typography-7317bb8-font-size );font-weight:var( --e-global-typography-7317bb8-font-weight );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-0b634e2 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-176cdd8 );fill:var( --e-global-color-176cdd8 );padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;}.elementor-23 .elementor-element.elementor-element-0b634e2{--e-nav-menu-horizontal-menu-item-margin:calc( 48px / 2 );}.elementor-23 .elementor-element.elementor-element-0b634e2 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:48px;}.elementor-23 .elementor-element.elementor-element-bb657e7{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23 .elementor-element.elementor-element-e695e8e{--divider-border-style:solid;--divider-color:#FAF8F32E;--divider-border-width:1px;}.elementor-23 .elementor-element.elementor-element-e695e8e .elementor-divider-separator{width:100%;}.elementor-23 .elementor-element.elementor-element-e695e8e .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-23 .elementor-element.elementor-element-7664cd9{--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:space-between;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23 .elementor-element.elementor-element-00336c7{text-align:center;}.elementor-23 .elementor-element.elementor-element-00336c7 .elementor-heading-title{font-family:var( --e-global-typography-7317bb8-font-family ), Sans-serif;font-size:var( --e-global-typography-7317bb8-font-size );font-weight:var( --e-global-typography-7317bb8-font-weight );line-height:var( --e-global-typography-7317bb8-line-height );color:var( --e-global-color-176cdd8 );}.elementor-23 .elementor-element.elementor-element-b1c3bf3{--grid-template-columns:repeat(0, auto);--icon-size:20px;--grid-column-gap:6px;--grid-row-gap:0px;}.elementor-23 .elementor-element.elementor-element-b1c3bf3 .elementor-widget-container{text-align:right;}.elementor-23 .elementor-element.elementor-element-b1c3bf3 .elementor-social-icon{background-color:var( --e-global-color-primary );--icon-padding:0.3em;border-style:solid;border-width:1px 1px 1px 1px;border-color:#EAEEF240;}.elementor-23 .elementor-element.elementor-element-b1c3bf3 .elementor-social-icon i{color:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-b1c3bf3 .elementor-social-icon svg{fill:var( --e-global-color-secondary );}.elementor-23 .elementor-element.elementor-element-75a03ee{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:32px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23 .elementor-element.elementor-element-35422d6.elementor-element{--align-self:flex-start;}.elementor-23 .elementor-element.elementor-element-a451556{--display:flex;}.elementor-23 .elementor-element.elementor-element-db6d19c > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-23 .elementor-element.elementor-element-a8c374b{--width:66%;}.elementor-23 .elementor-element.elementor-element-c98686a{--width:66%;}.elementor-23 .elementor-element.elementor-element-601103d{--width:66%;}.elementor-23 .elementor-element.elementor-element-3724c1d{--width:66%;}.elementor-23 .elementor-element.elementor-element-0a11962{--width:66%;}.elementor-23 .elementor-element.elementor-element-2c4efc3{--width:25%;}}@media(max-width:1024px) and (min-width:768px){.elementor-23 .elementor-element.elementor-element-2c4efc3{--width:100%;}}@media(max-width:1366px){.elementor-23 .elementor-element.elementor-element-b8227b2{--padding-top:0px;--padding-bottom:0px;--padding-left:32px;--padding-right:32px;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-23 .elementor-element.elementor-element-172e362 > .elementor-widget-container{margin:0px 12px 0px 0px;}.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-172e362{--e-nav-menu-horizontal-menu-item-margin:calc( 32px / 2 );}.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:32px;}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown .elementor-item, .elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-7317bb8-font-size );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-b73d462 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-3c1bb78{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-3e7e699 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-28fc870{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-b0d66ad .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-ad0ec9c{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-2c4efc3{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-23 .elementor-element.elementor-element-0b634e2 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-00336c7 .elementor-heading-title{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}}@media(max-width:1024px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-3920df5 img{width:100px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-23 .elementor-element.elementor-element-172e362 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-172e362{--e-nav-menu-horizontal-menu-item-margin:calc( 20px / 2 );}.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:20px;}.elementor-23 .elementor-element.elementor-element-41e280b{--padding-top:32px;--padding-bottom:32px;--padding-left:32px;--padding-right:32px;}body:not(.rtl) .elementor-23 .elementor-element.elementor-element-376bd8a{right:32px;}body.rtl .elementor-23 .elementor-element.elementor-element-376bd8a{left:32px;}.elementor-23 .elementor-element.elementor-element-376bd8a{top:64px;}.elementor-23 .elementor-element.elementor-element-376bd8a .elementor-icon{font-size:32px;}.elementor-23 .elementor-element.elementor-element-376bd8a .elementor-icon svg{height:32px;}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-fecf572.elementor-element{--align-self:flex-start;}.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown .elementor-item, .elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-7317bb8-font-size );}.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown a{padding-left:0px;padding-right:0px;padding-top:16px;padding-bottom:16px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-b73d462 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-3c1bb78{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-3e7e699 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-28fc870{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-b0d66ad .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-ad0ec9c{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-98e5130{--padding-top:96px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-23 .elementor-element.elementor-element-4201681{--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;}.elementor-23 .elementor-element.elementor-element-5090f4f{--margin-top:32px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-23 .elementor-element.elementor-element-0b634e2 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-00336c7 .elementor-heading-title{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}}@media(max-width:767px){.elementor-23 .elementor-element.elementor-element-b8227b2{--min-height:60px;--justify-content:space-between;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-3920df5 img{width:125px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-9ecb7ec .elementor-icon{font-size:24px;}.elementor-23 .elementor-element.elementor-element-9ecb7ec .elementor-icon svg{height:24px;}.elementor-23 .elementor-element.elementor-element-41e280b{border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:32px;--padding-bottom:32px;--padding-left:32px;--padding-right:32px;}body:not(.rtl) .elementor-23 .elementor-element.elementor-element-376bd8a{right:20px;}body.rtl .elementor-23 .elementor-element.elementor-element-376bd8a{left:20px;}.elementor-23 .elementor-element.elementor-element-376bd8a{top:16px;}.elementor-23 .elementor-element.elementor-element-376bd8a .elementor-icon{font-size:20px;}.elementor-23 .elementor-element.elementor-element-376bd8a .elementor-icon svg{height:20px;}.elementor-23 .elementor-element.elementor-element-953a9d3.elementor-element{--align-self:flex-start;}.elementor-23 .elementor-element.elementor-element-953a9d3 img{width:200px;}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-b2ee75c .elementor-divider{padding-block-start:5px;padding-block-end:5px;}.elementor-23 .elementor-element.elementor-element-fecf572 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-23 .elementor-element.elementor-element-fecf572.elementor-element{--align-self:flex-start;}.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown .elementor-item, .elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-7317bb8-font-size );}.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown a{padding-left:0px;padding-right:0px;padding-top:12px;padding-bottom:12px;}.elementor-23 .elementor-element.elementor-element-6870103 .elementor-divider{padding-block-start:5px;padding-block-end:5px;}.elementor-23 .elementor-element.elementor-element-f526813 .elementor-widget-container{text-align:left;}.elementor-23 .elementor-element.elementor-element-f526813.elementor-element{--align-self:flex-start;}.elementor-23 .elementor-element.elementor-element-f526813{--icon-size:16px;}.elementor-23 .elementor-element.elementor-element-f526813 .elementor-social-icon{--icon-padding:0.4em;}.elementor-23 .elementor-element.elementor-element-baa07fd{--border-radius:32px 32px 0px 0px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-b73d462 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-3c1bb78{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-a522fae{--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-23 .elementor-element.elementor-element-3e7e699 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-28fc870{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-bbf67bf{--gap:32px 32px;--row-gap:32px;--column-gap:32px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-23 .elementor-element.elementor-element-1f3a5ce{width:100%;max-width:100%;}.elementor-23 .elementor-element.elementor-element-ca56daa{--margin-top:0px;--margin-bottom:-160px;--margin-left:0px;--margin-right:0px;--padding-top:64px;--padding-bottom:0px;--padding-left:020px;--padding-right:20px;}.elementor-23 .elementor-element.elementor-element-2c7527d{--gap:32px 32px;--row-gap:32px;--column-gap:32px;--border-radius:0px 0px 0px 0px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-23 .elementor-element.elementor-element-231c189{width:100%;max-width:100%;}.elementor-23 .elementor-element.elementor-element-b0d66ad .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-ad0ec9c{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-927c27d{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-23 .elementor-element.elementor-element-a985cdc{--gap:32px 32px;--row-gap:32px;--column-gap:32px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-23 .elementor-element.elementor-element-98e5130{--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-23 .elementor-element.elementor-element-2c4efc3{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-23 .elementor-element.elementor-element-f868dc9 img{width:200px;}.elementor-23 .elementor-element.elementor-element-5090f4f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:32px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23 .elementor-element.elementor-element-0b634e2 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-23 .elementor-element.elementor-element-0b634e2 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-0b634e2{--e-nav-menu-horizontal-menu-item-margin:calc( 16px / 2 );}.elementor-23 .elementor-element.elementor-element-0b634e2 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:16px;}.elementor-23 .elementor-element.elementor-element-7664cd9{--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-23 .elementor-element.elementor-element-00336c7{text-align:start;}.elementor-23 .elementor-element.elementor-element-00336c7 .elementor-heading-title{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-b1c3bf3 .elementor-widget-container{text-align:left;}.elementor-23 .elementor-element.elementor-element-b1c3bf3{--icon-size:16px;}.elementor-23 .elementor-element.elementor-element-b1c3bf3 .elementor-social-icon{--icon-padding:0.4em;}}@media(max-width:1366px) and (min-width:768px){.elementor-23 .elementor-element.elementor-element-2c4efc3{--width:25%;}}@media(min-width:2400px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown .elementor-item, .elementor-23 .elementor-element.elementor-element-fecf572 .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-7317bb8-font-size );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-b73d462 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-3c1bb78{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-3e7e699 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-28fc870{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-23 .elementor-element.elementor-element-b0d66ad .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-23 .elementor-element.elementor-element-ad0ec9c{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-0b634e2 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}.elementor-23 .elementor-element.elementor-element-00336c7 .elementor-heading-title{font-size:var( --e-global-typography-7317bb8-font-size );line-height:var( --e-global-typography-7317bb8-line-height );}}/* Start custom CSS for nav-menu, class: .elementor-element-172e362 *//* ═══════════════════════════════════════════════════════════════════════
   DVA · WIDGET NAV MENU
   Custom CSS DO WIDGET (não da seção) → usa `.elementor-23 .elementor-element.elementor-element-172e362`.
   Links em névoa, sublinhado âmbar que cresce da esquerda.

   ⚠ O scroll suave das âncoras é do js-geral (initAnchors), que usa o
     Lenis e desconta a altura do header. Para não brigar:
     DESLIGUE o "Smooth Scroll" nas configurações do Elementor
     (Site Settings → Layout) ou os dois vão disputar o mesmo clique.
   ═══════════════════════════════════════════════════════════════════════ */

.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item{
  position:relative;
  font-family:Outfit,system-ui,sans-serif;
  font-size:var(--fs-1,1rem);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:rgba(234,238,242,.72);
  padding-bottom:4px;
  transition:color .25s ease;
}

.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--amber,#fdba06);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s var(--ease,cubic-bezier(.16,1,.3,1));
}

.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item:hover::after,
.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item.elementor-item-active::after,
.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item.highlighted::after{transform:scaleX(1)}

.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item:hover,
.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item.highlighted{color:#fff!important}

/* dropdown nativo do Elementor.
   Só sobrevive se você NÃO estiver usando o popup lateral. Se o popup for o
   menu mobile, este bloco inteiro é código morto — pode apagar. */
.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu--dropdown{
  background-color:rgba(4,15,52,.97)!important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu--dropdown .elementor-item{
  color:rgba(234,238,242,.82)!important;
  font-size:var(--fs-2,1.125rem);
  padding:.9rem 1.4rem;
}
.elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu--dropdown .elementor-item::after{display:none}

@media (prefers-reduced-motion:reduce){
  .elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item,
  .elementor-23 .elementor-element.elementor-element-172e362 .elementor-nav-menu .elementor-item::after{transition:none!important}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4183ada */.dva-menu-cta{
  --b-bg:#eaeef2;                          /* creme  */
  --b-fg:#040f34;                          /* navy   */
  --b-ease:cubic-bezier(.16,1,.3,1);
  position:relative;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.85rem 1.6rem;
  border-radius:999px;
  font-family:Outfit,system-ui,-apple-system,sans-serif;
  font-size:1rem;font-weight:400;letter-spacing:.01em;line-height:1;
  background:var(--b-bg);
  color:var(--b-fg)!important;
  text-decoration:none!important;
  white-space:nowrap;
  border:0;overflow:hidden;isolation:isolate;box-shadow:none;
  transition:transform .5s var(--b-ease),box-shadow .5s var(--b-ease);
}
/* trava a herança do tema em todos os estados */
.dva-menu-cta:link,.dva-menu-cta:visited,.dva-menu-cta:hover,
.dva-menu-cta:focus,.dva-menu-cta:active{
  color:var(--b-fg)!important;background:var(--b-bg);text-decoration:none!important;
}
/* cortina que sobe no hover */
.dva-menu-cta::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(4,15,52,.1);
  transform:translateY(101%);
  transition:transform .55s var(--b-ease);
}
.dva-menu-cta:hover::before{transform:translateY(0)}
.dva-menu-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}

.dva-menu-cta svg{
  width:16px;height:16px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--b-ease);
}
.dva-menu-cta:hover svg{transform:translateX(5px)}
.dva-menu-cta:focus-visible{outline:2px solid #fdba06;outline-offset:4px}

@media (max-width:560px){
  .dva-menu-cta{padding:.8rem 1.35rem;letter-spacing:.005em}
  .dva-menu-cta svg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dva-menu-cta,.dva-menu-cta::before,.dva-menu-cta svg{transition-duration:.001s!important}
}/* End custom CSS */
/* Start custom CSS for icon, class: .elementor-element-376bd8a */.elementor-23 .elementor-element.elementor-element-376bd8a{
    
    cursor: pointer;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-41e280b *//* ═══════════════════════════════════════════════════════════════════════
   DVA · POPUP OVERLAY (menu mobile)
   Custom CSS da SEÇÃO do popup · CSS ID: popup-overlay

   ⚠ A seção do popup precisa ser de PRIMEIRO NÍVEL e sem Motion Effects.
     position:fixed passa a se ancorar no ancestral se ele tiver transform
     ou filter — aí o painel some ou nasce no lugar errado.

   Abre/fecha pelo js-geral (initPopup): .open-popup / #close-button
   ═══════════════════════════════════════════════════════════════════════ */

/* Trava de scroll. O js-geral chama lenis.stop() junto — esta classe é o
   caminho para quando o Lenis está desligado (reduced-motion ou DVA_SMOOTH
   false). O scrollbar-gutter:stable no html (CSS do header) é o que impede
   a página de pular ~15px quando a barra some. */
body.popup-open{overflow:hidden!important}

#popup-overlay{
  position:fixed;
  top:0;right:0;
  width:30vw;
  height:100vh;
  height:100svh;
  background:rgba(4,15,52,.98);
  border-left:1px solid rgba(234,238,242,.12);
  color:var(--cream,#eaeef2);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  visibility:hidden;
  transform:translateX(100%);
  transition:
    opacity .6s var(--ease,cubic-bezier(.16,1,.3,1)),
    transform .6s var(--ease,cubic-bezier(.16,1,.3,1)),
    visibility .6s;
  z-index:9999;
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.55);
  /* se o menu ficar mais alto que a tela, rola dentro do painel sem
     arrastar a página atrás */
  overflow-y:auto;
  overscroll-behavior:contain;
}

#popup-overlay.active{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}

/* ── links ── */
#popup-overlay ul{margin:0;padding:0;list-style:none}
#popup-overlay a{
  font-family:Outfit,system-ui,sans-serif;
  font-weight:300;
  color:rgba(234,238,242,.82);
  text-decoration:none;
  transition:color .25s ease;
}
#popup-overlay a:hover,
#popup-overlay a:focus-visible{color:#fff}

/* ── botão de fechar ── */
#popup-overlay #close-button{
  position:absolute;
  top:28px;right:32px;
  cursor:pointer;
  color:rgba(234,238,242,.7);
  font-family:Outfit,system-ui,sans-serif;
  font-size:var(--fs-0,.8125rem);
  font-weight:400;
  letter-spacing:var(--ls-label,.2em);
  text-transform:uppercase;
  transition:color .25s ease;
}
#popup-overlay #close-button:hover,
#popup-overlay #close-button:focus-visible{color:#fff}

@media (max-width:1280px){#popup-overlay{width:40vw}}
@media (max-width:1024px){#popup-overlay{width:60vw}}
@media (max-width:767px) {#popup-overlay{width:88vw}}

@media (prefers-reduced-motion:reduce){
  #popup-overlay{transition:opacity .2s linear,visibility .2s linear!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   REMOVIDO: a classe .closing.

   Ela era idêntica ao estado base (opacity:0 / visibility:hidden /
   translateX(100%)) e existia só para trocar a duração de .85s para .65s no
   fechamento. Custo: o JS precisava adicionar .closing, remover .active,
   esperar 650ms num setTimeout e limpar tudo — e qualquer clique duplo ou
   Escape no meio da janela deixava o painel num estado misto.

   Agora é uma classe só (.active) e a mesma transição de .6s serve nos dois
   sentidos. Sem timer, sem estado intermediário, sem corrida.
   ═══════════════════════════════════════════════════════════════════════ *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8227b2 *//* ═══════════════════════════════════════════════════════════════════════
   DVA · HEADER FIXO + SISTEMA GLOBAL
   Custom CSS da SEÇÃO do header. Classe da seção: dva-header

   Este arquivo é o lar do global porque o header carrega em toda página.
   ⚠ O :root TEM que morar aqui. Antes ele estava no CSS do widget do hero,
     e este mesmo arquivo já usava var(--amber), var(--fs-2), var(--r-card)
     sem fallback — em qualquer página sem o hero essas regras quebravam.

   Toggle .is-scrolled = js-geral (initHeader, gatilho 50px).
   ═══════════════════════════════════════════════════════════════════════ */


/* ═════════════════════════ TOKENS ═════════════════════════ */

:root{
--navy:#040f34;--cream:#eaeef2;
--blue:#0a6ab9;--blue-lt:#5aa9e6;--orange:#fe5d03;--cta:#c73f00;--amber:#fdba06;--green:#66af5b;--coral:#ff7b7b;
--ease:cubic-bezier(.16,1,.3,1);
/* escala modular 1.2 a partir de 18px. 300 padrão, 400 ênfase. nada < 16px */
--fs-0:.875rem;   /* 13px  eyebrow e número */
--fs-1:1rem;       /* 16px  rótulos, menu, botões */
--fs-2:1.125rem;   /* 18px  corpo */
--fs-3:1.35rem;    /* 21.6px lead */
--fs-4:1.625rem;   /* 26px  h3 */
--fs-5:clamp(1.75rem,3.2vw,2.33rem);
--fs-6:clamp(2.1rem,4.4vw,3.35rem);
--fs-7:clamp(2.6rem,6vw,4rem);
--ls-tight:-.022em;--ls-label:.2em;
--r-pill:999px;--r-card:2px;
--wrap:1280px;

/* ═══ ESPAÇAMENTO ═══
   --sp = padding vertical padrão de seção · --gut = padding lateral
   desktop 128/32 · tablet 96/32 · mobile 64/20
   O topo do hero deriva daqui: header + (--sp / 2). */
--sp:128px;--gut:32px;

/* Altura do header. Este valor é só o palpite do PRIMEIRO PAINT: o js-geral
   remede com getBoundingClientRect e sobrescreve via style inline no <html>,
   que vence estas regras. Mantê-lo certo por breakpoint evita o pulo de 20px
   no mobile entre o primeiro paint e a medição. */
--dva-head-h:80px;
}
@media (max-width:1039px){:root{--sp:96px}}
@media (max-width:767px){:root{--sp:64px;--gut:20px;--dva-head-h:60px}}


/* ═════════════════════════ BASE GLOBAL ═════════════════════════ */

/* Lenis */
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

html{
  -webkit-text-size-adjust:100%;
  background:#040f34;
  /* reserva a calha da barra de rolagem: sem isto a página pula ~15px
     quando o popup trava o scroll */
  scrollbar-gutter:stable;
}

body{
  margin:0;
  color:rgba(234,238,242,.93);
  font-family:Outfit,system-ui,-apple-system,sans-serif;
  font-weight:300;
  font-size:var(--fs-2);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;height:auto}
p{margin:0 0 1.2em}
::selection{background:var(--amber);color:#040f34}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:var(--r-card)}
.dva-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* a{color:inherit} e ul{list-style:none} NÃO vão em global de propósito:
   sitewide isso mata a afordância de link e os marcadores de lista em
   qualquer conteúdo editorial futuro. Ficam escopados nas seções. */


/* ═════════════ ANTI-FOUC + MODO SEM MOVIMENTO ═════════════ */
/* A classe .dva-pre é aplicada pelo script no <head>. O GSAP a remove
   assim que assume o estado inicial (prep) — estado inicial e final nunca
   moram em sistemas diferentes. */

html.dva-pre [data-words],
html.dva-pre [data-r],
html.dva-pre [data-stagger]>*{opacity:0}
/* ⚠ O monitor e a rede do hero PRECISAM estar aqui.
   O estado inicial deles era escrito só no prep(), que roda depois das libs
   carregarem — então no primeiro paint os dois apareciam, sumiam quando o
   prep rodava e voltavam com a timeline. Era o "pisca" do hero.
   Estado inicial e final têm que morar no mesmo lugar (lição 2). */
html.dva-pre .mock__lap,
html.dva-pre .hero__net{opacity:0}
html.dva-pre .dva-rule i{transform:scaleX(0)}

html.dva-still *{animation:none!important;transition-duration:.001s!important}

@media (prefers-reduced-motion:reduce){
  html.dva-pre [data-words],
  html.dva-pre [data-r],
  html.dva-pre [data-stagger]>*,
  html.dva-pre .mock__lap,
  html.dva-pre .hero__net{opacity:1!important}
  [data-words],[data-r],[data-stagger]>*{opacity:1!important}
  .dva-wi{transform:none!important}
  .dva-rule i{transform:scaleX(1)!important}
}

/* estrutura permanente da máscara de palavra — é layout, não estado.
   Global porque qualquer seção com [data-words] depende dela. */
.dva-wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
.dva-wi{display:inline-block}

/* sprite de ícones */
.dva-sprite{position:absolute;width:0;height:0;overflow:hidden}


/* ═══════════ BASE DAS SEÇÕES ═══════════
   Veio do CSS do widget do hero. Mora aqui porque toda seção da página
   depende dela — deixá-la num widget faz as outras seções quebrarem se
   aquele widget for removido. */

.dva-s,.dva-s *,.dva-s *::before,.dva-s *::after{box-sizing:border-box}

.dva-s{
position:relative;
padding-block:var(--sp);
background:var(--navy);
font-family:Outfit,system-ui,-apple-system,sans-serif;
font-weight:300;font-size:var(--fs-2);line-height:1.7;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
--fg:rgba(234,238,242,.93);--fg2:rgba(234,238,242,.62);--hl:#eaeef2;--acc:#fdba06;--num:#fe5d03;
--line:rgba(90,169,230,.085);--node:#5aa9e6;--nodehi:#fdba06;
--hair:rgba(216,221,233,.15);--hair2:rgba(216,221,233,.28);
--surf:rgba(255,255,255,.03);--surfb:rgba(216,221,233,.13);
color:var(--fg);
}
/* Tom claro. O fundo fica só no .dva-s (chrome); .dva-tone--light entrega
   apenas as variáveis, para blocos montados à mão. */
.dva-s[data-tone=light],.dva-s--light{background:var(--cream)}
.dva-s[data-tone=light],.dva-s--light,.dva-tone--light{
--fg:rgba(4,15,52,.95);--fg2:rgba(4,15,52,.68);--hl:#040f34;--acc:#0a6ab9;--num:#0a6ab9;
--line:rgba(10,106,185,.085);--node:#0a6ab9;--nodehi:#fe5d03;
--hair:rgba(20,29,61,.13);--hair2:rgba(20,29,61,.26);
--surf:rgba(255,255,255,.5);--surfb:rgba(20,29,61,.1)}

/* Trava o tema e o kit do Elementor. Fica escopado de propósito: sitewide,
   a{color:inherit} mata a afordância de link e ul{list-style:none} mata os
   marcadores. p e img já vêm do global.

   ⚠⚠ ARMADILHA — LEIA ANTES DE ESTILIZAR QUALQUER TÍTULO NOVO.
   A linha abaixo é (0,1,1): uma classe MAIS um elemento. Qualquer regra de
   componente com UMA classe só — `.minha-secao__t` — é (0,1,0) e PERDE para
   ela, independente da ordem em que o Elementor imprima. Não é empate; é
   derrota silenciosa.
   O que ela leva junto: margin, line-height, letter-spacing e font-weight.
   O font-size escapa, porque ela não declara font-size — e é por isso que o
   sintoma engana: o título muda de tamanho normalmente, então parece que o
   CSS "está pegando", enquanto o margin-bottom e o line-height são ignorados.
   Foi assim que os três h3 da página (.dva-jr__t, .dva-card__t, .dva-car__t)
   ficaram com margin-bottom ZERO sem ninguém perceber.

   ▸ REGRA DA CASA: título dentro de .dva-s leva DOIS seletores.
       .dva-jr .dva-jr__t   ✔ (0,2,0)
       .dva-jr__t           ✘ (0,1,0) — morre calado
     E se houver override responsivo desse título, ele precisa dos dois
     seletores TAMBÉM, senão passa a perder para a própria regra base. */
.dva-s h1,.dva-s h2,.dva-s h3,.dva-s h4{font-family:Outfit,system-ui,sans-serif;font-weight:400;margin:0;line-height:1.12;letter-spacing:-.012em;text-wrap:balance}
.dva-s a{color:inherit;text-underline-offset:.28em;text-decoration-thickness:1px}
.dva-s ul{margin:0;padding:0;list-style:none}
.dva-s button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}

/* grão */
.dva-s::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

.dva-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:3}

/* constelação neural de fundo (SVG gerado pelo JS) */
.dva-const{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* 128% de altura com -14% no topo: sobra material para o parallax deslocar
   sem abrir buraco nas bordas. O clip continua sendo do .dva-const, então
   nada vaza para a seção vizinha. */
.dva-const svg{position:absolute;left:0;top:-14%;width:100%;height:128%;display:block}
.dva-const path{stroke:var(--line,rgba(90,169,230,.1));stroke-width:1;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dva-const circle{fill:var(--node,#5aa9e6);opacity:.34}
.dva-const circle.hi{fill:var(--nodehi,#fdba06);opacity:.5}
.dva-const circle.ha{fill:none;stroke:var(--node,#5aa9e6);stroke-width:1;opacity:.14;vector-effect:non-scaling-stroke}

/* filete numerado de seção */
/* --rule-mb existe porque a folga certa depende de COMO a seção foi montada:
   num widget único (seção 01) o espaço todo é meu; em widgets separados no
   Elementor, meu margin soma com o espaçamento que ele põe entre widgets, e
   64px viravam ~90. O padrão agora serve ao caso montado à mão; para
   recuperar o valor antigo em algum bloco, basta style="--rule-mb:4rem". */
.dva-rule{display:flex;align-items:center;gap:1.15rem;margin-bottom:var(--rule-mb,clamp(1rem,1.9vw,1.35rem))}
.dva-rule i{flex:1;height:1px;background:var(--hair2,rgba(216,221,233,.28));transform-origin:left center;display:block}
/* --num é token PRÓPRIO do número, separado do --acc de propósito: o --acc
   também pinta o <em> da pivot, o hover do FAQ e os ícones, e nem todos
   aguentam laranja. Laranja só passa no navy (6,04:1); no creme dá 2,66:1
   e reprova, então lá o número segue azul.
   O número da seção vira MARCO, não legenda: corpo maior e um nó com halo
   do lado. É o mesmo desenho dos nós da constelação (.dva-const circle.ha),
   então cada abertura lê como um nó no mesmo axônio que atravessa a página —
   em vez de um rótulo de 13px que some. */
.dva-num{position:relative;font-family:Outfit,sans-serif;font-weight:400;
  font-size:var(--fs-3);letter-spacing:0;color:var(--num,#fe5d03);line-height:1;flex:none;
  font-variant-numeric:tabular-nums;padding-left:1.35rem}
.dva-num::before{content:'';position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--num,#fe5d03)}
.dva-num::after{content:'';position:absolute;left:-3px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;border-radius:50%;border:1px solid var(--num,#fe5d03);opacity:.26}
.dva-kicker{font-family:Outfit,sans-serif;font-weight:400;font-size:var(--fs-0);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--fg2,rgba(234,238,242,.62));line-height:1;flex:none;margin:0}

/* Variante centralizada. Mesmos elementos, mesmo nó com halo, mesma
   tipografia — só muda o eixo.
   O filete NÃO vira dois: a função dele é ancorar o marcador à margem
   esquerda e levar o olho até a largura do conteúdo. Centralizado ele não
   ancora nada, e filete dos dois lados já tinha sido descartado na pivot.
   O gap fecha um pouco porque grupo centralizado lê melhor mais compacto. */
.dva-rule--c{
  justify-content:center;
  gap:.95rem;
  /* Um pouco mais fechado que a versão alinhada: sem o filete para ancorar
     o marcador, é só a proximidade que amarra o rótulo ao título. */
  margin-bottom:var(--rule-mb,clamp(.9rem,1.7vw,1.2rem));
}

/* botão. cor travada em TODOS os estados — tema de WP adora sequestrar <a> */
.dva-btn{position:relative;display:inline-flex;align-items:center;gap:.8rem;padding:1.15rem 2.25rem;border-radius:var(--r-pill);font-family:Outfit,sans-serif;font-size:var(--fs-1);font-weight:400;letter-spacing:.01em;background:var(--orange);color:#fff !important;text-decoration:none !important;line-height:1;white-space:nowrap;border:0;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),box-shadow .5s var(--ease);box-shadow:0 12px 30px -14px rgba(254,93,3,.5)}
/* ⚠ --cta e NÃO --orange. Texto branco sobre o #fe5d03 da marca dá 3,10:1 e
   reprova no AA (mínimo 4,5:1 para texto normal, e o rótulo aqui é 16px).
   O #c73f00 dá 5,07:1 e não é cor nova: já é o laranja do tom claro, o mesmo
   do pilar Estrutura na 05.
   O --orange continua o da marca e segue valendo para decoração — pontos do
   mock, gradiente da ilustração, barra de progresso. Ali ele não carrega
   texto, então não há requisito de contraste. */
.dva-btn:link,.dva-btn:visited,.dva-btn:hover,.dva-btn:focus,.dva-btn:active{color:#fff !important;background:var(--cta,#c73f00);text-decoration:none !important}
.dva-btn::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.22);transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.dva-btn:hover::before{transform:translateY(0)}
.dva-btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(254,93,3,.55)}
.dva-btn svg{width:16px;height:16px;flex:none;transition:transform .5s var(--ease)}
.dva-btn:hover svg{transform:translateX(5px)}
.dva-btn--lg{padding:1.25rem 2.5rem;font-size:var(--fs-1)}
.dva-btn--full{width:100%;justify-content:center}


/* ══════════ TOKENS SEM CHROME ══════════
   .dva-s faz duas coisas: fornece os tokens de cor E aplica o chrome da
   seção (fundo, padding, grão, tipografia, position:relative). Para um bloco
   montado à mão no Elementor, que já tem seu próprio fundo e espaçamento,
   isso é demais. .dva-tone entrega SÓ as variáveis. */
.dva-tone{
--fg:rgba(234,238,242,.93);--fg2:rgba(234,238,242,.62);--hl:#eaeef2;--acc:#fdba06;--num:#fe5d03;
--line:rgba(90,169,230,.085);--node:#5aa9e6;--nodehi:#fdba06;
--hair:rgba(216,221,233,.15);--hair2:rgba(216,221,233,.28);
--surf:rgba(255,255,255,.03);--surfb:rgba(216,221,233,.13)}


/* ═════════════════════════ HEADER ═════════════════════════ */

.dva-header{
  /* acima do monitor pinado do hero, que vira position:fixed com z-index 4 */
  z-index:100;

  /* ESTADO BASE: invisível. Sem fundo, sem blur, sem sombra.
     O backdrop-filter fica FORA daqui de propósito — ele não é só estética:
     uma faixa com blur por cima do hero obriga o navegador a reprocessar
     aquela região a cada quadro, e logo abaixo dela está a rede neural
     pulsando. Sem scroll, custo zero. */
  background-color:transparent!important;
  box-shadow:none;

  /* a borda existe na caixa desde o início, mas transparente. Usar
     border-bottom:none aqui e 1px no is-scrolled mudaria a altura do header
     em 1px no meio do scroll — e essa altura é o que headerH() usa no offset
     das âncoras. Assim ela só acende, sem empurrar nada. */
  border-bottom:1px solid transparent;

  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}

/* ⚠ CAUSA #1 de "o header scrollado não muda de cor":
   se a seção tiver "Background Overlay" configurado no Elementor, ele vira um
   ::before opaco DESENHADO POR CIMA do background-color. Trocar a cor de fundo
   deixa de ter efeito visível — a mudança acontece, só está encoberta.
   Apague o overlay no painel do Elementor, ou deixe esta linha resolvendo. */
.dva-header > .elementor-background-overlay{display:none!important}

/* Dois ganchos para o mesmo estado. O .is-scrolled é o certo; o
   html.dva-scrolled é rede para quando a classe dva-header acaba num wrapper
   diferente do que o Elementor deixa acessível (sticky, container aninhado). */
.dva-header.is-scrolled,
html.dva-scrolled .dva-header,
html.dva-scrolled .elementor-location-header{
  background-color:rgba(4,15,52,.9)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:rgba(234,238,242,.1);
  box-shadow:0 1px 24px -8px rgba(0,0,0,.35);
}

/* logo encolhe no scroll */
.dva-header .elementor-widget-theme-site-logo img,
.dva-header .elementor-widget-image img{
  transition:transform .3s var(--ease);
  transform-origin:left center;
}
.dva-header.is-scrolled .elementor-widget-theme-site-logo img,
.dva-header.is-scrolled .elementor-widget-image img{transform:scale(.88)}

/* CTA gelo — o laranja fica só nas conversões */
.dva-header .elementor-button,
.dva-header .dva-cta{
  background:var(--cream)!important;
  color:var(--navy)!important;
  font-family:Outfit,system-ui,sans-serif;
  font-size:var(--fs-1);
  font-weight:400;
  letter-spacing:.005em;
  text-transform:none;
  padding:.85rem 1.6rem;
  border:1px solid transparent!important;
  border-radius:var(--r-pill);
  box-shadow:none;
  /* border-color estava mudando no hover sem estar na lista — a borda
     aparecia de estalo enquanto o resto animava */
  transition:background .35s var(--ease),color .35s ease,border-color .35s ease,transform .35s var(--ease);
}
.dva-header .elementor-button:hover,
.dva-header .dva-cta:hover{
  background:transparent!important;
  color:var(--cream)!important;
  border-color:rgba(234,238,242,.45)!important;
  transform:translateY(-2px);
}

/* gatilho do menu mobile */
.dva-header .elementor-menu-toggle,
.dva-header .open-popup{color:var(--cream)!important;cursor:pointer}
.dva-header .elementor-menu-toggle svg{fill:var(--cream)!important}

/* OPCIONAL — barra de progresso de leitura.
   Se quiser, ponha <i class="dva-prog" id="dva-progress"></i> como último
   filho da seção do header. O js-geral já alimenta se existir. */
.dva-prog{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--orange);
  transform:scaleX(0);transform-origin:left center;
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.dva-header.is-scrolled .dva-prog{opacity:1}

@media (prefers-reduced-motion:reduce){
  .dva-header,
  .dva-header .elementor-widget-image img,
  .dva-header .elementor-widget-theme-site-logo img,
  .dva-header .elementor-button,
  .dva-header .dva-cta{transition:none!important}
}


/* ═══════════════════════════════════════════════════════════════════════
   REMOVIDO NESTA PASSAGEM (e por quê):

   · html.dva-still / .dva-head / main / @media {...}
     Regra inválida — @media dentro de lista de seletores descarta a regra
     inteira pela spec. Nunca aplicou nada, nem aqui nem no arquivo original.
     O que ela pretendia fazer (.dva-head/main/footer com z-index:2 e
     .logo__t oculto <=640px) referencia classes que não existem mais: o
     header agora é Elementor.

   · html.dva-still .nnp / .net / .hero__art .rt
     .rt não existe em lugar nenhum. As outras duas já vivem no CSS do
     widget do hero, onde pertencem — são da rede neural, não do global.

   · main{background:var(--navy)}
     html já é #040f34 e cada .dva-s pinta o próprio fundo. Depender de um
     <main> que o tema pode não emitir era ponto de falha à toa.

   · button{...} reset
     Global demais: zera o estilo de qualquer <button> do Elementor.
     Foi para o CSS das seções que realmente usam <button> cru (FAQ, preço).

   · a{color:inherit} e ul{list-style:none}
     Ver comentário na base global.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════ BOTÃO SECUNDÁRIO (fantasma) ═══════════
   Filete e texto, sem preenchimento. O laranja do .dva-btn continua
   reservado para conversão — este é para convite no meio da leitura.
   Segue o tom pelos tokens (branco no navy, navy no creme) e tem fallback
   embutido, então funciona sem .dva-s nem .dva-tone acima.
   Todos os estados travados: tema de WP adora sequestrar <a>, e botão sem
   fundo não tem como disfarçar quando isso acontece. */
.dva-ghost{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.9rem 1.8rem;
  border:1px solid var(--hair2,rgba(216,221,233,.28));
  border-radius:var(--r-pill,999px);
  font-family:Outfit,system-ui,sans-serif;
  font-size:var(--fs-1,1rem);font-weight:400;letter-spacing:.01em;line-height:1;
  background:transparent;
  white-space:nowrap;
  transition:border-color .45s var(--ease,cubic-bezier(.16,1,.3,1)),
             background .45s var(--ease,cubic-bezier(.16,1,.3,1)),
             transform .45s var(--ease,cubic-bezier(.16,1,.3,1));
}
.dva-ghost:link,.dva-ghost:visited,.dva-ghost:hover,
.dva-ghost:focus,.dva-ghost:active{
  color:var(--hl,#eaeef2)!important;text-decoration:none!important;
}
.dva-ghost:hover{
  border-color:var(--hl,#eaeef2);
  background:var(--surf,rgba(255,255,255,.05));
  transform:translateY(-2px);
}
.dva-ghost svg{
  width:15px;height:15px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease,cubic-bezier(.16,1,.3,1));
}
.dva-ghost:hover svg{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  .dva-ghost,.dva-ghost svg{transition-duration:.001s!important}
  .dva-ghost:hover{transform:none}
  .dva-ghost:hover svg{transform:none}
}

/* ═══════════ COMPONENTE · DECLARAÇÃO ═══════════
   Frase única centralizada com sinapse atrás. Usado pela pivot ("Pioneira
   no Brasil") e pelo shout ("Pare de tentar se encaixar") — são o mesmo
   device, então são o mesmo componente.
   Mora no global e não no widget da pivot porque duas seções dependem dele:
   se ficasse lá, apagar a pivot quebraria o shout.

   ▸ --pv-w  regula a largura da frase (em ch)
   ▸ .dva-pv--mir  espelha o sentido do pulso na sinapse
   respira mais que uma seção comum: é a tese da página, não um bloco a mais.
   Continua derivado do token, então acompanha o ritmo geral. */
/* ▸ --pv-sp controla o ar em cima e embaixo das duas frases de destaque.
   Era calc(--sp * 2) = 256px de cada lado. O cliente pediu metade: agora
   herda o --sp da seção, 128px no desktop e 96px abaixo de 1040.
   As duas seções (pivot e shout) usam este mesmo componente, então o número
   vale para as duas — que é o que ele pediu. */
.dva-pv{
  /* ▸ largura da frase — cada instância pode ajustar */
  --pv-w:20ch;
  /* o halo é uma poça da PRÓPRIA cor de fundo da seção: some a sinapse por
     trás do texto sem mascarar nada. Por isso segue o tom, e não o creme
     cravado — senão viraria um clarão branco se a seção fosse navy. */
  --halo:#040f34;--halo-6:rgba(4,15,52,.72);--halo-0:rgba(4,15,52,0);
  text-align:center;
  overflow:hidden;
  padding-block:var(--pv-sp,var(--sp));
}

/* ── a sinapse ── */
.pv__wire{
  position:absolute;
  left:0;right:0;top:50%;
  transform:translateY(-50%);
  z-index:1;
  pointer-events:none;
}
.pv__wire svg{width:100%;height:auto;display:block;overflow:visible}
.pv__ln{
  fill:none;
  stroke:var(--node);
  stroke-width:1.4;
  stroke-linecap:round;
  opacity:.3;
  vector-effect:non-scaling-stroke;
}
/* o pulso é o MESMO path com um traço curto. Rolar move o stroke-dashoffset,
   então a posição do pulso É a posição do scroll — sem plugin de motion path
   e sem cálculo de geometria em JS. */
.pv__ps{
  fill:none;
  stroke:var(--amber);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:2.5 100;
  vector-effect:non-scaling-stroke;
}
.pv__nd{fill:var(--node);opacity:.45}

/* halo: pool de luz onde a frase pousa. Fica ENTRE a sinapse e o texto,
   então a linha some por trás da leitura sem precisar mascarar nada. */
.pv__halo{
  position:absolute;
  /* inset 0 + margin:auto centraliza SEM transform. Playbook: centralização e
     parallax não podem morar no mesmo elemento — assim o transform fica
     inteiramente com o GSAP. */
  inset:0;margin:auto;
  width:min(760px,92%);
  aspect-ratio:1.9/1;
  z-index:2;
  pointer-events:none;
  /* o stop final é a MESMA cor com alfa 0, não "transparent" (que é preto
     transparente e pode deixar franja cinza na interpolação) */
  background:radial-gradient(closest-side,
    var(--halo) 36%, var(--halo-6) 62%, var(--halo-0) 100%);
}

.dva-pv[data-tone=light],
.dva-pv.dva-s--light{--halo:#eaeef2;--halo-6:rgba(234,238,242,.72);--halo-0:rgba(234,238,242,0)}

/* ── eyebrow ── */
.pv__eb{margin:0 0 clamp(.95rem,1.8vw,1.2rem)}
.pv__eb .dva-kicker{color:var(--acc)}

/* ── a frase ── */
.pv__t{
  font-family:Outfit,system-ui,sans-serif;
  font-weight:300;
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.18;
  letter-spacing:-.018em;
  max-width:var(--pv-w);
  margin:0 auto;
  color:var(--hl);
  text-wrap:balance;
}
.pv__t em{font-style:normal;color:var(--acc)}

/* o botão desta seção é o .dva-ghost do sistema — o mesmo da seção 02.
   Aqui só a folga em relação à frase. */
.dva-pv .dva-ghost{margin-top:clamp(2rem,4vw,2.9rem)}



/* ══════════ RESPONSIVO ══════════ */

@media (max-width:767px){
  /* a sinapse fica alta demais em tela estreita (a altura do SVG é 1/5.45 da
     largura): sobe a escala pra ela ainda cruzar a frase */
  .pv__wire{width:150%;left:-25%;right:auto}
  .pv__halo{width:112%}
  .pv__t{font-size:clamp(1.6rem,7vw,2.1rem);max-width:none}
  .dva-pv{--pv-w:16ch}
  .dva-pv .dva-ghost{padding:.8rem 1.4rem}
}

/* Sem JS ou com movimento reduzido, o estado inicial nunca é escrito — tudo
   nasce visível. O bloco abaixo só desliga o que seria animação. */
@media (prefers-reduced-motion:reduce){
  .pv__ps{display:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-aedc59f *//* ═══════════════════════════════════════════════════════════════════════
   DVA · CSS do widget HERO + SEÇÃO 01
   Cole no campo "CSS personalizado" do widget HTML.

   PARTE A = base compartilhada. Vira o CSS global (Custom Code <head>)
             quando as outras seções entrarem. Por ora vive aqui.
   PARTE B = só hero + seção 01.

   Renomeei as classes genéricas do arquivo original para o namespace dva-
   (.wrap→.dva-wrap, .btn→.dva-btn, .const→.dva-const, .hero→.dva-hero,
   .num/.kicker→.dva-num/.dva-kicker, .rot→.dva-rot, .wi→.dva-wm).
   Motivo: .wrap, .btn e .h2 colidem com temas de WP e com o Bootstrap.
   O JS do rodapé já vem com os nomes novos.
   ═══════════════════════════════════════════════════════════════════════ */


/* Base compartilhada (.dva-s, .dva-wrap, .dva-const, .dva-rule, .dva-btn,
   tokens) MIGROU para o CSS do header, que é global. Ela deixou de ser
   "coisa do hero" quando a segunda seção passou a depender dela.
   Este arquivo agora tem só hero + seção 01. */

/* ══════════════════════ PARTE B · HERO + SEÇÃO 01 ══════════════════════ */

/* .dva-hero NÃO pode ter overflow:hidden — recorta o elemento pinado.
   O clip mora no __top. padding-block:0 anula o de .dva-s, que somava
   ~290px de espaço morto e jogava o CTA para fora da primeira dobra. */
.dva-hero{position:relative;padding-block:0 var(--sp)}
/* Sem min-height de viewport: a altura vem do conteúdo. A "primeira dobra"
   deixa de ser uma trava e o monitor sobe naturalmente para dentro dela.
   Efeito colateral bom: acaba o desencontro com a admin bar do WP. */
/* topo = altura do header + metade do padding padrão de seção.
   Como --dva-head-h é remedido pelo JS, mudar a altura do header no
   Elementor reajusta isto sozinho. O bottom é 0 em toda largura: a folga
   até o monitor é controlada num lugar só, o margin-top do .hero__sw. */
.hero__top{position:relative;overflow:hidden;display:flex;align-items:center;padding-block:calc(var(--dva-head-h,80px) + var(--sp) / 2) 0}
.hero__w{display:grid;grid-template-columns:1fr;gap:2.2rem;width:100%;align-items:center}
.hero__art{color:var(--blue-lt);pointer-events:none}
.hero__net{position:relative;width:100%}
.hero__net .nnsvg{width:100%;height:auto;display:block;overflow:visible}

/* cérebro externo via máscara. Percentuais = bbox real dos paths originais
   dentro do viewBox "1030 1060 1950 1878". NÃO ALTERAR: é o que mantém o
   line-art alinhado com os nós da rede neural. */
.hero__bx{
position:absolute;left:1.017%;top:1.012%;width:97.938%;height:97.870%;
background:currentColor;opacity:.07;pointer-events:none;
-webkit-mask:url("/wp-content/uploads/2026/07/cerebro.svg") center center/contain no-repeat;
        mask:url("/wp-content/uploads/2026/07/cerebro.svg") center center/contain no-repeat;
}

/* três camadas de peso da rede */
.nne{fill:none;stroke:rgba(90,169,230,.22);stroke-width:2.2;stroke-linecap:round;transition:stroke .55s ease,opacity .55s ease}
.nne--long{stroke:rgba(90,169,230,.11)}
.nnn{fill:rgba(90,169,230,.3);transition:fill .55s ease,opacity .55s ease}
.nnn--faint{fill:rgba(90,169,230,.17)}
.nnn--hub{fill:rgba(90,169,230,.5)}
.nnr{fill:none;stroke:rgba(253,186,6,0);stroke-width:3;transition:stroke .5s ease}

/* pulso: pathLength=100 normaliza todo caminho, então UMA keyframe serve p/ todos */
.nnp{fill:none;stroke:var(--amber);stroke-width:3;stroke-linecap:round;stroke-dasharray:3 100;opacity:0;animation:nnFlow 7s linear infinite;transition:opacity .5s ease,stroke-width .5s ease}
.nnp--amb{opacity:.3;stroke-width:2.2;animation-duration:9s}
@keyframes nnFlow{from{stroke-dashoffset:103}to{stroke-dashoffset:0}}

/* foco: o cluster ativo acende, os outros recuam */
.nnsvg[data-on] .nnc:not(.on) .nne,.nnsvg[data-on] .nnc:not(.on) .nnn{opacity:.3}
.nnsvg[data-on] .nnc:not(.on) .nnp{opacity:.06}
.nnsvg[data-on] .amb .nne,.nnsvg[data-on] .amb .nnn{opacity:.2}
.nnsvg[data-on] .amb .nnp{opacity:.1}
.nnc.on .nne{stroke:rgba(253,186,6,.6)}
.nnc.on .nnn{fill:rgba(253,186,6,.8)}
.nnc.on .nnn--hub{fill:var(--amber)}
.nnc.on .nnp{opacity:1;stroke-width:4;animation-duration:2.8s}
.nnc.on .nnr{stroke:rgba(253,186,6,.32)}

/* rótulos dos clusters */
.nnl{opacity:0;transition:opacity .55s ease}
.nnc.on .nnl{opacity:1}
.nnlb{fill:rgba(4,15,52,.9);stroke:rgba(253,186,6,.5);stroke-width:2}
.nnlt{font-family:Outfit,sans-serif;font-weight:400;font-size:56px;fill:#fff}
.nnll{stroke:rgba(253,186,6,.45);stroke-width:2}
.nnld{fill:var(--amber)}
.nnsvg .net{animation:nnBreathe 11s ease-in-out infinite}
@keyframes nnBreathe{0%,100%{opacity:1}50%{opacity:.9}}

html.dva-still .nnp,html.dva-still .nnsvg .net{animation:none !important}
html.dva-still .nnp{opacity:0 !important}
@media (prefers-reduced-motion:reduce){
.nnp{animation:none !important;opacity:0 !important}
.nnsvg .net{animation:none !important}
.nne,.nnn,.nnr{transition:none !important}
}

.hero__c{position:relative;z-index:3}
/* calibrado com as métricas da Outfit: 135px do card na dobra, folga de 14px sobre o CTA */
/* era -15vh: existia só para compensar o min-height:100svh do .hero__top.
   Sem a trava de viewport, a folga vira uma distância real entre o CTA e o
   monitor. É AQUI que se regula esse respiro. */
.hero__sw{position:relative;z-index:4;margin-top:clamp(2rem,4.5vw,3.75rem)}
.hero__stage{width:100%;transform-origin:50% 50%;pointer-events:none;will-change:transform}


/* ⚠ .dva-s.dva-hero e não .dva-hero: contra o global `.dva-s h1` (0,1,1)
   este seletor era (0,1,1) TAMBÉM — empate, e no empate ganha quem o
   Elementor imprimir por último. Hoje ganha o widget e a headline fica
   certa; no dia em que o global vier depois, ela herda margin:0 e
   line-height:1.12 e COLA no subtítulo. (0,2,1) tira a disputa. */
.dva-s.dva-hero h1{font-size:var(--fs-6);line-height:1.06;letter-spacing:var(--ls-tight);margin:0 0 1.6rem;max-width:20ch}
/* h1 inteira em branco. O único destaque é a palavra rotativa. */
.hero__l1,.hero__l2,.hero__l3{display:block;color:#fff}

/* ▸ A LINHA DA PALAVRA ROTATIVA.
   Cresce a LINHA inteira, não só o <span> da palavra: o ponto final mora
   fora dele no HTML, e escalando só a palavra o ponto ficaria no tamanho
   antigo, denunciando o truque.
   Em `em` e não em rem: assim ela acompanha o h1 em todos os breakpoints,
   incluindo o clamp do desktop, sem precisar de override em cada um.
   line-height menor porque em corpo maior a mesma entrelinha abre demais e
   a linha desgruda das duas de cima. */
.hero__l3{
  font-size:1.34em;
  line-height:1.02;
  letter-spacing:-.028em;
}
.dva-s.dva-hero h1 em{font-style:normal;color:var(--amber)}
/* dois pixels abaixo do --fs-3; amarrado ao token para sobreviver a um
   reajuste da escala tipográfica */
.hero__sub{max-width:46ch;color:rgba(234,238,242,.68);font-size:calc(var(--fs-3) - 2px);line-height:1.6;margin:0}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-top:2.2rem}
.hero__note{font-size:var(--fs-1);color:rgba(234,238,242,.62);display:flex;align-items:center;gap:.5rem}
.hero__note svg{width:15px;height:15px;color:var(--green);flex:none}

/* palavra rotativa */
.dva-rot{display:inline-block;overflow:hidden;vertical-align:bottom;position:relative;padding-bottom:.14em;margin-bottom:-.14em}
.dva-rot em{display:inline-block;white-space:nowrap}
.dva-rot__m{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;white-space:nowrap}

/* ══════════ RESPONSIVO DO HERO ══════════
   Estes blocos ficam DEPOIS de todas as regras base do hero, e não antes.
   Media query não soma especificidade: .hero__sub dentro de um @media e
   .hero__sub solto valem o mesmo, e no empate ganha quem vem por último no
   arquivo. Com os @media em cima, todo override empatado morria calado.
   ▸ Regra da casa: override responsivo entra aqui embaixo, nunca no meio. */

/* De 768 para cima o layout é O MESMO em toda a faixa: cérebro na coluna da
   esquerda, texto na direita, monitor embaixo. 1040 nunca foi fronteira de
   layout — é a fronteira do EMPILHAMENTO, e ele só acontece abaixo de 768.
   As medidas já são proporcionais (%, clamp, e o --brain-room que se limita
   sozinho), então descer o breakpoint não muda nada no desktop. */
@media (min-width:768px){
  .hero__top{align-items:flex-start}

  /* 36/64 SEM gap: a coluna de texto começa exatamente onde o monitor começa.
     .hero__stage é 64% alinhado à direita, logo sua borda esquerda cai em 36%
     — o mesmo ponto onde nasce .hero__c. Os dois .dva-wrap compartilham
     max-width e --gut, então as caixas de conteúdo coincidem.
     ⚠ Os dois 64% (aqui e em .hero__stage) são o MESMO número. Mexer em um
       sem mexer no outro desalinha o texto do monitor. */
  .hero__w{grid-template-columns:minmax(0,36%) minmax(0,64%);gap:0;align-items:center}
  .hero__c{padding-top:.5rem}
  .hero__stage{width:64%;margin-left:auto}

  /* overflow-y:visible deixa o cérebro transbordar em altura sem ser cortado;
     overflow-x:clip continua segurando a sangria lateral e impedindo scroll
     horizontal. Tem que ser clip e não hidden: hidden num eixo força auto no
     outro e apareceria barra de rolagem dentro do hero. (Safari 16+) */
  .hero__top{overflow-x:clip;overflow-y:visible}

  .hero__art{
    position:relative;
    /* altura zero tira a arte da conta da altura da linha. Quem passa a
       definir a altura do hero é a coluna de texto — então aumentar o
       cérebro NÃO faz mais o monitor descer. */
    height:0;
    /* ancora no TOPO da linha. Com align-self:center o crescimento se
       dividia meio para cima, meio para baixo, e o cérebro subia para trás
       do header. Preso no topo, ele só desce. */
    align-self:start;
    padding-right:0;

    /* espaço livre entre a borda do .dva-wrap e a borda da tela */
    --brain-room:calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gut));
    /* ▸ CONTROLE DO TAMANHO DO CÉREBRO ◂
       Cresce até 8rem, ou até onde a margem permitir — o que for menor.
       O min() é o que garante que ele nunca seja cortado na borda da tela.
       Quer maior e aceita corte? troque tudo por um valor fixo (ex.: 12rem). */
    --brain-bleed:min(8rem, var(--brain-room));
    /* ▸ NUDGE VERTICAL ◂ sobe ou desce o conjunto sem mudar o tamanho */
    --brain-drop:0rem;
  }

  .hero__net{
    position:absolute;
    /* canto superior direito é o ponto fixo: a direita trava o alinhamento
       com o texto, o topo trava a altura. O aumento sai por esquerda e baixo. */
    top:var(--brain-drop);
    right:clamp(1rem,2.2vw,2.25rem);
    width:calc(100% + var(--brain-bleed));
  }

  /* h1 respira na largura da coluna inteira em vez de travar em 20ch, e desce
     um passo de tamanho para "O diagnóstico explica seu passado." caber numa
     linha só → 3 linhas (4 se o navegador quebrar a segunda). */
  /* ⚠ .dva-s.dva-hero e não .dva-hero: a regra base subiu para (0,2,1) para
     vencer o global `.dva-s h1`. Em (0,1,1) este override passaria a perder
     para ela e o desktop voltaria ao tamanho de mobile. */
  .dva-s.dva-hero h1{max-width:none;font-size:clamp(2rem,3.6vw,3rem);line-height:1.1;margin-bottom:1.9rem}
}

/* Notebook e tablet: mesmo layout, proporções mais estreitas.
   A coluna do cérebro cede 4 pontos para o texto e para o monitor — em tela
   menor o mock precisa de largura para os elementos internos dele não
   virarem borrão, já que tudo lá dentro escala por container query.
   ⚠ Os dois 68% são O MESMO número, pela mesma razão dos 64% do desktop:
     é o que mantém a borda esquerda do monitor alinhada com o texto. */
@media (min-width:768px) and (max-width:1039px){
  .dva-hero{padding-bottom:calc(var(--sp) / 2)}
  .hero__w{grid-template-columns:minmax(0,32%) minmax(0,68%)}
  .hero__stage{width:68%}
}

@media (max-width:767px){
  /* sub cai para o tamanho de corpo da escala (--fs-2 = 18px) em vez de um
     número solto, e o CTA encosta um pouco mais. As duas coisas encurtam a
     coluna de texto, que é o que faz o cérebro subir. */
  /* 1.34 numa coluna de 350px joga a palavra para duas linhas */
  .hero__l3{font-size:1.2em}
  .hero__sub{font-size:var(--fs-2)}
  .hero__cta{margin-top:1.5rem}
  .hero__stage{width:142%}

  /* mesma composição do tablet, só que o cérebro pesa mais na tela pequena:
     ocupa mais da coluna, sai mais pela esquerda e o monitor sobe mais. */
  /* ═══ AQUI, E SÓ AQUI, O HERO EMPILHA ═══
     Texto, cérebro e monitor viram uma pilha. O cérebro entra pela ESQUERDA
     e o monitor sobe até encostar na base dele.

     O height:0 e o absoluto do bloco de cima são desfeitos: lá o cérebro é
     textura atrás do texto e não pode empurrar nada; aqui ele é elemento da
     pilha e precisa ocupar altura, senão o monitor não tem em que encostar.
     O z-index:4 do .hero__sw põe o monitor na frente, e a base do cérebro
     some atrás dele — é isso que produz a emenda. */
  .dva-hero{padding-bottom:calc(var(--sp) / 2)}
  .hero__w{gap:clamp(2.5rem,9vw,4rem)}

  /* a arte vai para DEPOIS do texto sem mexer no DOM */
  .hero__art{order:2;height:auto;align-self:start}
  /* deixa de ser textura de fundo e vira elemento: mais presente que os .07 */
  .hero__bx{opacity:.14}

  .dva-hero{--brain-w:76%;--brain-l:16vw;--neck:9vw}

  .hero__net{
    position:relative;
    top:auto;
    right:auto;
    width:calc(var(--brain-w) + var(--brain-l));
    max-width:none;
    margin-left:calc(-1 * var(--brain-l));
    margin-right:auto;
  }

  .hero__sw{margin-top:calc(-1 * var(--neck));overflow-x:clip}
}


/* ═══ MOCK DO MONITOR · área de membros simulada, tudo em CSS ═══
   container-type no .mock__lap + a variável --k: TODAS as medidas de dentro
   (fonte, padding, gap, raio) são múltiplos de --k, que por sua vez é uma
   fração da largura do próprio painel. Consequência: o mock inteiro escala
   junto com o monitor — inclusive durante o zoom do pin — sem nenhuma media
   query e sem texto quebrando de tamanho no meio da animação.
   ▸ Para mexer no tamanho de TODO o texto do painel, mexa só no --k. */
.mock__lap{
  container-type:inline-size;
  position:relative;border-radius:var(--r-card);
  background:rgba(234,238,242,.05);border:1px solid rgba(20,29,61,.2);
  padding:13px;box-shadow:0 40px 70px -45px rgba(4,15,52,.45);
  transform-style:preserve-3d;
}
.mock__scr{
  --k:1cqw;
  border-radius:var(--r-card);overflow:hidden;
  background:#061036;
  aspect-ratio:16/10;display:flex;
  font-family:Outfit,system-ui,sans-serif;font-weight:300;line-height:1.3;
  color:rgba(234,238,242,.9);
}

/* ── barra lateral ── */
.mock__side{
  width:27%;flex:none;
  background:rgba(0,0,0,.3);
  border-right:1px solid rgba(216,221,233,.07);
  padding:calc(var(--k)*2.2) calc(var(--k)*1.7);
  display:flex;flex-direction:column;gap:calc(var(--k)*1.5);
}
/* ▸ se o lockup do logo ficar largo ou curto demais na barra, é só este valor */
.mock__logo{width:82%;height:auto;display:block;margin-bottom:calc(var(--k)*.4);opacity:.95}
.mock__nav{display:flex;flex-direction:column;gap:calc(var(--k)*.35)}
.mock__i{
  display:flex;align-items:center;gap:calc(var(--k)*.85);
  font-size:calc(var(--k)*1.42);color:rgba(234,238,242,.55);
  padding:calc(var(--k)*.42) calc(var(--k)*.6);
  border-radius:calc(var(--k)*.4);white-space:nowrap;
}
.mock__i b{width:calc(var(--k)*.72);height:calc(var(--k)*.72);border-radius:50%;flex:none}
.mock__i .c0{background:#fff}
.mock__i .c1{background:var(--blue-lt)}
.mock__i .c2{background:var(--green)}
.mock__i .c3{background:var(--amber)}
.mock__i .c4{background:var(--orange)}
.mock__i .c5{background:var(--coral)}
.mock__i .c6{background:rgba(234,238,242,.35)}
.mock__i.is-on{background:rgba(90,169,230,.16);color:#fff;font-weight:400}
.mock__ck{width:calc(var(--k)*1.15);height:calc(var(--k)*1.15);margin-left:auto;color:var(--green);flex:none}
.mock__sep{height:1px;background:rgba(216,221,233,.08)}
.mock__me{
  margin-top:auto;display:flex;align-items:center;gap:calc(var(--k)*.85);
  padding-top:calc(var(--k)*1.2);border-top:1px solid rgba(216,221,233,.07);
}
.mock__av{
  width:calc(var(--k)*2.7);height:calc(var(--k)*2.7);border-radius:50%;flex:none;
  background:var(--blue);color:#fff;display:grid;place-items:center;
  font-size:calc(var(--k)*1.3);font-weight:400;
}
.mock__me-t{display:flex;flex-direction:column;font-size:calc(var(--k)*1.3);color:rgba(234,238,242,.82);white-space:nowrap;min-width:0}
.mock__me-t i{font-style:normal;font-size:calc(var(--k)*1.02);color:rgba(234,238,242,.4)}

/* ── área de conteúdo ── */
.mock__body{
  flex:1;min-width:0;
  padding:calc(var(--k)*2.2) calc(var(--k)*2.4);
  display:flex;flex-direction:column;gap:calc(var(--k)*1.15);
}
.mock__top{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--k)*1.5);margin-bottom:calc(var(--k)*.3)}
.mock__hi{font-size:calc(var(--k)*2);font-weight:400;color:#fff;white-space:nowrap}
.mock__search{
  font-size:calc(var(--k)*1.15);color:rgba(234,238,242,.36);
  border:1px solid rgba(216,221,233,.13);border-radius:999px;
  padding:calc(var(--k)*.55) calc(var(--k)*1.3);white-space:nowrap;
}
.mock__lb{
  margin:0;font-size:calc(var(--k)*1);font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(234,238,242,.4);
}

/* card em andamento */
.mock__feat{
  display:flex;gap:calc(var(--k)*1.5);align-items:center;
  background:rgba(255,255,255,.045);border:1px solid rgba(216,221,233,.09);
  border-radius:calc(var(--k)*.6);padding:calc(var(--k)*1.2);
}
.mock__feat-th{
  width:31%;flex:none;aspect-ratio:16/9;position:relative;
  border-radius:calc(var(--k)*.4);
  background:linear-gradient(135deg,rgba(90,169,230,.42),rgba(10,106,185,.16));
}
.mock__feat-th::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-left:calc(var(--k)*1.35) solid rgba(255,255,255,.92);
  border-top:calc(var(--k)*.82) solid transparent;
  border-bottom:calc(var(--k)*.82) solid transparent;
}
.mock__feat-tx{display:flex;flex-direction:column;gap:calc(var(--k)*.45);min-width:0;flex:1}
.mock__feat-tx b{font-size:calc(var(--k)*1.5);font-weight:400;color:#fff;line-height:1.24}
.mock__feat-tx i{font-style:normal;font-size:calc(var(--k)*1.08);color:rgba(234,238,242,.45)}
.mock__feat-tx .mock__pct{color:rgba(253,186,6,.8)}
.mock__bar{display:block;height:calc(var(--k)*.4);border-radius:999px;background:rgba(216,221,233,.14);overflow:hidden;margin-top:calc(var(--k)*.2)}
.mock__bar u{display:block;height:100%;width:62%;background:var(--amber);text-decoration:none}

/* faixa da live */
.mock__live{
  display:flex;align-items:center;gap:calc(var(--k)*.8);
  background:rgba(254,93,3,.09);border:1px solid rgba(254,93,3,.22);
  border-radius:calc(var(--k)*.5);padding:calc(var(--k)*.8) calc(var(--k)*1.15);
  font-size:calc(var(--k)*1.15);white-space:nowrap;overflow:hidden;
}
.mock__dot{
  width:calc(var(--k)*.68);height:calc(var(--k)*.68);border-radius:50%;flex:none;
  background:var(--orange);box-shadow:0 0 0 calc(var(--k)*.34) rgba(254,93,3,.2);
}
.mock__live b{font-weight:400;color:#fff}
.mock__live i{font-style:normal;color:rgba(234,238,242,.5);text-overflow:ellipsis;overflow:hidden}

/* grade de aulas novas */
.mock__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--k)*1.1)}
.mock__c{
  border-radius:calc(var(--k)*.5);overflow:hidden;display:flex;flex-direction:column;
  background:rgba(255,255,255,.04);border:1px solid rgba(216,221,233,.07);
}
.mock__th{
  position:relative;display:block;aspect-ratio:16/9;
  background:linear-gradient(135deg,rgba(90,169,230,.3),rgba(4,15,52,.45));
}
.mock__c:nth-child(2) .mock__th{background:linear-gradient(135deg,rgba(102,175,91,.3),rgba(4,15,52,.45))}
.mock__c:nth-child(3) .mock__th{background:linear-gradient(135deg,rgba(255,123,123,.28),rgba(4,15,52,.45))}
.mock__th::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-left:calc(var(--k)*1.1) solid rgba(255,255,255,.88);
  border-top:calc(var(--k)*.66) solid transparent;
  border-bottom:calc(var(--k)*.66) solid transparent;
}
.mock__th em{
  position:absolute;right:calc(var(--k)*.45);bottom:calc(var(--k)*.45);
  font-style:normal;font-size:calc(var(--k)*.9);
  background:rgba(4,15,52,.72);color:rgba(234,238,242,.85);
  padding:calc(var(--k)*.15) calc(var(--k)*.45);border-radius:calc(var(--k)*.3);
}
.mock__c b{font-size:calc(var(--k)*1.16);font-weight:400;color:rgba(234,238,242,.92);line-height:1.28;padding:calc(var(--k)*.8) calc(var(--k)*.8) calc(var(--k)*.2)}
.mock__c i{font-style:normal;font-size:calc(var(--k)*.98);color:rgba(234,238,242,.4);padding:0 calc(var(--k)*.8) calc(var(--k)*.85);margin-top:auto}

/* O painel responde ao PRÓPRIO tamanho, não ao da tela — por isso container
   query e não media query. Com a sangria mobile o monitor fica maior que o
   viewport, então a barra lateral ainda cabe, como na referência: interface
   inteira, cortada na borda, não interface amputada. */
@container (max-width:560px){
  .mock__scr{--k:1.32cqw}
  .mock__live,.mock__search{display:none}
}
/* abaixo disto a lateral viraria textura ilegível: aí sim ela sai */
@container (max-width:400px){
  .mock__scr{--k:2.15cqw}
  .mock__side{display:none}
  .mock__grid{grid-template-columns:1fr 1fr}
  .mock__c:nth-child(3){display:none}
}

/* ── seção 01 ── */
.gap__g{display:grid;gap:clamp(2rem,4vw,4.5rem);grid-template-columns:1fr;align-items:start;margin-top:0}
@media (min-width:940px){.gap__g{grid-template-columns:1.08fr 1fr}}
/* ⚠ dois seletores: `.gap__q` sozinho é (0,1,0) e perde para `.dva-s h2`
   (0,1,1), que impõe line-height:1.12 e letter-spacing:-.012em. Esta
   headline tem 2-3 linhas, então a entrelinha errada aparece. */
.gap__g .gap__q{font-family:Outfit,sans-serif;font-size:var(--fs-5);line-height:1.2;letter-spacing:-.016em;color:var(--hl);margin:0}
.gap__g .gap__q b{font-weight:400;color:var(--amber)}
.gap__p{color:var(--fg2);max-width:50ch}
.gap__p:last-child{margin-bottom:0}
.gap__p strong{color:var(--hl);font-weight:400}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-b73d462 */.elementor-23 .elementor-element.elementor-element-b73d462{
    
    text-wrap: balance;;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3c1bb78 */.elementor-23 .elementor-element.elementor-element-3c1bb78{
    
    text-wrap: balance;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8de602c *//* ═══════════════════════════════════════════════════════════════════════
   DVA · CARDS
   Cole no campo "CSS personalizado" do widget HTML.

   Todos os tokens têm fallback embutido, então funciona mesmo sem .dva-s
   nem .dva-tone acima. Os valores de fallback são os do tom NAVY — num
   bloco creme, ponha dva-tone--light na seção.

   ▸ Override responsivo vai no bloco do FIM. Media query não soma
     especificidade: no empate ganha quem vem por último.
   ═══════════════════════════════════════════════════════════════════════ */

.dva-cards{
  display:grid;
  grid-template-columns:1fr;
  /* empilhado não existe coluna, então só o vão vertical conta aqui */
  gap:32px;
}

.dva-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  /* vertical, não quadrado: o padding de cima e de baixo é ~2,4× o dos
     lados. Com o fundo transparente é o espaço interno que dá presença ao
     card — não dá mais para contar com o preenchimento para separá-lo do
     fundo da seção. */
  padding:clamp(3.4rem,5.4vw,4.8rem) clamp(1.6rem,2.6vw,2.2rem);
  /* branco translúcido, fixo e não em token: --surfb viraria navy escuro
     numa seção creme e a borda sumiria. 9% de branco funciona sobre
     qualquer fundo escuro. */
  border:1px solid rgba(255,255,255,.09);
  /* ▸ RAIO. A página usa cantos secos (--r-card:2px). Cards arredondados são
     linguagem nova — se você adotar, declare --r-box no :root e leve o
     monitor do hero e o card de preço junto, senão esta seção vira ilha.
     Para manter o seco: --r-box:2px */
  border-radius:var(--r-box,18px);
  background:transparent;
}

/* ── ilustração ──
   200px de lado. O SVG inline herda a cor por currentColor, e a classe .hi
   troca só os pontos de destaque — currentColor resolve contra o `color` do
   próprio elemento, então mudar color num filho muda o traço dele. */
.dva-card__ill{
  display:block;
  /* 280 e não 200: os arquivos têm folga interna no viewBox, e contain
     encaixa a caixa toda do arquivo — não o desenho. O ar sobra dos dois
     lados e o ícone lê menor do que o número diz. Ajuste aqui. */
  width:var(--card-ill,340px);
  max-width:78%;
  aspect-ratio:1;
  margin-bottom:clamp(1.6rem,3vw,2.6rem);
  color:var(--node,#5aa9e6);

  /* MÁSCARA por padrão. SVG carregado como imagem renderiza isolado: o CSS
     da página não chega nele e currentColor vira PRETO. A máscara resolve —
     o arquivo entra só como recorte e a cor vem do token aqui.
     Se algum arquivo for colorido e você quiser as cores originais, ponha
     a classe orig no span daquele card. */
  background:currentColor;
  -webkit-mask:var(--ill,var(--ill-fb)) center/contain no-repeat;
          mask:var(--ill,var(--ill-fb)) center/contain no-repeat;

  animation:dvaIll var(--ill-t,8s) ease-in-out infinite;
  will-change:transform;
}

.dva-card__ill.dva-card__ill--orig{
  background:var(--ill,var(--ill-fb)) center/contain no-repeat;
  -webkit-mask:none; mask:none;
}

/* ── FLUTUAÇÃO ──
   3px de amplitude num ícone de 200px: 1,5%. É respiração, não movimento —
   você percebe se olhar fixo, não percebe lendo.
   Períodos e defasagens diferentes de propósito: iguais, os quatro subiriam
   juntos e o bloco viraria um letreiro.
   Delay negativo para cada um já começar em ponto diferente do ciclo, em vez
   de os quatro partirem parados do zero. */
@keyframes dvaIll{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-3px)}
}
.dva-cards .dva-card:nth-child(2) .dva-card__ill{--ill-t:9.5s;animation-delay:-2.2s}
.dva-cards .dva-card:nth-child(3) .dva-card__ill{--ill-t:7s;  animation-delay:-4.1s}
.dva-cards .dva-card:nth-child(4) .dva-card__ill{--ill-t:10.5s;animation-delay:-1.3s}

@media (prefers-reduced-motion:reduce){
  .dva-card__ill{animation:none!important}
}


/* ── modo máscara (arte de banco) ──
   Para trocar o SVG inline por arquivo de banco (Streamline, Phosphor),
   substitua o <span class="dva-card__ill"> inteiro do 8-cards.html por:

     <span class="dva-card__ill dva-card__ill--mask" aria-hidden="true"
           style="--ill:url('/wp-content/uploads/2026/07/arquivo.svg')"></span>

   O arquivo tem que ser monocromático: a cor vem do token, não do SVG.
   O aspect-ratio:1 + mask-size:contain normaliza arquivos com viewBox e
   margem interna diferentes — sem isso cada ícone sairia de um tamanho. */
.dva-card__ill--mask{
  background:currentColor;
  -webkit-mask:var(--ill,var(--ill-fb)) center/contain no-repeat;
          mask:var(--ill,var(--ill-fb)) center/contain no-repeat;
}

/* marcador de lugar enquanto o ícone real não sobe: nó com halo, o mesmo
   motivo da constelação — não é um buraco nem um quadrado cinza */
.dva-cards{
  --ill-fb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='8'/%3E%3Ccircle cx='50' cy='50' r='24' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='41' fill='none' stroke='%23000' stroke-width='1.5' stroke-dasharray='4 8'/%3E%3C/svg%3E");
}

/* ⚠ DOIS SELETORES. O global `.dva-s h3` é (0,1,1) e declara margin:0,
   line-height:1.12 e letter-spacing:-.012em. `.dva-card__t` sozinho é (0,1,0)
   e perde: o vão de .85rem abaixo do título NUNCA chegou, e o line-height
   de 1.28 virava 1.12 — que é apertado para título de duas linhas.
   (0,2,0) resolve. */
.dva-cards .dva-card__t{
  font-family:Outfit,system-ui,sans-serif;
  font-size:clamp(1.35rem,2.3vw,1.85rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.012em;
  color:var(--hl,#eaeef2);
  margin:0 0 .85rem;
  max-width:16ch;
  text-wrap:balance;
}
.dva-card__d{
  font-size:var(--fs-2,1.125rem);
  line-height:1.65;
  color:var(--fg2,rgba(234,238,242,.62));
  margin:0;
  max-width:34ch;
}


/* ══════════ RESPONSIVO ══════════ */

/* 900px e não 820: com 100px de vão entre colunas, quebrar em duas antes
   disso deixa cada card com menos de 330px e o texto começa a picotar.
   Se você for para 3 ou 6 cards, troque o repeat(2,1fr) por repeat(3,1fr). */
@media (min-width:900px){
  .dva-cards{
    grid-template-columns:repeat(2,1fr);
    gap:48px 60px;   /* linha · coluna — mantém a proporção 5:4, escalada */
  }
}

/* No celular o ícone era o problema: em 78% da coluna ele dava 233px num
   card de 350px — quase metade da altura do card, e quatro cards viravam
   ~2000px de rolagem. Aqui ele cai para ~150px e o padding vertical fecha
   junto, porque a folga generosa que dá presença no desktop só empurra
   conteúdo para fora da tela no celular. */
@media (max-width:767px){
  .dva-cards{gap:22px}

  .dva-card{padding:2.4rem 1.5rem}

  .dva-card__ill{
    --card-ill:150px;
    max-width:52%;
    margin-bottom:1.1rem;
  }

  .dva-cards .dva-card__t{font-size:1.32rem}
}

/* sem hover e sem transição nos cards: não há o que desligar aqui.
   A entrada em stagger é do initReveals e já respeita reduced-motion. *//* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-3e7e699 */.elementor-23 .elementor-element.elementor-element-3e7e699{
    
    text-wrap: balance;;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-28fc870 */.elementor-23 .elementor-element.elementor-element-28fc870{
    
    text-wrap: balance;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0e3b121 *//* ═══════════════════════════════════════════════════════════════════════
   DVA · CARROSSEL
   Cole no campo "CSS personalizado" do widget HTML.

   Todos os tokens têm fallback, então funciona sem .dva-s nem .dva-tone.
   ▸ Override responsivo vai no bloco do FIM: media query não soma
     especificidade e no empate ganha quem vem por último.
   ═══════════════════════════════════════════════════════════════════════ */

.dva-car{
  --car-gap:28px;
  /* ▸ LARGURA DO CARD. Mantém ~2,7 a 2,9 cards visíveis de 880 a 1440px:
     dois inteiros e um pedaço, que é a deixa de que há mais para o lado.
     Cuidado ao mexer: o valor do meio (34vw) é quem manda na maior parte
     das telas — o máximo de 470 só entra acima de ~1380px. */
  --car-w:clamp(275px,27vw,376px);
  --car-ic:67px;   /* ▸ tamanho do ícone */
  /* ▸ ALTURA MÍNIMA. Sem ela o card só tem a altura do texto, e com 2-3
     linhas de descrição ele fica mais largo do que alto — que é o oposto do
     padrão de card da página. O flex já iguala todos ao mais alto; isto é o
     piso, para que nenhum fique raso. */
  --car-h:clamp(312px,26vw,376px);
  /* --car-l e --car-r são MEDIDOS pelo JS: a distância real entre a borda
     do documento e a borda deste bloco, de cada lado.
     Por que medir em vez de calcular com 100vw: vw inclui a barra de
     rolagem, e com o scrollbar-gutter:stable que está no html isso erra
     uns 7-8px por lado. Medindo por getBoundingClientRect contra
     documentElement.clientWidth (que exclui a barra), bate exato — e ainda
     absorve qualquer padding que o container do Elementor tenha.
     Sem JS os dois valem 0: o carrossel só não sangra. */
  --car-l:0px;
  --car-r:0px;
  position:relative;

  /* A SANGRIA — dos dois lados, até a borda real do documento.
     Quem segura o primeiro card na linha do grid é o padding do track. */
  margin-left:calc(-1 * var(--car-l));
  margin-right:calc(-1 * var(--car-r));

  /* o corte mora aqui: card que passa da tela é aparado por este overflow,
     nunca pela página */
  overflow:hidden;
}

.dva-car__vp{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  /* rolagem nativa no toque = inércia do sistema de graça, melhor que
     qualquer emulação em JS */
  overscroll-behavior-x:contain;
  cursor:grab;
}
.dva-car__vp::-webkit-scrollbar{display:none}
.dva-car__vp.is-drag{cursor:grabbing;scroll-behavior:auto}

.dva-car__tk{
  display:flex;
  gap:var(--car-gap);
  /* Recuo dos dois lados = a sangria devolvida.
     Como é padding do TRACK (e não do viewport), ele rola junto: por isso o
     primeiro card nasce colado no grid e, a partir do primeiro arrasto, os
     cards passam do grid para os dois lados.
     À direita, o mesmo valor faz o último card PARAR na linha do grid em
     vez de na borda da tela — o carrossel fecha dentro do container. */
  /* ⚠ O PRIMEIRO CARD NASCE ALINHADO COM A COLUNA DE TEXTO.
     --car-l é a distância MEDIDA pelo JS entre a borda da tela e o início
     do conteúdo. Como isto é padding do TRACK e não do viewport, ele rola
     junto: o card entra por baixo da margem ao arrastar, em vez de parar
     numa parede invisível.
     Zerar este valor faz o carrossel começar colado na borda da tela — foi
     testado e ficou pior: perde a relação com o resto da página. */
  padding-left:var(--car-l);
  padding-right:var(--car-r);
  width:max-content;
}

.dva-car__c{
  flex:0 0 var(--car-w);
  display:flex;
  flex-direction:column;
  /* Só o eixo VERTICAL. O alinhamento à esquerda é o certo aqui.
     Com altura travada e conteúdo mais curto que a caixa, sem isto a sobra
     toda cai embaixo e o padding de baixo lê maior que o de cima, mesmo
     declarados iguais. */
  justify-content:center;
  /* vertical ~2x o horizontal, como nos cards da 02. Padding uniforme era o
     que deixava o card baixo: é a folga de cima e de baixo que dá presença. */
  padding:clamp(2.7rem,4vw,3.5rem) clamp(1.7rem,2.3vw,2.1rem);
  min-height:var(--car-h,390px);
  /* MESMA superfície dos cards da seção 02: borda branca a 9%, sem fundo.
     São seções vizinhas, as duas navy, as duas em card — superfície
     diferente faria a página parecer feita por duas mãos.
     O que continua diferente é a PROPORÇÃO, e de propósito: grade estática
     contra scroller horizontal são papéis distintos. */
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-box,18px);
  background:transparent;
  /* opacity é escrita pelo JS conforme o card sai pela borda */
  will-change:opacity;
}

/* ── ícone ──
   MÁSCARA, não <img>: a arte entra como recorte e a cor vem do token, então
   qualquer arquivo serve sem edição e o ícone segue o tom da seção.
   Custo assumido: máscara achata numa cor só. Se algum ícone precisar de
   dois tons, ele tem que voltar a ser <svg> inline.
   O aspect quadrado + mask-size:contain normaliza arquivos com viewBox e
   margem interna diferentes — sem isso cada ícone sairia de um tamanho. */
.dva-car__ic{
  display:block;
  width:var(--car-ic,56px);
  aspect-ratio:1;
  margin-bottom:clamp(1.4rem,2.4vw,1.9rem);
  background:var(--node,#5aa9e6);
  -webkit-mask:var(--ic) center/contain no-repeat;
          mask:var(--ic) center/contain no-repeat;
}

/* ⚠ DOIS SELETORES. Mesmo caso dos cards: o global `.dva-s h3` é (0,1,1)
   e zerava o margin-bottom de .7rem e o line-height de 1.28. (0,2,0) resolve. */
.dva-car .dva-car__t{
  font-family:Outfit,system-ui,sans-serif;
  /* era --fs-2 (18px), o menor título de card da página. Os cards da 02 vão
     a 30px; aqui o card é mais estreito, então para em 26px. */
  font-size:clamp(1.15rem,1.6vw,1.4rem);
  font-weight:400;
  line-height:1.28;
  letter-spacing:-.008em;
  color:var(--hl,#eaeef2);
  margin:0 0 .8rem;
}
.dva-car__d{
  font-size:var(--fs-2,1.125rem);
  line-height:1.62;
  color:var(--fg2,rgba(234,238,242,.62));
  margin:0;
}

/* ── controles ── */
.dva-car__ui{
  display:flex;
  align-items:center;
  gap:2rem;
  /* acima do carrossel: a barra vira indicação de percurso ANTES da leitura,
     não relatório depois dela */
  margin-bottom:clamp(1.6rem,2.6vw,2.2rem);
  /* controles de volta ao grid: sem isto a seta encostaria na borda da tela */
  padding-left:var(--car-l);
  padding-right:var(--car-r);
}
.dva-car__bar{
  flex:1;
  height:1px;
  background:var(--hair,rgba(216,221,233,.15));
  position:relative;
  overflow:hidden;
}
.dva-car__bar i{
  display:block;
  height:100%;
  background:var(--acc,#fdba06);
  transform:scaleX(.08);
  transform-origin:left center;
}
.dva-car__btns{display:flex;gap:.6rem;flex:none}

/* ── setas ──
   O next.svg entra como MÁSCARA, não como <img> com filter:invert.
   Motivo: invert só produz branco. Máscara pinta com currentColor, então a
   seta segue o token — branca no navy, navy no creme — e continua certa se
   o carrossel um dia for para uma seção clara.
   A "anterior" é o MESMO arquivo espelhado: um arquivo, duas direções. */
/* ⚠ DOIS SELETORES. O global `.dva-s button` é (0,1,1) e declara
   `border:0;background:none;color:inherit`. `.dva-car__b` sozinho é (0,1,0)
   e perde: as setas ficavam SEM o círculo — sem borda, sem fundo, e o hover
   não produzia efeito visível (mudava border-color numa borda de 0px).
   (0,2,0) devolve o anel. */
.dva-car .dva-car__b{
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid var(--hair2,rgba(216,221,233,.28));
  cursor:pointer;
  padding:0;
  -webkit-appearance:none;appearance:none;
  transition:border-color .4s var(--ease,cubic-bezier(.16,1,.3,1)),
             background-color .4s var(--ease,cubic-bezier(.16,1,.3,1)),
             opacity .4s ease;
}
.dva-car .dva-car__b::before{
  content:'';
  width:18px;height:18px;
  background:currentColor;
  -webkit-mask:url("/wp-content/uploads/2026/07/next.svg") center/contain no-repeat;
          mask:url("/wp-content/uploads/2026/07/next.svg") center/contain no-repeat;
}
.dva-car .dva-car__b[data-dir="-1"]::before{transform:scaleX(-1)}

/* ── TRAVA DE ESTADOS ──
   O Elementor e os temas de WP injetam cor de fundo, borda e sombra rosa em
   :hover/:focus/:active de <button>. Aqui TODOS os estados são declarados
   explicitamente, inclusive os transparentes — o que não é declarado é
   exatamente o que o tema preenche. */
.dva-car .dva-car__b,
.dva-car .dva-car__b:link,
.dva-car .dva-car__b:visited,
.dva-car .dva-car__b:hover,
.dva-car .dva-car__b:focus,
.dva-car .dva-car__b:focus-visible,
.dva-car .dva-car__b:active,
.dva-car .dva-car__b:focus:not(:focus-visible){
  background-color:transparent!important;
  background-image:none!important;
  color:var(--hl,#eaeef2)!important;
  border-color:var(--hair2,rgba(216,221,233,.28))!important;
  box-shadow:none!important;
  outline:0!important;
  text-decoration:none!important;
  filter:none!important;
}

/* e só DEPOIS o que a gente realmente quer em cada estado */
.dva-car .dva-car__b:hover{
  background-color:var(--surf,rgba(255,255,255,.05))!important;
  border-color:var(--hl,#eaeef2)!important;
}
/* foco por teclado continua visível: acessibilidade não entra na trava */
.dva-car .dva-car__b:focus-visible{
  outline:2px solid var(--acc,#fdba06)!important;
  outline-offset:3px;
}
.dva-car .dva-car__b[disabled]{opacity:.28;cursor:default;pointer-events:none}

/* ══════════ RESPONSIVO ══════════ */

@media (max-width:767px){
  .dva-car{--car-gap:18px;--car-w:min(80vw,300px);--car-ic:53px;--car-h:272px}
  .dva-car__ui{gap:1.2rem;margin-bottom:1.4rem}
  .dva-car .dva-car__b{width:42px;height:42px}
}

@media (prefers-reduced-motion:reduce){
  .dva-car .dva-car__b{transition-duration:.001s!important}
  /* sem atenuação de saída: o JS já sai no guard, isto é só garantia */
  .dva-car__c{opacity:1!important}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-18269b3 */.elementor-23 .elementor-element.elementor-element-18269b3{
    
    text-wrap: balance;;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b9219d7 *//* ═══════════════════════════════════════════════════════════════════════
   DVA · LISTA (04) — CSS personalizado do widget.
   Mesmo check do bloco de preços, para os dois lerem como o mesmo sistema.
   ═══════════════════════════════════════════════════════════════════════ */

/* ⚠ SELETOR DOBRADO: o global `.dva-s ul` é (0,1,1) e venceria uma classe só */
.dva-tr.dva-tr{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.85rem;
}

.dva-tr li{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  font-family:Outfit,system-ui,sans-serif;
  font-weight:300;
  font-size:var(--fs-2,1.125rem);
  line-height:1.6;
  color:var(--fg,rgba(4,15,52,.95));
}

.dva-tr li::before{
  content:'';
  width:1.05em;height:1.05em;flex:none;margin-top:.28em;
  background:var(--acc,#0a6ab9);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1f3a5ce *//* ═══════════════════════════════════════════════════════════════════════
   DVA · PAINEL (04) — CSS personalizado do widget.

   Mesmo chassi do mock do hero: moldura clara, tela escura #061036 em 16/10,
   barra lateral de 27% e o mesmo --k (1cqw) escalando tudo por container
   query. Namespace próprio para não depender do CSS do hero, mas as medidas
   são as mesmas de propósito — é o mesmo produto.
   ═══════════════════════════════════════════════════════════════════════ */

.dva-pn{
  /* ▸ QUANTO ELE PASSA DA COLUNA. vw porque precisa vencer o container do
     Elementor e chegar na borda da tela.
     ⚠ Exige overflow:clip na SEÇÃO, senão vira rolagem lateral. */
  --pn-out:16vw;

  /* ▸ CALIBRAGEM DO SCRUB (lido pelo JS).
     x0/x1 em px, s0/s1 em escala. Como a origem é right center, a escala já
     empurra a borda esquerda sozinha — por isso os números são pequenos.
     Com estes valores a borda esquerda anda ~150px no total. Aumentar x1 é
     o que atropela a coluna de texto primeiro. */
  --pn-x0:30;
  --pn-x1:-48;
  --pn-s0:.965;
  --pn-s1:1.06;

  width:calc(100% + var(--pn-out));
  max-width:none;
}

.dva-pn__lap{
  container-type:inline-size;
  position:relative;
  border-radius:var(--r-card,2px);
  background:rgba(4,15,52,.05);
  border:1px solid rgba(20,29,61,.16);
  padding:13px;
  box-shadow:0 40px 70px -45px rgba(4,15,52,.45);
  /* a borda direita já está cortada na tela: fixando a origem nela, todo o
     crescimento vai para a esquerda, que é o movimento que queremos */
  transform-origin:right center;
  will-change:transform;
}

@media (prefers-reduced-motion:reduce){
  .dva-pn__lap{transform:none!important;will-change:auto}
}

.dva-pn__scr{
  --k:1cqw;
  border-radius:var(--r-card,2px);
  overflow:hidden;
  background:#061036;
  aspect-ratio:16/10;
  display:flex;
  font-family:Outfit,system-ui,sans-serif;font-weight:300;line-height:1.3;
  color:rgba(234,238,242,.9);
}

/* ── barra lateral ── */
.dva-pn__side{
  width:27%;flex:none;
  background:rgba(0,0,0,.3);
  border-right:1px solid rgba(216,221,233,.07);
  padding:calc(var(--k)*2.2) calc(var(--k)*1.7);
  display:flex;flex-direction:column;gap:calc(var(--k)*1.5);
}
.dva-pn__logo{width:82%;height:auto;display:block;margin-bottom:calc(var(--k)*.4);opacity:.95}
.dva-pn__nav{display:flex;flex-direction:column;gap:calc(var(--k)*.35)}
.dva-pn__i{
  display:flex;align-items:center;gap:calc(var(--k)*.85);
  font-size:calc(var(--k)*1.42);color:rgba(234,238,242,.55);
  padding:calc(var(--k)*.42) calc(var(--k)*.6);
  border-radius:calc(var(--k)*.4);white-space:nowrap;
}
.dva-pn__i b{width:calc(var(--k)*.72);height:calc(var(--k)*.72);border-radius:50%;flex:none}
.dva-pn__i .k0{background:#fff}
.dva-pn__i .k1{background:var(--blue-lt,#5aa9e6)}
.dva-pn__i .k2{background:var(--green,#66af5b)}
.dva-pn__i .k3{background:var(--amber,#fdba06)}
.dva-pn__i .k4{background:var(--orange,#fe5d03)}
.dva-pn__i .k5{background:var(--coral,#ff7b7b)}
.dva-pn__i .k6{background:rgba(234,238,242,.35)}
.dva-pn__i.is-on{background:rgba(90,169,230,.16);color:#fff;font-weight:400}
.dva-pn__sep{height:1px;background:rgba(216,221,233,.08)}
.dva-pn__me{
  margin-top:auto;display:flex;align-items:center;gap:calc(var(--k)*.85);
  padding-top:calc(var(--k)*1.2);border-top:1px solid rgba(216,221,233,.07);
}
.dva-pn__av{
  width:calc(var(--k)*2.7);height:calc(var(--k)*2.7);border-radius:50%;flex:none;
  background:var(--blue,#0a6ab9);color:#fff;display:grid;place-items:center;
  font-size:calc(var(--k)*1.3);font-weight:400;
}
.dva-pn__me-t{display:flex;flex-direction:column;font-size:calc(var(--k)*1.3);color:rgba(234,238,242,.82);white-space:nowrap;min-width:0}
.dva-pn__me-t i{font-style:normal;font-size:calc(var(--k)*1.02);color:rgba(234,238,242,.4)}

/* ── conteúdo ── */
.dva-pn__body{
  flex:1;min-width:0;
  padding:calc(var(--k)*2.2) calc(var(--k)*2.4);
  display:flex;flex-direction:column;gap:calc(var(--k)*1.15);
}
.dva-pn__top{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--k)*1.5);margin-bottom:calc(var(--k)*.3)}
.dva-pn__hi{font-size:calc(var(--k)*2);font-weight:400;color:#fff;white-space:nowrap}
.dva-pn__chip{
  font-size:calc(var(--k)*1.15);color:rgba(234,238,242,.36);
  border:1px solid rgba(216,221,233,.13);border-radius:999px;
  padding:calc(var(--k)*.55) calc(var(--k)*1.3);white-space:nowrap;
}
.dva-pn__lb{
  margin:0;font-size:calc(var(--k)*1);font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(234,238,242,.4);
}

.dva-pn__card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(216,221,233,.09);
  border-radius:calc(var(--k)*.6);
  padding:calc(var(--k)*1.2);
}
.dva-pn__ch-hd{display:flex;align-items:baseline;gap:calc(var(--k)*.7)}
.dva-pn__ch-hd b{font-size:calc(var(--k)*2.1);font-weight:400;color:var(--amber,#fdba06)}
.dva-pn__ch-hd i{font-style:normal;font-size:calc(var(--k)*1.08);color:rgba(234,238,242,.45)}

/* preserveAspectRatio:none no SVG: a curva estica na largura e a altura fica
   sob controle daqui. Só é seguro porque não há texto dentro do SVG. */
.dva-pn__ch{display:block;width:100%;height:calc(var(--k)*13);margin-top:calc(var(--k)*.8)}
.dva-pn__gd path{stroke:rgba(216,221,233,.08);stroke-width:1;vector-effect:non-scaling-stroke}
.dva-pn__ar{fill:var(--blue-lt,#5aa9e6);opacity:.13}
.dva-pn__ln{stroke:var(--blue-lt,#5aa9e6);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dva-pn__pt{fill:var(--amber,#fdba06)}
.dva-pn__mo{
  display:flex;justify-content:space-between;
  margin-top:calc(var(--k)*.5);
  font-size:calc(var(--k)*.95);color:rgba(234,238,242,.35);
}

.dva-pn__st{display:flex;gap:calc(var(--k)*1)}
.dva-pn__st div{
  flex:1;min-width:0;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(216,221,233,.09);
  border-radius:calc(var(--k)*.5);
  padding:calc(var(--k)*.95) calc(var(--k)*1.1);
  display:flex;flex-direction:column;gap:calc(var(--k)*.25);
}
.dva-pn__st i{font-style:normal;font-size:calc(var(--k)*1);color:rgba(234,238,242,.4);white-space:nowrap}
.dva-pn__st b{font-size:calc(var(--k)*1.7);font-weight:400;color:#fff;white-space:nowrap}


/* ══════════ RESPONSIVO ══════════ */

@media (max-width:939px){
  .dva-pn{--pn-out:8vw}
}

/* No celular o painel é pequeno: 150px de avanço num visor de 390px é
   metade da tela andando. Aqui ele vira um empurrãozinho. */
@media (max-width:767px){
  .dva-pn{--pn-x0:12;--pn-x1:-16;--pn-s0:.99;--pn-s1:1.02}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-71ee661 */.elementor-23 .elementor-element.elementor-element-71ee661{
    
    text-wrap: balance;;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-1b49654 */.elementor-23 .elementor-element.elementor-element-1b49654{
    
    text-wrap: balance;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8bff116 *//* ═══════════════════════════════════════════════════════════════════════
   DVA · SEÇÃO 05 "A jornada"
   Cole no campo "CSS personalizado" do widget HTML.

   Aqui só se monta a pilha parada. Quem prende e move é o js-geral
   (initJornada). Nenhum position:fixed neste arquivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ⚠ .dva-s.dva-jr e não só .dva-jr: o global tem .dva-s{padding-block:var(--sp)}
   com a MESMA especificidade (0,1,0). No empate ganha quem o Elementor
   imprime por último — e o CSS do header, sendo global, costuma vir depois.
   Se vier, o padding e o min-height daqui morrem, a seção encolhe e sobra
   buraco no pin. Dois seletores (0,2,0) tiram a disputa da mesa. */
.dva-s.dva-jr{
  /* ═══ O SISTEMA SAI DE UMA RAZÃO SÓ ═══
     --jr-r é o quanto cada camada encolhe em relação à da frente. Tudo o
     mais deriva dela, aqui e no JS.

     A faixa que aparece em cima e o recuo dos lados são a MESMA distância
     na realidade — se não baterem, a pilha não lê como um objeto se
     afastando, e sim como cards empilhados na mão. Era esse o problema:
     o degrau era 3,1× o recuo lateral.

     recuo lateral = (1 − r) × largura ÷ 2
     degrau        = 2 × recuo = (1 − r) × largura
     O fator 2 é deliberado: espaço vertical lê menor que horizontal na
     mesma medida, e dobrar compensa esse efeito óptico. */
  /* ▸ ESCALA por camada. Governa quanto cada card encolhe ao recuar.
     Mesmo valor em toda tela: profundidade não muda com o tamanho do
     aparelho. Lido pelo JS. */
  --jr-r:.95;
  --jr-w:860px;
  /* ▸ DEGRAU pela LARGURA: é a coerência entre a faixa que aparece em cima
     e o recuo lateral, e é o que o desktop já usava.
     Amarrá-lo à ALTURA do card foi tentador — resolveria o celular com uma
     fórmula só — mas em monitor alto o card perdia até 200px e o degrau
     dobrava. Vale mais preservar o desktop e tratar o celular no ponto
     onde ele realmente difere. */
  --jr-step:calc((1 - var(--jr-r)) * var(--jr-w));
  /* ▸ quantos degraus a pilha tem = nº de cards − 1.
     Se você adicionar ou remover um card, AJUSTE AQUI — é o único número
     que o CSS não consegue contar sozinho. */
  --jr-n:4;
  /* folga do topo, reaproveitada no cálculo da altura do card */
  --jr-top:calc(var(--dva-head-h,80px) + 32px);
  /* ▸ o bloco do botão: folga acima + altura dele. Entra na conta da altura
     do card, e é o que garante --sp exatos entre o botão e o fim da seção. */
  --jr-cta-gap:clamp(1.2rem,2.6vh,2rem);
  --jr-cta-h:48px;

  /* ▸ ar visível abaixo do botão durante o pin */
  --jr-foot:48px;

  /* ▸ ÍCONE — o anel e a arte dentro dele.
     --jr-ic é o diâmetro externo do anel; a arte deriva dele pela razão,
     então mexer no anel em qualquer breakpoint leva a arte junto e os dois
     nunca saem de proporção. Era esse o problema da versão anterior: seis
     números cravados em três blocos, que precisavam ser mexidos a quatro
     mãos toda vez.

     A razão .56 dá 47px de arte num anel de 84 — 18,5px de folga de cada
     lado. Parece muito no papel e não é: os SVGs do Flaticon já trazem
     margem dentro do próprio viewBox, então a arte lê sempre menor que o
     número. Foi por isso que 30px num anel de 64 sumia.

     Crescer o anel é seguro: a altura do card NÃO conta o ícone (ver a
     fórmula do --jr-card acima), e mesmo no pior cenário — celular de
     800px com título de duas linhas e descrição de quatro — sobram ~100px
     dentro do card. Só não passe muito de 100px sem refazer essa conta.

     ▸ Para cravar um tamanho de arte à mão, sobrescreva --jr-ic-a e ignore
       a razão.
     ▸ --jr-ic-b é a espessura do anel. Ela NÃO deriva do diâmetro de
       propósito: a página inteira fala em filete de 1px, e um anel grosso
       aqui viraria a coisa mais pesada da tela. */
  --jr-ic:84px;
  --jr-ic-r:.56;
  --jr-ic-a:calc(var(--jr-ic) * var(--jr-ic-r));
  --jr-ic-b:1.5px;

  /* ▸ RESPIRO ENTRE O TÍTULO E A DESCRIÇÃO.
     Estava em .95rem fixo — 15,2px — contra 13,6px do vão número→título.
     Quase o mesmo número, e é por isso que o card lia apertado: com os
     dois vãos iguais, ícone, número, título e descrição viram quatro itens
     de uma lista, em vez de três grupos. O número e o título são UM par
     (são o rótulo do pilar); a descrição é outra coisa, e precisa que o
     espaço diga isso.

     Em vh e não em breakpoint porque o que aperta este card é a ALTURA da
     janela, não a largura — e o --jr-card já é calculado em 100svh. Assim
     ele encolhe sozinho em notebook baixo e abre em monitor grande, sem
     precisar de override em cada media query.
       janela  700px → 18,9px      janela  900px → 24,3px
       janela  800px → 21,6px      janela 1000px+ → 27,2px (teto) */
  --jr-t-gap:clamp(1.05rem, 2.7vh, 1.7rem);

  /* ▸ EQUILÍBRIO ÓPTICO — proporção do vão acima do card para o de baixo.
     Em 1 o card fica no centro geométrico, e é o que estava errado: acima
     dele existe vazio E a barra sólida do header; abaixo existe vazio e um
     botão pequeno. O olho soma o header ao vão de cima, então simetria
     numérica lê como card empurrado contra a barra.
     1,5 devolve o ar sob o header sem tirar altura do card. Lido pelo JS. */
  --jr-bal:1.5;

  /* ═══ A ALTURA DO CARD ═══
     Repare no que NÃO entra na conta: os --sp do fim.
     A seção fica presa no topo durante o pin, então o que passar da borda
     de baixo é justamente a faixa de padding — vazia. Ela só precisa existir
     quando a seção volta ao fluxo, para separar da seção seguinte.
     Descontá-la aqui era o erro: tirava 128px do card para reservar um
     espaço que ninguém vê naquele momento.

     ▸ Para cravar uma altura à mão, sobrescreva --jr-card e ignore o resto. */
  --jr-card:max(300px, calc(100svh
    - var(--jr-top)
    - var(--jr-n) * var(--jr-step)
    - var(--jr-cta-gap)
    - var(--jr-cta-h)
    - var(--jr-foot)));

  /* ▸ px de scroll por card — o único controle do ritmo */
  --jr-run:672;

  /* A seção ocupa a tela: durante o pin ela É a tela. Altura de viewport
     aqui é intencional — diferente do hero, onde só criava espaço morto.
     E é o que impede a margem: se a seção fosse menor que a tela, o
     pin-spacer apareceria por baixo dela. */
  min-height:100svh;
  display:flex;
  /* flex-start e não center: centralizado, a pilha caía no meio da tela e
     sobrava um vão enorme entre o topo do trecho pinado e o primeiro card.
     Encostada no topo, ela começa logo abaixo do header. */
  align-items:flex-start;
  /* ▸ 60px de folga REAL abaixo do header, não 60px do topo da seção.
     O --dva-head-h é medido pelo js-geral, então isto acompanha sozinho se
     a altura do header mudar — inclusive no mobile, onde ele é 60px. */
  /* A folga do fim é PADDING, não sobra de cálculo.
     Antes eu dimensionava o card para que o vazio restante desse --sp. Só
     que a altura real do card depende de como o texto quebra, então a sobra
     nunca batia — no print deu ~50px em vez de 128. Como padding, os --sp
     são garantidos por construção, independente do que o conteúdo faça. */
  padding-block:var(--jr-top) var(--sp,128px);

  /* overflow:hidden AQUI é seguro. A regra do pin é sobre ANCESTRAIS não
     terem clipping — o próprio elemento pinado pode recortar os filhos.
     É o que segura o cérebro sangrando no canto. */
  overflow:hidden;
}

/* ── o cérebro ──
   Mesma técnica do hero: máscara, não imagem, então a cor vem do token e
   ele acompanha o tom da seção. Opacidade baixíssima: é atmosfera, e
   qualquer coisa acima de ~6% começaria a disputar com os cards. */
.dva-jr__bx{
  position:absolute;
  left:-14%;
  bottom:3%;
  width:min(700px,64%);
  aspect-ratio:1.0383;
  z-index:0;
  pointer-events:none;
  color:var(--node,#0a6ab9);
  opacity:.055;
  /* sem gradiente: o cérebro é cor chapada. O fade existia para disfarçar o
     corte na borda de baixo — agora ele fica inteiro dentro da seção
     (bottom:3%), então não há corte para disfarçar. */
  background:currentColor;
  -webkit-mask:url("/wp-content/uploads/2026/07/cerebro.svg") center/contain no-repeat;
          mask:url("/wp-content/uploads/2026/07/cerebro.svg") center/contain no-repeat;
}

/* ⚠ A MARGEM BRANCA.
   O pin-spacer que o ScrollTrigger injeta em volta da seção NÃO tem fundo.
   Qualquer sobra dele — no engate, na soltura, ou num quadro de recálculo —
   mostra o fundo da página, que no Elementor costuma ser branco.
   Pintar o spacer da mesma cor da seção resolve na raiz: mesmo que apareça
   sobra, ela é creme e ninguém percebe. */
.pin-spacer:has(.dva-jr){
  background:var(--cream,#eaeef2);
  /* impede o spacer de alargar a página — é a causa clássica da faixa
     branca aparecendo na direita durante o pin */
  max-width:100%;
  overflow-x:clip;
}

/* A PILHA.
   Os cinco ocupam a MESMA célula de grid, então a caixa cresce até a altura
   do card mais alto e eles ficam sobrepostos — sem position:absolute, que
   exigiria altura fixa e quebraria com textos de tamanhos diferentes. */
.dva-jr__st{
  position:relative;
  z-index:1;
  display:grid;
  /* Sem align-items aqui de propósito. Ele valia "topo da célula" na grade,
     mas os cards têm min-height e max-height iguais — o valor não mudava
     nada. E quando esta pilha vira flex-direction:column (nos dois blocos
     que desempilham), o eixo transversal passa a ser o HORIZONTAL e aquele
     start virava ESQUERDA, jogando os cards para fora do centro.
     O padrão stretch faz a coisa certa nos dois modos. */
  width:100%;
  max-width:var(--jr-w);
  margin-inline:auto;
}

.dva-jr__c{
  grid-area:1/1;
  /* o degrau é MARGEM, não transform: assim o GSAP fica dono absoluto do
     transform e os dois não disputam a mesma propriedade */
  margin-top:calc(var(--i) * var(--jr-step));

  display:flex;
  flex-direction:column;
  align-items:center;
  /* centraliza o conteúdo dentro da altura mínima */
  justify-content:center;
  text-align:center;

  /* ▸ ALTURA: a variável resolvida lá em cima.
     Todos os cards com a MESMA altura, e por dois motivos:
     1. card mais alto empurra os que ainda não chegaram para longe da borda
        de baixo, então eles não aparecem enquanto esperam;
     2. sem isto cada card teria a altura do próprio texto, e como os textos
        têm tamanhos diferentes os cards ficariam DESIGUAIS — os mais altos
        sobrariam por baixo dos mais baixos na pilha. */
  min-height:var(--jr-card);
  /* TETO junto com o piso: sem ele, um card cujo texto passe da conta cresce
     e empurra o botão para fora da tela durante o pin. Com os dois iguais, a
     altura é exatamente a calculada e todos os cinco ficam idênticos —
     que é a condição para a pilha fechar sem sobra. */
  max-height:var(--jr-card);

  padding:clamp(1.4rem,3vh,2.8rem) clamp(2rem,4vw,4rem);
  border-radius:var(--r-box,18px);
  border:1px solid var(--surfb,rgba(20,29,61,.1));
  /* fundo OPACO, ao contrário dos outros cards da página: aqui ele precisa
     esconder o card de trás. Transparente destruiria o empilhamento. */
  background:#f3f5f9;
  box-shadow:0 -1px 0 rgba(255,255,255,.6) inset,
             0 18px 44px -30px rgba(4,15,52,.4);
  /* origem no topo: ao encolher, a borda de cima fica no lugar e só as
     laterais recolhem — é o que produz a leitura de "atrás" */
  transform-origin:center top;
  /* sem filter: o blur foi removido. Só transform e opacity, que são as
     duas propriedades que o compositor resolve sem repintar. */
  will-change:transform,opacity;
}

/* ── ícone ──
   O anel é do elemento; a arte entra como MÁSCARA num ::before. Máscara e
   não <img> porque assim a cor vem do --c de cada card e o arquivo não
   precisa ser editado.
   O anel fica no elemento e a máscara no pseudo de propósito: os dois no
   mesmo elemento brigariam, porque a máscara recortaria a borda junto. */
/* ── bloco do botão ──
   Fica DENTRO da seção pinada, depois da pilha. Fora dela, a distância até
   o botão seria a soma do padding de baixo desta seção com o de cima do
   bloco seguinte — dois números que não se conhecem. */
.dva-jr__cta{
  margin-top:var(--jr-cta-gap);
  text-align:center;
  position:relative;
  z-index:1;
}

.dva-jr__ic{
  position:relative;
  display:grid;place-items:center;
  width:var(--jr-ic,84px);height:var(--jr-ic,84px);
  border-radius:50%;
  border:var(--jr-ic-b,1.5px) solid var(--c,#0a6ab9);
  background:#fff;
  margin-bottom:1.5rem;
}
.dva-jr__ic::before{
  content:'';
  width:var(--jr-ic-a,47px);height:var(--jr-ic-a,47px);
  background:var(--c,#0a6ab9);
  -webkit-mask:var(--ic) center/contain no-repeat;
          mask:var(--ic) center/contain no-repeat;
}

.dva-jr__n{
  font-family:Outfit,system-ui,sans-serif;
  font-size:var(--fs-0,.8125rem);font-weight:400;
  letter-spacing:var(--ls-label,.2em);
  color:var(--c,#0a6ab9);
  line-height:1;margin-bottom:.85rem;
  font-variant-numeric:tabular-nums;
}
/* ⚠ DOIS SELETORES, e não `.dva-jr__t` sozinho.
   O global tem `.dva-s h1,.dva-s h2,.dva-s h3,.dva-s h4{margin:0;line-height:1.12;
   letter-spacing:-.012em}` — especificidade (0,1,1), porque tem uma classe MAIS
   um elemento. `.dva-jr__t` sozinho é (0,1,0) e PERDE, sempre, independente da
   ordem em que o Elementor imprime.
   Sintoma: o margin-bottom daqui nunca chegava. Título e descrição ficavam
   colados com ZERO de vão, e mexer no valor não produzia efeito nenhum —
   inclusive a variável --jr-t-gap, que parecia estar quebrada e não estava.
   `.dva-jr .dva-jr__t` é (0,2,0) e tira a disputa da mesa. Mesma solução do
   `.dva-s.dva-jr` lá em cima, pelo mesmo motivo. */
.dva-jr .dva-jr__t{
  font-family:Outfit,system-ui,sans-serif;
  font-size:clamp(1.55rem,2.9vw,2.35rem);
  font-weight:400;line-height:1.14;letter-spacing:-.014em;
  color:var(--hl,#040f34);
  margin:0 0 var(--jr-t-gap,1.4rem);max-width:16ch;
  text-wrap:balance;
}
.dva-jr__d{
  font-size:var(--fs-2,1.125rem);line-height:1.6;
  color:var(--fg2,rgba(4,15,52,.68));
  margin:0;max-width:50ch;
}


/* ══════════ RESPONSIVO ══════════ */

/* ⚠ JANELA BAIXA.
   A pilha ocupa padding + altura do card + degrau × 4. Numa janela de 800px
   isso dava 796px contra 800 disponíveis — 4px de folga. Qualquer variação
   (fonte, barra do navegador) estouraria, e como a seção tem overflow:hidden
   o último card seria CORTADO. Aqui o degrau e a altura recuam junto. */
/* janela baixa: o conteúdo do card recua para caber junto com o botão */
@media (max-height:880px) and (min-width:768px){
  /* razão maior = camadas mais próximas = pilha mais rasa, para caber na
     altura menor. O degrau acompanha sozinho porque deriva dela. */
  .dva-s.dva-jr{--jr-r:.955;--jr-ic:68px;--jr-foot:36px}
  /* ⚠ dois seletores aqui TAMBÉM. A regra base virou (0,2,0); se este
     override ficasse em (0,1,0) ele passaria a perder para ela e o
     font-size de janela baixa morreria calado. */
  .dva-jr .dva-jr__t{font-size:clamp(1.4rem,2.4vw,1.9rem)}
  .dva-jr__d{font-size:var(--fs-1,1rem)}
  .dva-jr__n{margin-bottom:.6rem}

  /* só o respiro abaixo do anel — o tamanho já veio da variável acima */
  .dva-jr__ic{margin-bottom:.95rem}
}

@media (max-width:767px){
  /* sobrescreve --jr-top, NÃO padding-block: o padding já lê essa variável,
     e cravar padding aqui quebraria a fórmula da altura do card, que
     assume padding-bottom zero. O --sp vira 64px sozinho neste breakpoint,
     então a folga do fim acompanha sem eu tocar nela. */
  .dva-s.dva-jr{
    --jr-w:100%;
    --jr-run:500;
    /* ▸ AQUI a fórmula da largura falha, e só aqui.
       (1−r)×largura dá 52px num card de 860 e 16px num de 350 — a mesma
       regra, resultado inútil. O card de celular é estreito e alto; o de
       desktop é largo e baixo, e por isso largura e altura deixam de
       andar juntas.
       46px é o piso do que ainda lê como camada separada a distância de
       braço. Abaixo disso a pilha vira um card só. */
    --jr-step:34px;
    /* Tudo aqui sai direto da altura útil do card. No celular a conta é
       apertada porque o --jr-card usa 100svh, que é a altura COM a barra do
       navegador visível — uns 50px menos do que o media query enxerga. */
    --jr-foot:24px;
    --jr-top:calc(var(--dva-head-h,60px) + 16px);
    --jr-ic:60px;
    /* anel um pouco menor que o desktop; a arte acompanha pela razão.
       Não vai além disto: no celular a descrição pode chegar a 4 linhas e
       é ela que fica sem espaço dentro da altura travada do card. */
    --jr-ic:68px;
  }

  /* só o respiro abaixo do anel — o tamanho já veio da variável acima */
  .dva-jr__ic{margin-bottom:1.2rem}
}

/* ⚠ JANELA MUITO BAIXA — celular deitado, notebook pequeno com muitas
   barras. Abaixo de 620px de altura não existe espaço para pilha nenhuma:
   o card mínimo mais o padding já estouram. Em vez de entregar algo
   cortado, desmonta o efeito e vira lista. O JS detecta o mesmo limite e
   nem cria o pin. */
/* ▸ ABAIXO DAQUI O PIN É DESLIGADO e os cards viram uma lista comum.
   730px, e o número vem de uma armadilha específica do iOS:

   · @media (max-height:X) avalia a LARGE viewport — estável, e maior
   · 100svh, que alimenta o --jr-card, usa a SMALL viewport — a altura COM a
     barra de endereço visível, uns 50px MENOR

   Ou seja: o media query dizia "cabe, pode pinar" enquanto a fórmula da
   altura recebia 50px a menos. Num iPhone 13 mini isso dava 314px de card
   para 336px de conteúdo — e como o card tem max-height e a seção tem
   overflow:hidden, o que não cabia SUMIA em vez de empurrar.
   730 é o ponto onde a small viewport correspondente já comporta o
   conteúdo com folga. Abaixo disso, empilhado — que não é degradação, é a
   única forma que cabe. */
@media (max-height:730px){
  /* ▸ COMPENSAÇÃO DA MARGEM NEGATIVA DE CIMA.
     A seção da headline tem margin-bottom negativo (-160px por padrão) para
     a entrada do pin ficar certa. Sem pin, essa margem não tem função — ela
     só puxa a jornada para cima e come o respiro entre as duas.
     Aqui o valor é devolvido no padding de topo.
     ⚠ NÃO é espelho exato do Elementor. A margem lá é -160px, mas aqui
       devolvemos 96: na prática ela não vale integralmente nas telas que
       caem neste bloco, e os 160 cheios empurravam os cards para baixo
       demais. Se mexer na margem, reveja este número olhando o resultado,
       não a aritmética. */
  .dva-s.dva-jr{
    --jr-comp:96px;
    min-height:0;
    display:block;
    /* o padding de baixo era 32px cravado. Agora segue o --sp da página:
       64px no celular, 96 no tablet. Sem pin, esta seção é uma seção comum e
       tem que respirar como as outras. */
    padding-block:calc(var(--dva-head-h,60px) + 32px + var(--jr-comp,0px)) var(--sp,64px);
  }
  /* ⚠ align-items:stretch é OBRIGATÓRIO aqui.
     A regra base tem align-items:start, que na grade significa "topo da
     célula". Virando flex-direction:column, o eixo transversal passa a ser
     o HORIZONTAL — e o mesmo start vira "esquerda". O card, sem largura
     definida fora da grade, encolhe até o conteúdo e encosta na borda.
     Só aparecia em janela larga E baixa (ex.: 1585x709): no celular o
     --jr-w é 100% e o desalinhamento some. */
  .dva-jr__st{display:flex;flex-direction:column;align-items:stretch;gap:1.2rem}

  /* ▸ O VÃO ACIMA DO BOTÃO.
     O --jr-cta-gap padrão dá 19px, e é pequeno DE PROPÓSITO: no modo pinado
     quem posiciona o botão é o pin, e o --jr-foot reserva o ar abaixo dele.
     Desempilhado nada disso existe — 19px é o único espaço entre o último
     card e o botão, e ele fica colado. */
  .dva-jr__cta{margin-top:clamp(2rem,5vw,2.75rem)}
  .dva-jr__c{margin-top:0;min-height:0!important;transform:none!important;opacity:1!important}
  .dva-jr__bx{display:none}
}

/* Sem JS ou com movimento reduzido nenhum estado inicial foi escrito: os
   cards nascem visíveis. Só desfaz a sobreposição. */
@media (prefers-reduced-motion:reduce){
  /* Este bloco desempilha pelo mesmo motivo do de altura, então precisa das
     MESMAS compensações: a margem negativa da seção acima e o ar acima do
     botão. Faltavam as duas — e como ele vem depois no arquivo, quando os
     dois casam era este que valia. */
  .dva-s.dva-jr{
    --jr-comp:96px;
    min-height:0;
    display:block;
    padding-block:calc(var(--dva-head-h,80px) + 32px + var(--jr-comp,0px)) var(--sp,96px);
  }
  .dva-jr__bx{display:none}
  .dva-jr__st{display:flex;flex-direction:column;align-items:stretch;gap:clamp(1.5rem,3vw,2.2rem)}
  .dva-jr__c{margin-top:0;min-height:0!important;transform:none!important;opacity:1!important}
  .dva-jr__cta{margin-top:clamp(2rem,5vw,2.75rem)}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-231c189 *//* ═══════════════════════════════════════════════════════════════════════
   DVA · FOTOS "Quem criou"
   Cole no campo "CSS personalizado" do widget HTML.
   ═══════════════════════════════════════════════════════════════════════ */

.dva-pho{
  position:relative;
  /* a caixa toda tem proporção fixa para o texto ao lado não dançar quando
     as imagens carregam */
  aspect-ratio:1 / 1.2;
  width:100%;
}

.dva-pho__f{
  position:absolute;
  margin:0;
  overflow:hidden;
  border-radius:var(--r-box,18px);
}
.dva-pho__f img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ── HOJE · em cor, na frente ── */
.dva-pho__f--now{
  top:0;
  right:0;
  /* 76% → 68%: cada ponto que a foto da frente perde é área que a de trás
     ganha de volta. A sobreposição caiu de 29% para ~11% da foto de antes. */
  width:68%;
  aspect-ratio:4 / 5;
  z-index:2;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.8);
}
.dva-pho__f--now img{
  /* mesma gramática fotográfica do resto da página */
  filter:saturate(.94) contrast(1.07);
}

/* ── ANTES · memória, atrás e embaixo ── */
.dva-pho__f--past{
  left:0;
  bottom:0;
  /* maior que antes: com 56% ela ficava pequena, escura e ainda encoberta —
     três coisas somadas contra ela */
  width:58%;
  aspect-ratio:4 / 3;
  z-index:1;
  /* borda mais visível: é ela que separa a foto do fundo navy quando as
     duas são escuras */
  border:1px solid rgba(255,255,255,.16);
  /* leve desaprumo: a foto original já é torta, e inclinar de leve assume
     isso em vez de tentar corrigir */
  transform:rotate(-2.2deg);
  transform-origin:left bottom;
}
.dva-pho__f--past img{
  /* sem cor, escurecida e achatada: é passado, não alternativa */
  /* brightness de .52 para .78. A foto continua sendo passado — quem carrega
     isso é o grayscale, não o escurecimento. Escurecer demais sobre fundo
     navy só a fazia desaparecer sem acrescentar significado. */
  filter:grayscale(1) contrast(1.1) brightness(.78);
}
/* véu azul da marca por cima do cinza — mix-blend-mode:color só transfere
   matiz e saturação, então o desenho de luz da foto continua intacto */
.dva-pho__f--past::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--node,#5aa9e6);
  mix-blend-mode:color;
  opacity:.34;
  pointer-events:none;
}

/* ── rótulos ── */
.dva-pho__c{
  position:absolute;
  left:0;
  bottom:0;
  margin:0;
  padding:.75rem .95rem;
  z-index:3;
}
.dva-pho__c span{
  display:inline-block;
  padding:.34rem .7rem;
  border-radius:999px;
  font-family:Outfit,system-ui,sans-serif;
  font-size:.66rem;
  font-weight:400;
  letter-spacing:var(--ls-label,.2em);
  text-transform:uppercase;
  line-height:1;
  color:var(--hl,#eaeef2);
  background:rgba(4,15,52,.55);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
/* o rótulo de hoje acende: é onde a seção quer que você olhe */
.dva-pho__f--now .dva-pho__c span{
  color:var(--ink,#040f34);
  background:var(--acc,#fdba06);
  border-color:transparent;
}


/* ══════════ RESPONSIVO ══════════ */

@media (max-width:939px){
  .dva-pho{aspect-ratio:1 / 1.05;max-width:520px;margin-inline:auto}
}
/* ⚠ NO CELULAR A CAIXA PRECISA SER MAIS ALTA, não mais larga.
   Estava em 1/1.05 com o HOJE em 80%: ele ficava com 350px de altura numa
   caixa de 368px, ou seja ocupava 95% dela. O ANTES mora no canto inferior
   esquerdo, atrás — sobrava 42% dele visível, e o pouco que aparecia era
   canto sem rosto.
   Alongando a caixa e encolhendo o HOJE, sobra faixa livre embaixo e o
   ANTES aparece 93%. A conta é essa: altura da caixa menos altura do HOJE
   tem que ser maior que a altura do ANTES. */
@media (max-width:520px){
  .dva-pho{aspect-ratio:1 / 1.28}
  .dva-pho__f--now{width:72%}
  .dva-pho__f--past{width:58%}
  .dva-pho__c{padding:.55rem .7rem}
  .dva-pho__c span{font-size:.6rem;padding:.3rem .6rem}
}

@media (prefers-reduced-motion:reduce){
  .dva-pho__f--past{transform:rotate(-2.2deg)!important}
}


/* ═══ REDES ═══
   Ancoradas no canto superior esquerdo, que é o vão que sobra entre a foto
   de HOJE (topo à direita) e a de ANTES (base à esquerda). Por isso elas
   vivem dentro deste bloco: fora dele não há como posicioná-las em relação
   às fotos.

   z-index:3 fica acima das duas fotos (1 e 2): se o enquadramento mudar e
   alguma encostar aqui, o link continua clicável. */
.dva-pho__rd{
  position:absolute;
  left:0;
  top:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

.dva-pho__a{
  display:grid;
  place-items:center;
  /* 44px é o mínimo de alvo de toque. O desenho dentro é menor; quem dá o
     tamanho clicável é esta caixa. */
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--hair,rgba(216,221,233,.15));
  background:rgba(4,15,52,.55);
  backdrop-filter:blur(6px);
  color:var(--fg2,rgba(234,238,242,.62))!important;
  transition:color .35s var(--ease,cubic-bezier(.16,1,.3,1)),
             border-color .35s var(--ease,cubic-bezier(.16,1,.3,1));
}
.dva-pho__a:link,.dva-pho__a:visited{color:var(--fg2,rgba(234,238,242,.62))!important}
.dva-pho__a:hover,.dva-pho__a:focus{
  color:var(--hl,#eaeef2)!important;
  border-color:var(--hair2,rgba(216,221,233,.28));
}
.dva-pho__a:focus-visible{outline:2px solid var(--acc,#fdba06);outline-offset:3px}
.dva-pho__a svg{width:20px;height:20px}

/* Instagram é a rede principal: maior e já em cor cheia */
.dva-pho__a--main{
  width:52px;height:52px;
  color:var(--hl,#eaeef2)!important;
  border-color:var(--hair2,rgba(216,221,233,.28));
}
.dva-pho__a--main:link,.dva-pho__a--main:visited{color:var(--hl,#eaeef2)!important}
.dva-pho__a--main svg{width:25px;height:25px}

@media (max-width:520px){
  /* o vão cai para ~98px de largura: os alvos encolhem mas ficam nos 40px,
     que ainda é confortável para o dedo */
  .dva-pho__rd{gap:.42rem}
  .dva-pho__a{width:40px;height:40px}
  .dva-pho__a svg{width:18px;height:18px}
  .dva-pho__a--main{width:46px;height:46px}
  .dva-pho__a--main svg{width:22px;height:22px}
}

@media (prefers-reduced-motion:reduce){
  .dva-pho__a{transition:none!important}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-b0d66ad */.elementor-23 .elementor-element.elementor-element-b0d66ad{
    
    text-wrap: balance;;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-03623ec *//* ═══════════════════════════════════════════════════════════════════════
   DVA · FECHAMENTO (06) — CSS personalizado do widget. Tom NAVY.
   Um filete e uma linha. Nada mais.
   ═══════════════════════════════════════════════════════════════════════ */

.dva-fecho{
  margin:0;
  padding-top:clamp(1.2rem,2.2vw,1.7rem);
  border-top:1px solid var(--hair,rgba(216,221,233,.15));
  font-family:Outfit,system-ui,sans-serif;
  font-weight:300;
  /* menor que o corpo de propósito: é fecho, não mais um parágrafo */
  font-size:var(--fs-2,1.125rem);
  line-height:1.7;
  color:var(--fg2,rgba(234,238,242,.62));
  max-width:54ch;
}

/* 400 e não negrito: a página inteira usa 400 como ênfase máxima */
.dva-fecho b{
  font-weight:400;
  color:var(--hl,#eaeef2);
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-5a58f0b */.elementor-23 .elementor-element.elementor-element-5a58f0b{
    
    text-wrap: balance;;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-a9d4fcf */.elementor-23 .elementor-element.elementor-element-a9d4fcf{
    
    text-wrap: balance;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-74908e4 *//* ═══════════════════════════════════════════════════════════════════════
   DVA · PREÇOS (07) — CSS personalizado do widget.
   Fallbacks são os do tom CREME. Override responsivo no fim do arquivo.
   ═══════════════════════════════════════════════════════════════════════ */

.dva-pr{
  --pr-w:600px;
  /* ▸ VÃO ENTRE AS ABAS E O CARD.
     Metade do selo monta para fora da borda de cima do card — cerca de 15px.
     Então o vão VISÍVEL é este valor menos esses 15px. Em 1,6rem sobravam
     uns 10px e o selo quase encostava nas abas.
     Se mexer no tamanho ou no padding do selo, reveja este número. */
  --pr-gap:clamp(2.9rem,4.6vw,3.7rem);
  max-width:var(--pr-w);
  margin-inline:auto;
}

/* Os radio saem da tela mas continuam FOCÁVEIS. display:none tiraria do
   tab order e as abas parariam de funcionar no teclado. */
.dva-pr__in{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── ABAS ── */
.dva-pr__tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  padding:4px;
  border:1px solid var(--hair,rgba(20,29,61,.13));
  border-radius:var(--r-pill,44px);
  margin-bottom:var(--pr-gap,2.9rem);
}

.dva-pr__tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;
  padding:.85rem 1rem;
  border-radius:var(--r-pill,44px);
  font-family:Outfit,system-ui,sans-serif;
  font-weight:300;
  font-size:var(--fs-1,1rem);
  line-height:1.2;
  color:var(--fg2,rgba(4,15,52,.68));
  cursor:pointer;
  user-select:none;
  transition:background-color .4s var(--ease,cubic-bezier(.16,1,.3,1)),
             color .4s var(--ease,cubic-bezier(.16,1,.3,1));
}

.dva-pr__off i{font-style:normal}
.dva-pr__off{
  font-size:var(--fs-0,.8125rem);
  letter-spacing:var(--ls-label,.2em);
  text-transform:uppercase;
  color:var(--acc,#0a6ab9);
}

/* ── A TROCA ──
   Os dois radio são irmãos de .dva-pr__tabs e .dva-pr__box, por isso o ~
   alcança os dois. Se alguém mover os inputs para dentro de uma div, a
   troca para de funcionar — é a única regra estrutural deste arquivo. */
#dva-plano-m:checked ~ .dva-pr__tabs label[for="dva-plano-m"],
#dva-plano-a:checked ~ .dva-pr__tabs label[for="dva-plano-a"],
#dva-plano-p:checked ~ .dva-pr__tabs label[for="dva-plano-p"]{
  background:var(--hl,#040f34);
  color:#fff;
}
#dva-plano-a:checked ~ .dva-pr__tabs label[for="dva-plano-a"] .dva-pr__off{
  color:var(--amber,#fdba06);
}

/* o foco mora no radio, que está fora da tela — então o anel vai no rótulo */
#dva-plano-m:focus-visible ~ .dva-pr__tabs label[for="dva-plano-m"],
#dva-plano-a:focus-visible ~ .dva-pr__tabs label[for="dva-plano-a"],
#dva-plano-p:focus-visible ~ .dva-pr__tabs label[for="dva-plano-p"]{
  outline:2px solid var(--acc,#0a6ab9);
  outline-offset:3px;
}

/* ── CAIXA ── */
.dva-pr__box{
  position:relative;
  background:#fff;
  /* borda mais leve que a padrão: sobre creme, branco já se separa sozinho.
     A sombra faz o resto — o card sobe, não é recortado.
     Branco e não o #f3f5f9 do card da jornada: aquele card mora sobre navy,
     onde #f3f5f9 salta. Aqui o fundo é creme #eaeef2, e #f3f5f9 sumiria. */
  border:1px solid var(--surfb,rgba(20,29,61,.1));
  border-radius:var(--r-box,18px);
  /* mesmos números da sombra do card da jornada — é a receita que a página
     já usa para superfície clara opaca. Sem o realce inset dela: aqui o card
     é branco e branco sobre branco não aparece. */
  box-shadow:0 18px 44px -30px rgba(4,15,52,.4);
  /* vertical bem maior que horizontal: é o ar de cima e de baixo que dá
     presença ao preço. O topo ainda precisa acomodar o selo, que monta
     metade para fora da borda. */
  padding:clamp(3.2rem,5.4vw,4.4rem) clamp(1.8rem,3.4vw,2.6rem) clamp(2.8rem,4.6vw,3.6rem);
}

/* ── SELO DE FUNDADOR ──
   Monta a cavalo na borda de cima. Fica FORA dos painéis de propósito: vale
   para os dois planos e não deve piscar na troca de aba. */
.dva-pr__badge{
  position:absolute;
  top:0;left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:.55rem 1.15rem;
  border-radius:var(--r-pill,44px);
  background:var(--amber,#fdba06);
  color:#040f34;
  font-family:Outfit,system-ui,sans-serif;
  font-weight:400;
  font-size:var(--fs-0,.8125rem);
  letter-spacing:var(--ls-label,.2em);
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}

/* Os dois painéis ocupam A MESMA célula da grade. Assim a altura da caixa é
   sempre a do maior, e trocar de aba não faz o bloco pular — que é o defeito
   clássico de abas de preço. */
.dva-pr__panes{display:grid}
.dva-pr__pane{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease,cubic-bezier(.16,1,.3,1));

  /* Coluna com o botão empurrado para a base. Os três painéis dividem a
     MESMA célula, então a altura é a do maior — o mensal, que não tem linha
     de cobrança, ficaria mais curto e o botão subiria só nele, pulando a
     cada troca de aba. Com margin-top:auto no botão, ele fica sempre na
     mesma altura, independente do conteúdo acima. */
  display:flex;
  flex-direction:column;
}
.dva-pr__pane .dva-btn{margin-top:auto}
#dva-plano-m:checked ~ .dva-pr__box .dva-pr__pane[data-plano="m"],
#dva-plano-a:checked ~ .dva-pr__box .dva-pr__pane[data-plano="a"],
#dva-plano-p:checked ~ .dva-pr__box .dva-pr__pane[data-plano="p"]{
  opacity:1;visibility:visible;
}

/* ── PREÇO ──
   A unidade fica NA MESMA LINHA do número, alinhada pela base. Solta numa
   linha abaixo, ela deixa de pertencer ao preço e vira legenda — foi o que
   tornava confuso qual plano era mensal e qual era anual. */
.dva-pr__val{
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:0 .5rem;
  font-family:Outfit,system-ui,sans-serif;
  font-weight:300;
  font-size:var(--fs-7,clamp(2.6rem,6vw,4rem));
  line-height:1;
  letter-spacing:-.03em;
  color:var(--hl,#040f34);
  margin:0 0 .85rem;
}
.dva-pr__cur{
  font-size:.32em;font-weight:300;letter-spacing:.02em;
  margin-right:-.32em;align-self:flex-start;padding-top:.35em;
  color:var(--fg2,rgba(4,15,52,.68));
}
/* centavos menores: o olho compara os inteiros. 25 contra 16 já resolve. */
.dva-pr__cent{font-size:.42em;letter-spacing:-.01em}

.dva-pr__unit{
  font-size:.26em;
  font-weight:300;
  letter-spacing:0;
  color:var(--fg2,rgba(4,15,52,.68));
}

/* âncora riscada: é ela que faz o desconto ser lido sem conta.
   Só existe na aba anual. */
.dva-pr__was{
  font-size:.26em;
  color:var(--fg2,rgba(4,15,52,.68));
  text-decoration:line-through;
  text-decoration-thickness:1px;
  opacity:.75;
}

/* ── COBRANÇA ──
   Onde mora a verdade contratual: quanto sai, quando e com que frequência.
   Fica entre o preço e o botão de propósito — é a última dúvida antes do
   clique, e resolvê-la ali evita que a pessoa saia para procurar. */
.dva-pr__bill{
  text-align:center;
  font-size:var(--fs-2,1.125rem);
  line-height:1.6;
  color:var(--fg2,rgba(4,15,52,.68));
  margin:0 auto clamp(1.3rem,2.2vw,1.7rem);
  max-width:34ch;
}

/* ── TRAVA DE PREÇO ──
   Fica FORA dos painéis: vale para os três planos e não deve piscar na troca
   de aba. Filete âmbar e a primeira oração em cor cheia — é o que o cliente
   pediu como "mais destaque", sem virar caixa colorida no meio do card. */
.dva-pr__lock{
  margin:clamp(1.5rem,2.6vw,2rem) 0 0;
  padding:clamp(.9rem,1.6vw,1.2rem) 0 clamp(.9rem,1.6vw,1.2rem) clamp(.9rem,1.8vw,1.3rem);
  border-left:2px solid var(--amber,#fdba06);
  font-size:var(--fs-2,1.125rem);
  line-height:1.65;
  color:var(--fg2,rgba(4,15,52,.68));
  text-align:left;
}
.dva-pr__lock b{font-weight:400;color:var(--hl,#040f34)}

/* ── LISTA ── */
/* ⚠ classe dobrada: o global `.dva-s ul` é (0,1,1) e venceria uma classe só */
.dva-pr .dva-pr__l{
  list-style:none;
  margin:1.8rem 0 0;
  padding:1.8rem 0 0;
  border-top:1px solid var(--hair,rgba(20,29,61,.13));
  display:grid;
  gap:.75rem;
}
.dva-pr__l li{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:var(--fs-2,1.125rem);
  line-height:1.5;
  color:var(--fg,rgba(4,15,52,.95));
}
.dva-pr__l li::before{
  content:'';
  width:1.05em;height:1.05em;flex:none;margin-top:.18em;
  background:var(--acc,#0a6ab9);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── SELOS ── */
.dva-pr__seg{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem 1.1rem;
  margin:1.6rem 0 0;
  padding-top:1.4rem;
  border-top:1px solid var(--hair,rgba(20,29,61,.13));
  font-size:var(--fs-1,1rem);
  color:var(--fg2,rgba(4,15,52,.68));
}
/* separador por pseudo-elemento e não por caractere no HTML: quebrando linha
   no celular, um "·" solto no fim da linha fica órfão */
.dva-pr__seg span+span::before{
  content:'·';
  margin-right:1.1rem;
  color:var(--hair2,rgba(20,29,61,.26));
}


/* ══════════ RESPONSIVO ══════════ */

@media (max-width:520px){
  .dva-pr__box{padding:2.6rem 1.2rem 2.2rem}

  /* o selo tem nowrap: sem afrouxar o tracking ele encosta nas bordas
     do card em telas de 360px */
  .dva-pr__badge{letter-spacing:.1em;padding:.5rem .8rem}

  /* três abas em 320px dão ~85px úteis cada: o rótulo longo do desconto não
     cabe, então some a palavra e fica só o número */
  .dva-pr__tab{padding:.75rem .35rem;font-size:.92rem}
  .dva-pr__off{letter-spacing:.06em;font-size:.72rem}

  /* em .26em a unidade e a âncora ficam pequenas demais na tela estreita */
  .dva-pr__unit,.dva-pr__was{font-size:.3em}

  /* Selos empilhados. Em linha eles quebram em duas, e o separador fica
     liderando a segunda linha — órfão. Empilhado, o separador some. */
  .dva-pr__seg{flex-direction:column;align-items:center;gap:.45rem}
  .dva-pr__seg span+span::before{display:none}
}

/* ▸ A PALAVRA "economize" SÓ SOME ABAIXO DE 375px.
   Com três abas, o espaço útil de cada uma é (largura do bloco − 16) / 3
   menos o padding. A 375px sobram 95px para um texto de 91px — passa
   raspando. A 360px já não cabe, e o rótulo quebraria em duas linhas,
   desalinhando as três abas.
   O corte anterior era 520px, conservador demais: escondia a palavra em
   telas onde ela cabia com folga. */
@media (max-width:374px){
  .dva-pr__off i{display:none}
}

@media (prefers-reduced-motion:reduce){
  .dva-pr__tab,.dva-pr__pane{transition:none!important}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-927c27d *//* ═══════════════════════════════════════════════════════════════════════
   DVA · CÉREBRO DE FUNDO — seção 07, montada à mão no Elementor.

   ONDE COLAR: Avançado → CSS personalizado da SEÇÃO.
   `.elementor-23 .elementor-element.elementor-element-927c27d` é o placeholder do Elementor: ele troca pelo id único da seção,
   então isto não vaza para lugar nenhum.

   ⚠ ADICIONE TAMBÉM a classe  dva-bx  em Avançado → Classes CSS.
     O CSS aqui funciona sozinho; a classe existe só para o JS achar a seção
     e aplicar o parallax. Sem ela o cérebro fica parado, e nada quebra.

   NÃO altera layout: só cria um ::before absoluto, atrás e sem eventos.
   ═══════════════════════════════════════════════════════════════════════ */

.elementor-23 .elementor-element.elementor-element-927c27d{
  /* ambos podem já estar assim no Elementor. Redeclarar é inofensivo e
     garante a âncora do posicionamento absoluto. */
  position:relative;

  /* clip e não hidden: hidden cria contexto de rolagem e quebra pin de
     ScrollTrigger em ancestrais. clip só recorta. A linha hidden fica antes
     como reserva para navegador que não conheça clip. */
  overflow:hidden;
  overflow:clip;
}

.elementor-23 .elementor-element.elementor-element-927c27d::before{
  content:'';
  position:absolute;
  pointer-events:none;

  /* ▸ AJUSTE AQUI */
  --bx-w:min(640px,56%);
  --bx-op:.06;

  width:var(--bx-w);
  aspect-ratio:1.0383;          /* proporção real do cerebro.svg */
  right:-9%;
  top:50%;

  /* z-index 0 e ::before (não ::after) de propósito: o pseudo entra como
     PRIMEIRO filho, então na mesma camada de empilhamento ele pinta antes
     dos widgets do Elementor, que são position:relative. Fica atrás. */
  z-index:0;

  color:var(--node,#0a6ab9);
  opacity:var(--bx-op);
  background:currentColor;
  -webkit-mask:url("/wp-content/uploads/2026/07/cerebro.svg") center/contain no-repeat;
          mask:url("/wp-content/uploads/2026/07/cerebro.svg") center/contain no-repeat;

  /* o -50% centra na vertical; o --bx-y é o parallax, escrito pelo GSAP.
     Sem GSAP, --bx-y não existe, o fallback 0px vale e ele só fica parado. */
  transform:translateY(-50%) translateY(var(--bx-y,0px));

  /* A flutuação usa a propriedade `translate`, NÃO `transform` — as duas são
     propriedades separadas e se compõem. Se estivesse no transform, ela
     brigaria com o parallax pelo mesmo valor. */
  animation:dvaBxFlutua 13s ease-in-out infinite;
}

@keyframes dvaBxFlutua{
  0%,100%{translate:0 0}
  50%    {translate:-18px -28px}
}

/* No celular ele muda de lugar, não só de tamanho.
   Ancorado no meio, ele fica atrás do card de preços — que é branco e OPACO.
   A conta: 335px de cérebro com 20px visíveis. Sobe para o topo, onde só há
   o rótulo e a headline: texto deixa o fundo passar, superfície não.
   ⚠ mudando o top, o transform TEM que mudar junto: o translateY(-50%) da
     regra base existe só para compensar o top:50%. */
@media (max-width:767px){
  .elementor-23 .elementor-element.elementor-element-927c27d::before{
    --bx-w:min(320px,62%);
    --bx-op:.055;
    right:-15%;
    top:1.5rem;
    transform:translateY(var(--bx-y,0px));
  }
}

@media (prefers-reduced-motion:reduce){
  .elementor-23 .elementor-element.elementor-element-927c27d::before{animation:none!important}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-9eed66b */.elementor-23 .elementor-element.elementor-element-9eed66b{
    
    text-wrap: balance;;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cb965a0 *//* ═══════════════════════════════════════════════════════════════════════
   DVA · TAGS (08) — CSS personalizado do widget. Fallbacks do tom CREME.
   Sem margem no topo: a folga vem do espaçamento entre widgets do Elementor.
   ═══════════════════════════════════════════════════════════════════════ */

.dva-stt{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  max-width:38ch;
}

.dva-stt__t{
  font-family:Outfit,system-ui,sans-serif;
  font-weight:300;
  font-size:var(--fs-1,1rem);
  line-height:1;
  color:var(--fg2,rgba(4,15,52,.68));
  border:1px solid var(--hair2,rgba(20,29,61,.26));
  border-radius:var(--r-pill,44px);
  padding:.5rem .9rem;
  white-space:nowrap;
}

@media (max-width:520px){
  .dva-stt{max-width:none;gap:.42rem}
  .dva-stt__t{padding:.45rem .8rem}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d62bf72 *//* ═══════════════════════════════════════════════════════════════════════
   DVA · FAQ (08) — CSS personalizado do widget. Fallbacks do tom CREME.
   ═══════════════════════════════════════════════════════════════════════ */

.dva-fq{
  border-top:1px solid var(--hair,rgba(20,29,61,.13));
}

.dva-fq__i{
  border-bottom:1px solid var(--hair,rgba(20,29,61,.13));
}

/* ── PERGUNTA ──
   list-style:none + ::marker vazio + o pseudo do WebKit: são três formas de
   matar o triângulo padrão do <summary>, e navegadores diferentes obedecem
   a formas diferentes. As três juntas cobrem todos. */
.dva-fq__q{
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:clamp(1.05rem,2vw,1.35rem) 0;
  cursor:pointer;
  font-family:Outfit,system-ui,sans-serif;
  font-weight:300;
  font-size:var(--fs-2,1.125rem);
  line-height:1.4;
  color:var(--hl,#040f34);
  transition:color .35s var(--ease,cubic-bezier(.16,1,.3,1));
}
.dva-fq__q::marker{content:''}
.dva-fq__q::-webkit-details-marker{display:none}
.dva-fq__q:hover{color:var(--acc,#0a6ab9)}
.dva-fq__q:focus-visible{outline:2px solid var(--acc,#0a6ab9);outline-offset:3px}

/* ── SINAL ──
   Mais vira menos: a barra vertical some, a horizontal fica. Sem rotação de
   45°, que num acordeão de 9 itens vira movimento demais. */
.dva-fq__ic{position:relative;width:14px;height:14px;flex:none;color:var(--acc,#0a6ab9)}
.dva-fq__ic::before,.dva-fq__ic::after{
  content:'';position:absolute;background:currentColor;
  transition:transform .4s var(--ease,cubic-bezier(.16,1,.3,1));
}
.dva-fq__ic::before{left:0;top:50%;width:100%;height:1.5px;transform:translateY(-50%)}
.dva-fq__ic::after{top:0;left:50%;height:100%;width:1.5px;transform:translateX(-50%)}
.dva-fq__i[open] .dva-fq__ic::after{transform:translateX(-50%) scaleY(0)}

/* ── RESPOSTA ── */
.dva-fq__a{padding:0 2.6rem clamp(1.1rem,2vw,1.4rem) 0}
/* link dentro da resposta: sublinhado sempre visível, senão ele fica
   distinguível só pela cor — que é um dos apontamentos de acessibilidade */
.dva-fq__l,.dva-fq__l:link,.dva-fq__l:visited{
  color:var(--acc,#0a6ab9)!important;
  text-decoration:underline!important;
  text-underline-offset:.2em;
  word-break:break-word;
}

.dva-fq__a p{
  margin:0;
  font-size:var(--fs-2,1.125rem);
  line-height:1.7;
  color:var(--fg2,rgba(4,15,52,.68));
}

/* Abertura suave. ::details-content e interpolate-size são recentes: onde não
   houver suporte o acordeão abre instantâneo, que é degradação aceitável.
   Por isso NÃO existe fallback em JS — seria complexidade por 0,4s. */
@media (prefers-reduced-motion:no-preference){
  .dva-fq__i{interpolate-size:allow-keywords}
  .dva-fq__i::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .42s var(--ease,cubic-bezier(.16,1,.3,1)),
               content-visibility .42s allow-discrete;
  }
  .dva-fq__i[open]::details-content{block-size:auto}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f34309c */.dva-menu-cta{
  --b-bg:#eaeef2;                          /* creme  */
  --b-fg:#040f34;                          /* navy   */
  --b-ease:cubic-bezier(.16,1,.3,1);
  position:relative;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.85rem 1.6rem;
  border-radius:999px;
  font-family:Outfit,system-ui,-apple-system,sans-serif;
  font-size:1rem;font-weight:400;letter-spacing:.01em;line-height:1;
  background:var(--b-bg);
  color:var(--b-fg)!important;
  text-decoration:none!important;
  white-space:nowrap;
  border:0;overflow:hidden;isolation:isolate;box-shadow:none;
  transition:transform .5s var(--b-ease),box-shadow .5s var(--b-ease);
}
/* trava a herança do tema em todos os estados */
.dva-menu-cta:link,.dva-menu-cta:visited,.dva-menu-cta:hover,
.dva-menu-cta:focus,.dva-menu-cta:active{
  color:var(--b-fg)!important;background:var(--b-bg);text-decoration:none!important;
}
/* cortina que sobe no hover */
.dva-menu-cta::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(4,15,52,.1);
  transform:translateY(101%);
  transition:transform .55s var(--b-ease);
}
.dva-menu-cta:hover::before{transform:translateY(0)}
.dva-menu-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}

.dva-menu-cta svg{
  width:16px;height:16px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--b-ease);
}
.dva-menu-cta:hover svg{transform:translateX(5px)}
.dva-menu-cta:focus-visible{outline:2px solid #fdba06;outline-offset:4px}

@media (max-width:560px){
  .dva-menu-cta{padding:.8rem 1.35rem;letter-spacing:.005em}
  .dva-menu-cta svg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dva-menu-cta,.dva-menu-cta::before,.dva-menu-cta svg{transition-duration:.001s!important}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-35422d6 *//* ================================
   SELO DANILLO BORDINO
   ================================ */

.db-seal {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
}

.db-seal a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 8px 16px 8px 8px;
  border-radius: 50px;
  position: relative;
}

/* Ícone circular DB */
.db-seal .db-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: -0.03em;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Texto */
.db-seal .db-text {
  font-weight: 400;
  transition: color 0.3s ease;
}

.db-seal .db-text strong {
  font-weight: 600;
  transition: color 0.3s ease;
}

/* ================================
   VERSÃO FUNDO ESCURO
   ================================ */

.db-seal-dark a {
  color: rgba(255, 255, 255, 0.6);
}

.db-seal-dark a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.db-seal-dark .db-icon {
  background: #fff;
  color: #000;
}

.db-seal-dark a:hover .db-icon {
  transform: rotate(360deg);
  background: #f5f5f5;
}

.db-seal-dark .db-text strong {
  color: rgba(255, 255, 255, 0.9);
}

.db-seal-dark a:hover .db-text strong {
  color: #fff;
}

/* ================================
   VERSÃO FUNDO CLARO
   ================================ */

.db-seal-light a {
  color: rgba(0, 0, 0, 0.5);
}

.db-seal-light a:hover {
  color: #000;
  background: rgba(0, 0, 0, 0.04);
}

.db-seal-light .db-icon {
  background: #000;
  color: #fff;
}

.db-seal-light a:hover .db-icon {
  transform: rotate(360deg);
  background: #222;
}

.db-seal-light .db-text strong {
  color: rgba(0, 0, 0, 0.8);
}

.db-seal-light a:hover .db-text strong {
  color: #000;
}

/* ================================
   RESPONSIVO
   ================================ */

@media (max-width: 767px) {
  .db-seal a {
    font-size: 10px;
    padding: 6px 14px 6px 6px;
    gap: 10px;
  }

  .db-seal .db-icon {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
}

/* ================================
   MOTION REDUCTION
   ================================ */

@media (prefers-reduced-motion: reduce) {
  .db-seal a,
  .db-seal .db-icon,
  .db-seal .db-text,
  .db-seal .db-text strong {
    transition: none;
  }

  .db-seal a:hover .db-icon {
    transform: none;
  }
}/* End custom CSS */
/* Start custom CSS */html, body{
    overflow-x: hidden !important; 
    scroll-behavior: auto !important;
}/* End custom CSS */