/* Estilos do site Flow Tickets (index.html e páginas de evento). */
:root {
  /* Marca */
  --vermelho: #ff4438;
  --magenta:  #ff2668;
  --magenta-escuro: #d31760;
  --roxo:     #7a2ff7;
  --laranja:  #ff7a1a;
  --gradiente: linear-gradient(90deg, #ff4438 0%, #ff2668 45%, #7a2ff7 100%);

  /* Superfícies escuras (hero / faixas de marca) */
  --preto:   #0c0a10;
  --preto-2: #16121f;

  /* Superfícies claras (conteúdo) */
  --fundo:      #f4f2ea;
  --superficie: #ffffff;
  --tinta:      #17121f;
  --tinta-2:    #6a6478;
  --borda:      #e8e4f0;

  --branco: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Archivo', -apple-system, sans-serif;
  background: var(--fundo);
  color: var(--tinta);
}

/* ===== Cabeçalho ===== */
header {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 48px;
  background: rgba(12, 10, 16, 0.9);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}
.logo img { height: 26px; width: auto; display: block; }
.logo .logo-texto .ponto { font-style: normal; color: var(--magenta); }
.logo .logo-texto {
  font-weight: 900;
  font-stretch: 125%;
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--branco);
}

.busca {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 10px 18px;
}
.busca:focus-within { border-color: rgba(255, 38, 104, 0.7); }
.busca input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--branco);
  font-family: inherit;
  font-size: 15px;
}
.busca input::placeholder { color: rgba(255, 255, 255, 0.5); }

nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
nav a {
  position: relative;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
}
nav a + a::before {
  content: '';
  position: absolute;
  left: -15.5px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
nav a:hover { color: #ff5c8a; }

/* Ícones de redes no topo */
.redes-topo { display: flex; align-items: center; gap: 10px; }
.redes-topo a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.redes-topo a:hover,
.redes-topo a:focus-visible {
  background: var(--gradiente);
  border-color: transparent;
  color: var(--branco);
  transform: translateY(-1px);
  outline: none;
}
.redes-topo svg { width: 18px; height: 18px; display: block; }

/* ===== Hero (capa) ===== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px 64px;
  background: url('flow-capa-desktop.jpg') 78% 40% / cover no-repeat, var(--preto);
  color: var(--branco);
  overflow: hidden;
}
/* escurece a esquerda (onde fica o texto) e a base, pra dar leitura */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(12,10,16,0.92) 0%, rgba(12,10,16,0.7) 38%, rgba(12,10,16,0.15) 72%, rgba(12,10,16,0.05) 100%),
    linear-gradient(0deg, rgba(12,10,16,0.95) 0%, rgba(12,10,16,0) 38%);
}
.hero .miolo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-tags {
  display: flex;
  gap: 0;
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.hero-tags span + span::before { content: '·'; margin: 0 10px 0 4px; opacity: 0.6; }

.hero h1 {
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
/* desktop: "SEU PRÓXIMO ROLÊ" numa linha, "COMEÇA AQUI." na outra */
.hero h1 span { display: inline; }
.hero h1 .menor { display: block; font-size: 0.74em; margin-top: 0.1em; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--laranja) 0%, var(--magenta) 55%, var(--roxo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 .ponto { font-style: normal; color: var(--magenta); }

.hero p {
  font-size: 19px;
  max-width: 520px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}

.hero-botoes .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 260px;
  padding: 17px 34px;
  font-size: 15px;
  letter-spacing: 3px;
}
.hero-botoes .btn-proximos {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: var(--branco);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.hero-botoes .btn-proximos:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--branco); filter: none; }
.hero-botoes .btn-proximos svg { width: 19px; height: 19px; }
.hero-botoes .btn svg { width: 20px; height: 20px; transition: transform 0.2s ease; }
.hero-botoes .btn:hover svg { transform: translateX(4px); }

/* assinatura no canto inferior direito da capa */
.hero-assinatura {
  position: absolute;
  z-index: 2;
  right: 64px;
  bottom: 30px;
  font-family: 'Caveat Brush', cursive;
  font-size: 40px;
  line-height: 0.86;
  color: var(--laranja);
  transform: rotate(-11deg);
  text-align: left;
}
.hero-assinatura::after {
  content: '';
  display: block;
  width: 80%;
  height: 2px;
  margin: 12px 0 0 18%;
  border-radius: 2px;
  background: var(--laranja);
  transform: rotate(-5deg);
}
/* "FLOW" gigante vazado no fundo */
.hero-marca {
  position: absolute;
  z-index: 1;
  left: -0.04em;
  bottom: -0.3em;
  font-size: clamp(140px, 22vw, 340px);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.14);
  transform: skewX(-14deg);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Entrada suave dos elementos do banner */
@keyframes hero-subir {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero-tags      { animation: hero-subir 0.55s ease both; }
.hero h1        { animation: hero-subir 0.55s ease 0.1s both; }
.hero p         { animation: hero-subir 0.55s ease 0.2s both; }
.hero-botoes    { animation: hero-subir 0.55s ease 0.3s both; }
.hero-assinatura { animation: hero-subir 0.6s ease 0.45s both; }
.hero-assinatura { animation-name: hero-assinar; }
@keyframes hero-assinar {
  from { opacity: 0; transform: rotate(-11deg) translateY(16px); }
  to   { opacity: 1; transform: rotate(-11deg); }
}

.btn {
  display: inline-block;
  padding: 16px 40px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.btn-primario {
  background: var(--laranja);
  color: var(--branco);
  box-shadow: 0 12px 30px rgba(255, 122, 26, 0.32);
}
.btn-primario:hover { filter: brightness(1.08); }
.btn-secundario {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--branco);
}
.btn-secundario:hover { border-color: #ff5c8a; background: rgba(255, 38, 104, 0.12); }

.hero-botoes { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== Faixa de destaques ===== */
.destaques {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  background: var(--superficie);
  color: var(--tinta);
  border-radius: 28px;
  margin: -70px auto 0;
  max-width: 1100px;
  position: relative;
  z-index: 5;
  padding: 36px 24px;
  box-shadow: 0 24px 60px rgba(20, 16, 30, 0.14);
  border: 1px solid var(--borda);
}
.destaque {
  flex: 1;
  min-width: 240px;
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid var(--borda);
}
.destaque:last-child { border-right: none; }
.destaque .icone {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--gradiente);
  display: flex;
  align-items: center;
  justify-content: center;
}
.destaque .icone svg { width: 26px; height: 26px; stroke: var(--branco); }
.destaque h3 { font-size: 17px; font-weight: 800; color: var(--tinta); }

/* ===== Filtros ===== */
.filtros {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 32px 24px 0;
}
.filtros button {
  padding: 13px 30px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--tinta);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.filtros button:hover,
.filtros button.ativo {
  background: var(--gradiente);
  border-color: transparent;
  color: var(--branco);
}

/* ===== Vitrine de eventos ===== */
.eventos {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.eventos h2 {
  font-size: 30px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 32px;
  color: var(--tinta);
}
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 6px 20px rgba(20, 16, 30, 0.06);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--magenta);
  box-shadow: 0 16px 34px rgba(20, 16, 30, 0.14);
}
.card .capa {
  position: relative;
  height: 180px;
  background: var(--gradiente);
}
.card .capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card .selo {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--gradiente);
  color: var(--branco);
}
.card .selo.esgotado { background: rgba(12, 10, 16, 0.9); }
.card .info { padding: 20px; }
.card .tipos { font-size: 13px; color: var(--tinta-2); margin-bottom: 14px; }
.card details { margin-bottom: 14px; }
.card details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--magenta-escuro);
  list-style: none;
}
.card details summary::before { content: '+ '; }
.card details[open] summary::before { content: '− '; }
.card details p {
  font-size: 13px;
  color: var(--tinta-2);
  line-height: 1.5;
  margin-top: 8px;
  white-space: pre-line;
}
.card .data {
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-2);
  margin-top: 4px;
}
.card .card-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.card .card-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--magenta-escuro);
  background: rgba(255, 38, 104, 0.08);
  border: 1px solid rgba(255, 38, 104, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
}
.card h3 { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 0; color: var(--tinta); }
.card-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.card .local { font-size: 14px; color: var(--tinta-2); margin-bottom: 12px; }
.card .preco-linha {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.card .preco {
  font-size: 20px;
  font-weight: 900;
  color: var(--tinta);
}
.card .lote {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--magenta-escuro);
  background: rgba(255, 38, 104, 0.1);
  border: 1px solid rgba(255, 38, 104, 0.35);
  border-radius: 999px;
  padding: 3px 10px;
}
.card .ficha { font-size: 13px; color: var(--tinta-2); line-height: 1.6; margin-top: 8px; }
.card .ficha b { color: var(--tinta); font-weight: 700; }

