/* container do carrossel */
.heroCarousel {
    background: var(--soft-2);
}

.heroCarousel__swiper {
    position: relative;
    width: 100%;
    height: var(--hero-height, 420px);
    border-radius: 0;
    /* tira borda arredondada se quiser full-bleed */
    overflow: hidden;
}

/* slides */
.heroCarousel__swiper .swiper-slide {
    height: 100%;
}

.heroSlide {
    margin: 0;
    height: 100%;
}

.heroSlide__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* garante que preencha sem distorcer */
}

.heroSlide--contained {
    background: var(--soft-2);
}

.heroSlide--contained .heroSlide__img {
    object-fit: contain;
}

.heroSlide--placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft-2);
    color: var(--muted);
    font-weight: 600;
}

/* setas estilo “cápsula” branca */
.heroNav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 88px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    background: var(--paper);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    z-index: 5;
}

.heroNav--prev {
    left: 12px;
}

.heroNav--next {
    right: 12px;
}

/* substitui ícone padrão do Swiper */
.heroNav::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin: auto;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.heroNav--prev::after {
    border-right: 14px solid #4b5563;
}

.heroNav--next::after {
    border-left: 14px solid #4b5563;
}

.heroNav:focus-visible {
    outline: 3px solid rgba(30, 126, 52, .25);
    outline-offset: 3px;
}

.heroNav.swiper-button-disabled {
    opacity: .45;
    cursor: default;
}

/* paginação */
.heroDots {
    bottom: 10px !important;
}

.heroDots .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--soft-3);
    opacity: 1;
    margin: 0 4px !important;
}

.heroDots .swiper-pagination-bullet-active {
    background: var(--green);
}

html.contrast .heroCarousel__swiper {
    border: 2px solid var(--border);
}

html.contrast .heroNav {
    background: #000;
    border: 2px solid #fff;
    box-shadow: none;
}

html.contrast .heroNav--prev::after {
    border-right-color: #ffeb3b;
}

html.contrast .heroNav--next::after {
    border-left-color: #ffeb3b;
}

html.contrast .heroDots .swiper-pagination-bullet {
    background: #fff;
    outline: 1px solid #000;
}

html.contrast .heroDots .swiper-pagination-bullet-active {
    background: #ffeb3b;
}

/* responsivo */
@media (max-width: 768px) {
    .heroNav {
        width: 44px;
        height: 72px;
    }

    .heroNav--prev {
        left: 8px;
    }

    .heroNav--next {
        right: 8px;
    }
}