.elementor-311 .elementor-element.elementor-element-b5fb8e{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:14px 14px;--row-gap:14px;--column-gap:14px;--padding-top:120px;--padding-bottom:120px;--padding-left:40px;--padding-right:40px;}.elementor-311 .elementor-element.elementor-element-b5fb8e:not(.elementor-motion-effects-element-type-background), .elementor-311 .elementor-element.elementor-element-b5fb8e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://caonlab.com.br/wp-content/uploads/2026/08/506-1800x1200-1.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-311 .elementor-element.elementor-element-b5fb8e::before, .elementor-311 .elementor-element.elementor-element-b5fb8e > .elementor-background-video-container::before, .elementor-311 .elementor-element.elementor-element-b5fb8e > .e-con-inner > .elementor-background-video-container::before, .elementor-311 .elementor-element.elementor-element-b5fb8e > .elementor-background-slideshow::before, .elementor-311 .elementor-element.elementor-element-b5fb8e > .e-con-inner > .elementor-background-slideshow::before, .elementor-311 .elementor-element.elementor-element-b5fb8e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:rgba(0,0,0,0.62);--background-overlay:'';}.elementor-311 .elementor-element.elementor-element-1b36d1f{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-311 .elementor-element.elementor-element-1b36d1f.elementor-element{--align-self:flex-start;}.elementor-311 .elementor-element.elementor-element-1b36d1f img{width:100%;}.elementor-311 .elementor-element.elementor-element-60b206c1{--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:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-311 .elementor-element.elementor-element-16c1892e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:110px;--padding-bottom:110px;--padding-left:40px;--padding-right:40px;}.elementor-311 .elementor-element.elementor-element-601058ea{--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:60px 60px;--row-gap:60px;--column-gap:60px;}.elementor-311 .elementor-element.elementor-element-723372f3{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:16px 16px;--row-gap:16px;--column-gap:16px;}.elementor-311 .elementor-element.elementor-element-a8ec724 .elementor-icon-list-icon i{color:var( --e-global-color-c4 );transition:color 0.3s;}.elementor-311 .elementor-element.elementor-element-a8ec724 .elementor-icon-list-icon svg{fill:var( --e-global-color-c4 );transition:fill 0.3s;}.elementor-311 .elementor-element.elementor-element-a8ec724{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-311 .elementor-element.elementor-element-a8ec724 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-311 .elementor-element.elementor-element-a8ec724 .elementor-icon-list-item > a{font-family:"Montserrat", Montserrat, Sans-serif;font-size:14px;font-weight:300;text-transform:uppercase;}.elementor-311 .elementor-element.elementor-element-a8ec724 .elementor-icon-list-text{color:var( --e-global-color-c3 );transition:color 0.3s;}.elementor-311 .elementor-element.elementor-element-61d69bb3{--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:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-311 .elementor-element.elementor-element-45e49554{--display:flex;}.elementor-311 .elementor-element.elementor-element-2fc3ce69{border-radius:10px 10px 10px 10px;}.elementor-311 .elementor-element.elementor-element-2fc3ce69 img{border-radius:10px 10px 10px 10px;}.elementor-311 .elementor-element.elementor-element-1974a821{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:0px;--padding-bottom:110px;--padding-left:40px;--padding-right:40px;}.elementor-311 .elementor-element.elementor-element-3b029e16{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-311 .elementor-element.elementor-element-6a1faaf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:6px 6px;--row-gap:6px;--column-gap:6px;--padding-top:32px;--padding-bottom:32px;--padding-left:20px;--padding-right:20px;}.elementor-311 .elementor-element.elementor-element-33c9496e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:6px 6px;--row-gap:6px;--column-gap:6px;--padding-top:32px;--padding-bottom:32px;--padding-left:20px;--padding-right:20px;}.elementor-311 .elementor-element.elementor-element-5c0349ae{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:6px 6px;--row-gap:6px;--column-gap:6px;--padding-top:32px;--padding-bottom:32px;--padding-left:20px;--padding-right:20px;}.elementor-311 .elementor-element.elementor-element-55b12052{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:6px 6px;--row-gap:6px;--column-gap:6px;--padding-top:32px;--padding-bottom:32px;--padding-left:20px;--padding-right:20px;}.elementor-311 .elementor-element.elementor-element-edd7c84{--display:flex;}.elementor-311 .elementor-element.elementor-element-1aa32c36{--display:flex;--min-height:66vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--overlay-opacity:0.5;--padding-top:80px;--padding-bottom:80px;--padding-left:40px;--padding-right:40px;}.elementor-311 .elementor-element.elementor-element-1aa32c36:not(.elementor-motion-effects-element-type-background), .elementor-311 .elementor-element.elementor-element-1aa32c36 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://caonlab.com.br/wp-content/uploads/2026/08/679-1800x1000-1.jpg");background-position:center center;background-size:cover;}.elementor-311 .elementor-element.elementor-element-1aa32c36::before, .elementor-311 .elementor-element.elementor-element-1aa32c36 > .elementor-background-video-container::before, .elementor-311 .elementor-element.elementor-element-1aa32c36 > .e-con-inner > .elementor-background-video-container::before, .elementor-311 .elementor-element.elementor-element-1aa32c36 > .elementor-background-slideshow::before, .elementor-311 .elementor-element.elementor-element-1aa32c36 > .e-con-inner > .elementor-background-slideshow::before, .elementor-311 .elementor-element.elementor-element-1aa32c36 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:rgba(0,0,0,0.55);--background-overlay:'';}.elementor-311 .elementor-element.elementor-element-1f5e630 .elementor-icon-list-icon i{color:var( --e-global-color-c4 );transition:color 0.3s;}.elementor-311 .elementor-element.elementor-element-1f5e630 .elementor-icon-list-icon svg{fill:var( --e-global-color-c4 );transition:fill 0.3s;}.elementor-311 .elementor-element.elementor-element-1f5e630{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-311 .elementor-element.elementor-element-1f5e630 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-311 .elementor-element.elementor-element-1f5e630 .elementor-icon-list-item > a{font-family:"Montserrat", Montserrat, Sans-serif;font-size:13px;font-weight:300;text-transform:uppercase;}.elementor-311 .elementor-element.elementor-element-1f5e630 .elementor-icon-list-text{color:var( --e-global-color-c3 );transition:color 0.3s;}.elementor-311 .elementor-element.elementor-element-1296931a{width:var( --container-widget-width, 70% );max-width:70%;--container-widget-width:70%;--container-widget-flex-grow:0;text-align:center;}.elementor-311 .elementor-element.elementor-element-5422b1fa{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;}@media(min-width:768px){.elementor-311 .elementor-element.elementor-element-60b206c1{--width:100%;}.elementor-311 .elementor-element.elementor-element-723372f3{--width:50%;}.elementor-311 .elementor-element.elementor-element-61d69bb3{--width:100%;}.elementor-311 .elementor-element.elementor-element-45e49554{--width:50%;}.elementor-311 .elementor-element.elementor-element-6a1faaf{--width:25%;}.elementor-311 .elementor-element.elementor-element-33c9496e{--width:25%;}.elementor-311 .elementor-element.elementor-element-5c0349ae{--width:25%;}.elementor-311 .elementor-element.elementor-element-55b12052{--width:25%;}.elementor-311 .elementor-element.elementor-element-5422b1fa{--width:100%;}}/* Start custom CSS *//* =========================================================
   CAONLAB — HOME / IDENTIDADE VISUAL
   ========================================================= */

