/* Altura do Banner */
.hero-slider-wrapper {
    position: relative;
    width: 100%;
    height: 75vh; /* Usa viewport height para se adaptar melhor às telas */
    min-height: 550px;
    background: var(--cor-fundo-claro, #000);
}

.hero-slider-wrapper .swiper {
    width: 100%;
    height: 100%;
}

.slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
}

.hero-slider-wrapper .swiper-slide {
    overflow: hidden;
    position: relative;
    /* Alinha o conteúdo verticalmente ao centro, mas à esquerda no eixo horizontal */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

/* A Imagem de Fundo */
.slide-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Overlay modificado: Escurece da esquerda (onde tem texto) para a direita */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
    z-index: 2;
}

/* O Conteúdo (Texto) */
.slide-content {
    position: relative;
    z-index: 3;
    color: #fff;
}

/* O detalhe da borda lateral do layout */
.banner-text-wrapper {
    border-left: 3px solid var(--cor-secundaria, rgb(252, 200, 0)); /* Puxa a variável amarela */
    padding-left: 25px;
    max-width: 650px; /* Impede que o texto vá de ponta a ponta na tela */
}

/* Tipografia modernizada */
.slide-title {
    font-size: 2.8rem;
    margin-bottom: 10px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: none; /* Deixa normal (Capitalize) para ficar mais elegante */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    font-family: 'Raleway', sans-serif;
    color: #fff;
}

.slide-description {
    font-size: 1.15rem;
    margin-bottom: 0;
    font-weight: 400;
    opacity: 0.95;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
    line-height: 1.5;
    color: #fff;
}

/* Responsividade */
@media (max-width: 991px) {
    .hero-slider-wrapper { height: 60vh; min-height: 400px; }
    .slide-title { font-size: 2.2rem; }
}

@media (max-width: 768px) {
    .hero-slider-wrapper { height: 50vh; min-height: 350px; }
    .slide-overlay {
        /* Em mobile, escurece mais a tela toda pois a foto fica estreita */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
    }
    .banner-text-wrapper { max-width: 100%; border-left-width: 4px; padding-left: 15px; }
    .slide-title { font-size: 1.8rem; }
    .slide-description { font-size: 1rem; }
}

.slide-link {
    display: flex; /* Transforma o link em um flex container */
    align-items: center; /* Centraliza o conteúdo (slide-content) verticalmente */
    width: 100%;
    height: 100%;
    text-decoration: none !important;
    position: relative; /* Necessário para segurar a imagem de fundo e o overlay */
}

/* Você pode manter o swiper-slide assim, mais limpo: */
.hero-slider-wrapper .swiper-slide {
    overflow: hidden;
    position: relative;
}

/* O Conteúdo (Texto) - Garantindo que ele ocupe o espaço correto */
.slide-content {
    position: relative;
    z-index: 3;
    color: #fff;
    width: 100%; /* Garante que o container interno respeite o grid da tela */
}