/* ==========================================================================
   DIREFENCIAIS - DESKTOP
   ========================================================================== */

.diferenciais-flutuantes {
    margin-top: -100px; /* Isso sobe a seção */
    position: relative;
    z-index: 20; /* Garante que os cards fiquem ACIMA da imagem do banner */
}

.container-diferenciais {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 40px 30px; 
}

.item-dif {
    text-align: center;      /* Centraliza os textos (H3 e P) */
    display: flex;
    flex-direction: column;
    align-items: center;     /* Centraliza o bloco do ícone horizontalmente */
}

.item-dif .icon-wrapper {
    margin-bottom: 15px;
    display: flex;
    justify-content: center; /* Garante o ícone no centro do wrapper */
}

.item-dif img {
    width: 45px;
    height: auto;
}

.item-dif h3 {
    color: #fff;
    font-size: 18px; 
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px; 
    font-family: 'Montserrat', sans-serif;
}

.item-dif p {
    color: #eee;
    font-size: 14px; 
    line-height: 1.6; 
    font-weight: 300;
    margin: 0;
    text-align: center;     /* Força o texto descritivo a quebrar centralizado igual ao layout */
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #000; /* Evita o flash branco ao carregar */
}

/* ==========================================================================
   DIREFENCIAIS - MOBILE
   ========================================================================== */

   @media (max-width: 768px) {
    /* 1. Altura fixa para evitar que o layout "pule" ou suma */
    .secao-diferenciais-home {
        min-height: 350px; 
    }

    .container-diferenciais {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        overflow: hidden !important;
        padding: 20px 0 !important;
        gap: 0 !important;
        position: relative;
    }

    /* 2. Força a imagem a manter proporção e não desaparecer */
    .item-dif {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        animation: carrosselMobile 20s infinite ease-in-out; /* Aumentado para 20s */
    }

    .item-dif .icon-wrapper img {
        display: block !important;
        width: 50px !important; /* Tamanho fixo para garantir que renderize */
        height: 50px !important;
        object-fit: contain;
    }

    /* 3. Ajusta a seção de Diferenciais no Mobile */

    .container-diferenciais::-webkit-scrollbar {
        display: none;
    }

    /* --- CADA ITEM (CARD) --- */
    .item-dif .icon-wrapper {
        margin-bottom: 20px;
        display: block;
    }

    .item-dif img {
        width: 60px; /* Ícones um pouco maiores no mobile para facilitar a visão */
        height: auto;
    }

    .item-dif h3 {
        font-size: 1.1rem !important;
        margin-bottom: 15px;
    }

    .item-dif p {
        font-size: 0.9rem !important;
        line-height: 1.5;
        max-width: 280px; /* Limita a largura do texto para melhor leitura */
    }
}