/* Componente canônico dos lotes — limpo, escuro e com vermelho apenas no lote aberto. */
:root {
  --gothic-title: "Cinzel", Georgia, "Times New Roman", serif;
}

/* Tipografia mobile-first: gótica, encorpada e legível. */
.lots h2,
.checkout h2,
.lots h2 em,
.checkout h2 em {
  font-family: var(--gothic-title);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.035em;
  color: #f1edef;
  -webkit-text-fill-color: currentColor;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-stroke: 0;
}

.lots h2,
.checkout h2 {
  width: min(100%, 350px);
  max-width: 350px;
  margin: 4px 0 18px;
  font-size: clamp(41px, 11.5vw, 55px);
  line-height: .96;
  text-shadow:
    0 2px 0 #160207,
    0 5px 18px rgba(143, 4, 29, .2);
}

.lots h2 {
  filter:
    drop-shadow(0 2px 1px #000)
    drop-shadow(0 0 7px #000)
    drop-shadow(0 7px 12px rgba(0, 0, 0, .92));
}

.checkout h2 {
  font-size: clamp(39px, 10.9vw, 52px);
}

.lots h2 em,
.checkout h2 em {
  display: inline-block;
  color: #d91b3c;
  -webkit-text-fill-color: #d91b3c;
  text-shadow:
    0 1px 0 #ff8296,
    0 3px 0 #5b0010,
    0 8px 22px rgba(198, 7, 39, .26);
}

.lots .eyebrow,
.checkout .eyebrow {
  width: max-content;
  max-width: calc(100% - 96px);
  margin: 0 0 19px;
  padding: 2px 0 2px 11px;
  border: 0;
  border-left: 2px solid #db1739;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, .9);
  font-family: var(--gothic-title);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .09em;
  text-shadow: 0 0 14px rgba(218, 23, 57, .18);
  white-space: nowrap;
}

.lots .event-signature {
  position: relative;
  z-index: 4;
  width: max-content;
  max-width: calc(100% - 96px);
  margin: -5px 0 21px;
  padding: 3px 0 3px 12px;
  border-left: 2px solid #db1739;
  display: grid;
  gap: 4px;
  font-family: var(--gothic-title);
  text-transform: uppercase;
}

.lots .event-signature strong {
  color: rgba(255, 255, 255, .94);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .12em;
}

.lots .event-signature span {
  color: #eb4862;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .08em;
}

.lots .lot-list {
  gap: 12px;
  margin-top: 26px;
}

.lots .lot-ticket {
  --ticket-accent: #77777f;
  width: 100%;
  min-height: 116px;
  padding: 17px 17px 17px 20px;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 16px;
  background: linear-gradient(118deg, #08080a, #111115 52%, #070709);
  color: #fff;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 112px;
  gap: 14px;
  align-items: center;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .045);
  -webkit-mask: none;
  mask: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.lots .lot-confirmed {
  width: max-content;
  max-width: 100%;
  margin-top: 7px;
  padding: 5px 8px 5px 9px;
  border-left: 2px solid #ff1f3f;
  background: linear-gradient(90deg, rgba(139, 0, 22, .42), rgba(139, 0, 22, .04));
  color: #ff9baa;
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 25, 58, .42);
}

.lots .lot-confirmed b { color: #fff; font-size: 14px; font-weight: 800; }
.lots .lot-ticket[data-status="available"] .lot-confirmed { box-shadow: -8px 0 22px rgba(214, 0, 34, .18); }

.lots .lot-ticket::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 16px auto 16px 0;
  width: 3px;
  height: auto;
  display: none;
  background: none;
  opacity: 1;
  filter: none;
  box-shadow: none;
  pointer-events: none;
}

.lots .lot-ticket::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 18px;
  right: 128px;
  bottom: 18px;
  border: 0;
  border-left: 1px dashed rgba(255, 255, 255, .13);
  opacity: 1;
  pointer-events: none;
}

.lots .lot-ticket > * {
  position: relative;
  z-index: 2;
}

.lots .ticket-splatter {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  border-radius: inherit;
  opacity: .17;
  mix-blend-mode: screen;
  pointer-events: none;
}

.lots .lot-ticket:nth-child(1) .ticket-splatter {
  background:
    radial-gradient(circle at 18% 22%, #f51b3e 0 3px, transparent 4px),
    radial-gradient(ellipse at 24% 34%, #a70020 0 5px, transparent 7px),
    radial-gradient(circle at 32% 17%, #d3072f 0 2px, transparent 3px),
    radial-gradient(ellipse at 78% 74%, rgba(153, 0, 26, .75) 0 7px, transparent 10px),
    conic-gradient(from 58deg at 22% 29%, transparent 0 10%, rgba(184, 0, 31, .62) 11% 12%, transparent 13% 24%, rgba(232, 12, 49, .5) 25% 26%, transparent 27%);
}

.lots .lot-ticket:nth-child(2) .ticket-splatter {
  background:
    radial-gradient(circle at 72% 19%, #b80025 0 4px, transparent 5px),
    radial-gradient(circle at 82% 32%, #ed153c 0 2px, transparent 3px),
    radial-gradient(ellipse at 66% 42%, rgba(132, 0, 24, .76) 0 8px, transparent 11px),
    radial-gradient(circle at 15% 76%, #b50729 0 3px, transparent 4px),
    conic-gradient(from 212deg at 74% 30%, transparent 0 13%, rgba(180, 0, 32, .58) 14% 15%, transparent 16% 31%, rgba(224, 14, 48, .43) 32% 33%, transparent 34%);
}

.lots .lot-ticket:nth-child(3) .ticket-splatter {
  background:
    radial-gradient(ellipse at 13% 56%, #9f001e 0 7px, transparent 10px),
    radial-gradient(circle at 25% 70%, #e70d37 0 2px, transparent 3px),
    radial-gradient(circle at 36% 61%, #c10028 0 4px, transparent 5px),
    radial-gradient(circle at 87% 23%, rgba(155, 0, 28, .8) 0 3px, transparent 5px),
    conic-gradient(from 96deg at 25% 62%, transparent 0 8%, rgba(196, 0, 35, .54) 9% 10%, transparent 11% 22%, rgba(238, 16, 51, .4) 23% 24%, transparent 25%);
}

.lots .lot-ticket:nth-child(4) .ticket-splatter {
  background:
    radial-gradient(circle at 88% 65%, #d70732 0 4px, transparent 6px),
    radial-gradient(ellipse at 76% 72%, #90001b 0 9px, transparent 12px),
    radial-gradient(circle at 68% 55%, #f11943 0 2px, transparent 3px),
    radial-gradient(circle at 12% 21%, rgba(173, 0, 31, .78) 0 3px, transparent 4px),
    conic-gradient(from 285deg at 79% 67%, transparent 0 12%, rgba(206, 5, 42, .55) 13% 14%, transparent 15% 27%, rgba(150, 0, 28, .45) 28% 29%, transparent 30%);
}

.lots .lot-ticket:nth-child(5) .ticket-splatter {
  background:
    radial-gradient(ellipse at 48% 18%, #a80021 0 8px, transparent 11px),
    radial-gradient(circle at 58% 26%, #f01842 0 3px, transparent 4px),
    radial-gradient(circle at 39% 33%, #ca062e 0 2px, transparent 3px),
    radial-gradient(circle at 91% 79%, rgba(162, 0, 29, .78) 0 4px, transparent 6px),
    conic-gradient(from 165deg at 51% 25%, transparent 0 9%, rgba(215, 7, 44, .56) 10% 11%, transparent 12% 25%, rgba(161, 0, 30, .45) 26% 27%, transparent 28%);
}

.lots .lot-ticket[data-status="available"] .ticket-splatter {
  opacity: .36;
}

.lots .lot-ticket[data-status="sold_out"] .ticket-splatter {
  opacity: .1;
}

.lots .crime-outline-layer {
  opacity: .24;
}

.lots .crime-outline-layer img {
  filter: grayscale(1) sepia(.28) contrast(1.58) brightness(1.02) drop-shadow(0 0 13px rgba(182, 22, 50, .17));
}

.lots .lot-number {
  font-family: var(--condensed);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  color: #85858c;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 5px 18px rgba(0, 0, 0, .8);
}

.lots .lot-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.lots .lot-copy small {
  width: max-content;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .54);
  font-family: var(--condensed);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  box-shadow: none;
}

.lots .lot-copy strong {
  overflow: hidden;
  color: rgba(255, 255, 255, .86);
  font-family: var(--condensed);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .015em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: none;
}

.lots .lot-price {
  display: grid;
  gap: 6px;
  min-width: 0;
  text-align: right;
}

.lots .lot-price strong {
  color: rgba(255, 255, 255, .8);
  font-family: var(--condensed);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
  text-shadow: none;
}

.lots .lot-price small {
  color: rgba(255, 255, 255, .34);
  font-family: var(--condensed);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  white-space: nowrap;
}

.lots .lot-ticket[data-status="available"] {
  --ticket-accent: #ef173c;
  border-color: rgba(239, 23, 60, .76);
  background:
    radial-gradient(circle at 88% 18%, rgba(239, 23, 60, .2), transparent 38%),
    linear-gradient(118deg, #0b0708, #17080b 54%, #090708);
  box-shadow:
    0 22px 46px rgba(0, 0, 0, .72),
    0 0 0 1px rgba(239, 23, 60, .08),
    0 0 34px rgba(190, 7, 39, .13),
    inset 0 1px rgba(255, 255, 255, .07);
}

.lots .lot-ticket[data-status="available"]::before {
  display: block;
  background: linear-gradient(180deg, #52000e, #ef173c 45%, #8a0019);
  box-shadow: 0 0 15px rgba(239, 23, 60, .72);
}

.lots .lot-ticket[data-status="available"] .lot-number {
  color: transparent;
  background: linear-gradient(180deg, #fff 0%, #ff98a8 22%, #ef173c 56%, #7b0016 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 7px 13px rgba(132, 0, 23, .4));
}

.lots .lot-ticket[data-status="available"] .lot-copy small {
  border-color: rgba(255, 65, 94, .56);
  background: rgba(219, 10, 44, .15);
  color: #ff7187;
}

.lots .lot-ticket[data-status="available"] .lot-copy strong,
.lots .lot-ticket[data-status="available"] .lot-price strong {
  color: #fff;
}

.lots .lot-ticket[data-status="available"] .lot-price strong {
  font-size: 29px;
}

.lots .lot-ticket:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: #ff3453;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 35, 71, .27), transparent 40%),
    linear-gradient(118deg, #0d0809, #200a0e 54%, #0a0708);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .78), 0 0 38px rgba(203, 8, 42, .2);
}

.lots .lot-ticket[data-status="upcoming"],
.lots .lot-ticket[data-status="sold_out"] {
  opacity: .58;
  filter: none;
}

.lots .lot-ticket[data-status="sold_out"] {
  opacity: .42;
}

.lots .vip-notice {
  border: 1px solid rgba(74, 255, 139, .58);
  border-radius: 12px;
  background:
    radial-gradient(circle at 7% 50%, rgba(39, 208, 98, .13), transparent 29%),
    rgba(3, 7, 5, .94);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(39, 210, 98, .07),
    0 0 22px rgba(39, 210, 98, .2),
    inset 0 0 18px rgba(39, 210, 98, .045);
  clip-path: none;
}

.lots a.vip-notice {
  grid-template-columns: 42px 1fr auto;
  color: #fff;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.lots a.vip-notice:hover,
.lots a.vip-notice:focus-visible {
  border-color: rgba(91, 255, 150, .92);
  background-color: rgba(9, 48, 24, .78);
  outline: none;
  transform: translateY(-1px);
}

.vip-notice-arrow { color: #75ffa7; font-size: 25px; font-weight: 400; }

.lots .whatsapp-symbol {
  width: 42px;
  height: 42px;
  padding: 4px;
  border: 1px solid rgba(94, 255, 151, .34);
  border-radius: 11px;
  background: rgba(23, 164, 78, .12);
  box-shadow: 0 0 16px rgba(36, 221, 103, .17);
  overflow: hidden;
}

.lots .whatsapp-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lots .vip-notice strong {
  color: #6cff9f;
  text-shadow: 0 0 12px rgba(61, 238, 126, .24);
}

@media (max-width: 390px) {
  .lots .crime-outline-layer {
    opacity: .2;
  }

  .lots h2 {
    font-size: 39px;
  }

  .checkout h2 {
    font-size: 37px;
  }

  .lots .eyebrow,
  .checkout .eyebrow {
    max-width: calc(100% - 78px);
    font-size: 11px;
    letter-spacing: .07em;
  }

  .lots .event-signature {
    max-width: calc(100% - 76px);
    margin-top: -3px;
  }

  .lots .event-signature strong {
    font-size: 12px;
  }

  .lots .event-signature span {
    font-size: 10px;
  }

  .lots .lot-ticket {
    min-height: 110px;
    padding: 15px 13px 15px 17px;
    grid-template-columns: 53px minmax(0, 1fr) 98px;
    gap: 10px;
  }

  .lots .lot-ticket::after {
    right: 111px;
  }

  .lots .lot-number {
    font-size: 41px;
  }

  .lots .lot-copy strong {
    font-size: 16px;
  }

  .lots .lot-price strong {
    font-size: 21px;
  }

  .lots .lot-ticket[data-status="available"] .lot-price strong {
    font-size: 24px;
  }

  .lots .lot-price small {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lots .lot-ticket {
    transition: none;
  }
}

/* Sistema canônico de botões — gótico, minimalista e sem ornamentos soltos. */
.primary-action {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 56px;
  padding: 0 22px;
  border: 1px solid rgba(224, 22, 57, .62);
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(192, 12, 45, .12), transparent 48%),
    linear-gradient(180deg, #0d0c0f, #060608);
  clip-path: none;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .56),
    0 0 0 1px rgba(255, 255, 255, .018),
    inset 0 1px rgba(255, 255, 255, .055);
  color: #f5f1f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gothic-title);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .095em;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.primary-action::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 24px;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f02749, transparent);
  clip-path: none;
  opacity: .9;
  transform: none;
  transition: opacity .18s ease;
}

.primary-action::after {
  content: none;
}

.primary-action span {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

.primary-action:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #f22b4d;
  background:
    radial-gradient(circle at 50% 0%, rgba(220, 17, 52, .2), transparent 52%),
    linear-gradient(180deg, #121014, #080709);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, .64),
    0 0 22px rgba(200, 10, 42, .13),
    inset 0 1px rgba(255, 255, 255, .065);
}

.primary-action:active:not(:disabled) {
  transform: translateY(0);
  filter: none;
  background: linear-gradient(180deg, #070608, #10070a);
}

.primary-action:focus-visible,
.quiet-action:focus-visible,
.pix-copy button:focus-visible {
  outline: 2px solid #ff5872;
  outline-offset: 3px;
}

.primary-action:disabled {
  opacity: .48;
  cursor: wait;
}

.hero-action {
  position: absolute;
  z-index: 7;
  left: 4cqw;
  right: 4cqw;
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 92cqw;
  color: #f5f1f2;
}

.screen-header .quiet-action {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
  color: rgba(255, 255, 255, .76);
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.screen-header .quiet-action:hover {
  border-color: rgba(232, 30, 64, .48);
  background: rgba(190, 11, 42, .08);
  color: #fff;
}

.pix-copy button {
  min-width: 104px;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid rgba(232, 30, 64, .38);
  background: rgba(185, 11, 41, .1);
  color: #ff7188;
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.pix-copy button:hover {
  background: rgba(210, 16, 49, .18);
  color: #fff;
}

.whatsapp-action {
  grid-template-columns: 42px minmax(0, 1fr);
  border-radius: 12px;
}

.whatsapp-icon {
  padding: 4px;
  border: 1px solid rgba(89, 255, 148, .34);
  background: rgba(24, 174, 78, .13);
  overflow: hidden;
}

.whatsapp-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 390px) {
  .primary-action {
    min-height: 54px;
    padding-inline: 17px;
    font-size: 11px;
    letter-spacing: .08em;
  }

  .pix-copy button {
    min-width: 92px;
    padding-inline: 10px;
    font-size: 10px;
  }
}