.elementor-17 .elementor-element.elementor-element-2787202{--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:9999;}body:not(.rtl) .elementor-17 .elementor-element.elementor-element-2787202{left:0px;}body.rtl .elementor-17 .elementor-element.elementor-element-2787202{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 );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-17 .elementor-element.elementor-element-126c94e img{width:175px;}.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 );text-transform:var( --e-global-typography-primary-text-transform );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 );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-17 .elementor-element.elementor-element-3905815 > .elementor-widget-container{margin:0px 28px 0px 0px;}.elementor-17 .elementor-element.elementor-element-3905815.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-17 .elementor-element.elementor-element-3905815 .elementor-nav-menu .elementor-item{font-family:"Lato", Sans-serif;font-size:13px;font-weight:700;line-height:1.75em;letter-spacing:2px;}.elementor-17 .elementor-element.elementor-element-3905815 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-880ffa6 );fill:var( --e-global-color-880ffa6 );padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;}.elementor-17 .elementor-element.elementor-element-3905815{--e-nav-menu-horizontal-menu-item-margin:calc( 48px / 2 );}.elementor-17 .elementor-element.elementor-element-3905815 .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-17 .elementor-element.elementor-element-b859f30 .elementor-icon-wrapper{text-align:center;}.elementor-17 .elementor-element.elementor-element-b859f30.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-eb3b023 );}.elementor-17 .elementor-element.elementor-element-b859f30.elementor-view-framed .elementor-icon, .elementor-17 .elementor-element.elementor-element-b859f30.elementor-view-default .elementor-icon{color:var( --e-global-color-eb3b023 );border-color:var( --e-global-color-eb3b023 );}.elementor-17 .elementor-element.elementor-element-b859f30.elementor-view-framed .elementor-icon, .elementor-17 .elementor-element.elementor-element-b859f30.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-eb3b023 );}.elementor-17 .elementor-element.elementor-element-b859f30 .elementor-icon{padding:6px;}.elementor-17 .elementor-element.elementor-element-4a5e3d0{--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;}body:not(.rtl) .elementor-17 .elementor-element.elementor-element-8b102b0{right:64px;}body.rtl .elementor-17 .elementor-element.elementor-element-8b102b0{left:64px;}.elementor-17 .elementor-element.elementor-element-8b102b0{top:64px;}.elementor-17 .elementor-element.elementor-element-8b102b0 .elementor-icon-wrapper{text-align:center;}.elementor-17 .elementor-element.elementor-element-8b102b0.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-880ffa6 );}.elementor-17 .elementor-element.elementor-element-8b102b0.elementor-view-framed .elementor-icon, .elementor-17 .elementor-element.elementor-element-8b102b0.elementor-view-default .elementor-icon{color:var( --e-global-color-880ffa6 );border-color:var( --e-global-color-880ffa6 );}.elementor-17 .elementor-element.elementor-element-8b102b0.elementor-view-framed .elementor-icon, .elementor-17 .elementor-element.elementor-element-8b102b0.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-880ffa6 );}.elementor-17 .elementor-element.elementor-element-8b102b0 .elementor-icon{font-size:32px;}.elementor-17 .elementor-element.elementor-element-8b102b0 .elementor-icon svg{height:32px;}.elementor-17 .elementor-element.elementor-element-c21c5b0.elementor-element{--align-self:flex-start;}.elementor-17 .elementor-element.elementor-element-c21c5b0{text-align:start;}.elementor-17 .elementor-element.elementor-element-c21c5b0 img{width:225px;max-width:225px;}.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 );text-transform:var( --e-global-typography-secondary-text-transform );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-17 .elementor-element.elementor-element-b97175a{--divider-border-style:solid;--divider-color:#DCC8AA24;--divider-border-width:1px;}.elementor-17 .elementor-element.elementor-element-b97175a .elementor-divider-separator{width:100%;}.elementor-17 .elementor-element.elementor-element-b97175a .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-17 .elementor-element.elementor-element-79bc761.elementor-element{--align-self:flex-start;}.elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-menu-toggle{color:var( --e-global-color-e45b8f2 );fill:var( --e-global-color-e45b8f2 );}.elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown{background-color:#02010100;}.elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a:hover, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a:focus, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a.highlighted, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-menu-toggle:hover, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-menu-toggle:focus{color:var( --e-global-color-accent );}.elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a:hover, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a:focus, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a.highlighted{background-color:#02010100;}.elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a.elementor-item-active{color:var( --e-global-color-accent );background-color:#02010100;}.elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown .elementor-item, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-becd162-font-family ), Sans-serif;font-size:var( --e-global-typography-becd162-font-size );font-weight:var( --e-global-typography-becd162-font-weight );letter-spacing:var( --e-global-typography-becd162-letter-spacing );}.elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a{padding-left:0px;padding-right:0px;padding-top:12px;padding-bottom:12px;}.elementor-17 .elementor-element.elementor-element-8f4f10d{--divider-border-style:solid;--divider-color:#DCC8AA24;--divider-border-width:1px;}.elementor-17 .elementor-element.elementor-element-8f4f10d .elementor-divider-separator{width:100%;}.elementor-17 .elementor-element.elementor-element-8f4f10d .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-17 .elementor-element.elementor-element-2e1b19a{--grid-template-columns:repeat(0, auto);--icon-size:20px;--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-17 .elementor-element.elementor-element-2e1b19a .elementor-widget-container{text-align:left;}.elementor-17 .elementor-element.elementor-element-2e1b19a.elementor-element{--align-self:flex-start;}.elementor-17 .elementor-element.elementor-element-2e1b19a .elementor-social-icon{background-color:#76697300;--icon-padding:10px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E1DFE059;}.elementor-17 .elementor-element.elementor-element-e014787{--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-17 .elementor-element.elementor-element-562f7f4{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:160px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;--z-index:5;}.elementor-17 .elementor-element.elementor-element-562f7f4:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-562f7f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-880ffa6 );}.elementor-17 .elementor-element.elementor-element-6bc239f{--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;}.elementor-17 .elementor-element.elementor-element-6bc239f.e-con{--align-self:center;}.elementor-17 .elementor-element.elementor-element-bb9e876{--display:flex;--justify-content:center;}.elementor-17 .elementor-element.elementor-element-bb9e876.e-con{--order:-99999 /* order start hack */;}.elementor-17 .elementor-element.elementor-element-462152c > .elementor-widget-container{margin:-128px 0px -128px 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-462152c.elementor-element{--align-self:flex-start;}.elementor-17 .elementor-element.elementor-element-592ad81{--display:flex;--justify-content: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-17 .elementor-element.elementor-element-22f61e4{--display:flex;}.elementor-17 .elementor-element.elementor-element-7c550cd{--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-17 .elementor-element.elementor-element-02af2b6{--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-17 .elementor-element.elementor-element-e0e566d{--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-17 .elementor-element.elementor-element-1162f67{--display:flex;}@media(min-width:768px){.elementor-17 .elementor-element.elementor-element-6bc239f{--width:100%;}.elementor-17 .elementor-element.elementor-element-bb9e876{--width:50%;}}@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 );letter-spacing:var( --e-global-typography-text-letter-spacing );}.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 );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.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-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown .elementor-item, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-becd162-font-size );letter-spacing:var( --e-global-typography-becd162-letter-spacing );}}@media(max-width:1366px){.elementor-17 .elementor-element.elementor-element-2787202{--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 );letter-spacing:var( --e-global-typography-text-letter-spacing );}.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 );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.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-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown .elementor-item, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-becd162-font-size );letter-spacing:var( --e-global-typography-becd162-letter-spacing );}.elementor-17 .elementor-element.elementor-element-562f7f4{--padding-top:96px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}}@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 );letter-spacing:var( --e-global-typography-text-letter-spacing );}.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 );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-17 .elementor-element.elementor-element-4a5e3d0{--padding-top:32px;--padding-bottom:32px;--padding-left:32px;--padding-right:32px;}body:not(.rtl) .elementor-17 .elementor-element.elementor-element-8b102b0{right:32px;}body.rtl .elementor-17 .elementor-element.elementor-element-8b102b0{left:32px;}.elementor-17 .elementor-element.elementor-element-8b102b0{top:64px;}.elementor-17 .elementor-element.elementor-element-8b102b0 .elementor-icon{font-size:32px;}.elementor-17 .elementor-element.elementor-element-8b102b0 .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-17 .elementor-element.elementor-element-79bc761.elementor-element{--align-self:flex-start;}.elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown .elementor-item, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-becd162-font-size );letter-spacing:var( --e-global-typography-becd162-letter-spacing );}.elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a{padding-left:0px;padding-right:0px;padding-top:16px;padding-bottom:16px;}}@media(max-width:767px){.elementor-17 .elementor-element.elementor-element-2787202{--min-height:60px;--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 );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-17 .elementor-element.elementor-element-126c94e 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 );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-17 .elementor-element.elementor-element-b859f30 .elementor-icon{font-size:24px;}.elementor-17 .elementor-element.elementor-element-b859f30 .elementor-icon svg{height:24px;}.elementor-17 .elementor-element.elementor-element-4a5e3d0{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-17 .elementor-element.elementor-element-8b102b0{right:32px;}body.rtl .elementor-17 .elementor-element.elementor-element-8b102b0{left:32px;}.elementor-17 .elementor-element.elementor-element-8b102b0{top:32px;}.elementor-17 .elementor-element.elementor-element-8b102b0 .elementor-icon{font-size:24px;}.elementor-17 .elementor-element.elementor-element-8b102b0 .elementor-icon svg{height:24px;}.elementor-17 .elementor-element.elementor-element-c21c5b0 img{width:200px;max-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-17 .elementor-element.elementor-element-b97175a .elementor-divider{padding-block-start:5px;padding-block-end:5px;}.elementor-17 .elementor-element.elementor-element-79bc761 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-79bc761.elementor-element{--align-self:flex-start;}.elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown .elementor-item, .elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-becd162-font-size );letter-spacing:var( --e-global-typography-becd162-letter-spacing );}.elementor-17 .elementor-element.elementor-element-79bc761 .elementor-nav-menu--dropdown a{padding-left:0px;padding-right:0px;padding-top:12px;padding-bottom:12px;}.elementor-17 .elementor-element.elementor-element-8f4f10d .elementor-divider{padding-block-start:5px;padding-block-end:5px;}.elementor-17 .elementor-element.elementor-element-2e1b19a{--icon-size:16px;}.elementor-17 .elementor-element.elementor-element-562f7f4{--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-17 .elementor-element.elementor-element-6bc239f{--gap:32px 32px;--row-gap:32px;--column-gap:32px;}.elementor-17 .elementor-element.elementor-element-bb9e876.e-con{--order:99999 /* order end hack */;}.elementor-17 .elementor-element.elementor-element-462152c{width:100%;max-width:100%;}.elementor-17 .elementor-element.elementor-element-462152c > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-592ad81.e-con{--order:-99999 /* order start hack */;}}/* Start custom CSS for nav-menu, class: .elementor-element-3905815 *//* ═══════════════════════════════════════ ORGÂNICO COMUNICAÇÃO — MENU CSS personalizado do WIDGET DE MENU. Aqui .elementor-17 .elementor-element.elementor-element-3905815 é o próprio widget, então nada disso escapa para outros menus da página. O cabeçalho é transparente sobre o hero e roxo depois de rolar, então os itens são claros o tempo todo — não há troca de cor. ═══════════════════════════════════════ */ .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item { position: relative; font-family: 'Lato', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #f5f5f7 !important; transition: color .45s cubic-bezier(.16, 1, .3, 1); } /* sublinhado que abre do centro para as laterais */ .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform .4s cubic-bezier(.16, 1, .3, 1); } .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item:hover::after, .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item.elementor-item-active::after, .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item.highlighted::after { transform: scaleX(1); } /* o tema adora repintar : todos os estados travados */ .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item, .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item:hover, .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item:focus, .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item:active, .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item:visited, .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item.elementor-item-active, .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item.highlighted { background: transparent !important; background-color: transparent !important; box-shadow: none !important; text-decoration: none !important; outline: none; -webkit-tap-highlight-color: transparent; } .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item:focus-visible { outline: 2px solid var(--e-global-color-accent, #4f9ecd); outline-offset: 4px; } /* ── menu aberto no mobile ── */ .elementor-17 .elementor-element.elementor-element-3905815 .elementor-nav-menu--dropdown { background: var(--e-global-color-primary, #393166); } .elementor-17 .elementor-element.elementor-element-3905815 .elementor-nav-menu--dropdown .elementor-item, html.og-scrolled .elementor-17 .elementor-element.elementor-element-3905815 .elementor-nav-menu--dropdown .elementor-item { color: #f5f5f7 !important; font-size: 16px; letter-spacing: .04em; } .elementor-17 .elementor-element.elementor-element-3905815 .elementor-nav-menu--dropdown .elementor-item::after { display: none; } @media (prefers-reduced-motion: reduce) { .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item, .elementor-17 .elementor-element.elementor-element-3905815 .elementor-item::after { transition-duration: .001ms !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-d1117de *//* ═══════════════════════════════════════ ORGÂNICO COMUNICAÇÃO — BOTÃO DO CABEÇALHO CSS personalizado do widget do botão. O cabeçalho é roxo do começo ao fim, então o botão é PAPEL cheio com texto roxo o tempo todo. No hover o preenchimento SAI pelo topo com a aresta diagonal e sobra o vazado — o inverso do botão do hero. ═══════════════════════════════════════ */ .elementor-17 .elementor-element.elementor-element-d1117de .og-cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 11px; padding: 12px 12px 12px 24px; border: 1px solid transparent; border-radius: 100px; background: transparent; font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1; white-space: nowrap; box-shadow: none; transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .45s cubic-bezier(.16,1,.3,1); } .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:link, .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:visited, .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:hover, .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:focus, .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:active { text-decoration: none !important; } /* preenchimento: papel sobre o hero, roxo depois de rolar */ .elementor-17 .elementor-element.elementor-element-d1117de .og-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #f5f5f7; clip-path: polygon(0% -20%, 100% 0%, 100% 100%, 0% 100%); transition: clip-path .62s cubic-bezier(.76,0,.24,1), background .45s ease; } /* no hover o preenchimento sai pelo topo e sobra o vazado */ .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:hover::before, .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:focus-visible::before { clip-path: polygon(0% -120%, 100% -100%, 100% 0%, 0% -20%); } .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:hover, .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:focus-visible { transform: translateY(-2px); border-color: #f5f5f7; } /* rolo do rótulo: o de cima sai, o de baixo entra já na cor certa */ .elementor-17 .elementor-element.elementor-element-d1117de .og-cta__l { display: block; position: relative; overflow: hidden; } .elementor-17 .elementor-element.elementor-element-d1117de .og-cta__l > span { display: block; color: var(--e-global-color-primary, #393166); transition: transform .62s cubic-bezier(.76,0,.24,1), color .45s ease; } .elementor-17 .elementor-element.elementor-element-d1117de .og-cta__l > span:nth-child(2) { position: absolute; top: 100%; left: 0; color: #f5f5f7; } .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:hover .og-cta__l > span, .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:focus-visible .og-cta__l > span { transform: translateY(-100%); } .elementor-17 .elementor-element.elementor-element-d1117de .og-cta i { width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent; background: var(--e-global-color-accent, #4f9ecd); color: #fff; display: grid; place-items: center; flex: none; transition: transform .55s cubic-bezier(.76,0,.24,1), background .5s ease, color .5s ease, border-color .5s ease; } .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:hover i, .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:focus-visible i { transform: translateX(4px); background: transparent; border-color: #f5f5f7; color: #f5f5f7; } .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:focus-visible { outline: 2px solid var(--e-global-color-accent, #4f9ecd); outline-offset: 3px; } @media (max-width: 767px) { .elementor-17 .elementor-element.elementor-element-d1117de .og-cta { padding: 10px 10px 10px 18px; font-size: 11px; } .elementor-17 .elementor-element.elementor-element-d1117de .og-cta i { width: 28px; height: 28px; } } @media (prefers-reduced-motion: reduce) { .elementor-17 .elementor-element.elementor-element-d1117de .og-cta, .elementor-17 .elementor-element.elementor-element-d1117de .og-cta::before, .elementor-17 .elementor-element.elementor-element-d1117de .og-cta__l > span, .elementor-17 .elementor-element.elementor-element-d1117de .og-cta i { transition-duration: .001ms !important; } .elementor-17 .elementor-element.elementor-element-d1117de .og-cta:hover { transform: none; } }/* End custom CSS */ /* Start custom CSS for icon, class: .elementor-element-8b102b0 */.elementor-17 .elementor-element.elementor-element-8b102b0{ cursor: pointer; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a5e3d0 *//* ═══════════════════════════════════════ ORGÂNICO COMUNICAÇÃO — POPUP Configurações do site → CSS personalizado, abaixo do hero.css Só entrada e saída. Formatação é no Elementor. gatilho .open-popup painel #popup-overlay fechar #close-button ═══════════════════════════════════════ */ body.popup-open { overflow: hidden !important; } /* ── PAINEL ── Revelação por clip-path em diagonal, não por deslizamento. O conteúdo fica parado e a máscara passa por cima, o que dá leitura de cortina em vez de gaveta empurrada. A aresta de cima chega 22% antes da de baixo, e é isso que cria a diagonal. */ #popup-overlay { position: fixed; top: 0; right: 0; width: 30vw; height: 100vh; height: 100svh; z-index: 999; background: rgba(57, 49, 102, .97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; justify-content: center; align-items: center; visibility: hidden; will-change: clip-path; clip-path: polygon(100% 0, 100% 0, 122% 100%, 122% 100%); transition: clip-path .9s cubic-bezier(.76, 0, .24, 1), visibility .9s; } #popup-overlay.active { visibility: visible; clip-path: polygon(-22% 0, 100% 0, 100% 100%, -22% 100%); } #popup-overlay.closing { visibility: hidden; clip-path: polygon(100% 0, 100% 0, 122% 100%, 122% 100%); transition: clip-path .55s cubic-bezier(.76, 0, .24, 1), visibility .55s; } /* ── ITENS ── Sobem em cascata depois que a cortina passa. Mexe só em opacidade e deslocamento, nada de formatação. */ #popup-overlay .elementor-widget { opacity: 0; transform: translateY(18px); transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1); } #popup-overlay.active .elementor-widget { opacity: 1; transform: none; } #popup-overlay.active .elementor-widget:nth-child(1) { transition-delay: .34s; } #popup-overlay.active .elementor-widget:nth-child(2) { transition-delay: .41s; } #popup-overlay.active .elementor-widget:nth-child(3) { transition-delay: .48s; } #popup-overlay.active .elementor-widget:nth-child(4) { transition-delay: .55s; } #popup-overlay.active .elementor-widget:nth-child(5) { transition-delay: .62s; } #popup-overlay.active .elementor-widget:nth-child(6) { transition-delay: .69s; } #popup-overlay.active .elementor-widget:nth-child(7) { transition-delay: .76s; } #popup-overlay.active .elementor-widget:nth-child(8) { transition-delay: .83s; } /* Na saída todos vão juntos e rápido, senão a cascata invertida segura a cortina e a animação parece travada. O :nth-child(n) existe só para empatar a especificidade com as regras de cascata acima. */ #popup-overlay.closing .elementor-widget:nth-child(n) { opacity: 0; transform: translateY(8px); transition-duration: .22s; transition-delay: 0s; } /* ── LARGURA ── */ @media (max-width: 1280px) { #popup-overlay { width: 40vw; } } @media (max-width: 1024px) { #popup-overlay { width: 60vw; } } @media (max-width: 767px) { #popup-overlay { width: 85vw; } } @media (prefers-reduced-motion: reduce) { #popup-overlay, #popup-overlay.closing, #popup-overlay .elementor-widget { transition-duration: .001ms !important; transition-delay: 0s !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-2787202 *//* ═══════════════════════════════════════ ORGÂNICO COMUNICAÇÃO — HEADER CSS personalizado do CONTAINER FIXO. O container precisa ter a classe header-menu (o JS procura por ela para aplicar .scrolled). ═══════════════════════════════════════ */ .elementor-17 .elementor-element.elementor-element-2787202 { background: transparent; /* backdrop-filter fica FORA da transição: animar desfoque obriga o navegador a refazer o borrão a cada quadro, e este cabeçalho fica visível a página inteira. A propriedade continua, só não transiciona. */ transition: background .4s var(--og-ease, cubic-bezier(.16, 1, .3, 1)), box-shadow .4s var(--og-ease, cubic-bezier(.16, 1, .3, 1)); } /* Overlay de fundo do Elementor vira um ::before opaco POR CIMA do background — causa nº 1 de "o cabeçalho não muda de cor". */ .elementor-17 .elementor-element.elementor-element-2787202 > .elementor-background-overlay { display: none !important; } /* Transparente sobre o hero e ROXO depois de rolar. O cabeçalho não muda de cor com o fundo da página: ele mantém a cor da marca do começo ao fim, e os itens continuam claros o tempo todo. */ .elementor-17 .elementor-element.elementor-element-2787202.scrolled { background: rgba(57, 49, 102, .94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 10px 30px -18px rgba(33, 28, 60, .55); } /* Logo encolhe ao rolar */ .elementor-17 .elementor-element.elementor-element-2787202 .elementor-widget-theme-site-logo img, .elementor-17 .elementor-element.elementor-element-2787202 .elementor-widget-image img { transition: transform .4s var(--og-ease, cubic-bezier(.16, 1, .3, 1)); transform-origin: left center; } .elementor-17 .elementor-element.elementor-element-2787202.scrolled .elementor-widget-theme-site-logo img, .elementor-17 .elementor-element.elementor-element-2787202.scrolled .elementor-widget-image img { transform: scale(.9); } @media (prefers-reduced-motion: reduce) { .elementor-17 .elementor-element.elementor-element-2787202, .elementor-17 .elementor-element.elementor-element-2787202 .elementor-widget-image img, .elementor-17 .elementor-element.elementor-element-2787202 .elementor-widget-theme-site-logo img { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-2034f64 *//* ═══════════════════════════════════════════════════════════ ORGÂNICO COMUNICAÇÃO — HERO Configurações do site → CSS personalizado. Tudo escopado em #hero-organico para não vazar no tema. ═══════════════════════════════════════════════════════════ */ /* O widget HTML do Elementor corta por padrão. Sem isto o selo, que é absoluto e sai da caixa, some. */ .elementor-widget-html{overflow:visible !important} /* O cabeçalho entra no FIM da coreografia, e quem comanda é o JS. A regra abaixo é só o estado inicial. */ /* ⚠ Só opacidade, sem transform: quem posiciona é o GSAP. Um transform aqui competiria com o inline dele e, se a cena falhasse, o cabeçalho ficaria fora da tela. */ html.og-cena .header-menu{opacity:0} /* Âncora não para embaixo do cabeçalho fixo, sem depender de JS. */ [id]{scroll-margin-top:calc(var(--og-head-h, 80px) + 24px)} /* Lenis precisa destas três linhas para o scroll suave não brigar com scroll-behavior do tema. */ .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-stopped{overflow:hidden} html{scrollbar-gutter:stable} /* A folha do hero sangra para fora da seção — de propósito. Quem segura a rolagem lateral é o documento, não o hero. clip e não hidden: hidden quebraria position:sticky mais adiante. */ html{overflow-x:clip} /* Revelação ao entrar na tela — classe og-rv em qualquer widget do Elementor (campo Avançado → Classes CSS). Atraso opcional por --d. data-og-split faz a mesma coisa palavra a palavra. O desfoque de entrada segue a mesma escala dos planos de profundidade: --b vale plano × 2px e é escrito pelo JS. Quem está no plano 0 entra sem desfoque, só subindo. */ .og-rv{opacity:0;transform:translateY(26px); transition:opacity 1.05s cubic-bezier(.16,1,.3,1) var(--d,0s), transform 1.05s cubic-bezier(.16,1,.3,1) var(--d,0s), filter .75s cubic-bezier(.16,1,.3,1) var(--d,0s)} .og-rv.in{opacity:1;transform:none} /* ⚠ O desfoque vive em classe SEPARADA, aplicada pelo JS só a quem tem plano maior que zero, e some para `none` ao revelar. Motivo: qualquer filter diferente de none — inclusive blur(0px) — cria bloco de contenção e faz position:fixed de qualquer filho passar a se referir a este elemento em vez da janela. Foi o que quebrou o cursor do vídeo quando o blur estava dentro de .og-rv. */ .og-rvb{filter:blur(var(--b,0px))} .og-rvb.in{filter:none} /* Grupo: o container recebe data-og-grupo e o JS revela os filhos em cascata, sem precisar escrever --d um por um. */ [data-og-grupo] > *{opacity:0} .og-w{display:inline-block;opacity:0;transform:translateY(.45em); transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)} .og-w.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.og-rv,.og-w{opacity:1 !important;transform:none !important}} #hero-organico{ /* --- cores --- Hero em roxo cheio, fazendo par com o contato: a página clara fica entre os dois. --bg é o tom MÉDIO do gradiente, não o gradiente: ele é a cor com que o selo é pintado para sumir fora das fotos. */ --roxo: var(--e-global-color-primary, #393166); --bg: #332c5e; --fg: #f5f5f7; --hair: rgba(255,255,255,.26); /* Cores escolhidas pela cliente no painel: headline ....... papel subtítulo ...... cinza da logo frase final .... cinza da logo seta do botão .. azul */ --azul: var(--e-global-color-accent, #82bfe8); --cinza: #d6dbdf; /* ponte: sombra em baixo-relevo */ --pn: rgba(16,12,38,.20); --ponte: url('https://organicocomunicacao.com.br/wp-content/uploads/2026/08/ponte-final.svg'); --pn-tam: 108% auto; --pn-pos: -4% 14%; /* 14% para baixo: a ponte nasce mais baixa e sobra estrutura abaixo da dobra. Sem essa folga, o deslize do scroll levanta a base e ela parece flutuar. */ --container:1280px; --gutter:32px; /* altura do cabeçalho: 80px no desktop, 60px no mobile. O JS remede e sobrescreve em --og-head-h se o cabeçalho for sobreposto; se estiver no fluxo, escreve 0. Estes valores são o primeiro paint, antes da medição. */ --navh:var(--og-head-h, 80px); --raio:48px; --ease:cubic-bezier(.16,1,.3,1); /* --- pilha de fotos --- */ --cw:clamp(230px,25vw,340px); /* largura da carta da frente */ /* --- tipografia do display --- */ /* --- carrossel --- */ --folha:url("https://organicocomunicacao.com.br/wp-content/uploads/2026/08/folha-organico.svg"); position:relative; /* 100svh mais o raio: os cantos arredondados ficam logo abaixo da dobra, então a primeira tela é toda reta. O padding de baixo devolve essa altura extra, para o conteúdo continuar centrado no que se vê. */ min-height:calc(100svh + var(--raio)); display:flex; flex-direction:column; justify-content:center; /* centro exato do espaço abaixo da nav */ padding-block:var(--navh) var(--raio); /* só os cantos de baixo: o hero e o contato são os dois blocos roxos da página, e arredondar as bordas internas faz a parte clara se encaixar entre eles em vez de ser cortada por duas faixas retas */ border-radius:0 0 var(--raio) var(--raio); overflow:clip; /* corta os pés da ponte na borda de baixo */ /* sem clip: a folha precisa atravessar para a seção seguinte. O z-index põe o hero acima das seções de baixo, que têm fundo opaco e cobririam a folha. */ z-index:2; color:var(--fg); /* Lavagem de roxo no alto à esquerda, caindo para o cinza da logo no canto oposto — mesma ideia dos stories, em dose bem menor. Os dois números para calibrar são as opacidades: .13 do roxo e .7 do cinza. Acima de .18 o roxo deixa de ser fundo e vira cor. */ /* Mesma diagonal do contato, invertida: o tom mais claro fica no alto à esquerda, onde nasce a headline, e escurece descendo. */ background:var(--bg); background-image: linear-gradient(168deg, var(--roxo) 0%, #332c5e 56%, #241f45 100%); font-family:'Lato',sans-serif; } @media(max-width:767px){ #hero-organico{ --gutter:20px; --navh:var(--og-head-h, 60px); --raio:24px } } #hero-organico *{box-sizing:border-box} #hero-organico img{display:block;max-width:100%} #hero-organico a{text-decoration:none;color:inherit} /* Container. O conteúdo trava em 1280 nas telas largas e vira "largura da tela menos o gutter" nas estreitas. ⚠ border-box e max-width somando o gutter, NÃO content-box: com content-box, width:100% + padding faz a caixa medir 100% + 40px e transbordar para a direita — o conteúdo inteiro sai do eixo e o filete passa da margem. */ #hero-organico .og-inner{ box-sizing:border-box; width:100%; max-width:calc(var(--container) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); position:relative;z-index:3; } /* ---------- PONTE ---------- Arquivo SVG externo, entrando por MÁSCARA e não como imagem: a máscara usa só a silhueta do arquivo, e quem pinta é o background. Duas vantagens: a cor é nossa (o arquivo é preto e sobre roxo ficaria preto mesmo) e trocar o desenho é trocar o arquivo no servidor. ⚠ O espelho mora no PALCO e não na ponte: o GSAP reescreve o transform da ponte a cada quadro e apagaria um scaleX declarado lá. */ #hero-organico .og-palco{ position:absolute;inset:0; z-index:0;pointer-events:none; transform:scaleX(-1); perspective:1600px; perspective-origin:44% 46%; } #hero-organico .og-ponte{ position:absolute;inset:0; background:var(--pn); -webkit-mask:var(--ponte) var(--pn-pos) / var(--pn-tam) no-repeat; mask:var(--ponte) var(--pn-pos) / var(--pn-tam) no-repeat; will-change:transform,clip-path; } @media(max-width:900px){ #hero-organico .og-palco{opacity:.5} #hero-organico .og-ponte{--pn-tam:auto 100%;--pn-pos:65% 65%} } /* ---------- TEXTO ---------- */ #hero-organico .og-col{padding-right:calc(var(--cw) + clamp(46px,5.5vw,96px))} /* Corpo muito menor e caixa baixa: em Black e 115px a headline lia como anúncio. Primeira linha em peso normal, segunda em bold — a estrutura da referência aprovada. */ #hero-organico .og-h1{ margin:0; font-size:clamp(1.9rem,3.9vw,3.4rem); font-weight:400;line-height:1.14;letter-spacing:-.03em; color:var(--fg);text-wrap:balance; } #hero-organico .og-forte > span{font-weight:700} #hero-organico .og-line{display:block;overflow:hidden} #hero-organico .og-line > span{ display:block; } /* ⚠ Só opacidade aqui, e nada de transform: quem posiciona as linhas é o GSAP, com from(). Um transform declarado no CSS competiria com o inline do GSAP e, se a cena falhasse, deixaria a headline escondida para sempre. */ html.og-cena #hero-organico .og-line > span{opacity:0} /* ⚠ Sem opacidade. Cor lavada por opacity vira um tom sujo e imprevisível; o que segura é o valor cheio. */ #hero-organico .og-sub{ margin:clamp(16px,1.8vw,24px) 0 0; font-size:clamp(15px,1.5vw,17px);line-height:1.7; color:var(--cinza);max-width:44ch;text-wrap:pretty; } /* Abaixo do filete ficam só o botão, à esquerda, e o selo, à direita. A terceira frase saiu — a headline e o subtítulo já dizem o que precisa, e ela virava um terceiro bloco de texto no mesmo tom. */ #hero-organico .og-foot{ --selo:clamp(84px,8vw,120px); /* O respiro do topo é calculado, não escolhido: ele precisa ser grande o bastante para a metade de cima do selo caber abaixo do filete. Metade do selo, menos a metade da altura do botão, mais 14px de folga. */ --pt:max(26px, calc(var(--selo) / 2 - 26px + 14px)); margin-top:clamp(34px,5.5vw,68px);padding-top:var(--pt); position:relative;z-index:5; display:flex;align-items:center; min-height:calc(var(--pt) + 26px + var(--selo) / 2); } #hero-organico .og-foot::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair); transform-origin:left center; /* o GSAP anima --fil no .og-foot e o pseudo lê aqui: pseudo-elemento não se anima direto */ transform:scaleX(var(--fil,1)); } /* botão — preenchimento sobe com aresta diagonal e o rótulo rola. Curva .76,0,.24,1 nas duas coisas: é a mesma do popup, então a página inteira fala o mesmo dialeto de movimento. */ /* Branco cheio, e não vazado: sobre o desenho da ponte um botão só de contorno se perdia no meio das linhas. */ /* ⚠ Altura e alinhamento fixos, e nenhuma transição de transform. @media(prefers-reduced-motion:reduce){ } /* botão — preenchimento branco cheio que sai pelo topo com a aresta diagonal no hover, e o rótulo rola. Curva .76,0,.24,1 nas duas coisas: é a mesma do popup, então a página fala o mesmo dialeto. ⚠ Altura fixa e nenhuma transição de transform: o botão muda de cor e de recorte, nunca de caixa. */ #hero-organico .og-ghost{ position:relative;isolation:isolate;overflow:hidden; display:inline-flex;align-items:center;gap:16px;white-space:nowrap; flex:none; height:52px;box-sizing:border-box; border:1px solid transparent;color:var(--roxo);border-radius:100px; padding:0 7px 0 24px; font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase; transition:border-color .5s var(--ease); } #hero-organico .og-ghost::before{ content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit; background:var(--fg); clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition:clip-path .62s cubic-bezier(.76,0,.24,1); } #hero-organico .og-ghost:hover::before, #hero-organico .og-ghost:focus-visible::before{ clip-path:polygon(0% -118%, 100% -100%, 100% 0%, 0% -18%); } #hero-organico .og-ghost:hover, #hero-organico .og-ghost:focus-visible{border-color:var(--fg)} /* rolo do rótulo: o de cima sai, o de baixo entra já na cor nova */ #hero-organico .og-ghost__l{display:block;position:relative;overflow:hidden;height:1.2em;line-height:1.2} #hero-organico .og-ghost__l > span{ display:block; transition:transform .62s cubic-bezier(.76,0,.24,1); } #hero-organico .og-ghost__l > span:nth-child(2){ position:absolute;top:100%;left:0;color:var(--fg); } #hero-organico .og-ghost:hover .og-ghost__l > span, #hero-organico .og-ghost:focus-visible .og-ghost__l > span{transform:translateY(-100%)} /* a seta é o único ponto de cor do botão: círculo azul cheio sobre o papel, invertendo no hover junto com o resto */ #hero-organico .og-ghost i{ width:36px;height:36px;border-radius:50%;display:grid;place-items:center;text-decoration:none; border:1px solid transparent;background:var(--azul);color:#fff; transform:rotate(-45deg); transition:transform .55s var(--ease),background .5s var(--ease), border-color .5s var(--ease),color .5s var(--ease); } #hero-organico .og-ghost:hover i, #hero-organico .og-ghost:focus-visible i{ transform:rotate(0deg); background:transparent;border-color:var(--hair);color:var(--fg); } #hero-organico .og-ghost:focus-visible{outline:2px solid #82bfe8;outline-offset:3px} @media(prefers-reduced-motion:reduce){ #hero-organico .og-ghost::before, #hero-organico .og-ghost__l > span, #hero-organico .og-ghost i{transition-duration:.001ms} } /* ---------- ESTADO INICIAL DA COREOGRAFIA ---------- A classe og-cena é posta no por um script curto dentro do próprio widget, antes da primeira pintura. Se o JS não rodar, a classe nunca aparece e a página se comporta como se não houvesse animação nenhuma — nada some. */ /* o filete nasce com --fil:0 para não piscar: sem isto ele é o único elemento visível no primeiro quadro, antes de a cena assumir */ html.og-cena #hero-organico .og-foot{--fil:0} html.og-cena #hero-organico .og-sub, html.og-cena #hero-organico .og-ghost, html.og-cena #hero-organico .og-seal{opacity:0} html.og-cena #hero-organico .og-ponte{opacity:0} html.og-cena #hero-organico .og-card{opacity:0} html.og-cena #hero-organico .og-stack{--halo:0} /* ---------- PILHA ---------- Carrossel em profundidade: as cartas ocupam a mesma célula e trocam de slot por classe (.s0 a .s4), escritas pelo JS. ⚠ ATMOSFERA — três camadas que fazem a pilha pertencer à cena em vez de pousar sobre o roxo: 1 · um halo radial atrás dela, que finge luz vindo do fundo; 2 · as bordas da carta da frente se dissolvendo no topo e no pé; 3 · um véu roxo suave por cima, tirando a foto do lugar de "único ponto de cor solto na tela". As três são discretas de propósito: juntas somam presença, e qualquer uma delas sozinha em dose alta apaga a foto. */ #hero-organico .og-stack{ position:absolute;top:50%;right:var(--gutter); transform:translateY(-50%); width:var(--cw);height:calc(var(--cw) * 1.5); perspective:1500px; z-index:4; } /* 1 · halo: luz difusa saindo de trás da pilha. ⚠ A opacidade é lida de --halo, não fixa: o halo é pseudo-elemento e não se anima direto, e sem estado inicial ele acenderia sozinho no primeiro quadro, antes das cartas existirem. O GSAP move a variável no .og-stack e o pseudo lê aqui. */ #hero-organico .og-stack::before{ content:'';position:absolute;z-index:-1;pointer-events:none; inset:-38% -32%; opacity:var(--halo,1); background:radial-gradient(closest-side, rgba(255,255,255,.09), rgba(255,255,255,.03) 55%, transparent 78%); } #hero-organico .og-deck{position:absolute;inset:0;transform-style:preserve-3d} #hero-organico .og-card{ position:absolute;inset:0; border-radius:14px;overflow:hidden; background:#2a2450; box-shadow:0 30px 68px rgba(12,9,30,.36); transition:transform .9s var(--ease),opacity .9s var(--ease),filter .9s var(--ease); cursor:pointer; } #hero-organico .og-card img{width:100%;height:100%;object-fit:cover;display:block} /* 2 · as bordas se dissolvem: a carta emerge do fundo em vez de ser recortada contra ele */ #hero-organico .og-card{ -webkit-mask:linear-gradient(to bottom, transparent 0%, #000 6%, #000 91%, transparent 100%); mask:linear-gradient(to bottom, transparent 0%, #000 6%, #000 91%, transparent 100%); } /* 3 · véu roxo e degradê do rótulo, na mesma camada */ #hero-organico .og-card::after{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(to top, rgba(12,9,30,.52), transparent 44%), linear-gradient(rgba(57,49,102,.16), rgba(57,49,102,.16)); } #hero-organico .og-card b{ position:absolute;left:18px;bottom:9%;z-index:2; font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6); } /* slots: a da frente e as quatro atrás, recuando e escurecendo */ #hero-organico .s0{transform:translate3d(0,0,0) rotate(0)} #hero-organico .s1{transform:translate3d(-11%,-9%,-160px) rotate(-7deg);filter:brightness(.9)} #hero-organico .s2{transform:translate3d(6%,-18%,-320px) rotate(6deg); filter:brightness(.82) saturate(.9);opacity:.85} #hero-organico .s3{transform:translate3d(-4%,-26%,-500px) rotate(-4deg);filter:brightness(.74) saturate(.82);opacity:.6} #hero-organico .s4{transform:translate3d(3%,-32%,-660px) rotate(5deg); filter:brightness(.68) saturate(.78);opacity:.38} /* ---------- SELO ---------- */ /* ⚠ O selo é filho da FILEIRA do rodapé, não do container: é assim que ele fica na mesma altura da frase e do botão sem depender de conta em pixel. Absoluto, então não empurra ninguém — quem abre espaço para ele é o padding-right da fileira. */ /* ⚠ O centro do selo alinha com o centro do BOTÃO, não com o da fileira. Como a fileira tem altura mínima igual à do selo e o botão tem 52px, centrar na fileira deixava os dois desencontrados — e o selo, sendo maior, encostava no filete. A conta: metade da altura do botão, contada a partir do topo do conteúdo da fileira. */ #hero-organico .og-seal{ position:absolute;z-index:20;pointer-events:none; right:0;top:calc(var(--pt) + 26px); transform:translateY(-50%); width:var(--selo);aspect-ratio:1;color:var(--fg); } #hero-organico .og-seal svg{width:100%;height:100%;animation:ogSpin 26s linear infinite} /* O texto dá a volta INTEIRA no anel: o textLength no HTML vale a circunferência (465 unidades) e o lengthAdjust distribui a sobra entre as letras. Sem isso o texto ocupava 385 e deixava um vão de 80 unidades sem nada — o anel lia como incompleto. ⚠ Por isso o tracking sai daqui: quem espaça as letras agora é o textLength, e os dois juntos brigariam. */ #hero-organico .og-seal text{ font-family:'Lato',sans-serif;font-size:13.4px;font-weight:700; text-transform:uppercase;fill:currentColor; } /* ⚠ 48.75% e não 50%, e isto é de propósito. O caminho do anel é um círculo em 100,100 — o meio exato. Mas o que se enxerga não é o caminho, é a TINTA das letras, e ela não fica centrada nele: medindo o desenho renderizado, o conjunto do texto assenta 1,25% acima do centro da caixa. Com o disco em 50% ele fica geometricamente certo e visualmente baixo. Este valor é calibragem óptica, não conta. Mexer no corpo do texto do selo ou trocar a fonte pede reconferir. Para voltar ao centro geométrico: 50%. */ #hero-organico .og-seal-core{ position:absolute;left:50%;top:48.75%;transform:translate(-50%,-50%); /* disco cheio, não só contorno: com o selo em papel, o miolo vazado deixava passar a foto e o roxo, e lia como um furo */ width:40%;aspect-ratio:1;border-radius:50%;background:currentColor; display:grid;place-items:center; } /* A folha é centrada pela CAIXA do desenho, que é o certo para arte de contorno: o olho lê o contorno, não a massa de tinta. ⚠ Ela é assimétrica por natureza — a nervura central e os três traços diagonais ficam só do lado direito —, então pode parecer deslocada mesmo estando centrada. Se quiser calibrar no olho, os dois valores abaixo movem só a folha, sem tocar no disco: --folha-x positivo empurra para a direita --folha-y positivo empurra para baixo Uns 2% já são perceptíveis. */ #hero-organico .og-seal-leaf{ width:34%;aspect-ratio:165/253;background:var(--bg); transform:translate(var(--folha-x, 0), var(--folha-y, 0)); -webkit-mask:var(--folha) center/contain no-repeat; mask:var(--folha) center/contain no-repeat; } @keyframes ogSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} /* ---------- MOBILE ---------- */ @media(max-width:900px){ /* ── VERSÃO MOBILE ── Tipografia sobre a ponte e a pilha logo abaixo. */ #hero-organico{ min-height:calc(100svh + var(--raio)); justify-content:center; padding-block:calc(var(--navh) + clamp(20px,5vh,40px)) calc(var(--raio) + clamp(24px,5vh,44px)); } /* o selo sai no mobile: ao lado do botão, numa fileira estreita, ele não tem espaço */ #hero-organico .og-seal{display:none} /* tudo alinhado à esquerda, no mesmo eixo do gutter */ #hero-organico .og-col{padding-right:0;text-align:left} /* a pilha desce para baixo do texto, centrada. A margem de topo cobre o avanço da carta mais alta, que sobe 32% da largura. */ #hero-organico{--cw:min(56vw,230px)} #hero-organico .og-stack{ position:relative;right:auto;top:auto;transform:none; margin:calc(var(--cw) * .34 + clamp(20px,4vh,38px)) auto 0; } /* leque simétrico, porque a pilha está centrada */ #hero-organico .s1{transform:translate3d(-9%,-7%,-150px) rotate(-8deg)} #hero-organico .s2{transform:translate3d(9%,-14%,-300px) rotate(7deg)} #hero-organico .s3{transform:translate3d(-5%,-21%,-460px) rotate(-4deg)} #hero-organico .s4{transform:translate3d(4%,-27%,-610px) rotate(5deg)} /* a headline cresce: sem a foto ao lado ela é o elemento principal */ #hero-organico .og-h1{font-size:clamp(2.1rem,8.8vw,3.2rem);line-height:1.1} #hero-organico .og-sub{max-width:32ch;font-size:clamp(14px,3.8vw,17px)} #hero-organico .og-foot{min-height:0;padding-top:24px} #hero-organico .og-ghost{height:46px;padding:0 6px 0 20px;font-size:11px;gap:12px} #hero-organico .og-ghost i{width:32px;height:32px} } @media(prefers-reduced-motion:reduce){ .header-menu, #hero-organico .og-line > span, #hero-organico .og-foot::before, #hero-organico .og-seal{animation:none} #hero-organico .og-card{transition-duration:.001ms} #hero-organico .og-seal svg{animation:none} }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-462152c *//* Vídeo vertical da segunda dobra. Capa: o primeiro quadro do próprio arquivo — sem atributo poster e com preload="metadata", o navegador desenha o frame sozinho. Hover: o cursor vira um rótulo "ver vídeo completo". Clique: o vídeo se prende à tela e voa para o centro, ampliado, com um véu claro por trás. Sem lightbox e sem fundo preto. A frase que corria por trás saiu daqui: ela agora é um elemento próprio da seção, montado no Elementor. */ /* O respiro existia para a frase em loop passar por trás sem encostar no vídeo. Com a frase saindo daqui, ele vira espaço morto: quem controla a distância passa a ser a container do Elementor. */ .ag-reel { position: relative; display: grid; place-items: center; } /* ── vídeo ── */ /* Largura 100%: quem define o tamanho é a container do Elementor. O vídeo ampliado no portal não depende disso — lá ele é medido pela altura da janela. */ .ag-vid { position: relative; z-index: 2; margin: 0; width: 100%; } .ag-vid__box { position: relative; transform-origin: center center; transition: transform .82s cubic-bezier(.16, 1, .3, 1); box-shadow: 0 30px 68px rgba(33, 28, 60, .22), 0 0 0 1px rgba(57, 49, 102, .08); border-radius: 12px; overflow: hidden; background: #000; will-change: transform; } .ag-vid__box video { display: block; width: 100%; height: auto; } /* Aviso de que o vídeo está mudo. Fica só enquanto ele roda em loop no lugar: aberto, o áudio entra e o ícone não faz mais sentido. */ /* Mesmo desenho do Instagram: círculo preto pequeno no canto inferior direito, sem borda e sem desfoque, com o alto-falante cheio e o corte em X. */ .ag-mute{ position:absolute; right:12px; bottom:12px; z-index:4; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center; pointer-events:none; transition:opacity .4s ease; } .ag-mute svg{display:block} body.ag-lb-open .ag-mute{opacity:0} /* Botões: o kit do Elementor pinta