/* Aviso de indicação (promoter) */
.aviso-promoter {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: none;
}
.aviso-promoter.on { display: block; }
.aviso-promoter .caixa {
  background: rgba(122, 47, 247, 0.08);
  border: 1px solid rgba(122, 47, 247, 0.35);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 14px;
  color: var(--tinta);
}
.aviso-promoter b { color: var(--magenta-escuro); }
.card .comprar {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--branco);
  background: var(--laranja);
  border: none;
  border-radius: 999px;
  padding: 9px 20px;
  white-space: nowrap;
}
.card:hover .comprar { filter: brightness(1.08); }

.vazio {
  text-align: center;
  font-size: 17px;
  color: var(--tinta-2);
  padding: 40px 0;
}
.vazio-texto { max-width: 460px; margin: 0 auto 24px; line-height: 1.6; }
.vazio[hidden] { display: none; }

/* ===== Chamada final (faixa escura de marca) ===== */
.cta-final {
  text-align: center;
  padding: 84px 24px;
  color: var(--branco);
  background:
    radial-gradient(ellipse 60% 60% at 15% 20%, rgba(255, 68, 56, 0.25), transparent),
    radial-gradient(ellipse 60% 60% at 85% 80%, rgba(122, 47, 247, 0.3), transparent),
    var(--preto);
}
.cta-final h2 {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.cta-final p {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 32px;
  font-size: 17px;
}
.cta-grade {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
.cta-bloco {
  flex: 1;
  min-width: 300px;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.cta-bloco:last-child { border-right: none; }
.cta-bloco h2 { font-size: clamp(24px, 3vw, 36px); }
.cta-bloco p { max-width: 380px; }
.cta-bloco .btn { margin-top: auto; }

/* ===== Sobre nós (faixa escura de marca) ===== */
.sobre {
  position: relative;
  padding: 100px 24px;
  color: var(--branco);
  background:
    radial-gradient(circle at 82% 25%, rgba(255, 122, 26, 0.35), transparent 55%),
    radial-gradient(circle at 12% 82%, rgba(255, 38, 104, 0.3), transparent 55%),
    linear-gradient(160deg, #0c0a10 0%, #1b1030 100%);
  overflow: hidden;
}
.sobre .miolo { max-width: 1100px; margin: 0 auto; }
.sobre .rotulo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--laranja);
  margin-bottom: 20px;
}
.sobre .manifesto {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.2;
  max-width: 820px;
  margin-bottom: 28px;
}
.sobre .manifesto em {
  font-style: normal;
  background: linear-gradient(90deg, var(--laranja), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sobre .texto {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
  margin-bottom: 64px;
}
.diferenciais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.dif {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 28px 24px;
}
.dif .icone {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--gradiente);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.dif .icone svg { width: 24px; height: 24px; stroke: var(--branco); }
.dif h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.dif { display: flex; flex-direction: column; }
.dif p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.68); margin-bottom: 22px; }
.dif-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--branco);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 122, 26, 0.7);
}
.dif-cta svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.dif-cta:hover { color: var(--laranja); }
.dif-cta:hover svg { transform: translateX(3px); }

