.elementor-24 .elementor-element.elementor-element-a1e8ed1{--display:flex;}.elementor-24 .elementor-element.elementor-element-988eda8{--display:flex;}.elementor-24 .elementor-element.elementor-element-f53cc9e{--display:flex;--overlay-opacity:0.02;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:128px;--padding-bottom:58px;--padding-left:32px;--padding-right:32px;}.elementor-24 .elementor-element.elementor-element-f53cc9e:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-f53cc9e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-d365298 );}.elementor-24 .elementor-element.elementor-element-f53cc9e::before, .elementor-24 .elementor-element.elementor-element-f53cc9e > .elementor-background-video-container::before, .elementor-24 .elementor-element.elementor-element-f53cc9e > .e-con-inner > .elementor-background-video-container::before, .elementor-24 .elementor-element.elementor-element-f53cc9e > .elementor-background-slideshow::before, .elementor-24 .elementor-element.elementor-element-f53cc9e > .e-con-inner > .elementor-background-slideshow::before, .elementor-24 .elementor-element.elementor-element-f53cc9e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/favicon.webp");--background-overlay:'';background-position:top left;background-repeat:no-repeat;background-size:40% auto;}.elementor-24 .elementor-element.elementor-element-249f292{--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-24 .elementor-element.elementor-element-249f292.e-con{--align-self:center;}.elementor-24 .elementor-element.elementor-element-3f9793d.elementor-element{--align-self:center;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );color:var( --e-global-color-primary );}.elementor-24 .elementor-element.elementor-element-8662932{text-align:center;}.elementor-24 .elementor-element.elementor-element-8662932 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );color:var( --e-global-color-secondary );}.elementor-24 .elementor-element.elementor-element-6f37e98{--display:flex;--margin-top:32px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-79afbee{z-index:1;}.elementor-24 .elementor-element.elementor-element-46d67d2{--display:flex;--margin-top:96px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-a7cc123{--display:flex;--overlay-opacity:0.02;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:58px;--padding-bottom:176px;--padding-left:32px;--padding-right:32px;}.elementor-24 .elementor-element.elementor-element-a7cc123:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-a7cc123 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-d365298 );}.elementor-24 .elementor-element.elementor-element-a7cc123::before, .elementor-24 .elementor-element.elementor-element-a7cc123 > .elementor-background-video-container::before, .elementor-24 .elementor-element.elementor-element-a7cc123 > .e-con-inner > .elementor-background-video-container::before, .elementor-24 .elementor-element.elementor-element-a7cc123 > .elementor-background-slideshow::before, .elementor-24 .elementor-element.elementor-element-a7cc123 > .e-con-inner > .elementor-background-slideshow::before, .elementor-24 .elementor-element.elementor-element-a7cc123 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/favicon.webp");--background-overlay:'';background-position:top left;background-repeat:no-repeat;background-size:40% auto;}.elementor-24 .elementor-element.elementor-element-ba97d2a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:64px 64px;--row-gap:64px;--column-gap:64px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-6f784fd{--display:flex;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-c12cd62{--display:flex;--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--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-24 .elementor-element.elementor-element-a45e9df.elementor-element{--align-self:flex-start;}.elementor-24 .elementor-element.elementor-element-1aeb157{text-align:start;}.elementor-24 .elementor-element.elementor-element-1aeb157 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );color:var( --e-global-color-secondary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );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-24 .elementor-element.elementor-element-75d362e{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-text );}.elementor-24 .elementor-element.elementor-element-ed31c83{font-family:var( --e-global-typography-5a41b70-font-family ), Sans-serif;font-size:var( --e-global-typography-5a41b70-font-size );font-weight:var( --e-global-typography-5a41b70-font-weight );line-height:var( --e-global-typography-5a41b70-line-height );letter-spacing:var( --e-global-typography-5a41b70-letter-spacing );color:var( --e-global-color-text );}.elementor-24 .elementor-element.elementor-element-fe689a9.elementor-element{--align-self:flex-start;}.elementor-24 .elementor-element.elementor-element-ba1195d{--display:flex;--overlay-opacity:0.05;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--border-radius:48px 48px 0px 0px;--margin-top:-48px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:128px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;}.elementor-24 .elementor-element.elementor-element-ba1195d:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-ba1195d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ffd776e );}.elementor-24 .elementor-element.elementor-element-ba1195d::before, .elementor-24 .elementor-element.elementor-element-ba1195d > .elementor-background-video-container::before, .elementor-24 .elementor-element.elementor-element-ba1195d > .e-con-inner > .elementor-background-video-container::before, .elementor-24 .elementor-element.elementor-element-ba1195d > .elementor-background-slideshow::before, .elementor-24 .elementor-element.elementor-element-ba1195d > .e-con-inner > .elementor-background-slideshow::before, .elementor-24 .elementor-element.elementor-element-ba1195d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/favicon.webp");--background-overlay:'';background-position:center right;background-repeat:no-repeat;background-size:35% auto;}.elementor-24 .elementor-element.elementor-element-00b04ea{--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-24 .elementor-element.elementor-element-00b04ea.e-con{--align-self:center;}.elementor-24 .elementor-element.elementor-element-5dc7b5d.elementor-element{--align-self:center;}.elementor-24 .elementor-element.elementor-element-ef4c6a5{text-align:center;}.elementor-24 .elementor-element.elementor-element-ef4c6a5 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );color:var( --e-global-color-secondary );}.elementor-24 .elementor-element.elementor-element-2b44c16{text-align:center;}.elementor-24 .elementor-element.elementor-element-a08fccb{--display:flex;--margin-top:32px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-871d3e4{z-index:1;}.elementor-24 .elementor-element.elementor-element-898b69c{--display:flex;--margin-top:32px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-54152b4{--display:flex;}.elementor-24 .elementor-element.elementor-element-370ca19{--display:flex;--overlay-opacity:0.03;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:128px;--padding-bottom:58px;--padding-left:32px;--padding-right:32px;}.elementor-24 .elementor-element.elementor-element-370ca19:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-370ca19 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-d365298 );}.elementor-24 .elementor-element.elementor-element-370ca19::before, .elementor-24 .elementor-element.elementor-element-370ca19 > .elementor-background-video-container::before, .elementor-24 .elementor-element.elementor-element-370ca19 > .e-con-inner > .elementor-background-video-container::before, .elementor-24 .elementor-element.elementor-element-370ca19 > .elementor-background-slideshow::before, .elementor-24 .elementor-element.elementor-element-370ca19 > .e-con-inner > .elementor-background-slideshow::before, .elementor-24 .elementor-element.elementor-element-370ca19 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/favicon.webp");--background-overlay:'';background-position:center left;background-repeat:no-repeat;background-size:40% auto;}.elementor-24 .elementor-element.elementor-element-98db493{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:64px 64px;--row-gap:64px;--column-gap:64px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-9f9cd7a{--display:flex;--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--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-24 .elementor-element.elementor-element-3c6e940.elementor-element{--align-self:flex-start;}.elementor-24 .elementor-element.elementor-element-5194e72.elementor-element{--align-self:flex-start;}.elementor-24 .elementor-element.elementor-element-5194e72{text-align:start;}.elementor-24 .elementor-element.elementor-element-5194e72 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );color:var( --e-global-color-secondary );}.elementor-24 .elementor-element.elementor-element-edc71de.elementor-element{--align-self:flex-start;}.elementor-24 .elementor-element.elementor-element-4fb3b02{--display:flex;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-316ba3c{--display:flex;--margin-top:96px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-683c287{--display:flex;--overlay-opacity:0.02;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:58px;--padding-bottom:176px;--padding-left:32px;--padding-right:32px;}.elementor-24 .elementor-element.elementor-element-683c287:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-683c287 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-d365298 );}.elementor-24 .elementor-element.elementor-element-683c287::before, .elementor-24 .elementor-element.elementor-element-683c287 > .elementor-background-video-container::before, .elementor-24 .elementor-element.elementor-element-683c287 > .e-con-inner > .elementor-background-video-container::before, .elementor-24 .elementor-element.elementor-element-683c287 > .elementor-background-slideshow::before, .elementor-24 .elementor-element.elementor-element-683c287 > .e-con-inner > .elementor-background-slideshow::before, .elementor-24 .elementor-element.elementor-element-683c287 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/favicon.webp");--background-overlay:'';background-position:top left;background-repeat:no-repeat;background-size:40% auto;}.elementor-24 .elementor-element.elementor-element-1163ca1{--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-24 .elementor-element.elementor-element-1163ca1.e-con{--align-self:center;}.elementor-24 .elementor-element.elementor-element-67ec29e.elementor-element{--align-self:center;}.elementor-24 .elementor-element.elementor-element-578ac1e{text-align:center;}.elementor-24 .elementor-element.elementor-element-578ac1e .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );color:var( --e-global-color-secondary );}.elementor-24 .elementor-element.elementor-element-d43ade6{text-align:center;color:var( --e-global-color-text );}.elementor-24 .elementor-element.elementor-element-da12dac{--display:flex;--margin-top:32px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-8a6f05a{z-index:1;}.elementor-24 .elementor-element.elementor-element-42c7c75{--display:flex;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--border-radius:48px 48px 0px 0px;--margin-top:-48px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:128px;--padding-bottom:128px;--padding-left:32px;--padding-right:32px;}.elementor-24 .elementor-element.elementor-element-42c7c75:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-42c7c75 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EEE3CB;}.elementor-24 .elementor-element.elementor-element-02bb73c{--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-24 .elementor-element.elementor-element-02bb73c.e-con{--align-self:center;}.elementor-24 .elementor-element.elementor-element-0e45fee.elementor-element{--align-self:center;}.elementor-24 .elementor-element.elementor-element-22bc842{text-align:center;}.elementor-24 .elementor-element.elementor-element-22bc842 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );color:var( --e-global-color-secondary );}.elementor-24 .elementor-element.elementor-element-3df8e37{--display:flex;--margin-top:32px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-44ef688{z-index:1;}.elementor-24 .elementor-element.elementor-element-ce3f6f5{--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-24 .elementor-element.elementor-element-0ef281c iframe{height:500px;}.elementor-24 .elementor-element.elementor-element-620efb0{--display:flex;}.elementor-24 .elementor-element.elementor-element-28f570d{--display:flex;}@media(min-width:768px){.elementor-24 .elementor-element.elementor-element-249f292{--width:66%;}.elementor-24 .elementor-element.elementor-element-00b04ea{--width:66%;}.elementor-24 .elementor-element.elementor-element-1163ca1{--width:66%;}.elementor-24 .elementor-element.elementor-element-02bb73c{--width:66%;}}@media(min-width:2400px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-24 .elementor-element.elementor-element-8662932 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-1aeb157 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-24 .elementor-element.elementor-element-75d362e{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-24 .elementor-element.elementor-element-ed31c83{font-size:var( --e-global-typography-5a41b70-font-size );line-height:var( --e-global-typography-5a41b70-line-height );letter-spacing:var( --e-global-typography-5a41b70-letter-spacing );}.elementor-24 .elementor-element.elementor-element-ef4c6a5 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-5194e72 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-578ac1e .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-22bc842 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}}@media(max-width:1366px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-24 .elementor-element.elementor-element-8662932 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-1aeb157 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-24 .elementor-element.elementor-element-75d362e{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-24 .elementor-element.elementor-element-ed31c83{font-size:var( --e-global-typography-5a41b70-font-size );line-height:var( --e-global-typography-5a41b70-line-height );letter-spacing:var( --e-global-typography-5a41b70-letter-spacing );}.elementor-24 .elementor-element.elementor-element-ef4c6a5 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-5194e72 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-578ac1e .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-22bc842 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-24 .elementor-element.elementor-element-8662932 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-1aeb157 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-24 .elementor-element.elementor-element-75d362e{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-24 .elementor-element.elementor-element-ed31c83{font-size:var( --e-global-typography-5a41b70-font-size );line-height:var( --e-global-typography-5a41b70-line-height );letter-spacing:var( --e-global-typography-5a41b70-letter-spacing );}.elementor-24 .elementor-element.elementor-element-ef4c6a5 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-5194e72 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-578ac1e .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-22bc842 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}}@media(max-width:767px){.elementor-24 .elementor-element.elementor-element-f53cc9e{--padding-top:64px;--padding-bottom:32px;--padding-left:20px;--padding-right:20px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-24 .elementor-element.elementor-element-8662932{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-8662932 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-6f37e98{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-24 .elementor-element.elementor-element-79afbee{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-46d67d2{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-24 .elementor-element.elementor-element-a7cc123{--padding-top:32px;--padding-bottom:88px;--padding-left:20px;--padding-right:20px;}.elementor-24 .elementor-element.elementor-element-ba97d2a{--gap:32px 32px;--row-gap:32px;--column-gap:32px;}.elementor-24 .elementor-element.elementor-element-5cf9267{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-1aeb157{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-1aeb157 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-24 .elementor-element.elementor-element-75d362e{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-24 .elementor-element.elementor-element-ed31c83{font-size:var( --e-global-typography-5a41b70-font-size );line-height:var( --e-global-typography-5a41b70-line-height );letter-spacing:var( --e-global-typography-5a41b70-letter-spacing );}.elementor-24 .elementor-element.elementor-element-ba1195d{--border-radius:24px 24px 0px 0px;--margin-top:-24px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-24 .elementor-element.elementor-element-ef4c6a5{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-ef4c6a5 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-a08fccb{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-24 .elementor-element.elementor-element-871d3e4{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-898b69c{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-24 .elementor-element.elementor-element-370ca19{--padding-top:64px;--padding-bottom:32px;--padding-left:20px;--padding-right:20px;}.elementor-24 .elementor-element.elementor-element-98db493{--gap:32px 32px;--row-gap:32px;--column-gap:32px;}.elementor-24 .elementor-element.elementor-element-5194e72{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-5194e72 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-18971f1{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-316ba3c{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-24 .elementor-element.elementor-element-fd62afc{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-683c287{--padding-top:32px;--padding-bottom:88px;--padding-left:20px;--padding-right:20px;}.elementor-24 .elementor-element.elementor-element-578ac1e{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-578ac1e .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-da12dac{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-24 .elementor-element.elementor-element-8a6f05a{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-42c7c75{--border-radius:24px 24px 0px 0px;--margin-top:-24px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-24 .elementor-element.elementor-element-22bc842{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-22bc842 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-24 .elementor-element.elementor-element-3df8e37{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-24 .elementor-element.elementor-element-44ef688{width:100%;max-width:100%;}.elementor-24 .elementor-element.elementor-element-ce3f6f5{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-24 .elementor-element.elementor-element-0ef281c iframe{height:350px;}}/* Start custom CSS for html, class: .elementor-element-f447718 *//* ============================================================ DRA. DANIELLA BALTADAKIS · HOME · HERO Cola no CSS personalizado DO WIDGET HTML (Avançado > CSS) Sem `.elementor-24 .elementor-element.elementor-element-f447718`: as classes .db-hero__* já são namespace único. Grid 1280 · padding lateral só abaixo do grid · 20px mobile ============================================================ */ /* ──────────────────────────────────────────── RITMO VERTICAL — tudo derivado, nada chutado. O header é fixo e sobrepõe a hero, então a reserva de topo é a altura dele. A reserva de base soma faixa + rodapé + folgas. O conteúdo fica centralizado entre as duas reservas. faixa 22 + 17 + 22 + 2 bordas .......... 63px credencial 2 linhas de 13px/1.7 ............. 44px rodapé credencial + folga 32 ............ 76px base faixa rodapé + folga 32 ............... 108px reserva base + faixa + folga 32 ......... 203px A folga de 32px aparece QUATRO vezes, sempre igual: acima da faixa, abaixo da faixa, entre a credencial e a borda da tela, e como respiro final da seção. Nada encosta na faixa — ela fica isolada por uma medida só, e é isso que faz o rodapé inteiro parecer assentado em vez de empilhado. Mudou a altura do header no Elementor? Ajuste --db-h aqui. ──────────────────────────────────────────── */ .db-hero{ --db-h:80px; /* altura do header · desktop */ --db-gap:32px; /* respiro único do rodapé, usado 3x */ --db-tick-h:63px; /* 22 + 17 + 22 + 2 bordas */ --db-cred-h:44px; /* 2 linhas de 13px/1.7 */ --db-foot-h:calc(var(--db-cred-h) + var(--db-gap)); --db-tick-b:calc(var(--db-foot-h) + var(--db-gap)); --db-stage-b:calc(var(--db-tick-b) + var(--db-tick-h) + var(--db-gap)); position:relative; min-height:100svh; display:flex; overflow:hidden; background-color:var(--db-creme); color:var(--db-tinta); } /* wrapper criado pelo JS — carrega a folga e o parallax, deixando o transform do .db-hero__bg livre pro zoom de entrada. FOLGA DE 3%, NÃO MAIS: a origem tem 1920×1080. Em tela full HD o cover renderiza 1:1 sem folga; cada ponto de folga vira upscale. Com 5% dava 110% (imagem amaciada); com 3% dá 106%, imperceptível. O parallax usa amplitude 2, então 3% ainda deixa 50% de margem antes de revelar borda. Se um dia a folga subir, a amplitude no JS tem que descer junto. */ .db-hero__bgwrap{ position:absolute; top:-3%;left:0;right:0;bottom:-3%; z-index:0; will-change:transform; } .db-hero__bgwrap > .db-hero__bg{top:0;bottom:0} .db-hero__bg{ position:absolute; top:-3%;left:0;right:0;bottom:-3%; /* fallback sem JS */ z-index:0; background-size:cover; background-position:center center; background-repeat:no-repeat; transform-origin:64% 42%; /* zoom sai de cima dela */ /* quase nenhum tratamento: a claridade da foto é o argumento "consultório médico". O contraste vem da faixa e dos blocos abaixo, não de escurecer a imagem. */ filter:saturate(1.02) brightness(1.015); } /* ---------- overlay em camadas (imagem intocada) ---------- */ .db-hero__overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background: /* 1 · campo de leitura à esquerda. Fecha bem antes do meio: o creme é quente e, esticado até a direita, amarelava a parede branca do consultório. */ linear-gradient(94deg, rgba(255,252,240,.97) 0%, rgba(255,252,240,.88) 22%, rgba(255,252,240,.42) 38%, rgba(255,252,240,0) 56%), /* 2 · vinheta apenas nos cantos, quase imperceptível */ radial-gradient(ellipse 128% 96% at 60% 38%, rgba(85,97,34,0) 62%, rgba(85,97,34,.07) 100%); } /* emenda com a próxima seção, pra hero não cortar seco */ .db-hero__overlay::after{ content:''; position:absolute; left:0;right:0;bottom:0; height:150px; background:linear-gradient(0deg,var(--db-creme) 0%,rgba(255,252,240,0) 100%); } /* ---------- fios da coluna ---------- Não é ornamento aleatório: são as divisões do grid de 1280, uma a cada sexto. Só aparecem do meio pra direita, onde não há texto, e somem antes da borda. Rimam com os fios da faixa e do rodapé sem competir com a foto. */ .db-hero__rules{ position:absolute; inset:0; z-index:1; pointer-events:none; max-width:var(--db-grid); margin:0 auto; background-image:repeating-linear-gradient(90deg, rgba(85,97,34,.085) 0 1px, transparent 1px calc(100% / 6)); -webkit-mask-image:linear-gradient(90deg, transparent 0, transparent 42%, #000 60%, #000 86%, transparent 99%); mask-image:linear-gradient(90deg, transparent 0, transparent 42%, #000 60%, #000 86%, transparent 99%); } /* ---------- grid interno 1280 ---------- */ .db-hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--db-grid); margin:0 auto; box-sizing:border-box; padding:var(--db-h) 0 var(--db-stage-b); display:flex; align-items:center; } .db-hero__content{max-width:min(53%,660px)} /* ---------- coluna de texto ---------- */ /* Cabeça corrida — dois itens justificados sobre um fio. O fio fecha a largura do bloco de texto e rima com a faixa de doenças lá embaixo: a composição fica entre duas réguas. */ .db-hero__runner{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; max-width:min(38ch,100%); padding-bottom:11px; border-bottom:1px solid var(--db-fio); margin-bottom:30px; font-family:var(--db-pp) !important; font-weight:400; font-size:13px; line-height:1.5; letter-spacing:.2px; color:var(--db-leg); } .db-hero__runner > span:first-child{font-weight:500;color:var(--db-oliva)} .db-hero__title{ font-family:var(--db-pd) !important; font-weight:400 !important; font-size:60px; line-height:1.13; letter-spacing:-1.8px; color:var(--db-tinta); margin:0; max-width:15ch; text-wrap:balance; } /* máscara do título — o JS embrulha o h1 num .db-hero__mask e anima o filho de dentro pra fora; o overflow:hidden faz o corte. O padding abre espaço pros diacríticos (til do "ã", perna do "g") e a margem negativa devolve esse espaço ao layout, então a entrelinha continua a definida. Aqui a máscara é do bloco inteiro, não linha a linha: a frase quebra em pontos diferentes a cada breakpoint, e linhas fixas com nowrap estourariam no mobile. */ .db-hero__mask{ display:block; overflow:hidden; padding-top:.16em; margin-top:-.16em; padding-bottom:.16em;margin-bottom:-.16em; padding-right:.14em; margin-right:-.14em; } .db-hero__sub{ font-family:var(--db-pp) !important; font-weight:300; font-size:19px; line-height:1.7; color:var(--db-texto); max-width:42ch; margin:22px 0 0; } .db-hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:34px; } /* ---------- carrossel de doenças ---------- */ .db-hero__ticker{ position:absolute; left:0;right:0; bottom:var(--db-tick-b); z-index:3; padding:22px 0; border-top:1px solid var(--db-fio); border-bottom:1px solid var(--db-fio); background:linear-gradient(90deg, rgba(255,252,240,.93) 0%, rgba(255,252,240,.87) 60%, rgba(255,252,240,.74) 100%); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .db-hero__vp{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); } .db-hero__track{ display:flex; width:max-content; animation:db-march 46s linear infinite; } /* pausa no hover — texto em movimento cansa quem tem dificuldade de rastreamento visual */ .db-hero__ticker:hover .db-hero__track{animation-play-state:paused} @keyframes db-march{to{transform:translateX(-50%)}} .db-hero__set{display:flex;align-items:center;flex:none} .db-hero__set b{ font-family:var(--db-pp) !important; font-weight:400; font-size:17px; line-height:1; color:var(--db-texto); padding:0 30px; white-space:nowrap; } .db-hero__set i{ width:4px;height:4px; border-radius:50%; background:var(--db-salvia); flex:none; } /* ---------- rodapé da hero ---------- */ .db-hero__foot{ position:absolute; left:0;right:0;bottom:0; z-index:4; } .db-hero__foot-inner{ width:100%; max-width:var(--db-grid); margin:0 auto; padding:0 0 var(--db-gap); box-sizing:border-box; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; } .db-hero__cred{ font-family:var(--db-pp) !important; font-weight:400; font-size:13px; line-height:1.7; color:var(--db-leg); margin:0; } .db-hero__cred b{font-weight:500;color:var(--db-texto)} .db-hero__scroll{ display:flex; align-items:center; gap:11px; flex:none; font-family:var(--db-pp) !important; font-weight:500; font-size:10px; line-height:1; letter-spacing:2.2px; text-transform:uppercase; color:var(--db-leg); } .db-hero__scroll i{ display:block; width:1px;height:34px; background:var(--db-fio); position:relative; overflow:hidden; } .db-hero__scroll i::after{ content:''; position:absolute; left:0;top:0; width:1px;height:12px; background:var(--db-salvia); animation:db-drop 2s cubic-bezier(.5,0,.5,1) infinite; } @keyframes db-drop{0%{transform:translateY(-14px)}60%,100%{transform:translateY(36px)}} /* ============================================================ RESPONSIVO Padding lateral SÓ abaixo do grid (32px) e mobile (20px) ============================================================ */ @media (max-width:1280px){ .db-hero__inner, .db-hero__foot-inner{padding-left:var(--db-pad-x);padding-right:var(--db-pad-x)} } @media (max-width:1100px){ .db-hero__title{font-size:52px;letter-spacing:-1.5px} .db-hero__content{max-width:64%} } @media (max-width:900px){ /* ──────────────────────────────────────────── MOBILE — o palco é disputado. Numa tela de 740px úteis sobram ~500px entre o header e a faixa. O bloco de texto do desktop ocupa quase tudo isso e empurra a foto pra fora, cortando a cabeça dela atrás do header. Aqui o texto encolhe de propósito para devolver altura à imagem. ──────────────────────────────────────────── */ .db-hero__inner{align-items:flex-end} .db-hero__content{max-width:100%} /* SEM FOLGA NO CELULAR. A folga de 3% existe só para o parallax, que roda acima de 901px. Aqui ela empurrava 3% da imagem para fora da borda de cima — comendo justamente o respiro que o recorte já traz. Zerada, o enquadramento do arquivo é respeitado como está. */ .db-hero__bgwrap, .db-hero__bg{top:0;bottom:0} .db-hero__bg{background-position:center center} /* Campo de leitura quase sólido embaixo, em vez do degradê esfumaçado que embaralhava foto e texto. Em cima, um véu curto dá chão para a marca do header, que sem ele fica ilegível sobre o cabelo escuro. */ .db-hero__overlay{ background: linear-gradient(0deg, var(--db-creme) 0%, var(--db-creme) 30%, rgba(255,252,240,.965) 44%, rgba(255,252,240,.55) 66%, rgba(255,252,240,0) 90%), linear-gradient(180deg, rgba(255,252,240,.88) 0, rgba(255,252,240,.34) 62px, rgba(255,252,240,0) 130px); } /* a emenda de 150px do desktop é redundante aqui: o campo já chega sólido na base */ .db-hero__overlay::after{display:none} /* os fios cruzariam o rosto e sujariam a foto */ .db-hero__rules{display:none} .db-hero__runner{font-size:12px;gap:14px;margin-bottom:22px;max-width:100%} .db-hero__title{font-size:38px;letter-spacing:-1.1px} .db-hero__sub{font-size:16px;line-height:1.62;margin-top:16px;max-width:100%} .db-hero__actions{gap:12px 18px;margin-top:26px} .db-hero__actions .db-btn{min-height:54px} .db-hero__actions .db-line-link{min-height:46px} .db-hero__set b{font-size:16px;padding:0 22px} } /* header 60px e a faixa encolhe junto — a conta se refaz sozinha: faixa 18+16+18+2 = 54 · credencial 2 linhas de 12px/1.7 = 41 */ @media (max-width:900px){ .db-hero{ --db-h:60px; --db-gap:32px; /* mesmo respiro do desktop: no celular ele é ainda mais necessário */ --db-tick-h:54px; /* 18 + 16 + 18 + 2 bordas */ --db-cred-h:41px; /* 2 linhas de 12px/1.7 */ } .db-hero__ticker{padding:18px 0} .db-hero__cred{font-size:12px} /* mantém as 2 linhas que a conta pressupõe */ .db-hero__cred-rqe{white-space:nowrap} } @media (max-width:768px){ /* recorte vertical, pensado para a tela alta do celular. Falta ainda a versão de 1280 — hoje o desktop serve a mesma imagem grande para notebook e tablet. */ .db-hero__bg{ background-image:url('https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/bg-hero-mobile.webp') !important; background-position:center center; } .db-hero__inner{padding-top:104px} .db-hero__title{font-size:34px;letter-spacing:-1px} .db-hero__sub{font-size:17px;margin-top:18px} .db-hero__runner{font-size:12px;gap:14px;margin-bottom:24px;max-width:100%} .db-hero__actions{gap:12px 20px;margin-top:28px} .db-hero__scroll span{display:none} /* mantém a credencial em 2 linhas: o endereço sai e a conta de --db-cred-h continua válida */ .db-hero__cred .db-hero__cred-addr{display:none} } /* telas baixas — 100svh fica apertado */ /* telas baixas — 100svh aperta demais; garante palco mínimo sem quebrar a conta, que continua derivada dos tokens */ @media (max-height:680px) and (min-width:769px){ .db-hero{min-height:calc(var(--db-h) + var(--db-stage-b) + 420px)} .db-hero__title{font-size:46px} } /* Telas estreitas: cada linha economizada volta como foto. O link secundário sai — a faixa logo abaixo já lista as doenças e o menu leva à página. O nome sai da credencial porque a marca do header já o exibe dois dedos acima. */ @media (max-width:480px){ .db-hero__title{font-size:30px;letter-spacing:-.8px} .db-hero__sub{font-size:15.5px} .db-hero__runner{margin-bottom:18px} .db-hero__actions{margin-top:22px} .db-hero__actions .db-line-link{display:none} .db-hero__cred-name{display:none} .db-hero__set b{font-size:15px;padding:0 18px} } @media (max-width:380px){ .db-hero__title{font-size:27px} .db-hero__sub{font-size:15px} } /* ---------- menos movimento: o carrossel vira lista parada ---------- */ @media (prefers-reduced-motion:reduce){ .db-hero__track{ animation:none; width:auto; flex-wrap:wrap; } .db-hero__track .db-hero__set:nth-child(n+2){display:none} .db-hero__vp{-webkit-mask-image:none;mask-image:none} .db-hero__scroll i::after{animation:none;height:34px;opacity:.5} .db-hero__bg,.db-hero__bgwrap{transition:none !important;animation:none !important} }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-3d80fac *//* ============================================================ DRA. DANIELLA BALTADAKIS · HOME · FAIXA DE DADOS Cola no CSS personalizado DO WIDGET HTML (Avançado > CSS) Sem `.elementor-24 .elementor-element.elementor-element-3d80fac`: as classes .db-stats__* já são namespace único. TERRA MÉDIO, não escuro. O tom é o mesmo da faixa de respiro — mesma família quente, +6 de desvio para o verde contra +26 do oliva profundo que estava aqui antes. O que muda é a luminosidade: encostada na hero, que é a parte mais clara do site, a tinta pura (#2E2A1B) criava um degrau grande demais. Isso dá ao site uma ESCALA de escuros em vez de um só: faixa de dados ... #504935 médio, logo abaixo da hero faixa de respiro . #2E2A1B fundo, no meio da página rodapé ........... o mais escuro, no fim A página escurece conforme desce, em vez de bater e voltar. O FIO INTERNO É MAIS CLARO QUE O FUNDO, e não mais escuro. Fio escuro sobre campo escuro lê como corte — a faixa parece partida em quatro blocos separados. Mais claro que o fundo, lê como fio. E ele para antes das bordas: atravessando inteiro, divide; recuado, separa sem cortar. Contraste não era o problema: o fio da hero sobre creme dá 1,56:1 e passa despercebido. O que pesava era a direção. O degradê existe porque campo perfeitamente chapado nessa luminosidade achata. Um passo dá profundidade sem virar efeito. Grid 1280 · padding lateral só abaixo do grid ============================================================ */ .db-stats{ position:relative; background:#504935; background-image:linear-gradient(168deg, #574F3A 0%, #504935 48%, #46402E 100%); color:var(--db-creme); border-top:1px solid var(--db-tinta); } .db-stats__inner{ width:100%; max-width:var(--db-grid); margin:0 auto; box-sizing:border-box; display:grid; grid-template-columns:repeat(4,1fr); } .db-stat{ position:relative; padding:46px 28px; text-align:center; transition:background .45s var(--db-ease); } .db-stat::before{ content:''; position:absolute; left:0; top:24%; bottom:24%; width:1px; background:#5E5540; pointer-events:none; } .db-stat:first-child::before{display:none} .db-stat:hover{background:rgba(255,252,240,.06)} /* ── o número ── Playfair em 42px. A unidade entra menor e em Poppins: sem isso "60min" vira uma palavra só e o olho perde o dado. */ .db-stat b{ display:block; font-family:var(--db-pd) !important; font-weight:400; font-size:42px; line-height:1.02; letter-spacing:-1.3px; color:var(--db-creme); white-space:nowrap; } .db-stat b em{ font-family:var(--db-pp) !important; font-style:normal; font-weight:400; font-size:16px; letter-spacing:.2px; color:var(--db-areia); margin-left:4px; } /* "às" fica entre dois números: precisa de folga dos dois lados */ .db-stat b em + em, .db-stat b em:not(:last-child){margin-right:4px} .db-stat span{ display:block; margin-top:13px; font-family:var(--db-pp) !important; font-weight:400; font-size:13px; line-height:1.6; letter-spacing:.2px; color:var(--db-areia); } /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:1280px){ .db-stats__inner{padding-left:var(--db-pad-x);padding-right:var(--db-pad-x)} .db-stat{padding:42px 20px} .db-stat b{font-size:38px} } /* 4 colunas em 4 células apertadas viram texto quebrado; 2×2 mantém cada dado legível */ @media (max-width:900px){ .db-stats__inner{grid-template-columns:repeat(2,1fr)} .db-stat{padding:34px 16px} .db-stat:nth-child(odd)::before{display:none} /* na grade 2×2 o fio horizontal também recua das laterais */ .db-stat:nth-child(n+3)::after{ content:''; position:absolute; top:0; left:18%; right:18%; height:1px; background:#5E5540; pointer-events:none; } .db-stat b{font-size:34px;letter-spacing:-1px} .db-stat b em{font-size:15px} .db-stat span{font-size:12.5px;margin-top:11px} } @media (max-width:480px){ .db-stat{padding:28px 10px} .db-stat b{font-size:29px;letter-spacing:-.8px} .db-stat b em{font-size:13px} .db-stat span{font-size:11.5px;line-height:1.55} } @media (hover:none){ .db-stat:hover{background:transparent} } @media (prefers-reduced-motion:reduce){ .db-stat{transition:none} }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-8662932 */.elementor-24 .elementor-element.elementor-element-8662932{ text-wrap: balance; } .cm-gold { color: var(--cm-gold, #EF980F); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-79afbee *//* ============================================================ DRA. DANIELLA BALTADAKIS · HOME · COMO EU ATENDO Cola no CSS personalizado DO WIDGET HTML dos cards Sem `.elementor-24 .elementor-element.elementor-element-79afbee`: as classes .db-card* já são namespace único. COMO ESTE 2×2 NÃO VIRA CONTINUAÇÃO DA FAIXA DE DADOS A faixa acima também tem quatro células. O que separa as duas é PROPORÇÃO e PESO, não conteúdo: faixa .... 4 em linha, baixa e larga, fundo escuro, números grandes, texto mínimo cards .... 2×2, altos e estreitos, fundo claro, ilustração dominante, texto respirado Por isso a grade fica em 980px e não nos 1280 do grid: mais estreita que a faixa, o bloco lê como composição centrada e não como a mesma tabela repetida. Sem sombra e sem raio: os dois são o atalho para "card de template". A definição vem do fio e do espaço interno. ============================================================ */ .db-cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); max-width:980px; margin:0 auto; } .db-card{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:clamp(34px,3.6vw,48px) clamp(24px,3vw,40px); background:var(--db-creme); border:1px solid var(--db-fio); transition:border-color .5s var(--db-ease), background .5s var(--db-ease), transform .5s var(--db-ease); } .db-card:hover{ border-color:var(--db-oliva); background:var(--db-areia); transform:translateY(-3px); } /* ---------- ícone ---------- Os SVGs entram por mask-image, não por . Assim a cor vem do CSS: o ícone nasce em oliva e escurece no hover junto com a borda. Com ele ficaria preso à cor gravada no arquivo, e o hover quebraria. Trocar de ícone = trocar o modificador no HTML. */ .db-card__icon{ display:block; width:52px; height:52px; margin-bottom:24px; flex:none; background-color:var(--db-oliva); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; transition:background-color .5s var(--db-ease),transform .6s var(--db-ease); } .db-card:hover .db-card__icon{ background-color:var(--db-oliva-x); transform:scale(1.06); } .db-card__icon--counseling{ -webkit-mask-image:url('https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/counseling.svg'); mask-image:url('https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/counseling.svg'); } .db-card__icon--communication{ -webkit-mask-image:url('https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/communication.svg'); mask-image:url('https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/communication.svg'); } .db-card__icon--follow{ -webkit-mask-image:url('https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/follow.svg'); mask-image:url('https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/follow.svg'); } .db-card__icon--employee{ -webkit-mask-image:url('https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/employee.svg'); mask-image:url('https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/employee.svg'); } /* ---------- texto ---------- */ .db-card h3{ font-family:var(--db-pd) !important; font-weight:400 !important; font-size:25px; line-height:1.22; letter-spacing:-.55px; color:var(--db-tinta); margin:0 0 12px; max-width:18ch; } .db-card p{ font-family:var(--db-pp) !important; font-weight:300; font-size:16px; line-height:1.72; color:var(--db-texto); margin:0; max-width:34ch; } /* ============================================================ RESPONSIVO O PONTO DE VIRADA É 700px, NÃO 900. Medindo a largura real do card em duas colunas: viewport 1024 ... 378px de texto útil viewport 900 ... 346px viewport 768 ... 280px viewport 720 ... 256px ← aqui o título começa a quebrar em três linhas Trocar para uma coluna em 900px descartava metade da tela justamente nas larguras de tablet, e dobrava a altura da seção sem ganho de leitura. ============================================================ */ @media (max-width:1280px){ .db-cards{max-width:900px;gap:24px} .db-card h3{font-size:23px;letter-spacing:-.45px} } /* tablet em paisagem e telas médias: duas colunas continuam, só o respiro interno aperta */ @media (max-width:1024px){ .db-card{padding:clamp(28px,3.4vw,36px) clamp(20px,2.6vw,28px)} .db-card__icon{width:46px;height:46px;margin-bottom:20px} .db-card h3{font-size:21.5px;max-width:100%} .db-card p{font-size:15.5px;line-height:1.68;max-width:100%} } @media (max-width:860px){ .db-cards{gap:18px} .db-card{padding:26px 20px} .db-card h3{font-size:20px;letter-spacing:-.35px} .db-card p{font-size:15px} } /* coluna única, card igual ao do desktop: ícone em cima, título e texto centralizados. Só encolhe. */ @media (max-width:700px){ .db-cards{grid-template-columns:1fr;gap:14px;max-width:520px} .db-card{padding:32px 24px} .db-card__icon{width:44px;height:44px;margin-bottom:18px} .db-card h3{font-size:21px;letter-spacing:-.35px;margin-bottom:9px} .db-card p{font-size:15.5px;line-height:1.68} /* sem elevação no toque */ .db-card:hover{transform:none} } @media (max-width:480px){ .db-card{padding:28px 20px} .db-card__icon{width:40px;height:40px;margin-bottom:16px} .db-card h3{font-size:20px} .db-card p{font-size:15px} } /* no toque não existe hover: sem isto o estado fica preso depois do primeiro tap */ @media (hover:none){ .db-card:hover{transform:none;background:var(--db-creme);border-color:var(--db-fio)} .db-card:hover .db-card__icon{transform:none;background-color:var(--db-oliva)} } @media (prefers-reduced-motion:reduce){ .db-card,.db-card__icon{transition:none} .db-card:hover{transform:none} .db-card:hover .db-card__icon{transform:none} }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-59443e3 *//* ============================================================ DRA. DANIELLA BALTADAKIS · PONTE 10-ponte.css · Cola no CSS personalizado DO WIDGET HTML Sem fundo. Dois fios e respiro, só isso. O bloco fecha a seção anterior e entrega a próxima — por isso o texto é corpo, não título: título aqui abriria um assunto novo bem na hora de encerrar um. ============================================================ */ .db-bridge, .db-bridge *, .db-bridge *::before, .db-bridge *::after{box-sizing:border-box} .db-bridge{ background:transparent; color:var(--db-tinta); border-top:1px solid var(--db-fio); border-bottom:1px solid var(--db-fio); -webkit-font-smoothing:antialiased; } .db-bridge__in{ display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,64px); padding:clamp(30px,3.4vw,46px) 0; } /* ---------- a frase ---------- */ .db-bridge__t{ margin:0; font-family:var(--db-pp) !important; font-weight:300; font-size:clamp(16px,1.4vw,19px); line-height:1.62; color:var(--db-texto); max-width:44ch; } /* a ênfase vira Playfair itálico: é o recurso de destaque da marca e o único serifado do bloco, então marca sem gritar */ .db-bridge__t em{ font-family:var(--db-pd) !important; font-style:italic; font-weight:400; color:var(--db-oliva); } /* ---------- o convite ---------- */ .db-bridge__cta{ display:inline-flex; align-items:center; /* o círculo tem 46, mas o rótulo ao lado é mais baixo e puxava a caixa do link para menos que o alvo mínimo de toque */ min-height:46px; gap:14px; flex:none; background:transparent; border:none; box-shadow:none; color:inherit !important; text-decoration:none !important; cursor:pointer; -webkit-tap-highlight-color:transparent; } .db-bridge__mk{ position:relative; flex:none; display:grid; place-items:center; width:46px;height:46px; border-radius:50%; border:1px solid var(--db-fio); background:transparent; overflow:hidden; isolation:isolate; color:var(--db-oliva); transition:border-color .5s var(--db-ease),color .5s var(--db-ease); } /* a tinta sobe por baixo da seta, cortada em diagonal — o mesmo gesto de varredura dos botões, em escala menor */ .db-bridge__mk::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--db-oliva); clip-path:polygon(0% 100%,100% 118%,100% 118%,0% 100%); transition:clip-path .55s cubic-bezier(.76,0,.24,1); } .db-bridge__mk svg{ width:16px;height:16px; display:block; transition:transform .5s var(--db-ease); } .db-bridge__txt{ position:relative; font-family:var(--db-pp) !important; font-weight:500; font-size:13px; line-height:1.4; letter-spacing:1.8px; text-transform:uppercase; color:var(--db-oliva); padding-bottom:5px; white-space:nowrap; } .db-bridge__txt::after{ content:''; position:absolute; left:0;right:0;bottom:0; height:1px; background:currentColor; opacity:.34; transform:scaleX(0); transform-origin:left center; transition:transform .55s var(--db-ease); } .db-bridge__cta:hover .db-bridge__txt::after, .db-bridge__cta:focus-visible .db-bridge__txt::after{transform:scaleX(1)} .db-bridge__cta:hover .db-bridge__mk, .db-bridge__cta:focus-visible .db-bridge__mk{ border-color:var(--db-oliva); color:var(--db-creme); } .db-bridge__cta:hover .db-bridge__mk::before, .db-bridge__cta:focus-visible .db-bridge__mk::before{ clip-path:polygon(0% -18%,100% 0%,100% 100%,0% 100%); } .db-bridge__cta:hover .db-bridge__mk svg, .db-bridge__cta:focus-visible .db-bridge__mk svg{transform:translateX(2px)} .db-bridge__cta:focus-visible{outline:none} .db-bridge__cta:focus-visible .db-bridge__mk{ outline:2px solid var(--db-oliva); outline-offset:3px; } /* ---------- variante terra ---------- Ponte com fundo próprio, no marrom escuro do kit. Usada quando a ponte precisa cortar em vez de apenas separar — entre duas seções claras, por exemplo, onde dois fios sozinhos não fazem degrau suficiente. #3B3524 é um degrau acima do --db-tinta usado no véu da faixa de respiro. A escala de escuros do site fica assim, do mais claro ao mais fundo: faixa de dados ... #504935 esta ponte ....... #3B3524 faixa de respiro . #2E2A1B Cada bloco escuro tem seu lugar na escala em vez de repetir o mesmo valor. COM RAIO, VIRA PEÇA — e peça não sangra até a borda da tela. Por isso o bloco passa a respeitar o grid e ganha margem lateral: canto arredondado cortado pela borda do navegador é o defeito clássico de bloco arredondado em largura cheia. Os fios saem: régua e caixa arredondada são duas formas diferentes de delimitar, e juntas se anulam. */ .db-bridge--terra{ max-width:var(--db-grid); margin-left:auto; margin-right:auto; background:#3B3524; color:var(--db-creme); border:0; border-radius:24px; } .db-bridge--terra .db-bridge__in{ padding-left:clamp(24px,3.4vw,52px); padding-right:clamp(24px,3.4vw,52px); } .db-bridge--terra .db-bridge__t{color:var(--db-creme)} .db-bridge--terra .db-bridge__t em{color:var(--db-areia)} .db-bridge--terra .db-bridge__txt{color:var(--db-areia)} .db-bridge--terra .db-bridge__mk{ border-color:rgba(239,227,203,.34); color:var(--db-areia); } .db-bridge--terra .db-bridge__mk::before{background:var(--db-areia)} .db-bridge--terra .db-bridge__cta:hover .db-bridge__mk, .db-bridge--terra .db-bridge__cta:focus-visible .db-bridge__mk{ border-color:var(--db-areia); color:var(--db-tinta); } .db-bridge--terra .db-bridge__cta:focus-visible .db-bridge__mk{ outline-color:var(--db-areia); } /* ---------- responsivo ---------- */ @media (max-width:1280px){ /* abaixo do grid o bloco ocupa 100% do container. A margem lateral da página já vem do próprio container do Elementor — somar a dela aqui virava padding duplo e a ponte encolhia dentro da seção. */ .db-bridge--terra{ max-width:none; margin-left:0; margin-right:0; } } @media (max-width:900px){ .db-bridge--terra{border-radius:20px} .db-bridge__in{ flex-direction:column; align-items:flex-start; gap:22px; } .db-bridge__t{max-width:none} } @media (max-width:440px){ .db-bridge--terra{border-radius:16px} .db-bridge__txt{font-size:12.5px;letter-spacing:1.2px;white-space:normal} .db-bridge__mk{width:42px;height:42px} .db-bridge__cta{gap:12px} } /* no toque não existe hover: o estado ficaria grudado depois do tap */ @media (hover:none){ .db-bridge__cta:hover .db-bridge__mk::before{clip-path:polygon(0% 100%,100% 118%,100% 118%,0% 100%)} .db-bridge__cta:hover .db-bridge__txt::after{transform:scaleX(0)} .db-bridge__cta:hover .db-bridge__mk svg{transform:none} .db-bridge__cta:hover .db-bridge__mk{color:var(--db-oliva)} } @media (prefers-reduced-motion:reduce){ .db-bridge__mk, .db-bridge__mk::before, .db-bridge__mk svg, .db-bridge__txt::after{transition-duration:.001ms !important} } /* ============================================================ BLINDAGEM O tema ou o Elementor podem injetar estilo com !important em a e em button. Nesse caso só !important vence !important. Cada estado declarado, mesmo quando o valor é transparente. ============================================================ */ .db-bridge__cta, .db-bridge__cta:hover, .db-bridge__cta:focus, .db-bridge__cta:active, .db-bridge__cta:visited, .db-bridge__cta:focus-visible{ background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; box-shadow:none !important; text-decoration:none !important; color:inherit !important; } .db-bridge__mk, .db-bridge__cta:hover .db-bridge__mk, .db-bridge__cta:focus .db-bridge__mk, .db-bridge__cta:active .db-bridge__mk, .db-bridge__cta:focus-visible .db-bridge__mk{ background:transparent !important; background-image:none !important; box-shadow:none !important; } /* ============================================================ CTA FORTE — para ponte sobre fundo claro Some db-bridge--cta-forte na section. Sobre creme, o círculo vazado com rótulo em oliva é discreto demais e passa batido. Na variante terra isso não acontece, porque o fundo escuro já faz o contraste — ali o CTA pode continuar leve. O gesto não muda: o círculo com seta continua sendo o selo, agora invertido dentro de uma pílula sólida. Duas pontes com o mesmo movimento em pesos diferentes leem como sistema; duas com formas diferentes leem como remendo. Vem depois da blindagem de propósito: aquele bloco força background transparente com !important em todos os estados, então só !important vence !important. ============================================================ */ .db-bridge--cta-forte .db-bridge__cta, .db-bridge--cta-forte .db-bridge__cta:hover, .db-bridge--cta-forte .db-bridge__cta:focus, .db-bridge--cta-forte .db-bridge__cta:active, .db-bridge--cta-forte .db-bridge__cta:visited, .db-bridge--cta-forte .db-bridge__cta:focus-visible{ gap:14px; min-height:58px; padding:5px 28px 5px 5px; border-radius:100px; background:var(--db-oliva) !important; background-color:var(--db-oliva) !important; transition:background-color .42s var(--db-ease),transform .38s var(--db-ease); } .db-bridge--cta-forte .db-bridge__cta:hover, .db-bridge--cta-forte .db-bridge__cta:focus-visible{ background:var(--db-oliva-x) !important; background-color:var(--db-oliva-x) !important; transform:translateY(-2px); } /* selo invertido: círculo claro sobre a pílula escura */ .db-bridge--cta-forte .db-bridge__mk, .db-bridge--cta-forte .db-bridge__cta:hover .db-bridge__mk, .db-bridge--cta-forte .db-bridge__cta:focus-visible .db-bridge__mk{ width:48px; height:48px; border-color:transparent !important; background:var(--db-creme) !important; background-color:var(--db-creme) !important; color:var(--db-oliva); } /* a varredura diagonal não faz sentido num selo já preenchido */ .db-bridge--cta-forte .db-bridge__mk::before{display:none} .db-bridge--cta-forte .db-bridge__txt{ color:var(--db-creme); padding-bottom:0; } /* o fio animado embaixo do rótulo some: dentro da pílula ele viraria um sublinhado solto no meio do botão */ .db-bridge--cta-forte .db-bridge__txt::after{display:none} .db-bridge--cta-forte .db-bridge__cta:focus-visible{ outline:2px solid var(--db-oliva); outline-offset:3px; } .db-bridge--cta-forte .db-bridge__cta:focus-visible .db-bridge__mk{outline:none} @media (max-width:440px){ .db-bridge--cta-forte .db-bridge__cta, .db-bridge--cta-forte .db-bridge__cta:hover{padding-right:22px;gap:11px} .db-bridge--cta-forte .db-bridge__mk{width:44px;height:44px} } @media (hover:none){ .db-bridge--cta-forte .db-bridge__cta:hover{ background:var(--db-oliva) !important; background-color:var(--db-oliva) !important; transform:none; } } @media (prefers-reduced-motion:reduce){ .db-bridge--cta-forte .db-bridge__cta{transition:none} .db-bridge--cta-forte .db-bridge__cta:hover{transform:none} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f53cc9e *//* ═══════════════════════════════════════ DRA. DANIELLA BALTADAKIS — FIOS LATERAIS 15-fios-laterais.css Colar no CSS Personalizado do CONTAINER da seção. Usa APENAS o ::after. O ::before fica livre porque é nele que o Elementor desenha a sobreposição de fundo do container. Os dois fios saem de um pseudo só: uma caixa transparente com borda esquerda e direita. O fundo dela nunca é pintado. ═══════════════════════════════════════ */ .elementor-24 .elementor-element.elementor-element-f53cc9e { /* ── Os quatro números a mexer ── */ --fio-grid: 1280px; /* largura do grid */ --fio-extra: 64px; /* quanto passa do grid para fora */ --fio-piso: 20px; /* onde para em tela estreita */ --fio-cor: var(--db-fio); /* segue o fio do site: #E1DBCE sobre creme, #D3CCBB dentro de .db-areia */ position: relative; } .elementor-24 .elementor-element.elementor-element-f53cc9e::after { content: '' !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; /* max() segura os fios no piso quando a tela fica menor que o grid mais o extra, senão sairiam pela borda. */ left: max(var(--fio-piso), calc((100% - var(--fio-grid)) / 2 - var(--fio-extra))) !important; right: max(var(--fio-piso), calc((100% - var(--fio-grid)) / 2 - var(--fio-extra))) !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; /* Somente as duas bordas laterais. Fundo permanece transparente, então a sobreposição do Elementor no ::before continua visível. */ border: none !important; border-left: 1px solid var(--fio-cor) !important; border-right: 1px solid var(--fio-cor) !important; border-radius: 0 !important; background: none !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; /* Acima da sobreposição do Elementor, que fica no ::before com z-index 0. Abaixo do conteúdo, que o Elementor posiciona a partir de 1. */ z-index: 1 !important; pointer-events: none !important; } /* ── Seção escura ── Adicione a classe db-fios--escura no container. O fio claro some sobre fundo escuro; o oliva primário é o único tom do kit que se lê como fio nesses blocos. */ .elementor-24 .elementor-element.elementor-element-f53cc9e.db-fios--escura { --fio-cor: var(--db-oliva); } /* Em seção de areia não precisa de nada: a classe db-areia no container já reajusta o --db-fio, e os fios laterais seguem. */ /* Em tela estreita os fios encostam no conteúdo e viram moldura apertada em vez de margem. Some com eles. */ @media (max-width: 600px) { .elementor-24 .elementor-element.elementor-element-f53cc9e::after { display: none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-5cf9267 *//* ============================================================ DRA. DANIELLA BALTADAKIS · HOME · BIO · FOTO home-12-bio-foto.css · Cola no CSS personalizado DO WIDGET HTML MOLDURA — três camadas finas, nenhuma pesada: fio deslocado (sálvia) · passe-partout (areia) · janela O fio deslocado é recurso de impresso: em vez de fechar uma borda em volta da imagem, ele escapa por dois lados e sugere profundidade sem sombra. Sombra e canto arredondado ficaram de fora de propósito — são os dois atalhos para "card de tema". PARALLAX — a folga vem do scale no CSS (1.12 = 6% por lado). O GSAP compõe translate ANTES do scale, então yPercent é % da altura da janela. Mantenha a amplitude abaixo de 6 ou aparece borda. Ver initBioParallax em home-03-js.html. ============================================================ */ .db-bio-media{ position:relative; margin:0; /* espaço para o fio escapar sem ser cortado pelo container */ padding:0 0 22px 22px; } /* ---------- fio deslocado ---------- Ele abraça a PEÇA INTEIRA — moldura e legenda —, deslocado 22px na diagonal. É o que dá profundidade sem sombra, e é o charme do componente. O DEFEITO ANTERIOR ERA A ARESTA VERTICAL, não a horizontal. A legenda ia de ponta a ponta do figure, então a lateral do retângulo passava por cima do texto e dava a impressão de que a legenda estava fora da moldura. A correção é recuar a legenda 36px do lado por onde o fio escapa: aí a aresta corre ao lado do texto, e não sobre ele. */ .db-bio-media::before{ content:''; position:absolute; left:0; bottom:0; width:calc(100% - 22px); height:calc(100% - 22px); border:1px solid var(--db-salvia); pointer-events:none; } /* ---------- 1 · fio deslocado ---------- */ /* ---------- 2 · passe-partout ---------- */ .db-bio-media__frame{ position:relative; background:var(--db-areia); border:1px solid var(--db-fio); padding:clamp(13px,1.5vw,20px); } /* ---------- 3 · janela ---------- */ .db-bio-media__win{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--db-fio); /* evita flash branco no carregamento */ } .db-bio-media__img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 28%; /* a foto vem mais fria que o creme do site; um toque mínimo assenta as duas sem falsear a pele */ filter:saturate(1.02); /* estado sem JS: já entra com a folga do parallax aplicada, senão o GSAP daria um salto ao assumir */ transform:scale(1.12); will-change:transform; } /* ---------- legenda ---------- */ .db-bio-media__cap{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:16px 36px 0 0; padding-top:10px; border-top:1px solid var(--db-fio); font-family:var(--db-pp) !important; font-weight:400; font-size:12.5px; line-height:1.5; letter-spacing:.2px; color:var(--db-leg); } .db-bio-media__cap span:first-child{color:var(--db-oliva);font-weight:500} /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:1280px){ .db-bio-media{padding:0 0 18px 18px} .db-bio-media__cap{margin-right:18px} } @media (max-width:900px){ /* em coluna única a foto ocupa altura demais em 4/5; o formato mais largo devolve leitura ao texto abaixo */ .db-bio-media__win{aspect-ratio:1/1} .db-bio-media{padding:0 0 14px 14px;max-width:520px} .db-bio-media__cap{margin:14px 0 0 14px;font-size:12px} } @media (max-width:480px){ .db-bio-media__win{aspect-ratio:4/5} .db-bio-media__cap{ /* dois itens justificados numa linha estreita colam; empilhados continuam legíveis */ flex-direction:column; gap:2px; } } @media (prefers-reduced-motion:reduce){ .db-bio-media__img{transform:none;will-change:auto} }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-1aeb157 */.elementor-24 .elementor-element.elementor-element-1aeb157{ text-wrap: balance; } .cm-gold { color: var(--cm-gold, #EF980F); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a7cc123 *//* ═══════════════════════════════════════ DRA. DANIELLA BALTADAKIS — FIOS LATERAIS 15-fios-laterais.css Colar no CSS Personalizado do CONTAINER da seção. Usa APENAS o ::after. O ::before fica livre porque é nele que o Elementor desenha a sobreposição de fundo do container. Os dois fios saem de um pseudo só: uma caixa transparente com borda esquerda e direita. O fundo dela nunca é pintado. ═══════════════════════════════════════ */ .elementor-24 .elementor-element.elementor-element-a7cc123 { /* ── Os quatro números a mexer ── */ --fio-grid: 1280px; /* largura do grid */ --fio-extra: 64px; /* quanto passa do grid para fora */ --fio-piso: 20px; /* onde para em tela estreita */ --fio-cor: var(--db-fio); /* segue o fio do site: #E1DBCE sobre creme, #D3CCBB dentro de .db-areia */ position: relative; } .elementor-24 .elementor-element.elementor-element-a7cc123::after { content: '' !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; /* max() segura os fios no piso quando a tela fica menor que o grid mais o extra, senão sairiam pela borda. */ left: max(var(--fio-piso), calc((100% - var(--fio-grid)) / 2 - var(--fio-extra))) !important; right: max(var(--fio-piso), calc((100% - var(--fio-grid)) / 2 - var(--fio-extra))) !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; /* Somente as duas bordas laterais. Fundo permanece transparente, então a sobreposição do Elementor no ::before continua visível. */ border: none !important; border-left: 1px solid var(--fio-cor) !important; border-right: 1px solid var(--fio-cor) !important; border-radius: 0 !important; background: none !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; /* Acima da sobreposição do Elementor, que fica no ::before com z-index 0. Abaixo do conteúdo, que o Elementor posiciona a partir de 1. */ z-index: 1 !important; pointer-events: none !important; } /* ── Seção escura ── Adicione a classe db-fios--escura no container. O fio claro some sobre fundo escuro; o oliva primário é o único tom do kit que se lê como fio nesses blocos. */ .elementor-24 .elementor-element.elementor-element-a7cc123.db-fios--escura { --fio-cor: var(--db-oliva); } /* Em seção de areia não precisa de nada: a classe db-areia no container já reajusta o --db-fio, e os fios laterais seguem. */ /* Em tela estreita os fios encostam no conteúdo e viram moldura apertada em vez de margem. Some com eles. */ @media (max-width: 600px) { .elementor-24 .elementor-element.elementor-element-a7cc123::after { display: none !important; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-ef4c6a5 */.elementor-24 .elementor-element.elementor-element-ef4c6a5{ text-wrap: balance; } .cm-gold { color: var(--cm-gold, #EF980F); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-871d3e4 *//* ============================================================ DRA. DANIELLA BALTADAKIS · HOME · O QUE EU TRATO 18-doencas.css · Cola no CSS personalizado DO WIDGET da lista ÍNDICE DE LARGURA CHEIA · QUATRO LINHAS Título centralizado, lista não. Texto centrado só se lê bem em medida curta, e medida curta dentro de um grid de 1280 deixa metade da tela vazia. A lista ocupa a largura inteira e cada item vira uma linha só: numeral, grupo e nomes lado a lado. Com quatro linhas em vez de onze, cada uma pode respirar mais e o título cresce — a seção cai de ~730px para ~400px e passa a ser escaneável de uma olhada, que era o problema real. Por que não conflita com o resto da página: faixa de dados .... 4 células, fios verticais, fundo escuro cards ............. 2×2, caixa fechada, ícone dominante este índice ....... linhas cheias, fios horizontais, sem caixa As três colunas seguem a proporção do grid: o numeral é uma coluna estreita fixa, o grupo pesa 1 e a descrição 1,4 — assim o nome nunca quebra antes da descrição. ============================================================ */ /* ---------- índice ---------- */ .db-idx{ border-top:1px solid var(--db-fio); } .db-idx__row{ display:grid; grid-template-columns:56px minmax(0,1fr) minmax(0,1.4fr); align-items:baseline; column-gap:clamp(20px,3vw,48px); padding:30px 16px 32px 0; border-bottom:1px solid var(--db-fio); text-decoration:none !important; color:inherit !important; transition:background .45s var(--db-ease),padding-left .45s var(--db-ease); } .db-idx__row:hover{ background:var(--db-areia); padding-left:16px; } .db-idx__row i{ font-family:var(--db-pp) !important; font-style:normal; font-weight:500; font-size:11.5px; letter-spacing:1.6px; line-height:1.9; color:var(--db-salvia); transition:color .45s var(--db-ease); } .db-idx__row:hover i{color:var(--db-oliva)} .db-idx__row h3{ font-family:var(--db-pd) !important; font-weight:400 !important; font-size:28px; line-height:1.2; letter-spacing:-.6px; color:var(--db-tinta); margin:0; transition:color .45s var(--db-ease); } .db-idx__row:hover h3{color:var(--db-oliva)} .db-idx__row p{ font-family:var(--db-pp) !important; font-weight:300; font-size:16px; line-height:1.7; color:var(--db-texto); margin:0; max-width:56ch; } /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:1280px){ .db-idx__row{grid-template-columns:48px minmax(0,1fr) minmax(0,1.3fr)} .db-idx__row h3{font-size:25px;letter-spacing:-.5px} } @media (max-width:900px){ /* em três colunas estreitas o grupo quebra em três linhas e a descrição vira uma tira de duas palavras por linha */ .db-idx__row{ grid-template-columns:44px minmax(0,1fr); row-gap:8px; padding:24px 0 26px; } .db-idx__row p{grid-column:2;max-width:100%} .db-idx__row:hover{padding-left:10px} .db-idx__row h3{font-size:22px} .db-idx__row p{font-size:15.5px;line-height:1.66} } @media (max-width:480px){ .db-idx__row{grid-template-columns:1fr;row-gap:6px;padding:22px 0 24px} .db-idx__row i{line-height:1.4} .db-idx__row p{grid-column:1} .db-idx__row h3{font-size:20.5px} .db-idx__row p{font-size:15px} } /* no toque o hover fica preso depois do tap — e aqui a linha inteira é link, então o deslocamento apareceria em cheio */ @media (hover:none){ .db-idx__row:hover{background:transparent;padding-left:0} .db-idx__row:hover h3{color:var(--db-tinta)} .db-idx__row:hover i{color:var(--db-salvia)} } @media (prefers-reduced-motion:reduce){ .db-idx__row,.db-idx__row h3,.db-idx__row i{transition:none} .db-idx__row:hover{padding-left:0} }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-7dd534e *//* ============================================================ DRA. DANIELLA BALTADAKIS · HOME · FAIXA DE RESPIRO 21-respiro.css · Cola no CSS personalizado DO WIDGET HTML O corte é fotográfico, não cromático. Um bloco de cor chapada nesta posição obrigava a escolher entre repetir a areia da seção de cima ou repetir o verde da faixa de dados. A foto sob véu terroso resolve os dois: contrasta com a areia, não repete o verde e conversa com o feed dela, que é construído assim. O véu é o --db-tinta. Depois que os neutros foram aquecidos ele virou um marrom escuro — nenhuma cor nova entrou no kit. PARALLAX: a folga vem do scale (1.12 = 6% por lado). O GSAP compõe translate antes do scale, então yPercent é % da altura da faixa. Amplitude 4 deixa margem. Ver initBreakParallax em 03-home.js.html. ============================================================ */ .db-respiro{ position:relative; overflow:hidden; background:var(--db-tinta); /* evita flash claro no carregamento */ } .db-respiro__bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center center; background-repeat:no-repeat; /* a foto vem mais fria que o feed; o sépia puxa para o terroso sem precisar de duotone, que achataria a imagem */ filter:sepia(.22) saturate(1.06) brightness(.96); transform:scale(1.12); will-change:transform; } /* véu em duas camadas: base uniforme para garantir a leitura do texto, mais uma vinheta que fecha os cantos e concentra o olhar */ .db-respiro__veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(46,42,27,.90) 0%, rgba(46,42,27,.78) 42%, rgba(46,42,27,.90) 100%), radial-gradient(ellipse 120% 96% at 50% 50%, rgba(46,42,27,0) 40%, rgba(46,42,27,.42) 100%); } .db-respiro__in{ position:relative; z-index:2; width:100%; max-width:var(--db-grid); margin:0 auto; box-sizing:border-box; /* respiro generoso: é o conteúdo da faixa tanto quanto a frase */ padding:clamp(76px,9vw,132px) 0; text-align:center; } .db-respiro__t{ margin:0 auto; font-family:var(--db-pd) !important; font-weight:400; font-size:clamp(23px,2.9vw,38px); line-height:1.34; letter-spacing:-.8px; color:var(--db-creme); /* medida curta: texto centrado em linha longa perde o começo da linha seguinte e cansa */ max-width:22ch; text-wrap:balance; } .db-respiro__t em{ font-style:italic; color:var(--db-areia); } .db-respiro__cta{margin-top:clamp(26px,3.2vw,38px)} /* a nota do lado prático: quem foi convencido pela frase precisa saber duração e forma de pagamento antes de clicar */ .db-respiro__nota{ margin:clamp(16px,2vw,22px) 0 0; font-family:var(--db-pp) !important; font-weight:400; font-size:13px; line-height:1.7; letter-spacing:.2px; color:var(--db-areia); } /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:1280px){ .db-respiro__in{padding-left:var(--db-pad-x);padding-right:var(--db-pad-x)} } @media (max-width:900px){ .db-respiro__t{max-width:20ch;letter-spacing:-.6px} /* sem parallax no celular, a folga só cortaria a imagem */ .db-respiro__bg{transform:none} } @media (max-width:480px){ .db-respiro__in{padding-top:64px;padding-bottom:64px} .db-respiro__t{font-size:21px;line-height:1.36;max-width:100%;letter-spacing:-.4px} .db-respiro__nota{font-size:12px;max-width:30ch;margin-left:auto;margin-right:auto} .db-respiro__veil{ background: linear-gradient(180deg, rgba(46,42,27,.92) 0%, rgba(46,42,27,.84) 50%, rgba(46,42,27,.92) 100%); } } @media (prefers-reduced-motion:reduce){ .db-respiro__bg{transform:none;will-change:auto} }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-5194e72 */.elementor-24 .elementor-element.elementor-element-5194e72{ text-wrap: balance; } .cm-gold { color: var(--cm-gold, #EF980F); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-edc71de *//* ============================================================ DRA. DANIELLA BALTADAKIS · HOME · SERVIÇOS · ETAPAS 28-servicos-etapas.css · Cola no CSS personalizado DO WIDGET O QUE ESTAVA EMBOLADO, E O PORQUÊ Quatro coisas somadas viravam um bloco de texto contínuo: 1. a lista encostava na headline 2. os itens tinham 30px entre si — menos que a própria entrelinha da descrição, então nada separava um do outro 3. cada descrição ocupava duas linhas 4. o numeral repetia o que o nó já dizia, gastando uma linha por item Agora: respiro de ~44px depois do H2, 44px entre itens, uma linha por descrição, numeral removido. E um fio sob o título amarra o nome ao dado prático da direita, que antes flutuava solto na borda. O TRILHO NÃO ATRAVESSA A LISTA INTEIRA. Começa no centro do primeiro nó e termina no centro do último — passando das pontas, sugeriria que a sequência continua fora da tela. ============================================================ */ .db-etapas{ list-style:none; margin:clamp(30px,3.6vw,46px) 0 0; padding:0; max-width:560px; } .db-etapa{ position:relative; padding:0 0 clamp(34px,3.4vw,44px) 40px; } .db-etapa:last-child{padding-bottom:0} /* ── trilho ── */ .db-etapa::before{ content:''; position:absolute; left:5px; top:0; bottom:0; width:1px; background:var(--db-fio); } .db-etapa:first-child::before{top:11px} .db-etapa:last-child::before{bottom:auto;height:11px} /* ── nó ── */ .db-etapa::after{ content:''; position:absolute; left:0; top:5px; width:11px; height:11px; border-radius:50%; background:var(--db-oliva); border:1px solid var(--db-oliva); box-sizing:border-box; } /* etapa condicional: nó vazado. A diferença precisa ser inequívoca, senão a marcação vira decoração. */ .db-etapa--opcional::after{ background:transparent; border-color:var(--db-salvia); } /* ── linha do título ── Nome e dado prático na mesma régua. O fio embaixo amarra os dois: sem ele, o dado alinhado à direita parece pertencer à margem, não ao item. */ .db-etapa__linha{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:10px; border-bottom:1px solid var(--db-fio); } .db-etapa__t{ margin:0; font-family:var(--db-pd) !important; font-weight:400 !important; font-size:25px; line-height:1.15; letter-spacing:-.5px; color:var(--db-tinta); } .db-etapa__meta{ flex:none; font-family:var(--db-pp) !important; font-weight:500; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--db-oliva); white-space:nowrap; } .db-etapa--opcional .db-etapa__meta{color:var(--db-leg)} .db-etapa__d{ margin:11px 0 0; font-family:var(--db-pp) !important; font-weight:300; font-size:16px; line-height:1.6; color:var(--db-texto); } /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:1280px){ .db-etapa__t{font-size:23px;letter-spacing:-.4px} } @media (max-width:600px){ /* nome e dado na mesma linha só cabem em coluna larga; estreitos, o dado empurra o nome para duas linhas */ .db-etapa{padding-left:34px;padding-bottom:30px} .db-etapa__linha{ flex-direction:column; align-items:flex-start; gap:5px; padding-bottom:9px; } .db-etapa__t{font-size:21px} .db-etapa__d{font-size:15.5px;margin-top:9px} }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-18971f1 *//* ============================================================ DRA. DANIELLA BALTADAKIS · HOME · SERVIÇOS · FOTO 26-servicos-foto.css · Cola no CSS personalizado DO WIDGET DEPENDE de home-12-bio-foto.css, que traz o componente base (.db-bio-media). Aqui está só o espelhamento. Se um dia a foto da bio sair da página, mova o conteúdo do 12 para o global — senão este bloco fica sem estilo. POR QUE ESPELHAR O fio deslocado é direcional: ele indica de que lado a peça "respira". Na coluna esquerda ele escapa para a esquerda, para fora da página. Repetido aqui, apontaria para dentro e apertaria a coluna de texto ao lado. Espelhado, as duas fotos abrem para as bordas e a composição fecha ao centro. ============================================================ */ /* espelhar é inverter o lado por onde o fio escapa — e, junto, o lado do recuo da legenda */ .db-bio-media--dir{padding:0 22px 22px 0} .db-bio-media--dir::before{left:auto;right:0} .db-bio-media--dir .db-bio-media__cap{ margin-left:36px; margin-right:0; } /* ---------- enquadramento ---------- Foto diferente, ponto de interesse diferente. Ajuste aqui se a cabeça dela ficar alta ou baixa demais na janela. */ .db-bio-media--dir .db-bio-media__img{ object-position:center 32%; } /* ============================================================ RESPONSIVO — acompanha os recuos do componente base ============================================================ */ @media (max-width:1280px){ .db-bio-media--dir{padding:0 18px 18px 0} .db-bio-media--dir .db-bio-media__cap{margin-left:32px;margin-right:0} } @media (max-width:900px){ .db-bio-media--dir{padding:0 14px 14px 0} .db-bio-media--dir .db-bio-media__cap{margin-left:28px;margin-right:0} /* em coluna única as duas fotos ficam alinhadas à esquerda: o espelhamento só faz sentido quando há duas colunas */ .db-bio-media--dir{margin-left:0;margin-right:auto} }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-fd62afc *//* ============================================================ DRA. DANIELLA BALTADAKIS · PONTE 10-ponte.css · Cola no CSS personalizado DO WIDGET HTML Sem fundo. Dois fios e respiro, só isso. O bloco fecha a seção anterior e entrega a próxima — por isso o texto é corpo, não título: título aqui abriria um assunto novo bem na hora de encerrar um. ============================================================ */ .db-bridge, .db-bridge *, .db-bridge *::before, .db-bridge *::after{box-sizing:border-box} .db-bridge{ background:transparent; color:var(--db-tinta); border-top:1px solid var(--db-fio); border-bottom:1px solid var(--db-fio); -webkit-font-smoothing:antialiased; } .db-bridge__in{ display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,64px); padding:clamp(30px,3.4vw,46px) 0; } /* ---------- a frase ---------- */ .db-bridge__t{ margin:0; font-family:var(--db-pp) !important; font-weight:300; font-size:clamp(16px,1.4vw,19px); line-height:1.62; color:var(--db-texto); max-width:44ch; } /* a ênfase vira Playfair itálico: é o recurso de destaque da marca e o único serifado do bloco, então marca sem gritar */ .db-bridge__t em{ font-family:var(--db-pd) !important; font-style:italic; font-weight:400; color:var(--db-oliva); } /* ---------- o convite ---------- */ .db-bridge__cta{ display:inline-flex; align-items:center; /* o círculo tem 46, mas o rótulo ao lado é mais baixo e puxava a caixa do link para menos que o alvo mínimo de toque */ min-height:46px; gap:14px; flex:none; background:transparent; border:none; box-shadow:none; color:inherit !important; text-decoration:none !important; cursor:pointer; -webkit-tap-highlight-color:transparent; } .db-bridge__mk{ position:relative; flex:none; display:grid; place-items:center; width:46px;height:46px; border-radius:50%; border:1px solid var(--db-fio); background:transparent; overflow:hidden; isolation:isolate; color:var(--db-oliva); transition:border-color .5s var(--db-ease),color .5s var(--db-ease); } /* a tinta sobe por baixo da seta, cortada em diagonal — o mesmo gesto de varredura dos botões, em escala menor */ .db-bridge__mk::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--db-oliva); clip-path:polygon(0% 100%,100% 118%,100% 118%,0% 100%); transition:clip-path .55s cubic-bezier(.76,0,.24,1); } .db-bridge__mk svg{ width:16px;height:16px; display:block; transition:transform .5s var(--db-ease); } .db-bridge__txt{ position:relative; font-family:var(--db-pp) !important; font-weight:500; font-size:13px; line-height:1.4; letter-spacing:1.8px; text-transform:uppercase; color:var(--db-oliva); padding-bottom:5px; white-space:nowrap; } .db-bridge__txt::after{ content:''; position:absolute; left:0;right:0;bottom:0; height:1px; background:currentColor; opacity:.34; transform:scaleX(0); transform-origin:left center; transition:transform .55s var(--db-ease); } .db-bridge__cta:hover .db-bridge__txt::after, .db-bridge__cta:focus-visible .db-bridge__txt::after{transform:scaleX(1)} .db-bridge__cta:hover .db-bridge__mk, .db-bridge__cta:focus-visible .db-bridge__mk{ border-color:var(--db-oliva); color:var(--db-creme); } .db-bridge__cta:hover .db-bridge__mk::before, .db-bridge__cta:focus-visible .db-bridge__mk::before{ clip-path:polygon(0% -18%,100% 0%,100% 100%,0% 100%); } .db-bridge__cta:hover .db-bridge__mk svg, .db-bridge__cta:focus-visible .db-bridge__mk svg{transform:translateX(2px)} .db-bridge__cta:focus-visible{outline:none} .db-bridge__cta:focus-visible .db-bridge__mk{ outline:2px solid var(--db-oliva); outline-offset:3px; } /* ---------- variante terra ---------- Ponte com fundo próprio, no marrom escuro do kit. Usada quando a ponte precisa cortar em vez de apenas separar — entre duas seções claras, por exemplo, onde dois fios sozinhos não fazem degrau suficiente. #3B3524 é um degrau acima do --db-tinta usado no véu da faixa de respiro. A escala de escuros do site fica assim, do mais claro ao mais fundo: faixa de dados ... #504935 esta ponte ....... #3B3524 faixa de respiro . #2E2A1B Cada bloco escuro tem seu lugar na escala em vez de repetir o mesmo valor. COM RAIO, VIRA PEÇA — e peça não sangra até a borda da tela. Por isso o bloco passa a respeitar o grid e ganha margem lateral: canto arredondado cortado pela borda do navegador é o defeito clássico de bloco arredondado em largura cheia. Os fios saem: régua e caixa arredondada são duas formas diferentes de delimitar, e juntas se anulam. */ .db-bridge--terra{ max-width:var(--db-grid); margin-left:auto; margin-right:auto; background:#3B3524; color:var(--db-creme); border:0; border-radius:24px; } .db-bridge--terra .db-bridge__in{ padding-left:clamp(24px,3.4vw,52px); padding-right:clamp(24px,3.4vw,52px); } .db-bridge--terra .db-bridge__t{color:var(--db-creme)} .db-bridge--terra .db-bridge__t em{color:var(--db-areia)} .db-bridge--terra .db-bridge__txt{color:var(--db-areia)} .db-bridge--terra .db-bridge__mk{ border-color:rgba(239,227,203,.34); color:var(--db-areia); } .db-bridge--terra .db-bridge__mk::before{background:var(--db-areia)} .db-bridge--terra .db-bridge__cta:hover .db-bridge__mk, .db-bridge--terra .db-bridge__cta:focus-visible .db-bridge__mk{ border-color:var(--db-areia); color:var(--db-tinta); } .db-bridge--terra .db-bridge__cta:focus-visible .db-bridge__mk{ outline-color:var(--db-areia); } /* ---------- responsivo ---------- */ @media (max-width:1280px){ /* abaixo do grid o bloco ocupa 100% do container. A margem lateral da página já vem do próprio container do Elementor — somar a dela aqui virava padding duplo e a ponte encolhia dentro da seção. */ .db-bridge--terra{ max-width:none; margin-left:0; margin-right:0; } } @media (max-width:900px){ .db-bridge--terra{border-radius:20px} .db-bridge__in{ flex-direction:column; align-items:flex-start; gap:22px; } .db-bridge__t{max-width:none} } @media (max-width:440px){ .db-bridge--terra{border-radius:16px} .db-bridge__txt{font-size:12.5px;letter-spacing:1.2px;white-space:normal} .db-bridge__mk{width:42px;height:42px} .db-bridge__cta{gap:12px} } /* no toque não existe hover: o estado ficaria grudado depois do tap */ @media (hover:none){ .db-bridge__cta:hover .db-bridge__mk::before{clip-path:polygon(0% 100%,100% 118%,100% 118%,0% 100%)} .db-bridge__cta:hover .db-bridge__txt::after{transform:scaleX(0)} .db-bridge__cta:hover .db-bridge__mk svg{transform:none} .db-bridge__cta:hover .db-bridge__mk{color:var(--db-oliva)} } @media (prefers-reduced-motion:reduce){ .db-bridge__mk, .db-bridge__mk::before, .db-bridge__mk svg, .db-bridge__txt::after{transition-duration:.001ms !important} } /* ============================================================ BLINDAGEM O tema ou o Elementor podem injetar estilo com !important em a e em button. Nesse caso só !important vence !important. Cada estado declarado, mesmo quando o valor é transparente. ============================================================ */ .db-bridge__cta, .db-bridge__cta:hover, .db-bridge__cta:focus, .db-bridge__cta:active, .db-bridge__cta:visited, .db-bridge__cta:focus-visible{ background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; box-shadow:none !important; text-decoration:none !important; color:inherit !important; } .db-bridge__mk, .db-bridge__cta:hover .db-bridge__mk, .db-bridge__cta:focus .db-bridge__mk, .db-bridge__cta:active .db-bridge__mk, .db-bridge__cta:focus-visible .db-bridge__mk{ background:transparent !important; background-image:none !important; box-shadow:none !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-370ca19 *//* ═══════════════════════════════════════ DRA. DANIELLA BALTADAKIS — FIOS LATERAIS 15-fios-laterais.css Colar no CSS Personalizado do CONTAINER da seção. Usa APENAS o ::after. O ::before fica livre porque é nele que o Elementor desenha a sobreposição de fundo do container. Os dois fios saem de um pseudo só: uma caixa transparente com borda esquerda e direita. O fundo dela nunca é pintado. ═══════════════════════════════════════ */ .elementor-24 .elementor-element.elementor-element-370ca19 { /* ── Os quatro números a mexer ── */ --fio-grid: 1280px; /* largura do grid */ --fio-extra: 64px; /* quanto passa do grid para fora */ --fio-piso: 20px; /* onde para em tela estreita */ --fio-cor: var(--db-fio); /* segue o fio do site: #E1DBCE sobre creme, #D3CCBB dentro de .db-areia */ position: relative; } .elementor-24 .elementor-element.elementor-element-370ca19::after { content: '' !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; /* max() segura os fios no piso quando a tela fica menor que o grid mais o extra, senão sairiam pela borda. */ left: max(var(--fio-piso), calc((100% - var(--fio-grid)) / 2 - var(--fio-extra))) !important; right: max(var(--fio-piso), calc((100% - var(--fio-grid)) / 2 - var(--fio-extra))) !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; /* Somente as duas bordas laterais. Fundo permanece transparente, então a sobreposição do Elementor no ::before continua visível. */ border: none !important; border-left: 1px solid var(--fio-cor) !important; border-right: 1px solid var(--fio-cor) !important; border-radius: 0 !important; background: none !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; /* Acima da sobreposição do Elementor, que fica no ::before com z-index 0. Abaixo do conteúdo, que o Elementor posiciona a partir de 1. */ z-index: 1 !important; pointer-events: none !important; } /* ── Seção escura ── Adicione a classe db-fios--escura no container. O fio claro some sobre fundo escuro; o oliva primário é o único tom do kit que se lê como fio nesses blocos. */ .elementor-24 .elementor-element.elementor-element-370ca19.db-fios--escura { --fio-cor: var(--db-oliva); } /* Em seção de areia não precisa de nada: a classe db-areia no container já reajusta o --db-fio, e os fios laterais seguem. */ /* Em tela estreita os fios encostam no conteúdo e viram moldura apertada em vez de margem. Some com eles. */ @media (max-width: 600px) { .elementor-24 .elementor-element.elementor-element-370ca19::after { display: none !important; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-578ac1e */.elementor-24 .elementor-element.elementor-element-578ac1e{ text-wrap: balance; } .cm-gold { color: var(--cm-gold, #EF980F); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-8a6f05a *//* ============================================================ DRA. DANIELLA BALTADAKIS · HOME · DEPOIMENTOS 32-depoimentos.css · Cola no CSS personalizado DO WIDGET CARD BRANCO, SEÇÃO AREIA. Aplique db-areia no container (Avançado > Classes CSS). O branco sozinho não resolve nada: sobre creme ele dá 1,03:1 e some. Sobre areia dá 1,27:1 e vira card de verdade. São as duas metades da mesma correção — trocar só o card mantém o problema. O branco é superfície de papel, não cor de marca: por isso fica aqui, no CSS do componente, e não entra no kit de dez. Sem sombra e sem canto arredondado. A definição vem da própria diferença de superfície e do espaço interno. A LARGURA DO CARD É CALCULADA, não fixa. As duas variáveis do topo controlam tudo: quantos aparecem e qual o vão entre eles. Trocar de 3 para 2 colunas é uma linha por breakpoint, e o JS remede sozinho no resize. A CITAÇÃO É POPPINS, NÃO PLAYFAIR. Playfair em 24px dentro de um card pequeno lê como título — e pior, como título igual ao H2 logo acima, na mesma fonte e em corpo parecido. A seção passa a ter dois títulos e nenhuma fala. Depoimento é voz de outra pessoa. Ele precisa soar diferente da página inteira, não igual ao que a médica escreve. Poppins 300 em 17px, com aspas e assinatura serifadas, entrega isso: o texto é fala, o enquadramento é editorial. ============================================================ */ .db-quotes{ --q-gap:24px; --q-vis:3; position:relative; } .db-quotes__vp{overflow:hidden} .db-quotes__track{ display:flex; gap:var(--q-gap); align-items:stretch; will-change:transform; } /* ---------- card ---------- */ .db-quote{ flex:0 0 calc((100% - (var(--q-vis) - 1) * var(--q-gap)) / var(--q-vis)); display:flex; flex-direction:column; margin:0; padding:clamp(28px,2.8vw,38px) clamp(24px,2.4vw,34px); background:#FFFFFF; border:1px solid var(--db-fio); transition:border-color .5s var(--db-ease),transform .5s var(--db-ease); } /* o hover não escurece o card — isso o devolveria para dentro do fundo. Muda a borda e levanta. */ .db-quote:hover{border-color:var(--db-oliva);transform:translateY(-3px)} .db-quote blockquote{ position:relative; margin:0; font-family:var(--db-pp) !important; font-weight:300; font-size:17px; line-height:1.78; letter-spacing:.1px; color:var(--db-texto); } /* a aspa serifada fica como sinal gráfico acima da fala, não grudada nela: marca que é citação sem transformar o texto em título */ .db-quote blockquote::before{ content:'\201C'; display:block; font-family:var(--db-pd); font-size:46px; line-height:.6; color:var(--db-salvia); margin-bottom:16px; } .db-quote figcaption{ margin-top:auto; padding-top:22px; font-family:var(--db-pd) !important; font-weight:400; font-size:17px; letter-spacing:0; text-transform:none; color:var(--db-oliva); } /* fio curto acima da assinatura, não régua cheia: a assinatura é um selo, não um rodapé de card */ .db-quote figcaption::before{ content:''; display:block; width:26px; height:1px; background:var(--db-salvia); margin-bottom:14px; } /* ---------- barra de controle ---------- */ .db-quotes__bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:clamp(24px,2.8vw,34px); padding-top:18px; border-top:1px solid var(--db-fio); } .db-quotes__dots{display:flex;align-items:center;gap:9px} .db-quotes__dot{ width:22px; height:2px; padding:0; border:0; border-radius:0; background:var(--db-fio); cursor:pointer; transition:background .45s var(--db-ease),width .45s var(--db-ease); } .db-quotes__dot:hover{background:var(--db-salvia)} /* traço que cresce em vez de bolinha que acende: além de mais discreto, mostra progresso dentro da série */ .db-quotes__dot.is-on{background:var(--db-oliva);width:38px} .db-quotes__nav{display:flex;align-items:center;gap:12px} .db-quotes__count{ font-family:var(--db-pp) !important; font-weight:400; font-size:12px; letter-spacing:1.4px; color:var(--db-leg); margin-right:6px; } .db-quotes__count b{font-weight:500;color:var(--db-tinta)} .db-quotes__arrow{ display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--db-fio); border-radius:50%; background:transparent; color:var(--db-oliva); cursor:pointer; transition:border-color .4s var(--db-ease),background .4s var(--db-ease), color .4s var(--db-ease),opacity .4s var(--db-ease); } .db-quotes__arrow svg{width:16px;height:16px} .db-quotes__arrow:hover:not(:disabled){ border-color:var(--db-oliva); background:var(--db-oliva); color:var(--db-creme); } .db-quotes__arrow:disabled{opacity:.32;cursor:default} .db-quotes__arrow:focus-visible{outline:2px solid var(--db-oliva);outline-offset:3px} /* ---------- sem JS ---------- Cai para rolagem horizontal com encaixe. Nada quebra, e quem estiver sem GSAP ainda lê os nove. */ .db-quotes--noJS .db-quotes__vp{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .db-quotes--noJS .db-quotes__vp::-webkit-scrollbar{display:none} .db-quotes--noJS .db-quote{scroll-snap-align:start} .db-quotes--noJS .db-quotes__bar{display:none} /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:1100px){ .db-quotes{--q-vis:2;--q-gap:20px} .db-quote blockquote{font-size:16.5px} } @media (max-width:760px){ .db-quotes{--q-vis:1;--q-gap:16px} .db-quote blockquote{font-size:16.5px;line-height:1.74} .db-quotes__bar{padding-top:16px;margin-top:22px} .db-quotes__count{display:none} } @media (max-width:420px){ /* nove traços em tela estreita viram uma régua sem função */ .db-quotes__dots{display:none} .db-quotes__bar{justify-content:flex-end} .db-quote blockquote{font-size:16px} } /* no toque o hover fica preso depois do tap */ @media (hover:none){ .db-quote:hover{transform:none;border-color:var(--db-fio)} .db-quotes__dot:hover{background:var(--db-fio)} .db-quotes__dot.is-on:hover{background:var(--db-oliva)} .db-quotes__arrow:hover:not(:disabled){ border-color:var(--db-fio); background:transparent; color:var(--db-oliva); } } @media (prefers-reduced-motion:reduce){ .db-quote,.db-quotes__dot,.db-quotes__arrow{transition:none} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-683c287 *//* ═══════════════════════════════════════ DRA. DANIELLA BALTADAKIS — FIOS LATERAIS 15-fios-laterais.css Colar no CSS Personalizado do CONTAINER da seção. Usa APENAS o ::after. O ::before fica livre porque é nele que o Elementor desenha a sobreposição de fundo do container. Os dois fios saem de um pseudo só: uma caixa transparente com borda esquerda e direita. O fundo dela nunca é pintado. ═══════════════════════════════════════ */ .elementor-24 .elementor-element.elementor-element-683c287 { /* ── Os quatro números a mexer ── */ --fio-grid: 1280px; /* largura do grid */ --fio-extra: 64px; /* quanto passa do grid para fora */ --fio-piso: 20px; /* onde para em tela estreita */ --fio-cor: var(--db-fio); /* segue o fio do site: #E1DBCE sobre creme, #D3CCBB dentro de .db-areia */ position: relative; } .elementor-24 .elementor-element.elementor-element-683c287::after { content: '' !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; /* max() segura os fios no piso quando a tela fica menor que o grid mais o extra, senão sairiam pela borda. */ left: max(var(--fio-piso), calc((100% - var(--fio-grid)) / 2 - var(--fio-extra))) !important; right: max(var(--fio-piso), calc((100% - var(--fio-grid)) / 2 - var(--fio-extra))) !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; /* Somente as duas bordas laterais. Fundo permanece transparente, então a sobreposição do Elementor no ::before continua visível. */ border: none !important; border-left: 1px solid var(--fio-cor) !important; border-right: 1px solid var(--fio-cor) !important; border-radius: 0 !important; background: none !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; /* Acima da sobreposição do Elementor, que fica no ::before com z-index 0. Abaixo do conteúdo, que o Elementor posiciona a partir de 1. */ z-index: 1 !important; pointer-events: none !important; } /* ── Seção escura ── Adicione a classe db-fios--escura no container. O fio claro some sobre fundo escuro; o oliva primário é o único tom do kit que se lê como fio nesses blocos. */ .elementor-24 .elementor-element.elementor-element-683c287.db-fios--escura { --fio-cor: var(--db-oliva); } /* Em seção de areia não precisa de nada: a classe db-areia no container já reajusta o --db-fio, e os fios laterais seguem. */ /* Em tela estreita os fios encostam no conteúdo e viram moldura apertada em vez de margem. Some com eles. */ @media (max-width: 600px) { .elementor-24 .elementor-element.elementor-element-683c287::after { display: none !important; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-22bc842 */.elementor-24 .elementor-element.elementor-element-22bc842{ text-wrap: balance; } .cm-gold { color: var(--cm-gold, #EF980F); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-44ef688 *//* ============================================================ DRA. DANIELLA BALTADAKIS · HOME · ONDE ATENDO · INFORMAÇÕES 35-onde-info.css · Cola no CSS personalizado DO WIDGET QUATRO CÉLULAS DE NOVO — E POR QUE AQUI PODE A faixa de dados também tem quatro. A diferença não está no número, está no registro: lá é escuro, centralizado, com Playfair em corpo grande e texto mínimo; aqui é claro, alinhado à esquerda, tudo em Poppins pequeno. Uma é declaração de marca, a outra é ficha de contato — e ficha de contato é o único lugar da página onde previsibilidade vale mais que invenção. Quem chega até aqui quer achar o endereço rápido, não ser surpreendido. Os fios verticais recuam do topo e da base, como na faixa de dados: atravessando inteiros, dividem em blocos; recuados, separam sem cortar. ============================================================ */ .db-info{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--db-fio); } .db-info__cel{ position:relative; display:block; padding:26px clamp(18px,2vw,30px) 28px 0; text-decoration:none !important; color:inherit !important; } .db-info__cel::before{ content:''; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--db-fio); } .db-info__cel:first-child::before{display:none} .db-info__cel:first-child{padding-left:0} .db-info__cel:not(:first-child){padding-left:clamp(18px,2vw,30px)} .db-info__lb{ display:block; margin-bottom:12px; font-family:var(--db-pp) !important; font-weight:500; font-size:11px; letter-spacing:2.2px; text-transform:uppercase; color:var(--db-oliva); } .db-info__vl{ display:block; font-family:var(--db-pp) !important; font-weight:300; font-size:17px; line-height:1.6; color:var(--db-tinta); } /* ---------- células clicáveis ---------- A pista de que é link aparece no hover, não em repouso: em repouso o bloco precisa ser ficha, e ficha com dois links sublinhados vira formulário. */ .db-info__aux{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-family:var(--db-pp) !important; font-weight:500; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--db-leg); transition:color .4s var(--db-ease),gap .4s var(--db-ease); } .db-info__aux::after{ content:''; width:14px; height:1px; background:currentColor; transition:width .4s var(--db-ease); } .db-info__cel--link:hover .db-info__aux, .db-info__cel--link:focus-visible .db-info__aux{ color:var(--db-oliva); gap:11px; } .db-info__cel--link:hover .db-info__aux::after, .db-info__cel--link:focus-visible .db-info__aux::after{width:22px} .db-info__cel--link:focus-visible{outline:2px solid var(--db-oliva);outline-offset:4px} /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:1024px){ /* quatro colunas estreitas quebram o endereço em cinco linhas */ .db-info{grid-template-columns:1fr 1fr} .db-info__cel:nth-child(odd){padding-left:0} .db-info__cel:nth-child(odd)::before{display:none} .db-info__cel:nth-child(n+3){padding-top:28px} /* fio horizontal entre as duas fileiras, recuado como os verticais */ .db-info__cel:nth-child(n+3)::after{ content:''; position:absolute; top:0; left:0; right:14%; height:1px; background:var(--db-fio); } .db-info__cel:nth-child(4)::after{left:14%;right:0} } @media (max-width:560px){ .db-info{grid-template-columns:1fr} .db-info__cel{padding:22px 0 24px !important} .db-info__cel::before{display:none} .db-info__cel:not(:first-child)::after{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--db-fio); } .db-info__cel:nth-child(4)::after{left:0} .db-info__vl{font-size:16.5px} } @media (hover:none){ .db-info__cel--link:hover .db-info__aux{color:var(--db-leg);gap:7px} .db-info__cel--link:hover .db-info__aux::after{width:14px} } @media (prefers-reduced-motion:reduce){ .db-info__aux,.db-info__aux::after{transition:none} }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-1a95a15 *//* ============================================================ DRA. DANIELLA BALTADAKIS · HOME · CHAMADA FINAL 37-final.css · Cola no CSS personalizado DO WIDGET TERRA MÉDIO, não o mais escuro. A versão anterior estava em #241F14 e o fim da página fechava quase no preto — o marrom sumia e sobrava um bloco pesado. Agora o campo é #443B28: escuro o suficiente para fechar, mas com cor visível. A escala do site deixa de ser uma descida contínua e vira uma curva: escurece até a faixa de respiro, no meio, e clareia um passo no fim. faixa de dados ... #504935 ponte terra ...... #3B3524 faixa de respiro . #2E2A1B ← o mais fundo, no miolo chamada final .... #443B28 O ponto mais escuro no meio da página funciona melhor do que no fim: ele marca a virada, e o fechamento fica acolhedor em vez de sombrio — que é o registro certo para um último convite a quem sente dor. A MESMA FOTO DA FAIXA DE RESPIRO, tratada de outro jeito. Repetir a imagem amarra as duas pontas da página; mudar o tratamento evita que pareçam o mesmo bloco. Lá o véu deixa a foto aparecer; aqui ela fica quase apagada, presente só como textura — o que resolve o problema do degradê chapado sem competir com o texto. Sobre a foto correm fios diagonais finíssimos. Não é ruído aleatório: é a mesma ideia dos fios de coluna da hero e das réguas das listas, inclinada. Dá superfície ao campo escuro, que nessa luminosidade achata se ficar liso. O halo quente no centro puxa o marrom para a frente. Sem ele, escuro demais lê como preto e a página perde a temperatura. ============================================================ */ .db-final{ position:relative; overflow:hidden; background:#443B28; color:var(--db-creme); } /* ── 1 · foto, quase apagada ── */ .db-final__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('https://dradaniellareumatologista.com.br/wp-content/uploads/2026/08/bg-break.webp'); background-size:cover; background-position:center center; /* sépia forte, brilho contido: a foto vira campo terroso, não imagem reconhecível. É textura, não cena — mas com luz suficiente para a textura existir. */ filter:sepia(.5) saturate(.9) brightness(.62) contrast(1.02); /* folga do parallax: 1.12 = 6% por lado. O véu e os fios são filhos deste elemento, então acompanham o movimento e não abrem fresta na borda. Amplitude no JS é 4 — subir uma sem subir a outra revela borda. */ transform:scale(1.12); will-change:transform; } /* ── 2 · fios diagonais ── */ .db-final__bg::before{ content:''; position:absolute; inset:-20%; background-image:repeating-linear-gradient(122deg, rgba(239,227,203,.065) 0 1px, transparent 1px 84px); /* somem nas bordas para não terminarem em corte seco */ -webkit-mask-image:radial-gradient(ellipse 88% 92% at 50% 50%,#000 34%,transparent 88%); mask-image:radial-gradient(ellipse 88% 92% at 50% 50%,#000 34%,transparent 88%); } /* ── 3 · véu e halo quente ── */ .db-final__bg::after{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 78% 92% at 50% 42%, rgba(134,108,63,.34) 0%, rgba(134,108,63,.12) 48%, rgba(134,108,63,0) 76%), /* véu mais aberto que na versão escura: a foto precisa aparecer como textura, e não só como sombra */ linear-gradient(164deg, rgba(78,67,45,.72) 0%, rgba(68,59,40,.80) 52%, rgba(58,50,34,.86) 100%); } .db-final__in{ position:relative; z-index:1; width:100%; max-width:var(--db-grid); margin:0 auto; box-sizing:border-box; padding:clamp(74px,9vw,128px) 0; text-align:center; } /* ---------- frase ---------- */ .db-final__t{ margin:0 auto; font-family:var(--db-pd) !important; font-weight:400; font-size:clamp(28px,4.2vw,58px); line-height:1.14; letter-spacing:-1.4px; color:var(--db-creme); max-width:16ch; text-wrap:balance; } .db-final__t em{ font-style:italic; font-weight:600; color:var(--db-areia); } .db-final__d{ margin:clamp(20px,2.4vw,28px) auto 0; max-width:46ch; font-family:var(--db-pp) !important; font-weight:300; font-size:clamp(16px,1.4vw,18px); line-height:1.72; color:var(--db-areia); } .db-final__cta{margin-top:clamp(28px,3.4vw,40px)} /* ---------- credencial ---------- Última aparição do CRM e do RQE na página. Fica aqui, e não só no rodapé, porque o rodapé é território de navegação: quem clica no botão nunca chega a ler o que vem depois dele. */ .db-final__pe{ display:flex; flex-direction:column; gap:4px; margin:clamp(28px,3.2vw,40px) auto 0; padding-top:clamp(22px,2.6vw,30px); max-width:52ch; border-top:1px solid rgba(239,227,203,.18); font-family:var(--db-pp) !important; font-weight:400; font-size:12.5px; line-height:1.7; letter-spacing:.2px; color:rgba(239,227,203,.72); } /* CRM e RQE não quebram linha no meio do número */ .db-final__pe span{white-space:nowrap} /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:1280px){ .db-final__in{padding-left:var(--db-pad-x);padding-right:var(--db-pad-x)} } @media (max-width:900px){ /* sem parallax no celular, a folga só cortaria a imagem */ .db-final__bg{transform:none} .db-final__t{max-width:14ch;letter-spacing:-1px} .db-final__d{max-width:40ch} } @media (prefers-reduced-motion:reduce){ .db-final__bg{transform:none;will-change:auto} } @media (max-width:480px){ /* fios mais próximos: o mesmo espaçamento numa tela estreita deixaria só duas linhas visíveis, o que lê como defeito */ .db-final__bg::before{ background-image:repeating-linear-gradient(122deg, rgba(239,227,203,.06) 0 1px, transparent 1px 58px); } .db-final__in{padding-top:62px;padding-bottom:62px} .db-final__t{font-size:26px;letter-spacing:-.7px;max-width:100%} .db-final__d{font-size:15.5px;max-width:100%} .db-final__pe{font-size:11.5px} }/* End custom CSS */