:root {
    --cor-tinta: #231f20;
    --cor-papel: #ffffff;
    --cor-cinza: #f0efef;
    --cor-texto-suave: #5b5757;
    --cor-marcador: #706b6b;
    --cor-legenda: #888281;
    --cor-borda: #dcdada;
    --cor-acento: #ff0000;
    --cor-vermelho: #ec2326;
    --cor-laranja: #ff4e00;
    --cor-roxo: #971cff;
    --cor-roxo-hover: #6f00ff;
    --fonte-titulo: "Outfit", system-ui, sans-serif;
    --fonte-texto: "Work Sans", system-ui, sans-serif;
    --curva-entrada: cubic-bezier(.22, 1, .36, 1);
    --tempo-entrada: .6s;
    --raio: 16px 4px 16px 4px;
    --raio-botao: 24px 4px 24px 4px;
    --raio-campo: 12px 4px 12px 4px;
    --raio-cartao: 4px 64px 4px 64px;
    --largura-maxima: 1560px;
    --respiro-lateral: clamp(20px, 4vw, 48px);
    --nav-altura: 84px;
    --purple-primary: var(--cor-vermelho);
    --purple-dark: #c41e21;
    --purple-light: var(--cor-laranja);
    --black: var(--cor-tinta);
    --white: var(--cor-papel);
    --gray-dark: var(--cor-tinta);
    --gray-medium: var(--cor-texto-suave);
    --gray-light: var(--cor-borda);
    --gray-lighter: var(--cor-cinza);
}

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-altura); }

body {
    font-family: var(--fonte-texto);
    color: var(--cor-tinta);
    background: var(--cor-papel);
}

@keyframes sansi-subir { from { opacity: 0; transform: translateY(24px); } }
@keyframes sansi-surgir { from { opacity: 0; } }
@keyframes sansi-aproximar { from { transform: scale(1.06); } }
@keyframes sansi-balancar { 50% { transform: translateY(5px); } }

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.25;
    padding: 16px 32px;
    border-radius: var(--raio-botao);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.botao--primario {
    background: var(--cor-vermelho);
    border-color: var(--cor-vermelho);
    color: #fff;
}

.botao--primario:hover {
    background: var(--cor-acento);
    border-color: var(--cor-acento);
    color: #fff;
}

.botao--contorno-claro {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.botao--contorno-claro:hover {
    background: #ffffff1f;
    border-color: #fff9;
    color: #fff;
}

.botao--contorno {
    background: transparent;
    border-color: currentColor;
    color: var(--cor-tinta);
}

.botao--contorno:hover {
    background: var(--cor-roxo-hover);
    border-color: var(--cor-roxo-hover);
    color: #fff;
}

.titulo {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: clamp(32px, 5vw, 54px);
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--cor-tinta);
}

.secao {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: clamp(56px, 8vw, 104px) var(--respiro-lateral);
}

/* NAV */
.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px var(--respiro-lateral);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .3s, box-shadow .3s, backdrop-filter .3s, border-color .3s;
}

.nav--rolada {
    box-shadow: 0 8px 32px #231f202e;
    backdrop-filter: saturate(180%) blur(18px);
    background: #231f2073;
    border-bottom-color: #ffffff24;
}

.nav__marca { display: block; flex: none; z-index: 2; }
.nav__logo { height: 44px; width: auto; }
.nav__logo--escuro { display: none; }

.nav__lista {
    display: flex;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    gap: 4px;
    align-items: center;
}

.nav__item { position: relative; }
.nav__link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 10px 3px;
    color: #fff;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.nav__item:hover .nav__link,
.nav__item[aria-expanded="true"] .nav__link { background: #ffffff29; }

.nav__submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 250px;
    background: #fff;
    border-radius: 14px 4px;
    box-shadow: 0 18px 50px #231f2038;
    padding: 10px;
    margin: 0;
    list-style: none;
    display: none;
    z-index: 30;
}

.nav__item[aria-expanded="true"] .nav__submenu { display: block; }

.nav__sublink {
    display: block;
    font-family: var(--fonte-texto);
    font-weight: 500;
    font-size: 15px;
    color: var(--cor-tinta);
    padding: 12px 14px;
    border-radius: 9px 3px;
    text-decoration: none;
}

.nav__sublink:hover {
    background: var(--cor-cinza);
    color: var(--cor-vermelho);
}

.nav__alternador {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px 4px;
    background: #ffffff24;
    color: #fff;
    cursor: pointer;
}

.nav__barra {
    display: block;
    width: 100%;
    height: 2.5px;
    border-radius: 2px;
    background: currentColor;
}

.nav__cta {
    flex: none;
}

@media (max-width: 1100px) {
    .nav__alternador { display: flex; }
    .nav__lista { display: none; }
    .nav__cta { display: none; }
}

.menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: var(--cor-papel);
    padding: 16px 20px 40px;
    overflow-y: auto;
    display: none;
}

.menu-mobile--aberto { display: block; }

.menu-mobile__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.menu-mobile__logo { height: 34px; }
.menu-mobile__fechar {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 12px 4px;
    background: var(--cor-cinza);
}