section[id] { scroll-margin-top: 64px; }

/* ===== Suporte ===== */
.suporte { padding: 90px 24px; background: var(--fundo); }
.suporte .caixa {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 28px;
  padding: 56px;
}
.suporte .rotulo {
  font-size: 12px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase;
  color: var(--magenta); margin-bottom: 14px;
}
.suporte h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 16px;
}
.suporte .texto { font-size: 17px; line-height: 1.6; color: var(--tinta-2); margin-bottom: 28px; max-width: 460px; }
.btn-whats { display: inline-flex; align-items: center; gap: 12px; }
.suporte-botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-secundario-claro {
  background: transparent;
  color: var(--tinta);
  border: 1.5px solid var(--tinta);
}
.btn-secundario-claro:hover { background: var(--tinta); color: var(--branco); }
.suporte-email { margin-top: 16px; font-size: 14px; color: var(--tinta-2); }
.suporte-email a { color: var(--magenta); font-weight: 700; text-decoration: none; }
.suporte-email a:hover { text-decoration: underline; }
.btn-whats svg { width: 20px; height: 20px; }
.suporte-atalhos { display: flex; flex-direction: column; gap: 12px; }
.suporte-atalhos .titulo {
  font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  color: var(--tinta-2); margin-bottom: 2px;
}
.atalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--tinta);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.atalho svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--magenta); transition: transform 0.2s ease; }
.atalho:hover { border-color: var(--magenta); }
.atalho:hover svg { transform: translateX(3px); }

/* ===== Rodapé (escuro) ===== */
footer {
  background: var(--preto);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  padding: 64px 48px 28px;
}
.rodape-grade {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.rodape-marca .logo-texto {
  font-weight: 900; font-stretch: 125%; font-size: 26px; letter-spacing: 1px; color: var(--branco);
}
.rodape-marca .logo-texto .ponto { font-style: normal; color: var(--magenta); }
.rodape-marca p { margin: 14px 0 20px; line-height: 1.6; max-width: 280px; }
.rodape-marca .redes-topo { gap: 10px; }
footer h4 {
  font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  color: var(--branco); margin-bottom: 16px;
}
footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
footer ul a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
footer ul a:hover { color: #ff5c8a; }
.rodape-base {
  max-width: 1200px;
  margin: 48px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* Card clicável (abre a tela de detalhe) */
.card { cursor: pointer; }

/* ===== Modal de detalhe do evento ===== */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 6, 12, 0.72);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.modal-fundo.on { display: block; opacity: 1; }

.modal {
  max-width: 720px;
  margin: 40px auto 120px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.modal-fechar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(12, 10, 16, 0.55);
  color: var(--branco);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.modal-fechar:hover { background: rgba(255, 38, 104, 0.7); }

.modal-capa {
  position: relative;
  height: 340px;
  background: var(--gradiente);
}
.modal-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-capa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--superficie) 3%, transparent 55%);
}
.modal-selo {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--gradiente);
  color: var(--branco);
}
.modal-selo.esgotado { background: rgba(12, 10, 16, 0.9); }

.modal-corpo { padding: 4px 32px 32px; }
.modal-data {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--magenta-escuro);
  margin-bottom: 8px;
}
.modal-corpo h2 { font-size: 30px; font-weight: 900; line-height: 1.15; margin-bottom: 8px; color: var(--tinta); }
.modal-local { font-size: 15px; color: var(--tinta-2); margin-bottom: 20px; }

.modal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.modal-chip {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--tinta-2);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 6px 14px;
}

