:root{
  color-scheme:light;
  --bg:#ffffff;
  --bg-soft:#f6f7f9;
  --ink:#14161a;
  --ink-2:#5c6169;
  --ink-3:#8a9099;
  --line:#e4e6ea;
  --line-2:#eef0f3;
  --red:#c1121f;
  --red-dark:#9d0e19;
  --dark:#080808;
  --radius:12px;
  --nav-h:56px;
  --pad:20px;
  --maxw:1120px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none !important}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.018em;font-weight:700}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------------- navbar liquid glass ---------------- */
.nav{
  position:fixed;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:40;
  width:calc(100% - (var(--pad) * 2));
  max-width:calc(var(--maxw) - (var(--pad) * 2));
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 10px 0 16px;
  border-radius:16px;
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;

  /* sobre o banner escuro */
  background:rgba(24,24,27,.42);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 12px 32px -16px rgba(0,0,0,.75);
}
/* reflexo superior que dá o aspecto de vidro */
.nav::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  transition:background .35s ease;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%);
}
/* sobre o conteúdo claro */
.nav.is-light{
  background:rgba(255,255,255,.78);
  border-color:rgba(16,18,22,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(16,18,22,.05),
    0 12px 32px -18px rgba(16,18,22,.45);
}
.nav.is-light::before{
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 60%);
}
.nav__logo{height:24px;width:auto;position:relative;display:block}
.nav__acoes{display:flex;align-items:center;gap:6px;position:relative}
.nav__ja{
  position:relative;
  display:inline-flex;align-items:center;height:38px;padding:0 12px;
  border-radius:10px;font-size:14px;font-weight:500;color:#fff;white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.nav__ja:hover{background:rgba(255,255,255,.14)}
.nav.is-light .nav__ja{color:var(--ink-2)}
.nav.is-light .nav__ja:hover{background:rgba(16,18,22,.06);color:var(--ink)}
@media (max-width:379px){ .nav__ja{display:none} }
.nav__cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:38px;
  padding:0 16px;
  border-radius:10px;
  background:var(--red);
  color:#fff;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  transition:background .18s ease;
}
.nav__cta:hover{background:var(--red-dark)}

/* ---------------- hero ---------------- */
.hero{
  background:var(--dark);
  padding:calc(var(--nav-h) + 22px) 0 20px;
}
.hero__inner{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
}
.hero__img{width:100%;height:auto;border-radius:10px}

/* ---------------- cabeçalho do evento ---------------- */
.head{padding-top:24px}
.head h1{font-size:28px;margin-bottom:16px}

.meta{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.meta__row{display:flex;align-items:flex-start;gap:10px}
.meta__row svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px;stroke:var(--ink-3)}
.meta__row span{font-size:15px}
.meta__row small{display:block;font-size:13.5px;color:var(--ink-2);margin-top:1px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-size:13px;
  color:var(--ink-2);
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:6px;
  padding:4px 10px;
}

/* ---------------- corpo ---------------- */
.body{padding-top:28px}
.layout{display:flex;flex-direction:column;gap:28px}

.block + .block{margin-top:30px}
.block h2{font-size:19px;margin-bottom:12px}
.block p{margin:0 0 12px;color:var(--ink-2);font-size:15.5px}
.block p:last-child{margin-bottom:0}
.lead{
  font-size:17px;
  font-weight:500;
  color:var(--ink) !important;
  margin-bottom:14px !important;
}

