/* ========================================
           RESET E VARIÁVEIS GLOBAIS 2026
        ======================================== */
        :root {
            --primary: #6366f1 !important;
            --primary-dark: #4f46e5 !important;
            --primary-light: #818cf8 !important;
            --secondary: #10b981 !important;
            --accent: #f59e0b !important;
            --dark: #0f172a !important;
            --dark-light: #1e293b !important;
            --gray: #64748b !important;
            --gray-light: #cbd5e1 !important;
            --white: #ffffff !important;
            --bg-light: #f8fafc !important;

                --gradient-primary: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%) !important;
                --gradient-hover: linear-gradient(135deg, #0066cc 0%, #0088cc 100%); /* Azul escuro */
                --transition: all 0.3s ease;

            --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
            --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;

            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;

            --radius: 12px !important;
            --radius-lg: 16px !important;
            --radius-xl: 24px !important;

            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box !important;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
            color: var(--dark) !important;
            background: var(--white) !important;
            line-height: 1.6 !important;
            overflow-x: hidden !important;
        }

        /* ========================================
           HEADER MODERNO COM GLASSMORPHISM
        ======================================== 
        .cabecalho {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100%;
            z-index: 1000 !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border-bottom: 1px solid rgba(99, 102, 241, 0.1) !important;
            transition: var(--transition) !important;
            padding: 1rem 0; 
        }

        .cabecalho.scrolled {
            background: rgba(255, 255, 255, 0.95) !important;
            box-shadow: var(--shadow-lg) !important;
            backdrop-filter: blur(10px);
        }

        .container-header {
            max-width: 1400px !important;
            margin: 0 auto !important;
            padding: 0 2rem !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
        }
        */
        
/* ========================================
   HEADER COMPACTO - SEM BLOQUEIO DE CLIQUES
======================================== */
.cabecalho {
    position: relative; /* Mantém o fluxo normal do documento */
    top: 0;
    width: 100%;
    z-index: 1000;
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 85%,
        rgba(30, 144, 255, 0.15) 100%
    );
    transition: all 0.4s ease;
    padding: 0.2rem 0; /* altura reduzida */
}

/* BARRA DEGRADÊ LOGO ABAIXO DO HEADER FIXO */
.header-gradient-bar {
    left: 0;
    right: 0;
    z-index: 999; /* um pouco abaixo do header */
    background: linear-gradient(
        to bottom,
        rgba(30, 144, 255, 0.4) 0%, /* azul mais forte encostado no header */
        rgba(30, 144, 255, 0.0) 100% /* some no conteúdo abaixo */
    );
    height: 4px; /* Altura da barra de gradiente */
    position: absolute; /* Para que fique abaixo do header */
    bottom: 0; /* Alinha na parte inferior do header */
    width: 100%;
}

.container-header {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 50px !important; /* altura reduzida */
}

/* Logo menor */
.logo-img {
    max-width: 280px !important;
    height: auto !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Botão Hambúrguer (para mobile) */
.btn-menu {
    display: none !important; /* Escondido por padrão no desktop */
    font-size: 1.8rem !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 0.5rem !important;
    z-index: 10001 !important; /* Acima de tudo */
}


/* ========================================
   MENU BUTTONS - LADO A LADO (DESKTOP)
======================================== */
.menu ul {
    display: flex !important;
    list-style: none !important;
    gap: 0.8rem !important; /* Manter um gap padrão */
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap; /* Permitir quebra de linha se necessário, mas sem !important aqui */
    justify-content: flex-end !important; /* Alinha à direita no desktop */
}

.menu li {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important; /* Mantém o texto do item na mesma linha */
}

/* Links normais do menu */
.menu-color {
    background: #00bfff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none !important;
    font-size: 0.9rem !important; /* Manter este tamanho para desktop */
    padding: 0.5rem 0.7rem !important;
    font-weight: 500 !important;
    transition: var(--transition) !important;
}

/* Botão WhatsApp - compacto */
.menu-color-wts {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    background: #25D366 !important;
    color: white !important;
    padding: 0.5rem 0.8rem !important;
    border-radius: 6px !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important; /* Manter este tamanho para desktop */
    text-decoration: none !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
}

.menu-color-wts i {
    font-size: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Botões principais - compactos */
.menu-color-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    background: var(--gradient-primary) !important;
    color: white !important;
    padding: 0.5rem 0.9rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important; /* Manter este tamanho para desktop */
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(30, 144, 255, 0.3) !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
}

.menu-color-btn i {
    font-size: 0.95rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hover */
.menu-color-btn:hover,
.menu-color-wts:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(30, 144, 255, 0.4) !important;
    filter: brightness(1.1);
}

/* Botão de fechar (para mobile) */
.btn-close {
    display: none !important; /* Escondido por padrão no desktop */
    font-size: 1.8rem !important;
    cursor: pointer !important;
    color: var(--dark) !important;
    margin-bottom: 2rem !important;
    padding: 0.5rem !important;
    position: absolute !important; /* Para posicionar no canto do menu lateral */
    top: 1rem !important;
    right: 1rem !important;
    z-index: 10002 !important; /* Acima de tudo */
}

/* ========================================
   RESPONSIVO MELHORADO PARA O MENU
======================================== */

/* Telas de tablet e desktop menores (até 1200px) */
@media (max-width: 1200px) {
    .container-header {
        padding: 0 1.5rem !important;
    }
    .menu ul {
        gap: 0.6rem !important; /* Reduzir gap para caber mais itens */
    }
    .menu-color {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.6rem !important;
    }
    .menu-color-wts,
    .menu-color-btn {
        padding: 0.45rem 0.7rem !important;
        font-size: 0.8rem !important;
    }
    .menu-color-wts i,
    .menu-color-btn i {
        font-size: 0.9rem !important;
    }
}

/* Telas de mobile (até 768px) */
@media (max-width: 768px) {
    .logo-img {
        max-width: 180px !important;
        height: auto !important;
    }
    .container-header {
        min-height: 45px !important;
        padding: 0 1rem !important;
    }

    .btn-menu {
        display: block !important; /* Mostra o botão hambúrguer */
    }

    .menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; /* Esconde o menu fora da tela */
        width: 85% !important;
        max-width: 350px !important; /* Limita a largura do menu lateral */
        height: 100vh !important;
        background: white !important;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2) !important;
        transition: right 0.3s ease !important;
        padding: 2rem 1.5rem !important;
        overflow-y: auto !important; /* Permite scroll se o conteúdo for grande */
        z-index: 10000 !important;
        display: flex !important; /* Adicionado para centralizar o conteúdo */
        flex-direction: column !important; /* Adicionado para centralizar o conteúdo */
        align-items: center !important; /* Centraliza o conteúdo verticalmente */
        justify-content: flex-start !important; /* Alinha ao topo */
    }

    .menu.active {
        right: 0 !important; /* Mostra o menu */
    }

    .btn-close {
        display: block !important; /* Mostra o botão de fechar */
                z-index: 10002 !important; /* Acima do menu */

    }

    .menu ul {
        flex-direction: column !important; /* Empilha os itens verticalmente */
        gap: 1rem !important;
        align-items: stretch !important; /* Faz com que os itens ocupem a largura total */
        width: 100% !important;
        margin-top: 3rem !important; /* Espaçamento abaixo do botão de fechar */
    }

    .menu li {
        width: 100% !important;
    }

    .menu-color,
    .menu-color-wts,
    .menu-color-btn {
        width: 100% !important;
        display: flex !important; /* Garante que o flex funcione para centralizar */
        justify-content: center !important; /* Centraliza o texto/ícone */
        padding: 0.9rem 1rem !important;
        font-size: 1rem !important;
    }
    .menu-color-wts i,
    .menu-color-btn i {
        font-size: 1.1rem !important;
    }
}

