:root {
    --card-shadow: 0px 1px 4px rgba(0,0,0,.2);
    --card-border: rgba(33,55,76,.1);
    --radius: 5px;
    --z-window: 8;
    --z-timer: 9;
    --z-nav: 1002;
    --z-header: 1001;
    --border-primary: 1px solid rgba(33,55,76,.5);
    --color-border: hsla(0,0%,60%,.3);
    --media-default: 0px;
    --media-xs: 360px;
    --media-sm: 576px;
    --media-md: 768px;
    --media-lg: 992px;
    --media-xl: 1200px;
    --media-xx: 1400px;
    --media-xxl: 1600px;
    --padding: .5em;
    --margin: .5rem;
    --summary-font-size: 0.875em
}

a {
    text-decoration: none
}

*,body {
    margin: 0
}

html {
    background-color: #f5f5f5;
    color: #333;
}

body {
    border: 0;
    box-sizing: border-box;
    display: block;
    font-family: Rubik,sans-serif;
    overflow-x: hidden;
    padding: 0;
    padding-top: env(safe-area-inset-top);
    scroll-behavior: smooth;
    width: 100%;
    background-color: #f5f5f5;
    color: #333;
}

body.body-background {
    background: var(--body-background)
}

svg {
    fill: currentColor
}

input,select,textarea {
    font-family: Rubik,sans-serif
}

strong {
    font-weight: 500
}

.hidden {
    display: none
}

.navbar {

    display: none;
    align-items: center;
    display: flex;
    margin-top: -1080px;
    width: 100%;
    z-index: var(--z-nav)
}

.navbar .logo {
    padding: 0 20px
}

.navbar .logo a img {
    display: none;
    color: var(--header-logo);
    width: 164px
}

.navbar .logo a svg {
    display: none;
    color: var(--header-logo);
    height: 30px;
    width: 160px
}

.navbar .busca {
    display: none;
    display: flex;
    flex: 2 1 auto;
    margin: 5px 12px;
    max-width: 400px;
    order: 2;
    z-index: 1
}

.navbar .busca .campo {
    display: none;
    background-color: var(--header-search-background);
    border: var(--border-primary);
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    flex: 2 1 0%;
    height: 45px;
    padding: 8px;
    position: relative;
    z-index: 20
}

.navbar .busca .campo svg {
    display: none;
    color: var(--header-text-title);
    cursor: pointer;
    order: 2;
    width: 20px
}

.navbar .busca .campo input {

    display: none;
    background-color: var(--header-search-background);
    border: none;
    box-sizing: border-box;
    color: var(--header-text-default);
    font-size: 16px;
    order: 1;
    outline: none;
    padding: 0 8px;
    width: 100%
}

.navbar .busca .campo input::placeholder {
    display: none;
    color: var(--header-text-title)
}

.navbar .localizacao {

    display: none;
    cursor: pointer;
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    order: 3
}

.navbar .localizacao svg {
    color: var(--primaria);
    height: 20px;
    width: 20px
}

.navbar .localizacao a {
    align-items: center;
    display: flex;
    gap: 6px
}

.navbar .localizacao p {
    color: var(--azul-opacidade);
    letter-spacing: .02em
}

.navbar .localizacao .alerta {
    align-items: center;
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 3px 3px 5px rgba(0,0,0,.15);
    display: flex;
    justify-content: center;
    position: absolute;
    top: 60px;
    width: 200px
}

.navbar .localizacao .alerta .ballon {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3.5px;
    padding: 12px 0 14px;
    z-index: 2
}

.navbar .localizacao .alerta .ballon p {
    color: var(--azul);
    letter-spacing: -.01em
}

.navbar .localizacao .alerta .ballon .cidade {
    font-size: 21px;
    font-weight: 600
}

.navbar .localizacao .alerta .ballon .continuar {
    background-color: var(--botao-azul);
    border-radius: 10px;
    color: var(--white);
    font-weight: 600;
    margin-top: 6px;
    padding: 8px 21px
}

.navbar .localizacao .alerta .ballon .trocar-cidade {
    color: var(--cinza-forte)
}

.navbar .localizacao .alerta .ballon .trocar-cidade svg {
    color: var(--primaria)
}

.navbar .localizacao .alerta:after {
    background: var(--white);
    border: 1px solid var(--color-border);
    border-color: var(--color-border) transparent transparent var(--color-border);
    content: "";
    height: 20px;
    left: 46%;
    position: absolute;
    top: -11px;
    transform: rotate(45deg);
    width: 20px
}

.navbar .acesso {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    gap: 20px;
    margin: 5px 18px;
    order: 4;
    text-transform: uppercase;
    width: auto
}

@media screen and (max-width: 900px) {
    .navbar .acesso {
        gap:2px
    }
}

.navbar .acesso a {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .15em
}

.navbar .acesso .login {
    align-items: center;
    color: var(--primaria);
    display: flex
}

.navbar .acesso .login svg {
    height: 16px;
    width: 25px
}

.navbar .acesso .cadastrar {
    background-color: var(--primaria);
    border-radius: 5px;
    color: var(--white);
    padding: 15px;
    text-align: center
}

.navbar .acesso .icon-mobile svg {
    color: var(--primaria);
    height: 34px;
    width: 34px
}

.navbar.home {
    background-color: var(--header-background);
    position: fixed
}

#evento {
    display: none;
    justify-content: space-between
}

/* CORREÇÃO PRINCIPAL PARA O PROBLEMA DO IPHONE */
@media screen and (max-width: 600px) {
    .navbar {
        display: none;
        background-color: transparent;
        box-shadow: none;
        height: 60px;
        justify-content: space-between;
        margin-top: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--z-nav);
    }

    .navbar.scrolled {
        background-color: var(--white);
        box-shadow: 0 1px 2px rgba(0,0,0,.15);
    }

    .navbar .logo a img {
        width: 170px
    }

    .navbar .busca,.navbar .localizacao {
        display: none
    }

    .navbar .acesso {
        margin: 5px 10px
    }

    .navbar .acesso .cadastrar,.navbar .acesso .login {
        display: none
    }

    .navbar#evento {
        display: none;
        background-color: transparent;
        height: auto;
        min-height: 60px;
    }

    .navbar#evento .logo svg {
        color: var(--cor-evento-secundaria)
    }

    .navbar#evento .icon-mobile svg {
        color: var(--cor-evento)
    }

    .search-mobile {
        align-items: center;
        background-color: var(--header-background);
        box-shadow: 0 1px 2px rgba(0,0,0,.15);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 0 13px;
        position: fixed;
        top: 70px;
        width: 100%;
        z-index: var(--z-header)
    }

    .search-mobile .localizacao {
        color: var(--primaria);
        display: flex;
        font-weight: 600;
        gap: 10px;
        margin-left: 12px
    }

    .search-mobile .localizacao svg {
        color: var(--primaria);
        height: 20px;
        width: 20px
    }

    .search-mobile .localizacao .trocar-cidade,.search-mobile .localizacao p {
        color: var(--primaria)
    }

    .search-mobile .busca {
        margin-right: 20px
    }

    .search-mobile .busca svg {
        height: 20px;
        width: 20px
    }
}

