.elementor-9 .elementor-element.elementor-element-b6a6a67{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.95;}.elementor-9 .elementor-element.elementor-element-b6a6a67:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-b6a6a67 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#5C1420;}.elementor-9 .elementor-element.elementor-element-b6a6a67::before, .elementor-9 .elementor-element.elementor-element-b6a6a67 > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-b6a6a67 > .e-con-inner > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-b6a6a67 > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-b6a6a67 > .e-con-inner > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-b6a6a67 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000E8;--background-overlay:'';}.elementor-9 .elementor-element.elementor-element-152912b{--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:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-10px;--margin-bottom:-10px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-96a3163{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.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-9 .elementor-element.elementor-element-deff8b8{margin:7px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-deff8b8 .elementor-icon-wrapper{text-align:center;}.elementor-9 .elementor-element.elementor-element-deff8b8.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-deff8b8.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-deff8b8.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-deff8b8.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-deff8b8.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-deff8b8 .elementor-icon-wrapper svg{width:auto;}.elementor-9 .elementor-element.elementor-element-e88c62c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-menu-toggle{margin-left:auto;background-color:#02010100;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );padding-left:28px;padding-right:28px;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--main .elementor-item:hover,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--main .elementor-item:focus{color:#CD0C36;fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .e--pointer-framed .elementor-item:before,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .e--pointer-framed .elementor-item:after{border-color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .e--pointer-framed .elementor-item:before{border-width:1px;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 1px 1px;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:1px 1px 0 0;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:1px 0 0 1px;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 1px 1px 0;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .e--pointer-underline .elementor-item:after,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .e--pointer-overline .elementor-item:before,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .e--pointer-double-line .elementor-item:before,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .e--pointer-double-line .elementor-item:after{height:1px;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--dropdown a, .elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-menu-toggle{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--dropdown{background-color:#000000E0;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--dropdown a:hover,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--dropdown a:focus,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--dropdown a.highlighted,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-menu-toggle:hover,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-menu-toggle:focus{color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--dropdown a:hover,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--dropdown a:focus,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--dropdown a.highlighted{background-color:#CD0C36C7;}.elementor-9 .elementor-element.elementor-element-b23b7d4 div.elementor-menu-toggle{color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-b23b7d4 div.elementor-menu-toggle svg{fill:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-f146a6f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.95;}.elementor-9 .elementor-element.elementor-element-f146a6f:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-f146a6f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#5C1420;}.elementor-9 .elementor-element.elementor-element-f146a6f::before, .elementor-9 .elementor-element.elementor-element-f146a6f > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-f146a6f > .e-con-inner > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-f146a6f > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-f146a6f > .e-con-inner > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-f146a6f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000E8;--background-overlay:'';}.elementor-9 .elementor-element.elementor-element-daaf337{--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:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-10px;--margin-bottom:-10px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-62cd7c6{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-c3ab2b1{margin:7px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-c3ab2b1 .elementor-icon-wrapper{text-align:center;}.elementor-9 .elementor-element.elementor-element-c3ab2b1.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-c3ab2b1.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-c3ab2b1.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-c3ab2b1.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-c3ab2b1.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-c3ab2b1 .elementor-icon-wrapper svg{width:auto;}.elementor-9 .elementor-element.elementor-element-4f083cd{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-menu-toggle{margin-left:auto;background-color:#02010100;}.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );padding-left:28px;padding-right:28px;}.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--main .elementor-item:hover,
.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--main .elementor-item:focus{color:#CD0C36;fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-f347a7d .e--pointer-framed .elementor-item:before,
.elementor-9 .elementor-element.elementor-element-f347a7d .e--pointer-framed .elementor-item:after{border-color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-f347a7d .e--pointer-framed .elementor-item:before{border-width:1px;}.elementor-9 .elementor-element.elementor-element-f347a7d .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 1px 1px;}.elementor-9 .elementor-element.elementor-element-f347a7d .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:1px 1px 0 0;}.elementor-9 .elementor-element.elementor-element-f347a7d .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:1px 0 0 1px;}.elementor-9 .elementor-element.elementor-element-f347a7d .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 1px 1px 0;}.elementor-9 .elementor-element.elementor-element-f347a7d .e--pointer-underline .elementor-item:after,
.elementor-9 .elementor-element.elementor-element-f347a7d .e--pointer-overline .elementor-item:before,
.elementor-9 .elementor-element.elementor-element-f347a7d .e--pointer-double-line .elementor-item:before,
.elementor-9 .elementor-element.elementor-element-f347a7d .e--pointer-double-line .elementor-item:after{height:1px;}.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--dropdown a, .elementor-9 .elementor-element.elementor-element-f347a7d .elementor-menu-toggle{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--dropdown{background-color:#000000DB;}.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--dropdown a:hover,
.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--dropdown a:focus,
.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--dropdown a.highlighted{background-color:#CD0C36AD;}.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--dropdown .elementor-item, .elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;}.elementor-9 .elementor-element.elementor-element-f347a7d div.elementor-menu-toggle{color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-f347a7d div.elementor-menu-toggle svg{fill:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-0af1fd0{--display:flex;--min-height:900px;--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;--overlay-opacity:0.4;}.elementor-9 .elementor-element.elementor-element-0af1fd0:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-0af1fd0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F6F9FC;background-image:url("https://studioai.searcompany.com/wp-content/uploads/2026/07/Pizza_slices_with_hands_2K_202607230646-scaled.jpeg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-9 .elementor-element.elementor-element-0af1fd0::before, .elementor-9 .elementor-element.elementor-element-0af1fd0 > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-0af1fd0 > .e-con-inner > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-0af1fd0 > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-0af1fd0 > .e-con-inner > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-0af1fd0 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-9 .elementor-element.elementor-element-20c456f{--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;}.elementor-9 .elementor-element.elementor-element-2636e59{--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;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-2636e59.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-4b697f5{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-4b697f5.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-9 .elementor-element.elementor-element-55a4066{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:170px;--margin-bottom:80px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-55a4066.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-fa42268{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-dce19b7.elementor-element{--align-self:center;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-9 .elementor-element.elementor-element-270b16d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-9 .elementor-element.elementor-element-270b16d .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-size:50px;font-weight:700;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-24d2397{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-24d2397.e-con{--align-self:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-9 .elementor-element.elementor-element-67ccc5d{text-align:center;font-family:"Montserrat", Sans-serif;font-size:18px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-5c7bedf{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-9 .elementor-element.elementor-element-5c7bedf.e-con{--align-self:center;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-9 .elementor-element.elementor-element-e32fc4b .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:500;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-623e26e{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-9 .elementor-element.elementor-element-623e26e.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-86e163e .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:500;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-24d79db{--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;--justify-content:center;}.elementor-9 .elementor-element.elementor-element-24d79db:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-24d79db > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-24d79db.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-7a20d0b{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-523eba3{--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;}.elementor-9 .elementor-element.elementor-element-bf09a47{--display:flex;}.elementor-9 .elementor-element.elementor-element-4f862b4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-4f862b4.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-cc7cb55{text-align:center;}.elementor-9 .elementor-element.elementor-element-cc7cb55 .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:700;color:#5C1420;}.elementor-9 .elementor-element.elementor-element-6227061{--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;--justify-content:center;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-6227061.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-2d97a92{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:500;}.elementor-9 .elementor-element.elementor-element-4133d9a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-4133d9a.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-49381fa{--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;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-49381fa.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-6210895{--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;--justify-content:center;}.elementor-9 .elementor-element.elementor-element-3f6ac97{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-3f6ac97 .elementor-swiper-button.elementor-swiper-button-prev, .elementor-9 .elementor-element.elementor-element-3f6ac97 .elementor-swiper-button.elementor-swiper-button-next{color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-3f6ac97 .elementor-swiper-button.elementor-swiper-button-prev svg, .elementor-9 .elementor-element.elementor-element-3f6ac97 .elementor-swiper-button.elementor-swiper-button-next svg{fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-3f6ac97 .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){background:#670F22;opacity:1;}.elementor-9 .elementor-element.elementor-element-3f6ac97 .swiper-pagination-bullet{background:#CD0C36;}.elementor-9 .elementor-element.elementor-element-3f6ac97 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-style:none;border-radius:40px 40px 40px 40px;}.elementor-9 .elementor-element.elementor-element-f5b435a{--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;--justify-content:center;--margin-top:-31px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-f5b435a.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-a208c5f{text-align:center;}.elementor-9 .elementor-element.elementor-element-a208c5f .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:#5C1420;}.elementor-9 .elementor-element.elementor-element-50e8b3e{text-align:center;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-2d99cc0{--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;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-d137563 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(4px/2);}.elementor-9 .elementor-element.elementor-element-d137563 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(4px/2);}.elementor-9 .elementor-element.elementor-element-d137563 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(4px/2);}.elementor-9 .elementor-element.elementor-element-d137563 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-4px/2);}.elementor-9 .elementor-element.elementor-element-d137563 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-4px/2);}.elementor-9 .elementor-element.elementor-element-d137563 .elementor-icon-list-icon i{color:#CD0C36;transition:color 0.3s;}.elementor-9 .elementor-element.elementor-element-d137563 .elementor-icon-list-icon svg{fill:#CD0C36;transition:fill 0.3s;}.elementor-9 .elementor-element.elementor-element-d137563{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-9 .elementor-element.elementor-element-d137563 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-9 .elementor-element.elementor-element-d137563 .elementor-icon-list-item > a{font-family:"Montserrat", Sans-serif;font-size:14.5px;font-weight:500;}.elementor-9 .elementor-element.elementor-element-d137563 .elementor-icon-list-text{color:#7A716C;transition:color 0.3s;}.elementor-9 .elementor-element.elementor-element-a60add4{--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:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-a60add4.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-6fcb972 .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-6fcb972 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-6fcb972 .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-6fcb972 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-6fcb972 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-ceec94f{--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:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-081b509{--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;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-081b509.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-7da731d{--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;--justify-content:center;}.elementor-9 .elementor-element.elementor-element-a32bbb9{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-a32bbb9 .elementor-swiper-button.elementor-swiper-button-prev, .elementor-9 .elementor-element.elementor-element-a32bbb9 .elementor-swiper-button.elementor-swiper-button-next{color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-a32bbb9 .elementor-swiper-button.elementor-swiper-button-prev svg, .elementor-9 .elementor-element.elementor-element-a32bbb9 .elementor-swiper-button.elementor-swiper-button-next svg{fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-a32bbb9 .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){background:#670F22;opacity:1;}.elementor-9 .elementor-element.elementor-element-a32bbb9 .swiper-pagination-bullet{background:#CD0C36;}.elementor-9 .elementor-element.elementor-element-a32bbb9 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-style:none;border-radius:40px 40px 40px 40px;}.elementor-9 .elementor-element.elementor-element-45beb67{--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;--justify-content:center;--margin-top:-31px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-45beb67.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-2ce3f77{text-align:center;}.elementor-9 .elementor-element.elementor-element-2ce3f77 .elementor-heading-title{color:#5C1420;}.elementor-9 .elementor-element.elementor-element-5824627{text-align:center;font-family:"Roboto", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-d53c250{--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;}.elementor-9 .elementor-element.elementor-element-bad465e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(4px/2);}.elementor-9 .elementor-element.elementor-element-bad465e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(4px/2);}.elementor-9 .elementor-element.elementor-element-bad465e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(4px/2);}.elementor-9 .elementor-element.elementor-element-bad465e .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-4px/2);}.elementor-9 .elementor-element.elementor-element-bad465e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-4px/2);}.elementor-9 .elementor-element.elementor-element-bad465e .elementor-icon-list-icon i{color:#CD0C36;transition:color 0.3s;}.elementor-9 .elementor-element.elementor-element-bad465e .elementor-icon-list-icon svg{fill:#CD0C36;transition:fill 0.3s;}.elementor-9 .elementor-element.elementor-element-bad465e{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-9 .elementor-element.elementor-element-bad465e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-9 .elementor-element.elementor-element-bad465e .elementor-icon-list-item > a{font-family:"Montserrat", Sans-serif;font-size:14.5px;font-weight:500;}.elementor-9 .elementor-element.elementor-element-bad465e .elementor-icon-list-text{color:#7A716C;transition:color 0.3s;}.elementor-9 .elementor-element.elementor-element-6d63822{--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:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-6d63822.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-a5f1102 .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-a5f1102 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-a5f1102 .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-a5f1102 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-a5f1102 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-8c6ad2f{--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:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-5b4bf65{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-5b4bf65 .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){background:#670F22;opacity:1;}.elementor-9 .elementor-element.elementor-element-5b4bf65 .swiper-pagination-bullet{background:#CD0C36;}.elementor-9 .elementor-element.elementor-element-5b4bf65 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-style:none;border-radius:40px 40px 40px 40px;}.elementor-9 .elementor-element.elementor-element-1afbe00{--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;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-1afbe00.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-cfae52c{--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;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-cfae52c.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-eb67d4b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-9 .elementor-element.elementor-element-eb67d4b .elementor-heading-title{color:#5C1420;}.elementor-9 .elementor-element.elementor-element-437f06b{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Roboto", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-09a03a4{--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;}.elementor-9 .elementor-element.elementor-element-6bad24e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(4px/2);}.elementor-9 .elementor-element.elementor-element-6bad24e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(4px/2);}.elementor-9 .elementor-element.elementor-element-6bad24e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(4px/2);}.elementor-9 .elementor-element.elementor-element-6bad24e .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-4px/2);}.elementor-9 .elementor-element.elementor-element-6bad24e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-4px/2);}.elementor-9 .elementor-element.elementor-element-6bad24e .elementor-icon-list-icon i{color:#CD0C36;transition:color 0.3s;}.elementor-9 .elementor-element.elementor-element-6bad24e .elementor-icon-list-icon svg{fill:#CD0C36;transition:fill 0.3s;}.elementor-9 .elementor-element.elementor-element-6bad24e{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-9 .elementor-element.elementor-element-6bad24e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-9 .elementor-element.elementor-element-6bad24e .elementor-icon-list-item > a{font-family:"Montserrat", Sans-serif;font-size:14.5px;font-weight:500;}.elementor-9 .elementor-element.elementor-element-6bad24e .elementor-icon-list-text{color:#7A716C;transition:color 0.3s;}.elementor-9 .elementor-element.elementor-element-8329dde{--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:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-8329dde.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-aae8daf .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-aae8daf .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-aae8daf .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-aae8daf .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-aae8daf .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-b480c4d{--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:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-830316e{--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;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-830316e.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-cb43f42{--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;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-cb43f42.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-79039b6{text-align:center;}.elementor-9 .elementor-element.elementor-element-79039b6 .elementor-heading-title{color:#5C1420;}.elementor-9 .elementor-element.elementor-element-2e02174{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Roboto", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-964f74f{--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;}.elementor-9 .elementor-element.elementor-element-d263142 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(4px/2);}.elementor-9 .elementor-element.elementor-element-d263142 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(4px/2);}.elementor-9 .elementor-element.elementor-element-d263142 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(4px/2);}.elementor-9 .elementor-element.elementor-element-d263142 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-4px/2);}.elementor-9 .elementor-element.elementor-element-d263142 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-4px/2);}.elementor-9 .elementor-element.elementor-element-d263142 .elementor-icon-list-icon i{color:#CD0C36;transition:color 0.3s;}.elementor-9 .elementor-element.elementor-element-d263142 .elementor-icon-list-icon svg{fill:#CD0C36;transition:fill 0.3s;}.elementor-9 .elementor-element.elementor-element-d263142{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-9 .elementor-element.elementor-element-d263142 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-9 .elementor-element.elementor-element-d263142 .elementor-icon-list-item > a{font-family:"Montserrat", Sans-serif;font-size:14.5px;font-weight:500;}.elementor-9 .elementor-element.elementor-element-d263142 .elementor-icon-list-text{color:#7A716C;transition:color 0.3s;}.elementor-9 .elementor-element.elementor-element-bccbd70{--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:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-bccbd70.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-4ece3a0 .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-4ece3a0 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-4ece3a0 .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-4ece3a0 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-4ece3a0 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-0fed5b7{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-0fed5b7 .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){background:#670F22;opacity:1;}.elementor-9 .elementor-element.elementor-element-0fed5b7 .swiper-pagination-bullet{background:#CD0C36;}.elementor-9 .elementor-element.elementor-element-0fed5b7 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-style:none;border-radius:40px 40px 40px 40px;}.elementor-9 .elementor-element.elementor-element-865e7dc{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-3076ec1{--display:flex;--min-height:960px;--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-9 .elementor-element.elementor-element-3076ec1:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-3076ec1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-4917499{--display:flex;--justify-content:center;}.elementor-9 .elementor-element.elementor-element-4917499.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-1acc486{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-1acc486.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-c33887c{--spacer-size:30px;}.elementor-9 .elementor-element.elementor-element-da857d3{text-align:center;}.elementor-9 .elementor-element.elementor-element-da857d3 .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-size:30px;font-weight:700;color:#5C1420;}.elementor-9 .elementor-element.elementor-element-ebafa67{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -30px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-3ad715f{--display:flex;}.elementor-9 .elementor-element.elementor-element-a900ce6{--display:flex;}.elementor-9 .elementor-element.elementor-element-6d5501b{--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;--overlay-opacity:0.5;}.elementor-9 .elementor-element.elementor-element-6d5501b::before, .elementor-9 .elementor-element.elementor-element-6d5501b > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-6d5501b > .e-con-inner > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-6d5501b > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-6d5501b > .e-con-inner > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-6d5501b > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-9 .elementor-element.elementor-element-15a913c{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-15a913c .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:15px 15px 15px 15px;}.elementor-9 .elementor-element.elementor-element-4c09485{--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:-62px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-4c09485.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-ef63242 .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:49px;font-weight:600;fill:#CD0C36;color:#CD0C36;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-ef63242 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-ef63242 .elementor-button:focus{color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-ef63242 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-ef63242 .elementor-button:focus svg{fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-2ead7b5{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-5772b89 .elementor-button{background-color:#FFFFFF00;}.elementor-9 .elementor-element.elementor-element-5772b89{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-f219121{--display:flex;}.elementor-9 .elementor-element.elementor-element-3fb4866{--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;}.elementor-9 .elementor-element.elementor-element-1c8edf2{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-1c8edf2 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:15px 15px 15px 15px;}.elementor-9 .elementor-element.elementor-element-4c3e7f7{--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:-62px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-4c3e7f7.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-f0c0ba4 .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:49px;font-weight:600;fill:#CD0C36;color:#CD0C36;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-f0c0ba4 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-f0c0ba4 .elementor-button:focus{color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-f0c0ba4 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-f0c0ba4 .elementor-button:focus svg{fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-b42a476{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-1d56ad4 .elementor-button{background-color:#FFFFFF00;font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;fill:#FFFFFF;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-1d56ad4 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-1d56ad4 .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-1d56ad4 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-1d56ad4 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-7930718{--display:flex;}.elementor-9 .elementor-element.elementor-element-2488ca2{--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;}.elementor-9 .elementor-element.elementor-element-be7a87e{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-be7a87e .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:15px 15px 15px 15px;}.elementor-9 .elementor-element.elementor-element-3c0c2c9{--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:-62px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-3c0c2c9.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-b70751b .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:49px;font-weight:600;fill:#CD0C36;color:#CD0C36;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-b70751b .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-b70751b .elementor-button:focus{color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-b70751b .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-b70751b .elementor-button:focus svg{fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-c49bdcb{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-ac036c2 .elementor-button{background-color:#FFFFFF00;font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;fill:#FFFFFF;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-ac036c2 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-ac036c2 .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-ac036c2 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-ac036c2 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-604add9{--display:flex;}.elementor-9 .elementor-element.elementor-element-ee80b8a{--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;}.elementor-9 .elementor-element.elementor-element-4d6e813{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-4d6e813 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:15px 15px 15px 15px;}.elementor-9 .elementor-element.elementor-element-ae7112a{--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:-62px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-ae7112a.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-6bc84bf .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:49px;font-weight:600;fill:#CD0C36;color:#CD0C36;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-6bc84bf .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-6bc84bf .elementor-button:focus{color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-6bc84bf .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-6bc84bf .elementor-button:focus svg{fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-d694d91{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-23949d9 .elementor-button{background-color:#FFFFFF00;font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;fill:#FFFFFF;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-23949d9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;}.elementor-9 .elementor-element.elementor-element-23949d9 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-23949d9 .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-23949d9 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-23949d9 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-ce80023{--display:flex;}.elementor-9 .elementor-element.elementor-element-72fe55a{--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;}.elementor-9 .elementor-element.elementor-element-2e4704f{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-2e4704f .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:15px 15px 15px 15px;}.elementor-9 .elementor-element.elementor-element-b1ca395{--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:-62px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-b1ca395.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-fa9074c .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:49px;font-weight:600;fill:#CD0C36;color:#CD0C36;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-fa9074c .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-fa9074c .elementor-button:focus{color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-fa9074c .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-fa9074c .elementor-button:focus svg{fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-4b314fd{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-8a18ea1 .elementor-button{background-color:#FFFFFF00;font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;fill:#FFFFFF;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-8a18ea1 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-8a18ea1 .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-8a18ea1 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-8a18ea1 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-2dfad6b{--display:flex;}.elementor-9 .elementor-element.elementor-element-7a37ac8{--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;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-9 .elementor-element.elementor-element-a3a5fd5 img{border-radius:15px 15px 15px 15px;}.elementor-9 .elementor-element.elementor-element-e7dce4d{margin:14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-5b1e834 .elementor-button{background-color:#FFFFFF00;font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;fill:#FFFFFF;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-5b1e834{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-5b1e834 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-5b1e834 .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-5b1e834 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-5b1e834 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-b391ca0{--e-n-carousel-swiper-slides-to-display:3;--e-n-carousel-swiper-slides-gap:10px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:-30px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:-30px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-arrow-size:40px;--e-n-carousel-arrow-normal-color:#CD0C36;--e-n-carousel-arrow-hover-color:#670F22;--e-n-carousel-dots-normal-color:#CD0C36;--e-n-carousel-dots-hover-color:#670F22;}.elementor-9 .elementor-element.elementor-element-c048fdc{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-aa4c144{--display:flex;}.elementor-9 .elementor-element.elementor-element-a04c781{--display:flex;}.elementor-9 .elementor-element.elementor-element-d9a4ecd{--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;--overlay-opacity:0.5;}.elementor-9 .elementor-element.elementor-element-d9a4ecd::before, .elementor-9 .elementor-element.elementor-element-d9a4ecd > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-d9a4ecd > .e-con-inner > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-d9a4ecd > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-d9a4ecd > .e-con-inner > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-d9a4ecd > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-9 .elementor-element.elementor-element-3fbdb3d{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-3fbdb3d .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:15px 15px 15px 15px;}.elementor-9 .elementor-element.elementor-element-7b33f8b{--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:-62px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-7b33f8b.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-4eaafc4 .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:49px;font-weight:600;fill:#CD0C36;color:#CD0C36;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-4eaafc4 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-4eaafc4 .elementor-button:focus{color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-4eaafc4 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-4eaafc4 .elementor-button:focus svg{fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-7052bb2{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-40af3f7 .elementor-button{background-color:#FFFFFF00;}.elementor-9 .elementor-element.elementor-element-40af3f7{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-be649aa{--display:flex;}.elementor-9 .elementor-element.elementor-element-3d904fb{--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;}.elementor-9 .elementor-element.elementor-element-b1cb16d{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-b1cb16d .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:15px 15px 15px 15px;}.elementor-9 .elementor-element.elementor-element-3b5d4d9{--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:-62px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-3b5d4d9.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-b17f68e .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:49px;font-weight:600;fill:#CD0C36;color:#CD0C36;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-b17f68e .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-b17f68e .elementor-button:focus{color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-b17f68e .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-b17f68e .elementor-button:focus svg{fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-30acf8b{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-e7631a5 .elementor-button{background-color:#FFFFFF00;font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;fill:#FFFFFF;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-e7631a5 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-e7631a5 .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-e7631a5 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-e7631a5 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-15e9fb2{--display:flex;}.elementor-9 .elementor-element.elementor-element-7727db7{--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;}.elementor-9 .elementor-element.elementor-element-bb072f3{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-bb072f3 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:15px 15px 15px 15px;}.elementor-9 .elementor-element.elementor-element-02358fa{--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:-62px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-02358fa.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-ab182aa .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:49px;font-weight:600;fill:#CD0C36;color:#CD0C36;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-ab182aa .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-ab182aa .elementor-button:focus{color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-ab182aa .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-ab182aa .elementor-button:focus svg{fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-812dde6{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-8002e4d .elementor-button{background-color:#FFFFFF00;font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;fill:#FFFFFF;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-8002e4d .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-8002e4d .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-8002e4d .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-8002e4d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-cc6540e{--display:flex;}.elementor-9 .elementor-element.elementor-element-dc2ecf0{--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;}.elementor-9 .elementor-element.elementor-element-82502dd{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-82502dd .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:15px 15px 15px 15px;}.elementor-9 .elementor-element.elementor-element-25c5e1f{--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:-62px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-25c5e1f.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-d6c10b1 .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:49px;font-weight:600;fill:#CD0C36;color:#CD0C36;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-d6c10b1 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-d6c10b1 .elementor-button:focus{color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-d6c10b1 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-d6c10b1 .elementor-button:focus svg{fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-b1ccf43{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-6b66ae1 .elementor-button{background-color:#FFFFFF00;font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;fill:#FFFFFF;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-6b66ae1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;}.elementor-9 .elementor-element.elementor-element-6b66ae1 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-6b66ae1 .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-6b66ae1 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-6b66ae1 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-d41dbd1{--display:flex;}.elementor-9 .elementor-element.elementor-element-7d62870{--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;}.elementor-9 .elementor-element.elementor-element-1f2088f{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-1f2088f .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:15px 15px 15px 15px;}.elementor-9 .elementor-element.elementor-element-1efb613{--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:-62px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-1efb613.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-8470e68 .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:49px;font-weight:600;fill:#CD0C36;color:#CD0C36;border-radius:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-8470e68 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-8470e68 .elementor-button:focus{color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-8470e68 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-8470e68 .elementor-button:focus svg{fill:#CD0C36;}.elementor-9 .elementor-element.elementor-element-c8701dd{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-847a753 .elementor-button{background-color:#FFFFFF00;font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;fill:#FFFFFF;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-847a753 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-847a753 .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-847a753 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-847a753 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-c9c9a51{--display:flex;}.elementor-9 .elementor-element.elementor-element-e264719{--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;}.elementor-9 .elementor-element.elementor-element-65bcaaf img{border-radius:15px 15px 15px 15px;}.elementor-9 .elementor-element.elementor-element-86bebc8{margin:14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-98cbd99 .elementor-button{background-color:#FFFFFF00;font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;fill:#FFFFFF;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-98cbd99{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-98cbd99 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-98cbd99 .elementor-button:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-98cbd99 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-98cbd99 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-3080e2b{--e-n-carousel-swiper-slides-to-display:3;--e-n-carousel-swiper-slides-gap:10px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:-30px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:-30px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-arrow-size:40px;--e-n-carousel-arrow-normal-color:#CD0C36;--e-n-carousel-arrow-hover-color:#670F22;--e-n-carousel-dots-normal-color:#CD0C36;--e-n-carousel-dots-hover-color:#670F22;}.elementor-9 .elementor-element.elementor-element-bb25722{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-109978d{--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;}.elementor-9 .elementor-element.elementor-element-109978d:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-109978d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-e1c30b8{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-60px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-cb82359{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-216730a{--display:flex;}.elementor-9 .elementor-element.elementor-element-216730a.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-8f2944c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -20px) 0px;text-align:center;}.elementor-9 .elementor-element.elementor-element-8f2944c .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;color:#5C1420;}.elementor-9 .elementor-element.elementor-element-d64290c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-1703d54{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-9 .elementor-element.elementor-element-1703d54.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-32b3325{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-29a571f{--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;}.elementor-9 .elementor-element.elementor-element-29a571f:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-29a571f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-d798dfd{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-7c4f012{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-6c9c163{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-6c9c163.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-1815432{text-align:center;}.elementor-9 .elementor-element.elementor-element-1815432 .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;color:#5C1420;}.elementor-9 .elementor-element.elementor-element-b5de91a{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-d9c64df{--spacer-size:30px;}.elementor-9 .elementor-element.elementor-element-16cf0fa{--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:20px 20px;--row-gap:20px;--column-gap:20px;--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-9 .elementor-element.elementor-element-7435152{--display:flex;--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-7435152.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-561999b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-0dbd37f{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-9 .elementor-element.elementor-element-ca2b6f5 img{border-radius:20px 20px 20px 20px;}.elementor-9 .elementor-element.elementor-element-0829664{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:16px 16px 16px 16px;--margin-top:0px;--margin-bottom:5px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-0829664:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-0829664 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AC0A2E;}.elementor-9 .elementor-element.elementor-element-b480133{margin:-17px 0px calc(var(--kit-widget-spacing, 0px) + -17px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-size:13px;font-weight:600;color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-b480133.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-de954ee{--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:-14px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-b53d849 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:50px;font-weight:900;color:#AB0D2F;}.elementor-9 .elementor-element.elementor-element-47b97de{margin:-4px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -10px;}.elementor-9 .elementor-element.elementor-element-47b97de .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-size:50px;font-weight:900;color:#AB0D2F;}.elementor-9 .elementor-element.elementor-element-8f32944 .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;color:#1A1412;}.elementor-9 .elementor-element.elementor-element-1c2c40e{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-afe60c6{font-family:"Montserrat", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-c3d2eb8{--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:20px 20px;--row-gap:20px;--column-gap:20px;--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-9 .elementor-element.elementor-element-1ab7a20{--display:flex;--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-1ab7a20.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-8bd467a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-70face4{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-9 .elementor-element.elementor-element-4b42def img{border-radius:20px 20px 20px 20px;}.elementor-9 .elementor-element.elementor-element-1ff7dfc{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:16px 16px 16px 16px;--margin-top:0px;--margin-bottom:5px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-1ff7dfc:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-1ff7dfc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AC0A2E;}.elementor-9 .elementor-element.elementor-element-5c49612{margin:-17px 0px calc(var(--kit-widget-spacing, 0px) + -17px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-size:13px;font-weight:600;color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-5c49612.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-20d95c5{--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:-14px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-990ccbf .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:50px;font-weight:900;color:#AB0D2F;}.elementor-9 .elementor-element.elementor-element-308420b .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;color:#1A1412;}.elementor-9 .elementor-element.elementor-element-576faee{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-8863b9b{font-family:"Montserrat", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-b7d34de{--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:20px 20px;--row-gap:20px;--column-gap:20px;--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-9 .elementor-element.elementor-element-4a40323{--display:flex;--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-4a40323.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-a0c2d6d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-f5552c4{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:16px 16px 16px 16px;--margin-top:0px;--margin-bottom:5px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-f5552c4:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-f5552c4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AC0A2E;}.elementor-9 .elementor-element.elementor-element-e21e75b{margin:-7px 0px calc(var(--kit-widget-spacing, 0px) + -17px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-size:13px;font-weight:600;color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-e21e75b.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-0fe5dd8{--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:-14px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-730db14 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:50px;font-weight:900;color:#AB0D2F;}.elementor-9 .elementor-element.elementor-element-221fe67{margin:-4px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -10px;}.elementor-9 .elementor-element.elementor-element-221fe67 .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-size:50px;font-weight:900;color:#AB0D2F;}.elementor-9 .elementor-element.elementor-element-5116369 .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;color:#1A1412;}.elementor-9 .elementor-element.elementor-element-70a5968{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-12px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-b54985b{font-family:"Montserrat", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-8371b2b{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-9 .elementor-element.elementor-element-ee909f9 img{border-radius:20px 20px 20px 20px;}.elementor-9 .elementor-element.elementor-element-ab47435{--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:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9 .elementor-element.elementor-element-7ec5db3{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-9 .elementor-element.elementor-element-a144a12 img{border-radius:20px 20px 20px 20px;}.elementor-9 .elementor-element.elementor-element-b86cb41{--display:flex;--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-b86cb41.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-788e4e1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-788e4e1.e-con{--align-self:flex-start;}.elementor-9 .elementor-element.elementor-element-c3877d1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:16px 16px 16px 16px;--margin-top:0px;--margin-bottom:5px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-c3877d1:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-c3877d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AC0A2E;}.elementor-9 .elementor-element.elementor-element-5697525{margin:-7px 0px calc(var(--kit-widget-spacing, 0px) + -17px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-size:13px;font-weight:600;color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-5697525.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-18dead3{--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:-14px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-908c911 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:50px;font-weight:900;color:#AB0D2F;}.elementor-9 .elementor-element.elementor-element-0a865cd .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;color:#1A1412;}.elementor-9 .elementor-element.elementor-element-9a50ab4{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-12px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-9a50ab4.e-con{--align-self:flex-start;}.elementor-9 .elementor-element.elementor-element-e6710ac{font-family:"Montserrat", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-1273f86{--spacer-size:30px;}.elementor-9 .elementor-element.elementor-element-ce3dc96{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-7e44aed{--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;}.elementor-9 .elementor-element.elementor-element-7e44aed:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-7e44aed > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-501fc0c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-2d52f18{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-2d52f18.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-e6e7be2{text-align:center;}.elementor-9 .elementor-element.elementor-element-e6e7be2 .elementor-heading-title{color:#5C1420;}.elementor-9 .elementor-element.elementor-element-ec2a294{--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:0px 20px;--row-gap:0px;--column-gap:20px;}.elementor-9 .elementor-element.elementor-element-69ebb2e{--display:flex;}.elementor-9 .elementor-element.elementor-element-b7ac5c0{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-20px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-widget-lottie{--caption-color:var( --e-global-color-text );}.elementor-widget-lottie .e-lottie__caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-9 .elementor-element.elementor-element-952a01a.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-952a01a{--lottie-container-width:125px;}.elementor-9 .elementor-element.elementor-element-086107e{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-f1b1930{text-align:center;}.elementor-9 .elementor-element.elementor-element-f1b1930 .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;color:#1A1412;}.elementor-9 .elementor-element.elementor-element-6ca3f16{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-0653c99{margin:-28px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-b69d614{--display:flex;}.elementor-9 .elementor-element.elementor-element-70df9fd{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-6px;--margin-bottom:-11px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-5c7cfcf.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-5c7cfcf{--lottie-container-width:102px;}.elementor-9 .elementor-element.elementor-element-260b13d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-e7d9541{text-align:center;}.elementor-9 .elementor-element.elementor-element-e7d9541 .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;color:#1A1412;}.elementor-9 .elementor-element.elementor-element-c86d151{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-747975d{margin:-28px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-0974576{--display:flex;}.elementor-9 .elementor-element.elementor-element-3d508b3{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-8px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-38c1c87{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--lottie-container-width:95px;}.elementor-9 .elementor-element.elementor-element-38c1c87.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-e6b7dc1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-2px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-4bf7199{text-align:center;}.elementor-9 .elementor-element.elementor-element-4bf7199 .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;color:#1A1412;}.elementor-9 .elementor-element.elementor-element-84871d7{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-954a7ff{margin:-28px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-457dff6{--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-arrow-normal-color:#CD0C36;--e-n-carousel-dots-normal-color:#CD0C36;}.elementor-9 .elementor-element.elementor-element-0cf1889{--spacer-size:100px;}.elementor-9 .elementor-element.elementor-element-1ad4832{--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;}.elementor-9 .elementor-element.elementor-element-1ad4832:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-1ad4832 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-1f411e6{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-adadff3{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-adadff3.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-d3fd53d{text-align:center;}.elementor-9 .elementor-element.elementor-element-d3fd53d .elementor-heading-title{color:#5C1420;}.elementor-9 .elementor-element.elementor-element-be48808{--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:0px 20px;--row-gap:0px;--column-gap:20px;}.elementor-9 .elementor-element.elementor-element-0355bcf{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-0355bcf:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-0355bcf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-9 .elementor-element.elementor-element-0242c7b{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-20px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-8554b8b.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-8554b8b{--lottie-container-width:125px;}.elementor-9 .elementor-element.elementor-element-a8704b1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-826bf8d{text-align:center;}.elementor-9 .elementor-element.elementor-element-826bf8d .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;color:#1A1412;}.elementor-9 .elementor-element.elementor-element-48c1d87{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-55b42de{margin:-19px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-42e974d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-42e974d:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-42e974d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-9 .elementor-element.elementor-element-00370ef{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-6px;--margin-bottom:-11px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-4cdcebb.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-4cdcebb{--lottie-container-width:102px;}.elementor-9 .elementor-element.elementor-element-cf1d986{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-1d408cb{text-align:center;}.elementor-9 .elementor-element.elementor-element-1d408cb .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;color:#1A1412;}.elementor-9 .elementor-element.elementor-element-a45cb0e{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-f42a659{margin:-19px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-c160906{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-c160906:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-c160906 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-9 .elementor-element.elementor-element-8651c9a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-8px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-80a63f7{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--lottie-container-width:95px;}.elementor-9 .elementor-element.elementor-element-80a63f7.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-1f1a54a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-2px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-e0a3680{text-align:center;}.elementor-9 .elementor-element.elementor-element-e0a3680 .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-weight:600;color:#1A1412;}.elementor-9 .elementor-element.elementor-element-eb09a2d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-0f45c52{margin:-19px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-7c7a5a6{--spacer-size:100px;}.elementor-9 .elementor-element.elementor-element-c18c8ad{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-dc2cb5d{--spacer-size:100px;}.elementor-9 .elementor-element.elementor-element-86599b0{--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:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-c2a0882{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-c2a0882.e-con{--align-self:stretch;}.elementor-9 .elementor-element.elementor-element-b848e45{--display:flex;}.elementor-9 .elementor-element.elementor-element-12170df .elementor-heading-title{font-family:"Sweet Sans Pro", Sans-serif;font-size:34px;font-weight:600;line-height:38px;letter-spacing:0px;color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-46c8d2d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-ed54dd5{font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:300;color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-c0d49f8{font-family:"Montserrat", Sans-serif;font-weight:500;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-839ed69{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-e6a6749 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-9 .elementor-element.elementor-element-e6a6749 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-9 .elementor-element.elementor-element-e6a6749 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-9 .elementor-element.elementor-element-e6a6749 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-9 .elementor-element.elementor-element-e6a6749 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-9 .elementor-element.elementor-element-e6a6749 .elementor-icon-list-icon i{color:#FF4D6D;transition:color 0.3s;}.elementor-9 .elementor-element.elementor-element-e6a6749 .elementor-icon-list-icon svg{fill:#FF4D6D;transition:fill 0.3s;}.elementor-9 .elementor-element.elementor-element-e6a6749{--e-icon-list-icon-size:20px;--icon-vertical-offset:0px;}.elementor-9 .elementor-element.elementor-element-e6a6749 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-9 .elementor-element.elementor-element-e6a6749 .elementor-icon-list-item > a{font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:500;}.elementor-9 .elementor-element.elementor-element-e6a6749 .elementor-icon-list-text{transition:color 0.3s;}.elementor-9 .elementor-element.elementor-element-d46935d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-7fb7d8e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-7fb7d8e.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-9 .elementor-element.elementor-element-bc39234 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-9 .elementor-element.elementor-element-bc39234 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-9 .elementor-element.elementor-element-bc39234 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-9 .elementor-element.elementor-element-bc39234 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-field-group > label, .elementor-9 .elementor-element.elementor-element-bc39234 .elementor-field-subgroup label{color:#585858;}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-field-type-html{padding-bottom:0px;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-field-group .elementor-field{color:#FFFFFF00;}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-button{font-family:"Sweet Sans Pro", Sans-serif;font-weight:500;}.elementor-9 .elementor-element.elementor-element-bc39234 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-button[type="submit"]{color:#ffffff;}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-9 .elementor-element.elementor-element-bc39234 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-9 .elementor-element.elementor-element-bc39234 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-9 .elementor-element.elementor-element-bc39234 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-9 .elementor-element.elementor-element-bc39234 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-9 .elementor-element.elementor-element-bc39234{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-9 .elementor-element.elementor-element-cc49982{--spacer-size:100px;}.elementor-9 .elementor-element.elementor-element-d2085af{--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;}.elementor-9 .elementor-element.elementor-element-d2085af:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-d2085af > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-9 .elementor-element.elementor-element-de41b85{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-8836b2a{--display:flex;}.elementor-9 .elementor-element.elementor-element-3b1da73{--spacer-size:150px;}.elementor-9 .elementor-element.elementor-element-ad5871e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -30px) 0px;text-align:center;font-family:"Roboto", Sans-serif;font-size:15px;font-weight:400;color:#7A716C;}.elementor-9 .elementor-element.elementor-element-e36aef3{text-align:center;}.elementor-9 .elementor-element.elementor-element-e36aef3 .elementor-heading-title{color:#1A1412;}.elementor-9 .elementor-element.elementor-element-13471fb{--display:flex;}.elementor-9 .elementor-element.elementor-element-29e1799{--display:flex;}.elementor-9 .elementor-element.elementor-element-29e1799.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-5cbd966{--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;}.elementor-9 .elementor-element.elementor-element-6fe4a58{font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-ec51f5d{--display:flex;}.elementor-9 .elementor-element.elementor-element-9799259{--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;}.elementor-9 .elementor-element.elementor-element-a7c403e{font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-f419b57{--display:flex;}.elementor-9 .elementor-element.elementor-element-6541104{--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;}.elementor-9 .elementor-element.elementor-element-86389f9{font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-f86c562{--display:flex;}.elementor-9 .elementor-element.elementor-element-4d6cdbc{--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;}.elementor-9 .elementor-element.elementor-element-f51a28a{font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-ebb5644{--display:flex;}.elementor-9 .elementor-element.elementor-element-29e9eaf{--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;}.elementor-9 .elementor-element.elementor-element-f9f61b7{font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-b59f3c0{--display:flex;}.elementor-9 .elementor-element.elementor-element-a6cf750{--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;}.elementor-9 .elementor-element.elementor-element-fbe890e{font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-916fb3f{--display:flex;}.elementor-9 .elementor-element.elementor-element-d5e2c06{--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;}.elementor-9 .elementor-element.elementor-element-42232cd{font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-855dea4{--display:flex;}.elementor-9 .elementor-element.elementor-element-64445d2{--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;}.elementor-9 .elementor-element.elementor-element-fb791ac{font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-5fafcec{--display:flex;}.elementor-9 .elementor-element.elementor-element-295d15e{--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;}.elementor-9 .elementor-element.elementor-element-4fc84ef{font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-6137857{--display:flex;}.elementor-9 .elementor-element.elementor-element-6716a06{--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;}.elementor-9 .elementor-element.elementor-element-c0f24a2{font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-d86d3c9{--display:flex;}.elementor-9 .elementor-element.elementor-element-1e66ca0{--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;}.elementor-9 .elementor-element.elementor-element-f63e32c{font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-9 .elementor-element.elementor-element-4b513f1{--n-accordion-title-font-size:1rem;--n-accordion-title-justify-content:initial;--n-accordion-title-flex-grow:initial;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-title-normal-color:#FFFFFF;--n-accordion-icon-size:15px;--n-accordion-icon-normal-color:#1A1412;}:where( .elementor-9 .elementor-element.elementor-element-4b513f1 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"Sweet Sans Pro", Sans-serif;}.elementor-9 .elementor-element.elementor-element-c46a47e{--spacer-size:150px;}.elementor-9 .elementor-element.elementor-element-0b1bfbe{--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;}.elementor-9 .elementor-element.elementor-element-0b1bfbe:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-0b1bfbe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0D2F;}.elementor-9 .elementor-element.elementor-element-3766fae{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:40px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-2d00c77{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-567396b .elementor-icon-wrapper{text-align:center;}.elementor-9 .elementor-element.elementor-element-567396b.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-567396b.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-567396b.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-567396b.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-567396b.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-567396b .elementor-icon{font-size:40px;}.elementor-9 .elementor-element.elementor-element-567396b .elementor-icon svg{height:40px;}.elementor-9 .elementor-element.elementor-element-567396b .elementor-icon-wrapper svg{width:auto;}.elementor-9 .elementor-element.elementor-element-4255860{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-202b48d.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:1;}.elementor-9 .elementor-element.elementor-element-202b48d{text-align:center;font-family:"Roboto", Sans-serif;font-size:20px;font-weight:400;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-202b48d a{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-202b48d a:hover, .elementor-9 .elementor-element.elementor-element-202b48d a:focus{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-02804ee{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-dd93a5f .elementor-icon-wrapper{text-align:center;}.elementor-9 .elementor-element.elementor-element-dd93a5f.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-dd93a5f.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-dd93a5f.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-dd93a5f.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-dd93a5f.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-dd93a5f .elementor-icon{font-size:35px;}.elementor-9 .elementor-element.elementor-element-dd93a5f .elementor-icon svg{height:35px;}.elementor-9 .elementor-element.elementor-element-0840122 .elementor-icon-wrapper{text-align:center;}.elementor-9 .elementor-element.elementor-element-0840122.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-0840122.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-0840122.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-0840122.elementor-view-framed .elementor-icon, .elementor-9 .elementor-element.elementor-element-0840122.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-0840122 .elementor-icon{font-size:34px;}.elementor-9 .elementor-element.elementor-element-0840122 .elementor-icon svg{height:34px;}@media(min-width:768px){.elementor-9 .elementor-element.elementor-element-b6a6a67{--content-width:100%;}.elementor-9 .elementor-element.elementor-element-96a3163{--width:35%;}.elementor-9 .elementor-element.elementor-element-e88c62c{--width:65%;}.elementor-9 .elementor-element.elementor-element-f146a6f{--content-width:100%;}.elementor-9 .elementor-element.elementor-element-62cd7c6{--width:35%;}.elementor-9 .elementor-element.elementor-element-4f083cd{--width:65%;}.elementor-9 .elementor-element.elementor-element-4b697f5{--width:90%;}.elementor-9 .elementor-element.elementor-element-24d2397{--width:71%;}.elementor-9 .elementor-element.elementor-element-5c7bedf{--width:500px;}.elementor-9 .elementor-element.elementor-element-623e26e{--width:500px;}.elementor-9 .elementor-element.elementor-element-6227061{--width:80%;}.elementor-9 .elementor-element.elementor-element-4133d9a{--width:1200px;}.elementor-9 .elementor-element.elementor-element-f5b435a{--width:85%;}.elementor-9 .elementor-element.elementor-element-a60add4{--width:58%;}.elementor-9 .elementor-element.elementor-element-ceec94f{--width:1200px;}.elementor-9 .elementor-element.elementor-element-45beb67{--width:85%;}.elementor-9 .elementor-element.elementor-element-6d63822{--width:59%;}.elementor-9 .elementor-element.elementor-element-cfae52c{--width:85%;}.elementor-9 .elementor-element.elementor-element-8329dde{--width:59%;}.elementor-9 .elementor-element.elementor-element-cb43f42{--width:85%;}.elementor-9 .elementor-element.elementor-element-bccbd70{--width:59%;}.elementor-9 .elementor-element.elementor-element-4917499{--width:1232px;}.elementor-9 .elementor-element.elementor-element-1acc486{--width:54%;}.elementor-9 .elementor-element.elementor-element-4c09485{--width:50%;}.elementor-9 .elementor-element.elementor-element-4c3e7f7{--width:50%;}.elementor-9 .elementor-element.elementor-element-3c0c2c9{--width:50%;}.elementor-9 .elementor-element.elementor-element-ae7112a{--width:50%;}.elementor-9 .elementor-element.elementor-element-b1ca395{--width:50%;}.elementor-9 .elementor-element.elementor-element-7b33f8b{--width:50%;}.elementor-9 .elementor-element.elementor-element-3b5d4d9{--width:50%;}.elementor-9 .elementor-element.elementor-element-02358fa{--width:50%;}.elementor-9 .elementor-element.elementor-element-25c5e1f{--width:50%;}.elementor-9 .elementor-element.elementor-element-1efb613{--width:50%;}.elementor-9 .elementor-element.elementor-element-216730a{--width:100%;}.elementor-9 .elementor-element.elementor-element-1703d54{--width:100vw;}.elementor-9 .elementor-element.elementor-element-6c9c163{--width:90%;}.elementor-9 .elementor-element.elementor-element-7435152{--width:100%;}.elementor-9 .elementor-element.elementor-element-561999b{--width:96%;}.elementor-9 .elementor-element.elementor-element-0dbd37f{--width:55%;}.elementor-9 .elementor-element.elementor-element-0829664{--width:100px;}.elementor-9 .elementor-element.elementor-element-1c2c40e{--width:96%;}.elementor-9 .elementor-element.elementor-element-1ab7a20{--width:100%;}.elementor-9 .elementor-element.elementor-element-8bd467a{--width:96%;}.elementor-9 .elementor-element.elementor-element-70face4{--width:55%;}.elementor-9 .elementor-element.elementor-element-1ff7dfc{--width:100px;}.elementor-9 .elementor-element.elementor-element-576faee{--width:96%;}.elementor-9 .elementor-element.elementor-element-4a40323{--width:100%;}.elementor-9 .elementor-element.elementor-element-a0c2d6d{--width:96%;}.elementor-9 .elementor-element.elementor-element-f5552c4{--width:100px;}.elementor-9 .elementor-element.elementor-element-70a5968{--width:96%;}.elementor-9 .elementor-element.elementor-element-8371b2b{--width:55%;}.elementor-9 .elementor-element.elementor-element-7ec5db3{--width:55%;}.elementor-9 .elementor-element.elementor-element-b86cb41{--width:100%;}.elementor-9 .elementor-element.elementor-element-788e4e1{--width:100%;}.elementor-9 .elementor-element.elementor-element-c3877d1{--width:100px;}.elementor-9 .elementor-element.elementor-element-9a50ab4{--width:100%;}.elementor-9 .elementor-element.elementor-element-2d52f18{--width:70%;}.elementor-9 .elementor-element.elementor-element-adadff3{--width:70%;}.elementor-9 .elementor-element.elementor-element-d46935d{--width:90%;}.elementor-9 .elementor-element.elementor-element-7fb7d8e{--width:85%;}.elementor-9 .elementor-element.elementor-element-29e1799{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-9 .elementor-element.elementor-element-3ad715f{--width:500px;}.elementor-9 .elementor-element.elementor-element-aa4c144{--width:500px;}}@media(max-width:1024px){.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--dropdown a{padding-top:15px;padding-bottom:15px;}.elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-9 .elementor-element.elementor-element-b23b7d4 .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:23px !important;}.elementor-9 .elementor-element.elementor-element-c33887c{--spacer-size:0px;}.elementor-9 .elementor-element.elementor-element-da857d3{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-ebafa67{margin:5px 0px calc(var(--kit-widget-spacing, 0px) + -30px) 0px;}.elementor-9 .elementor-element.elementor-element-3ad715f{--min-height:0px;}.elementor-9 .elementor-element.elementor-element-3ad715f.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-b391ca0{--e-n-carousel-swiper-slides-to-display:3;--e-n-carousel-arrow-prev-left-position:470px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:322px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:470px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:322px;--e-n-carousel-arrow-size:40px;}.elementor-9 .elementor-element.elementor-element-aa4c144{--min-height:0px;}.elementor-9 .elementor-element.elementor-element-aa4c144.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-3080e2b{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:-30px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:-90px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:-30px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:-90px;--e-n-carousel-arrow-size:40px;}.elementor-9 .elementor-element.elementor-element-bb25722{--spacer-size:10px;}.elementor-9 .elementor-element.elementor-element-d64290c{margin:5px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-32b3325{--spacer-size:10px;}.elementor-9 .elementor-element.elementor-element-d798dfd{--spacer-size:10px;}.elementor-9 .elementor-element.elementor-element-b5de91a{margin:5px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-f5552c4{--margin-top:0px;--margin-bottom:-5px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-e21e75b{margin:-7px 0px calc(var(--kit-widget-spacing, 0px) + -20px) 0px;}.elementor-9 .elementor-element.elementor-element-5116369{margin:-8px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-70a5968{--margin-top:-16px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-c3877d1{--margin-top:0px;--margin-bottom:-5px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-5697525{margin:-7px 0px calc(var(--kit-widget-spacing, 0px) + -20px) 0px;}.elementor-9 .elementor-element.elementor-element-0a865cd{margin:-8px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-9a50ab4{--margin-top:-16px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-457dff6{--e-n-carousel-swiper-slides-to-display:2;}.elementor-9 .elementor-element.elementor-element-55b42de{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-f42a659{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-0f45c52{margin:-21px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-3b1da73{--spacer-size:70px;}.elementor-9 .elementor-element.elementor-element-c46a47e{--spacer-size:70px;}.elementor-9 .elementor-element.elementor-element-3766fae{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-2d00c77{--justify-content:flex-start;}.elementor-9 .elementor-element.elementor-element-2d00c77.e-con{--align-self:flex-start;}.elementor-9 .elementor-element.elementor-element-567396b.elementor-element{--align-self:flex-start;}.elementor-9 .elementor-element.elementor-element-567396b .elementor-icon-wrapper{text-align:center;}.elementor-9 .elementor-element.elementor-element-567396b .elementor-icon{font-size:30px;}.elementor-9 .elementor-element.elementor-element-567396b .elementor-icon svg{height:30px;}.elementor-9 .elementor-element.elementor-element-4255860{--justify-content:center;}.elementor-9 .elementor-element.elementor-element-4255860.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-02804ee{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;}.elementor-9 .elementor-element.elementor-element-02804ee.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-0840122{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 10px;}}@media(max-width:767px){.elementor-9 .elementor-element.elementor-element-152912b{--justify-content:space-between;--margin-top:-15px;--margin-bottom:-15px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-96a3163{--width:45%;--margin-top:0px;--margin-bottom:0px;--margin-left:10px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-e88c62c{--width:20%;}.elementor-9 .elementor-element.elementor-element-daaf337{--justify-content:space-between;--margin-top:-15px;--margin-bottom:-15px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-62cd7c6{--width:45%;--margin-top:0px;--margin-bottom:0px;--margin-left:10px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-4f083cd{--width:20%;}.elementor-9 .elementor-element.elementor-element-f347a7d{margin:3px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-f347a7d.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--dropdown a{padding-top:15px;padding-bottom:15px;}.elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-9 .elementor-element.elementor-element-f347a7d .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:23px !important;}.elementor-9 .elementor-element.elementor-element-0af1fd0:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-0af1fd0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://studioai.searcompany.com/wp-content/uploads/2026/07/Pizza_slices_with_hands_2K_202607230652-scaled.jpeg");background-position:center center;}.elementor-9 .elementor-element.elementor-element-0af1fd0{--width:100%;--min-height:0px;--justify-content:center;--overlay-opacity:0.5;}.elementor-9 .elementor-element.elementor-element-4b697f5{--margin-top:40px;--margin-bottom:80px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-55a4066{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-fa42268{--justify-content:center;}.elementor-9 .elementor-element.elementor-element-fa42268.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-523eba3{--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-2d97a92{text-align:center;}.elementor-9 .elementor-element.elementor-element-49381fa{--margin-top:-30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-3f6ac97 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:20px 20px 20px 20px;}.elementor-9 .elementor-element.elementor-element-f5b435a{--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-50e8b3e{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-a32bbb9 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:20px 20px 20px 20px;}.elementor-9 .elementor-element.elementor-element-45beb67{--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-5824627{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-3076ec1{--margin-top:-40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-c33887c{--spacer-size:0px;}.elementor-9 .elementor-element.elementor-element-6d5501b{--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-9 .elementor-element.elementor-element-15a913c{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-1c8edf2{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-be7a87e{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-4d6e813{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-2e4704f{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-b391ca0{--e-n-carousel-swiper-slides-to-display:1;}.elementor-9 .elementor-element.elementor-element-c048fdc{--spacer-size:0px;}.elementor-9 .elementor-element.elementor-element-d9a4ecd{--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-9 .elementor-element.elementor-element-3fbdb3d{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-b1cb16d{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-bb072f3{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-82502dd{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-1f2088f{--e-image-carousel-slides-to-show:1;}.elementor-9 .elementor-element.elementor-element-3080e2b{--e-n-carousel-swiper-slides-to-display:1;}.elementor-9 .elementor-element.elementor-element-bb25722{--spacer-size:0px;}.elementor-9 .elementor-element.elementor-element-109978d{--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-cb82359{--spacer-size:0px;}.elementor-9 .elementor-element.elementor-element-32b3325{--spacer-size:0px;}.elementor-9 .elementor-element.elementor-element-d798dfd{--spacer-size:0px;}.elementor-9 .elementor-element.elementor-element-16cf0fa{--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-9 .elementor-element.elementor-element-7435152{--margin-top:0px;--margin-bottom:030px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-0dbd37f{--margin-top:0px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9 .elementor-element.elementor-element-0829664{--width:100px;--justify-content:center;}.elementor-9 .elementor-element.elementor-element-0829664.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-b480133{margin:-7px 0px calc(var(--kit-widget-spacing, 0px) + -17px) 0px;}.elementor-9 .elementor-element.elementor-element-de954ee{--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-de954ee.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-b53d849 .elementor-heading-title{font-size:38px;}.elementor-9 .elementor-element.elementor-element-47b97de{margin:-2px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -12px;}.elementor-9 .elementor-element.elementor-element-47b97de .elementor-heading-title{font-size:38px;}.elementor-9 .elementor-element.elementor-element-8f32944{text-align:center;}.elementor-9 .elementor-element.elementor-element-1c2c40e{--margin-top:-18px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-afe60c6{text-align:center;}.elementor-9 .elementor-element.elementor-element-c3d2eb8{--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:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-1ab7a20{--margin-top:0px;--margin-bottom:030px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-70face4{--margin-top:0px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9 .elementor-element.elementor-element-1ff7dfc{--width:100px;--justify-content:center;}.elementor-9 .elementor-element.elementor-element-1ff7dfc.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-5c49612{margin:-7px 0px calc(var(--kit-widget-spacing, 0px) + -17px) 0px;}.elementor-9 .elementor-element.elementor-element-20d95c5{--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-20d95c5.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-990ccbf .elementor-heading-title{font-size:38px;}.elementor-9 .elementor-element.elementor-element-308420b{text-align:center;}.elementor-9 .elementor-element.elementor-element-576faee{--margin-top:-18px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-8863b9b{text-align:center;}.elementor-9 .elementor-element.elementor-element-69ebb2e{--justify-content:center;}.elementor-9 .elementor-element.elementor-element-69ebb2e.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-0653c99{margin:-46px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-b69d614{--justify-content:center;}.elementor-9 .elementor-element.elementor-element-747975d{margin:-46px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-0974576{--justify-content:center;}.elementor-9 .elementor-element.elementor-element-954a7ff{margin:-43px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9 .elementor-element.elementor-element-457dff6{--e-n-carousel-swiper-slides-to-display:1;}.elementor-9 .elementor-element.elementor-element-0cf1889{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-dc2cb5d{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-12170df{text-align:center;}.elementor-9 .elementor-element.elementor-element-ed54dd5{margin:-17px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-9 .elementor-element.elementor-element-e6a6749{--e-icon-list-icon-size:15px;--e-icon-list-icon-align:left;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size, 1em) * 0.25) 0 0;}.elementor-9 .elementor-element.elementor-element-e6a6749 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-9 .elementor-element.elementor-element-e6a6749 .elementor-icon-list-item > a{font-size:12px;}.elementor-9 .elementor-element.elementor-element-cc49982{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-3b1da73{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-c46a47e{--spacer-size:50px;}.elementor-9 .elementor-element.elementor-element-567396b.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-02804ee{--justify-content:center;}}/* Start custom CSS for icon, class: .elementor-element-deff8b8 *//* ===============================
ÍCONE HEADER – CLAMP REAL
Elementor Override
================================ */
/* DESKTOP */
.sear-icon-header .elementor-icon {
font-size: clamp(22px, 2vw, 28px) !important;
}
/* TABLET */
@media (max-width: 1024px) {
.sear-icon-header .elementor-icon {
font-size: clamp(20px, 2vw, 28px) !important;
}
}
/* MOBILE */
@media (max-width: 767px) {
.sear-icon-header .elementor-icon {
font-size: clamp(23px, 4vw, 26px) !important;
}
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-b23b7d4 *//* ======================================
MENU WORDPRESS – CLAMP REAL
FUNCIONA NO ELEMENTOR
====================================== */
/* DESKTOP */
.sear-wp-menu a {
font-size: clamp(8px, 1vw, 13px) !important;
line-height: 1.25;
}
/* TABLET – clamp fluido com máx 14px */
@media (max-width: 1024px) {
.sear-wp-menu a {
font-size: clamp(9px, 1.35vw, 14px) !important;
}
}
/* MOBILE – clamp fluido */
@media (max-width: 767px) {
.sear-wp-menu a {
font-size: clamp(12px, 3.4vw, 15px) !important;
}
}
/* MENU WORDPRESS – ÍCONE TOGGLE MOBILE
clamp: 18px → 25px */
@media (max-width: 767px) {
.sear-wp-menu
.elementor-menu-toggle svg {
width: clamp(18px, 5vw, 23px) !important;
height: clamp(18px, 5vw, 23px) !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6a6a67 */.sear-border-bottom {
border-bottom: 3px solid rgba(205, 12, 54, 1);
}/* End custom CSS */
/* Start custom CSS for icon, class: .elementor-element-c3ab2b1 *//* ===============================
ÍCONE HEADER – CLAMP REAL
Elementor Override
================================ */
/* DESKTOP */
.sear-icon-header .elementor-icon {
font-size: clamp(22px, 2vw, 28px) !important;
}
/* TABLET */
@media (max-width: 1024px) {
.sear-icon-header .elementor-icon {
font-size: clamp(20px, 2vw, 28px) !important;
}
}
/* MOBILE */
@media (max-width: 767px) {
.sear-icon-header .elementor-icon {
font-size: clamp(23px, 4vw, 26px) !important;
}
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-f347a7d *//* ======================================
MENU WORDPRESS – CLAMP REAL
FUNCIONA NO ELEMENTOR
====================================== */
/* DESKTOP */
.sear-wp-menu a {
font-size: clamp(8px, 1vw, 13px) !important;
line-height: 1.25;
}
/* TABLET – clamp fluido com máx 14px */
@media (max-width: 1024px) {
.sear-wp-menu a {
font-size: clamp(9px, 1.35vw, 14px) !important;
}
}
/* MOBILE – clamp fluido */
@media (max-width: 767px) {
.sear-wp-menu a {
font-size: clamp(12px, 3.4vw, 15px) !important;
}
}
/* MENU WORDPRESS – ÍCONE TOGGLE MOBILE
clamp: 18px → 25px */
@media (max-width: 767px) {
.sear-wp-menu
.elementor-menu-toggle svg {
width: clamp(18px, 5vw, 23px) !important;
height: clamp(18px, 5vw, 23px) !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f146a6f */.sear-border-bottom {
border-bottom: 3px solid rgba(205, 12, 54, 1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dce19b7 *//* ===============================
ROTATING TEXT — FINAL STABLE
================================ */
.premium-rotator {
position: relative;
display: inline-block;
white-space: nowrap;
}
/* Textos */
.premium-rotator span {
display: inline-block;
opacity: 0;
transform: translateX(100%);
transition:
transform 0.5s ease,
opacity 0.3s ease;
font-weight: 600;
letter-spacing: -0.02em;
}
/* Primeiro texto visível sem JS */
.premium-rotator span.active {
opacity: 1;
transform: translateX(0);
}
/* Texto saindo */
.premium-rotator span.exit {
opacity: 0;
transform: translateX(-100%);
}
.premium-rotator span {
color: #ffff; /* roxo principal */
}
.premium-rotator span {
font-family: 'Sweet Sans Pro', Sans-Serif;
}
/* Desktop */
.premium-rotator span {
font-size: 17px;
}
/* Tablet */
@media (max-width: 1024px) {
.premium-rotator span {
font-size: 14px;
}
}
/* Mobile */
@media (max-width: 767px) {
.premium-rotator span {
font-size: 11px;
}
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-270b16d */.sear-text-primary {
color: #cd0c36; /* Slate 900 */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e32fc4b *//* CTA hero — desktop */
.cta-hero {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
/* sombra em camadas: profundidade + leve "glow" da cor da marca */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-hero:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* melhora toque no mobile — sombra alinhada à cor da marca */
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
/* reduz movimento no mobile (mais natural) */
.cta-hero:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-hero {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-hero .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-hero */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-86e163e *//* CTA hero — desktop */
.cta-hero {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
/* sombra em camadas: profundidade + leve "glow" da cor da marca */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-hero:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* melhora toque no mobile — sombra alinhada à cor da marca */
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
/* reduz movimento no mobile (mais natural) */
.cta-hero:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-hero {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-hero .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-hero */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6fcb972 *//* =======================================
OPÇÃO B — "Ver resultado" sólido CINZA-MARROM
Classe: .cta-ver-resultado-neutro
======================================= */
.cta-ver-resultado-neutro {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color:
#4A413D;
color:
#ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
/* sombra neutra e discreta — sem glow colorido */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.10),
0 4px 10px rgba(0, 0, 0, 0.08);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
.cta-ver-resultado-neutro:hover {
background-color:
#38312e;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.12),
0 6px 14px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.cta-ver-resultado-neutro:focus-visible {
outline: none;
box-shadow:
0 0 0 3px
#ffffff,
0 0 0 6px rgba(74, 65, 61, 0.45),
0 6px 14px rgba(0, 0, 0, 0.1);
}
.cta-ver-resultado-neutro:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 3px 8px rgba(0, 0, 0, 0.1);
}
@media (max-width: 1024px) {
.cta-ver-resultado-neutro {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
@media (max-width: 767px) {
.cta-ver-resultado-neutro {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.08),
0 4px 10px rgba(0, 0, 0, 0.06);
}
.cta-ver-resultado-neutro:hover {
transform: none;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.08),
0 4px 10px rgba(0, 0, 0, 0.06);
}
}
.cta-ver-resultado-neutro {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
.cta-ver-resultado-neutro .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-ver-resultado-neutro {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* =======================================
FIX GERAL — ÁREA CLICÁVEL (compartilhado)
Já deve existir no seu CSS global; incluído
aqui só como referência, não precisa duplicar
se o fix do .cta-hero já está ativo no site.
======================================= */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ef63242 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5772b89 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f0c0ba4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1d56ad4 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b70751b */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac036c2 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6bc84bf */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-23949d9 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-fa9074c */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a18ea1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3a5fd5 *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5b1e834 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ef63242 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5772b89 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f0c0ba4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1d56ad4 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b70751b */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac036c2 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6bc84bf */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-23949d9 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-fa9074c */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a18ea1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3a5fd5 *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5b1e834 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ef63242 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5772b89 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f0c0ba4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1d56ad4 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b70751b */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac036c2 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6bc84bf */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-23949d9 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-fa9074c */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a18ea1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3a5fd5 *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5b1e834 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ef63242 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5772b89 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f0c0ba4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1d56ad4 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b70751b */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac036c2 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6bc84bf */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-23949d9 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-fa9074c */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a18ea1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3a5fd5 *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5b1e834 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ef63242 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5772b89 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f0c0ba4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1d56ad4 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b70751b */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac036c2 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6bc84bf */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-23949d9 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-fa9074c */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a18ea1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3a5fd5 *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5b1e834 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ef63242 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5772b89 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f0c0ba4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1d56ad4 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b70751b */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac036c2 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6bc84bf */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-23949d9 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-fa9074c */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a18ea1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3a5fd5 *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5b1e834 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ef63242 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5772b89 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f0c0ba4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1d56ad4 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b70751b */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac036c2 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6bc84bf */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-23949d9 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-fa9074c */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a18ea1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3a5fd5 *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5b1e834 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for nested-carousel, class: .elementor-element-b391ca0 *//* ===============================
FIX DE OVERFLOW — ISOLADO (v2)
Aplica overflow:visible só dentro do carrossel
marcado com .carousel-cta-fix, SEM afetar:
- os demais carrosséis do site (isso já era assim)
- carrosséis aninhados dentro dele (novo -- era o
bug do print, onde o carrossel interno de fotos
herdava o overflow:visible do externo)
A parte ":not(.swiper-slide .swiper-slide)" (e
equivalentes para .swiper / .swiper-wrapper) exclui
qualquer elemento que esteja dentro de outro slide --
ou seja, exclui exatamente um carrossel aninhado.
================================ */
@media (max-width: 767px) {
.carousel-cta-fix .swiper:not(.swiper-slide .swiper),
.carousel-cta-fix .swiper-wrapper:not(.swiper-slide .swiper-wrapper),
.carousel-cta-fix .swiper-slide:not(.swiper-slide .swiper-slide) {
overflow: visible !important;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4eaafc4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-40af3f7 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b17f68e */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e7631a5 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ab182aa */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8002e4d *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-d6c10b1 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6b66ae1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8470e68 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-847a753 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-65bcaaf *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-98cbd99 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4eaafc4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-40af3f7 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b17f68e */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e7631a5 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ab182aa */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8002e4d *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-d6c10b1 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6b66ae1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8470e68 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-847a753 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-65bcaaf *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-98cbd99 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4eaafc4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-40af3f7 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b17f68e */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e7631a5 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ab182aa */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8002e4d *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-d6c10b1 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6b66ae1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8470e68 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-847a753 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-65bcaaf *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-98cbd99 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4eaafc4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-40af3f7 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b17f68e */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e7631a5 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ab182aa */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8002e4d *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-d6c10b1 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6b66ae1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8470e68 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-847a753 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-65bcaaf *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-98cbd99 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4eaafc4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-40af3f7 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b17f68e */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e7631a5 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ab182aa */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8002e4d *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-d6c10b1 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6b66ae1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8470e68 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-847a753 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-65bcaaf *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-98cbd99 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4eaafc4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-40af3f7 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b17f68e */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e7631a5 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ab182aa */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8002e4d *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-d6c10b1 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6b66ae1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8470e68 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-847a753 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-65bcaaf *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-98cbd99 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4eaafc4 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-40af3f7 *//* =======================================
CTA CARROSSEL — .cta-hero-carousel
Mesma base do .cta-hero, com ajustes que
costumam resolver o sumiço dentro de
swiper/carrossel no mobile:
1) height:100% trocado por min-height —
dentro do swiper, o wrapper do botão às
vezes calcula altura 0 no mobile, e como
o .cta-hero original depende de height:100%
encadeado, o botão "some" (fica com 0px).
2) overflow do slide liberado — o swiper por
padrão corta (overflow:hidden) qualquer
coisa que ultrapasse o slide, incluindo o
efeito de hover/transform do botão.
3) z-index e opacidade reforçados como rede
de segurança para stacking context do
swiper.
======================================= */
/* CTA carrossel — desktop */
.cta-hero-carousel {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: #cd0c36;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(205, 12, 54, 0.28),
0 12px 28px rgba(205, 12, 54, 0.16);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
position: relative;
z-index: 2; /* garante que o botão fique acima do conteúdo do slide */
opacity: 1;
visibility: visible;
}
/* Hover */
.cta-hero-carousel:hover {
background-color: #ab0d2f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 10px 22px rgba(171, 13, 47, 0.34),
0 16px 32px rgba(171, 13, 47, 0.2);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-hero-carousel:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.55),
0 10px 22px rgba(205, 12, 54, 0.3);
}
/* Active */
.cta-hero-carousel:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.16),
0 4px 10px rgba(205, 12, 54, 0.3);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-hero-carousel {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
/* rede de segurança extra pro mobile dentro do swiper */
opacity: 1 !important;
visibility: visible !important;
}
.cta-hero-carousel:hover {
transform: none;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.24),
0 10px 22px rgba(205, 12, 54, 0.18);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL
(sem height:100% — essa é a principal
suspeita do sumiço dentro do carrossel) */
.cta-hero-carousel {
display: flex !important;
width: 100%;
min-height: 55px;
text-decoration: none;
cursor: pointer;
}
.cta-hero-carousel .elementor-button-content-wrapper {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
Sem height:100% no — troca por min-height,
evitando herdar altura 0 do slide no mobile.
================================ */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-hero-carousel {
width: 100%;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b17f68e */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e7631a5 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ab182aa */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8002e4d *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-d6c10b1 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6b66ae1 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8470e68 */.cta-trocar-foto {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: #8B1E3A; /* vinho puxado do açaí — harmoniza com o vermelho do CTA sem competir com ele */
border: none; /* tira o anel duro; o contraste vem da própria sombra */
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10),
0 8px 18px rgba(0, 0, 0, 0.10);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
margin-inline: auto;
margin-top: -30px;
position: relative;
z-index: 5;
}
.cta-trocar-foto svg,
.cta-trocar-foto i {
font-size: 18px;
width: 18px;
height: 18px;
}
.cta-trocar-foto:hover {
background-color: #FBF7F5;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(0, 0, 0, 0.13),
0 10px 22px rgba(0, 0, 0, 0.13);
transform: translateY(-2px) scale(1.05);
}
.cta-trocar-foto:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(139, 30, 58, 0.35),
0 6px 14px rgba(0, 0, 0, 0.10);
}
.cta-trocar-foto:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 5px rgba(0, 0, 0, 0.10);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-847a753 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-65bcaaf *//* =====================================
ANTES — IMAGEM SIMPLES (ELEMENTOR) — GLASS FRAME
===================================== */
.antes-img {
--ad-accent: #cd0c36;
position: relative;
border-radius: 24px;
overflow: hidden;
/* moldura de vidro — respiro entre a borda externa e a foto */
padding: 10px;
background: linear-gradient(
160deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.2)
);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 44px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 30px 60px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* brilho diagonal sutil no vidro — fica ATRÁS da foto (z-index 0) */
.antes-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0) 30%
);
}
/* foto interna — cantos levemente menores que a moldura */
.antes-img img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
border-radius: 16px;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.antes-img:hover img {
transform: scale(1.03);
}
/* Etiqueta "ANTES" — vidro de verdade */
.antes-img::after {
content: "ANTES - FOTO COM O CELULAR";
position: absolute;
top: 22px;
left: 22px;
z-index: 5;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.antes-img {
padding: 7px;
border-radius: 18px;
}
.antes-img img {
border-radius: 12px;
}
.antes-img::after {
font-size: 11px;
padding: 6px 13px;
top: 16px;
left: 16px;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-98cbd99 *//* =======================================
CTA SECUNDÁRIO — variação discreta
(mesma estrutura do .cta-hero, cor e
sombra ajustadas para menor destaque)
======================================= */
/* CTA secundário — desktop */
.cta-secondary {
width: 90%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
border-radius: 50px;
background-color: transparent;
color: #cd0c36;
font-weight: 600;
letter-spacing: 0.2px;
border: 1.5px solid #cd0c36;
/* sombra bem mais sutil que o CTA principal */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(205, 12, 54, 0.08);
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease;
}
/* Hover */
.cta-secondary:hover {
background-color: #cd0c36;
color: #ffffff;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 6px 14px rgba(205, 12, 54, 0.18);
transform: translateY(-2px);
}
/* Foco (acessibilidade — teclado) */
.cta-secondary:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.35),
0 6px 14px rgba(205, 12, 54, 0.14);
}
/* Active */
.cta-secondary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 3px 8px rgba(205, 12, 54, 0.14);
}
/* =======================
TABLET
======================= */
@media (max-width: 1024px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 15px;
border-radius: 50px;
}
}
/* =======================
MOBILE
======================= */
@media (max-width: 767px) {
.cta-secondary {
width: 100%;
padding: 0px 0px;
font-size: 17px;
border-radius: 50px;
/* sombra reduzida, alinhada ao estilo discreto */
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
/* reduz movimento no mobile (mais natural) */
.cta-secondary:hover {
transform: none;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.08),
0 4px 10px rgba(205, 12, 54, 0.06);
}
}
/* GARANTE QUE TODO O BOTÃO SEJA CLICÁVEL */
.cta-secondary {
display: flex !important;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
/* Corrige o wrapper interno do Elementor */
.cta-secondary .elementor-button-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
BOTÃO ELEMENTOR – ÁREA CLICÁVEL REAL (FIX)
================================ */
/* O é a área real de clique */
.elementor-widget-button a.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
padding: 0; /* visual vem da .cta-secondary */
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Remove interferência dos tamanhos do Elementor */
.elementor-widget-button
a.elementor-button.elementor-size-sm,
.elementor-widget-button
a.elementor-button.elementor-size-md,
.elementor-widget-button
a.elementor-button.elementor-size-lg {
padding: 0 !important;
}
/* Wrapper visual ocupa toda a área clicável */
.elementor-widget-button
a.elementor-button
.elementor-button-content-wrapper.cta-secondary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Nada interno rouba o clique */
.elementor-widget-button
.elementor-button-content-wrapper *,
.elementor-widget-button
.elementor-button-icon,
.elementor-widget-button
.elementor-button-text {
pointer-events: none;
}
/* =======================
MOBILE – área de toque
======================= */
@media (max-width: 767px) {
.elementor-widget-button a.elementor-button {
min-height: 50px;
}
}/* End custom CSS */
/* Start custom CSS for nested-carousel, class: .elementor-element-3080e2b *//* ===============================
FIX DE OVERFLOW — ISOLADO (v2)
Aplica overflow:visible só dentro do carrossel
marcado com .carousel-cta-fix, SEM afetar:
- os demais carrosséis do site (isso já era assim)
- carrosséis aninhados dentro dele (novo -- era o
bug do print, onde o carrossel interno de fotos
herdava o overflow:visible do externo)
A parte ":not(.swiper-slide .swiper-slide)" (e
equivalentes para .swiper / .swiper-wrapper) exclui
qualquer elemento que esteja dentro de outro slide --
ou seja, exclui exatamente um carrossel aninhado.
================================ */
@media (max-width: 767px) {
.carousel-cta-fix .swiper:not(.swiper-slide .swiper),
.carousel-cta-fix .swiper-wrapper:not(.swiper-slide .swiper-wrapper),
.carousel-cta-fix .swiper-slide:not(.swiper-slide .swiper-slide) {
overflow: visible !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-16cf0fa *//* =====================================
CARD DE VIDRO FOSCO — cole no Custom CSS do Container
(aba Avançado → Custom CSS, no próprio Container/coluna)
===================================== */
.elementor-9 .elementor-element.elementor-element-16cf0fa {
position: relative;
overflow: hidden;
border-radius: 20px;
background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.2));
/* efeito de vidro fosco de verdade */
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255,255,255,0.5);
box-shadow:
0 1px 2px rgba(15,23,42,0.05),
0 20px 44px rgba(15,23,42,0.12),
inset 0 1px 0 rgba(255,255,255,0.6);
transition: transform 0.35s cubic-bezier(.22,1,.36,1),
box-shadow 0.35s cubic-bezier(.22,1,.36,1);
}
/* brilho diagonal sutil no vidro */
.elementor-9 .elementor-element.elementor-element-16cf0fa::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%);
}
/* efeito ao passar o mouse: sobe levemente + sombra vermelha suave */
.elementor-9 .elementor-element.elementor-element-16cf0fa:hover {
transform: translateY(-6px);
box-shadow:
0 2px 4px rgba(15,23,42,0.06),
0 28px 56px rgba(205,12,54,0.18),
inset 0 1px 0 rgba(255,255,255,0.7);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c3d2eb8 *//* =====================================
CARD DE VIDRO FOSCO — cole no Custom CSS do Container
(aba Avançado → Custom CSS, no próprio Container/coluna)
===================================== */
.elementor-9 .elementor-element.elementor-element-c3d2eb8 {
position: relative;
overflow: hidden;
border-radius: 20px;
background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.2));
/* efeito de vidro fosco de verdade */
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255,255,255,0.5);
box-shadow:
0 1px 2px rgba(15,23,42,0.05),
0 20px 44px rgba(15,23,42,0.12),
inset 0 1px 0 rgba(255,255,255,0.6);
transition: transform 0.35s cubic-bezier(.22,1,.36,1),
box-shadow 0.35s cubic-bezier(.22,1,.36,1);
}
/* brilho diagonal sutil no vidro */
.elementor-9 .elementor-element.elementor-element-c3d2eb8::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%);
}
/* efeito ao passar o mouse: sobe levemente + sombra vermelha suave */
.elementor-9 .elementor-element.elementor-element-c3d2eb8:hover {
transform: translateY(-6px);
box-shadow:
0 2px 4px rgba(15,23,42,0.06),
0 28px 56px rgba(205,12,54,0.18),
inset 0 1px 0 rgba(255,255,255,0.7);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b7d34de *//* =====================================
CARD DE VIDRO FOSCO — cole no Custom CSS do Container
(aba Avançado → Custom CSS, no próprio Container/coluna)
===================================== */
.elementor-9 .elementor-element.elementor-element-b7d34de {
position: relative;
overflow: hidden;
border-radius: 20px;
background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.2));
/* efeito de vidro fosco de verdade */
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255,255,255,0.5);
box-shadow:
0 1px 2px rgba(15,23,42,0.05),
0 20px 44px rgba(15,23,42,0.12),
inset 0 1px 0 rgba(255,255,255,0.6);
transition: transform 0.35s cubic-bezier(.22,1,.36,1),
box-shadow 0.35s cubic-bezier(.22,1,.36,1);
}
/* brilho diagonal sutil no vidro */
.elementor-9 .elementor-element.elementor-element-b7d34de::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%);
}
/* efeito ao passar o mouse: sobe levemente + sombra vermelha suave */
.elementor-9 .elementor-element.elementor-element-b7d34de:hover {
transform: translateY(-6px);
box-shadow:
0 2px 4px rgba(15,23,42,0.06),
0 28px 56px rgba(205,12,54,0.18),
inset 0 1px 0 rgba(255,255,255,0.7);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ab47435 *//* =====================================
CARD DE VIDRO FOSCO — cole no Custom CSS do Container
(aba Avançado → Custom CSS, no próprio Container/coluna)
===================================== */
.elementor-9 .elementor-element.elementor-element-ab47435 {
position: relative;
overflow: hidden;
border-radius: 20px;
background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.2));
/* efeito de vidro fosco de verdade */
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255,255,255,0.5);
box-shadow:
0 1px 2px rgba(15,23,42,0.05),
0 20px 44px rgba(15,23,42,0.12),
inset 0 1px 0 rgba(255,255,255,0.6);
transition: transform 0.35s cubic-bezier(.22,1,.36,1),
box-shadow 0.35s cubic-bezier(.22,1,.36,1);
}
/* brilho diagonal sutil no vidro */
.elementor-9 .elementor-element.elementor-element-ab47435::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%);
}
/* efeito ao passar o mouse: sobe levemente + sombra vermelha suave */
.elementor-9 .elementor-element.elementor-element-ab47435:hover {
transform: translateY(-6px);
box-shadow:
0 2px 4px rgba(15,23,42,0.06),
0 28px 56px rgba(205,12,54,0.18),
inset 0 1px 0 rgba(255,255,255,0.7);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ec2a294 *//* =====================================
CARD DE VIDRO FOSCO — cole no Custom CSS do Container
(aba Avançado → Custom CSS, no próprio Container/coluna
que fica DENTRO do slide do carrossel)
Ajustes p/ carrossel: z-index no hover (evita o card ficar
"atrás" do slide vizinho ao subir) e will-change para performance.
===================================== */
.elementor-9 .elementor-element.elementor-element-ec2a294 {
position: relative;
overflow: hidden;
border-radius: 20px;
background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.2));
/* efeito de vidro fosco de verdade */
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255,255,255,0.5);
box-shadow:
0 1px 2px rgba(15,23,42,0.05),
0 20px 44px rgba(15,23,42,0.12),
inset 0 1px 0 rgba(255,255,255,0.6);
transition: transform 0.35s cubic-bezier(.22,1,.36,1),
box-shadow 0.35s cubic-bezier(.22,1,.36,1);
will-change: transform, box-shadow;
}
/* brilho diagonal sutil no vidro */
.elementor-9 .elementor-element.elementor-element-ec2a294::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%);
}
/* efeito ao passar o mouse: sobe levemente + sombra vermelha suave.
z-index garante que o card fique acima do slide vizinho ao subir,
em vez de ficar "por baixo" dele visualmente. */
.elementor-9 .elementor-element.elementor-element-ec2a294:hover {
transform: translateY(-6px);
z-index: 3;
box-shadow:
0 2px 4px rgba(15,23,42,0.06),
0 28px 56px rgba(205,12,54,0.18),
inset 0 1px 0 rgba(255,255,255,0.7);
}
/* =====================================
FIX DO CARROSSEL — cole no Custom CSS do WIDGET DO CARROSSEL/SWIPER
(o slider em si, não o container do card)
1) libera o overflow do swiper, senão o hover (translateY + sombra)
fica cortado nas bordas do slide
2) reserva espaço extra (padding) no wrapper pra sombra não ser
cortada pelo container/seção externa
===================================== */
.elementor-9 .elementor-element.elementor-element-ec2a294.swiper,
.elementor-9 .elementor-element.elementor-element-ec2a294 .swiper,
.elementor-9 .elementor-element.elementor-element-ec2a294.swiper-wrapper,
.elementor-9 .elementor-element.elementor-element-ec2a294 .swiper-wrapper,
.elementor-9 .elementor-element.elementor-element-ec2a294.swiper-slide,
.elementor-9 .elementor-element.elementor-element-ec2a294 .swiper-slide {
overflow: visible !important;
}
.elementor-9 .elementor-element.elementor-element-ec2a294 {
padding-top: 24px;
padding-bottom: 48px; /* maior embaixo -- é onde a sombra do hover se estende mais */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0355bcf *//* =====================================
CARD DE VIDRO FOSCO — cole no Custom CSS do Container
(aba Avançado → Custom CSS, no próprio Container/coluna)
===================================== */
.elementor-9 .elementor-element.elementor-element-0355bcf {
position: relative;
overflow: hidden;
border-radius: 20px;
background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.2));
/* efeito de vidro fosco de verdade */
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255,255,255,0.5);
box-shadow:
0 1px 2px rgba(15,23,42,0.05),
0 20px 44px rgba(15,23,42,0.12),
inset 0 1px 0 rgba(255,255,255,0.6);
transition: transform 0.35s cubic-bezier(.22,1,.36,1),
box-shadow 0.35s cubic-bezier(.22,1,.36,1);
}
/* brilho diagonal sutil no vidro */
.elementor-9 .elementor-element.elementor-element-0355bcf::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%);
}
/* efeito ao passar o mouse: sobe levemente + sombra vermelha suave */
.elementor-9 .elementor-element.elementor-element-0355bcf:hover {
transform: translateY(-6px);
box-shadow:
0 2px 4px rgba(15,23,42,0.06),
0 28px 56px rgba(205,12,54,0.18),
inset 0 1px 0 rgba(255,255,255,0.7);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-42e974d *//* =====================================
CARD DE VIDRO FOSCO — cole no Custom CSS do Container
(aba Avançado → Custom CSS, no próprio Container/coluna)
===================================== */
.elementor-9 .elementor-element.elementor-element-42e974d {
position: relative;
overflow: hidden;
border-radius: 20px;
background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.2));
/* efeito de vidro fosco de verdade */
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255,255,255,0.5);
box-shadow:
0 1px 2px rgba(15,23,42,0.05),
0 20px 44px rgba(15,23,42,0.12),
inset 0 1px 0 rgba(255,255,255,0.6);
transition: transform 0.35s cubic-bezier(.22,1,.36,1),
box-shadow 0.35s cubic-bezier(.22,1,.36,1);
}
/* brilho diagonal sutil no vidro */
.elementor-9 .elementor-element.elementor-element-42e974d::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%);
}
/* efeito ao passar o mouse: sobe levemente + sombra vermelha suave */
.elementor-9 .elementor-element.elementor-element-42e974d:hover {
transform: translateY(-6px);
box-shadow:
0 2px 4px rgba(15,23,42,0.06),
0 28px 56px rgba(205,12,54,0.18),
inset 0 1px 0 rgba(255,255,255,0.7);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c160906 *//* =====================================
CARD DE VIDRO FOSCO — cole no Custom CSS do Container
(aba Avançado → Custom CSS, no próprio Container/coluna)
===================================== */
.elementor-9 .elementor-element.elementor-element-c160906 {
position: relative;
overflow: hidden;
border-radius: 20px;
background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.2));
/* efeito de vidro fosco de verdade */
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255,255,255,0.5);
box-shadow:
0 1px 2px rgba(15,23,42,0.05),
0 20px 44px rgba(15,23,42,0.12),
inset 0 1px 0 rgba(255,255,255,0.6);
transition: transform 0.35s cubic-bezier(.22,1,.36,1),
box-shadow 0.35s cubic-bezier(.22,1,.36,1);
}
/* brilho diagonal sutil no vidro */
.elementor-9 .elementor-element.elementor-element-c160906::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%);
}
/* efeito ao passar o mouse: sobe levemente + sombra vermelha suave */
.elementor-9 .elementor-element.elementor-element-c160906:hover {
transform: translateY(-6px);
box-shadow:
0 2px 4px rgba(15,23,42,0.06),
0 28px 56px rgba(205,12,54,0.18),
inset 0 1px 0 rgba(255,255,255,0.7);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fb7d8e *//* ===============================
VARIÁVEIS DE COR — TEMA VERMELHO
================================ */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-form {
--form-primary: #cd0c36;
--form-primary-hover: #ab0d2f;
--form-primary-light: #ffe5ea;
--form-border: #f0d3d9;
--form-border-hover: #e8b7c0;
--form-text: #2a2f45;
--form-placeholder: #9aa3b2;
--form-error: #d92d20;
--form-success: #1a9c5f;
}
/* ===============================
CONTAINER DO FORMULÁRIO
================================ */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-form {
background: rgba(255, 255, 255, 0.97);
padding: 48px;
border-radius: 24px;
box-shadow:
0 1px 2px rgba(20, 10, 15, 0.04),
0 20px 40px rgba(205, 12, 54, 0.14),
0 40px 80px rgba(205, 12, 54, 0.08),
inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
/* ===============================
LABELS
================================ */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-field-label {
font-size: 14px;
font-weight: 500;
color: var(--form-text);
margin-bottom: 6px;
transition: color 0.2s ease;
}
/* ===============================
INPUTS / TEXTAREA
================================ */
.elementor-9 .elementor-element.elementor-element-7fb7d8e input.elementor-field,
.elementor-9 .elementor-element.elementor-element-7fb7d8e textarea.elementor-field {
background-color: #ffffff !important;
border: 1px solid var(--form-border) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
font-size: 14px !important;
color: var(--form-text) !important;
box-shadow: 0 1px 2px rgba(20, 10, 15, 0.03);
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background-color 0.25s ease;
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e textarea.elementor-field {
resize: vertical;
min-height: 120px;
}
/* Placeholder */
.elementor-9 .elementor-element.elementor-element-7fb7d8e input.elementor-field::placeholder,
.elementor-9 .elementor-element.elementor-element-7fb7d8e textarea.elementor-field::placeholder {
color: var(--form-placeholder);
}
/* Hover */
.elementor-9 .elementor-element.elementor-element-7fb7d8e input.elementor-field:hover,
.elementor-9 .elementor-element.elementor-element-7fb7d8e textarea.elementor-field:hover {
border-color: var(--form-border-hover) !important;
}
/* Focus */
.elementor-9 .elementor-element.elementor-element-7fb7d8e input.elementor-field:focus,
.elementor-9 .elementor-element.elementor-element-7fb7d8e textarea.elementor-field:focus {
outline: none;
border-color: var(--form-primary) !important;
box-shadow: 0 0 0 4px rgba(205, 12, 54, 0.14) !important;
}
/* Estado de erro (Elementor adiciona .elementor-error / aria-invalid) */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-field-group.elementor-error input.elementor-field,
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-field-group.elementor-error textarea.elementor-field,
.elementor-9 .elementor-element.elementor-element-7fb7d8e input.elementor-field[aria-invalid="true"],
.elementor-9 .elementor-element.elementor-element-7fb7d8e textarea.elementor-field[aria-invalid="true"] {
border-color: var(--form-error) !important;
box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.12) !important;
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-message.elementor-message-danger {
color: var(--form-error);
font-size: 13px;
margin-top: 6px;
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-message.elementor-message-success {
color: var(--form-success);
font-size: 13px;
margin-top: 6px;
}
/* Disabled */
.elementor-9 .elementor-element.elementor-element-7fb7d8e input.elementor-field:disabled,
.elementor-9 .elementor-element.elementor-element-7fb7d8e textarea.elementor-field:disabled {
background-color: #f5f5f7 !important;
color: #b3b8c2 !important;
cursor: not-allowed;
}
/* ===============================
SELECT
================================ */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-select-wrapper {
position: relative;
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-select-wrapper select {
appearance: none !important;
background-image: none !important;
width: 100%;
background-color: #ffffff !important;
border: 1px solid var(--form-border) !important;
border-radius: 12px !important;
padding: 14px 44px 14px 16px !important;
font-size: 14px !important;
color: var(--form-text) !important;
cursor: pointer;
box-shadow: 0 1px 2px rgba(20, 10, 15, 0.03);
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-select-wrapper select:hover {
border-color: var(--form-border-hover) !important;
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-select-wrapper select:focus {
border-color: var(--form-primary) !important;
box-shadow: 0 0 0 4px rgba(205, 12, 54, 0.14) !important;
}
/* seta customizada (SVG embutido, sempre visível e na cor certa) */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-select-wrapper::after {
content: "";
position: absolute;
right: 16px;
top: 50%;
width: 12px;
height: 12px;
pointer-events: none;
transform: translateY(-50%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cd0c36' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
transition: transform 0.2s ease;
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-select-arrow {
color: var(--form-primary);
right: 16px;
}
/* ===============================
CHECKBOX / RADIO (aprimoramento extra)
================================ */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-field-type-checkbox input[type="checkbox"],
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-field-type-radio input[type="radio"] {
accent-color: var(--form-primary);
cursor: pointer;
}
/* ===============================
ESPAÇAMENTO
================================ */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-field-group {
margin-bottom: 22px;
}
/* ===============================
BOTÃO
================================ */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-button {
position: relative;
overflow: hidden;
width: 100%;
background: linear-gradient(135deg, var(--form-primary) 0%, var(--form-primary-hover) 100%);
border: none;
border-radius: 999px;
padding: 16px;
font-size: 14px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: #ffffff;
cursor: pointer;
box-shadow:
0 1px 2px rgba(20, 10, 15, 0.08),
0 18px 40px rgba(205, 12, 54, 0.35),
0 30px 60px rgba(205, 12, 54, 0.15);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
background 0.3s ease;
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-button:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(20, 10, 15, 0.1),
0 26px 50px rgba(205, 12, 54, 0.42),
0 40px 70px rgba(205, 12, 54, 0.2);
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-button:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(20, 10, 15, 0.1),
0 10px 24px rgba(205, 12, 54, 0.35);
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-button:focus-visible {
outline: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 6px rgba(205, 12, 54, 0.5),
0 18px 40px rgba(205, 12, 54, 0.3);
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-button:disabled {
background: #d8b1bb;
box-shadow: none;
cursor: not-allowed;
transform: none;
}
/* brilho sutil ao passar o mouse */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-button::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.25),
transparent
);
transform: skewX(-20deg);
transition: left 0.6s ease;
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-button:hover::before {
left: 125%;
}
/* ===============================
TABLET
================================ */
@media (max-width: 1024px) {
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-form {
padding: 32px;
border-radius: 20px;
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e input.elementor-field,
.elementor-9 .elementor-element.elementor-element-7fb7d8e textarea.elementor-field,
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-select-wrapper select {
padding: 12px !important;
}
}
/* ===============================
MOBILE
================================ */
@media (max-width: 767px) {
/* Em vez de ficar totalmente "nu" sobre o fundo vinho da seção,
o formulário ganha um cartão "glass" sutil -- da estrutura visual
sem competir com o card branco solido do desktop */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-form {
padding: 24px 20px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
/* Labels precisam de cor clara aqui -- --form-text (#2a2f45) foi
pensado pra fundo branco, e no fundo escuro do mobile ficava com
contraste muito baixo (quase ilegivel) */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-field-label {
color: rgba(255, 255, 255, 0.92) !important;
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-field-group {
margin-bottom: 18px;
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e input.elementor-field,
.elementor-9 .elementor-element.elementor-element-7fb7d8e textarea.elementor-field,
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-select-wrapper select {
padding: 16px !important;
font-size: 15px !important;
}
/* Sombra do botao normalizada -- uma unica camada suave, em vez das
duas camadas pesadas que criavam o halo vermelho exagerado */
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-button {
padding: 18px;
letter-spacing: 2px;
box-shadow: 0 8px 20px rgba(205, 12, 54, 0.28);
}
.elementor-9 .elementor-element.elementor-element-7fb7d8e .elementor-button:hover {
box-shadow: 0 10px 24px rgba(205, 12, 54, 0.34);
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c18c8ad *//* =====================================
FUNDO ESCURO COM GRADIENTE + FORMAS DESFOCADAS
Cole no Custom CSS do Container (aba Avançado → Custom CSS)
===================================== */
.elementor-9 .elementor-element.elementor-element-c18c8ad {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #2b0410, #4a0916 45%, #7a0a20 100%);
/* === FULL-BLEED: faz o fundo ocupar 100% da largura da tela,
independente da largura máxima configurada no Elementor === */
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* forma desfocada no canto superior direito */
.elementor-9 .elementor-element.elementor-element-c18c8ad::before {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
border-radius: 50%;
filter: blur(60px);
width: 500px;
height: 500px;
background: rgba(255,77,109,0.25);
top: -180px;
right: -140px;
}
/* forma desfocada no canto inferior esquerdo */
.elementor-9 .elementor-element.elementor-element-c18c8ad::after {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
border-radius: 50%;
filter: blur(60px);
width: 420px;
height: 420px;
background: rgba(255,255,255,0.06);
bottom: -160px;
left: -100px;
}/* End custom CSS */
/* Start custom CSS for nested-accordion, class: .elementor-element-4b513f1 *//* =====================================
FAQ SEAR – GLASS PREMIUM (ULTRA FLUIDO)
PERFORMANCE OPTIMIZED
v2 — ajustes: animação de altura, sombra
do estado aberto, transição do ícone em
camadas, cor alinhada ao sistema tipográfico,
foco no card inteiro, e último item sem
margem sobrando.
===================================== */
.faq-sear {
--sear-accent: #cd0c36;
--sear-accent-dark: #a30a2c;
--sear-accent-soft: rgba(205, 12, 54, 0.16);
--sear-accent-glow: rgba(205, 12, 54, 0.1);
--card-bg: #ffffff;
--card-bg-hover: #fffbfb;
/* alinhado ao --sear-h1/h2 (#0f172a) do sistema tipográfico do site,
em vez do #14172b que era quase igual mas não idêntico */
--sear-text: #0f172a;
--sear-muted: #5b6274;
--sear-radius: 20px;
--ease-smooth: cubic-bezier(.22, 1, .36, 1);
}
/* ======================
ITEM (CASCA)
====================== */
.faq-sear .e-n-accordion-item {
position: relative !important;
background: var(--card-bg) !important;
border-radius: var(--sear-radius) !important;
margin-bottom: 14px !important;
overflow: hidden !important;
border: 1px solid rgba(15, 23, 42, 0.06) !important;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.03),
0 6px 16px rgba(15, 23, 42, 0.04);
will-change: transform, box-shadow;
transition:
transform 0.4s var(--ease-smooth),
box-shadow 0.4s var(--ease-smooth),
border-color 0.4s ease;
}
/* último item não deixa sobra de espaço se o container já tiver padding próprio */
.faq-sear .e-n-accordion-item:last-child {
margin-bottom: 0 !important;
}
/* HOVER */
.faq-sear .e-n-accordion-item:hover {
border-color: rgba(15, 23, 42, 0.08) !important;
transform: translateY(-2px);
box-shadow:
0 2px 6px rgba(15, 23, 42, 0.05),
0 14px 28px rgba(15, 23, 42, 0.07);
}
/* FOCO — o card inteiro reage sutilmente quando algo dentro dele
recebe foco via teclado, não só o header */
.faq-sear .e-n-accordion-item:focus-within {
border-color: var(--sear-accent-soft) !important;
box-shadow:
0 2px 6px rgba(205, 12, 54, 0.05),
0 14px 28px rgba(205, 12, 54, 0.06);
}
/* ITEM ABERTO — destaque com a cor da marca, sombra reforçada pra dar
mais "peso físico" ao card ativo (antes competia demais com o
indicador lateral, que ficava sendo o único sinal forte de estado) */
.faq-sear .e-n-accordion-item:has([open]),
.faq-sear .e-n-accordion-item:has([aria-expanded="true"]) {
background: var(--card-bg-hover) !important;
border-color: var(--sear-accent-soft) !important;
box-shadow:
0 4px 10px rgba(205, 12, 54, 0.08),
0 24px 48px rgba(205, 12, 54, 0.13);
}
/* ======================
INDICADOR LATERAL
====================== */
.faq-sear .e-n-accordion-item::before {
content: "";
position: absolute;
left: 0;
top: 16px;
bottom: 16px;
width: 0;
background: linear-gradient(180deg, var(--sear-accent), var(--sear-accent-dark));
border-radius: 0 4px 4px 0;
opacity: 0;
transition:
width 0.4s var(--ease-smooth),
opacity 0.3s ease;
}
.faq-sear .e-n-accordion-item[open]::before,
.faq-sear .e-n-accordion-item[aria-expanded="true"]::before {
width: 4px;
opacity: 1;
}
/* ======================
HEADER
====================== */
.faq-sear .e-n-accordion-item-title {
position: relative;
padding: 22px 26px !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px;
cursor: pointer !important;
/* sem borda própria — evita o "corte" visual entre pergunta e resposta */
border: none !important;
transition: padding-bottom 0.3s ease;
}
.faq-sear .e-n-accordion-item-title:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--sear-accent-soft);
border-radius: 14px;
}
/* TEXTO HEADER */
.faq-sear .e-n-accordion-item-title-text {
font-size: 16.5px !important;
font-weight: 500 !important;
line-height: 1.6;
letter-spacing: -0.01em;
color: var(--sear-text) !important;
transition: color 0.25s ease, font-weight 0.25s ease;
}
.faq-sear .e-n-accordion-item[open]
.e-n-accordion-item-title-text,
.faq-sear .e-n-accordion-item[aria-expanded="true"]
.e-n-accordion-item-title-text {
color: var(--sear-accent-dark) !important;
font-weight: 600 !important;
}
/* ======================
ÍCONE — anel minimalista em vez de bolinha chapada
Rotação e preenchimento agora têm timing levemente diferente:
a rotação é imediata e um pouco mais rápida, o fundo/cor entram
com leve atraso — em vez de tudo acontecer exatamente junto.
====================== */
.faq-sear .e-n-accordion-item-title-icon {
flex-shrink: 0;
font-size: 14px !important;
color: var(--sear-muted) !important;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: transparent;
border: 1.5px solid rgba(15, 23, 42, 0.12);
transition:
transform 0.35s var(--ease-smooth),
background 0.4s ease 0.05s,
border-color 0.4s ease 0.05s,
color 0.4s ease 0.05s;
}
.faq-sear .e-n-accordion-item-title:hover
.e-n-accordion-item-title-icon {
border-color: var(--sear-accent);
color: var(--sear-accent);
}
.faq-sear .e-n-accordion-item[open]
.e-n-accordion-item-title-icon,
.faq-sear .e-n-accordion-item[aria-expanded="true"]
.e-n-accordion-item-title-icon {
transform: rotate(180deg);
background: var(--sear-accent);
border-color: var(--sear-accent);
color: #ffffff !important;
box-shadow: 0 4px 12px var(--sear-accent-glow);
}
/* ======================
CONTEÚDO — animação de altura real
O mecanismo nativo do accordion (details/[open] ou aria-expanded)
normalmente alterna "display: none/block" de forma seca por baixo
do capô. Isso fazia o card "saltar" de tamanho instantaneamente,
e só o fade por cima disfarçava parcialmente o corte.
Forçamos display + max-height controlados por CSS pra suavizar
a abertura/fechamento de verdade, não só o conteúdo em si.
====================== */
.faq-sear .e-n-accordion-item-content {
position: relative;
display: block !important; /* permite animar em vez de aparecer/sumir seco */
overflow: hidden;
max-height: 0;
padding: 0 26px !important;
font-size: 15.5px !important;
line-height: 1.85;
color: var(--sear-muted) !important;
background: transparent !important;
opacity: 0;
transform: translateY(-6px);
will-change: max-height, transform, opacity;
transition:
max-height 0.45s var(--ease-smooth),
padding 0.4s var(--ease-smooth),
opacity 0.4s var(--ease-smooth),
transform 0.4s var(--ease-smooth);
}
/* linha que some nas pontas — muito mais elegante que uma borda reta */
.faq-sear .e-n-accordion-item-content::before {
content: "";
display: block;
height: 1px;
width: 100%;
margin-bottom: 18px;
background: linear-gradient(
90deg,
transparent,
rgba(15, 23, 42, 0.08) 15%,
rgba(15, 23, 42, 0.08) 85%,
transparent
);
}
.faq-sear .e-n-accordion-item[open]
.e-n-accordion-item-content,
.faq-sear .e-n-accordion-item[aria-expanded="true"]
.e-n-accordion-item-content {
/* valor generoso o bastante pra caber a maioria das respostas de FAQ;
se algum item tiver resposta muito longa e for cortado, aumente
este número (ex: 1200px) */
max-height: 800px;
padding: 4px 26px 26px !important;
opacity: 1;
transform: translateY(0);
}
/* ======================
TABLET
====================== */
@media (min-width: 768px) and (max-width: 1024px) {
.faq-sear .e-n-accordion-item-title {
padding: 18px 20px !important;
border-radius: 13px;
}
.faq-sear .e-n-accordion-item-title-text {
font-size: 15.5px !important;
}
.faq-sear .e-n-accordion-item-content {
padding: 0 20px !important;
font-size: 15px !important;
border-radius: 0 0 13px 13px;
transform: translateY(-5px);
}
.faq-sear .e-n-accordion-item[open]
.e-n-accordion-item-content,
.faq-sear .e-n-accordion-item[aria-expanded="true"]
.e-n-accordion-item-content {
padding: 20px 20px 24px !important;
}
}
/* ======================
MOBILE
====================== */
@media (max-width: 767px) {
.faq-sear .e-n-accordion-item-title {
padding: 16px !important;
border-radius: 12px;
}
.faq-sear .e-n-accordion-item-title-text {
font-size: 15px !important;
}
.faq-sear .e-n-accordion-item-content {
padding: 0 16px !important;
font-size: 14.5px !important;
line-height: 1.75;
border-radius: 0 0 12px 12px;
transform: translateY(-4px);
}
.faq-sear .e-n-accordion-item[open]
.e-n-accordion-item-content,
.faq-sear .e-n-accordion-item[aria-expanded="true"]
.e-n-accordion-item-content {
padding: 16px 16px 20px !important;
}
.faq-sear .e-n-accordion-item:hover {
transform: none;
}
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-202b48d *//* Link de Política de Privacidade – Rodapé */
.footer-privacy-link {
position: relative;
color: #F6F9FC;
text-decoration: none;
font-weight: 400;
transition: color 0.25s ease;
}
/* Efeito somente no hover */
.footer-privacy-link:hover {
color: #ffffff;
}
/* Linha animada no hover */
.footer-privacy-link::after {
content: "";
position: absolute;
left: 0;
bottom: 15px;
width: 100%;
height: 1px;
background: currentColor;
opacity: 0;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Ativa o efeito ao passar o mouse */
.footer-privacy-link:hover::after {
opacity: 1;
transform: scaleX(1);
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Sweet Sans Pro';
font-style: normal;
font-weight: 100;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExThin.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExThin.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExThin.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExThin.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExThin.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: italic;
font-weight: 100;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExThinItalic.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExThinItalic.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExThinItalic.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExThinItalic.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExThinItalic.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: normal;
font-weight: 200;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Thin.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Thin.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Thin.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Thin.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Thin.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: italic;
font-weight: 200;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ThinItalic.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ThinItalic.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ThinItalic.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ThinItalic.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ThinItalic.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: normal;
font-weight: 300;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Light.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Light.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Light.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Light.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Light.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: italic;
font-weight: 300;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-LightItalic.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-LightItalic.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-LightItalic.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-LightItalic.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-LightItalic.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: normal;
font-weight: 300;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExLight.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExLight.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExLight.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExLight.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExLight.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: italic;
font-weight: 300;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExLightItalic.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExLightItalic.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExLightItalic.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExLightItalic.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-ExLightItalic.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: normal;
font-weight: 400;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Regular.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Regular.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Regular.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Regular.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: italic;
font-weight: 400;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Italic.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Italic.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Italic.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Italic.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Italic.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: normal;
font-weight: 500;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Medium.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Medium.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Medium.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Medium.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: italic;
font-weight: 500;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-MediumItalic.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-MediumItalic.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-MediumItalic.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-MediumItalic.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-MediumItalic.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: normal;
font-weight: 700;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Bold.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Bold.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Bold.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Bold.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: italic;
font-weight: 700;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-BoldItalic.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-BoldItalic.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-BoldItalic.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-BoldItalic.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: normal;
font-weight: 900;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Heavy.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Heavy.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Heavy.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Heavy.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-Heavy.ttf') format('truetype');
}
@font-face {
font-family: 'Sweet Sans Pro';
font-style: italic;
font-weight: 900;
font-display: auto;
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-HeavyItalic.eot');
src: url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-HeavyItalic.eot?#iefix') format('embedded-opentype'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-HeavyItalic.woff2') format('woff2'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-HeavyItalic.woff') format('woff'),
url('https://studioai.searcompany.com/wp-content/uploads/2026/07/SweetSansPro-HeavyItalic.ttf') format('truetype');
}
/* End Custom Fonts CSS */