/* ULTRATHINK: Seção integrações responsiva */
.section-integracoes {
    position: relative;
    min-height: auto !important; /* Altura flexível */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: calc(var(--header-height-scrolled) + var(--space-lg)) !important;
    padding-bottom: var(--space-xl) !important;
}

@media (min-width: 768px) {
    .section-integracoes {
        min-height: calc(100vh - var(--header-height-scrolled));
    }
}

/* Adiciona um efeito de hover na imagem */
.integracao-visual:hover img {
    transform: translateY(-10px) scale(1.02);
}

/* .section-header é global */

.integracoes-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px; /* Garante altura mínima para a ilustração */
    padding: var(--space-xl) 0;
}

.integracoes-row {
    display: flex;
    flex-direction: column; /* Empilha em dispositivos móveis */
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    width: 100%;
    position: relative;
    padding: 0 var(--space-md);
}

.integracoes-erp, 
.integracoes-canais {
    /* Estilos comuns para as duas subseções */
    padding: var(--space-md); /* Aumenta o padding */
    position: relative; /* Para posicionamento relativo */
    z-index: 2; /* Coloca acima da ilustração */
    background-color: rgba(255, 255, 255, 0.85); /* Fundo branco semi-transparente */
    border-radius: var(--border-radius-lg); /* Arredonda as bordas */
    box-shadow: var(--shadow-sm); /* Adiciona uma sombra suave */
}

.integracoes-subtitle {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-lg);
    text-align: center; /* Centralizado em mobile */
    color: var(--color-heading-primary);
}

.erp-logo-grid,
.canais-icon-grid {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem linha */
    justify-content: center; /* Centraliza os itens */
    gap: var(--space-md); /* Reduz o espaçamento entre os itens */
    margin-top: var(--space-md); /* Adiciona espaço acima dos grids */
}

.erp-item,
.canal-item {
    /* Efeito glassmorphism aplicado */
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--space-sm);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    text-align: center;
    min-width: 110px;
    max-width: 130px;
    transition: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    /* Bordas sutis para glasmorfismo */
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-clip: padding-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0.25rem;
}

.erp-item:hover,
.canal-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.erp-item img {
    max-height: 40px; /* Altura máxima para logos de ERP */
    margin: 0 auto var(--space-xs) auto;
}

.erp-item span, /* Texto abaixo do logo ERP */
.canal-item {   /* Texto e ícone do canal */
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    display: block; /* Garante que o span ocupe a linha */
}

.canal-item img {
    max-height: 32px; /* Altura máxima para ícones de canal */
    margin: 0 auto var(--space-xs) auto;
}

.status-pronto {
    color: var(--color-green-success);
    font-size: 0.75rem;
    display: block;
    margin-top: var(--space-xxs);
}
.status-embreve {
    color: var(--color-orange-pending);
    font-size: 0.75rem;
    display: block;
    margin-top: var(--space-xxs);
}

.canal-item.futura { /* Para canais futuros */
    opacity: 0.7;
}

.integracao-visual {
    max-width: 380px; /* Tamanho adequado para mobile */
    margin: var(--space-md) 0; /* Espaçamento vertical */
    text-align: center; /* Garante centralização */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Coloca a imagem atrás dos outros elementos em telas maiores */
    order: 2; /* Ordem no flex container */
}

.integracao-visual img {
    max-width: 100%;
    height: auto;
    transition: transform 0.5s ease-in-out;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)); /* Adiciona sombra suave à imagem */
    transform-origin: center center; /* Define o ponto de origem para transformações */
}

/* Efeito de hover na imagem */
.integracao-visual:hover img {
    transform: translateY(-10px) scale(1.02);
}

/* Media Queries para #integracoes */
@media (min-width: 768px) {
    .integracoes-wrapper {
        min-height: 400px; /* Altura mínima adequada */
    }
    
    .integracoes-row {
        flex-direction: row; /* Lado a lado em telas maiores */
        justify-content: center; /* Centraliza os elementos */
        align-items: center; /* Alinha verticalmente */
        max-width: 1200px; /* Limita a largura máxima */
        margin: 0 auto; /* Centraliza o conteúdo */
        gap: var(--space-xl); /* Aumenta o espaçamento entre os elementos */
        padding: 0 var(--space-lg);
    }

    .integracoes-subtitle {
        text-align: center; /* Centraliza os subtítulos */
        margin-bottom: var(--space-sm); /* Reduz o espaço abaixo dos subtítulos */
    }

    .erp-logo-grid,
    .canais-icon-grid {
        justify-content: center; /* Centraliza os itens */
        gap: var(--space-sm); /* Espaçamento entre os itens */
    }
    
    .integracao-visual {
        max-width: 380px; /* Tamanho adequado para telas médias */
        margin: 0 var(--space-xxl); /* Aumenta margens laterais para centralização perfeita */
        order: 0; /* Redefine a ordem para ficar no meio */
        flex-shrink: 0; /* Impede que a imagem encolha */
        flex: 0 0 auto; /* Não cresce nem encolhe, mantém tamanho */
    }
    
    .integracoes-erp,
    .integracoes-canais {
        flex: 0 0 320px; /* Largura fixa para os painéis */
        width: 320px; /* Garante largura igual */
        max-width: 320px; /* Limita a largura máxima */
    }
    
    .integracoes-erp, 
    .integracoes-canais {
        padding: var(--space-sm); /* Reduz o padding para economizar espaço */
    }
    
    .erp-item,
    .canal-item {
        min-width: 100px; /* Reduz ainda mais em telas médias */
        padding: var(--space-xs) var(--space-sm); /* Reduz o padding */
    }
}

/* Media query para telas ainda maiores */
@media (min-width: 1200px) {
    .integracoes-row {
        gap: var(--space-xl); /* Mais espaço entre os elementos */
    }
    
    .integracao-visual {
        max-width: 420px; /* Tamanho ajustado para telas grandes */
    }
    
    .integracoes-erp,
    .integracoes-canais {
        max-width: 400px; /* Aumenta a largura máxima dos painéis */
    }
    
    /* Ajusta o espaçamento dos grids para melhor distribuição */
    .erp-logo-grid,
    .canais-icon-grid {
        gap: var(--space-md); /* Mantém um espaçamento moderado */
        display: grid; /* Muda para grid em telas grandes */
        grid-template-columns: repeat(2, 1fr); /* Duas colunas para os itens */
    }
    
    .integracoes-erp, 
    .integracoes-canais {
        padding: var(--space-md); /* Mantém um padding moderado */
        max-width: 350px; /* Limita a largura máxima */
    }
    
    .erp-item,
    .canal-item {
        min-width: 120px; /* Aumenta ligeiramente em telas grandes */
        margin: 0.5rem; /* Aumenta a margem em telas grandes */
    }
}