.menu-mobile__link {
    display: block;
    padding: 14px 4px;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 20px;
    color: var(--cor-tinta);
    text-decoration: none;
}

/* HERO */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    max-height: 1000px;
    background: var(--cor-tinta);
    overflow: hidden;
}

.hero__midia { position: absolute; inset: 0; }

.hero__poster,
.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.hero__poster { animation: sansi-aproximar 1.8s var(--curva-entrada) both; }

.hero__video {
    position: absolute;
    inset: 0 0 auto;
    height: 122%;
    opacity: 0;
    transition: opacity .6s ease;
}

.hero__video--visivel { opacity: 1; }

.hero__vinheta {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #231f2029;
}

.hero__conteudo {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 96px 24px 48px;
    text-align: center;
}

.hero__marca {
    width: 620px;
    max-width: 88vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__logo {
    width: 100%;
    height: auto;
    animation: sansi-subir .8s var(--curva-entrada) .15s both;
}

.hero__chamada {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    color: #fff;
    margin: 28px 0 0;
    width: 100%;
    white-space: nowrap;
    font-size: clamp(16px, 4.6vw, 36px);
    line-height: 1.25;
    animation: sansi-subir .8s var(--curva-entrada) .3s both;
}

.hero__chamada--animada { animation: none; }

.hero__chamada--deslizando {
    transition: transform 1s var(--curva-entrada) .3s;
}

.hero__letra {
    display: inline-block;
    white-space: pre;
    animation: sansi-letra .5s var(--curva-entrada) both;
    animation-delay: calc(.3s + var(--indice, 0) * 12ms);
}

@keyframes sansi-letra {
    from { opacity: 0; transform: translateX(22px); }
}

.sr-apenas {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav--escura .nav__logo--claro { display: block; }
.nav--escura .nav__logo--escuro { display: none; }

.nav--escura.nav--rolada {
    background: #231f2073;
    border-bottom-color: #ffffff24;
}


.hero__acoes {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap;
    justify-content: center;
    animation: sansi-subir .8s var(--curva-entrada) .45s both;
}

.hero__rolar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(20px, 4vh, 40px);
    z-index: 5;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: var(--raio);
    box-shadow: inset 0 0 0 2px #ffffff52;
    text-decoration: none;
    animation: sansi-surgir .8s var(--curva-entrada) .6s both;
}

.hero__seta { animation: sansi-balancar 1.8s ease-in-out infinite; }

/* FAIXA */
.faixa {
    background: var(--cor-cinza);
    padding: 80px var(--respiro-lateral);
}

.faixa__interno {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
}

.faixa__dado {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: clamp(28px, 4.4vw, 54px);
    line-height: 1.06;
    color: var(--cor-tinta);
}

.faixa__ponto {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: linear-gradient(-45deg, #fff, var(--cor-acento));
}

/* RESULTADOS */
.resultados {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: 80px var(--respiro-lateral);
    display: flex;
    align-items: center;
    gap: 56px;
    flex-wrap: wrap;
}

.resultados__coluna { flex: 1 1 620px; max-width: 741px; }

.resultados__abas {
    display: inline-flex;
    background: var(--cor-cinza);
    padding: 6px;
    border-radius: 16px 5px;
    gap: 6px;
    margin-top: 16px;
}

.aba {
    border: none;
    cursor: pointer;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 16px;
    padding: 14px 34px;
    border-radius: var(--raio-campo);
    background: transparent;
    color: var(--cor-tinta);
}

.aba[aria-selected="true"] {
    background: var(--cor-roxo);
    color: #fff;
}

.busca {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

.busca__campo {
    flex: 1 1 320px;
    max-width: 514px;
    border: 2px solid var(--cor-cinza);
    border-radius: var(--raio-campo);
    padding: 15px 18px;
    font-size: 16px;
    font-family: var(--fonte-texto);
}

.busca__campo:focus { border-color: var(--cor-vermelho); outline: none; }

.busca__botao {
    border: none;
    cursor: pointer;
    color: #fff;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: var(--raio);
    background: var(--cor-vermelho);
}

.busca__botao:hover { background: var(--cor-acento); }

.resultados__arte { flex: 1 1 480px; max-width: 763px; }
.resultados__foto { display: block; margin-left: auto; width: 100%; max-width: 420px; height: auto; border-radius: var(--raio); }

/* REDES */
.redes {
    position: relative;
    background: var(--cor-cinza);
    padding: 80px var(--respiro-lateral);
    margin-bottom: 80px;
}

.redes__barra {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    background: var(--cor-papel);
    border-radius: var(--raio-cartao);
    padding: 52px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.redes__titulo {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.12;
    margin: 0;
    max-width: 560px;
}

.redes__lista {
    display: flex;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.redes__link {
    width: 62px;
    height: 62px;
    border-radius: 24px 4px;
    background: var(--cor-cinza);
    color: var(--cor-tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.redes__link:hover {
    background: var(--cor-roxo-hover);
    color: #fff;
}

.redes__link svg { width: 32px; height: 32px; }

/* GALERIA */
.galeria__cabecalho {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: 0 var(--respiro-lateral) 32px;
}

.galeria__grade {
    display: grid;
    grid-template-columns: 550fr 550fr 811fr;
    grid-template-rows: 300px 300px;
    gap: 2px;
}

.galeria__celula {
    overflow: hidden;
    background: var(--cor-tinta);
    border: 0;
    padding: 0;
}

.galeria__celula img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.galeria__celula:nth-child(1) { grid-column: 1; grid-row: 1; }
.galeria__celula:nth-child(2) { grid-column: 1; grid-row: 2; }
.galeria__celula:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.galeria__celula:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }

/* CADASTRO */
.cadastro {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: 80px var(--respiro-lateral);
    text-align: center;
}

.cadastro__logo { height: 60px; margin-bottom: 24px; }

.cadastro__titulo {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.2;
    max-width: 760px;
    margin: 0 auto 24px;
}

.cadastro__form {
    max-width: 520px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.cadastro__campo {
    border: 2px solid var(--cor-cinza);
    border-radius: var(--raio-campo);
    padding: 15px 18px;
    font-size: 16px;
    font-family: var(--fonte-texto);
}

.cadastro__aviso {
    max-width: 760px;
    margin: 20px auto 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--cor-texto-suave);
}

.cadastro__sucesso {
    display: none;
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: var(--raio-campo);
    background: #ec232614;
    color: var(--cor-vermelho);
    font-weight: 600;
}

/* RODAPE — fundo claro como site oficial */
.rodape {
    position: relative;
    background: var(--cor-papel);
    color: var(--cor-tinta);
    padding: 80px var(--respiro-lateral) 48px;
    overflow: hidden;
}

.rodape__cotas {
    max-width: var(--largura-maxima);
    margin: 0 auto 56px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    text-align: center;
}

.cota {
    flex: 1 1 180px;
    max-width: 233px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cota__rotulo {
    display: block;
    font-size: 14px;
    color: var(--cor-marcador);
    margin-bottom: 0;
}

.cota__logo {
    max-height: 48px;
    width: auto;
    margin: 0 auto;
    filter: none;
}

.rodape__colunas {
    max-width: var(--largura-maxima);
    margin: 0 auto 48px;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(32px, 5vw, 80px);
}

.rodape__titulo {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--cor-tinta);
}

.rodape__link {
    display: block;
    color: var(--cor-tinta);
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 16px;
}

.rodape__link:hover {
    color: var(--cor-vermelho);
}

.rodape__legal {
    max-width: var(--largura-maxima);
    margin: 0 auto 32px;
    padding: 20px 0;
    border-top: 1px solid var(--cor-borda);
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cor-texto-suave);
}

.rodape__legal p {
    margin: 0 0 6px;
}

.rodape__marca-wrap {
    text-align: center;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--cor-borda);
}

.rodape__marca {
    height: 70px;
    width: auto;
}

.rodape__copy {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--cor-texto-suave);
    line-height: 1.7;
}

.olho {
    font-family: var(--fonte-texto);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--cor-acento);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.subtitulo {
    font-size: 16px;
    line-height: 1.5;
    color: var(--cor-texto-suave);
    margin: 12px 0 0;
}

.cadastro__aviso a {
    color: var(--cor-vermelho);
}


/* Override legacy inline hero/nav */
header.hero,
section.hero {
    display: block !important;
    padding: 0 !important;
    min-height: unset !important;
    height: 100vh;
    max-height: 1000px;
}

header.hero .hero__conteudo,
header.hero .hero__midia {
    position: absolute;
}

.navbar { display: none !important; }

.tickets-section {
    background: var(--cor-papel);
    padding: clamp(56px, 8vw, 104px) var(--respiro-lateral);
}

.tickets-section .section-title {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: clamp(32px, 5vw, 54px);
    text-align: center;
    color: var(--cor-tinta);
}

.tickets-section .section-subtitle {
    text-align: center;
    color: var(--cor-texto-suave);
    margin-bottom: 40px;
}

.ticket-card {
    border-radius: var(--raio-cartao);
    border: 2px solid var(--cor-cinza);
}

.btn-official.btn-red,
.btn-nav-cta,
.btn-gold,
.btn-secure {
    background: var(--cor-vermelho) !important;
    border-color: var(--cor-vermelho) !important;
    border-radius: var(--raio-botao) !important;
    color: #fff !important;
    font-family: var(--fonte-titulo) !important;
}

.btn-official.btn-red:hover,
.btn-nav-cta:hover {
    background: var(--cor-acento) !important;
    border-color: var(--cor-acento) !important;
}

.btn-official.btn-black {
    background: var(--cor-tinta) !important;
    border-radius: var(--raio-botao) !important;
}

.countdown-value,
.ticket-price,
.cart-total #totalAmount {
    color: var(--cor-vermelho) !important;
}

@media (max-width: 900px) {
    .faixa, .redes, .resultados { padding-block: 56px; }
    .faixa__ponto { display: none; }
    .faixa__interno { flex-direction: column; gap: 8px; }
    .galeria__grade {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 180px;
    }
    .galeria__celula:nth-child(n) { grid-column: auto; grid-row: auto; }
}