:root {
    --caon-ease: cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   1. IMAGENS NORMAIS DA HOME
   P&B -> COR NO HOVER
   ========================================================= */

/*
 * Aplica nas imagens normais da página.
 * Logos SVG ficam de fora.
 */
body.home
.elementor[data-elementor-type="wp-page"]
.elementor-widget-image
img:not([src*=".svg"]) {

    filter:
        grayscale(1)
        contrast(1.08)
        brightness(.82);

    transition:
        filter .75s var(--caon-ease),
        transform .9s var(--caon-ease);

    will-change:
        filter,
        transform;
}


/* Evita zoom escapar do widget */
body.home
.elementor[data-elementor-type="wp-page"]
.elementor-widget-image {

    overflow: hidden;
}


/* Volta para cor apenas nas imagens normais */
@media (hover:hover) and (pointer:fine) {

    body.home
    .elementor[data-elementor-type="wp-page"]
    .elementor-widget-image:hover
    img:not([src*=".svg"]) {

        filter:
            grayscale(0)
            contrast(1)
            brightness(1);

        transform:
            scale(1.035);
    }
}


/* =========================================================
   2. HERO PRINCIPAL
   P&B FIXO + ESCURECIDO
   ========================================================= */

body.home
.elementor-element-b5fb8e {

    position: relative;

    overflow: hidden;

    isolation: isolate;
}


/*
 * Camada de dessaturação.
 * Diferente do anterior, NÃO some no hover.
 */
body.home
.elementor-element-b5fb8e::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;

    /*
     * 1ª camada:
     * remove saturação da imagem.

     * 2ª camada:
     * escurece o fundo para destacar textos brancos.
     */
    background:
        linear-gradient(
            rgba(0,0,0,.36),
            rgba(0,0,0,.48)
        ),
        rgba(255,255,255,1);

    mix-blend-mode:
        multiply,
        saturation;
}


