/* ===== Grid numerado 2×4 (exacto al mock) ===== */
:root{
  --g-card:#0f172a;       /* fondo tarjeta */
  --g-border:#223254;     /* borde */
  --g-text:#e2e8f0;       /* título */
  --g-muted:#c7d2fe;      /* párrafo */
  --g-grad-a:#06b6d4;     /* degradado badge (inicio) */
  --g-grad-b:#0ea5e9;     /* degradado badge (fin) */
  --g-radius:18px;
  --g-shadow:0 10px 26px rgba(2,6,23,.28);
}

.goals-grid{max-width:1200px;margin:0 auto;padding:24px 20px}
.goals-title{margin:0 0 16px;font-size:1.9rem;font-weight:800;letter-spacing:.3px}

.goals{
  list-style:none; padding:0; margin:0;
  display:grid; gap:18px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* Tarjeta */
.goal{
  background:var(--g-card);
  border:1px solid var(--g-border);
  border-radius:20px;
  box-shadow:var(--g-shadow);
  padding:18px;
  display:grid; gap:12px;
  min-height:220px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.goal:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(2,6,23,.35) }

/* Badge numerado grande */
.goal-n{
  display:inline-grid; place-items:center;
  width:84px; height:84px; border-radius:14px;
  background:linear-gradient(135deg,var(--g-grad-a),var(--g-grad-b));
  color:#031026; font-weight:800; font-size:2.2rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}

/* Tipografía */
.goal-h{ margin:.2rem 0 .3rem; color:var(--g-text); font-size:1.15rem; line-height:1.35 }
.goal-p{ margin:0; color:var(--g-muted); line-height:1.55 }

/* Responsive 4→3→2→1 */
@media (max-width:1100px){ .goals{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:820px){  .goals{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){
  .goals{ grid-template-columns:1fr }
  .goal{ min-height:auto }
  .goal-n{ width:72px; height:72px; font-size:1.9rem }
}