/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: #000000;
    background: #ffffff;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Layout Principal */
.main-layout {
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* Área de conteúdo principal */
.content-area {
    flex: 1;
    width: calc(100% - 80px);
    margin-left: 80px; /* Espaço para o sidebar */
    box-sizing: border-box;
    overflow-x: hidden; /* Prevenir conteúdo que ultrapassa a tela */
    max-width: calc(100% - 80px); /* Garantir que não ultrapasse a largura da tela */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Permitir que seções controlem seu próprio alinhamento */
}

/* CORREÇÃO ESPECÍFICA PARA CENTRALIZAR O HERO - DESKTOP RESPONSIVO */
.content-area .hero-new {
    align-self: stretch; /* Ocupar toda largura do content-area */
    width: 100%;
    display: flex !important;
    justify-content: center !important; /* Centralizar o conteúdo */
    align-items: center !important;
    position: relative;
    margin: 0 !important;
    padding-left: 0 !important; /* Remover padding horizontal fixo */
    padding-top: 60px !important; /* Restaurar espaçamento superior */
}

/* Garantir que a seção de grupos fique alinhada à esquerda */
.content-area .groups-section {
    align-self: flex-start; /* Apenas a seção de grupos fica à esquerda */
    width: 100%;
}

/* Variables CSS */
:root {
    --primary-color: #25D366;
    --primary-dark: #128C7E;
    --secondary-color: #34B7F1;
    --dark-bg: #0A192F;
    --dark-card: #1e293b;
    --dark-gray: #334155;
    --darker-gray: #1e293b;
    --light-gray: #f1f5f9;
    --border-color: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.4);
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --accent-color: #6366f1;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
}

/* Wide green button for forms */
.btn-primary-wide {
    background-color: #10b981;
    color: white;
    padding: 1rem 3rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 1.1rem;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
    text-align: center;
    min-width: 300px;
}

.btn-primary-wide:hover {
    background-color: #059669;
    text-decoration: none;
    color: white;
}

/* Hero Section */
.hero-new {
    text-align: left;
    padding: 40px 0 80px; /* Aumentado espaçamento superior e inferior */
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    transform: none !important; /* Garantir que não seja afetado por transforms */
    position: relative;
    width: 100%;
    margin: 0;
    align-self: stretch;
    display: flex;
    justify-content: center; /* Centralizar o container */
    align-items: center;
    /* Garantir que ocupe toda a largura disponível da content-area */
    min-height: auto;
}

.hero-content {
    max-width: 850px;
    margin: 0 auto !important; /* Centralizar o conteúdo */
    padding: 0 40px; /* Padding simétrico */
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    /* Garantir que não há transforms ou posicionamento conflitante */
    transform: none !important;
    left: auto !important;
    right: auto !important;
}

.hero-title {    font-size: 3rem; /* Restaurado tamanho original */
    font-weight: 900; /* Inter Black */
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; /* Inter como fonte principal */
    margin-top: 40px;
    margin-bottom: 20px;
    color: #000000;
    line-height: 1.3;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 100%;
    display: block;
    width: 100%;
    position: relative;
    letter-spacing: -0.5px; /* Adicionar letter spacing para melhorar legibilidade */
    text-shadow: 0 1px 1px rgba(0,0,0,0.1); /* Adicionar uma leve sombra para mais destaque */
}

.hero-title .whatsapp-underline {
    text-decoration: underline;
    text-decoration-color: #000000;
    text-decoration-thickness: 2px;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 400; /* Inter Regular */
    font-family: 'Inter', sans-serif !important; /* Inter Regular */
    color: #000000;
    margin-bottom: 40px;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 480px; /* Largura específica para alinhar com o final do título */
    line-height: 1.4;
    position: relative;
    white-space: normal; /* Garantir quebra de linha natural */
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: flex-start !important; /* Mudar para alinhamento à esquerda */
    margin-bottom: 60px;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    text-align: left;
}

/* Botões Hero */
.btn-hero {
    padding: 6px 24px !important; /* Altura mais fina */
    font-size: 1.05rem !important; /* Fonte um pouco maior */
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important; /* Inter Regular */
    border-radius: 6px !important;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid;
    min-width: 230px !important; /* Largura um pouco maior */
    text-align: center;
    letter-spacing: 0.02em; /* Melhor legibilidade */
}

.btn-hero.primary {
    background: #22A065 !important; /* Verde um pouco mais claro */
    color: white !important;
    border-color: #22A065 !important;
}

.btn-hero.primary:hover {
    background: #1E8F5A !important; /* Verde um pouco mais claro no hover */
    color: white !important;
    border-color: #1E8F5A !important;
    transform: none !important; /* Remover elevação */
    box-shadow: none !important; /* Garantir que não haja sombra */
}

.btn-hero.secondary {
    background: transparent !important;
    color: #333333 !important; /* Texto preto */
    border-color: rgba(51, 51, 51, 0.12) !important; /* Borda ainda mais sutil, reduzida para 12% de opacidade */
}

.btn-hero.secondary:hover {
    background: rgba(0, 0, 0, 0.025) !important; /* Hover ainda mais claro (2.5% opacidade) */
    color: #333333 !important;
    border-color: rgba(51, 51, 51, 0.15) !important; /* Borda levemente mais sutil no hover */
}

/* Hero Stats */
.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border-radius: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
}