@media screen and (max-width: 600px)and (max-width:600px) {
    .search-mobile .busca svg {
        color:var(--primaria)
    }
}

@media screen and (min-width: 600px) {
    .acesso .icon-mobile,.search-mobile {
        display:none
    }

    .scroll {
        box-shadow: 0 1px 5px rgba(0,0,0,.2)
    }
}

.footer-page {
    background-color: var(--white);
    bottom: 0;
    box-shadow: 0 -4px 11px -7px rgba(76,76,76,.33);
    display: table-row;
    height: 122px;
    left: 0;
    position: relative;
    right: 0;
    z-index: 2
}

@media(max-width: 600px) {
    .footer-page {
        height:182px
    }
}

@media(min-width: 600px) {
    .footer-page .container {
        margin:11px auto;
        max-width: 950px;
        padding-bottom: 27px;
        padding-top: 0
    }
}

.footer-page .container {
    padding: 0
}

.footer-page .top-footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 15px 0
}

.footer-page .top-footer .logo {
    margin-left: 4px;
    width: 145px
}

.footer-page .top-footer .logo svg {
    color: var(--cinza-forte);
    height: 30px;
    width: 145px
}

@media(max-width: 600px) {
    .footer-page .top-footer .logo {
        margin-left:0;
        margin-right: 0;
        width: 160px
    }

    .footer-page .top-footer {
        flex-direction: column;
        gap: 4px;
        padding: 5%
    }
}

.footer-page .top-footer .paises {
    color: var(--cinza-forte);
    display: flex;
    gap: 15px
}

.footer-page .top-footer .paises .active {
    font-weight: 700
}

.footer-page .top-footer .paises a {
    border-right: 1px solid var(--cinza-fraco)
}

.footer-page .bottom-footer {
    border-top: 1px solid var(--cinza-fraco);
    color: var(--cinza-forte);
    display: flex;
    font-size: 1em;
    justify-content: space-between;
    padding: 10px 0
}

.footer-page .bottom-footer a {
    color: var(--cinza-forte)
}

.footer-page .bottom-footer h5 {
    font-weight: 700;
    text-transform: uppercase
}

.footer-page .bottom-footer .links {
    display: flex;
    gap: 50px
}