.note{
  display:flex;
  gap:12px;
  padding:16px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.note svg{flex:0 0 18px;width:18px;height:18px;margin-top:3px;stroke:var(--ink-2)}
.note strong{display:block;font-size:15px;font-weight:600;margin-bottom:3px}
.note p{margin:0;font-size:14.5px}

.rules{list-style:none;margin:0;padding:0}
.rules li{
  display:flex;
  gap:10px;
  padding:11px 0;
  border-top:1px solid var(--line-2);
  font-size:15px;
  color:var(--ink-2);
}
.rules li:first-child{border-top:0;padding-top:0}
.rules svg{flex:0 0 17px;width:17px;height:17px;margin-top:3px;stroke:var(--red)}

/* ---------------- ingressos ---------------- */
.tickets{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(16,18,22,.04);
  overflow:hidden;
}
.tickets__head{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.tickets__head h2{font-size:17px}
.tickets__head span{font-size:13px;color:var(--ink-3)}

.lot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  border-bottom:1px solid var(--line-2);
}
.lot__info{min-width:0}
.lot__name{font-size:15px;font-weight:600;margin-bottom:2px}
.lot__price{font-size:21px;font-weight:700;letter-spacing:-.02em}
.lot__hint{font-size:13px;color:var(--ink-2);margin-top:3px}
.lot--off .lot__name,.lot--off .lot__price{color:var(--ink-3)}
.lot--off .lot__price{font-size:15px;font-weight:500}
.lot__soon{
  font-size:12.5px;
  color:var(--ink-3);
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:6px;
  padding:4px 10px;
  white-space:nowrap;
}

.qty{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
  flex:0 0 auto;
}
.qty__btn{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  font-size:17px;
  line-height:1;
  color:var(--ink);
  transition:background .15s ease;
}
.qty__btn:hover:not(:disabled){background:var(--bg-soft)}
.qty__btn:disabled{color:#c3c7cd;cursor:not-allowed}
.qty__val{
  min-width:34px;
  text-align:center;
  font-size:15px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  line-height:36px;
}

.tickets__limit{
  padding:11px 16px;
  font-size:13px;
  color:var(--ink-2);
  background:var(--bg-soft);
  border-bottom:1px solid var(--line-2);
}
.tickets__total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:16px 16px 12px;
}
.tickets__total span{font-size:14.5px;color:var(--ink-2)}
.tickets__total strong{font-size:23px;font-weight:700;letter-spacing:-.02em}
.tickets__foot{padding:0 16px 16px}
.tickets__fine{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  padding:12px 18px;
  border-radius:10px;
  background:var(--red);
  color:#fff;
  font-size:15.5px;
  font-weight:600;
  transition:background .18s ease;
}
.btn:hover:not(:disabled){background:var(--red-dark)}
.btn:disabled{background:#eceef1;color:#a8adb5;cursor:not-allowed}

/* ---------------- contagem ---------------- */
.countdown{
  margin-top:40px;
  padding:28px 0;
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.countdown__label{
  margin:0 0 16px;
  font-size:14px;
  color:var(--ink-2);
  text-align:center;
}
.countdown__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  max-width:420px;
  margin:0 auto;
}
.cd{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 4px 10px;
  text-align:center;
}
.cd__num{
  display:block;
  font-size:24px;
  font-weight:700;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.cd__unit{
  display:block;
  margin-top:4px;
  font-size:11.5px;
  color:var(--ink-3);
}

/* ---------------- rodapé ---------------- */
.footer{padding:28px 0 36px}
.footer__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.footer__logo{height:30px;width:auto}
.footer__txt{font-size:13.5px;color:var(--ink-3)}
.footer__ig{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--line);
  border-radius:9px;
  transition:border-color .18s ease,background .18s ease;
}
.footer__ig svg{width:17px;height:17px;stroke:var(--ink-2)}
.footer__ig:hover{background:var(--bg-soft);border-color:#d3d7dd}

/* ---------------- telas estreitas ---------------- */
@media (max-width:359px){
  :root{--pad:16px}
  .head h1{font-size:24px}
  .lot{flex-wrap:wrap}
  .cd__num{font-size:21px}
  .cd__unit{font-size:10.5px}
  .nav__acoes{display:flex;align-items:center;gap:6px;position:relative}
.nav__ja{
  position:relative;
  display:inline-flex;align-items:center;height:38px;padding:0 12px;
  border-radius:10px;font-size:14px;font-weight:500;color:#fff;white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.nav__ja:hover{background:rgba(255,255,255,.14)}
.nav.is-light .nav__ja{color:var(--ink-2)}
.nav.is-light .nav__ja:hover{background:rgba(16,18,22,.06);color:var(--ink)}
@media (max-width:379px){ .nav__ja{display:none} }
.nav__cta{padding:0 12px;font-size:13.5px}
}

/* ---------------- tablet ---------------- */
@media (min-width:600px){
  :root{--pad:24px;--nav-h:60px}
  .head{padding-top:30px}
  .head h1{font-size:34px}
  .countdown__grid{gap:10px;max-width:480px}
  .cd{padding:16px 6px 13px}
  .cd__num{font-size:30px}
  .footer__inner{flex-direction:row;justify-content:space-between;text-align:left}
}

/* ---------------- desktop ---------------- */
@media (min-width:960px){
  .hero{padding-top:calc(var(--nav-h) + 26px);padding-bottom:28px}
  .hero__img{border-radius:14px}

  .head{padding-top:36px}
  .head h1{font-size:40px;margin-bottom:20px}
  .meta{gap:11px}

  .body{padding-top:36px}
  .layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 352px;
    gap:56px;
    align-items:start;
  }
  .col-right{position:sticky;top:calc(var(--nav-h) + 26px)}
  .block + .block{margin-top:36px}
  .block h2{font-size:21px}

  .countdown{margin-top:56px;padding:34px 0}
  .countdown__grid{max-width:520px}
  .cd__num{font-size:32px}
  .footer{padding:32px 0 48px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation:none !important}
}

/* Venda com hora marcada: contagem no lugar do botao. */
.tickets__abre{margin:0 0 10px;padding:12px 14px;border-radius:10px;background:#fdf2f3;border:1px solid #f3cdd1;color:#8c1b24;font-size:14px;line-height:1.45;text-align:center}
.tickets__abre[hidden]{display:none}
.tickets__abre #abre-falta{display:inline-block;margin-top:2px;font-size:22px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* Cupom de influenciador ativo (link com ?cupom=). */
.tickets__cupom{padding:10px 16px;font-size:13.5px;font-weight:600;color:#15803d;background:#f0fdf4;border-bottom:1px solid var(--line-2)}
.tickets__cupom[hidden]{display:none}