/* garante referência pro posicionamento absoluto */
.carausel-6-columns-cover {
    position: relative;
    /* knobs fáceis de ajustar */
    --arrow-y: 100%; /* quão baixo (0% topo, 100% fundo) */
    --arrow-x: -54px; /* “fora” da área: negativo p/ sair um pouco do container */
}

/* container das setas vira um overlay clicável */
#carausel-6-columns-arrows {
    position: absolute;
    inset: 0; /* top/right/bottom/left: 0 */
    pointer-events: none; /* deixa clicks passarem, exceto nas setas */
    z-index: 3;
}

/* botões só com ícone, sem fundo */
#carausel-6-columns-arrows .ec-slick-arrow {
    pointer-events: auto; /* reativa clique nas setas */
    position: absolute;
    top: var(--arrow-y);
    transform: translateY(-50%);
    width: 44px;
    height: 44px; /* área de toque maior */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #3a2e85; /* tua cor */
    opacity: .9;
    transition: transform .15s ease, opacity .15s ease;
}

/* esquerda/direita */
#carausel-6-columns-arrows .ec-slick-prev {
    left: var(--arrow-x);
}

#carausel-6-columns-arrows .ec-slick-next {
    right: var(--arrow-x);
}

/* hover/focus */
#carausel-6-columns-arrows .ec-slick-arrow:hover,
#carausel-6-columns-arrows .ec-slick-arrow:focus {
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
    outline: none;
}

/* estado desabilitado (slick) */
#carausel-6-columns-arrows .slick-disabled {
    opacity: .35;
    pointer-events: none;
}

/* mobile: traz as setas um pouco pra dentro */
@media (max-width: 576px) {
    .carausel-6-columns-cover {
        --arrow-y: 72%;
        --arrow-x: 6px;
    }
}

.carausel-6-columns-cover #carausel-6-columns-arrows .ec-slick-arrow {
    position: absolute;
    z-index: 5; /* acima dos slides */
    top: var(--arrow-y);
    transform: translateY(-50%);
}

.carausel-6-columns-cover #carausel-6-columns-arrows .ec-slick-prev {
    left: var(--arrow-x);
}

.carausel-6-columns-cover #carausel-6-columns-arrows .ec-slick-next {
    right: var(--arrow-x);
}

/* mobile: ancorado por baixo, e um pouco mais pra dentro */
@media (max-width: 576px) {
    .carausel-6-columns-cover {
        --arrow-x: 8px; /* traz um pouco pra dentro */
    }

    /* usa bottom no lugar de top; zera qualquer top anterior */
    .carausel-6-columns-cover #carausel-6-columns-arrows .ec-slick-arrow {
        top: 90% !important;
        bottom: 150px !important; /* mais baixo no mobile */
        transform: none !important;
    }

    .carausel-6-columns-cover #carausel-6-columns-arrows .ec-slick-prev {
        left: var(--arrow-x) !important;
    }

    .carausel-6-columns-cover #carausel-6-columns-arrows .ec-slick-next {
        right: var(--arrow-x) !important;
    }
}