.footer-page .bottom-footer .column-footer {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.footer-page .bottom-footer .column-footer img {
    height: 110px
}

.footer-page .bottom-footer .column-footer p {
    font-size: 14px
}

@media(max-width: 600px) {
    .footer-page .bottom-footer {
        flex-direction:row;
        flex-wrap: wrap;
        gap: 0 4px;
        justify-content: space-around;
        margin: 0 25px
    }

    .footer-page .bottom-footer .links {
        padding-top: 10px
    }

    .footer-page .bottom-footer .links a {
        width: 81px
    }

    .footer-page .bottom-footer .column-footer {
        margin-bottom: 10px;
        width: 48%
    }

    .footer-page .bottom-footer .column-footer.image {
        text-align: center;
        width: 33.333%
    }

    .footer-page .bottom-footer .column-footer.image img {
        height: 100px
    }
}

.footer-page .endereco {
    color: var(--cinza-forte);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    gap: 4px;
    text-align: center
}

@media screen and (max-width: 600px) {
    .footer-page .endereco {
        padding:8px 0
    }
}

.footer-page.bemingressos {
    background-color: var(--footer-background)
}

.footer-page.bemingressos .container {
    padding-bottom: 0
}

.footer-page.bemingressos .top-footer {
    flex-direction: column;
    gap: 6px;
    justify-content: center
}

.footer-page.bemingressos .top-footer a {
    color: var(--footer-logo)
}

.footer-page.bemingressos .top-footer svg {
    fill: var(--footer-logo);
    height: 30px;
    width: 160px
}

.footer-page.bemingressos .bottom-footer {
    align-items: center;
    color: var(--footer-text);
    display: flex;
    flex-direction: column;
    gap: 4px
}

.footer-page.bemingressos .bottom-footer a {
    color: var(--footer-link)
}

aside {
    gap: 15px
}

aside,aside .evento-menu {
    display: flex;
    flex-direction: column
}

aside .evento-menu {
    gap: 5px
}

aside .evento-menu a img {
    border-radius: 8px;
    height: 225px;
    object-fit: cover;
    width: 225px
}

aside .side-menu ul {
    color: var(--cinza-forte);
    display: flex;
    flex-direction: column;
    font-weight: 500;
    gap: 10px;
    letter-spacing: .025em;
    list-style-type: none;
    padding-inline-start:5px;text-transform: uppercase
}

aside .side-menu ul li.active a {
    color: var(--cor-evento)
}

aside .side-menu ul li.active a:before {
    background-color: var(--cor-evento);
    content: "";
    float: left;
    height: 40px;
    left: -45px;
    margin-top: -9px;
    -webkit-mask-image: url(/packs/static/stylesheets/img/list-style-45555b8eaafb4f1b82e2.svg);
    mask-image: url(/packs/static/stylesheets/img/list-style-45555b8eaafb4f1b82e2.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    width: 40px
}

aside .side-menu ul li.active .sub-menu a:before {
    content: none
}

aside .side-menu ul a {
    color: var(--cinza-forte);
    cursor: pointer;
    text-decoration: none
}

aside .sub-menu {
    font-size: 13px;
    padding: 10px 0 5px
}

.layout {
    display: flex;
    flex-direction: column;
    position: relative
}

.layout.no-header {
    grid-template-areas: "aside content" "aside footer";
    grid-template-columns: 1fr 2fr
}

@media(min-width: 576px) {
    .layout {
        display:grid;
        gap: 0 calc(var(--margin)*4);
        grid-template-areas: "aside content";
        grid-template-columns: 2fr 15fr;
        grid-template-rows: 0fr auto auto
    }
}

.header+.confirmation,.header+.layout {
    margin-top: calc(var(--margin)*4)
}

.aside {
    grid-area: aside;
    order: 2
}

.aside .card {
    padding: 0
}

.aside .section-body,.aside .section-title {
    margin: calc(var(--margin)/4) 0
}

.aside .item,.aside .section-title {
    font-size: .96em
}

@media(min-width: 576px) {
    .aside {
        margin-left:0;
        margin-right: 0
    }

    .aside .card {
        padding: calc(var(--padding)*.9)
    }
}

.block {
    gap: 20px
}

.block,.content {
    display: flex;
    flex-direction: column
}

.content {
    flex: 1 0 auto;
    gap: 35px;
    grid-area: content;
    margin-top: 18px;
    order: 3
}

.line {
    font-weight: 500;
    overflow: hidden
}

@media screen and (max-width: 600px) {
    .line {
        font-weight:500
    }
}

.line:after {
    border-top: 1px solid var(--cinza);
    content: "";
    display: inline-block;
    height: .5em;
    margin-left: 10px;
    margin-right: -100%;
    vertical-align: bottom;
    width: 100%
}

.link-button {
    align-items: center;
    border: 1px solid var(--cor-evento);
    border-radius: 5px;
    color: var(--cor-evento);
    cursor: pointer;
    display: inline-flex;
    gap: 7px;
    margin: 10px 0;
    padding: 5px 10px
}

.link-button svg {
    height: 20px;
    width: 20px
}

.conteudo {
    display: block;
    margin: 28px auto 35px;
    max-width: 1400px;
    min-height: 520px;
    padding: 0
}

.conteudo h1,.conteudo h2 {
    color: var(--text-default)
}

.conteudo h1 {
    font-size: 24px
}

@media screen and (max-width: 1500px) {
    .conteudo {
        margin:28px 3% 48px
    }
}

.conteudo.buscar {
    margin-top: 100px
}

.conteudo.buscar .lista {
    justify-content: flex-start
}

@media screen and (max-width: 600px) {
    .conteudo.buscar {
        margin-top:70px; /* Ajustado */
    }
}

.aviso {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 15px auto;
    max-width: 600px;
    text-align: center
}

.aviso img {
    width: 250px
}

.aviso p {
    color: var(--texto)
}

.aviso .btn-outline {
    border-radius: 5px;
    font-size: .9em
}

.card .info {
    width: 65%
}

.card .info .nome {
    color: var(--azul);
    font-weight: 600
}

.card .info .cidade {
    color: var(--link)
}

.card .info .lugar {
    color: var(--cinza-forte)
}

@media screen and (max-width: 600px) {
    .card .info.home .cidade {
        font-weight:500;
        padding: 2px 0
    }
}

.card:hover {
    box-shadow: 0 21px 32px -16px rgba(46,55,77,.15);
    transform: scale(1.05)
}

.eventos.ultimos .lista {
    gap: 25px;
    justify-content: flex-start;
    row-gap: 12px
}

@media screen and (min-width: 1500px) {
    .eventos.ultimos .lista {
        gap:35px
    }
}

@media screen and (max-width: 1400px) {
    .eventos.ultimos .lista {
        gap:18px
    }
}

.react-loading-skeleton {
    border-radius: 20px 20px 0 0
}

@media screen and (max-width: 600px) {
    .hidden-lg {
        display:block
    }

    .hidden-sm {
        display: none
    }
}

@media screen and (min-width: 601px) {
    .hidden-lg {
        display:none
    }

    .hidden-sm {
        display: block
    }
}

.box-aviso {
    align-items: center;
    background-color: #f3a02b;
    border-radius: 8px;
    color: #fff;
    display: flex;
    font-weight: 500;
    gap: 10px;
    letter-spacing: .5px;
    margin: 20px 0 -34px;
    padding: 10px
}

.box-aviso svg {
    height: 34px;
    width: 34px
}

@media screen and (max-width: 600px) {
    .box-aviso {
        margin:-13px 3% -11px
    }

    .box-aviso svg {
        display: none
    }
}

.info {
    border: 1px solid transparent;
    color: var(--texto);
    margin: 0 auto;
    width: 100%
}

.info .info-header {
    border: 1px solid #ddd;
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0 1px 1px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 25px 15px
}

.info .info-header p {
    align-items: center;
    gap: 3px
}

.info .info-header svg {
    height: 15px;
    width: 15px
}

.info .info-header b {
    font-weight: 500
}

.info .info-header a {
    color: var(--cor-evento)
}

.info .info-body {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0,0,0,.15);
    font-size: .9em;
    padding: 25px 20px
}

.info .info-body p {
    line-height: 25px
}

.info .info-body a {
    color: var(--cor-evento)
}

.info.location .info-body {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.info .subtitle {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .025em;
    margin-bottom: 15px;
    padding: 20px 0 5px;
    position: relative;
    text-transform: uppercase
}

.info .subtitle:after {
    background: var(--cor-evento);
    bottom: 0;
    content: "";
    display: block;
    height: .125em;
    left: 0;
    position: absolute;
    width: 4%
}

.info .card {
    justify-content: center;
    max-width: 175px;
    min-height: 142px
}

.info .card .imagem {
    height: 125px;
    margin-bottom: 0
}

.info .card .imagem img {
    object-fit: cover
}

.info .card .artista {
    color: var(--texto);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 20px 0;
    text-align: center;
    text-transform: uppercase
}

.info .flex-info {
    display: flex;
    gap: 5px;
    margin-bottom: 12px
}

.info .flex-info svg {
    height: 20px;
    width: 20px
}

.info .atracoes {
    display: grid;
    gap: 44px 30px;
    grid-template-columns: repeat(5,1fr);
    justify-items: center;
    margin: 25px auto
}

@media screen and (max-width: 1250px) {
    .info .atracoes {
        gap:35px 55px;
        grid-template-columns: repeat(4,1fr)
    }
}

@media screen and (max-width: 1100px) {
    .info .atracoes {
        grid-template-columns:repeat(3,1fr)
    }
}

@media screen and (max-width: 830px) {
    .info .atracoes {
        grid-template-columns:repeat(2,1fr)
    }
}

@media screen and (max-width: 550px) {
    .info .atracoes {
        grid-template-columns:repeat(1,1fr)
    }
}

.info button {
    align-items: center;
    background-color: transparent;
    border: .2em solid var(--cor-evento);
    border-radius: 5px;
    color: var(--cor-evento);
    cursor: pointer;
    display: flex;
    font-family: Rubik;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    letter-spacing: .02em;
    padding: 5px 10px
}

.info button svg {
    height: 20px;
    width: 20px
}

#informacoes .info-body {
    border-radius: 0 0 8px 8px
}

#informacoes .info-body span {
    font-family: Rubik!important
}

#informacoes .info-body img {
    max-width: 100%
}

#encerrado {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 40px auto;
    max-width: 70%;
    text-align: center
}

@media screen and (max-width: 600px) {
    #encerrado {
        max-width:100%
    }
}

#encerrado h3 {
    color: #3f3f3f;
    font-size: 1.75em
}

