.phito-banner,
.phito-banner *,
.phito-banner :before,
.phito-banner :after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

.phito-banner {
    background: #fdfaf6;
    position: relative
}

.phito-banner-palco {
    display: grid
}

.phito-banner-slide {
    opacity: 0;
    pointer-events: none;
    grid-area: 1/1;
    transition: opacity .45s
}

.phito-banner-slide-ativo {
    opacity: 1;
    pointer-events: auto
}

.phito-banner-link,
.phito-banner-slide picture {
    display: block
}

.phito-banner-h1 {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

.phito-banner-img {
    width: 100%;
    height: auto;
    display: block
}

.phito-banner-pontos {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #3d2c5a59;
    border-radius: 999px;
    gap: 8px;
    padding: 6px 10px;
    display: flex;
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translate(-50%)
}

.phito-banner-ponto {
    cursor: pointer;
    background: #ffffff8c;
    border: 0;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    padding: 0;
    transition: background-color .2s, width .2s
}

.phito-banner-ponto:hover {
    background: #ffffffd9
}

.phito-banner-ponto-ativo,
.phito-banner-ponto-ativo:hover {
    background: #fbe89a;
    border-radius: 999px;
    width: 20px
}

.phito-banner-ponto:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #fbe89a
}

@media (width>=768px) {
    .phito-banner-pontos {
        bottom: 18px
    }
}

@media (prefers-reduced-motion:reduce) {
    .phito-banner-slide {
        transition: none
    }
}