/* Conteúdo acima da imagem/overlay */
body.home
.elementor-element-b5fb8e
> .e-con-inner {

    position: relative;

    z-index: 3;
}


/* =========================================================
   3. HERO — REFORÇO DE CONTRASTE DO TEXTO
   ========================================================= */

body.home
.elementor-element-b5fb8e
.elementor-heading-title,

body.home
.elementor-element-b5fb8e
.elementor-button-text {

    text-shadow:
        0 2px 14px rgba(0,0,0,.35);
}


/* Logo branca do Hero não deve receber grayscale */
body.home
.elementor-element-b5fb8e
img[src*="Caonlab"] {

    filter: none !important;

    transform: none !important;
}


/* =========================================================
   4. SEÇÕES QUE DEVEM FICAR P&B PERMANENTEMENTE
   ========================================================= */

/*
 * Adicione esta classe no Elementor:
 *
 * caon_pb_fixo
 *
 * Use na:
 * - seção Clientes
 * - última seção/imagem
 * - qualquer outra área que NÃO deve voltar para cor.
 */

body.home
.caon_pb_fixo {

    position: relative;

    isolation: isolate;

    overflow: hidden;
}


/* Imagem interna fica permanentemente P&B */
body.home
.caon_pb_fixo
.elementor-widget-image
img:not([src*=".svg"]) {

    filter:
        grayscale(1)
        contrast(1.12)
        brightness(.70) !important;

    transform: none !important;

    transition: none !important;
}


/* Nem no hover ela volta para cor */
body.home
.caon_pb_fixo:hover
.elementor-widget-image
img:not([src*=".svg"]) {

    filter:
        grayscale(1)
        contrast(1.12)
        brightness(.70) !important;

    transform: none !important;
}


/*
 * Para containers que usam a foto como
 * BACKGROUND do Elementor.
 */
body.home
.caon_pb_fixo::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(0,0,0,.42),
            rgba(0,0,0,.54)
        ),
        rgba(255,255,255,1);

    mix-blend-mode:
        multiply,
        saturation;
}


/* Conteúdo fica acima do overlay */
body.home
.caon_pb_fixo
> .e-con-inner,

body.home
.caon_pb_fixo
> .e-con {

    position: relative;

    z-index: 2;
}


/* Texto branco ganha leve apoio */
body.home
.caon_pb_fixo
.elementor-heading-title,

body.home
.caon_pb_fixo
.elementor-widget-text-editor,

body.home
.caon_pb_fixo
.elementor-widget-text-editor p {

    text-shadow:
        0 2px 14px rgba(0,0,0,.45);
}


/* =========================================================
   5. FOTO "SOBRE O CAON.LAB"
   Continua P&B -> cor no hover
   ========================================================= */

