.elementor-6 .elementor-element.elementor-element-c85a317{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-562d5e84{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:48px 48px;--row-gap:48px;--column-gap:48px;--padding-top:150px;--padding-bottom:150px;--padding-left:32px;--padding-right:32px;}.elementor-6 .elementor-element.elementor-element-562d5e84:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-562d5e84 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F2ED;background-image:url("https://lucasleitaopsico.com.br/wp-content/uploads/2026/09/bannerfundohero_desktop-22.png");background-position:top center;background-size:cover;}.elementor-6 .elementor-element.elementor-element-562d5e84 > .elementor-shape-bottom .elementor-shape-fill, .elementor-6 .elementor-element.elementor-element-562d5e84 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-562d5e84 > .elementor-shape-bottom svg, .elementor-6 .elementor-element.elementor-element-562d5e84 > .e-con-inner > .elementor-shape-bottom svg{height:60px;}.elementor-6 .elementor-element.elementor-element-21163d39{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:22px 22px;--row-gap:22px;--column-gap:22px;}.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-6 .elementor-element.elementor-element-62907ca0 .elementor-heading-title{font-family:"Source Sans 3", Sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:#254D64;}.elementor-6 .elementor-element.elementor-element-30ca2e6b{text-align:start;}.elementor-6 .elementor-element.elementor-element-30ca2e6b .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:50px;font-weight:600;line-height:1.05em;color:#182127;}.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-6 .elementor-element.elementor-element-736128e7{text-align:start;font-family:"Source Sans 3", Sans-serif;font-size:20px;font-weight:400;line-height:1.55em;color:#182127;}.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-6 .elementor-element.elementor-element-486fcb74 .elementor-button{background-color:#254D64;font-family:"Source Sans 3", Sans-serif;font-size:15px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#254D64;border-radius:8px 8px 8px 8px;padding:14px 24px 14px 24px;}.elementor-6 .elementor-element.elementor-element-486fcb74 .elementor-button-content-wrapper{flex-direction:row;}.elementor-6 .elementor-element.elementor-element-486fcb74 .elementor-button .elementor-button-content-wrapper{gap:23px;}.elementor-6 .elementor-element.elementor-element-59f5555e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:96px;--padding-bottom:200px;--padding-left:32px;--padding-right:32px;}.elementor-6 .elementor-element.elementor-element-59f5555e:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-59f5555e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-4c3a8a7{--display:flex;}.elementor-6 .elementor-element.elementor-element-7047d2c3{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:end;--gap:32px 32px;--row-gap:32px;--column-gap:32px;}.elementor-6 .elementor-element.elementor-element-1cdb73a9{--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:14px 14px;--row-gap:14px;--column-gap:14px;}.elementor-6 .elementor-element.elementor-element-57e410a9{text-align:start;}.elementor-6 .elementor-element.elementor-element-57e410a9 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:46px;font-weight:600;line-height:1.12em;color:#182127;}.elementor-6 .elementor-element.elementor-element-4f422a7d{text-align:start;font-family:"Source Sans 3", Sans-serif;font-size:18px;font-weight:400;line-height:1.55em;color:#182127;}.elementor-6 .elementor-element.elementor-element-4b2297f5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6 .elementor-element.elementor-element-402c477b{text-align:start;font-family:"Source Sans 3", Sans-serif;font-size:16px;font-weight:400;line-height:1.55em;color:#698A99;}.elementor-6 .elementor-element.elementor-element-600781f6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:22px 22px;--row-gap:22px;--column-gap:22px;--flex-wrap:wrap;}.elementor-6 .elementor-element.elementor-element-634f047{--display:flex;}.elementor-6 .elementor-element.elementor-element-7770cbd{border-radius:20px 20px 20px 20px;}.elementor-6 .elementor-element.elementor-element-7770cbd .elementor-wrapper{--video-aspect-ratio:0.5625;}.elementor-6 .elementor-element.elementor-element-2cd48d92{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;--gap:48px 48px;--row-gap:48px;--column-gap:48px;--padding-top:0px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-6 .elementor-element.elementor-element-2cd48d92:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-2cd48d92 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(146deg, #254D64 0%, #658CA2 100%);}.elementor-6 .elementor-element.elementor-element-2e389e25{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--z-index:10;}.elementor-6 .elementor-element.elementor-element-77b03ffc{--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:42px 42px;--row-gap:42px;--column-gap:42px;--padding-top:96px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-6 .elementor-element.elementor-element-77b03ffc:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-77b03ffc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F2ED;}.elementor-6 .elementor-element.elementor-element-73300408{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:32px 32px;--row-gap:32px;--column-gap:32px;}.elementor-6 .elementor-element.elementor-element-60b1231c{--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:14px 14px;--row-gap:14px;--column-gap:14px;}.elementor-6 .elementor-element.elementor-element-6811f9bf{text-align:start;}.elementor-6 .elementor-element.elementor-element-6811f9bf .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:46px;font-weight:600;line-height:1.12em;color:#182127;}.elementor-6 .elementor-element.elementor-element-6ed11778{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6 .elementor-element.elementor-element-13e9f2dd{text-align:start;font-family:"Source Sans 3", Sans-serif;font-size:17px;font-weight:400;line-height:1.55em;color:#182127;}.elementor-6 .elementor-element.elementor-element-47b1344f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--flex-wrap:wrap;}.elementor-6 .elementor-element.elementor-element-3e84b68d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:24px 24px;--row-gap:24px;--column-gap:24px;}.elementor-6 .elementor-element.elementor-element-5e6c1725{--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;--justify-content:center;--align-items:end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6 .elementor-element.elementor-element-3a4a6e3a{--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;--justify-content:center;--align-items:end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6 .elementor-element.elementor-element-6dc1ea55 .elementor-button{background-color:#254D64;font-family:"Source Sans 3", Sans-serif;font-size:15px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#254D64;border-radius:8px 8px 8px 8px;padding:14px 24px 14px 24px;}.elementor-6 .elementor-element.elementor-element-6dc1ea55 .elementor-button-content-wrapper{flex-direction:row;}.elementor-6 .elementor-element.elementor-element-6dc1ea55 .elementor-button .elementor-button-content-wrapper{gap:23px;}.elementor-6 .elementor-element.elementor-element-b1bdd0c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:52px 52px;--row-gap:52px;--column-gap:52px;--padding-top:84px;--padding-bottom:84px;--padding-left:32px;--padding-right:32px;}.elementor-6 .elementor-element.elementor-element-b1bdd0c:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-b1bdd0c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-4e726888{--display:flex;--min-height:500px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:20px 20px 20px 20px;}.elementor-6 .elementor-element.elementor-element-4e726888:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-4e726888 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#D8D8D2;}.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-6 .elementor-element.elementor-element-3a1790fd{text-align:center;}.elementor-6 .elementor-element.elementor-element-3a1790fd img{width:100%;}.elementor-6 .elementor-element.elementor-element-395e89ee{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:18px 18px;--row-gap:18px;--column-gap:18px;}.elementor-6 .elementor-element.elementor-element-78702ff7 .elementor-heading-title{font-family:"Source Sans 3", Sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-2cca8c80{text-align:start;}.elementor-6 .elementor-element.elementor-element-2cca8c80 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:44px;font-weight:600;line-height:1.12em;color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-4c7f8520{text-align:start;font-family:"Source Sans 3", Sans-serif;font-size:18px;font-weight:400;line-height:1.55em;color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-2d4b2a7e{text-align:start;font-family:"Source Sans 3", Sans-serif;font-size:18px;font-weight:400;line-height:1.55em;color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-31897c7d{text-align:start;font-family:"Source Sans 3", Sans-serif;font-size:14px;font-weight:400;line-height:1.55em;color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-33f48b37 .elementor-button{background-color:#254D64;font-family:"Source Sans 3", Sans-serif;font-size:15px;font-weight:600;fill:#254D64;color:#254D64;border-style:solid;border-width:1px 1px 1px 1px;border-color:#254D64;border-radius:8px 8px 8px 8px;padding:14px 24px 14px 24px;}.elementor-6 .elementor-element.elementor-element-33f48b37 .elementor-button-content-wrapper{flex-direction:row;}.elementor-6 .elementor-element.elementor-element-33f48b37 .elementor-button .elementor-button-content-wrapper{gap:23px;}.elementor-6 .elementor-element.elementor-element-33f48b37 .elementor-button:hover, .elementor-6 .elementor-element.elementor-element-33f48b37 .elementor-button:focus{color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-33f48b37 .elementor-button:hover svg, .elementor-6 .elementor-element.elementor-element-33f48b37 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-65d28482{--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:24px 24px;--row-gap:24px;--column-gap:24px;--padding-top:96px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-6 .elementor-element.elementor-element-65d28482:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-65d28482 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F2ED;}.elementor-6 .elementor-element.elementor-element-4dd780e2{text-align:center;}.elementor-6 .elementor-element.elementor-element-4dd780e2 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:42px;font-weight:600;line-height:1.12em;color:#182127;}.elementor-6 .elementor-element.elementor-element-5e83fb81{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--flex-wrap:wrap;}.elementor-6 .elementor-element.elementor-element-6e07e366{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;--gap:48px 48px;--row-gap:48px;--column-gap:48px;--padding-top:84px;--padding-bottom:84px;--padding-left:32px;--padding-right:32px;}.elementor-6 .elementor-element.elementor-element-6e07e366:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-6e07e366 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6 .elementor-element.elementor-element-41b3a35d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:18px 18px;--row-gap:18px;--column-gap:18px;}.elementor-6 .elementor-element.elementor-element-4f032fb4 .elementor-heading-title{font-family:"Source Sans 3", Sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:#698A99;}.elementor-6 .elementor-element.elementor-element-2f7457ea{text-align:start;}.elementor-6 .elementor-element.elementor-element-2f7457ea .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:42px;font-weight:600;line-height:1.12em;color:#182127;}.elementor-6 .elementor-element.elementor-element-6adb3155{text-align:start;font-family:"Source Sans 3", Sans-serif;font-size:18px;font-weight:400;line-height:1.55em;color:#182127;}.elementor-6 .elementor-element.elementor-element-59d7dc83{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--flex-wrap:wrap;}.elementor-6 .elementor-element.elementor-element-38fbbc93{--display:flex;--min-height:220px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:8px 8px 8px 8px;}.elementor-6 .elementor-element.elementor-element-38fbbc93:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-38fbbc93 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#D8D8D2;}.elementor-6 .elementor-element.elementor-element-33860faf{text-align:center;}.elementor-6 .elementor-element.elementor-element-33860faf img{width:100%;}.elementor-6 .elementor-element.elementor-element-4d53c3dd{--display:flex;--min-height:220px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:8px 8px 8px 8px;}.elementor-6 .elementor-element.elementor-element-4d53c3dd:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-4d53c3dd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#D8D8D2;}.elementor-6 .elementor-element.elementor-element-82ba60d{text-align:center;}.elementor-6 .elementor-element.elementor-element-82ba60d img{width:100%;}.elementor-6 .elementor-element.elementor-element-79ad42a0{--display:flex;--min-height:220px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:8px 8px 8px 8px;}.elementor-6 .elementor-element.elementor-element-79ad42a0:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-79ad42a0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#D8D8D2;}.elementor-6 .elementor-element.elementor-element-2a5f1fe1{text-align:center;}.elementor-6 .elementor-element.elementor-element-2a5f1fe1 img{width:100%;}.elementor-6 .elementor-element.elementor-element-6b46df24{--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:24px 24px;--row-gap:24px;--column-gap:24px;--padding-top:96px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-6 .elementor-element.elementor-element-6b46df24:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-6b46df24 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#254D64;}.elementor-6 .elementor-element.elementor-element-731f613c{text-align:center;}.elementor-6 .elementor-element.elementor-element-731f613c .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:42px;font-weight:500;line-height:1.12em;color:#F4F2ED;}.elementor-6 .elementor-element.elementor-element-447aa881{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6 .elementor-element.elementor-element-430d2747{--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:28px 28px;--row-gap:28px;--column-gap:28px;--padding-top:96px;--padding-bottom:96px;--padding-left:32px;--padding-right:32px;}.elementor-6 .elementor-element.elementor-element-430d2747:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-430d2747 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F2ED;}.elementor-6 .elementor-element.elementor-element-554ab32{text-align:center;}.elementor-6 .elementor-element.elementor-element-554ab32 .elementor-heading-title{font-family:"Source Sans 3", Sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:#698A99;}.elementor-6 .elementor-element.elementor-element-7979db08{text-align:center;}.elementor-6 .elementor-element.elementor-element-7979db08 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:42px;font-weight:600;line-height:1.12em;color:#182127;}.elementor-6 .elementor-element.elementor-element-14a62ad6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6 .elementor-element.elementor-element-7e0b45a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-6 .elementor-element.elementor-element-562d5e84{--content-width:1240px;}.elementor-6 .elementor-element.elementor-element-21163d39{--width:50%;}.elementor-6 .elementor-element.elementor-element-59f5555e{--content-width:1240px;}.elementor-6 .elementor-element.elementor-element-4c3a8a7{--width:60%;}.elementor-6 .elementor-element.elementor-element-1cdb73a9{--width:62%;}.elementor-6 .elementor-element.elementor-element-4b2297f5{--width:32%;}.elementor-6 .elementor-element.elementor-element-634f047{--width:40%;}.elementor-6 .elementor-element.elementor-element-2cd48d92{--content-width:1240px;}.elementor-6 .elementor-element.elementor-element-2e389e25{--width:100%;}.elementor-6 .elementor-element.elementor-element-77b03ffc{--content-width:1240px;}.elementor-6 .elementor-element.elementor-element-60b1231c{--width:55%;}.elementor-6 .elementor-element.elementor-element-6ed11778{--width:38%;}.elementor-6 .elementor-element.elementor-element-5e6c1725{--width:100%;}.elementor-6 .elementor-element.elementor-element-3a4a6e3a{--width:30%;}.elementor-6 .elementor-element.elementor-element-b1bdd0c{--content-width:1240px;}.elementor-6 .elementor-element.elementor-element-4e726888{--width:50%;}.elementor-6 .elementor-element.elementor-element-395e89ee{--width:51%;}.elementor-6 .elementor-element.elementor-element-65d28482{--content-width:1240px;}.elementor-6 .elementor-element.elementor-element-6e07e366{--content-width:1240px;}.elementor-6 .elementor-element.elementor-element-41b3a35d{--width:30%;}.elementor-6 .elementor-element.elementor-element-59d7dc83{--width:70%;}.elementor-6 .elementor-element.elementor-element-38fbbc93{--width:31%;}.elementor-6 .elementor-element.elementor-element-4d53c3dd{--width:31%;}.elementor-6 .elementor-element.elementor-element-79ad42a0{--width:32%;}.elementor-6 .elementor-element.elementor-element-6b46df24{--content-width:1240px;}.elementor-6 .elementor-element.elementor-element-430d2747{--content-width:1240px;}}@media(max-width:1024px) and (min-width:768px){.elementor-6 .elementor-element.elementor-element-21163d39{--width:100%;}.elementor-6 .elementor-element.elementor-element-1cdb73a9{--width:65%;}.elementor-6 .elementor-element.elementor-element-4b2297f5{--width:32%;}.elementor-6 .elementor-element.elementor-element-2e389e25{--width:100%;}.elementor-6 .elementor-element.elementor-element-60b1231c{--width:56%;}.elementor-6 .elementor-element.elementor-element-6ed11778{--width:40%;}.elementor-6 .elementor-element.elementor-element-5e6c1725{--width:100%;}.elementor-6 .elementor-element.elementor-element-3a4a6e3a{--width:100%;}.elementor-6 .elementor-element.elementor-element-4e726888{--width:45%;}.elementor-6 .elementor-element.elementor-element-395e89ee{--width:51%;}.elementor-6 .elementor-element.elementor-element-41b3a35d{--width:46%;}.elementor-6 .elementor-element.elementor-element-59d7dc83{--width:50%;}.elementor-6 .elementor-element.elementor-element-38fbbc93{--width:31.5%;}.elementor-6 .elementor-element.elementor-element-4d53c3dd{--width:31.5%;}.elementor-6 .elementor-element.elementor-element-79ad42a0{--width:31.5%;}}@media(max-width:1024px){.elementor-6 .elementor-element.elementor-element-562d5e84:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-562d5e84 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://lucasleitaopsico.com.br/wp-content/uploads/2026/09/bannerfundohero_tabletmobile-15.png");background-repeat:no-repeat;background-size:contain;}.elementor-6 .elementor-element.elementor-element-562d5e84{--min-height:1288px;--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:36px;--padding-bottom:35px;--padding-left:28px;--padding-right:28px;}.elementor-6 .elementor-element.elementor-element-21163d39{--min-height:0px;}.elementor-6 .elementor-element.elementor-element-30ca2e6b .elementor-heading-title{font-size:50px;}.elementor-6 .elementor-element.elementor-element-59f5555e{--padding-top:72px;--padding-bottom:72px;--padding-left:28px;--padding-right:28px;}.elementor-6 .elementor-element.elementor-element-57e410a9 .elementor-heading-title{font-size:38px;}.elementor-6 .elementor-element.elementor-element-2cd48d92{--padding-top:72px;--padding-bottom:72px;--padding-left:28px;--padding-right:28px;}.elementor-6 .elementor-element.elementor-element-77b03ffc{--padding-top:72px;--padding-bottom:72px;--padding-left:28px;--padding-right:28px;}.elementor-6 .elementor-element.elementor-element-6811f9bf .elementor-heading-title{font-size:38px;}.elementor-6 .elementor-element.elementor-element-3e84b68d{--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-6 .elementor-element.elementor-element-b1bdd0c{--padding-top:72px;--padding-bottom:72px;--padding-left:28px;--padding-right:28px;}.elementor-6 .elementor-element.elementor-element-2cca8c80 .elementor-heading-title{font-size:38px;}.elementor-6 .elementor-element.elementor-element-65d28482{--padding-top:72px;--padding-bottom:72px;--padding-left:28px;--padding-right:28px;}.elementor-6 .elementor-element.elementor-element-4dd780e2 .elementor-heading-title{font-size:36px;}.elementor-6 .elementor-element.elementor-element-6e07e366{--padding-top:72px;--padding-bottom:72px;--padding-left:28px;--padding-right:28px;}.elementor-6 .elementor-element.elementor-element-2f7457ea .elementor-heading-title{font-size:36px;}.elementor-6 .elementor-element.elementor-element-6b46df24{--padding-top:72px;--padding-bottom:72px;--padding-left:28px;--padding-right:28px;}.elementor-6 .elementor-element.elementor-element-731f613c .elementor-heading-title{font-size:36px;}.elementor-6 .elementor-element.elementor-element-430d2747{--padding-top:72px;--padding-bottom:72px;--padding-left:28px;--padding-right:28px;}.elementor-6 .elementor-element.elementor-element-7979db08 .elementor-heading-title{font-size:36px;}}@media(max-width:767px){.elementor-6 .elementor-element.elementor-element-562d5e84{--min-height:1073px;--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:36px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-6 .elementor-element.elementor-element-21163d39{--width:100%;}.elementor-6 .elementor-element.elementor-element-62907ca0 .elementor-heading-title{font-size:11px;}.elementor-6 .elementor-element.elementor-element-30ca2e6b .elementor-heading-title{font-size:32px;}.elementor-6 .elementor-element.elementor-element-736128e7{font-size:18px;}.elementor-6 .elementor-element.elementor-element-59f5555e{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:56px;--padding-bottom:56px;--padding-left:20px;--padding-right:20px;}.elementor-6 .elementor-element.elementor-element-7047d2c3{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6 .elementor-element.elementor-element-1cdb73a9{--width:100%;}.elementor-6 .elementor-element.elementor-element-57e410a9 .elementor-heading-title{font-size:23px;}.elementor-6 .elementor-element.elementor-element-4f422a7d{font-size:17px;}.elementor-6 .elementor-element.elementor-element-4b2297f5{--width:100%;}.elementor-6 .elementor-element.elementor-element-402c477b{font-size:16px;}.elementor-6 .elementor-element.elementor-element-2cd48d92{--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:56px;--padding-bottom:56px;--padding-left:20px;--padding-right:20px;}.elementor-6 .elementor-element.elementor-element-2e389e25{--width:100%;}.elementor-6 .elementor-element.elementor-element-77b03ffc{--padding-top:56px;--padding-bottom:56px;--padding-left:20px;--padding-right:20px;}.elementor-6 .elementor-element.elementor-element-73300408{--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-6 .elementor-element.elementor-element-60b1231c{--width:100%;}.elementor-6 .elementor-element.elementor-element-6811f9bf .elementor-heading-title{font-size:25px;}.elementor-6 .elementor-element.elementor-element-6ed11778{--width:100%;}.elementor-6 .elementor-element.elementor-element-13e9f2dd{font-size:17px;}.elementor-6 .elementor-element.elementor-element-3e84b68d{--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-6 .elementor-element.elementor-element-5e6c1725{--width:100%;}.elementor-6 .elementor-element.elementor-element-3a4a6e3a{--width:100%;}.elementor-6 .elementor-element.elementor-element-b1bdd0c{--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:56px;--padding-bottom:56px;--padding-left:20px;--padding-right:20px;}.elementor-6 .elementor-element.elementor-element-4e726888{--width:100%;--min-height:0px;}.elementor-6 .elementor-element.elementor-element-395e89ee{--width:100%;}.elementor-6 .elementor-element.elementor-element-78702ff7 .elementor-heading-title{font-size:11px;}.elementor-6 .elementor-element.elementor-element-2cca8c80 .elementor-heading-title{font-size:34px;}.elementor-6 .elementor-element.elementor-element-4c7f8520{font-size:17px;}.elementor-6 .elementor-element.elementor-element-2d4b2a7e{font-size:17px;}.elementor-6 .elementor-element.elementor-element-31897c7d{font-size:14px;}.elementor-6 .elementor-element.elementor-element-65d28482{--padding-top:56px;--padding-bottom:56px;--padding-left:20px;--padding-right:20px;}.elementor-6 .elementor-element.elementor-element-4dd780e2 .elementor-heading-title{font-size:23px;}.elementor-6 .elementor-element.elementor-element-6e07e366{--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:56px;--padding-bottom:56px;--padding-left:20px;--padding-right:20px;}.elementor-6 .elementor-element.elementor-element-41b3a35d{--width:100%;}.elementor-6 .elementor-element.elementor-element-4f032fb4 .elementor-heading-title{font-size:11px;}.elementor-6 .elementor-element.elementor-element-2f7457ea .elementor-heading-title{font-size:23px;}.elementor-6 .elementor-element.elementor-element-6adb3155{font-size:17px;}.elementor-6 .elementor-element.elementor-element-59d7dc83{--width:100%;--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-6 .elementor-element.elementor-element-38fbbc93{--width:100%;}.elementor-6 .elementor-element.elementor-element-4d53c3dd{--width:100%;}.elementor-6 .elementor-element.elementor-element-79ad42a0{--width:100%;}.elementor-6 .elementor-element.elementor-element-6b46df24{--padding-top:56px;--padding-bottom:56px;--padding-left:20px;--padding-right:20px;}.elementor-6 .elementor-element.elementor-element-731f613c .elementor-heading-title{font-size:23px;}.elementor-6 .elementor-element.elementor-element-430d2747{--padding-top:56px;--padding-bottom:56px;--padding-left:20px;--padding-right:20px;}.elementor-6 .elementor-element.elementor-element-554ab32 .elementor-heading-title{font-size:11px;}.elementor-6 .elementor-element.elementor-element-7979db08 .elementor-heading-title{font-size:23px;}}/* Start custom CSS for container, class: .elementor-element-634f047 *//* ========================================================= ROTA — PHOTO FRAME SIGNATURE Lucas Leitão Direção Criativa 01 — Sistema Clínico Humano Aplicar no Container Elementor: rota-photo-frame IMPORTANTE: Este CSS NÃO altera: - width da imagem - height da imagem - aspect-ratio - object-fit - object-position A imagem mantém exatamente o tamanho definido no Elementor. ========================================================= */ /* ========================================================= 01. TOKENS ========================================================= */ .rota-photo-frame { --rpf-blue: #254D64; --rpf-blue-dark: #183C4F; --rpf-blue-deep: #112D3A; --rpf-graphite: #182127; --rpf-copper: #C89472; --rpf-copper-light: #D8AA8A; --rpf-offwhite: #F4F2ED; --rpf-white: #FFFFFF; --rpf-line: rgba(37, 77, 100, .18); --rpf-line-soft: rgba(37, 77, 100, .08); --rpf-copper-line: rgba(200, 148, 114, .72); --rpf-ease: cubic-bezier(.2, .7, .2, 1); position: relative; isolation: isolate; /* Permite que as molduras externas ultrapassem os limites do container. */ overflow: visible !important; /* Não usamos padding para não deslocar ou redimensionar visualmente a foto. */ transition: transform 520ms var(--rpf-ease); } /* ========================================================= 02. MOLDURA EXTERNA PRINCIPAL ========================================================= */ .rota-photo-frame::before { content: ""; position: absolute; /* Moldura fica por fora do container. Não ocupa espaço no layout. */ inset: -9px; z-index: -1; pointer-events: none; border-radius: 18px; border: 1px solid transparent; /* ===================================================== BORDA MULTITOM ===================================================== */ background: linear-gradient( rgba(255,255,255,.025), rgba(255,255,255,.025) ) padding-box, linear-gradient( 135deg, rgba(37,77,100,.48) 0%, rgba(37,77,100,.13) 25%, rgba(255,255,255,.62) 46%, rgba(200,148,114,.74) 67%, rgba(37,77,100,.20) 86%, rgba(37,77,100,.42) 100% ) border-box; box-shadow: /* sombra principal */ 0 30px 70px rgba(24,33,39,.12), /* sombra curta */ 0 8px 24px rgba(24,33,39,.055), /* luz muito fina */ inset 0 1px 0 rgba(255,255,255,.54); transition: inset 520ms var(--rpf-ease), box-shadow 520ms var(--rpf-ease), border-color 420ms ease; } /* ========================================================= 03. FRAME DESLOCADO ARQUITETÔNICO ========================================================= */ .rota-photo-frame::after { content: ""; position: absolute; /* Este frame deslocado gera profundidade sem afetar o tamanho da imagem. */ top: 13px; left: -15px; width: calc(100% + 3px); height: calc(100% + 3px); z-index: -2; pointer-events: none; border-radius: 18px; border: 1px solid rgba(37,77,100,.16); background: /* cobre no canto inferior */ radial-gradient( circle at 12% 88%, rgba(200,148,114,.10), transparent 27% ), /* azul técnico */ linear-gradient( 145deg, rgba(37,77,100,.038), rgba(37,77,100,.012) ); box-shadow: 0 16px 34px rgba(24,33,39,.035); transition: transform 520ms var(--rpf-ease), border-color 420ms ease, background 420ms ease; } /* ========================================================= 04. WIDGET DA IMAGEM ========================================================= */ .rota-photo-frame .elementor-widget-image { position: relative; z-index: 2; /* Não alteramos largura nem altura. */ overflow: visible; } /* ========================================================= 05. FIGURE ========================================================= */ .rota-photo-frame .elementor-widget-image figure { position: relative; margin: inherit; /* Nenhuma dimensão é aplicada aqui. */ } /* ========================================================= 06. IMAGEM ========================================================= */ .rota-photo-frame .elementor-widget-image img { /* IMPORTANTE: Não há width, height, object-fit, aspect-ratio ou object-position. */ position: relative; z-index: 1; border-radius: 12px; box-shadow: /* sombra interna da fotografia */ 0 12px 34px rgba(24,33,39,.075); transition: filter 500ms ease, box-shadow 500ms ease; } /* ========================================================= 07. MOLDURA INTERNA DE PRECISÃO ========================================================= */ .rota-photo-frame .elementor-widget-image::before { content: ""; position: absolute; /* acompanha exatamente o widget, sem mudar sua dimensão. */ inset: -1px; z-index: 3; pointer-events: none; border-radius: 13px; border: 1px solid rgba(255,255,255,.48); box-shadow: inset 0 0 0 1px rgba(37,77,100,.055), inset 0 1px 0 rgba(255,255,255,.32); transition: border-color 400ms ease, box-shadow 400ms ease; } /* ========================================================= 08. CAMADA EDITORIAL SOBRE A FOTO ========================================================= */ .rota-photo-frame .elementor-widget-image::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 12px; /* Apenas acabamento óptico. Não muda a fotografia. */ background: /* pequena luz editorial superior */ linear-gradient( 145deg, rgba(255,255,255,.10) 0%, transparent 25% ), /* profundidade inferior */ linear-gradient( 180deg, transparent 68%, rgba(17,45,58,.055) 100% ); } /* ========================================================= 09. DETALHE COBRE SUPERIOR ========================================================= */ /* Usa o próprio pseudo do primeiro filho interno, evitando HTML adicional. */ .rota-photo-frame .elementor-widget-image figure::before { content: ""; position: absolute; top: -13px; right: 24px; z-index: 5; width: 68px; height: 2px; pointer-events: none; border-radius: 999px; background: linear-gradient( 90deg, transparent 0%, var(--rpf-copper) 28%, var(--rpf-copper-light) 72%, transparent 100% ); box-shadow: -16px 0 0 -0.5px rgba(37,77,100,.18); transition: width 480ms var(--rpf-ease), opacity 400ms ease; } /* ========================================================= 10. DETALHE TÉCNICO INFERIOR ========================================================= */ .rota-photo-frame .elementor-widget-image figure::after { content: ""; position: absolute; left: 20px; bottom: -14px; z-index: 5; width: 42px; height: 3px; pointer-events: none; border-radius: 999px; background: var(--rpf-copper); box-shadow: /* segunda barra */ 50px 0 0 rgba(200,148,114,.32), /* terceira barra técnica */ 79px 0 0 -1px rgba(37,77,100,.28); transition: width 460ms var(--rpf-ease); } /* ========================================================= 11. LINHA VERTICAL EDITORIAL ========================================================= */ /* Em Elementor, frequentemente o widget possui .elementor-widget-container. Aproveitamos esse elemento para mais uma camada. */ .rota-photo-frame .elementor-widget-image .elementor-widget-container { position: relative; /* Importante: nenhuma largura ou altura alterada. */ } .rota-photo-frame .elementor-widget-image .elementor-widget-container::before { content: ""; position: absolute; right: -14px; top: 12%; z-index: 5; width: 1px; height: 28%; pointer-events: none; background: linear-gradient( 180deg, transparent, rgba(200,148,114,.72), rgba(37,77,100,.26), transparent ); } /* ========================================================= 12. MICRO PONTO DE PRECISÃO ========================================================= */ .rota-photo-frame .elementor-widget-image .elementor-widget-container::after { content: ""; position: absolute; right: -17px; top: calc(12% + 31%); z-index: 5; width: 7px; height: 7px; pointer-events: none; border-radius: 50%; background: var(--rpf-copper); border: 2px solid var(--rpf-offwhite); box-shadow: 0 0 0 1px rgba(37,77,100,.12); } /* ========================================================= 13. HOVER PREMIUM ========================================================= */ @media (hover:hover) { .rota-photo-frame:hover { /* Move o conjunto poucos pixels. NÃO altera seu tamanho. */ transform: translateY(-4px); } .rota-photo-frame:hover::before { inset: -11px; box-shadow: 0 38px 84px rgba(24,33,39,.14), 0 10px 28px rgba(24,33,39,.065), inset 0 1px 0 rgba(255,255,255,.62); } .rota-photo-frame:hover::after { transform: translate(-4px, 4px); border-color: rgba(37,77,100,.24); } .rota-photo-frame:hover .elementor-widget-image::before { border-color: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(37,77,100,.08), inset 0 1px 0 rgba(255,255,255,.44); } /* Não aplicamos scale na imagem. Assim ela mantém exatamente suas dimensões. */ .rota-photo-frame:hover .elementor-widget-image img { box-shadow: 0 16px 40px rgba(24,33,39,.095); } .rota-photo-frame:hover .elementor-widget-image figure::before { width: 84px; } .rota-photo-frame:hover .elementor-widget-image figure::after { width: 52px; } } /* ========================================================= 14. VARIAÇÃO — MAIS MINIMALISTA ========================================================= */ /* Opcional. Classes: rota-photo-frame rota-photo-frame--minimal Mantém a moldura sofisticada, mas reduz os detalhes técnicos. */ .rota-photo-frame--minimal .elementor-widget-image .elementor-widget-container::before, .rota-photo-frame--minimal .elementor-widget-image .elementor-widget-container::after { display: none; } /* ========================================================= 15. VARIAÇÃO — MAIS EDITORIAL ========================================================= */ /* Opcional. Classes: rota-photo-frame rota-photo-frame--editorial Não altera tamanho. Apenas muda o tratamento visual. */ .rota-photo-frame--editorial .elementor-widget-image img { filter: saturate(.95) contrast(1.015); } /* ========================================================= 16. FUNDOS ESCUROS ========================================================= */ /* Se a foto estiver dentro de um dos fundos escuros do sistema global, ajustamos automaticamente as bordas. */ .rota-bg--dark-01 .rota-photo-frame::before, .rota-bg--dark-02 .rota-photo-frame::before, .rota-bg--dark-03 .rota-photo-frame::before { background: linear-gradient( rgba(255,255,255,.025), rgba(255,255,255,.025) ) padding-box, linear-gradient( 135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.07) 28%, rgba(200,148,114,.76) 63%, rgba(255,255,255,.13) 100% ) border-box; } .rota-bg--dark-01 .rota-photo-frame::after, .rota-bg--dark-02 .rota-photo-frame::after, .rota-bg--dark-03 .rota-photo-frame::after { border-color: rgba(255,255,255,.12); } /* ========================================================= 17. TABLET ========================================================= */ @media (max-width: 1024px) { .rota-photo-frame::before { inset: -7px; } .rota-photo-frame::after { top: 10px; left: -11px; } .rota-photo-frame .elementor-widget-image figure::before { top: -11px; width: 58px; } .rota-photo-frame .elementor-widget-image figure::after { bottom: -11px; } } /* ========================================================= 18. MOBILE ========================================================= */ @media (max-width: 767px) { .rota-photo-frame::before { inset: -5px; border-radius: 14px; box-shadow: 0 22px 48px rgba(24,33,39,.10), 0 6px 18px rgba(24,33,39,.045); } .rota-photo-frame::after { top: 8px; left: -7px; width: calc(100% + 1px); height: calc(100% + 1px); border-radius: 14px; } .rota-photo-frame .elementor-widget-image img { border-radius: 10px; } .rota-photo-frame .elementor-widget-image::before, .rota-photo-frame .elementor-widget-image::after { border-radius: 10px; } .rota-photo-frame .elementor-widget-image figure::before { top: -8px; right: 16px; width: 46px; } .rota-photo-frame .elementor-widget-image figure::after { left: 14px; bottom: -9px; width: 30px; box-shadow: 37px 0 0 rgba(200,148,114,.30), 59px 0 0 -1px rgba(37,77,100,.25); } /* Retira a barra lateral em telas pequenas para não adicionar ruído visual. */ .rota-photo-frame .elementor-widget-image .elementor-widget-container::before, .rota-photo-frame .elementor-widget-image .elementor-widget-container::after { display: none; } } /* ========================================================= 19. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .rota-photo-frame, .rota-photo-frame::before, .rota-photo-frame::after, .rota-photo-frame .elementor-widget-image::before, .rota-photo-frame .elementor-widget-image::after, .rota-photo-frame .elementor-widget-image figure::before, .rota-photo-frame .elementor-widget-image figure::after, .rota-photo-frame .elementor-widget-image img { transition: none !important; } .rota-photo-frame:hover { transform: none; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4e726888 *//* ========================================================= ROTA — PHOTO FRAME SIGNATURE Lucas Leitão Direção Criativa 01 — Sistema Clínico Humano Aplicar no Container Elementor: rota-photo-frame IMPORTANTE: Este CSS NÃO altera: - width da imagem - height da imagem - aspect-ratio - object-fit - object-position A imagem mantém exatamente o tamanho definido no Elementor. ========================================================= */ /* ========================================================= 01. TOKENS ========================================================= */ .rota-photo-frame { --rpf-blue: #254D64; --rpf-blue-dark: #183C4F; --rpf-blue-deep: #112D3A; --rpf-graphite: #182127; --rpf-copper: #C89472; --rpf-copper-light: #D8AA8A; --rpf-offwhite: #F4F2ED; --rpf-white: #FFFFFF; --rpf-line: rgba(37, 77, 100, .18); --rpf-line-soft: rgba(37, 77, 100, .08); --rpf-copper-line: rgba(200, 148, 114, .72); --rpf-ease: cubic-bezier(.2, .7, .2, 1); position: relative; isolation: isolate; /* Permite que as molduras externas ultrapassem os limites do container. */ overflow: visible !important; /* Não usamos padding para não deslocar ou redimensionar visualmente a foto. */ transition: transform 520ms var(--rpf-ease); } /* ========================================================= 02. MOLDURA EXTERNA PRINCIPAL ========================================================= */ .rota-photo-frame::before { content: ""; position: absolute; /* Moldura fica por fora do container. Não ocupa espaço no layout. */ inset: -9px; z-index: -1; pointer-events: none; border-radius: 18px; border: 1px solid transparent; /* ===================================================== BORDA MULTITOM ===================================================== */ background: linear-gradient( rgba(255,255,255,.025), rgba(255,255,255,.025) ) padding-box, linear-gradient( 135deg, rgba(37,77,100,.48) 0%, rgba(37,77,100,.13) 25%, rgba(255,255,255,.62) 46%, rgba(200,148,114,.74) 67%, rgba(37,77,100,.20) 86%, rgba(37,77,100,.42) 100% ) border-box; box-shadow: /* sombra principal */ 0 30px 70px rgba(24,33,39,.12), /* sombra curta */ 0 8px 24px rgba(24,33,39,.055), /* luz muito fina */ inset 0 1px 0 rgba(255,255,255,.54); transition: inset 520ms var(--rpf-ease), box-shadow 520ms var(--rpf-ease), border-color 420ms ease; } /* ========================================================= 03. FRAME DESLOCADO ARQUITETÔNICO ========================================================= */ .rota-photo-frame::after { content: ""; position: absolute; /* Este frame deslocado gera profundidade sem afetar o tamanho da imagem. */ top: 13px; left: -15px; width: calc(100% + 3px); height: calc(100% + 3px); z-index: -2; pointer-events: none; border-radius: 18px; border: 1px solid rgba(37,77,100,.16); background: /* cobre no canto inferior */ radial-gradient( circle at 12% 88%, rgba(200,148,114,.10), transparent 27% ), /* azul técnico */ linear-gradient( 145deg, rgba(37,77,100,.038), rgba(37,77,100,.012) ); box-shadow: 0 16px 34px rgba(24,33,39,.035); transition: transform 520ms var(--rpf-ease), border-color 420ms ease, background 420ms ease; } /* ========================================================= 04. WIDGET DA IMAGEM ========================================================= */ .rota-photo-frame .elementor-widget-image { position: relative; z-index: 2; /* Não alteramos largura nem altura. */ overflow: visible; } /* ========================================================= 05. FIGURE ========================================================= */ .rota-photo-frame .elementor-widget-image figure { position: relative; margin: inherit; /* Nenhuma dimensão é aplicada aqui. */ } /* ========================================================= 06. IMAGEM ========================================================= */ .rota-photo-frame .elementor-widget-image img { /* IMPORTANTE: Não há width, height, object-fit, aspect-ratio ou object-position. */ position: relative; z-index: 1; border-radius: 12px; box-shadow: /* sombra interna da fotografia */ 0 12px 34px rgba(24,33,39,.075); transition: filter 500ms ease, box-shadow 500ms ease; } /* ========================================================= 07. MOLDURA INTERNA DE PRECISÃO ========================================================= */ .rota-photo-frame .elementor-widget-image::before { content: ""; position: absolute; /* acompanha exatamente o widget, sem mudar sua dimensão. */ inset: -1px; z-index: 3; pointer-events: none; border-radius: 13px; border: 1px solid rgba(255,255,255,.48); box-shadow: inset 0 0 0 1px rgba(37,77,100,.055), inset 0 1px 0 rgba(255,255,255,.32); transition: border-color 400ms ease, box-shadow 400ms ease; } /* ========================================================= 08. CAMADA EDITORIAL SOBRE A FOTO ========================================================= */ .rota-photo-frame .elementor-widget-image::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 12px; /* Apenas acabamento óptico. Não muda a fotografia. */ background: /* pequena luz editorial superior */ linear-gradient( 145deg, rgba(255,255,255,.10) 0%, transparent 25% ), /* profundidade inferior */ linear-gradient( 180deg, transparent 68%, rgba(17,45,58,.055) 100% ); } /* ========================================================= 09. DETALHE COBRE SUPERIOR ========================================================= */ /* Usa o próprio pseudo do primeiro filho interno, evitando HTML adicional. */ .rota-photo-frame .elementor-widget-image figure::before { content: ""; position: absolute; top: -13px; right: 24px; z-index: 5; width: 68px; height: 2px; pointer-events: none; border-radius: 999px; background: linear-gradient( 90deg, transparent 0%, var(--rpf-copper) 28%, var(--rpf-copper-light) 72%, transparent 100% ); box-shadow: -16px 0 0 -0.5px rgba(37,77,100,.18); transition: width 480ms var(--rpf-ease), opacity 400ms ease; } /* ========================================================= 10. DETALHE TÉCNICO INFERIOR ========================================================= */ .rota-photo-frame .elementor-widget-image figure::after { content: ""; position: absolute; left: 20px; bottom: -14px; z-index: 5; width: 42px; height: 3px; pointer-events: none; border-radius: 999px; background: var(--rpf-copper); box-shadow: /* segunda barra */ 50px 0 0 rgba(200,148,114,.32), /* terceira barra técnica */ 79px 0 0 -1px rgba(37,77,100,.28); transition: width 460ms var(--rpf-ease); } /* ========================================================= 11. LINHA VERTICAL EDITORIAL ========================================================= */ /* Em Elementor, frequentemente o widget possui .elementor-widget-container. Aproveitamos esse elemento para mais uma camada. */ .rota-photo-frame .elementor-widget-image .elementor-widget-container { position: relative; /* Importante: nenhuma largura ou altura alterada. */ } .rota-photo-frame .elementor-widget-image .elementor-widget-container::before { content: ""; position: absolute; right: -14px; top: 12%; z-index: 5; width: 1px; height: 28%; pointer-events: none; background: linear-gradient( 180deg, transparent, rgba(200,148,114,.72), rgba(37,77,100,.26), transparent ); } /* ========================================================= 12. MICRO PONTO DE PRECISÃO ========================================================= */ .rota-photo-frame .elementor-widget-image .elementor-widget-container::after { content: ""; position: absolute; right: -17px; top: calc(12% + 31%); z-index: 5; width: 7px; height: 7px; pointer-events: none; border-radius: 50%; background: var(--rpf-copper); border: 2px solid var(--rpf-offwhite); box-shadow: 0 0 0 1px rgba(37,77,100,.12); } /* ========================================================= 13. HOVER PREMIUM ========================================================= */ @media (hover:hover) { .rota-photo-frame:hover { /* Move o conjunto poucos pixels. NÃO altera seu tamanho. */ transform: translateY(-4px); } .rota-photo-frame:hover::before { inset: -11px; box-shadow: 0 38px 84px rgba(24,33,39,.14), 0 10px 28px rgba(24,33,39,.065), inset 0 1px 0 rgba(255,255,255,.62); } .rota-photo-frame:hover::after { transform: translate(-4px, 4px); border-color: rgba(37,77,100,.24); } .rota-photo-frame:hover .elementor-widget-image::before { border-color: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(37,77,100,.08), inset 0 1px 0 rgba(255,255,255,.44); } /* Não aplicamos scale na imagem. Assim ela mantém exatamente suas dimensões. */ .rota-photo-frame:hover .elementor-widget-image img { box-shadow: 0 16px 40px rgba(24,33,39,.095); } .rota-photo-frame:hover .elementor-widget-image figure::before { width: 84px; } .rota-photo-frame:hover .elementor-widget-image figure::after { width: 52px; } } /* ========================================================= 14. VARIAÇÃO — MAIS MINIMALISTA ========================================================= */ /* Opcional. Classes: rota-photo-frame rota-photo-frame--minimal Mantém a moldura sofisticada, mas reduz os detalhes técnicos. */ .rota-photo-frame--minimal .elementor-widget-image .elementor-widget-container::before, .rota-photo-frame--minimal .elementor-widget-image .elementor-widget-container::after { display: none; } /* ========================================================= 15. VARIAÇÃO — MAIS EDITORIAL ========================================================= */ /* Opcional. Classes: rota-photo-frame rota-photo-frame--editorial Não altera tamanho. Apenas muda o tratamento visual. */ .rota-photo-frame--editorial .elementor-widget-image img { filter: saturate(.95) contrast(1.015); } /* ========================================================= 16. FUNDOS ESCUROS ========================================================= */ /* Se a foto estiver dentro de um dos fundos escuros do sistema global, ajustamos automaticamente as bordas. */ .rota-bg--dark-01 .rota-photo-frame::before, .rota-bg--dark-02 .rota-photo-frame::before, .rota-bg--dark-03 .rota-photo-frame::before { background: linear-gradient( rgba(255,255,255,.025), rgba(255,255,255,.025) ) padding-box, linear-gradient( 135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.07) 28%, rgba(200,148,114,.76) 63%, rgba(255,255,255,.13) 100% ) border-box; } .rota-bg--dark-01 .rota-photo-frame::after, .rota-bg--dark-02 .rota-photo-frame::after, .rota-bg--dark-03 .rota-photo-frame::after { border-color: rgba(255,255,255,.12); } /* ========================================================= 17. TABLET ========================================================= */ @media (max-width: 1024px) { .rota-photo-frame::before { inset: -7px; } .rota-photo-frame::after { top: 10px; left: -11px; } .rota-photo-frame .elementor-widget-image figure::before { top: -11px; width: 58px; } .rota-photo-frame .elementor-widget-image figure::after { bottom: -11px; } } /* ========================================================= 18. MOBILE ========================================================= */ @media (max-width: 767px) { .rota-photo-frame::before { inset: -5px; border-radius: 14px; box-shadow: 0 22px 48px rgba(24,33,39,.10), 0 6px 18px rgba(24,33,39,.045); } .rota-photo-frame::after { top: 8px; left: -7px; width: calc(100% + 1px); height: calc(100% + 1px); border-radius: 14px; } .rota-photo-frame .elementor-widget-image img { border-radius: 10px; } .rota-photo-frame .elementor-widget-image::before, .rota-photo-frame .elementor-widget-image::after { border-radius: 10px; } .rota-photo-frame .elementor-widget-image figure::before { top: -8px; right: 16px; width: 46px; } .rota-photo-frame .elementor-widget-image figure::after { left: 14px; bottom: -9px; width: 30px; box-shadow: 37px 0 0 rgba(200,148,114,.30), 59px 0 0 -1px rgba(37,77,100,.25); } /* Retira a barra lateral em telas pequenas para não adicionar ruído visual. */ .rota-photo-frame .elementor-widget-image .elementor-widget-container::before, .rota-photo-frame .elementor-widget-image .elementor-widget-container::after { display: none; } } /* ========================================================= 19. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .rota-photo-frame, .rota-photo-frame::before, .rota-photo-frame::after, .rota-photo-frame .elementor-widget-image::before, .rota-photo-frame .elementor-widget-image::after, .rota-photo-frame .elementor-widget-image figure::before, .rota-photo-frame .elementor-widget-image figure::after, .rota-photo-frame .elementor-widget-image img { transition: none !important; } .rota-photo-frame:hover { transform: none; } }/* End custom CSS */ /* Start custom CSS *//* ========================================================= ROTA — GLOBAL DESIGN SYSTEM Lucas Leitão Direção Criativa 01 — Sistema Clínico Humano Paleta: Azul profundo #254D64 Grafite #182127 Off-white #F4F2ED Cobre #C89472 ========================================================= */ /* ========================================================= 01. TOKENS GLOBAIS ========================================================= */ :root { --rota-primary: #254D64; --rota-primary-dark: #1B3D50; --rota-primary-deep: #112D3A; --rota-text: #182127; --rota-muted: #698A99; --rota-accent: #C89472; --rota-accent-dark: #A97859; --rota-bg: #F4F2ED; --rota-bg-light: #FAF9F6; --rota-surface: #FFFFFF; --rota-border: #D8D8D2; --rota-shadow-sm: 0 8px 24px rgba(24, 33, 39, .05); --rota-shadow-md: 0 18px 46px rgba(24, 33, 39, .08); --rota-shadow-lg: 0 32px 80px rgba(24, 33, 39, .11); --rota-radius: 10px; --rota-radius-lg: 18px; --rota-ease: cubic-bezier(.2, .7, .2, 1); } /* ========================================================= 02. BOTÕES DE CONTATO ========================================================= */ /* Elementor: Avançado → CSS Classes FUNDO CLARO: rota-btn-contact rota-btn-contact--light FUNDO ESCURO: rota-btn-contact rota-btn-contact--dark */ .rota-btn-contact .elementor-button, a.rota-btn-contact { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 14px 24px; overflow: hidden; border-radius: 8px; font-size: 15px; font-weight: 650; line-height: 1.2; letter-spacing: -.01em; text-decoration: none; transition: color 320ms ease, background-color 320ms ease, border-color 320ms ease, box-shadow 420ms var(--rota-ease), transform 420ms var(--rota-ease); } /* seta */ .rota-btn-contact .elementor-button::after, a.rota-btn-contact::after { content: "→"; position: relative; display: inline-block; font-size: 17px; line-height: 1; transition: transform 360ms var(--rota-ease); } /* linha inferior */ .rota-btn-contact .elementor-button::before, a.rota-btn-contact::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left center; transition: transform 420ms var(--rota-ease); } /* ========================================================= BOTÃO — FUNDO CLARO ========================================================= */ .rota-btn-contact--light .elementor-button, a.rota-btn-contact--light { color: #FFFFFF; background: linear-gradient( 135deg, #2A566F 0%, var(--rota-primary) 48%, var(--rota-primary-dark) 100% ); border: 1px solid rgba(37, 77, 100, .9); box-shadow: 0 7px 18px rgba(37, 77, 100, .16), inset 0 1px 0 rgba(255,255,255,.12); } .rota-btn-contact--light .elementor-button::before, a.rota-btn-contact--light::before { background: var(--rota-accent); } @media (hover:hover) { .rota-btn-contact--light .elementor-button:hover, a.rota-btn-contact--light:hover { color: #FFFFFF; transform: translateY(-3px); background: linear-gradient( 135deg, var(--rota-primary) 0%, var(--rota-primary-dark) 52%, var(--rota-primary-deep) 100% ); box-shadow: 0 16px 38px rgba(24,33,39,.17), inset 0 1px 0 rgba(255,255,255,.10); } .rota-btn-contact--light .elementor-button:hover::after, a.rota-btn-contact--light:hover::after { transform: translateX(4px); } .rota-btn-contact--light .elementor-button:hover::before, a.rota-btn-contact--light:hover::before { transform: scaleX(1); } } /* ========================================================= BOTÃO — FUNDO ESCURO ========================================================= */ .rota-btn-contact--dark .elementor-button, a.rota-btn-contact--dark { color: var(--rota-primary-deep); background: linear-gradient( 135deg, #FFFFFF 0%, #F8F6F1 52%, #EEEAE2 100% ); border: 1px solid rgba(255,255,255,.50); box-shadow: 0 10px 28px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.75); } .rota-btn-contact--dark .elementor-button::before, a.rota-btn-contact--dark::before { background: var(--rota-accent); } @media (hover:hover) { .rota-btn-contact--dark .elementor-button:hover, a.rota-btn-contact--dark:hover { color: var(--rota-primary-deep); transform: translateY(-3px); background: #FFFFFF; border-color: #FFFFFF; box-shadow: 0 18px 40px rgba(0,0,0,.18); } .rota-btn-contact--dark .elementor-button:hover::after, a.rota-btn-contact--dark:hover::after { transform: translateX(4px); } .rota-btn-contact--dark .elementor-button:hover::before, a.rota-btn-contact--dark:hover::before { transform: scaleX(1); } } /* acessibilidade */ .rota-btn-contact .elementor-button:focus-visible, a.rota-btn-contact:focus-visible { outline: 3px solid rgba(200,148,114,.55); outline-offset: 4px; } /* ========================================================= 03. DESTAQUE GLOBAL PARA ========================================================= */ /* Exemplo: Terapia para ansiedade com objetivos claros Por padrão = versão clara. Em fundos escuros = versão escura automática. */ /* ========================================================= — BASE ========================================================= */ .elementor .elementor-heading-title em, .elementor .elementor-widget-text-editor em, .elementor p em, .elementor h1 em, .elementor h2 em, .elementor h3 em { position: relative; display: inline; padding: 0 .055em; font-style: normal; font-weight: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ========================================================= — VERSÃO PARA FUNDO CLARO ========================================================= */ .elementor .elementor-heading-title em, .elementor .elementor-widget-text-editor em, .elementor p em, .elementor h1 em, .elementor h2 em, .elementor h3 em, .rota-em--light { color: var(--rota-primary); background-image: linear-gradient( 180deg, transparent 63%, rgba(200,148,114,.22) 63%, rgba(200,148,114,.22) 92%, transparent 92% ); } /* Versão mais sofisticada para headlines */ .elementor h1 em, .elementor h2 em, .elementor .elementor-heading-title em { color: var(--rota-primary); background-image: linear-gradient( 180deg, transparent 67%, rgba(200,148,114,.24) 67%, rgba(200,148,114,.24) 94%, transparent 94% ); } /* ========================================================= — VERSÃO PARA FUNDO ESCURO ========================================================= */ /* Aplicada automaticamente dentro de: rota-bg--dark-01 rota-bg--dark-02 rota-bg--dark-03 Ou manualmente: texto */ .rota-bg--dark-01 em, .rota-bg--dark-02 em, .rota-bg--dark-03 em, .rota-em--dark { color: #FFF9F4 !important; font-style: normal; background-image: linear-gradient( 180deg, transparent 62%, rgba(200,148,114,.34) 62%, rgba(200,148,114,.34) 94%, transparent 94% ) !important; text-shadow: 0 1px 16px rgba(255,255,255,.035); } /* Headlines em fundo escuro: mais presença e acabamento premium */ .rota-bg--dark-01 h1 em, .rota-bg--dark-01 h2 em, .rota-bg--dark-01 h3 em, .rota-bg--dark-02 h1 em, .rota-bg--dark-02 h2 em, .rota-bg--dark-02 h3 em, .rota-bg--dark-03 h1 em, .rota-bg--dark-03 h2 em, .rota-bg--dark-03 h3 em, .rota-bg--dark-01 .elementor-heading-title em, .rota-bg--dark-02 .elementor-heading-title em, .rota-bg--dark-03 .elementor-heading-title em { color: #FFFFFF !important; background-image: linear-gradient( 180deg, transparent 66%, rgba(200,148,114,.44) 66%, rgba(200,148,114,.44) 95%, transparent 95% ) !important; } /* ========================================================= — VARIAÇÃO MANUAL CLARA ========================================================= */ /* Caso você queira forçar a versão clara: objetivos claros */ .rota-em--light { color: var(--rota-primary) !important; background-image: linear-gradient( 180deg, transparent 66%, rgba(200,148,114,.24) 66%, rgba(200,148,114,.24) 94%, transparent 94% ) !important; } /* ========================================================= 04. ESTRUTURA BASE DOS FUNDOS ========================================================= */ .rota-bg--light-01, .rota-bg--light-02, .rota-bg--light-03, .rota-bg--dark-01, .rota-bg--dark-02, .rota-bg--dark-03 { position: relative; isolation: isolate; overflow: hidden; } /* Garante que os widgets Elementor fiquem acima dos overlays decorativos. */ .rota-bg--light-01 > *, .rota-bg--light-02 > *, .rota-bg--light-03 > *, .rota-bg--dark-01 > *, .rota-bg--dark-02 > *, .rota-bg--dark-03 > * { position: relative; z-index: 2; } /* ========================================================= 05. FUNDO CLARO 01 CLINICAL AURORA ========================================================= */ .rota-bg--light-01 { background-color: #F6F4EF; background-image: radial-gradient( ellipse at 82% -5%, rgba(200,148,114,.20) 0%, rgba(200,148,114,.09) 23%, transparent 52% ), radial-gradient( ellipse at -8% 44%, rgba(37,77,100,.105) 0%, rgba(37,77,100,.035) 30%, transparent 57% ), radial-gradient( ellipse at 47% 32%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 32%, transparent 62% ), linear-gradient( 112deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.22) 34%, transparent 52% ), linear-gradient( 135deg, #FBFAF7 0%, #F4F2ED 52%, #ECECE7 100% ); } .rota-bg--light-01::before { content: ""; position: absolute; width: 42%; height: 140%; top: -25%; right: 7%; z-index: 0; pointer-events: none; opacity: .32; transform: rotate(14deg); filter: blur(2px); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.85), transparent ); } .rota-bg--light-01::after { content: ""; position: absolute; width: 470px; height: 470px; right: -240px; bottom: -270px; z-index: 0; pointer-events: none; border: 1px solid rgba(37,77,100,.08); border-radius: 50%; box-shadow: 0 0 0 70px rgba(37,77,100,.017), 0 0 0 140px rgba(200,148,114,.012); } /* ========================================================= 06. FUNDO CLARO 02 MINERAL MIST ========================================================= */ .rota-bg--light-02 { background-color: #F2F2EE; background-image: radial-gradient( circle at 15% 0%, rgba(37,77,100,.14) 0%, rgba(37,77,100,.06) 22%, transparent 45% ), radial-gradient( circle at 92% 85%, rgba(200,148,114,.17) 0%, rgba(200,148,114,.05) 24%, transparent 47% ), radial-gradient( ellipse at 55% 46%, rgba(255,255,255,.90) 0%, rgba(255,255,255,.44) 28%, transparent 60% ), linear-gradient( 118deg, #EEF1EF 0%, #F8F6F1 44%, #F1EEE7 100% ); } .rota-bg--light-02::before { content: ""; position: absolute; top: -20%; left: 28%; width: 22%; height: 145%; z-index: 0; pointer-events: none; transform: rotate(8deg); opacity: .40; filter: blur(6px); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.95), transparent ); } .rota-bg--light-02::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .32; background-image: linear-gradient( 90deg, transparent 0%, transparent 18%, rgba(37,77,100,.045) 18.05%, transparent 18.1%, transparent 81%, rgba(37,77,100,.035) 81.05%, transparent 81.1% ), linear-gradient( 180deg, transparent 0%, transparent 78%, rgba(200,148,114,.08) 78.1%, transparent 78.2% ); } /* ========================================================= 07. FUNDO CLARO 03 STRUCTURED ATLAS ========================================================= */ .rota-bg--light-03 { background-color: #F4F2ED; background-image: linear-gradient( rgba(37,77,100,.032) 1px, transparent 1px ), linear-gradient( 90deg, rgba(37,77,100,.032) 1px, transparent 1px ), radial-gradient( ellipse at 82% 18%, rgba(200,148,114,.18) 0%, rgba(200,148,114,.06) 24%, transparent 48% ), radial-gradient( ellipse at 3% 86%, rgba(37,77,100,.09) 0%, transparent 40% ), radial-gradient( ellipse at 52% 35%, rgba(255,255,255,.90), transparent 58% ), linear-gradient( 145deg, #F8F7F3 0%, #F1F0EB 100% ); background-size: 46px 46px, 46px 46px, auto, auto, auto, auto; } .rota-bg--light-03::before { content: ""; position: absolute; width: 520px; height: 520px; top: -270px; right: -180px; z-index: 0; pointer-events: none; border: 1px solid rgba(37,77,100,.10); border-radius: 50%; box-shadow: 0 0 0 52px rgba(37,77,100,.018), 0 0 0 104px rgba(200,148,114,.016); } .rota-bg--light-03::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( ellipse at center, rgba(244,242,237,.05) 0%, rgba(244,242,237,.16) 46%, rgba(244,242,237,.70) 100% ); } /* ========================================================= 08. FUNDO ESCURO 01 DEEP CLINICAL BLUE ========================================================= */ .rota-bg--dark-01 { color: #FFFFFF; background-color: #183A4B; background-image: radial-gradient( ellipse at 87% 2%, rgba(200,148,114,.30) 0%, rgba(200,148,114,.10) 22%, transparent 48% ), radial-gradient( ellipse at 5% 82%, rgba(105,138,153,.30) 0%, rgba(105,138,153,.08) 26%, transparent 54% ), radial-gradient( ellipse at 49% 38%, rgba(255,255,255,.065) 0%, transparent 48% ), linear-gradient( 132deg, #2B5870 0%, #254D64 32%, #1B4053 62%, #112D3A 100% ); } .rota-bg--dark-01::before { content: ""; position: absolute; top: -35%; left: 58%; width: 30%; height: 180%; z-index: 0; pointer-events: none; opacity: .18; transform: rotate(16deg); filter: blur(8px); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.70), transparent ); } .rota-bg--dark-01::after { content: ""; position: absolute; width: 560px; height: 560px; right: -310px; bottom: -330px; z-index: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.055); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.014), 0 0 0 140px rgba(200,148,114,.018); } /* ========================================================= 09. FUNDO ESCURO 02 GRAPHITE EDITORIAL ========================================================= */ .rota-bg--dark-02 { color: #FFFFFF; background-color: #182127; background-image: radial-gradient( ellipse at 12% 4%, rgba(37,77,100,.55) 0%, rgba(37,77,100,.15) 28%, transparent 54% ), radial-gradient( ellipse at 88% 88%, rgba(200,148,114,.18) 0%, rgba(200,148,114,.05) 24%, transparent 48% ), radial-gradient( ellipse at 58% 46%, rgba(255,255,255,.035) 0%, transparent 40% ), linear-gradient( 125deg, #1B252B 0%, #202D33 35%, #182127 68%, #11191E 100% ); } .rota-bg--dark-02::before { content: ""; position: absolute; top: -10%; right: 18%; width: 1px; height: 120%; z-index: 0; pointer-events: none; opacity: .75; background: linear-gradient( 180deg, transparent, rgba(200,148,114,.28) 20%, rgba(200,148,114,.09) 72%, transparent ); box-shadow: -240px 0 0 rgba(255,255,255,.022), 190px 0 0 rgba(255,255,255,.015); } .rota-bg--dark-02::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( 90deg, rgba(0,0,0,.12), transparent 22%, transparent 78%, rgba(0,0,0,.13) ); } /* ========================================================= 10. FUNDO ESCURO 03 STRUCTURED MIDNIGHT ========================================================= */ .rota-bg--dark-03 { color: #FFFFFF; background-color: #173746; background-image: linear-gradient( rgba(255,255,255,.026) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.026) 1px, transparent 1px ), radial-gradient( ellipse at 78% 6%, rgba(200,148,114,.24) 0%, rgba(200,148,114,.07) 22%, transparent 45% ), radial-gradient( ellipse at 8% 82%, rgba(105,138,153,.28) 0%, transparent 42% ), radial-gradient( ellipse at 50% 44%, rgba(255,255,255,.045) 0%, transparent 45% ), linear-gradient( 135deg, #28556B 0%, #1C4254 34%, #173746 68%, #102A36 100% ); background-size: 48px 48px, 48px 48px, auto, auto, auto, auto; } .rota-bg--dark-03::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( ellipse at center, transparent 0%, rgba(8,25,33,.04) 50%, rgba(8,25,33,.40) 100% ); } .rota-bg--dark-03::after { content: ""; position: absolute; width: 480px; height: 480px; left: -260px; top: -270px; z-index: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.065); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.015), 0 0 0 110px rgba(200,148,114,.015); } /* ========================================================= 11. TEXTO EM FUNDOS ESCUROS ========================================================= */ .rota-bg--dark-01, .rota-bg--dark-02, .rota-bg--dark-03 { --rota-dark-text: #F8F6F1; --rota-dark-muted: rgba(248,246,241,.72); } .rota-bg--dark-01 h1, .rota-bg--dark-01 h2, .rota-bg--dark-01 h3, .rota-bg--dark-02 h1, .rota-bg--dark-02 h2, .rota-bg--dark-02 h3, .rota-bg--dark-03 h1, .rota-bg--dark-03 h2, .rota-bg--dark-03 h3, .rota-bg--dark-01 .elementor-heading-title, .rota-bg--dark-02 .elementor-heading-title, .rota-bg--dark-03 .elementor-heading-title { color: var(--rota-dark-text); } .rota-bg--dark-01 p, .rota-bg--dark-02 p, .rota-bg--dark-03 p { color: var(--rota-dark-muted); } /* ========================================================= 12. SUPERFÍCIE PREMIUM CLARA ========================================================= */ .rota-surface-premium { position: relative; overflow: hidden; background: radial-gradient( circle at 100% 0%, rgba(200,148,114,.08), transparent 28% ), linear-gradient( 145deg, rgba(255,255,255,.98), rgba(244,242,237,.91) ); border: 1px solid rgba(37,77,100,.12); border-radius: 14px; box-shadow: 0 18px 46px rgba(24,33,39,.055), inset 0 1px 0 rgba(255,255,255,.7); } /* ========================================================= 13. SUPERFÍCIE PREMIUM ESCURA ========================================================= */ .rota-surface-premium--dark { position: relative; overflow: hidden; background: radial-gradient( circle at 100% 0%, rgba(200,148,114,.09), transparent 32% ), linear-gradient( 145deg, rgba(255,255,255,.085), rgba(255,255,255,.025) ); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: 0 20px 52px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.06); } /* ========================================================= 14. MOBILE ========================================================= */ @media (max-width: 767px) { .rota-btn-contact .elementor-button, a.rota-btn-contact { min-height: 48px; padding: 13px 19px; font-size: 14.5px; } .rota-bg--light-01::after, .rota-bg--light-03::before, .rota-bg--dark-01::after, .rota-bg--dark-03::after { transform: scale(.72); } .rota-bg--light-01::before, .rota-bg--light-02::before, .rota-bg--dark-01::before { opacity: .18; } } /* ========================================================= 15. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .rota-btn-contact .elementor-button, a.rota-btn-contact, .rota-btn-contact .elementor-button::after, a.rota-btn-contact::after, .rota-btn-contact .elementor-button::before, a.rota-btn-contact::before { transition: none !important; } }/* End custom CSS */