/* Container Geral (Permite o transbordo infinito pelas bordas da tela) */
.pmpl-banners-wrapper {
    position: relative;
    /* Técnica Breakout: Faz o carrossel ignorar as travas do tema e ocupar 100% da tela real */
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    margin-top: 40px;
    margin-bottom: 40px;
    box-sizing: border-box;
}

/* Janela centralizada limitadora de 1200px */
.pmpl-banners-viewport {
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible; /* Mantém os banners vizinhos visíveis nas sobras */
    position: relative;
    width: min(100%, 1200px);
}

/* Trilho de Movimentação com o Speed Ramp solicitado */
.pmpl-banners-track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cards Individuais dos Banners */
.pmpl-banner-item {
    flex-shrink: 0;
    height: min(100%, 515px);
    margin: 0 auto;
    object-fit: cover;
    opacity: 0.6;
    overflow: hidden;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    width:min(100vw, 1200px);
}

/* Destaque do Banner centralizado ativo */
.pmpl-banner-item.is-active {
    opacity: 1;
}

.pmpl-banner-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: cover;
}

/* Máscaras de Fade Degradê nas Laterais Transbordadas */
.banner-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    /* pointer-events: auto garante que o fade intercepte e capture o clique, 
       impedindo que ele atinja o link do banner que está por baixo */
    pointer-events: auto;
    cursor: default;
}

.banner-fade-left {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.banner-fade-right {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Setas de Navegação Flutuantes */
.banner-arrow-left,
.banner-arrow-right {
    align-items: center;
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0; /* JS gerencia a aparição no hover seletivo */
    transition: opacity 0.25s ease, background 0.2s ease;
}
.banner-arrow-left::after,
.banner-arrow-right::after {
	background: white;
    content: '';
    display: block;
	height: 28px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    scale: 2;
	width: 28px;
}

.banner-arrow-right:active {
    left: auto !important;
}

.banner-arrow-left::after {
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.7672 7.5431C11.0672 7.25744 11.0788 6.78271 10.7931 6.48276C10.5074 6.18281 10.0327 6.17123 9.73276 6.4569L10.7672 7.5431ZM4.48276 11.4569C4.18281 11.7426 4.17123 12.2173 4.4569 12.5172C4.74256 12.8172 5.21729 12.8288 5.51724 12.5431L4.48276 11.4569ZM5.51724 11.4569C5.21729 11.1712 4.74256 11.1828 4.4569 11.4828C4.17123 11.7827 4.18281 12.2574 4.48276 12.5431L5.51724 11.4569ZM9.73276 17.5431C10.0327 17.8288 10.5074 17.8172 10.7931 17.5172C11.0788 17.2173 11.0672 16.7426 10.7672 16.4569L9.73276 17.5431ZM5 11.25C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75V11.25ZM19 12.75C19.4142 12.75 19.75 12.4142 19.75 12C19.75 11.5858 19.4142 11.25 19 11.25V12.75ZM9.73276 6.4569L4.48276 11.4569L5.51724 12.5431L10.7672 7.5431L9.73276 6.4569ZM4.48276 12.5431L9.73276 17.5431L10.7672 16.4569L5.51724 11.4569L4.48276 12.5431ZM5 12.75H19V11.25H5V12.75Z" fill="white" /></svg>');
}

.banner-arrow-right::after {
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.2328 16.4569C12.9328 16.7426 12.9212 17.2173 13.2069 17.5172C13.4926 17.8172 13.9673 17.8288 14.2672 17.5431L13.2328 16.4569ZM19.5172 12.5431C19.8172 12.2574 19.8288 11.7827 19.5431 11.4828C19.2574 11.1828 18.7827 11.1712 18.4828 11.4569L19.5172 12.5431ZM18.4828 12.5431C18.7827 12.8288 19.2574 12.8172 19.5431 12.5172C19.8288 12.2173 19.8172 11.7426 19.5172 11.4569L18.4828 12.5431ZM14.2672 6.4569C13.9673 6.17123 13.4926 6.18281 13.2069 6.48276C12.9212 6.78271 12.9328 7.25744 13.2328 7.5431L14.2672 6.4569ZM19 12.75C19.4142 12.75 19.75 12.4142 19.75 12C19.75 11.5858 19.4142 11.25 19 11.25V12.75ZM5 11.25C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75V11.25ZM14.2672 17.5431L19.5172 12.5431L18.4828 11.4569L13.2328 16.4569L14.2672 17.5431ZM19.5172 11.4569L14.2672 6.4569L13.2328 7.5431L18.4828 12.5431L19.5172 11.4569ZM19 11.25L5 11.25V12.75L19 12.75V11.25Z" fill="white" /></svg>');

}
/* Fixa as setas exatamente nas margens do limite ativo de 1200px */
.banner-arrow-left { left: calc(50% - 620px); }
.banner-arrow-right { right: calc(50% - 620px); }

.banner-arrow-left:hover,
.banner-arrow-right:hover {
    background: rgba(0, 0, 0, 0.7);
    opacity: 1 !important;
}

/* Estilização da Linha de Paginação */
.banner-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 16px 0;
}

/* Marcador Inativo: Pontinho sem borda */
.banner-pagination-bullet {
    background: #e2e8f0;
    border: none; /* Sem bordas conforme especificado */
    border-radius: 12px;
    cursor: pointer;
    display: block;
    height: 8px;
    margin: 0 12px;
    padding: 0;
    position: relative;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: left;
    width: 24px;
}

.banner-pagination-bullet::after {
  content: "";
  position: absolute;
  inset: -16px -8px;
  
  /* top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px; */
  
}

/* Marcador Ativo: Transforma-se em um Tracinho esticado */
.banner-pagination-bullet.is-active {
    background: #1e293b;
    width: 48px;
    margin: 0;
}

/* ==========================================================================
   REGRAS RESPONSIVAS (MOBILE & TABLET)
   ========================================================================== */

@media (min-width: 1200px) {
    .banner-fade {
        /* Metade da sobra da tela externa aos 1200px + 15px de respiro do padding */
        width: calc((100vw - 1200px) / 2 + 15px);
    }
    .banner-fade-left {
        left: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .banner-fade-right {
        right: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    }
}

/* Comportamento do Fade em telas menores que 1200px (Tablets e Celulares) */
@media (max-width: 1199px) {
    .banner-fade {
        width: 12vw; /* Usa preenchimento percentual da largura da tela */
    }
    .banner-fade-left {
        left: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .banner-fade-right {
        right: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
    }
}