/* ===== Ingressos — seletor de quantidade =====
   Feira Regional da Beleza — adicionado 2026-10-14
   Para acrescentar uma quantidade nova basta criar mais um
   <button class="tkChip" data-qty="N" data-url="LINK">N</button>
   dentro de .tkQtyChips no index.html. O JS se vira sozinho. */

.tkQty{
  margin:20px 0 22px;
  padding:18px 18px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(227,185,107,.26);
}
.tkQtyLabel{
  font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:#e3b96b;
  margin-bottom:12px;
}
.tkQtyChips{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:16px;
}
.tkChip{
  flex:1 1 auto; min-width:52px;
  padding:11px 6px;
  border-radius:10px; cursor:pointer;
  border:1px solid rgba(227,185,107,.42);
  background:transparent; color:#f6e4c9;
  font-family:inherit; font-size:15px; font-weight:800; line-height:1;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.tkChip:hover{ border-color:#e3b96b; background:rgba(227,185,107,.14); }
.tkChip:active{ transform:scale(.96); }
.tkChip.is-on{
  background:linear-gradient(135deg,#e8c278,#c9933a);
  border-color:transparent; color:#3a1020;
  box-shadow:0 6px 18px rgba(201,147,58,.34);
}
.tkChip:focus-visible{ outline:2px solid #e3b96b; outline-offset:2px; }

.tkTotalRow{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
}
.tkTotalLab{
  font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}
.tkTotalVal{
  font-size:clamp(22px,3vw,28px); font-weight:800; line-height:1;
  color:#fff; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  transition:color .2s ease;
}
.tkTotalVal.bump{ animation:tkBump .42s cubic-bezier(.22,1,.36,1); }
@keyframes tkBump{
  0%{ transform:scale(1); }
  38%{ transform:scale(1.11); color:#e8c278; }
  100%{ transform:scale(1); }
}
.tkTotalSub{
  margin-top:6px;
  font-size:12px; color:rgba(255,255,255,.60);
  font-variant-numeric:tabular-nums;
}

@media (max-width:420px){
  .tkQty{ padding:16px 14px 14px; }
  .tkChip{ min-width:46px; font-size:14px; padding:10px 4px; }
}
@media (prefers-reduced-motion: reduce){
  .tkChip, .tkTotalVal{ transition:none !important; }
  .tkTotalVal.bump{ animation:none; }
}

/* ---------- equilibrio das duas colunas ----------
   A coluna da esquerda terminava colada no topo e sobrava
   um vazio embaixo, enquanto o card de preco e alto.
   Centraliza o conteudo e distribui melhor os beneficios. */
@media (min-width:981px){
  #ingressos .tkGrid{ align-items:center; }
  #ingressos .tkGrid > *:first-child{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  #ingressos .tkAdvGrid{ row-gap:36px !important; }
  #ingressos .tkGrid > *:first-child > p{ margin-bottom:34px; }
}