.elementor-7403 .elementor-element.elementor-element-59119d1e{--display:flex;}/* Start custom CSS for html, class: .elementor-element-79e879cd */@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;800;900&display=swap');


/* =========================================================
   CONFIGURAÇÃO
========================================================= */

:root {

    --scherm-header-height: 114px;

    /*
       É apenas uma referência para o conteúdo
       não ficar atrás do footer.

       NÃO reduz mais a hero.
    */

    --scherm-footer-height: 150px;

    --scherm-orange: #F67A00;
    --scherm-dark: #02142E;
}


/* =========================================================
   PÁGINA
========================================================= */

html,
body {

    margin: 0 !important;
    padding: 0 !important;

    background:
        #02142E !important;
}


html.scherm-services-lock,
body.scherm-services-lock {

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;
}


/* =========================================================
   HEADER REAL DO ELEMENTOR
========================================================= */

body.scherm-services-lock
.elementor-location-header,

body.scherm-services-lock
[data-elementor-type="header"] {

    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    margin: 0 !important;

    z-index: 99999 !important;
}


/* =========================================================
   FOOTER REAL DO ELEMENTOR

   O FOOTER FICA POR CIMA DA HERO.
========================================================= */

body.scherm-services-lock
.elementor-location-footer,

body.scherm-services-lock
[data-elementor-type="footer"] {

    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;

    margin: 0 !important;

    z-index: 50000 !important;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translate3d(
            0,
            100%,
            0
        );

    transition:

        transform
        .78s
        cubic-bezier(.22,1,.36,1),

        opacity
        .45s
        ease,

        visibility
        .45s
        ease;
}


/* =========================================================
   REMOVE POSSÍVEIS ESPAÇOS EXTERNOS DO FOOTER
========================================================= */

body.scherm-services-lock
.elementor-location-footer,

body.scherm-services-lock
[data-elementor-type="footer"],

body.scherm-services-lock
.elementor-location-footer > *,

body.scherm-services-lock
[data-elementor-type="footer"] > * {

    margin-top: 0 !important;

    margin-bottom: 0 !important;

    border-top: 0 !important;
}


/* =========================================================
   FOOTER VISÍVEL APENAS NO SLIDE 05
========================================================= */

body.scherm-services-lock.scherm-footer-visible
.elementor-location-footer,

body.scherm-services-lock.scherm-footer-visible
[data-elementor-type="footer"] {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform:
        translate3d(
            0,
            0,
            0
        ) !important;
}


/* =========================================================
   HERO

   MUITO IMPORTANTE:

   Ela vai SEMPRE do final do header
   até o final da tela.

   Inclusive no slide 05.
========================================================= */

#schermServicesCinematic,
.scherm-services-cinematic {

    --orange:
        var(--scherm-orange);

    position: fixed !important;

    top:
        var(--scherm-header-height) !important;

    left: 0 !important;
    right: 0 !important;

    /*
       HERO SEMPRE ATÉ O FINAL.
    */

    bottom: 0 !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    background:
        var(--scherm-dark);

    color:
        #FFFFFF;

    font-family:
        "Source Sans 3",
        Arial,
        sans-serif;

    z-index: 100 !important;

    isolation: isolate;
}


/* =========================================================
   CORREÇÃO CRÍTICA DO ÚLTIMO SLIDE

   Sobrescreve QUALQUER CSS antigo que ainda
   esteja diminuindo a hero.
========================================================= */

#schermServicesCinematic.is-last-slide,
.scherm-services-cinematic.is-last-slide {

    top:
        var(--scherm-header-height) !important;

    bottom: 0 !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    margin-bottom: 0 !important;

    padding-bottom: 0 !important;
}


.scherm-services-cinematic *,
.scherm-services-cinematic *::before,
.scherm-services-cinematic *::after {

    box-sizing:
        border-box;
}


/* =========================================================
   STAGE

   O STAGE TAMBÉM PREENCHE TUDO.
========================================================= */

.scherm-stage {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    background:
        transparent !important;
}


/* =========================================================
   SLIDES

   TODOS TÊM EXATAMENTE O TAMANHO DA HERO.
========================================================= */

.scherm-slide {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    visibility: hidden;

    pointer-events: none;

    z-index: 1;

    transform:
        translate3d(
            0,
            100%,
            0
        );

    will-change:
        transform,
        opacity;
}


