/* ── CARDS (SEM IMAGEM) ──────────────────────────────────── */
.card {
  background: var(--bg-elevated);
  border: 2px solid transparent;
  border-radius: var(--r-2xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    border-color var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
  cursor: default;
}
.card:hover {
  border-color: var(--orange-500);
  transform: translateX(4px) translateY(-4px);
  box-shadow: -5px 6px 0 var(--orange-500);
}
.card--lime:hover   { border-color: var(--lime-500);  box-shadow: -5px 6px 0 var(--lime-500); }
.card--teal:hover   { border-color: var(--teal-500);  box-shadow: -5px 6px 0 var(--teal-900); }
.card--outlined     { border-color: var(--orange-500); }
.card--outlined-lime { border-color: var(--lime-500); }

.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.card-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-lg);
  flex-shrink: 0;
}
.card-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.card-icon--lime   { background: rgba(170,255,69,.12); color: var(--lime-500); }
.card-icon--teal   { background: rgba(0,217,232,.12);  color: var(--teal-500); }
.card-icon--orange { background: rgba(255,107,43,.12); color: var(--orange-500); }

.card-overline {
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime-500);
}
.card-overline--teal { color: var(--teal-500); }
.card-title {
  font-family: var(--font-body);
  font-size: 18px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2;
  color: var(--text-1);
}
.card-title--lg { font-size: 22px; }
.card-desc  { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.card-meta  { font-size: 11px; color: var(--text-3); letter-spacing: .04em; }
.card-metric {
  font-family: var(--font-brand);
  font-size: 44px; font-weight: 700;
  letter-spacing: -.025em; line-height: 1;
  color: var(--lime-500);
}
.card-metric--teal   { color: var(--teal-500); }
.card-metric--orange { color: var(--orange-500); }

.card-img-wrap { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 4px; }
.card-img-wrap img { width: 100%; height: auto; display: block; }

.card-divider { height: 1px; background: var(--border); }
.card-footer  { margin-top: auto; padding-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.card-progress { display: flex; flex-direction: column; gap: 6px; }
.card-progress-track { height: 4px; background: var(--n-700); border-radius: var(--r-full); overflow: hidden; }
.card-progress-fill  { height: 100%; border-radius: var(--r-full); background: var(--lime-500); }
.card-progress-fill--teal   { background: var(--teal-500); }
.card-progress-fill--orange { background: var(--orange-500); }
.card-progress-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }

/* ── FILLED VARIANTS ─────────────────────────────────────── */
.card--filled-lime   { background: var(--lime-500); }
.card--filled-teal   { background: var(--teal-500); }
.card--filled-orange { background: var(--orange-500); }

.card--filled-lime:hover   { border-color: var(--lime-900);   box-shadow: -5px 6px 0 var(--lime-900); }
.card--filled-teal:hover   { border-color: var(--teal-900);   box-shadow: -5px 6px 0 var(--teal-900); }
.card--filled-orange:hover { border-color: var(--orange-900); box-shadow: -5px 6px 0 var(--orange-900); }

.card--filled-lime .card-overline,
.card--filled-lime .card-title,
.card--filled-lime .card-metric,
.card--filled-teal .card-overline,
.card--filled-teal .card-title,
.card--filled-teal .card-metric,
.card--filled-orange .card-overline,
.card--filled-orange .card-title,
.card--filled-orange .card-metric  { color: var(--n-950); }

.card--filled-lime .card-desc,
.card--filled-teal .card-desc,
.card--filled-orange .card-desc    { color: rgba(10,10,10,.75); }

.card--filled-lime .card-meta,
.card--filled-lime .card-progress-labels,
.card--filled-teal .card-meta,
.card--filled-teal .card-progress-labels,
.card--filled-orange .card-meta,
.card--filled-orange .card-progress-labels { color: rgba(10,10,10,.55); }

.card--filled-lime .card-icon--lime,
.card--filled-teal .card-icon--teal,
.card--filled-orange .card-icon--orange { background: rgba(10,10,10,.12); color: var(--n-950); }

.card--filled-lime .card-divider,
.card--filled-teal .card-divider,
.card--filled-orange .card-divider       { background: rgba(10,10,10,.18); }

.card--filled-lime .card-progress-track,
.card--filled-teal .card-progress-track,
.card--filled-orange .card-progress-track { background: rgba(10,10,10,.18); }

.card--filled-lime .card-progress-fill,
.card--filled-teal .card-progress-fill,
.card--filled-orange .card-progress-fill  { background: var(--n-950); }