.artistas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.artistas-card {
    border: 1px solid var(--border-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column
}

.artistas-card img {
    border-radius: 20px 20px 0 0;
    height: 150px;
    object-fit: cover;
    object-position: 0 2%;
    width: 200px
}

.artistas-card:hover {
    transform: scale(1.01)
}

.artistas-info {
    display: flex;
    flex-direction: column;
    letter-spacing: .15px;
    margin: 15px 0
}

.artistas-info span {
    text-align: center;
    text-transform: uppercase
}

.artistas-info span:first-of-type {
    color: var(--texto);
    font-weight: 700
}

.artistas-info span:last-of-type {
    color: var(--cinza-forte)
}

.layout.artista {
    margin: 0 auto;
    min-height: 600px
}

.layout.artista .side-menu {
    color: var(--azul);
    display: flex;
    flex-direction: column;
    gap: 10px
}

.layout.artista .side-menu .titulo h1 {
    font-size: 26px;
    font-weight: 500
}

@media screen and (max-width: 600px) {
    .layout.artista .side-menu {
        align-items:center;
        text-align: center
    }

    .layout.artista {
        margin-top: -125px
    }
}

.layout.artista .lista {
    justify-content: flex-start
}

.redes-sociais {
    display: flex;
    flex-direction: row;
    gap: 8px
}

.redes-sociais a {
    align-items: center;
    background-color: hsla(0,0%,60%,.2);
    border-radius: 50px;
    color: var(--cor-evento);
    display: flex;
    padding: 6px
}

.redes-sociais a svg {
    height: 20px;
    width: 20px
}

@media screen and (max-width: 600px) {
    .redes-sociais a {
        padding:10px
    }

    .redes-sociais a svg {
        height: 25px;
        width: 25px
    }
}

.spotify {
    align-items: center;
    background-color: hsla(0,0%,60%,.2);
    border-radius: 12px;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 9px;
    line-height: 19px;
    padding: 10px
}

.spotify,.spotify svg {
    color: var(--azul)
}

.spotify svg:first-of-type {
    height: 23px;
    width: 23px
}

.spotify svg:last-of-type {
    height: 10px;
    width: 10px
}

.spotify span {
    font-weight: 500
}

.btn-comprar {
    background-color: var(--cor-evento);
    border-radius: 5px;
    color: var(--white);
    padding: 25px 40px
}

.btn-comprar,.btn-loja {
    cursor: pointer;
    display: flex;
    font-weight: 500;
    justify-content: center;
    letter-spacing: 1px;
    line-height: normal;
    position: relative;
    text-align: center;
    text-transform: uppercase
}

.btn-loja {
    background-color: var(--white);
    border: 1px solid var(--cor-evento);
    border-radius: 5px;
    color: var(--cor-evento);
    padding: 15px 40px
}

.btn-primaria {
    background-color: var(--primaria);
    border-radius: 5px;
    color: var(--white);
    font-size: .9em;
    font-weight: 700;
    line-height: normal;
    padding: 20px 60px;
    text-align: center
}

.btn-outline,.btn-primaria {
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase
}

.btn-outline {
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #868585;
    font-weight: 500;
    margin: 0 auto;
    padding: 20px 40px;
    width: 215px
}

#comprar-flutuante {
    align-items: center;
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    border-top: 1px solid #e7e7e7;
    bottom: 0;
    box-shadow: 0 0 4px rgba(0,0,0,.25);
    display: flex;
    justify-content: space-evenly;
    left: 0;
    padding: 20px 15px;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 10
}

#comprar-flutuante button {
    padding: 14px 50px
}

#comprar-flutuante.esconder {
    height: 0;
    opacity: 0;
    transition: all .2s linear
}

#comprar-flutuante.mostrar {
    height: 40px;
    opacity: 1;
    transition: all .2s linear
}

#comprar-flutuante .texto {
    text-align: left
}

#comprar-flutuante .sessoes span {
    font-size: 14px
}

@media screen and (max-width: 600px) {
    #comprar-flutuante {
        justify-content:space-between
    }

    #comprar-flutuante .sessoes {
        display: none
    }

    #comprar-flutuante .texto {
        width: 50%
    }

    #comprar-flutuante .texto p {
        font-size: 14px
    }
}

#comprar-flutuante p {
    color: var(--texto);
    font-size: 19px;
    font-weight: 500
}

#comprar-flutuante a {
    font-size: .9em;
    padding: 20px 25px
}

@media screen and (max-width: 600px) {
    #comprar-flutuante {
        width:93%
    }

    #comprar-flutuante span {
        font-size: .9em;
        text-align: left;
        width: 45%
    }

    #comprar-flutuante a {
        padding: 15px
    }
}

@media(min-width: 601px)and (max-width:900px) {
    #comprar-flutuante p {
        font-size:14px;
        max-width: 250px
    }
}

.vitrine.navbar {
    gap: 50%;
    justify-content: space-around
}

.vitrine.navbar .evento {
    align-items: center;
    color: var(--texto);
    display: flex;
    gap: 10px;
    padding: 5px 0
}

.vitrine.navbar .evento img {
    border-radius: 5px;
    width: 80px
}

.vitrine.navbar .evento .info h3 {
    font-size: 1.3em
}

.vitrine.navbar .evento .info span {
    color: var(--link)
}

.vitrine.navbar .close svg {
    height: 25px;
    width: 25px
}

@media screen and (max-width: 600px) {
    .vitrine.navbar {
        gap:10px;
        height: auto
    }

    .vitrine.navbar .evento {
        padding-left: 20px
    }

    .vitrine.navbar .evento .info h3 {
        font-size: 1.2em
    }

    .vitrine.navbar .close {
        padding-right: 20px
    }
}

.vitrine#comprar-flutuante {
    color: #667085;
    text-align: left
}

.vitrine#comprar-flutuante .quantidade b {
    font-size: 1.5em
}

.vitrine#comprar-flutuante .valor b {
    color: #3f3f3f;
    font-size: 1.75em
}

.vitrine#comprar-flutuante .btn-primaria {
    padding: 20px 75px
}

@media screen and (max-width: 600px) {
    .vitrine#comprar-flutuante .btn-primaria {
        padding:20px
    }
}

.vitrine .ingressos {
    margin: 50px auto 150px;
    max-width: 1200px
}

@media screen and (max-width: 600px) {
    .vitrine .ingressos {
        margin-top:70px; /* Ajustado */
    }
}

.abertura-de-vendas {
    color: #3f3f3f;
    margin: 50px auto 125px;
    max-width: 900px;
    text-align: center
}