.scherm-slide.is-active {

    visibility: visible !important;

    pointer-events: auto;

    z-index: 3;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


.scherm-slide.is-entering {

    visibility: visible !important;

    z-index: 4;
}


.scherm-slide.is-leaving {

    visibility: visible !important;

    z-index: 2;
}


/* =========================================================
   IMAGEM DE FUNDO

   AQUI ESTÁ OUTRA CORREÇÃO IMPORTANTE:

   imagem ocupa ABSOLUTAMENTE TODO O SLIDE.
========================================================= */

.scherm-slide-bg {

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    object-fit: cover !important;

    object-position:
        center
        center !important;

    z-index: -5;

    transform:
        scale(1.06)
        translate3d(
            0,
            6px,
            0
        );

    filter:
        brightness(.90)
        saturate(.98)
        contrast(1.04);

    transition:
        transform
        2.2s
        cubic-bezier(.22,1,.36,1);
}


.scherm-slide.is-active
.scherm-slide-bg {

    transform:
        scale(1.01)
        translate3d(
            0,
            0,
            0
        );
}


/* =========================================================
   FORÇA IMAGEM DO SLIDE 05 ATÉ O FINAL

   Isso evita que alguma regra externa do Elementor
   interfira especificamente no último slide.
========================================================= */

.scherm-services-cinematic.is-last-slide
.scherm-slide.is-active
.scherm-slide-bg {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 100% !important;

    object-fit: cover !important;

    bottom: 0 !important;
}


/* =========================================================
   FALLBACK DO VÍDEO
========================================================= */

.scherm-video-fallback {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 100% !important;

    margin: 0 !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    z-index:
        -6;
}


/* =========================================================
   VÍDEO
========================================================= */

.scherm-slide-video {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    object-fit:
        cover !important;

    object-position:
        center center !important;

    z-index:
        -5;

    background:
        transparent;
}


.scherm-slide-video.video-error {

    opacity:
        0;
}


/* =========================================================
   OVERLAY HORIZONTAL
========================================================= */

.scherm-slide::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            rgba(2,15,37,.98) 0%,

            rgba(3,26,61,.94) 22%,

            rgba(4,38,82,.76) 42%,

            rgba(5,44,91,.42) 61%,

            rgba(4,31,68,.13) 80%,

            rgba(2,18,42,.02) 100%
        );
}


/* =========================================================
   OVERLAY VERTICAL
========================================================= */

.scherm-slide::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,

            rgba(0,0,0,.05) 0%,

            transparent 35%,

            transparent 73%,

            rgba(0,0,0,.27) 100%
        );
}


/* =========================================================
   CONTEÚDO
========================================================= */

.scherm-slide-inner {

    position: relative;

    width:
        min(
            calc(100% - 11vw),
            1540px
        );

    height: 100%;

    margin:
        0
        auto;

    display:
        flex;

    align-items:
        center;

    z-index:
        5;

    padding:
        clamp(
            18px,
            2.8vh,
            35px
        )
        0
        clamp(
            40px,
            5.5vh,
            60px
        );
}


/* =========================================================
   SLIDE 05

   IMPORTANTE:

   SÓ O CONTEÚDO sobe.

   A imagem NÃO muda.
   A hero NÃO muda.
   O slide NÃO muda.
========================================================= */

.scherm-services-cinematic.is-last-slide
.scherm-slide.is-active
.scherm-slide-inner {

    padding-bottom:
        calc(
            var(--scherm-footer-height)
            +
            25px
        ) !important;
}


/* =========================================================
   COPY
========================================================= */

.scherm-slide-copy {

    width:
        min(
            790px,
            57vw
        );

    max-width:
        790px;
}


/* =========================================================
   LABEL
========================================================= */

.scherm-label {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin:
        0
        0
        clamp(
            10px,
            1.5vh,
            15px
        );

    color:
        var(--orange);

    font-size:
        clamp(
            12px,
            .78vw,
            15px
        );

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translate3d(
            0,
            22px,
            0
        );

    transition:
        opacity .65s ease,
        transform .85s
        cubic-bezier(.22,1,.36,1);
}


.scherm-label::before {

    content:
        "";

    width:
        clamp(
            30px,
            2.2vw,
            42px
        );

    height:
        3px;

    flex-shrink:
        0;

    background:
        var(--orange);
}