/* Telas de mobile muito pequenas (até 480px) */
@media (max-width: 480px) {
    .logo-img {
        max-width: 150px !important;
    }
    .container-header {
        min-height: 40px !important;
        padding: 0 0.8rem !important;
    }
    .btn-menu {
        font-size: 1.6rem !important;
    }
    .menu {
        width: 90% !important;
        max-width: 300px !important;
        padding: 1.5rem 1rem !important;
    }
    .btn-close {
        font-size: 1.6rem !important;
        top: 0.8rem !important;
        right: 0.8rem !important;
    }
    .menu ul {
        gap: 0.8rem !important;
        margin-top: 2.5rem !important;
    }
    .menu-color,
    .menu-color-wts,
    .menu-color-btn {
        padding: 0.8rem 0.8rem !important;
        font-size: 0.9rem !important;
    }
    .menu-color-wts i,
    .menu-color-btn i {
        font-size: 1rem !important;
    }
}

/* Overlay */
.menu-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}
.menu-overlay.active {
    display: block !important;
    opacity: 1 !important;
}

       /* ========================================
   PLANOS MODERNOS COM CARDS
======================================== */
.servicos {
    padding: 6rem 1.5rem !important; /* Reduzir padding para mobile */
    background: var(--bg-light) !important;
}
.container-planos {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; /* Ajustar min-width para telas menores */
    gap: 2rem !important; /* Reduzir um pouco o gap */
}
.servico {
    background: white !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
    transition: var(--transition) !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}
