/**
 * Diferenciais - Estilos
 *
 * Shortcode [diferenciais]
 * Fundo transparente de propósito: o fundo é definido na seção do Elementor.
 */

.dif-wrapper {
    --dif-colunas: 3;
    --dif-colunas-tablet: 2;
    --dif-cor-titulo: #fff;
    --dif-cor-desc: rgba(255, 255, 255, .78);
    --dif-cor-icone: #fff;
    --dif-cor-numero: rgba(255, 255, 255, .85);
    --dif-numero-bg: rgba(255, 255, 255, .14);
    --dif-botao-bg: #ffffff;
    --dif-botao-bg-hover: #eaf0fb;
    --dif-botao-cor: #14306e;
    --dif-botao-align: center;
    --dif-botao-espaco: 56px;
    --dif-col-gap: 56px;
    --dif-row-gap: 52px;

    width: 100%;
    background: transparent;
    box-sizing: border-box;
}

.dif-wrapper *,
.dif-wrapper *::before,
.dif-wrapper *::after {
    box-sizing: border-box;
}

/* ---------- Grid ---------- */

.dif-grid {
    display: grid;
    grid-template-columns: repeat(var(--dif-colunas), minmax(0, 1fr));
    column-gap: var(--dif-col-gap);
    row-gap: var(--dif-row-gap);
    align-items: start;
}

.dif-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

/* ---------- Número + ícone ---------- */

.dif-topo {
    display: flex;
    align-items: center;
    gap: 18px;
}

.dif-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    background: var(--dif-numero-bg);
}

.dif-icone {
    display: block;
}

/* ---------- Título e descrição ---------- */

.dif-titulo {
    max-width: 22ch;
}

.dif-desc {
    max-width: 34ch;
}

/* ---------- Botão ---------- */

/* O botão fica abaixo da lista inteira, ocupando a largura toda e
   centralizado (o alinhamento é configurável no painel). */
.dif-botao-area {
    display: flex;
    width: 100%;
    justify-content: var(--dif-botao-align);
    margin-top: var(--dif-botao-espaco);
}

.dif-botao {
    cursor: pointer;
    transition: background-color .2s ease;
}

.dif-botao-icone {
    display: block;
}

/* ---------- Responsivo ---------- */

@media (max-width: 1024px) {
    .dif-wrapper {
        --dif-col-gap: 36px;
        --dif-row-gap: 40px;
        --dif-botao-espaco: 48px;
    }

    .dif-grid {
        grid-template-columns: repeat(var(--dif-colunas-tablet), minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .dif-wrapper {
        --dif-col-gap: 24px;
        --dif-row-gap: 28px;
    }

    .dif-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dif-topo {
        gap: 14px;
    }

    .dif-numero {
        width: 48px;
        height: 48px;
    }

    .dif-titulo,
    .dif-desc {
        max-width: 100%;
    }

    /* No mobile o botão fica sempre centralizado. */
    .dif-botao-area {
        justify-content: center;
        margin-top: 40px;
    }
}