.hero-stat i {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.hero-stat span {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

/* ==================== RESPONSIVIDADE DESKTOP PARA HERO ==================== */

/* Reset e correção para desktop - Remove qualquer posicionamento conflitante */
@media (min-width: 769px) {
    .content-area {
        align-items: stretch !important; /* Permitir que hero controle seu alinhamento */
    }
    
    .content-area .hero-new {
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 80px !important; /* Aumentado espaçamento superior */
        padding-bottom: 80px !important; /* Aumentado espaçamento inferior */
        margin: 0 !important;
        align-self: stretch !important;
    }
    
    .hero-content {
        margin: 0 auto !important;
        position: relative !important;
        /* Garantir que não há conflitos de posicionamento */
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: auto !important;
        float: none !important;
        /* Garantir que o container seja centralizado */
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Desktop pequeno / Laptop */
@media (min-width: 769px) and (max-width: 1199px) {
    .content-area .hero-new {
        padding-top: 65px !important; /* Aumentado espaçamento para laptops */
        padding-bottom: 65px !important; /* Aumentado espaçamento inferior */
    }
    
    .hero-content {
        max-width: 750px;
        padding: 0 30px;
    }
}

/* Desktop médio */
@media (min-width: 1200px) and (max-width: 1599px) {
    .content-area .hero-new {
        padding-top: 75px !important; /* Aumentado espaçamento padrão */
        padding-bottom: 75px !important; /* Aumentado espaçamento inferior */
    }
    
    .hero-content {
        max-width: 850px;
        padding: 0 40px;
    }
}

/* Desktop grande */
@media (min-width: 1600px) and (max-width: 1919px) {
    .content-area .hero-new {
        padding-top: 85px !important; /* Aumentado espaçamento para telas grandes */
        padding-bottom: 85px !important; /* Aumentado espaçamento inferior */
    }
    
    .hero-content {
        max-width: 950px;
        padding: 0 50px;
    }
}

/* Desktop muito grande (1920px+) */
@media (min-width: 1920px) {
    .content-area .hero-new {
        padding-top: 95px !important; /* Aumentado espaçamento para telas muito grandes */
        padding-bottom: 95px !important; /* Aumentado espaçamento inferior */
    }
    
    .hero-content {
        max-width: 1100px;
        padding: 0 60px;
    }
    
    /* Para telas ultrawide, garantir que o conteúdo não fique muito deslocado */
    .content-area {
        max-width: none; /* Permitir uso total da largura */
    }
    
    .hero-new {
        padding: 115px 0; /* Aumentado padding vertical em telas grandes */
    }
}

/* Desktop ultra grande (2560px+) */
@media (min-width: 2560px) {
    .content-area .hero-new {
        padding-top: 115px !important; /* Aumentado espaçamento para telas ultra grandes */
        padding-bottom: 115px !important; /* Aumentado espaçamento inferior */
    }
    
    .hero-content {
        max-width: 1300px;
        padding: 0 80px;
        /* Centralização simples sem transform */
        transform: none !important;
        left: auto !important;
    }
    
    .hero-new {
        padding: 120px 0;
    }
}

/* Responsivo Hero - Mantendo alinhamento à esquerda mas ajustado */
@media (max-width: 768px) {
    .hero-new {
        padding: 85px 0; /* Aumentado padding vertical para mais espaçamento */
        align-self: stretch;
        display: flex !important;
        justify-content: flex-start !important;
        padding-left: 0 !important;
    }.hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px 0 25px !important; /* Reduzido o padding esquerdo */
        box-sizing: border-box;
        margin: 0 !important;
        margin-left: 20px !important; /* Alinhado com categories-header */
        margin-right: auto !important;
        text-align: left !important;
        align-items: flex-start !important;
    }      .hero-title {
        /* Tamanho será controlado pelo JavaScript para tablets também */
        font-weight: 900;
        font-family: 'Inter', 'Roboto', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
        margin-top: 30px;
        color: #000000;
        text-align: left !important;
        margin-left: 0 !important;
        letter-spacing: -0.5px;
        max-width: 100%; /* Garantir que não ultrapasse a largura disponível */
        overflow-wrap: break-word; /* Permitir quebra de palavras se necessário */
        word-wrap: break-word;
        /* Valores padrão que serão sobrescritos pelo JS */
        font-size: 2.5rem;
        line-height: 1.25;
    }.hero-subtitle {
        font-size: 1.1rem;
        font-family: sans-serif !important;
        font-weight: 400;
        margin-bottom: 30px;
        text-align: left !important;
        margin-left: 0 !important;
        max-width: 400px; /* Ajustado para tablets */
    }    .hero-buttons {
        flex-direction: column;
        align-items: flex-start; /* Alinhado à esquerda como o resto do conteúdo */
        gap: 18px; /* Manter o espaçamento entre os botões */
        justify-content: flex-start !important;
        margin-bottom: 20px; /* Manter a margem inferior */
        width: 100%; /* Garantir que ocupe toda a largura disponível */
        max-width: 400px; /* Limitar à largura do conteúdo */
        margin-left: 0 !important; /* Garantir alinhamento */
    }    .btn-hero {
        min-width: 95% !important; /* Reduzido de 100% para 95% */
        width: 95% !important;
        max-width: 380px !important; /* Reduzido de 400px para 380px */
        font-size: 1rem !important;
        padding: 8px 20px !important; /* Reduzido de 10px para 8px na altura */
        box-sizing: border-box;
        align-self: flex-start; /* Garantir alinhamento à esquerda */
    }
}

@media (max-width: 480px) {
    .hero-new {
        padding: 75px 0 85px; /* Aumentado padding superior e inferior */
    }
    
    .hero-content {
        margin-left: 20px !important; /* Alinhado com categories-header mobile */
        padding: 0 15px 0 15px !important;
    }      .hero-title {
        /* Tamanho será controlado pelo JavaScript para evitar conflitos */
        font-family: 'Inter', 'Roboto', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-weight: 900;
        margin-top: 20px;
        color: #000000;
        text-align: left !important;
        max-width: 100% !important; /* Garantir que não ultrapasse */
        word-wrap: break-word !important; /* Quebrar palavras se necessário */
        overflow-wrap: break-word !important;
        /* Valores padrão que serão sobrescritos pelo JS */
        font-size: 2.3rem;
        line-height: 1.2;
    }
      .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 25px;
        text-align: left !important;
        max-width: 350px; /* Ajustado para celulares */
    }
      /* Ajustes para botões em telas muito pequenas */
    .hero-buttons {
        align-items: flex-start !important; /* Alinhado à esquerda */
        margin-left: 0 !important;
    }
    
    .btn-hero {
        min-width: 95% !important; /* Reduzido de 100% para 95% */
        width: 95% !important;
        max-width: 280px !important; /* Reduzido de 300px para 280px */
        padding: 7px 18px !important; /* Reduzido altura e largura do padding */
        margin-right: 0 !important;
        align-self: flex-start !important; /* Garantir alinhamento à esquerda */
    }
}

/* Ajuste intermediário para telas médias pequenas */
@media (min-width: 361px) and (max-width: 479px) {
    .hero-content {
        margin-left: 20px !important; /* Consistente com outras media queries */
        padding: 0 15px 0 15px !important;
    }
    
    .categories-header {
        padding-left: 20px !important; /* Alinhado com hero-content */
    }
    
    .hero-buttons {
        align-items: flex-start !important; /* Alinhado à esquerda */
        margin-left: 0 !important;
    }
    
    .btn-hero {
        align-self: flex-start !important; /* Garantir alinhamento à esquerda */
        max-width: 320px !important; /* Ajuste intermediário */
    }
}

/* Ajuste extra para telas muito pequenas */
@media (max-width: 360px) {
    .hero-content {
        margin-left: 15px !important; /* Ajuste fino para telas muito pequenas */
        padding: 0 10px 0 10px !important; /* Reduzir padding para aproveitar espaço */
    }
    
    .categories-header {
        padding-left: 15px !important; /* Alinhado com hero-content em telas muito pequenas */
    }
    
    .hero-buttons {
        align-items: flex-start !important; /* Alinhado à esquerda */
        margin-left: 0 !important;
    }
    
    .btn-hero {
        align-self: flex-start !important; /* Garantir alinhamento à esquerda */
        max-width: 280px !important; /* Ajuste para telas muito pequenas */
    }
}

/* ==================== CORREÇÃO GERAL DE ALINHAMENTO MOBILE ==================== */

/* Garantir alinhamento consistente entre hero e categories em todos os dispositivos mobile */
@media (max-width: 768px) {
    /* Variáveis de alinhamento para diferentes tamanhos de tela */
    .hero-content,
    .categories-header {
        --mobile-align-offset: 20px; /* Offset padrão para tablet */
    }
}

@media (max-width: 480px) {
    .hero-content,
    .categories-header {
        --mobile-align-offset: 20px; /* Offset consistente para mobile */
    }
}

@media (max-width: 360px) {
    .hero-content,
    .categories-header {
        --mobile-align-offset: 15px; /* Offset menor para telas muito pequenas */
    }
}

/* Aplicar o alinhamento usando as variáveis */
@media (max-width: 768px) {
    .hero-content {
        margin-left: var(--mobile-align-offset) !important;
    }
    
    .categories-header {
        padding-left: var(--mobile-align-offset) !important;
    }
    
    /* Garantir que botões e elementos filhos também estejam alinhados */
    .hero-buttons {
        align-items: flex-start !important;
        margin-left: 0 !important;
    }
    
    .btn-hero {
        align-self: flex-start !important;
    }
}

/* ==================== DROPDOWN MENU DOS CARDS ==================== */

.tools-icon {
    position: relative;
    cursor: pointer;
    z-index: 1001; /* Z-index maior que o dropdown para garantir funcionamento */
    user-select: none; /* Prevenir seleção de texto */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-tap-highlight-color: transparent; /* Remover highlight no toque */
}

/* Tamanho da imagem do ícone de engrenagem */
.tools-icon img {
    width: 18px !important; /* Aumentado de 16px para 18px */
    height: 18px !important; /* Aumentado de 16px para 18px */
    user-select: none; /* Prevenir seleção da imagem */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-tap-highlight-color: transparent; /* Remover highlight no toque */
    pointer-events: none; /* A imagem não deve capturar eventos de mouse */
}

/* ==================== DROPDOWN GLOBAL - COMPORTAMENTO UNIFICADO ==================== */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px); /* Claramente abaixo do ícone com espaçamento */
    left: -15px; /* DESKTOP: Alinhado à esquerda (comportamento original) */
    background: white;
    border: 0.8px solid #374151;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 230px;
    max-height: 200px;
    z-index: 9999; /* Z-index alto para aparecer sobre tudo */
    /* Dropdown escondido por padrão */
    display: none;
    padding: 0;
    overflow: hidden;
    margin: 0; /* Remover margin para controle preciso com calc() */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* Garantir que não há transições/animações */
    transition: none !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* Garantir renderização consistente */
    backface-visibility: visible !important;
    perspective: none !important;
    transform-style: flat !important;
}

