/* ==========================================================================
   Seção 04 · Planos
   Três cards com o mesmo "kit" (e-books · aulas · manual): o que está incluso
   aparece preenchido, o que não está fica tracejado. Comparação visual,
   sem tabela.
   ========================================================================== */

.plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  max-width: 30rem;
  margin-inline: auto;
}

.plan {
  transition:
    translate var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}

.plan:hover {
  translate: 0 -6px;
}

/* Destaque do plano recomendado */
.plan--featured {
  box-shadow:
    var(--shadow-inset-top),
    var(--shadow-lg),
    0 0 80px -24px rgb(var(--rgb-mint) / 0.45);
}

.plan--featured .card__glow {
  height: 45%;
}

/* Linha "Manual de IA" incluída no Avançado */
.kit-row--accent {
  border-color: var(--color-accent-deep);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-inset-top), 0 0 28px -12px rgb(var(--rgb-mint) / 0.5);
}

/* O kit se monta depois que o card entra: linha por linha */
.js .plan[data-reveal] .kit-row {
  opacity: 0;
}

.plan.is-revealed .kit-row {
  animation: reveal-left 700ms var(--ease-out) both;
}

.plan.is-revealed .kit-row:nth-child(1) {
  animation-delay: calc(var(--reveal-delay, 0ms) + 350ms);
}

.plan.is-revealed .kit-row:nth-child(2) {
  animation-delay: calc(var(--reveal-delay, 0ms) + 500ms);
}

.plan.is-revealed .kit-row:nth-child(3) {
  animation-delay: calc(var(--reveal-delay, 0ms) + 650ms);
}

.planos__trust {
  margin-top: var(--space-12);
}

@media (min-width: 64em) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    max-width: none;
  }

  /* O recomendado é um pouco mais alto que os vizinhos */
  .plan--featured {
    margin-block: calc(var(--space-4) * -1);
    padding-block: calc(var(--card-pad) + var(--space-4));
  }

  .planos__trust {
    margin-top: var(--space-16);
  }
}