.servico::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 5px !important;
    background: var(--gradient-primary) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: var(--transition) !important;
}
.servico:hover {
    transform: translateY(-10px) !important;
    box-shadow: var(--shadow-xl) !important;
}
.servico:hover::before {
    transform: scaleX(1) !important;
}
.inner {
    padding: 2rem !important; /* Reduzir padding interno */
}
.inner h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.6rem !important; /* Ajustar tamanho da fonte para mobile */
    font-weight: 700 !important;
    color: var(--primary) !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
    padding: 0 !important;
}
.inner h4 {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.95rem !important; /* Ajustar tamanho da fonte */
    color: var(--gray) !important;
    margin-bottom: 0.6rem !important;
    padding: 0 !important;
}
.inner h4::before {
    content: '✓' !important;
    color: var(--secondary) !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
}
.inner p {
    font-size: 2.5rem !important; /* Ajustar tamanho da fonte */
    font-weight: 800 !important;
    color: var(--dark) !important;
    text-align: center !important;
    margin: 1.2rem 0 0.4rem !important;
    padding: 0 !important;
}
.inner h2 {
    text-align: center !important;
    font-size: 1rem !important; /* Ajustar tamanho da fonte */
    color: var(--gray) !important;
    margin-bottom: 0.4rem !important;
    padding: 0 !important;
}
.btn-plano {
    width: 100% !important;
    background: var(--gradient-primary) !important;
    color: white !important;
    padding: 0.9rem !important; /* Reduzir padding */
    border: none !important;
    border-radius: var(--radius) !important;
    font-size: 1rem !important; /* Ajustar tamanho da fonte */
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    margin-top: 1.2rem !important;
}
.btn-plano:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Responsivo para a seção de planos */
@media (max-width: 768px) {
    .servicos {
        padding: 4rem 1rem !important; /* Mais redução de padding */
    }
    .container-planos {
        gap: 1.5rem !important;
    }
    .servico img {
        height: 180px !important; /* Mais redução da altura da imagem */
    }
    .inner {
        padding: 1.5rem !important;
    }
    .inner h3 {
        font-size: 1.4rem !important;
    }
    .inner p {
        font-size: 2.2rem !important;
    }
    .btn-plano {
        padding: 0.8rem !important;
        font-size: 0.95rem !important;
    }
}
        /* ========================================
   CTA SECTION
======================================== */
.newsletter {
    padding: 5rem 1.5rem !important; /* Ajustar padding */
    text-align: center !important;
}
.newsletter h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.5rem !important; /* Reduzir fonte para mobile */
    font-weight: 800 !important;
    color: white !important;
    margin-bottom: 0.8rem !important;
    padding: 0 !important;
}
.newsletter h3 {
    font-size: 1.1rem !important; /* Reduzir fonte para mobile */
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.newsletter-one {
    padding: 1.5rem 1.5rem !important; /* Ajustar padding */
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important; /* Ajustar gap */
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}
.section-one {
    flex: 1 !important;
    min-width: 280px !important; /* Ajustar min-width */
}
.section-one h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2rem !important; /* Reduzir fonte */
    font-weight: 800 !important;
    color: var(--dark) !important;
    margin-bottom: 1rem !important;
    padding: 0 !important;
}
.section-one h3 {
    font-size: 1.1rem !important; /* Reduzir fonte */
    color: var(--gray) !important;
    line-height: 1.6 !important; /* Ajustar line-height */
    margin-bottom: 0.8rem !important;
    padding: 0 !important;
}
.btn-contrate {
    background: var(--gradient-primary) !important;
    color: white !important;
    padding: 1rem 2.5rem !important; /* Ajustar padding */
    border: none !important;
    border-radius: 50px !important;
    font-size: 1.1rem !important; /* Ajustar fonte */
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    box-shadow: var(--shadow-lg) !important;
    margin: 0 !important;
}

/* Responsivo para a seção CTA */
@media (max-width: 768px) {
    .newsletter {
        padding: 3rem 1rem !important;
    }
    .newsletter h2 {
        font-size: 2rem !important;
    }
    .newsletter h3 {
        font-size: 1rem !important;
    }
    .newsletter-one {
        flex-direction: column !important; /* Empilha os itens */
        text-align: center !important;
        padding: 1rem !important;
        gap: 1.5rem !important;
    }
    .section-one {
        min-width: 100% !important;
        padding-left: 0 !important; /* Remover padding-left específico */
    }
    .section-one h2,
    .section-one h3 {
        text-align: center !important;
        padding-left: 0 !important; /* Remover padding-left específico */
    }
    .btn-contrate {
        width: 100% !important; /* Botão ocupa largura total */
        max-width: 300px !important; /* Limitar largura máxima do botão */
        margin: 0 auto !important; /* Centralizar botão */
        padding: 0.9rem 2rem !important;
        font-size: 1rem !important;
    }
}


       /* ========================================
   FOOTER MODERNO
======================================== */
.rodape {
    background: var(--dark) !important;
    color: white !important;
    padding: 3rem 1.5rem 1.5rem !important; /* Ajustar padding */
}
.rodape-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; /* Ajustar min-width para mobile */
    gap: 2rem !important; /* Ajustar gap */
    margin-bottom: 2rem !important; /* Ajustar margin-bottom */
}
.rodape-links h3 {
    color: var(--primary-light) !important;
    margin-bottom: 1rem !important; /* Ajustar margin-bottom */
    font-size: 1.1rem !important; /* Ajustar fonte */
    padding: 0 !important;
}
.rodape-links ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.rodape-links li {
    margin: 0 !important;
    padding: 0 !important;
}
.rodape-links a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
    display: block !important;
    padding: 0.4rem 0 !important; /* Ajustar padding */
    font-size: 0.95rem !important; /* Ajustar fonte */
}
.rodape-links a:hover {
    color: var(--primary-light) !important;
    padding-left: 0.5rem !important;
}
.rodape-info p {
    margin: 0.4rem 0 !important; /* Ajustar margin */
    padding: 0 !important;
    font-size: 0.95rem !important; /* Ajustar fonte */
}

/* Responsivo para o footer */
@media (max-width: 768px) {
    .rodape {
        padding: 2rem 1rem 1rem !important;
    }
    .rodape-container {
        grid-template-columns: 1fr !important; /* Uma coluna em telas muito pequenas */
        text-align: center !important; /* Centralizar texto */
        gap: 1.5rem !important;
    }
    .rodape-links ul {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centralizar links */
    }
    .rodape-links a {
        padding: 0.3rem 0 !important;
    }
    .rodape-links a:hover {
        padding-left: 0 !important; /* Remover padding-left no hover em mobile */
    }
}

        /* ========================================
   WHATSAPP BUTTON
======================================== */
.whatsapp-button {
    position: fixed !important;
    bottom: 1.5rem !important; /* Ajustar posição para mobile */
    right: 1.5rem !important; /* Ajustar posição para mobile */
    background: #25D366 !important;
    color: white !important;
    width: 55px !important; /* Ligeiramente menor para mobile */
    height: 55px !important; /* Ligeiramente menor para mobile */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.8rem !important; /* Ajustar tamanho do ícone */
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4) !important;
    z-index: 999 !important;
    transition: var(--transition) !important;
    text-decoration: none !important;
}
.whatsapp-button:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.6) !important;
}