.abertura-de-vendas .contador {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.abertura-de-vendas .cronometro ul {
    align-items: center;
    display: flex;
    justify-content: center;
    padding-left: 0
}

.abertura-de-vendas .cronometro ul li {
    display: inline-block;
    font-size: 1.2em;
    list-style-type: none;
    padding: 0 1em .2em
}

@media screen and (max-width: 600px) {
    .abertura-de-vendas .cronometro ul li {
        padding:0 .5em .2em
    }
}

.abertura-de-vendas .cronometro ul li p:first-of-type {
    color: var(--primaria);
    display: block;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 48px
}

.abertura-de-vendas .cronometro ul .colon {
    font-size: 2em;
    padding: 0 0 32px
}

.abertura-de-vendas .notificacao {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.abertura-de-vendas .notificacao img {
    width: 250px
}

.abertura-de-vendas .notificacao h3 {
    font-size: 1.75em
}

@media screen and (max-width: 600px) {
    .abertura-de-vendas {
        margin:40px;
        padding-bottom: 50px
    }
}

.lista {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
    gap: 20px 16px;
    justify-content: space-between;
    margin: 25px auto
}

.lista:after {
    content: "";
    flex: auto
}

.lista.artista {
    gap: 35px 32px;
    justify-items: center;
    margin: 10px auto
}

@media screen and (max-width: 1650px) {
    .lista.artista {
        gap:35px 32px;
        grid-template-columns: repeat(4,1fr)
    }
}

@media screen and (max-width: 1400px) {
    .lista.artista {
        grid-template-columns:repeat(3,1fr)
    }
}

@media screen and (max-width: 1100px) {
    .lista.artista {
        grid-template-columns:repeat(2,1fr)
    }
}

@media screen and (max-width: 800px) {
    .lista.artista {
        grid-template-columns:repeat(1,1fr);
        margin: 0
    }
}

.card {
    align-content: flex-start;
    border: 1px solid var(--card-border);
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    max-width: 250px;
    min-height: 240px;
    transition: transform .2s;
    width: 250px
}

@media screen and (max-width: 1440px) {
    .card {
        max-width:245px
    }
}

@media screen and (max-width: 1400px) {
    .card {
        max-width:240px
    }
}

@media screen and (max-width: 1380px) {
    .card {
        max-width:none;
        width: 23%
    }
}

@media screen and (max-width: 1100px) {
    .card {
        width:30%
    }
}

@media screen and (max-width: 800px) {
    .card {
        width:45%
    }
}

@media screen and (max-width: 600px) {
    .card {
        box-shadow:0 16px 64px -16px rgba(46,55,77,.05)
    }
}

.card .imagem {
    height: 150px;
    margin-bottom: 15px;
    width: 100%
}

.card .imagem span {
    width: 100%
}

.card .imagem img {
    border-radius: 20px 20px 0 0;
    height: 100%;
    max-height: 150px;
    object-fit: cover;
    width: 100%
}

.card .info {
    align-self: center;
    display: flex;
    flex-direction: column;
    width: 70%
}

.card .info .nome {
    color: var(--text-default);
    font-size: 18px;
    font-weight: 500
}

@media screen and (min-width: 600px) {
    .card .info .nome {
        letter-spacing:.01em
    }
}

.card .info .cidade {
    color: var(--text-secundary);
    font-size: 14px;
    padding: 3px 0 10px
}

.card .info .lugar {
    color: var(--text-gray);
    font-size: 13px
}

@media screen and (min-width: 600px) {
    .card .info .lugar {
        display:none
    }
}

.card:focus,.card:hover {
    text-decoration: none
}

@media screen and (max-width: 600px) {
    #eventos {
        align-items:center;
        margin-top: -25px
    }

    .lista {
        gap: 2px;
        margin: 15px 2%
    }

    .card {
        align-items: center;
        border: none;
        border-bottom: 1px solid #e0e0e0;
        border-radius: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        max-height: none;
        min-height: auto;
        min-width: 100%;
        padding: 22px 0;
        width: 100%
    }

    .card:last-of-type {
        border-bottom: none
    }

    .card .imagem {
        height: 100px;
        margin-bottom: 0;
        order: 2;
        width: 205px
    }

    .card .imagem img {
        border-radius: 20px;
        object-fit: cover
    }

    .card .data {
        order: 1
    }

    .card .info {
        gap: 2px;
        letter-spacing: .02em;
        order: 3;
        width: 100%
    }

    .card .info .nome {
        font-size: 20px
    }

    .card:hover {
        box-shadow: none
    }
}

.destaques .carrosel {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
    width: 103%
}

.destaques .carrosel a {
    height: 200px;
    min-width: 155px;
    position: relative
}

.destaques .carrosel a svg {
    animation: stroke-draw 6s ease-out infinite alternate;
    fill: none;
    stroke: var(--primaria);
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-width: 1
}

.destaques .carrosel a .background img {
    border-radius: 50%;
    filter: brightness(.5);
    left: 50%;
    position: absolute;
    top: 49%;
    transform: translate(-50%,-50%);
    width: 140px
}

.destaques .carrosel a .info {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 700;
    gap: 5px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 28%;
    z-index: 2
}

.destaques .carrosel a .info img {
    height: 50px;
    width: auto
}

@media screen and (min-width: 600px) {
    .destaques .carrosel {
        gap:20px;
        overflow-x: hidden
    }
}

@keyframes stroke-draw {
    0% {
        stroke: var(--primaria);
        stroke-dasharray: 1
    }

    to {
        stroke: var(--primaria);
        stroke-dasharray: 8;
        transform: rotate(180deg)
    }
}

.baixe-app {
    align-items: center;
    background-color: var(--background-cinza);
    display: flex;
    gap: 10px;
    padding: 20px 5px;
    width: 109%
}

.baixe-app h5 {
    font-size: 19px
}

.baixe-app span {
    color: var(--cinza-forte)
}

.baixe-app a {
    color: var(--link)
}

.baixe-app img {
    width: 100px
}

.baixe-app .info {
    display: flex;
    flex-direction: column;
    gap: 5px
}

@media screen and (min-width: 600px) {
    .baixe-app {
        display:none
    }
}

.overlay {
    background-color: #fff;
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999
}

.nav-search {
    box-shadow: 0 1px 2px rgba(0,0,0,.15)
}

.nav-search .modal-busca {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 55px
}

.nav-search .voltar {
    padding: 4px 5px 0 15px
}

.nav-search #input-mobile {
    border: none;
    flex: 1 1 auto;
    font-size: 17px
}

.nav-search #input-mobile:focus-visible {
    border: none
}

.nav-search #input-mobile::placeholder {
    color: #8794a0
}

.nav-search button {
    background-color: transparent;
    border: none;
    color: #3f3f3f;
    padding: 5px 15px 0 0
}

.nav-search input:focus,.nav-search textarea:focus {
    outline: none
}

.mais-procurados {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 25px 5%
}

.mais-procurados .titulo {
    color: #b4b4b4;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .015em
}

