.elementor-5644 .elementor-element.elementor-element-ac0535c{--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-5644 .elementor-element.elementor-element-dcca129{--display:flex;--min-height:850px;--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;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-46deddd{--display:flex;--min-height:828px;--justify-content:center;--margin-top:-50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-46deddd:not(.elementor-motion-effects-element-type-background), .elementor-5644 .elementor-element.elementor-element-46deddd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mercadophone.app.br/wp-content/uploads/2026/05/backgroundhero-scaled.webp");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-5644 .elementor-element.elementor-element-d7ba863{--display:flex;}.elementor-widget-image-box .elementor-image-box-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-image-box:has(:hover) .elementor-image-box-title, .elementor-widget-image-box:has(:focus) .elementor-image-box-title{color:var( --e-global-color-primary );}.elementor-widget-image-box .elementor-image-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-5644 .elementor-element.elementor-element-fd5c8a7.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-fd5c8a7.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-5644 .elementor-element.elementor-element-fd5c8a7.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-5644 .elementor-element.elementor-element-fd5c8a7.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-5644 .elementor-element.elementor-element-fd5c8a7 .elementor-image-box-title{margin-bottom:7px;font-family:"Plus Jakarta Sans", Sans-serif;font-size:12px;font-weight:600;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-fd5c8a7 .elementor-image-box-wrapper .elementor-image-box-img{width:108px;}.elementor-5644 .elementor-element.elementor-element-fd5c8a7 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-5644 .elementor-element.elementor-element-fd5c8a7:has(:hover) .elementor-image-box-title, .elementor-5644 .elementor-element.elementor-element-fd5c8a7:has(:focus) .elementor-image-box-title{color:#FFFFFF;}.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-5644 .elementor-element.elementor-element-a0c1d32{width:var( --container-widget-width, 777px );max-width:777px;--container-widget-width:777px;--container-widget-flex-grow:0;text-align:center;}.elementor-5644 .elementor-element.elementor-element-a0c1d32.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-a0c1d32 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:48px;font-weight:500;line-height:1.3em;color:#FFFFFF;}.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-5644 .elementor-element.elementor-element-77c7de7{width:var( --container-widget-width, 401px );max-width:401px;--container-widget-width:401px;--container-widget-flex-grow:0;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.3em;}.elementor-5644 .elementor-element.elementor-element-77c7de7.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-6d872c9.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-c899dbe{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--margin-top:-55px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5644 .elementor-element.elementor-element-d619e1e{width:var( --container-widget-width, 312px );max-width:312px;background-color:#EEF0FF;padding:10px 10px 10px 10px;--container-widget-width:312px;--container-widget-flex-grow:0;border-style:solid;border-width:1px 1px 1px 1px;border-color:#01013017;border-radius:15px 15px 15px 15px;}.elementor-5644 .elementor-element.elementor-element-d619e1e:hover{background-color:#D1D6FF;}.elementor-5644 .elementor-element.elementor-element-d619e1e .elementor-image-box-wrapper{text-align:start;}.elementor-5644 .elementor-element.elementor-element-d619e1e.elementor-position-right .elementor-image-box-img{margin-left:21px;}.elementor-5644 .elementor-element.elementor-element-d619e1e.elementor-position-left .elementor-image-box-img{margin-right:21px;}.elementor-5644 .elementor-element.elementor-element-d619e1e.elementor-position-top .elementor-image-box-img{margin-bottom:21px;}.elementor-5644 .elementor-element.elementor-element-d619e1e .elementor-image-box-title{margin-bottom:10px;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:600;line-height:1.3em;color:#010130;}.elementor-5644 .elementor-element.elementor-element-d619e1e .elementor-image-box-wrapper .elementor-image-box-img{width:68px;}.elementor-5644 .elementor-element.elementor-element-d619e1e .elementor-image-box-img img{transition-duration:0.7s;}.elementor-5644 .elementor-element.elementor-element-d619e1e:has(:hover) .elementor-image-box-title, .elementor-5644 .elementor-element.elementor-element-d619e1e:has(:focus) .elementor-image-box-title{color:#070750;}.elementor-5644 .elementor-element.elementor-element-a0ad909{width:var( --container-widget-width, 312px );max-width:312px;background-color:#EEF0FF;padding:10px 10px 10px 10px;--container-widget-width:312px;--container-widget-flex-grow:0;border-style:solid;border-width:1px 1px 1px 1px;border-color:#01013017;border-radius:15px 15px 15px 15px;}.elementor-5644 .elementor-element.elementor-element-a0ad909:hover{background-color:#D1D6FF;}.elementor-5644 .elementor-element.elementor-element-a0ad909 .elementor-image-box-wrapper{text-align:start;}.elementor-5644 .elementor-element.elementor-element-a0ad909.elementor-position-right .elementor-image-box-img{margin-left:21px;}.elementor-5644 .elementor-element.elementor-element-a0ad909.elementor-position-left .elementor-image-box-img{margin-right:21px;}.elementor-5644 .elementor-element.elementor-element-a0ad909.elementor-position-top .elementor-image-box-img{margin-bottom:21px;}.elementor-5644 .elementor-element.elementor-element-a0ad909 .elementor-image-box-title{margin-bottom:10px;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:600;line-height:1.3em;color:#010130;}.elementor-5644 .elementor-element.elementor-element-a0ad909 .elementor-image-box-wrapper .elementor-image-box-img{width:68px;}.elementor-5644 .elementor-element.elementor-element-a0ad909 .elementor-image-box-img img{transition-duration:0.7s;}.elementor-5644 .elementor-element.elementor-element-a0ad909:has(:hover) .elementor-image-box-title, .elementor-5644 .elementor-element.elementor-element-a0ad909:has(:focus) .elementor-image-box-title{color:#070750;}.elementor-5644 .elementor-element.elementor-element-6222fd8{width:var( --container-widget-width, 312px );max-width:312px;background-color:#EEF0FF;padding:10px 10px 10px 10px;--container-widget-width:312px;--container-widget-flex-grow:0;border-style:solid;border-width:1px 1px 1px 1px;border-color:#01013017;border-radius:15px 15px 15px 15px;}.elementor-5644 .elementor-element.elementor-element-6222fd8:hover{background-color:#D1D6FF;}.elementor-5644 .elementor-element.elementor-element-6222fd8 .elementor-image-box-wrapper{text-align:start;}.elementor-5644 .elementor-element.elementor-element-6222fd8.elementor-position-right .elementor-image-box-img{margin-left:21px;}.elementor-5644 .elementor-element.elementor-element-6222fd8.elementor-position-left .elementor-image-box-img{margin-right:21px;}.elementor-5644 .elementor-element.elementor-element-6222fd8.elementor-position-top .elementor-image-box-img{margin-bottom:21px;}.elementor-5644 .elementor-element.elementor-element-6222fd8 .elementor-image-box-title{margin-bottom:10px;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:600;line-height:1.3em;color:#010130;}.elementor-5644 .elementor-element.elementor-element-6222fd8 .elementor-image-box-wrapper .elementor-image-box-img{width:68px;}.elementor-5644 .elementor-element.elementor-element-6222fd8 .elementor-image-box-img img{transition-duration:0.7s;}.elementor-5644 .elementor-element.elementor-element-6222fd8:has(:hover) .elementor-image-box-title, .elementor-5644 .elementor-element.elementor-element-6222fd8:has(:focus) .elementor-image-box-title{color:#070750;}.elementor-5644 .elementor-element.elementor-element-cf37d41{--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:50px 50px;--row-gap:50px;--column-gap:50px;--padding-top:70px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-77bc813{width:var( --container-widget-width, 846px );max-width:846px;--container-widget-width:846px;--container-widget-flex-grow:0;text-align:center;}.elementor-5644 .elementor-element.elementor-element-77bc813.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-77bc813 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#010130;}.elementor-5644 .elementor-element.elementor-element-3cf483d{border-radius:20px 20px 20px 20px;}.elementor-5644 .elementor-element.elementor-element-3cf483d .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-5644 .elementor-element.elementor-element-52dc819{--display:flex;--min-height:592px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5644 .elementor-element.elementor-element-58ecda5{--display:flex;}.elementor-5644 .elementor-element.elementor-element-74efcfc{width:var( --container-widget-width, 428px );max-width:428px;--container-widget-width:428px;--container-widget-flex-grow:0;text-align:start;}.elementor-5644 .elementor-element.elementor-element-74efcfc.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-74efcfc .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#010130;}.elementor-5644 .elementor-element.elementor-element-946aeca.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-946aeca{text-align:start;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#08080899;}.elementor-5644 .elementor-element.elementor-element-df795ac{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:70px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-5644 .elementor-element.elementor-element-56385df img{width:630px;}.elementor-5644 .elementor-element.elementor-element-2bb29c8{margin:-302px -36px calc(var(--kit-widget-spacing, 0px) + 0px) -54px;text-align:start;}.elementor-5644 .elementor-element.elementor-element-2bb29c8 img{width:141px;}.elementor-5644 .elementor-element.elementor-element-5f95fab{--display:flex;--min-height:1376px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-around;--align-items:center;}.elementor-5644 .elementor-element.elementor-element-5f95fab:not(.elementor-motion-effects-element-type-background), .elementor-5644 .elementor-element.elementor-element-5f95fab > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mercadophone.app.br/wp-content/uploads/2026/05/Secao-3.svg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-5644 .elementor-element.elementor-element-6fbbfd3{--display:flex;}.elementor-5644 .elementor-element.elementor-element-cde27e7{width:auto;max-width:auto;background-color:#5A77FF1A;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:8px 15px 8px 15px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0101301A;border-radius:100px 100px 100px 100px;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;color:#5A77FF;}.elementor-5644 .elementor-element.elementor-element-cde27e7.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-ea180b6{width:var( --container-widget-width, 846px );max-width:846px;--container-widget-width:846px;--container-widget-flex-grow:0;text-align:center;}.elementor-5644 .elementor-element.elementor-element-ea180b6.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-ea180b6 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#010130;}.elementor-5644 .elementor-element.elementor-element-ea1a18a{width:var( --container-widget-width, 545px );max-width:545px;--container-widget-width:545px;--container-widget-flex-grow:0;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#08080899;}.elementor-5644 .elementor-element.elementor-element-ea1a18a.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-a2a65a0{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-5644 .elementor-element.elementor-element-7986dbf{--display:flex;--min-height:454px;--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-5644 .elementor-element.elementor-element-7986dbf:not(.elementor-motion-effects-element-type-background), .elementor-5644 .elementor-element.elementor-element-7986dbf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mercadophone.app.br/wp-content/uploads/2026/05/frame1171274913.webp");background-position:center center;background-size:cover;}.elementor-5644 .elementor-element.elementor-element-7986dbf.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-5644 .elementor-element.elementor-element-668d5aa{--display:flex;--overlay-opacity:0.5;}.elementor-5644 .elementor-element.elementor-element-668d5aa::before, .elementor-5644 .elementor-element.elementor-element-668d5aa > .elementor-background-video-container::before, .elementor-5644 .elementor-element.elementor-element-668d5aa > .e-con-inner > .elementor-background-video-container::before, .elementor-5644 .elementor-element.elementor-element-668d5aa > .elementor-background-slideshow::before, .elementor-5644 .elementor-element.elementor-element-668d5aa > .e-con-inner > .elementor-background-slideshow::before, .elementor-5644 .elementor-element.elementor-element-668d5aa > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-5644 .elementor-element.elementor-element-0e9a11a{margin:-45px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}body:not(.rtl) .elementor-5644 .elementor-element.elementor-element-4ff8ffc{left:317px;}body.rtl .elementor-5644 .elementor-element.elementor-element-4ff8ffc{right:317px;}.elementor-5644 .elementor-element.elementor-element-4ff8ffc{top:138px;}.elementor-5644 .elementor-element.elementor-element-4ff8ffc img{width:873px;}body:not(.rtl) .elementor-5644 .elementor-element.elementor-element-66544e9{left:-81.3px;}body.rtl .elementor-5644 .elementor-element.elementor-element-66544e9{right:-81.3px;}.elementor-5644 .elementor-element.elementor-element-66544e9{top:245.1px;}.elementor-5644 .elementor-element.elementor-element-66544e9 img{width:223px;}.elementor-5644 .elementor-element.elementor-element-46f62ad{--display:flex;--justify-content:space-between;--padding-top:40px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-760ab28{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:80px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-75c1d40{width:var( --container-widget-width, 428px );max-width:428px;--container-widget-width:428px;--container-widget-flex-grow:0;text-align:start;}.elementor-5644 .elementor-element.elementor-element-75c1d40.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-75c1d40 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#010130;}.elementor-5644 .elementor-element.elementor-element-601167a{width:var( --container-widget-width, 270px );max-width:270px;--container-widget-width:270px;--container-widget-flex-grow:0;text-align:start;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#08080899;}.elementor-5644 .elementor-element.elementor-element-601167a.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-1a57844{--display:flex;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:0px;--padding-bottom:0px;--padding-left:95px;--padding-right:0px;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-5644 .elementor-element.elementor-element-c28e077{padding:8px 20px 8px 30px;}.elementor-5644 .elementor-element.elementor-element-c28e077 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-5644 .elementor-element.elementor-element-c28e077 .elementor-icon-box-title{margin-block-end:0px;color:#010130;}.elementor-5644 .elementor-element.elementor-element-c28e077 .elementor-icon{font-size:34px;}.elementor-5644 .elementor-element.elementor-element-c28e077 .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-c28e077 .elementor-icon-box-title a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:600;}.elementor-5644 .elementor-element.elementor-element-c28e077:has(:hover) .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-c28e077:has(:focus) .elementor-icon-box-title{color:#010130;}.elementor-5644 .elementor-element.elementor-element-c28e077 .elementor-icon-box-description{color:#010130;}.elementor-5644 .elementor-element.elementor-element-8fb59ab{padding:8px 20px 8px 30px;}.elementor-5644 .elementor-element.elementor-element-8fb59ab .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-5644 .elementor-element.elementor-element-8fb59ab .elementor-icon-box-title{margin-block-end:0px;color:#010130;}.elementor-5644 .elementor-element.elementor-element-8fb59ab .elementor-icon{font-size:34px;}.elementor-5644 .elementor-element.elementor-element-8fb59ab .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-8fb59ab .elementor-icon-box-title a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:600;}.elementor-5644 .elementor-element.elementor-element-8fb59ab:has(:hover) .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-8fb59ab:has(:focus) .elementor-icon-box-title{color:#010130;}.elementor-5644 .elementor-element.elementor-element-8fb59ab .elementor-icon-box-description{color:#010130;}.elementor-5644 .elementor-element.elementor-element-0033b9c{--display:flex;--min-height:314px;--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:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-5644 .elementor-element.elementor-element-f16bca1{--display:flex;--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-5644 .elementor-element.elementor-element-40fd333{--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-5644 .elementor-element.elementor-element-03afe16{--display:flex;--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-5644 .elementor-element.elementor-element-fa7f64d{padding:7px 20px 7px 30px;}.elementor-5644 .elementor-element.elementor-element-fa7f64d .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-5644 .elementor-element.elementor-element-fa7f64d .elementor-icon-box-title{margin-block-end:0px;color:#010130;}.elementor-5644 .elementor-element.elementor-element-fa7f64d .elementor-icon{font-size:34px;}.elementor-5644 .elementor-element.elementor-element-fa7f64d .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-fa7f64d .elementor-icon-box-title a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:600;}.elementor-5644 .elementor-element.elementor-element-fa7f64d:has(:hover) .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-fa7f64d:has(:focus) .elementor-icon-box-title{color:#010130;}.elementor-5644 .elementor-element.elementor-element-fa7f64d .elementor-icon-box-description{color:#010130;}.elementor-5644 .elementor-element.elementor-element-6bced81{padding:7px 20px 7px 30px;}.elementor-5644 .elementor-element.elementor-element-6bced81 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-5644 .elementor-element.elementor-element-6bced81 .elementor-icon-box-title{margin-block-end:0px;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-6bced81 .elementor-icon{font-size:34px;}.elementor-5644 .elementor-element.elementor-element-6bced81 .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-6bced81 .elementor-icon-box-title a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:600;}.elementor-5644 .elementor-element.elementor-element-6bced81:has(:hover) .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-6bced81:has(:focus) .elementor-icon-box-title{color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-6bced81 .elementor-icon-box-description{color:#010130;}.elementor-5644 .elementor-element.elementor-element-8c6f997{--display:flex;}.elementor-5644 .elementor-element.elementor-element-2d5ca69 img{width:100%;}.elementor-5644 .elementor-element.elementor-element-ab829d8{--display:flex;--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-5644 .elementor-element.elementor-element-8815982{padding:12px 20px 12px 30px;}.elementor-5644 .elementor-element.elementor-element-8815982 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-5644 .elementor-element.elementor-element-8815982 .elementor-icon-box-title{margin-block-end:0px;color:#010130;}.elementor-5644 .elementor-element.elementor-element-8815982 .elementor-icon{font-size:34px;}.elementor-5644 .elementor-element.elementor-element-8815982 .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-8815982 .elementor-icon-box-title a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:600;}.elementor-5644 .elementor-element.elementor-element-8815982:has(:hover) .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-8815982:has(:focus) .elementor-icon-box-title{color:#010130;}.elementor-5644 .elementor-element.elementor-element-8815982 .elementor-icon-box-description{color:#010130;}.elementor-5644 .elementor-element.elementor-element-6b93a66{padding:13px 20px 13px 30px;}.elementor-5644 .elementor-element.elementor-element-6b93a66 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-5644 .elementor-element.elementor-element-6b93a66 .elementor-icon-box-title{margin-block-end:0px;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-6b93a66 .elementor-icon{font-size:34px;}.elementor-5644 .elementor-element.elementor-element-6b93a66 .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-6b93a66 .elementor-icon-box-title a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:600;}.elementor-5644 .elementor-element.elementor-element-6b93a66:has(:hover) .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-6b93a66:has(:focus) .elementor-icon-box-title{color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-6b93a66 .elementor-icon-box-description{color:#010130;}.elementor-5644 .elementor-element.elementor-element-579b869{padding:12px 20px 12px 30px;}.elementor-5644 .elementor-element.elementor-element-579b869 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-5644 .elementor-element.elementor-element-579b869 .elementor-icon-box-title{margin-block-end:0px;color:#010130;}.elementor-5644 .elementor-element.elementor-element-579b869 .elementor-icon{font-size:34px;}.elementor-5644 .elementor-element.elementor-element-579b869 .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-579b869 .elementor-icon-box-title a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:600;}.elementor-5644 .elementor-element.elementor-element-579b869:has(:hover) .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-579b869:has(:focus) .elementor-icon-box-title{color:#010130;}.elementor-5644 .elementor-element.elementor-element-579b869 .elementor-icon-box-description{color:#010130;}.elementor-5644 .elementor-element.elementor-element-bf056ff{--display:flex;--justify-content:flex-start;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:25px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-bf056ff:not(.elementor-motion-effects-element-type-background), .elementor-5644 .elementor-element.elementor-element-bf056ff > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mercadophone.app.br/wp-content/uploads/2026/05/frame1171274918.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-5644 .elementor-element.elementor-element-463ee08{width:var( --container-widget-width, 428px );max-width:428px;--container-widget-width:428px;--container-widget-flex-grow:0;text-align:center;}.elementor-5644 .elementor-element.elementor-element-463ee08.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-463ee08 .elementor-heading-title{font-family:"Pixelify Sans", Sans-serif;font-size:45px;font-weight:500;line-height:0.7em;color:#010130;}.elementor-5644 .elementor-element.elementor-element-35ede8a{width:var( --container-widget-width, 376px );max-width:376px;--container-widget-width:376px;--container-widget-flex-grow:0;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#08080899;}.elementor-5644 .elementor-element.elementor-element-35ede8a.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-c518261{--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;}.elementor-5644 .elementor-element.elementor-element-d1e9976{--display:flex;}.elementor-5644 .elementor-element.elementor-element-11d3710{width:var( --container-widget-width, 449px );max-width:449px;--container-widget-width:449px;--container-widget-flex-grow:0;text-align:start;}.elementor-5644 .elementor-element.elementor-element-11d3710.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-11d3710 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:38px;font-weight:500;line-height:1.3em;color:#010130;}.elementor-5644 .elementor-element.elementor-element-4a13b7f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:118px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-ca2ef13{width:var( --container-widget-width, 366px );max-width:366px;--container-widget-width:366px;--container-widget-flex-grow:0;font-family:"Plus Jakarta Sans", Sans-serif;font-size:18px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#08080899;}.elementor-5644 .elementor-element.elementor-element-ca2ef13.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-2be9767.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-c4b1085{--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:42px 42px;--row-gap:42px;--column-gap:42px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:080px;--padding-bottom:120px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-a736c79{--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:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-5644 .elementor-element.elementor-element-4d24b21{width:auto;max-width:auto;background-color:#5A77FF1A;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:8px 15px 8px 15px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0101301A;border-radius:100px 100px 100px 100px;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;color:#5A77FF;}.elementor-5644 .elementor-element.elementor-element-4d24b21.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-cc3e23c{width:var( --container-widget-width, 322px );max-width:322px;--container-widget-width:322px;--container-widget-flex-grow:0;text-align:start;}.elementor-5644 .elementor-element.elementor-element-cc3e23c.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-cc3e23c .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#010130;}.elementor-5644 .elementor-element.elementor-element-b79e49b{width:var( --container-widget-width, 324px );max-width:324px;--container-widget-width:324px;--container-widget-flex-grow:0;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#08080899;}.elementor-5644 .elementor-element.elementor-element-b79e49b.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-c2bb564.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-6054d70{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-abea60b{z-index:10;}.elementor-5644 .elementor-element.elementor-element-abea60b img{transition-duration:0.8s;}.elementor-5644 .elementor-element.elementor-element-0a87fab{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -15px;padding:40px 0px 0px 0px;}.elementor-5644 .elementor-element.elementor-element-0a87fab img{transition-duration:0.8s;}.elementor-5644 .elementor-element.elementor-element-cc4470a{--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.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-5644 .elementor-element.elementor-element-4b98173{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -24px) 0px;padding:0px 0px 0px 0px;z-index:12;}.elementor-5644 .elementor-element.elementor-element-4b98173 .elementor-icon-wrapper{text-align:center;}.elementor-5644 .elementor-element.elementor-element-4b98173.elementor-view-stacked .elementor-icon{background-color:#6EC1E400;}.elementor-5644 .elementor-element.elementor-element-4b98173.elementor-view-framed .elementor-icon, .elementor-5644 .elementor-element.elementor-element-4b98173.elementor-view-default .elementor-icon{color:#6EC1E400;border-color:#6EC1E400;}.elementor-5644 .elementor-element.elementor-element-4b98173.elementor-view-framed .elementor-icon, .elementor-5644 .elementor-element.elementor-element-4b98173.elementor-view-default .elementor-icon svg{fill:#6EC1E400;}.elementor-5644 .elementor-element.elementor-element-4b98173 .elementor-icon{font-size:18px;}.elementor-5644 .elementor-element.elementor-element-4b98173 .elementor-icon svg{height:18px;}.elementor-5644 .elementor-element.elementor-element-4b98173 .elementor-icon-wrapper svg{width:auto;}.elementor-5644 .elementor-element.elementor-element-4bec7af{--display:flex;--min-height:917px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:70px 70px;--row-gap:70px;--column-gap:70px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-4bec7af:not(.elementor-motion-effects-element-type-background), .elementor-5644 .elementor-element.elementor-element-4bec7af > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#080808;background-image:url("https://mercadophone.app.br/wp-content/uploads/2026/05/BG-ESCURO-scaled.webp");background-position:top center;background-repeat:no-repeat;background-size:contain;}.elementor-5644 .elementor-element.elementor-element-bd82163{--display:flex;}.elementor-5644 .elementor-element.elementor-element-9c43045{--display:flex;}.elementor-5644 .elementor-element.elementor-element-0941308{width:auto;max-width:auto;background-color:#90FF7B1A;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:8px 15px 8px 15px;transition:background 0.7s;border-style:solid;border-width:1px 1px 1px 1px;border-color:#F4F6FF1A;border-radius:100px 100px 100px 100px;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;color:#90FF7B;}.elementor-5644 .elementor-element.elementor-element-0941308:hover{background-color:#90FF7B4F;}.elementor-5644 .elementor-element.elementor-element-0941308.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-5050dff{width:var( --container-widget-width, 819px );max-width:819px;--container-widget-width:819px;--container-widget-flex-grow:0;text-align:center;}.elementor-5644 .elementor-element.elementor-element-5050dff.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-5050dff .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-7dfe2f8{width:var( --container-widget-width, 430px );max-width:430px;--container-widget-width:430px;--container-widget-flex-grow:0;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#F4F6FF96;}.elementor-5644 .elementor-element.elementor-element-7dfe2f8.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-38d25a0{--display:flex;--gap:40px 40px;--row-gap:40px;--column-gap:40px;}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5644 .elementor-element.elementor-element-46fbe5b{--display:flex;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-5644 .elementor-element.elementor-element-3bd2a01{--display:flex;--justify-content:flex-end;}.elementor-5644 .elementor-element.elementor-element-35268aa{--display:flex;--min-height:580px;--justify-content:space-between;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-0810291{--display:flex;}.elementor-5644 .elementor-element.elementor-element-ab6f87a{width:var( --container-widget-width, 430px );max-width:430px;--container-widget-width:430px;--container-widget-flex-grow:0;text-align:start;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#FFFFFFFA;}.elementor-5644 .elementor-element.elementor-element-ab6f87a.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-1fba75f{width:var( --container-widget-width, 819px );max-width:819px;--container-widget-width:819px;--container-widget-flex-grow:0;text-align:start;}.elementor-5644 .elementor-element.elementor-element-1fba75f.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-1fba75f .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#FFFFFF;}.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-5644 .elementor-element.elementor-element-5b8c247 .elementor-button{background-color:#1A1A1A00;font-family:"Plus Jakarta Sans", Sans-serif;font-size:14px;font-weight:500;transition-duration:0.5s;border-radius:45px 45px 45px 45px;}.elementor-5644 .elementor-element.elementor-element-5b8c247 .elementor-button:hover, .elementor-5644 .elementor-element.elementor-element-5b8c247 .elementor-button:focus{background-color:#5A77FF00;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-5b8c247 .elementor-button:hover svg, .elementor-5644 .elementor-element.elementor-element-5b8c247 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-3d4a012{--display:flex;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-5644 .elementor-element.elementor-element-227791e{--divider-border-style:solid;--divider-color:#FFFFFF17;--divider-border-width:1px;}.elementor-5644 .elementor-element.elementor-element-227791e .elementor-divider-separator{width:100%;}.elementor-5644 .elementor-element.elementor-element-227791e .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-5644 .elementor-element.elementor-element-10bcbff{--display:flex;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-5644 .elementor-element.elementor-element-d96aec9 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-d96aec9 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-d96aec9 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-d96aec9 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-5644 .elementor-element.elementor-element-d96aec9 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-5644 .elementor-element.elementor-element-d96aec9 .elementor-icon-list-icon i{color:#6EC1E400;transition:color 0.3s;}.elementor-5644 .elementor-element.elementor-element-d96aec9 .elementor-icon-list-icon svg{fill:#6EC1E400;transition:fill 0.3s;}.elementor-5644 .elementor-element.elementor-element-d96aec9 .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#02010100;}.elementor-5644 .elementor-element.elementor-element-d96aec9 .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#02010100;}.elementor-5644 .elementor-element.elementor-element-d96aec9{--e-icon-list-icon-size:20px;--icon-vertical-offset:0px;}.elementor-5644 .elementor-element.elementor-element-d96aec9 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-5644 .elementor-element.elementor-element-d96aec9 .elementor-icon-list-item > a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:500;}.elementor-5644 .elementor-element.elementor-element-d96aec9 .elementor-icon-list-text{color:#FAFAFA;transition:color 0.3s;}.elementor-5644 .elementor-element.elementor-element-c49b101{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:3px;--padding-left:0.3px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-c49b101:not(.elementor-motion-effects-element-type-background), .elementor-5644 .elementor-element.elementor-element-c49b101 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(125deg, #90FF7B 50%, #5A77FF 100%);}.elementor-5644 .elementor-element.elementor-element-bcd67a0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:14px;font-weight:600;color:#000000;}.elementor-5644 .elementor-element.elementor-element-f01ca98{--display:flex;--min-height:580px;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-3390b3b{--display:flex;}.elementor-5644 .elementor-element.elementor-element-9cb103c{width:var( --container-widget-width, 430px );max-width:430px;--container-widget-width:430px;--container-widget-flex-grow:0;text-align:start;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#FFFFFFFA;}.elementor-5644 .elementor-element.elementor-element-9cb103c.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-87000f0{width:var( --container-widget-width, 819px );max-width:819px;--container-widget-width:819px;--container-widget-flex-grow:0;text-align:start;}.elementor-5644 .elementor-element.elementor-element-87000f0.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-87000f0 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-15549e8 .elementor-button{background-color:#1A1A1A00;font-family:"Plus Jakarta Sans", Sans-serif;font-size:14px;font-weight:500;transition-duration:0.5s;border-radius:45px 45px 45px 45px;}.elementor-5644 .elementor-element.elementor-element-15549e8 .elementor-button:hover, .elementor-5644 .elementor-element.elementor-element-15549e8 .elementor-button:focus{background-color:#5A77FF00;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-15549e8 .elementor-button:hover svg, .elementor-5644 .elementor-element.elementor-element-15549e8 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-0fdbc72{--display:flex;}.elementor-5644 .elementor-element.elementor-element-b5210d4{--divider-border-style:solid;--divider-color:#FFFFFF17;--divider-border-width:1px;}.elementor-5644 .elementor-element.elementor-element-b5210d4 .elementor-divider-separator{width:100%;}.elementor-5644 .elementor-element.elementor-element-b5210d4 .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-5644 .elementor-element.elementor-element-14be075{--display:flex;}.elementor-5644 .elementor-element.elementor-element-e5ae897 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-e5ae897 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-e5ae897 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-e5ae897 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-5644 .elementor-element.elementor-element-e5ae897 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-5644 .elementor-element.elementor-element-e5ae897 .elementor-icon-list-icon i{color:#6EC1E400;transition:color 0.3s;}.elementor-5644 .elementor-element.elementor-element-e5ae897 .elementor-icon-list-icon svg{fill:#6EC1E400;transition:fill 0.3s;}.elementor-5644 .elementor-element.elementor-element-e5ae897 .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#02010100;}.elementor-5644 .elementor-element.elementor-element-e5ae897 .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#02010100;}.elementor-5644 .elementor-element.elementor-element-e5ae897{--e-icon-list-icon-size:20px;--icon-vertical-offset:0px;}.elementor-5644 .elementor-element.elementor-element-e5ae897 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-5644 .elementor-element.elementor-element-e5ae897 .elementor-icon-list-item > a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:500;}.elementor-5644 .elementor-element.elementor-element-e5ae897 .elementor-icon-list-text{color:#FAFAFA;transition:color 0.3s;}.elementor-5644 .elementor-element.elementor-element-3f4261e{--display:flex;--justify-content:flex-end;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-5644 .elementor-element.elementor-element-1a41124{--display:flex;--min-height:580px;--justify-content:space-between;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-ce00a77{--display:flex;}.elementor-5644 .elementor-element.elementor-element-ab3be87{width:var( --container-widget-width, 430px );max-width:430px;--container-widget-width:430px;--container-widget-flex-grow:0;text-align:start;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#FFFFFFFA;}.elementor-5644 .elementor-element.elementor-element-ab3be87.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-a939a33{width:var( --container-widget-width, 819px );max-width:819px;--container-widget-width:819px;--container-widget-flex-grow:0;text-align:start;}.elementor-5644 .elementor-element.elementor-element-a939a33.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-a939a33 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-333da6a .elementor-button{background-color:#1A1A1A00;font-family:"Plus Jakarta Sans", Sans-serif;font-size:14px;font-weight:500;transition-duration:0.5s;border-radius:45px 45px 45px 45px;}.elementor-5644 .elementor-element.elementor-element-333da6a .elementor-button:hover, .elementor-5644 .elementor-element.elementor-element-333da6a .elementor-button:focus{background-color:#5A77FF00;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-333da6a .elementor-button:hover svg, .elementor-5644 .elementor-element.elementor-element-333da6a .elementor-button:focus svg{fill:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-eca8790{--display:flex;}.elementor-5644 .elementor-element.elementor-element-6432ebf{--divider-border-style:solid;--divider-color:#FFFFFF17;--divider-border-width:1px;}.elementor-5644 .elementor-element.elementor-element-6432ebf .elementor-divider-separator{width:100%;}.elementor-5644 .elementor-element.elementor-element-6432ebf .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-5644 .elementor-element.elementor-element-e02b01a{--display:flex;}.elementor-5644 .elementor-element.elementor-element-8094075 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-8094075 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-8094075 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-8094075 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-5644 .elementor-element.elementor-element-8094075 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-5644 .elementor-element.elementor-element-8094075 .elementor-icon-list-icon i{color:#6EC1E400;transition:color 0.3s;}.elementor-5644 .elementor-element.elementor-element-8094075 .elementor-icon-list-icon svg{fill:#6EC1E400;transition:fill 0.3s;}.elementor-5644 .elementor-element.elementor-element-8094075 .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#02010100;}.elementor-5644 .elementor-element.elementor-element-8094075 .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#02010100;}.elementor-5644 .elementor-element.elementor-element-8094075{--e-icon-list-icon-size:20px;--icon-vertical-offset:0px;}.elementor-5644 .elementor-element.elementor-element-8094075 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-5644 .elementor-element.elementor-element-8094075 .elementor-icon-list-item > a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:500;}.elementor-5644 .elementor-element.elementor-element-8094075 .elementor-icon-list-text{color:#FAFAFA;transition:color 0.3s;}.elementor-5644 .elementor-element.elementor-element-5549339{--e-n-carousel-swiper-slides-to-display:3;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;}.elementor-5644 .elementor-element.elementor-element-cd692a5{--display:flex;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-5644 .elementor-element.elementor-element-02d842f{--display:flex;--justify-content:flex-end;}.elementor-5644 .elementor-element.elementor-element-a66b05d{--display:flex;--min-height:580px;--justify-content:space-between;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-28a77c3{--display:flex;}.elementor-5644 .elementor-element.elementor-element-d308317{width:var( --container-widget-width, 430px );max-width:430px;--container-widget-width:430px;--container-widget-flex-grow:0;text-align:start;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#FFFFFFFA;}.elementor-5644 .elementor-element.elementor-element-d308317.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-ce89c35{width:var( --container-widget-width, 819px );max-width:819px;--container-widget-width:819px;--container-widget-flex-grow:0;text-align:start;}.elementor-5644 .elementor-element.elementor-element-ce89c35.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-ce89c35 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-c7872e3 .elementor-button{background-color:#1A1A1A00;font-family:"Plus Jakarta Sans", Sans-serif;font-size:14px;font-weight:500;transition-duration:0.5s;border-radius:45px 45px 45px 45px;}.elementor-5644 .elementor-element.elementor-element-c7872e3 .elementor-button:hover, .elementor-5644 .elementor-element.elementor-element-c7872e3 .elementor-button:focus{background-color:#5A77FF00;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-c7872e3 .elementor-button:hover svg, .elementor-5644 .elementor-element.elementor-element-c7872e3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-cb100dc{--display:flex;}.elementor-5644 .elementor-element.elementor-element-613d135{--divider-border-style:solid;--divider-color:#FFFFFF17;--divider-border-width:1px;}.elementor-5644 .elementor-element.elementor-element-613d135 .elementor-divider-separator{width:100%;}.elementor-5644 .elementor-element.elementor-element-613d135 .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-5644 .elementor-element.elementor-element-74646ec{--display:flex;}.elementor-5644 .elementor-element.elementor-element-7bb8b33 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-7bb8b33 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-7bb8b33 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-7bb8b33 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-5644 .elementor-element.elementor-element-7bb8b33 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-5644 .elementor-element.elementor-element-7bb8b33 .elementor-icon-list-icon i{color:#6EC1E400;transition:color 0.3s;}.elementor-5644 .elementor-element.elementor-element-7bb8b33 .elementor-icon-list-icon svg{fill:#6EC1E400;transition:fill 0.3s;}.elementor-5644 .elementor-element.elementor-element-7bb8b33 .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#02010100;}.elementor-5644 .elementor-element.elementor-element-7bb8b33 .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#02010100;}.elementor-5644 .elementor-element.elementor-element-7bb8b33{--e-icon-list-icon-size:20px;--icon-vertical-offset:0px;}.elementor-5644 .elementor-element.elementor-element-7bb8b33 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-5644 .elementor-element.elementor-element-7bb8b33 .elementor-icon-list-item > a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:500;}.elementor-5644 .elementor-element.elementor-element-7bb8b33 .elementor-icon-list-text{color:#FAFAFA;transition:color 0.3s;}.elementor-5644 .elementor-element.elementor-element-9f8fc18{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:3px;--padding-left:0.3px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-9f8fc18:not(.elementor-motion-effects-element-type-background), .elementor-5644 .elementor-element.elementor-element-9f8fc18 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(125deg, #90FF7B 50%, #5A77FF 100%);}.elementor-5644 .elementor-element.elementor-element-871c4ba{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:14px;font-weight:600;color:#000000;}.elementor-5644 .elementor-element.elementor-element-284e674{--display:flex;--min-height:580px;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-bbc81ac{--display:flex;}.elementor-5644 .elementor-element.elementor-element-582ccfc{width:var( --container-widget-width, 430px );max-width:430px;--container-widget-width:430px;--container-widget-flex-grow:0;text-align:start;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#FFFFFFFA;}.elementor-5644 .elementor-element.elementor-element-582ccfc.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-e53eb8e{width:var( --container-widget-width, 819px );max-width:819px;--container-widget-width:819px;--container-widget-flex-grow:0;text-align:start;}.elementor-5644 .elementor-element.elementor-element-e53eb8e.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-e53eb8e .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-b01d4e6 .elementor-button{background-color:#1A1A1A00;font-family:"Plus Jakarta Sans", Sans-serif;font-size:14px;font-weight:500;transition-duration:0.5s;border-radius:45px 45px 45px 45px;}.elementor-5644 .elementor-element.elementor-element-b01d4e6 .elementor-button:hover, .elementor-5644 .elementor-element.elementor-element-b01d4e6 .elementor-button:focus{background-color:#5A77FF00;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-b01d4e6 .elementor-button:hover svg, .elementor-5644 .elementor-element.elementor-element-b01d4e6 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-395c482{--display:flex;}.elementor-5644 .elementor-element.elementor-element-c1044f0{--divider-border-style:solid;--divider-color:#FFFFFF17;--divider-border-width:1px;}.elementor-5644 .elementor-element.elementor-element-c1044f0 .elementor-divider-separator{width:100%;}.elementor-5644 .elementor-element.elementor-element-c1044f0 .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-5644 .elementor-element.elementor-element-f2c090a{--display:flex;}.elementor-5644 .elementor-element.elementor-element-c73930e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-c73930e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-c73930e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-c73930e .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-5644 .elementor-element.elementor-element-c73930e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-5644 .elementor-element.elementor-element-c73930e .elementor-icon-list-icon i{color:#6EC1E400;transition:color 0.3s;}.elementor-5644 .elementor-element.elementor-element-c73930e .elementor-icon-list-icon svg{fill:#6EC1E400;transition:fill 0.3s;}.elementor-5644 .elementor-element.elementor-element-c73930e .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#02010100;}.elementor-5644 .elementor-element.elementor-element-c73930e .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#02010100;}.elementor-5644 .elementor-element.elementor-element-c73930e{--e-icon-list-icon-size:20px;--icon-vertical-offset:0px;}.elementor-5644 .elementor-element.elementor-element-c73930e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-5644 .elementor-element.elementor-element-c73930e .elementor-icon-list-item > a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:500;}.elementor-5644 .elementor-element.elementor-element-c73930e .elementor-icon-list-text{color:#FAFAFA;transition:color 0.3s;}.elementor-5644 .elementor-element.elementor-element-724c67d{--display:flex;--justify-content:flex-end;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-5644 .elementor-element.elementor-element-32e3f2a{--display:flex;--min-height:580px;--justify-content:space-between;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-b63c9dc{--display:flex;}.elementor-5644 .elementor-element.elementor-element-1577598{width:var( --container-widget-width, 430px );max-width:430px;--container-widget-width:430px;--container-widget-flex-grow:0;text-align:start;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#FFFFFFFA;}.elementor-5644 .elementor-element.elementor-element-1577598.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-3f2e06b{width:var( --container-widget-width, 819px );max-width:819px;--container-widget-width:819px;--container-widget-flex-grow:0;text-align:start;}.elementor-5644 .elementor-element.elementor-element-3f2e06b.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-3f2e06b .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-e5ca402 .elementor-button{background-color:#1A1A1A00;font-family:"Plus Jakarta Sans", Sans-serif;font-size:14px;font-weight:500;transition-duration:0.5s;border-radius:45px 45px 45px 45px;}.elementor-5644 .elementor-element.elementor-element-e5ca402 .elementor-button:hover, .elementor-5644 .elementor-element.elementor-element-e5ca402 .elementor-button:focus{background-color:#5A77FF00;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-e5ca402 .elementor-button:hover svg, .elementor-5644 .elementor-element.elementor-element-e5ca402 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-7f14020{--display:flex;}.elementor-5644 .elementor-element.elementor-element-844053a{--divider-border-style:solid;--divider-color:#FFFFFF17;--divider-border-width:1px;}.elementor-5644 .elementor-element.elementor-element-844053a .elementor-divider-separator{width:100%;}.elementor-5644 .elementor-element.elementor-element-844053a .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-5644 .elementor-element.elementor-element-06126d4{--display:flex;}.elementor-5644 .elementor-element.elementor-element-b48de6b .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-b48de6b .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-b48de6b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-5644 .elementor-element.elementor-element-b48de6b .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-5644 .elementor-element.elementor-element-b48de6b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-5644 .elementor-element.elementor-element-b48de6b .elementor-icon-list-icon i{color:#6EC1E400;transition:color 0.3s;}.elementor-5644 .elementor-element.elementor-element-b48de6b .elementor-icon-list-icon svg{fill:#6EC1E400;transition:fill 0.3s;}.elementor-5644 .elementor-element.elementor-element-b48de6b .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#02010100;}.elementor-5644 .elementor-element.elementor-element-b48de6b .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#02010100;}.elementor-5644 .elementor-element.elementor-element-b48de6b{--e-icon-list-icon-size:20px;--icon-vertical-offset:0px;}.elementor-5644 .elementor-element.elementor-element-b48de6b .elementor-icon-list-item > .elementor-icon-list-text, .elementor-5644 .elementor-element.elementor-element-b48de6b .elementor-icon-list-item > a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:15px;font-weight:500;}.elementor-5644 .elementor-element.elementor-element-b48de6b .elementor-icon-list-text{color:#FAFAFA;transition:color 0.3s;}.elementor-5644 .elementor-element.elementor-element-a6e7695{--e-n-carousel-swiper-slides-to-display:3;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;}.elementor-5644 .elementor-element.elementor-element-836262e{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;padding:0px 35px 0px 35px;--n-tabs-title-gap:0px;--n-tabs-gap:25px;}.elementor-5644 .elementor-element.elementor-element-836262e.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"Plus Jakarta Sans", Sans-serif;font-weight:500;}.elementor-5644 .elementor-element.elementor-element-a179b7e{--display:flex;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-8c84940{width:auto;max-width:auto;background-color:#90FF7B1A;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:8px 15px 8px 15px;transition:background 0.7s;border-style:solid;border-width:1px 1px 1px 1px;border-color:#F4F6FF1A;border-radius:100px 100px 100px 100px;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;color:#90FF7B;}.elementor-5644 .elementor-element.elementor-element-8c84940:hover{background-color:#90FF7B4F;}.elementor-5644 .elementor-element.elementor-element-8c84940.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-8e1fdcc{width:var( --container-widget-width, 560px );max-width:560px;--container-widget-width:560px;--container-widget-flex-grow:0;text-align:center;}.elementor-5644 .elementor-element.elementor-element-8e1fdcc.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-8e1fdcc .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:500;line-height:1.3em;color:#FFFFFF;}.elementor-5644 .elementor-element.elementor-element-5d9bf6b{width:var( --container-widget-width, 350px );max-width:350px;--container-widget-width:350px;--container-widget-flex-grow:0;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#F4F6FF;}.elementor-5644 .elementor-element.elementor-element-5d9bf6b.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-b5e242e{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-537428c{--e-image-carousel-slides-to-show:4;}.elementor-5644 .elementor-element.elementor-element-537428c .elementor-swiper-button.elementor-swiper-button-prev, .elementor-5644 .elementor-element.elementor-element-537428c .elementor-swiper-button.elementor-swiper-button-next{color:#02010100;}.elementor-5644 .elementor-element.elementor-element-537428c .elementor-swiper-button.elementor-swiper-button-prev svg, .elementor-5644 .elementor-element.elementor-element-537428c .elementor-swiper-button.elementor-swiper-button-next svg{fill:#02010100;}.elementor-5644 .elementor-element.elementor-element-dced168{--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;--padding-top:70px;--padding-bottom:70px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-bb89bd6{width:auto;max-width:auto;background-color:#5A77FF1A;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:8px 25px 8px 25px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0101301A;border-radius:100px 100px 100px 100px;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;color:#5A77FF;}.elementor-5644 .elementor-element.elementor-element-bb89bd6.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-7f4e572{width:var( --container-widget-width, 846px );max-width:846px;--container-widget-width:846px;--container-widget-flex-grow:0;text-align:center;}.elementor-5644 .elementor-element.elementor-element-7f4e572.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-7f4e572 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:40px;font-weight:600;line-height:1.3em;color:#010130;}.elementor-5644 .elementor-element.elementor-element-0b0ab19{width:var( --container-widget-width, 479px );max-width:479px;--container-widget-width:479px;--container-widget-flex-grow:0;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#080808BA;}.elementor-5644 .elementor-element.elementor-element-0b0ab19.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-0b2f0ab{--display:flex;}.elementor-5644 .elementor-element.elementor-element-cf405cc{width:100%;max-width:100%;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;line-height:1.8em;letter-spacing:0px;color:#080808AD;}.elementor-5644 .elementor-element.elementor-element-cf405cc.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-0a83224{--display:flex;}.elementor-5644 .elementor-element.elementor-element-8e2103e{width:100%;max-width:100%;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;line-height:1.8em;letter-spacing:0px;color:#080808AD;}.elementor-5644 .elementor-element.elementor-element-8e2103e.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-5f4981d{--display:flex;}.elementor-5644 .elementor-element.elementor-element-15854de{width:100%;max-width:100%;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;line-height:1.8em;letter-spacing:0px;color:#080808AD;}.elementor-5644 .elementor-element.elementor-element-15854de.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-0011afa{--display:flex;}.elementor-5644 .elementor-element.elementor-element-795eb02{width:100%;max-width:100%;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;line-height:1.8em;letter-spacing:0px;color:#080808AD;}.elementor-5644 .elementor-element.elementor-element-795eb02.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-6a1f047{--display:flex;}.elementor-5644 .elementor-element.elementor-element-c9efa42{width:100%;max-width:100%;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;line-height:1.8em;letter-spacing:0px;color:#080808AD;}.elementor-5644 .elementor-element.elementor-element-c9efa42.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-9aa8ec1{--n-accordion-title-font-size:18px;width:var( --container-widget-width, 800px );max-width:800px;margin:30px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:800px;--container-widget-flex-grow:0;--n-accordion-title-justify-content:space-between;--n-accordion-title-flex-grow:1;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:40px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-border-radius:0px 0px 0px 0px;--n-accordion-title-normal-color:#010130;--n-accordion-title-hover-color:#010130;--n-accordion-title-active-color:#010130;--n-accordion-icon-size:24px;--n-accordion-icon-normal-color:#02010100;--n-accordion-icon-hover-color:#02010100;--n-accordion-icon-active-color:#02010100;}.elementor-5644 .elementor-element.elementor-element-9aa8ec1.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-9aa8ec1 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{border-style:solid;border-width:0px 0px 1px 0px;border-color:#02010112;}.elementor-5644 .elementor-element.elementor-element-9aa8ec1 > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title{border-style:solid;border-width:0px 0px 0px 0px;}.elementor-5644 .elementor-element.elementor-element-9aa8ec1 {--n-accordion-padding:0px 0px 20px 0px;}:where( .elementor-5644 .elementor-element.elementor-element-9aa8ec1 > .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:"Plus Jakarta Sans", Sans-serif;font-weight:500;}:where( .elementor-5644 .elementor-element.elementor-element-9aa8ec1 > .e-n-accordion > .e-n-accordion-item ) > .e-con{border-style:solid;border-width:0px 0px 1px 0px;border-color:#02010112;--border-radius:0px 0px 0px 0px;--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;}.elementor-5644 .elementor-element.elementor-element-341f466{--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;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-341f466:not(.elementor-motion-effects-element-type-background), .elementor-5644 .elementor-element.elementor-element-341f466 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EEF0FF;}.elementor-5644 .elementor-element.elementor-element-d5a79cf{width:var( --container-widget-width, 846px );max-width:846px;--container-widget-width:846px;--container-widget-flex-grow:0;text-align:center;}.elementor-5644 .elementor-element.elementor-element-d5a79cf.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-d5a79cf .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:500;line-height:1.3em;color:#010130;}.elementor-5644 .elementor-element.elementor-element-f7e03f8{width:auto;max-width:auto;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:18px;font-weight:400;line-height:1.4em;letter-spacing:0px;color:#080808BA;}.elementor-5644 .elementor-element.elementor-element-f7e03f8.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-65da091.elementor-element{--align-self:center;}body.elementor-page-5644:not(.elementor-motion-effects-element-type-background), body.elementor-page-5644 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F6FF;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-5644 .elementor-element.elementor-element-5549339{--e-n-carousel-swiper-slides-to-display:2;}.elementor-5644 .elementor-element.elementor-element-a6e7695{--e-n-carousel-swiper-slides-to-display:2;}}@media(min-width:768px){.elementor-5644 .elementor-element.elementor-element-dcca129{--content-width:1920px;}.elementor-5644 .elementor-element.elementor-element-c899dbe{--content-width:1346px;}.elementor-5644 .elementor-element.elementor-element-58ecda5{--width:500px;}.elementor-5644 .elementor-element.elementor-element-df795ac{--width:700px;}.elementor-5644 .elementor-element.elementor-element-7986dbf{--width:924px;}.elementor-5644 .elementor-element.elementor-element-0033b9c{--width:926px;}.elementor-5644 .elementor-element.elementor-element-f16bca1{--width:559px;}.elementor-5644 .elementor-element.elementor-element-03afe16{--width:358px;}.elementor-5644 .elementor-element.elementor-element-8c6f997{--width:190px;}.elementor-5644 .elementor-element.elementor-element-bf056ff{--width:358px;}.elementor-5644 .elementor-element.elementor-element-c518261{--width:926px;}.elementor-5644 .elementor-element.elementor-element-c4b1085{--content-width:926px;}.elementor-5644 .elementor-element.elementor-element-a736c79{--width:308px;}.elementor-5644 .elementor-element.elementor-element-6054d70{--width:566px;}.elementor-5644 .elementor-element.elementor-element-35268aa{--width:364px;}.elementor-5644 .elementor-element.elementor-element-f01ca98{--width:374px;}.elementor-5644 .elementor-element.elementor-element-1a41124{--width:364px;}.elementor-5644 .elementor-element.elementor-element-a66b05d{--width:364px;}.elementor-5644 .elementor-element.elementor-element-284e674{--width:374px;}.elementor-5644 .elementor-element.elementor-element-32e3f2a{--width:364px;}}@media(max-width:1366px) and (min-width:768px){.elementor-5644 .elementor-element.elementor-element-c899dbe{--content-width:1281px;}}@media(min-width:2400px){.elementor-5644 .elementor-element.elementor-element-dcca129{--content-width:1920px;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-46deddd{--content-width:100%;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-5644 .elementor-element.elementor-element-46deddd:not(.elementor-motion-effects-element-type-background), .elementor-5644 .elementor-element.elementor-element-46deddd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:contain;}.elementor-5644 .elementor-element.elementor-element-46deddd.e-con{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-d7ba863{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-5644 .elementor-element.elementor-element-d7ba863.e-con{--align-self:center;}}@media(max-width:1366px){.elementor-5644 .elementor-element.elementor-element-dcca129{--min-height:39px;}.elementor-5644 .elementor-element.elementor-element-46deddd{--min-height:595px;}.elementor-5644 .elementor-element.elementor-element-d7ba863{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-5644 .elementor-element.elementor-element-a0c1d32 .elementor-heading-title{font-size:42px;}.elementor-5644 .elementor-element.elementor-element-6d872c9.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-d619e1e{--container-widget-width:280px;--container-widget-flex-grow:0;width:var( --container-widget-width, 280px );max-width:280px;}.elementor-5644 .elementor-element.elementor-element-d619e1e .elementor-image-box-wrapper .elementor-image-box-img{width:45px;}.elementor-5644 .elementor-element.elementor-element-d619e1e .elementor-image-box-title{font-size:14px;}.elementor-5644 .elementor-element.elementor-element-a0ad909{--container-widget-width:280px;--container-widget-flex-grow:0;width:var( --container-widget-width, 280px );max-width:280px;}.elementor-5644 .elementor-element.elementor-element-a0ad909 .elementor-image-box-wrapper .elementor-image-box-img{width:45px;}.elementor-5644 .elementor-element.elementor-element-a0ad909 .elementor-image-box-title{font-size:14px;}.elementor-5644 .elementor-element.elementor-element-6222fd8{--container-widget-width:280px;--container-widget-flex-grow:0;width:var( --container-widget-width, 280px );max-width:280px;}.elementor-5644 .elementor-element.elementor-element-6222fd8 .elementor-image-box-wrapper .elementor-image-box-img{width:45px;}.elementor-5644 .elementor-element.elementor-element-6222fd8 .elementor-image-box-title{font-size:14px;}}@media(max-width:767px){.elementor-5644 .elementor-element.elementor-element-dcca129{--min-height:24px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-46deddd:not(.elementor-motion-effects-element-type-background), .elementor-5644 .elementor-element.elementor-element-46deddd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:cover;}.elementor-5644 .elementor-element.elementor-element-46deddd{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-fd5c8a7 .elementor-image-box-img{margin-bottom:15px;}.elementor-5644 .elementor-element.elementor-element-fd5c8a7 .elementor-image-box-wrapper .elementor-image-box-img{width:71px;}.elementor-5644 .elementor-element.elementor-element-fd5c8a7 .elementor-image-box-title{font-size:14px;}.elementor-5644 .elementor-element.elementor-element-a0c1d32{--container-widget-width:350px;--container-widget-flex-grow:0;width:var( --container-widget-width, 350px );max-width:350px;}.elementor-5644 .elementor-element.elementor-element-a0c1d32 .elementor-heading-title{font-size:30px;}.elementor-5644 .elementor-element.elementor-element-77c7de7{width:var( --container-widget-width, 317px );max-width:317px;--container-widget-width:317px;--container-widget-flex-grow:0;font-size:16px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-c899dbe{--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5644 .elementor-element.elementor-element-d619e1e{width:var( --container-widget-width, 360px );max-width:360px;--container-widget-width:360px;--container-widget-flex-grow:0;}.elementor-5644 .elementor-element.elementor-element-d619e1e .elementor-image-box-wrapper{text-align:center;}.elementor-5644 .elementor-element.elementor-element-d619e1e .elementor-image-box-img{margin-bottom:20px;}.elementor-5644 .elementor-element.elementor-element-d619e1e.elementor-position-right .elementor-image-box-img{margin-left:20px;}.elementor-5644 .elementor-element.elementor-element-d619e1e.elementor-position-left .elementor-image-box-img{margin-right:20px;}.elementor-5644 .elementor-element.elementor-element-d619e1e.elementor-position-top .elementor-image-box-img{margin-bottom:20px;}.elementor-5644 .elementor-element.elementor-element-d619e1e .elementor-image-box-title{margin-bottom:11px;font-size:14px;}.elementor-5644 .elementor-element.elementor-element-d619e1e .elementor-image-box-wrapper .elementor-image-box-img{width:44px;}.elementor-5644 .elementor-element.elementor-element-a0ad909{width:var( --container-widget-width, 360px );max-width:360px;--container-widget-width:360px;--container-widget-flex-grow:0;}.elementor-5644 .elementor-element.elementor-element-a0ad909 .elementor-image-box-wrapper{text-align:center;}.elementor-5644 .elementor-element.elementor-element-a0ad909 .elementor-image-box-img{margin-bottom:20px;}.elementor-5644 .elementor-element.elementor-element-a0ad909.elementor-position-right .elementor-image-box-img{margin-left:20px;}.elementor-5644 .elementor-element.elementor-element-a0ad909.elementor-position-left .elementor-image-box-img{margin-right:20px;}.elementor-5644 .elementor-element.elementor-element-a0ad909.elementor-position-top .elementor-image-box-img{margin-bottom:20px;}.elementor-5644 .elementor-element.elementor-element-a0ad909 .elementor-image-box-title{margin-bottom:11px;font-size:14px;}.elementor-5644 .elementor-element.elementor-element-a0ad909 .elementor-image-box-wrapper .elementor-image-box-img{width:44px;}.elementor-5644 .elementor-element.elementor-element-6222fd8{width:var( --container-widget-width, 360px );max-width:360px;--container-widget-width:360px;--container-widget-flex-grow:0;}.elementor-5644 .elementor-element.elementor-element-6222fd8 .elementor-image-box-wrapper{text-align:center;}.elementor-5644 .elementor-element.elementor-element-6222fd8 .elementor-image-box-img{margin-bottom:20px;}.elementor-5644 .elementor-element.elementor-element-6222fd8.elementor-position-right .elementor-image-box-img{margin-left:20px;}.elementor-5644 .elementor-element.elementor-element-6222fd8.elementor-position-left .elementor-image-box-img{margin-right:20px;}.elementor-5644 .elementor-element.elementor-element-6222fd8.elementor-position-top .elementor-image-box-img{margin-bottom:20px;}.elementor-5644 .elementor-element.elementor-element-6222fd8 .elementor-image-box-title{margin-bottom:11px;font-size:14px;}.elementor-5644 .elementor-element.elementor-element-6222fd8 .elementor-image-box-wrapper .elementor-image-box-img{width:44px;}.elementor-5644 .elementor-element.elementor-element-cf37d41{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-77bc813 .elementor-heading-title{font-size:24px;}.elementor-5644 .elementor-element.elementor-element-52dc819{--gap:40px 40px;--row-gap:40px;--column-gap:40px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-74efcfc .elementor-heading-title{font-size:24px;}.elementor-5644 .elementor-element.elementor-element-946aeca{width:auto;max-width:auto;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-df795ac{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-56385df img{width:1000px;}.elementor-5644 .elementor-element.elementor-element-2bb29c8{margin:-160px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5644 .elementor-element.elementor-element-2bb29c8 img{width:83px;}.elementor-5644 .elementor-element.elementor-element-5f95fab{--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-5644 .elementor-element.elementor-element-cde27e7{font-size:12px;}.elementor-5644 .elementor-element.elementor-element-ea180b6 .elementor-heading-title{font-size:24px;}.elementor-5644 .elementor-element.elementor-element-ea1a18a{width:auto;max-width:auto;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-a2a65a0{--gap:8px 0px;--row-gap:8px;--column-gap:0px;}.elementor-5644 .elementor-element.elementor-element-7986dbf:not(.elementor-motion-effects-element-type-background), .elementor-5644 .elementor-element.elementor-element-7986dbf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mercadophone.app.br/wp-content/uploads/2026/05/frame2147224589.webp");}.elementor-5644 .elementor-element.elementor-element-7986dbf{--min-height:650px;}.elementor-5644 .elementor-element.elementor-element-668d5aa::before, .elementor-5644 .elementor-element.elementor-element-668d5aa > .elementor-background-video-container::before, .elementor-5644 .elementor-element.elementor-element-668d5aa > .e-con-inner > .elementor-background-video-container::before, .elementor-5644 .elementor-element.elementor-element-668d5aa > .elementor-background-slideshow::before, .elementor-5644 .elementor-element.elementor-element-668d5aa > .e-con-inner > .elementor-background-slideshow::before, .elementor-5644 .elementor-element.elementor-element-668d5aa > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://mercadophone.app.br/wp-content/uploads/2026/05/312313213.webp");background-position:center center;background-size:cover;}.elementor-5644 .elementor-element.elementor-element-668d5aa{--min-height:400px;--overlay-opacity:1;--border-radius:20px 20px 20px 20px;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-0e9a11a{margin:-6px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -16px;}body:not(.rtl) .elementor-5644 .elementor-element.elementor-element-4ff8ffc{left:243px;}body.rtl .elementor-5644 .elementor-element.elementor-element-4ff8ffc{right:243px;}.elementor-5644 .elementor-element.elementor-element-4ff8ffc img{width:96px;}body:not(.rtl) .elementor-5644 .elementor-element.elementor-element-66544e9{left:5px;}body.rtl .elementor-5644 .elementor-element.elementor-element-66544e9{right:5px;}.elementor-5644 .elementor-element.elementor-element-66544e9{top:227px;}.elementor-5644 .elementor-element.elementor-element-66544e9 img{width:133px;}.elementor-5644 .elementor-element.elementor-element-46f62ad{--padding-top:30px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-760ab28{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-75c1d40{--container-widget-width:285px;--container-widget-flex-grow:0;width:var( --container-widget-width, 285px );max-width:285px;text-align:center;}.elementor-5644 .elementor-element.elementor-element-75c1d40.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-75c1d40 .elementor-heading-title{font-size:24px;}.elementor-5644 .elementor-element.elementor-element-601167a{width:var( --container-widget-width, 343px );max-width:343px;--container-widget-width:343px;--container-widget-flex-grow:0;text-align:center;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-601167a.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-1a57844{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-c28e077 .elementor-icon-box-wrapper{align-items:center;}.elementor-5644 .elementor-element.elementor-element-c28e077 .elementor-icon-box-title{margin-block-end:4px;}.elementor-5644 .elementor-element.elementor-element-c28e077 .elementor-icon{font-size:28px;}.elementor-5644 .elementor-element.elementor-element-c28e077 .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-c28e077 .elementor-icon-box-title a{font-size:13px;}.elementor-5644 .elementor-element.elementor-element-8fb59ab .elementor-icon-box-wrapper{align-items:center;}.elementor-5644 .elementor-element.elementor-element-8fb59ab .elementor-icon-box-title{margin-block-end:4px;}.elementor-5644 .elementor-element.elementor-element-8fb59ab .elementor-icon{font-size:28px;}.elementor-5644 .elementor-element.elementor-element-8fb59ab .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-8fb59ab .elementor-icon-box-title a{font-size:13px;}.elementor-5644 .elementor-element.elementor-element-f16bca1{--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;}.elementor-5644 .elementor-element.elementor-element-fa7f64d .elementor-icon-box-wrapper{align-items:center;}.elementor-5644 .elementor-element.elementor-element-fa7f64d .elementor-icon-box-title{margin-block-end:4px;}.elementor-5644 .elementor-element.elementor-element-fa7f64d .elementor-icon{font-size:28px;}.elementor-5644 .elementor-element.elementor-element-fa7f64d .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-fa7f64d .elementor-icon-box-title a{font-size:13px;}.elementor-5644 .elementor-element.elementor-element-6bced81{padding:12px 20px 12px 30px;}.elementor-5644 .elementor-element.elementor-element-6bced81 .elementor-icon{font-size:28px;}.elementor-5644 .elementor-element.elementor-element-6bced81 .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-6bced81 .elementor-icon-box-title a{font-size:13px;}.elementor-5644 .elementor-element.elementor-element-8c6f997{--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5644 .elementor-element.elementor-element-ab829d8{--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-5644 .elementor-element.elementor-element-8815982 .elementor-icon-box-wrapper{align-items:center;}.elementor-5644 .elementor-element.elementor-element-8815982 .elementor-icon-box-title{margin-block-end:4px;}.elementor-5644 .elementor-element.elementor-element-8815982 .elementor-icon{font-size:28px;}.elementor-5644 .elementor-element.elementor-element-8815982 .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-8815982 .elementor-icon-box-title a{font-size:13px;}.elementor-5644 .elementor-element.elementor-element-6b93a66{padding:12px 20px 12px 30px;}.elementor-5644 .elementor-element.elementor-element-6b93a66 .elementor-icon{font-size:28px;}.elementor-5644 .elementor-element.elementor-element-6b93a66 .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-6b93a66 .elementor-icon-box-title a{font-size:13px;}.elementor-5644 .elementor-element.elementor-element-579b869 .elementor-icon-box-wrapper{align-items:center;}.elementor-5644 .elementor-element.elementor-element-579b869 .elementor-icon-box-title{margin-block-end:4px;}.elementor-5644 .elementor-element.elementor-element-579b869 .elementor-icon{font-size:28px;}.elementor-5644 .elementor-element.elementor-element-579b869 .elementor-icon-box-title, .elementor-5644 .elementor-element.elementor-element-579b869 .elementor-icon-box-title a{font-size:13px;}.elementor-5644 .elementor-element.elementor-element-bf056ff{--min-height:314px;--margin-top:2px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5644 .elementor-element.elementor-element-463ee08 .elementor-heading-title{font-size:42px;}.elementor-5644 .elementor-element.elementor-element-35ede8a{width:auto;max-width:auto;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-d1e9976{--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5644 .elementor-element.elementor-element-11d3710{--container-widget-width:323px;--container-widget-flex-grow:0;width:var( --container-widget-width, 323px );max-width:323px;text-align:center;}.elementor-5644 .elementor-element.elementor-element-11d3710.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-11d3710 .elementor-heading-title{font-size:24px;}.elementor-5644 .elementor-element.elementor-element-4a13b7f{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5644 .elementor-element.elementor-element-ca2ef13{width:var( --container-widget-width, 311px );max-width:311px;--container-widget-width:311px;--container-widget-flex-grow:0;text-align:center;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-ca2ef13.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-2be9767.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-c4b1085{--padding-top:50px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-4d24b21{font-size:12px;}.elementor-5644 .elementor-element.elementor-element-cc3e23c .elementor-heading-title{font-size:24px;}.elementor-5644 .elementor-element.elementor-element-b79e49b{width:auto;max-width:auto;text-align:start;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-b79e49b.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-c2bb564.elementor-element{--align-self:flex-start;}.elementor-5644 .elementor-element.elementor-element-6054d70{--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 0px;--row-gap:20px;--column-gap:0px;--padding-top:0px;--padding-bottom:60px;--padding-left:10px;--padding-right:10px;}.elementor-5644 .elementor-element.elementor-element-abea60b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-5644 .elementor-element.elementor-element-abea60b img{width:55%;}.elementor-5644 .elementor-element.elementor-element-0a87fab{margin:-211px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 23px;padding:0px 0px 0px 0px;text-align:end;}.elementor-5644 .elementor-element.elementor-element-0a87fab img{width:55%;}.elementor-5644 .elementor-element.elementor-element-cc4470a{--min-height:0px;}.elementor-5644 .elementor-element.elementor-element-4b98173{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -16px) 0px;}.elementor-5644 .elementor-element.elementor-element-4b98173 .elementor-icon{font-size:12px;}.elementor-5644 .elementor-element.elementor-element-4b98173 .elementor-icon svg{height:12px;}.elementor-5644 .elementor-element.elementor-element-4bec7af{--min-height:0px;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:70px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-bd82163{--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-5644 .elementor-element.elementor-element-0941308{font-size:12px;}.elementor-5644 .elementor-element.elementor-element-5050dff{--container-widget-width:306px;--container-widget-flex-grow:0;width:var( --container-widget-width, 306px );max-width:306px;}.elementor-5644 .elementor-element.elementor-element-5050dff .elementor-heading-title{font-size:24px;}.elementor-5644 .elementor-element.elementor-element-7dfe2f8{width:var( --container-widget-width, 301px );max-width:301px;--container-widget-width:301px;--container-widget-flex-grow:0;text-align:center;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-7dfe2f8.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-46fbe5b{--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-5644 .elementor-element.elementor-element-3bd2a01{--justify-content:flex-start;}.elementor-5644 .elementor-element.elementor-element-35268aa{--min-height:540px;--gap:25px 25px;--row-gap:25px;--column-gap:25px;}.elementor-5644 .elementor-element.elementor-element-0810291{--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-5644 .elementor-element.elementor-element-ab6f87a{width:var( --container-widget-width, 301px );max-width:301px;--container-widget-width:301px;--container-widget-flex-grow:0;text-align:start;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-ab6f87a.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-1fba75f{--container-widget-width:306px;--container-widget-flex-grow:0;width:var( --container-widget-width, 306px );max-width:306px;}.elementor-5644 .elementor-element.elementor-element-1fba75f .elementor-heading-title{font-size:30px;}.elementor-5644 .elementor-element.elementor-element-c49b101{--padding-top:20px;--padding-bottom:3px;--padding-left:3px;--padding-right:3px;}.elementor-5644 .elementor-element.elementor-element-f01ca98{--min-height:510px;--gap:25px 25px;--row-gap:25px;--column-gap:25px;}.elementor-5644 .elementor-element.elementor-element-3390b3b{--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-5644 .elementor-element.elementor-element-9cb103c{width:var( --container-widget-width, 301px );max-width:301px;--container-widget-width:301px;--container-widget-flex-grow:0;text-align:start;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-9cb103c.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-87000f0{--container-widget-width:306px;--container-widget-flex-grow:0;width:var( --container-widget-width, 306px );max-width:306px;}.elementor-5644 .elementor-element.elementor-element-87000f0 .elementor-heading-title{font-size:30px;}.elementor-5644 .elementor-element.elementor-element-3f4261e{--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5644 .elementor-element.elementor-element-1a41124{--min-height:540px;--gap:25px 25px;--row-gap:25px;--column-gap:25px;}.elementor-5644 .elementor-element.elementor-element-ce00a77{--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-5644 .elementor-element.elementor-element-ab3be87{width:var( --container-widget-width, 301px );max-width:301px;--container-widget-width:301px;--container-widget-flex-grow:0;text-align:start;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-ab3be87.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-a939a33{--container-widget-width:306px;--container-widget-flex-grow:0;width:var( --container-widget-width, 306px );max-width:306px;}.elementor-5644 .elementor-element.elementor-element-a939a33 .elementor-heading-title{font-size:30px;}.elementor-5644 .elementor-element.elementor-element-5549339{--e-n-carousel-swiper-slides-to-display:1;}.elementor-5644 .elementor-element.elementor-element-cd692a5{--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-5644 .elementor-element.elementor-element-02d842f{--justify-content:flex-start;}.elementor-5644 .elementor-element.elementor-element-a66b05d{--min-height:540px;--gap:25px 25px;--row-gap:25px;--column-gap:25px;}.elementor-5644 .elementor-element.elementor-element-28a77c3{--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-5644 .elementor-element.elementor-element-d308317{width:var( --container-widget-width, 301px );max-width:301px;--container-widget-width:301px;--container-widget-flex-grow:0;text-align:start;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-d308317.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-ce89c35{--container-widget-width:306px;--container-widget-flex-grow:0;width:var( --container-widget-width, 306px );max-width:306px;}.elementor-5644 .elementor-element.elementor-element-ce89c35 .elementor-heading-title{font-size:30px;}.elementor-5644 .elementor-element.elementor-element-cb100dc{--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-5644 .elementor-element.elementor-element-74646ec{--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-5644 .elementor-element.elementor-element-9f8fc18{--padding-top:20px;--padding-bottom:3px;--padding-left:3px;--padding-right:3px;}.elementor-5644 .elementor-element.elementor-element-284e674{--min-height:510px;--gap:25px 25px;--row-gap:25px;--column-gap:25px;}.elementor-5644 .elementor-element.elementor-element-bbc81ac{--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-5644 .elementor-element.elementor-element-582ccfc{width:var( --container-widget-width, 301px );max-width:301px;--container-widget-width:301px;--container-widget-flex-grow:0;text-align:start;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-582ccfc.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-e53eb8e{--container-widget-width:306px;--container-widget-flex-grow:0;width:var( --container-widget-width, 306px );max-width:306px;}.elementor-5644 .elementor-element.elementor-element-e53eb8e .elementor-heading-title{font-size:30px;}.elementor-5644 .elementor-element.elementor-element-724c67d{--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5644 .elementor-element.elementor-element-32e3f2a{--min-height:540px;--gap:25px 25px;--row-gap:25px;--column-gap:25px;}.elementor-5644 .elementor-element.elementor-element-b63c9dc{--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-5644 .elementor-element.elementor-element-1577598{width:var( --container-widget-width, 301px );max-width:301px;--container-widget-width:301px;--container-widget-flex-grow:0;text-align:start;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-1577598.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-3f2e06b{--container-widget-width:306px;--container-widget-flex-grow:0;width:var( --container-widget-width, 306px );max-width:306px;}.elementor-5644 .elementor-element.elementor-element-3f2e06b .elementor-heading-title{font-size:30px;}.elementor-5644 .elementor-element.elementor-element-a6e7695{--e-n-carousel-swiper-slides-to-display:1;}.elementor-5644 .elementor-element.elementor-element-836262e{padding:0px 10px 0px 10px;--n-tabs-title-font-size:13px;}.elementor-5644 .elementor-element.elementor-element-8c84940{font-size:12px;}.elementor-5644 .elementor-element.elementor-element-8e1fdcc{--container-widget-width:306px;--container-widget-flex-grow:0;width:var( --container-widget-width, 306px );max-width:306px;}.elementor-5644 .elementor-element.elementor-element-8e1fdcc .elementor-heading-title{font-size:24px;}.elementor-5644 .elementor-element.elementor-element-5d9bf6b{width:var( --container-widget-width, 264px );max-width:264px;--container-widget-width:264px;--container-widget-flex-grow:0;text-align:center;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-5d9bf6b.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-dced168{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-bb89bd6{font-size:12px;}.elementor-5644 .elementor-element.elementor-element-7f4e572 .elementor-heading-title{font-size:24px;}.elementor-5644 .elementor-element.elementor-element-0b0ab19{width:auto;max-width:auto;text-align:center;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-0b0ab19.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-cf405cc{width:auto;max-width:auto;text-align:start;font-size:13px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-cf405cc.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-8e2103e{width:auto;max-width:auto;text-align:start;font-size:13px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-8e2103e.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-15854de{width:auto;max-width:auto;text-align:start;font-size:13px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-15854de.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-795eb02{width:auto;max-width:auto;text-align:start;font-size:13px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-795eb02.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-c9efa42{width:auto;max-width:auto;text-align:start;font-size:13px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-c9efa42.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-9aa8ec1{--n-accordion-title-font-size:14px;}.elementor-5644 .elementor-element.elementor-element-341f466{--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-5644 .elementor-element.elementor-element-d5a79cf .elementor-heading-title{font-size:24px;}.elementor-5644 .elementor-element.elementor-element-f7e03f8{width:var( --container-widget-width, 285px );max-width:285px;--container-widget-width:285px;--container-widget-flex-grow:0;text-align:center;font-size:14px;line-height:1.6em;}.elementor-5644 .elementor-element.elementor-element-f7e03f8.elementor-element{--align-self:center;}.elementor-5644 .elementor-element.elementor-element-65da091.elementor-element{--align-self:center;}}/* Start custom CSS for image-box, class: .elementor-element-d619e1e *//* Transforma o contêiner principal em linha (lado a lado) */ .icone-lateral .elementor-image-box-wrapper, .icone-lateral .elementor-icon-box-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; /* Centraliza verticalmente o ícone e o texto */ justify-content: flex-start !important; gap: 15px !important; /* Controla o espaço entre o ícone e o texto */ } /* Remove as margens padrões do Elementor que causam desalinhamento */ .icone-lateral .elementor-image-box-img, .icone-lateral .elementor-icon-box-icon { margin-bottom: 0 !important; margin-right: 0 !important; flex-shrink: 0 !important; /* Impede que o ícone seja esmagado se o texto for grande */ } /* Força o alinhamento do texto para a esquerda */ .icone-lateral .elementor-image-box-content, .icone-lateral .elementor-icon-box-content { text-align: left !important; width: 100% !important; } /* Oculta a quebra de linha do título apenas no Mobile */ @media (max-width: 767px) { .elementor-5644 .elementor-element.elementor-element-d619e1e .elementor-image-box-title br, .elementor-5644 .elementor-element.elementor-element-d619e1e .elementor-icon-box-title br { display: none !important; } }/* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-a0ad909 *//* Transforma o contêiner principal em linha (lado a lado) */ .icone-lateral .elementor-image-box-wrapper, .icone-lateral .elementor-icon-box-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; /* Centraliza verticalmente o ícone e o texto */ justify-content: flex-start !important; gap: 15px !important; /* Controla o espaço entre o ícone e o texto */ } /* Remove as margens padrões do Elementor que causam desalinhamento */ .icone-lateral .elementor-image-box-img, .icone-lateral .elementor-icon-box-icon { margin-bottom: 0 !important; margin-right: 0 !important; flex-shrink: 0 !important; /* Impede que o ícone seja esmagado se o texto for grande */ } /* Força o alinhamento do texto para a esquerda */ .icone-lateral .elementor-image-box-content, .icone-lateral .elementor-icon-box-content { text-align: left !important; width: 100% !important; } /* Oculta a quebra de linha do título apenas no Mobile */ @media (max-width: 767px) { .elementor-5644 .elementor-element.elementor-element-a0ad909 .elementor-image-box-title br, .elementor-5644 .elementor-element.elementor-element-a0ad909 .elementor-icon-box-title br { display: none !important; } }/* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-6222fd8 *//* Transforma o contêiner principal em linha (lado a lado) */ .icone-lateral .elementor-image-box-wrapper, .icone-lateral .elementor-icon-box-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; /* Centraliza verticalmente o ícone e o texto */ justify-content: flex-start !important; gap: 15px !important; /* Controla o espaço entre o ícone e o texto */ } /* Remove as margens padrões do Elementor que causam desalinhamento */ .icone-lateral .elementor-image-box-img, .icone-lateral .elementor-icon-box-icon { margin-bottom: 0 !important; margin-right: 0 !important; flex-shrink: 0 !important; /* Impede que o ícone seja esmagado se o texto for grande */ } /* Força o alinhamento do texto para a esquerda */ .icone-lateral .elementor-image-box-content, .icone-lateral .elementor-icon-box-content { text-align: left !important; width: 100% !important; } /* Oculta a quebra de linha do título apenas no Mobile */ @media (max-width: 767px) { .elementor-5644 .elementor-element.elementor-element-6222fd8 .elementor-image-box-title br, .elementor-5644 .elementor-element.elementor-element-6222fd8 .elementor-icon-box-title br { display: none !important; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-0e9a11a */.imagem-zoom { transform: scale(1.2); /* Aumenta em 50% além do tamanho original */ transform-origin: center; /* Expande a partir do centro */ }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-66544e9 *//* Forçando a exibição do container para aceitar animação */ .balao-mensagem { display: inline-block !important; will-change: transform; } /* --- BALÃO 01 (Movimento contínuo e fluido) --- */ .balao-1, .balao-1 img { /* 4 segundos para fazer o ciclo completo de ir e voltar */ animation: deslizarBalao1 10s ease-in-out infinite !important; } @keyframes deslizarBalao1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); /* Distância aumentada */ } } /* --- BALÃO 02 (Mais profundo e um pouco mais lento) --- */ .balao-2, .balao-2 img { /* 6 segundos para não ficar sincronizado com o Balão 1 */ animation: deslizarBalao2 6s ease-in-out infinite !important; } @keyframes deslizarBalao2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); /* Distância ainda maior */ } } /* Retirei o hover que pausava a animação para garantir que ele nunca pare *//* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-c28e077 */.elementor-5644 .elementor-element.elementor-element-c28e077{ border-radius: 16px; border: 0.75px solid rgba(1, 1, 48, 0.10); background: linear-gradient(91deg, rgba(144, 255, 123, 0.60) 0.45%, rgba(216, 255, 208, 0.60) 111.77%); }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-8fb59ab */.elementor-5644 .elementor-element.elementor-element-8fb59ab{ border-radius: 16px; border: 0.75px solid rgba(1, 1, 48, 0.10); background: linear-gradient(91deg, rgba(144, 255, 123, 0.60) 0.45%, rgba(216, 255, 208, 0.60) 111.77%); }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-fa7f64d */.elementor-5644 .elementor-element.elementor-element-fa7f64d{ border-radius: 16px; border: 0.75px solid rgba(1, 1, 48, 0.10); background: linear-gradient(91deg, rgba(144, 255, 123, 0.60) 0.45%, rgba(216, 255, 208, 0.60) 111.77%); }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-6bced81 */.elementor-5644 .elementor-element.elementor-element-6bced81{ border-radius: 16px; border: 0.75px solid rgba(1, 1, 48, 0.10); background: linear-gradient(132deg, #5A77FF -1.03%, #9494ED 109.23%), linear-gradient(91deg, rgba(144, 255, 123, 0.60) 0.45%, rgba(216, 255, 208, 0.60) 111.77%); backdrop-filter: blur(1px); }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-8815982 */.elementor-5644 .elementor-element.elementor-element-8815982{ border-radius: 16px; border: 0.75px solid rgba(1, 1, 48, 0.10); background: linear-gradient(91deg, rgba(144, 255, 123, 0.60) 0.45%, rgba(216, 255, 208, 0.60) 111.77%); }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-6b93a66 */.elementor-5644 .elementor-element.elementor-element-6b93a66{ border-radius: 16px; border: 0.75px solid rgba(1, 1, 48, 0.10); background: linear-gradient(132deg, #5A77FF -1.03%, #9494ED 109.23%), linear-gradient(91deg, rgba(144, 255, 123, 0.60) 0.45%, rgba(216, 255, 208, 0.60) 111.77%); backdrop-filter: blur(1px); }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-579b869 */.elementor-5644 .elementor-element.elementor-element-579b869{ border-radius: 16px; border: 0.75px solid rgba(1, 1, 48, 0.10); background: linear-gradient(91deg, rgba(144, 255, 123, 0.60) 0.45%, rgba(216, 255, 208, 0.60) 111.77%); }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-11d3710 *//* Transforma o contêiner principal em linha (lado a lado) */ .icone-lateral .elementor-image-box-wrapper, .icone-lateral .elementor-icon-box-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; /* Centraliza verticalmente o ícone e o texto */ justify-content: flex-start !important; gap: 15px !important; /* Controla o espaço entre o ícone e o texto */ } /* Remove as margens padrões do Elementor que causam desalinhamento */ .icone-lateral .elementor-image-box-img, .icone-lateral .elementor-icon-box-icon { margin-bottom: 0 !important; margin-right: 0 !important; flex-shrink: 0 !important; /* Impede que o ícone seja esmagado se o texto for grande */ } /* Força o alinhamento do texto para a esquerda */ .icone-lateral .elementor-image-box-content, .icone-lateral .elementor-icon-box-content { text-align: left !important; width: 100% !important; } /* Oculta a quebra de linha do título apenas no Mobile */ @media (max-width: 767px) { .elementor-5644 .elementor-element.elementor-element-11d3710 .elementor-image-box-title br, .elementor-5644 .elementor-element.elementor-element-11d3710 .elementor-icon-box-title br { display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6054d70 *//* Container que monitora o progresso do scroll */ .container-efeito { view-timeline-name: --card-scroll; view-timeline-axis: block; } .item-animado { animation-timeline: --card-scroll; animation-fill-mode: both; /* Ajuste para o efeito começar e terminar de forma equilibrada */ animation-range: entry 10% cover 50%; /* Garante que o aumento de tamanho não corte o card */ transform-origin: center center; /* Removido o 'filter' do will-change */ will-change: transform, opacity; } /* --- KEYFRAMES COM ROTATE, SCALE E OPACITY (SEM BLUR) --- */ @keyframes efeitoGirarEsquerda { from { transform: rotate(0deg) scale(1); opacity: 0; } to { transform: rotate(9.24deg) scale(1.1); opacity: 1; } } @keyframes efeitoGirarDireita { from { transform: rotate(0deg) scale(1); opacity: 0; } to { transform: rotate(-8.42deg) scale(1.1); opacity: 1; } } /* Aplicando as classes de animação */ .girar-esquerda { animation-name: efeitoGirarEsquerda; } .girar-direita { animation-name: efeitoGirarDireita; } /* --- ADAPTAÇÃO PARA MOBILE --- */ @media (max-width: 768px) { .item-animado { animation-range: entry 5% cover 30%; } @keyframes efeitoGirarEsquerda { from { transform: rotate(0deg) scale(1); opacity: 0; } to { transform: rotate(4deg) scale(1.1); opacity: 1; } } @keyframes efeitoGirarDireita { from { transform: rotate(0deg) scale(1); opacity: 0; } to { transform: rotate(-4deg) scale(1.1); opacity: 1; } } }/* End custom CSS */ /* Start custom CSS for icon, class: .elementor-element-4b98173 *//* Classe para aplicar ao seu ícone */ .icone-scroll { display: inline-block; /* Garante que o transform funcione corretamente */ animation: flutuar 3s ease-in-out infinite; } /* Definição da animação */ @keyframes flutuar { 0% { transform: translateY(0); } 50% { transform: translateY(3px); /* O quanto ele desce */ } 100% { transform: translateY(0); } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5b8c247 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35268aa */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-15549e8 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f01ca98 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c49b101 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-333da6a *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1a41124 */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5b8c247 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35268aa */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-15549e8 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f01ca98 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c49b101 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-333da6a *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1a41124 */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5b8c247 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35268aa */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-15549e8 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f01ca98 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c49b101 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-333da6a *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1a41124 */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5b8c247 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35268aa */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-15549e8 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f01ca98 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c49b101 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-333da6a *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1a41124 */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for nested-carousel, class: .elementor-element-5549339 */@media (max-width: 767px) { /* Transforma a linha do carrossel em coluna */ .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-wrapper { flex-direction: column !important; transform: none !important; /* Impede o script de arrastar os slides */ box-sizing: border-box !important; } /* Ajusta os cards para ocuparem 100% da tela e dá um espaçamento */ .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-slide { width: 100% !important; max-width: 100% !important; margin-bottom: 24px !important; /* Espaçamento entre os planos */ } /* Oculta as setas e bolinhas de navegação no mobile */ .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-pagination, .elementor-5644 .elementor-element.elementor-element-5549339 .elementor-swiper-button, .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-button-next, .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-button-prev { display: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c7872e3 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a66b05d */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b01d4e6 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-284e674 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9f8fc18 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-e5ca402 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32e3f2a */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c7872e3 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a66b05d */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b01d4e6 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-284e674 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9f8fc18 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-e5ca402 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32e3f2a */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c7872e3 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a66b05d */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b01d4e6 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-284e674 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9f8fc18 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-e5ca402 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32e3f2a */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c7872e3 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a66b05d */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b01d4e6 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-284e674 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9f8fc18 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-e5ca402 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32e3f2a */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for nested-carousel, class: .elementor-element-a6e7695 */@media (max-width: 767px) { /* Transforma a linha do carrossel em coluna */ .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-wrapper { flex-direction: column !important; transform: none !important; /* Impede o script de arrastar os slides */ box-sizing: border-box !important; } /* Ajusta os cards para ocuparem 100% da tela e dá um espaçamento */ .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-slide { width: 100% !important; max-width: 100% !important; margin-bottom: 24px !important; /* Espaçamento entre os planos */ } /* Oculta as setas e bolinhas de navegação no mobile */ .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-pagination, .elementor-5644 .elementor-element.elementor-element-a6e7695 .elementor-swiper-button, .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-button-next, .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-button-prev { display: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5b8c247 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35268aa */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-15549e8 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f01ca98 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c49b101 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-333da6a *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1a41124 */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5b8c247 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35268aa */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-15549e8 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f01ca98 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c49b101 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-333da6a *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1a41124 */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5b8c247 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35268aa */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-15549e8 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f01ca98 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c49b101 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-333da6a *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1a41124 */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5b8c247 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35268aa */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-15549e8 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f01ca98 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c49b101 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-333da6a *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1a41124 */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for nested-carousel, class: .elementor-element-5549339 */@media (max-width: 767px) { /* Transforma a linha do carrossel em coluna */ .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-wrapper { flex-direction: column !important; transform: none !important; /* Impede o script de arrastar os slides */ box-sizing: border-box !important; } /* Ajusta os cards para ocuparem 100% da tela e dá um espaçamento */ .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-slide { width: 100% !important; max-width: 100% !important; margin-bottom: 24px !important; /* Espaçamento entre os planos */ } /* Oculta as setas e bolinhas de navegação no mobile */ .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-pagination, .elementor-5644 .elementor-element.elementor-element-5549339 .elementor-swiper-button, .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-button-next, .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-button-prev { display: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c7872e3 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a66b05d */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b01d4e6 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-284e674 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9f8fc18 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-e5ca402 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32e3f2a */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c7872e3 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a66b05d */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b01d4e6 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-284e674 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9f8fc18 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-e5ca402 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32e3f2a */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c7872e3 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a66b05d */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b01d4e6 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-284e674 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9f8fc18 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-e5ca402 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32e3f2a */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c7872e3 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a66b05d */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b01d4e6 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-284e674 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9f8fc18 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-e5ca402 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32e3f2a */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for nested-carousel, class: .elementor-element-a6e7695 */@media (max-width: 767px) { /* Transforma a linha do carrossel em coluna */ .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-wrapper { flex-direction: column !important; transform: none !important; /* Impede o script de arrastar os slides */ box-sizing: border-box !important; } /* Ajusta os cards para ocuparem 100% da tela e dá um espaçamento */ .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-slide { width: 100% !important; max-width: 100% !important; margin-bottom: 24px !important; /* Espaçamento entre os planos */ } /* Oculta as setas e bolinhas de navegação no mobile */ .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-pagination, .elementor-5644 .elementor-element.elementor-element-a6e7695 .elementor-swiper-button, .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-button-next, .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-button-prev { display: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5b8c247 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35268aa */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-15549e8 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f01ca98 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c49b101 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-333da6a *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1a41124 */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5b8c247 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35268aa */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-15549e8 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f01ca98 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c49b101 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-333da6a *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1a41124 */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5b8c247 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35268aa */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-15549e8 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f01ca98 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c49b101 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-333da6a *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1a41124 */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5b8c247 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-5b8c247 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35268aa */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-15549e8 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f01ca98 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c49b101 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-333da6a *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-333da6a a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1a41124 */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for nested-carousel, class: .elementor-element-5549339 */@media (max-width: 767px) { /* Transforma a linha do carrossel em coluna */ .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-wrapper { flex-direction: column !important; transform: none !important; /* Impede o script de arrastar os slides */ box-sizing: border-box !important; } /* Ajusta os cards para ocuparem 100% da tela e dá um espaçamento */ .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-slide { width: 100% !important; max-width: 100% !important; margin-bottom: 24px !important; /* Espaçamento entre os planos */ } /* Oculta as setas e bolinhas de navegação no mobile */ .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-pagination, .elementor-5644 .elementor-element.elementor-element-5549339 .elementor-swiper-button, .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-button-next, .elementor-5644 .elementor-element.elementor-element-5549339 .swiper-button-prev { display: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c7872e3 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a66b05d */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b01d4e6 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-284e674 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9f8fc18 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-e5ca402 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32e3f2a */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c7872e3 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a66b05d */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b01d4e6 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-284e674 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9f8fc18 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-e5ca402 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32e3f2a */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c7872e3 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a66b05d */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b01d4e6 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-284e674 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9f8fc18 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-e5ca402 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32e3f2a */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c7872e3 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-c7872e3 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a66b05d */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b01d4e6 *//* ========================================= 1. ESTILO BASE COM GRADIENTE QUE "CORRE" ========================================= */ .btn-premium-animated .elementor-button { position: relative !important; /* Gradiente com as cores do seu print: Azul claro -> Azul Escuro -> Azul Claro */ background: linear-gradient(90deg, #5A7BFF, #1C276D, #5A7BFF) !important; background-size: 200% auto !important; /* Essencial para o gradiente ter espaço para correr */ animation: gradiente-movimentando 4s linear infinite !important; color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; overflow: visible !important; border: none !important; transition: all 0.5s ease-in-out !important; z-index: 1; } /* Animação que faz a cor azul deslizar */ @keyframes gradiente-movimentando { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .btn-premium-animated .elementor-button-content-wrapper { position: relative; z-index: 4; } /* ========================================= 2. HOVER: BRILHO EXTERNO (GLOW) ========================================= */ .btn-premium-animated .elementor-button:hover { /* Aura azul neon que acende no hover */ box-shadow: 0 0 25px rgba(90, 123, 255, 0.7) !important; transform: translateY(-2px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-284e674 */.box2{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 1); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9f8fc18 *//* --- 1. PREPARAÇÃO DO CONTAINER PAI --- */ /* Certifique-se de que o container que segura o card e o título 'Melhor escolha' tem esta classe. */ /* Ela define o z-index base para todos os elementos internos. */ .container-pro-max-superior { position: relative !important; overflow: visible !important; /* Permite que o efeito "vaze" nas bordas */ z-index: 10 !important; /* Define uma camada base para todos os elementos */ } /* --- 2. O CARD 'PRO MAX' --- */ /* Usamos a classe que já existe no seu card. */ /* Forçamos o z-index para que ele fique VISÍVEL (no topo). */ .container-pro-max-superior .card-original { position: relative !important; z-index: 20 !important; /* Garante que o conteúdo e a borda fiquem no topo */ overflow: hidden !important; /* Impede que o efeito passe para as listas e preços */ } /* --- 3. O TÍTULO 'MELHOR ESCOLHA' --- */ /* Forçamos o z-index para garantir que o texto fique legível. */ .container-pro-max-superior .titulo-melhor-escolha { position: relative !important; z-index: 20 !important; /* Mantém o texto visível e na frente de tudo */ } /* --- 4. O EFEITO DE SOBREPOSIÇÃO COLORIDA (UNDERLAY) --- */ /* Criamos um elemento "fantasma" que imita o formato do card superior, mas fica ATRÁS dele. */ .container-pro-max-superior::before { content: ""; position: absolute !important; top: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ left: 1px !important; /* Alinha perfeitamente com o início do card para simular a borda */ right: 1px !important; bottom: -1px !important; /* Estende ligeiramente para baixo para criar a sobreposição visual */ z-index: 15 !important; /* Fica ENTRE o container pai (z-10) e o card/título (z-20) */ /* Imita a forma exata do container superior */ border-radius: 20px !important; /* Ajuste para o valor real do seu border-radius superior */ /* Aplica a borda neon superior com o efeito de gradiente correndo */ border: 3px solid transparent !important; /* Define uma borda transparente que será preenchida */ background: linear-gradient(90deg, #90FF7B, /* Verde Inicial */ #5A77FF, /* Azul do Gradiente */ #90FF7B /* Verde Final */ ) border-box !important; /* Animação do gradiente correndo continuamente */ animation: gradiente-correndo 5s linear infinite !important; box-sizing: border-box !important; /* Leve fulgor (glow) para intensificar o efeito correndo */ box-shadow: 0 0 10px rgba(90, 255, 123, 0.3) !important; } /* --- 5. A ANIMAÇÃO DO GRADIENTE CORRENDO --- */ @keyframes gradiente-correndo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-e5ca402 *//* ========================================= 1. A MÁGICA DO CLIQUE: ISOLAMENTO ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button { position: relative !important; isolation: isolate !important; /* Trava as camadas animadas atrás do botão. A frente fica 100% livre! */ background-color: transparent !important; /* O fundo visível será criado abaixo */ color: #FFFFFF !important; border-radius: 50px !important; padding: 18px 40px !important; border: none !important; /* Centralização perfeita */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; cursor: pointer !important; z-index: 10 !important; } /* ========================================= 2. O FUNDO PRETO (Trancado no fundo) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::before { content: ""; position: absolute !important; inset: 0 !important; /* Preenche 100% do botão */ background-color: #1A1A1C !important; border-radius: 50px !important; z-index: -2 !important; /* Fica no nível mais profundo */ transition: all 0.5s ease-in-out !important; } /* ========================================= 3. O GRADIENTE NEON (Escondido no meio) ========================================= */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button::after { content: ""; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #5A7BFF, #1C276D) !important; border-radius: 50px !important; z-index: -1 !important; /* Fica acima do preto, mas ATRÁS do texto/link */ opacity: 0; /* Invisível até passar o mouse */ transition: all 0.5s ease-in-out !important; } /* ========================================= 4. EFEITO HOVER ========================================= */ /* Revela o gradiente */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover::after { opacity: 1 !important; } /* Aplica o brilho externo e levanta o botão */ .elementor-5644 .elementor-element.elementor-element-e5ca402 a.elementor-button:hover { box-shadow: 0 0 30px rgba(90, 123, 255, 0.6) !important; transform: translateY(-2px) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32e3f2a */.box1{ border-radius: 23.717px; border: 0.75px solid rgba(244, 246, 255, 0.10); background: rgba(11, 11, 11, 0.50); backdrop-filter: blur(2px);important! }/* End custom CSS */ /* Start custom CSS for nested-carousel, class: .elementor-element-a6e7695 */@media (max-width: 767px) { /* Transforma a linha do carrossel em coluna */ .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-wrapper { flex-direction: column !important; transform: none !important; /* Impede o script de arrastar os slides */ box-sizing: border-box !important; } /* Ajusta os cards para ocuparem 100% da tela e dá um espaçamento */ .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-slide { width: 100% !important; max-width: 100% !important; margin-bottom: 24px !important; /* Espaçamento entre os planos */ } /* Oculta as setas e bolinhas de navegação no mobile */ .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-pagination, .elementor-5644 .elementor-element.elementor-element-a6e7695 .elementor-swiper-button, .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-button-next, .elementor-5644 .elementor-element.elementor-element-a6e7695 .swiper-button-prev { display: none !important; } }/* End custom CSS */ /* Start custom CSS for nested-tabs, class: .elementor-element-836262e *//* ========================================= 0. TRAZENDO O CONTEÚDO (CARROSSEL) PARA A FRENTE ========================================= */ .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tabs-content { position: relative !important; z-index: 99 !important; pointer-events: auto !important; } /* ========================================= 1. CONTAINER (A "pílula" em volta) ========================================= */ .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tabs-heading { display: flex !important; position: relative !important; background-color: transparent !important; border: 1px solid #2B3566 !important; border-radius: 50px !important; padding: 5px !important; justify-content: center !important; align-items: center !important; margin: 0 auto 30px auto !important; width: max-content !important; box-sizing: border-box !important; gap: 0 !important; z-index: 10 !important; /* Organiza a camada do topo */ } /* Esconde qualquer borda ou linha padrão do Elementor */ .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tabs-heading > *, .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tabs-content { border: none !important; } /* ========================================= 2. EFEITO DO FUNDO DESLIZANTE ========================================= */ .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tabs-heading::before { content: ""; position: absolute !important; top: 5px !important; bottom: 5px !important; left: 5px !important; width: calc(50% - 5px) !important; background: linear-gradient(95deg, #5A77FF, #3144BA) !important; border-radius: 50px !important; transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1) !important; z-index: 1 !important; box-shadow: 0 4px 15px rgba(90, 119, 255, 0.2) !important; box-sizing: border-box !important; } /* Quando a SEGUNDA aba estiver ativa, o fundo escorrega */ .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tabs-heading:has(.e-n-tab-title:nth-child(2)[aria-selected="true"])::before { transform: translateX(100%) !important; } /* ========================================= 3. FORMATO DOS BOTÕES (Mensal / Anual) ========================================= */ .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tab-title { position: relative !important; display: flex !important; z-index: 2 !important; border-radius: 50px !important; padding: 12px 35px !important; margin: 0 !important; color: #ffffff !important; font-size: 16px !important; font-weight: 500 !important; transition: all 0.3s ease !important; background: transparent !important; white-space: nowrap !important; flex: 1 1 50% !important; min-width: 50% !important; max-width: 50% !important; text-align: center !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* ABA ATIVA */ .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tab-title[aria-selected="true"] { color: #ffffff !important; font-weight: 600 !important; } /* ========================================= 4. TEXTO DINÂMICO (ECONOMIZE X%) - Desktop ========================================= */ .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tabs-heading::after { content: "ECONOMIZE 15%"; position: absolute !important; right: -165px !important; top: 50% !important; transform: translateY(-50%) !important; color: #5CF269 !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; white-space: nowrap !important; transition: all 0.3s ease !important; z-index: 0 !important; } .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tabs-heading:has(.e-n-tab-title:nth-child(2)[aria-selected="true"])::after { content: "ECONOMIZE 33%"; } /* ========================================= 5. AJUSTE PARA CELULAR (Mobile) ========================================= */ @media (max-width: 768px) { .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tab-title { font-size: 10px !important; padding: 10px 15px !important; } .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tabs-heading::after { left: 0 !important; right: 0 !important; top: calc(100% + 12px) !important; transform: none !important; width: 100% !important; text-align: center !important; font-size: 11px !important; } .elementor-5644 .elementor-element.elementor-element-836262e .e-n-tabs-heading { margin-bottom: 40px !important; } }/* End custom CSS */ /* Start custom CSS for image-carousel, class: .elementor-element-537428c *//* Posiciona o container das setas abaixo do carrossel e desce mais 30px */ .elementor-5644 .elementor-element.elementor-element-537428c .elementor-swiper-button { top: auto; bottom: -70px; transform: translateY(0); /* Zera o alinhamento padrão do Elementor para evitar o pulo */ transition: transform 0.3s ease; } /* Centraliza a seta da esquerda */ .elementor-5644 .elementor-element.elementor-element-537428c .elementor-swiper-button-prev { left: calc(50% - 45px); } /* Efeito de hover bem sutil na seta da esquerda (apenas cresce 5%) */ .elementor-5644 .elementor-element.elementor-element-537428c .elementor-swiper-button-prev:hover { transform: translateY(0) scale(1.15); /* Mantém o translateY zerado junto com o scale */ } /* Centraliza a seta da direita */ .elementor-5644 .elementor-element.elementor-element-537428c .elementor-swiper-button-next { right: calc(50% - 45px); } /* Efeito de hover bem sutil na seta da direita (apenas cresce 5%) */ .elementor-5644 .elementor-element.elementor-element-537428c .elementor-swiper-button-next:hover { transform: translateY(0) scale(1.15); /* Mantém o translateY zerado junto com o scale */ } /* Garante que o carrossel tenha espaço embaixo para as setas aparecerem */ .elementor-5644 .elementor-element.elementor-element-537428c { margin-bottom: 100px; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4bec7af */.elementor-5644 .elementor-element.elementor-element-4bec7af::before { content: ""; position: absolute; /* Centralização perfeita */ top: 30%; left: 50%; transform: translate(-50%, -50%); width: 400px; /* Tamanho da luz */ height: 400px; /* Tamanho da luz */ background: #5A77FF; /* Nova cor aplicada */ border-radius: 100%; filter: blur(150px); /* Desfoque */ opacity: 0.3; mix-blend-mode: screen; /* Tempo aumentado para 8s e suavizado com ease-in-out */ animation: luz 8s ease-in-out infinite; pointer-events: none; } @keyframes luz { 0%, 100% { opacity: 0; } 50% { opacity: 0.5; /* Pico do brilho da luz */ } }/* End custom CSS */ /* Start custom CSS */.txt{ background: linear-gradient(90deg, #FFF 46.28%, rgba(255, 255, 255, 0.20) 104.96%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .txt1 { /* Gradiente com a cor inicial (#90FF7B) repetida no final para fechar o ciclo */ background: linear-gradient(175deg, #90FF7B, #5A77FF, #90FF7B); /* Aumenta o tamanho do fundo para 200% para permitir o movimento */ background-size: 200% 200%; /* Suas propriedades originais para aplicar a cor apenas no texto */ background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* Animação com duração de 8 segundos (bem suave) e loop infinito */ animation: fluidezTexto 8s ease-in-out infinite; } /* Define o movimento suave da posição do fundo */ @keyframes fluidezTexto { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } } .txt2{ background: var(--3, linear-gradient(95deg, #3F4DA7 23.19%, #010130 126.66%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body, html { overflow-x: hidden !important; } /* Corrigir escrollamento no Mobile */ @media (max-width: 786px){ body, html { overflow-x: hidden!important; } } .rdstation-popup-js-floating-button, .bricks--floating--button { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; z-index: -9999 !important; }/* End custom CSS */