/* Ajuste específico para telas muito pequenas */
@media (max-width: 480px) {
    .whatsapp-button {
        bottom: 1rem !important;
        right: 1rem !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 1.6rem !important;
    }
}


       /* ========================================
   COOKIE BANNER MODERNO
======================================== */
#cookie-banner {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(0,0,0,0.9) !important;
    color: #fff !important;
    padding: 15px !important; /* Ligeiramente menor padding */
    text-align: center !important;
    font-size: 16px !important; /* Ajustar tamanho do texto */
    z-index: 9999 !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3) !important;
}
#cookie-banner p {
    margin: 0 0 8px 0 !important; /* Ajustar margin */
    font-size: 16px !important; /* Garante o tamanho da letra */
}
#cookie-banner a {
    color: #4CAF50 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    font-size: 16px !important;
}
#cookie-banner button {
    margin: 5px !important;
    padding: 12px 25px !important; /* Ajustar padding dos botões */
    border: none !important;
    border-radius: 5px !important;
    font-size: 16px !important; /* Ajustar tamanho da letra */
    cursor: pointer !important;
    transition: background 0.3s !important;
}
#aceitar {
    background: #4CAF50 !important;
    color: #fff !important;
}
#aceitar:hover {
    background: #45a049 !important;
}
#recusar {
    background: #f44336 !important;
    color: #fff !important;
}
#recusar:hover {
    background: #da190b !important;
}

/* Responsivo para o cookie banner */
@media (max-width: 480px) {
    #cookie-banner {
        padding: 10px !important;
        font-size: 14px !important;
    }
    #cookie-banner p,
    #cookie-banner a,
    #cookie-banner button {
        font-size: 14px !important;
    }
    #cookie-banner button {
        padding: 10px 20px !important;
        display: block !important; /* Empilha os botões */
        width: calc(100% - 10px) !important; /* Ocupa quase toda a largura */
        margin: 5px auto !important; /* Centraliza */
    }
}

    
    
        /* ========================================
   RESPONSIVO MELHORADO
======================================== */
@media (max-width: 1200px) {
    .menu ul {
        gap: 1rem !important;
    }

    .menu-color-wts,
    .menu-color-btn {
        padding: 0.6rem 0.9rem !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 1024px) {
    .item img {
        height: 100px !important;
    }

    .main {
        max-width: 800px !important;
    }
}

@media (max-width: 768px) {
    .btn-menu {
        display: block !important;
    }

    .menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 85% !important;
        max-width: 400px !important;
        height: 100vh !important;
        background: white !important;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2) !important;
        transition: right 0.3s ease !important;
        padding: 2rem 1.5rem !important;
        overflow-y: auto !important;
        z-index: 10000 !important;
    }

    .menu.active {
        right: 0 !important;
    }

    .btn-close {
        display: block !important;
    }

    .menu ul {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .menu li {
        width: 100% !important;
    }

    .menu a {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    .menu-color-wts,
    .menu-color-btn {
        width: 100% !important;
        padding: 0.9rem 1rem !important;
        font-size: 1rem !important;
        justify-content: center !important;
    }

    .item img {
        height: 80px !important;
    }

    .main {
        margin-top: 2rem !important;
    }
}

@media (max-width: 480px) {
    .item img {
        height: 70px !important;
        padding: 0.3rem !important;
    }

    .slider {
        padding: 1rem 0 !important;
    }

    .menu-color-wts,
    .menu-color-btn {
        font-size: 0.95rem !important;
        padding: 0.8rem !important;
    }
}

/* Overlay do menu mobile */
.menu-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.menu-overlay.active {
    display: block !important;
    opacity: 1 !important;
}

        /* Estilos adicionais */
        .item {
            margin: 0 !important;
            padding: 0.5rem !important;
        }

        small {
            margin: 0 !important;
            padding: 0 !important;
        }

        iframe {
            border: 0 !important;
            margin: 0 auto !important;
        }
        
/* ========================================
   MAPA INTERATIVO - SEÇÃO COMPLETA
======================================== */
.mapa-section {
    background: #ffffff !important;
    padding: 3rem 1.5rem !important; /* Ajustar padding */
    text-align: center !important;
}
.mapa-section h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.5rem !important; /* Reduzir fonte */
    font-weight: 800 !important;
    color: #1e90ff !important;
    margin-bottom: 0.8rem !important;
    text-transform: uppercase !important;
}
.mapa-subtitle {
    font-size: 1.1rem !important; /* Reduzir fonte */
    color: #666 !important;
    margin-bottom: 1.5rem !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Campo de Busca */
.busca-endereco {
    max-width: 700px !important;
    margin: 0 auto 1.5rem !important; /* Ajustar margin */
    display: flex !important;
    gap: 0.8rem !important; /* Ajustar gap */
    flex-wrap: wrap !important;
    justify-content: center !important;
}
#endereco-input {
    flex: 1 !important;
    min-width: 280px !important; /* Ajustar min-width */
    padding: 0.9rem 1.2rem !important; /* Ajustar padding */
    font-size: 0.95rem !important; /* Ajustar fonte */
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}
#endereco-input:focus {
    outline: none !important;
    border-color: #1e90ff !important;
    box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.1) !important;
}
.btn-verificar {
    padding: 0.9rem 1.8rem !important; /* Ajustar padding */
    background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important; /* Ajustar fonte */
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.btn-verificar:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(30, 144, 255, 0.4) !important;
}
/* Resultado da Verificação */
.resultado-viabilidade {
    max-width: 600px !important;
    margin: 1.5rem auto !important; /* Ajustar margin */
    padding: 1.5rem !important; /* Ajustar padding */
    border-radius: 12px !important;
    animation: slideDown 0.4s ease !important;
}
.resultado-viabilidade i {
    font-size: 2.5rem !important; /* Ajustar tamanho do ícone */
}
#resultado-texto {
    font-size: 1.5rem !important; /* Ajustar fonte */
    font-weight: 700 !important;
    margin: 0 !important;
}
#resultado-descricao {
    font-size: 1rem !important; /* Ajustar fonte */
    color: #666 !important;
    margin: 0 !important;
}
.btn-contratar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.9rem 1.8rem !important; /* Ajustar padding */
    background: #25D366 !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 1rem !important; /* Ajustar fonte */
    transition: all 0.3s ease !important;
    margin-top: 1rem !important;
}

/* Mapa Centralizado */
.mapa-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 1.5rem auto 0 !important; /* Ajustar margin */
    padding: 0 1.5rem !important; /* Ajustar padding */
}
.mapa-iframe {
    width: 100% !important;
    max-width: 1140px !important;
    height: 350px !important; /* Reduzir altura para mobile */
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Responsivo para o mapa */
@media (max-width: 768px) {
    .mapa-section h2 {
        font-size: 2rem !important;
    }
    .mapa-subtitle {
        font-size: 1rem !important;
    }
    .busca-endereco {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }
    #endereco-input {
        min-width: 100% !important;
        padding: 0.8rem 1rem !important;
        font-size: 0.9rem !important;
    }
    .btn-verificar {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.8rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
    .resultado-viabilidade {
        padding: 1.2rem !important;
    }
    .resultado-viabilidade i {
        font-size: 2rem !important;
    }
    #resultado-texto {
        font-size: 1.3rem !important;
    }
    #resultado-descricao {
        font-size: 0.9rem !important;
    }
    .btn-contratar {
        padding: 0.8rem 1.5rem !important;
        font-size: 0.95rem !important;
    }
    .mapa-iframe {
        height: 300px !important; /* Mais redução da altura */
    }
    .mapa-container {
        padding: 0 1rem !important;
    }
}
@media (max-width: 480px) {
    .mapa-section h2 {
        font-size: 1.8rem !important;
    }
    .mapa-iframe {
        height: 250px !important; /* Altura mínima para telas muito pequenas */
    }
}