.mais-procurados .listagem {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.mais-procurados .listagem .item {
    align-items: center;
    color: #181818;
    display: flex;
    justify-content: space-between
}

.mais-procurados .listagem .item .texto {
    display: flex;
    flex-direction: column
}

.mais-procurados .listagem .item .texto .nome {
    font-size: 18px
}

.mais-procurados .listagem .item .texto .categoria {
    color: #b4b4b4;
    font-size: 12px;
    letter-spacing: .01em
}

.mais-procurados .listagem .item svg {
    height: 29px;
    width: 20px
}

.modal-busca .voltar svg,.modal-busca button svg {
    height: 20px;
    width: 20px
}

@media screen and (max-width: 600px) {
    .resultados-busca {
        display:none
    }
}

@media screen and (min-width: 601px) {
    .nav-search {
        display:none
    }
}

.modelo-evento-simples .navbar {
    max-width: none
}

.modelo-evento-simples .navbar .logo {
    padding-left: 20px
}

.modelo-evento-simples .header-bg:after {
    background: linear-gradient(0deg,rgba(42,42,42,.8),rgba(42,42,42,.5));
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@media screen and (max-width: 600px) {
    .modelo-evento-simples .header-bg:after {
        height:300px
    }
}

.modelo-evento-simples .header-bg:before {
    background: inherit;
    content: "";
    filter: blur(5px);
    -moz-filter: blur(5px);
    -webkit-filter: blur(5px);
    -o-filter: blur(5px);
    height: 100%;
    margin: -5px;
    position: absolute;
    width: 100%;
    z-index: -1
}

@media screen and (max-width: 600px) {
    .modelo-evento-simples .header-bg:before {
        height:300px
    }
}

@media screen and (min-width: 1920px) {
    .modelo-evento-simples .header-bg:before {
        width:98%
    }
}

.modelo-evento-simples .header-bg {
    background-image: var(--background-simples);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

@media screen and (min-width: 600px) {
    .modelo-evento-simples .header-bg {
        display:flex;
        flex-direction: column;
        height: auto;
        justify-content: space-between;
        min-height: 250px
    }

    .modelo-evento-simples .header-bg .acesso .login,.modelo-evento-simples .header-bg .logo a img,.modelo-evento-simples .header-bg .logo svg {
        color: var(--cor-evento-secundaria)
    }

    .modelo-evento-simples .header-bg .acesso .cadastrar {
        background-color: var(--cor-evento-secundaria);
        color: var(--cor-evento)
    }
}

@media(min-width: 601px)and (max-width:900px) {
    .modelo-evento-simples .header-bg .acesso .login {
        display:none
    }
}

.modelo-evento-simples#scroll-banner .header-bg {
    min-height: 0
}

@media screen and (min-width: 1400px) {
    .modelo-evento-simples .container-evento aside .evento-menu {
        margin-top:-84px;
        z-index: 200
    }
}

@media screen and (min-width: 1920px) {
    .modelo-evento-simples {
        background-image:var(--background-simples);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }

    .modelo-evento-simples:after {
        background: linear-gradient(0deg,rgba(42,42,42,.6),rgba(42,42,42,.6));
        content: "";
        height: 250px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    .modelo-evento-simples:before {
        background: inherit;
        content: "";
        filter: blur(5px);
        -moz-filter: blur(5px);
        -webkit-filter: blur(5px);
        -o-filter: blur(5px);
        height: 250px;
        position: absolute;
        transition: all 2s linear;
        -moz-transition: all 2s linear;
        -webkit-transition: all 2s linear;
        -o-transition: all 2s linear;
        width: 100%;
        z-index: -1
    }
}

.modelo-evento-completo .navbar {
    max-width: none
}

.modelo-evento-completo .navbar .logo {
    padding-left: 20px
}

.modelo-evento-completo .header-bg:after {
    background: linear-gradient(180deg,transparent,rgba(0,0,0,.4) 64.58%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@media screen and (max-width: 600px) {
    .modelo-evento-completo .header-bg:after {
        height:300px
    }
}

.modelo-evento-completo .header-bg:after.artista {
    background: linear-gradient(180deg,rgba(0,0,0,.3),transparent 64.58%)
}

@media screen and (max-width: 600px) {
    .modelo-evento-completo .header-bg:after.artista {
        background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.35) 64.58%)
    }
}

.modelo-evento-completo .header-bg.artista:after {
    background: linear-gradient(180deg,transparent,rgba(0,0,0,.4) 92%)
}

.modelo-evento-completo .header-bg {
    background-image: var(--background-banner-mobile);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px
}

@media screen and (min-width: 600px) {
    .modelo-evento-completo .header-bg {
        background-image:var(--background-banner);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        height: 300px;
        justify-content: space-between
    }

    .modelo-evento-completo .header-bg .acesso .login,.modelo-evento-completo .header-bg .logo a img,.modelo-evento-completo .header-bg .logo svg {
        color: var(--cor-evento-secundaria)
    }

    .modelo-evento-completo .header-bg .acesso .cadastrar {
        background-color: var(--cor-evento-secundaria);
        color: var(--cor-evento)
    }
}

@media screen and (min-width: 1300px)and (max-width:1600px) {
    .modelo-evento-completo .header-bg {
        height:275px
    }
}

@media screen and (min-width: 1400px) {
    .modelo-evento-completo .container-evento aside .evento-menu {
        margin-top:-84px;
        z-index: 200
    }
}

@media screen and (min-width: 1920px) {
    .modelo-evento-completo {
        background-image:var(--background-banner);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }

    .modelo-evento-completo:after {
        background: linear-gradient(0deg,rgba(42,42,42,.6),rgba(42,42,42,.6));
        content: "";
        height: 300px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    .modelo-evento-completo:before {
        background: inherit;
        content: "";
        filter: blur(5px);
        -moz-filter: blur(5px);
        -webkit-filter: blur(5px);
        -o-filter: blur(5px);
        height: 300px;
        position: absolute;
        transition: all 2s linear;
        -moz-transition: all 2s linear;
        -webkit-transition: all 2s linear;
        -o-transition: all 2s linear;
        width: 100%;
        z-index: -1
    }
}

@media screen and (max-width: 600px) {
    .modelo-evento-completo {
        height:230px
    }
}

.header-bg {
    align-self: start;
    margin: 0 auto;
    max-width: 1920px;
    position: sticky;
    top: -1px;
    z-index: 2
}

.header-bg .titulo {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 14px;
    z-index: 10
}

.header-bg .titulo .nome {
    align-self: flex-start;
    color: var(--white);
    margin-bottom: 0;
    margin-top: 10px;
    padding-left: 280px;
    position: relative
}

.header-bg .titulo .nome h1 {
    font-size: 2.3em;
    font-weight: 500
}

.header-bg .titulo .nome h4 {
    font-weight: 400
}

.header-bg .titulo .helpers {
    align-self: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    width: 100%
}

.header-bg .titulo .sessoes {
    padding-left: 280px
}

.header-bg .comprar {
    align-items: center;
    display: flex;
    gap: 20px;
    margin-right: 60px
}

.header-bg .comprar .btn-comprar {
    border-color: var(--cor-evento);
    margin-bottom: -40px
}

@media screen and (max-width: 830px) {
    .header-bg .comprar .btn-comprar {
        font-size:14px;
        padding: 25px 30px
    }
}

@media screen and (min-width: 1200px) {
    .header-bg .comprar .btn-comprar {
        min-width:180px
    }
}

.header-bg .comprar .btn-loja {
    align-items: center;
    border-color: var(--cor-evento);
    display: flex;
    gap: 10px;
    margin-bottom: -40px
}

@media screen and (max-width: 830px) {
    .header-bg .comprar .btn-loja {
        font-size:14px;
        padding: 25px 30px
    }
}

@media screen and (max-width: 600px) {
    .header-bg {
        height:230px
    }
}

#scroll-banner .titulo {
    display: none
}

#scroll-banner .content {
    padding-top: 50px
}

.sessoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
    max-width: 1000px
}

.sessoes span {
    align-items: center;
    background-color: var(--cor-evento);
    border-radius: 10px;
    color: var(--white);
    display: flex;
    font-size: 14px;
    gap: 5px;
    padding: 5px 10px
}

@media screen and (max-width: 600px) {
    .sessoes span {
        background-color:#fff;
        border: 2px solid var(--cor-evento);
        color: var(--cor-evento);
        gap: 3px;
        gap: 8px 4px;
        justify-content: center
    }
}

.sessoes span.disable {
    background-color: #a8a8a8;
    border: 1px solid #a8a8a8;
    color: #fff
}

.sessoes svg {
    height: 14px;
    width: 14px
}

@media screen and (max-width: 600px) {
    .sessoes {
        gap:8px 4px;
        margin-bottom: 11px
    }
}

.container-evento {
    margin: 0 auto;
    max-width: 1920px;
    padding: 0 2% 45px
}

.container-evento aside {
    align-self: start;
    position: sticky;
    top: 128px;
    z-index: 10
}

.container-evento aside .evento-menu {
    margin-top: -115px
}

.container-evento aside.sem-foto {
    margin-top: 120px
}

@media screen and (max-width: 600px) {
    .container-evento aside.sem-foto {
        margin-top:225px
    }

    .container-evento aside .evento-menu {
        margin-top: 0
    }
}

@media screen and (min-width: 600px) {
    .container-evento .layout .content {
        margin-bottom:100px
    }

    #scroll-banner {
        transition: max-height .15s ease-out
    }

    #scroll-banner .header-bg {
        height: 73px;
        max-width: none;
        position: fixed;
        width: 100%;
        z-index: 10
    }
}

