/* components/cards.css — Componente de cartão (.card), ícone em caixa (.ico) e estado vazio (.empty). Também define a grade .cards. */

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:1.6rem;text-align:left;transition:.15s}
button.card:hover{transform:translateY(-3px);border-color:var(--primary)}
.ico{width:68px;height:68px;border-radius:18px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;margin-bottom:1.1rem}
.ico .i{width:28px;height:28px}
.card h4{font-size:1.3rem;margin-bottom:.5rem}
.card p{color:var(--muted);margin-bottom:1rem}
.empty{text-align:center;color:var(--muted);padding:2.5rem 1rem}