.modal-secao { margin-bottom: 26px; }
.modal-secao h4 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--laranja);
  margin-bottom: 12px;
}
.modal-secao p { font-size: 15px; line-height: 1.65; color: #3f3a4a; white-space: pre-line; }
.modal-ficha { font-size: 14px; line-height: 1.8; color: var(--tinta-2); }
.modal-ficha b { color: var(--tinta); font-weight: 700; }

/* Tabela de lotes */
.lote-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--borda);
  margin-bottom: 10px;
  background: #faf9fc;
}
.lote-linha .lote-nome { font-weight: 800; font-size: 15px; color: var(--tinta); }
.lote-linha .lote-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  color: var(--tinta-2);
}
.lote-linha .lote-preco { margin-left: auto; font-weight: 900; font-size: 17px; }

.lote-linha.encerrado { opacity: 0.5; }
.lote-linha.encerrado .lote-preco { text-decoration: line-through; }

.lote-linha.vigente {
  border-color: transparent;
  background: linear-gradient(90deg, rgba(255, 38, 104, 0.12), rgba(122, 47, 247, 0.1));
  box-shadow: 0 0 0 1px var(--magenta) inset;
}
.lote-linha.vigente .lote-tag {
  background: var(--gradiente);
  border-color: transparent;
  color: var(--branco);
}
.lote-linha.vigente .lote-preco {
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lote-linha.em-breve .lote-tag { color: var(--tinta-2); }

/* Barra de compra fixa no rodapé do modal */
.modal-compra {
  position: sticky;
  bottom: 0;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  padding: 18px 32px 22px;
}
.modal-lote-atual {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--tinta-2);
  margin-bottom: 14px;
}
.modal-lote-atual b { color: var(--tinta); }

.btn-comprar-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px 22px;
  border-radius: 16px;
  font-family: inherit;
  text-decoration: none;
  color: var(--branco);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.btn-comprar-grande + .btn-comprar-grande { margin-top: 12px; }
.btn-comprar-grande:hover { filter: brightness(1.08); }
.btn-comprar-grande:active { transform: scale(0.99); }

.btn-comprar-grande .rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
}
.btn-comprar-grande .valor { font-size: 19px; font-weight: 900; white-space: nowrap; }
.btn-comprar-grande .valor .risco {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.65;
  text-decoration: line-through;
  margin-right: 6px;
}

/* Botão 1 — desconto Flow */
.btn-comprar-grande.flow {
  background: var(--gradiente);
  box-shadow: 0 10px 30px rgba(255, 38, 104, 0.32);
}
.btn-comprar-grande.flow .off {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.28);
  padding: 3px 8px;
  border-radius: 999px;
}

/* Botão 2 — Pix sem taxa (acento teal do Pix) */
.btn-comprar-grande.pix {
  background: rgba(20, 160, 145, 0.08);
  border: 1px solid #12a693;
  color: #0a7d6f;
}
.btn-comprar-grande.pix .tag-pix { color: #12a693; font-size: 11px; font-weight: 800; }

/* Botão 3 — comunidade oficial do evento */
.btn-comprar-grande.comunidade {
  background: var(--preto);
  border: 1px solid var(--preto);
  justify-content: flex-start;
  gap: 14px;
}
.btn-comprar-grande.comunidade > svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--laranja); }
.btn-comprar-grande.comunidade .textos { display: flex; flex-direction: column; gap: 3px; flex: 1; text-align: left; }
.btn-comprar-grande.comunidade .sub {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}
.btn-comprar-grande.comunidade .sub b { color: var(--laranja); font-weight: 800; }
.btn-comprar-grande.comunidade .seta { width: 18px; height: 18px; flex: 0 0 auto; color: rgba(255,255,255,0.7); transition: transform 0.2s ease; }
.btn-comprar-grande.comunidade:hover .seta { transform: translateX(3px); }

.modal-obs { text-align: center; font-size: 12px; color: var(--tinta-2); margin-top: 14px; }
.modal-seguro { display: flex; align-items: center; justify-content: center; gap: 6px; }
.modal-seguro svg { width: 13px; height: 13px; color: #12a693; }
.modal-duvida { text-align: center; font-size: 13px; color: var(--tinta-2); margin-top: 10px; }
.modal-duvida a { color: var(--magenta); font-weight: 700; text-decoration: none; }
.modal-duvida a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .modal { margin: 0; border-radius: 0; min-height: 100%; border: none; }
  .modal-capa { height: 260px; }
  .modal-corpo { padding: 4px 20px 24px; }
  .modal-corpo h2 { font-size: 24px; }
  .modal-compra { padding: 16px 20px 20px; }
}

