/* ============================================================
   MOBILE PRIMEIRO — o público compra pelo celular.
   Carregado por último: tudo aqui ajusta a experiência de 360–480px.
   ATENÇÃO: sem transition; motion em WAAPI (app.js / fx.js).
   ============================================================ */

/* ---------------- Pix ---------------- */
.pix { display: grid; gap: 14px; padding: 16px; border-radius: 14px; margin-bottom: 14px; background: var(--night); border: 1px solid var(--line-strong); }
.pix-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pix-head strong { font-size: 16px; }
.pix-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ember); }
.pix-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }
.pix-qr {
  justify-self: center; width: min(240px, 72vw); aspect-ratio: 1; padding: 12px; border-radius: 12px;
  background: #fff;
}
.pix-qr svg { width: 100%; height: 100%; display: block; }
.pix-hint { font-size: 13px; color: var(--bone-dim); text-align: center; }
.pix-copy { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.pix-copy input {
  min-width: 0; height: 48px; padding: 0 12px; border-radius: 10px; background: var(--night-2);
  border: 1px solid var(--line-strong); color: var(--bone-dim); font: 12px/1 ui-monospace, Menlo, Consolas, monospace;
}
.paid { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 8px 0; color: var(--bone-dim); }
.paid strong { font-size: 22px; color: var(--bone); }
.paid .summary { width: 100%; text-align: left; margin: 8px 0 4px; }
.paid-ic { width: 56px; height: 56px; color: var(--moss); }

/* ---------------- Barra de compra fixa ---------------- */
.buybar {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 55;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: 16px;
  background: rgba(21, 17, 14, 0.94); border: 1px solid rgba(255, 107, 26, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
@supports (backdrop-filter: blur(1px)) { .buybar { background: rgba(21, 17, 14, 0.8); backdrop-filter: blur(12px); } }
.buybar-info { display: grid; line-height: 1.15; }
.buybar-lote { font-size: 12px; font-weight: 600; color: var(--bone-dim); }
.buybar-price { font-size: 20px; font-weight: 800; color: var(--pumpkin); letter-spacing: -0.02em; }
.buybar .btn { min-height: 48px; padding: 0 16px; font-size: 14px; }
@media (min-width: 721px) { .buybar { display: none !important; } }

/* ---------------- Ajustes de celular ---------------- */
@media (max-width: 720px) {
  :root { --header-h: 60px; }
  .brand-name { font-size: 21px; }
  .brand-mark { width: 30px; height: 30px; }

  /* Hero: cabe na tela com o CTA à vista */
  .hero { min-height: 100svh; padding: calc(var(--header-h) + 28px) 0 120px; }
  .hero-title { font-size: clamp(56px, 17vw, 84px); margin-bottom: 18px; }
  .hero-lead { font-size: 15.5px; margin-bottom: 22px; }
  .hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
  .fact { padding: 10px 12px; gap: 10px; }
  .fact .ic { width: 18px; height: 18px; }
  .fact-label { font-size: 11px; }
  .fact-value { font-size: 13px; }
  .hero .btn-lg { width: 100%; }
  .hero-ground { height: 110px; }

  .tapes { height: 120px; margin-top: -54px; margin-bottom: -24px; }

  .section { padding: 56px 0; }
  .tickets-section { padding-top: 28px; padding-bottom: 36px; }
  .attractions-section { padding-top: 64px; }
  .section-head { margin-bottom: 28px; }
  .section-head h2 { font-size: clamp(28px, 8.4vw, 36px); }

  .countdown { gap: 8px; margin-top: 20px; }
  .cd-num { width: 68px; height: 70px; font-size: 32px; }

  .ticket-price .val { font-size: 40px; }

  /* Carrinho: controles grandes para o dedo */
  .cart { padding: 20px 16px; border-radius: 16px; }
  .cart-top { flex-direction: column; align-items: stretch; }
  .stepper { justify-content: space-between; }
  .stepper-btn { width: 56px; height: 52px; }
  .stepper-value { flex: 1; height: 52px; font-size: 30px; }
  .cart-bottom { gap: 12px; }
  .cart-bottom > div { width: 100%; display: flex; align-items: baseline; justify-content: space-between; }

  /* Gaveta = folha que sobe de baixo, com alça */
  .drawer-panel { max-height: 94svh; }
  .drawer-panel::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--line-strong); }
  .drawer-head { padding-top: 22px; }
  .drawer-body { padding: 16px; }

  .attr { padding: 20px 16px; }
  .podium { height: 170px; }
  .loc-map { min-height: 260px; }
  .loc-actions .btn { flex: 1 1 100%; }

  .site-footer { padding-bottom: 110px; }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ---------------- Ingressos: carrossel até o tablet ----------------
   No celular o próximo lote aparece na borda; no tablet cabem quase dois. */
@media (max-width: 899px) {
  .batches {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter, 16px);
    margin: 0 calc(-1 * var(--gutter, 16px)) 6px; padding: 6px var(--gutter, 16px) 14px; scrollbar-width: none;
  }
  .batches::-webkit-scrollbar { display: none; }
  .batches .ticket { flex: 0 0 86%; scroll-snap-align: start; }
  .batches .ticket.is-current { cursor: pointer; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .batches .ticket { flex-basis: 58%; }
}
.batch-dots { display: flex; justify-content: center; gap: 4px; margin-bottom: 22px; }
.batch-dots button { width: 32px; height: 28px; display: grid; place-items: center; }
.batch-dots i { display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong); }
.batch-dots .is-current i { background: var(--pumpkin-deep); }
.batch-dots .is-on i { width: 24px; background: var(--bone); }
.batch-dots .is-on.is-current i { background: var(--pumpkin); }
@media (min-width: 900px) { .batch-dots { display: none; } }

/* Com a compra aberta, nada de aranha ou morcego passando por cima do formulário */
html:has(.drawer:not([hidden])) :is(.drop-spider, .bat-burst) { display: none; }

/* Estoque do ingresso em duas linhas sempre que o cartão é estreito: não invade o canhoto */
@media (max-width: 1199px) {
  .ticket-stock-row { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
}

/* Toque: sem efeito de hover grudado, alvo mínimo de 44px */
@media (hover: none) {
  .ticket:hover, .attr:hover { transform: none; }
  .btn, .stepper-btn, .icon-btn { min-height: 44px; }
}

@media (max-width: 720px) {
  /* Lanterna proporcional à tela pequena: senão o círculo de luz cobre o hero inteiro */
  .hero-dark {
    background: radial-gradient(circle at 50% 50%,
      rgba(255, 170, 80, 0.10) 0, rgba(255, 150, 60, 0.04) 55px, rgba(11, 9, 8, 0.3) 95px,
      rgba(11, 9, 8, 0.75) 140px, rgba(11, 9, 8, 0.93) 185px, rgba(11, 9, 8, 0.975) 240px);
  }
  /* Estoque do ingresso em duas linhas: não invade o canhoto */
  .ticket-stock-row { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
  /* Decoração no celular: só espia pela borda, sem disputar com o texto */
  .decor .paper { display: none; }
  .decor .poster { opacity: 0.4; scale: 0.6; }
  .decor > .poster:not([style*="right"]) { left: -64px !important; }
  .decor > .poster[style*="right"] { right: -64px !important; }
}