/* =========================================================
   TÍTULO
========================================================= */

.scherm-title {

    width:
        100%;

    max-width:
        790px;

    margin:
        0
        0
        clamp(
            14px,
            2vh,
            22px
        );

    color:
        #FFFFFF;

    font-size:
        clamp(
            45px,
            3.85vw,
            69px
        );

    font-weight:
        900;

    line-height:
        .97;

    letter-spacing:
        -.03em;

    text-wrap:
        balance;

    opacity:
        0;

    transform:
        translate3d(
            0,
            36px,
            0
        );

    transition:
        opacity .75s ease,
        transform 1s
        cubic-bezier(.22,1,.36,1);
}


.scherm-title-highlight {

    display:
        block;

    color:
        var(--orange);
}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.scherm-description {

    width:
        100%;

    max-width:
        660px;

    margin:
        0
        0
        clamp(
            21px,
            2.8vh,
            29px
        );

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

    font-size:
        clamp(
            16px,
            1.05vw,
            19px
        );

    line-height:
        1.47;

    font-weight:
        400;

    opacity:
        0;

    transform:
        translate3d(
            0,
            27px,
            0
        );

    transition:
        opacity .7s ease,
        transform .95s
        cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   CTA
========================================================= */

.scherm-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        16px;

    min-height:
        47px;

    padding:
        0
        22px;

    border:
        1px solid
        rgba(255,255,255,.68);

    border-radius:
        5px;

    background:
        rgba(2,18,43,.22);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    color:
        #FFFFFF;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        700;

    opacity:
        0;

    transform:
        translate3d(
            0,
            21px,
            0
        );

    transition:
        opacity .7s ease,
        transform .95s
        cubic-bezier(.22,1,.36,1),
        background .25s ease,
        border-color .25s ease;
}


.scherm-cta::after {

    content:
        "→";

    color:
        var(--orange);

    font-size:
        19px;

    transition:
        transform .25s ease,
        color .25s ease;
}


.scherm-cta:hover {

    color:
        #FFFFFF;

    background:
        var(--orange);

    border-color:
        var(--orange);

    transform:
        translateY(-2px) !important;
}


.scherm-cta:hover::after {

    color:
        #FFFFFF;

    transform:
        translateX(5px);
}


/* =========================================================
   ENTRADA
========================================================= */

.scherm-slide.is-active
.scherm-label {

    opacity:
        1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition-delay:
        .18s;
}


.scherm-slide.is-active
.scherm-title {

    opacity:
        1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition-delay:
        .27s;
}


.scherm-slide.is-active
.scherm-description {

    opacity:
        1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition-delay:
        .37s;
}


.scherm-slide.is-active
.scherm-cta {

    opacity:
        1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition-delay:
        .47s;
}


/* =========================================================
   SAÍDA
========================================================= */

.scherm-slide.is-leaving
.scherm-slide-copy {

    opacity:
        0;

    transform:
        translate3d(
            0,
            -38px,
            0
        );

    transition:
        opacity .48s ease,
        transform .65s
        cubic-bezier(.55,0,1,.45);
}


/* =========================================================
   DOTS
========================================================= */

.scherm-dots {

    position:
        absolute;

    top:
        50%;

    right:
        22px;

    transform:
        translateY(-50%);

    z-index:
        30;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        9px;
}


.scherm-dot {

    width:
        7px;

    height:
        7px;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.30);

    cursor:
        pointer;

    transition:
        height .35s
        cubic-bezier(.22,1,.36,1),
        background .25s ease;
}


.scherm-dot:hover {

    background:
        rgba(255,255,255,.72);
}


.scherm-dot.is-active {

    height:
        28px;

    background:
        var(--orange);
}


/* =========================================================
   PROGRESSO
========================================================= */

.scherm-progress {

    position:
        absolute;

    left:
        max(
            5.5vw,
            calc(
                (100vw - 1540px)
                /
                2
            )
        );

    bottom:
        14px;

    z-index:
        30;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(255,255,255,.47);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    transition:
        opacity .3s ease;
}


.scherm-progress-current {

    color:
        #FFFFFF;

    font-size:
        12px;
}


.scherm-progress-bar {

    position:
        relative;

    width:
        52px;

    height:
        1px;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.20);
}


.scherm-progress-bar span {

    position:
        absolute;

    inset:
        0
        auto
        0
        0;

    width:
        20%;

    background:
        var(--orange);

    transition:
        width .75s
        cubic-bezier(.22,1,.36,1);
}


.scherm-services-cinematic.is-last-slide
.scherm-progress {

    opacity:
        0;

    pointer-events:
        none;
}


/* =========================================================
   NOTEBOOK / TELA BAIXA
========================================================= */

@media
(max-height: 760px)
and
(min-width: 1025px) {

    :root {

        --scherm-header-height:
            96px;

        --scherm-footer-height:
            120px;
    }


    .scherm-slide-inner {

        padding:
            14px
            0
            36px;
    }


    .scherm-services-cinematic.is-last-slide
    .scherm-slide.is-active
    .scherm-slide-inner {

        padding-bottom:
            calc(
                var(--scherm-footer-height)
                +
                12px
            ) !important;
    }


    .scherm-label {

        margin-bottom:
            8px;

        font-size:
            10px;
    }


    .scherm-title {

        margin-bottom:
            10px;

        font-size:
            clamp(
                37px,
                3vw,
                52px
            );
    }


    .scherm-description {

        margin-bottom:
            16px;

        font-size:
            clamp(
                14px,
                .9vw,
                16px
            );

        line-height:
            1.4;
    }


    .scherm-cta {

        min-height:
            40px;

        padding:
            0
            19px;

        font-size:
            11px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 1024px)
and
(min-width: 768px) {

    :root {

        --scherm-header-height:
            90px;

        --scherm-footer-height:
            140px;
    }


    .scherm-slide-inner {

        width:
            calc(
                100% - 70px
            );

        padding:
            22px
            0
            50px;
    }


    .scherm-services-cinematic.is-last-slide
    .scherm-slide.is-active
    .scherm-slide-inner {

        padding-bottom:
            calc(
                var(--scherm-footer-height)
                +
                15px
            ) !important;
    }


    .scherm-slide-copy {

        width:
            min(
                660px,
                76vw
            );
    }


    .scherm-title {

        font-size:
            clamp(
                39px,
                5vw,
                53px
            );
    }


    .scherm-description {

        max-width:
            570px;

        font-size:
            clamp(
                14px,
                1.7vw,
                17px
            );
    }


    .scherm-dots {

        right:
            10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media
(max-width: 767px) {

    :root {

        --scherm-header-height:
            70px;

        --scherm-footer-height:
            180px;
    }


    .scherm-slide::before {

        background:
            linear-gradient(
                180deg,

                rgba(2,15,37,.05)
                0%,

                rgba(2,15,37,.14)
                22%,

                rgba(3,24,57,.43)
                42%,

                rgba(3,24,57,.82)
                62%,

                rgba(2,15,37,.99)
                100%
            );
    }


    .scherm-slide-inner {

        width:
            calc(
                100% - 36px
            );

        align-items:
            flex-end;

        padding:
            23px
            0
            45px;
    }


    .scherm-services-cinematic.is-last-slide
    .scherm-slide.is-active
    .scherm-slide-inner {

        padding-bottom:
            calc(
                var(--scherm-footer-height)
                +
                12px
            ) !important;
    }


    .scherm-slide-copy {

        width:
            100%;

        max-width:
            100%;
    }


    .scherm-label {

        gap:
            8px;

        margin-bottom:
            8px;

        font-size:
            9px;
    }


    .scherm-label::before {

        width:
            22px;

        height:
            2px;
    }


    .scherm-title {

        max-width:
            100%;

        margin-bottom:
            10px;

        font-size:
            clamp(
                29px,
                8vw,
                39px
            );

        line-height:
            .98;
    }


    .scherm-description {

        max-width:
            100%;

        margin-bottom:
            16px;

        font-size:
            clamp(
                13px,
                3.6vw,
                15px
            );

        line-height:
            1.4;
    }


    .scherm-cta {

        min-height:
            39px;

        padding:
            0
            15px;

        font-size:
            10px;
    }


    .scherm-dots {

        right:
            7px;

        gap:
            6px;
    }


    .scherm-dot {

        width:
            5px;

        height:
            5px;
    }


    .scherm-dot.is-active {

        height:
            20px;
    }


    .scherm-progress {

        left:
            18px;

        bottom:
            8px;
    }

}/* End custom CSS */