.dropdown-menu.show {
    /* Dropdown aparece instantaneamente sem qualquer animação */
    display: block !important;
    transition: none !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Variação para abrir à esquerda quando necessário (mobile) */
.dropdown-menu.dropdown-left {
    left: auto !important;
    right: 0 !important; /* Alinhado com a direita do ícone quando necessário */
}

/* Responsivo para mobile - comportamento global */
@media (max-width: 768px) {
    .dropdown-menu {
        top: calc(100% + 6px); /* Menor espaçamento no mobile, mas SEMPRE para baixo */
        margin: 0;
        min-width: 200px; /* Ligeiramente menor no mobile */
        /* Manter posicionamento original (left: -15px) no mobile também */
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    .dropdown-menu.show {
        /* Dropdown aparece instantaneamente sem animação no mobile */
        display: block !important;
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    /* Classe especial para abrir à direita quando necessário */
    .dropdown-menu.dropdown-left {
        left: auto !important;
        right: 0 !important;
    }
}

@media (max-width: 480px) {
    .dropdown-menu {
        min-width: 180px;
        top: calc(100% + 4px); /* Espaçamento ainda menor em telas muito pequenas, mas SEMPRE abaixo */
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    .dropdown-menu.dropdown-left {
        left: auto !important;
        right: 0 !important;
    }
    
    .dropdown-menu.show {
        display: block !important;
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
}



.dropdown-item {
    display: block;
    width: 100%;
    padding: 12px 20px; /* Reduzido de 16px para 12px */
    font-size: 1rem;
    font-family: 'Inter', sans-serif; /* Fonte Inter */    color: #374151;
    cursor: pointer;
    /* transition: background-color 0.2s ease; - Removido para eliminar animações */
    text-decoration: none;
    border: none;
    background: none;
    text-align: left;
    font-weight: 500;
    border-bottom: 1px solid #9ca3af;
    user-select: none; /* Previne seleção de texto */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: #f8fafc;
    color: #1f2937;
}

/* Responsividade do dropdown */
@media (max-width: 768px) {
    .dropdown-menu {
        min-width: 220px; /* Aumentado de 200px para 220px */
        left: auto;
        right: 0; /* Alinha com a direita do ícone */
        max-height: none; /* Remover limite de altura para tablets */
        z-index: 9999 !important; /* Z-index muito alto para mobile para ficar acima de tudo */
        top: calc(100% + 8px); /* FORÇAR para baixo */
        bottom: auto; /* Garantir que não abra para cima */
        margin-bottom: 0;
        margin-top: 0;
    }
    
    .dropdown-item {
        padding: 13px 18px; /* Aumentado para dar mais espaço de toque */
        font-size: 0.925rem; /* Ligeiramente aumentado */
        line-height: 1.4; /* Melhora o espaçamento vertical */
    }
}

@media (max-width: 480px) {
    .dropdown-menu {
        min-width: 210px; /* Aumentado de 190px para 210px */
        left: auto;
        right: 0; /* Alinha com a direita do ícone */
        max-height: none; /* Remover limite de altura para mobile */
        z-index: 9999 !important; /* Z-index muito alto para mobile para ficar acima de tudo */
        top: calc(100% + 8px); /* FORÇAR para baixo */
        bottom: auto; /* Garantir que não abra para cima */
        margin-bottom: 0;
        margin-top: 0;
    }
      .dropdown-item {
        padding: 14px 16px; /* Aumentado para dar mais espaço de toque */
        font-size: 0.95rem; /* Aumentado para melhor legibilidade */
        line-height: 1.5; /* Melhora o espaçamento vertical */
    }
}

/* ==================== MENU DROPDOWN DO CARD ==================== */

.card-menu {
    position: relative;
}

.card-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 180px;
    padding: 8px 0;
    display: none;
    margin-top: 4px;
}

.card-dropdown.show {
    display: block;
}

.card-dropdown-item {
    display: block;
    width: 100%;
    padding: 14px 18px;
    color: #374151;
    text-decoration: none;
    font-size: 0.95rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.card-dropdown-item:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

.card-dropdown-item.danger:hover {
    background-color: #fef2f2;
    color: #dc2626;
}

/* Posicionamento dinâmico */
.card-dropdown.left {
    right: auto;
    left: 0;
}

/* Responsividade do Dropdown */
@media (max-width: 768px) {
    .card-dropdown {
        min-width: 140px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }
    
    .card-dropdown-item {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
}

/* ===== SEÇÃO INDEPENDENTE DE CARDS DE GRUPOS ===== */
/* Esta seção é completamente independente e otimizada para os cards */

/* Seção principal dos grupos - Independente e isolada */
.groups-section {
    width: 100%;
    position: relative;
    align-self: flex-start; /* Alinhar à esquerda no desktop */
    box-sizing: border-box;
    overflow: visible; /* Permitir que o dropdown apareça por cima */
    margin: 0;
    padding: 0;
    z-index: 10;
}

/* Container principal - Controla toda a área dos grupos */
.groups-container {
    width: 100%;
    max-width: none; /* Remover limitação de largura */
    margin: 0;
    padding: 0 0 30px 0;
    box-sizing: border-box;
    overflow: visible; /* Permitir overflow para o drag das categorias funcionar */
    /* Usar largura dinâmica baseada na viewport com estabilização */
    padding-left: 20px; /* Espaçamento do menu lateral */
    padding-right: 20px; /* Espaçamento da borda direita */
    /* Estabilizar posição durante scrolls */
    position: relative;
    left: 0;
    /* Evitar recálculos desnecessários */
    contain: layout;
}

/* Wrapper otimizado para desktop - Usa toda largura disponível */
.groups-grid-wrapper {
    width: 100%;
    max-width: none; /* Remover limitação */
    margin: 0;
    overflow: visible;
    /* Usar largura fixa para evitar recálculos durante scroll */
    min-width: 0; /* Permitir flexibilidade */
    /* Remover cálculo dinâmico que pode causar movimentação durante scroll */
    position: relative;
    /* Garantir que não há deslocamento horizontal */
    left: 0;
    right: 0;
}

/* Grid otimizado para usar espaço máximo disponível */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
}

/* Breakpoints otimizados para a nova estrutura independente */
@media (min-width: 1921px) {
    .groups-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 colunas em telas muito grandes */
        gap: 24px;
    }
}

@media (min-width: 1441px) and (max-width: 1920px) {
    .groups-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
    }
}

@media (min-width: 1201px) and (max-width: 1440px) {
    .groups-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (min-width: 993px) and (max-width: 1200px) {
    .groups-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .groups-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
    
    .groups-grid-wrapper {
        width: calc(100vw - 80px - 40px);
        max-width: calc(100vw - 80px - 40px);
    }
}

/* ===== FIM DA SEÇÃO INDEPENDENTE DE CARDS ===== */

/* Paginação */
.pagination-container {
    margin-top: 40px;
    width: 100%;
    max-width: none; /* Usar a mesma largura do grid */
    padding-left: 20px;
    box-sizing: border-box;
}

.pagination-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

@media (max-width: 768px) {
    .pagination-container {
        text-align: center;
        padding: 0 15px;
        max-width: 100%;
    }
}

/* INÍCIO DO SISTEMA DE CARDS DE GRUPOS - NOVO ESTILO */
/* Esses estilos substituem todos os anteriores relacionados a cards */

/* Link do card */
/* Container principal do card */
.card-grupo {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    width: 100%;
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
    overflow: visible; /* Mudança para visible para permitir dropdown e fita VIP */
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 100%;
    font-size: 0.9rem;
    position: relative; /* Necessário para z-index funcionar */
}

/* Container da imagem com posicionamento relativo para elementos sobrepostos */
.card-image-container {
    position: relative;
    width: 100%;
    height: 220px; /* Aumentar altura dos cards para melhor proporção */
    overflow: hidden; /* Voltar para hidden para manter a fita dentro do card */
    border-radius: 12px 12px 0 0; /* Border radius apenas na parte superior */
}

/* Wrapper da imagem */
.image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0; /* Border radius apenas na parte superior */
}

/* Imagem do card */
.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
}

/* Overlay gradiente para melhor visibilidade do texto */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
                rgba(0, 0, 0, 0.1) 0%, 
                rgba(0, 0, 0, 0.3) 50%, 
                rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
}

/* Título do grupo sobre a imagem */
.card-title-overlay {
    position: absolute;
    bottom: 15px; /* Aumentar espaçamento da borda */
    left: 15px; /* Aumentar espaçamento da borda */
    right: 15px; /* Aumentar espaçamento da borda */
    color: white;    font-size: 1.05rem; /* Aumentar ainda mais o tamanho da fonte */    font-weight: 800; /* ExtraBold - mais perceptível */
    font-family: 'Inter', sans-serif; /* Fonte Inter */
    margin: 0;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    display: -webkit-box;    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Contador de visualizações */
.views-counter {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.85);
    color: #333;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Views counter posicionado à direita */
.views-counter-right {
    left: auto;
    right: 10px;
}

.views-counter svg {
    width: 12px;
    height: 12px;
}

/* Badge VIP - Design de Fita Diagonal */
.badge-vip-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10002 !important; /* Z-index mais alto que o dropdown */
    width: 160px; /* Largura ajustada para comportar a fita */
    height: 60px; /* Altura ajustada para comportar a fita */
    overflow: visible; /* Mudado para visible para mostrar a fita completa */
}

/* Badge VIP posicionado à esquerda */
.badge-vip-left {
    left: 0;
    right: auto;
}

.badge-vip {
    /* Background azul moderno */
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
    color: #ffffff;
    
    /* Posicionamento diagonal ajustado para ficar dentro da imagem */
    position: absolute;
    top: 15px; /* Ajustado para ficar mais dentro */
    right: -10px; /* Reduzido para não sair do card */
    transform: rotate(45deg);
    transform-origin: center;
    
    /* Dimensões da fita otimizadas para mostrar texto completo */
    width: 135px; /* Largura ligeiramente reduzida */
    height: 32px; /* Altura ligeiramente reduzida */
    
    /* Tipografia ajustada para melhor visibilidade */
    font-size: 0.75rem; /* Ligeiramente menor */
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.8px; /* Ajustado para espaçamento adequado */
    font-family: 'Segoe UI Medium', 'Inter', -apple-system, sans-serif;
    
    /* Layout interno */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    
    /* Bordas */
    border-radius: 0;
    border: none;
    
    /* Sombra da fita */
    box-shadow: 
        0 2px 8px rgba(37, 99, 235, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.2);
    
    /* Transições suaves */
    transition: all 0.3s ease;
    
    /* Performance */
    will-change: transform;
    backface-visibility: hidden;
    
    /* Cursor e seleção */
    cursor: default;
    user-select: none;
    
    /* Garantir que mostra apenas PREMIUM */
    text-indent: 0;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Remover qualquer conteúdo automático */
.badge-vip::before {
    content: none;
}

/* Efeito de fita - extremidades cortadas */
.badge-vip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 8px solid #1e40af;
    z-index: -1;
}

/* Badge VIP posicionado à esquerda (diagonal inversa) */
.badge-vip-left .badge-vip {
    right: auto;
    left: -35px;
    transform: rotate(-45deg);
}

.badge-vip-left .badge-vip::after {
    left: 0;
    right: auto;
    border-top-color: #1e40af;
}

/* Efeito hover sutil no badge VIP */
.badge-vip:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
    box-shadow: 
        0 3px 12px rgba(37, 99, 235, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.25);
    transform: rotate(45deg) scale(1.05);
}

.badge-vip-left .badge-vip:hover {
    transform: rotate(-45deg) scale(1.05);
}

/* Responsividade para diferentes tamanhos de tela */

/* Desktop padrão - garantir consistência entre todas as páginas */
@media (min-width: 769px) {
    .badge-vip-corner {
        width: 160px; /* Padronização para desktop */
        height: 60px;
    }
    
    .badge-vip {
        width: 135px; /* Padronização da largura para desktop */
        height: 32px; /* Padronização da altura para desktop */
        font-size: 0.75rem; /* Padronização do tamanho da fonte */
        letter-spacing: 1.8px; /* Padronização do espaçamento */
        top: 15px; /* Padronização da posição vertical */
        right: -10px; /* Padronização da posição horizontal */
    }
    
    .badge-vip-left .badge-vip {
        left: -35px; /* Padronização para badge à esquerda */
    }
    
    .badge-vip::after {
        border-left-width: 15px;
        border-right-width: 15px;
        border-top-width: 8px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .badge-vip-corner {
        width: 180px; /* Aumentado para acomodar a fita que atravessa */
        height: 60px;  /* Mantido a altura */
    }
    
    .badge-vip {
        width: 155px;  /* Largura ligeiramente reduzida para mobile */
        height: 32px;  /* Altura ligeiramente reduzida para mobile */
        font-size: 0.7rem; /* Ligeiramente menor para mobile */
        letter-spacing: 1.5px; /* Ajustado para mobile */
        top: 22px;      /* Mantido a posição vertical */
        right: -40px;   /* Ajustado para que a fita atravesse completamente */
    }
    
    .badge-vip-left .badge-vip {
        left: -40px;   /* Ajustado proporcionalmente ao right para atravessar */
    }
    
    .badge-vip::after {
        border-left-width: 15px;  /* Mantido igual ao desktop */
        border-right-width: 15px; /* Mantido igual ao desktop */
        border-top-width: 8px;    /* Mantido igual ao desktop */
    }
}

/* Conteúdo abaixo da imagem */
.card-content {
    padding: 15px; /* Aumentar ainda mais o padding */
    display: flex;
    flex-direction: column;
    overflow: visible; /* Permitir que dropdown apareça fora do conteúdo */
}

/* Footer com botão e ferramentas */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px; /* Aumentado de 10px para 14px - empurra o botão mais para direita */
    position: relative; /* Para permitir posicionamento absoluto do dropdown */
    overflow: visible; /* Permitir que dropdown apareça fora do footer */
}

