.main-content { width: min(100% - 2rem, var(--cont)); margin: 40px auto; text-align: center; }
.page-title { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: 30px; color: color-mix(in srgb, var(--brand) 80%, #1e293b); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
}
.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
  box-shadow: 0 18px 40px color-mix(in srgb, var(--brand) 16%, transparent);
}

.card-body p {
  font-size: 1.1rem; font-weight: 600; color: color-mix(in srgb, var(--brand) 60%, #1e3a8a);
  text-align: center;
}

.card-footer { margin-top: 16px; text-align: center; }
.card-btn {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #ffffff; padding: 10px 20px; border-radius: 10px; font-weight: 700;
  display: inline-block; border: 0;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent);
  transition: transform .04s ease, box-shadow .2s ease;
}
.card-btn:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 45%, transparent); }
.card-btn:active { transform: translateY(1px); }

/* Fade-in básico (com JS) */
.card.fade-prepare { opacity: 0; transform: translateY(10px); }
.card.fade-in { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }