/* 
Theme Name: Hello Elementor Child
Theme URI: https:/*github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https:/*elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https:/*www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

:root {
    --tamanhoRemMin: 7px;
    --tamanhoRem: 0.524dvw;
    --tamanhoRemMax: 10px;

    --alturaSlider: 85dvh;
    --alturaHeader: 62.5dvh;
    --alturaHeaderMarcas: 62.5dvh;
    --alturaHeaderProdutos: 53.5dvh;

    --corPrim: #182A6A;

    @media screen and (max-width: 1023px) {    /*MOBILE E TABLETS*/
        --tamanhoRem: 2.5dvw;
    }

    @media screen and (max-width: 320px) {    /*MOBILE ANTIGO*/
    }
    
    @media screen and (min-width: 768px) and (max-width: 1200px) and (max-aspect-ratio: 3/2) {     /*APENAS TABLETS*/
    }
    
    @media screen and (min-width: 1024px) {    /*NOTEBOOK MENOR (13)*/

    }

    @media screen and (min-width: 1300px) {    /*NOTEBOOK PADRÃO (15)*/

    }
    
    @media screen and (min-width: 1600px) {    /*FULL HD*/
    }

    @media screen and (min-width: 2300px) {    /*4K*/   
    }
}

html {
    font-size: clamp(var(--tamanhoRemMin), var(--tamanhoRem), var(--tamanhoRemMax));
}

body {
    font-size: 1em;
}
.soh-mobile {

    @media screen and (min-width: 1024px) {
        display: none !important;
    }
}

header[data-elementor-type="header"] {
    position: sticky;
    top: -1px;
    padding-top: 1px;
    width: 100%;
    z-index: 9999;
    transition: 0.2s;
    

    @media screen and (min-width:1024px) {
        overflow-x: clip;
    
        #menu-header, #social-menu {
            margin-top: clamp(2rem, 3svh, 5rem);
        }

    }

    @media screen and (max-width:1023px) {
        top: 0;

        #header-container {
            position: relative !important;
            top: -1px !important;
        }

        #menu-header {
            .elementor-nav-menu {
                padding-top: 1rem;
                padding-bottom: 1rem;
                display: flex;
                flex-direction: column;
                align-items: end;

                li {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: end;

                    .sub-arrow {
                        position: absolute;
                        right: 5dvw;;
                    }

                }
            }

            .elementor-nav-menu--dropdown {
                width: 100% !important;

                a {
                    padding-right: 10dvw;
                    width: 100%;
                    display: flex;
                    justify-content: end;
                }
            } 

            .elementor-nav-menu__container {

            }
        }
    
    }



    .elementor-nav-menu--layout-horizontal .elementor-nav-menu>li.mega-menu>ul li>ul {
        top: 0 !important;
    }

    .elementor-nav-menu--dropdown li:last-child a {
      border-bottom-right-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 25dvh;
        pointer-events: none;
        background-image: linear-gradient(to bottom, #ffffff 0%, transparent 90%);
        background-position: center top;
        transition: 0.15s;
        transform: translateY(-30%);
    }

    &.is-sticky {
        
        &::before {
            transform: none;
        }
    }
    
}

.mega-menu {
    > ul {

        li > ul {
            background-color: #dedede !important;
        }

        @media screen and (min-width:1024px) {
             li > ul {
                left: auto !important;
                /* right: 0 !important; */
                top: 0 !important;
                transform: translateY(-35%) translateX(50%) !important;
                margin-left: 0 !important;
                margin-top: 0 !important;
                background-color: #dedede !important;
            }
        }

       

        &[aria-expanded="true"] {
            display: flex !important;
            min-width: max-content !important;
            flex-direction: column;
            flex-wrap: wrap;
            column-gap: 0;
            max-height: 50rem;

            @media screen and (max-width:1023px) {
                max-height: 35rem;
                flex-wrap: nowrap;
                overflow-y: auto;
            }
        }
    }
}

#social-menu {

    @media screen and (max-width: 1023px) {
        position: absolute;
        left: 50dvw;
        z-index: 10;
        width: fit-content;

        .elementor-icon {
            padding: 4px;
        }

        #idioma {
            .elementor-item {
                padding: 0;
                padding-left: 1rem;
                font-size: 1.4rem;

                .sub-arrow {
                    padding: 0;
                }
            }

            .elementor-sub-item {
                padding-left: 0;
            }
        }
    }

}