/* Ícone de ferramentas */
.tools-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Aumentado de 36px para 40px */
    height: 40px; /* Aumentado de 36px para 40px */
    color: #666;
    border-radius: 50%;
    transition: all 0.2s ease;
    user-select: none; /* Prevenir seleção de texto */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-tap-highlight-color: transparent; /* Remover highlight no toque */
}

.tools-icon:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}

/* Botão de entrar no grupo */
.btn-enter {
    flex: 1;
    background-color: white;    color: #1B8C57;    font-size: 0.95rem; /* Aumentado para melhor legibilidade */
    font-weight: 800; /* ExtraBold - mais perceptível */
    font-family: 'Inter', sans-serif; /* Fonte Inter */
    padding: 12px 14px; /* Aumentar padding para mais altura */
    border-radius: 6px; /* Bordas mais arredondadas */
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;    border: 1.7px solid #1B8C57; /* Borda um pouco menos espessa */
    height: 42px; /* Altura reduzida para 42px */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(27, 140, 87, 0.1); /* Sombra sutil */
}

.btn-enter:hover {
    background-color: #1B8C57;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(27, 140, 87, 0.2);
}

/* Botão Ver Todos os Grupos */
.view-all-button-container {
    margin: 30px 0;
    width: 100%;
    position: relative;
    z-index: 1; /* Z-index baixo para não interferir com dropdowns */
}

.btn-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    background-color: #F1F5F9;
    color: #000;
    font-size: 1rem;
    font-weight: 600; /* Aumentado para 600 para ser mais perceptível */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Aplicar combinação de fontes */
    text-decoration: none;
    border: 1px solid #F1F5F9; /* Borda da mesma cor do fundo para ficar quase imperceptível */
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    z-index: 1; /* Z-index baixo para não interferir com dropdowns */
}

.btn-view-all:hover {
    background-color: #E2E8F0;
    color: #000;
    text-decoration: none;
    border-color: #E2E8F0; /* Manter a borda da mesma cor do fundo no hover */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Sombra mais sutil */
}

.btn-view-all:active {
    background-color: #E5E7EB;
    color: #000000;
    transform: translateY(0);
    border-color: #E5E7EB; /* Manter a borda da mesma cor do fundo no estado ativo */
    box-shadow: none; /* Remover a sombra no estado ativo */
}

