:root {
  color-scheme: dark;
  --fundo: #0b0a08;
  --superficie: #161210;
  --texto: #a5a5a5;
  --titulo: #ffffff;
  --suave: #787877;
  --acento: #ec3f3a;
  --rodape: #341310;
  --linha: rgba(255, 255, 255, 0.14);
  --largura: 72rem;
  --fonte: "Averia Serif Libre", Georgia, serif;
  --display: "Fjalla One", sans-serif;
  --sobretitulo: "Special Elite", cursive;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1.05rem;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--titulo);
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.15;
  text-transform: uppercase;
}

p { margin: 0; }

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

.pular {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 80;
  background: var(--acento);
  color: #fff;
  padding: 0.5rem 0.8rem;
  text-decoration: none;
}

.pular:focus { top: 1rem; }

.sobretitulo {
  margin: 0 0 0.45rem;
  color: var(--acento);
  font-family: var(--sobretitulo);
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
}

.botao {
  display: inline-block;
  padding: 1.15em 2.4em;
  background: var(--acento);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

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

.botao-secundario {
  background: transparent;
  color: var(--titulo);
  box-shadow: inset 0 0 0 1px var(--linha);
}

.faixa-manutencao {
  position: relative;
  z-index: 30;
  background: var(--acento);
  color: #fff;
  text-align: center;
  padding: 0.7rem 1rem;
  white-space: pre-line;
}

.carregando {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: var(--fundo);
  animation: carregando-sai 0.55s ease 3.2s forwards;
}

.carregando.sai { animation: carregando-sai 0.55s ease forwards; }

.carregando-pontos { display: flex; gap: 0.45rem; }

.carregando-pontos span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--acento);
  animation: carregando-sobe 0.7s ease-in-out infinite;
}

.carregando-pontos span:nth-child(2) { animation-delay: 0.1s; }
.carregando-pontos span:nth-child(3) { animation-delay: 0.2s; }
.carregando-pontos span:nth-child(4) { animation-delay: 0.3s; }
.carregando-pontos span:nth-child(5) { animation-delay: 0.4s; }

@keyframes carregando-sobe {
  0%, 40%, 100% { transform: translateY(0); }
  20% { transform: translateY(-0.7rem); }
}

@keyframes carregando-sai {
  to { opacity: 0; visibility: hidden; }
}

.casca-topo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  transition: background 0.35s ease;
}

.casca-topo.solido,
body.inner-layout .casca-topo {
  position: fixed;
  background: #0b0a08;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.inner-layout { padding-top: 8.4rem; }

.barra-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  padding: 0.55rem 2.4rem;
  color: var(--titulo);
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.barra-topo-direita { display: flex; gap: 1.2rem; }

.barra-topo a { text-decoration: none; }

.topo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 2.4rem 0.9rem;
}

.marca {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
}

.marca img {
  display: block;
  width: 9.5rem;
  height: auto;
}

.menu { justify-self: center; }

.menu ul, .rodape ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a, .rodape a {
  position: relative;
  color: var(--titulo);
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.menu a.atual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.45rem;
  height: 3px;
  background: var(--acento);
  transform: rotate(-8deg);
}

.menu a:hover, .rodape a:hover, .barra-topo a:hover { color: var(--acento); }

.busca {
  display: flex;
  align-items: center;
}

.busca input {
  width: 8.5rem;
  padding: 0.45rem 0.6rem;
  background: transparent;
  color: var(--titulo);
  border: 0;
  border-bottom: 1px solid var(--linha);
  font-family: var(--fonte);
  font-size: 0.9rem;
}

.busca input:focus { outline: 1px solid var(--acento); }

.topo-acoes { display: flex; align-items: center; gap: 0.8rem; }

.botao-topo { padding: 0.95em 1.4em; font-size: 0.72rem; }