body.home
.caon-img
img {

    filter:
        grayscale(1)
        contrast(1.08)
        brightness(.86) !important;

    transition:
        filter .75s var(--caon-ease),
        transform .9s var(--caon-ease) !important;
}


@media (hover:hover) and (pointer:fine) {

    body.home
    .caon-img:hover
    img {

        filter:
            grayscale(0)
            contrast(1)
            brightness(1) !important;

        transform:
            scale(1.035) !important;
    }
}


/* =========================================================
   6. O GIGANTE DA CAONLAB NO HERO
   ========================================================= */

body.home
.elementor-element-b5fb8e::after {

    content: "";

    position: absolute;

    right: -140px;

    top: 50%;

    width:
        min(58vw, 720px);

    aspect-ratio: 1;

    background-image:
        url("https://caonlab.com.br/wp-content/uploads/2026/08/Caonlab_O-Branco.svg");

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        contain;

    opacity:
        .065;

    pointer-events:
        none;

    z-index:
        2;

    transform:
        translateY(-50%)
        rotate(0deg);

    transform-origin:
        center;

    animation:
        caonlabGhostO
        44s
        linear
        infinite;
}


@keyframes caonlabGhostO {

    from {

        transform:
            translateY(-50%)
            rotate(0deg);
    }

    to {

        transform:
            translateY(-50%)
            rotate(360deg);
    }
}


/* Mobile */
@media (max-width:767px) {

    body.home
    .elementor-element-b5fb8e::after {

        width:
            115vw;

        right:
            -55vw;

        opacity:
            .045;
    }
}


/* =========================================================
   7. BOTÃO COM ÍCONE GIRANDO
   Classe Elementor:
   botao_animacao_icone
   ========================================================= */

.botao_animacao_icone
.elementor-button {

    background:
        #000 !important;

    color:
        #fff !important;

    border:
        1px solid
        rgba(255,255,255,.30) !important;

    overflow:
        hidden;

    transition:
        background-color .4s var(--caon-ease),
        color .4s var(--caon-ease),
        border-color .4s var(--caon-ease),
        transform .4s var(--caon-ease);
}


/* Wrapper do ícone */
.botao_animacao_icone
.elementor-button-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        rotate(0deg);

    transition:
        transform .7s var(--caon-ease);
}


/* SVG começa branco */
.botao_animacao_icone
.elementor-button-icon
svg path {

    fill:
        #fff !important;

    transition:
        fill .4s var(--caon-ease);
}


/* Imagem usada como ícone */
.botao_animacao_icone
.elementor-button-icon
img {

    transition:
        transform .7s var(--caon-ease),
        filter .4s var(--caon-ease);
}


/* Hover igual ao App */
@media (hover:hover) and (pointer:fine) {

    .botao_animacao_icone
    .elementor-button:hover {

        background:
            #fff !important;

        color:
            #000 !important;

        border-color:
            #fff !important;

        transform:
            translateY(-2px);
    }


    .botao_animacao_icone
    .elementor-button:hover
    .elementor-button-icon {

        transform:
            rotate(360deg);
    }


    .botao_animacao_icone
    .elementor-button:hover
    .elementor-button-icon
    svg path {

        fill:
            #000 !important;
    }


    .botao_animacao_icone
    .elementor-button:hover
    .elementor-button-icon
    img {

        filter:
            brightness(0)
            saturate(100%);
    }
}


/* =========================================================
   8. MELHOR LEGIBILIDADE SOBRE FOTOS
   ========================================================= */

body.home
.caon_pb_fixo
.elementor-button {

    position:
        relative;

    z-index:
        3;
}


body.home
.caon_pb_fixo
.elementor-heading-title {

    color:
        #fff;
}


body.home
.caon_pb_fixo
p {

    color:
        rgba(255,255,255,.84);
}


/* =========================================================
   9. ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    .botao_animacao_icone
    .elementor-button-icon,

    body.home
    .elementor-element-b5fb8e::after {

        animation:
            none !important;

        transition:
            none !important;
    }
}/* End custom CSS */