.btn-view-all i {
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.btn-view-all:hover i {
    transform: translateX(2px);
}

/* FIM DO SISTEMA DE CARDS DE GRUPOS */

/* ==================== SEÇÃO DE INSTRUÇÕES DO WHATSAPP ==================== */

.whatsapp-guide {
    margin: 0 0 40px 40px; /* Aumentado para 40px para mover para a direita */
    padding: 24px 0;
    max-width: 800px;
    background: transparent;
    position: relative;
    z-index: 1;
}

.guide-title {
    display: flex;
    align-items: center;
    gap: 14px; /* Aumentar o gap um pouco */
    font-size: 1.4rem; /* Aumentado de 1.25rem para 1.4rem */
    color: #1f2937;
    margin-bottom: 16px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.guide-icon {
    width: 24px; /* Aumentado de 20px para 24px */
    height: 24px; /* Aumentado de 20px para 24px */
    color: #000000;
}

.guide-content {
    color: #374151;
    line-height: 1.7;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Inter', sans-serif;
    font-size: 0.95rem;
}

.guide-content p {
    margin-bottom: 12px;
}

.guide-content p:last-child {
    margin-bottom: 0;
}

.guide-content h4 {
    margin: 20px 0 12px 0;
    color: #1f2937;
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 600;
}

/* Links dentro do conteúdo das instruções */
.guide-content a {
    color: #25D366;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.guide-content a:hover {
    color: #128C7E;
    border-bottom-color: #128C7E;
}

/* Responsividade das Instruções */
@media (max-width: 768px) {
    .whatsapp-guide {
        margin-bottom: 24px;
        margin-left: 0;
        padding: 20px 16px;
    }
      .guide-title {
        font-size: 1.2rem; /* Aumentado de 1.1rem para 1.2rem */
        gap: 12px; /* Aumentar o gap um pouco */
    }
    
    .guide-icon {
        width: 20px; /* Aumentado de 18px para 20px */
        height: 20px; /* Aumentado de 18px para 20px */
    }
    
    .guide-content {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .whatsapp-guide {
        padding: 16px 12px;
        margin-bottom: 20px;
        margin-left: 0;
    }
      .guide-title {
        font-size: 1.1rem; /* Aumentado de 1rem para 1.1rem */
    }
}

/* ===== RESPONSIVIDADE MOBILE ===== */
@media (max-width: 768px) {
    .content-area {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
        align-items: center; /* Centralizar no mobile */
    }
      .groups-section {
        margin-bottom: 80px; /* Espaço para o menu inferior */
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        align-self: stretch; /* Ocupar toda largura no mobile */
        position: relative;
        z-index: 10; /* Z-index controlado para não interferir com dropdowns */
    }
    
    .groups-container {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto; /* Centralizar no mobile */
        padding: 0 15px 30px 15px; /* Padding igual dos dois lados */
    }
      .groups-grid-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0; /* Remover padding, já está no container */
        box-sizing: border-box;
        overflow: visible; /* Permitir que dropdowns apareçam fora do wrapper */
        margin: 0;
    }
      .groups-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)); /* 1 coluna no mobile */
        gap: 15px;
        max-width: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: visible; /* Permitir que dropdowns apareçam fora do grid */
    }.categories-header {
        padding-left: 20px; /* Alinhado com hero-content mobile */
        padding-right: 0;
    }    /* Título e ícone no mobile */    .categories-title {
        font-weight: 900 !important; /* Peso máximo para garantir negrito */
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; /* Mesma combinação de fontes do título principal */
        font-size: 1.4rem; /* Tamanho ajustado para mobile */
    }
    
    /* Regra específica para mobile */
    .categories-header .categories-title {
        font-weight: 900 !important;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; /* Mesma combinação de fontes do título principal */
    }    .categories-icon {
        width: 36px; /* Diminuído um pouco para mobile */
        height: 36px;
    }.categories-scroll {
        padding-left: 15px; /* Adicionar padding para mover botões mais à direita no mobile */
        max-width: calc(100% - 15px); /* Ajustar largura */
        touch-action: pan-x; /* Melhorar touch no mobile */
        position: relative;
        z-index: 50; /* Garantir que esteja acima de outros elementos */
        -webkit-overflow-scrolling: touch; /* Scroll suave em iOS */
        will-change: transform; /* Otimizar performance */
    }
    
    .categories-track {
        gap: 10px; /* Espaçamento menor no mobile */
        will-change: transform; /* Otimizar performance de animação */
        -webkit-transform: translateZ(0); /* Forçar hardware acceleration */
        transform: translateZ(0);
    }.category-btn {
        padding: 9px 20px; /* Diminuído a altura (padding vertical) para mobile */
        font-size: 0.95rem; /* Mantido o tamanho da fonte */    }    /* Cards menores no mobile */
    .card-image-container {
        height: 200px; /* Aumentar altura no mobile também para manter proporção */
    }
    
    /* Garantir prioridade z-index dos cards no mobile para dropdown funcionar */
    .card-grupo {
        z-index: 100;
        position: relative;
    }
    
    /* Especificamente para o último card (que pode ter problema com o botão "Ver todos") */
    .card-grupo:last-child {
        z-index: 150 !important;
    }
}

/* Espaçamento extra para páginas sem hero section */
.groups-section:first-child .categories-header {
    padding-top: 60px; /* Aumentado de 40px para 60px */
}

@media (max-width: 768px) {    .groups-section:first-child .categories-header {
        padding-top: 80px; /* Aumentado de 50px para 80px no mobile */
    }
}

/* ==================== SEÇÃO DO BLOG ==================== */

