:root {
  --accent: #118f40;
}
.accent-bg {
  background-color: var(--accent);
}
.accent-stroke {
  stroke: var(--accent);
}
.accent-text {
  color: var(--accent);
}
.focus-ring:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1rem;
}

.cards-grid {
}
.cards-grid .card {
  filter: none;
  transform: scale(1);
  transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cards-grid:hover .card {
  filter: blur(3px);
  transform: scale(0.95);
}
.cards-grid .card:hover {
  filter: none !important;
  transform: scale(1.05) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.cards-grid .card:focus-visible {
  filter: none !important;
  transform: scale(1.05) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.card {
  border: 2px solid var(--accent);
  border-radius: 1rem;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* baja el icono para que quede encima del título (no pegado al borde superior) */
.icon-wrap {
  margin-top: 18px; /* súbele/bájele a gusto (12–24px suele verse bien) */
  margin-bottom: 6px; /* pequeño respiro antes del título */
}

/* compacta el bloque título/texto */
.card-title {
  margin-top: 6px;
}
.card-text {
  margin-top: 6px;
}