.menu-botao {
  display: none;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--titulo);
  border: 1px solid var(--linha);
  padding: 0.45rem 0.7rem;
  font-family: var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heroi {
  position: relative;
  height: 100vh;
  min-height: 36rem;
  overflow: hidden;
  background: #000;
  perspective: 1200px;
}

.heroi-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.05s ease, visibility 1.05s ease;
}

.heroi-slide.ativo { opacity: 1; visibility: visible; z-index: 1; }

.heroi-cena {
  position: absolute;
  inset: -7%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.7s ease-out;
}

.heroi-fundo {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transform-origin: center;
  animation: heroi-zoom 16s ease-in-out infinite alternate;
}

@keyframes heroi-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.14); }
}

.heroi-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.62));
  pointer-events: none;
}

.heroi-texto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: 58rem;
  margin: 0 auto;
  padding: 8rem 1.5rem 4rem;
  text-align: center;
}

.heroi-texto > * { opacity: 0; transform: translateY(1.6rem); }

.heroi-slide.ativo .heroi-texto > * { animation: heroi-sobe 0.85s ease forwards; }

.heroi-slide.ativo .heroi-texto > *:nth-child(2) { animation-delay: 0.16s; }

.heroi-slide.ativo .heroi-texto > *:nth-child(3) { animation-delay: 0.32s; }

.heroi-slide.ativo .heroi-texto > *:nth-child(4) { animation-delay: 0.48s; }

@keyframes heroi-sobe {
  to { opacity: 1; transform: none; }
}

.heroi-texto h2 {
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  letter-spacing: 0.08em;
  line-height: 0.95;
}

.heroi-texto .sobretitulo { font-size: 1.35rem; }

.heroi-texto p:not(.sobretitulo) { margin: 1rem 0 0; max-width: 36rem; font-size: 1.15rem; }

.heroi-texto .botao { margin-top: 1.6rem; }

.heroi-anterior, .heroi-proximo {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 1.4rem;
  cursor: pointer;
}

.heroi-anterior { left: 1rem; }

.heroi-proximo { right: 1rem; }

.miolo {
  width: min(var(--largura), calc(100% - 8vw));
  margin: 0 auto;
  padding: 4.5rem 0 5rem;
}

main > .miolo + .faixa-clube + .miolo {
  padding-top: 0;
}

.secao { margin-top: 4.5rem; }

.secao:first-child { margin-top: 0; }

.secao-topo { max-width: 40rem; margin-bottom: 1.8rem; }

.secao-topo h2, .pagina-topo h1, .faixa-clube h2, .boas-vindas h2 {
  display: inline-block;
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: 0.09em;
  background-image: linear-gradient(var(--acento), var(--acento));
  background-repeat: no-repeat;
  background-position: left 88%;
  background-size: 62% 0.22em;
}

.vira h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.12em;
  z-index: -1;
  width: 68%;
  height: 0.28em;
  background: var(--acento);
  border-radius: 40% 55% 45% 60%;
  opacity: 0.9;
  transform: rotate(-3deg);
}

.secao-link {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--acento);
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.pagina-topo { margin-bottom: 2rem; }

.boas-vindas {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2.5rem 3rem;
  align-items: center;
  max-width: none;
}

.boas-vindas-titulo img {
  display: block;
  width: min(100%, 28rem);
  margin-top: 1.4rem;
}

.boas-vindas-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: boas;
}

.boas-vindas-lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  margin: 0 0 1.3rem;
  counter-increment: boas;
}

.boas-vindas-lista li::before {
  content: counter(boas);
  color: var(--acento);
  font-family: var(--sobretitulo);
  font-size: 1.8rem;
  line-height: 1;
}

.boas-vindas-acao { grid-column: 1 / -1; }

.rodape-nota + .rodape-nota {
  margin-top: 0.35rem;
  padding-top: 0;
  border-top: 0;
}

.texto { display: grid; gap: 1rem; }

.texto a { color: var(--acento); }

