.buttons_slick{
    display: flex;
    gap: 0.5em;
    margin-inline: 0.5em;

    button{
        border: 1px solid var(--cinza-borda-slide );
        height: 36px;
        width: 36px;
        background-color: var(--branco);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        opacity: 0.6;

        &:focus,&:hover{
            opacity:1;
        }
    }
}

.banner_item{
    max-width: 247px;
    max-height:430px;
    border: 0.5em;
    
}

@media screen and (max-width:768px) {
    .banner_item{
        display: none !important;
        max-width: none  !important;
    }
    
}

/* Container para manter o espaçamento inferior que o h1 original tinha */
.special-title-container {
    /* Esta classe herdará o `pb-5` do PHP, garantindo o espaçamento */
}

/* Estilo principal do título especial (o "botão" azul) */
.special-title {
    display: inline-flex; /* Alinha o ícone e o texto na mesma linha */
    align-items: center;  /* Centraliza verticalmente o ícone e o texto */
    background-color: #103681; /* Cor azul escura, similar à da imagem */
    color: #ffffff;      /* Cor do texto e do ícone */
    padding: 10px 24px;   /* Espaçamento interno (vertical e horizontal) */
   
    font-size: 22px;      /* Tamanho da fonte */
    font-weight: 600;     /* Deixa a fonte em negrito */
}

/* Estilo para o ícone dentro do título especial */
.special-title svg {
    width: 28px;
    height: 28px;
    margin-right: 12px; /* Espaço entre o ícone e o texto */
}


/* Para evitar barras de rolagem horizontais indesejadas */
html, body {
    overflow-x: clip;
}

/* --- 1. Layout de LARGURA TOTAL (bleed-full) --- */
.carousel-bleed-full .produto {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* --- 2. Layout que vaza para a DIREITA (bleed-right) --- */
/* (Ex: Banner na esquerda, carrossel vaza para a direita) */
.carousel-bleed-right .produto {
    /* Apenas aumentamos a largura. Ele vai vazar para a direita naturalmente. */
    /* Largura = 100% do seu contêiner + o espaço para vazar */
    width: calc(100% + (50vw - 50%));
}

/* --- 3. Layout que vaza para a ESQUERDA (bleed-left) --- */
/* (Ex: Banner na direita, carrossel vaza para a esquerda) */
.carousel-bleed-left .produto {
    /* Aumentamos a largura... */
    width: calc(100% + (50vw - 50%));
    /* ...e puxamos para a esquerda com margem negativa. */
    margin-left: calc(50% - 50vw);
}