#idioma .elementor-nav-menu--dropdown {
    min-width: auto !important;
    left: auto !important;
    right: 0 !important;
}

hr.traco.vinho {
      border: none;
      height: 1px;
      background: var( --e-global-color-7c5ba1b );
}

.container-slider-home {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

     + * {
        margin-top: calc( var(--alturaSlider) - 5rem);
        box-shadow: 0rem 0rem 2rem #00000022;
        z-index: 1;
    }

    @media screen and (max-width: 1023px) {    /*MOBILE E TABLETS*/

        + * {
            margin-top: calc( var(--alturaSlider) - 2.5rem);
        }

    }

}

.container-header-interna {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    &::before {
        z-index: 1;
    }

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to right, #ffffff 40%, transparent 75%);
        z-index: 0;
    }

    > * {
        z-index: 2;
    }

    + * {
        margin-top: calc( var(--alturaHeader) - 10rem);
        box-shadow: 0rem -1rem 4rem #57575733;
        z-index: 1;
    }

    &.header-marcas {

        + * {
            margin-top: calc( var(--alturaHeaderMarcas) - 10rem);
            box-shadow: 0rem -1rem 4rem #57575733;
            z-index: 1;
        }
    }

    &.header-produtos {

         + * {
            margin-top: calc( var(--alturaHeaderProdutos) - 10rem);
            box-shadow: 0rem -1rem 4rem #57575733;
            z-index: 1;
        }
    }

    @media screen and (max-width: 1023px) {    /*MOBILE E TABLETS*/

        &::after {
            background-image: linear-gradient(to right, #ffffff 25%, transparent 135%);
        }

        &.nossa-empresa {
            &:after {
                background-image: linear-gradient(to right, #ffffff 45%, transparent 165%);
            }
        }

    }

    
}

#slide-home {

    .elementor-slide-description {
        padding-right: 20%;
        max-width: 85rem;
    }

    .elementor-slide-heading {
        max-width: 80rem;
        text-shadow: 1px 1px 0px #fff;
    }

    .swiper-slide-bg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to right, #fff 40%, transparent 80%);
    }

    .swiper-slide-bg::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("https://disalerno.com.br/wp-content/uploads/2024/10/nossasmarcas2.png");
        background-position: top left;
        background-repeat: no-repeat;
        background-size: 40% auto;
        opacity: 0.75;
        pointer-events: none;
    }

    .swiper .elementor-swiper-button-prev {
        left: 0;
    }

    .swiper .elementor-swiper-button-next {
        right: 0;
    }


    .swiper-slide-contents {
        padding-left: calc(1.7rem + 12%);
        margin-top: -2.6rem;

        &::before {
            content: "";
            position: absolute;
            display: block;
            left: 10px;
            width: calc( 14% - 0.1rem);
            height: 1px;
            background-color: var( --e-global-color-7c5ba1b );
            z-index: 0;
            transform: translateY(2.5rem);
        }
    }

    @media screen and (max-width: 1023px) {    /*MOBILE E TABLETS*/

        .swiper-slide-bg {
          background-position: right;
        }

        .swiper-slide-bg::before {
            background-image: linear-gradient(to right, #ffffffcc, #ffffffcc);
        }

        .swiper-slide-bg::after {
            background-size: 140% auto;
        }

        .swiper-slide-inner {
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .swiper-slide-contents {
            --largura: 80dvw;
            max-width: var(--largura);
            padding-left: 0;
            margin-top: 0;
            position: relative;

            &::before {
                opacity: 0;
            }

            &::after {
                opacity: 0;
            }
        }

        .elementor-slide-heading {
            text-wrap: pretty;
            position: relative;
            margin-bottom: 5rem;

            &::before, &::after {
                content: "";
                position: absolute;
                display: block;
                width: calc( ( ( 100dvw - var(--largura) ) / 2 ) * 0.85 );
                height: 2px;
                background-color: var( --e-global-color-7c5ba1b );
                z-index: 0;
                top: 50%;
            }

            &::before {
                left: calc( -1 * ( ( 100dvw - var(--largura) ) / 2 ) );
            }

            &::after {
                right: calc( -1 * ( ( 100dvw - var(--largura) ) / 2 ) );
            }
        }

        .elementor-slide-description {
            margin: 0 auto 3rem auto;
            padding-right: 0;
            text-wrap: balance;
            max-width: 85%;
        }
    }
   
}

#Parceiros {
    @media screen and (max-width: 1023px) {    /*MOBILE E TABLETS*/
        position: relative;
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000000;
            opacity: 0.25;

        }
    }

}