.faixa-clube {
  position: relative;
  margin-top: 4.5rem;
  padding: 5.5rem 8vw;
  background-color: var(--rodape);
  background-position: center;
  background-size: cover;
  text-align: center;
}

.faixa-clube::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 10, 8, 0.72);
}

.faixa-clube > * { position: relative; z-index: 1; }

.faixa-clube p:not(.sobretitulo) { max-width: 40rem; margin: 1rem auto 1.5rem; }

.publicos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.publico-numero {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--acento);
  font-family: var(--sobretitulo);
  font-size: 2rem;
  line-height: 1;
}

.publico h3 { font-size: 1rem; margin-bottom: 0.6rem; }

.publico a { text-decoration: none; }

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.vira {
  position: relative;
  aspect-ratio: 16 / 10;
  perspective: 600px;
  text-align: center;
}

.galeria-masonry .vira { aspect-ratio: 3 / 4; }

.vira-frente, .vira-verso {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.45rem;
  padding: 1.4rem;
  background: #222 center / cover no-repeat;
  color: #fff;
  backface-visibility: hidden;
  transform-origin: center;
  transition: transform 0.6s ease;
}

.vira-frente { z-index: 2; transform: rotateY(0deg); }

.vira-verso { transform: rotateY(180deg); }

.vira-frente::before, .vira-verso::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: background 0.3s ease;
}

.vira:hover .vira-frente::before, .vira:hover .vira-verso::before { background: rgba(0, 0, 0, 0.72); }

.vira:hover .vira-frente { transform: rotateY(-180deg); }

.vira:hover .vira-verso { transform: rotateY(0deg); }

.vira h3, .vira p { position: relative; z-index: 1; }

.vira h3 { font-size: clamp(1.05rem, 1.6vw, 1.45rem); }

.vira-link { position: absolute; inset: 0; z-index: 3; }

.cartao-meta { color: #fff; font-size: 0.92rem; }

.galeria-masonry {
  columns: 3 16rem;
  column-gap: 1.2rem;
}

.galeria-cobbles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 1.2rem;
  align-items: start;
}

.galeria-cobbles .evento-cartao { margin: 0; }

.galeria-masonry .vira {
  display: inline-block;
  width: 100%;
  margin: 0 0 1.2rem;
  break-inside: avoid;
}

.evento-cartao {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 1.2rem;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--linha);
  break-inside: avoid;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.evento-cartao:hover { transform: translateY(-4px); border-color: var(--acento); }

.evento-cartao-imagem { display: block; }

.evento-cartao-imagem img { display: block; width: 100%; height: auto; }

.evento-cartao-corpo { display: grid; gap: 0.55rem; padding: 1.1rem 1.25rem 1.35rem; }

.evento-cartao-corpo .cartao-meta {
  color: var(--acento);
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.evento-cartao h3 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }

.evento-cartao h3 a { text-decoration: none; transition: color 0.2s ease; }

.evento-cartao h3 a:hover { color: var(--acento); }

.evento-cartao-corpo .secao-link { margin-top: 0.2rem; }

.galeria-salas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.sanfona { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 2.4rem; }

.sanfona details {
  border-bottom: 1px solid var(--linha);
  padding-bottom: 0.6rem;
}

.sanfona summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--titulo);
  font-family: var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.sanfona summary::before {
  content: "+";
  color: var(--acento);
  font-size: 1.3rem;
  line-height: 1;
}

.sanfona details[open] summary::before { content: "–"; }

.sanfona summary::-webkit-details-marker { display: none; }

.sanfona .texto { padding: 0.7rem 0 0.4rem; }

.ficha { max-width: 48rem; }

.ficha-imagem { display: block; width: 100%; margin-bottom: 1.4rem; }

.chamada { font-size: 1.2rem; }

.ficha-galeria { margin-top: 2.4rem; }

.ficha-galeria h2 { font-size: 1.4rem; margin-bottom: 1rem; }