@media screen and (min-width: 600px)and (min-width:1550px) {
    #scroll-banner .header-bg .navbar .logo {
        padding-left:300px
    }
}

@media screen and (min-width: 600px)and (min-width:1600px) {
    #scroll-banner .header-bg .navbar .logo {
        padding-left:295px
    }
}

@media screen and (min-width: 600px)and (max-width:1549px) {
    #scroll-banner .header-bg .navbar .logo {
        padding-left:280px
    }
}

@media screen and (min-width: 600px)and (min-width:1761px) {
    #scroll-banner .header-bg .navbar .logo {
        padding-left:300px
    }
}

@media screen and (min-width: 600px)and (min-width:2000px) {
    #scroll-banner .header-bg .navbar .logo {
        padding-left:17%
    }
}

@media screen and (min-width: 600px)and (min-width:2500px) {
    #scroll-banner .header-bg .navbar .logo {
        padding-left:23%
    }
}

@media screen and (min-width: 600px) {
    #scroll-banner .header-bg:after {
        background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.4) 64.58%);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    #scroll-banner .container-evento .aside {
        align-self: start;
        position: sticky;
        top: 113px;
        z-index: 100
    }
}

@media screen and (max-width: 600px) {
    .container-evento .layout {
        gap:15px;
        margin-top: -125px;
        z-index: 10
    }

    .container-evento aside {
        margin: 0 auto;
        position: unset;
        z-index: 0
    }

    .container-evento aside .evento-menu {
        align-items: center;
        gap: 10px
    }

    .container-evento aside .evento-menu .titulo {
        align-items: center
    }

    .container-evento aside .evento-menu .titulo h1 {
        font-size: 27px
    }

    .container-evento aside .evento-menu .titulo .data .dia {
        font-size: 40px
    }

    .container-evento aside .evento-menu .titulo .data .mes {
        font-size: 22px
    }

    .container-evento aside .evento-menu a img {
        height: 325px;
        width: 325px
    }

    .container-evento aside .side-menu {
        display: none
    }

    .container-evento aside .titulo {
        display: flex
    }

    .container-evento aside .comprar {
        background-color: var(--primaria);
        border-radius: 5px;
        margin-top: 20px;
        padding: 20px 36%
    }

    .container-evento aside .comprar a {
        color: var(--white);
        font-size: 18px;
        font-weight: 600;
        letter-spacing: .04em
    }

    .container-evento #ingressos {
        display: none
    }

    .container-evento .info .info-header {
        border: none;
        box-shadow: none;
        margin-bottom: 24px;
        padding: 0
    }

    .container-evento .info .info-body {
        border: none;
        box-shadow: none;
        font-size: 1em;
        padding: 0
    }

    .container-evento .info .info-body .subtitle {
        font-size: 1.45em
    }

    .container-evento .info .info-body .atracoes {
        gap: 15px 10px;
        grid-template-columns: repeat(2,1fr)
    }

    .container-evento .info .info-body .atracoes .card {
        border: 1px solid #e0e0e0;
        border-radius: 15px;
        justify-content: space-between;
        min-height: auto;
        min-width: 100%
    }

    .container-evento .info .info-body .atracoes .imagem {
        height: 60px;
        margin-right: 10px;
        width: 60px
    }

    .container-evento .info .info-body .atracoes .artista {
        margin-left: 10px
    }

    .container-evento .info .info-body .atracoes .imagem img {
        border-radius: 50%;
        height: 60px;
        width: 60px
    }

    .container-evento .block {
        padding: 0 3%
    }

    .container-evento .content {
        margin-bottom: 100px;
        margin-top: 0
    }

    .logo svg {
        color: var(--white)
    }

    .header-bg .navbar {
        align-items: flex-start;
        height: 200px;
        padding-top: 23px;
        position: inherit
    }

    .header-bg .navbar .acesso {
        margin-top: 0
    }

    .header-bg .navbar .acesso svg {
        color: var(--cor-evento);
        height: 35px;
        width: 35px
    }

    .header-bg .navbar .logo {
        padding-top: 3px
    }

    .header-bg .titulo {
        display: none
    }

    #info-mobile {
        display: flex;
        flex-direction: column;
        gap: 12px;
        order: -2;
        padding: 0 3%
    }

    #info-mobile h2 {
        color: var(--text-dark);
        font-size: 32px
    }

    #info-mobile h4 {
        color: var(--text-dark);
        font-weight: 500;
        margin: 8px 0
    }
}

@media screen and (min-width: 601px) {
    #info-mobile,.container-evento aside .comprar,.container-evento aside .data {
        display:none
    }
}

.cor-logo path {
    fill: red
}

ul#switch-idiomas {
    align-items: center;
    display: block;
    display: flex;
    list-style: none
}

@media(max-width: 576px) {
    ul#switch-idiomas {
        grid-column-end:3;
        justify-content: center
    }
}

ul#switch-idiomas {
    margin: 0;
    padding: 0
}

ul#switch-idiomas li {
    margin: 0;
    padding: 0 10px 0 0
}

ul#switch-idiomas li img {
    height: 30px;
    width: 30px
}

.chat {
    border: 2px solid var(--text-primary);
    bottom: 16px;
    box-shadow: 1px 1px 10px -3px rgba(0,0,0,.5);
    cursor: pointer;
    height: 54px;
    left: 16px;
    padding: 0;
    position: fixed;
    width: 55px;
    z-index: 999
}

.chat em {
    display: inline-block;
    height: 35px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 35px
}

.chat em img {
    width: 100%
}

.chat-mark {
    border: 2px solid var(--text-primary);
    border-radius: 20px;
    bottom: 55px;
    color: #fff;
    display: none;
    font-size: 10px;
    height: 16px;
    left: 55px;
    line-height: 16px;
    position: fixed;
    text-align: center;
    width: 16px;
    z-index: 999
}

.chat-mark,.chat.chat-close {
    background-color: var(--text-primary)
}

.chat.chat-close {
    height: 50px;
    width: 50px;
    z-index: 999!important
}

.chat.chat-close img {
    width: 20px
}

.chat-text.baladapp .chat-mark {
    bottom: 60px;
    display: block;
    left: 60px
}

@media screen and (max-width: 600px) {
    .chat-text.baladapp .chat-mark.top {
        bottom:138px
    }

    .chat.top {
        bottom: 88px
    }
}

.chat.bemingressos,.chat.cruzeiro {
    background-color: var(--text-primary)
}

.chat.baladapp {
    background-color: #fff;
    border-radius: 50%;
    height: 60px;
    width: 60px
}

.chat.baladapp em {
    border-radius: 50%;
    height: 57px;
    width: 54px
}

.baladapp-modal-texto {
    font-family: Roboto
}

@media screen and (max-width: 600px) {
    .baladapp-modal-texto {
        min-height:100vh;
        padding: 20px
    }
}