#HistoriaEmpresa {
    @media screen and (max-width: 1023px) {

        > * {
            z-index: 1;
        }

        &::before {
            opacity: 0;
        }

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom, transparent 10rem, #F5F5F5 25rem);
        }
    }
}

#NossasUnidades {

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("https://disalerno.com.br/wp-content/uploads/2024/10/nossasmarcas2.png");
        background-position: top left;
        background-repeat: no-repeat;
        background-size: 40% auto;
        opacity: 0.75;
        z-index: 0;
        pointer-events: none;
    }

    .container-unidade {
        .info-contato p {
            display: flex;
            column-gap: 1rem;
            align-items: center;

            img {
                width: 2.75rem;
                aspect-ratio: 1 / 1;
                height: auto;
            }

            &:not(:last-child) {
                margin-bottom: 1rem;
            }
        }
    }

    @media screen and (max-width: 1023px) {    /*MOBILE E TABLETS*/

        &::before {
            background-color: #fff;
            opacity: 0.75;
        }

        &::after {
            background-size: 65% auto;
            mix-blend-mode: difference;
        }

        .container-unidade {
            .info-contato p {

                img {
                    width: 2rem;
                }

                &:not(:last-child) {
                    margin-bottom: 0.5rem;
                }
            }
        }

    }

}

#NossosProdutos {

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("https://disalerno.com.br/wp-content/uploads/2024/10/nossasmarcas2.png");
        background-position: top left;
        background-repeat: no-repeat;
        background-size: 40% auto;
        opacity: 0.75;
        z-index: 0;
        pointer-events: none;
    }

    @media screen and (max-width: 1023px) {    /*MOBILE E TABLETS*/

        &::before {
            background-color: #fff;
            opacity: 0.85;
        }

        &::after {
            background-size: 65% auto;
            mix-blend-mode: difference;
        }

    }

}

#FaleConosco {

    @media screen and (max-width: 1023px) {    /*MOBILE E TABLETS*/

        &::before {
            background-color: #fff;
            opacity: 0.85;
        }

        &::after {
            background-size: 65% auto;
            mix-blend-mode: difference;
        }

    }

}

#ValoresEmpresa {
    .img-valor {
        width: 20%;
        flex-grow: 1;
        flex-shrink: 0;
        max-width: calc(25% - calc( var(--row-gap) * 3)/4 ) !important;
    }

    @media screen and (max-width: 1023px) {

        .img-valor {
            width: 100%;
            flex-grow: 1;
            flex-shrink: 0;
            max-width: 100% !important;
            text-wrap: balance;

            .wp-caption {
                display: flex;
                flex-direction: column;
                align-items: center;
                column-gap: 2rem;

                img {
                    object-position: center left;
                    margin: 0;
                }
            }
        }

    }
}

#ConhecaSelo {

    @media screen and (max-width: 1023px) {

        > * {
            z-index: 1;
        }

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom, transparent 10rem, #F5F5F5 30rem);
        }
    }
}

.grid-marcas {
    .img-marca {
        width: 20%;
        flex-grow: 1;
        flex-shrink: 0;
        max-width: calc(25% - calc( var(--row-gap) * 3)/4 ) !important;
    }

    @media screen and (max-width: 1023px) {
        .img-marca {
            width: 40%;
            flex-grow: 1;
            flex-shrink: 0;
            max-width: calc(50% - calc( var(--row-gap) * 1)/2 ) !important;
        }
    }
}