.ficha-galeria-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ficha-galeria-lista a { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--superficie); }

.ficha-galeria-lista img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.ficha-galeria-lista a:hover img { transform: scale(1.05); opacity: 0.85; }

.ampliada {
  width: min(92vw, 70rem);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.ampliada::backdrop { background: rgba(0, 0, 0, 0.88); }

.ampliada img { display: block; max-width: 100%; max-height: 86vh; margin: 0 auto; }

.ampliada button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  background: var(--acento);
  color: #fff;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.ampliada-fechar { top: -1.4rem; right: -1.4rem; }

.ampliada-anterior, .ampliada-proxima { top: 50%; transform: translateY(-50%); }

.ampliada-anterior { left: -1.4rem; }

.ampliada-proxima { right: -1.4rem; }

.contato { display: grid; gap: 0.8rem; margin: 1.4rem 0; }

.contato div { display: grid; gap: 0.15rem; }

.contato dt {
  color: var(--acento);
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contato dd { margin: 0; }

.horarios { white-space: pre-line; }

.vazio { color: var(--suave); }

.rodape {
  background: var(--rodape);
  color: #a1a1a0;
  padding: 3.5rem 4vw 2rem;
}

.rodape-grade {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 2rem;
  width: min(var(--largura), 100%);
  margin: 0 auto;
}

.rodape h2 { font-size: 1.15rem; margin-bottom: 0.9rem; }

.rodape ul { flex-direction: column; gap: 0.45rem; }

.rodape-contato { display: grid; gap: 0.35rem; }

.rodape-contato a { text-decoration: none; }

.rodape-nota {
  width: min(var(--largura), 100%);
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.92rem;
}

.idade {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.78);
}

.idade[hidden] { display: none; }

.idade-caixa {
  width: min(32rem, 100%);
  padding: 2rem;
  background: var(--fundo);
  border: 1px solid var(--linha);
}

.idade-caixa h2 { font-size: 1.8rem; margin-bottom: 0.8rem; }

.idade-acoes { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.3rem; }

.subir {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 25;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  background: var(--acento);
  color: #fff;
  border: 0;
  cursor: pointer;
}

.subir[hidden] { display: none; }

.movimento .secao, .movimento .faixa-clube {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.movimento .secao.entrou, .movimento .faixa-clube.entrou { opacity: 1; transform: none; }

@media (max-width: 1320px) {
  .topo { grid-template-columns: auto 1fr; }
  .menu { grid-column: 1 / -1; justify-self: start; }
  .menu ul { flex-wrap: wrap; }
  .busca { display: none; }
}

@media (max-width: 980px) {
  .publicos, .galeria-grid, .galeria-salas, .rodape-grade, .boas-vindas, .sanfona { grid-template-columns: 1fr 1fr; }
  .galeria-masonry { columns: 2 12rem; }
  .boas-vindas-acao { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body.inner-layout { padding-top: 7.2rem; }
  .menu-botao { display: inline-flex; }
  .busca, .botao-topo { display: none; }
  .topo { grid-template-columns: auto auto; position: relative; }
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
    padding: 1rem 4vw 1.4rem;
    background: var(--fundo);
  }
  .menu.aberto { display: block; }
  .menu ul { flex-direction: column; }
  .publicos, .galeria-grid, .galeria-salas, .rodape-grade, .boas-vindas, .sanfona { grid-template-columns: 1fr; }
  .galeria-masonry { columns: 1 12rem; }
  .ficha-galeria-lista { grid-template-columns: 1fr 1fr; }
  .ampliada-fechar { right: 0.4rem; top: -3.2rem; }
  .ampliada-anterior { left: 0.4rem; }
  .ampliada-proxima { right: 0.4rem; }
  .barra-topo { justify-content: flex-start; flex-wrap: wrap; padding-inline: 1rem; }
  .heroi-texto h2 { letter-spacing: 0.04em; }
}