/* GRID */
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;

}

/* CARDS */
.card {
  background: var(--white);
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
}

/* IMAGEN */
.img {
  height: 140px;
  background: #e9edf2;
  border-radius: var(--radius);
  margin-bottom: 10px;
}

/* LINKS */
.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* BOTONES */
.btn {
  padding: 11px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: 0.2s;
}

.btn-preview {
  background: var(--primary);
  color: white;
}

.btn-preview:hover {
  background: #1e5f8c;
}

.btn-copy {
  background: var(--white);
  border: 1px solid var(--border);
}

.btn-copy:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* FORM */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

input, textarea {
  background: #f3f4f6;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
}

input:focus, textarea:focus {
  border-color: var(--primary);
  outline: none;
}

/* SERVICIOS */
.service {
  text-align: center;
  padding: 25px;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: 0.3s;
  cursor: pointer;
}

.service:hover {
  transform: translateY(-5px);
}