.produto-galeria {
    aspect-ratio: 1 / 1;

    .flickity-viewport {
        transition: 0.2s;
        height: 100% !important;
    }

    .img-destacada {
        width: 100%;
        aspect-ratio: 620/447.5;
        height: auto;
        box-shadow: 0px 0px 5px #00000033;
        border: solid 1px #fff;
        transition: 0.2s;

        img {
            display: block;
            width: 100%;
            max-width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            background-image: linear-gradient(to left, #ffffff00 0%, #ffffff 15%, #ffffff 85%, #ffffff00 100%);
            transition: 0.2s;
            opacity: 0;

            &.is-selected {
                opacity: 1;
            }
        }

        &:not(.flickity-enabled) {
            opacity: 0;
        }

    }

    .nav-galeria {
        width: 100%;
        height: 8rem;
        margin-top: calc(1rem - 2px);

        figure.item-galeria {
            height: calc(100% - 2px);
            top: 1px;
            width: auto;
            aspect-ratio: 1/1;
            overflow: clip;
            box-sizing: border-box;
            border: solid 1px #0000000a;
            margin-right: 0.5rem !important;
            cursor: pointer;
            transition: 0.3s;

            &:is(:hover, :active, .is-nav-selected) {

                img {
                    transform: scale(1.25);
                    filter: saturate(1.25);
                }
                
            }

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                transition: 0.2s;
                filter: saturate(0.35);
            }
        }

        .flickity-button:disabled {
            opacity: 0 !important;
        }

    }
}

.acordeon-produto {
    margin: 0 auto;
    margin-top: 5rem;
    width: 75%;
    
    * {
        position: relative;
    }
    

    .acordeon-itens {
        width: 100%;

        &:first-child {
            margin-top: 0;
        }

        .ac-item {
            margin-bottom: 1.5rem;
            transition: 0.2s;
        }

        .ac-titulo {
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            overflow: clip;
            cursor: pointer;
            font-weight: 700;
            font-size: 2.4rem;
            padding: 1.5rem 4rem;
            transition: 0.2s;
            z-index: 2;
            background-color: var(--corPrim);
            border-radius: 2.25rem;
            
            
            h3 {
                font-weight: inherit;
                font-size: inherit;
                margin: 0;
                line-height: 1;
                color: #fff;
                transition: 0.2s;
            }
        }

        .ac-conteudo {
            display: none;
            padding: 3rem 5rem 1rem 5rem;
            margin: 0;
            margin-bottom: 2rem;
            font-size: 2rem;
            text-align: center;
            line-height: 1.4;
            z-index: 1;

            p:not(:last-child) {
                margin-bottom: 2.5rem;
            }
            
            h1, h2, h3, h4, h5 {
                font-size: 2rem;
                font-weight: 700;
                margin-bottom: 2rem;
            }

            img {
                width: 100%;
                object-fit: contain;
                max-width: 45rem;
                display: block;
                margin: auto;
            }
            
            ul, ol {
                margin-left: 3rem;
                
                li {
                    display: flex;
                    column-gap: 1rem;
                    justify-content: flex-start;
                    align-items: flex-start;
                    line-height: 1.35;
                    margin-bottom: 2rem;
                    
                    &::before {
                        content: '';
                        display: block;
                        position: relative;
                        border-radius: 100%;
                        width: 1.4rem;
                        height: 1.4rem;
                        top: 0.5rem;
                        background-color: var(--corPrim);
                        flex-shrink: 0;
                    }
                }
            }

            >*:last-child {
                margin-bottom: 0;
            }
        }
        

        .ac-aberto {

            .ac-titulo {

                &:after {
                    background-color: var(--corPrim);
                    transform: none;
                }
            }

        }
    }
    
    @media screen and (max-width: 1024px) {
        
    }
    
}

#breadcrumbs {
    > span {
        display: flex;
        align-items: center;
        justify-content: start;

        span {
            display: block;

            &:not(:first-child)::before {
                content: '»';
                position: relative;
                display: inline-block;
                margin: 0 0.5rem;
            }
        }

        .breadcrumb_last {
            display: none;
        }

    }
}

.produtos-home {
    .elementor-widget-image {
        height: 100%;

        img {
            height: 100%;
            object-fit: cover;
        }
    }
}