/* Garantir que os ícones do WhatsApp apareçam */
.fa-brands.fa-whatsapp {
    display: inline-block !important;
    font-size: inherit !important;
    line-height: 1 !important;
}
.menu-color-wts i {
    font-size: 1.1rem !important; /* Ajustar tamanho do ícone no menu */
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}
.whatsapp-button i {
    font-size: 1.8rem !important; /* Ajustar tamanho do ícone no botão flutuante */
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ajustes para ícones em telas menores */
@media (max-width: 768px) {
    .menu-color-wts i {
        font-size: 1rem !important;
    }
    .whatsapp-button i {
        font-size: 1.6rem !important;
    }
}
@media (max-width: 480px) {
    .menu-color-wts i {
        font-size: 0.9rem !important;
    }
    .whatsapp-button i {
        font-size: 1.4rem !important;
    }
}


/* ========================================
   BANNER - ALTURA FIXA (NÃO MUDA)
======================================== */
.banner {
    position: relative !important;
    height: auto !important; /* Remover altura fixa */
    min-height: 450px !important; /* Definir uma altura mínima mais razoável */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    padding: 4rem 0 !important; /* Adicionar padding vertical para conteúdo */
    margin: 0 !important;
}
/* Vídeo de Fundo */
.bg_video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
    opacity: 0.45 !important;
    z-index: 0 !important;
}
.banner-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.85) 0%, rgba(118, 75, 162, 0.85) 100%) !important;
    z-index: 1 !important;
}
/* Slider também acima do vídeo */
.main {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 2rem !important; /* Ajustar margin-top */
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem !important;
}
/* Mobile - Desabilitar vídeo para performance */
@media (max-width: 768px) {
    .bg_video {
        display: none !important;
    }
    .banner {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        min-height: 400px !important; /* Altura mínima para mobile */
        padding: 3rem 0 !important; /* Ajustar padding */
    }
    .banner-overlay {
        background: rgba(102, 126, 234, 0.3) !important;
    }
}
/* Fallback para navegadores que não suportam vídeo */
@supports not (object-fit: cover) {
    .bg_video {
        display: none !important;
    }
}
/* Conteúdo sobre o vídeo */
.title {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    max-width: 900px !important;
    padding: 0 1.5rem !important; /* Ajustar padding */
    animation: fadeInUp 0.8s ease-out !important;
}
.title h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.8rem !important; /* Reduzir fonte para mobile */
    font-weight: 800 !important;
    color: white !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
}
.title h3 {
    font-size: 1.2rem !important; /* Reduzir fonte para mobile */
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin-bottom: 2rem !important; /* Ajustar margin-bottom */
    line-height: 1.6 !important; /* Ajustar line-height */
    padding: 0 !important;
}
.btn-assinatura {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    background: white !important;
    color: var(--primary) !important;
    padding: 1rem 2.5rem !important; /* Ajustar padding */
    border: none !important;
    border-radius: 50px !important;
    font-size: 1rem !important; /* Ajustar fonte */
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    margin: 0 !important;
}
.btn-assinatura:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Responsivo para o banner principal */
@media (max-width: 768px) {
    .banner {
        min-height: 350px !important; /* Altura mínima para tablets */
        padding: 2.5rem 0 !important;
    }
    .title h2 {
        font-size: 2.2rem !important;
    }
    .title h3 {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    .btn-assinatura {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        padding: 0.9rem 2rem !important;
        font-size: 0.95rem !important;
    }
}
@media (max-width: 480px) {
    .banner {
        min-height: 300px !important; /* Altura mínima para celulares */
        padding: 2rem 0 !important;
    }
    .title h2 {
        font-size: 1.8rem !important;
    }
    .title h3 {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    .btn-assinatura {
        padding: 0.8rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
}
/* ========================================
   SECTION NEWSLETTER COM IMAGEM DE FUNDO - CORRIGIDO
======================================== */
.newsletter-wrapper {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background-image: url('img/bgmulher.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding: 6rem 2rem !important; /* Ajustar padding */
    min-height: 350px !important; /* Ajustar min-height */
}
/* Overlay escuro para melhorar legibilidade */
.newsletter-wrapper::before {
    content: '' !important;
    position: absolute !important; /* Corrigido de 'center' para 'absolute' */
    top: 0 !important;
    left: 0 !important; /* Corrigido de '0px' para '0' */
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 1 !important;
}
/* Conteúdo acima do overlay */
.newsletter-one .section-one,
.newsletter-one .section-two {
    position: relative !important;
    z-index: 2 !important;
}
.newsletter-one .section-one {
    padding-left: 0 !important; /* Remover padding-left para mobile */
}
/* Garante que o conteúdo fique acima do overlay */
.newsletter-one > * {
    position: relative !important;
    z-index: 2 !important;
}
/* Textos em branco para contrastar com a imagem */
.newsletter-one h2,
.newsletter-one h3 {
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
    padding-left: 0 !important; /* Remover padding-left para mobile */
    text-align: center !important; /* Centralizar texto */
}

/* Responsivo para a newsletter com imagem de fundo */
@media (max-width: 768px) {
    .newsletter-wrapper {
        padding: 4rem 1rem !important;
        min-height: 300px !important;
    }
    .newsletter-one h2 {
        font-size: 2rem !important;
    }
    .newsletter-one h3 {
        font-size: 1rem !important;
    }
}
@media (max-width: 480px) {
    .newsletter-wrapper {
        padding: 3rem 0.8rem !important;
        min-height: 250px !important;
    }
    .newsletter-one h2 {
        font-size: 1.8rem !important;
    }
    .newsletter-one h3 {
        font-size: 0.9rem !important;
    }
}

/* ========================================
   SECTION NEWSLETTER - DESTAQUE
======================================== */
.newsletter.container-two.bg-black {
    background: #ffffff !important;
    padding: 3rem 1.5rem !important; /* Ajustar padding */
    text-align: center !important;
    margin: 3rem 0 !important; /* Ajustar margin */
}
.newsletter.container-two h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.5rem !important; /* Reduzir fonte */
    font-weight: 800 !important;
    color: #1e90ff !important;
    margin-bottom: 0.8rem !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1.2 !important;
}
.newsletter.container-two h3 {
    font-size: 1.1rem !important; /* Reduzir fonte */
    font-weight: 400 !important;
    color: #333333 !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 1.6 !important; /* Ajustar line-height */
}
/* Versão com fundo colorido alternativo (se quiser testar) */
.newsletter.container-two.bg-black.destaque {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    box-shadow: 0 10px 30px rgba(30, 144, 255, 0.15) !important;
    border-radius: 16px !important;
    border: none !important;
}

/* Responsivo */
@media (max-width: 768px) {
    .newsletter.container-two h2 {
        font-size: 2rem !important;
    }
    .newsletter.container-two h3 {
        font-size: 1rem !important;
    }
    .newsletter.container-two.bg-black {
        padding: 2.5rem 1rem !important;
        margin: 2.5rem 0 !important;
    }
}
@media (max-width: 480px) {
    .newsletter.container-two h2 {
        font-size: 1.8rem !important;
    }
    .newsletter.container-two h3 {
        font-size: 0.9rem !important;
    }
    .newsletter.container-two.bg-black {
        padding: 2rem 0.8rem !important;
        margin: 2rem 0 !important;
    }
}

/* ========================================
   TÍTULO DA SEÇÃO DE PLANOS
======================================== */
.servicos h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.5rem !important; /* Reduzir fonte */
    font-weight: 800 !important;
    color: #1e90ff !important;
    text-align: center !important;
    margin-bottom: 2.5rem !important; /* Ajustar margin-bottom */
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important; /* Ajustar letter-spacing */
    line-height: 1.2 !important;
}

/* Responsivo */
@media (max-width: 768px) {
    .servicos h3 {
        font-size: 2rem !important;
        margin-bottom: 2rem !important;
    }
}
@media (max-width: 480px) {
    .servicos h3 {
        font-size: 1.8rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* ========================================
   SLIDES - ESTRUTURA
   ======================================== */
.banner-slides {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}
.banner-slide {
    display: none !important;
}
.banner-slide.active {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important; /* Ajustar gap */
    align-items: center !important;
    padding: 2.5rem 1.5rem !important; /* Ajustar padding */
}

/* ========================================
   TEXTO (LADO ESQUERDO)
   ======================================== */
.banner-slide .title {
    text-align: left !important;
    padding: 1.5rem !important; /* Ajustar padding */
}
.banner-slide .title h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.8rem !important; /* Reduzir fonte */
    font-weight: 800 !important;
    color: white !important;
    margin-bottom: 1rem !important; /* Ajustar margin-bottom */
    line-height: 1.2 !important;
}
.banner-slide .title h3 {
    font-size: 1.2rem !important; /* Reduzir fonte */
    color: rgba(255, 255, 255, 0.95) !important;
    margin-bottom: 2rem !important; /* Ajustar margin-bottom */
    line-height: 1.6 !important; /* Ajustar line-height */
}
.btn-assinatura {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    background: white !important;
    color: #6366f1 !important;
    padding: 0.9rem 2.2rem !important; /* Ajustar padding */
    border: none !important;
    border-radius: 50px !important;
    font-size: 1rem !important; /* Ajustar fonte */
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
}

/* ========================================
   SLIDER - ESTRUTURA GERAL
   ======================================== */
.banner-slide .main {
    position: relative !important;
    width: 100% !important;
    max-width: 500px !important; /* Ajustar max-width para o slider */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
}
.banner-slide .slider {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 350px !important; /* Altura mínima mais flexível */
}
/* Containers Slick */
.banner-slide .slick-list {
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
}
.banner-slide .slick-track {
    display: flex !important;
    align-items: center !important;
}
.banner-slide .slick-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
/* Imagens dentro dos slides (geral) */
.banner-slide .slider img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 400px !important; /* Altura máxima geral para imagens */
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 8px 25px rgba(255, 255, 255, 0.5)) !important;
    transition: transform 0.3s ease !important;
}
/* Específicos para os slides 1 e 2 (que são carrosséis de logos/streaming) */
.banner-slide:nth-child(1) .slider img,
.banner-slide:nth-child(2) .slider img {
    max-height: 300px !important; /* Ajusta a altura para os carrosséis de logos */
    max-width: 100% !important;
}
/* Específicos para os slides 3 e 4 (imagens únicas) */
.banner-slide:nth-child(3) .slider img,
.banner-slide:nth-child(4) .slider img {
    max-width: 600px !important; /* Permite que as imagens únicas sejam maiores */
    max-height: 600px !important;
}
.banner-slide .slider .item:hover img {
    transform: scale(1.03) !important;
}

/* ========================================
   SETAS GRANDES E VISÍVEIS
   ======================================== */
.banner-slide .slick-prev,
.banner-slide .slick-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    width: 45px !important; /* Ligeiramente menor */
    height: 45px !important; /* Ligeiramente menor */
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #1e90ff !important; /* Borda um pouco mais fina */
    cursor: pointer !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}
