/* ==========================================================================
   Componente: card
   Valores: 06-reference.css §8 / 07-visual-system.md §42–45
   Profundidad mediante borde y superficie; sin sombras.
   ========================================================================== */

.fx-card {
  position: relative;
  border: 1px solid var(--fx-color-line);
  border-radius: 0;
  background: var(--fx-color-surface-high);
  transition:
    border-color var(--fx-duration-fast) var(--fx-ease-standard),
    transform var(--fx-duration-fast) var(--fx-ease-standard);
}

.fx-card--interactive:hover {
  border-color: var(--fx-color-carbon);
  transform: translateY(-1px);
}

.fx-card__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--fx-space-2);
  padding: var(--fx-space-3) var(--fx-space-4);
  border-bottom: 1px solid var(--fx-color-line);
  color: var(--fx-color-slate);
  font-family: var(--fx-font-mono);
  font-size: var(--fx-text-label-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fx-card__body {
  padding: var(--fx-space-6);
}

.fx-card__body > :last-child {
  margin-bottom: 0;
}