/* ATUALIZAÇÃO GLOBAL: Ativa a rolagem suave em toda a página */
    html {
        scroll-behavior: smooth;
    }

    /* 1. VARIÁVEIS E CONFIGURAÇÕES GERAIS */
    :root {
        --cp-blue: #001f38;        /* Azul Escuro Principal (CDP-900) */
        --cp-blue-hover: #002d54;  
        --cp-blue-700: #00355e;    /* Azul CDP-700 oficial */
        --cp-blue-400: #336c9d;    /* Azul CDP-400 oficial */
        --cp-blue-50: #e6edf3;     /* NOVA VARIÁVEL: Azul CDP-50 oficial */
        --cp-ocre-600: #c69214;    /* Amarelo Ocre CDP-600 oficial */
        --cp-ocre-hover: #a5750f;  /* Variação ocre escuro para hover */
        --cp-ocre-50: #fdf8eb;     /* Fundo ocre cdp-50 suave para a faixa */
        --cp-green: #25D366;       /* Verde oficial do WhatsApp */
        --cp-green-hover: #1ebd54;
        --text-main: #2b2b2b;
        --text-muted: #62727d;     
        --border-ui: #e0e0e0;
        --bg-panel-blue: #e6edf3;  
        --white: #ffffff;
        --radius: 8px;
    }

    .cp-comunidade-page {
        width: 100%;
        font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
        color: var(--text-main);
        margin: 40px 0;
        overflow-x: hidden; 
    }

    .cp-content-centered {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .cp-hero-banner-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
    display: block !important;
    overflow: hidden !important;
    }

    .cp-hero-banner-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    }

    /* Banners Rápidos de Direcionamento (Topo) */
    .cp-nav-banners-section {
        text-align: center;
        margin-bottom: 50px;
    }

    .cp-nav-banners-section h3 {
        font-size: 1.65rem;
        font-weight: 700;
        color: var(--cp-blue);
        margin-bottom: 25px;
        letter-spacing: -0.5px;
    }

    .cp-nav-banners-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .cp-nav-banner-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 25px 30px;
        border-radius: 8px;
        text-decoration: none;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 4px 12px rgba(0,0,0,0.02);
        color: var(--white); 
    }

    .cp-nav-banner-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    }

    .cp-banner-loja {
        background-color: var(--cp-blue-700);
    }

    .cp-banner-segmento {
        background-color: var(--cp-ocre-600);
    }

    .cp-banner-left {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .cp-banner-icon {
		color: var(--white) !important;
		font-size: 2.8rem !important;
		font-family: "Font Awesome 6 Free" !important;
		font-weight: 900 !important;
		display: inline-block !important;
}

    .cp-banner-text h4 {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0 0 4px 0;
        color: var(--white);
    }

    .cp-banner-text p {
        font-size: 0.85rem;
        font-weight: 500;
        margin: 0;
        color: rgba(255, 255, 255, 0.9);
    }

    .cp-banner-arrow {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background-color: var(--white);
    }

    .cp-banner-arrow i {
		font-family: "Font Awesome 6 Free" !important;
		font-weight: 900 !important;
		font-size: 0.9rem !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

    .cp-banner-loja .cp-banner-arrow i {
		color: var(--cp-blue-700) !important;
	}
	
	.cp-banner-segmento .cp-banner-arrow i {
    	color: var(--cp-ocre-600) !important;
	}

/* ==========================================================================
   CORREÇÃO CIRÚRGICA: SEÇÃO BENEFÍCIOS (FA-STACK CORRETO)
   ========================================================================== */

/* 1. Força a cor azul nos ícones normais da seção */
.cp-comunidade-page .cp-benefit-item .cp-benefit-icon i:not(.fa-stack-1x):not(.fa-stack-2x),
.cp-comunidade-page .cp-benefit-item .cp-benefit-icon i:not(.fa-stack-1x):not(.fa-stack-2x)::before {
    color: var(--cp-blue) !important;
    font-size: 2.2rem !important;
}

/* 2. Restaura o container do empilhamento para o padrão do Font Awesome */
.cp-comunidade-page .cp-benefit-icon .fa-stack {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 2.5em !important;
    height: 2em !important;
    line-height: 2em !important;
}

/* 3. Força a cor do selo de fundo (Círculo/Certificado) */
.cp-comunidade-page .cp-benefit-icon .fa-stack-2x {
    color: var(--cp-blue) !important;
}

/* 4. O SEGREDO: Faz o ::before herdar o tamanho proporcional da tag <i> correspondente */
.cp-comunidade-page .cp-benefit-icon .fa-stack i::before {
    font-size: inherit !important; /* Faz o % usar 0.52em e o selo usar 2em */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* 5. Garante que o ícone interno da porcentagem (%) fique totalmente branco */
.cp-comunidade-page .cp-benefit-icon .fa-stack .fa-inverse,
.cp-comunidade-page .cp-benefit-icon .fa-stack .fa-inverse::before {
    color: var(--white) !important;
}

/* ==========================================================================
   CORREÇÃO CIRÚRGICA: TAMANHO DOS ÍCONES DOS TÍTULOS DE SEÇÃO
   ========================================================================== */

/* 1. Força o tamanho e a cor correta no ícone do título "Escolha sua loja" */
.cp-comunidade-page .cp-header-container .cp-header-icon i,
.cp-comunidade-page .cp-header-container .cp-header-icon i::before {
    font-size: 2.2rem !important;
    color: var(--cp-blue) !important;
}

/* 2. Força o tamanho e a cor correta no ícone do título "Ofertas por segmento" */
.cp-comunidade-page .cp-segments-header .cp-segments-icon i,
.cp-comunidade-page .cp-segments-header .cp-segments-icon i::before {
    font-size: 2.2rem !important;
    color: var(--cp-ocre-600) !important;
}

/* ==========================================================================
   CORREÇÃO DEFINITIVA: CAMPOS DE SELEÇÃO (SEM BUG DE POPUP CUTOFF)
   Observação: existia anteriormente um segundo bloco duplicado, mais abaixo
   no arquivo, que sobrescrevia estes valores (inclusive reintroduzindo
   line-height fixo, que é exatamente o que causava o corte do popup).
   Esse bloco duplicado foi removido e este aqui passa a ser a única
   fonte de verdade para .cp-select-custom.
   ========================================================================== */

/* Ajusta a altura e centralização sem quebrar a caixa de opções nativa do navegador */
.cp-comunidade-page .cp-select-custom {
    height: 40px !important;
    padding: 0 30px 0 12px !important;
    font-size: 0.9rem !important;
    box-sizing: border-box !important;
    line-height: normal !important; /* Remove o line-height fixo que gerava o corte */
}

/* Garante que o texto de todas as opções carregadas fique visível e com a cor correta */
.cp-comunidade-page .cp-select-custom option {
    color: #2b2b2b !important;
    background-color: #ffffff !important;
}

/* Mantém o distanciamento perfeito e seguro entre os blocos */
.cp-comunidade-page .cp-column-selectors {
    gap: 15px !important;
}

/* ==========================================================================
   CORREÇÃO CIRÚRGICA: ALINHAMENTO DA SEÇÃO ESCOLHA SUA LOJA (PRODUÇÃO)
   ========================================================================== */

/* 1. CORREÇÃO DA FAIXA AZUL: Desativa a "tesoura" das divs pais da plataforma para liberar as bordas */

.cp-comunidade-page {
    overflow: visible !important;
    overflow-x: visible !important;
}

#middle,
#content,
#content-wrapper,
.wrapper,
.column-1.comunidades {
    overflow: visible !important;
}

/* 3. Evita que apareça uma barra de rolagem horizontal fantasma no navegador */
body {
    overflow-x: hidden !important;
}

/* Alivia o aperto das caixas brancas (Outputs) diminuindo o padding interno */
.cp-comunidade-page .cp-column-output {
    width: 100% !important;
    max-width: 245px !important;
    padding: 15px 10px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   CORREÇÃO: as regras abaixo são específicas de DESKTOP e usam !important.
   Antes elas não estavam dentro de nenhuma media query, então venciam por
   especificidade + !important até mesmo as regras de mobile (@media max-width:
   992px) definidas mais abaixo no arquivo — fazendo o painel de 3 colunas e a
   faixa azul em "sangria" (100vw) tentarem renderizar em telas pequenas,
   causando a sobreposição/corte visto no mobile (print 1). Isolando-as em
   min-width: 993px, elas passam a atuar somente no desktop, sem conflitar
   com o empilhamento em 1 coluna do mobile (print 2).
   ========================================================================== */
@media (min-width: 993px) {
    /* Garante que a faixa azul ignore o limite do bloco e sangre de ponta a ponta */
    .cp-comunidade-page .cp-panel-container::before {
        width: 100vw !important;
        max-width: none !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* CORREÇÃO DO BOTÃO: Proíbe a quebra de linha e reajusta as proporções das colunas */
    .cp-comunidade-page .cp-btn-action {
        white-space: nowrap !important; /* Impede terminantemente o texto de quebrar em 2 linhas */
        width: 100% !important;
        max-width: 220px !important; /* Dá o espaço exato para a frase respirar em uma linha só */
        padding: 11px 15px !important;
        font-size: 0.9rem !important;
    }

    /* Otimiza a distribuição do Grid para que as caixas brancas tenham mais espaço na plataforma */
    .cp-comunidade-page .cp-panel-container {
        grid-template-columns: 1.1fr 1fr 1fr !important;
        gap: 20px !important;
    }
}
    
    /* Sobrescreve a classe .condicoes-gerais da plataforma injetando a cor correta no :before */
    .cp-comunidade-page .cp-nav-banner-card .cp-banner-icon i::before,
    .cp-comunidade-page .cp-nav-banner-card .cp-banner-icon i {
        color: var(--white) !important;
        font-size: 2.8rem !important;
    }
    /* Força a renderização correta da seta (chevron) direto no :before contra o estilo do tema */
    .cp-comunidade-page .cp-nav-banner-card .cp-banner-arrow i::before,
    .cp-comunidade-page .cp-nav-banner-card .cp-banner-arrow i {
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 0.9rem !important;
    }

    /* Garante que o antes da seta use as cores certas da sua Landing Page */
    .cp-comunidade-page .cp-banner-loja .cp-banner-arrow i::before {
        color: var(--cp-blue-700) !important;
    }

    .cp-comunidade-page .cp-banner-segmento .cp-banner-arrow i::before {
        color: var(--cp-ocre-600) !important;
    }

    /* Compensação de Rolagem das Âncoras */
    #cp-section-lojas, #cp-section-segmentos {
        scroll-margin-top: 40px;
    }

    /* 2. SEÇÃO BENEFÍCIOS */
    .cp-benefits-section {
        text-align: center;
        margin-bottom: 50px;
        padding-bottom: 25px;
        border-bottom: 1px solid #eef2f5;
    }

    .cp-benefits-section h3 {
        font-size: 1.65rem;
        font-weight: 700;
        color: var(--cp-blue);
        margin-bottom: 35px;
        letter-spacing: -0.5px;
    }

    .cp-benefits-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: start;
        gap: 10px;
    }

    .cp-benefit-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5px 15px;
        border-right: 1px solid var(--border-ui);
    }

    .cp-benefit-item:last-child {
        border-right: none;
    }

    .cp-benefit-icon {
        color: var(--cp-blue);
        margin-bottom: 14px;
        font-size: 2.2rem;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .cp-benefit-icon .fa-stack {
        font-size: 1.1rem; 
        width: 2em;
        height: 2em;
        line-height: 2em;
    }

    .cp-benefit-item p {
        font-size: 0.95rem;
        font-weight: 400; 
        color: var(--cp-blue);
        margin: 0;
        line-height: 1.3;
    }

    /* 3. CABEÇALHO INSTITUCIONAL LOJAS */
    .cp-header-container {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-bottom: 15px;
    }

    .cp-header-icon {
        color: var(--cp-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.2rem; 
    }

    .cp-header-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .cp-header-text h2 {
        font-size: 2.2rem; 
        font-weight: 700;
        color: var(--cp-blue); 
        margin: 0;
        line-height: 1.15;
        letter-spacing: -0.8px;
    }

    .cp-header-text p {
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--text-muted);
        margin: 0;
        line-height: 1.2;
    }

    /* 4. PAINEL DE SELEÇÃO E OUTPUTS */
    .cp-panel-container {
        position: relative;
        max-width: 1200px;
        margin: 35px auto 60px auto; 
        padding: 0 20px;
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 30px;
        align-items: center;
        z-index: 1; 
    }

    .cp-panel-container::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100vw;      
        height: 220px;     
        background-color: var(--bg-panel-blue);
        z-index: -1;       
    }

    .cp-column-selectors {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .cp-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .cp-field label {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-main);
    }

    .cp-field label span {
        color: #d51317;
    }

    .cp-select-custom {
        width: 100%;
        padding: 12px;
        border: 1px solid var(--border-ui);
        border-radius: 6px;
        font-size: 1rem;
        color: var(--text-main);
        background-color: var(--white);
        outline: none;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001f38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 16px;
        transition: border-color 0.2s;
    }

    .cp-select-custom:focus {
        border-color: var(--cp-blue);
    }

    .cp-column-output {
        background-color: var(--white);
        border: 1px solid var(--border-ui);
        border-radius: 5px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: space-between; 
        width: 240px;                   
        height: 240px;                  
        box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }

    #qr-column {
        margin-left: auto;
        margin-right: 0;
    }

    #btn-column {
        margin-left: 0;
        margin-right: auto;
    }

    .cp-output-title {
        font-size: 0.85rem;
        font-weight: 700; 
        color: var(--text-main);
        line-height: 1.3;
        height: 35px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        margin-bottom: 5px;
    }

    .cp-image-frame {
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
    }

    .cp-image-frame.cp-whatsapp-frame {
        width: 90px;
        height: 90px;
    }

    .cp-image-frame img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .cp-btn-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: var(--cp-green);
        color: #ffffff;
        text-decoration: none;
        padding: 8px 16px;
        border-radius: 4px;
        font-weight: 600;
        font-size: 0.95rem;
        transition: background-color 0.2s;
        border: none;
        width: 100%;
        max-width: 180px;
        cursor: pointer;
        font-family: 'Montserrat', sans-serif;
    }

    .cp-btn-action:hover {
        background-color: var(--cp-green-hover);
    }

    .cp-btn-action.cp-btn-disabled {
        background-color: #cccccc !important;
        color: #757575 !important;
        pointer-events: none;
        cursor: not-allowed;
        box-shadow: none !important;
    }

    .cp-action-spacer {
        height: 31px;
        width: 100%;
        visibility: hidden;
    }

    /* 5. INSTRUÇÕES DE USO */
    .cp-instructions-box {
        margin: 40px 0;
    }

    .cp-instructions-box h3 {
        font-size: 1.2rem;
        color: var(--cp-blue);
        margin-bottom: 10px;
    }

    .cp-instructions-box p {
        font-size: 0.95rem;
        color: var(--text-muted);
        line-height: 1.6;
    }

    /* 6. OFERTAS POR SEGMENTO */
    .cp-segments-section {
        margin: 50px 0;
    }

    .cp-segments-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 30px;
    }

    .cp-segments-icon {
        color: var(--cp-ocre-600);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.2rem;
    }

    .cp-segments-header-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .cp-segments-header-text h2 {
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--cp-ocre-600);
        margin: 0;
        line-height: 1.15;
        letter-spacing: -0.8px;
    }

    .cp-segments-header-text p {
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--text-muted);
        margin: 0;
        line-height: 1.2;
    }

    .cp-panel-container-box {
        position: relative;
        display: grid;
        grid-template-columns: repeat(6, 1fr); 
        gap: 15px;
        margin-top: 25px;
        z-index: 1;
    }

    .cp-panel-container-box::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100vw;      
        height: 220px; 
        background-color: var(--cp-ocre-50);
        z-index: -1;       
    }

    /* ATUALIZAÇÃO: Cor alterada de var(--white) para var(--cp-blue-50) (Azul CDP-50) */
    .cp-segment-card {
        background-color: var(--cp-blue-50);
        border: 1px solid var(--border-ui);
        border-radius: 6px;
        padding: 20px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: flex-start;
        min-height: 250px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    }

    .cp-segment-card-icon {
        width: 45px; 
        height: 45px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cp-segment-card-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .cp-segment-card h4 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--cp-blue);
        margin: 0 0 10px 0;
    }

    .cp-segment-card p {
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--text-muted);
        margin: 0 0 18px 0;
        line-height: 1.4;
        flex-grow: 1;
    }

    .cp-btn-segment {
        background-color: var(--cp-ocre-600);
        color: var(--white); 
        text-decoration: none;
        width: 100%;
        padding: 10px 6px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background-color 0.2s;
    }

    .cp-btn-segment:hover {
        background-color: var(--cp-ocre-hover);
    }

    /* 7. TEXTO SEO */
    .cp-seo-text {
        border-top: 1px solid var(--border-ui);
        padding-top: 30px;
        margin-top: 30px;
    }

    .cp-seo-text h2 {
        font-size: 1.4rem;
        color: var(--cp-blue);
        margin-bottom: 10px;
    }

    .cp-seo-text p {
        font-size: 0.95rem;
        color: var(--text-muted);
        line-height: 1.6;
        text-align: justify;
    }

    /* 8. SEÇÃO DUPLA: COMO FUNCIONA + FAQ */
    .cp-info-faq-section {
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        gap: 30px;
        margin: 50px auto;
        box-sizing: border-box;
    }

    .cp-how-box {
        background-color: #fafcfd;
        border: 1px solid #eef2f5;
        border-radius: 12px;
        padding: 30px; 
        position: relative;
    }

    .cp-how-box h3, .cp-faq-box h3 {
        font-size: 1.45rem;
        font-weight: 700;
        color: #001f38; 
        margin: 0 0 25px 0;
        letter-spacing: -0.5px;
    }

    .cp-how-timeline {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 22px;
        z-index: 2;
    }

    .cp-how-timeline::before {
        content: '';
        position: absolute;
        left: 16px;
        top: 15px;
        bottom: 15px;
        width: 2px;
        background-color: #001f38;
        z-index: -1;
    }

    .cp-how-step {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .cp-how-circle {
        width: 32px;
        height: 32px;
        background-color: #001f38;
        color: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    .cp-how-text-step {
        font-size: 0.95rem;
        color: #001f38; 
        font-weight: 600;
        line-height: 1.4;
    }

    .cp-faq-box {
        display: flex;
        flex-direction: column;
        padding-top: 30px; 
    }

    details.cp-faq-item {
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        margin-bottom: 12px;
        padding: 15px;
        transition: border-color 0.2s;
    }

    details.cp-faq-item[open] {
        border-color: #b3c0c9;
    }

    summary.cp-faq-header {
        font-size: 0.95rem;
        font-weight: 700;
        color: #001f38; 
        cursor: pointer;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    summary.cp-faq-header::-webkit-details-marker {
        display: none;
    }

    summary.cp-faq-header::after {
        content: '\f078';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.8rem;
        color: #001f38;
        transition: transform 0.2s;
    }

    details.cp-faq-item[open] summary.cp-faq-header::after {
        transform: rotate(180deg);
    }

    .cp-faq-body {
        margin-top: 10px;
        font-size: 0.9rem;
        color: #2b2b2b;
        line-height: 1.45;
    }

    /* 9. MEDIA QUERIES (Responsividade Consolidada) */
    @media (max-width: 1200px) {
        .cp-panel-container-box {
            grid-template-columns: repeat(3, 1fr);
            padding: 20px; 
        }
        .cp-panel-container-box::before {
            /* CORREÇÃO: a faixa ocre usava width:100vw herdado da regra base,
               o que a fazia estourar a largura da viewport em telas menores
               (mesmo bug que já existia na faixa azul antes de ser corrigido).
               Agora ela se ajusta à largura real do container, igual à faixa azul. */
            width: 100% !important;
            max-width: none !important;
            height: 100%; 
            top: 0;
            left: 0;
            transform: none;
        }
    }

    @media (max-width: 992px) {
        .cp-benefits-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
        }

        .cp-benefit-item {
            border-right: none;
            padding: 10px;
        }

        .cp-header-container, .cp-segments-header, .cp-nav-banners-section {
            justify-content: center;
            text-align: center;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 25px;
        }

        .cp-header-text h2 {
            font-size: 1.85rem;
        }

        .cp-panel-container {
            grid-template-columns: 1fr;
            gap: 25px;
            padding: 20px;
            margin: 20px auto;
        }

        .cp-panel-container::before {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transform: none;
            border-radius: 0;
        }

        .cp-column-output {
            min-height: auto;
            padding: 20px;
            width: 100%;
            max-width: 280px;
            height: auto;
        }

        #qr-column, #btn-column {
            margin: 0 auto;
        }

        .cp-output-title {
            height: auto;
            margin-bottom: 15px;
        }

        .cp-image-frame.cp-whatsapp-frame {
            margin-bottom: 20px;
        }

        .cp-action-spacer {
            display: none;
        }

        .cp-column-qr {
            display: none; 
        }

        .cp-info-faq-section {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .cp-how-box, .cp-faq-box {
            text-align: left;
        }

        .cp-faq-box {
            padding-top: 0; 
        }

        .cp-how-box h3, .cp-faq-box h3 {
            font-size: 1.35rem;
            margin-bottom: 20px;
        }
    }

    @media (max-width: 768px) {
        .cp-panel-container-box {
            grid-template-columns: repeat(2, 1fr);
        }
        .cp-nav-banners-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }
    }

    @media (max-width: 480px) {
        .cp-benefits-grid, .cp-panel-container-box {
            grid-template-columns: 1fr;
            gap: 20px;
        }
        .cp-segment-card {
            min-height: auto;
        }
    }