@media (max-width: 720px) {
  header { padding: 14px 18px; flex-wrap: wrap; gap: 14px; }
  .logo .logo-texto { font-size: 22px; }
  .busca { order: 3; max-width: 100%; width: 100%; }
  nav { margin-left: auto; gap: 18px; }
  nav a { font-size: 10px; letter-spacing: 2.5px; }
  nav a + a::before { left: -10.5px; }
  nav a.so-desktop { display: none; }
  .redes-topo { gap: 8px; }
  .redes-topo a { width: 34px; height: 34px; }
  .redes-topo svg { width: 16px; height: 16px; }

  .hero {
    padding: 26px 20px 26px;
    background-image: url('flow-capa-mobile.jpg');
    background-size: cover;
    background-position: 70% 38%;
  }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(12,10,16,0.85) 0%, rgba(12,10,16,0.55) 55%, rgba(12,10,16,0.1) 100%),
      linear-gradient(0deg, rgba(12,10,16,0.9) 0%, rgba(12,10,16,0) 50%);
  }
  .hero-tags { font-size: 9px; letter-spacing: 3px; margin-bottom: 16px; }
  .hero-tags span + span::before { margin: 0 6px 0 2px; }
  .hero h1 { font-size: clamp(30px, 9.6vw, 44px); margin-bottom: 12px; }
  .hero h1 span:nth-child(2)::after { content: '\A'; white-space: pre; } /* quebra depois de PRÓXIMO */
  .hero h1 .menor { font-size: 0.78em; }
  .hero p { font-size: 15px; margin-bottom: 18px; }
  .hero-botoes { flex-wrap: nowrap; gap: 10px; }
  .hero-botoes .btn { flex: 1; min-width: 0; padding: 14px 8px; font-size: 11px; letter-spacing: 1px; gap: 7px; }
  .hero-botoes .btn svg { width: 16px; height: 16px; }
  .hero-assinatura { display: none; }
  .hero-marca { font-size: 40vw; bottom: -0.3em; }

  .destaques { margin: -48px 16px 0; padding: 24px 16px; }
  .destaque { border-right: none; border-bottom: 1px solid var(--borda); padding: 16px 8px; }
  .destaque:last-child { border-bottom: none; }

  /* Filtros deslizam de lado em vez de quebrar linha */
  .filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 10px;
    padding: 20px 16px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtros button { flex: 0 0 auto; padding: 12px 22px; }

  .eventos { padding: 20px 16px 60px; }
  .eventos h2 { font-size: 24px; }
  .grade { grid-template-columns: 1fr; gap: 18px; }
  .card .capa { height: 260px; }

  .cta-final { padding: 60px 20px; }
  .cta-grade { gap: 48px; }
  .cta-bloco { border-right: none; padding: 0; }
  .sobre { padding: 64px 20px; }
  .sobre .texto { margin-bottom: 44px; }

  footer { padding: 48px 20px 24px; }
  .rodape-grade { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .rodape-marca { grid-column: 1 / -1; }
  .suporte { padding: 56px 16px; }
  .suporte .caixa { grid-template-columns: 1fr; gap: 32px; padding: 32px 22px; border-radius: 22px; }
  .suporte .btn-whats { width: 100%; justify-content: center; padding: 16px 18px; font-size: 13px; letter-spacing: 1.5px; }
  section[id] { scroll-margin-top: 100px; }
}


/* ===== Selo "Vendas em breve" no card ===== */
.card .selo.em-breve { background: var(--laranja); color: var(--branco); }