.baladapp-modal-texto .title {
    align-items: center;
    display: flex;
    gap: 4px;
    justify-content: space-between
}

.baladapp-modal-texto .title h2 {
    color: var(--text-dark);
    font-size: 1.5em;
    margin: 10px 0
}

.baladapp-modal-texto .title svg {
    color: var(--text-dark);
    height: 30px;
    width: 30px
}

.baladapp-modal-texto .body {
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    margin-top: 10px
}

.baladapp-modal-texto .body h4 {
    margin: 10px 0
}

.baladapp-modal-texto .body a {
    color: var(--text-primary)
}

@media screen and (min-width: 600px) {
    .modal-info {
        background:#fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        height: auto;
        inset: 40px;
        margin: auto;
        outline: none;
        overflow: auto;
        padding: 20px;
        position: absolute;
        width: 50%
    }
}

.ReactModal__Overlay {
    z-index: 99999999
}

@media screen and (max-width: 600px) {
    .ReactModal__Overlay {
        overflow-y:auto;
        width: 100%
    }

    .ReactModal__Overlay .ReactModal__Content {
        background-color: #fff!important;
        height: 100vh!important;
        width: 100%!important
    }
}

.pdv-lista {
    display: flex;
    flex-direction: column
}

.pdv-item {
    align-items: center;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    gap: 10%;
    justify-content: space-between;
    padding: 12px 0
}

.pdv-item .info {
    display: flex;
    flex-direction: column
}

.pdv-item .info b {
    font-size: 18px
}

.pdv-item .info span {
    font-size: 14px
}

.pdv-item .icon {
    align-items: center;
    color: var(--cor-evento)!important;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.pdv-item .icon span {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap
}

.pdv-item .icon svg {
    height: 30px;
    width: 20px
}

.liberacao-venda {
    margin-top: 18px;
    text-align: center
}

.liberacao-venda h4 {
    font-weight: 500;
    margin: 10px
}

.liberacao-venda .cronometro ul {
    align-items: center;
    display: flex;
    justify-content: center;
    padding-left: 0
}

.liberacao-venda .cronometro ul li {
    display: inline-block;
    font-size: 18px;
    list-style-type: none;
    padding: 0 1em .2em;
    text-transform: uppercase
}

@media screen and (max-width: 600px) {
    .liberacao-venda .cronometro ul li {
        padding:0 .5em .2em
    }
}

.liberacao-venda .cronometro ul li p {
    color: var(--cor-evento);
    display: block;
    font-size: 48px;
    font-weight: 700;
    line-height: 58px
}

.liberacao-venda .cronometro ul .colon {
    font-size: 2em;
    padding: 0 0 32px
}

.redirecionando {
    font-size: 18px
}

.redirecionando a {
    color: var(--cor-evento)
}

.link-baladapp {
    margin: 10px 30px;
    max-width: 680px
}

@media screen and (min-width: 600px) {
    .link-baladapp {
        margin:0 auto
    }
}

.link-baladapp .header,.link-baladapp section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
    text-align: center
}

.link-baladapp .header {
    gap: 7px;
    margin: 30px 10px 25px
}

.link-baladapp .header img {
    align-self: center;
    height: 100px;
    width: 100px
}

.link-baladapp .header span:first-of-type {
    font-size: 19px;
    font-weight: 500
}

.link-baladapp .header section h2,.link-baladapp .header span {
    color: var(--text-default)
}

.link-baladapp .card-link {
    background-color: #fff;
    border: 1px solid #dadada;
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.24);
    color: var(--text-default);
    display: block;
    min-height: fit-content;
    padding: 20px;
    text-decoration: none;
    transform: scale(1)
}

.link-baladapp .card-link:hover {
    box-shadow: 0 4px 12px 0 rgba(0,0,0,.24);
    transform: scale(1.01)
}

.link-baladapp .card-link.primary {
    background-color: var(--primaria);
    border-color: var(--primaria);
    color: #fff;
    font-weight: 500
}

.link-baladapp .redes {
    padding: 10px 0
}

.link-baladapp h2 {
    color: var(--text-default)
}

.beatz {
    align-items: center;
    background-color: #2fd9ff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    text-align: center
}

.beatz img {
    margin-bottom: 36px
}

.beatz div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    width: 100%
}

.beatz .btn-comprar {
    background-color: #ffc700;
    border: 2px solid #000;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.5em;
    overflow: visible;
    padding: .75rem 1rem;
    text-shadow: 1px 0 rgba(0,0,0,.631),-1px 0 rgba(0,0,0,.631),0 1px rgba(0,0,0,.631),0 -1px rgba(0,0,0,.631),1px 1px rgba(0,0,0,.631),-1px -1px rgba(0,0,0,.631),1px -1px rgba(0,0,0,.631),-1px 1px rgba(0,0,0,.631);
    text-transform: uppercase;
    transform: skew(-6deg)
}

.beatz .btn-comprar:hover {
    background-color: #e1004f
}

@media screen and (max-width: 600px) {
    .beatz .btn-comprar {
        font-size:1.2rem
    }
}

.swiper {
    margin: 80px auto 0;
    max-width: 1400px;
    width: 95%
}

.swiper img {
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,.05);
    cursor: pointer;
    text-align: center;
    width: 100%
}

@media screen and (min-width: 600px) {
    .swiper.banner-mobile {
        display:none
    }
}

@media screen and (max-width: 600px) {
    .swiper {
        margin-top:70px; /* Ajustado */
        width: 90%
    }

    .swiper img {
        width: 100%
    }

    .swiper.banner-desktop {
        display: none
    }
}

.swiper.loading {
    height: 450px
}

.react-multiple-carousel__arrow {
    z-index: 1
}

.empty-banner {
    padding-top: 90px
}

@media screen and (max-width: 600px) {
    .empty-banner {
        padding-top:70px; /* Ajustado */
    }
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    src: url(/packs/static/stylesheets/fonts/Roboto-Regular-fc2b5060f7accec5cf74.ttf) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: bold;
    font-weight: 600;
    src: url(/packs/static/stylesheets/fonts/Roboto-Bold-f80816a5455d171f948d.ttf) format("truetype")
}

@font-face {
    font-family: Rubik;
    font-style: normal;
    font-weight: 400;
    src: url(/packs/static/stylesheets/fonts/Rubik-Regular-55fa11cdc8b9a3ee842f.ttf) format("truetype")
}

@font-face {
    font-family: Rubik;
    font-style: normal;
    font-weight: 500;
    src: url(/packs/static/stylesheets/fonts/Rubik-Medium-0e121b4fa4d6e9bc5c69.ttf) format("truetype")
}

@font-face {
    font-family: Rubik;
    font-style: normal;
    font-weight: 600;
    src: url(/packs/static/stylesheets/fonts/Rubik-SemiBold-869208702057daef053d.ttf) format("truetype")
}

@font-face {
    font-family: Rubik;
    font-style: normal;
    font-weight: 700;
    src: url(/packs/static/stylesheets/fonts/Rubik-Bold-c934eb22c2c69992b34c.ttf) format("truetype")
}

/* Safe area support para iOS */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .navbar {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

/*# sourceMappingURL=application-26ac6e1f.css.map*/