/* 10-cards.css
   Tarjetas base y títulos de secciones (sectionCard).
*/

/* Tarjeta base clara (para tema institucional) */
.sectionCard{
  border-radius: 22px;
  padding: 22px;

  /* Más vida: blanco + tintes suaves */
  background:
    radial-gradient(900px 220px at 10% 0%, var(--tintA), transparent 55%),
    radial-gradient(900px 220px at 90% 0%, var(--tintC), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--surface2));

  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.secTitle{ font-size: 28px; font-weight: 1000; margin:0; }
/* Texto secundario en tema claro */
.secText{
  color: var(--muted);
  margin-top: 6px;
}

/* Badge suave (mantiene estilo, mejora contraste en fondo claro) */
.badgeSoft{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;

  /* Badge con color suave (no gris) */
  border: 1px solid rgba(20,36,70,.14);
  background: rgba(255,255,255,.78);
  color: var(--ink);
}

/* badgeSoft como link con flecha */
.badgeLink{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: gap .15s ease, filter .15s ease;
}

.badgeLink i{
  font-size: 12px;
  transition: transform .15s ease;
}

.badgeLink:hover{
  filter: brightness(1.06);
  gap: 10px;
}

.badgeLink:hover i{
  transform: translateX(2px);
}