/* ===== Status, Concierge, Fique por dentro, Compartilhar ===== */
.btn-comprar-grande .textos { display: flex; flex-direction: column; gap: 3px; flex: 1; text-align: left; }
.btn-comprar-grande .sub { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.btn-comprar-grande.fique { justify-content: flex-start; gap: 14px; }
.btn-comprar-grande.fique > svg { width: 22px; height: 22px; flex: 0 0 auto; }
.btn-comprar-grande.fique .sub { color: rgba(255, 255, 255, 0.85); }

.btn-comprar-grande.concierge {
  justify-content: flex-start;
  gap: 14px;
  color: var(--branco);
  border: 1.5px solid transparent;
  background:
    linear-gradient(135deg, #1d1428, #0c0a10) padding-box,
    var(--gradiente) border-box;
  box-shadow: 0 10px 28px rgba(122, 47, 247, 0.22);
}
.btn-comprar-grande.concierge > svg:first-child { width: 22px; height: 22px; flex: 0 0 auto; color: #ffb27a; }
.btn-comprar-grande.concierge .rotulo { letter-spacing: 3px; }
.btn-comprar-grande.concierge .sub { color: rgba(255, 255, 255, 0.7); }
.btn-comprar-grande.concierge .sub b { color: #ffb27a; font-weight: 800; }
.btn-comprar-grande.concierge .seta { width: 18px; height: 18px; flex: 0 0 auto; color: rgba(255,255,255,0.7); transition: transform 0.2s ease; }
.btn-comprar-grande.concierge:hover .seta { transform: translateX(3px); }

.aviso-status {
  font-size: 14px;
  line-height: 1.5;
  padding: 14px 16px;
  border-radius: 14px;
  margin-bottom: 12px;
  text-align: center;
}
.aviso-status.proximo { background: rgba(255, 122, 26, 0.1); color: #a24a06; border: 1px solid rgba(255, 122, 26, 0.35); }
.aviso-status.pos { background: rgba(23, 18, 31, 0.06); color: var(--tinta); border: 1px solid var(--borda); }

.btn-compartilhar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -8px 0 22px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--tinta);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.btn-compartilhar svg { width: 16px; height: 16px; color: var(--magenta); }
.btn-compartilhar:hover { border-color: var(--magenta); }

/* ===== Página própria do evento (link direto /e/<slug>/) ===== */
.pagina-evento { background: var(--fundo); padding: 28px 16px 40px; min-height: 60vh; }
.pagina-evento .voltar-vitrine {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 720px; width: 100%; margin: 0 auto 16px;
  font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--tinta-2); text-decoration: none;
}
.pagina-evento .voltar-vitrine:hover { color: var(--magenta); }
.pagina-evento .voltar-linha { max-width: 720px; margin: 0 auto; }
.pagina-evento .modal { margin: 0 auto; box-shadow: 0 20px 60px rgba(23, 18, 31, 0.12); }
.pagina-evento .carregando, .pagina-evento .nao-achou {
  max-width: 560px; margin: 60px auto; text-align: center; color: var(--tinta-2); font-size: 17px; line-height: 1.6;
}
.pagina-evento .nao-achou h1 { font-size: 30px; font-weight: 900; font-stretch: 125%; text-transform: uppercase; color: var(--tinta); margin-bottom: 12px; }
.pagina-evento .nao-achou .btn { margin-top: 22px; }
@media (max-width: 720px) {
  .pagina-evento { padding: 0 0 32px; }
  .pagina-evento .voltar-linha { padding: 14px 16px 10px; }
  .pagina-evento .voltar-vitrine { margin: 0; }
  .pagina-evento .modal { border-radius: 0; border-left: none; border-right: none; min-height: 0; }
}
.pagina-evento ~ footer { padding-top: 4px; }
.pagina-evento ~ footer .rodape-base { margin-top: 0; border-top: none; }

/* ===== Grupos da vitrine: Universitários / Demais eventos ===== */
.grade .grupo-titulo {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--magenta);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borda);
  margin-top: 8px;
}
.grade .grupo-titulo ~ .grupo-titulo { margin-top: 24px; }