.elementor-kit-6{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#FDC134;--e-global-color-text:#FFFFFF;--e-global-color-accent:#FF7920;--e-global-typography-primary-font-family:"Bree Serif";--e-global-typography-primary-font-size:27px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:17px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:transparent;background-image:linear-gradient(90deg, #FFFFFFF5 0%, #222233 0%);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer{background-color:#000000;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//**
 * CSS COMPLETO FINAL (Com Transição Suave, Anti-Ghosting e Animação de Carregamento)
 */

        /* ======================================= */
        /* 1. REGRAS ESTRUTURAIS DE DESLIZAMENTO (CRUCIAIS) */
        /* ======================================= */
        /* Contêiner principal e seus filhos */
        .meu-menu-container,
        .meu-menu-deslizavel,
        .meu-menu-deslizavel li,
        .meu-menu-deslizavel a,
        .meu-menu-deslizavel .menu-text {
            /* Aplica a todas as camadas */
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        /* Contêiner principal - A "janela" visível */
        .meu-menu-container {
            display: flex;
            max-width: 100%;
            overflow: hidden;
            cursor: grab;

            /* REFORÇO ANTI-GHOSTING */
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;

            padding: 0;
        }

        /* Contêiner interno - O elemento que é movido (transform: translateX) */
        .meu-menu-deslizavel {
            display: flex;
            flex-wrap: nowrap;
            min-width: 100%;
            padding: 0;
            margin: 0;
            list-style: none;

            /* Transição CSS ativa para o scroll suave */
            transition: transform 0.3s ease-out;
        }

        /* Itens de menu individuais (li) */
        .meu-menu-deslizavel li {
            flex-shrink: 0;

            /* CORREÇÃO DE TAMANHO: Adiciona padding lateral para os menus não ficarem muito pequenos */
            padding: 0 15px;

            margin: 0 5px; /* Espaçamento entre os itens */
            white-space: nowrap;
            transition: opacity 0.3s;
        }

        /* Efeito hover */
        .meu-menu-deslizavel li:hover {
            opacity: 0.7;
        }

        /* Feedback visual ao arrastar (usado pelo JS) */
        .meu-menu-container.is-dragging {
            cursor: grabbing !important;
        }

        /* ======================================= */
        /* 2. REGRAS DE ESTILIZAÇÃO, CORREÇÃO DE ARRASTO E ANIMAÇÃO */
        /* ======================================= */

        /* Link (a) - Layout em coluna */
        .meu-menu-deslizavel a {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            text-decoration: none;
            padding: 5px 0;
            height: 100%;

            /* REFORÇO ANTI-GHOSTING NO LINK */
            user-select: none;
            -webkit-user-select: none;
        }

        /* Contêiner do Ícone */
        .meu-menu-deslizavel .menu-icon {
            width: 50px;
            height: 50px;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Imagem de Ícone (img) - Correção de arrasto */
        .meu-menu-deslizavel .menu-icon img {
            width: 50px;
            height: 50px;
            object-fit: contain;

            /* CORREÇÃO: Impede que o navegador arraste a imagem */
            pointer-events: none;
            -webkit-user-drag: none;
            user-drag: none;
        }

        /* Texto do menu */
        .meu-menu-deslizavel .menu-text {
            font-family: 'Bree Serif', sans-serif;
            font-size: 1.9em;
            white-space: nowrap;
            color: #ffffff;
        }

        /* ======================================= */
        /* 3. ANIMAÇÃO DE SHIMMY (INDICAÇÃO DE SCROLL) */
        /* ======================================= */

        /* 1. Definição da Animação (Shimmy) */
        @keyframes menu-shimmy {
            0% { transform: translateX(0); }
            30% { transform: translateX(-20px); } /* Desliza um pouco para a esquerda */
            60% { transform: translateX(10px); }  /* Volta um pouco para a direita */
            100% { transform: translateX(0); }
        }

        /* 2. Classe para aplicar a animação */
        /* O JS deve adicionar esta classe (.show-scroll-hint) ao .meu-menu-deslizavel no carregamento */
        .meu-menu-deslizavel.show-scroll-hint {
            animation: menu-shimmy 1.8s ease-in-out 0s 1; /* Roda uma vez */
        }

        /* ======================================= */
        /* 4. CLASSE DE TRANSIÇÃO (USADA PELO JS) */
        /* ======================================= */

        /* CLASSE PARA DESATIVAR A TRANSIÇÃO DURANTE O ARRASTO (VEM DO JS) */
        .meu-menu-deslizavel.no-transition {
            transition: none !important;
        }
        
   ul.meu-menu-deslizavel.scroll-hint-shown a {
    cursor: url(https://chamaocara.com.br/wp-content/uploads/2025/10/mao.svg) 14 14, pointer;
}
.meu-menu-deslizavel .menu-text:hover{
   color:#ffb921; 
    
}/* End custom CSS */