.banner-slide .slick-prev {
    left: -50px !important; /* Ajustar posição */
}
.banner-slide .slick-next {
    right: -50px !important; /* Ajustar posição */
}
.banner-slide .slider:hover .slick-prev,
.banner-slide .slider:hover .slick-next {
    opacity: 1 !important;
}
.banner-slide .slick-prev:before,
.banner-slide .slick-next:before {
    font-size: 24px !important; /* Reduzir tamanho do ícone */
    color: #1e90ff !important;
}
.banner-slide .slick-dots {
    display: none !important;
}

/* ========================================
   RESPONSIVO
   ======================================== */
@media (max-width: 1024px) {
    .banner {
        min-height: 600px !important; /* Ajustar altura mínima para tablets */
        padding: 3rem 0 !important;
    }
    .banner-slide.active {
        grid-template-columns: 1fr !important; /* Uma coluna em tablets */
        gap: 1.5rem !important;
        padding: 2rem 1rem !important;
    }
    .banner-slide .title {
        text-align: center !important;
        padding: 1rem !important;
    }
    .banner-slide .title h2 {
        font-size: 2.5rem !important;
    }
    .banner-slide .title h3 {
        font-size: 1.1rem !important;
    }
    .btn-assinatura {
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto !important;
    }
    .banner-slide .slider img {
        max-width: 300px !important; /* Ajustar max-width para tablets */
        max-height: 250px !important; /* Ajustar max-height para tablets */
    }
    .banner-slide:nth-child(1) .slider img,
    .banner-slide:nth-child(2) .slider img {
        max-height: 220px !important;
    }
    .banner-slide .slick-prev,
    .banner-slide .slick-next {
        opacity: 1 !important; /* Sempre visível em tablets */
        left: 10px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
    }
    .banner-slide .slick-prev:before,
    .banner-slide .slick-next:before {
        font-size: 20px !important;
    }
}

