/* Pré-venda: um cartão de oferta. À esquerda o que vem; à direita o preço, o prazo e o botão. */
.offer {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.75rem, 1.5vw, 1rem) clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--r-feature);
  background: var(--ferro);
  box-shadow: var(--depth-card), var(--sombra-longa);
}

/* ── O que vem ── */
.offer__value {
  display: flex;
  flex-direction: column;
  padding-block: clamp(1rem, 2.5vw, 2rem);
}

.offer__kicker {
  color: var(--nevoa);
  font-size: var(--text-sm);
  font-weight: 600;
}

.offer__list {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.offer__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.offer__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: rgb(255 91 31 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 91 31 / 0.2);
  color: var(--brasa);
}

.offer__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.8;
}

.offer__item {
  display: grid;
  gap: 0.15rem;
  padding-top: 0.1rem;
}

.offer__item b {
  font-size: var(--text-lg);
  font-weight: 650;
  line-height: 1.3;
}

.offer__item small {
  color: var(--nevoa);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.offer svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.offer__start {
  margin-top: 1.5rem;
  color: var(--nevoa);
  font-size: var(--text-sm);
}

/* A escada de lotes: quanto o preço sobe e quando */
.offer__ladder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: auto 0 0;
  padding: 1.75rem 0 0;
  list-style: none;
}

.offer__ladder li {
  display: grid;
  gap: 0.1rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--aco);
  white-space: nowrap;
}

.offer__ladder span {
  color: var(--nevoa);
  font-size: var(--text-xs);
  font-weight: 600;
}

.offer__ladder b {
  font-size: var(--text-lg);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.offer__ladder small {
  color: var(--nevoa);
  font-size: var(--text-xs);
}

.offer__ladder [data-status='current'] {
  background: rgb(255 91 31 / 0.08);
  box-shadow: inset 0 0 0 1.5px var(--brasa);
}

.offer__ladder [data-status='current'] small {
  color: var(--brasa-forte);
  font-weight: 650;
}

.offer__ladder [data-status='next'] b {
  color: var(--nevoa);
}

.offer__ladder [data-status='past'] {
  opacity: 0.45;
}

.offer__ladder [data-status='past'] b {
  text-decoration: line-through;
}

/* ── O preço: o painel escuro, o nível mais alto de profundidade da página ── */
.offer__price {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
  border-radius: calc(var(--r-feature) - 6px);
  background:
    radial-gradient(90% 60% at 100% 0%, rgb(255 91 31 / 0.22), transparent 60%),
    linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.05) 48%, transparent 60%),
    linear-gradient(160deg, #24262b, #0f1012 55%);
  box-shadow: var(--depth-feature);
  color: var(--giz);
}

.offer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.offer__lot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 650;
}

.offer__lot i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgb(34 197 94 / 0.2);
  animation: offer-live 2s ease-in-out infinite;
}

@keyframes offer-live {
  50% {
    box-shadow: 0 0 0 7px rgb(34 197 94 / 0.05);
  }
}

.offer__save {
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  background: var(--incandescente);
  color: #1b1208;
  font-size: var(--text-xs);
  font-weight: 750;
  white-space: nowrap;
}

.offer__was {
  margin-top: 1.5rem;
  color: var(--nevoa);
  font-size: var(--text-sm);
}

.offer__was s {
  text-decoration-thickness: 1.5px;
}

.offer__now {
  margin-top: 0.2rem;
  font-size: clamp(3.25rem, 2rem + 3.5vw, 4.75rem);
  font-weight: 850;
  font-stretch: 125%;
  letter-spacing: -0.055em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.offer__note,
.offer__seats {
  margin-top: 0.5rem;
  color: var(--nevoa);
  font-size: var(--text-sm);
}

.offer__seats {
  color: var(--incandescente);
}

.offer__clock-label {
  margin-top: 1.5rem;
  color: var(--nevoa);
  font-size: var(--text-xs);
  font-weight: 600;
}

.offer__clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.offer__clock span {
  display: grid;
  justify-items: center;
  padding: 0.6rem 0 0.5rem;
  border-radius: var(--r-control);
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 0 0 1px rgb(255 255 255 / 0.05);
}

.offer__clock b {
  font-size: 1.6rem;
  font-weight: 750;
  font-stretch: 110%;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.offer__clock small {
  color: var(--nevoa);
  font-size: 0.7rem;
}

.offer__cta {
  min-height: 58px;
  margin-top: 1.5rem;
  font-size: var(--text-lg);
}

.offer__payment,
.offer__guarantee {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  color: var(--nevoa);
  font-size: var(--text-xs);
}

.offer__guarantee {
  align-items: flex-start;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}

.offer__guarantee svg {
  width: 1.6rem;
  height: 1.6rem;
  color: #4ade80;
  stroke-width: 1.8;
}

.offer__guarantee span {
  display: grid;
  gap: 0.1rem;
  font-size: var(--text-sm);
}

.offer__guarantee b {
  color: var(--giz);
  font-weight: 650;
}

/* ── Lista de espera em uma linha ── */
.waitlist {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: center;
  gap: 0.75rem 2rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--aco);
}

.waitlist__text h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  font-stretch: 110%;
}

.waitlist__text p {
  margin-top: 0.2rem;
  color: var(--nevoa);
  font-size: var(--text-sm);
}

.waitlist__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0.5rem;
}