.blog-section {
    background: #ffffff;
    padding: 60px 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Alinhamento específico para a seção do blog */
.blog-section .groups-grid-wrapper {
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.blog-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.blog-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.blog-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.blog-card-excerpt {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;    overflow: hidden;
}

/* Botão Ver Todos os Posts - largura limitada e espaçamento */
.blog-section .view-all-button-container {
    max-width: 600px;
    margin: 40px auto 0;
}

.blog-section .btn-view-all {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsividade do Blog */
@media (max-width: 768px) {
    .blog-section {
        padding: 40px 0;
    }
    
    /* Sobrescrito pelo CSS adicionado acima */
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .blog-card {
        padding: 20px;
    }
    
    .blog-card-title {
        font-size: 1.1rem;
    }
      .blog-card-excerpt {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .blog-grid {
        padding: 0 8px;
    }
    
    .blog-card {
        padding: 16px;
    }
      .blog-card-title {
        font-size: 1rem;
    }
}

/* ==================== SEÇÃO DE INSTRUÇÕES DO WHATSAPP ==================== */

.whatsapp-instructions {
    background: #ffffff;
    padding: 60px 0;
}

.instructions-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.instruction-item {
    margin-bottom: 40px;
}

.instruction-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.instruction-title i {
    color: #000000;
    font-size: 1.2rem;
}

.instruction-content {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.7;
}

.instruction-content p {
    margin-bottom: 12px;
}

.instruction-content p:last-child {
    margin-bottom: 0;
}

/* Responsividade das Instruções */
@media (max-width: 768px) {
    .whatsapp-instructions {
        padding: 40px 0;
    }
    
    .instructions-container {
        padding: 0 16px;
    }
    
    .instruction-title {
        font-size: 1.3rem;
    }
    
    .instruction-content {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .instructions-container {
        padding: 0 12px;
    }
    
    .instruction-title {
        font-size: 1.2rem;
        gap: 8px;
    }
    
    .instruction-title i {
        font-size: 1rem;
    }
}

/* Ajuste para alinhar o card de blog com a seção de instruções no mobile */
@media (max-width: 768px) {
    .blog-section .categories-header {
        padding-left: 0; /* Reset - o padding será controlado pelo container principal */
    }
}

@media (max-width: 480px) {
    .blog-section .categories-header {
        padding-left: 0; /* Reset - o padding será controlado pelo container principal */
    }
    
    .blog-grid {
        padding: 0; /* Reset - o padding será controlado pelo container principal */
    }
}

/* Ajuste para o botão "Ver todos os posts" no mobile */
@media (max-width: 768px) {
    .blog-section .view-all-button-container {
        padding: 0; /* Reset - o padding será controlado pelo container principal */
        max-width: 100%;
        margin-top: 30px;
    }
    
    .blog-section .btn-view-all {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .blog-section .view-all-button-container {
        padding: 0; /* Reset - o padding será controlado pelo container principal */
    }
}

/* ==================== SEÇÃO DE CTA (CALL TO ACTION) ==================== */

.cta-section {
    background: #ffffff; /* Mudar para fundo branco */
    padding: 100px 0; /* Aumentado de 80px para 100px para dar mais espaço */
    text-align: left; /* Alinhar à esquerda */
    width: 100%;
    transition: all 0.3s ease; /* Transição suave para interações */
}

/* Desativar TODOS os efeitos de hover/active/pressed em mobile para a seção CTA */
@media (max-width: 768px) {
    .cta-section:hover,
    .cta-section:active,
    .cta-section:focus,
    .cta-section:focus-within {
        background: #ffffff !important; /* Forçar background branco sempre em mobile */
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* Desativar também o efeito pressed/touch para dispositivos touch */
    .cta-section {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
}

/* Desativado efeito hover para mobile - manter background branco sempre */
@media (max-width: 768px) {
    .cta-section:hover {
        background: #fafafa; /* Fundo ligeiramente mais escuro no hover apenas para desktop */
        /* Removido transform e box-shadow */
    }
}

.cta-section.btn-add-group {
    cursor: default; /* Cursor normal para a seção */
}

/* Desativar hover quando modal estiver aberto */
.modal-open .cta-section:hover {
    background: #ffffff; /* Manter fundo normal quando modal aberto */
    /* Removido transform e box-shadow */
}

.cta-content {
    max-width: 1200px; /* Mesma largura máxima da seção de blog */
    margin: 0 auto; /* Centralizar o container como na seção de blog */
    padding: 0 20px; /* Mesmo padding da seção de blog */
    text-align: left; /* Manter alinhamento à esquerda dentro do container centralizado */
}

.cta-title-main {
    font-size: 1.4rem;
    font-weight: 600; /* Aumentado um pouco para ficar mais negrito */
    font-family: Arial, sans-serif;
    color: #1f2937;
    margin-bottom: 20px; /* Aumentado de 16px para 20px */
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Tudo em maiúscula */
}

.cta-title-sub {
    font-size: 2.2rem;
    font-weight: 900;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; /* Mesma fonte do título principal */
    color: #1f2937;
    margin-bottom: 25px; /* Aumentado de 20px para 25px */
    line-height: 1.3;
    max-width: 550px; /* Limitar largura para forçar 3 linhas exatas */
    letter-spacing: -0.5px; /* Mesmo letter spacing do título principal */
}

.cta-description {
    font-size: 1.1rem;
    font-weight: 400; /* Inter Regular (400) */
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; /* Fonte Inter */
    color: #4b5563; /* Cor um pouco mais preta */
    margin-bottom: 35px; /* Aumentado de 30px para 35px */
    line-height: 1.5;
    letter-spacing: 0.3px; /* Pequeno espaçamento entre letras */
}

.cta-button-container {
    display: flex;
    justify-content: flex-start; /* Alinhar à esquerda */
    margin-top: 30px;
}

.btn-cta {
    background-color: #059669; /* Mesmo background do botão do hero */
    color: white;
    padding: 8px 28px; /* Voltar à altura baixa conforme especificado */
    font-size: 1rem; /* Aumentado de 0.95rem para 1rem */
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    box-shadow: none;
    cursor: pointer; /* Cursor pointer apenas no botão */
}

.btn-cta:hover {
    background-color: #047857; /* Hover similar ao botão do hero */
    text-decoration: none;
    color: white;
    transform: none;
    box-shadow: none;
}

.btn-cta i {
    font-size: 0.9rem;
}

/* Responsividade da seção CTA */
@media (max-width: 768px) {
    .cta-section {
        padding: 80px 0; /* Aumentado de 60px para 80px para manter proporção */
    }
    
    .cta-section .groups-container {
        max-width: 1200px; /* Mesma largura da seção de instruções */
        margin: 0 auto;
        padding: 0 16px; /* Mesmo padding da seção de instruções */
    }
    
    .cta-content {
        padding-left: 0; /* Reset, o padding agora é do container */
        padding-right: 0; /* Reset, o padding agora é do container */
        max-width: 100%; /* Usar toda a largura disponível */
    }
    
    .cta-title-main {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
      .cta-title-sub {
        font-size: 1.8rem;
        margin-bottom: 18px;
        max-width: 100%; /* Ajustar para mobile */
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; /* Mesma fonte do título principal */
        letter-spacing: -0.5px; /* Mesmo letter spacing do título principal */
    }
      .cta-description {
        font-size: 1rem;
        margin-bottom: 25px;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; /* Fonte Inter */
        font-weight: 400; /* Inter Regular */
    }
    
    .btn-cta {
        padding: 8px 20px; /* Manter altura baixa no mobile também */
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .cta-section .groups-container {
        padding: 0 12px; /* Mesmo padding da seção de instruções em telas pequenas */
    }
    
    .cta-content {
        padding-left: 0; /* Reset, o padding agora é do container */
        padding-right: 0; /* Reset, o padding agora é do container */
    }
    
    .cta-title-main {
        font-size: 1.1rem;
    }
      .cta-title-sub {
        font-size: 1.6rem;
        line-height: 1.4;
        max-width: 100%; /* Ajustar para mobile pequeno */
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; /* Mesma fonte do título principal */
        letter-spacing: -0.5px; /* Mesmo letter spacing do título principal */
    }
      .cta-description {
        font-size: 0.95rem;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; /* Fonte Inter */
        font-weight: 400; /* Inter Regular */
    }
    
    .btn-cta {
        padding: 9px 20px;
        font-size: 0.95rem;
    }
}

/* Ajustar o container da seção de blog para seguir o padrão da seção de instruções */
@media (max-width: 768px) {
    .blog-section .groups-container {
        padding: 0 16px; /* Mesmo padding da instructions-container */
        max-width: none; /* Remover limitação de largura */
    }
    
    .blog-section .groups-grid-wrapper {
        padding: 0; /* Reset padding já que o container principal já tem */
        margin: 0;
        width: 100%;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0; /* Reset padding já que o container principal já tem */
        margin: 0;
    }
}

/* Ajustes para mobile - reduzir efeitos de hover */
@media (max-width: 768px) {
    .cta-section:hover {
        /* Removido transform e box-shadow para mobile */
        background: #fafafa; /* Manter apenas mudança de cor */
    }
}

/* Garantir que não há seleção de texto durante drag */
.categories-scroll.dragging,
.categories-scroll.dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Garantir que os botões sejam completamente arrastáveis */
.category-btn * {
    pointer-events: none; /* Fazer com que cliques passem pelo texto para o botão */
}

.category-btn {
    pointer-events: auto; /* Mas o botão em si deve responder a eventos */
}

/* ===== ESTILOS PARA SEÇÃO PRINCIPAL (GRUPOS + CATEGORIAS) ===== */

/* Cabeçalho das categorias dentro da seção de grupos */
.categories-header {
    margin-bottom: 20px;
    text-align: left; /* Alinhado à esquerda no desktop */
    padding-left: 20px; /* Pequeno espaçamento do menu lateral no desktop */
}

/* Título das categorias - Desktop */
.categories-title {
    font-size: 1.6rem;
    font-weight: 900; /* Peso máximo para negrito forte */
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Inter como fonte principal */
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    text-align: left;
}

/* Ícone ao lado do título das categorias */
.categories-icon {
    width: 38px; /* Tamanho adequado para desktop */
    height: 38px; /* Tamanho adequado para desktop */
    margin-right: 12px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    filter: brightness(0) saturate(100%);
}
/* ==================== CSS ANTIGO DE NOTIFICAÇÕES REMOVIDO ==================== */
/* REMOVIDO: CSS duplicado de notificações que conflita com notifications.css */
/* O sistema global de notificações em notifications.css é usado agora */

/* Mobile - Garantir que botão "Ver todos" não interfira com dropdowns */
@media (max-width: 768px) {
    .view-all-button-container {
        z-index: 1 !important; /* Z-index muito baixo no mobile */
        position: relative;
    }
    
    .btn-view-all {
        z-index: 1 !important; /* Z-index muito baixo no mobile */
        position: relative;
    }
}

/* Mobile - Garantir prioridade absoluta dos dropdowns dos cards */
@media (max-width: 768px) {
    /* Garantir que cards de grupo tenham prioridade sobre tudo */
    .groups-grid .card-grupo {
        z-index: 500 !important;
        position: relative;
    }
    
    /* Quando um dropdown está aberto, o card pai deve ter z-index mais alto */
    .groups-grid .card-grupo:has(.dropdown-menu.show) {
        z-index: 10000 !important;
    }
    
    /* Fallback para navegadores que não suportam :has() */
    .groups-grid .card-grupo.dropdown-active {
        z-index: 10000 !important;
    }
    
    /* Tools icon no mobile com z-index alto */
    .card-grupo .tools-icon {
        z-index: 9998 !important;
        position: relative;
    }
    
    /* Dropdown no mobile com z-index máximo */
    .card-grupo .dropdown-menu {
        z-index: 10001 !important;
        position: absolute;
    }
    
    /* Garantir que elementos de fundo não interfiram */
    .groups-container,
    .groups-grid-wrapper,
    .content-area {
        z-index: auto;
        position: relative;
    }
}    
    /* Garantir que o badge VIP permaneça visível quando dropdown está ativo */
    .card-grupo.dropdown-active .badge-vip-corner,
    .card-grupo:has(.dropdown-menu.show) .badge-vip-corner {
        z-index: 10002 !important;
    }

/* Prevenir seleção em todos os elementos do dropdown */
.tools-icon *,
.dropdown-menu,
.dropdown-menu *,
.dropdown-item {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* ==================== CORREÇÃO DEFINITIVA PARA TÍTULOS DUPLICADOS ==================== */

/* Garantir que os elementos hero sempre mantenham a visibilidade correta */
.hero-title {
    position: relative;
}

/* Por padrão no desktop: mostrar apenas .hero-desktop */
.hero-desktop {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-mobile {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* No mobile: mostrar apenas .hero-mobile */
@media (max-width: 768px) {
    .hero-desktop {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    .hero-mobile {
        display: flex !important;
        flex-direction: column !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .hero-line-1,
    .hero-line-2,
    .hero-line-3 {
        display: block !important;
    }
}

/* Prevenir animações/transições que podem causar "piscadas" */
.hero-desktop,
.hero-mobile,
.hero-line-1,
.hero-line-2,
.hero-line-3 {
    transition: none !important;
    animation: none !important;
}

/* ==================== CORREÇÃO ESPECÍFICA PARA PRESERVAR LAYOUT ==================== */

/* Garantir que as propriedades de layout do categories-title sejam preservadas */
.categories-title {
    display: flex !important;
    align-items: center !important;
}

.categories-icon {
    display: block !important;
}

/* Em dispositivos mobile, também preservar o layout */
@media (max-width: 768px) {
    .categories-title {
        display: flex !important;
        align-items: center !important;
    }
    
    .categories-icon {
        display: block !important;
    }
}

/* Garantir que não há interferências globais nos dropdowns */
.dropdown-menu, 
.dropdown-menu *, 
.tools-icon,
.tools-icon *,
.card-grupo .tools-icon,
.card-grupo .dropdown-menu {
    transition: none !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    perspective: none !important;
}

/* Garantir que cards não tenham animações que podem interferir com dropdowns */
.card-grupo {
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    transform: none !important;
}

/* Evitar problemas com z-index e positioning */
.card-grupo.dropdown-active {
    z-index: 10000 !important;
    position: relative !important;
}

/* ==================== CORREÇÃO ESPECÍFICA PARA BADGES VIP NO MOBILE ==================== */

/* Garantir consistência absoluta dos badges VIP em todas as páginas no mobile */
@media (max-width: 768px) {
    /* Especificidade alta para garantir que seja aplicado */
    .main-layout .card-grupo .badge-vip-corner {
        width: 180px !important;
        height: 60px !important;
    }
    
    .main-layout .card-grupo .badge-vip {
        width: 155px !important;
        height: 32px !important;
        font-size: 0.7rem !important;
        letter-spacing: 1.5px !important;
        top: 22px !important;
        right: -40px !important;
    }
    
    .main-layout .card-grupo .badge-vip-left .badge-vip {
        left: -40px !important;
        right: auto !important;
    }
    
    .main-layout .card-grupo .badge-vip::after {
        border-left-width: 15px !important;
        border-right-width: 15px !important;
        border-top-width: 8px !important;
    }
}

/* ==================== CORREÇÃO DOS ÍCONES FONT AWESOME NO MOBILE ==================== */

/* Garantir que ícones Font Awesome apareçam corretamente em todos os dispositivos */
.btn-view-all i,
.btn-cta i,
.fas,
.fa,
[class^="fa-"],
[class*=" fa-"] {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Regras específicas para ícones de redes sociais (Font Awesome Brands) */
.social-icon i,
.fab,
.fa-instagram,
.fa-facebook-f {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Específico para mobile - garantir visibilidade dos ícones */
@media (max-width: 768px) {
    .btn-view-all i,
    .btn-cta i {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 0.9rem !important;
        margin-left: 8px !important;
        vertical-align: middle !important;
    }
    
    /* Garantir que ícones de redes sociais apareçam no mobile */
    .social-icon i,
    .social-icons .fab {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 1.1rem !important;
        font-family: "Font Awesome 5 Brands" !important;
        font-weight: 400 !important;
    }
    
    /* Conteúdo específico dos ícones sociais */
    .fa-instagram:before {
        content: "\f16d" !important;
    }
    
    .fa-facebook-f:before {
        content: "\f39e" !important;
    }
    
    /* Garantir que o ícone da seta apareça */
    .fa-arrow-right:before {
        content: "\f061" !important;
        display: inline-block !important;
    }
    
    /* Prevenir que outros estilos ocultem os ícones */
    .btn-view-all i,
    .btn-cta i,
    .btn-view-all .fas,
    .btn-cta .fas,
    .social-icon i,
    .social-icons .fab {
        transform: none !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        clip: none !important;
        clip-path: none !important;
    }
}