.elementor-10 .elementor-element.elementor-element-20ffe16{width:100%;max-width:100%;top:-1px;}body:not(.rtl) .elementor-10 .elementor-element.elementor-element-20ffe16{left:2px;}body.rtl .elementor-10 .elementor-element.elementor-element-20ffe16{right:2px;}/* Start custom CSS for html, class: .elementor-element-20ffe16 *//* Configuração do Tailwind CSS (está em um bloco <script> para ser processado) */
tailwind.config = {
    theme: {
        extend: {
            colors: {
                primary: '#2f3393', // Azul escuro
                secondary: '#FFD700', // Amarelo/Dourado (agora consistente com gold-500)
                'gold-500': '#FFD700', // Ouro
                'gold-700': '#B8860B' // Ouro mais escuro
            },
            borderRadius: {
                'none': '0px',
                'sm': '4px',
                DEFAULT: '8px',
                'md': '12px',
                'lg': '16px',
                'xl': '20px',
                '2xl': '24px',
                '3xl': '32px',
                'button': '8px' // Botões com bordas arredondadas
            }
        }
    }
}

/* Estilos personalizados */
/* Estilos globais e de componentes */
:where([class^="ri-"])::before { content: "\f3c2"; } /* Fallback para ícones */
body {
    font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth; /* Rolagem suave para âncoras */
}

/* Efeito de brilho para botões */
.button-glow {
    position: relative;
    z-index: 1;
    overflow: visible; /* Permite que o blur se espalhe para fora */
}
.button-glow::before {
    content: '';
    position: absolute;
    inset: -4px; /* Espalha o pseudo-elemento um pouco mais para fora */
    background: linear-gradient(45deg, rgba(242, 199, 68, 0.9), rgba(47, 51, 147, 0.9)); /* Cores do brilho com mais opacidade */
    border-radius: 12px; /* Borda mais arredondada para o brilho */
    z-index: -1; /* Fica atrás do conteúdo do botão */
    transition: all 0.4s ease-out; /* Transição mais suave */
    filter: blur(20px); /* Efeito de desfoque maior */
    opacity: 0; /* Começa invisível */
}
.button-glow:hover::before {
    opacity: 1; /* Fica visível no hover */
    inset: -6px; /* Aumenta ainda mais no hover */
    filter: blur(25px); /* Aumenta o desfoque no hover */
}
.button-glow.secondary-glow::before {
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2)); /* Brilho para botões secundários */
}

/* Estilo para texto em botões dourados para melhor contraste */
.button-gold-text-color {
    color: #2f3393; /* Cor primária (azul escuro) para o texto */
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0); /* Removendo sombra de texto se não for mais necessária */
}
.button-gold-text-shadow {
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9); /* Sombra mais forte e definida para o texto branco */
}

/* Estilo para o badge "Especialistas em Baixa de CNPJ" */
.gold-badge-text-primary {
    color: #2f3393; /* Cor primária (azul escuro) para o texto do badge */
}

/* Efeito de vidro para elementos */
.glass-effect {
    backdrop-filter: blur(10px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Acordeão (FAQ) */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding-bottom 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}
.accordion-content.active {
    max-height: 300px; /* Valor grande o suficiente para a maioria dos conteúdos */
    opacity: 1;
    padding-bottom: 1.5rem;
}
.accordion-icon {
    transition: transform 0.3s ease;
}
.accordion-header.active .accordion-icon {
    transform: rotate(45deg); /* Gira o ícone quando ativo */
}

/* Seção Hero */
.hero-bg {
    background-color: #2f3393;
    background-image: linear-gradient(135deg, #2f3393 0%, #3a3fa9 100%);
}

/* Inputs do formulário */
.form-input {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    transition: all 0.3s ease;
}
.form-input:focus {
    border-color: #FFD700; /* Usando gold-500 */
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2); /* Usando gold-500 */
}
.form-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Badge dourado */
.gold-badge {
    background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%); /* Usando gold-500 e gold-700 */
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3); /* Ajustado para gold-500 */
}

/* Cards de depoimento */
.testimonial-card {
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Itens de estatísticas */
.stats-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Estilos para o Carrossel de Depoimentos */
.testimonial-carousel {
    display: flex;
    overflow-x: hidden; /* Oculta a barra de rolagem horizontal */
    scroll-snap-type: x mandatory; /* Força o "encaixe" nos slides */
    -webkit-overflow-scrolling: touch; /* Rolagem suave no iOS */
    scroll-behavior: smooth; /* Efeito de deslize suave */
    margin: 0 -1rem; /* Compensa o padding dos cards para ocupar a largura total do container */
}
.testimonial-card-container {
    flex: 0 0 100%; /* Por padrão, um card por vez no mobile */
    scroll-snap-align: start;
    padding: 0 1rem; /* Espaçamento entre os cards */
    box-sizing: border-box; /* Inclui padding na largura do elemento */
}
/* Responsividade para o carrossel: 2 cards em tablet, 3 em desktop */
@media (min-width: 768px) {
    .testimonial-card-container {
        flex: 0 0 calc(100% / 2);
    }
}
@media (min-width: 1024px) {
    .testimonial-card-container {
        flex: 0 0 calc(100% / 3);
    }
}

/* Controles do Carrossel (setas) */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 0.75rem;
    border-radius: 9999px; /* Totalmente redondo */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    display: flex; /* Para centralizar o ícone */
    align-items: center;
    justify-content: center;
}
.carousel-control:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.carousel-control-prev {
    left: -1.5rem; /* Afastado para a esquerda */
}
.carousel-control-next {
    right: -1.5rem; /* Afastado para a direita */
}
/* Ajuste para mobile para não sair da tela */
@media (max-width: 767px) {
    .carousel-control-prev {
        left: 0.5rem; /* Ajustado para mobile */
    }
    .carousel-control-next {
        right: 0.5rem; /* Ajustado para mobile */
    }
}

/* Efeito Parallax */
.parallax-bg {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
/* Para a seção de depoimentos, agora com fundo branco */
.testimonial-section-bg {
    background-color: white; /* Fundo branco */
    background-image: none; /* Remove qualquer imagem de fundo */
    background-attachment: scroll; /* Garante que não haja parallax aqui */
}

/* Desabilita parallax em mobile para performance */
@media (max-width: 767px) {
    .parallax-bg, .testimonial-section-bg {
        background-attachment: scroll !important;
    }
    /* Para a imagem do hero, desabilitamos o transform no mobile */
    .hero-bg img.parallax-img {
        transform: none !important;
    }
}/* End custom CSS */