.waitlist__fields label span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.waitlist input {
  width: 100%;
  min-height: 50px;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--r-control);
  background: var(--ferro);
  box-shadow: inset 0 0 0 1px var(--aco);
  color: var(--giz);
  font: inherit;
  font-size: var(--text-sm);
  transition: box-shadow 160ms;
}

.waitlist input::placeholder {
  color: var(--nevoa);
}

.waitlist input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--incandescente);
}

.waitlist input[aria-invalid='true'] {
  box-shadow: inset 0 0 0 1.5px var(--brasa);
}

.waitlist .btn {
  min-height: 50px;
}

.waitlist__consent {
  display: flex;
  grid-column: 2;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--nevoa);
  font-size: var(--text-xs);
  line-height: 1.45;
  cursor: pointer;
}

.waitlist__consent input {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  flex: none;
  margin-top: 0.05rem;
  padding: 0;
  accent-color: var(--brasa);
  box-shadow: none;
}

.waitlist__consent a {
  color: var(--giz);
}

/* Campo que só robô preenche: fora da tela, fora do teclado */
.waitlist__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.waitlist__msg {
  grid-column: 2;
  font-size: var(--text-sm);
}

.waitlist__msg:empty {
  display: none;
}

.waitlist__msg[data-tone='error'] {
  color: var(--brasa-forte);
}

.waitlist__msg[data-tone='ok'] {
  color: var(--giz);
}

@media (max-width: 1100px) {
  .waitlist {
    grid-template-columns: minmax(0, 1fr);
  }

  .waitlist__msg,
  .waitlist__consent {
    grid-column: 1;
  }
}

@media (max-width: 960px) {
  .offer {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.75rem;
  }

  /* No celular o preço vem primeiro */
  .offer__price {
    order: -1;
  }

  .offer__value {
    padding: 0.5rem 0.75rem 0.75rem;
  }
}

@media (max-width: 640px) {
  .waitlist__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Lotes em linhas: nome e data à esquerda, preço à direita */
  .offer__ladder {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  .offer__ladder li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name price' 'when price';
    align-items: center;
    padding: 0.65rem 0.9rem;
  }

  .offer__ladder span { grid-area: name; }
  .offer__ladder b { grid-area: price; }
  .offer__ladder small { grid-area: when; }

  .offer__item b {
    font-size: var(--text-base);
  }

  .offer__list {
    gap: 0.85rem;
  }
}

/* ── O fluxo do cartão de preço: preço, prazo, uma ação, o cupom discreto, a garantia e as letras
   miúdas por último. Só o botão principal é cheio; o cupom é um caminho secundário. ── */
.offer__price .offer__guarantee {
  order: 1;
}

.offer__price .offer__legal {
  order: 2;
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.55;
}

.offer__coupon {
  margin-top: 0.85rem;
}

.offer__coupon summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: fit-content;
  margin: 0 auto;
  padding: 0.35rem 0.6rem;
  border-radius: 99px;
  color: var(--nevoa);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  transition: color 160ms;
}

.offer__coupon summary::-webkit-details-marker {
  display: none;
}

/* O ticket antes do texto e a seta que vira ao abrir */
.offer__coupon summary::before {
  content: '';
  width: 1rem;
  height: 0.7rem;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 3px, #000 3.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 3px, #000 3.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 3px, #000 3.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 3px, #000 3.5px) right / 51% 100% no-repeat;
}

.offer__coupon summary::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  margin-top: -0.2rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms var(--ease-out), margin 200ms;
}

.offer__coupon[open] summary::after {
  margin-top: 0.2rem;
  transform: rotate(-135deg);
}

.offer__coupon summary:hover,
.offer__coupon[open] summary {
  color: var(--giz);
}

.offer__coupon form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding: 1rem;
  border-radius: var(--r-control);
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
}

.offer__coupon label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 0.4rem;
  color: var(--nevoa);
  font-size: var(--text-xs);
  font-weight: 600;
}

.offer__coupon input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--r-control);
  background: rgb(0 0 0 / 0.35);
  color: var(--giz);
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.offer__coupon input::placeholder {
  color: var(--nevoa);
  font-family: var(--font);
  letter-spacing: 0;
  text-transform: none;
}

.offer__coupon input:focus-visible {
  outline: 2px solid var(--brasa);
  outline-offset: 1px;
  border-color: transparent;
}

/* O segundo botão é contorno: o cheio continua sendo só o principal */
.offer__coupon .btn {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0 1rem;
  font-size: var(--text-sm);
  white-space: nowrap;
  min-height: 48px;
  background: transparent;
  color: var(--giz);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
}

.offer__coupon .btn:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.06);
}

.offer__coupon .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.offer__coupon form p,
.offer__coupon [data-cupom-aviso] {
  color: var(--nevoa);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.offer__coupon [data-cupom-aviso] {
  margin-top: 0.5rem;
  color: #ff9a7a;
}

.offer__coupon [data-cupom-aviso]:empty {
  display: none;
}

.offer__price .offer__payment {
  justify-content: center;
  margin-top: 0.75rem;
}

@media (max-width: 640px) {
  .offer__price {
    padding: 1.35rem 1.15rem;
  }

  .offer__clock b {
    font-size: 1.4rem;
  }

  .offer__cta {
    min-height: 54px;
    font-size: var(--text-base);
  }
}