/* ==========================================================================
   Seção 07 · Comece agora
   Fechamento que espelha a hero: "dinheiro" riscado de novo, escolha rápida
   de plano e a marca gigante saindo da página.
   ========================================================================== */

.final {
  overflow: hidden;
  padding-bottom: 0;
  border-top: var(--border-width) solid var(--color-border);
  text-align: center;
}

.final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.final__line {
  display: block;
}

/* "dinheiro" é riscado quando o título entra (mesmo gesto da hero) */
.final__title.is-revealed .strike,
html:not(.js) .final__title .strike {
  background-size: 100% max(0.07em, 2px);
  color: rgb(var(--rgb-mist) / 0.36);
  transition-delay: 900ms, 1050ms;
}

.final__lead {
  margin-bottom: var(--space-4);
}

/* ------------------------------------------------------- Escolha rápida */
.quick-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-3);
  width: 100%;
  max-width: 58rem;
}

.quick-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-16) var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  text-align: left;
  background: var(--gradient-surface);
  box-shadow: inset 0 0 0 1px var(--color-border-strong), var(--shadow-md);
  transition:
    translate var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}

.quick-plan:hover {
  translate: 0 -4px;
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-mint) / 0.45), var(--glow-md);
}

.quick-plan--featured {
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-mint) / 0.55), 0 0 48px -16px rgb(var(--rgb-mint) / 0.5);
}

/* Selo sobre a borda superior: não disputa espaço com o conteúdo */
.quick-plan__badge {
  position: absolute;
  top: 0;
  right: var(--space-5);
  translate: 0 -50%;
}

.quick-plan__price {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.quick-plan--featured .quick-plan__price {
  color: var(--color-accent);
}

.quick-plan__desc {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.quick-plan__arrow {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  background: rgb(var(--rgb-mist) / 0.06);
  transition:
    translate var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.quick-plan:hover .quick-plan__arrow {
  translate: 3px 0;
  color: var(--color-on-accent);
  background: var(--color-accent);
}

.final .trust-list {
  margin-top: var(--space-4);
}

/* ------------------------------------------------------- Marca gigante */
.final__wordmark {
  margin-top: var(--space-16);
  overflow: hidden;
  font-size: 16.5vw;
  font-weight: var(--weight-bold);
  line-height: 0.8;
  letter-spacing: -0.06em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.final__wordmark > span {
  display: block;
  padding-bottom: 0.04em;
  color: transparent;
  background: linear-gradient(180deg, rgb(var(--rgb-mist) / 0.18) 0%, rgb(var(--rgb-mist) / 0) 80%);
  -webkit-background-clip: text;
  background-clip: text;
}

.final__wordmark .brand-dot {
  background: rgb(var(--rgb-mint) / 0.5);
}

@media (min-width: 48em) {
  .quick-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quick-plan {
    padding-right: var(--space-6);
  }

}

/* Mobile: espaço para o CTA fixo não cobrir o fim da página */
@media (max-width: 47.99em) {
  .final__wordmark {
    margin-bottom: var(--space-16);
  }
}