@media (max-width: 768px) {
    .banner {
        min-height: 500px !important; /* Altura mínima para mobile */
        padding: 2.5rem 0 !important;
    }
    .banner-slide.active {
        padding: 1.5rem 0.8rem !important;
    }
    .banner-slide .title h2 {
        font-size: 2rem !important;
    }
    .banner-slide .title h3 {
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
    }
    .btn-assinatura {
        max-width: 280px !important;
        padding: 0.8rem 2rem !important;
        font-size: 0.9rem !important;
    }
    .banner-slide .slider {
        min-height: 280px !important; /* Reduzir min-height do slider */
    }
    .banner-slide .slider img {
        max-width: 250px !important; /* Reduzir max-width para mobile */
        max-height: 220px !important; /* Reduzir max-height para mobile */
    }
    .banner-slide:nth-child(1) .slider img,
    .banner-slide:nth-child(2) .slider img {
        max-height: 180px !important;
    }
    .banner-slide .slick-prev,
    .banner-slide .slick-next {
        width: 35px !important;
        height: 35px !important;
        left: 5px !important;
        right: 5px !important;
    }
    .banner-slide .slick-prev:before,
    .banner-slide .slick-next:before {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    .banner {
        min-height: 400px !important; /* Altura mínima para celulares pequenos */
        padding: 2rem 0 !important;
    }
    .banner-slide .title h2 {
        font-size: 1.6rem !important;
    }
    .banner-slide .title h3 {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
    .btn-assinatura {
        max-width: 250px !important;
        padding: 0.7rem 1.5rem !important;
        font-size: 0.85rem !important;
    }
    .banner-slide .slider {
        min-height: 220px !important;
    }
    .banner-slide .slider img {
        max-width: 200px !important;
        max-height: 180px !important;
    }
    .banner-slide:nth-child(1) .slider img,
    .banner-slide:nth-child(2) .slider img {
        max-height: 150px !important;
    }
    .banner-slide .slick-prev,
    .banner-slide .slick-next {
        width: 30px !important;
        height: 30px !important;
    }
    .banner-slide .slick-prev:before,
    .banner-slide .slick-next:before {
        font-size: 16px !important;
    }
}
/* telas entre 769 e 1200px */
@media (max-width: 1401px) and (min-width: 1201px) {
    .menu ul {
        flex-wrap: wrap !important; /* Permite quebra de linha */
        justify-content: flex-end !important; /* Mantém alinhamento à direita */
        gap: 0.6rem !important; /* Reduzir o gap para caber mais itens */
    }
    .menu-color,
    .menu-color-wts,
    .menu-color-btn {
        padding: 0.4rem 0.6rem !important; /* Reduzir padding para caber mais */
        font-size: 0.8rem !important; /* Reduzir fonte */
    }
    .logo-img {
        max-width: 220px !important; /* Ajustar logo para telas menores */
    }
}


/* telas entre 769 e 1200px */
@media (max-width: 1200px) and (min-width: 769px) {
    .menu ul {
        flex-wrap: wrap !important; /* Permite quebra de linha */
        justify-content: flex-end !important; /* Mantém alinhamento à direita */
        gap: 0.6rem !important; /* Reduzir o gap para caber mais itens */
    }
    .menu-color,
    .menu-color-wts,
    .menu-color-btn {
        padding: 0.4rem 0.6rem !important; /* Reduzir padding para caber mais */
        font-size: 0.8rem !important; /* Reduzir fonte */
    }
    .logo-img {
        max-width: 220px !important; /* Ajustar logo para telas menores */
    }
}

@media (min-width: 1401px) {
    .container-header {
        max-width: 1600px !important; /* ou 1800, se preferir */
        padding: 0 3rem !important;   /* um pouco mais de respiro */
    }
}

/* ========================================
   ESTILOS PARA O FAQ (PERGUNTAS FREQUENTES)
======================================== */

/* Container centralizado na página */
.faq-container {
  max-width: 900px !important;
  margin: 40px auto !important;
  padding: 0 15px !important;
}

/* Título centralizado */
.faq-titulo {
  text-align: center !important;
  color: #1e90ff !important; /* Azul que você mencionou */
  font-size: 32px !important;
  font-weight: 800 !important;
  margin-bottom: 20px !important;
}

/* Cada item do FAQ */
.faq-item {
  margin-bottom: 5px !important;
  border: 1px solid #ddd !important; /* Borda leve para cada item */
  border-radius: 8px !important; /* Bordas arredondadas */
  overflow: hidden !important; /* Garante que o conteúdo não vaze */
}

/* Botão da pergunta (sem borda, cheio, clicável em toda a área) */
.faq-pergunta {
  width: 100% !important;
  background-color: #f7f7f7 !important;
  color: #333 !important;
  text-align: left !important;
  padding: 15px 20px !important; /* Aumentei o padding */
  font-size: 16px !important;
  border: none !important;             /* Sem borda */
  outline: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* Alinha texto à esquerda e seta à direita */
  gap: 15px !important;                /* Espaço entre texto e seta */
  transition: background-color 0.2s ease !important; /* Transição suave para o hover */

  /* Remove a aparência de select/dropdown */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important; /* Remove qualquer seta padrão de select */
  padding-right: 20px !important; /* Garante espaço para a seta personalizada */
}

/* Hover leve */
.faq-pergunta:hover {
  background-color: #ececec !important;
}

/* Texto da pergunta */
.faq-texto {
  flex-grow: 1 !important; /* Permite que o texto ocupe o espaço disponível */
}

/* Ícone da seta */
.faq-icone {
  font-size: 14px !important;
  transition: transform 0.2s ease !important;
  color: #1e90ff !important; /* Cor da seta */
  flex-shrink: 0 !important; /* Impede que a seta encolha */
}

/* Seta girada quando ativo */
.faq-item.ativo .faq-icone {
  transform: rotate(180deg) !important;
}

/* Resposta escondida inicialmente */
.faq-resposta {
  display: none !important;
  padding: 10px 20px 15px 20px !important; /* Ajustei o padding para alinhar com o texto da pergunta */
  background-color: #fff !important;
  font-size: 15px !important;
  color: #555 !important; /* Cor do texto da resposta */
  border-top: 1px solid #eee !important; /* Borda superior para separar da pergunta */
}

/* Quando ativo, mostra resposta */
.faq-item.ativo .faq-resposta {
  display: block !important;
}